/* ==========================================================================
   Loungely theme — layered on top of Bootstrap 5.
   Two modes: Sunrise (light, default) and Sunset (dark, [data-theme="dark"]).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Sunrise — light mode */
  --bg:        #FBF3E2;
  --surface:   #FFFDF8;
  --tile:      #FFF7E6;
  --border:    #EAD9B4;
  --ink:       #2A1E3D;
  --muted:     #8A6A2E;
  --gold:      #E0A013;
  --gold-text: #B8770A;
  --teal:      #0C9C8B;
  --coral:     #E8434E;
  --pos:       var(--teal);
  --neg:       var(--coral);

  /* Sun ramp (shared, non-inverting) */
  --sun-0: #FFE24D;
  --sun-1: #FFB020;
  --sun-2: #FF7A18;
  --sun-3: #F1590B;

  --font-head: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  /* Sunset — dark mode */
  --bg:        #151022;
  --surface:   #1F1830;
  --tile:      #2A2140;
  --border:    #35304A;
  --ink:       #F4ECDD;
  --muted:     #B7A98A;
  --gold:      #F5B62B;
  --gold-text: #F5B62B;
  --teal:      #12B5A5;
  --coral:     #FF5B6A;
}

/* Trading Console — premium-only retro green-screen mode (users.is_premium,
   see assets/js/theme.js and assets/js/console-theme.js). Same components,
   same variables, just a CRT phosphor palette + a monospace face; nothing
   about the markup changes between modes. */
[data-theme="console"] {
  --bg:        #030F08;
  --surface:   #071C10;
  --tile:      #0B2716;
  --border:    #164226;
  --ink:       #7CFFA8;
  --muted:     #4F9C6C;
  --gold:      #E0A013;
  --gold-text: #E8B23A;
  --teal:      #7CFFA8;
  --coral:     #FF6B5B;
  --font-head: var(--font-mono);
  --font-body: var(--font-mono);
}
[data-theme="console"] body {
  text-shadow: 0 0 1px rgba(124, 255, 168, .35);
}
[data-theme="console"] .l-tile .val, [data-theme="console"] h1, [data-theme="console"] h2 {
  text-shadow: 0 0 8px rgba(124, 255, 168, .55);
}
/* A fixed scanline + vignette overlay reads as "CRT" without touching a
   single existing component's markup. Pointer-events:none keeps it from
   intercepting clicks; the layer sits above content but below the ticker. */
[data-theme="console"] body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background:
    repeating-linear-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
}
/* Both the sun and the moon retreat off-screen in console mode -- .tt-console
   (defined alongside .tt-sun/.tt-moon below) is the only one left visible. */
[data-theme="console"] .tt-sun  { transform: translateY(16px) rotate(60deg); opacity: 0; }
[data-theme="console"] .tt-moon { transform: translateY(15px) rotate(-30deg); opacity: 0; }

