/* Suite360 Lite — shared "space" theme (theme.css)
   ===================================================================================================================
   HOW TO OPT IN: a page emits {% block bodyclass %} class="themed <page>"{% endblock %} and links this file after
   /static/style.css (and before its own page sheet). EVERY rule here is scoped to body.themed, so pages that do not
   opt in are untouched. Page sheets (dashboard.css → body.dash) load after this file and add only what is unique to
   their page; equal-specificity rules there win by source order.
   Shared tokens (--card --ink --muted --line --brand --danger --warn --ok) come from style.css :root; this file adds
   --sp --brand2 --glow --green --amber --red --blue --indigo --mono on body.themed.

   CONTRACT — primitives (class → purpose). Names are stable; other pages are built on them.

   page shell
     main            1360px page shell with the gutter (no class needed). base.html's flashes (.msg.ok / .msg.err)
                     get a border + shadow so they sit on the dark background.
     .t-page         optional inner centred column: full width by default, .narrow = 760px (Deploy-style form
                     column), .mid = 980px.
     .t-head         page title row on the dark background:
                     <header class="t-head"><div><h1>Title</h1><p class="t-sub">subtitle · <b>emphasis</b> ·
                     <code>chip</code></p></div><div class="t-actions">buttons / .t-pulse</div></header>
     .t-sub          light subtitle text (b = pale teal emphasis).      .t-actions  flex row of controls (right side).
     .t-card         white card, 14px radius, deep shadow, 3px teal gradient line on top.
                     .pad = inner padding for free-form content · .plain = no top line · .attn = amber top line.
     .t-card-head    card title row: <div class="t-card-head"><h2>Title <span class="t-count">6</span></h2>
                     <small>note</small><div class="t-actions">…</div></div>  (h2 svg turns amber in .t-card.attn)
     .t-card-foot    muted footer strip of a card / table (legends, notes; <b> = ink).
     .t-count        small teal count pill for titles; .run = blue ("1 in progress").
     .t-link         semibold teal text link ("All jobs →").
     .t-section      uppercase teal section label (Deploy-page style). A .t-section that follows a sibling gets a top
                     divider automatically; add .flat to suppress it. A <span class="t-hint"> inside = side note.
     .t-alert        full-width banner starting with an inline svg: red by default, .warn amber, .info teal.
   controls
     .t-btn          button or link. Teal gradient by default (.primary is an accepted alias). .secondary = white,
                     .danger = red, .ghost = transparent text button (hover tint; .ghost.main teal / .ghost.ok green /
                     .ghost.warn amber / .ghost.danger red), .small = compact, .big = hero size. Inline 14px svg icons
                     before the label get a 6px gap. Works on <a>, <button>, <input type=submit>.
     .t-input .t-select .t-textarea   form controls: 100% wide, 8px radius, teal focus ring, red :user-invalid.
                     .small = toolbar size (13.5px, 7px/11px padding); .mono = monospace. .t-select has a chevron.
     .t-label        field label (13px semibold ink; overrides style.css's muted label).
     .t-field        label + control + hint block:
                     <div class="t-field"><label class="t-label">Slug</label><input class="t-input"><div class="t-hint">…</div></div>
     .t-check        inline checkbox / radio row: <label class="t-check"><input type="checkbox"> text</label>
     .t-grid2 .t-grid3   form grids (2 / 3 columns; 3 → 2 under 900px; both → 1 column under 700px).
     .t-hint         muted 12.5px help text.
     .t-search       search box with a leading icon: <label class="t-search"><svg …></svg><input type="search"></label>
   data
     .t-table        table (wrap it in .t-tablewrap for horizontal scrolling inside a card): grey uppercase header,
                     20px card-edge padding, row hover, tr[hidden] hidden, th/td.r = right aligned,
                     th[data-sort] = sort caret (+ .asc / .desc set by the page script), .t-nomatch = "no match"
                     row, .t-table.sticky = sticky header.
     .t-badge        status pill with a dot: <span class="t-badge active"><i></i>active</span>
                     .active .done .ok = green · .suspended .queued .warn = amber · .error .failed .err = red ·
                     .creating = indigo (breathing dot) · .running .info = blue (breathing dot) · default grey.
                     .live = pulsing ring on the dot (use with .ok: "Odoo healthy").
     .t-flag         tiny outlined flag ("over storage"): .bad/.err red, .warn amber, .ok green. .t-flags = wrap row.
     .t-chip         monospace pill with a dot (containers, hosts): <span class="t-chip ok"><i></i>odoo</span>
                     .ok green dot · .warn amber · .err red · .muted / default grey. .t-chips = wrap row.
     .t-meter        thin bar: <div class="t-meter"><i style="width:40%"></i></div>. Colour class on the <i> or on the
                     bar: .warn amber, .over/.bad red, .ok green, .mk indigo. .seg = segmented (several <i>).
     .t-tile         KPI tile (white, 12px radius, flex column) with .t-tile-h (uppercase teal label row; may end with
                     a .t-flag / .t-badge), .t-tile-big (big figure; <small> = unit), .t-tile-pair (two figures:
                     <div><b>48</b><small>internal</small></div>…), .t-tile-sub (muted detail line with .t-dot +
                     <b>), and a trailing .t-meter pinned to the bottom. .good / .warn / .bad colour the big figure.
     .t-kv           facts grid: <dl class="t-kv"><div><dt>Region</dt><dd>me-riyadh-1</dd></div>…</dl>
     .t-code         dark code box for keys / commands (wraps, click selects all) — e.g. the deploy key.
     .t-pre          dark log block (monospace, scrolls, max-height 70vh; .tall = no max-height).
     .t-empty        empty-state hero inside a .t-card: .t-empty-art (150px illustration), h2, p, .t-btn.big,
                     .t-steps > .t-step (<i>1</i> numbered pills), .t-hint footnote.
     .t-dot          inline status dot: .ok green, .warn amber, .bad/.err red, .run/.info blue, .mk indigo.
     .t-na           muted "—" placeholder.        .t-mono   monospace text.
     .t-pulse        dark ping pill with a pulsing teal dot: <span class="t-pulse"><i></i>Riyadh · Ping: <b>12 ms</b></span>
   =================================================================================================================== */
