:root {
  --bg: #000000;
  --bg-2: #0b0b0b;
  --surface: #121212;
  --surface-2: #1b1b1b;
  --elevated: #202020;
  --border: #3f3f3f;
  --border-strong: #5c5c5c;
  --text: #ffffff;
  --muted: #b3b3b3;
  --faint: #808080;
  --accent: #6d8dff;
  --accent-soft: rgba(109, 141, 255, 0.14);
  --accent-2: #4fd39a;
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.14);
  --warn: #ffc46b;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.65);
  --rail-w: 252px;
  --topbar-h: 60px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: var(--text); }
[hidden] { display: none !important; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }


/* ---------- Gate ---------- */
.gate {
  min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(1200px 700px at 50% -10%, #1a1a1a 0%, var(--bg) 55%);
  padding: 24px;
}
.gate-card {
  width: min(420px, 100%); background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 28px; box-shadow: var(--shadow);
}
.brand { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #a06dff);
  border-radius: 12px; font-size: 22px; color: #fff;
}
.brand h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

.seg { display: flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 20px; }
.seg-btn { flex: 1; padding: 8px; background: transparent; border: 0; color: var(--muted); border-radius: 7px; font-size: 13px; font-weight:600; }
.seg-btn.active { background: var(--elevated); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

.gate-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.field .hint { text-transform: none; letter-spacing: 0; color: var(--faint); }
.field input {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 12px; font-size: 14px; outline: none; transition: border-color .15s;
}
.field input:focus { border-color: var(--accent); }
.gate-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.gate-error { margin-top: 14px; padding: 10px 12px; background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); font-size: 12px; }
.gate-public { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }
.gate-public a { display: inline-block; color: var(--muted); font-size: 12.5px; text-decoration: none; border-bottom: 1px solid transparent; }
.gate-public a:hover { color: var(--text); border-bottom-color: var(--border-strong); }

.btn {
  border: 0; border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; font-weight: 600;
  transition: transform .05s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn.ghost:hover { color: var(--text); border-color: var(--border-strong); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.subtle { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
/* "Buy now" on a store card — a white button with black text, matching the
   Creators Marketplace checkout button so the same action looks the same. */
.btn.buy { background: #fff; color: #000; border: 1px solid #fff; }
.btn.buy:hover { filter: brightness(.92); }

/* ---------- Shell layout ---------- */
.app { display: flex; height: 100vh; }
.rail {
  width: var(--rail-w); flex: 0 0 var(--rail-w);
  background: var(--bg-2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 12px; gap: 6px;
}
.rail-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; padding: 4px 8px 14px; }
.rail-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
.compose {
  background: var(--accent); color: #fff; border: 0; border-radius: 999px;
  padding: 11px 18px; font-size: 14px; font-weight: 600; text-align: center; margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(109, 141, 255, 0.3);
}
.compose:hover { filter: brightness(1.08); }
.rail-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px;
  color: var(--muted); font-size: 13.5px; font-weight: 500; border: 0; background: transparent; text-align: left;
  position: relative; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--text); }
.nav-item .ico { width: 18px; text-align: center; opacity: .85; }
.nav-item .badge {
  margin-left: auto; background: var(--elevated); color: var(--muted); font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border);
}
.nav-item.active .badge { background: var(--accent); color: #fff; border-color: transparent; }
.rail-foot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--border); font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.rail-foot-row { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.online { background: var(--accent-2); box-shadow: 0 0 8px rgba(79, 211, 154, 0.7); }
.dot.offline { background: var(--faint); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; }
.search:focus-within { border-color: var(--accent); }
.search .search-ico { color: var(--faint); font-size: 16px; }
.search input { flex: 1; background: transparent; border: 0; outline: none; font-size: 13.5px; }
.search kbd { background: var(--elevated); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 11px; color: var(--faint); font-family: var(--mono); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center; background: transparent;
  border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: 17px;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.chip {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600;
}
.chip .avatar {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #a06dff); color: #fff; font-size: 10px; font-weight: 700;
}

.content { flex: 1; overflow-y: auto; padding: 24px; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.stat-card .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat-card .value { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; }
.stat-card .sub { font-size: 11.5px; color: var(--faint); }
.stat-card.accent { border-color: rgba(109,141,255,.4); }
.stat-card.accent .value { color: var(--accent); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.panel h2 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head h2 { margin: 0; }

/* ---------- Read / Write permission (System Intelligence) ---------- */
/* The owner's single write gate. Colour carries the state, because a locked
   site and an open one must never look alike at a glance. */
.perm-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); }
.perm-card.read { border-color: rgba(255, 107, 107, 0.45); background: var(--danger-soft); }
.perm-card.write { border-color: rgba(79, 211, 154, 0.45); background: rgba(79, 211, 154, 0.07); }
.perm-title { font-size: 13.5px; font-weight: 650; margin-bottom: 4px; }
.perm-card.read .perm-title { color: var(--danger); }
.perm-card.write .perm-title { color: var(--accent-2); }
.perm-note { margin: 0; max-width: 62ch; font-size: 12px; line-height: 1.5; color: var(--muted); }
.perm-note b { color: var(--text); }
.perm-card .btn { flex: none; }
.perm-card .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .chart-row { grid-template-columns: 1fr; } }

/* ---------- Gauges ---------- */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.gauge { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; }
.gauge svg { display: block; margin: 0 auto; }
.gauge .g-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
.gauge .g-value { font-size: 24px; font-weight: 650; }
.gauge .g-sub { font-size: 11px; color: var(--faint); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: var(--faint); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--surface-2); }
td .mono { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.tag.free { background: var(--surface-2); color: var(--muted); }
.tag.plus { background: var(--accent-soft); color: var(--accent); }
.tag.pro { background: rgba(160, 109, 255, 0.16); color: #b491ff; }
.tag.active { background: rgba(79, 211, 154, 0.14); color: var(--accent-2); }
.tag.suspended { background: var(--danger-soft); color: var(--danger); }
.tag.warn { background: rgba(255, 196, 107, 0.16); color: var(--warn); }

/* ---------- Inbox ---------- */
.inbox { display: grid; grid-template-columns: 300px 1fr; gap: 16px; height: calc(100vh - var(--topbar-h) - 48px); }
.conv-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-y: auto; }
.conv-list-head { padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.conv-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
.conv-item:hover { background: var(--surface-2); }
.conv-item.active { background: var(--accent-soft); }
.conv-item .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--elevated); color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.conv-item .meta { flex: 1; min-width: 0; }
.conv-item .name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.conv-item .preview { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item .time { font-size: 11px; color: var(--faint); flex: 0 0 auto; }

.thread { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; }
.thread-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-weight: 600; }
.thread-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { position: relative; max-width: 76%; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; padding-right: 28px; }
.msg.them { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg img { display: block; max-width: 260px; border-radius: 8px; margin: 4px 0; }
.msg time { display: block; font-size: 10px; opacity: .65; margin-top: 5px; }
/* Unsend: quiet until hovered, and only drawn on the sender's own bubbles. */
.msg-unsend { position: absolute; top: 4px; right: 6px; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 11px; line-height: 1; opacity: .45; cursor: pointer; }
.msg-unsend:hover { opacity: 1; background: rgba(0,0,0,.18); }
.thread-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.thread-form input { flex: 1; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 10px 16px; outline: none; }
.thread-form input:focus { border-color: var(--accent); }
.icebreakers { padding: 10px 12px 0; border-top: 1px solid var(--border); }
.ice-label { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.ice-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.ice-chip { white-space: nowrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; color: var(--muted); cursor: pointer; transition: .12s; }
.ice-chip:hover { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.conv-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.conv-col .conv-list { flex: 1; min-height: 0; }
.notes-widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-height: 240px; display: flex; flex-direction: column; overflow: hidden; }
.notes-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.notes-list { overflow-y: auto; padding: 4px 6px 6px; }
.note-item { padding: 8px; border-bottom: 1px solid var(--border); }
.note-item:last-child { border-bottom: 0; }
.note-title { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-body { color: var(--muted); font-size: 12px; margin: 3px 0 6px; overflow-wrap: anywhere; max-height: 48px; overflow: hidden; }
.note-actions { display: flex; gap: 6px; }

/* global inbox list */
.msg-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.msg-row:hover { background: var(--surface-2); }
.msg-row .from { font-weight: 600; white-space: nowrap; }
.msg-row .body { flex: 1; min-width: 0; }
.msg-row .body .text { color: var(--muted); overflow-wrap: anywhere; }
.msg-row .time { font-size: 11px; color: var(--faint); white-space: nowrap; }
.msg-row .route { font-size: 11px; color: var(--faint); }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar select, .toolbar input {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; outline: none;
}
.pager { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 13px; }

/* ---------- AI studio ---------- */
.studio { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
.studio-side { display: flex; flex-direction: column; gap: 14px; }
.studio-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chat-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); height: 62vh; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { max-width: 84%; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.user { align-self: flex-end; background: var(--accent-soft); border: 1px solid rgba(109,141,255,.3); }
.chat-msg.assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
.studio-form { display: flex; gap: 8px; align-items: center; }
.studio-form textarea { flex: 1; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; resize: vertical; min-height: 60px; outline: none; }
.studio-form textarea:focus { border-color: var(--accent); }
.result-image { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.result-audio { width: 100%; }
.result-video { width: 100%; max-height: 60vh; border-radius: var(--radius); border: 1px solid var(--border); background: #000; }
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form-row select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; }

.result-card { display: flex; flex-direction: column; gap: 10px; }
.result-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Editors: dropped-in source media ---------- */
.edt-drop {
  border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg-2);
  padding: 16px 14px; cursor: pointer; outline: none;
  transition: border-color .18s ease, background .18s ease;
}
.edt-drop:hover, .edt-drop:focus-visible, .edt-drop.over { border-color: var(--accent); background: var(--surface-2); }
.edt-drop.has-file { border-style: solid; cursor: default; padding: 10px; }
.edt-drop.over { box-shadow: inset 0 0 0 1px var(--accent); }
.edt-empty { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font-size: 12px; }
.edt-empty .big { font-size: 22px; line-height: 1; color: var(--muted); }
.edt-preview { display: flex; gap: 12px; align-items: center; }
.edt-preview img, .edt-preview video {
  width: 128px; height: 88px; flex: 0 0 auto; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border); background: #000;
}
.edt-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; min-width: 0; }
.edt-meta b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-panel.expanded .chat-box { height: calc(100vh - 220px); }
.chat-img { display: block; max-width: 100%; max-height: 320px; border-radius: var(--radius-sm); border: 1px solid var(--border); margin: 6px 0; }
.attach-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.attach-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--muted); max-width: 100%; }
.attach-chip button { background: transparent; border: 0; color: var(--faint); font-size: 13px; padding: 0; line-height: 1; }
.attach-chip button:hover { color: var(--danger); }
.studio-form textarea { min-height: 44px; max-height: 260px; resize: none; overflow-y: auto; }

/* ---------- AI Studio memory widget ---------- */
.mem { display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px; }
.mem-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mem-title { color: var(--accent); font-weight: 700; font-size: 13px; }
.mem-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mem-style { width: 100%; min-height: 70px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; color: var(--text); resize: vertical; outline: none; }
.mem-style:focus { border-color: var(--accent); }
.mem-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.mem-item { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.mem-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; gap: 8px; }
.mem-item-head b { color: var(--accent); font-size: 13px; overflow-wrap: anywhere; }
.mem-item-head button { background: transparent; border: 0; color: var(--faint); font-size: 13px; padding: 0; line-height: 1; }
.mem-item-head button:hover { color: var(--danger); }
.mem-item-body { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; max-height: 110px; overflow-y: auto; white-space: pre-wrap; }
.mem-toolbar { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Profile / Me ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.photo-tile { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 0; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.photo-tile:hover .del { opacity: 1; }
.upload-drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted);
  cursor: pointer; transition: border-color .15s, background .15s; margin-top: 14px;
}
.upload-drop:hover, .upload-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

.owner-card { display: flex; gap: 16px; align-items: center; padding: 20px; }
.owner-avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #a06dff); font-size: 26px; color: #fff; font-weight: 700; }
.key-row { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-family: var(--mono); font-size: 12px; }

/* ---------- Models editor ---------- */
.json-editor { width: 100%; min-height: 420px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--text); resize: vertical; outline: none; line-height: 1.5; }
.json-editor:focus { border-color: var(--accent); }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 100; padding: 24px; }
.modal-card { width: min(640px, 100%); max-height: 86vh; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-body { padding: 20px; overflow-y: auto; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 200; max-width: 360px;
  background: var(--elevated); border: 1px solid var(--border-strong); color: var(--text);
  padding: 12px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s;
}
.toast.show { opacity: 1; transform: none; }
.toast.err { border-color: var(--danger); color: var(--danger); }

/* ---------- Misc ---------- */
.empty { text-align: center; color: var(--faint); padding: 60px 20px; }
.empty .big { font-size: 40px; margin-bottom: 10px; }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gap { gap: 10px; }
.mt { margin-top: 16px; }
.section-title { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; }

/* ---------- Membership cards (Plus / Pro) ---------- */
/* True black (#000) so the cards read as their own object on any theme. Text is
   white with a white glow; the only edge is a 1px lit line down each side.
   The card is a centred stack: badge + tier name, price, tagline and the
   feature lines all sit on the card's centre line, so every card reads as one
   column of white light regardless of how long its copy is. */
.bspx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 4px 0 6px; }
.bspx-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: #000; color: #fff; border-radius: 16px; padding: 22px 20px 20px;
  text-align: center; text-shadow: 0 0 22px rgba(255, 255, 255, .30), 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bspx-card::before, .bspx-card::after {
  content: ''; position: absolute; top: 12px; bottom: 12px; width: 1px; opacity: .5;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .9), transparent);
  transition: opacity .18s ease;
}
.bspx-card::before { left: 0; }
.bspx-card::after { right: 0; }
.bspx-card:hover, .bspx-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 18px 60px rgba(255, 255, 255, .16);
}
.bspx-card:hover::before, .bspx-card:hover::after,
.bspx-card:focus-within::before, .bspx-card:focus-within::after { opacity: 1; }
/* Card badge — the operator's small PNG, drawn on the name line right before the
   tier name, so the icon and the words always read as one centred pair. */
