:root{
  --bg-primary:#0F172A;
  --bg-surface:#111827;

  --brand-primary:#2563EB;
  --brand-primary-pressed:#1D4ED8;

  --text-primary:#E5E7EB;
  --text-secondary:#94A3B8;

  --r-12:12px;
  --r-14:14px;
  --r-16:16px;

  --p-16:16px;

  --topbar-h:56px;
  --bottomnav-h:72px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
}

.app{ min-height:100%; display:flex; flex-direction:column; }

.topbar{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 var(--p-16);
  background:var(--bg-primary);
  position:sticky;
  top:0;
  z-index:10;
}

.topbar__title{ flex:1; min-width:0; }
.h2{ font-weight:600; font-size:17px; line-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h1{ font-weight:600; font-size:20px; line-height:26px; }
.body{ font-weight:400; font-size:15px; line-height:20px; }
.caption{ font-weight:400; font-size:13px; line-height:18px; }
.text-secondary{ color:var(--text-secondary); }

.icon-btn{
  width:36px; height:36px;
  border:none;
  background:transparent;
  color:var(--text-primary);
  border-radius:10px;
  font-size:18px;
  cursor:pointer;
}
.icon-btn:active{ background:rgba(255,255,255,0.06); }

.content{
  flex:1;
  padding:var(--p-16);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-bottom:calc(var(--bottomnav-h) + 18px);
}

.card{
  background:var(--bg-surface);
  border-radius:var(--r-16);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stack{ display:flex; flex-direction:column; gap:8px; }

.btn{
  width:100%;
  border:none;
  border-radius:var(--r-14);
  padding:14px 16px;
  font-weight:500;
  font-size:15px;
  cursor:pointer;
}
.btn-primary{ background:var(--brand-primary); color:var(--text-primary); }
.btn-primary:active{ background:var(--brand-primary-pressed); }
.btn-secondary{ background:rgba(255,255,255,0.06); color:var(--text-primary); }
.btn-danger{ background:rgba(239,68,68,0.18); color:var(--text-primary); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.chip-row{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
}
.chip{
  border:none;
  border-radius:var(--r-12);
  padding:10px 14px;
  font-weight:500;
  font-size:15px;
  color:var(--text-primary);
  background:rgba(255,255,255,0.06);
  cursor:pointer;
  white-space:nowrap;
}
.chip.active{ background:var(--brand-primary); }
.chip.disabled{ opacity:.5; cursor:not-allowed; }

.badge{
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  color:var(--text-secondary);
}

.bottomnav{
  height:var(--bottomnav-h);
  position:fixed;
  left:0; right:0; bottom:0;
  background:var(--bg-surface);
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:10px 12px;
  z-index:20;
}

.nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:var(--text-secondary);
  text-decoration:none;
  font-size:13px;
}
.nav-item .ico{ font-size:20px; line-height:20px; }
.nav-item.active{ color:var(--brand-primary); }