/* ════════════════════════════════════════════════════════════════════════
   CURSEDOWNS — OWNER CONTROL PANEL
   Design system lifted from Seb's World (same tokens, fonts, gradient, glass)
   and re-tuned for a dense, app-like control surface.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --bg-0: #07060b;
  --bg-1: #0d0b14;
  --bg-2: #14101e;
  --surface:   rgba(255,255,255,0.035);
  --surface-2: rgba(255,255,255,0.065);
  --surface-3: rgba(255,255,255,0.10);
  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);

  --text:   #efecf6;
  --text-2: #b9b1c8;
  --text-3: #968da8;   /* nudged lighter for AA contrast on aurora-lit surfaces */
  /* aliases — rules below & inline styles reference these names */
  --muted: var(--text-2);
  --text-dim: var(--text-3);
  --good: var(--ok);

  --accent:   #ff3d77;
  --accent-2: #9d6bff;
  --grad: linear-gradient(120deg, #ff3d77, #9d6bff);
  --ok:   #3ddc97;
  --warn: #ffb454;
  --bad:  #ff5d6c;

  --radius:    18px;
  --radius-sm: 11px;
  --radius-xs: 8px;   /* small chips, badges, thumbnails, segmented controls */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 1080px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
/* ── shared form-control baseline — every text field / textarea / select reads the same
   (dark inset, sm radius, one focus ring). Per-view classes add only layout (width/min-height/
   flex); the look lives here. Fixes textareas that had no background (white on dark). ── */
textarea, select,
input[type="text"], input[type="number"], input[type="password"], input[type="search"], input:not([type]) {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 8px 11px; font-family: inherit; font-size: .85rem;
}
textarea { line-height: 1.5; resize: vertical; }
textarea:focus, select:focus,
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input:not([type]):focus { outline: none; border-color: var(--accent); }
::placeholder { color: var(--text-3); }
::selection { background: color-mix(in srgb, var(--accent) 65%, transparent); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: #2a2438; border-radius: 99px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: #3a3250; }

/* ambient aurora + grain (same flavour as the store) */
body::before {
  content: ""; position: fixed; inset: -20% -10% auto -10%; height: 60vh; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 60% at 22% 20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(38% 55% at 80% 12%, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 72%);
  filter: blur(40px); opacity: 0.55;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 36px); position: relative; z-index: 2; }
/* widen the central content on roomy screens → grids spread, pages get shorter */
@media (min-width: 1440px) { :root { --wrap: 1280px; } }
@media (min-width: 1760px) { :root { --wrap: 1440px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  padding: 11px 20px; border-radius: 99px; text-decoration: none; white-space: nowrap;
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s, opacity .16s;
}
.btn:active { transform: scale(.97); }
.btn.grad { background: var(--grad); color: #190d18; box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn.grad:hover { box-shadow: 0 10px 32px -8px color-mix(in srgb, var(--accent) 80%, transparent); transform: translateY(-1px); }
.btn.ghost { border: 1px solid var(--border-strong); color: var(--text); background: var(--surface); }
.btn.ghost:hover { border-color: color-mix(in srgb, var(--accent-2) 60%, var(--border-strong)); background: var(--surface-2); }
.btn.sm { padding: 8px 14px; font-size: .8rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
@media (max-width: 760px) { .btn { min-height: 44px; } }   /* 44px touch target on mobile */
:is(a,button,summary,input,[tabindex]):focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 8px; }

/* ════════ LOCK SCREEN (token gate) ════════ */
.lock {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 24px; background: radial-gradient(80% 80% at 50% 0%, var(--bg-2), var(--bg-0));
  overflow: hidden;
}
.lock[hidden] { display: none; }
.lock::before {   /* slow drifting aurora behind the card — premium entry ambience */
  content: ""; position: absolute; width: 120vw; height: 120vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
              radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 70%);
  background-position: 30% 40%, 70% 60%; background-repeat: no-repeat; background-size: 60% 60%, 55% 55%;
  filter: blur(30px); opacity: .7; animation: lockDrift 16s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes lockDrift { from { transform: translate(-4%, -3%) rotate(0deg); } to { transform: translate(4%, 3%) rotate(8deg); } }
.lock-card {
  position: relative; width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px 30px; text-align: center; overflow: hidden;
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  animation: lockIn .5s cubic-bezier(.2,.9,.25,1.05) both;
}
.lock-card::before {   /* soft accent glow from the top edge */
  content: ""; position: absolute; inset: -50% -20% auto -20%; height: 70%; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%);
}
.lock-card > * { position: relative; }
@keyframes lockIn { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
.lock-mark { width: 54px; height: 54px; margin: 0 auto 14px; color: var(--accent); animation: lockGlow 3.4s ease-in-out infinite; }
@keyframes lockGlow {
  0%, 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 40%, transparent)); }
  50%      { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent-2) 65%, transparent)); }
}
.lock-card h1 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.01em; }
.lock-card h1 em { font-style: normal; color: var(--accent); }   /* solid, not gradient-clipped text */
.lock-card p { color: var(--text-2); font-size: .92rem; margin-top: 8px; }
.field { display: flex; gap: 8px; margin-top: 20px; }
.field input {
  flex: 1; min-width: 0; background: var(--bg-0); border: 1px solid var(--border-strong);
  color: var(--text); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .95rem;
}
.field input::placeholder { color: var(--text-3); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.lock-remember { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: var(--text-3); font-size: .82rem; }
.lock-err { color: var(--bad); font-size: .85rem; margin-top: 12px; min-height: 1.1em; }
.lock-note { color: var(--text-3); font-size: .76rem; margin-top: 18px; line-height: 1.5; }

/* ════════ HEADER ════════ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg-1) 82%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--border);
}
.topbar-in { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; text-decoration: none; }
.brand .mark { width: 26px; height: 26px; color: var(--accent); }
.brand em { font-style: normal; color: var(--accent); }   /* solid, not gradient-clipped text */
.spacer { flex: 1; }

.conn { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); padding: 6px 12px; border-radius: 99px; font-weight: 500; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 0 transparent; flex: none; }
.conn.online  .dot { background: var(--ok);  animation: pulse 2s infinite; }
.conn.offline .dot { background: var(--bad); }
.conn.stale   .dot { background: var(--warn); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* command ping-pong: a pip by the pill pulses amber while a command flies to the device,
   then flashes green when the Worker confirms it (red if it was rejected). setConn() only
   rewrites #conn's class, so this child animates independently of the 1.2s poll. */
.conn-ping { width: 0; height: 8px; border-radius: 99px; background: transparent; flex: none; transition: width .18s ease; }
.conn-ping.sending { width: 8px; background: var(--warn); animation: cping 0.7s ease-in-out infinite; }
.conn-ping.ok  { width: 8px; background: var(--ok);  animation: cpingSettle .85s ease-out forwards; }
.conn-ping.err { width: 8px; background: var(--bad); animation: cpingSettle .85s ease-out forwards; }
@keyframes cping { 0%,100% { opacity: .45; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes cpingSettle { 0% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: .55; } }

.lockpill { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600;
  font-family: var(--font-display); padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.lockpill[hidden] { display: none; }
.lockpill.on  { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--border-strong)); background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.lockpill.off { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }

/* ════════ LAYOUT ════════ */
main { padding-block: 26px 64px; }
/* a quiet inline tag, not an all-caps tracked kicker over every section */
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display);
  font-size: .74rem; letter-spacing: .01em; color: var(--text-3); font-weight: 600; }
.eyebrow b { color: var(--accent); }
.sec { margin-top: 30px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-head h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.sec-head .hint { color: var(--text-3); font-size: .82rem; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }

/* item cards (discrete list entries) get a subtle "alive under the cursor" hover — a faint
   ring + depth, no lift or pointer cursor (they aren't clickable; their inner buttons are).
   Uses box-shadow, not border-color, so semantic left-bars (req status, reports) keep their hue. */
.jr-entry, .tk-card, .al-task, .aid-report, .req-item, .ppl-item, .dos-block {
  transition: box-shadow .16s;
}
.jr-entry:hover, .tk-card:hover, .al-task:hover, .aid-report:hover, .req-item:hover, .ppl-item:hover, .dos-block:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 22%, transparent), 0 6px 20px -14px #000;
}

/* ── Quick actions grid ── */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1 / 0.82; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface-2); transition: transform .14s, border-color .14s, background .14s, box-shadow .14s;
  text-align: center; padding: 10px;
}
.qbtn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); background: var(--surface-3); transform: translateY(-2px); }
.qbtn:active { transform: scale(.96); }
.qbtn .emoji { font-size: 1.7rem; line-height: 1; }
.qbtn .lbl { font-family: var(--font-display); font-weight: 600; font-size: .82rem; }
.qbtn .lvl { font-size: .72rem; color: var(--accent-2); font-weight: 600; min-height: 1em; }
.qbtn.danger:hover { border-color: color-mix(in srgb, var(--bad) 70%, transparent); }

