/* Display face for real-estate headings + property names. Bundled locally
   (variable woff2) so the Netlify deploy stays self-contained. Mono still
   carries all data, code, and HUD labels - two deliberate voices. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/archivo.woff2') format('woff2');
}

:root {
  --display: 'Archivo', 'JetBrains Mono', ui-monospace, sans-serif;
  --bg: #15110b;
  --bg-panel: #211a12;
  --bg-panel-hi: #2a2016;
  /* Phoenix-desert secondaries (real-estate warmth alongside the amber identity) */
  --sky: #5f97ba;
  --terracotta: #c0673d;
  --sage: #8a9a5b;
  --pool: #3fa79f;
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background-color: var(--bg);
  color: var(--amber-50);
  min-height: 100vh;
  padding-bottom: 4.5rem;
  /* warm desert-dawn glow lifts the void off flat black, plus the terminal scanline */
  background-image:
    radial-gradient(120% 60% at 50% -8%, rgba(192,103,61,0.10) 0%, transparent 60%),
    radial-gradient(100% 50% at 50% 108%, rgba(95,151,186,0.06) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(245,158,11,0.022) 0, rgba(245,158,11,0.022) 1px, transparent 1px, transparent 3px);
  background-attachment: fixed;
}
.wrap { max-width: 28rem; margin: 0 auto; }

/* Display face on real-estate headings + property names (mono keeps all data/code). */
.listing-tag, .listing-addr, .listing-price, .re-count,
.section-head h2, .modal-title, .card-title, .welcome-title,
.buy-title, .listing-stat-value, .status-value {
  font-family: var(--display);
}
.listing-price, .re-count, .listing-stat-value, .status-value { letter-spacing: .01em; }

/* HEADER */
.header { border-bottom: 1px solid rgba(120,53,15,0.4); padding: .75rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.header-left { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.header-right { display: flex; align-items: center; gap: .375rem; flex-shrink: 0; }
.hero-emblem { width: 2rem; height: 2rem; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(245,158,11,0.3)); }
.label-tiny { font-size: .625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-700); }
.label-cash { font-size: .75rem; color: var(--amber-300); }
.cash-line { position: relative; }
.cash-gain { position: absolute; right: 0; top: -.5rem; color: var(--emerald-400); font-weight: 700; font-size: .75rem; pointer-events: none; animation: floatUp 1.6s ease-out forwards; text-shadow: 0 0 6px rgba(52,211,153,.5); }
@keyframes floatUp { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }

.btn-ghost { font-size: .625rem; text-transform: uppercase; letter-spacing: .1em; border: 1px solid rgba(180,83,9,0.6); background: transparent; color: var(--amber-50); padding: .375rem .625rem; border-radius: 2px; cursor: pointer; font-family: inherit; transition: background .2s; }
.btn-ghost:hover { background: rgba(120,53,15,0.3); }
.btn-ghost:active { transform: scale(.97); }

/* ICON BTN */
.icon-btn { width: 1.875rem; height: 1.875rem; border: 1px solid rgba(180,83,9,0.6); background: transparent; color: var(--amber-700); border-radius: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.icon-btn:hover { color: var(--amber-300); background: rgba(120,53,15,0.3); }

/* MARA MESSAGES BUTTON */
.msg-btn { position: relative; font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; border: 1px solid rgba(180,83,9,0.6); background: transparent; color: var(--amber-300); padding: .375rem .5rem .375rem .75rem; border-radius: 2px; cursor: pointer; font-family: inherit; transition: all .2s; display: flex; align-items: center; gap: .375rem; }
.msg-btn:hover { background: rgba(120,53,15,0.3); color: var(--amber-200); }
.msg-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--amber-800); transition: background .2s; }
.msg-btn.has-unread .msg-dot { background: var(--rose-400); animation: ping 1.4s ease-out infinite; }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(251,113,133,0.7); }
  70% { box-shadow: 0 0 0 6px rgba(251,113,133,0); }
  100% { box-shadow: 0 0 0 0 rgba(251,113,133,0); }
}

/* NEWS TICKER */
.ticker { border-bottom: 1px solid rgba(120,53,15,0.4); background: rgba(120,53,15,0.08); overflow: hidden; height: 1.875rem; display: flex; align-items: center; position: relative; }
.ticker::before { content: 'NEWS'; position: absolute; left: 0; top: 0; bottom: 0; padding: 0 .625rem; display: flex; align-items: center; background: var(--bg); color: var(--amber-600); font-size: .5625rem; font-weight: 700; letter-spacing: .2em; border-right: 1px solid rgba(120,53,15,0.4); z-index: 2; }
.ticker-track { display: flex; gap: 3rem; padding-left: 5rem; animation: scroll 90s linear infinite; white-space: nowrap; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { font-size: .6875rem; color: var(--amber-400); letter-spacing: .05em; flex-shrink: 0; }
.ticker-bullet { color: var(--amber-800); margin-right: 3rem; }

/* STATUS STRIP */
.status { padding: 1rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .75rem; border-bottom: 1px solid rgba(120,53,15,0.4); }
.status-value { font-weight: 700; font-size: .875rem; color: var(--amber-300); }
.status-value.healthy { color: var(--emerald-300); }
.status-value.degraded { color: var(--amber-400); }
.status-value.critical { color: var(--rose-400); }
.status-sub { color: var(--amber-700); font-size: .625rem; }
.energy-meta { font-size: .5625rem; color: var(--amber-700); margin-top: .125rem; text-transform: uppercase; letter-spacing: .1em; }
.energy-meta:empty { display: none; }
[data-theme="light"] .energy-meta { color: var(--amber-700); }
.rack { display: flex; gap: 2px; margin-top: .25rem; }
.rack-unit { flex: 1; height: 8px; background: rgba(69,26,3,0.6); border-radius: 1px; transition: background .3s; }
.rack-unit.on { background: var(--emerald-400); box-shadow: 0 0 4px rgba(52,211,153,0.5); }
.rack-unit.warn { background: var(--amber-400); }
.rack-unit.crit { background: var(--rose-500); }

/* MAIN */
.main { padding: 1rem; }
.section-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.section-head-arrow { color: var(--amber-700); }
.section-head h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; color: var(--amber-500); font-weight: 500; flex: 1; }

/* STREAK BADGE */
.streak-badge { display: none; font-size: .625rem; font-weight: 700; padding: .125rem .5rem; border-radius: 10px; background: var(--rose-500); color: white; letter-spacing: .1em; text-transform: uppercase; animation: streakPulse 1s ease-in-out infinite; }
.streak-badge.show { display: inline-block; }
@keyframes streakPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 4px rgba(244,63,94,0.6); }
  50% { transform: scale(1.06); box-shadow: 0 0 12px rgba(244,63,94,0.9); }
}

.modules { display: flex; flex-direction: column; gap: .75rem; }

