:root {
  --bg: #0f1115;
  --card: #161a22;
  --text: #e8eaf0;
  --muted: #9aa3b2;
  --danger: #ff4d4f;
  --ok: #52c41a;
  --line: rgba(255,255,255,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}
#app{max-width: 900px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column}
.topbar{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
}
.title{font-size:18px; font-weight:700}
.subtitle{font-size:12px; color:var(--muted); margin-top:4px}
.content{padding:12px 12px 80px; flex:1}
.tabs{
  position:fixed;
  left:0; right:0; bottom:0;
  display:flex;
  background: rgba(10,12,16,.92);
  border-top:1px solid var(--line);
  backdrop-filter: blur(8px);
}
.tabs .tab{
  flex:1;
  padding:14px 10px;
  background:transparent;
  border:0;
  color: var(--muted);
  font-size:14px;
}
.tabs .tab.active{color:var(--text); font-weight:700}
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}
.row{display:flex; gap:10px; align-items:center; justify-content:space-between}
.btn{
  background:#2b3350;
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}
.btn.secondary{background:transparent}
.btn.danger{background: rgba(255,77,79,.15); border-color: rgba(255,77,79,.35)}
.btn.ok{background: rgba(82,196,26,.15); border-color: rgba(82,196,26,.35)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.hidden{display:none}
.list{display:flex; flex-direction:column; gap:8px}
.item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
}
.item .meta{color:var(--muted); font-size:12px}
.badge{font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
.badge.danger{border-color:rgba(255,77,79,.35); color:#ffb3b3}
.badge.ok{border-color:rgba(82,196,26,.35); color:#b9f1a5}
input, select, textarea{
  width:100%;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  color: var(--text);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}
textarea{min-height:84px; resize:vertical}
.h2{font-size:16px; font-weight:800; margin:0 0 8px}
.small{font-size:12px; color:var(--muted)}
hr{border:0; border-top:1px solid var(--line); margin:10px 0}