/* ── Level steppers ── */
.steppers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.stepper { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.stepper-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.stepper-top .emoji { font-size: 1.25rem; }
.stepper-top .name { font-family: var(--font-display); font-weight: 600; }
.stepper-top .now { margin-left: auto; font-size: .76rem; color: var(--accent-2); font-weight: 600; }
.pips { display: flex; flex-wrap: wrap; gap: 5px; }
.pip {
  min-width: 30px; height: 30px; padding: 0 4px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--bg-0); color: var(--text-2); font-size: .8rem; font-weight: 600; font-family: var(--font-display);
  transition: background .12s, color .12s, border-color .12s, transform .1s;
}
.pip:hover { border-color: var(--accent-2); color: var(--text); }
.pip:active { transform: scale(.9); }
.pip.on { background: var(--grad); color: #190d18; border-color: transparent; }

/* ── Modules accordion ── */
.modules { display: flex; flex-direction: column; gap: 10px; }
.module-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 14px 2px 2px; display: flex; align-items: center; gap: 9px; }
.module-cat::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.module-cat:first-child { margin-top: 2px; }
.module { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.module > summary {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; user-select: none;
}
.module > summary::-webkit-details-marker { display: none; }
.module > summary .chev { margin-left: auto; transition: transform .2s; color: var(--text-3); }
.module[open] > summary .chev { transform: rotate(90deg); }
.module > summary .mstat { font-size: .74rem; color: var(--accent-2); font-weight: 600; }
.module-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.mod-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }   /* action buttons pack; a lone one spans full-width */
.module-body .mdesc { grid-column: 1/-1; color: var(--text-3); font-size: .8rem; margin-bottom: 4px; }
.abtn {
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface-2);
  text-align: left; transition: background .12s, border-color .12s, transform .1s;
  display: flex; flex-direction: column; gap: 3px; align-items: stretch;
}
.abtn:hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong)); }
.abtn:active { transform: scale(.97); }
.abtn-top { display: flex; align-items: center; gap: 7px; }
.abtn-lbl { font-size: .85rem; font-weight: 500; }
.abtn-chip {
  margin-left: auto; flex: none; font-size: .64rem; font-weight: 600; font-family: var(--font-display);
  letter-spacing: .01em; padding: 2px 7px; border-radius: 99px; white-space: nowrap;
  color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.abtn-sub { font-size: .72rem; font-weight: 400; line-height: 1.3; color: var(--text-3); }
.abtn.danger { border-color: color-mix(in srgb, var(--bad) 45%, var(--border-strong)); }
.abtn.danger:hover { border-color: color-mix(in srgb, var(--bad) 75%, transparent); background: color-mix(in srgb, var(--bad) 10%, var(--surface-3)); }

/* ── Simplified controls (toggle / slider / select) — full-width rows ── */
.ctl { grid-column: 1/-1; display: flex; align-items: center; gap: 12px; padding: 9px 13px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 9px; }
.ctl-lab { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctl-name { font-size: .85rem; font-weight: 500; }
.ctl-sub { font-size: .72rem; color: var(--text-3); line-height: 1.3; }
.ctl-toggle .ctl-lab, .ctl-select .ctl-lab { flex: 1; }
.ctl-slider .ctl-lab { flex: none; min-width: 34%; }
.ctl-slider input[type=range] { flex: 1; min-width: 0; }
.ctl-out { flex: none; margin-left: auto; min-width: 40px; text-align: right;
  font-size: .78rem; font-weight: 600; color: var(--accent-2); font-family: var(--font-display); }
.ctl-select select { margin-left: auto; flex: none; max-width: 52%; }
/* toggle switch */
.tgl { position: relative; width: 44px; height: 25px; flex: none; margin-left: auto; border-radius: 99px;
  background: var(--surface-3); border: 1px solid var(--border-strong); cursor: pointer;
  transition: background .15s, border-color .15s; }
.tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--text-3); transition: left .15s, background .15s; }
.tgl.on { background: var(--grad); border-color: transparent; }
.tgl.on::after { left: 21px; background: #fff; }
.ctl-cycle .abtn-chip { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ── Live status panel ── */
.status-list { display: flex; flex-direction: column; gap: 7px; }
.status-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-0);
  border: 1px solid var(--border); border-radius: 9px; font-size: .86rem; }
.status-row .sid { color: var(--text-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; min-width: 64px; }
.status-row .sline { color: var(--text); font-weight: 500; }
.empty { color: var(--text-3); font-size: .85rem; text-align: center; padding: 22px; }

/* ── Prompt (forwarded DLG/TB) ── */
.prompt-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(6,5,11,.66); backdrop-filter: blur(7px); animation: promptFade .18s ease; }
.prompt-wrap[hidden] { display: none; }
@keyframes promptFade { from { opacity: 0; } to { opacity: 1; } }
.prompt {
  position: relative; overflow: hidden auto; width: min(460px, 100%);
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);   /* vh fallback for browsers without dvh */
  background: radial-gradient(130% 90% at 50% -15%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%), var(--bg-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 26px 24px 22px;
  box-shadow: 0 34px 90px -30px #000, 0 1px 0 rgba(255,255,255,.04) inset;
  animation: promptIn .22s cubic-bezier(.2,.9,.25,1.15);
}
@keyframes promptIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.prompt::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.prompt-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: .82rem; cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s, border-color .12s; }
.prompt-x:hover { background: var(--surface-2); color: var(--text); }
.prompt .pkind { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; padding-right: 34px; }
.prompt .ptext { margin: 8px 0 18px; font-size: 1rem; line-height: 1.45; white-space: pre-wrap; color: var(--text); }
.prompt-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.prompt-btns .btn { flex: 1 1 30%; padding: 12px 16px; }
/* inputs/controls inside the prompt — bigger, with a focus ring */
.prompt .field, .prompt .param-row { margin-top: 0; gap: 10px; }
.prompt .field input, .prompt input[type=text] {
  flex: 1; min-width: 0; background: var(--bg-0); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: var(--radius-sm); padding: 13px 15px; font-size: .98rem; transition: border-color .12s, box-shadow .12s; }
.prompt .field input:focus, .prompt input[type=text]:focus, .prompt select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

/* ── Toasts ── */
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 300;   /* feedback stays visible above every overlay */
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: 92vw; }
.toast {
  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 99px;
  padding: 9px 18px; font-size: .85rem; font-weight: 500; box-shadow: 0 12px 30px -12px #000;
  animation: rise .25s ease both; display: flex; align-items: center; gap: 8px;
}
.toast.ok  { border-color: color-mix(in srgb, var(--ok) 55%, var(--border-strong)); }
.toast.bad { border-color: color-mix(in srgb, var(--bad) 60%, var(--border-strong)); }
.toast.out { animation: toastOut .28s ease forwards; }
.toast .e { font-size: 1rem; }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ── skeleton loaders — shimmer placeholders shown while a view fetches (no "Loading…" flash) ── */
.skel-wrap { display: flex; flex-direction: column; gap: 10px; }
.skel {
  height: 46px; border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%; animation: skelShimmer 1.3s ease-in-out infinite;
}
.skel:nth-child(2) { width: 92%; }
.skel:nth-child(3) { width: 78%; }
@keyframes skelShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }

/* ── command palette (Ctrl/⌘+K) ── */
.palbtn-kbd { font-size: .7rem; opacity: .7; border: 1px solid var(--border-strong); border-radius: 5px; padding: 0 4px; }
@media (max-width: 640px) { .palbtn-kbd { display: none; } }   /* just the 🔍 on mobile */
.pal-ov {
  position: fixed; inset: 0; z-index: 215; display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px; background: rgba(6,5,11,.62); backdrop-filter: blur(4px); animation: promptFade .16s ease;
}
.pal-ov[hidden] { display: none; }
.pal-box {
  width: min(560px, 100%); background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: 0 30px 80px -20px #000; overflow: hidden;
  animation: promptIn .2s cubic-bezier(.2,.9,.25,1.1);
}
.pal-input { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; border-radius: 0; padding: 16px 18px; font-size: 1rem; }
.pal-input:focus { outline: none; border-color: var(--border); box-shadow: none; }
.pal-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.pal-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.pal-row.on { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.pal-emoji { font-size: 1.05rem; flex: none; width: 22px; text-align: center; }
.pal-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pal-row.danger .pal-label { color: var(--bad); }
.pal-kind { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); flex: none; }
.pal-empty { padding: 16px; text-align: center; color: var(--text-3); font-size: .85rem; }

/* ── Wardrobe body map: schematic mannequin (wireframe 3D / flat 2D), zones lit by worn state ── */
.bmap-wrap { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.bmap-stage { flex: 0 0 auto; width: 220px; max-width: 100%; }
.bmap-side { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; gap: 12px; }
.bmap-svg { width: 100%; height: auto; display: block; }
.bmap-figure { fill: none; stroke: var(--text-3); stroke-width: 2; opacity: .5; }
.bmap-figure .bmap-limb { stroke-width: 8; stroke-linecap: round; }
.bmap-lines { fill: none; stroke: color-mix(in srgb, var(--accent-2) 45%, transparent); stroke-width: 1; opacity: .6; }
.bmap-svg.bmap-3d .bmap-lines-2d { display: none; }
.bmap-svg.bmap-2d .bmap-lines-3d { display: none; }
.bmap-zone { fill: transparent; stroke: transparent; stroke-width: 1.5; cursor: pointer; transition: fill .15s, stroke .15s; }
.bmap-zone:hover { fill: color-mix(in srgb, var(--accent-2) 12%, transparent); stroke: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.bmap-zone.on { fill: color-mix(in srgb, var(--accent) 20%, transparent); stroke: color-mix(in srgb, var(--accent) 55%, transparent); }
.bmap-zone.sel { stroke: var(--accent); stroke-width: 2; }
.bmap-lock { font-size: 16px; }
.bmap-toolbar { display: flex; gap: 8px; }
.bmap-detail { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-0); padding: 12px; min-height: 84px; }
.bmap-zone-h { font-family: var(--font-display); font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.bmap-items { display: flex; flex-wrap: wrap; gap: 6px; }
.bmap-hint { color: var(--text-3); font-size: .82rem; line-height: 1.4; }
@media (max-width: 560px) { .bmap-stage { width: 168px; margin: 0 auto; } }

/* footer line */
/* ── accessibility ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.foot { margin-top: 44px; text-align: center; color: var(--text-3); font-size: .76rem; line-height: 1.7; }
.foot a { color: var(--accent-2); text-decoration: none; }

@media (max-width: 560px) {
  .quick-grid { gap: 9px; }
  .qbtn .emoji { font-size: 1.45rem; }
  .topbar-in { flex-wrap: wrap; }
}

/* ── Suggestions editor ───────────────────────────────────────────── */
.btn.xs { padding: 5px 9px; font-size: .78rem; }
.sugg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.sugg-empty { color: var(--text-3); font-size: .9rem; padding: 10px 2px; }
.sugg-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sugg-row.off { opacity: .5; }
.sugg-tog { background: none; border: none; color: var(--accent); font-size: 1rem; cursor: pointer; line-height: 1; padding: 2px; }
.sugg-row.off .sugg-tog { color: var(--text-3); }
.sugg-info { flex: 1; min-width: 0; }
.sugg-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sugg-name { font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.sugg-trig { font-size: .72rem; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); padding: 1px 7px; border-radius: 999px; }
.sugg-type { font-size: .66rem; color: var(--text-3); border: 1px solid var(--border); padding: 1px 6px; border-radius: 999px; letter-spacing: .04em; }
.sugg-data { font-size: .8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sugg-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.sugg-add input, .sugg-add select { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 10px; font-size: .85rem; }
.sugg-add #suggName, .sugg-add #suggTrig { width: 130px; }
.sugg-add input:focus, .sugg-add select:focus { outline: none; border-color: var(--accent); }
.sugg-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sugg-dirty { color: var(--warn); font-size: .78rem; }

/* ── #RLV inventory tree ──────────────────────────────────────────── */
.inv-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.inv-note { color: var(--text-3); font-size: .8rem; }
.inv-empty { color: var(--text-3); font-size: .9rem; padding: 8px 2px; }
.inv-tree { display: flex; flex-direction: column; gap: 2px; }
.inv-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius-sm); }
.inv-row:hover { background: var(--surface-2); }
.inv-tog { display: inline-block; background: none; border: none; color: var(--text-3); cursor: pointer; width: 16px; text-align: center; font-size: .85rem; padding: 0; line-height: 1; }
.inv-tog.leaf { cursor: default; }
.inv-name { flex: 1; min-width: 0; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-new { font-size: .6rem; color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); padding: 0 5px; border-radius: 999px; margin-left: 7px; }
/* currently worn on the sub */
.inv-row.worn { background: color-mix(in srgb, var(--ok) 9%, transparent); box-shadow: inset 2px 0 0 0 var(--ok); }
.inv-row.worn:hover { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.inv-worn { font-size: .6rem; font-weight: 700; color: var(--ok); margin-left: 7px; white-space: nowrap; letter-spacing: .02em; }
.inv-scanning { color: var(--text-3); font-size: .8rem; font-style: italic; padding: 3px 6px; }
.inv-base { flex: 1; min-width: 120px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 7px 10px; font-size: .82rem; }
.inv-base:focus { outline: none; border-color: var(--accent); }

/* ── Transform Builder (no-code level-ladder editor) ──────────────────
   .txe-* — native to the dark pink/purple glass theme, colours via vars only */

/* toolbar row above the two-pane body */
.txe-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.txe-toolbar select {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 8px 12px; font-size: .86rem; min-width: 160px;
}
.txe-toolbar select:focus { outline: none; border-color: var(--accent); }
.txe-toolbar .spacer { flex: 1; }

/* two-pane body: level rail + detail; wraps to column on narrow screens */
.txe-body { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }

/* ── level rail (left) ── */
.txe-rail {
  flex: 0 0 150px; width: 150px; max-height: 420px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px;
}
.txe-lvl {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-2); font-size: .84rem;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.txe-lvl:hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong)); color: var(--text); }
.txe-lvl:active { transform: scale(.97); }
.txe-lvl .txe-lvl-n { font-family: var(--font-display); font-weight: 700; color: var(--accent-2); font-size: .8rem; flex: none; }
.txe-lvl .txe-lvl-name { font-family: var(--font-display); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txe-lvl.on {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
  color: var(--text);
}
.txe-lvl.on .txe-lvl-n { color: var(--accent); }
.txe-rail .txe-rail-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

/* ── level detail (right) ── */
.txe-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.txe-detail .txe-name {
  width: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 9px 12px; font-family: var(--font-display); font-weight: 600; font-size: .95rem;
}
.txe-detail .txe-name:focus { outline: none; border-color: var(--accent); }

/* category group label inside the chip area + catalog rows */
.txe-group { margin-top: 6px; }
.txe-group-label {
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 600; margin-bottom: 6px;
}

/* restriction chips */
.txe-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.txe-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--cc, var(--accent)) 13%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--cc, var(--accent)) 48%, var(--border-strong));
  color: var(--text); border-radius: 999px; padding: 5px 10px; font-size: .82rem; font-weight: 500;
}
.txe-chip.inherited { opacity: .62; }
.txe-chip.locked, .txe-numchip.locked { opacity: .55; border-style: dashed; }
.txe-chip-lock { color: var(--text-3); font-size: .8rem; padding-left: 2px; cursor: help; }
.txe-chip .txe-chip-x {
  background: none; border: none; color: var(--text-2); font-size: 1rem; line-height: 1;
  cursor: pointer; padding: 0 0 0 2px; transition: color .12s;
}
.txe-chip .txe-chip-x:hover { color: var(--bad); }