.bspx-badge {
  flex: none; width: 24px; height: 24px; object-fit: contain; padding: 2px; border-radius: 7px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 0 18px rgba(255, 255, 255, .18);
}

.bspx-card-name { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.bspx-card-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.bspx-card-price .bspx-sign { font-size: 20px; font-weight: 600; }
.bspx-card-price .bspx-per { font-size: 12px; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .6); margin-left: 4px; }
.bspx-card-tag { font-size: 13px; font-style: italic; color: rgba(255, 255, 255, .85); }
.bspx-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
/* Each feature line is centred as a unit — the bullet travels with its text —
   while a line long enough to wrap stays left-aligned inside that centred block,
   so the dots line up and nothing reads ragged. */
.bspx-points li { display: flex; align-items: flex-start; justify-content: center; gap: 8px; text-align: left; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.bspx-points li::before {
  content: ''; flex: none; margin-top: 7px; width: 5px; height: 5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .9);
}

/* Popular-models peek. `pointer-events: none` keeps the whole card one clean
   target — it opens on card hover (or keyboard focus) instead of a click. */
.bspx-models { pointer-events: none; margin-top: 4px; }
.bspx-models > summary {
  list-style: none; cursor: default; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.bspx-models > summary::-webkit-details-marker { display: none; }
.bspx-models > summary::marker { content: ''; }
.bspx-caret { display: inline-block; transition: transform .18s ease; }
.bspx-card:hover .bspx-caret, .bspx-card:focus-within .bspx-caret { transform: rotate(180deg); }
.bspx-models-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .22s ease; }
.bspx-card:hover .bspx-models-body, .bspx-card:focus-within .bspx-models-body { max-height: 460px; opacity: 1; }
.bspx-model-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; }
.bspx-model-kind { width: 100%; text-align: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.bspx-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .95); }
.bspx-cta { margin-top: auto; width: 100%; text-align: center; }