/* --- Console ticker tape ----------------------------------------------------- */
body.has-console-ticker { padding-top: 34px; }
.console-ticker {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9500; height: 34px;
  overflow: hidden; background: #050D08; border-bottom: 1px solid var(--border);
}
.console-ticker-track {
  display: flex; width: max-content; height: 100%; align-items: center;
  animation: console-ticker-scroll 10s linear infinite;
}
.console-ticker:hover .console-ticker-track { animation-play-state: paused; }
.console-ticker-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 18px;
  font-family: var(--font-mono); font-size: 13px; white-space: nowrap;
  border-right: 1px solid var(--border);
}
.console-ticker-item .sym { color: var(--ink); font-weight: 600; }
.console-ticker-item .px  { color: var(--muted); }
.console-ticker-item .chg { color: var(--muted); }
.console-ticker-item.up   .chg { color: #7CFFA8; }
.console-ticker-item.down .chg { color: #FF6B5B; }
@keyframes console-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  margin: 0;
  transition: background .25s ease, color .25s ease;
}

h1, h2, h3, h4, .h-font { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.5px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-pos { color: var(--pos) !important; }
.text-neg { color: var(--neg) !important; }
.text-gold { color: var(--gold-text) !important; }
.text-muted-l { color: var(--muted) !important; }

a { color: var(--gold-text); }

/* --- Brand ------------------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand span { font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: -0.5px; }

/* --- Surfaces --------------------------------------------------------------- */
.l-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.l-tile {
  background: var(--tile);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.l-tile .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.l-tile .val { font-family: var(--font-mono); font-size: 24px; font-weight: 500; }
.l-tile .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.lbl-info { font-size: 13px; text-transform: none; letter-spacing: normal; opacity: .55; cursor: help; }
.lbl-info:hover { opacity: 1; color: var(--gold); }

/* Category header over a dashboard KPI section (dashboard.js sections()).
   Deliberately quiet -- a divider label in the same key as .l-tile .lbl, not
   a page heading, so the tile values stay the loudest thing on the screen. */
.dash-section-head { margin: 20px 0 10px; }
.dash-section-head h2 {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}

/* --- Buttons ---------------------------------------------------------------- */
.btn-gold {
  background: var(--gold); color: #2A1E3D; border: none; font-weight: 600;
  font-family: var(--font-head); border-radius: 9px;
}
.btn-gold:hover { filter: brightness(1.06); color: #2A1E3D; }
.btn-outline-l {
  background: transparent; color: var(--ink); border: 1px solid var(--border);
  border-radius: 9px; font-weight: 500;
}
.btn-outline-l:hover { background: var(--tile); color: var(--ink); }

/* --- Theme toggle (animated sunrise / moonrise) ------------------------------ */
.theme-toggle {
  width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background .2s;
}
.theme-toggle:hover { background: var(--tile); }
.theme-toggle .tt { width: 27px; height: 27px; display: block; overflow: visible; }
.tt-sun, .tt-moon, .tt-console {
  transform-box: fill-box; transform-origin: center;
  transition: transform .6s cubic-bezier(.3, 1.3, .5, 1), opacity .35s ease;
}
.tt-sun { fill: var(--gold); transform: translateY(0) rotate(0deg); opacity: 1; }
.tt-rays line { stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; }
.tt-moon { fill: var(--ink); transform: translateY(15px) rotate(-30deg); opacity: 0; }
[data-theme="dark"] .tt-sun { transform: translateY(16px) rotate(60deg); opacity: 0; }
[data-theme="dark"] .tt-moon { transform: translateY(0) rotate(0deg); opacity: 1; }
.tt-horizon { stroke: var(--border); stroke-width: 2; stroke-linecap: round; }

/* Third icon state, premium only: a ">_" terminal prompt. Hidden (dropped
   and rotated, like the moon's resting state) until [data-theme="console"]
   pulls it up level -- see toggleTheme() in theme.js for the rotation this
   animates. */
.tt-console {
  fill: none; stroke: var(--teal, #12B5A5); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transform: translateY(15px) rotate(-30deg); opacity: 0;
}
[data-theme="console"] .tt-console { transform: translateY(0) rotate(0deg); opacity: 1; }

/* --- Badges (transaction categories) --------------------------------------- */
.l-badge { display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 11px; font-weight: 500; font-family: var(--font-head); }
.b-buy  { background: rgba(12,156,139,.15); color: var(--teal); }
.b-sell { background: rgba(232,67,78,.15);  color: var(--coral); }
.b-opt  { background: rgba(224,160,19,.18); color: var(--gold-text); }
.b-div  { background: rgba(12,156,139,.15); color: var(--teal); }
.b-asn  { background: rgba(42,30,61,.10);   color: var(--ink); }
[data-theme="dark"] .b-asn { background: rgba(244,236,221,.12); }

/* --- Status pills ----------------------------------------------------------- */
.pill { display: inline-block; font-size: 11px; padding: 3px 11px; border-radius: 12px; font-weight: 500; }
.pill-collect { background: rgba(12,156,139,.16); color: var(--teal); }
.pill-warn    { background: rgba(232,67,78,.16);  color: var(--coral); }
.pill-done    { background: rgba(224,160,19,.18); color: var(--gold-text); }

/* --- Tables ----------------------------------------------------------------- */
.l-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.l-table th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
.l-table td { padding: 8px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.l-table tr:last-child td { border-bottom: none; }
.l-table th.txn-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.l-table th.txn-sortable:hover { color: var(--ink); }
.l-table th .sort-ind { display: inline-block; width: 8px; font-size: 9px; color: var(--gold-text); }

/* --- Forms ------------------------------------------------------------------ */
.l-input, .l-select {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px; color: var(--ink);
  font-family: var(--font-body); font-size: 14px; outline: none;
}
.l-input:focus, .l-select:focus { border-color: var(--gold); }
.l-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: block; }

/* --- Hero (landing) --------------------------------------------------------- */
.hero-sun {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }

/* Screenshot frame on the landing page */
.shot {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px; overflow: hidden;
}
.shot-bar { display: flex; gap: 6px; margin-bottom: 12px; }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); display: inline-block; }

.feature-ico {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 22px;
  background: var(--tile); color: var(--gold-text); margin-bottom: 12px;
}

.footer-l { color: var(--muted); font-size: 13px; }

/* --- Setup wizard + persona dashboard --------------------------------------- */
/* Selectable option card. `.is-on` is the chosen state, driven by setup.js. */
.l-choice {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  width: 100%; padding: 16px; gap: 2px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  color: var(--ink); transition: border-color .15s, background .15s, transform .1s;
}
.l-choice:hover { border-color: var(--gold); background: var(--tile); }
.l-choice:active { transform: translateY(1px); }
.l-choice.is-on { border-color: var(--gold); background: var(--tile); box-shadow: inset 0 0 0 1px var(--gold); }
.l-choice-row { flex-direction: column; padding: 13px 15px; }
.l-choice-title { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.l-choice-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.l-choice-ico {
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px;
  background: var(--tile); color: var(--gold-text); margin-bottom: 8px;
}
.l-choice.is-on .l-choice-ico { background: var(--surface); }

/* --- Settings page: grouped sections ---------------------------------------- */
.settings-section { margin-bottom: 34px; }
.settings-section:last-child { margin-bottom: 0; }
.settings-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.settings-section-head h2 { font-size: 17px; margin: 0; }
.settings-section-head p { font-size: 13px; color: var(--muted); margin: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings-grid.settings-grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 440px)); }
.settings-grid > .span-2 { grid-column: 1 / -1; }
@media (max-width: 760px) { .settings-grid { grid-template-columns: 1fr; } }

/* Wizard progress */
.l-steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
.l-step { width: 26px; height: 4px; border-radius: 2px; background: var(--border); transition: background .2s; }
.l-step.is-on { background: var(--gold); }
.setup-count { text-align: center; font-size: 12px; color: var(--muted); }

/* Dashboard panel whose feature is not built yet */
.l-soon { border-style: dashed; }
.l-soon .pill { background: var(--tile); color: var(--muted); }

/* Nav tabs (Dashboard / Journal) */
.l-tab {
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  color: var(--muted); font-family: var(--font-head); font-weight: 500;
  font-size: 14px; padding: 5px 13px; cursor: pointer;
}
.l-tab:hover { color: var(--ink); background: var(--tile); }
.l-tab.is-on { color: var(--ink); background: var(--tile); border-color: var(--border); }

/* --- Import dropzone --------------------------------------------------------- */
.l-drop {
  border: 2px dashed var(--border); border-radius: 14px; background: var(--tile);
  padding: 30px 20px; text-align: center; transition: border-color .15s, background .15s;
}
.l-drop.is-over { border-color: var(--gold); background: var(--surface); }

/* --- Import: brokerage picker ------------------------------------------------ */
/* Search field with the icon inside it. Padding on the input, not a wrapper
   border, so it keeps .l-input's focus ring rather than growing a second one. */
.l-search { position: relative; }
.l-search i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 16px; pointer-events: none;
}
.l-search .l-input { padding-left: 34px; }
.l-search .l-input::-webkit-search-cancel-button { cursor: pointer; }

/* One brokerage. A button and a plain div share it: .l-broker-none is the
   "not mapped yet" tile, which looks like the others but does nothing. */
.l-broker {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  width: 100%; height: 100%; padding: 14px; gap: 2px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  color: var(--ink); transition: border-color .15s, background .15s, transform .1s;
}
.l-broker:hover { border-color: var(--gold); background: var(--tile); }
.l-broker:active { transform: translateY(1px); }
.l-broker-name { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.l-broker-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.l-broker-mark {
  width: 34px; height: 34px; border-radius: 9px; display: inline-flex; flex: 0 0 auto;
  align-items: center; justify-content: center; margin-bottom: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 17px; color: #fff;
}
.l-broker-none { border-style: dashed; cursor: default; }
.l-broker-none:hover { border-color: var(--border); background: var(--surface); }

/* --- Import: declared column mapping and privacy note ------------------------ */
.l-map td { font-size: 12.5px; vertical-align: top; }
.l-map td:first-child { width: 40%; }
/* The second column is prose, not a figure, so it opts out of .l-table's mono. */
.l-map td:last-child { font-family: inherit; }
.l-map-list { font-size: 12.5px; line-height: 1.55; margin: 0; padding-left: 18px; }
.l-map-list li { margin-bottom: 5px; }
.l-steps-list { font-size: 13px; line-height: 1.6; margin: 0; padding-left: 20px; color: var(--muted); }

.l-privacy {
  border: 1px solid var(--border); border-left: 3px solid var(--teal);
  border-radius: 12px; background: var(--surface); padding: 13px 15px;
}

/* --- Dashboard account switcher ----------------------------------------------
   A horizontally-scrolling pill row rather than a wrapping one, so the active
   account never moves when the list is long. The native scrollbar is hidden
   (scrollbar-width/-webkit-scrollbar) because .l-pillrow-arrow is the intended
   way to move it -- scrolling by touch/trackpad still works, it just has no
   visible track. */
.l-pillrow-wrap { display: flex; align-items: center; gap: 6px; }
.l-pillrow {
  display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; flex: 1 1 auto; min-width: 0;
}
.l-pillrow::-webkit-scrollbar { display: none; height: 0; }
.l-pillrow-arrow {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--tile); color: var(--muted); display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 13px; padding: 0;
}
.l-pillrow-arrow:hover { color: var(--ink); }
.pill-acct { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; border: none; }

/* One account's brokerage, as a monogram -- not a downloaded logo, same reason
   as .l-broker-mark: no image request, nothing else's trademark to reproduce.
   A brokerage import.js already knows (Brokers.LIST) reuses its brand color;
   anything else is colored from a hash of its own name, so two banks the app
   has never heard of still render as two different colors. */
.acct-mark {
  width: 16px; height: 16px; border-radius: 50%; display: inline-flex; flex: 0 0 auto;
  align-items: center; justify-content: center; font-family: var(--font-head);
  font-weight: 700; font-size: 9px; color: #fff; line-height: 1;
}

/* --- Dashboard greeting banner ---------------------------------------------
   The banner behind the "Good morning/afternoon/..." headline is one of four
   supplied illustrations, picked by [data-tod] (the same
   morning|day|evening|night timeBucket() the welcome lines use):

     morning -> assets/img/sunrise.jpg     evening -> assets/img/sunset.jpg
     day     -> assets/img/daytime.jpg     night   -> assets/img/night.jpg

   Only the matching one is ever fetched, because each url() sits behind its own
   [data-tod] selector -- the browser never downloads a background it will not
   paint. They live in assets/img/, which the deploy already rsyncs wholesale,
   so no workflow change was needed to ship them.

   FITTING. The files are 16:9; this banner is nearer 6:1. `cover` would crop
   away most of the artwork's height -- at full dashboard width only about a
   quarter survives, which loses the chair. So the illustration is carried on
   .l-greet::before, which is pinned to the right edge and given the file's own
   `aspect-ratio`, making it exactly as wide as a height-fitted copy: the whole
   picture, uncropped, at the right of the banner.

   The rest of the banner is --greet-base, sampled from that same file's flat
   left edge, and ::before's left quarter is MASKED to transparent so the
   illustration dissolves into that colour instead of ending on a line. The
   mask is what makes the join invisible; a flat fill alone leaves a visible
   seam wherever a file's left edge is a gradient rather than a solid (which
   sunset.jpg's is). Because the mask is a percentage of the image's own box,
   it holds at every banner size.

   COLOUR. Each illustration brings its own sky, and night.jpg is dark where the
   other three are cream. So the banner sets its OWN text colours per
   [data-tod] instead of inheriting --ink/--muted, and keeps them in both app
   themes: the artwork decides the contrast here, not Sunrise/Sunset. The
   controls are banner-scoped (.l-greet__pill / __change / __cta) for the same
   reason -- the global .pill-done gold reads fine on cream and vanishes on
   indigo. Trading Console drops the illustration and falls back to a plain
   themed card. */
.l-greet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 22px 24px;
  min-height: 230px;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--greet-base);
  color: var(--greet-ink);
}
/* Exactly as wide as the height-fitted illustration, pinned right, with its
   own left edge faded out into --greet-base. */
