:root { --bg:#0b0f14; --panel:#121820; --edge:#243040; --text:#e6edf3;
        --muted:#8b98a5; --accent:#8b5cf6; --err:#f85149;
        --field:#0d1319; --btn:#1a2230; --hover:#121a24; }
body.light { --bg:#f4f6f9; --panel:#ffffff; --edge:#d7dde6; --text:#131a24;
        --muted:#5b6774; --err:#b62324;
        --field:#f0f3f7; --btn:#e6eaf1; --hover:#eef1f6; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }
/* App mode: the frame is fixed to the viewport - only #content scrolls, so
   the sidebar footer never leaves the screen. */
body.appmode { overflow:hidden; display:flex; flex-direction:column; }
body.appmode header { flex:none; }
header { padding:16px 28px; border-bottom:1px solid var(--edge); }
.logo { height:44px; display:block; }
.card { max-width:480px; margin:8vh auto; background:var(--panel);
        border:1px solid var(--edge); border-radius:14px; padding:30px; }
h1 { font-size:1.35rem; margin:0 0 6px; }
h2.sub { font-size:.95rem; margin:18px 0 6px; color:var(--muted);
         text-transform:uppercase; letter-spacing:.4px; }
label { display:block; margin:14px 0 4px; font-size:.85rem; color:var(--muted); }
input, select { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--edge);
        background:var(--field); color:var(--text); }
button { margin-top:16px; margin-right:8px; padding:10px 18px; border-radius:8px;
         border:1px solid var(--edge); background:var(--btn); color:var(--text);
         font-weight:600; cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button:hover { filter:brightness(1.08); }
a { color:var(--accent); }
.muted { color:var(--muted); }
/* Identity flags on the users table: break-glass, SSO, external. */
.badge { display:inline-block; padding:2px 8px; border-radius:20px;
  font-size:.66rem; font-weight:600; letter-spacing:.03em;
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  color:var(--accent); vertical-align:middle; }
.small { font-size:.8rem; }
.err { color:var(--err); font-size:.85rem; }
/* Same slot as .err, used for save confirmations - silence after a save reads
   as a broken button. */
.err.ok { color:#3ecf8e; }
.stale { color:#e3b341; font-weight:600; }
.hidden { display:none !important; }
.spacer { flex:1; }
.role { font-size:.68rem; color:var(--muted); text-transform:uppercase;
        letter-spacing:.6px; margin-left:8px; }

/* ---- app shell ---- */
.app { padding:0; flex:1; display:flex; flex-direction:column; min-height:0; }
.topbar { display:flex; align-items:center; gap:12px; padding:12px 28px;
          border-bottom:1px solid var(--edge); flex:none; }
.topbar select { width:auto; min-width:220px; }
.topbar button { margin-top:0; }
.shell { display:flex; flex:1; min-height:0; }
#side { width:320px; border-right:1px solid var(--edge); display:flex;
        flex-direction:column; min-height:0; }
.urow b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
          max-width:140px; }
.railwrap { flex:1; overflow-y:auto; padding:14px 10px; }
.railitem { display:flex; justify-content:space-between; padding:8px 12px;
            border-radius:8px; cursor:pointer; font-size:.9rem; }
.railitem:hover { background:var(--hover); }
.railitem.on { background:var(--accent); color:#fff; }
/* Refused by the tenant - visible but inert, so a missing resource type is
   never mistaken for an empty one. */
.railitem.unavail { opacity:.5; cursor:help; }
.railitem.unavail:hover { background:none; }
.railitem.unavail .cnt { font-size:.72rem; font-style:italic; }
.railitem .cnt { color:var(--muted); }
.railitem.on .cnt { color:#e6ddff; }
.userbox { border-top:1px solid var(--edge); padding:14px 16px; }
.urow { display:flex; align-items:center; }
.urow b { font-size:.95rem; }
.ulinks { display:flex; gap:4px; margin-top:10px; flex-wrap:wrap; }
button.ghost { margin:0; padding:6px 8px; border:none; background:none;
               color:var(--text); font-size:.82rem; font-weight:500;
               display:inline-flex; align-items:center; gap:6px; border-radius:8px; }
button.ghost:hover { background:var(--hover); filter:none; }
button.ghost svg { width:14px; height:14px; }
#content { flex:1; padding:14px 22px; overflow-y:auto; min-height:0; }
#content .card { margin:6vh auto; }
#content .card.wide { max-width:1000px; }
/* Clear section separation in wide panels (Settings/Profile): every section
   header after the first gets a divider and breathing room. */
.card.wide h2.sub, #profilepanel h2.sub {
  margin:38px 0 14px; padding-top:26px; border-top:1px solid var(--edge);
  color:var(--text); font-size:1rem; }
.card.wide h1 + h2.sub, #profilepanel .muted + h2.sub, #profilepanel h1 + h2.sub {
  border-top:none; padding-top:0; margin-top:22px; }
/* Collapsible settings sections (same pattern as StackMerger). Every section
   starts closed, so Settings opens as a short index instead of a long scroll.
   The count/state chip means you can read tenant and user totals, and whether
   SMTP is set up, without opening anything. */
h2.sub.collapser { cursor:pointer; user-select:none; }
h2.sub.collapser:hover { color:var(--accent); }
.collapser .chev { display:inline-block; width:16px;
  transition:transform .15s ease; }
.collapser.open .chev { transform:rotate(90deg); }
.seccount { font-weight:normal; font-size:.8rem; color:var(--muted); }
.secbody { margin-bottom:4px; }
/* The wide-card headers are spaced for always-open sections (38px + divider).
   A closed one sits compact; an open one keeps its breathing room. */
.card.wide h2.sub.collapser { margin:0; padding:16px 0 14px; }
.card.wide h2.sub.collapser.open { padding-bottom:4px; }
.utable { width:100%; border-collapse:collapse; margin-top:8px; font-size:.88rem; }
.utable td, .utable th { padding:7px 10px; border-bottom:1px solid var(--edge);
                         text-align:left; }
.utable th { color:var(--muted); font-weight:600; font-size:.75rem;
             text-transform:uppercase; letter-spacing:.4px; }
.utable button { margin:0 6px 0 0; padding:4px 10px; font-size:.76rem; }
.objrow { display:flex; align-items:center; gap:12px; padding:9px 12px;
          border-bottom:1px solid var(--edge); font-size:.92rem; }
.objrow:hover { background:var(--hover); }
.objrow .kind { font-size:.72rem; color:var(--muted); border:1px solid var(--edge);
                border-radius:99px; padding:1px 9px; }
.objrow .tfbtn { margin:0 0 0 auto; padding:5px 13px; font-size:.8rem; }

/* ---- modals ---- */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex;
         align-items:center; justify-content:center; z-index:40; }
.mbox { width:min(880px, 92vw); max-height:86vh; overflow:auto; background:var(--panel);
        border:1px solid var(--edge); border-radius:14px; padding:22px; }
.mhead { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.mhead button { margin-top:0; padding:6px 14px; font-size:.8rem; }
#tf_code { background:var(--field); border:1px solid var(--edge); border-radius:10px;
           padding:16px; font:12.5px/1.5 ui-monospace, Menlo, monospace;
           white-space:pre; overflow-x:auto; }
#tf_notes p { margin:8px 0 0; }
#tf_notes .warn { color:#e3b341; font-weight:600; }
#bundle_types label { display:flex; gap:8px; align-items:center; margin:8px 0;
                      font-size:.9rem; color:var(--text); }