/* number restriction: chip with an inline range slider that edits the value live */
.txe-numchip {
  display: inline-flex; align-items: center; gap: 9px;
  background: color-mix(in srgb, var(--cc, var(--accent-2)) 13%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--cc, var(--accent-2)) 46%, var(--border-strong));
  color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 500;
}
.txe-numchip.inherited { opacity: .62; }
.txe-numchip .txe-num-val { font-family: var(--font-display); font-weight: 700; color: var(--accent-2); min-width: 2.2em; text-align: right; }
.txe-numchip input[type="range"] { width: 96px; accent-color: var(--accent); height: 4px; cursor: pointer; }
.txe-numchip .txe-chip-x {
  background: none; border: none; color: var(--text-2); font-size: 1rem; line-height: 1;
  cursor: pointer; padding: 0 0 0 2px; transition: color .12s;
}
.txe-numchip .txe-chip-x:hover { color: var(--bad); }

/* ── add-restriction catalog ── */
.txe-cat { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.txe-cat-search {
  width: 100%; background: var(--bg-1); border: none; border-bottom: 1px solid var(--border);
  color: var(--text); padding: 10px 12px; font-size: .85rem;
}
.txe-cat-search::placeholder { color: var(--text-3); }
.txe-cat-search:focus { outline: none; border-bottom-color: var(--accent); }

/* category tabs */
.txe-cat-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.txe-cat-tab {
  font-size: .74rem; font-weight: 600; font-family: var(--font-display);
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-2);
  transition: background .12s, border-color .12s, color .12s;
}
.txe-cat-tab:hover { background: var(--surface-3); color: var(--text); border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border-strong)); }
.txe-cat-tab.on { background: var(--grad); color: #190d18; border-color: transparent; }

/* catalog rows */
.txe-cat-rows { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
.txe-cat-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 12px; border-bottom: 1px solid var(--border); background: none;
  color: var(--text); font-size: .85rem; transition: background .12s;
}
.txe-cat-row .txe-row-cat { font-size: .64rem; letter-spacing: .03em; opacity: .9; }
.txe-cat-row:last-child { border-bottom: none; }
.txe-cat-row:hover { background: var(--surface-2); }
.txe-cat-row .txe-row-label { font-weight: 500; }
.txe-cat-row .txe-row-cmd { font-size: .72rem; color: var(--text-3); font-family: var(--font-display); }
.txe-cat-row .txe-row-kind {
  margin-left: auto; font-size: .64rem; letter-spacing: .04em; color: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--border)); border-radius: 999px; padding: 1px 7px;
}
.txe-cat-row.disabled { color: var(--text-3); cursor: not-allowed; opacity: .55; }
.txe-cat-row.disabled:hover { background: none; }
.txe-cat-row.disabled .txe-row-kind { color: var(--text-3); border-color: var(--border); }

/* preview line */
.txe-preview {
  font-size: .86rem; color: var(--text-2); line-height: 1.6;
  background: var(--bg-0); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 14px;
}
.txe-preview b { color: var(--text); font-weight: 600; }

/* detail header: name + Inherit checkbox */
.txe-detail-head { display: flex; align-items: center; gap: 10px; }
.txe-detail-head .txe-name { flex: 1; }
.txe-inherit {
  display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer; user-select: none;
  font-size: .78rem; font-weight: 600; color: var(--text-2); white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 11px; transition: all .12s;
}
.txe-inherit:hover { border-color: var(--accent-2); }
.txe-inherit.on { color: var(--text); border-color: color-mix(in srgb, var(--accent-2) 60%, transparent);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.txe-inherit input { accent-color: var(--accent-2); cursor: pointer; }

/* SmartBuilder advisory panel */
.txe-smart {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px;
  font-size: .82rem; line-height: 1.5;
}
.txe-smart.ok { flex-direction: row; align-items: center; gap: 8px; color: var(--text-3); border-style: dashed; }
.txe-smart.ok .txe-smart-icon { color: var(--good, #36d399); }
.txe-smart-h { font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); }
.txe-smart-row { display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); }
.txe-smart-row .txe-smart-icon { flex: none; line-height: 1.4; }
.txe-smart-row.warn { color: var(--text); }
.txe-smart-row.warn .txe-smart-icon { color: var(--bad); }
.txe-smart-row.info .txe-smart-icon { color: var(--accent-2); }

/* ── Profile view ── */
.prof-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.prof-row:first-child { border-top: none; }
.prof-row[hidden] { display: none; }
.prof-lbl { flex: none; width: 96px; font-size: .85rem; font-weight: 500; color: var(--text-2); }
.prof-sel, .prof-in { flex: 1; min-width: 0; background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 9px 11px; font-size: .9rem; }
.prof-sel:focus, .prof-in:focus { outline: none; border-color: var(--accent); }
.prof-live { margin-top: 12px; font-size: .82rem; color: var(--text-2); font-family: var(--font-display);
  background: var(--bg-0); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 13px; word-break: break-word; }

/* mobile: stack the two-pane body into a single column */
@media (max-width: 560px) {
  .txe-body { flex-direction: column; }
  .txe-rail { flex-basis: auto; width: 100%; max-height: 200px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE B — SHELL REDESIGN (sidebar nav + view-switched app + dashboard)
   colours via existing tokens only; matches the dark pink/purple glass theme
   ════════════════════════════════════════════════════════════════════════ */

/* ── shell: nav rail + views, side by side ── */
.shell { display: flex; align-items: flex-start; gap: 22px; }

/* ── side nav (vertical) — sticky just below the sticky .topbar ── */
.side {
  flex: 0 0 190px; width: 190px;
  position: sticky; top: 64px; align-self: flex-start;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.navitem {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--text-2);
  transition: background .14s, border-color .14s, color .14s, transform .1s;
}
.navitem .nemoji { font-size: 1.12rem; line-height: 1; flex: none; }
.nav-section { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); font-weight: 700; padding: 13px 14px 4px; }
.nav-section:first-child { padding-top: 4px; }
.navitem:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.navitem:active { transform: scale(.98); }
.navitem.on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong));
  box-shadow: inset 3px 0 0 0 var(--accent), 0 6px 22px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.navitem.on .nemoji {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-2) 60%, transparent));
}

/* ── views: the switched content column ── */
.views { flex: 1; min-width: 0; }

/* ── right rail: persistent one-tap Quick Actions, mirrors the left nav (owner/trusted) ── */
.side-right {
  flex: 0 0 196px; width: 196px;
  position: sticky; top: 64px; align-self: flex-start;
  padding: 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.side-right[hidden] { display: none; }   /* the flex layout must not defeat the [hidden] attr */
.side-right-h { display: flex; align-items: center; gap: 8px; padding: 4px 4px 11px; font-family: var(--font-display); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); }
.side-right-h .nemoji { font-size: 1rem; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-2) 55%, transparent)); }
.side-right .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.side-right .qbtn { padding: 9px; min-width: 0; aspect-ratio: 1 / 0.9; }   /* minmax(0,…)+min-width:0 let tiles shrink to the rail (aspect-ratio otherwise forces a ~110px min-width → overflow) */
.side-right .qbtn .emoji { font-size: 1.42rem; }
.side-right .qbtn .lbl { font-size: .72rem; }
#app.is-public .side-right { display: none; }
/* the 196px rail is too narrow for the absolute offline banner (it would wrap + spill past the card);
   suppress it here and mark the rail header instead — the buttons still dim via #app.is-offline. */
.side-right .quick-grid::after { display: none; }
#app.is-offline .side-right-h::after { content: "· offline"; margin-left: auto; color: var(--warn); letter-spacing: .02em; }