.l-greet::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  aspect-ratio: 1280 / 720;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}

/* --greet-base is sampled from each file's own flat left edge. */
.l-greet[data-tod="morning"] {
  --greet-base: #FDEFD4;
  --greet-ink: #3A2A18;
  --greet-muted: #7A5A33;
}
.l-greet[data-tod="morning"]::before { background-image: url('../img/sunrise.jpg'); }

.l-greet[data-tod="day"] {
  --greet-base: #FDF1DA;
  --greet-ink: #33291B;
  --greet-muted: #6F5A38;
}
.l-greet[data-tod="day"]::before { background-image: url('../img/daytime.jpg'); }

.l-greet[data-tod="evening"] {
  --greet-base: #FBF4E4;
  --greet-ink: #3E2620;
  --greet-muted: #855144;
}
.l-greet[data-tod="evening"]::before { background-image: url('../img/sunset.jpg'); }

.l-greet[data-tod="night"] {
  --greet-base: #190D3D;
  --greet-ink: #F2EEFF;
  --greet-muted: #B3AAD8;
}
.l-greet[data-tod="night"]::before { background-image: url('../img/night.jpg'); }

.l-greet__fg { position: relative; z-index: 1; max-width: min(52%, 620px); }
.l-greet__title { font-size: 26px; margin: 0; color: var(--greet-ink); }
.l-greet__sub   { font-size: 13px; margin-top: 3px; color: var(--greet-muted); }
.l-greet__meta  { margin-top: 14px; }

