/* Savino control panel — house style. Mirrors Falconium's dark dashboard
   (violet-black + gold), logo removed. Single stylesheet, one base template. */
:root{
  --bg:#14121f; --panel:#1d1a2c; --panel-2:#25223a; --ink:#ECEAF5;
  --muted:#9C97B8; --gold:#C3A183; --violet:#8B7BC4; --border:#322E47;
  --ok:#4FB477; --bad:#D9605B; --warn:#D6A85B; --user-bg:#221f33;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;}
body.view-user{background:var(--user-bg)}
.mono{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline}

/* shell */
.shell{display:grid; grid-template-columns:232px 1fr; min-height:100vh}

.main{min-width:0}
.content{max-width:1180px; margin:0 auto; padding:28px 36px 80px}
.topbar{display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:22px}
.topbar h1{font-size:22px; margin:0; font-weight:600; letter-spacing:-.01em}
.who{font-size:12px; color:var(--muted); text-align:right}
.who .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-right:5px}
.who .dot.bad{background:var(--bad)}

/* impersonation banner */
.imp-banner{background:#C3A18318; border:1px solid #C3A18355; border-radius:5px;
  padding:8px 14px; margin-bottom:16px; font-size:13px; color:var(--ink); display:flex; justify-content:space-between; align-items:center}

h2{font-size:14px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600; margin:0 0 14px}
h3{font-size:17px; margin:0 0 10px; font-weight:600}
p{margin:0 0 12px}

