/* app/css/app.css -- hand-written, no framework. Tokens match the live mgequant.com dark theme. */

:root {
  --bg: #06070a;
  --bg-panel: #0d0f14;
  --border: #1e222b;
  --silver: #e6e8ec;
  --silver-dim: #9aa0ab;
  --blue: #3b8bff;
  --blue-dim: #6fa8ff;
  --blue-hi: #8cc6ff;
  --text: #c7cbd4;
  --text-dim: #7d8390;
  --win: #34d399;
  --loss: #f87171;
  --warn: #fbbf24;
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--blue), var(--blue-hi));
}
.brand-name { font-size: 14px; font-weight: 700; color: var(--silver); }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
  min-height: 44px;
}
.tab:hover { border-color: var(--blue-dim); color: var(--silver); }
.tab.active { background: var(--blue); border-color: var(--blue); color: #04101f; }

.banner { padding: 10px 16px; font-size: 13px; }
.banner-warn { background: rgba(251, 191, 36, 0.10); color: var(--warn); border-bottom: 1px solid rgba(251, 191, 36, 0.3); }
.banner-loss { background: rgba(248, 113, 113, 0.10); color: var(--loss); border-bottom: 1px solid rgba(248, 113, 113, 0.3); }

main { padding: 16px; max-width: 900px; margin: 0 auto; }

.panel {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px;
}

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; min-height: 44px; color: var(--silver);
}
.field textarea { min-height: 80px; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--border); background: none; color: var(--text-dim); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; font-size: 12px; font-weight: 600; min-height: 40px;
}
.chip.on { background: var(--blue); border-color: var(--blue); color: #04101f; }
.chip.loss.on { background: var(--loss); border-color: var(--loss); color: #2a0505; }

.btn-primary {
  width: 100%; background: var(--blue); color: #04101f; border: none; border-radius: var(--radius);
  padding: 14px; font-weight: 700; font-size: 14px; cursor: pointer; min-height: 48px;
}
.btn-primary:hover { background: var(--blue-hi); }
.btn-secondary {
  background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm);
  padding: 8px 12px; cursor: pointer; font-size: 12px; font-weight: 600; min-height: 40px;
}
.btn-secondary:hover { color: var(--silver); border-color: var(--blue-dim); }
.btn-danger { margin-left: auto; color: var(--loss); }
.btn-danger:hover { color: var(--loss); border-color: var(--loss); }
.field input[type=checkbox] { width: auto; min-height: 0; padding: 0; }

.ticket-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; background: var(--bg-panel); }
.ticket-card.has-block { border-color: rgba(248, 113, 113, 0.35); }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ticket-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--silver); }
.r-value { font-size: 14px; font-weight: 700; }
.r-value.win { color: var(--win); }
.r-value.loss { color: var(--loss); }
.r-value.flat { color: var(--text-dim); }

.ladder { display: flex; align-items: center; gap: 4px; margin: 8px 0; }
.ladder-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: 0 0 auto; }
.ladder-dot.done { background: var(--blue); }
.ladder-dot.win { background: var(--win); }
.ladder-line { flex: 1; height: 2px; background: var(--border); }
.ladder-line.done { background: var(--blue); }

.flag-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.flag { font-size: 12px; padding: 8px 10px; border-radius: var(--radius-sm); }
.flag.BLOCK { background: rgba(248, 113, 113, 0.10); color: var(--loss); border: 1px solid rgba(248, 113, 113, 0.3); }
.flag.WARN { background: rgba(251, 191, 36, 0.10); color: var(--warn); border: 1px solid rgba(251, 191, 36, 0.3); }

.actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.gate-status { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.gate-status.shut { color: var(--loss); }

.bucket-sim { color: var(--blue-hi); }
.bucket-prop { color: var(--warn); }
.bucket-live { color: var(--loss); }
.bucket-unmapped { color: var(--text-dim); }

.empty-state { text-align: center; color: var(--text-dim); padding: 40px 16px; font-size: 13px; }

.stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.stat-tile { flex: 1; min-width: 120px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.stat-tile .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 6px; }
.stat-tile .value { font-size: 22px; font-weight: 700; color: var(--silver); }

.ai-desk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ai-desk-head h2 { margin: 0 0 6px; color: var(--silver); }
.ai-sim-badge { border: 1px solid rgba(52, 211, 153, 0.45); color: var(--win); border-radius: 999px; padding: 7px 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.ai-value { font-size: 16px !important; }
.ai-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ai-plan-grid > div { display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ai-plan-grid span, .ai-bridge-status span { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.ai-plan-grid strong { color: var(--silver); font-size: 14px; overflow-wrap: anywhere; }
.ai-long { color: var(--win) !important; }
.ai-short { color: var(--loss) !important; }
.ai-execute-form { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(140px, 1fr); gap: 12px; align-items: end; margin-top: 12px; }
.ai-execute-form .field { margin: 0; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.ai-execute-form input, .ai-execute-form select { display: block; width: 100%; margin-top: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 44px; color: var(--silver); }
.ai-execute-form button { grid-column: 1 / -1; }
.ai-bridge-status { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.ai-bridge-status strong { color: var(--silver); text-align: right; }
.ai-safety { border-color: rgba(251, 191, 36, 0.25); font-size: 12px; }
.ai-safety strong { color: var(--warn); }
.ai-safety p { color: var(--text-dim); line-height: 1.5; }
.ai-safety ul { margin-bottom: 0; padding-left: 20px; color: var(--text-dim); line-height: 1.7; }
.ai-safety code { color: var(--silver); }
.ai-error { color: var(--loss); font-size: 12px; }

/* chart screenshots on a ticket: small thumbnails, click one to enlarge, click again to shrink */
.shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.shot { margin: 0; position: relative; }
.shot-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; line-height: 1; font-size: 16px; border-radius: 50%; border: 1px solid var(--border); background: rgba(0,0,0,0.7); color: var(--loss); cursor: pointer; }
.shot-del:hover { border-color: var(--loss); }
.shot img { display: block; max-width: 170px; max-height: 96px; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; }
.shot figcaption { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-top: 3px; }
.shot img.shot-big { position: fixed; top: 4vh; left: 4vw; width: 92vw; height: 92vh; max-width: none; max-height: none; object-fit: contain; background: #000; z-index: 50; cursor: zoom-out; border-color: var(--silver); }

@media (min-width: 720px) {
  main { padding: 24px; }
}
@media (max-width: 560px) {
  .ai-execute-form { grid-template-columns: 1fr; }
  .ai-execute-form button { grid-column: auto; }
}

/* Journal: open trades on top, then winners (left) and losers (right) side by side */
.sect-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin: 14px 0 8px; }
.wl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin-top: 12px; }
.wl-col { min-width: 0; }
.wl-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 10px; border: 1px solid var(--border); }
.wl-head.win { color: var(--win); border-color: rgba(52, 211, 153, 0.35); }
.wl-head.loss { color: var(--loss); border-color: rgba(248, 113, 113, 0.35); }
.wl-empty { font-size: 12px; color: var(--text-dim); padding: 10px 4px; }
.when { font-size: 12px; color: var(--silver); margin-top: 4px; }
@media (max-width: 760px) { .wl { grid-template-columns: 1fr; } }

/* account type: chip on each card, header on each block, filter chips */
.grp { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; border-radius: 5px; padding: 1px 6px; border: 1px solid var(--border); color: var(--text-dim); }
.grp-SIM { color: var(--blue-hi); border-color: var(--blue-dim); }
.grp-EVAL { color: var(--warn); border-color: rgba(251, 191, 36, 0.5); }
.grp-FUNDED { color: var(--win); border-color: rgba(52, 211, 153, 0.5); }
.grp-LIVE { color: var(--loss); border-color: rgba(248, 113, 113, 0.5); }
.nick { font-size: 10px; font-weight: 700; border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--silver); }
.grp-chips { margin: 4px 0 14px; }
.grp-block { margin-bottom: 26px; }
.grp-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); margin: 18px 0 4px; }

.assign-bar { font-size: 12px; color: var(--text-dim); margin: 0 0 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.assign-bar select, .assign-one select { min-height: 36px; background: var(--bg); color: var(--silver); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; }
.assign-one { display: inline-flex; }

/* weekly coaching + one-tap feelings */
.feel { margin: 8px 0 0; }
.feel-btn { font-size: 11px; min-height: 32px; padding: 4px 10px; }
.feel-chips { margin-top: 6px; }
.feel-chips .chip { min-height: 30px; padding: 4px 10px; font-size: 11px; }
.coach-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; background: var(--bg); }
.coach-title { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--silver); }
.coach-cost { font-weight: 700; color: var(--text-dim); }
.coach-cost.loss { color: var(--loss); }
.coach-detail { font-size: 12px; color: var(--text-dim); margin: 4px 0 6px; }
.coach-advice { font-size: 12px; color: var(--silver); border-left: 3px solid var(--warn); padding-left: 8px; margin-bottom: 6px; }
.coach details summary { cursor: pointer; font-size: 11px; color: var(--text-dim); }
.coach-trade { font-size: 11px; color: var(--text-dim); padding: 3px 0 0 8px; }
.coach-good { font-size: 12px; color: var(--win); margin-top: 10px; }
.coach-good div { color: var(--silver); padding-top: 2px; }

.block-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.block-tools .assign-bar { margin: 0; }
.block-tools .btn-danger { margin-left: auto; min-height: 32px; padding: 4px 12px; font-size: 11px; }