/* Banner-scoped controls: the global gold reads on cream and disappears on
   night.jpg's indigo, so both states are stated here explicitly. */
.l-greet__pill {
  background: rgba(255, 255, 255, .62);
  color: #6B4A0E;
  border: 1px solid rgba(107, 74, 14, .16);
}
.l-greet__change,
.l-greet__cta { font-size: 13px; color: var(--greet-ink); }
.l-greet__change { opacity: .72; }
.l-greet__change:hover { opacity: 1; color: var(--greet-ink); }
.l-greet__cta {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(107, 74, 14, .2);
  border-radius: 9px; font-weight: 500;
}
.l-greet__cta:hover { background: rgba(255, 255, 255, .82); color: var(--greet-ink); }
.l-greet[data-tod="night"] .l-greet__pill {
  background: rgba(255, 255, 255, .14);
  color: #F2D9A0;
  border-color: rgba(255, 255, 255, .18);
}
.l-greet[data-tod="night"] .l-greet__cta {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
}
.l-greet[data-tod="night"] .l-greet__cta:hover { background: rgba(255, 255, 255, .2); }

/* Trading Console: no illustration, just the themed card -- matching that
   mode's austerity, and its own --ink/--muted rather than the artwork's. */
[data-theme="console"] .l-greet {
  background: var(--surface);
  color: var(--ink);
  min-height: 0;
}
[data-theme="console"] .l-greet::before { display: none; }
[data-theme="console"] .l-greet__title { color: var(--ink); }
[data-theme="console"] .l-greet__sub,
[data-theme="console"] .l-greet__change { color: var(--muted); }
[data-theme="console"] .l-greet__pill,
[data-theme="console"] .l-greet__cta {
  background: var(--tile); color: var(--gold-text); border-color: var(--border);
}