/* ⚙ quick-bar editor — gear at the top-left of the rail header */
.qedit-gear { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); border-radius: 7px; font-size: .9rem; line-height: 1; cursor: pointer; transition: transform .18s, color .15s, border-color .15s, background .15s; }
.qedit-gear[hidden] { display: none; }
.qedit-gear:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); }
.qedit-gear.on { color: #fff; background: var(--grad); border-color: transparent; transform: rotate(40deg); }
/* edit mode: tiles become a single-column, reorderable (drag) list */
.side-right.editing .quick-grid { grid-template-columns: 1fr; gap: 6px; }
.side-right.editing .qbtn { flex-direction: row; align-items: center; justify-content: flex-start; aspect-ratio: auto; gap: 9px; padding: 8px 10px; cursor: grab; position: relative; }
.side-right.editing .qbtn:active { cursor: grabbing; transform: none; }
.side-right.editing .qbtn::before { content: "⠿"; color: var(--text-3); font-size: .95rem; }   /* drag-handle hint */
.side-right.editing .qbtn .emoji { font-size: 1.2rem; }
.side-right.editing .qbtn .lbl { font-size: .76rem; }
.side-right.editing .qbtn .lvl { display: none; }
.side-right.editing .qbtn.dragging { opacity: .45; }
.qbtn .qx { margin-left: auto; color: var(--text-3); font-size: 1.15rem; line-height: 1; padding: 0 3px; border-radius: 5px; }
.qbtn .qx:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.side-right .qbtn.qadd { border-style: dashed; background: transparent; color: var(--text-3); }
.side-right .qbtn.qadd::before { content: none; }
.side-right .qbtn.qadd:hover, .side-right .qbtn.qadd.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); }
/* "+ Add" picker — catalog actions not yet on the bar */
.qadd-menu { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.qadd-menu[hidden] { display: none; }
.qadd-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: .8rem; transition: border-color .14s, background .14s; }
.qadd-row .emoji { font-size: 1.1rem; line-height: 1; }
.qadd-row .lbl { font-family: var(--font-display); font-weight: 600; }
.qadd-row .qadd-plus { margin-left: auto; color: var(--accent-2); font-weight: 700; font-size: 1rem; }
.qadd-row.danger .qadd-plus { color: var(--bad); }
.qadd-row:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); background: var(--surface-3); }
.qadd-empty { color: var(--text-3); font-size: .76rem; padding: 4px 2px; }

/* narrow: the rail drops below the content as a full-width quick-action strip */
@media (max-width: 1040px) {
  .shell { flex-wrap: wrap; }
  .side-right { position: static; top: auto; order: 3; flex: none; width: 100%; }
  .side-right .quick-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
}
.view { animation: viewIn .22s ease both; }
.view[hidden] { display: none; }

/* ── sub-tabs inside a merged view (Relationship) ── */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.subtab {
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  transition: background .14s, border-color .14s, color .14s;
}
.subtab:hover { color: var(--text); border-color: var(--border-strong); }
.subtab.on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong));
}
.subtab[hidden] { display: none; }
.subview[hidden] { display: none; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view > .sec:first-child { margin-top: 0; }

/* ════════ DASHBOARD ════════ */

/* praise group: admirers' inbox + private send, side by side (stack when the column is narrow) */
.praise-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.praise-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.praise-col[hidden] { display: none; }   /* the flex display above otherwise defeats the [hidden] attr (trusted: Send col stays gated) */
.praise-col-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--text); }
.praise-col-h h3 { margin: 0; font: inherit; color: inherit; }   /* heading semantics (under the section's h2) without the default size/margins */
.praise-col-sub { font-size: .72rem; color: var(--text-3); font-weight: 400; }

/* state hero — "what's happening to her right now" at a glance */
.dash-hero {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.dash-hero-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-presence {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display);
  font-weight: 600; font-size: .84rem; padding: 6px 13px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
}
.dash-presence .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); flex: none; }
.dash-presence.online { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.dash-presence.online .dot { background: var(--ok); animation: pulse 2s infinite; }
.dash-presence.offline { color: var(--text-3); }
.dash-presence.offline .dot { background: var(--bad); }
.dash-hero-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; letter-spacing: -.01em;
}

/* ── cockpit: prominent, colour-coded status banner ── */
.cockpit-banner {
  display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden;
  padding: 16px 18px 16px 22px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-0);
}
.cockpit-banner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cb-c, var(--border-strong)); }
.cb-ico { font-size: 1.7rem; line-height: 1; flex: none; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cb-c, transparent) 55%, transparent)); }
.cb-text { min-width: 0; }
.cb-title { font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.01em; color: var(--text); }
.cb-sub { font-size: .8rem; color: var(--text-3); margin-top: 2px; }
.cb-ok   { --cb-c: var(--ok);       background: color-mix(in srgb, var(--ok) 8%, var(--bg-0)); }
.cb-ok   .cb-title { color: var(--ok); }
.cb-warn { --cb-c: var(--bad);      background: color-mix(in srgb, var(--bad) 10%, var(--bg-0)); }
.cb-warn .cb-title { color: var(--bad); }
.cb-free { --cb-c: var(--accent-2); }
.cb-off  { --cb-c: var(--text-3); }

/* ── cockpit: grouped vitals (Restraints / Transforms / Live) ── */
.cockpit-vitals { display: flex; flex-direction: column; gap: 12px; }
.vital-row { display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: start; }
.vital-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--text-3); padding-top: 8px; }
.vital-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
@media (max-width: 560px) {
  .vital-row { grid-template-columns: 1fr; gap: 5px; }
  .vital-label { padding-top: 0; }
}

