/* U4x Cloud (app host) — the head dashboard's look: tokens from prism/product/web/shell.css + app.css,
   header from shell.css, cards / forms / tables from settings.html. Served at /static/cloud.css.
   Colours are tokens only; the pages inline LIGHT_CSS (edge.py / accounts.py) for a light-preferring OS. */
:root{color-scheme:dark;
  --bg:#0a0d12;--panel:#141821cc;--panel-solid:#141821;--field:#0f131b;--btn:#1a1f2e;--pre:#06090d;--pre-ink:#c4d0dc;
  --line:#232838;--line-soft:#1b2030;--ink:#e8ecf4;--muted:#8b93a7;--muted-2:#5f6d7e;
  --violet:#7c5cff;--cyan:#4dc9ff;--accent:#6c7bff;--accent-2:#37d3c0;
  --active:#46e08f;--stale:#ffb84d;--offline:#5b6070;--err:#ff5a5a;--glow:#15192470;
  --mono:ui-monospace,"Cascadia Code","Cascadia Mono",Consolas,"SF Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:14.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 600px at 60% 8%,var(--glow) 0%,transparent 70%);overflow-x:hidden}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
code,pre,.mono{font-family:var(--mono)}
.muted{color:var(--muted)}.tnum{font-variant-numeric:tabular-nums;white-space:nowrap}
.good{color:var(--active)}.warn{color:var(--stale)}

/* ---- shell: spectrum hairline + sticky header (shell.css) ---- */
.u4x-spectrum{position:fixed;top:0;left:0;right:0;height:3px;z-index:99;
  background:linear-gradient(90deg,#ff5a5a,#ffb84d,#ffe14d,#5affa0,#4dc9ff,#7c5cff,#d15aff)}
.u4x-shell{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 22px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);font:14px/1.4 var(--sans);color:var(--ink)}
.u4x-shell a{color:inherit;text-decoration:none}
.u4x-brand{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.u4x-brand b{font-size:17px;letter-spacing:.16em}.u4x-brand span{color:var(--muted);font-size:12px}
.u4x-status{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 360px;padding:6px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--field);font-size:13px;line-height:1.3}
.u4x-status .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--offline)}
.u4x-status.serving .dot{background:var(--active);box-shadow:0 0 9px var(--active)}
.u4x-status.starting .dot{background:var(--stale);box-shadow:0 0 9px var(--stale)}
.u4x-status .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u4x-status .txt b{font-weight:600}
.u4x-nav{display:flex;gap:4px;margin-left:auto}
.u4x-nav a{padding:6px 11px;border-radius:9px;border:1px solid transparent;color:var(--muted);font-size:13.5px}
.u4x-nav a:hover{color:var(--ink);background:var(--panel-solid)}
.u4x-nav a.on{color:var(--ink);border-color:var(--violet);background:var(--panel-solid)}
.u4x-user{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap;min-width:0;
  padding:5px 10px;border:1px solid var(--line);border-radius:999px}
.u4x-user b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.u4x-user .role{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:5px;background:var(--btn)}
.u4x-shell .u4x-user a{color:var(--cyan)}

/* ---- page + cards (settings.html) ---- */
main{max-width:1080px;margin:0 auto;padding:26px 24px 60px}
main h1{font-size:23px;font-weight:650;margin:0 0 4px}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 22px}
section,.card{background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:0 0 18px}
section h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 10px}
h3{font-size:14px;font-weight:600;margin:18px 0 6px}
.desc{color:var(--muted);font-size:13px;margin:0 0 14px}
.note{color:var(--muted);font-size:12.5px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
label{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
input,select,textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  padding:9px 11px;font:13.5px var(--sans)}
input[name=key],input[name=token],input[name=head],textarea{font-family:var(--mono)}
textarea{resize:vertical;font-size:12.5px}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
button{padding:9px 14px;border-radius:9px;border:1px solid var(--line);background:var(--btn);color:var(--ink);cursor:pointer;
  font:13.5px var(--sans);white-space:nowrap}
button:hover{border-color:var(--violet)}
button.primary{background:linear-gradient(90deg,var(--violet),var(--cyan));border:0;color:#fff;font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.ghost{background:transparent;color:var(--muted)}button.ghost:hover{color:var(--ink);border-color:var(--muted-2)}
button.danger{background:transparent;color:var(--muted)}button.danger:hover{border-color:var(--err);color:var(--err)}
button.sm{padding:5px 10px;font-size:12px;border-radius:8px}
pre{background:var(--pre);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:12px/1.5 var(--mono);
  white-space:pre-wrap;word-break:break-all;color:var(--pre-ink);margin:0;max-height:260px;overflow:auto}
.lbl{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 6px}
.msg{border-radius:12px;padding:10px 14px;margin:0 0 18px;font-size:13.5px;border:1px solid}
.msg.err{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,transparent);background:color-mix(in srgb,var(--err) 8%,transparent)}
.msg.ok{color:var(--active);border-color:color-mix(in srgb,var(--active) 40%,transparent);background:color-mix(in srgb,var(--active) 7%,transparent)}
p.err{color:var(--err);font-size:13px;margin:10px 0 0}p.ok{color:var(--active);font-size:13px;margin:10px 0 0}

/* ---- status dots + mode pills (map.html) ---- */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;background:var(--offline);vertical-align:middle}
.dot.on{background:var(--active);box-shadow:0 0 8px var(--active)}
.pill{display:inline-block;font:600 10.5px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:1px 8px;
  border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.head{color:var(--violet);border-color:color-mix(in srgb,var(--violet) 45%,transparent)}
.pill.node{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 40%,transparent)}
.pill.to{color:var(--stale);border-color:color-mix(in srgb,var(--stale) 40%,transparent)}