body.themed{--sp:#05070f;--brand2:#14b8a6;--glow:#2dd4bf;--green:#16a34a;--amber:#d97706;--red:#dc2626;--blue:#2563eb;--indigo:#4f46e5;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--sp);color:var(--ink);min-height:100vh}

/* ---- space: deep navy → black, three co-prime star tiles, two nebulae (identical to the Deploy page) ---- */
body.themed::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 14px 22px,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 96px 68px,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(1px 1px at 158px 126px,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 62px 176px,rgba(255,255,255,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 201px 41px,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 33px 210px,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 251px 297px,rgba(191,219,254,.7) 50%,transparent 51%),
    radial-gradient(1px 1px at 302px 142px,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 121px 331px,rgba(255,255,255,.6) 50%,transparent 51%),
    radial-gradient(1px 1px at 372px 233px,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(2px 2px at 447px 88px,rgba(255,255,255,.95) 50%,transparent 51%),
    radial-gradient(1px 1px at 410px 402px,rgba(186,230,253,.75) 50%,transparent 51%),
    radial-gradient(1px 1px at 173px 466px,rgba(255,255,255,.6) 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 512px 318px,rgba(255,255,255,.95) 50%,transparent 51%),
    radial-gradient(1px 1px at 61px 521px,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 341px 507px,rgba(255,255,255,.65) 50%,transparent 51%),
    radial-gradient(1px 1px at 27px 289px,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 489px 571px,rgba(255,255,255,.9) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 98px 44px,rgba(255,255,255,.85) 50%,transparent 51%),
    radial-gradient(1px 1px at 289px 19px,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(4px 4px at 447px 88px,rgba(255,255,255,.16),transparent 70%),
    radial-gradient(4px 4px at 512px 318px,rgba(147,197,253,.16),transparent 70%),
    radial-gradient(60% 45% at 78% 8%,rgba(30,58,138,.35),transparent 70%),
    radial-gradient(45% 40% at 12% 30%,rgba(15,118,110,.2),transparent 70%),
    linear-gradient(180deg,#0c1333 0%,#080d21 42%,#04060f 100%);
  background-size:
    233px 263px,233px 263px,233px 263px,233px 263px,
    347px 311px,347px 311px,347px 311px,347px 311px,347px 311px,347px 311px,
    557px 601px,557px 601px,557px 601px,557px 601px,557px 601px,557px 601px,
    557px 601px,557px 601px,557px 601px,557px 601px,557px 601px,557px 601px,
    100% 100%,100% 100%,100% 100%;
  background-repeat:
    repeat,repeat,repeat,repeat,
    repeat,repeat,repeat,repeat,repeat,repeat,
    repeat,repeat,repeat,repeat,repeat,repeat,
    repeat,repeat,repeat,repeat,repeat,repeat,
    no-repeat,no-repeat,no-repeat}
/* horizon: night side of a planet with city lights and an atmospheric rim glow */
body.themed::after{content:"";position:fixed;left:-25vw;right:-25vw;bottom:-46vh;height:72vh;z-index:-1;pointer-events:none;border-radius:50%;
  background:
    radial-gradient(1px 1px at 20px 12px,rgba(251,191,36,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 70px 40px,rgba(253,224,71,.4) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 110px 22px,rgba(251,191,36,.6) 50%,transparent 51%),
    radial-gradient(1px 1px at 45px 66px,rgba(253,186,116,.45) 50%,transparent 51%),
    radial-gradient(ellipse at 50% 0%,#0f1f46 0%,#0a1430 35%,#060b1c 70%,#04070f 100%);
  background-size:140px 90px,140px 90px,140px 90px,140px 90px,100% 100%;
  box-shadow:0 -2px 0 0 rgba(165,243,252,.6),0 -6px 26px 3px rgba(56,189,248,.5),0 -34px 100px 24px rgba(20,184,166,.3),0 -90px 260px 80px rgba(13,148,136,.18)}

/* ---- nav + page shell ---- */
body.themed nav{background:rgba(8,11,24,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.07)}
body.themed main{max-width:1360px;margin:18px auto 90px;padding:0 22px}
body.themed main>.msg{border:1px solid transparent;box-shadow:0 10px 30px rgba(0,0,0,.35)}
body.themed main>.msg.ok{border-color:#86efac}
body.themed main>.msg.err{border-color:#fca5a5}
body.themed .t-page{margin:0 auto}
body.themed .t-page.narrow{max-width:760px}
body.themed .t-page.mid{max-width:980px}

/* ---- page head ---- */
body.themed .t-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#fff;margin:8px 0 18px}
body.themed .t-head h1{font-size:34px;line-height:1.1;margin:0 0 6px;letter-spacing:-.02em;font-weight:700;text-shadow:0 2px 24px rgba(45,212,191,.25)}
body.themed .t-sub{margin:0;color:#b6c0d4;font-size:14.5px}
body.themed .t-sub b{color:#e6fffb;font-weight:600}
body.themed .t-head code{background:rgba(255,255,255,.08);color:#c7d2fe;border:1px solid rgba(255,255,255,.1);font-size:12px}
body.themed .t-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.themed .t-actions form{margin:0}
body.themed .t-head .t-actions{padding-bottom:3px}
/* ping pill */
body.themed .t-pulse{display:inline-flex;align-items:center;gap:7px;background:rgba(6,12,28,.86);border:1px solid rgba(94,234,212,.45);color:#e6fffb;font-size:12.5px;line-height:1;padding:9px 12px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,0,0,.5),0 0 0 3px rgba(45,212,191,.08);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
body.themed .t-pulse b{font-weight:600;color:#99f6e4;font-variant-numeric:tabular-nums}
body.themed .t-pulse i{width:6px;height:6px;flex:none;border-radius:50%;background:var(--glow);box-shadow:0 0 0 0 rgba(45,212,191,.6);animation:t-blink 2s ease-out infinite}
@keyframes t-blink{0%{box-shadow:0 0 0 0 rgba(45,212,191,.6)}100%{box-shadow:0 0 0 6px rgba(45,212,191,0)}}

/* ---- buttons ---- */
body.themed .t-btn{display:inline-flex;align-items:center;gap:6px;margin:0;padding:7px 13px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:600;line-height:1.25;cursor:pointer;
  border:1px solid #0b5f59;background:linear-gradient(180deg,#139187,#0f766e);color:#fff;text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 18px rgba(15,118,110,.35),inset 0 1px 0 rgba(255,255,255,.2);transition:background .12s,border-color .12s,color .12s,filter .12s,transform .1s}
body.themed .t-btn:hover{filter:brightness(1.06);text-decoration:none}
body.themed .t-btn:active{transform:translateY(1px)}
body.themed .t-btn:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
body.themed .t-btn svg{flex:none}
body.themed .t-btn.secondary{background:#fff;border-color:#cbd5e1;color:var(--ink);box-shadow:none}
body.themed .t-btn.secondary:hover{background:#f8fafc;border-color:#94a3b8;filter:none}
body.themed .t-btn.danger{background:linear-gradient(180deg,#dc2626,#b91c1c);border-color:#991b1b;color:#fff;box-shadow:0 6px 18px rgba(185,28,28,.3),inset 0 1px 0 rgba(255,255,255,.18)}
body.themed .t-btn.ghost{background:transparent;border-color:transparent;color:#475569;box-shadow:none}
body.themed .t-btn.ghost:hover{background:#f1f5f9;border-color:#e2e8f0;color:var(--ink);filter:none}
body.themed .t-btn.ghost.main{color:var(--brand)}
body.themed .t-btn.ghost.main:hover{background:#f0fdfa;border-color:#99f6e4;color:#0f766e}
body.themed .t-btn.ghost.ok:hover{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
body.themed .t-btn.ghost.warn:hover{background:#fffbeb;border-color:#fde68a;color:#b45309}
body.themed .t-btn.ghost.danger:hover{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
body.themed .t-btn.small{padding:4px 9px;font-size:12.5px;line-height:1.3;border-radius:7px}
body.themed .t-btn.big{padding:12px 24px;font-size:16px;border-radius:10px}
body.themed .t-btn:disabled,body.themed .t-btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;filter:none;transform:none;pointer-events:none}

/* ---- forms ---- */
body.themed .t-input,body.themed .t-select,body.themed .t-textarea,body.themed .t-search input{width:100%;margin:0;padding:9px 12px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
body.themed .t-input:focus,body.themed .t-select:focus,body.themed .t-textarea:focus,body.themed .t-search input:focus{outline:0;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(20,184,166,.18)}
body.themed .t-input:user-invalid,body.themed .t-select:user-invalid,body.themed .t-textarea:user-invalid{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
body.themed .t-input::placeholder,body.themed .t-textarea::placeholder,body.themed .t-search input::placeholder{color:#9aa3b2}
body.themed .t-input.small,body.themed .t-select.small,body.themed .t-search input{padding:7px 11px;font-size:13.5px}
body.themed .t-select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body.themed .t-textarea{min-height:96px;resize:vertical;line-height:1.5}
body.themed .t-input.mono,body.themed .t-textarea.mono{font-family:var(--mono);font-size:13.5px}
body.themed .t-label,body.themed .t-field>label{display:block;margin:0;font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
body.themed .t-field{display:flex;flex-direction:column;gap:5px;margin:0 0 14px;min-width:0}
body.themed .t-hint{font-size:12.5px;color:var(--muted)}
body.themed .t-hint code{font-size:12px}
body.themed label.t-check,body.themed .t-check{display:flex;align-items:flex-start;gap:8px;margin:0 0 10px;font-size:13.5px;font-weight:400;color:var(--ink);line-height:1.35;cursor:pointer}
body.themed .t-check input{margin:3px 0 0;accent-color:var(--brand);flex:none}
body.themed .t-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
body.themed .t-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
body.themed .t-search{position:relative;display:block;margin:0}
body.themed .t-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}
body.themed .t-search input{width:300px;max-width:100%;padding-left:32px;padding-right:12px}

/* ---- sections, banners, small text ---- */
body.themed .t-section{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);font-weight:700}
body.themed *+.t-section{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
body.themed .t-section.flat{margin-top:0;padding-top:0;border-top:0}
body.themed .t-section .t-hint{letter-spacing:0;text-transform:none;font-weight:400}
body.themed .t-alert{display:flex;align-items:center;gap:10px;background:#fee2e2;color:#7f1d1d;border:1px solid #fca5a5;border-radius:10px;padding:10px 14px;margin:0 0 16px;font-size:13.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.35)}
body.themed .t-alert svg{flex:none}
body.themed .t-card .t-alert{box-shadow:none}
body.themed .t-alert.warn{background:#fef3c7;color:#78350f;border-color:#fcd34d}
body.themed .t-alert.info{background:#f0fdfa;color:#134e4a;border-color:#99f6e4;font-weight:500}
body.themed .t-mono{font-family:var(--mono);font-size:13px}
body.themed .t-na{color:#94a3b8}
body.themed .t-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#94a3b8;margin-right:5px;vertical-align:1px}
body.themed .t-dot.ok{background:var(--green)}
body.themed .t-dot.warn{background:var(--amber)}
body.themed .t-dot.bad,body.themed .t-dot.err{background:var(--red)}
body.themed .t-dot.run,body.themed .t-dot.info{background:var(--blue)}
body.themed .t-dot.mk{background:var(--indigo)}

/* ---- cards ---- */
body.themed .t-card{position:relative;overflow:hidden;background:var(--card);color:var(--ink);border-radius:14px;margin:0 0 16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 60px rgba(20,184,166,.08),0 0 0 1px rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.25) inset}
body.themed .t-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--glow),var(--brand))}
body.themed .t-card.attn::before{background:linear-gradient(90deg,#d97706,#fbbf24,#d97706)}
body.themed .t-card.plain::before{content:none}
body.themed .t-card.pad{padding:18px 20px 20px}
body.themed .t-card.pad>.t-card-head{padding:0 0 12px}
body.themed .t-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 20px 12px}
body.themed .t-card-head h2{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px;line-height:1.3}
body.themed .t-card-head h2 svg{flex:none}
body.themed .t-card.attn .t-card-head h2 svg{color:var(--amber)}
body.themed .t-card-head small{font-size:12.5px;color:var(--muted)}
body.themed .t-card-head small code{font-size:12px}
body.themed .t-count{font-size:12px;font-weight:600;color:var(--brand);background:#f0fdfa;border:1px solid #99f6e4;border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums;line-height:1.5}
body.themed .t-count.run{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}
body.themed .t-link{font-size:13px;font-weight:600;color:var(--brand)}
body.themed .t-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 20px 12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);background:#fafbfc}
body.themed .t-card-foot b{color:var(--ink);font-weight:600}

/* ---- KPI tiles ---- */
body.themed .t-tile{position:relative;background:var(--card);border-radius:12px;padding:14px 16px 15px;min-width:0;display:flex;flex-direction:column;
  box-shadow:0 14px 36px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.25) inset}
body.themed .t-tile-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);font-weight:700;margin:0 0 8px;white-space:nowrap}
body.themed .t-tile-h .t-flag,body.themed .t-tile-h .t-badge{letter-spacing:0;text-transform:none}
body.themed .t-tile-big{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.themed .t-tile-big small{font-size:13.5px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:5px}
body.themed .t-tile-big .t-sep{color:#cbd5e1;font-weight:400;margin:0 8px}
body.themed .t-tile-pair{display:flex;gap:0;align-items:flex-end}
body.themed .t-tile-pair>div{min-width:0;padding-right:14px;margin-right:14px;border-right:1px solid var(--line)}
body.themed .t-tile-pair>div:last-child{border-right:0;margin-right:0;padding-right:0}
body.themed .t-tile-pair b{display:block;font-size:26px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
body.themed .t-tile-pair small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap}
body.themed .t-tile.good .t-tile-big{color:#15803d}
body.themed .t-tile.warn .t-tile-big{color:#b45309}
body.themed .t-tile.bad .t-tile-big{color:#b91c1c}
body.themed .t-tile-sub{margin-top:6px;font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:3px 10px;line-height:1.4;font-variant-numeric:tabular-nums}
body.themed .t-tile-sub b{color:var(--ink);font-weight:600}
body.themed .t-tile-sub span{white-space:normal}
body.themed .t-tile>.t-tile-sub{margin-bottom:12px}
body.themed .t-tile>.t-meter{margin-top:auto}

/* ---- meters ---- */
body.themed .t-meter{display:flex;height:6px;border-radius:3px;background:#e5e7eb;overflow:hidden}
body.themed .t-meter i{display:block;height:100%;background:var(--brand2);border-radius:3px;flex:none;max-width:100%}
body.themed .t-meter i.warn,body.themed .t-meter.warn i{background:#f59e0b}
body.themed .t-meter i.bad,body.themed .t-meter i.over,body.themed .t-meter.bad i,body.themed .t-meter.over i{background:var(--red)}
body.themed .t-meter i.ok,body.themed .t-meter.ok i{background:var(--green)}
body.themed .t-meter i.mk,body.themed .t-meter.mk i{background:var(--indigo)}
body.themed .t-meter.seg i{border-radius:0}
body.themed .t-meter.seg i+i{margin-left:1px}

/* ---- badges, flags, chips ---- */
body.themed .t-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 7px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;background:#e5e7eb;color:#374151}
body.themed .t-badge i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
body.themed .t-badge.active,body.themed .t-badge.done,body.themed .t-badge.ok{background:#dcfce7;color:#15803d}
body.themed .t-badge.suspended,body.themed .t-badge.queued,body.themed .t-badge.warn{background:#fef3c7;color:#b45309}
body.themed .t-badge.error,body.themed .t-badge.failed,body.themed .t-badge.err{background:#fee2e2;color:#b91c1c}
body.themed .t-badge.creating{background:#e0e7ff;color:#3730a3}
body.themed .t-badge.running,body.themed .t-badge.info{background:#dbeafe;color:#1d4ed8}
body.themed .t-badge.creating i,body.themed .t-badge.running i{animation:t-breathe 1.2s ease-in-out infinite}
body.themed .t-badge.live i{box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:t-ping 2.4s ease-out infinite}
@keyframes t-breathe{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes t-ping{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}100%{box-shadow:0 0 0 6px rgba(22,163,74,0)}}
body.themed .t-flags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
body.themed .t-flag{display:inline-block;font-size:11px;font-weight:600;padding:0 7px;border-radius:999px;border:1px solid;line-height:1.6;white-space:nowrap}
body.themed .t-flag.bad,body.themed .t-flag.err{color:#b91c1c;border-color:#fca5a5;background:#fff5f5}
body.themed .t-flag.warn{color:#b45309;border-color:#fcd34d;background:#fffbeb}
body.themed .t-flag.ok{color:#15803d;border-color:#86efac;background:#f0fdf4}
body.themed .t-chips{display:flex;flex-wrap:wrap;gap:6px}
body.themed .t-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-family:var(--mono);color:#334155;background:#f8fafc;border:1px solid var(--line);border-radius:999px;padding:3px 9px 3px 8px;line-height:1.2;white-space:nowrap}
body.themed .t-chip i{width:7px;height:7px;border-radius:50%;background:#94a3b8;flex:none}
body.themed .t-chip.ok i{background:var(--green);box-shadow:0 0 0 2px rgba(22,163,74,.18)}
body.themed .t-chip.warn{border-color:#fcd34d;background:#fffbeb;color:#92400e}
body.themed .t-chip.warn i{background:var(--amber);box-shadow:0 0 0 2px rgba(217,119,6,.18)}
body.themed .t-chip.err{border-color:#fca5a5;background:#fff5f5;color:#991b1b}
body.themed .t-chip.err i{background:var(--red);box-shadow:0 0 0 2px rgba(220,38,38,.18)}
body.themed .t-chip.muted{color:#64748b}

/* ---- table ---- */
body.themed .t-tablewrap{overflow-x:auto}
body.themed .t-table{width:100%;border-collapse:collapse;font-size:13.5px}
body.themed .t-table th{padding:8px 10px;background:#f8fafc;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;text-align:left}
body.themed .t-table.sticky th{position:sticky;top:0;z-index:1}
body.themed .t-table th[data-sort]{cursor:pointer;user-select:none}
body.themed .t-table th[data-sort]:hover{color:var(--ink)}
body.themed .t-table th[data-sort]::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #e2e8f0;vertical-align:1px}
body.themed .t-table th[data-sort]:hover::after{border-top-color:#94a3b8}
body.themed .t-table th.asc::after{border-top:0;border-bottom:5px solid var(--brand)}
body.themed .t-table th.desc::after{border-top-color:var(--brand)}
body.themed .t-table th.r,body.themed .t-table td.r{text-align:right}
body.themed .t-table td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
body.themed .t-table th:first-child,body.themed .t-table td:first-child{padding-left:20px}
body.themed .t-table th:last-child,body.themed .t-table td:last-child{padding-right:16px}
body.themed .t-table tbody tr:last-child td{border-bottom:0}
body.themed .t-table tbody tr:hover td{background:#fafcfd}
body.themed .t-table tr[hidden]{display:none}
body.themed .t-table .t-nomatch td{padding:26px 20px;text-align:center;color:var(--muted);font-size:13.5px}

/* ---- facts, code, logs ---- */
body.themed .t-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 14px;margin:0}
body.themed .t-kv>div{min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#f8fafc}
body.themed .t-kv dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
body.themed .t-kv dd{margin:2px 0 0;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.themed .t-kv dd code{font-size:12.5px;padding:0 5px}
body.themed .t-kv dd b{color:var(--brand);font-weight:600}
body.themed .t-code,body.themed .t-pre{display:block;margin:0;background:#0b1020;color:#d5dbe7;border-radius:10px;font-family:var(--mono);font-size:12.5px;line-height:1.5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
body.themed .t-code{padding:12px 14px;white-space:pre-wrap;word-break:break-all;user-select:all;cursor:text}
body.themed .t-pre{padding:14px;overflow:auto;max-height:70vh;white-space:pre}
body.themed .t-pre.tall{max-height:none}

/* ---- empty state ---- */
body.themed .t-empty{text-align:center;padding:34px 28px 40px}
body.themed .t-empty-art{width:150px;height:150px;margin:0 auto 14px;display:block}
body.themed .t-empty h2{font-size:24px;margin:0 0 8px;letter-spacing:-.01em}
body.themed .t-empty p{margin:0 auto 22px;max-width:520px;color:var(--muted);font-size:15px;line-height:1.55}
body.themed .t-empty p b{color:var(--ink);font-weight:600}
body.themed .t-empty .t-hint{margin:16px auto 0;color:#94a3b8}
body.themed .t-steps{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:26px auto 0;max-width:940px}
body.themed .t-step{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#475569;background:#f8fafc;border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px}
body.themed .t-step i{width:22px;height:22px;border-radius:50%;background:#ccfbf1;color:#0f766e;font-style:normal;font-weight:700;font-size:11.5px;display:grid;place-items:center;flex:none}

/* ---- motion + responsive ---- */
@media (prefers-reduced-motion:reduce){body.themed .t-pulse i,body.themed .t-badge.creating i,body.themed .t-badge.running i,body.themed .t-badge.live i{animation:none}}
@media (max-width:900px){body.themed .t-grid3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){body.themed .t-grid2,body.themed .t-grid3{grid-template-columns:1fr}}
@media (max-width:640px){
  body.themed main{padding:0 14px}
  body.themed .t-head h1{font-size:28px}
  body.themed .t-search input{width:100%}
}

/* ---- fleet additions (FLEET.md §4.4 — the only theme.css changes): a pulse pill of an offline host, and the
   segmented button/link group the hub pages use as a host picker (.db-hostf / .jb-hostf / .bk-hostf / .rs-host) ---- */
body.themed .t-pulse.off{border-color:rgba(248,113,113,.55);color:#fecaca}
body.themed .t-pulse.off b{color:#fca5a5}
body.themed .t-pulse.off i{background:var(--red);animation:none;box-shadow:0 0 0 3px rgba(220,38,38,.25)}
body.themed .t-seg{display:inline-flex;flex-wrap:wrap;background:#f1f5f9;border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
body.themed .t-seg button,body.themed .t-seg a{margin:0;border:0;background:transparent;color:#475569;font:inherit;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1.35;text-decoration:none;white-space:nowrap}
body.themed .t-seg button:hover,body.themed .t-seg a:hover{color:var(--ink);background:#e2e8f0;text-decoration:none}
body.themed .t-seg button.on,body.themed .t-seg a.on,body.themed .t-seg button.is-on,body.themed .t-seg a.is-on{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 1px #99f6e4}
body.themed .t-seg button.off,body.themed .t-seg a.off{color:#b91c1c;text-decoration:line-through}
body.themed .t-seg button:focus-visible,body.themed .t-seg a:focus-visible{outline:2px solid var(--brand2);outline-offset:1px}