/* KPI tiles + anti-cheat + quick lock */
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; }
.kpi-v { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.kpi-l { font-size: .66rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.kpi.hot { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.kpi.hot .kpi-v { color: var(--accent); }
.kpi.ok .kpi-v { color: var(--accent-2); }
.kpi.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.kpi.bad .kpi-v { color: var(--bad); }
.dash-comp { font-size: .84rem; padding: 9px 13px; border-radius: var(--radius-sm); margin-bottom: 12px; border: 1px solid var(--border); background: var(--bg-0); }
.dash-comp.ok { background: color-mix(in srgb, var(--accent-2) 8%, var(--bg-0)); }
.dash-comp.warn { background: color-mix(in srgb, var(--bad) 10%, var(--bg-0)); color: var(--text); }
.dash-comp.neutral { color: var(--text-2); }
.dash-qa { display: flex; gap: 8px; margin-bottom: 14px; }
.dash-qa .btn { flex: 1; }
/* owner note + action log */
.owner-note { width: 100%; min-height: 64px; resize: vertical; background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-size: .88rem; font-family: inherit; }
.owner-note:focus { outline: none; border-color: var(--accent); }
.owner-note-foot { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
.owner-log { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.log-row { display: flex; align-items: center; gap: 10px; font-size: .8rem; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg-0); }
.log-by { font-weight: 600; min-width: 88px; flex: none; }
.log-by.role-owner { color: var(--accent); }
.log-by.role-trusted { color: var(--accent-2); }
.log-act { flex: 1; min-width: 0; color: var(--text-2); font-family: var(--font-display); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-t { color: var(--text-3); font-size: .72rem; white-space: nowrap; flex: none; }
/* Restraints custom RLV picker */
.rcr { grid-column: 1/-1; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.rcr-h { font-family: var(--font-display); font-weight: 600; font-size: .78rem; color: var(--accent); }
.rcr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rcr-empty { font-size: .8rem; color: var(--text-3); }
/* Live restrictions browser (Restrictions → Active now) */
.restr-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.restr-sort { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-xs); overflow: hidden; }
.restr-sort .seg-b { background: transparent; border: none; color: var(--text-2); padding: 6px 12px; font-size: .78rem; cursor: pointer; font-family: var(--font-display); }
.restr-sort .seg-b.on { background: var(--surface-2); color: var(--text); }
.restr-sec-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 7px; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--accent); }
.restr-sec-h:first-child { margin-top: 0; }
.restr-sec-ico { font-size: .95rem; }
.restr-sec-n { color: var(--text-3); font-weight: 400; font-size: .72rem; }
.restr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.restr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-xs); background: var(--bg-0); border: 1px solid var(--border-strong); font-size: .82rem; }
.restr-chip .restr-name { color: var(--text); font-weight: 500; }
.restr-chip .restr-val { color: var(--accent-2); font-family: var(--font-display); font-size: .76rem; }
.restr-chip.restr-pinned { border-color: var(--accent); }
.restr-chip .restr-stack { font-size: .7rem; opacity: .85; }
.rcr-search { width: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 11px; font-size: .85rem; }
.rcr-search:focus { outline: none; border-color: var(--accent); }
.rcr-list { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.rcr-group { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--cc, var(--text-3)); padding: 10px 2px 2px; }
.rcr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: .82rem; }
.rcr-row-d { flex: 1 1 100%; font-size: .74rem; color: var(--text-3); line-height: 1.35; }
.rcr-row .tgl { flex: none; margin-left: 8px; }
.rcr-row:hover:not(:disabled) { background: var(--surface-3); }
.rcr-row:disabled { opacity: .5; cursor: default; }
.rcr-row-l { font-weight: 500; }
.rcr-row-c { margin-left: auto; font-size: .72rem; color: var(--text-3); font-family: var(--font-display); }
.rcr-tag { font-size: .58rem; font-weight: 700; padding: 1px 6px; border-radius: 99px; letter-spacing: .03em; white-space: nowrap; }
.rcr-tag.needs { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 16%, transparent); }
.rcr-tag.oneshot { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.param-num { width: 84px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 7px 9px; font-size: .85rem; }
.foxy-speech { display: flex; gap: 8px; flex-wrap: wrap; }
.foxy-speech .abtn { flex: 1 1 160px; }
.foxy-species { margin-top: 12px; }
.foxy-species-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.foxy-sp-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.foxy-sp { font-size: .82rem; padding: 6px 11px; border-radius: 99px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); }
.foxy-sp:hover { border-color: var(--accent); }
.foxy-sp:disabled { opacity: .5; cursor: default; }
/* transform emote editor (whisper/public per line) */
.txe-emotes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.txe-emotes:empty { display: none; }
.emo-h { font-family: var(--font-display); font-weight: 600; font-size: .78rem; color: var(--accent); }
.emo-set { display: flex; flex-direction: column; gap: 5px; }
.emo-set-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.emo-row { display: flex; align-items: center; gap: 6px; }
.emo-text { flex: 1; min-width: 0; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 7px 10px; font-size: .82rem; }
.emo-text:focus { outline: none; border-color: var(--accent); }
.emo-mode { flex: none; font-size: .68rem; font-weight: 600; padding: 5px 9px; border-radius: 99px; cursor: pointer; white-space: nowrap; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); }
.emo-mode.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* praise (owner reward — free text, private to the sub) */
.praise-add { display: flex; gap: 8px; flex-wrap: wrap; }
.praise-input { flex: 1; min-width: 160px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 9px 12px; font-size: .85rem; }
.praise-input:focus { outline: none; border-color: var(--accent); }
/* AI Domme config */
.aid-toggle { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: .92rem; margin-bottom: 14px; cursor: pointer; }
.aid-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 12px 0 6px; }
.aid-input { width: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 9px 12px; font-size: .85rem; }
.aid-input:focus { outline: none; border-color: var(--accent); }
.aid-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.aid-preset { font-size: .74rem; padding: 5px 11px; border-radius: 99px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); }
.aid-preset:hover { border-color: var(--accent); color: var(--text); }
.aid-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; max-width: 100%; }
.aid-seg-btn { min-width: 40px; padding: 7px 12px; border: none; background: transparent; color: var(--text-3); font-weight: 600; border-radius: 7px; cursor: pointer; white-space: nowrap; }   /* min-width (was fixed 40px) so text labels never clip; the row wraps on narrow screens */
.aid-seg-btn.on { background: var(--grad); color: #fff; }
.aid-seg-btn.wide { padding: 7px 16px; }
.aid-note { font-size: .72rem; color: var(--text-3); margin: 7px 0 4px; line-height: 1.4; }
.aid-nums { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.aid-num-wrap { display: flex; flex-direction: column; gap: 4px; }
.aid-num-lbl { font-size: .7rem; color: var(--text-3); }
.aid-num { width: 120px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 10px; font-size: .85rem; }
.aid-chk { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--text-2); cursor: pointer; }
.aid-last { margin-top: 12px; font-size: .78rem; color: var(--text-2); padding: 8px 11px; background: var(--bg-1); border-radius: var(--radius-sm); }
.aid-last-t { color: var(--text-3); }
.aid-err { margin: 8px 0 4px; padding: 8px 11px; font-size: .76rem; line-height: 1.4; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.aid-err[hidden] { display: none; }
.aid-feed { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-1); padding: 7px 9px; display: flex; flex-direction: column; gap: 4px; }
.aid-feed-row { display: flex; gap: 8px; align-items: baseline; font-size: .76rem; line-height: 1.4; }
.aid-feed-t { color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; }
.aid-feed-k { flex: none; }
.aid-feed-x { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.aid-foot { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
/* surveillance view */
.track-pos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.track-region { display: flex; align-items: center; gap: 10px; }
.track-region-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.track-badge { font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.track-slurl { color: var(--accent); font-size: .85rem; text-decoration: none; }
.track-slurl:hover { text-decoration: underline; }
.track-seen { font-size: .72rem; color: var(--text-3); }
.track-ctl { display: flex; gap: 8px; flex-wrap: wrap; }
.track-empty { color: var(--text-3); font-size: .82rem; padding: 4px 2px; }
.track-chat { display: flex; flex-direction: column; gap: 3px; max-height: 280px; overflow-y: auto; }
.track-chat-row { display: flex; gap: 9px; font-size: .84rem; padding: 3px 0; }
.track-chat-t { color: var(--text-3); font-size: .72rem; flex: none; min-width: 64px; }
.track-chat-x { color: var(--text); }
.track-radar { display: flex; flex-direction: column; gap: 4px; }
.track-radar-row { display: flex; justify-content: space-between; font-size: .85rem; padding: 5px 9px; background: var(--bg-1); border-radius: var(--radius-sm); }
.track-radar-n { color: var(--text); }
.track-radar-d { color: var(--text-3); }
.geo-regions { width: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 9px 11px; font-size: .85rem; font-family: inherit; resize: vertical; }
.geo-regions:focus { outline: none; border-color: var(--accent); }
/* dashboard live-presence card */
.pres-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pres-loc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pres-region { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.pres-chip { font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); white-space: nowrap; }
.pres-chip.dim { background: var(--bg-1); color: var(--text-3); }
.pres-map { display: inline-block; color: var(--accent); font-size: .85rem; text-decoration: none; margin-bottom: 12px; }
.pres-map:hover { text-decoration: underline; }
.pres-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pres-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pres-sub { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.pres-radar { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.pres-chat { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.pres-chat .track-chat-x { word-break: break-word; }
@media (max-width: 640px) { .pres-grid { grid-template-columns: 1fr; } }
/* public praise inbox (owner/trusted) */
.pbx-row { display: flex; gap: 9px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border); }
.pbx-row:last-child { border-bottom: none; }
.pbx-by { font-weight: 600; color: var(--accent); font-size: .8rem; flex: none; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbx-line { color: var(--text); font-size: .85rem; }
/* public passer-by page: praise buttons + note */
.pub-praise-pool { display: flex; flex-direction: column; gap: 8px; }
.pub-praise { text-align: left; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: .9rem; cursor: pointer; transition: background .12s, border-color .12s; }
.pub-praise:hover { background: var(--surface); border-color: var(--accent); }
.pub-praise:disabled { opacity: .5; cursor: default; }
.pub-note { margin-top: 12px; color: var(--text-3); font-size: .78rem; }
.pub-greet { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-bottom: 12px; color: var(--text); }
.pub-praise-input { width: 100%; background: var(--bg-0); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius-sm); padding: 11px 13px; font-size: .95rem; font-family: inherit; resize: vertical; }
.pub-praise-input::placeholder { color: var(--text-3); }
.pub-praise-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.pub-praise-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pub-praise-foot .spacer { flex: 1; }
/* PUBLIC passer-by: strip the owner chrome → clean read-only page (no empty nav, no controls) */
#app.is-public .side { display: none; }
#app.is-public .shell { display: block; }
#app.is-public #reconnectBtn,
#app.is-public #sendMenuBtn,
#app.is-public #lockBtn,
#app.is-public #lockPill { display: none; }
/* rules view */
.rules-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.rules-preset { font-size: .8rem; font-weight: 600; padding: 7px 13px; border-radius: 99px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); }
.rules-preset:hover { border-color: var(--accent); color: var(--text); }
/* virtual pet */
.pet-needs { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.pet-need { display: flex; align-items: center; gap: 10px; }
.pet-need-l { flex: none; width: 96px; font-size: .85rem; }
.pet-bar { flex: 1; height: 12px; border-radius: 99px; background: var(--bg-1); overflow: hidden; border: 1px solid var(--border); }
.pet-bar-fill { height: 100%; border-radius: 99px; background: var(--grad); transition: width .4s; }
.pet-bar-fill.low { background: linear-gradient(90deg, #e0566f, #ff8a5c); }
.pet-need-v { flex: none; width: 42px; text-align: right; font-size: .78rem; color: var(--text-3); }
.pet-feed { display: flex; flex-wrap: wrap; gap: 8px; }
/* monitored rules */
.mrules-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.mrule-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.mrule-toggle { display: flex; align-items: center; gap: 7px; font-size: .88rem; flex: none; min-width: 150px; cursor: pointer; }
.mrule-inp { flex: 1; min-width: 150px; }
@media (max-width: 560px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }

/* active transforms — parsed from state.stat ("Doll L7 Empty" → card) */
.dash-active-label {
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 600;
}
.dash-active { display: flex; flex-wrap: wrap; gap: 10px; }
.tcard {
  display: flex; flex-direction: column; gap: 3px; min-width: 132px;
  padding: 12px 15px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-2) 9%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--border-strong));
}
.tcard .tc-name { font-family: var(--font-display); font-weight: 700; font-size: .96rem; color: var(--text); }
.tcard .tc-meta { display: flex; align-items: center; gap: 7px; font-size: .78rem; }
.tcard .tc-lvl { font-family: var(--font-display); font-weight: 700; color: var(--accent); }
.tcard .tc-state { color: var(--text-2); }
.dash-empty { color: var(--text-3); font-size: .86rem; padding: 6px 2px; }
/* Live panel — one place for everything currently ON (restraints · transforms · speech…) */
.dash-live { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.live-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; max-width: 100%; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border-strong); font-size: .86rem; }
.live-chip .live-ico { font-size: .95rem; line-height: 1; flex: none; }
.live-chip .live-txt { color: var(--text); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a long status line ellipsises instead of widening the chip past the card */
.live-chip.restr { border-color: color-mix(in srgb, var(--accent) 38%, var(--border-strong)); }
.live-chip.restr .live-txt { color: var(--accent); }
.live-chip.xform { background: color-mix(in srgb, var(--accent-2) 9%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent-2) 30%, var(--border-strong)); }

/* ════════ OFFLINE-AWARE dimming of action controls ════════
   when #app has .is-offline, the dom can't see commands land → dim & hint.
   Sync and Lock are never dimmed (they live in the topbar, untouched). */
#app.is-offline .qbtn,
#app.is-offline .stepper .pips,
#app.is-offline .txe-toolbar #txeSaveBtn,
#app.is-offline .txe-lvl,
#app.is-offline .txe-chip,
#app.is-offline .txe-numchip,
#app.is-offline .txe-cat-row,
#app.is-offline .abtn {
  opacity: .42;
  filter: saturate(.7);
  transition: opacity .2s, filter .2s;
}
#app.is-offline .quick-grid,
#app.is-offline .steppers,
#app.is-offline .txe-body,
#app.is-offline .module-body {
  position: relative;
}
#app.is-offline .quick-grid::after {
  content: "Device offline — commands won't land";
  position: absolute; inset: auto 0 -22px 0; text-align: center;
  font-size: .72rem; color: var(--warn); pointer-events: none;
  font-family: var(--font-display); font-weight: 600; letter-spacing: .02em;
}

/* ════════ RESPONSIVE — sidebar becomes a sticky bottom tab bar ════════ */
@media (max-width: 760px) {
  .shell { flex-direction: column; gap: 16px; }
  .views { width: 100%; }
  .side {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 50;
    flex: none; width: auto;
    flex-direction: row; gap: 4px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    border-radius: 0; border: 0; border-top: 1px solid var(--border-strong);
    background: color-mix(in srgb, var(--bg-1) 90%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: 0 -10px 30px -18px #000;
    /* 25 tabs can't share one row — swipeable strip, fixed-size tappable tabs */
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .side::-webkit-scrollbar { display: none; }
  .nav-section { display: none; }   /* section labels don't read in a horizontal strip */
  .navitem {
    flex: 0 0 auto; width: 68px; overflow: hidden; white-space: nowrap;
    flex-direction: column; gap: 3px; justify-content: center;
    padding: 7px 2px; border-radius: var(--radius-sm); text-align: center;
    font-size: .62rem; letter-spacing: -.01em;
  }
  .navitem .nemoji { font-size: 1.3rem; }
  .navitem.on { box-shadow: inset 0 3px 0 0 var(--accent); }
  /* keep the bottom bar from covering content / the footer */
  main { padding-bottom: 88px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE D — SUGGESTIONS EDITOR UPGRADE
   in-place edit form · type-adapted data controls · RLV folder-tree picker
   colours via existing tokens only; matches the dark pink/purple glass theme
   ════════════════════════════════════════════════════════════════════════ */

/* ── per-row action buttons (✏ edit / ✓ save / ✕ cancel) sit beside 🔥 / ✕ ──
   tiny square icon buttons, ghost-glass to match .sugg-tog / .btn.xs */
.sugg-act {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 8px; cursor: pointer; line-height: 1;
  font-size: .85rem; padding: 5px 8px; flex: none;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.sugg-act:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.sugg-act:active { transform: scale(.93); }
.sugg-act.edit:hover  { border-color: color-mix(in srgb, var(--accent-2) 60%, var(--border-strong)); color: var(--accent-2); }
.sugg-act.save:hover  { border-color: color-mix(in srgb, var(--ok) 55%, var(--border-strong)); color: var(--ok); }
.sugg-act.cancel:hover{ border-color: color-mix(in srgb, var(--bad) 55%, var(--border-strong)); color: var(--bad); }

/* ── in-place edit form: the whole row becomes an editing card ── */
.sugg-row.editing {
  flex-direction: column; align-items: stretch; gap: 10px;
  background: color-mix(in srgb, var(--accent-2) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent-2) 38%, var(--border-strong));
  padding: 12px;
}
/* fields laid out in a row that wraps on narrow screens */
.sugg-edit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sugg-edit input, .sugg-edit select {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 8px 10px; font-size: .85rem; min-width: 0;
}
.sugg-edit input:focus, .sugg-edit select:focus { outline: none; border-color: var(--accent); }
.sugg-edit .se-name { width: 130px; }
.sugg-edit .se-trig { width: 120px; }
.sugg-edit .se-type { flex: none; }
/* the type-adapted data control takes the remaining room and wraps below */
.sugg-edit .se-data { flex: 1 1 200px; min-width: 160px; display: flex; align-items: center; gap: 6px; }
.se-effects { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.se-eff { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf-note { font-size: .8rem; color: var(--text-3); padding: 4px 2px; }
/* save / cancel buttons live on the edit form's own action row */
.sugg-edit-foot { display: flex; gap: 8px; align-items: center; }
.sugg-edit-foot .spacer { flex: 1; }

/* ── type-adapted data control (shared by add-row + edit form) ──
   .sugg-field is the swappable container the JS fills per type */
.sugg-field { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; min-width: 160px; position: relative; flex-wrap: wrap; }
.sugg-field input, .sugg-field select {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 8px 10px; font-size: .85rem; min-width: 0;
}
.sugg-field input:focus, .sugg-field select:focus { outline: none; border-color: var(--accent); }
.sugg-field .sf-text { flex: 1; min-width: 100px; }      /* SAY / RAW @rlv / ANIM text input */
.sugg-field .sf-gag  { width: 92px; flex: none; }        /* GAG 0/1/2/3 select */
.sugg-field .sf-mod  { flex: 1; min-width: 110px; }      /* LEVEL module select */
.sugg-field .sf-anim { flex: 1; min-width: 110px; }      /* ANIM dropdown — match the other selects */
.sugg-field .sf-num  { width: 76px; flex: none; }        /* LEVEL 0–10 number */

/* 📁 Folder button — ghost-glass, accent-2 tint on hover to read as the RLV picker */
.sugg-folder-btn {
  background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text-2); border-radius: var(--radius-sm); cursor: pointer; flex: none;
  font-family: var(--font-display); font-weight: 600; font-size: .8rem; padding: 7px 11px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.sugg-folder-btn:hover {
  background: var(--surface-3); color: var(--text);
  border-color: color-mix(in srgb, var(--accent-2) 60%, var(--border-strong));
}
.sugg-folder-btn:active { transform: scale(.96); }
.sugg-folder-btn.on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent-2) 16%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent-2) 55%, var(--border-strong));
}

/* ── folder-picker popover / inline panel ──
   a bordered glass card that holds the wardrobe tree (reuses .inv-* look).
   appears full-width under the field it belongs to so it wraps cleanly. */
/* In-flow, not a floating popover: an absolute tree overlapped whatever card came next
   (Trigger words). Full-width on its own line, so opening it PUSHES the rest down. */
.sugg-picker {
  flex: 1 0 100%; margin-top: 6px;
  background: var(--bg-0); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px;
}
.sugg-picker[hidden] { display: none; }
.sugg-picker-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem; color: var(--accent-2);
}
.sugg-picker-head .spacer { flex: 1; }
.sugg-picker-close {
  background: none; border: none; color: var(--text-3); cursor: pointer; font-size: .95rem;
  line-height: 1; padding: 2px 4px; transition: color .12s;
}
.sugg-picker-close:hover { color: var(--bad); }
/* the tree itself — scrolls if the wardrobe is deep; inherits .inv-tree rows */
.sugg-picker .inv-tree { max-height: 240px; overflow-y: auto; }
/* in pick mode the folder name is a clickable button (vs. a plain label in browse) */
.inv-pick {
  flex: 1; min-width: 0; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: .88rem; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .12s;
}
.inv-pick:hover { color: var(--accent); }
.sugg-picker .inv-empty { padding: 6px 2px; }

/* ── add-row data slot: the type-adapted control grows to fill the add bar ── */
.sugg-datawrap { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; min-width: 160px; flex-wrap: wrap; }
.sugg-datawrap .sugg-field { flex: 1 1 200px; min-width: 160px; }

/* ── mobile (<=560px): keep the edit form tidy ── */
@media (max-width: 560px) {
  .sugg-edit .se-name, .sugg-edit .se-trig { width: 100%; flex: 1 1 100%; }
  .sugg-edit .se-type { flex: 1 1 100%; }
  .sugg-edit .se-data,
  .sugg-datawrap,
  .sugg-field { flex: 1 1 100%; min-width: 0; }
  .sugg-folder-btn { flex: 1 1 auto; justify-content: center; }
  .sugg-picker .inv-tree { max-height: 200px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE A+E — ROLE AWARENESS + ACCESS MANAGER
   topbar role badge · mint form · capability grid · once-shown token box ·
   token list rows + caps chips + revoke. Existing tokens only (pink/purple).
   ════════════════════════════════════════════════════════════════════════ */

/* applyRole() hides nav items a role may not use via the [hidden] attribute, but
   .navitem sets display:flex which beats the UA [hidden] rule — re-assert it. */
.navitem[hidden] { display: none !important; }

/* ── topbar role badge (near the connection pill) ── */
.rolebadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  padding: 6px 12px; border-radius: 99px; letter-spacing: .01em;
  border: 1px solid color-mix(in srgb, var(--accent-2) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--accent-2) 14%, var(--surface));
  color: var(--text); text-transform: capitalize; white-space: nowrap;
}
.rolebadge[hidden] { display: none; }
.rolebadge.role-owner   { border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong)); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.rolebadge.role-trusted { border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border-strong)); background: color-mix(in srgb, var(--accent-2) 14%, var(--surface)); }
.rolebadge.role-sub     { border-color: color-mix(in srgb, var(--warn) 45%, var(--border-strong)); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: var(--text-2); }