/* MODULE CARDS */
.module { border: 1px solid; background: linear-gradient(180deg, var(--bg-panel-hi) 0%, var(--bg-panel) 100%); padding: .75rem; border-radius: 2px; transition: transform .2s, box-shadow .3s; box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,220,160,0.04); }
.module.active { border-color: rgba(16,185,129,0.5); }
.module.building { border-color: rgba(245,158,11,0.6); }
.module.locked { border-color: rgba(120,53,15,0.4); opacity: .5; }
.module-head { display: flex; align-items: flex-start; gap: .625rem; }
.module-icon { width: 2rem; height: 2rem; flex-shrink: 0; }
.module-meta { flex: 1; min-width: 0; }
.module-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.module-name { font-weight: 700; font-size: .875rem; color: var(--amber-100); }
.module-pill { font-size: .625rem; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.module-pill.active { color: var(--emerald-400); }
.module-pill.building { color: var(--amber-400); }
.module-pill.locked { color: var(--amber-800); }
.module-effect { font-size: .6875rem; color: var(--amber-600); margin-top: .25rem; }
.module-progress-meta { font-size: .625rem; text-transform: uppercase; letter-spacing: .1em; color: var(--amber-700); margin-top: .25rem; }
.bar { width: 100%; height: 4px; background: rgba(69,26,3,0.6); margin-top: .75rem; }
.bar-fill { height: 4px; background: var(--amber-400); transition: width .5s cubic-bezier(.34,1.56,.64,1); }

.module-cta { display: block; width: 100%; margin-top: .5rem; background: var(--amber-600); color: #000; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; padding: .625rem; border: none; border-radius: 2px; cursor: pointer; font-family: inherit; transition: background .2s, transform .15s; }
.module-cta:hover { background: var(--amber-500); }
.module-cta:active { transform: scale(.98); }
.module-cta:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.module-status-note { margin-top: .75rem; font-size: .625rem; text-transform: uppercase; letter-spacing: .1em; }
.module-status-note.earning { color: var(--emerald-500); }
.module-status-note.locked { color: var(--amber-800); }
.footer-note { padding-top: 1.5rem; text-align: center; font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--amber-900); }

/* MODALS */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 50; display: none; align-items: flex-end; justify-content: center; backdrop-filter: blur(4px); }
.modal.open { display: flex; }
.modal-panel { background: var(--bg-panel); border-top: 2px solid rgba(180,83,9,0.6); width: 100%; padding: 1.25rem; max-height: 90vh; overflow-y: auto; transition: border-color .3s; }
.modal-panel.success { border-color: var(--emerald-400); }
.modal-panel.fail { animation: shake .35s; border-color: var(--rose-400); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (min-width: 640px) {
  .modal { align-items: center; padding: 1rem; }
  .modal-panel { max-width: 28rem; border: 2px solid rgba(180,83,9,0.6); border-radius: 6px; }
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.modal-title-row { display: flex; align-items: center; gap: .5rem; }
.modal-title { font-weight: 700; color: var(--amber-300); font-size: .9375rem; }
.diff-badge { font-size: .5625rem; text-transform: uppercase; letter-spacing: .15em; padding: .125rem .375rem; border-radius: 2px; }
.diff-badge.rookie { background: rgba(16,185,129,0.2); color: var(--emerald-300); }
.diff-badge.pro { background: rgba(245,158,11,0.2); color: var(--amber-300); }
.diff-badge.expert { background: rgba(244,63,94,0.2); color: var(--rose-400); }
.modal-close { color: var(--amber-700); background: none; border: none; font-size: 1.5rem; cursor: pointer; font-family: inherit; line-height: 1; }
.modal-close:hover { color: var(--amber-300); }

/* PUZZLE MODAL */
.code-editor { background: #08070a; border: 1px solid rgba(120,53,15,0.5); border-radius: 3px; overflow: hidden; }
.code-tab { background: rgba(120,53,15,0.2); padding: .25rem .75rem; font-size: .625rem; color: var(--amber-700); border-bottom: 1px solid rgba(120,53,15,0.4); display: flex; align-items: center; gap: .5rem; }
.code-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber-500); }
.code-body { display: flex; padding: .5rem 0; font-size: .75rem; line-height: 1.55; }
.code-gutter { padding: 0 .625rem; color: var(--amber-900); text-align: right; user-select: none; border-right: 1px solid rgba(120,53,15,0.3); }
.code-content { padding: 0 .75rem; color: var(--emerald-300); white-space: pre; overflow-x: auto; flex: 1; }
.code-blank { background: rgba(245,158,11,0.15); border-bottom: 1px solid var(--amber-500); padding: 0 .25rem; color: var(--amber-300); }
.comment { font-size: .75rem; color: var(--amber-600); margin: .75rem 0 .5rem; }
.options { display: flex; flex-direction: column; gap: .5rem; }
.options.hidden { display: none; }

/* ROOKIE HINT BUTTON + REVEAL */
.puzzle-hint { margin-bottom: .5rem; }
.puzzle-hint.hidden { display: none; }
.hint-btn { display: block; width: 100%; padding: .5rem .625rem; background: transparent; border: 1px dashed rgba(245,158,11,0.4); border-radius: 2px; font-family: inherit; font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--amber-500); cursor: pointer; transition: all .15s; text-align: left; }
.hint-btn:hover { background: rgba(245,158,11,0.08); border-color: var(--amber-500); color: var(--amber-300); }
.hint-reveal { padding: .625rem .75rem; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.35); border-left: 2px solid var(--amber-400); border-radius: 2px; }
.hint-label { display: block; font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-600); margin-bottom: .25rem; }
.hint-body { display: block; font-size: .75rem; color: var(--amber-100); line-height: 1.5; }
[data-theme="light"] .hint-btn { color: var(--amber-700); border-color: rgba(180,83,9,0.45); }
[data-theme="light"] .hint-btn:hover { background: rgba(245,158,11,0.1); color: var(--amber-900); }
[data-theme="light"] .hint-reveal { background: rgba(245,158,11,0.1); border-color: rgba(180,83,9,0.35); border-left-color: var(--amber-600); }
[data-theme="light"] .hint-label { color: var(--amber-700); }
[data-theme="light"] .hint-body { color: var(--amber-900); }

/* NUMERIC INPUT */
.numeric-input { display: flex; gap: .5rem; margin-top: 0; }
.numeric-input.hidden { display: none; }
.numeric-field { flex: 1; background: rgba(0,0,0,0.4); border: 1px solid rgba(120,53,15,0.5); padding: .625rem .75rem; border-radius: 2px; font-size: .9375rem; color: var(--amber-100); font-family: inherit; outline: none; transition: border-color .2s; min-width: 0; }
.numeric-field:focus { border-color: var(--amber-400); box-shadow: 0 0 6px rgba(245,158,11,0.2); }
.numeric-field:disabled { opacity: .6; cursor: not-allowed; }
.numeric-field::placeholder { color: var(--amber-700); font-size: .75rem; letter-spacing: .05em; }
/* hide number-input spinners on desktop for cleaner look */
.numeric-field::-webkit-outer-spin-button,
.numeric-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.numeric-field { -moz-appearance: textfield; appearance: textfield; }
.numeric-submit { padding: .625rem 1rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; background: var(--amber-600); color: #000; border: none; border-radius: 2px; cursor: pointer; font-family: inherit; transition: background .2s; }
.numeric-submit:hover { background: var(--amber-500); }
.numeric-submit:active { transform: scale(.98); }
.numeric-submit:disabled { opacity: .4; cursor: not-allowed; background: var(--amber-800); }
.option-btn { width: 100%; text-align: left; background: rgba(0,0,0,0.4); border: 1px solid rgba(120,53,15,0.4); padding: .625rem .75rem; border-radius: 2px; font-size: .75rem; color: var(--emerald-300); cursor: pointer; font-family: inherit; transition: all .2s; }
.option-btn:hover { background: rgba(120,53,15,0.3); transform: translateX(2px); }
.option-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.feedback { margin-top: .75rem; font-size: .75rem; font-weight: 700; }
.feedback.success { color: var(--emerald-400); }
.feedback.fail { color: var(--rose-400); }
.feedback.hidden { display: none; }

/* ANSWERED OPTION STATES */
.option-btn.answered { cursor: default; transform: none; opacity: .55; }
.option-btn.answered:hover { background: rgba(0,0,0,0.4); transform: none; }
.option-btn.option-correct { opacity: 1; border-color: var(--emerald-400); background: rgba(16,185,129,0.18); color: var(--emerald-300); box-shadow: 0 0 6px rgba(52,211,153,0.25); }
.option-btn.option-correct:hover { background: rgba(16,185,129,0.18); }
.option-btn.option-wrong { opacity: 1; border-color: var(--rose-400); background: rgba(244,63,94,0.15); color: var(--rose-400); }
.option-btn.option-wrong:hover { background: rgba(244,63,94,0.15); }

/* EXPLANATION PANEL */
.explanation { margin-top: .75rem; padding: .75rem; background: rgba(0,0,0,0.4); border: 1px solid rgba(245,158,11,0.35); border-left: 2px solid var(--amber-400); border-radius: 2px; }
.explanation.hidden { display: none; }
.exp-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-600); margin-bottom: .375rem; }
.exp-body { font-size: .75rem; color: var(--amber-100); line-height: 1.55; }
.exp-formula { margin-top: .5rem; padding: .375rem .5rem; background: rgba(120,53,15,0.25); border-radius: 2px; font-size: .75rem; color: var(--emerald-300); font-weight: 500; }

/* DRILL ACTIONS */
.puzzle-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.puzzle-actions.hidden { display: none; }
.puzzle-action { flex: 1; padding: .625rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; border: 1px solid rgba(180,83,9,0.6); background: transparent; color: var(--amber-300); border-radius: 2px; cursor: pointer; font-family: inherit; transition: all .15s; }
.puzzle-action:hover { background: rgba(120,53,15,0.3); color: var(--amber-200); }
.puzzle-action:active { transform: scale(.98); }
.puzzle-action.primary { background: var(--amber-600); color: #000; border-color: var(--amber-600); }
.puzzle-action.primary:hover { background: var(--amber-500); color: #000; }

/* MESSAGES MODAL */
.msg-panel { border-top-color: var(--emerald-400); }
@media (min-width: 640px) { .msg-panel { border-color: var(--emerald-400); } }
.online-pip { width: .5rem; height: .5rem; border-radius: 50%; background: var(--emerald-400); box-shadow: 0 0 4px var(--emerald-400); }
.messages-list { display: flex; flex-direction: column; gap: 1rem; }
.messages-empty { text-align: center; padding: 2rem 1rem; color: var(--amber-800); font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; }
.message { display: flex; flex-direction: column; gap: .25rem; }
.message-meta { display: flex; gap: .5rem; align-items: baseline; }
.message-sender { font-weight: 700; font-size: .8125rem; color: var(--amber-300); }
.message-time { font-size: .5625rem; color: var(--amber-800); text-transform: uppercase; letter-spacing: .1em; }
.message-unread-pip { width: .35rem; height: .35rem; border-radius: 50%; background: var(--rose-400); display: none; }
.message.unread .message-unread-pip { display: inline-block; }
.message-body { background: rgba(120,53,15,0.15); border-left: 2px solid var(--amber-700); padding: .625rem .75rem; font-size: .8125rem; color: var(--amber-100); line-height: 1.55; border-radius: 0 4px 4px 0; white-space: pre-line; }
.message.unread .message-body { background: rgba(245,158,11,0.12); border-left-color: var(--amber-400); }

/* BUY MODAL — UNDERWRITING QUIZ */
.quiz-step-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-600); margin: 1rem 0 .5rem; }
.quiz-prompt { background: #08070a; border: 1px solid rgba(120,53,15,0.5); border-radius: 3px; padding: .625rem .75rem; font-size: .75rem; color: var(--emerald-300); line-height: 1.55; white-space: pre-line; margin-bottom: .5rem; }
.quiz-prompt > div { padding: .05rem 0; }
.quiz-result { padding: .625rem .75rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; border-radius: 2px; margin: 1rem 0 .5rem; text-align: center; border: 1px solid; }
.quiz-result.pass { color: var(--emerald-400); background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.4); }
.quiz-result.fail { color: var(--rose-400); background: rgba(244,63,94,0.1); border-color: rgba(244,63,94,0.4); }
[data-theme="light"] .quiz-prompt { background: #fdf8e8; color: var(--emerald-700); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .quiz-result.pass { color: var(--emerald-700); background: rgba(16,185,129,0.12); }
[data-theme="light"] .quiz-result.fail { color: var(--rose-500); background: rgba(244,63,94,0.1); }

/* BUY MODAL */
.buy-cash-line { display: flex; justify-content: space-between; padding: .75rem; margin: 1rem 0 .75rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(120,53,15,0.4); border-radius: 2px; font-size: .8125rem; }
.buy-cash-line .detail-label { color: var(--amber-700); font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; }
.buy-cash-line .detail-value { color: var(--amber-200); font-weight: 700; }
.buy-cash-line .detail-value.warn { color: var(--rose-400); }

/* SETTINGS MODAL */
.settings-list { display: flex; flex-direction: column; gap: .625rem; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: .75rem; background: rgba(0,0,0,0.2); border: 1px solid rgba(120,53,15,0.3); border-radius: 2px; }
.settings-row.toggle-row { cursor: pointer; transition: background .2s; }
.settings-row.toggle-row:hover { background: rgba(120,53,15,0.2); }
.settings-meta { display: flex; flex-direction: column; gap: .125rem; }
.settings-label { font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--amber-700); }
.settings-value { font-size: .75rem; color: var(--amber-300); }
.settings-action { display: block; width: 100%; text-align: left; background: rgba(0,0,0,0.4); border: 1px solid rgba(120,53,15,0.5); padding: .75rem; border-radius: 2px; cursor: pointer; font-family: inherit; transition: all .2s; }
.settings-action:hover { background: rgba(120,53,15,0.2); border-color: rgba(245,158,11,0.5); }
.settings-action.danger:hover { background: rgba(244,63,94,0.1); border-color: rgba(244,63,94,0.5); }
.settings-action-label { display: block; font-size: .8125rem; font-weight: 700; color: var(--amber-200); margin-bottom: .25rem; }
.settings-action.danger .settings-action-label { color: var(--rose-400); }
.settings-action-hint { display: block; font-size: .625rem; color: var(--amber-700); text-transform: uppercase; letter-spacing: .1em; }