/* Login gate: the password form sits on top (a book's title page), fully visible and clickable from the
   start. On a correct password it fades out, uncovering the two book-cover halves beneath it for an instant
   before they swing open from the spine, revealing the real app behind the whole overlay. The server, not
   this screen, is what actually refuses data to anyone without a session (see auth.js). */
.lock-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, var(--bg-panel), var(--bg) 70%);
  padding: 16px;
}
.lock-screen[hidden] { display: none; }

.book {
  position: relative;
  width: min(92vw, 420px);
  min-height: 440px;
  perspective: 1800px;
}

.book-pages {
  position: absolute; inset: 0; z-index: 3;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 36px 28px;
  transition: opacity 350ms ease, transform 350ms ease;
}
.book.opening .book-pages { opacity: 0; transform: scale(0.94); pointer-events: none; }

.book-cover {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2;
  background: linear-gradient(135deg, #10131a, #06070a 75%);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1) 250ms, opacity 700ms ease 450ms;
  backface-visibility: hidden;
}
.book-cover-left {
  left: 0; border-radius: var(--radius) 0 0 var(--radius);
  border-right: 1px solid rgba(59, 139, 255, 0.25);
  transform-origin: right center;
}
.book-cover-right {
  right: 0; border-radius: 0 var(--radius) var(--radius) 0;
  border-left: 1px solid rgba(59, 139, 255, 0.25);
  transform-origin: left center;
}
.book-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--blue-hi));
  opacity: 0.9;
}
.book.opening .book-cover-left { transform: rotateY(-115deg); opacity: 0; }
.book.opening .book-cover-right { transform: rotateY(115deg); opacity: 0; }

.lock-form { width: 100%; text-align: center; }
.lock-form h1 { font-size: 18px; margin: 10px 0 4px; color: var(--silver); }
.lock-brand { margin: 0 auto 6px; }
.lock-sub { font-size: 12px; color: var(--text-dim); margin: 0 0 18px; min-height: 16px; }
.lock-form .field { text-align: left; }
.lock-error { color: var(--loss); font-size: 12px; margin-top: 10px; min-height: 16px; }

/* After the covers swing open: a brief centered doorway glow and greeting before the overlay
   hides. Pure UX chrome like the covers; server sessions still decide access. No personal, account,
   path, network, or credential content belongs in the door text. Reduced-motion users get the hidden
   overlay without waiting through the visual. */
.door {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.door[hidden] { display: none; }
.door-glow {
  position: absolute; width: 72px; height: 220px;
  background: linear-gradient(to bottom, rgba(140, 198, 255, 0), rgba(140, 198, 255, 0.38), rgba(140, 198, 255, 0));
  border-left: 1px solid rgba(140, 198, 255, 0.7);
  border-right: 1px solid rgba(140, 198, 255, 0.7);
  opacity: 0; transform: scaleY(0.85);
  transition: opacity 450ms ease 100ms, transform 450ms ease 100ms;
}
.door-text {
  position: relative; z-index: 1;
  font-size: 16px; font-weight: 700; letter-spacing: 0.06em; color: var(--silver);
  background: rgba(6, 7, 10, 0.72); border: 1px solid var(--border);
  border-radius: 999px; padding: 12px 22px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 450ms ease 500ms, transform 450ms ease 500ms;
}
.book.door-open .door-glow { opacity: 1; transform: scaleY(1); }
.book.door-open .door-text { opacity: 1; transform: translateY(0); }

/* Confetti burst once the door opens: pure CSS, no library. The pieces are plain <i> elements
   (see index.html) driven by the same .door-open state as the door, so they can never fire without
   a successful login -- and because they run once per unlock and the overlay then hides, nothing
   keeps painting afterwards. Reduced motion removes the layer entirely. */
.confetti {
  position: absolute; inset: 0; z-index: 5;
  overflow: hidden; pointer-events: none;
}
.confetti[hidden] { display: none; }
.confetti i {
  position: absolute; top: -14px; width: 7px; height: 11px;
  opacity: 0;
}
.book.door-open.confetti-on .confetti i { animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: both; }
.book.door-open.confetti-on .confetti i:nth-child(even) { animation-name: confetti-fall-alt; }
@keyframes confetti-fall {
  0% { transform: translateY(-16px) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(250px) rotate(540deg); opacity: 0; }
}
@keyframes confetti-fall-alt {
  0% { transform: translateY(-16px) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(250px) rotate(-540deg); opacity: 0; }
}
.confetti i:nth-child(1) { left: 4%; background: var(--blue); animation-duration: 1.05s; animation-delay: 0s; }
.confetti i:nth-child(2) { left: 11%; width: 6px; height: 6px; border-radius: 50%; background: var(--win); animation-duration: 1.2s; animation-delay: .08s; }
.confetti i:nth-child(3) { left: 18%; background: var(--warn); animation-duration: 1.1s; animation-delay: .16s; }
.confetti i:nth-child(4) { left: 26%; width: 9px; height: 7px; background: var(--blue-hi); animation-duration: 1s; animation-delay: .05s; }
.confetti i:nth-child(5) { left: 33%; background: var(--silver); animation-duration: 1.18s; animation-delay: .24s; }
.confetti i:nth-child(6) { left: 41%; width: 6px; height: 10px; background: var(--win); animation-duration: 1.08s; animation-delay: .12s; }
.confetti i:nth-child(7) { left: 48%; background: var(--warn); animation-duration: 1.15s; animation-delay: .3s; }
.confetti i:nth-child(8) { left: 55%; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation-duration: 1.02s; animation-delay: .18s; }
.confetti i:nth-child(9) { left: 62%; background: var(--blue-hi); animation-duration: 1.12s; animation-delay: .02s; }
.confetti i:nth-child(10) { left: 69%; width: 6px; height: 9px; background: var(--silver); animation-duration: 1.2s; animation-delay: .27s; }
.confetti i:nth-child(11) { left: 76%; background: var(--win); animation-duration: 1.06s; animation-delay: .1s; }
.confetti i:nth-child(12) { left: 83%; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); animation-duration: 1.14s; animation-delay: .21s; }
.confetti i:nth-child(13) { left: 90%; background: var(--blue); animation-duration: 1.09s; animation-delay: .06s; }
.confetti i:nth-child(14) { left: 95%; width: 6px; height: 6px; background: var(--blue-hi); animation-duration: 1.16s; animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .book-cover, .book-pages { transition: none; }
  .door-glow, .door-text { transition: none; }
  .confetti { display: none; }
}