.panel{background:var(--panel-2); border:1px solid var(--border); border-radius:6px; padding:16px 18px; margin-bottom:16px}
.view-user .panel{background:#282443}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px}
.stat{background:#00000025; border:1px solid var(--border); border-radius:5px; padding:12px 14px}
.stat .n{font-size:24px; font-weight:600; font-variant-numeric:tabular-nums}
.stat .l{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-top:2px}

.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; text-transform:uppercase; font-size:11px; letter-spacing:.07em; color:var(--muted); font-weight:600; padding:7px 10px; border-bottom:1px solid var(--border); white-space:nowrap}
td{padding:8px 10px; border-bottom:1px solid #ffffff08; vertical-align:middle}
td.mono, th.r, td.r{font-variant-numeric:tabular-nums}
th.r,td.r{text-align:right}

.pill{display:inline-block; font-size:11px; padding:2px 9px; border-radius:20px; border:1px solid var(--border); color:var(--muted)}
.pill.ok{color:var(--ok); border-color:#4FB47740; background:#4FB47712}
.pill.gold{color:var(--gold); border-color:#C3A18340; background:#C3A18312}
.pill.bad{color:var(--bad); border-color:#D9605B40; background:#D9605B12}
.pill.off{color:var(--muted)}

.btn{display:inline-block; font-size:13px; padding:7px 14px; border-radius:5px; border:1px solid var(--gold);
  background:var(--gold); color:#231c14; font-weight:600; cursor:pointer; text-decoration:none}
.btn:hover{filter:brightness(1.05); text-decoration:none}
.btn.ghost{background:transparent; color:var(--gold)}
.btn.danger{border-color:#D9605B; color:#D9605B; background:transparent}
.btn.sm{padding:4px 10px; font-size:12px}

.callout{border:1px solid var(--border); border-left:3px solid var(--gold); background:#00000020; padding:11px 14px; border-radius:4px; font-size:13.5px; color:var(--muted); margin:10px 0}
.callout b{color:var(--ink)}

dl.kv{display:grid; grid-template-columns:170px 1fr; gap:8px 14px; font-size:14px; margin:0}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0}
.mask{letter-spacing:1px}

form.inline{display:inline}
input[type=text],input[type=password],input[type=email],select,textarea{
  background:#00000030; border:1px solid var(--border); border-radius:5px; color:var(--ink);
  padding:7px 10px; font-size:14px; font-family:inherit; width:100%; max-width:420px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:12px 0 4px}

.msg{padding:9px 13px; border-radius:5px; margin-bottom:10px; font-size:13.5px}
.msg.success{background:#4FB47712; border:1px solid #4FB47740; color:var(--ok)}
.msg.error{background:#D9605B12; border:1px solid #D9605B40; color:var(--bad)}
.msg.warning{background:#D6A85B12; border:1px solid #D6A85B40; color:var(--warn)}

pre.console{background:#0d0b16; border:1px solid var(--border); border-radius:6px; padding:14px; overflow:auto;
  font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.5; color:#cfc9e6; max-height:560px}

.formrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* login */
.login-wrap{max-width:360px; margin:12vh auto; padding:0 20px}
.login-wrap .brand{border-radius:6px 6px 0 0; border:1px solid var(--border); border-bottom:3px solid var(--gold)}
.login-card{background:var(--panel-2); border:1px solid var(--border); border-top:0; border-radius:0 0 6px 6px; padding:22px}

@media(max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:static}
  .content{padding:20px}
  dl.kv{grid-template-columns:1fr}
}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Sidebar, reworked 2026-08-06 ─────────────────────────────────────────
   Three specific faults, not a redesign for its own sake:

   1. The little grey tags were pushed to the far right by space-between, and
      only three of fifteen items had one — so the eye saw a ragged second
      column that was mostly empty. They now sit under their label as a
      subtitle, which is what they always were.
   2. The first group had no heading while the others did, so the list read as
      four orphans followed by two tidy sections.
   3. There was no way back from the platform view to your own assistant. The
      switch at the top is the fix; it is also the honest label for where you
      are, which the sidebar never said.

   Restraint deliberately kept: type and space do the work, no icons, no
   colour beyond the one gold accent. ───────────────────────────────────── */

.side{
  background:#191627;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
}

.brand{
  padding:18px 20px 15px;
  border-bottom:3px solid var(--gold);
  font-weight:700; font-size:18px; letter-spacing:.01em; color:var(--ink);
}
.brand small{
  display:block; font-weight:500; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-top:5px;
}

/* ── the view switch ─────────────────────────────────────────────────── */
.viewswitch{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  margin:14px 16px 6px; padding:2px;
  background:#00000038; border:1px solid var(--border); border-radius:6px;
}
.viewswitch a{
  text-align:center; padding:6px 4px; border-radius:4px;
  font-size:12px; letter-spacing:.04em; color:var(--muted);
  text-decoration:none; transition:background .12s ease, color .12s ease;
}
.viewswitch a:hover{color:var(--ink); background:#ffffff08; text-decoration:none}
.viewswitch a.on{
  background:var(--gold); color:#231c14; font-weight:600;
}

/* ── groups and items ────────────────────────────────────────────────── */
.nav{padding:6px 0 22px}

.nav .gl{
  font-size:10px; text-transform:uppercase; letter-spacing:.15em;
  color:var(--muted); opacity:.72;
  padding:16px 20px 6px;
}
.nav .gl:first-child{padding-top:10px}

.nav a{
  display:block;                      /* was flex+space-between: that is what
                                         flung the tags to the far edge */
  padding:7px 20px 7px 17px;
  color:var(--ink); font-size:14px; line-height:1.35;
  border-left:3px solid transparent;  /* reserved so text never shifts */
  transition:background .12s ease, border-color .12s ease;
}
.nav a:hover{background:#ffffff08; text-decoration:none}
.nav a.active{
  border-left-color:var(--gold);
  background:linear-gradient(90deg,#C3A1830E,transparent 70%);
  color:#fff; font-weight:600;
}

/* The tag as a subtitle — where it belongs, and where a ragged right edge
   cannot form. */
.nav a .t{
  display:block; margin-top:1px;
  font-size:10.5px; letter-spacing:.03em; color:var(--muted);
  font-weight:400;
}
.nav a.active .t{color:var(--gold); opacity:.85}

@media (max-width:820px){
  .viewswitch{margin:12px 12px 4px}
  .nav a{padding-left:13px; padding-right:14px}
  .nav .gl{padding-left:16px}
}

.view-user .side{background:#1e1b2e}

/* ── phones (added 2026-08-24, Ilya: console must look right on the iPhone) ──
   On a narrow screen the sidebar becomes a compact horizontal strip under the
   brand — one thumb-scrollable row of links — instead of a full-length column
   that pushes the page a screenful down. Tables scroll sideways inside their
   wrapper rather than stretching the page. Inputs take the full width. */
@media(max-width:760px){
  .side{border-right:0; border-bottom:1px solid var(--border)}
  .brand{padding:14px 16px 11px}
  .viewswitch{margin:10px 12px 0}
  .nav{flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch;
       white-space:nowrap; padding:6px 8px 10px; gap:2px}
  .nav .gl{display:none}
  .nav a{display:inline-block; padding:8px 11px; border-radius:6px}
  .nav a.active{background:var(--panel-2)}
  .content{padding:16px 14px 60px}
  .topbar{flex-wrap:wrap; gap:6px}
  .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tablewrap table{min-width:520px}
  .formrow input[type=text], .formrow input[type=password]{flex:1 1 100%; max-width:none!important}
  .panel{padding:14px}
  .login-wrap{margin:8vh auto}
}