/* ---------- Progress ---------- */
.progress { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; margin-top: 12px; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .5s ease; }

/* ---------- Command palette ---------- */
.palette-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 300; }
.palette-card { width: min(560px, 92vw); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.palette-card input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border); padding: 16px 18px; font-size: 15px; outline: none; }
.palette-results { max-height: 50vh; overflow-y: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.palette-item .ico { width: 18px; text-align: center; opacity: .8; }
.palette-item .hint { margin-left: auto; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.palette-item.active, .palette-item:hover { background: var(--accent-soft); color: var(--text); }
.palette-empty { padding: 18px; color: var(--faint); text-align: center; }

/* ---------- Message Train ---------- */
.train-track { display: flex; gap: 4px; overflow-x: auto; padding: 16px 2px 8px; margin-top: 16px; border-top: 1px dashed var(--border); }
.train-slot { flex: 0 0 58px; text-align: center; }
.train-hour { font-size: 10px; color: var(--faint); font-family: var(--mono); margin-bottom: 5px; }
.train-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 2px solid var(--border-strong); cursor: pointer; transition: transform .12s; }
.train-thumb:hover { transform: scale(1.1); }
.train-dot { width: 48px; height: 48px; margin: 0 auto; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--border); display: grid; place-items: center; }
.train-dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); opacity: .45; }
.train-slot.now .train-hour { color: var(--accent-2); font-weight: 700; }
.train-slot.now .train-dot { border-color: var(--accent-2); border-style: solid; }
.train-slot.past { opacity: .35; }
.train-live-empty { text-align: center; color: var(--faint); padding: 18px; font-size: 13px; }