/* The illustration's width is tied to the banner's height, so as the banner
   narrows the art claims proportionally more of it. Shrink the banner (which
   shrinks the art with it) first, then drop the art entirely once even that
   would put the palm under the message. */
@media (max-width: 760px) {
  .l-greet { min-height: 150px; }
  .l-greet__fg { max-width: none; }
}
@media (max-width: 520px) {
  .l-greet::before { display: none; }
}

/* --- Close-account confirmation (settings.html) --------------------------------
   A centred modal overlay -- window.confirm can't carry the farewell scene or
   the type-to-confirm phrase. Sits above the console ticker (z 9500). */
.l-overlay {
  position: fixed; inset: 0; z-index: 9600;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(20, 12, 30, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
[data-theme="dark"] .l-overlay,
[data-theme="console"] .l-overlay { background: rgba(0, 0, 0, .62); }
.l-overlay-card {
  width: 100%; max-width: 420px; padding: 22px; text-align: left;
  max-height: calc(100vh - 40px); overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}
.l-overlay-card .l-label strong { color: var(--ink); }

.l-card.l-danger { border-color: var(--neg); }
.btn-danger-l {
  background: transparent; color: var(--neg);
  border: 1px solid var(--neg); font-weight: 600;
}
.btn-danger-l:hover:not(:disabled) { background: var(--neg); color: #fff; }
.btn-danger-l:disabled { opacity: .5; cursor: not-allowed; }

/* The send-off scene: sun sinking, the olive rolling off, the sign swinging on
   its hook. Gentle, and stilled entirely for prefers-reduced-motion. */
.l-bye-svg { display: block; width: 200px; max-width: 72%; height: auto; margin: 0 auto 4px; overflow: visible; }
.l-bye-sun   { animation: l-bye-sink 6s ease-in-out infinite; }
.l-bye-olive { animation: l-bye-roll 3.6s ease-in infinite; }
.l-bye-sign  { transform-box: fill-box; transform-origin: 50% 6%; animation: l-bye-swing 3.6s ease-in-out infinite; }
@keyframes l-bye-sink  { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(16px); } }
@keyframes l-bye-roll  { 0% { transform: translateX(0); opacity: 1; } 65% { opacity: 1; } 100% { transform: translateX(58px); opacity: 0; } }
@keyframes l-bye-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) {
  .l-bye-sun, .l-bye-olive, .l-bye-sign { animation: none; }
}