/* ═══════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════ */
.shell {
  display:grid;
  grid-template-columns:var(--sidebar) 1fr;
  grid-template-rows:var(--topbar) 1fr;
  grid-template-areas:"sidebar topbar""sidebar main";
  min-height:100vh
}

/* ── Sidebar ── */
.sidebar {
  grid-area:sidebar; background:var(--side);
  border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh;
  overflow-y:auto; display:flex; flex-direction:column; z-index:50
}
.sb-logo {
  display:flex; align-items:center; gap:10px;
  padding:0 16px; height:var(--topbar);
  border-bottom:1px solid var(--line); flex-shrink:0
}
.sb-mark {
  width:28px; height:28px; border-radius:7px;
  background:var(--accent); display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:700;
  color:#fff; flex-shrink:0; letter-spacing:-.5px
}
.sb-name { font-size:15px; font-weight:700; letter-spacing:-.4px }
.sb-name em { color:var(--accent); font-style:normal }
.sb-body { padding:12px 8px 8px; flex:1 }
.sb-lbl {
  font-size:10px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--tx3);
  padding:0 6px; margin-bottom:6px
}
.cat {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; border-radius:var(--r-sm); cursor:pointer;
  color:var(--tx2); transition:all var(--t) var(--ease);
  border:1px solid transparent; gap:8px; user-select:none
}
.cat:hover { background:var(--bg3); color:var(--tx) }
.cat.on { background:var(--accent-lo); color:var(--accent); border-color:var(--accent-mid) }
.cat-l { display:flex; align-items:center; gap:7px; min-width:0 }
.cat-ico { font-size:13px; flex-shrink:0; line-height:1 }
.cat-nm { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cat-n {
  font-family:var(--mono); font-size:10px; font-weight:500;
  color:var(--tx3); background:var(--bg3);
  padding:1px 7px; border-radius:10px; flex-shrink:0;
  min-width:26px; text-align:center; transition:all var(--t)
}
.cat.on .cat-n { background:var(--accent-mid); color:var(--accent) }
.sb-foot {
  padding:10px 8px 12px; border-top:1px solid var(--line); flex-shrink:0
}
.sb-cache {
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; color:var(--tx3); padding:0 4px
}
.dot { width:6px; height:6px; border-radius:50%; background:var(--tx3); flex-shrink:0 }
.dot.ok { background:var(--green); box-shadow:0 0 5px var(--green) }
.dot.warn { background:var(--amber) }

/* ── Topbar ── */
.topbar {
  grid-area:topbar; background:var(--glass);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; padding:0 20px;
  position:sticky; top:0; z-index:40
}
.srch-wrap { position:relative; flex:1; max-width:300px }
.srch-ico {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--tx3); font-size:13px; pointer-events:none
}
.srch {
  width:100%; padding:7px 10px 7px 30px;
  background:var(--bg3); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--tx); font-size:13px;
  outline:none; transition:all var(--t) var(--ease)
}
.srch::placeholder { color:var(--tx3) }
.srch:focus { border-color:var(--accent); background:var(--bg2); box-shadow:0 0 0 3px var(--accent-lo) }
.tb-sep { width:1px; height:18px; background:var(--line); flex-shrink:0 }
.fg { display:flex; align-items:center; gap:6px; flex-shrink:0 }
.fg-lbl { font-size:11px; color:var(--tx3); font-weight:500; white-space:nowrap }
.sel-w { position:relative }
.sel {
  appearance:none; background:var(--bg3); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--tx); font-size:12px;
  padding:6px 22px 6px 9px; outline:none; cursor:pointer; transition:all var(--t)
}
.sel:hover,.sel:focus { border-color:var(--line2); background:var(--bg2) }
.sel-arr { position:absolute; right:7px; top:50%; transform:translateY(-50%); color:var(--tx3); pointer-events:none; font-size:10px }
.tb-r { display:flex; align-items:center; gap:7px; margin-left:auto; flex-shrink:0 }
.ico-btn {
  width:30px; height:30px; display:flex; align-items:center;
  justify-content:center; border-radius:var(--r-sm); color:var(--tx2);
  border:1px solid transparent; transition:all var(--t); font-size:14px
}
.ico-btn:hover { background:var(--bg3); color:var(--tx); border-color:var(--line) }
.view-tgl {
  display:flex; background:var(--bg3); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden
}
.vbtn { padding:5px 9px; font-size:13px; color:var(--tx3); transition:all var(--t) }
.vbtn.on,.vbtn:hover { background:var(--bg2); color:var(--tx) }
.ref-btn {
  display:flex; align-items:center; gap:5px; padding:6px 14px;
  background:var(--accent); color:#fff; border-radius:var(--r-sm);
  font-size:12px; font-weight:600; transition:all var(--t)
}
.ref-btn:hover { background:#0047CC; transform:translateY(-1px) }
.ref-btn:disabled { opacity:.4; cursor:not-allowed; transform:none }
.share-btn {
  display:flex; align-items:center; gap:5px; padding:6px 12px;
  background:transparent; color:var(--tx2); border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:12px; font-weight:600;
  transition:all var(--t); cursor:pointer
}
.share-btn:hover { background:var(--bg3); color:var(--tx); border-color:var(--line2) }
.ref-btn.spin svg { animation:spin .7s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }

/* ── Main ── */
.main { grid-area:main; padding:22px; min-width:0 }

/* ── Responsive ── */
@media(max-width:1024px) { :root { --sidebar:230px } }
@media(max-width:900px) {
  .shell { grid-template-columns:1fr; grid-template-areas:"topbar""main" }
  .sidebar { display:none }
  .mob-nav-btn { display:flex }
  .stats { grid-template-columns:repeat(2,1fr) }
  .sub-grid { grid-template-columns:1fr }
  .sub-left { display:none }
}
@media(max-width:600px) {
  .main { padding:14px }
  .topbar { padding:0 14px; gap:7px }
  .stats { grid-template-columns:1fr 1fr }
  .fg:nth-child(n+4),.tb-sep:nth-child(n+4) { display:none }
  .grid { grid-template-columns:1fr }
  .subscribe-section { padding:20px 16px }
  .stile-val { font-size:18px }
}
@media(max-width:400px) {
  .stats { grid-template-columns:1fr }
  .otp-digit { width:38px; height:46px; font-size:20px }
}