/* ── Access: mint form ── */
.access-mint {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px; margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.access-mint-title {
  font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--text);
}
.access-mint-top { display: flex; gap: 10px; flex-wrap: wrap; }
.access-role, .access-label {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 9px 12px; font-size: .88rem;
}
.access-role { flex: none; min-width: 120px; }
.access-label { flex: 1 1 180px; min-width: 140px; }
.access-uuid { max-width: 380px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; letter-spacing: .01em; }   /* a UUID is a fixed 36 chars — don't stretch the box full-width */
.access-mint > .access-label { flex: none; width: 100%; }   /* the mint card is a column: flex-basis 180px would stretch inputs to 180px HEIGHT — pin to natural height, full width */
/* Purchases <-> Requests link: tint rows the sub requested (green = accepted, red = rejected), link the vendor name, flag already-owned requests */
.pur-row--ok td { background: rgba(53, 208, 127, .13); }
.pur-row--no td { background: rgba(255, 92, 114, .13); }
.pur-store-link { color: var(--accent); text-decoration: none; }
.pur-store-link:hover { text-decoration: underline; }
.req-owned { margin-left: 8px; font-size: .74rem; font-weight: 700; color: #35d07f; white-space: nowrap; }
.access-role:focus, .access-label:focus { outline: none; border-color: var(--accent); }
.access-label::placeholder { color: var(--text-3); }

.access-caps-label {
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 600;
}
/* capability checkbox grid */
.access-caps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 7px;
}
.access-caps.all-on .access-cap:not(.access-cap-all) { opacity: .4; }
.access-cap {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg-0);
  font-size: .85rem; cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s;
}
.access-cap:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border-strong)); }
.access-cap input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; cursor: pointer; }
.access-cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-cap-all {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-0));
  font-family: var(--font-display); font-weight: 600;
}
.access-cap-all:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--border-strong)); }

.access-mint-foot { display: flex; align-items: center; gap: 10px; }
.access-mint-foot .spacer { flex: 1; }

/* once-shown raw token box — warning-tinted so it stands out */
.access-token-box {
  margin-top: 4px; padding: 14px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--border-strong));
  background: color-mix(in srgb, var(--warn) 12%, var(--bg-0));
  display: flex; flex-direction: column; gap: 10px;
  animation: rise .25s ease both;
}
.access-token-box[hidden] { display: none; }
.access-token-warn { color: var(--warn); font-size: .82rem; font-weight: 600; font-family: var(--font-display); }
.access-token-row { display: flex; gap: 8px; }
.access-token-field {
  flex: 1; min-width: 0; background: var(--bg-0);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border-strong));
  color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px;
  font-family: var(--font-display); font-size: .9rem; letter-spacing: .02em;
}
.access-token-field:focus { outline: none; border-color: var(--warn); }

/* ── Access: token list ── */
.access-list-title {
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 600; margin-bottom: 10px;
}
.access-empty { color: var(--text-3); font-size: .88rem; padding: 8px 2px; }
.access-list { display: flex; flex-direction: column; gap: 9px; }
.access-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.access-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.access-row-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.access-row-label { font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.access-role-pill {
  font-size: .66rem; font-weight: 700; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--bg-0); color: var(--text-2);
}
.access-role-pill.role-trusted { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border)); background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.access-role-pill.role-sub     { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.access-role-pill.role-owner   { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent); }

.access-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.access-chip {
  font-size: .72rem; color: var(--text-2);
  border: 1px solid var(--border); background: var(--bg-0);
  padding: 2px 9px; border-radius: 999px;
}
.access-chip.all  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
.access-chip.none { color: var(--text-3); font-style: italic; }
.access-created { font-size: .72rem; color: var(--text-3); overflow-wrap: anywhere; }   /* a 36-char UUID wraps within the row instead of spilling */
.trust-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: .82rem; }
.trust-row:last-child { border-bottom: none; }
.trust-row > span:first-child { overflow-wrap: anywhere; min-width: 0; }   /* long region names wrap, don't push the Remove button off */