#bundle_types input { width:auto; }

.spinner { display:inline-block; width:13px; height:13px; margin-right:6px;
           border:2px solid var(--edge); border-top-color:var(--accent);
           border-radius:50%; vertical-align:-2px;
           animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
button:disabled { opacity:.55; cursor:default; }
/* Chrome will not fire a native title tooltip on a disabled button, so the
   tooltip lives on this wrapper instead. */
.tipwrap { display:inline-block; }
.btnlink { display:inline-block; padding:7px 13px; border-radius:7px;
           background:var(--accent); border:1px solid var(--accent);
           color:#fff; text-decoration:none; font-weight:600; }
.btnlink:hover { filter:brightness(1.08); }

/* In-app docs */
.docwrap { display:flex; gap:26px; margin-top:14px; align-items:flex-start; }
#docnav { flex:0 0 190px; display:flex; flex-direction:column; gap:2px;
          position:sticky; top:0; }
#docnav a { color:var(--muted); text-decoration:none; padding:7px 10px;
            border-radius:8px; font-size:.9rem; }
#docnav a:hover { background:var(--hover); color:var(--text); }
#docnav a.on { background:var(--hover); color:var(--accent); font-weight:600; }
.docbody { flex:1; min-width:0; font-size:.93rem; line-height:1.6; }
.docbody h3 { margin:22px 0 8px; font-size:1rem; }
.docbody h3:first-of-type { margin-top:0; }
.docbody p { margin:8px 0; color:var(--text); }
.docbody pre { background:var(--field); border:1px solid var(--edge);
               border-radius:10px; padding:12px 14px; overflow-x:auto;
               font:12.5px/1.5 ui-monospace, Menlo, monospace; }
.docbody code { background:var(--field); border:1px solid var(--edge);
                border-radius:5px; padding:1px 5px;
                font:.86em ui-monospace, Menlo, monospace; }
.docbody a { color:var(--accent); }