/* TOGGLE SWITCH */
.toggle { width: 2.25rem; height: 1.25rem; border-radius: 10px; background: rgba(120,53,15,0.4); border: 1px solid rgba(120,53,15,0.6); position: relative; transition: all .2s; }
.toggle-knob { position: absolute; top: 1px; left: 1px; width: 1rem; height: 1rem; border-radius: 50%; background: var(--amber-700); transition: all .2s; }
.toggle.on { background: rgba(52,211,153,0.3); border-color: var(--emerald-400); }
.toggle.on .toggle-knob { left: calc(100% - 1.125rem); background: var(--emerald-400); }

/* CELEBRATION OVERLAY */
.celebration { position: fixed; inset: 0; background: radial-gradient(circle at center, rgba(245,158,11,0.25) 0%, rgba(0,0,0,0.92) 70%); z-index: 70; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); cursor: pointer; }
.celebration.open { display: flex; animation: celebFade .3s; }
.celebration-inner { text-align: center; padding: 2rem; animation: celebPop .55s cubic-bezier(.34,1.56,.64,1); }
.celebration-icon { font-size: 4.5rem; color: var(--emerald-400); margin-bottom: 1.25rem; filter: drop-shadow(0 0 24px var(--emerald-400)); animation: iconGlow 1.4s ease-in-out infinite; line-height: 1; }
.celebration-icon.amber { color: var(--amber-400); filter: drop-shadow(0 0 24px var(--amber-400)); }
.celebration-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .35em; color: var(--amber-500); margin-bottom: .5rem; }
.celebration-title { font-size: 1.5rem; font-weight: 700; color: var(--amber-100); margin-bottom: .25rem; }
.celebration-tag { font-size: .75rem; color: var(--amber-600); }
@keyframes celebPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes celebFade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes iconGlow { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* TOASTS */
.toast { position: fixed; top: 1rem; left: 50%; transform: translate(-50%, -150%); z-index: 60; background: var(--bg-panel); border: 1px solid; border-left-width: 3px; border-radius: 3px; padding: .625rem .875rem; transition: transform .4s cubic-bezier(.34,1.56,.64,1); pointer-events: none; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.6); max-width: calc(100% - 2rem); width: max-content; }
.toast.show { transform: translate(-50%, 0); pointer-events: auto; }
.toast-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }

.msg-toast { border-color: var(--emerald-400); }
.msg-toast-sender { font-size: .8125rem; font-weight: 700; color: var(--amber-300); }
.msg-toast-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--emerald-400); }
.msg-toast-preview { font-size: .75rem; color: var(--amber-100); white-space: pre-line; max-width: 22rem; line-height: 1.4; }

.ach-toast { border-color: var(--amber-400); }
.ach-toast-icon { color: var(--amber-400); font-size: 1rem; }
.ach-toast-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-500); }
.ach-toast-name { font-size: .9375rem; font-weight: 700; color: var(--amber-100); }

/* TAB NAV */
.tab-nav { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(14,12,10,0.95); backdrop-filter: blur(10px); border-top: 1px solid rgba(180,83,9,0.4); z-index: 20; }
.tab-nav-inner { max-width: 28rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.tab-btn { background: transparent; border: none; padding: .75rem .5rem .85rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--amber-800); cursor: pointer; font-family: inherit; border-top: 2px solid transparent; transition: all .15s; }
.tab-btn:hover { color: var(--amber-500); }
.tab-btn.active { color: var(--amber-300); border-top-color: var(--amber-500); background: rgba(245,158,11,0.05); }
.tab-btn-icon { width: 1.25rem; height: 1.25rem; }
.tab-btn-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; }

/* RE SUB-TABS */
.re-subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(120,53,15,0.4); border-bottom: 1px solid rgba(120,53,15,0.4); }
.re-subtab { background: var(--bg); border: none; padding: .75rem .5rem; font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--amber-700); cursor: pointer; font-family: inherit; font-weight: 700; transition: all .15s; }
.re-subtab:hover { color: var(--amber-400); }
.re-subtab.active { color: var(--amber-200); background: rgba(245,158,11,0.08); }

/* REAL ESTATE TAB */
.re-meta { padding: 1rem; border-bottom: 1px solid rgba(120,53,15,0.4); display: flex; justify-content: space-between; align-items: center; }
.re-view-toggle { display: flex; gap: .375rem; padding: .625rem 1rem; }
.re-view-btn { flex: 1; padding: .375rem .5rem; font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--amber-700); background: transparent; border: 1px solid rgba(120,53,15,0.5); border-radius: 2px; cursor: pointer; font-family: inherit; font-weight: 700; transition: all .15s; }
.re-view-btn:hover { color: var(--amber-300); background: rgba(120,53,15,0.2); }
.re-view-btn.active { color: var(--amber-200); border-color: var(--amber-500); background: rgba(245,158,11,0.1); box-shadow: 0 0 8px rgba(245,158,11,0.15) inset; }
.pipeline-map-viz { padding: 0 1rem 1rem; }
.pipeline-map-viz.hidden { display: none; }
.pipeline-map-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.pipeline-map-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--emerald-300); }
.pipeline-map-legend { display: flex; gap: .5rem; }
.pipeline-map-key-row { display: inline-flex; align-items: center; gap: .25rem; font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-300); }
.pipeline-map-key-dot { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; }
#pipeline-map-canvas { display: block; width: 100%; height: auto; border-radius: 3px; background: #15110b; border: 1px solid rgba(180,83,9,0.4); cursor: pointer; touch-action: pan-y; }
.pipeline-map-focus { margin-top: .5rem; padding: .5rem .625rem; border: 1px dashed rgba(180,83,9,0.45); border-radius: 2px; background: rgba(120,53,15,0.1); min-height: 1.75rem; transition: border-color .2s, background .2s; }
.pipeline-map-focus.active { border-color: var(--amber-400); border-style: solid; background: rgba(245,158,11,0.08); }
.pipeline-map-focus[data-stage="owned"].active { border-color: var(--emerald-400); background: rgba(16,185,129,0.08); }
.pipeline-map-focus[data-stage="passed"].active { border-color: var(--amber-800); background: rgba(120,53,15,0.15); }
.pipeline-map-focus-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-700); }
.pipeline-map-focus.active .pipeline-map-focus-label { color: var(--amber-400); }
.pipeline-map-focus[data-stage="owned"].active .pipeline-map-focus-label { color: var(--emerald-400); }
.pipeline-map-focus-body { font-size: .6875rem; color: var(--amber-200); line-height: 1.55; margin-top: .35rem; }
.pipeline-map-focus-body:empty { display: none; }
.pipeline-map-focus-row { display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; }
.pipeline-map-focus-row + .pipeline-map-focus-row { margin-top: .25rem; color: var(--amber-100); }
.pipeline-map-focus-row strong { color: var(--amber-300); font-weight: 700; }
.pipeline-map-focus-row em { color: var(--amber-500); font-style: normal; font-size: .625rem; letter-spacing: .04em; }
.pipeline-map-focus-sep { color: var(--amber-700); }
[data-theme="light"] .re-view-btn { color: var(--amber-700); border-color: rgba(180,83,9,0.4); }
[data-theme="light"] .re-view-btn.active { color: var(--amber-900); border-color: var(--amber-600); background: rgba(245,158,11,0.18); }
[data-theme="light"] .pipeline-map-focus { background: rgba(254,243,199,0.5); border-color: rgba(180,83,9,0.4); }
[data-theme="light"] .pipeline-map-focus-body { color: var(--amber-900); }
[data-theme="light"] .pipeline-map-focus-row + .pipeline-map-focus-row { color: var(--amber-800); }
.re-meta-left { display: flex; flex-direction: column; gap: .125rem; }
.re-count { font-weight: 700; font-size: 1rem; color: var(--amber-300); }
.scraper-hint { font-size: .625rem; color: var(--amber-700); text-transform: uppercase; letter-spacing: .1em; }
.scraper-hint.active { color: var(--emerald-500); }
.market-pulse { display: flex; align-items: center; gap: .375rem; }
.pulse-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--amber-400); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.listings { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; }
.listing { border: 1px solid rgba(120,53,15,0.4); background: linear-gradient(180deg, var(--bg-panel-hi) 0%, var(--bg-panel) 100%); border-radius: 3px; overflow: hidden; transition: border-color .2s, background .2s, box-shadow .2s; box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,220,160,0.04); }
.listing:hover { border-color: rgba(245,158,11,0.4); box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,220,160,0.06); }
.listing-head { padding: .75rem; cursor: pointer; }
.listing-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .25rem; }
.listing-tag { font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--amber-500); }
.listing-expand-hint { font-size: .625rem; color: var(--amber-800); }
.phase-info { background: transparent; border: 1px solid rgba(120,53,15,0.5); color: var(--amber-500); font-family: inherit; font-size: .5625rem; font-weight: 700; padding: 0 .375rem; height: 1rem; border-radius: 2px; cursor: pointer; margin-left: .25rem; vertical-align: middle; line-height: .9rem; transition: all .15s; }
.phase-info:hover { background: rgba(120,53,15,0.2); color: var(--amber-300); }
[data-theme="light"] .phase-info { color: var(--amber-700); border-color: rgba(180,83,9,0.4); }
[data-theme="light"] .phase-info:hover { background: rgba(120,53,15,0.08); color: var(--amber-900); }