/* ---------- Feed view card ---------- */
/* Deliberately not a Polaroid any more: no paper stock, no tilt, no cursive, no
   print animation. The media is the only lit surface on a true-black card, so
   the picture reads first and the caption second. */
.view-card { background: #000; border: 1px solid #262626; border-radius: var(--radius); overflow: hidden; }
.view-card-media { line-height: 0; background: #000; }
.view-card-media img { display: block; width: 100%; max-height: 68vh; object-fit: contain; background: #000; }
.view-card-body { padding: 14px 16px 16px; }
.view-card-caption { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.view-card-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11.5px; color: var(--faint); }
.view-card-badge { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.view-card-user { font-weight: 600; color: var(--muted); }
.view-card-tags { color: var(--faint); }

/* A post's picture in the Discover list is the way into the viewer. */
.feed-thumb { cursor: zoom-in; }
.feed-thumb:hover { border-color: var(--accent); }

/* ---------- Media viewer ---------- */
/* True black and edge to edge: the picture is the interface. `#modal.viewer` is
   set by `openModal(.., 'viewer')` and cleared by `closeModal`, so one dialog can
   never inherit another's shell. */
#modal.viewer { background: rgba(0, 0, 0, .92); }
#modal.viewer .modal-card { width: min(1040px, 100%); background: #000; border-color: #1c1c1c; }
#modal.viewer .modal-head { border-bottom-color: #1c1c1c; }
#modal.viewer .modal-body { padding: 0; background: #000; }
.viewer-shell { padding: 14px; }
.viewer-figure { margin: 0; min-height: 40vh; display: grid; place-items: center; background: #000; }
.viewer-image { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; background: #000; }
.photo-tile img[data-zoom] { cursor: zoom-in; }


/* ---------- Form fields (modal) ---------- */
.field textarea, .field select { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; outline: none; resize: vertical; width: 100%; }
.field textarea:focus, .field select:focus { border-color: var(--accent); }

/* Price + billing tag share one line on the membership-plan editors. The tag box
   is revealed only for a custom period, so `hidden` has to win over the input
   rules above. */
.plan-billing { display: flex; gap: 8px; align-items: stretch; }
.plan-billing input { flex: 1; min-width: 0; }
.plan-billing select { flex: 0 0 auto; width: auto; min-width: 130px; resize: none; }
.field [hidden] { display: none; }

/* ---------- AI playground (chat markdown + inspector) ---------- */
.chat-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.chat-toolbar select { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; max-width: 220px; }
.chat-toolbar .spacer { flex: 1; }

.chat-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.chat-col { display: flex; flex-direction: column; min-width: 0; }

.chat-msg.assistant { white-space: normal; }
.chat-msg.assistant.streaming { white-space: pre-wrap; }

.chat-msg p { margin: 0 0 8px; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg h1, .chat-msg h2, .chat-msg h3, .chat-msg h4, .chat-msg h5, .chat-msg h6 { margin: 12px 0 6px; line-height: 1.25; }
.chat-msg h1 { font-size: 18px; }
.chat-msg h2 { font-size: 16px; }
.chat-msg h3 { font-size: 15px; }
.chat-msg ul, .chat-msg ol { margin: 6px 0; padding-left: 20px; }
.chat-msg li { margin: 2px 0; }
.chat-msg a { color: var(--accent); text-decoration: none; }
.chat-msg a:hover { text-decoration: underline; }
.chat-msg code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
.chat-msg pre { margin: 0; }

.code-block { margin: 10px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.code-lang { font-family: var(--mono); font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.copy-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--muted); border-radius: 6px; padding: 2px 10px; font-size: 11px; }
.copy-btn:hover { color: var(--text); border-color: var(--accent); }
.code-actions { display: flex; gap: 6px; }
.run-btn { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; padding: 2px 10px; font-size: 11px; }
.run-btn:hover { background: var(--accent-soft); }
.code-block pre { padding: 12px; overflow-x: auto; }
.code-block code { background: transparent; border: 0; padding: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; }

.inspector { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.inspector-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }
.inspector-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px rgba(79, 211, 154, .15); }
.inspector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.kpi { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.kpi span { display: block; font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.kpi b { display: block; font-size: 13px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspector-label { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.inspector-json { margin: 0; max-height: 46vh; overflow: auto; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--muted); white-space: pre-wrap; word-break: break-word; }

.floating-ide { position: fixed; right: 20px; bottom: 20px; width: 460px; height: 560px; min-width: 320px; min-height: 320px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); z-index: 50; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.live-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: grab; user-select: none; }
.live-head:active { cursor: grabbing; }
.floating-ide-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 26px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.floating-ide.collapsed .floating-ide-body { display: none; }
.floating-ide.collapsed { height: auto; }
.live-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.live-tabs { display: flex; gap: 4px; }
.live-tab { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 5px 0; font-size: 12px; }
.live-tab.active { background: var(--accent-soft); color: var(--text); border-color: rgba(109, 141, 255, .4); }
.live-editor { width: 100%; min-height: 120px; flex: 1 1 45%; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-family: var(--mono); font-size: 12px; color: var(--text); resize: none; outline: none; line-height: 1.5; }
.live-editor:focus { border-color: var(--accent); }
.live-frame { width: 100%; min-height: 160px; flex: 1 1 55%; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.live-resize { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; z-index: 2; }
.live-resize::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); opacity: .7; }
.live-resize:hover::after { border-color: var(--accent); opacity: 1; }

/* Live pane themes + export */
.theme-row { display: flex; gap: 6px; align-items: center; }
.theme-row select { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; min-width: 0; }
.live-export { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Developer tools ---------- */
.tool-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tool-tab { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 8px 0; font-size: 13px; }
.tool-tab.active { background: var(--accent-soft); color: var(--text); border-color: rgba(109, 141, 255, .4); }
.tool-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.tool-field { display: flex; flex-direction: column; gap: 6px; }
.tool-field label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mono-input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; color: var(--text); outline: none; line-height: 1.5; resize: vertical; }
.mono-input:focus { border-color: var(--accent); }
textarea.mono-input { min-height: 120px; }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-output { margin-top: 4px; }
.danger-text { color: var(--danger); font-size: 13px; }

.rx-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.rx-flag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 12px; cursor: pointer; }
.rx-flag input { accent-color: var(--accent); }
.rx-summary { margin-bottom: 8px; font-size: 13px; color: var(--accent-2); font-family: var(--mono); }
.rx-highlight { margin: 0; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.rx-highlight mark { background: rgba(255, 196, 107, .3); color: #fff; border-radius: 3px; padding: 0 2px; }
.rx-matches { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rx-match { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.rx-match-head { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.rx-match-full { display: block; font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 8px; word-break: break-word; }
.rx-group { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.rx-group b { color: var(--accent-2); font-family: var(--mono); }
.rx-group code { font-family: var(--mono); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; word-break: break-word; }
.json-out { min-height: 120px; white-space: pre-wrap; word-break: break-word; }

/* ---------- Notepad ---------- */
.notepad { display: flex; flex-direction: column; }
.notepad-body { display: grid; grid-template-columns: 240px 1fr; gap: 16px; min-height: 60vh; }
.notepad-list { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-y: auto; padding: 6px; }
.notepad-item { padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.notepad-item:hover { background: var(--surface-2); }
.notepad-item.active { background: var(--accent-soft); }
.notepad-item-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notepad-item-meta { font-size: 11px; color: var(--faint); margin-top: 2px; }
.notepad-editor { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.note-title-input { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 15px; font-weight: 600; outline: none; }
.note-title-input:focus { border-color: var(--accent); }
.note-body-input { flex: 1; min-height: 46vh; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; font-size: 13.5px; line-height: 1.6; resize: none; outline: none; }
.note-body-input:focus { border-color: var(--accent); }
.notepad-meta { font-size: 11.5px; color: var(--faint); }
@media (max-width: 720px) { .notepad-body { grid-template-columns: 1fr; } }

/* ---------- Notepad cosmos theme ---------- */
.cosmos {
  --gold: #e6c15c;
  --gold-soft: #f5e9c8;
  position: relative;
  overflow: hidden;
  border-color: rgba(230, 193, 92, .35);
  background-color: #000;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,244,200,.9), transparent 100%),
    radial-gradient(1px 1px at 32% 8%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 30%, rgba(255,236,170,.8), transparent 100%),
    radial-gradient(1px 1px at 72% 14%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1px 1px at 88% 40%, rgba(255,244,200,.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 68%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1px 1px at 26% 82%, rgba(255,236,170,.7), transparent 100%),
    radial-gradient(1px 1px at 48% 70%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 66% 88%, rgba(255,244,200,.75), transparent 100%),
    radial-gradient(1px 1px at 82% 64%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1px 1px at 92% 24%, rgba(255,236,170,.6), transparent 100%);
}
.cosmos-planet { position: absolute; right: 20px; bottom: 16px; width: 118px; height: 101px; opacity: .55; pointer-events: none; }
.cosmos-moon { position: absolute; right: 38px; top: 64px; width: 52px; height: 52px; opacity: .6; pointer-events: none; }
.cosmos-star { position: absolute; pointer-events: none; }
.cosmos-star.s1 { top: 16%; left: 7%; width: 18px; height: 18px; opacity: .75; }
.cosmos-star.s2 { top: 34%; left: 42%; width: 12px; height: 12px; opacity: .55; }
.cosmos-star.s3 { bottom: 26%; right: 14%; width: 15px; height: 15px; opacity: .65; }

.cosmos { color: var(--gold-soft); }
.cosmos .panel-head h2 { color: var(--gold); font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 600; letter-spacing: .02em; }
.cosmos .btn { border-color: rgba(230,193,92,.3); color: var(--gold); }
.cosmos .btn:hover { border-color: var(--gold); background: rgba(230,193,92,.08); }
.cosmos .notepad-list { background: rgba(255,244,200,.03); border-color: rgba(230,193,92,.22); }
.cosmos .notepad-item { color: var(--gold-soft); }
.cosmos .notepad-item:hover { background: rgba(230,193,92,.06); }
.cosmos .notepad-item.active { background: rgba(230,193,92,.14); }
.cosmos .notepad-item-title { color: var(--gold); font-family: 'Playfair Display', Georgia, serif; }
.cosmos .notepad-item-meta { color: rgba(230,193,92,.5); }
.cosmos .note-title-input {
  background: rgba(255,244,200,.04);
  border-color: rgba(230,193,92,.28);
  color: var(--gold);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
}
.cosmos .note-title-input::placeholder { color: rgba(230,193,92,.4); }
.cosmos .note-title-input:focus { border-color: var(--gold); }
.cosmos .note-body-input {
  background-color: transparent;
  border-color: rgba(230,193,92,.25);
  color: var(--gold-soft);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 14.5px;
  line-height: 2rem;
  padding: 12px 16px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2rem - 1px),
    rgba(230, 193, 92, .14) calc(2rem - 1px),
    rgba(230, 193, 92, .14) 2rem
  );
  background-attachment: local;
}
.cosmos .note-body-input::placeholder { color: rgba(230,193,92,.35); }
.cosmos .note-body-input:focus { border-color: var(--gold); }
.cosmos .notepad-meta { color: rgba(230,193,92,.5); font-family: 'Lora', Georgia, serif; }

/* --- cosmos motion --- */
@keyframes nebula {
  0%   { transform: translate3d(-1.5%, -1.5%, 0) scale(1); opacity: .6; }
  100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.08); opacity: 1; }
}
.cosmos::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse 40% 32% at 22% 20%, rgba(160, 109, 255, .14), transparent 70%),
    radial-gradient(ellipse 36% 30% at 80% 78%, rgba(109, 141, 255, .12), transparent 70%);
  pointer-events: none;
  animation: nebula 16s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.65); }
  50%      { opacity: 1; transform: scale(1.2); }
}
.cosmos-star { animation: twinkle 3.2s ease-in-out infinite; }
.cosmos-star.s1 { animation-delay: 0s; }
.cosmos-star.s2 { animation-delay: 1.1s; }
.cosmos-star.s3 { animation-delay: 2.2s; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.cosmos-planet { animation: floaty 8s ease-in-out infinite; }

@keyframes moonglow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,244,200,.35)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,244,200,.7)); }
}
.cosmos-moon { animation: floaty 6s ease-in-out infinite, moonglow 4.5s ease-in-out infinite; }

@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0) rotate(35deg); }
  3%   { opacity: 1; }
  14%  { opacity: 0; transform: translate(-320px, 220px) rotate(35deg); }
  100% { opacity: 0; transform: translate(-320px, 220px) rotate(35deg); }
}
.cosmos::after {
  content: '';
  position: absolute;
  top: 4%;
  right: 8%;
  width: 130px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to left, rgba(255,244,200,.95), rgba(255,244,200,0));
  pointer-events: none;
  opacity: 0;
  animation: shoot 9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cosmos::before, .cosmos::after, .cosmos-star, .cosmos-planet, .cosmos-moon { animation: none !important; }
}