.access-revoke { flex: none; }
.access-revoke:hover { border-color: color-mix(in srgb, var(--bad) 60%, var(--border-strong)); color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.access-role-pill.role-public { color: var(--text-3); border-color: var(--border); background: var(--bg-0); }

/* ── Roles module (reusable templates + the per-op builder) ── */
.role-builtins { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.role-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.role-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-0); padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; }
.role-card.role-builtin { flex-direction: row; align-items: center; gap: 9px; padding: 7px 11px; }
.role-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.role-name { font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.role-desc { font-size: .76rem; color: var(--text-3); }
.role-base-pill { font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); }
.role-base-pill.op { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); }
.role-base-pill.ro { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.role-caps-sum { font-size: .8rem; color: var(--text-2); }
.role-card-acts { display: flex; gap: 6px; }
.role-caps-wrap { margin-top: 2px; }
.role-caps-tree { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; margin-top: 8px; background: var(--bg-0); }
.role-cap-mod { border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.role-cap-mod:last-child { border-bottom: none; }
.role-cap-mod-head { display: flex; align-items: center; gap: 8px; padding: 4px 2px; cursor: pointer; }
.role-cap-mod-head input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.role-cap-mod-name { font-weight: 600; font-size: .85rem; }
.role-cap-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 10px; padding: 2px 0 4px 24px; }
.role-cap-op { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-2); cursor: pointer; }
.role-cap-op input { accent-color: var(--accent-2); width: 13px; height: 13px; flex: none; }
.role-cap-op input:disabled { opacity: .4; }
/* ── Users module: in-world sub-block + per-row role reassign ── */
.users-inworld { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.users-inworld-h { font-size: .8rem; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.access-reassign { font-size: .76rem; padding: 5px 8px; min-width: 0; max-width: 170px; margin-top: 4px; }

/* mobile: stack the row + caps tidily */
@media (max-width: 560px) {
  .access-caps { grid-template-columns: 1fr; }
  .access-row { align-items: stretch; }
  .access-token-row { flex-wrap: wrap; }
  .access-token-row .btn { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   PARAMETERISED BUTTONS — slider / select / folder controls in the prompt modal
   ════════════════════════════════════════════════════════════════════════ */
.param-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.param-row input[type=range] { -webkit-appearance: none; appearance: none; flex: 1 1 140px; min-width: 110px; height: 6px; border-radius: 99px; background: var(--border-strong); cursor: pointer; }
.param-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-2); box-shadow: 0 2px 8px -2px var(--accent); cursor: pointer; }
.param-row input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-2); cursor: pointer; }
/* keyboard focus falls through to the global :focus-visible ring (works in Firefox too);
   the WebKit thumb glow below is a bonus, not the only indicator */
.param-row input[type=range]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.param-row select { flex: 1 1 150px; appearance: none; -webkit-appearance: none; background: var(--bg-0); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius-sm); padding: 12px 38px 12px 14px; font-size: .92rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23a99fb8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
.param-out { font-family: var(--font-display); font-weight: 700; min-width: 56px; text-align: right; color: var(--accent); font-size: 1.02rem; }
.param-pick { width: 100%; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 4px; background: var(--bg-0); }

/* ── Wind-up Allowance panel ── */
.al-top { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.al-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.al-balance { display: flex; align-items: baseline; gap: 6px; }
.al-bal-num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--accent); }
.al-bal-sub { color: var(--text-dim); font-size: .85rem; }
.al-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.al-field { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--text-dim); }
.al-num { width: 90px; padding: 8px 10px; font-size: .9rem; }
.al-sub, .al-sub2 { color: var(--text-dim); font-size: .82rem; margin: 4px 0; }
.al-defaults { display: flex; flex-direction: column; gap: 6px; }
.al-star-row { display: flex; align-items: center; gap: 10px; }
.al-star { min-width: 92px; font-size: .9rem; }
.al-tasks { display: flex; flex-direction: column; gap: 12px; }
.al-task { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--bg-0); display: flex; flex-direction: column; gap: 10px; }
.al-task-head { display: flex; align-items: center; gap: 8px; }
.al-desc { flex: 1 1 auto; padding: 8px 10px; }
.al-rates { display: flex; gap: 8px; flex-wrap: wrap; }
.al-rate { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.al-star-mini { font-size: .72rem; color: var(--text-dim); }
.al-task-acts, .al-rate-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── module button section headers (e.g. winddoll: Power / Lock / Key …) ── */
/* one section-header look for every in-module divider (config sections AND foxy's "Fox speech") */
.mod-section, .module-body .rcr-h { grid-column: 1/-1; margin: 13px 0 3px; padding-top: 11px; border-top: 1px solid var(--border); font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.mod-section:first-child, .module-body .rcr-h:first-child { border-top: none; padding-top: 0; margin-top: 2px; }
.module-body .foxy-speech { grid-column: 1/-1; }

/* ── Access: SL profile photos + fine-grain module picker ── */
.avatar-thumb { width: 40px; height: 40px; border-radius: var(--radius-xs); object-fit: cover; flex: 0 0 auto;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.avatar-thumb.lg { width: 72px; height: 54px; }
.avatar-thumb.noimg { background-image: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.12)); }
.access-photo-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
.access-photo-name { font-weight: 600; opacity: .85; }
.access-fine { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 3px 12px; margin-top: 8px; }
.access-fine-row { display: flex; align-items: center; gap: 6px; font-size: .85em; opacity: .9; }

/* ── confirm modal (replaces native confirm) ── */
.modal-ov { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center;   /* above .wimg-ov (200), below .toasts */
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px); padding: 20px; }
.modal-box { background: #1b1622; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  max-width: 420px; width: 100%; padding: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.modal-msg { white-space: pre-wrap; line-height: 1.45; margin-bottom: 16px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Journal / Contract / Tasks / Ledger (relationship surfaces) ── */
.jr-prompt { font-style: italic; color: var(--text-2); background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: var(--radius-xs); padding: 8px 12px; margin: 6px 0; }
.jr-ta { width: 100%; min-height: 120px; }
.ct-ta { min-height: 160px; }
.jr-mood { display: flex; align-items: center; gap: 6px; margin: 10px 0; }
.jr-mood-lbl { font-size: .82rem; color: var(--text-2); margin-right: 4px; }
.jr-dot { background: none; border: none; cursor: pointer; font-size: 1.25rem; color: rgba(255,255,255,.22); padding: 0 2px; }
.jr-dot.on { color: var(--accent); }
.jr-prompts { margin-bottom: 14px; }
.jr-prompts summary { cursor: pointer; color: var(--text-2); margin-bottom: 8px; }
.jr-entry { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin: 10px 0; background: var(--surface); }
.jr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--text-2); margin-bottom: 6px; }
.jr-by { font-weight: 600; color: var(--text); }
.jr-moodview { color: var(--accent); }
.jr-t { margin-left: auto; }
.jr-text { white-space: pre-wrap; line-height: 1.45; margin-bottom: 8px; }
.jr-note { width: 100%; min-height: 48px; resize: vertical; background: rgba(255,184,84,.06); color: var(--text);
  border: 1px dashed var(--warn); border-radius: 8px; padding: 8px; font: inherit; }
.jr-noterow { display: flex; gap: 8px; margin-top: 6px; }
.ct-list { padding-left: 22px; line-height: 1.6; }
.ct-list li { margin: 4px 0; }
.ct-ack { margin-top: 12px; font-size: .82rem; color: var(--text-2); }
.tk-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin: 8px 0; background: var(--surface); }
.tk-desc { font-weight: 600; margin-bottom: 8px; }
.tk-row { display: flex; gap: 8px; }
.tk-note { flex: 1; }
.tk-pend { font-size: .82rem; color: var(--text-2); }
.tk-pend.on { color: var(--warn); }
.lg-form { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.lg-txt { flex: 1; min-width: 160px; }
.lg-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.lg-badge { width: 20px; text-align: center; }
.lg-text { flex: 1; }
.lg-t { font-size: .75rem; color: var(--text-2); }
.lg-reward { background: color-mix(in srgb, var(--ok) 7%, transparent); }
.lg-punish { background: color-mix(in srgb, var(--bad) 8%, transparent); }
.lg-note { color: var(--text-2); }

/* ── Dossier (consolidated sub intel) ── */
.dos-alert { padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 600; margin-bottom: 14px; }
.dos-ok  { background: rgba(61,220,151,.10); border: 1px solid var(--ok); color: #bdf3da; }
.dos-rlv { background: rgba(255,93,108,.12); border: 1px solid var(--bad); color: #ffd0d5; }
.dos-off { background: rgba(255,255,255,.05); border: 1px solid var(--border-strong); color: var(--text-2); }
.dos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .dos-grid { grid-template-columns: 1fr; } }
.dos-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--surface); margin-bottom: 12px; }
.dos-wide { grid-column: 1 / -1; }
.dos-h { font-family: var(--font-display); font-weight: 600; font-size: .88rem; margin-bottom: 10px; }
.dos-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: .82rem; }
.dos-k { color: var(--text-2); }
.dos-v { font-weight: 600; }
.dos-slurl { display: inline-block; margin: 4px 0; font-size: .78rem; color: var(--accent); text-decoration: none; }
.dos-slurl:hover { text-decoration: underline; }
.dos-chips, .dos-worn { display: flex; flex-wrap: wrap; gap: 6px; }
.dos-chip { padding: 4px 10px; border-radius: 999px; background: rgba(157,107,255,.14); border: 1px solid rgba(157,107,255,.3); font-size: .78rem; }
.dos-chip.dim { background: rgba(255,255,255,.04); border-color: var(--border); color: var(--text-2); }
.dos-wchip { padding: 4px 10px; border-radius: var(--radius-xs); background: rgba(255,255,255,.05); border: 1px solid var(--border); font-size: .78rem; }
.dos-empty { color: var(--text-2); font-size: .82rem; }
.dos-hrow { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: .82rem; }
.dos-hr { font-weight: 600; }
.dos-ht { color: var(--text-2); font-size: .75rem; }