/* EXIT button on portfolio cards */
.exit-btn { display: block; width: 100%; margin-top: .75rem; background: transparent; color: var(--emerald-300); border: 1px solid rgba(52,211,153,0.45); font-weight: 700; font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; padding: .5rem; border-radius: 2px; cursor: pointer; font-family: inherit; transition: all .15s; }
.exit-btn:hover { background: rgba(16,185,129,0.12); color: var(--emerald-400); border-color: var(--emerald-400); }
.exit-btn:active { transform: scale(.98); }
[data-theme="light"] .exit-btn { color: var(--emerald-700); border-color: rgba(16,185,129,0.45); }
[data-theme="light"] .exit-btn:hover { background: rgba(16,185,129,0.08); color: var(--emerald-600); }
.listing-addr { font-size: .75rem; color: var(--amber-300); margin-bottom: .5rem; }
.listing-price { font-size: 1.125rem; font-weight: 700; color: var(--amber-100); margin-bottom: .75rem; }
.listing-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: rgba(120,53,15,0.4); border: 1px solid rgba(120,53,15,0.4); }
.listing-stat { background: var(--bg); padding: .5rem; }
.listing-stat-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--amber-700); margin-bottom: .125rem; }
.listing-stat-value { font-size: .8125rem; font-weight: 700; color: var(--amber-200); }
.listing-stat-value.good { color: var(--emerald-400); }
.listing-stat-value.warn { color: var(--amber-400); }
.listing-stat-value.bad { color: var(--rose-400); }
.listing-stat-flag { font-size: .5rem; color: var(--rose-400); text-transform: uppercase; letter-spacing: .1em; margin-top: .125rem; display: block; }

.listing-detail { display: none; padding: .75rem; border-top: 1px solid rgba(120,53,15,0.4); background: rgba(0,0,0,0.2); }
.listing.expanded .listing-detail { display: block; }
.detail-row { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .6875rem; }
.detail-label { color: var(--amber-700); text-transform: uppercase; letter-spacing: .1em; }
.detail-value { color: var(--amber-200); }
.detail-sep { border-top: 1px dashed rgba(120,53,15,0.4); margin: .5rem 0; }

.listing-buy-btn { display: block; width: 100%; margin-top: .75rem; background: var(--emerald-500); color: #000; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; padding: .625rem; border: none; border-radius: 2px; cursor: pointer; font-family: inherit; transition: all .2s; }
.listing-buy-btn:hover { background: var(--emerald-400); }
.listing-buy-btn:active { transform: scale(.98); }
.listing-buy-btn:disabled { opacity: .4; cursor: not-allowed; background: var(--amber-800); transform: none; }

.portfolio-empty { text-align: center; padding: 3rem 1rem; color: var(--amber-800); font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; }

/* TAB VISIBILITY */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* NOTICE / CONFIRM MODAL */
.notice-panel { border-top-color: var(--amber-500); }
@media (min-width: 640px) { .notice-panel { border-color: var(--amber-500); } }
.notice-body { font-size: .8125rem; color: var(--amber-100); line-height: 1.55; padding: .25rem 0 1rem; white-space: pre-line; }
.notice-actions { display: flex; gap: .5rem; }
.notice-btn { flex: 1; padding: .625rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; border: 1px solid rgba(180,83,9,0.6); background: transparent; color: var(--amber-300); border-radius: 2px; cursor: pointer; font-family: inherit; transition: all .15s; }
.notice-btn:hover { background: rgba(120,53,15,0.3); color: var(--amber-200); }
.notice-btn:active { transform: scale(.98); }
.notice-btn.primary { background: var(--amber-600); color: #000; border-color: var(--amber-600); }
.notice-btn.primary:hover { background: var(--amber-500); color: #000; }
.notice-btn.danger { color: var(--rose-400); border-color: rgba(244,63,94,0.5); }
.notice-btn.danger:hover { background: rgba(244,63,94,0.15); color: var(--rose-400); }

/* ============================================================ */
/* WELCOME MODAL + NEXT-STEP HINT                               */
/* ============================================================ */
.welcome-modal { z-index: 80; }
.welcome-panel { border-top-color: var(--amber-400); }
@media (min-width: 640px) { .welcome-panel { border-color: var(--amber-400); border-radius: 6px; } }
.welcome-emblem { display: flex; justify-content: center; margin-bottom: .5rem; filter: drop-shadow(0 0 8px rgba(245,158,11,0.3)); }
.welcome-title { text-align: center; font-size: 1.25rem; font-weight: 700; color: var(--amber-200); letter-spacing: .1em; margin-bottom: .25rem; }
.welcome-subtitle { text-align: center; font-size: .6875rem; text-transform: uppercase; letter-spacing: .25em; color: var(--amber-600); margin-bottom: 1.25rem; }
.welcome-mara-row { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .375rem .625rem; background: rgba(16,185,129,0.08); border: 1px solid rgba(52,211,153,0.3); border-radius: 2px; margin-bottom: 1rem; }
.welcome-mara-name { font-size: .8125rem; font-weight: 700; color: var(--emerald-300); }
.welcome-body { font-size: .8125rem; color: var(--amber-100); line-height: 1.65; white-space: pre-line; margin-bottom: 1.25rem; }
.welcome-cta { margin-top: 0; }

.next-step-hint { padding: .5rem 1rem; font-size: .6875rem; color: var(--amber-500); text-align: center; text-transform: uppercase; letter-spacing: .15em; border-bottom: 1px solid rgba(120,53,15,0.3); background: rgba(245,158,11,0.05); }
.next-step-hint:empty { display: none; }

[data-theme="light"] .welcome-title { color: var(--amber-900); }
[data-theme="light"] .welcome-subtitle { color: var(--amber-600); }
[data-theme="light"] .welcome-body { color: var(--amber-900); }
[data-theme="light"] .welcome-mara-row { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.4); }
[data-theme="light"] .welcome-mara-name { color: var(--emerald-700); }
[data-theme="light"] .next-step-hint { color: var(--amber-700); background: rgba(245,158,11,0.08); border-color: rgba(180,83,9,0.25); }

/* ============================================================ */
/* KNOWLEDGE TAB + CARD MODAL                                   */
/* ============================================================ */
.knowledge-section { padding: 0 0 1rem; }
.knowledge-section .section-head { margin-bottom: .5rem; }
.knowledge-list { display: flex; flex-direction: column; gap: .375rem; }
.knowledge-item { display: grid; grid-template-columns: 1.25rem 1fr auto; gap: .625rem; align-items: center; padding: .625rem .75rem; background: rgba(69,26,3,0.08); border: 1px solid rgba(120,53,15,0.35); border-radius: 2px; cursor: pointer; font-family: inherit; text-align: left; transition: all .15s; }
.knowledge-item:hover { background: rgba(120,53,15,0.18); border-color: rgba(245,158,11,0.4); }
.knowledge-item-status { font-size: .875rem; color: var(--amber-800); text-align: center; }
.knowledge-item.seen .knowledge-item-status { color: var(--emerald-400); }
.knowledge-item-title { font-size: .8125rem; font-weight: 700; color: var(--amber-200); }
.knowledge-item-sub { font-size: .5625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--amber-700); }

/* CARD MODAL */
.card-modal { z-index: 60; }
.card-panel { border-top-color: var(--emerald-400); }
@media (min-width: 640px) { .card-panel { border-color: var(--emerald-400); } }
.card-section { margin-bottom: 1rem; }
.card-section.hidden { display: none; }
.card-section-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-600); margin-bottom: .375rem; }
.card-section-body { font-size: .8125rem; color: var(--amber-100); line-height: 1.55; white-space: pre-line; }
.card-formula { padding: .5rem .625rem; background: rgba(120,53,15,0.25); border-radius: 2px; font-size: .8125rem; color: var(--emerald-300); font-weight: 500; }

