/* ---------- top bar (house) ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;padding:9px 16px;flex:0 0 auto;flex-wrap:wrap;row-gap:8px;
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--edge);box-shadow:0 2px 14px rgba(31,45,75,.06);
}
.brand{font-weight:700;font-size:15px;white-space:nowrap}
.brand span{color:var(--muted);font-weight:400;margin-left:9px;font-size:12px}
.spacer{flex:1}
.who{font-size:12px;color:var(--muted);white-space:nowrap}
.who b{color:var(--ink);font-weight:600}
.sv{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);min-width:70px;justify-content:flex-end}
.sv.ok{color:var(--good)}
.spin{width:13px;height:13px;border:2px solid var(--ring);border-top-color:var(--accentink);border-radius:50%;animation:sp .8s linear infinite;flex:0 0 auto}
@keyframes sp{to{transform:rotate(360deg)}}


/* ---------- layout ---------- */
body.nosb #side{display:none}
.sbrail{display:none;position:sticky;top:0;left:0;z-index:5;margin:-4px 0 6px;padding:4px 10px;font-size:11.5px;border-radius:0 0 10px 10px;border:1px solid var(--edge);border-top:none;background:var(--glass);color:var(--muted);cursor:pointer}
body.nosb .sbrail{display:inline-block}
.sbtog{padding:4px 9px;font-size:14px;line-height:1}
body.nosb .sbtog{background:rgba(47,155,214,.14);border-color:rgba(47,155,214,.4)}
.mid{flex:1 1 auto;display:flex;gap:10px;min-height:0;padding:10px 12px 10px}
#side{flex:0 0 212px;display:flex;flex-direction:column;padding:12px 12px;overflow-y:auto;
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--edge);box-shadow:var(--shadow);border-radius:18px}
.sgrp{margin-bottom:14px}
.sgrp>.lbl{margin-bottom:5px;padding:2px 3px}
.sgrp .lbl.fold{cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}.sgrp .lbl.fold:hover{color:var(--ink)}.sgrp .lbl .car{display:inline-block;font-size:9px;transition:transform .15s}.sgrp.shut .lbl .car{transform:rotate(-90deg)}.sgrp.shut{margin-bottom:8px}.sgrp .lbl .ct{margin-left:auto;font-size:10px;background:rgba(95,108,125,.12);border-radius:999px;padding:0 6px;color:var(--muted)}
.nitem{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 8px;border-radius:9px;cursor:pointer;line-height:1.3;color:var(--ink);user-select:none}
.nitem:hover{background:var(--white)}
.nitem.on{background:rgba(47,155,214,.14);color:var(--accentink);font-weight:600}
.nitem .ct{margin-left:auto;color:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums;background:var(--white);border-radius:999px;padding:0 7px;border:1px solid var(--edge)}
.nitem.on .ct{color:var(--accentink)}
.nitem .ct.hot{color:var(--bad);font-weight:700}
.sfoot{margin-top:auto;padding-top:10px;border-top:1px dashed rgba(95,108,125,.3);font-size:11px;color:var(--muted);line-height:1.5}
.sfoot button{font-size:11.5px;color:var(--accentink);background:none;border:none;padding:2px 0}
main{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;padding:2px 4px 30px 2px}
.wrap{max-width:none;margin:0;display:flex;flex-direction:column;gap:14px}
.viewhd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:8px;padding:2px 4px}
.viewhd h1{font-size:17px;font-weight:700;letter-spacing:-.2px}
.viewhd .sub{font-size:12.5px;color:var(--muted)}
.row{display:flex;gap:14px;align-items:flex-start}
.row>*{min-width:0}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1100px){.g3{grid-template-columns:1fr 1fr}.row{flex-direction:column}}
@media (max-width:800px){.g2,.g3{grid-template-columns:1fr}#side{display:none}.mid{padding:8px}}


.mnav{display:none}
@media (max-width:800px){.mnav{display:block;flex:1 1 100%}}

.nitem.admin{color:#7a4fc0}
.nitem.admin.on{color:#7a4fc0;background:rgba(148,102,214,.14)}