/* ---- tables (settings.html) ---- */
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;
  padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
td.d{width:20px;padding-top:13px}
td small{font-size:12px}
.actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
form.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
form.inline select{width:auto;max-width:12em;padding:5px 8px;font-size:12px;border-radius:8px}
form.inline input{width:auto;padding:5px 8px;font-size:12px;border-radius:8px}
form.inline input.w-label{width:11em}form.inline input.w-days{width:5em}
form.inline label{margin:0}
table.mt td.actions{display:table-cell;min-width:230px}table.mt td.actions form.inline{margin:0 4px 6px 0}

/* ---- rings + pools ---- */
.ring,.pool{border-top:1px solid var(--line-soft);padding:14px 0}
.ring:first-of-type,.pool:first-of-type{border-top:0;padding-top:4px}
.ring-head{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ring-head .dot{margin-top:6px}.ring-head .who{flex:1 1 220px;min-width:0}
.ring-head .actions{margin-left:auto;justify-content:flex-end}
.ring details{margin-top:10px}
.ring summary{cursor:pointer;list-style:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;user-select:none}
.ring summary::-webkit-details-marker{display:none}
.ring summary::before{content:"\25B8";display:inline-block;margin-right:6px;transition:transform .15s}
.ring details[open] summary::before{transform:rotate(90deg)}
.ring summary:hover{color:var(--ink)}
.ring .row{margin-top:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.ring .note{margin:10px 0 0}
.split{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.pools .cert{margin:0 0 14px;padding:12px;border:1px solid color-mix(in srgb,var(--violet) 45%,transparent);border-radius:12px}
.pools .cert .note{margin:8px 0 0}
.pools .pool .actions{margin-top:10px}
.pools .join button{margin-top:10px}
.cmd{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.empty{padding:6px 0 2px}.empty p{color:var(--muted);margin:4px 0 0;font-size:13.5px}

/* ---- sign in (login.html) ---- */
.center{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:24px 16px 48px}
.stack{display:grid;gap:16px;width:min(440px,100%)}
.stack .card{padding:26px 28px;margin:0}
.stack h1{font-size:19px;font-weight:650;margin:0 0 6px}
.stack p{color:var(--muted);margin:0 0 16px;font-size:13.5px}
.stack label{margin-top:14px}
.stack button[type=submit]{margin-top:16px;width:100%;padding:11px;font-size:14px}
.fp{font-size:12px;margin:14px 0 0}.fp code{word-break:break-all;color:var(--ink)}
.stack .hint{font-size:12px;color:var(--muted);margin:6px 0 0}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:14px 0 4px;background:var(--field);border:1px solid var(--line);border-radius:11px}
.stack .tabs label{margin:0;padding:8px 0;text-align:center;border-radius:8px;cursor:pointer;font-size:11px;border:1px solid transparent}
.tabs label:hover{color:var(--ink)}
.tab-in{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;padding:0}
#t-in:checked~.tabs label[for=t-in],#t-up:checked~.tabs label[for=t-up]{background:var(--panel-solid);color:var(--ink);border-color:var(--violet)}
#t-in:focus-visible~.tabs label[for=t-in],#t-up:focus-visible~.tabs label[for=t-up]{outline:2px solid var(--violet);outline-offset:2px}
.pane{display:none}#t-in:checked~.p-in,#t-up:checked~.p-up{display:block}
.alt{display:grid;gap:8px}
.alt a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:13.5px}
.alt a:hover{border-color:var(--violet);text-decoration:none}.alt small{color:var(--muted);font-size:12px;text-align:right}

/* ---- phone: one column, no sideways scroll, 16px gutters ---- */
@media (max-width:860px){
  table.mt thead{display:none}
  table.mt,table.mt tbody{display:block}
  table.mt tr{display:grid;grid-template-columns:14px minmax(0,1fr);gap:4px 10px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  table.mt tr:last-child{border-bottom:0}
  table.mt td{display:block;padding:0;border:0;grid-column:2;min-width:0}
  table.mt td.d{grid-column:1;grid-row:1;padding-top:5px}
  table.mt td[data-l]::before{content:attr(data-l);display:inline-block;width:84px;font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted)}
  table.mt td.actions{min-width:0;display:flex;margin-top:6px}
}
@media (max-width:760px){
  .u4x-shell{gap:10px;padding:10px 16px}
  .u4x-status{flex-basis:100%;order:3}
  .u4x-nav{margin-left:0;flex-wrap:wrap}.u4x-nav a{padding:5px 8px;font-size:13px}
  .u4x-user{margin-left:auto}
  main{padding:18px 16px 48px}
  section,.card{padding:16px}
  .cmd{grid-template-columns:1fr}
  .ring-head .actions{margin-left:0;justify-content:flex-start;width:100%}
}
/* ---- console shell (A7 §3.0): a fixed left sidebar under the header, one page per section ---- */
body.console main{max-width:1120px;margin:0;padding:26px 28px 60px;min-width:0}
/* A9: one sidebar, grouped (Ring / Org); collapsed (html.side-collapsed, console.js, localStorage) = icons + tooltips */
:root{--side-w:220px}
html.side-collapsed{--side-w:60px}
.frame{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:calc(100vh - 60px)}
.side{position:sticky;top:var(--u4x-shell-h,58px);align-self:start;height:calc(100vh - 58px);overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-right:1px solid var(--line);background:var(--field)}
.side .org{padding:4px 10px 10px;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .org .lbl{margin:0 0 2px}
.side a,.side .off,.side .side-toggle{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;border:1px solid transparent;
  color:var(--muted);font-size:13.5px;white-space:nowrap;background:none;width:100%;text-align:left}
.side .off{opacity:.45;cursor:default}
.side a:hover,.side .side-toggle:hover{color:var(--ink);background:var(--panel-solid);text-decoration:none}
.side a.on{color:var(--ink);border-color:var(--violet);background:var(--panel-solid)}
.side svg{flex:none}
.side .grp{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px}
.side .gh{display:block;padding:6px 10px 4px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .gh small{margin-left:6px;text-transform:none;letter-spacing:0;font-weight:400}
html.side-collapsed .side .lab,html.side-collapsed .side .org,html.side-collapsed .side .gh small{display:none}
html.side-collapsed .side .gh{font-size:0;padding:0;margin:4px 10px;border-top:1px solid var(--line)}
html.side-collapsed .side a,html.side-collapsed .side .off,html.side-collapsed .side .side-toggle{justify-content:center;padding:8px 0}
a.btn{display:inline-block;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:var(--btn);color:var(--ink);
  font-size:12px;white-space:nowrap}
a.btn:hover{border-color:var(--violet);text-decoration:none}
.crumb{margin:0 0 4px;font-size:12.5px;color:var(--muted)}
main h1 .dot{width:11px;height:11px;margin:-3px 6px 0 0}
.dl{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:8px 18px;margin:0}
.dl dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.cert{margin:0 0 18px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--violet) 45%,transparent);border-radius:12px}
.cert .note{margin:8px 0 0}
[hidden]{display:none!important}
ul.att{margin:0;padding-left:18px}ul.att li{margin:4px 0}
section .actions form.inline{margin:0 4px 4px 0}
@media (max-width:760px){
  .frame{display:block}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:8px 12px;
    border-right:0;border-bottom:1px solid var(--line)}
  .side .org,.side .side-toggle,.side .gh{display:none}
  .side .grp{flex-direction:row;margin:0;gap:4px}
  .side a,.side .off{width:auto;padding:6px 10px;font-size:13px}
  html.side-collapsed .side .lab{display:inline}
  body.console main{padding:18px 16px 48px}
  .dl{grid-template-columns:1fr;gap:2px 0}.dl dd{margin-bottom:8px}
}
@media print{.u4x-spectrum,.u4x-shell{position:static}}