/* 3D WATERFALL VIZ inside knowledge card */
.card-3d-viz { margin: 0 0 1rem; padding: .625rem; border: 1px solid rgba(180,83,9,0.45); border-radius: 3px; background: linear-gradient(180deg, rgba(14,12,10,0.6) 0%, rgba(26,22,18,0.85) 100%); position: relative; overflow: hidden; }
.card-3d-viz.hidden { display: none; }
.card-3d-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--emerald-300); margin-bottom: .375rem; }
#card-3d-canvas { display: block; width: 100%; height: auto; border-radius: 2px; background: #15110b; cursor: grab; touch-action: none; }
.card-3d-focus { margin-bottom: .5rem; padding: .4rem .5rem; border: 1px dashed rgba(180,83,9,0.45); border-radius: 2px; background: rgba(120,53,15,0.12); min-height: 1.75rem; transition: border-color .2s, background .2s; }
.card-3d-focus.active { border-color: var(--amber-400); border-style: solid; background: rgba(245,158,11,0.10); }
.card-3d-focus-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-700); }
.card-3d-focus.active .card-3d-focus-label { color: var(--amber-400); }
.card-3d-focus-body { font-size: .6875rem; color: var(--amber-200); line-height: 1.5; margin-top: .25rem; }
.card-3d-focus-body:empty { display: none; }
.card-3d-focus-body strong { color: var(--amber-300); font-weight: 700; }
.card-3d-focus-body em { color: var(--amber-700); font-style: normal; font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; margin-left: .375rem; }
.card-3d-focus-body span { display: block; margin-top: .375rem; color: var(--amber-100); }
[data-theme="light"] .card-3d-focus { background: rgba(254,243,199,0.5); border-color: rgba(180,83,9,0.4); }
[data-theme="light"] .card-3d-focus-body { color: var(--amber-900); }
[data-theme="light"] .card-3d-focus-body span { color: var(--amber-800); }
.card-3d-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; margin-top: .5rem; }
.card-3d-legend-row { display: flex; align-items: center; gap: .4rem; font-size: .625rem; color: var(--amber-200); letter-spacing: .04em; cursor: pointer; padding: .2rem .25rem; border-radius: 2px; transition: background .15s; }
.card-3d-legend-row:hover { background: rgba(245,158,11,0.08); }
.card-3d-legend-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #3a2c1a; flex-shrink: 0; transition: background .2s, box-shadow .2s, opacity .2s; opacity: .35; }
.card-3d-legend-txt strong { color: var(--amber-400); font-weight: 700; margin-right: .25rem; }
.card-3d-legend-txt em { color: var(--amber-700); font-style: normal; display: block; font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 480px) { .card-3d-legend { grid-template-columns: 1fr; } }
[data-theme="light"] .card-3d-viz { background: linear-gradient(180deg, rgba(255,251,235,0.6) 0%, rgba(254,243,199,0.6) 100%); border-color: rgba(180,83,9,0.5); }
[data-theme="light"] .card-3d-legend-row { color: var(--amber-900); }

/* REVIEW-CARD LINK FROM EXPLANATION PANEL */
.exp-card-link { display: block; width: 100%; margin-top: .625rem; padding: .5rem .625rem; background: transparent; border: 1px dashed rgba(52,211,153,0.4); border-radius: 2px; font-family: inherit; font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--emerald-400); cursor: pointer; text-align: left; transition: all .2s; }
.exp-card-link:hover { background: rgba(16,185,129,0.08); border-color: var(--emerald-400); }

/* Light theme tweaks for the new surfaces */
[data-theme="light"] .knowledge-item { background: rgba(120,53,15,0.04); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .knowledge-item:hover { background: rgba(120,53,15,0.08); }
[data-theme="light"] .knowledge-item-status { color: var(--amber-500); }
[data-theme="light"] .knowledge-item.seen .knowledge-item-status { color: var(--emerald-600); }
[data-theme="light"] .knowledge-item-title { color: var(--amber-900); }
[data-theme="light"] .knowledge-item-sub { color: var(--amber-700); }
[data-theme="light"] .card-section-body { color: var(--amber-900); }
[data-theme="light"] .card-section-label { color: var(--amber-600); }
[data-theme="light"] .card-formula { background: rgba(245,158,11,0.12); color: var(--emerald-700); }
[data-theme="light"] .exp-card-link { color: var(--emerald-700); border-color: rgba(16,185,129,0.4); }
[data-theme="light"] .exp-card-link:hover { background: rgba(16,185,129,0.1); }

/* ============================================================ */
/* LIGHT THEME — focused overrides (v1, may need polish)        */
/* ============================================================ */
[data-theme="light"] {
  --bg: #f4ecd6;
  --bg-panel: #fbf5e6;
  --bg-panel-hi: #fffdf6;
}
[data-theme="light"] body {
  color: var(--amber-900);
  background-image:
    radial-gradient(120% 60% at 50% -8%, rgba(192,103,61,0.10) 0%, transparent 60%),
    radial-gradient(100% 50% at 50% 108%, rgba(95,151,186,0.08) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,53,15,0.04) 0, rgba(120,53,15,0.04) 1px, transparent 1px, transparent 3px);
  background-attachment: fixed;
}
[data-theme="light"] .listing, [data-theme="light"] .module { box-shadow: 0 1px 3px rgba(120,53,15,0.12), inset 0 1px 0 rgba(255,255,255,0.5); }

/* labels + muted */
[data-theme="light"] .label-tiny { color: var(--amber-700); }
[data-theme="light"] .label-cash { color: var(--amber-800); }
[data-theme="light"] .scraper-hint { color: var(--amber-700); }
[data-theme="light"] .scraper-hint.active { color: var(--emerald-600); }