.ai-mode-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ai-mode-btn { background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ai-mode-btn.on { color: var(--silver); border-color: var(--blue-dim); background: rgba(59, 139, 255, 0.12); }
.ai-sim-badge.ai-off { border-color: rgba(248, 113, 113, 0.5); color: var(--loss); }
.ai-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ai-table th { text-align: left; color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.ai-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--silver); }
.ai-table tr.ai-total td { font-weight: 800; }
.ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-decision { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; }
.ai-decision-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 12px; color: var(--text-dim); }
.ai-decision-head strong { color: var(--silver); }
.ai-shots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ai-shot { max-width: 100%; height: auto; border: 1px solid var(--border, #444); border-radius: 4px; display: block; }
.ai-decision-text { margin-top: 6px; font-size: 12px; color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
.ai-decision summary { margin-top: 6px; font-size: 11px; color: var(--blue-dim); cursor: pointer; }
.ai-events { margin: 8px 0 0; font-size: 11px; color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- product app additions (auth screen, account status, notices, stat tiles) --- */
.auth-screen { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: #06070a; padding: 20px; }
.auth-screen[hidden] { display: none; }
.auth-card { width: 100%; max-width: 380px; background: var(--bg-panel, #101319); border: 1px solid var(--border, #2a2f3a); border-radius: 12px; padding: 26px 24px; }
.auth-card h1 { font-size: 20px; margin: 0 0 4px; color: var(--silver, #e6e9ef); }
.auth-error { margin-top: 10px; font-size: 13px; color: var(--loss, #f87171); }
.auth-error[hidden] { display: none; }
.btn-link { background: none; border: none; color: var(--blue-dim, #6ea8ff); cursor: pointer; font-size: 13px; padding: 8px 0; text-align: center; width: 100%; }
.btn-link:hover { color: var(--silver, #e6e9ef); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.account-status { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border, #2a2f3a); }
.account-status[hidden] { display: none; }
.account-active { color: var(--win, #4ade80); border-color: rgba(74, 222, 128, 0.4); }
.account-inactive { color: var(--warn, #fbbf24); border-color: rgba(251, 191, 36, 0.4); }
.stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 4px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim, #8b93a1); }
.stat-v { font-size: 18px; font-weight: 700; color: var(--silver, #e6e9ef); }
.recent { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tiny { font-size: 11px; }
.row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.row input { flex: 1; min-width: 180px; }
.notice-ok { border-color: rgba(74, 222, 128, 0.4); color: var(--win, #4ade80); }
.notice-bad { border-color: rgba(248, 113, 113, 0.4); color: var(--loss, #f87171); }
.site-footer { padding: 18px 16px 40px; max-width: 1100px; margin: 0 auto; }

/* Sale-app login on the book: sign-up toggle and the sound switch sit under the button. */
.lock-form .btn-link { display: block; margin: 10px auto 0; }
.lock-sound { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--text-dim); cursor: pointer; }
.lock-form .tiny.muted { margin-top: 12px; }