:root{
  --bg:#0e1117; --fg:#e8ecf2;
  --muted: rgba(232,236,242,.62);
  --card:#141a23; --bord:rgba(255,255,255,.08);
  --brand1:#8854ff; --brand2:#ff4f87;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  height:56px; border-bottom:1px solid var(--bord);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  backdrop-filter: blur(6px);
}
.logo{height:28px}

.container{padding:16px 14px 100px; max-width:980px; margin:0 auto}

.title-row{display:flex; align-items:center; gap:12px; margin:6px 0 14px}
.title{font-size:18px; font-weight:800}
.muted{color:var(--muted)}

.grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.cat{
  display:flex; align-items:center; gap:12px; padding:14px;
  background:var(--card); border:1px solid var(--bord); border-radius:14px;
  color:var(--fg); cursor:pointer;
}
.cat-ic{width:34px;height:34px}
.cat-title{font-weight:700}

.stack{display:flex; flex-direction:column; gap:10px}
.card{
  background:var(--card); border:1px solid var(--bord);
  border-radius:14px; padding:16px;
}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px}

.btn{
  padding:10px 14px; border-radius:12px; border:1px solid var(--bord);
  background:#171f2b; color:var(--fg); cursor:pointer;
}
.btn.small{padding:8px 10px; font-size:13px}
.btn.big{padding:14px 16px; font-size:16px; width:100%}
.btn.primary{
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
  border:0;
}
.btn.ghost{background:transparent}

.view{display:none}
.view.active{display:block}

/* Sheet (оформление) */
.sheet{position:fixed; inset:0; display:none; z-index:20; background:rgba(0,0,0,.5)}
.sheet.show{display:block}
.sheet-box{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--bg); border-top:1px solid var(--bord); border-radius:16px 16px 0 0;
  padding:16px 14px 20px;
}
.sheet-hdr{display:flex; align-items:center; justify-content:space-between}
.sheet-title{font-weight:800; font-size:16px}
.x{background:none;border:0;color:#fff;opacity:.6;cursor:pointer;font-size:22px;line-height:22px;padding:2px 6px;border-radius:8px}
.x:hover{opacity:1;background:rgba(255,255,255,.06)}
.fld{display:flex; flex-direction:column; gap:6px; margin:10px 0}
.fld input{
  background:#0d131c; border:1px solid var(--bord); color:var(--fg);
  padding:12px; border-radius:12px; outline:none;
}
.total{display:flex; justify-content:flex-end; gap:8px; margin:8px 0 14px}

/* Таббар */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:#0d131c; border-top:1px solid var(--bord);
}
.tab-btn{
  padding:10px 8px; background:transparent; border:0; color:var(--muted); cursor:pointer;
}
.tab-btn.active{color:var(--fg); font-weight:700}

/* ===== Legal footer ===== */
.legal-bar{
  position: fixed;
  left: 0; right: 0; bottom: 64px; /* над таббаром */
  display: flex; justify-content: center; gap: 8px;
  font-size: 12px; line-height: 16px;
  color: rgba(232,236,242,.55);
  pointer-events: auto;
}
.legal-bar .link{
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; cursor: pointer;
  text-decoration: underline dotted;
}
.legal-bar .link:hover{ color: rgba(232,236,242,.85); }
.legal-bar .dot{ opacity: .35 }

/* ===== Modal ===== */
.modal{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6);
  display: none;
}
.modal.show{ display: block; }
.modal-content{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(920px, 92vw);
  max-height: 80vh;
  background: #0e1117;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  overflow: hidden;
}
.modal-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.modal-header .title{ font-weight: 800; font-size: 16px; }
.modal-body{
  padding: 16px;
  color: #e8ecf2; font-size: 14px; line-height: 1.55;
  overflow: auto; white-space: pre-wrap;
}