/* ── AI Domme 2.0: standing orders, chatbox, day reports ── */
.aid-directives { width: 100%; min-height: 74px; }
.aid-hear { margin: 8px 0; }
.aid-chat { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px; background: rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.aic-row { display: flex; flex-direction: column; max-width: 85%; }
.aic-row.aic-owner { align-self: flex-end; align-items: flex-end; }
.aic-who { font-size: .7rem; color: var(--text-2); margin-bottom: 2px; }
.aic-txt { padding: 8px 11px; border-radius: var(--radius-sm); font-size: .82rem; line-height: 1.4; white-space: pre-wrap; }
.aic-owner .aic-txt { background: var(--grad); color: #fff; border-bottom-right-radius: 3px; }
.aic-domme .aic-txt { background: rgba(255,255,255,.06); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.aid-chatrow { display: flex; gap: 8px; margin-bottom: 6px; }
.aid-chatrow .aid-input { flex: 1; }
.aid-reports { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.aid-report { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); }
.aid-report-t { font-size: .72rem; color: var(--text-2); margin-bottom: 6px; }
.aid-report-b { font-size: .82rem; line-height: 1.5; white-space: pre-wrap; }

/* ── Aphasia config editor ── */
.aph-h { font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  margin: 20px 0 6px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--accent); }
.aph-h:first-child { border-top: none; padding-top: 0; margin-top: 4px; }
.aph-ta { width: 100%; min-height: 70px; font-size: .82rem; }

/* ── Confine radius input (Track controls) ── */
.conf-rad { width: 52px; padding: 5px 6px; font-size: .78rem; }

/* ── Pose/position pad (Track controls) ── */
.pose-pad { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 8px; width: 100%; }

/* ── Item requests ── */
.req-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px; }
.req-pending { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.req-accepted { background: color-mix(in srgb, var(--ok) 6%, transparent); }
.req-rejected { background: color-mix(in srgb, var(--bad) 6%, transparent); opacity: .72; }
.req-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req-url { color: var(--accent-2); font-size: .82rem; word-break: break-all; }
.req-status { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 99px; }
.req-b-pending { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.req-b-accepted { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.req-b-rejected { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.req-mat { font-size: .66rem; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--text-2); }
.req-note { font-size: .82rem; margin-top: 6px; }
.req-meta { font-size: .72rem; color: var(--text-2); margin-top: 5px; }
.req-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }

/* ── People / agent memory ── */
.ppl-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; margin-top: 10px; }
.ppl-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ppl-name { font-family: var(--font-display); font-weight: 600; font-size: .88rem; }
.ppl-role { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; }
.role-owner { background: color-mix(in srgb, var(--accent) 18%, transparent); color: color-mix(in srgb, var(--accent) 62%, white); }
.role-trusted { background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: color-mix(in srgb, var(--accent-2) 60%, white); }
.ppl-seen { margin-left: auto; font-size: .72rem; color: var(--text-3, #867e98); }
.ppl-edit { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ppl-edit .aid-input { flex: 1; min-width: 120px; }
.ppl-meta { font-size: .72rem; color: var(--text-3, #867e98); margin-top: 6px; }
.rel-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.rel-txt { flex: 1; font-size: .82rem; }

/* ── People relationship graph ── */
.ppl-graph { display: block; margin: 8px 0 4px; max-width: 100%; background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ppl-graph text { font-family: Inter, system-ui, sans-serif; }
.ppl-edge { stroke: rgba(157,107,255,.55); stroke-width: 1.6; cursor: pointer; }
.ppl-edge:hover { stroke: var(--accent); stroke-width: 2.6; }
.ppl-elabel { fill: var(--text-3, #867e98); font-size: 10px; text-anchor: middle; pointer-events: none; }
.ppl-nlabel { fill: var(--text, #efecf6); font-size: .75rem; font-weight: 600; text-anchor: middle; pointer-events: none; }
.ppl-nsub { fill: var(--accent-2, #9d6bff); font-size: 10px; text-anchor: middle; pointer-events: none; }

/* ── Vision 3D preview (vision3d.js) ── */
.vsim { margin: 10px 0 4px; }
.vsim-wrap { display: flex; flex-direction: column; height: 400px; min-height: 240px; max-height: 780px; resize: vertical; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #0d0b14; }
.vsim-wrap canvas { display: block; width: 100%; flex: 1; min-height: 0; touch-action: none; cursor: grab; }
.vsim-wrap canvas:active { cursor: grabbing; }
.vsim-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.03); }
.vsim-mode { font: inherit; font-size: .78rem; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--text-3, #867e98); cursor: pointer; }
.vsim-mode.on { color: var(--text, #efecf6); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.vsim-hint { font-size: .72rem; color: var(--text-3, #867e98); margin-left: auto; text-align: right; }
.vsim-apply { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.vsim-apply-btn { font-weight: 700; }
.vsim-apply-btn:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 24%, transparent); animation: vsimPulse 1.6s ease-in-out infinite; }
@keyframes vsimPulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .vsim-apply-btn:not(:disabled) { animation: none; } }

/* ── module panes: wind-up doll + puppet ── */
.wd-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.wd-gauge { height: 10px; border-radius: 99px; background: var(--bg-1); border: 1px solid var(--border); overflow: hidden; margin-top: 8px; }
.wd-fill { height: 100%; width: 100%; border-radius: 99px; background: var(--grad); transform-origin: left; transition: transform .4s ease; }
.wd-fill.mid { background: #d9a94a; }
.wd-fill.low { background: #d9534f; }
.wd-meta { font-size: .8rem; color: var(--text-2); margin: 4px 0 2px; }
.wd-danger { border: 1px solid rgba(217, 83, 79, .45); border-radius: var(--radius-sm); padding: 6px 10px; margin-top: 12px; }
.wd-danger > summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: #d9534f; }
.wd-danger-body { padding-top: 4px; }
.wd-dangerbtn { border-color: rgba(217, 83, 79, .6); color: #d9534f; }
.wd-refresh { margin-top: 10px; }
.pup-padwrap { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 10px 0 4px; }
.pup-padwrap.is-idle { opacity: .45; }
.pup-pad { display: grid; grid-template-columns: repeat(3, 52px); gap: 6px; }
.pup-lift { display: flex; flex-direction: column; gap: 6px; }
.pup-key { width: 52px; height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-1); color: var(--text); font-size: 1.05rem; cursor: pointer; user-select: none; touch-action: none; }
.pup-key:hover { border-color: var(--accent); }
.pup-key.on { background: var(--grad); border-color: transparent; }
.pup-sp { width: 52px; height: 46px; visibility: hidden; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.sp-chip { padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg-1); font-size: .78rem; }
.say-box { width: 100%; resize: vertical; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 10px; font-size: .85rem; font-family: inherit; margin-top: 4px; }
.say-box:focus { outline: none; border-color: var(--accent); }
.fx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 6px 0; }
.fx-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-1); color: var(--text); cursor: pointer; }
.fx-tile:hover { border-color: var(--accent); }
.fx-ico { font-size: 1.3rem; }
.fx-lbl { font-size: .72rem; text-align: center; }
.fx-tile.fx-clear { border-color: var(--accent); font-weight: 700; }
.fx-tile.fx-danger { border-color: rgba(217, 83, 79, .6); }
.rl-seg { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 99px; overflow: hidden; width: fit-content; margin: 6px 0; }
.rl-opt { padding: 7px 16px; background: var(--bg-1); border: none; color: var(--text); font-size: .82rem; cursor: pointer; }
.rl-opt + .rl-opt { border-left: 1px solid var(--border); }
.rl-opt.on { background: var(--grad); font-weight: 700; }
.ch-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-1); padding: 10px 12px; margin: 8px 0; }
.ch-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.ch-q { font-size: .85rem; font-weight: 600; }
.sp-chip.ch-worst { border-color: rgba(217, 83, 79, .6); }
.geo-chip { display: inline-flex; align-items: center; gap: 6px; }
.geo-x { border: none; background: none; color: var(--text-3, #867e98); cursor: pointer; font-size: .75rem; padding: 0 2px; }
.geo-x:hover { color: #d9534f; }
.locks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.locks-h { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3, #867e98); margin-bottom: 6px; }
button.sp-chip.praise-tpl { cursor: pointer; color: var(--text); }
button.sp-chip.praise-tpl:hover { border-color: var(--accent); }
.nav-badge { margin-left: auto; background: var(--grad); border-radius: 99px; padding: 1px 8px; font-size: .7rem; font-weight: 700; }
.restr-x { border: none; background: none; color: var(--text-3, #867e98); cursor: pointer; font-size: .72rem; padding: 0 2px; }
.restr-x:hover { color: #d9534f; }
.dash-wind-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dash-wind { flex: 1; max-width: 260px; }
.dash-wind-lbl { font-size: .82rem; color: var(--text-2); }
#bodyWornBtn { margin-left: auto; }

/* ── Purchases pane (owner-only): Marketplace order history ── */
.pur-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 16px; color: var(--text-3); font-size: .85rem; }
.pur-stat b { color: var(--text); font-weight: 650; }
.pur-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#purQ { flex: 1; min-width: 200px; padding: 9px 13px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: .9rem; }
#purQ::placeholder { color: var(--text-3); }
#purQ:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
#purMode.on { border-color: var(--accent-2); color: var(--accent-2); }
.pur-count { margin: 12px 0 6px; color: var(--text-3); font-size: .82rem; }
.pur-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.pur-tbl { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .86rem; }
.pur-tbl th, .pur-tbl td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pur-tbl thead th { position: sticky; top: 0; background: var(--bg-2); color: var(--text-3); font-weight: 600; cursor: pointer; user-select: none; z-index: 1; }
.pur-tbl thead th:hover { color: var(--text); }
.pur-tbl th.asc::after  { content: " ▲"; color: var(--accent); }
.pur-tbl th.desc::after { content: " ▼"; color: var(--accent); }
.pur-tbl td.pur-num, .pur-tbl th.pur-num { text-align: right; font-variant-numeric: tabular-nums; }
.pur-tbl td.pur-name { white-space: normal; max-width: 420px; }
.pur-tbl td.pur-name a { color: var(--accent-2); text-decoration: none; }
.pur-tbl td.pur-name a:hover { text-decoration: underline; }
.pur-tbl td.pur-store { color: var(--text-2); }
.pur-tbl tbody tr:hover { background: var(--surface); }
.pur-tbl tbody tr:last-child td { border-bottom: none; }

/* ── which sub you are driving ────────────────────────────────────────────────
   Two subs share this panel and the ops it fires are not all reversible, so the
   target is a permanent part of the chrome: both subs are always on screen with
   the active one filled in, and each carries its avatar photo so the dom reads a
   FACE rather than a letter. No dropdown, no hover-to-reveal. */
.subsw { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.subsw button {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 5px;
  font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; transition: color .14s, background .14s, border-color .14s;
}
.subsw button:hover { color: var(--text); border-color: var(--border-strong); }
.subsw button.on { background: var(--grad); color: #190d18; border-color: transparent; }
.subsw .subsw-pic {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%; object-fit: cover;
  background: var(--surface-3);
}
.subsw .subsw-pic.ph {                     /* no photo yet: initial on a flat disc */
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; color: var(--text-dim);
}
.subsw button.on .subsw-pic.ph { color: #190d18; background: rgba(0,0,0,.14); }
@media (max-width: 720px) { .subsw { margin-left: 8px; } .subsw button { padding: 4px 8px 4px 4px; } }