/* ---------- Notepad AI + memory ---------- */
.cosmos .btn.primary { background: var(--gold); color: #000; border-color: var(--gold); }
.cosmos .btn.primary:hover { background: #f0d98c; }
.ai-bar { display: flex; gap: 8px; align-items: center; }
.ai-bar select { background: rgba(255,244,200,.05); border: 1px solid rgba(230,193,92,.3); color: var(--gold); border-radius: 6px; padding: 7px 10px; font-size: 13px; }
.ai-prompt { flex: 1; background: rgba(255,244,200,.04); border: 1px solid rgba(230,193,92,.28); color: var(--gold-soft); border-radius: 6px; padding: 8px 12px; font-size: 13px; outline: none; }
.ai-prompt:focus { border-color: var(--gold); }
.ai-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-chip { background: rgba(255,244,200,.05); border: 1px solid rgba(230,193,92,.28); color: var(--gold); border-radius: 999px; padding: 5px 12px; font-size: 12px; }
.ai-chip:hover { background: rgba(230,193,92,.12); border-color: var(--gold); }
.ai-memory { display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,.25); border: 1px solid rgba(230,193,92,.22); border-radius: 8px; padding: 12px; }
.ai-label { font-size: 11px; color: rgba(230,193,92,.55); text-transform: uppercase; letter-spacing: .05em; }
.ai-style { width: 100%; min-height: 70px; background: rgba(255,244,200,.04); border: 1px solid rgba(230,193,92,.28); color: var(--gold-soft); border-radius: 6px; padding: 8px 12px; font-size: 13px; resize: vertical; outline: none; font-family: 'Lora', Georgia, serif; }
.ai-style:focus { border-color: var(--gold); }
.ai-knowledge { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.ai-k-item { background: rgba(255,244,200,.04); border: 1px solid rgba(230,193,92,.2); border-radius: 6px; padding: 8px 10px; }
.ai-k-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ai-k-head b { color: var(--gold); font-family: 'Playfair Display', Georgia, serif; font-size: 13px; }
.ai-k-del { background: transparent; border: 0; color: rgba(230,193,92,.5); font-size: 13px; cursor: pointer; }
.ai-k-del:hover { color: var(--danger); }
.ai-k-body { color: var(--gold-soft); font-size: 12px; opacity: .8; overflow-wrap: anywhere; max-height: 60px; overflow: hidden; }

/* ---------- Sub-tabs (shared: Store uses .store-subtabs below) ---------- */
.subtab { flex: 1; background: rgba(255,244,200,.04); border: 1px solid rgba(230,193,92,.25); color: var(--gold-soft); border-radius: 8px; padding: 8px 0; font-size: 13px; }
.subtab.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 600; }

@media (max-width: 1460px) {
  .chat-body { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 980px) {
  .chat-body { grid-template-columns: 1fr; }
  .inspector { grid-column: 1 / -1; }
}

/* ---------- Store ---------- */
.store-subtabs { display: flex; gap: 4px; margin-bottom: 14px; }
/* An emoji and its label centre as one group inside each tab. */
.store-subtabs .subtab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface-2); border-color: var(--border); color: var(--text); }
.store-subtabs .subtab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* One product row: the badge slot, then the thumb, then a one-line name + price,
   with the action group pinned to the right edge, so rows stay aligned whether
   or not a card badge is set. */