/* header */
[data-theme="light"] .header { border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .section-head h2 { color: var(--amber-700); }
[data-theme="light"] .section-head-arrow { color: var(--amber-600); }
[data-theme="light"] .footer-note { color: var(--amber-400); }
[data-theme="light"] .btn-ghost { color: var(--amber-900); border-color: rgba(180,83,9,0.4); }
[data-theme="light"] .btn-ghost:hover { background: rgba(120,53,15,0.08); }
[data-theme="light"] .icon-btn { color: var(--amber-800); border-color: rgba(180,83,9,0.4); }
[data-theme="light"] .icon-btn:hover { color: var(--amber-700); background: rgba(120,53,15,0.08); }
[data-theme="light"] .msg-btn { color: var(--amber-900); border-color: rgba(180,83,9,0.4); }
[data-theme="light"] .msg-btn:hover { background: rgba(120,53,15,0.08); color: var(--amber-700); }

/* ticker */
[data-theme="light"] .ticker { background: rgba(120,53,15,0.05); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .ticker::before { color: var(--amber-700); border-color: rgba(180,83,9,0.3); background: var(--bg); }
[data-theme="light"] .ticker-item { color: var(--amber-800); }
[data-theme="light"] .ticker-bullet { color: var(--amber-400); }

/* status strip */
[data-theme="light"] .status { border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .status-value { color: var(--amber-900); }
[data-theme="light"] .status-value.healthy { color: var(--emerald-600); }
[data-theme="light"] .status-value.degraded { color: var(--amber-700); }
[data-theme="light"] .status-sub { color: var(--amber-600); }
[data-theme="light"] .rack-unit { background: rgba(120,53,15,0.15); }

/* modules */
[data-theme="light"] .module { background: rgba(120,53,15,0.04); }
[data-theme="light"] .module.active { border-color: rgba(16,185,129,0.4); }
[data-theme="light"] .module.building { border-color: rgba(245,158,11,0.5); }
[data-theme="light"] .module.locked { border-color: rgba(120,53,15,0.25); }
[data-theme="light"] .module-name { color: var(--amber-900); }
[data-theme="light"] .module-effect { color: var(--amber-700); }
[data-theme="light"] .module-progress-meta { color: var(--amber-700); }
[data-theme="light"] .module-pill.active { color: var(--emerald-600); }
[data-theme="light"] .module-pill.locked { color: var(--amber-500); }
[data-theme="light"] .module-status-note.earning { color: var(--emerald-600); }
[data-theme="light"] .module-status-note.locked { color: var(--amber-500); }
[data-theme="light"] .bar { background: rgba(120,53,15,0.15); }

/* listings + portfolio */
[data-theme="light"] .listing { background: rgba(120,53,15,0.03); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .listing:hover { border-color: rgba(245,158,11,0.5); background: rgba(120,53,15,0.06); }
[data-theme="light"] .listing-tag { color: var(--amber-700); }
[data-theme="light"] .listing-expand-hint { color: var(--amber-500); }
[data-theme="light"] .listing-addr { color: var(--amber-800); }
[data-theme="light"] .listing-price { color: var(--amber-900); }
[data-theme="light"] .listing-stats { background: rgba(180,83,9,0.3); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .listing-stat { background: var(--bg); }
[data-theme="light"] .listing-stat-label { color: var(--amber-700); }
[data-theme="light"] .listing-stat-value { color: var(--amber-900); }
[data-theme="light"] .listing-detail { background: rgba(245,158,11,0.05); border-top-color: rgba(180,83,9,0.3); }
[data-theme="light"] .detail-label { color: var(--amber-700); }
[data-theme="light"] .detail-value { color: var(--amber-900); }
[data-theme="light"] .detail-sep { border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .portfolio-empty { color: var(--amber-500); }

/* tab nav */
[data-theme="light"] .tab-nav { background: rgba(250,243,223,0.95); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .tab-btn { color: var(--amber-500); }
[data-theme="light"] .tab-btn:hover { color: var(--amber-700); }
[data-theme="light"] .tab-btn.active { color: var(--amber-800); background: rgba(245,158,11,0.1); border-top-color: var(--amber-600); }
[data-theme="light"] .re-subtab { background: var(--bg); color: var(--amber-700); }
[data-theme="light"] .re-subtab:hover { color: var(--amber-800); }
[data-theme="light"] .re-subtab.active { color: var(--amber-900); background: rgba(245,158,11,0.12); }
[data-theme="light"] .re-subtabs { background: rgba(180,83,9,0.3); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .re-meta { border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .re-count { color: var(--amber-900); }

/* modal text */
[data-theme="light"] .modal { background: rgba(0,0,0,0.4); }
[data-theme="light"] .modal-panel { border-top-color: rgba(180,83,9,0.4); }
@media (min-width: 640px) {
  [data-theme="light"] .modal-panel { border-color: rgba(180,83,9,0.4); }
}
[data-theme="light"] .modal-title { color: var(--amber-800); }
[data-theme="light"] .modal-close { color: var(--amber-600); }
[data-theme="light"] .modal-close:hover { color: var(--amber-800); }

/* code editor */
[data-theme="light"] .code-editor { background: #fdf8e8; border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .code-tab { background: rgba(245,158,11,0.1); color: var(--amber-700); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .code-gutter { color: var(--amber-400); border-color: rgba(180,83,9,0.25); }
[data-theme="light"] .code-content { color: var(--emerald-700); }
[data-theme="light"] .code-blank { background: rgba(245,158,11,0.22); color: var(--amber-800); border-bottom-color: var(--amber-600); }
[data-theme="light"] .comment { color: var(--amber-600); }

/* options + numeric */
[data-theme="light"] .option-btn { background: rgba(255,255,255,0.5); color: var(--amber-900); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .option-btn:hover { background: rgba(120,53,15,0.08); }
[data-theme="light"] .option-btn.answered:hover { background: rgba(255,255,255,0.5); }
[data-theme="light"] .option-btn.option-correct { background: rgba(16,185,129,0.15); color: var(--emerald-700); border-color: var(--emerald-500); }
[data-theme="light"] .option-btn.option-wrong { background: rgba(244,63,94,0.1); color: var(--rose-500); border-color: var(--rose-400); }
[data-theme="light"] .numeric-field { background: rgba(255,255,255,0.6); color: var(--amber-900); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .numeric-field:focus { border-color: var(--amber-600); box-shadow: 0 0 6px rgba(245,158,11,0.3); }
[data-theme="light"] .numeric-field::placeholder { color: var(--amber-500); }

/* explanation */
[data-theme="light"] .explanation { background: rgba(255,255,255,0.4); border-color: rgba(245,158,11,0.4); border-left-color: var(--amber-500); }
[data-theme="light"] .exp-label { color: var(--amber-600); }
[data-theme="light"] .exp-body { color: var(--amber-900); }
[data-theme="light"] .exp-formula { background: rgba(245,158,11,0.12); color: var(--emerald-700); }

/* feedback + drill actions */
[data-theme="light"] .feedback.success { color: var(--emerald-600); }
[data-theme="light"] .feedback.fail { color: var(--rose-500); }
[data-theme="light"] .puzzle-action { color: var(--amber-800); border-color: rgba(180,83,9,0.4); }
[data-theme="light"] .puzzle-action:hover { background: rgba(120,53,15,0.08); color: var(--amber-700); }

/* notice modal */
[data-theme="light"] .notice-body { color: var(--amber-900); }
[data-theme="light"] .notice-btn { color: var(--amber-800); border-color: rgba(180,83,9,0.4); }
[data-theme="light"] .notice-btn:hover { background: rgba(120,53,15,0.08); color: var(--amber-700); }

/* settings */
[data-theme="light"] .settings-row { background: rgba(120,53,15,0.04); border-color: rgba(180,83,9,0.25); }
[data-theme="light"] .settings-row.toggle-row:hover { background: rgba(120,53,15,0.08); }
[data-theme="light"] .settings-label { color: var(--amber-700); }
[data-theme="light"] .settings-value { color: var(--amber-800); }
[data-theme="light"] .settings-action { background: rgba(255,255,255,0.4); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .settings-action:hover { background: rgba(120,53,15,0.06); border-color: rgba(245,158,11,0.5); }
[data-theme="light"] .settings-action-label { color: var(--amber-800); }
[data-theme="light"] .settings-action-hint { color: var(--amber-600); }
[data-theme="light"] .toggle { background: rgba(120,53,15,0.15); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .toggle-knob { background: var(--amber-700); }
[data-theme="light"] .toggle.on { background: rgba(52,211,153,0.25); border-color: var(--emerald-500); }
[data-theme="light"] .toggle.on .toggle-knob { background: var(--emerald-600); }

/* messages */
[data-theme="light"] .messages-empty { color: var(--amber-500); }
[data-theme="light"] .message-sender { color: var(--amber-800); }
[data-theme="light"] .message-time { color: var(--amber-500); }
[data-theme="light"] .message-body { background: rgba(245,158,11,0.1); color: var(--amber-900); border-left-color: var(--amber-600); }
[data-theme="light"] .message.unread .message-body { background: rgba(245,158,11,0.18); border-left-color: var(--amber-500); }

/* toasts */
[data-theme="light"] .toast { background: var(--bg-panel); box-shadow: 0 4px 16px rgba(120,53,15,0.18); }
[data-theme="light"] .msg-toast-sender { color: var(--amber-800); }
[data-theme="light"] .msg-toast-preview { color: var(--amber-900); }
[data-theme="light"] .ach-toast-name { color: var(--amber-900); }

/* buy modal */
[data-theme="light"] .buy-cash-line { background: rgba(245,158,11,0.05); border-color: rgba(180,83,9,0.3); }
[data-theme="light"] .buy-cash-line .detail-value { color: var(--amber-900); }

/* difficulty badges in puzzle modal */
[data-theme="light"] .diff-badge.rookie { background: rgba(16,185,129,0.15); color: var(--emerald-700); }
[data-theme="light"] .diff-badge.pro { background: rgba(245,158,11,0.18); color: var(--amber-800); }
[data-theme="light"] .diff-badge.expert { background: rgba(244,63,94,0.15); color: var(--rose-500); }

/* celebration */
[data-theme="light"] .celebration { background: radial-gradient(circle at center, rgba(245,158,11,0.2) 0%, rgba(250,243,223,0.95) 70%); }
[data-theme="light"] .celebration-title { color: var(--amber-900); }
[data-theme="light"] .celebration-tag { color: var(--amber-700); }

/* ===== WALKTHROUGH 3D (Scene 3 - property site visit) ===== */
.listing-walk-btn { display: block; width: 100%; margin-top: .75rem; background: transparent; color: var(--amber-300); font-weight: 700; font-size: .6875rem; text-transform: uppercase; letter-spacing: .15em; padding: .55rem; border: 1px solid rgba(180,83,9,0.7); border-radius: 2px; cursor: pointer; font-family: inherit; transition: all .2s; }
.listing-walk-btn:hover { background: rgba(120,53,15,0.3); color: var(--amber-100); border-color: var(--amber-500); }
.listing-walk-btn:active { transform: scale(.98); }
.listing-toured-chip { font-size: .5rem; font-weight: 700; letter-spacing: .15em; color: var(--emerald-300); border: 1px solid rgba(16,185,129,0.5); border-radius: 2px; padding: .1rem .3rem; margin-left: .4rem; }

/* ===== LISTING CARD ART (Phase 2 - give every deal a face) ===== */
.listing-art { position: relative; margin: -.05rem -.05rem .55rem; border-radius: 3px 3px 0 0; overflow: hidden; line-height: 0; box-shadow: inset 0 -1px 0 rgba(180,83,9,0.35); }
.listing-art-svg { display: block; width: 100%; height: 96px; }
.listing-map-chip { position: absolute; top: .4rem; right: .4rem; width: 40px; height: 40px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.listing-art-units { position: absolute; bottom: .35rem; left: .45rem; font-size: .5625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff3d6; background: rgba(20,16,10,0.62); padding: .1rem .4rem; border-radius: 2px; line-height: 1.4; }
.listing-art-walked { position: absolute; bottom: .35rem; right: .45rem; font-size: .5625rem; font-weight: 700; letter-spacing: .14em; color: #06210f; background: var(--emerald-400); padding: .12rem .4rem; border-radius: 2px; line-height: 1.4; }
.listing-cond { font-size: .5rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: .05rem 0 .4rem; }
.listing-cond.unwalked { color: var(--amber-600); }
.listing-cond.walked { color: var(--emerald-400); }

body.wt-lock { overflow: hidden; }
.walkthrough-overlay { position: fixed; inset: 0; z-index: 300; background: #15110b; display: none; }
.walkthrough-overlay.open { display: block; }
#walkthrough-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.wt-topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: calc(.6rem + env(safe-area-inset-top)) .75rem .5rem; background: linear-gradient(180deg, rgba(14,12,10,0.92) 0%, rgba(14,12,10,0) 100%); z-index: 5; pointer-events: none; }
.wt-topbar button { pointer-events: auto; }
.wt-progress { display: flex; flex-direction: column; gap: .3rem; }
.wt-progress-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-400); text-shadow: 0 1px 3px #000; }
.wt-dots { display: flex; gap: .3rem; }
.wt-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #3a2c1a; border: 1px solid rgba(180,83,9,0.5); transition: all .3s; }
.wt-dot.now { background: var(--amber-400); box-shadow: 0 0 8px rgba(245,158,11,0.8); }
.wt-dot.done { background: var(--emerald-500); border-color: var(--emerald-500); }
.wt-topbtns { display: flex; gap: .4rem; }
.wt-btn { font-size: .5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; border: 1px solid rgba(180,83,9,0.7); background: rgba(14,12,10,0.75); color: var(--amber-300); padding: .4rem .6rem; border-radius: 2px; cursor: pointer; font-family: inherit; transition: all .2s; }
.wt-btn:hover { background: rgba(120,53,15,0.5); color: var(--amber-100); }
.wt-btn-exit { color: var(--rose-400); border-color: rgba(244,63,94,0.5); }
.wt-btn-exit:hover { background: rgba(244,63,94,0.15); color: #fda4af; }

.wt-keys-hint { position: absolute; top: calc(3.4rem + env(safe-area-inset-top)); left: .75rem; font-size: .5625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--amber-700); z-index: 4; text-shadow: 0 1px 3px #000; pointer-events: none; }

.wt-mara { position: absolute; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); max-width: 34rem; margin: 0 auto; background: rgba(20,16,10,0.88); border: 1px solid rgba(180,83,9,0.55); border-left: 3px solid var(--amber-500); border-radius: 2px; padding: .55rem .75rem; z-index: 6; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.wt-mara.show { opacity: 1; transform: translateY(0); }
.wt-mara.flash { border-left-color: var(--amber-300); }
.wt-mara-name { font-size: .5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-500); display: flex; align-items: center; gap: .35rem; }
.wt-mara-pip { display: inline-block; width: .35rem; height: .35rem; border-radius: 50%; background: var(--emerald-400); box-shadow: 0 0 5px rgba(52,211,153,0.8); }
.wt-mara-body { font-size: .75rem; line-height: 1.5; color: var(--amber-100); margin-top: .3rem; }

.wt-inspect { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(5.4rem + env(safe-area-inset-bottom)); background: var(--amber-600); color: #000; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; padding: .6rem 1.1rem; border: none; border-radius: 2px; cursor: pointer; font-family: inherit; z-index: 6; display: none; box-shadow: 0 0 18px rgba(245,158,11,0.45); animation: wtPulse 1.6s ease-in-out infinite; }
.wt-inspect.show { display: block; }
.wt-inspect:hover { background: var(--amber-500); }
@keyframes wtPulse { 0%, 100% { box-shadow: 0 0 10px rgba(245,158,11,0.35); } 50% { box-shadow: 0 0 22px rgba(245,158,11,0.65); } }

.wt-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow-y: auto; background: var(--bg-panel); border-top: 2px solid var(--amber-500); padding: 1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); z-index: 10; display: none; max-width: 40rem; margin: 0 auto; }
.wt-card.show { display: block; animation: wtSlideUp .25s ease-out; }
@keyframes wtSlideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.wt-card-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--emerald-300); }
.wt-card-title { font-weight: 700; color: var(--amber-300); font-size: .9375rem; margin: .3rem 0 .6rem; }
.wt-quote { font-size: .75rem; line-height: 1.55; color: var(--amber-200); background: rgba(120,53,15,0.16); border-left: 3px solid var(--amber-600); padding: .5rem .65rem; border-radius: 2px; margin-bottom: .75rem; font-style: italic; }
.wt-quote-name { font-style: normal; font-weight: 700; text-transform: uppercase; font-size: .5625rem; letter-spacing: .15em; color: var(--amber-500); margin-right: .25rem; }
.wt-card-sec { margin-bottom: .7rem; }
.wt-card-sec-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-700); margin-bottom: .25rem; }
.wt-card-sec-body { font-size: .75rem; line-height: 1.6; color: var(--amber-100); }
.wt-nums { border: 1px dashed rgba(180,83,9,0.45); border-radius: 2px; padding: .35rem .55rem; background: rgba(0,0,0,0.25); }
.wt-num-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .6875rem; line-height: 1.9; }
.wt-num-row span:first-child { color: var(--amber-600); }
.wt-num-row span:last-child { color: var(--amber-100); text-align: right; }
.wt-cta { display: block; width: 100%; margin-top: .75rem; background: var(--amber-600); color: #000; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; padding: .7rem; border: none; border-radius: 2px; cursor: pointer; font-family: inherit; transition: background .2s; }
.wt-cta:hover { background: var(--amber-500); }
.wt-complete-panel .wt-cta { background: var(--emerald-500); }
.wt-complete-panel .wt-cta:hover { background: var(--emerald-400); }

.wt-joy { position: absolute; left: 1.1rem; bottom: calc(5.6rem + env(safe-area-inset-bottom)); width: 6.5rem; height: 6.5rem; border-radius: 50%; border: 1px solid rgba(180,83,9,0.5); background: rgba(20,16,10,0.4); z-index: 7; touch-action: none; }
.wt-joy-knob { position: absolute; left: 50%; top: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: rgba(245,158,11,0.35); border: 1px solid var(--amber-500); pointer-events: none; }

/* light theme: the 3D scene stays dark by design; keep the walk button readable */
[data-theme="light"] .listing-walk-btn { color: var(--amber-800); border-color: rgba(180,83,9,0.6); }
[data-theme="light"] .listing-walk-btn:hover { background: rgba(245,158,11,0.15); color: var(--amber-900); }

/* ===== CITY BLOCK (walkable hub-world PROTOTYPE) ===== */
.city-launch-btn { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; width: 100%; margin: .25rem 0 .75rem; padding: .7rem .85rem; background: linear-gradient(180deg, rgba(95,151,186,0.18) 0%, rgba(120,53,15,0.12) 100%); color: var(--amber-100); border: 1px solid rgba(95,151,186,0.5); border-radius: 3px; cursor: pointer; font-family: inherit; transition: all .2s; text-align: left; }
.city-launch-btn:hover { border-color: var(--sky); background: linear-gradient(180deg, rgba(95,151,186,0.28) 0%, rgba(120,53,15,0.16) 100%); transform: translateY(-1px); }
.city-launch-title { font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .06em; }
.city-launch-sub { font-size: .5625rem; text-transform: uppercase; letter-spacing: .15em; color: var(--sky); }

#cityblock-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.cb-topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: calc(.6rem + env(safe-area-inset-top)) .75rem .5rem; background: linear-gradient(180deg, rgba(14,12,10,0.55) 0%, rgba(14,12,10,0) 100%); z-index: 5; pointer-events: none; }
.cb-topbar button { pointer-events: auto; }
.cb-title { font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; color: #fff3d6; text-shadow: 0 1px 4px #000; }
.cb-beta { font-family: 'JetBrains Mono', monospace; font-size: .5rem; letter-spacing: .2em; color: #06210f; background: var(--sky); padding: .1rem .35rem; border-radius: 2px; margin-left: .35rem; vertical-align: middle; }
.cb-topbtns { display: flex; gap: .4rem; }
.cb-btn { font-size: .5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; border: 1px solid rgba(180,83,9,0.7); background: rgba(14,12,10,0.7); color: var(--amber-300); padding: .4rem .6rem; border-radius: 2px; cursor: pointer; font-family: 'JetBrains Mono', monospace; transition: all .2s; }
.cb-btn:hover { background: rgba(120,53,15,0.5); color: var(--amber-100); }
.cb-btn-exit { color: var(--rose-400); border-color: rgba(244,63,94,0.5); }
.cb-btn-exit:hover { background: rgba(244,63,94,0.15); color: #fda4af; }

.cb-legend { position: absolute; top: calc(3.1rem + env(safe-area-inset-top)); right: .75rem; display: flex; flex-direction: column; gap: .2rem; z-index: 4; pointer-events: none; }
.cb-legend span { display: flex; align-items: center; gap: .3rem; font-size: .5rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff3d6; text-shadow: 0 1px 3px #000; }
.cb-legend i { width: .5rem; height: .5rem; border-radius: 50%; box-shadow: 0 0 5px currentColor; }

.cb-hint { position: absolute; top: calc(3.1rem + env(safe-area-inset-top)); left: .75rem; font-size: .5625rem; text-transform: uppercase; letter-spacing: .14em; color: var(--amber-200); z-index: 4; text-shadow: 0 1px 3px #000; pointer-events: none; max-width: 55%; line-height: 1.5; }

.cb-mara { position: absolute; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); max-width: 34rem; margin: 0 auto; background: rgba(20,16,10,0.88); border: 1px solid rgba(180,83,9,0.55); border-left: 3px solid var(--sky); border-radius: 2px; padding: .55rem .75rem; z-index: 6; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.cb-mara.show { opacity: 1; transform: translateY(0); }
.cb-mara-name { font-size: .5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--sky); display: flex; align-items: center; gap: .35rem; }
.cb-mara-pip { display: inline-block; width: .35rem; height: .35rem; border-radius: 50%; background: var(--emerald-400); box-shadow: 0 0 5px rgba(52,211,153,0.8); }
.cb-mara-body { font-size: .75rem; line-height: 1.5; color: var(--amber-100); margin-top: .3rem; }

.cb-enter { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(5.4rem + env(safe-area-inset-bottom)); background: var(--amber-600); color: #000; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; padding: .6rem 1.1rem; border: none; border-radius: 2px; cursor: pointer; font-family: 'JetBrains Mono', monospace; z-index: 6; display: none; box-shadow: 0 0 18px rgba(245,158,11,0.45); }
.cb-enter.show { display: block; }
.cb-enter:hover { background: var(--amber-500); }

.cb-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 70vh; overflow-y: auto; background: var(--bg-panel); border-top: 2px solid var(--sky); padding: 1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); z-index: 10; display: none; max-width: 40rem; margin: 0 auto; }
.cb-panel.show { display: block; animation: wtSlideUp .25s ease-out; }
.cb-panel-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--sky); }
.cb-panel-label[data-kind="listing"] { color: var(--amber-500); }
.cb-panel-label[data-kind="owned"] { color: var(--emerald-400); }
.cb-panel-title { font-family: var(--display); font-weight: 700; color: var(--amber-200); font-size: 1.05rem; margin: .3rem 0 .15rem; letter-spacing: .04em; }
.cb-panel-sub { font-size: .75rem; color: var(--amber-400); margin-bottom: .6rem; }
.cb-panel-nums { border: 1px dashed rgba(180,83,9,0.45); border-radius: 2px; padding: .35rem .55rem; background: rgba(0,0,0,0.25); margin-bottom: .75rem; }
.cb-panel-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .6875rem; line-height: 1.9; }
.cb-panel-row span:first-child { color: var(--amber-600); text-transform: uppercase; letter-spacing: .1em; font-size: .5625rem; align-self: center; }
.cb-panel-row span:last-child { color: var(--amber-100); font-family: var(--display); }
.cb-panel-btns { display: flex; flex-direction: column; gap: .5rem; }
.cb-cta { display: block; width: 100%; background: var(--amber-600); color: #000; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; padding: .7rem; border: none; border-radius: 2px; cursor: pointer; font-family: 'JetBrains Mono', monospace; transition: background .2s; }
.cb-cta:hover { background: var(--amber-500); }
.cb-cta.ghost { background: transparent; color: var(--amber-300); border: 1px solid rgba(180,83,9,0.6); }
.cb-cta.ghost:hover { background: rgba(120,53,15,0.3); color: var(--amber-100); }

.cb-joy { position: absolute; left: 1.1rem; bottom: calc(5.6rem + env(safe-area-inset-bottom)); width: 6.5rem; height: 6.5rem; border-radius: 50%; border: 1px solid rgba(180,83,9,0.5); background: rgba(20,16,10,0.4); z-index: 7; touch-action: none; }
.cb-joy-knob { position: absolute; left: 50%; top: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: rgba(95,151,186,0.4); border: 1px solid var(--sky); pointer-events: none; }

/* ===== MOUSELOOK affordances (city block + walkthrough) ===== */
#cityblock-canvas, #walkthrough-canvas { cursor: crosshair; }
.cb-crosshair, .wt-crosshair { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgba(255,243,214,0.9); box-shadow: 0 0 5px rgba(0,0,0,0.7); z-index: 6; pointer-events: none; display: none; }
.cb-lockhint, .wt-lockhint { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font-size: .625rem; text-transform: uppercase; letter-spacing: .2em; color: #fff3d6; background: rgba(20,16,10,0.62); padding: .4rem .8rem; border-radius: 2px; z-index: 6; pointer-events: none; text-shadow: 0 1px 3px #000; animation: wtPulse 1.8s ease-in-out infinite; }

/* city-block minimap (wayfinding for the neighborhood) */
.cb-minimap { position: absolute; top: calc(5.6rem + env(safe-area-inset-top)); right: .75rem; width: 200px; height: 168px; border: 1px solid rgba(180,83,9,0.6); border-radius: 4px; background: rgba(20,16,10,0.5); z-index: 6; pointer-events: auto; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.55); }
@media (max-width: 520px) { .cb-minimap { width: 130px; height: 110px; } }
.cb-maphint { position: absolute; top: calc(5.6rem + env(safe-area-inset-top) + 172px); right: .75rem; font-size: .5rem; text-transform: uppercase; letter-spacing: .16em; color: var(--amber-600); z-index: 5; pointer-events: none; text-shadow: 0 1px 3px #000; }
.cb-fwy { position: absolute; top: calc(3.1rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: none; font-size: .625rem; font-weight: 700; letter-spacing: .2em; color: #f4f1e8; background: #1b4d2e; border: 2px solid #e8e4da; border-radius: 3px; padding: .3rem .8rem; z-index: 6; pointer-events: none; font-family: 'JetBrains Mono', monospace; }

/* fridge food menu (house interaction) */
.cb-cta.cb-food { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; background: transparent; color: var(--amber-100); border: 1px solid rgba(180,83,9,0.6); text-transform: none; letter-spacing: .02em; font-family: var(--display); font-size: .85rem; }
.cb-cta.cb-food:hover { background: rgba(120,53,15,0.3); border-color: var(--amber-500); }
.cb-food-sub { font-family: 'JetBrains Mono', monospace; font-size: .5625rem; text-transform: lowercase; letter-spacing: .08em; color: var(--amber-600); }

/* weather chip (monsoon / haboob callout) */
.cb-weatherchip { position: absolute; top: calc(3.1rem + env(safe-area-inset-top)); left: .75rem; display: none; font-size: .625rem; font-weight: 700; letter-spacing: .2em; color: #f1e3c8; background: rgba(120,74,32,0.85); border: 1px solid rgba(240,216,176,0.6); border-radius: 3px; padding: .3rem .8rem; z-index: 6; pointer-events: none; font-family: 'JetBrains Mono', monospace; }

/* full-screen effect layers: lightning flash + shower steam */
.cb-flash { position: absolute; inset: 0; background: #eef3ff; opacity: 0; pointer-events: none; z-index: 8; transition: opacity 70ms linear; }
.cb-steam { position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, rgba(236,240,244,0.75), rgba(236,240,244,0.25) 55%, rgba(236,240,244,0.05)); opacity: 0; pointer-events: none; z-index: 8; transition: opacity 1.4s ease; }

/* photo mode: hide the HUD, keep only the snap bar */
.cb-photobar { position: absolute; bottom: calc(1.2rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: none; gap: .6rem; align-items: center; z-index: 9; }
.cb-photobar .cb-cta { min-width: 7rem; }
.cb-photohint { font-family: 'JetBrains Mono', monospace; font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(253,230,138,0.75); text-shadow: 0 1px 3px #000; }
.cb-photomode .cb-topbar, .cb-photomode .cb-legend, .cb-photomode .cb-hint, .cb-photomode .cb-mara,
.cb-photomode .cb-enter, .cb-photomode .cb-joy, .cb-photomode .cb-crosshair, .cb-photomode .cb-lockhint,
.cb-photomode .cb-minimap, .cb-photomode .cb-maphint, .cb-photomode .cb-fwy, .cb-photomode .cb-weatherchip { display: none !important; }
.cb-photomode .cb-photobar { display: flex; }

/* smart home sync panel inputs */
.cb-input { width: 100%; box-sizing: border-box; margin: .25rem 0; padding: .5rem .6rem; background: rgba(20,16,10,0.7); color: var(--amber-100); border: 1px solid rgba(180,83,9,0.6); border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: .6875rem; }
.cb-input:focus { outline: none; border-color: var(--amber-500); }
.cb-check { display: flex; align-items: center; gap: .5rem; margin: .35rem 0 .1rem; font-family: 'JetBrains Mono', monospace; font-size: .6875rem; letter-spacing: .08em; color: var(--amber-100); cursor: pointer; }

/* time machine bar (real Zillow history scrubber) */
.cb-timebar { position: absolute; bottom: calc(4.6rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .9rem; background: rgba(20,16,10,0.85); border: 1px solid rgba(95,151,186,0.6); border-radius: 4px; z-index: 9; min-width: 20rem; }
.cb-time-year { font-family: var(--display, 'JetBrains Mono'), monospace; font-size: 1.5rem; font-weight: 700; color: #fde68a; letter-spacing: .1em; }
.cb-time-range { width: 100%; accent-color: #5f97ba; cursor: pointer; }
.cb-time-info { font-family: 'JetBrains Mono', monospace; font-size: .6875rem; color: #9fc0d8; letter-spacing: .05em; }
.cb-time-src { font-family: 'JetBrains Mono', monospace; font-size: .5rem; color: var(--amber-600); letter-spacing: .18em; }
.cb-photomode .cb-timebar { display: none !important; }

/* door quiz buttons */
.cb-cta.cb-quiz { background: transparent; color: var(--amber-100); border: 1px solid rgba(95,151,186,0.6); }
.cb-cta.cb-quiz:hover { background: rgba(95,151,186,0.25); border-color: #5f97ba; }

/* REAL market line on the deals tab */
.market-real { font-family: 'JetBrains Mono', monospace; font-size: .5625rem; letter-spacing: .06em; color: #9fc0d8; margin-top: .2rem; }

/* real NV projects case-study list */
.nv-real-head { font-family: 'JetBrains Mono', monospace; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; color: #b48ec4; margin: 1.1rem 0 .5rem; }
.nv-real-sub { font-weight: 400; text-transform: lowercase; letter-spacing: .05em; color: var(--amber-600); font-size: .5625rem; margin-left: .4rem; }
.nv-real-list { display: flex; flex-direction: column; gap: 2px; }
.nv-real-row { display: grid; grid-template-columns: 1.4fr 1fr 1.6fr auto; gap: .6rem; align-items: baseline; padding: .45rem .6rem; background: rgba(138,92,156,0.08); border: 1px solid rgba(138,92,156,0.3); border-radius: 3px; text-decoration: none; transition: all .15s; }
.nv-real-row:hover { background: rgba(138,92,156,0.18); border-color: rgba(138,92,156,0.7); }
.nv-real-name { font-family: var(--display); font-size: .8125rem; color: var(--amber-100); }
.nv-real-loc { font-family: 'JetBrains Mono', monospace; font-size: .5625rem; text-transform: uppercase; letter-spacing: .1em; color: var(--amber-600); }
.nv-real-nums { font-family: 'JetBrains Mono', monospace; font-size: .5625rem; color: #9fc0d8; }
.nv-real-status { font-family: 'JetBrains Mono', monospace; font-size: .5rem; font-weight: 700; letter-spacing: .14em; padding: .15rem .45rem; border-radius: 2px; background: rgba(95,151,186,0.25); color: #9fc0d8; }
.nv-real-status[data-status="sold"] { background: rgba(138,92,156,0.3); color: #d0aede; }
.nv-real-status[data-status="funded"] { background: rgba(16,185,129,0.2); color: #6ee7b7; }
@media (max-width: 720px) { .nv-real-row { grid-template-columns: 1fr auto; } .nv-real-loc, .nv-real-nums { display: none; } }

/* save export/import */
.save-io-row { display: flex; gap: .4rem; }
.save-io-row .city-first-toggle { width: auto; flex: 1; margin-top: 0; }
.save-io-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(10,8,5,0.8); z-index: 300; }
.save-io-modal.show { display: flex; }
.save-io-box { width: min(34rem, 92vw); background: #1a1410; border: 1px solid rgba(180,83,9,0.6); border-radius: 4px; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.save-io-title { font-family: 'JetBrains Mono', monospace; font-size: .75rem; font-weight: 700; letter-spacing: .16em; color: var(--amber-100); }
.save-io-text { width: 100%; height: 9rem; box-sizing: border-box; background: rgba(20,16,10,0.8); color: #9fc0d8; border: 1px solid rgba(180,83,9,0.5); border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: .5625rem; padding: .5rem; resize: none; word-break: break-all; }
.save-io-btns { display: flex; gap: .6rem; }

/* start-in-the-valley toggle under the launch button */
.city-first-toggle { display: block; width: 100%; margin: -0.4rem 0 .75rem; padding: .4rem .85rem; background: transparent; color: var(--amber-600); border: 1px dashed rgba(180,83,9,0.45); border-radius: 3px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: .5625rem; letter-spacing: .16em; text-align: left; transition: all .2s; }
.city-first-toggle:hover { color: var(--amber-100); border-color: var(--amber-500); }