.store-item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: var(--surface); }
.store-item img:not(.prod-badge) { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--surface-2); flex: none; }
.store-item-ph { width: 56px; height: 56px; background: var(--surface-2); border-radius: 8px; flex: none; }
.store-item-main { flex: 1; min-width: 0; }
.store-item-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.store-item-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-item-name .faint, .store-item-name .tag { flex: none; }
.store-item-price { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-item-slot { flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.store-item-actions { flex: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* Click-to-edit product description (Dashboard › Store › Products). */
.store-desc { margin: 6px 0 0 -6px; padding: 3px 6px; max-width: 620px; border: 1px dashed transparent; border-radius: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); cursor: text; transition: border-color .15s, background .15s, color .15s; }
.store-desc:hover { border-color: var(--border); background: var(--surface-2); color: var(--text); }
.store-desc.editing { border-color: transparent; background: transparent; }
.store-desc-input { display: block; width: 100%; min-width: 220px; background: var(--bg-2); border: 1px solid var(--accent); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; resize: vertical; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.store-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
/* Cover art: one height for both the image and the "no image" placeholder, so
   cards in a row line up. */
.store-card > .store-card-cover { width: 100%; height: 160px; object-fit: cover; display: block; background: var(--surface-2); }
.store-card-body { padding: 12px; }
/* The badge sits on the name line, right before the words, so an icon never
   floats in the card's top-right corner on its own. */
.store-card-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.store-card-name b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-card-name .prod-badge { width: 26px; height: 26px; padding: 2px; border-radius: 8px; }
.store-card-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
.store-card-meta .faint { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-card-price { white-space: nowrap; }

/* ---------- Card badges (products + plan editor previews) ---------- */
/* An optional PNG the operator uploads to a product (or a membership card).
   `contain` + padding keeps a transparent badge crisp at any size; a product
   without one renders exactly as it did before. */
.prod-badge {
  flex: none; width: 40px; height: 40px; object-fit: contain; padding: 3px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
}
/* The upload box in the product and plan editors. */
.badge-preview {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px;
  border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2);
}
.badge-preview img { width: 38px; height: 38px; object-fit: contain; }
/* Links found inside user-typed text (see `linkify` in app.js) — chat bubbles
   and message lists. Kept quiet so a pasted URL never shouts. */
a.link { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; }
a.link:hover { color: var(--accent-strong, var(--accent)); }
@media (max-width: 720px) {
  .store-item-actions { width: 100%; justify-content: flex-start; }
}

/* ---------- Gmail-style inbox ---------- */
.gmail-list { display: flex; flex-direction: column; }
.gmail-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.gmail-row:hover { background: var(--surface-2); }
.gmail-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
.gmail-avatar.fallback { display: grid; place-items: center; color: var(--text); font-weight: 600; background: var(--accent-soft); }
.gmail-meta { flex: 1; min-width: 0; }
.gmail-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.gmail-preview { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmail-time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.feed-note { color: var(--accent-2); font-size: 12px; margin-top: 2px; }

/* ---------- Feed gallery ----------
   Up to three photos per post, each with the caption printed under it. One
   photo keeps the old single-thumbnail width; two and three split the row into
   equal cells so a post reads as a small set rather than a pile. */
.feed-gallery { display: grid; gap: 6px; margin-top: 6px; max-width: 420px; }
.feed-gallery.n1 { grid-template-columns: 1fr; max-width: 240px; }
.feed-gallery.n2 { grid-template-columns: 1fr 1fr; }
.feed-gallery.n3 { grid-template-columns: 1fr 1fr 1fr; }
.feed-shot { margin: 0; line-height: 0; min-width: 0; }
.feed-gallery .feed-shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; cursor: zoom-in; }
.feed-shot figcaption { line-height: 1.35; font-size: 11.5px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.feed-pin-chip { font-size: 12px; }
/* ---------- Feed video ----------
   One clip beside the photos, with the browser's own controls. No player
   library: a phone records MP4, a desktop may record WebM, and both play in
   place. The same width as the gallery so a post reads as one column. */
.feed-video { display: block; width: 100%; max-width: 420px; margin-top: 6px; border-radius: 8px; background: #000; }
.view-card-video { display: block; width: 100%; max-height: 68vh; background: #000; }
/* The viewer's true-black card lets the same gallery bleed edge to edge. */
.view-card-media.feed-gallery { max-width: none; margin: 0; gap: 2px; }
.view-card-media.feed-gallery .feed-shot img { aspect-ratio: auto; max-height: 68vh; object-fit: contain; border-radius: 0; cursor: default; }
.view-card-media.feed-gallery .feed-shot figcaption { padding: 6px 16px 0; color: var(--muted); }
/* In the feed list a post's pictures are thumbnails, not the page: a fixed cell
   keeps the row the height of a list row however wide the window gets. The
   viewer above still shows the same gallery full size. */
.feed-row .feed-gallery { display: flex; flex-wrap: wrap; gap: 6px; max-width: none; margin-top: 6px; }
.feed-row .feed-gallery .feed-shot { width: 108px; }
.feed-row .feed-gallery .feed-shot img { width: 108px; height: 108px; aspect-ratio: auto; }
.feed-row .feed-gallery .feed-shot figcaption { font-size: 11px; line-height: 1.3; padding-top: 3px; max-height: 34px; overflow: hidden; }
/* The clip's thumbnail in the list: a still-sized player, not a full-width one. */
.feed-row .feed-video { width: 176px; max-width: 50%; }
/* The composer's three cells: preview, caption field, remove. */
.fp-shots { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.fp-shot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fp-shot img { width: 100%; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; }
.fp-shot-caption { font-size: 12px; padding: 6px 8px; }
.fp-shot [data-drop] { align-self: flex-start; }

/* ---------- Profile lookbook ----------
   Six photo cells plus two glass cells, three to a row. A linked photo prints
   its product along the bottom edge, so the mosaic is browsable: a tile is a way
   into the storefront, not just a picture. */
.lookbook-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lb-cell { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); min-height: 110px; }
.lb-cell img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: zoom-in; }
.lb-cell figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.78)); font-size: 11.5px; line-height: 1.3; }
.lb-cell figcaption a { color: #fff; text-decoration: none; }
.lb-cell figcaption a:hover { text-decoration: underline; }
.lb-glass { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px; aspect-ratio: 1 / 1; border: 1px solid var(--border); background: rgba(255,255,255,.06); backdrop-filter: blur(10px); }
.lb-glass h3 { margin: 0; font-size: 15px; line-height: 1.25; }
.lb-glass p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
/* The editor's one-row-per-photo link picker. */
.lookbook-link-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lookbook-link-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.lookbook-link-row select { flex: 1; }
@media (max-width: 520px) {
  .lookbook-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-shots { grid-template-columns: 1fr 1fr; }
}

/* ---------- Subtle polish ---------- */
.btn:hover { filter: brightness(1.1); }
.gmail-row, .store-item { transition: background .15s ease, border-color .15s ease; }
.gmail-row:hover { background: var(--surface-2); }
.store-item:hover { border-color: var(--border-strong); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
::-webkit-scrollbar-track { background: transparent; }
#modal .thread-body { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }

/* ---------- System Intelligence: the preset lane, the edit lane, the transcript ---------- */
/* The two lanes look different on purpose. The presets are fixed, read-only
   scans, while an edit command is the operator's own instruction and is read
   back before it can do anything — so it is never mixed in with the scans. */
.si-lane { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); padding: 12px 14px; margin-bottom: 12px; }
.si-lane-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 13px; margin-bottom: 8px; color: var(--text); }
.si-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; }
.si-readback { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.si-entry { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.si-entry:last-child { border-bottom: 0; }
.si-entry-head { color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.si-entry-body { color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }


/* ---------- Phones: a focused control must never compute under 16px ---------- */
/* iOS Safari zooms the whole page in when a focused field is under 16px, which
   leaves the console stuck at the wrong scale until it is pinched back — the
   single most common way a desktop-first app feels broken on a phone. The rule
   is scoped to the widths where a phone is actually used, so the desktop density
   is untouched, and it has to carry `!important`: several components set their
   own smaller size (`.search`, `.mono-input`, `.note-body-input`, and inline
   `style="font-size:…"` in app.js), and this is the floor they must not cross.
   Nothing here sets a fixed field height, so the larger type clips nothing. */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
}