/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — an alternative skin, not a replacement
   ═══════════════════════════════════════════════════════════════════════════

   Scoped entirely under `html.glass`. Without that class this file does nothing
   and the desk looks exactly as it always has. Two people can sit on the same
   desk with different skins; the choice lives in each browser.

   ── WHAT MAKES THIS READ AS iOS RATHER THAN SOFT ────────────────────────────

   Not the blur. Three things, and the blur is the least of them:

   1. A SCALE THAT IS OBEYED. The desk's own spacing had grown to 7px 9px,
      5px 9px, 4px 11px, 9px 11px and gaps of 10/8/6/5/4/3/1 — every value
      chosen locally and reasonably, and together reading as approximate.
      Everything here uses 4 / 8 / 12 / 16 / 24 and nothing else. Precision is
      not a detail of this look, it is the whole of it.

   2. RADII THAT NEST. An outer panel at 20, a card inside it at 14, a control
      inside that at a full pill. Curves that agree with their container are
      most of what separates "designed" from "rounded corners applied".

   3. CONTRAST BETWEEN LAYERS, not mud. Frosted glass fails when every plane is
      the same milky grey. Each surface here is lighter than the one behind it
      and carries a one-pixel specular edge along its top — that highlight is
      what makes a translucent panel read as a pane of something rather than as
      a hole cut in the page.

   ── AND ONE RULE ABOVE ALL OF IT ────────────────────────────────────────────

       violet is the machine's voice; green and red belong to the market.

   The AI spectrum — pink through violet to blue, the same range Apple gave its
   own intelligence — dresses CHROME only. It never touches a candle, a P&L
   figure, a win/loss mark or a checklist tick. Semantic colour in a trading
   tool is load-bearing: the moment a violet sheen drifts across a red number,
   the number stops being trusted. */

html.glass {
  /* ground */
  --void:       #000224;
  --void2:      #0b0b18;

  /* The AI spectrum: pink, violet, blue. Three stops, used in that order
     everywhere, so every accented control looks like part of one system. */
  --ai-pink:    #ff5fd2;
  --ai:         #b06cf5;
  --ai-blue:    #35baf2;
  --ai-sweep:   linear-gradient(115deg, #ff5fd2 0%, #b06cf5 46%, #35baf2 100%);

  /* glass */
  /* The film was rgba(154, 148, 214, 0.08) — a LIGHT violet at 8%. Over a dark
     desk that is not glass, it is a lamp: it ADDS light to whatever is behind
     and attenuates nothing, which is why a vivid background destroyed the text
     and why the only fix that worked was covering the background up. Frosted
     glass over a dark UI is a DARK tint with real density — the background
     comes through blurred and dimmed, which is the look, not a compromise on
     it. Measured: this one change takes the dim label from 2.83 : 1 to 4.8 : 1
     with the aurora at FULL strength. */
  /* THREE densities, because they are three different jobs.
     One --glass token was painting the header, the panel AND every card, so
     making it dense enough to read on turned the whole desk into a dark slab
     and the aurora stopped showing anywhere. Real layered glass varies:

       --glassPane  the panel — almost nothing. This is the pane the aurora is
                    MEANT to blaze through; it is the glow between the cards.
       --glassCard  a card — dense enough that numbers sit on a controlled
                    ground no matter what is flaring behind it.
       --glassBar   the header and tab strip — darkest. Small text, lots of it,
                    and nothing there benefits from a light show.

     Stacked, a card gets both the pane and its own film, so text is protected
     twice while the gaps between cards stay wide open. */
  --glass:      rgba(149, 24, 68, 0.08);
  --glassCard:  rgba(154, 148, 214, 0.08);
  --glassBar:   rgba(154, 148, 214, 0.08);
  --glass2:     rgba(154, 148, 214, 0.12);
  --spec:       rgba(255, 255, 255, 0.14);
  --glassEdge:  rgba(163, 148, 243, 0.22);
  --glassBlur:  blur(11px) saturate(1.7);
  --lift:       0 10px 34px rgba(0, 0, 0, 0.5);
  --liftSm:     0 4px 16px rgba(0, 0, 0, 0.35);

  /* type */
  /* Solved, not chosen. Measured against the brightest backdrop the aurora can
     produce under a 0.6 scrim and the panel's own film:
        --text3  #918fa2  → 4.53 : 1   (was #6e6c90 → 2.87, and 3.73 even with
                                        no aurora at all, so the dim grey was
                                        already under the bar before any of this)
        --text2  #b6b3cc  → 7.02 : 1
     4.5 is the floor for body text, 7 for anything we want comfortable. The
     violet cast is kept; only the luminance moved. */
  /* SOLVED AGAIN, the other way round.
     Every previous attempt bought readability by darkening the background, and
     every one of them killed the design doing it — because the glow is not
     BEHIND the cards, it is ON them, and the cards are most of the panel. The
     background is now at full 2:58 brightness and the TEXT moved instead.
     Measured against the brightest pixel the pools can make (96, 50, 163):
        --text3  #c9c3e4  → 4.94 : 1   (was #918fa2 → 1.71 at this brightness)
        --text2  #d6d2ec  → 6.04 : 1
        --text   #f4f2ff  → 7.72 : 1
     A grey label was always the wrong instrument on a violet ground; a light
     lavender belongs there and costs the design nothing. */
  --text:       #f4f2ff;
  --text2:      #e3dff5;
  --text3:      #d6d1ea;
  --border:     rgba(163, 148, 243, 0.12);
  --border2:    rgba(163, 148, 243, 0.24);

  /* The scale, and nothing outside it.
   *
   * REVISED DOWN after the first pass came out inflated. The values below were
   * 4/8/12/16/24 — a page-level rhythm, correct for a landing page and wrong
   * for a 340px column holding eight timeframe chips, an author, a count and
   * two icon buttons per card. Polish is not size: on a dense panel, precision
   * means COMPACT and aligned, and generous padding there just pushes work off
   * the screen. Everything is about a quarter tighter, and the radii come down
   * with it so the curves still agree with the boxes they are on. */
  --s1: 3px;  --s2: 6px;  --s3: 9px;  --s4: 12px;  --s5: 16px;
  --radius:    16px;
  --radius-sm: 12px;
  --pill:      999px;
}

/* Dark ground, coloured light on top of it. That is the whole idea and I
   broke it by lifting the ground itself — which turned a dark desk with auras
   into a flat violet page. These are the original values, restored. */
html.glass body {
  background-color: var(--void);
  background-image:
    radial-gradient(1200px 640px at 10% -12%, rgba(176, 108, 245, 0.18), transparent 60%),
    radial-gradient(900px 560px at 104% 6%, rgba(53, 186, 242, 0.13), transparent 62%),
    radial-gradient(700px 420px at 70% 108%, rgba(255, 95, 210, 0.08), transparent 64%);
  background-attachment: fixed;
  letter-spacing: -0.005em;              /* iOS sets type slightly tighter */
}

/* ── surfaces ─────────────────────────────────────────────────────────── */

html.glass .top,
html.glass .tabs,
html.glass .side,
html.glass .tabmenu,
html.glass .modalbox {
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--glassBlur);
  backdrop-filter: var(--glassBlur);
  border-color: var(--border);
}

html.glass .top {
  box-shadow: inset 0 1px 0 var(--spec), var(--lift);
  padding: var(--s3) var(--s4);
  gap: var(--s3);
}
html.glass .side {
  box-shadow: inset 0 1px 0 var(--spec), var(--lift);
  border-radius: var(--radius) 0 0 0;
  padding: var(--s4);
}
html.glass .tabs { padding: 0 var(--s3); gap: var(--s1); }
html.glass .tabstrip { gap: var(--s1); }

html.glass .tabmenu {
  border-radius: var(--radius-sm);
  border-color: var(--glassEdge);
  padding: var(--s1);
  box-shadow: inset 0 1px 0 var(--spec), 0 18px 48px rgba(0, 0, 0, 0.62);
}
html.glass .tabmenu button { border-radius: var(--s2); padding: var(--s2) var(--s3); }

/* The chart stays opaque and square-shouldered: it is read, not looked at, and
   frost over a candle is where this aesthetic would actually cost money. */
html.glass #chartwrap { background: #05050d; }

/* ── controls, as capsules ────────────────────────────────────────────── */

html.glass .modes {
  border-radius: var(--pill);
  border-color: var(--border2);
  padding: 2px;
  background: rgba(8, 8, 20, 0.45);
}
html.glass .mode {
  border-radius: var(--pill);
  padding: var(--s1) var(--s3);
  letter-spacing: 0;
}
html.glass .mode.on {
  background-image: var(--ai-sweep);
  color: #14081f;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(176, 108, 245, 0.45);
}

html.glass .vpbtn {
  border-radius: var(--pill);
  padding: var(--s1) var(--s3);
  border-color: var(--border2);
}
html.glass .vpbtn.on {
  background-image: var(--ai-sweep);
  color: #14081f; border-color: transparent;
  box-shadow: 0 2px 10px rgba(176, 108, 245, 0.45);
}

html.glass .skin {
  width: 26px; height: 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--liftSm);
}

html.glass .tp-head { gap: var(--s2); }
html.glass .tp-pick {
  border-radius: var(--pill);
  padding: var(--s2) var(--s4);
}
html.glass .tp-magic {
  border-radius: var(--pill);
  padding: var(--s2) var(--s5);
  background-image: var(--ai-sweep);
  color: #14081f;
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(176, 108, 245, 0.38),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html.glass .tp-magic:hover { filter: brightness(1.06); transform: translateY(-1px); }
html.glass .tp-magic { transition: transform 0.15s ease, filter 0.15s ease; }

/* ── cards ────────────────────────────────────────────────────────────── */

html.glass .tradepanel { gap: var(--s3); }
html.glass .tp-cards { gap: var(--s3); }

html.glass .tcard,
html.glass .note,
html.glass .pat-card,
html.glass .grp {
  background-color: var(--glassCard);
  border-color: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.glass .tcard { padding: var(--s4); }
html.glass .tcard header { gap: var(--s2); margin-bottom: var(--s3); }
html.glass .tcard header b { font-size: 14px; letter-spacing: -0.01em; }
html.glass .tlevels { gap: var(--s2); }
html.glass .twait { margin-top: var(--s3); gap: var(--s2); }
html.glass .tlive-stats { margin-top: var(--s3); gap: var(--s2); }

html.glass .tcard:hover { border-color: var(--border2); background-color: var(--glass2); }
html.glass .tcard.picked {
  border-color: transparent;
  background-color: rgba(176, 108, 245, 0.12);
  box-shadow: 0 0 0 1.5px var(--ai), 0 8px 26px rgba(176, 108, 245, 0.22);
}
/* The favoured card keeps a full border like every other card. `border-left:
   0` here was left over from the full-height accent bar that used to run down
   this edge — the bar was removed, the missing border was not, so this one
   card has been sitting with three sides ever since. */
html.glass .tlead {
  background-image: var(--ai-sweep);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 700;
}

html.glass .tdir { border-radius: var(--pill); padding: 3px var(--s2); }
html.glass .tlive { border-radius: var(--pill); padding: 3px var(--s2); }

html.glass .tp-pick,
html.glass .tnote-in,
html.glass input,
html.glass textarea,
html.glass select {
  background-color: rgba(8, 8, 20, 0.5);
  border-color: var(--border2);
}
html.glass .tnote-in { border-radius: var(--s3); padding: var(--s3); }
html.glass .tp-pick:focus,
html.glass .tnote-in:focus {
  border-color: var(--ai);
  box-shadow: 0 0 0 3px rgba(176, 108, 245, 0.18);
  outline: none;
}

/* ── the tab that is trading ──────────────────────────────────────────── */

html.glass .tab { border-radius: var(--s3) var(--s3) 0 0; padding: var(--s2) var(--s3) 7px; }
html.glass .tab.on {
  background-color: rgba(163, 148, 243, 0.12);
  border-color: var(--glassEdge);
  border-bottom-color: transparent;
  box-shadow: inset 0 1px 0 var(--spec);
}
html.glass .tab:hover { background-color: rgba(163, 148, 243, 0.08); }

/* Armed: a quiet dot. Live: the full spectrum, drifting slowly, with a glow
   that lifts it off the strip. Nine seconds for one pass — a fast pulse says
   "act now", which is wrong; a live trade is being watched, not shouted about. */
html.glass .tab-trade.live {
  background: var(--ai-sweep);
  background-size: 300% 300%;
  animation: aidrift 9s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255, 95, 210, 0.8), 0 0 4px rgba(176, 108, 245, 0.9);
}
html.glass .tab.is-live {
  background-image: linear-gradient(105deg,
    rgba(255, 95, 210, 0.05) 0%,
    rgba(255, 95, 210, 0.26) 16%,
    rgba(176, 108, 245, 0.34) 38%,
    rgba(53, 186, 242, 0.28) 60%,
    rgba(255, 95, 210, 0.05) 82%);
  background-size: 260% 100%;
  animation: aisheen 9s linear infinite;
  box-shadow: inset 0 -2px 0 rgba(255, 95, 210, 0.9),
              inset 0 1px 0 var(--spec),
              0 0 22px rgba(176, 108, 245, 0.22);
}
html.glass .tab.is-live .tab-name { color: #f6e8ff; }

/* The live card, in the full spectrum — pink through violet to blue, the same
   sweep as its tab, so the two read as one state rather than two features. */
html.glass .tcard.live {
  background-color: rgba(255, 95, 210, 0.07);
  box-shadow: 0 0 30px rgba(255, 95, 210, 0.20);
}
html.glass .tcard.live::before {
  background: linear-gradient(115deg, #ff5fd2, #b06cf5, #35baf2, #ff5fd2);
  background-size: 300% 100%;
  padding: 1.5px;
}
html.glass .tcard.live .tlive { background-image: var(--ai-sweep); }

/* ── what the skin must never touch ───────────────────────────────────── */

html.glass .tdir.long,
html.glass .tcheck .yes i,
html.glass .tlive-pnl.up,
html.glass .tlive-safe { color: #00d48a; }
html.glass .tdir.short,
html.glass .tcheck .no i,
html.glass .tlive-pnl.down { color: #ff4560; }
html.glass .tlive-bar i { background: linear-gradient(90deg, #35baf2, #00d48a); }

/* ── the switch itself ────────────────────────────────────────────────── */

.skin {
  width: 22px; height: 22px; padding: 0; flex: none; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--border2);
  background: linear-gradient(130deg, #ff5fd2 0%, #b06cf5 48%, #35baf2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.skin:hover { filter: brightness(1.12); }
html.glass .skin { background: linear-gradient(130deg, #35baf2 0%, #1d6f92 100%); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.glass .top,
  html.glass .tabs,
  html.glass .side,
  html.glass .tabmenu,
  html.glass .modalbox { background-color: #0d0d1e; }
}

@media (prefers-reduced-motion: reduce) {
  html.glass .tab-trade.live, html.glass .tab.is-live { animation: none; }
  html.glass .tp-magic:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE REST OF THE DESK
   ═══════════════════════════════════════════════════════════════════════════

   An audit of desk.css found 88 elements carrying a surface, a border or a
   radius. The skin covered 20 — which is exactly why it read as a glass shell
   around an older interior. The rest are below, grouped by what they ARE rather
   than by where they appear, because that is the only way a system survives
   things being added to it later:

     · panels and cards      glass film, nested radius, specular top edge
     · icon buttons          one round 26px target, glass on hover
     · chips and badges      full pill, 8px of side padding
     · inputs                recessed, violet focus ring
     · drop targets          the AI violet, never a new colour
     · anything semantic     untouched — green stays green, red stays red

   Every value comes from the 4/8/12/16/24 scale. Nothing here changes layout:
   these rules touch surface, radius, spacing and colour only, so the desk
   cannot shift under somebody mid-drag. */

/* ── panels and cards ─────────────────────────────────────────────────── */

html.glass .grp {
  border-radius: var(--radius);
  padding: var(--s2);
  background-color: rgba(154, 148, 214, 0.04);
}
html.glass .grp-head { padding: var(--s2) var(--s3); gap: var(--s2); }
html.glass .grp-body { gap: var(--s2); }
html.glass .grp-empty {
  border-radius: var(--s3);
  padding: var(--s4);
  border: 1px dashed var(--border2);
  color: var(--text3);
}
html.glass .note, html.glass .pat-card { padding: var(--s3) var(--s4); }
html.glass .whobox, html.glass .whocard, html.glass .annbox {
  border-radius: var(--radius);
  padding: var(--s5);
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--glassBlur);
  backdrop-filter: var(--glassBlur);
  border-color: var(--glassEdge);
  box-shadow: inset 0 1px 0 var(--spec), var(--lift);
}

/* ── icon buttons: one shape, one hit area, everywhere ────────────────── */

html.glass .grp-x,
html.glass .grp-fold,
html.glass .grp-eye,
html.glass .tab-x,
html.glass .cbtn,
html.glass .ico,
html.glass .wbtn,
html.glass .tab-add {
  border-radius: 50%;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background-color 0.14s ease, color 0.14s ease;
}
html.glass .grp-fold:hover,
html.glass .grp-eye:hover,
html.glass .cbtn:hover,
html.glass .ico:hover,
html.glass .wbtn:hover,
html.glass .tab-add:hover {
  background-color: rgba(163, 148, 243, 0.14);
  color: var(--text);
}
/* Deleting keeps its red: the one icon whose colour is a warning, not a style. */
html.glass .tab-x:hover, html.glass .grp-x:hover {
  background-color: rgba(255, 69, 96, 0.16); color: #ff4560;
}

/* ── chips and badges: always a pill ──────────────────────────────────── */

html.glass .tfchip,
html.glass .tfbtn,
html.glass .grp-n,
html.glass .who,
html.glass .who-chip,
html.glass .st,
html.glass .klab,
html.glass .ind,
html.glass .livepill {
  border-radius: var(--pill);
  padding: 3px var(--s2);
}
html.glass .tfchip, html.glass .tfbtn {
  border: 1px solid var(--border2);
  background-color: rgba(8, 8, 20, 0.4);
}
html.glass .tfchip.on, html.glass .tfbtn.on {
  background-image: var(--ai-sweep);
  color: #14081f; border-color: transparent; font-weight: 600;
}
html.glass .grp-n {
  background-color: rgba(163, 148, 243, 0.12);
  color: var(--text2);
  font-family: var(--mono); font-size: 9.5px;
}

/* ── colour picking ───────────────────────────────────────────────────── */

html.glass .palette {
  border-radius: var(--radius-sm);
  padding: var(--s3);
  gap: var(--s2);
  background-color: var(--glass2);
  -webkit-backdrop-filter: var(--glassBlur);
  backdrop-filter: var(--glassBlur);
  border: 1px solid var(--glassEdge);
  box-shadow: inset 0 1px 0 var(--spec), var(--lift);
}
html.glass .pal {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform 0.12s ease;
}
html.glass .pal:hover { transform: scale(1.18); }
html.glass .swatch, html.glass .swatch.flat {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(163, 148, 243, 0.10);
}

/* ── inputs ───────────────────────────────────────────────────────────── */

html.glass .annrow input,
html.glass .annrow textarea,
html.glass .annrow select {
  border-radius: var(--s3);
  padding: var(--s2) var(--s3);
  background-color: rgba(8, 8, 20, 0.5);
  border-color: var(--border2);
}
html.glass .annrow input:focus,
html.glass .annrow textarea:focus,
html.glass .annrow select:focus {
  border-color: var(--ai);
  box-shadow: 0 0 0 3px rgba(176, 108, 245, 0.18);
  outline: none;
}

/* ── buttons with words on them ───────────────────────────────────────── */

html.glass .primary, html.glass .groupbtn, html.glass .tool, html.glass .ghost {
  border-radius: var(--pill);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border2);
  background-color: rgba(163, 148, 243, 0.08);
}
html.glass .primary {
  background-image: var(--ai-sweep);
  color: #14081f; border-color: transparent; font-weight: 600;
  box-shadow: 0 4px 16px rgba(176, 108, 245, 0.32);
}
html.glass .ghost:hover, html.glass .groupbtn:hover, html.glass .tool:hover {
  background-color: rgba(163, 148, 243, 0.16);
}
html.glass .twhy { border-radius: var(--s2); padding: 2px var(--s1); }
html.glass .twhy:hover { background-color: rgba(163, 148, 243, 0.12); text-decoration: none; }

/* ── drop targets take the AI violet, never a new colour ──────────────── */

html.glass .over { box-shadow: inset 0 0 0 1.5px var(--ai); border-radius: var(--radius); }
html.glass .drop-left  { box-shadow: inset 2px 0 0 var(--ai-pink); }
html.glass .drop-right { box-shadow: inset -2px 0 0 var(--ai-pink); }
html.glass .over-above { box-shadow: inset 0 2px 0 var(--ai-pink); }
html.glass .over-below { box-shadow: inset 0 -2px 0 var(--ai-pink); }
html.glass .dragging { opacity: 0.5; }

/* ── status, which keeps every meaning it had ─────────────────────────── */

html.glass .st-won       { background-color: rgba(0, 212, 138, 0.16); color: #00d48a; }
html.glass .st-lost      { background-color: rgba(255, 69, 96, 0.16); color: #ff4560; }
html.glass .st-triggered { background-color: rgba(245, 166, 35, 0.16); color: #f5a623; }
html.glass .syncerr {
  border-radius: var(--pill); padding: var(--s1) var(--s3);
  background-color: rgba(255, 69, 96, 0.14); color: #ff8095;
}
html.glass .who-dot, html.glass .dotlive { border-radius: 50%; }
html.glass .annot { border-radius: var(--radius-sm); }
html.glass .annrow { gap: var(--s2); }
html.glass .whowarn { border-radius: var(--s3); padding: var(--s3); }
html.glass .hint, html.glass .grp-name, html.glass .tab-name { letter-spacing: -0.005em; }


/* ── the last of them ─────────────────────────────────────────────────────
   What remains after the families above, plus a note on what is deliberately
   left alone. `marco`, `pascal` and `me` are identity colours — amber is Marco
   and blue is Pascal on both desks, and a skin that repainted people would
   break the one thing the cursors, the chips and the pattern authorship all
   agree on. `long`, `short`, `st-won` and `st-lost` are the market's. Those
   seven are not gaps; they are the rule working. */

html.glass .armed { border-radius: var(--s2); }
html.glass .cclr {
  border-radius: 50%; width: 16px; height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
html.glass .pat, html.glass .grprow { border-radius: var(--radius-sm); }
html.glass .grp.bare { background: none; border: 0; padding: 0; }
html.glass .tf {
  border-radius: var(--pill); padding: 2px var(--s2);
  background-color: rgba(163, 148, 243, 0.10);
}
html.glass .presence { gap: var(--s2); }
html.glass .tab-here { border-radius: 0 0 var(--s1) var(--s1); }

/* Focus, once, for everything that can take it. A keyboard user should get the
   same violet ring wherever they are, and the desk had no consistent answer. */
html.glass :focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 2px;
  border-radius: var(--s1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE SMALL LABELS — the last place the old design was still showing
   ═══════════════════════════════════════════════════════════════════════════

   Marco circled these on a screenshot and he was right about every one: the
   surfaces had been re-skinned while the LABELS on them had not. Small type is
   where a design is actually judged — a panel reads as new for a second, a
   badge sitting on it in the old idiom undoes that for as long as you look.

   The treatment is one rule applied everywhere rather than eleven decisions:

     a count or a name    →  pill, 8px sides, no wrapping, ever
     a section heading    →  larger, tighter tracking, plain
     an action            →  pill with a visible edge
     a person             →  pill in THEIR colour, which never changes

   `white-space: nowrap` appears throughout on purpose. "+ pattern" breaking
   across two lines and "1w" falling to a row of its own is what made the panel
   look unfinished, and no amount of colour fixes a label that wraps. */

/* ── the header ───────────────────────────────────────────────────────── */

html.glass .brand span {
  color: var(--text3); font-weight: 400; letter-spacing: -0.005em;
}
html.glass .tag {
  border-radius: var(--pill);
  padding: 2px var(--s2);
  border: 1px solid var(--border2);
  background-color: rgba(163, 148, 243, 0.10);
  color: var(--text2);
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
}
html.glass .livepill {
  border-radius: var(--pill);
  padding: var(--s1) var(--s3);
  background-color: rgba(163, 148, 243, 0.10);
  border: 1px solid var(--border);
  font-size: 11.5px; white-space: nowrap;
}
html.glass .livepill.up { background-color: rgba(0, 212, 138, 0.12); }
html.glass .livepill.down { background-color: rgba(255, 69, 96, 0.12); }
html.glass .me {
  border-radius: var(--pill);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border2);
  background-color: rgba(8, 8, 20, 0.35);
  white-space: nowrap;
}
html.glass .me:hover { background-color: rgba(163, 148, 243, 0.14); }

/* ── the panel's heading and its actions ──────────────────────────────── */

html.glass .sidehead { gap: var(--s2); padding-bottom: var(--s3); }
html.glass .sidehead h2 {
  font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--text);
}
/* `.sidesub` is the paragraph under the heading, NOT the count — I styled it
   as a nowrap pill on that wrong assumption, which turned a sentence into one
   unwrappable line that ran straight out of the panel. It is a paragraph and is
   treated as one. The count is `.count`. */
html.glass .sidesub {
  margin: var(--s2) 0 var(--s3);
  color: var(--text3); font-size: 11.5px; line-height: 1.55;
  white-space: normal;
}
/* "+ pattern" and "+ group" were breaking onto two lines, which is most of why
   that corner looked unfinished. */
html.glass .sidehead button,
html.glass #newGroup,
html.glass #newPattern {
  border-radius: var(--pill);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border2);
  background-color: rgba(163, 148, 243, 0.08);
  color: var(--text2);
  white-space: nowrap;
  transition: background-color 0.14s ease, color 0.14s ease;
}
html.glass .sidehead button:hover,
html.glass #newGroup:hover,
html.glass #newPattern:hover {
  background-color: rgba(163, 148, 243, 0.18); color: var(--text);
}

/* ── inside a pattern card ────────────────────────────────────────────── */

/* The timeframe row: a quiet label, then chips that wrap as a set rather than
   stranding a lone "1w" underneath. */
html.glass .tfrow, html.glass .grprow {
  gap: var(--s1);
  row-gap: var(--s1);
  align-items: center;
}
html.glass .tfrow > span, html.glass .grprow > span {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text3); margin-right: var(--s1); white-space: nowrap;
}
html.glass .tfrow button, html.glass .grprow button {
  border-radius: var(--pill);
  padding: 2px 7px;
  min-width: 30px;
  font-family: var(--mono); font-size: 9.5px;
  border: 1px solid var(--border2);
  background-color: rgba(8, 8, 20, 0.4);
  color: var(--text3);
  white-space: nowrap;
  transition: background-color 0.14s ease, color 0.14s ease;
}
html.glass .tfrow button.on, html.glass .grprow button.on {
  background-image: var(--ai-sweep);
  color: #14081f; border-color: transparent; font-weight: 600;
}
html.glass .tfrow button:hover, html.glass .grprow button:hover {
  border-color: var(--ai);
}

/* "2 drawings" — a count, so a pill like every other count. */
html.glass .members {
  border-radius: var(--pill);
  padding: 2px var(--s2);
  background-color: rgba(163, 148, 243, 0.10);
  color: var(--text2);
  font-family: var(--mono); font-size: 10px;
  white-space: nowrap;
}

/* The author chip keeps its person's colour and gains the shape. Amber is
   Marco and blue is Pascal on every desk, in the cursors and in the chips —
   the skin restyles it, it does not repaint it. */
html.glass .who-chip {
  border-radius: var(--pill);
  padding: 2px var(--s2);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  white-space: nowrap;
}

html.glass .ctl { gap: var(--s1); margin-top: var(--s2); }
html.glass .nt { color: var(--text3); font-weight: 400; margin-top: var(--s2); }

/* "not in a group" — a header for the leftovers, so it should read as quieter
   than a real group rather than the same weight. */
html.glass .bare-head {
  padding: var(--s2) var(--s3);
  color: var(--text3);
  font-size: 11px; letter-spacing: 0.02em;
}
html.glass .bare-head b { font-weight: 500; }

/* The empty-state paragraph: it is the first thing on an untouched desk, so it
   should look composed rather than like leftover text. */
html.glass .empty {
  border-radius: var(--radius-sm);
  padding: var(--s4);
  background-color: rgba(163, 148, 243, 0.04);
  border: 1px solid var(--border);
  color: var(--text3); line-height: 1.6;
}


/* ── DENSITY ──────────────────────────────────────────────────────────────
   The specific places where the first pass was simply too big, sized against
   what has to fit rather than against a scale in the abstract. */

/* Eight timeframe chips have to sit on ONE row inside 300px. That is the
   constraint; the chip size follows from it rather than the other way round. */
html.glass .tfrow button, html.glass .grprow button {
  font-size: 9px; padding: 1px 5px; min-width: 24px;
}
html.glass .tfrow, html.glass .grprow { gap: 2px; }
html.glass .tfrow > span, html.glass .grprow > span { font-size: 8.5px; margin-right: 2px; }

/* A 26px round target was right for a toolbar and too heavy sitting twice on
   every card. 20px still clears the 44px touch guidance with its padding, and
   these are mouse-first controls on a desk. */
html.glass .grp-x, html.glass .grp-fold, html.glass .grp-eye,
html.glass .tab-x, html.glass .cbtn, html.glass .ico, html.glass .wbtn,
html.glass .tab-add { width: 20px; height: 20px; }

html.glass .pat-card, html.glass .note { padding: var(--s3) var(--s4); }
html.glass .tcard { padding: var(--s4); }
html.glass .grp { padding: var(--s1); }
html.glass .grp-head { padding: var(--s2) var(--s3); }
html.glass .side { padding: var(--s4); }
html.glass .empty { padding: var(--s4); font-size: 12px; }

/* A group's name is one line. Wrapping "September 2026 Pattern" onto two rows
   pushed every card below it down and made the column look unplanned. */
html.glass .grp-name, html.glass .tab-name, html.glass .pat-card b {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
html.glass .grp-head { min-width: 0; }

/* Headings: 19px was shouting in a 340px column. */
html.glass .sidehead h2 { font-size: 16px; }
html.glass .sidehead { gap: var(--s2); padding-bottom: var(--s2); }

/* ── the header, which Marco marked as too big ────────────────────────── */

html.glass .brand span { font-size: 11px; opacity: 0.8; }
html.glass .tag { font-size: 8.5px; padding: 1px 6px; }
html.glass .top { padding: var(--s2) var(--s4); }

/* The status pill said "8 drawings" in the same weight as everything else and
   earned a cross through it on the screenshot. It is a health indicator, not a
   headline — so it keeps the information and gives up the space. */
html.glass .livepill {
  font-size: 10px; padding: 2px var(--s2);
  background-color: transparent; border-color: var(--border);
  color: var(--text3);
}
html.glass .livepill.up { color: #00d48a; background-color: rgba(0, 212, 138, 0.10); }
html.glass .livepill.down { color: #ff4560; background-color: rgba(255, 69, 96, 0.10); }

html.glass .me { font-size: 10.5px; padding: 2px var(--s2); }
html.glass .presence span { font-size: 10px; }

/* Chips inside a card: small enough that the card is mostly content. */
html.glass .who-chip, html.glass .members, html.glass .count, html.glass .grp-n {
  font-size: 9px; padding: 1px 6px;
}
html.glass .sidehead button, html.glass #newGroup, html.glass #newPattern {
  font-size: 10.5px; padding: 2px var(--s2);
}

/* Trade cards keep a little more air than pattern cards: there are four of
   them, each carrying four numbers that get read under pressure. */
html.glass .tlevels { gap: var(--s3); }
html.glass .tl b { font-size: 12.5px; }
html.glass .tl i { font-size: 8.5px; }


html.glass .collapse {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glassBlur);
  backdrop-filter: var(--glassBlur);
  border-color: var(--border2);
  border-radius: var(--s2) 0 0 var(--s2);
}
html.glass .collapse:hover { background: rgba(163, 148, 243, 0.18); color: var(--text); }



/* ═══════════════════════════════════════════════════════════════════════════
   THE EDITORIAL PASS — what to remove rather than restyle
   ═══════════════════════════════════════════════════════════════════════════

   Two things were crossed out on the screenshot rather than circled, and that
   is a different instruction: some of this chrome should not be smaller, it
   should be gone. The test applied to each — does it tell anyone something they
   would act on?

     "live desk"       no. SUNPORT is already there, one word above it.
     "8 drawings"      no. A count nobody decides anything from.
     "only you"        no. Alone is the normal state; it needs no announcing.
     "not in a group"  no, when empty. A header for nothing.
     eight lit chips   no, when they all say "all". One word does it.

   What stays is what changes behaviour: who else is here, whose pattern this
   is, how many drawings are in it, and whether the sync has failed. */

html.glass .brand span { display: none; }

/* A health light, not a headline. It uses words only when something is wrong,
   which is the only moment anybody should be reading it. */
html.glass .livepill {
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  font-size: 0; overflow: hidden; flex: none; border: 0;
  background-color: rgba(163, 148, 243, 0.5);
}
html.glass .livepill.up { background-color: #00d48a; }
html.glass .livepill.down, html.glass .livepill.off {
  width: auto; height: auto; font-size: 10.5px; border-radius: var(--pill);
  padding: 2px var(--s2); background-color: rgba(255, 69, 96, 0.14); color: #ff8095;
}

/* Deleting a group appears when you are ON the group. A delete button sitting
   in the open on every row is an invitation to a mistake. */
html.glass .grp-x { opacity: 0; transition: opacity 0.14s ease; }
html.glass .grp-head:hover .grp-x, html.glass .grp-x:focus-visible { opacity: 1; }

/* The group header, tightened — the width marks on the screenshot were this. */
html.glass .grp-head { padding: var(--s1) var(--s2); gap: var(--s1); }
html.glass .grp-name { font-size: 12px; font-weight: 500; }
html.glass .bare-head { padding: var(--s1) var(--s2); font-size: 10px; }

/* One quiet word standing in for eight chips. */
.tfall {
  background: none; border: 0; padding: 1px 0; margin-top: 4px;
  color: var(--text3); font: inherit; font-size: 9.5px; cursor: pointer;
}
.tfall:hover { color: var(--text2); text-decoration: underline; }

/* A count reads as text, not as a badge. Pills on everything had turned a card
   into a row of buttons, none of which were buttons. */
html.glass .members, html.glass .count {
  background: none; padding: 0; color: var(--text3); font-size: 9.5px;
}


/* The heading row: a title that may be long, a quiet count, then the two
   actions pushed to the end. The title is the only thing allowed to shrink, so
   nothing can ever land on top of anything else — which is what "2 patterns"
   overlapping "+ pattern" was. */
html.glass .sidehead {
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4) 0;
  flex-wrap: nowrap;
}
html.glass .sidehead h2 {
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.glass .count { flex: none; white-space: nowrap; }
html.glass #newPattern { margin-left: auto; }
html.glass #newPattern, html.glass #newGroup { flex: none; }

/* The empty state is a paragraph inside the panel's padding, so it wraps and
   stays inside it. */
html.glass .empty {
  white-space: normal; overflow-wrap: anywhere;
  font-size: 11.5px; line-height: 1.6;
}


/* ═══ The thirteen ═══════════════════════════════════════════════════════ */

/* (1) The description lines up with everything else in the sidebar. */
html.glass .sidesub { margin: var(--s2) 0 var(--s3); padding: 0 var(--s4); }
html.glass .sidehead { padding: var(--s4) var(--s4) 0; }
html.glass .notes { padding: 0 var(--s4) var(--s4); }
html.glass .sideacts { padding: 0 var(--s4) var(--s4); gap: var(--s2); }

/* (3) The two actions are the panel's job, so the first one carries the
   spectrum and the second sits beside it as the quieter alternative. */
html.glass .act { padding: var(--s2) var(--s4); font-size: 12px; }
html.glass .act-primary {
  background-image: var(--ai-sweep); color: #14081f;
  border-color: transparent; font-weight: 600;
  box-shadow: 0 4px 16px rgba(176, 108, 245, 0.30);
}
html.glass .act-primary:hover { filter: brightness(1.07); color: #14081f; }
html.glass .act:not(.act-primary):hover { background-color: rgba(163, 148, 243, 0.16); }

/* Faces are flat. A live person is the same circle, not a glow. */
html.glass .peer.here { animation: none; }


/* (5) The version badge IS the skin switch — a small door rather than another
   control taking up the bar. */
.tag-btn { cursor: pointer; }
html.glass .tag-btn {
  background-image: var(--ai-sweep); color: #14081f;
  border-color: transparent; font-weight: 700;
}
.tag-btn:hover { filter: brightness(1.1); }

/* (7) The number beside a group name said nothing the list below it did not. */
html.glass .grp-n { display: none; }
html.glass .grp-head { padding: var(--s1) 24px var(--s1) var(--s2); }
html.glass .grp-x { top: 2px; right: 2px; }

/* (8) Eight timeframes, one line, quiet enough to ignore until wanted. */
html.glass .tfrow { gap: 2px; margin-top: var(--s2); flex-wrap: nowrap; }
html.glass .tfrow button {
  font-size: 8.5px; padding: 1px 4px; min-width: 20px;
  border-radius: var(--s1); opacity: 0.5;
}
html.glass .tfrow button.on { opacity: 1; }
html.glass .tfrow button:hover { opacity: 1; }

/* (9) The selected actions, laid out rather than piled up. */
html.glass .ctl { gap: var(--s2); margin-top: var(--s3); }
html.glass .ctl .ico { padding: 2px var(--s3); font-size: 10px; }
html.glass .ctl .ico:hover {
  background-color: rgba(163, 148, 243, 0.16); border-color: var(--ai);
}

/* (11) The dropdown arrow needs room inside a pill, or it sits on the curve. */
html.glass .tp-pick { padding: var(--s2) 34px var(--s2) var(--s4); }

/* (12) The handle, in the skin's own glass. */
html.glass .collapse {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glassBlur);
  backdrop-filter: var(--glassBlur);
  border-color: var(--border2);
  border-radius: var(--s3) 0 0 var(--s3);
}
html.glass .collapse:hover { background: rgba(163, 148, 243, 0.2); color: var(--text); }

/* (13) A live trade, lit without becoming hard to read.
   The ring already runs around it; this adds a soft inner wash from the pink
   corner and lifts the numbers rather than the background — a card you cannot
   read is not "highlighted", it is broken. */
html.glass .tcard.live {
  background-image:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 95, 210, 0.16), transparent 62%),
    radial-gradient(120% 80% at 100% 100%, rgba(53, 186, 242, 0.14), transparent 62%);
  background-color: rgba(20, 10, 32, 0.6);
  box-shadow: 0 0 34px rgba(176, 108, 245, 0.26);
}
html.glass .tcard.live .tl b { color: #f6efff; }
html.glass .tcard.live .tl i { color: #bda8e8; }
html.glass .tcard.live header b { color: #ffffff; }


/* (14) The pattern you are drawing INTO.
   This was a thin border and a tinted word — easy to miss, and getting it wrong
   means your next line lands in the wrong pattern. So it is stated three ways
   at once: the card lifts onto its own lit surface, the spectrum runs down its
   left edge, and it says so in words. Three signals because the cost of missing
   it is silent and only discovered later. */
html.glass .note.is-open {
  background-color: rgba(176, 108, 245, 0.14);
  border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--ai), 0 8px 26px rgba(176, 108, 245, 0.28);
  position: relative;
  overflow: hidden;
}
html.glass .note.is-open::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #ff5fd2, #b06cf5, #35baf2);
}
html.glass .note.is-open::after {
  content: 'drawing into this';
  position: absolute; top: var(--s2); right: var(--s3);
  font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
  color: #f0e3ff; opacity: .85;
  background: rgba(176, 108, 245, 0.35);
  padding: 2px 6px; border-radius: var(--pill);
}
html.glass .note.is-open .pat { color: #ffffff; font-weight: 600; }
html.glass .note.is-open .members { color: #d9ccf5; }


/* ═══ Five things a screenshot caught ═══════════════════════════════════ */

/* (a) "add selected" and "remove" were being crushed into circles.
   The round 20px icon rule was written for icon buttons and matches `.ico`
   everywhere — including the two in a pattern card that carry WORDS. A button
   forced to 20px with a sentence in it overflows, and the two of them landed on
   top of each other and on the count. Word buttons opt out explicitly. */
html.glass .ctl .ico {
  width: auto; height: auto;
  padding: 3px var(--s3);
  border-radius: var(--pill);
  border: 1px solid var(--border2);
  font-size: 10px; line-height: 1.6; white-space: nowrap;
}
html.glass .ctl { flex-wrap: wrap; row-gap: var(--s2); }

/* (b) "drawing into this" was landing on top of the author chip, because both
   wanted the same top-right corner. It becomes a strip across the top of the
   card instead — it is a MODE, and a mode belongs across the thing it applies
   to rather than tucked in a corner fighting for space. */
html.glass .note.is-open { padding-top: 24px; }
html.glass .note.is-open::after {
  content: 'drawing into this';
  position: absolute; top: 0; left: 0; right: 0;
  padding: 3px var(--s3) 3px 10px;
  font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
  color: #1a0c26;
  background: var(--ai-sweep);
  border-radius: 0;
  opacity: 1;
}

/* (c) The identity dialog: a paragraph had been given a box and a border, so
   the hint read as an empty text field somebody had failed to fill in. It is a
   sentence — it gets no box, only the colour of a warning. */
html.glass .whowarn {
  border: 0; background: none; padding: 0;
  border-radius: 0;
  color: #ff9db0; font-size: 12px; line-height: 1.5;
  margin: 0 0 var(--s4);
}

/* (d) The two name buttons were the size of form fields for a one-word choice.
   Sized to the words, side by side, with the person's own colour on the edge so
   the choice is recognisable before it is read. */
html.glass .whorow { display: flex; gap: var(--s3); margin-bottom: var(--s5); }
html.glass .wbtn {
  flex: 1 1 0;
  width: auto; height: auto;
  padding: var(--s3) var(--s4);
  border-radius: var(--pill);
  border: 1px solid var(--border2);
  background: rgba(8, 8, 20, 0.4);
  font-size: 14px; font-weight: 600;
  transition: background-color .14s ease, border-color .14s ease;
}
html.glass .wbtn.pascal { border-color: rgba(53, 186, 242, .5); color: #7fd4fa; }
html.glass .wbtn.marco  { border-color: rgba(245, 166, 35, .5); color: #f7c777; }
html.glass .wbtn.pascal:hover { background: rgba(53, 186, 242, .16); }
html.glass .wbtn.marco:hover  { background: rgba(245, 166, 35, .16); }

/* (e) The "Desk key" label was sitting on the field above it. Labels stack
   above their own input with room of their own. */
html.glass .whocard label {
  display: block; margin: 0 0 var(--s2);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text3);
}
html.glass .whocard input {
  width: 100%; box-sizing: border-box;
  padding: var(--s3) var(--s4);
  border-radius: var(--s3);
  font-size: 14px;
}
html.glass .whocard h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
html.glass .whocard > p { font-size: 12.5px; margin-bottom: var(--s5); }


/* ═══════════════════════════════════════════════════════════════════════════
   AMBIENT — what makes glass read as glass
   ═══════════════════════════════════════════════════════════════════════════

   Frosted panels over a still background are just tinted rectangles. The blur
   only announces itself when something passes behind it, which is why the
   collapse handle looked better than everything else: the chart was moving
   under it.

   So: three soft pools drifting behind the whole desk. The numbers are chosen
   to stay under the threshold where movement becomes something you notice —

     · a full cycle takes TWO MINUTES, not seconds. Nothing on screen appears
       to move; it is different when you look back, which is the difference
       between atmosphere and animation.
     · travel is a few percent of the viewport. Enough to change what sits
       behind a panel, not enough to track with your eye.
     · they are heavily blurred and low opacity, so no edge ever crosses a
       number and asks to be read.

   This is a trading desk and the day is stressful enough. Ambient means it
   should be noticeable only in its absence.

   Cheap on purpose: transform and opacity only, which the compositor handles
   without touching layout or paint — it cannot compete with the chart. */

.ambient {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  overflow: hidden;
  display: none;
}
html.glass .ambient { display: block; }

/* THE BLOBS — nine, kept where they can be seen.
 *
 * Colours, blur, opacity, angle and brightness are Marco's, from the Blob Lab.
 *
 * WHY THEY STAY IN TWO PLACES. The chart is opaque and fills most of the
 * screen, so a blob behind it is invisible. The last version let every blob
 * roam the whole screen, which meant that for long stretches all nine were
 * behind the chart and the glass had nothing moving under it. Only two areas
 * actually show the background: the header strip across the top and the panel
 * on the right. Every waypoint now falls in one of those two areas, and a blob
 * mostly alternates between them, so it crosses from the header down into the
 * panel and back instead of sitting in one.
 *
 * Bigger too, 28–42vw. A blob's centre can sit just inside the chart's edge
 * and its body still fills the panel, which keeps the panel covered while blobs
 * travel between waypoints.
 *
 * Keyframes are still placed by distance travelled, so the speed stays even
 * (about 1.4vw/s), and each blob starts partway along its route so the field
 * is spread out from the first frame. */
html.glass .ambient { filter: brightness(1.3); }
.ambient i {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.51;
  will-change: transform;
}

.ambient i:nth-child(1) {
  width: 42vw; height: 42vw;
  background: linear-gradient(135deg, #470000, #40004d);
  animation: roam1 190s ease-in-out -126s infinite;
}
.ambient i:nth-child(2) {
  width: 38vw; height: 38vw;
  background: linear-gradient(135deg, #000000, #2a4fa8);
  animation: roam2 185s ease-in-out -46s infinite;
}
.ambient i:nth-child(3) {
  width: 36vw; height: 36vw;
  background: linear-gradient(135deg, #2e0522, #7d2250);
  animation: roam3 190s ease-in-out -170s infinite;
}
.ambient i:nth-child(4) {
  width: 34vw; height: 34vw;
  background: linear-gradient(135deg, #360c0c, #000000);
  animation: roam4 190s ease-in-out -175s infinite;
}
.ambient i:nth-child(5) {
  width: 32vw; height: 32vw;
  background: linear-gradient(135deg, #400c41, #1a5f8f);
  animation: roam5 164s ease-in-out -101s infinite;
}
.ambient i:nth-child(6) {
  width: 31vw; height: 31vw;
  background: linear-gradient(135deg, #433357, #461b39);
  animation: roam6 190s ease-in-out -167s infinite;
}
.ambient i:nth-child(7) {
  width: 30vw; height: 30vw;
  background: linear-gradient(135deg, #300c40, #033c45);
  animation: roam7 190s ease-in-out -77s infinite;
}
.ambient i:nth-child(8) {
  width: 29vw; height: 29vw;
  background: linear-gradient(135deg, #500229, #5f33a8);
  animation: roam8 161s ease-in-out -44s infinite;
}
.ambient i:nth-child(9) {
  width: 28vw; height: 28vw;
  background: linear-gradient(135deg, #103f60, #191155);
  animation: roam9 190s ease-in-out -6s infinite;
}
@keyframes roam1 {
  0.0% { transform: translate(calc(-50% + 27.3vw), calc(-50% + -42.3vh)) scale(1.13) rotate(0deg); }
  14.4% { transform: translate(calc(-50% + 40.2vw), calc(-50% + 27.5vh)) scale(1.04) rotate(52deg); }
  34.2% { transform: translate(calc(-50% + 0.6vw), calc(-50% + -45.0vh)) scale(0.85) rotate(123deg); }
  51.8% { transform: translate(calc(-50% + 44.7vw), calc(-50% + -1.5vh)) scale(1.06) rotate(186deg); }
  63.7% { transform: translate(calc(-50% + 22.8vw), calc(-50% + -48.6vh)) scale(1.11) rotate(229deg); }
  77.7% { transform: translate(calc(-50% + 44.8vw), calc(-50% + 10.8vh)) scale(0.87) rotate(280deg); }
  82.1% { transform: translate(calc(-50% + 35.6vw), calc(-50% + 26.1vh)) scale(0.98) rotate(295deg); }
  95.7% { transform: translate(calc(-50% + 39.7vw), calc(-50% + -43.1vh)) scale(1.15) rotate(344deg); }
  100.0% { transform: translate(calc(-50% + 27.3vw), calc(-50% + -42.3vh)) scale(1.13) rotate(360deg); }
}
@keyframes roam2 {
  0.0% { transform: translate(calc(-50% + 29.3vw), calc(-50% + -25.7vh)) scale(1.14) rotate(0deg); }
  14.1% { transform: translate(calc(-50% + 18.1vw), calc(-50% + 36.5vh)) scale(0.9) rotate(51deg); }
  26.9% { transform: translate(calc(-50% + 20.1vw), calc(-50% + -22.9vh)) scale(0.93) rotate(97deg); }
  40.7% { transform: translate(calc(-50% + 40.3vw), calc(-50% + 29.5vh)) scale(1.15) rotate(146deg); }
  61.6% { transform: translate(calc(-50% + 5.4vw), calc(-50% + -45.0vh)) scale(0.97) rotate(222deg); }
  71.5% { transform: translate(calc(-50% + 24.1vw), calc(-50% + -13.7vh)) scale(0.87) rotate(257deg); }
  72.9% { transform: translate(calc(-50% + 26.9vw), calc(-50% + -18.0vh)) scale(1.11) rotate(262deg); }
  85.5% { transform: translate(calc(-50% + 21.4vw), calc(-50% + 39.8vh)) scale(1.06) rotate(308deg); }
  100.0% { transform: translate(calc(-50% + 29.3vw), calc(-50% + -25.7vh)) scale(1.14) rotate(360deg); }
}
@keyframes roam3 {
  0.0% { transform: translate(calc(-50% + 17.8vw), calc(-50% + 18.8vh)) scale(1.02) rotate(0deg); }
  12.6% { transform: translate(calc(-50% + -17.6vw), calc(-50% + -41.6vh)) scale(0.85) rotate(45deg); }
  30.6% { transform: translate(calc(-50% + 45.0vw), calc(-50% + 12.9vh)) scale(1.07) rotate(110deg); }
  34.0% { transform: translate(calc(-50% + 45.8vw), calc(-50% + 36.4vh)) scale(1.1) rotate(122deg); }
  52.0% { transform: translate(calc(-50% + -6.0vw), calc(-50% + -47.6vh)) scale(0.86) rotate(187deg); }
  60.0% { transform: translate(calc(-50% + 24.4vw), calc(-50% + -39.9vh)) scale(0.99) rotate(216deg); }
  77.7% { transform: translate(calc(-50% + -44.4vw), calc(-50% + -37.5vh)) scale(1.14) rotate(280deg); }
  94.9% { transform: translate(calc(-50% + 21.2vw), calc(-50% + -15.8vh)) scale(0.92) rotate(342deg); }
  100.0% { transform: translate(calc(-50% + 17.8vw), calc(-50% + 18.8vh)) scale(1.02) rotate(360deg); }
}
@keyframes roam4 {
  0.0% { transform: translate(calc(-50% + 24.0vw), calc(-50% + 22.9vh)) scale(0.89) rotate(0deg); }
  3.0% { transform: translate(calc(-50% + 29.0vw), calc(-50% + 40.1vh)) scale(0.94) rotate(11deg); }
  7.9% { transform: translate(calc(-50% + 41.9vw), calc(-50% + 17.5vh)) scale(1.15) rotate(29deg); }
  28.7% { transform: translate(calc(-50% + -24.1vw), calc(-50% + -49.0vh)) scale(0.96) rotate(103deg); }
  46.2% { transform: translate(calc(-50% + 38.0vw), calc(-50% + -25.0vh)) scale(0.88) rotate(166deg); }
  66.9% { transform: translate(calc(-50% + -36.5vw), calc(-50% + -48.3vh)) scale(1.12) rotate(241deg); }
  89.5% { transform: translate(calc(-50% + 44.0vw), calc(-50% + -18.5vh)) scale(1.05) rotate(322deg); }
  95.1% { transform: translate(calc(-50% + 24.4vw), calc(-50% + -9.1vh)) scale(0.85) rotate(342deg); }
  100.0% { transform: translate(calc(-50% + 24.0vw), calc(-50% + 22.9vh)) scale(0.89) rotate(360deg); }
}
@keyframes roam5 {
  0.0% { transform: translate(calc(-50% + 37.4vw), calc(-50% + -35.8vh)) scale(0.86) rotate(0deg); }
  10.0% { transform: translate(calc(-50% + 43.6vw), calc(-50% + 3.8vh)) scale(1.09) rotate(36deg); }
  18.7% { transform: translate(calc(-50% + 23.9vw), calc(-50% + 6.4vh)) scale(1.09) rotate(67deg); }
  38.3% { transform: translate(calc(-50% + -8.6vw), calc(-50% + -49.5vh)) scale(0.86) rotate(138deg); }
  57.0% { transform: translate(calc(-50% + 24.9vw), calc(-50% + -1.8vh)) scale(1.01) rotate(205deg); }
  61.5% { transform: translate(calc(-50% + 14.7vw), calc(-50% + -1.0vh)) scale(1.14) rotate(221deg); }
  69.5% { transform: translate(calc(-50% + 28.8vw), calc(-50% + -21.9vh)) scale(0.9) rotate(250deg); }
  83.4% { transform: translate(calc(-50% + 38.9vw), calc(-50% + 32.2vh)) scale(0.92) rotate(300deg); }
  100.0% { transform: translate(calc(-50% + 37.4vw), calc(-50% + -35.8vh)) scale(0.86) rotate(360deg); }
}
@keyframes roam6 {
  0.0% { transform: translate(calc(-50% + 27.1vw), calc(-50% + 27.9vh)) scale(0.96) rotate(0deg); }
  14.9% { transform: translate(calc(-50% + -15.1vw), calc(-50% + -34.4vh)) scale(1.15) rotate(54deg); }
  32.9% { transform: translate(calc(-50% + 45.7vw), calc(-50% + 10.6vh)) scale(0.95) rotate(118deg); }
  38.7% { transform: translate(calc(-50% + 24.8vw), calc(-50% + 18.6vh)) scale(0.89) rotate(139deg); }
  48.8% { transform: translate(calc(-50% + 3.1vw), calc(-50% + -34.5vh)) scale(1.13) rotate(176deg); }
  58.3% { transform: translate(calc(-50% + 36.8vw), calc(-50% + -18.0vh)) scale(1.03) rotate(210deg); }
  63.8% { transform: translate(calc(-50% + 33.8vw), calc(-50% + 17.5vh)) scale(0.85) rotate(230deg); }
  82.3% { transform: translate(calc(-50% + -26.3vw), calc(-50% + -38.0vh)) scale(1.07) rotate(296deg); }
  100.0% { transform: translate(calc(-50% + 27.1vw), calc(-50% + 27.9vh)) scale(0.96) rotate(360deg); }
}
@keyframes roam7 {
  0.0% { transform: translate(calc(-50% + -26.8vw), calc(-50% + -46.4vh)) scale(1.1) rotate(0deg); }
  18.6% { transform: translate(calc(-50% + 24.8vw), calc(-50% + -40.3vh)) scale(1.08) rotate(67deg); }
  29.4% { transform: translate(calc(-50% + 32.5vw), calc(-50% + 11.4vh)) scale(0.85) rotate(106deg); }
  33.6% { transform: translate(calc(-50% + 44.0vw), calc(-50% + 8.8vh)) scale(1.02) rotate(121deg); }
  36.6% { transform: translate(calc(-50% + 38.3vw), calc(-50% + 20.1vh)) scale(1.13) rotate(132deg); }
  41.9% { transform: translate(calc(-50% + 23.8vw), calc(-50% + 20.4vh)) scale(0.89) rotate(151deg); }
  62.9% { transform: translate(calc(-50% + -24.4vw), calc(-50% + -39.0vh)) scale(0.93) rotate(226deg); }
  80.7% { transform: translate(calc(-50% + 20.7vw), calc(-50% + -1.9vh)) scale(1.15) rotate(291deg); }
  100.0% { transform: translate(calc(-50% + -26.8vw), calc(-50% + -46.4vh)) scale(1.1) rotate(360deg); }
}
@keyframes roam8 {
  0.0% { transform: translate(calc(-50% + 45.7vw), calc(-50% + -41.2vh)) scale(1.15) rotate(0deg); }
  7.5% { transform: translate(calc(-50% + 28.9vw), calc(-50% + -39.0vh)) scale(0.93) rotate(27deg); }
  15.3% { transform: translate(calc(-50% + 32.2vw), calc(-50% + -8.1vh)) scale(0.9) rotate(55deg); }
  29.9% { transform: translate(calc(-50% + 16.8vw), calc(-50% + 44.0vh)) scale(1.14) rotate(108deg); }
  52.5% { transform: translate(calc(-50% + 37.9vw), calc(-50% + -39.3vh)) scale(1.02) rotate(189deg); }
  67.2% { transform: translate(calc(-50% + 30.1vw), calc(-50% + 18.0vh)) scale(0.85) rotate(242deg); }
  81.4% { transform: translate(calc(-50% + 44.8vw), calc(-50% + -32.9vh)) scale(1.08) rotate(293deg); }
  89.7% { transform: translate(calc(-50% + 41.3vw), calc(-50% + -0.2vh)) scale(1.1) rotate(323deg); }
  100.0% { transform: translate(calc(-50% + 45.7vw), calc(-50% + -41.2vh)) scale(1.15) rotate(360deg); }
}
@keyframes roam9 {
  0.0% { transform: translate(calc(-50% + 40.6vw), calc(-50% + -3.0vh)) scale(1.06) rotate(0deg); }
  6.6% { transform: translate(calc(-50% + 42.7vw), calc(-50% + -41.8vh)) scale(0.85) rotate(24deg); }
  21.1% { transform: translate(calc(-50% + 39.9vw), calc(-50% + 43.0vh)) scale(1.03) rotate(76deg); }
  48.7% { transform: translate(calc(-50% + -35.2vw), calc(-50% + -47.0vh)) scale(1.13) rotate(175deg); }
  72.9% { transform: translate(calc(-50% + 37.9vw), calc(-50% + 8.4vh)) scale(0.88) rotate(262deg); }
  74.8% { transform: translate(calc(-50% + 38.4vw), calc(-50% + 19.9vh)) scale(0.95) rotate(269deg); }
  83.0% { transform: translate(calc(-50% + 17.0vw), calc(-50% + -9.0vh)) scale(1.15) rotate(299deg); }
  89.1% { transform: translate(calc(-50% + 13.0vw), calc(-50% + -43.8vh)) scale(0.95) rotate(321deg); }
  100.0% { transform: translate(calc(-50% + 40.6vw), calc(-50% + -3.0vh)) scale(1.06) rotate(360deg); }
}
.ambient::after { content: none; }

/* Everything the desk draws sits above it. */
/* Lifted above the ambient layer WITHOUT touching how anything is positioned.
   The first version set `position: relative` on this list, which quietly
   overrode the collapse handle's `absolute` — so its `right` stopped anchoring
   it to anything and it drifted into the middle of the chart. A z-index needs a
   positioned element, not a RELATIVE one: the handle already had `absolute` and
   only needed the stacking. */
html.glass .top, html.glass .tabs, html.glass .layout,
html.glass .whobox { position: relative; z-index: 1; }
html.glass .collapse { z-index: 20; }

/* Asked for less movement: the pools stay, they simply stop. The depth was
   never the motion — the motion only made the depth visible. */
@media (prefers-reduced-motion: reduce) {
  .ambient i { animation: none; transform: translate(-50%, -50%); }
}

/* ═══ Four corrections ═══════════════════════════════════════════════════ */

/* (1) Dark text on the spectrum was hard to read. White, with a faint shadow
   so it holds against the pale middle of the gradient too. */
html.glass .act-primary, html.glass .tp-magic, html.glass .primary {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(20, 8, 31, 0.45);
}
html.glass .act-primary:hover { color: #ffffff; }

/* (2) With a pattern open the row carries five things. They shrink to fit one
   line rather than wrapping the delete button onto its own row. */
html.glass .ctl { flex-wrap: nowrap; gap: var(--s1); }
html.glass .ctl .members { font-size: 9px; margin-right: auto; white-space: nowrap; }
html.glass .ctl .ico { padding: 2px var(--s2); font-size: 9.5px; }
html.glass .ctl .ico.eyebtn, html.glass .ctl .ico.danger,
html.glass .ctl .ico:not([data-join]):not([data-leave]) { flex: none; }

/* (3) The full-height edge was one signal too many — the strip across the top
   already says it, and the bar only crowded the card. */
html.glass .note.is-open::before { display: none; }
html.glass .note.is-open { overflow: visible; }

/* (4) Timeframe chips: centred properly, rounder, tighter. A chip whose text
   sits off-centre is the sort of thing you cannot name but can always see. */
html.glass .tfrow button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 16px; min-width: 22px; padding: 0 5px;
  border-radius: var(--s2);
  line-height: 1; font-size: 8.5px;
}
html.glass .tfrow { gap: 3px; align-items: center; }


/* One row, whatever is on it. The five controls under an open pattern shrink
   rather than letting the delete button drop to a line of its own. */
html.glass .ctl { flex-wrap: nowrap; gap: var(--s1); align-items: center; }
html.glass .ctl .members { font-size: 9px; margin-right: auto; }
html.glass .ctl .ico {
  height: 20px; padding: 0 var(--s2); font-size: 9.5px;
  display: inline-flex; align-items: center; justify-content: center;
}
html.glass .ctl .ico[data-join], html.glass .ctl .ico[data-leave] { flex: 0 1 auto; min-width: 0; }


/* ═══ Six corrections ═══════════════════════════════════════════════════ */

/* (1) White, and white at rest — not only under the pointer. */
html.glass #newPattern.act-primary,
html.glass #newPattern.act-primary:hover,
html.glass .act-primary { color: #ffffff; }

/* (2) The controls under a pattern get air above them, line up with the count
   beside them, and their labels sit on the pill's centre line rather than
   riding high in it. */
html.glass .ctl { margin-top: var(--s4); align-items: center; }
html.glass .ctl .members { line-height: 20px; }
html.glass .ctl .ico {
  height: 20px; line-height: 20px; padding: 0 var(--s3);
  display: inline-flex; align-items: center; justify-content: center;
}

/* (3) The strip has to follow the card's corners. Square corners over a 12px
   radius leave two bright triangles poking past the edge — inset by the border
   and given the same curve, it becomes part of the card. */
html.glass .note.is-open::after {
  top: 1px; left: 1px; right: 1px;
  border-radius: 11px 11px 0 0;
}

/* (4) The people, as one group.
   Overlapping slightly is how every tool shows "these are together" — a row of
   separate circles reads as separate controls. The ring is the panel's own
   colour so the faces sit ON the header rather than floating above it. */
.people { display: flex; align-items: center; }
.people .presence { display: flex; align-items: center; }
/* ONE GROUP, ONE RULE.
   Every face overlaps its neighbour by the same 8px and carries the same 2px
   ring — the ring itself is set inline, in that person's colour, so this must
   NOT paint one of its own over the top. Before, the grouped rule stamped a
   dark ring on every avatar while only some of them had a colour, so the row
   came out uneven: some circles ringed, some bare, and the overlap reading
   differently depending on which. */
html.glass .people .avatar,
html.glass .people .presence .avatar {
  box-shadow: 0 0 0 2px var(--ink, #9aa8bb);
  /* Just enough to read as one group, and no more.
     The overlap has to be counted against the RING, not the circle: each face
     is 24px with a 2px ring on each side, so it occupies 28px visually. At
     -8px the rings ate a third of the face underneath. At -2px the rings meet
     and barely cross — still unmistakably a row of people who are together,
     with everybody's face still fully legible, which is the point of showing
     faces at all. */
  margin-left: -2px;
}
html.glass .people .avatar:first-child,
html.glass .people .presence .avatar:first-child { margin-left: 0; }
html.glass .avatar { width: 24px; height: 24px; font-size: 10.5px; }
html.glass .me.avatar {
  z-index: 1;
  /* .me is a pill for labels. On a face it must not add a border or padding. */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: none;
}
html.glass .peer.away { filter: grayscale(1); opacity: 0.4; }

/* (5) The green dot is gone. It reported that a poll had succeeded, which the
   faces beside it already prove — they arrive on the same poll — and a failure
   says so in words. A light nobody can name is chrome, not information. */
html.glass .livepill { display: none; }
html.glass .livepill.down, html.glass .livepill.off {
  display: inline-flex; align-items: center;
  width: auto; height: auto; font-size: 10.5px; border-radius: var(--pill);
  padding: 2px var(--s2); background-color: rgba(255, 69, 96, 0.14); color: #ff8095;
}

/* (6) A group with one pattern in it had a different gap underneath than it had
   at the sides. The body gets one padding on all four edges and the card inside
   carries no stray margin. */
html.glass .grp-body { padding: var(--s2); gap: var(--s2); }
html.glass .grp-body > .note:last-child,
html.glass .grp-body > .pat-card:last-child { margin-bottom: 0; }
html.glass .note, html.glass .pat-card { margin-bottom: 0; }


/* The count was an inline span sitting on a text-height box while the buttons
   beside it were 20px tall — three pixels of difference, which is exactly the
   kind of thing you cannot name but always see. Same box, same centre line. */
html.glass .ctl .members {
  display: inline-flex; align-items: center;
  height: 20px; line-height: 1;
}




/* ═══ Legibility without touching the design ═════════════════════════════

   The look is now the 2:58 one exactly, and that design peaks bright enough
   under a pool that contrast maths alone cannot be satisfied there — the only
   fixes are darkening the pools or whitening the text, and both are the thing
   being asked for back. So: a shadow instead.

   A dark halo behind light type separates it from whatever is glowing behind
   it. It does not raise the WCAG number, which is measured on flat colour, but
   it is what actually makes text readable over a photograph or a gradient, and
   it is invisible against the dark parts of the desk where most of the text
   lives. Applied only in the panel, and only to text — never to the chart. */
html.glass .side, html.glass .tradepanel { text-shadow: 0 1px 2px rgba(6, 4, 16, 0.55); }
html.glass .side b, html.glass .side strong,
html.glass .tradepanel b, html.glass .tcard header b {
  text-shadow: 0 1px 3px rgba(6, 4, 16, 0.68);
}
/* The small uppercase labels were the least readable thing on the desk at
   2:58 (1.71 : 1). They take the step up in colour and the firmer shadow. */
html.glass .tl i, html.glass .tlevels i { color: var(--text2); }



/* ═══ Blob Lab ═══════════════════════════════════════════════════════════
   A tuning panel, not part of the product. Alt+B, or ?blobs in the URL.
   Deliberately plain and dense: it is a set of controls, and dressing it in
   the desk's own glass would make it harder to judge the colours it edits. */
.bloblab {
  position: fixed; bottom: 58px; left: 14px; z-index: 9999;
  width: 236px; padding: 10px;
  max-height: calc(100vh - 92px); overflow-y: auto;
  background: #0d0b18; color: #e8e6f4;
  border: 1px solid rgba(180, 170, 255, 0.22);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bloblab header { display: flex; align-items: center; margin-bottom: 8px; }
.bloblab header b { font-size: 12px; letter-spacing: .02em; }
.bloblab header button {
  margin-left: auto; width: 20px; height: 20px; line-height: 1;
  background: none; border: 0; color: #9c97b8; font-size: 16px; cursor: pointer;
}
.bloblab header button:hover { color: #fff; }
.bl-globals { display: grid; gap: 6px; margin-bottom: 9px; }
.bl-globals label { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; font-size: 10.5px; color: #a9a4c4; }
.bl-globals i { font-style: normal; color: #e8e6f4; font-variant-numeric: tabular-nums; }
.bl-globals input[type=range] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #b06cf5; }
.bl-rows { display: grid; gap: 4px; }
.bl-row { display: grid; grid-template-columns: 14px 1fr 30px 30px; gap: 5px; align-items: center; }
.bl-n { font-size: 9.5px; color: #7d78a0; text-align: right; font-variant-numeric: tabular-nums; }
.bl-prev { height: 17px; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); }
.bl-row input[type=color] {
  width: 30px; height: 20px; padding: 0; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,.16); border-radius: 4px;
}
.bl-acts { display: flex; gap: 6px; margin-top: 10px; }
.bl-acts button {
  flex: 1; padding: 6px 8px; font: inherit; font-size: 11px; cursor: pointer;
  border-radius: 7px; border: 1px solid rgba(180,170,255,.24);
  background: rgba(255,255,255,.05); color: #d8d4ee;
}
.bl-acts .bl-primary {
  background: linear-gradient(115deg, #ff5fd2, #b06cf5 46%, #35baf2);
  color: #14081f; border-color: transparent; font-weight: 600;
}
.bl-acts button:hover { filter: brightness(1.08); }
.bl-out { width: 100%; height: 108px; margin-top: 8px; font: 10px/1.35 ui-monospace, monospace;
  background: #06060f; color: #cfcae4; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; }

/* The launcher. Bottom left is the only corner this desk leaves empty — the
   chart's own toolbar runs up the left EDGE but stops well above the footer,
   and everything of ours is in the header and the right sidebar.

   It sits quiet until you go near it: a small disc carrying the AI sweep at
   low opacity, which comes up to full on hover and stays lit while the panel
   is open. A tuning tool should be findable without ever asking to be used. */
html.glass .bloblab-btn {
  position: fixed; bottom: 14px; left: 14px; z-index: 9998;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(14, 12, 26, 0.72);
  border: 1px solid rgba(180, 170, 255, 0.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0.4;
  transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
}
html.glass .bloblab-btn i {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(115deg, #ff5fd2, #b06cf5 46%, #35baf2);
}
html.glass .bloblab-btn:hover { opacity: 1; transform: scale(1.08); }
html.glass .bloblab-btn.on {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(176, 108, 245, 0.45), 0 6px 18px rgba(176, 108, 245, 0.35);
}

/* Section headings, so the desk's surfaces and the blobs do not read as one
   long undifferentiated list of sliders. */
.bl-sec {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: #7d78a0; margin: 2px 0 5px;
}
.bl-sec + .bl-globals { margin-bottom: 10px; }
.bl-swatch {
  display: flex !important; align-items: center; justify-content: space-between;
  grid-template-columns: none !important;
}
.bl-swatch input[type=color] {
  width: 34px; height: 20px; padding: 0; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,.16); border-radius: 4px;
}


/* ═══ Three fixes ════════════════════════════════════════════════════════ */

/* (1) TABS, ONE HEIGHT.
   An inactive tab measured 29px and the active one 34px. Nothing was setting a
   height — each tab was sized by its tallest child, and only the active tab
   carries a close button, which renders 20px against the label's 15px. So the
   active tab grew by exactly the difference. The strip aligns to flex-end, so
   the shorter ones hung from the bottom and looked cropped at the top.

   Fixed height on the tab, and the controls inside it sized so they can never
   drive it again. */
html.glass .tabs .tab {
  height: 32px;
  box-sizing: border-box;
  padding-top: 0; padding-bottom: 0;
  align-items: center;
}
html.glass .tabs .tabstrip { align-items: center; }
html.glass .tabs .tab .tab-x,
html.glass .tabs .tab button {
  width: 16px; height: 16px; min-height: 0; line-height: 16px;
  padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
html.glass .tabs .tab .tab-name { line-height: 16px; }

/* (2) SPACING INSIDE A GROUP.
   .grp-body was `display: block` carrying `gap: 6px` — and gap does nothing in
   block layout, so the spacing between pattern cards was never actually being
   set by anything. A flex column makes the gap real, and every card now sits
   the same distance from its neighbour and from the group's own edges. */
html.glass .grp-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s2);
}
html.glass .grp-body > * { margin: 0; }

/* (3) TRADE CARD SURFACE.
   Marco's colour, rgb(81 7 69 / 84%), and it belongs to the TRADE cards only —
   I had put it on the pattern cards as well, which was wrong: those keep the
   panel's own glass film so the two kinds of card stay visibly different
   things. Hover and live are the same hue lifted in value rather than shifted
   in hue — +27% and +55% luminance — so the states read as one material under
   more light. Measured on the worst backdrop: 9.76 / 8.27 / 6.88 : 1 for the
   dimmest text. */
html.glass .tcard {
  background-color: rgb(81 7 69 / 84%);
  border: 1px solid rgba(255, 160, 230, 0.14);
  transition: background-color .14s ease, border-color .14s ease;
}
html.glass .tcard:hover {
  background-color: rgb(103 12 88 / 88%);
  border-color: rgba(255, 160, 230, 0.24);
}
/* In the market: brightest of the three, keeping the glow it already had. */
html.glass .tcard.live {
  background-color: rgb(124 16 106 / 92%);
  border-color: rgba(255, 175, 235, 0.42);
}

/* ═══ Account ════════════════════════════════════════════════════════════
   The welcome overlay, the profile form and the desk-key manager. Styled
   independently of the skin so the first thing a new person sees does not
   depend on a preference they have not set yet. */
.acct-veil {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(4, 2, 10, 0.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ece9f6;
}
.acct-card {
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: #120c1f;
  border: 1px solid rgba(190, 170, 255, 0.20);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}
.acct-card.wide { max-width: 560px; }
.acct-card header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 0;
}
.acct-card h2 {
  margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
  background: var(--ai-sweep, linear-gradient(115deg,#ff5fd2,#b06cf5 46%,#35baf2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.acct-card header button {
  margin-left: auto; width: 26px; height: 26px; flex: none;
  background: none; border: 0; color: #8e88ad; font-size: 20px; line-height: 1;
  cursor: pointer; border-radius: 8px;
}
.acct-card header button:hover { color: #fff; background: rgba(255,255,255,.07); }
.acct-body { padding: 14px 20px 20px; }

.acct-lead { margin: 0 0 14px; color: #bdb7d4; font-size: 13.5px; }
.acct-note { margin: 14px 0 0; color: #bdb7d4; font-size: 13px; }
.acct-note b, .acct-lead b { color: #ece9f6; }
.acct-fine { margin: 8px 0 0; color: #8e88ad; font-size: 12px; line-height: 1.5; }
.acct-fine a { color: #c9a8f5; }
.mine-lang-bare { margin: 0 0 12px; }
.mine-lang .lang-seg,
.mine-lang-bare .lang-seg {
  display: inline-flex;
  direction: ltr;
  align-items: stretch;
  height: 28px;
  margin-top: 6px;
  border: 1px solid rgba(190, 170, 255, 0.28);
  border-radius: 8px;
  overflow: hidden;
}
.mine-lang .lang-seg button,
.mine-lang-bare .lang-seg button {
  background: transparent;
  color: #d6d1ea;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding: 0 12px;
  height: 100%;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.mine-lang .lang-seg button:first-child,
.mine-lang-bare .lang-seg button:first-child { border-left: 0; }
.mine-lang .lang-seg button.on,
.mine-lang-bare .lang-seg button.on {
  background: rgba(176, 108, 245, 0.28);
  color: #f4f2ff;
}
html[lang="ar"] .mine-lang .lang-seg,
html[lang="ar"] .mine-lang-bare .lang-seg { direction: ltr; }
.acct-h { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: #ece9f6; }
.acct-acts .acct-danger,
.acct-acts .acct-danger:hover {
  color: #ffb4c0;
  border-color: rgba(255, 77, 109, 0.45);
  background: rgba(255, 77, 109, 0.08);
}
html[lang="ar"] .acct-card { direction: rtl; text-align: right; }
html[lang="ar"] .acct-card header button { margin-left: 0; margin-right: auto; }
.acct-dim { color: #8e88ad; font-size: 13px; margin: 0; }

.acct-points { margin: 0 0 4px; padding: 0; list-style: none; display: grid; gap: 9px; }
.acct-points li {
  position: relative; padding-left: 20px; font-size: 13px; color: #bdb7d4;
}
.acct-points li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ai-sweep, linear-gradient(115deg,#ff5fd2,#b06cf5 46%,#35baf2));
}
.acct-points b { color: #ece9f6; font-weight: 600; }

.acct-lab { display: block; margin: 0 0 13px; font-size: 12px; color: #a9a2c6; }
.acct-lab em {
  display: block; font-style: normal; font-size: 11px; color: #837da0;
  margin-top: 1px;
}
.acct-lab input[type=email],
.acct-lab input[type=text],
.acct-lab input[type=password],
.acct-join input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
  padding: 9px 12px; font: inherit; font-size: 14px;
  color: #f4f2ff; background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(190, 170, 255, 0.22); border-radius: 10px;
}
.acct-lab input:focus, .acct-join input:focus {
  outline: none; border-color: rgba(176, 108, 245, 0.7);
  box-shadow: 0 0 0 3px rgba(176, 108, 245, 0.18);
}

.acct-swatches { display: flex; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.acct-sw {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 0; padding: 0; background-image: none; box-shadow: none;
}
.acct-sw.on { outline: 2px solid #f4f2ff; outline-offset: 2px; }

.acct-pic { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.acct-prev {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  color: #050810; font-weight: 700; font-size: 16px;
  background-image: none; box-shadow: none; border: 0;
}
.acct-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-pic button {
  padding: 6px 11px; font: inherit; font-size: 12px; cursor: pointer;
  color: #d8d3ee; background: rgba(255,255,255,.05);
  border: 1px solid rgba(190,170,255,.22); border-radius: 999px;
}
.acct-pic button:hover { background: rgba(255,255,255,.1); }

.acct-warn {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 10px;
  background: rgba(255, 69, 96, 0.12); color: #ff9db0; font-size: 12.5px;
}
.acct-acts { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.acct-acts button {
  flex: 1 1 auto; padding: 10px 16px; font: inherit; font-size: 13.5px;
  cursor: pointer; border-radius: 999px;
  border: 1px solid rgba(190, 170, 255, 0.24);
  background: rgba(255, 255, 255, 0.05); color: #d8d3ee;
  transition: background-color .14s ease, filter .14s ease;
}
.acct-acts button:hover { background: rgba(255,255,255,.1); }
/* A SHORTHAND COLLISION, worth naming because it is invisible until it bites.
 *
 * `.acct-acts button:hover` sets `background:` — the SHORTHAND — which resets
 * background-image to none as part of setting a colour. It is more specific
 * than `.acct-acts .acct-primary` (one class plus an element beats one class),
 * so on hover it won for background-image and the gradient was discarded. The
 * primary's own hover rule only set background-color: transparent, so nothing
 * put the gradient back: the result was a transparent button carrying near
 * black text on a dark card, which reads exactly as the button disappearing.
 *
 * Both states now declare background-image explicitly, at a specificity that
 * beats the generic rule, and no shorthand is used where one would silently
 * clear the other half. */
.acct-acts .acct-primary,
.acct-acts .acct-primary:hover,
.acct-acts .acct-primary:focus-visible {
  background-image: var(--ai-sweep, linear-gradient(115deg,#ff5fd2,#b06cf5 46%,#35baf2));
  background-color: transparent;
  color: #14081f;
  border-color: transparent;
  font-weight: 600;
}
.acct-acts .acct-primary:hover { filter: brightness(1.08); }

/* The keys. Each is a desk, so each gets a card rather than a table row —
   the key itself is the thing you copy and send someone, so it is shown in
   full and in a monospace face rather than hidden behind a button. */
.acct-keys { display: grid; gap: 9px; margin-bottom: 14px; }
.acct-key {
  padding: 12px 14px; border-radius: 13px;
  border: 1px solid rgba(190, 170, 255, 0.16);
  background: rgba(255, 255, 255, 0.035);
}
.acct-key.on {
  border-color: rgba(176, 108, 245, 0.55);
  background: rgba(176, 108, 245, 0.10);
  box-shadow: 0 0 0 1px rgba(176,108,245,.18);
}
.acct-key-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.acct-key-main b { font-size: 14px; font-weight: 600; }
.acct-key-main code {
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #c9a8f5; background: rgba(0,0,0,.35);
  padding: 4px 7px; border-radius: 6px; user-select: all;
}
.acct-key-meta { font-size: 11.5px; color: #837da0; margin-top: 3px; }
.acct-key-meta i { font-style: normal; color: #c9a8f5; }
.acct-key-acts { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.acct-key-acts button {
  padding: 4px 10px; font: inherit; font-size: 11.5px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(190,170,255,.2);
  background: transparent; color: #b9b2d6;
}
.acct-key-acts button:hover { background: rgba(255,255,255,.08); color: #fff; }

.acct-join { display: flex; gap: 7px; }
.acct-join input { margin-top: 0; }
.acct-join button {
  flex: none; padding: 9px 16px; font: inherit; font-size: 13px; cursor: pointer;
  border-radius: 10px; border: 1px solid rgba(190,170,255,.24);
  background: rgba(255,255,255,.06); color: #d8d3ee;
}
.acct-join button:hover { background: rgba(255,255,255,.12); }

/* A profile picture replaces the initial in the corner, inside a ring of that
   person's own colour — the same colour as their cursor and their drawings, so
   the face, the arrow on the chart and the author on a card are one person.
   The ring is padding over the button's background, not a border, so the
   circle stays exactly the size of everyone else's. */
/* WHY THE PICTURE WAS NEVER FULL SIZE.
 *
 * Measured, after guessing at it too many times: the button computes
 * `padding: 2px 6px` — from `html.glass .me` further up this file, which beats
 * a plain `.avatar.has-pic` on specificity — plus a 0.8px border. With
 * box-sizing: border-box on a 24px button that leaves a CONTENT box of 12×20,
 * and `width/height: 100%` on the image resolves against the content box, not
 * the circle. So the picture was being squeezed into 12×20 inside a 24px
 * circle, which is exactly what it looked like.
 *
 * Two fixes, either of which would do, both applied because this has now cost
 * several rounds:
 *   · the padding and border are reset at a specificity that actually wins.
 *   · the image is positioned absolutely with all four offsets at zero, which
 *     fills the PADDING box regardless of what the padding is. Whatever rule
 *     is added to these buttons later, the picture cannot be inset again.
 * `border-radius: inherit` keeps it circular without restating the shape. */
html.glass .people .avatar.has-pic,
html.glass .avatar.has-pic,
.avatar.has-pic {
  padding: 0;
  border: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
html.glass .people .avatar.has-pic > img,
html.glass .avatar.has-pic > img,
.avatar.has-pic > img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}
/* The person's colour is set inline as a ring outside the circle, so this only
   has to stop the grouped-avatar rule from painting its own ring over it. */
/* Each face sits on the one before it, left to right, so the overlap reads in
   a consistent direction instead of depending on paint order. */
html.glass .people .presence .avatar:nth-child(1) { z-index: 1; }
html.glass .people .presence .avatar:nth-child(2) { z-index: 2; }
html.glass .people .presence .avatar:nth-child(3) { z-index: 3; }
html.glass .people .presence .avatar:nth-child(4) { z-index: 4; }
html.glass .people > .avatar.me { z-index: 5; }
.mydsk {
  margin: 0 8px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(176, 108, 245, 0.5);
  background: rgba(176, 108, 245, 0.14);
  color: #ece9f6;
  font: 600 12px/1.2 "Source Sans Pro", "Segoe UI", sans-serif;
}
.mydsk:hover { background: rgba(176, 108, 245, 0.28); }
.mename {
  font-size: 12px; color: #d5dbe6; max-width: 9em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peerbox { position: relative; display: inline-flex; align-items: center; margin-left: 8px; }
.peername { font-size: 11px; color: #c5d0de; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.glass .people .avatar { position: relative; }

/* ═══ Coming back ════════════════════════════════════════════════════════
   The sign-in row sits above the two buttons, because someone who already
   has a profile should not have to read past two options that both look like
   starting over. Given its own panel so it reads as a different kind of
   action, not a third button in the same group. */
.acct-back {
  margin: 4px 0 0;
  padding: 12px 13px 10px;
  border-radius: 13px;
  border: 1px solid rgba(190, 170, 255, 0.18);
  background: rgba(255, 255, 255, 0.035);
}
.acct-back h3 {
  margin: 0 0 9px; font-size: 12.5px; font-weight: 600; color: #ece9f6;
}
.acct-backrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; }
.acct-backrow input {
  min-width: 0; box-sizing: border-box; margin: 0;
  padding: 8px 11px; font: inherit; font-size: 13px;
  color: #f4f2ff; background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(190, 170, 255, 0.22); border-radius: 9px;
}
.acct-backrow input:focus {
  outline: none; border-color: rgba(176, 108, 245, 0.7);
  box-shadow: 0 0 0 3px rgba(176, 108, 245, 0.18);
}
.acct-backrow button {
  padding: 8px 15px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  border-radius: 9px; border: 1px solid transparent; color: #14081f;
  background: var(--ai-sweep, linear-gradient(115deg,#ff5fd2,#b06cf5 46%,#35baf2));
}
.acct-backrow button:hover { filter: brightness(1.08); }
.acct-back .acct-fine { margin-top: 8px; }

/* A rule with a word in it, so the two paths are visibly alternatives rather
   than a list of four things to do. */
.acct-or {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 2px; color: #7d78a0; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
}
.acct-or::before, .acct-or::after {
  content: ''; flex: 1; height: 1px; background: rgba(190, 170, 255, 0.16);
}

@media (max-width: 460px) {
  .acct-backrow { grid-template-columns: 1fr; }
}

/* ═══ The live trade ═════════════════════════════════════════════════════

   A trade actually in the market: Marco's ground, rgb(0 3 30), with a band of
   gold travelling around a 2px edge.

   HOW IT IS DRAWN — and why not the way I tried first. The obvious approach is
   a rotating conic-gradient in a ::before with an ::after masking all but the
   edge. It computed correctly and never appeared, and rather than keep
   guessing at which of overflow, stacking order or clipping was eating it,
   this uses the technique that has no moving parts to get wrong:

     · the border is 2px of TRANSPARENT, so the border box is a real 2px frame
     · two backgrounds are painted — the flat ground clipped to the PADDING
       box, the conic gradient clipped to the BORDER box
     · the flat ground therefore covers everything except the border, and the
       gradient shows through exactly there

   No pseudo-elements, no overflow, no z-index: one element, two backgrounds,
   and the browser's own box model does the masking.

   The rotation is a registered custom property. --tradeAngle is declared with
   @property so it has a type, which is what makes an angle animatable at all;
   without the declaration it is just a string and the keyframes do nothing.

   DELIBERATELY UNDERSTATED. The edge is gold at all times at about a quarter
   strength, with the bright band a brightening that travels around it — so
   the state is legible at every moment rather than only when the highlight
   happens to be facing you. Seven seconds per turn: noticeable when you look,
   ignorable while you read. */
@property --tradeAngle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

html.glass .tcard.live {
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background-image:
    linear-gradient(rgb(0 3 30), rgb(0 3 30)),
    conic-gradient(from var(--tradeAngle),
      rgba(245, 196, 81, .30)   0deg,
      rgba(245, 196, 81, .30) 205deg,
      rgba(245, 196, 81, .65) 275deg,
      rgba(255, 238, 190, 1)  312deg,
      rgba(245, 196, 81, .65) 348deg,
      rgba(245, 196, 81, .30) 360deg);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-color: rgb(0 3 30);
  animation: tradeSweep 7s linear infinite;
  box-shadow: 0 0 26px rgba(245, 196, 81, 0.13);
}

@keyframes tradeSweep {
  to { --tradeAngle: 360deg; }
}

/* Asked for stillness: the gold stays as a plain edge. This is a position with
   money on it, so the motion goes and the signal does not. */
@media (prefers-reduced-motion: reduce) {
  html.glass .tcard.live {
    animation: none;
    background-image:
      linear-gradient(rgb(0 3 30), rgb(0 3 30)),
      linear-gradient(rgba(245, 196, 81, .5), rgba(245, 196, 81, .5));
  }
}

/* On that ground the type wants to be plainly light rather than tinted. */
html.glass .tcard.live .tl b { color: #f7f4ff; }
html.glass .tcard.live .tl i { color: #c9c3e4; }
html.glass .tcard.live header b { color: #ffffff; }


/* ═══ Scrollbars ═════════════════════════════════════════════════════════
   The panel was showing the operating system's own scrollbar — a grey trough
   with arrow buttons at each end, from a different decade and a different
   design language than everything around it. Narrowed to a thumb with no
   track and no buttons: present while you are in the list, close to invisible
   otherwise. */
html.glass .side,
html.glass .tradepanel,
html.glass .notes,
html.glass .cards,
html.glass .tabmenu,
html.glass .acct-card {
  scrollbar-width: thin;
  scrollbar-color: rgba(190, 170, 255, 0.26) transparent;
}
html.glass .acct-card {
  border-radius: 20px;
  border-color: var(--glassEdge);
  box-shadow: var(--lift);
  background-color: rgba(8, 6, 18, 0.94);
}
html.glass .acct-card header { padding: 20px 24px 0; }
html.glass .acct-body { padding: 16px 24px 24px; }
html.glass .acct-lead { margin: 0 0 16px; color: var(--text2); font-size: 14px; }
html.glass .acct-lab { margin: 0 0 12px; }
html.glass .acct-lab input[type=email],
html.glass .acct-lab input[type=text],
html.glass .acct-lab input[type=password] { border-radius: 12px; }
html.glass .acct-acts { margin-top: 16px; }
@media (max-width: 480px) {
  .acct-veil { padding: 16px; }
  .acct-card header,
  html.glass .acct-card header { padding: 16px 16px 0; }
  .acct-body,
  html.glass .acct-body { padding: 12px 16px 16px; }
}
html.glass .side::-webkit-scrollbar,
html.glass .tradepanel::-webkit-scrollbar,
html.glass .notes::-webkit-scrollbar,
html.glass .cards::-webkit-scrollbar,
html.glass .tabmenu::-webkit-scrollbar,
html.glass .acct-card::-webkit-scrollbar { width: 10px; height: 10px; }

html.glass .side::-webkit-scrollbar-track,
html.glass .tradepanel::-webkit-scrollbar-track,
html.glass .notes::-webkit-scrollbar-track,
html.glass .cards::-webkit-scrollbar-track,
html.glass .tabmenu::-webkit-scrollbar-track,
html.glass .acct-card::-webkit-scrollbar-track { background: transparent; }

/* The 3px transparent border plus background-clip is what gives the thumb air
   on both sides without a track drawn behind it. */
html.glass .side::-webkit-scrollbar-thumb,
html.glass .tradepanel::-webkit-scrollbar-thumb,
html.glass .notes::-webkit-scrollbar-thumb,
html.glass .cards::-webkit-scrollbar-thumb,
html.glass .tabmenu::-webkit-scrollbar-thumb,
html.glass .acct-card::-webkit-scrollbar-thumb {
  background-color: rgba(190, 170, 255, 0.22);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
html.glass .side::-webkit-scrollbar-thumb:hover,
html.glass .tradepanel::-webkit-scrollbar-thumb:hover,
html.glass .notes::-webkit-scrollbar-thumb:hover,
html.glass .cards::-webkit-scrollbar-thumb:hover,
html.glass .tabmenu::-webkit-scrollbar-thumb:hover,
html.glass .acct-card::-webkit-scrollbar-thumb:hover {
  background-color: rgba(190, 170, 255, 0.42);
}

/* The arrow buttons at the ends go entirely — nobody has clicked one on
   purpose in twenty years, and they are the most dated part of the control. */
html.glass ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html.glass ::-webkit-scrollbar-corner { background: transparent; }


/* ═══ Card edges ═════════════════════════════════════════════════════════

   THE CROPPING. .tradepanel scrolls on BOTH axes, and the cards were exactly
   as wide as its content box — 304.8px of card in 305px of space. A border
   drawn on the boundary of a scroll container is a subpixel over the edge, so
   overflow-x clipped the left and right borders while leaving top and bottom
   untouched. That is why only the sides looked cut.

   Two fixes, because either alone leaves a way for it to come back: the panel
   no longer scrolls sideways at all — there is nothing there to reach, and a
   horizontal scrollbar under a list of cards was never wanted — and the cards
   are inset by 2px so a border is never drawn against the boundary. */
html.glass .tradepanel { overflow-x: hidden; }
html.glass .tp-cards { padding: 0 2px; }

/* THE CORNER. A live card carries a 2px edge and its neighbours 1px, so with
   one radius the two curves start at different points and the corners read as
   not quite lining up. The outer radius is what the eye follows, so it is held
   identical and the INNER radius is adjusted per border width — 12 minus the
   border in each case, which is what a single continuous curve would do. */
html.glass .tcard,
html.glass .tcard.lead { border-radius: var(--radius-sm); }
html.glass .tcard.live {
  border-radius: var(--radius-sm);
  background-origin: padding-box, border-box;
}

/* ═══ Which trade is on the chart ════════════════════════════════════════

   Only one trade is drawn at a time now, so the panel has to say which. The
   `picked` class already followed the click, but for a live trade it was
   invisible: the live styling comes later in this file and repaints the
   border, background and shadow, so two positions in the market looked
   identical whichever one you had chosen.

   Three signals, all driven by `picked`, so they move the moment you click
   without the list being re-rendered:
     · an ON CHART badge in the card's empty bottom-right corner
     · the chosen card's gold keeps travelling, with a brighter halo
     · a live card that is NOT on the chart keeps its gold edge, so "in the
       market" is still true at a glance, but its light stops and dims — the
       one that moves is the one you are looking at. */
html.glass .tcard { position: relative; }

html.glass .tcard.picked::after {
  content: 'ON CHART';
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font: 700 9px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  color: #14081f;
  background-image: var(--ai-sweep, linear-gradient(115deg,#ff5fd2,#b06cf5 46%,#35baf2));
  box-shadow: 0 2px 10px rgba(176, 108, 245, 0.35);
  pointer-events: none;
}

/* The chosen live trade: gold keeps moving, and the halo says "this one". */
html.glass .tcard.live.picked {
  box-shadow: 0 0 0 1px rgba(255, 236, 184, 0.55),
              0 0 30px rgba(245, 196, 81, 0.32);
}
html.glass .tcard.live.picked::after {
  color: #1b1200;
  background-image: linear-gradient(115deg, #ffe7a8, #f5c451);
  box-shadow: 0 2px 12px rgba(245, 196, 81, 0.45);
}

/* A live trade that is not on the chart: still gold, still in the market,
   but still — and a step quieter. */
html.glass .tcard.live:not(.picked) {
  animation-play-state: paused;
  box-shadow: none;
  background-image:
    linear-gradient(rgb(0 3 30), rgb(0 3 30)),
    linear-gradient(rgba(245, 196, 81, .32), rgba(245, 196, 81, .32));
}

/* ═══ Trading heading ════════════════════════════════════════════════════
   Same type as "Pattern notes" so the two modes read as the same panel doing
   a different job; no extra horizontal padding, because the trade panel
   already sits on the sidebar's own padding and its cards line up with it. */
.tp-intro { margin: 0 0 var(--s3, 9px); }
.tp-intro h2 {
  margin: 0 0 var(--s1, 3px);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text, #ece9f6);
}
.tp-intro p {
  margin: 0; font-size: 12px; line-height: 1.5;
  color: var(--text2, #bdb7d4);
}
.tp-intro b { color: var(--text, #ece9f6); font-weight: 600; }

/* ═══ The pattern picker's arrow ═════════════════════════════════════════
   That was the browser's own select arrow, which sits where the browser puts
   it — hard against the right edge — and ignores padding. On a pill with a
   fully rounded end it landed in the curve and looked misplaced. Replaced with
   a drawn chevron placed 18px in, which is where the straight part of the pill
   begins, so it sits on the same inset as the text on the left. */
html.glass .tradepanel select.tp-pick {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23d8d3ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}

/* ═══ Picker ═════════════════════════════════════════════════════════════
   The pattern dropdown, drawn by the desk. The native select is kept for its
   data and hidden; see js/picker.js for why the system list could not stay. */
.picker { position: relative; flex: 1 1 auto; min-width: 0; }
.picker-native {
  position: absolute !important; inset: 0; opacity: 0; pointer-events: none;
  width: 100%; height: 100%;
}

.picker-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-width: 0; height: 36px;
  padding: 0 16px 0 18px;
  font: inherit; font-size: 14px; color: #ece9f6; text-align: left;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid rgba(190, 170, 255, 0.20);
  background: rgba(8, 6, 20, 0.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.picker-btn:hover { border-color: rgba(190, 170, 255, 0.36); background-color: rgba(20, 14, 40, 0.6); }
.picker-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(176, 108, 245, 0.3); }
.picker-btn:disabled { cursor: default; opacity: .6; }
/* Open keeps the pill shape — the whole point of replacing the native control. */
.picker.open .picker-btn {
  border-color: rgba(176, 108, 245, 0.6);
  box-shadow: 0 0 0 3px rgba(176, 108, 245, 0.18);
}

.picker-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.picker-chev {
  flex: none; width: 12px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23d8d3ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
  transition: transform .18s ease;
}
.picker.open .picker-chev { transform: rotate(180deg); }

.picker-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  max-height: 280px; overflow-y: auto;
  border-radius: 14px;
  border: 1px solid rgba(190, 170, 255, 0.22);
  background: rgba(14, 10, 28, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  scrollbar-width: thin; scrollbar-color: rgba(190, 170, 255, 0.26) transparent;
  animation: pickerIn .14s ease-out;
}
@keyframes pickerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .picker-list { animation: none; } }

.picker-opt {
  display: flex; align-items: center;
  padding: 9px 12px; border-radius: 9px;
  font-size: 13.5px; color: #d8d3ee; cursor: pointer;
}
.picker-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-opt.hot { background: rgba(176, 108, 245, 0.16); color: #fff; }
.picker-opt.on { color: #fff; font-weight: 600; }
.picker-opt.on::after {
  content: ''; margin-left: auto; flex: none; width: 12px; height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.2 3.2L11 1' fill='none' stroke='%23c99bf8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 9px;
}
.picker-opt[aria-disabled="true"] { color: #7d78a0; cursor: default; }

/* ═══ The desk's read ════════════════════════════════════════════════════

   The desk speaking. A ring for the odds, a headline for what is most likely
   to happen next, and beneath it what that would mean and what is still
   missing. Kept inside the panel's own language — glass, the AI sweep on the
   ring, the same type — so it reads as the panel thinking out loud rather than
   an advert bolted on top of it. */
.tp-read {
  position: relative;
  display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
  margin: 12px 0;
  padding: 14px 16px 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(190, 170, 255, 0.22);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(176, 108, 245, 0.18), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(53, 186, 242, 0.12), transparent 60%),
    rgba(10, 7, 24, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
/* A slow light passing across the card: the desk is working, quietly. */
.tp-read::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.05) 48%, transparent 66%);
  background-size: 250% 100%;
  animation: tprSheen 7s ease-in-out infinite;
}
@keyframes tprSheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }

.tpr-gauge { position: relative; width: 76px; height: 76px; }
.tpr-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tpr-track { fill: none; stroke: rgba(190, 170, 255, 0.14); stroke-width: 6; }
.tpr-arc {
  fill: none; stroke: url(#tprSweep); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 0 6px rgba(176, 108, 245, 0.55));
}
.tpr-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 18px/1 "JetBrains Mono", ui-monospace, monospace; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.tp-read.unknown .tpr-arc { stroke: rgba(190, 170, 255, 0.3); filter: none; }

.tpr-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 9.5px/1 "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .12em;
  background-image: linear-gradient(115deg, #ff5fd2, #b06cf5 46%, #35baf2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tpr-eyebrow i {
  width: 6px; height: 6px; border-radius: 50%; background: #b06cf5;
  box-shadow: 0 0 0 0 rgba(176, 108, 245, .6); animation: tprPulse 2.4s ease-out infinite;
}
@keyframes tprPulse {
  0% { box-shadow: 0 0 0 0 rgba(176, 108, 245, .6); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(176, 108, 245, 0); }
}
.tpr-title {
  margin: 6px 0 3px; font-size: 15.5px; font-weight: 650; line-height: 1.3;
  letter-spacing: -0.01em; color: #fff; text-wrap: balance;
}
.tpr-then { margin: 0; font-size: 12.5px; line-height: 1.45; color: #d6d1ea; }
.tpr-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.tpr-wait:empty { display: none; }
.tpr-wlabel { font-size: 11px; color: #9c97b8; margin-right: 2px; }
.tpr-chip {
  padding: 3px 8px; border-radius: 999px;
  font: 600 10.5px/1.2 "JetBrains Mono", ui-monospace, monospace;
  border: 1px solid rgba(190, 170, 255, 0.24); color: #d6d1ea; background: rgba(255, 255, 255, 0.04);
}
.tpr-chip.ok { color: #00d48a; border-color: rgba(0, 212, 138, 0.4); background: rgba(0, 212, 138, 0.08); }
.tpr-basis { margin: 7px 0 0; font-size: 10.5px; color: #8e88ad; }

@media (prefers-reduced-motion: reduce) {
  .tp-read::before, .tpr-eyebrow i { animation: none; }
  .tpr-arc { transition: none; }
}

/* ── the note on each card ─────────────────────────────────────────────── */
.tnext {
  display: grid; grid-template-columns: 16px 1fr; gap: 9px;
  margin: 10px 0 2px; padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid rgba(190, 170, 255, 0.14);
  background: rgba(8, 5, 20, 0.35);
}
.tnext:empty { display: none; }
/* A small four-point spark: the desk's voice, distinct from the trade's own data. */
.tnext-glyph {
  width: 14px; height: 14px; margin-top: 2px;
  background: linear-gradient(115deg, #ff5fd2, #b06cf5 46%, #35baf2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0c.5 3.6 2.9 6 7 7-4.1 1-6.5 3.4-7 7-.5-3.6-2.9-6-7-7 4.1-1 6.5-3.4 7-7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0c.5 3.6 2.9 6 7 7-4.1 1-6.5 3.4-7 7-.5-3.6-2.9-6-7-7 4.1-1 6.5-3.4 7-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tnext-body { min-width: 0; }
.tnext-body p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #e6e2f5; }
.tnext-body em { display: block; margin-top: 4px; font-style: normal; font-size: 10.5px; color: #8e88ad; }
.tnext-odds {
  position: relative; display: flex; align-items: center; gap: 8px;
  margin-top: 7px; height: 18px; padding: 0 8px;
  border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace; color: #cfcae4;
}
.tnext-odds i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, rgba(176, 108, 245, 0.45), rgba(53, 186, 242, 0.45));
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.tnext-odds b, .tnext-odds span { position: relative; }
.tnext-odds b { color: #fff; font-variant-numeric: tabular-nums; }
.tnext-odds span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* A live trade's note carries the gold of its border, so the two read as one. */
.tnext.live { border-color: rgba(245, 196, 81, 0.28); background: rgba(40, 28, 4, 0.25); }
.tnext.live .tnext-odds i { background: linear-gradient(90deg, rgba(245, 196, 81, 0.5), rgba(255, 236, 184, 0.5)); }
.tnext.confirming { border-color: rgba(53, 186, 242, 0.3); }

/* The read card collapsed to a thin strip. .tradepanel is a scrolling flex
   column, and a flex item with overflow: hidden is allowed to shrink to nothing
   when the column runs out of height — so the card gave up its height to the
   trade cards below it and kept only its eyebrow line. The sections above the
   cards keep their natural height; only the list itself scrolls. */
html.glass .tradepanel > .tp-read,
html.glass .tradepanel > .tp-intro,
html.glass .tradepanel > .tp-head,
.tradepanel > .tp-read,
.tradepanel > .tp-intro,
.tradepanel > .tp-head { flex-shrink: 0; }

/* ═══ The explained checklist ════════════════════════════════════════════ */
.tnc-head {
  margin: 9px 0 6px;
  font: 700 9.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase; color: #9c97b8;
}
.tnext-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tnext-checks li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; }
.tnext-checks li > i {
  width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 10px; font-weight: 800; line-height: 1;
  border: 1.5px dashed rgba(245, 196, 81, 0.7); color: transparent;
}
.tnext-checks li.ok > i { border: 1.5px solid #00d48a; background: #00d48a; color: #04140d; }
.tnext-checks b { display: block; font-size: 12.5px; font-weight: 600; color: #f4f2ff; line-height: 1.3; }
.tnc-read {
  display: block; margin-top: 2px;
  font: 600 11px/1.35 "JetBrains Mono", ui-monospace, monospace; color: #f5c451;
}
.tnext-checks li.ok .tnc-read { color: #5fe8b4; }
.tnc-mean { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: #a9a4c4; }

/* ═══ Closed trades ══════════════════════════════════════════════════════
   Kept for the record, visibly finished: flatter surface, muted numbers, and
   the outcome in the corner where the live badge used to be. */
html.glass .tcard.closed {
  background-color: rgba(22, 16, 36, 0.6);
  border-color: rgba(190, 170, 255, 0.12);
  box-shadow: none;
}
html.glass .tcard.closed header b,
html.glass .tcard.closed .tl b { color: #b3adc9; }
html.glass .tcard.closed .tdir { opacity: .7; }
.tresult {
  padding: 3px 8px; border-radius: 999px;
  font: 700 9.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em;
}
.tresult.won { color: #04140d; background: #00d48a; }
.tresult.lost { color: #fff; background: #ff4d6d; }
.tresult.cancelled { color: #d6d1ea; background: rgba(190, 170, 255, 0.18); }

/* ═══ History in the ring and on the cards ═══════════════════════════════ */
.tpr-pct { transform: translateY(-4px); }
.tpr-kind {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: 9px;
  text-align: center; font: 700 7.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: #9c97b8;
}
/* History carries a warmer glow, so it is never mistaken for the geometry. */
.tp-read.hist .tpr-arc { filter: drop-shadow(0 0 6px rgba(245, 196, 81, 0.5)); }
.tp-read.hist .tpr-kind { color: #f5c451; }

.tnext-hist {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px;
  margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed rgba(190, 170, 255, 0.16);
  font-size: 12px; line-height: 1.4; color: #d6d1ea;
}
.tnh-tag {
  padding: 2px 6px; border-radius: 999px;
  font: 700 8.5px/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: #1b1200; background: linear-gradient(115deg, #ffe7a8, #f5c451);
}
.tnext-hist b { font: 700 13px/1 "JetBrains Mono", ui-monospace, monospace; color: #fff; }
.tnext-hist em { flex-basis: 100%; font-style: normal; font-size: 10.5px; color: #8e88ad; }
.tnext-hist.none { color: #9c97b8; }
.tnext-hist.none .tnh-tag { color: #d6d1ea; background: rgba(190, 170, 255, 0.16); }

/* ═══ Scenario, meters, freshness ════════════════════════════════════════ */
.tpr-meters { display: grid; gap: 10px; margin: 11px 0 4px; }
.tpr-meters:empty { display: none; }
.tpm-icon {
  width: 14px; height: 14px; border-radius: 50%; align-self: center;
  display: flex; align-items: center; justify-content: center;
  font: 800 9px/1 system-ui, sans-serif; color: transparent;
  border: 1.5px dashed rgba(245, 196, 81, 0.75);
}
.tpm.ok .tpm-icon { border: 1.5px solid #00d48a; background: #00d48a; color: #04140d; }
.tpm-val {
  justify-self: end; text-align: right; min-width: 0;
  font: 600 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace; color: #f5c451;
}
.tpm.ok .tpm-val { color: #5fe8b4; }
.tpm-bar {
  position: relative; height: 7px; margin: 6px 0 0 23px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}
.tpm-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #f5c451, #ffe7a8);
  transition: width .9s cubic-bezier(.2, .8, .2, 1), left .9s cubic-bezier(.2, .8, .2, 1);
}
.tpm.ok .tpm-bar i { background: linear-gradient(90deg, #00b377, #5fe8b4); }
.tpm.time .tpm-bar i { background: linear-gradient(90deg, rgba(176,108,245,.55), rgba(53,186,242,.7)); }
.tpm.time.ok .tpm-bar i { background: linear-gradient(90deg, #00b377, #5fe8b4); }
.tpm.signed .tpm-bar i { background: linear-gradient(90deg, #35baf2, #5fe8b4); }
.tpm.signed.sell .tpm-bar i { background: linear-gradient(90deg, #ff4d6d, #ff8fa3); }
.tpm-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: rgba(255,255,255,.45); }
.tpm-exp { margin: 4px 0 0 23px; font-size: 11px; line-height: 1.45; color: #9c97b8; }

.tpr-plan { margin: 9px 0 0; font: 600 11.5px/1.45 "JetBrains Mono", ui-monospace, monospace; color: #e6e2f5; }
.tpr-plan:empty, .tpr-guard:empty { display: none; }
.tpr-guard {
  margin: 6px 0 0; padding: 7px 9px; border-radius: 9px;
  font-size: 11.5px; line-height: 1.45; color: #ffd1da;
  background: rgba(255, 77, 109, 0.08); border: 1px solid rgba(255, 77, 109, 0.22);
}
.tp-read.stance-go { border-color: rgba(0, 212, 138, 0.45); }
.tp-read.stance-caution { border-color: rgba(245, 196, 81, 0.5); }

.tpr-fresh { display: flex; gap: 7px; align-items: baseline; margin: 8px 0 0; font-size: 10.5px; line-height: 1.4; color: #8e88ad; }
.tpr-fresh i {
  flex: none; width: 6px; height: 6px; border-radius: 50%; background: #00d48a; transform: translateY(-1px);
  box-shadow: 0 0 0 0 rgba(0,212,138,.6); animation: tprPulse 2s ease-out infinite;
}
.tpr-fresh.stale i { background: #f5c451; animation: none; }
@media (prefers-reduced-motion: reduce) { .tpm-bar i { transition: none; } .tpr-fresh i { animation: none; } }

/* ═══ Desk read, calm ════════════════════════════════════════════════════
   Less to read at once. The head says what the desk thinks and what is next;
   each factor is one quiet row that opens for its explanation; the plan, the
   risk and the arithmetic sit inside one closed section. No sheen, no loud
   boxes — trading is stressful enough. */
.tp-read { display: block; padding: 14px 16px; border-color: rgba(190, 170, 255, 0.16);
  background: rgba(10, 7, 24, 0.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.tp-read::before { display: none; }
.tpr-head { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.tpr-gauge { width: 52px; height: 52px; }
.tpr-track, .tpr-arc { stroke-width: 5; }
.tpr-arc { filter: none; }
.tp-read.hist .tpr-arc { filter: none; }
.tpr-pct { font-size: 13px; transform: translateY(-3px); }
.tpr-kind { margin-top: 6px; font-size: 6.5px; }
.tpr-eyebrow { font-size: 9px; letter-spacing: .14em; }
.tpr-eyebrow i { display: none; }
.tpr-title { margin: 3px 0 2px; font-size: 14.5px; font-weight: 600; }
.tpr-line { margin: 0; font-size: 12px; color: #b9b3d3; }
.tpr-line:empty { display: none; }
.tpr-live { display: inline-flex; align-items: center; gap: 5px; align-self: start; margin-top: 2px;
  font: 600 9.5px/1 "JetBrains Mono", ui-monospace, monospace; color: #7fe3b9; white-space: nowrap; }
.tpr-live i { width: 5px; height: 5px; border-radius: 50%; background: #00d48a; animation: tprPulse 2.4s ease-out infinite; }
.tpr-live em { font-style: normal; }
.tpr-live.stale { color: #f5c451; } .tpr-live.stale i { background: #f5c451; animation: none; }

.tpr-meters { gap: 2px; margin: 12px 0 0; }
.tpm { border-radius: 8px; }
.tpm > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 14px 1fr auto; column-gap: 8px; row-gap: 5px; align-items: center;
  padding: 7px 6px; border-radius: 8px;
}
.tpm > summary::-webkit-details-marker { display: none; }
.tpm > summary:hover { background: rgba(255, 255, 255, 0.03); }
.tpm-icon { width: 12px; height: 12px; font-size: 8px; border-width: 1.2px; border-color: rgba(245, 196, 81, 0.55); }
.tpm > summary b { font-size: 12px; font-weight: 500; color: #e6e2f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpm-val { font-size: 10.5px; color: #cdb88a; justify-self: end; }
.tpm.ok .tpm-val { color: #8fdcbc; }
.tpm-bar { grid-column: 2 / -1; height: 3px; margin: 0; background: rgba(255, 255, 255, 0.06); box-shadow: none; }
.tpm-bar i { background: rgba(245, 196, 81, 0.7); }
.tpm.ok .tpm-bar i, .tpm.time.ok .tpm-bar i { background: rgba(0, 212, 138, 0.75); }
.tpm.time .tpm-bar i { background: rgba(176, 108, 245, 0.6); }
.tpm.signed .tpm-bar i { background: rgba(0, 212, 138, 0.75); }
.tpm.signed.sell .tpm-bar i { background: rgba(255, 77, 109, 0.75); }
.tpm-more { padding: 0 6px 8px 28px; }
.tpm-full { margin: 0; font: 600 10.5px/1.4 "JetBrains Mono", ui-monospace, monospace; color: #cfcae4; }
.tpm-exp { margin: 3px 0 0; font-size: 11px; line-height: 1.45; color: #938dae; }

.tpr-more { margin-top: 10px; border-top: 1px solid rgba(190, 170, 255, 0.10); }
.tpr-more > summary {
  list-style: none; cursor: pointer; padding: 9px 6px 2px;
  font-size: 11px; color: #9c97b8; display: flex; align-items: center; gap: 6px;
}
.tpr-more > summary::-webkit-details-marker { display: none; }
.tpr-more > summary::before {
  content: ''; width: 5px; height: 5px; border-right: 1.5px solid #9c97b8; border-bottom: 1.5px solid #9c97b8;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.tpr-more[open] > summary::before { transform: rotate(45deg); }
.tpr-more > summary:hover { color: #d6d1ea; }
.tpr-morebody { padding: 4px 6px 2px; }
.tpr-then { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #c9c3e4; }
.tpr-plan { margin-top: 8px; font-size: 11px; font-weight: 500; }
.tpr-guard { margin-top: 8px; padding: 0 0 0 10px; border: 0; border-left: 2px solid rgba(255, 77, 109, 0.5);
  border-radius: 0; background: none; font-size: 11.5px; color: #d9c3ca; }
.tp-read.stance-go { border-color: rgba(0, 212, 138, 0.32); }
.tp-read.stance-caution { border-color: rgba(245, 196, 81, 0.32); }
.tpr-basis { margin-top: 8px; font-size: 10.5px; }
.tpr-fresh { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .tpr-live i { animation: none; } }

/* ═══ Trade history ══════════════════════════════════════════════════════ */
.tp-events { margin-top: 12px; border-top: 1px solid rgba(190, 170, 255, 0.10); }
.tp-events > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 10px 4px 6px; font-size: 12px; font-weight: 600; color: #d6d1ea;
}
.tp-events > summary::-webkit-details-marker { display: none; }
.tp-events > summary::before {
  content: ''; width: 5px; height: 5px; border-right: 1.5px solid #9c97b8; border-bottom: 1.5px solid #9c97b8;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.tp-events[open] > summary::before { transform: rotate(45deg); }
.tpe-count {
  padding: 1px 7px; border-radius: 999px; font: 600 10px/1.4 "JetBrains Mono", ui-monospace, monospace;
  color: #9c97b8; background: rgba(255, 255, 255, 0.05);
}
.tpe-count:empty { display: none; }
.tpe-list { list-style: none; margin: 4px 0 0; padding: 0 4px; display: grid; }
.tpe { display: grid; grid-template-columns: 14px 1fr; gap: 9px; position: relative; padding: 7px 0; }
.tpe + .tpe { border-top: 1px solid rgba(190, 170, 255, 0.06); }
.tpe-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: rgba(190, 170, 255, 0.45); }
.tpe.triggered .tpe-dot { background: #f5c451; }
.tpe.won .tpe-dot { background: #00d48a; }
.tpe.lost .tpe-dot { background: #ff4d6d; }
.tpe.stop_moved .tpe-dot { background: #35baf2; }
.tpe.reset .tpe-dot { background: transparent; border: 1.5px solid #9c97b8; }
.tpe-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tpe-top b { font-size: 12px; font-weight: 600; color: #ece9f6; }
.tpe-kind { font-size: 11px; color: #b9b3d3; }
.tpe-top time { margin-left: auto; font: 500 10.5px/1 "JetBrains Mono", ui-monospace, monospace; color: #8e88ad; white-space: nowrap; }
.tpe-meta { margin-top: 2px; font: 500 10.5px/1.4 "JetBrains Mono", ui-monospace, monospace; color: #9c97b8; }
.tpe-note { margin: 3px 0 0; font-size: 11px; line-height: 1.45; color: #938dae; }
.tpe-empty { padding: 8px 0; font-size: 11.5px; color: #8e88ad; }
.tpm.risk .tpm-bar i { background: rgba(255, 77, 109, 0.7); }
.tpm.risk .tpm-val { color: #e7a3b1; }


/* ── Lifecycle stepper, hourly-close countdown, coming up, glossary ───────── */
.tpr-steps { display: flex; gap: 3px; margin: 7px 0 0; padding: 0; list-style: none; }
.tpr-steps:empty { display: none; }
.tpr-steps li { flex: 1 1 0; min-width: 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); position: relative; }
.tpr-steps li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tpr-steps li.done { background: rgba(176, 108, 245, .75); }
.tpr-steps li.now { background: linear-gradient(90deg, #ff5fd2, #35baf2); box-shadow: 0 0 6px rgba(176, 108, 245, .6); }
.tpr-steps li.now.bad { background: #ff4d6d; box-shadow: 0 0 6px rgba(255, 77, 109, .55); }

.tpr-decide { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 8px 10px;
  border-radius: 10px; background: rgba(255, 196, 0, .07); font-size: 11.5px; line-height: 1.45; color: #efe2b8; }
.tpr-decide i { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: #ffc400;
  animation: tprPulse 2.4s ease-out infinite; }

.tpr-next { margin-top: 10px; display: grid; gap: 6px; }
.tpr-next:empty { display: none; }
.tpr-nlabel { font: 700 9px/1 "JetBrains Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .14em; color: #9c97b8; }
.tpr-nrow { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: baseline; }
.tpr-nrow b { font: 600 12px/1.3 "JetBrains Mono", ui-monospace, monospace; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.tpr-nrow span { display: grid; gap: 1px; min-width: 0; }
.tpr-nrow em { font-style: normal; font-size: 12px; color: #e6e1f7; }
.tpr-nrow small { font-size: 11px; color: #a9a3c6; }
.tpr-nnote { font-size: 10.5px; color: #8d88a8; }

.tpr-gloss { margin-top: 8px; }
.tpr-gloss summary { cursor: pointer; font-size: 11px; color: #b9b3d3; }
.tpr-gloss dl { margin: 6px 0 0; display: grid; gap: 5px; }
.tpr-gloss dt { font-size: 11px; font-weight: 650; color: #e6e1f7; }
.tpr-gloss dd { margin: 0 0 3px; font-size: 11px; line-height: 1.45; color: #a9a3c6; }
@media (prefers-reduced-motion: reduce) { .tpr-decide i { animation: none; } }


/* ═══ Ask the desk — AI chat ══════════════════════════════════════════════
   Position is set from the script so the launcher stays in the chart's corner.
   The body of the launcher is .aib-plasma (see further down). */
.ai-orb {
  position: fixed; right: 88px; bottom: 60px; z-index: 9997;
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  filter: drop-shadow(0 6px 18px rgba(176, 108, 245, .45));
  transition: transform .2s ease;
}
.ai-orb:hover { transform: scale(1.07); }
.ai-orb:focus-visible { outline: 2px solid #35baf2; outline-offset: 3px; }
.ai-orb-badge {
  position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%;
  background: #ff4d6d; border: 2px solid #0b0820; transform: scale(0); transition: transform .2s ease;
}
.ai-orb.unread .ai-orb-badge { transform: scale(1); }

.ai-chat {
  position: fixed; right: 88px; bottom: 114px; z-index: 9997;
  width: min(380px, calc(100vw - 32px)); height: 520px; max-height: calc(100vh - 140px);
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: rgba(12, 9, 30, .82);
  border: 1px solid rgba(180, 170, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  color: #e8e6f4;
}
.ai-chat[hidden] { display: none !important; }
.aic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 13px 14px 10px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.aic-head h3 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: #fff; }
.aic-status { margin: 2px 0 0; font-size: 11px; color: #7fe3b9; }
.ai-chat.no-ai .aic-status { color: #e8c46a; }
.aic-close { width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: #cfcbe6; font-size: 16px; line-height: 1; }
.aic-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.aic-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 12px 6px;
  display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(176,108,245,.4) transparent; }
.aic-empty { margin: auto 6px; display: grid; gap: 7px; text-align: center; font-size: 12px; color: #a9a3c6; }
.aic-empty b { font-size: 13px; color: #e8e6f4; font-weight: 600; }
.aic-empty[hidden] { display: none; }

.aic-msg { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; }
.aic-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 10.5px/1 system-ui, sans-serif; font-style: normal; color: #fff;
  background: color-mix(in srgb, var(--ink) 35%, #120c2a); box-shadow: 0 0 0 1.5px var(--ink); }
.aic-msg.ai .aic-dot { background: conic-gradient(#ff5fd2, #b06cf5, #35baf2, #ff5fd2); box-shadow: none; }
.aic-bubble { min-width: 0; padding: 8px 11px 9px; border-radius: 4px 14px 14px 14px;
  background: rgba(255, 255, 255, .055); }
.aic-msg.me .aic-bubble { background: rgba(176, 108, 245, .16); }
.aic-msg.ai .aic-bubble { background: rgba(53, 186, 242, .08); box-shadow: inset 0 0 0 1px rgba(53, 186, 242, .14); }
.aic-msg.code .aic-bubble { box-shadow: inset 0 0 0 1px rgba(255, 196, 0, .3); }
.aic-meta { display: block; margin-bottom: 3px; font: 600 9.5px/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .04em; color: #948fb2; }
.aic-body { font-size: 12.5px; line-height: 1.5; color: #e6e1f7; overflow-wrap: anywhere; }
.aic-body b { color: #fff; font-weight: 650; }
.aic-body code { padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, .08);
  font: 11.5px "JetBrains Mono", ui-monospace, monospace; }
.aic-li { display: block; padding-left: 12px; position: relative; }
.aic-li::before { content: "\2022"; position: absolute; left: 1px; color: #b06cf5; }

.aic-thinking { display: flex; align-items: center; gap: 4px; padding: 2px 0 2px 32px; font-size: 11px; color: #a9a3c6; }
.aic-thinking[hidden] { display: none; }
.aic-thinking i { width: 5px; height: 5px; border-radius: 50%; background: #b06cf5; animation: aiDots 1.2s ease-in-out infinite; }
.aic-thinking i:nth-child(2) { animation-delay: .15s; background: #8f7cf5; }
.aic-thinking i:nth-child(3) { animation-delay: .3s; background: #35baf2; }
.aic-thinking span { margin-left: 6px; }
@keyframes aiDots { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.aic-notice { margin: 0 12px 6px; padding: 7px 10px; border-radius: 9px; font-size: 11.5px; line-height: 1.4;
  background: rgba(255, 196, 0, .08); color: #efe2b8; }
.aic-notice[hidden] { display: none; }

.aic-form { display: grid; grid-template-columns: 1fr 34px; gap: 6px 8px; align-items: end;
  padding: 9px 12px 11px; border-top: 1px solid rgba(255, 255, 255, .07); }
.aic-form textarea { box-sizing: border-box; width: 100%; min-height: 36px; max-height: 120px; resize: none; margin: 0;
  padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(180, 170, 255, .2);
  background: rgba(255, 255, 255, .05); color: #fff; font: inherit; font-size: 12.5px; line-height: 1.4; }
.aic-form textarea:focus { outline: none; border-color: rgba(176, 108, 245, .6); background: rgba(255, 255, 255, .08); }
.aic-send { width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 16px; font-weight: 700;
  background-image: linear-gradient(135deg, #ff5fd2, #b06cf5 50%, #35baf2); }
.aic-send:disabled { opacity: .45; cursor: default; }
.aic-send:focus-visible, .aic-close:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.aic-code { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #b9b3d3; cursor: pointer; }
.aic-code input { margin: 0; accent-color: #ffc400; }
.aic-code small { color: #7d78a0; font-size: 10.5px; }

@media (prefers-reduced-motion: reduce) {
  .aic-thinking i { animation: none; }
}

/* Claude Code's replies in the desk chat — the builder, not the desk AI */
.aic-msg.cc .aic-dot { background: #1a1333; box-shadow: 0 0 0 1.5px #b06cf5; font: 700 8.5px/1 "JetBrains Mono", ui-monospace, monospace; color: #d9c8ff; }
.aic-msg.cc .aic-bubble { background: rgba(176, 108, 245, .1); box-shadow: inset 0 0 0 1px rgba(176, 108, 245, .32); }
.aic-msg.cc .aic-meta { color: #c7b3f5; }

/* ═══ Chat faces: profile pictures in each person's colour, and Claude Code in gold ═══
   The ring sits OUTSIDE the circle (box-shadow), so the picture fills the whole
   circle and is never cropped by a border drawn on top of it. */
.aic-dot { position: relative; }
.aic-dot.has-pic { overflow: hidden; background: #120c2a; box-shadow: 0 0 0 2px var(--ink); }
.aic-dot.has-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.aic-msg:not(.ai):not(.cc) .aic-bubble { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ink, #9aa8bb) 70%, transparent); }
.aic-name { font-weight: 700; color: color-mix(in srgb, var(--ink, #9aa8bb) 75%, #fff); }

/* Claude Code — the builder. Gold, with the spinning border from the live trade card. */
@property --ccSpin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.aic-msg.cc .aic-dot.aic-cc {
  background: linear-gradient(135deg, #ffe08a, #f5b400 55%, #c98a00); color: #1a1000;
  box-shadow: 0 0 0 1.5px rgba(255, 214, 102, .9), 0 0 12px rgba(245, 180, 0, .55);
  font: 800 8.5px/1 "JetBrains Mono", ui-monospace, monospace;
}
.aic-msg.cc .aic-bubble {
  border: 1.5px solid transparent; border-radius: 4px 14px 14px 14px;
  background:
    linear-gradient(rgba(26, 18, 4, .92), rgba(26, 18, 4, .92)) padding-box,
    conic-gradient(from var(--ccSpin), rgba(245, 180, 0, .15), #ffd666, #f5b400, rgba(245, 180, 0, .15) 40%, rgba(245, 180, 0, .15)) border-box;
  box-shadow: 0 0 18px rgba(245, 180, 0, .12);
  animation: ccSpin 4s linear infinite;
}
.aic-msg.cc .aic-meta { color: #d9b866; }
.aic-ccname { color: #ffd666; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.aic-msg.cc .aic-body { color: #fff3d6; }
.aic-msg.cc .aic-body b { color: #ffe08a; }
.aic-msg.cc .aic-li::before { color: #f5b400; }
@keyframes ccSpin { to { --ccSpin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .aic-msg.cc .aic-bubble { animation: none; } }

/* ═══ Plan answers: Confirm · Decline · Change under Claude Code's plans ═══ */
.aic-plan { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255, 214, 102, .18); }
.aic-act { padding: 5px 11px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; background: rgba(255, 255, 255, .06); color: #eee7d2; transition: background .15s ease, border-color .15s ease; }
.aic-act:disabled { opacity: .5; cursor: default; }
.aic-act.act-confirm { background: rgba(0, 212, 138, .16); border-color: rgba(0, 212, 138, .45); color: #b9f5dc; }
.aic-act.act-confirm:hover:not(:disabled) { background: rgba(0, 212, 138, .28); }
.aic-act.act-decline { border-color: rgba(255, 77, 109, .4); color: #ffc2cd; }
.aic-act.act-decline:hover:not(:disabled) { background: rgba(255, 77, 109, .18); }
.aic-act.act-change { border-color: rgba(255, 214, 102, .4); color: #ffe7a3; }
.aic-act.act-change:hover:not(:disabled) { background: rgba(255, 214, 102, .14); }
.aic-act:focus-visible { outline: 2px solid #ffd666; outline-offset: 2px; }
.aic-verdict { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.aic-verdict.v-confirm { background: rgba(0, 212, 138, .14); color: #9ff0cc; }
.aic-verdict.v-decline { background: rgba(255, 77, 109, .14); color: #ffb3c1; }
.aic-verdict.v-change { background: rgba(255, 214, 102, .12); color: #ffe08a; }

.aic-msg.answer .aic-bubble { padding: 6px 10px; }
.aic-msg.a-confirm .aic-bubble { box-shadow: inset 2px 0 0 #00d48a; }
.aic-msg.a-decline .aic-bubble { box-shadow: inset 2px 0 0 #ff4d6d; }
.aic-msg.a-change .aic-bubble { box-shadow: inset 2px 0 0 #ffd666; }

.aic-replyto { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 6px 5px 10px; border-radius: 9px; background: rgba(255, 214, 102, .1); font-size: 11.5px; color: #ffe08a; }
.aic-replyto[hidden], .aic-code[hidden] { display: none; }
.aic-replyto button { width: 22px; height: 22px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .08); color: #ffe08a; }

/* ═══ Desk AI — purple, futuristic (ticket #28, confirmed on plan #29) ═══ */
@property --aiEdge { syntax: '<number>'; initial-value: .35; inherits: false; }
.aic-msg.ai .aic-dot.aic-ai {
  background: radial-gradient(circle at 35% 30%, #e9d5ff 0 8%, #a855f7 34%, #6d28d9 70%, #3b0764);
  color: #fff; font-size: 12px; text-shadow: 0 0 6px rgba(233, 213, 255, .9);
  box-shadow: 0 0 0 1.5px rgba(192, 132, 252, .85), 0 0 14px rgba(168, 85, 247, .6);
}
.aic-msg.ai .aic-bubble {
  border: 1px solid rgba(168, 85, 247, var(--aiEdge));
  background:
    linear-gradient(180deg, rgba(168, 85, 247, .10), transparent 40%),
    rgba(30, 12, 58, .78);
  box-shadow: 0 0 16px rgba(147, 51, 234, .18), inset 0 1px 0 rgba(233, 213, 255, .08);
  animation: aiEdgePulse 3.6s ease-in-out infinite;
}
.aic-msg.ai .aic-meta { color: #b9a3e0; }
.aic-ainame { color: #d8b4fe; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 8px rgba(168, 85, 247, .55); }
.aic-msg.ai .aic-body { color: #efe7ff; }
.aic-msg.ai .aic-body b { color: #e9b8ff; }
.aic-msg.ai .aic-body code { background: rgba(168, 85, 247, .18); }
.aic-msg.ai .aic-li::before { color: #c084fc; }
.aic-thinking i { background: #a855f7; }
.aic-thinking i:nth-child(2) { background: #c084fc; }
.aic-thinking i:nth-child(3) { background: #e9d5ff; }
@keyframes aiEdgePulse { 50% { --aiEdge: .75; } }
@media (prefers-reduced-motion: reduce) { .aic-msg.ai .aic-bubble { animation: none; } }

/* ═══ The AI blob — Marco's fluid blob × the desk orb ═════════════════════
   Shape and motion from Marco's blob: a morphing plasma body, two conic
   layers spinning against each other, a breathing halo. From the orb: the
   desk palette, the glass highlight and tint, the unread dot. Draggable;
   its position is set from desk-chat.js. */
.ai-orb {
  width: 56px; height: 56px; right: auto; bottom: auto;
  filter: none; transition: none; touch-action: none; user-select: none; -webkit-user-select: none;
}
.ai-orb:hover { transform: none; }
.ai-orb:hover .aib-plasma { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 0 22px rgba(176, 108, 245, .45); }
.ai-orb.dragging { cursor: grabbing; }
.ai-orb.dragging .aib-glow { opacity: 1; transform: scale(1.6); }

.aib-glow, .aib-plasma, .aib-gloss { position: absolute; inset: 0; pointer-events: none; }
.aib-glow {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 108, 245, .5), rgba(255, 95, 210, .2) 45%, transparent 70%);
  filter: blur(12px); transform: scale(1.35);
  animation: aibHalo 4.8s ease-in-out infinite;
}
.aib-plasma {
  border-radius: 58% 42% 46% 54% / 48% 52% 48% 52%;
  overflow: hidden; background: #140b2e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 18px rgba(20, 8, 50, .5);
  animation: aibMorph 8s ease-in-out infinite; transform-origin: 50% 50%;
  transition: box-shadow .2s ease;
}
.aib-plasma::before, .aib-plasma::after {
  content: ""; position: absolute; inset: -55%; border-radius: 40%; mix-blend-mode: screen;
}
.aib-plasma::before {
  background: conic-gradient(from 0deg, #b06cf5, #35baf2, #ff5fd2, #00d4c0, #b06cf5);
  filter: blur(11px); animation: aibSpin 9s linear infinite;
}
.aib-plasma::after {
  background: conic-gradient(from 120deg, transparent 0 18%, #35baf2 32%, #ff5fd2 48%, transparent 68%);
  filter: blur(10px); opacity: .9; animation: aibSpinRev 13s linear infinite;
}
/* the liquid-glass layer: a specular highlight on top, a dark tint underneath */
.aib-gloss {
  z-index: 1; border-radius: inherit;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .8) 0 5%, rgba(255, 255, 255, .22) 13%, transparent 27%),
    radial-gradient(circle at 50% 72%, transparent 38%, rgba(10, 6, 30, .38) 100%);
}
.ai-orb .ai-orb-badge { z-index: 2; top: 2px; right: 2px; }

/* states from the chat */
.ai-orb[data-state="thinking"] .aib-plasma { animation-duration: 4.2s; }
.ai-orb[data-state="thinking"] .aib-plasma::before { animation-duration: 4.5s; }
.ai-orb[data-state="thinking"] .aib-plasma::after { animation-duration: 6s; }
.ai-orb[data-state="speaking"] .aib-plasma { animation-duration: 2.6s; }
.ai-orb[data-state="speaking"] .aib-plasma::before { animation-duration: 2.8s; }
.ai-orb[data-state="speaking"] .aib-plasma::after { animation-duration: 3.6s; }
.ai-orb[data-state="speaking"] .aib-glow { animation-duration: 1.6s; }

/* Claude Code posted: a short gold ring */
.ai-orb.cc-flash::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  border: 2px solid #ffd666; box-shadow: 0 0 18px rgba(245, 180, 0, .7), inset 0 0 10px rgba(245, 180, 0, .35);
  animation: aibGold 2.4s ease-out forwards;
}

@keyframes aibMorph {
  0%   { border-radius: 58% 42% 46% 54% / 48% 52% 48% 52%; transform: scale(1) rotate(0deg); }
  25%  { border-radius: 42% 58% 52% 48% / 60% 40% 58% 42%; transform: scale(1.04) rotate(4deg); }
  50%  { border-radius: 50% 50% 38% 62% / 42% 58% 42% 58%; transform: scale(.97) rotate(-3deg); }
  75%  { border-radius: 62% 38% 55% 45% / 50% 46% 54% 50%; transform: scale(1.05) rotate(2deg); }
  100% { border-radius: 58% 42% 46% 54% / 48% 52% 48% 52%; transform: scale(1) rotate(0deg); }
}
@keyframes aibSpin { to { transform: rotate(360deg); } }
@keyframes aibSpinRev { to { transform: rotate(-360deg); } }
@keyframes aibHalo { 0%, 100% { opacity: .55; transform: scale(1.28); } 50% { opacity: .9; transform: scale(1.48); } }
@keyframes aibGold { 0% { opacity: 0; transform: scale(.8); } 15% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }

@media (prefers-reduced-motion: reduce) {
  .aib-plasma, .aib-plasma::before, .aib-plasma::after, .aib-glow, .ai-orb.cc-flash::after { animation: none; }
}

/* ═══ AI blob, flatter (ticket #34, confirmed on plan #35) ═══
   No reflection, no 3D shading, no drop shadow: just the liquid colour and
   its glow. A thin light edge only on hover, to show it can be clicked. */
.aib-gloss { display: none; }
.aib-plasma { box-shadow: none; }
.ai-orb:hover .aib-plasma { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }

/* ═══ Calm chat (ticket #38, confirmed on plan #40) ═══════════════════════
   One quiet bubble for everyone. Who is talking is carried only by a thin
   line in their colour, their picture or badge with a plain ring, and their
   name. No moving borders, no pulses, no glows. Selectors are deliberately
   a notch more specific than the earlier chat rules, which they replace. */
.ai-chat .aic-msg.aic-msg .aic-bubble {
  border: 0; border-radius: 4px 12px 12px 12px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 2px 0 0 var(--accent, rgba(255, 255, 255, .18));
  animation: none;
}
.ai-chat .aic-msg.me .aic-bubble.aic-bubble { background: rgba(255, 255, 255, .065); }
.ai-chat .aic-msg:not(.ai):not(.cc) { --accent: color-mix(in srgb, var(--ink, #9aa8bb) 80%, transparent); }
.ai-chat .aic-msg.ai { --accent: rgba(168, 85, 247, .75); }
.ai-chat .aic-msg.cc { --accent: rgba(236, 190, 80, .8); }
.ai-chat .aic-msg.a-confirm { --accent: rgba(0, 212, 138, .7); }
.ai-chat .aic-msg.a-decline { --accent: rgba(255, 77, 109, .7); }
.ai-chat .aic-msg.a-change { --accent: rgba(236, 190, 80, .7); }

/* faces: plain thin rings */
.ai-chat .aic-msg .aic-dot.has-pic { box-shadow: 0 0 0 1.5px var(--ink); }
.ai-chat .aic-msg.ai .aic-dot.aic-ai {
  background: rgba(124, 58, 237, .85); color: #f3e8ff; text-shadow: none;
  box-shadow: 0 0 0 1.5px rgba(192, 132, 252, .55);
}
.ai-chat .aic-msg.cc .aic-dot.aic-cc {
  background: rgba(236, 190, 80, .16); color: #ecc36a;
  box-shadow: 0 0 0 1.5px rgba(236, 190, 80, .55);
}

/* names and text: one voice */
.aic-ainame, .aic-ccname, .aic-name { text-transform: none; letter-spacing: 0; text-shadow: none; font-weight: 650; }
.aic-ainame { color: #c9a7f5; }
.aic-ccname { color: #e3be6a; }
.ai-chat .aic-msg.ai .aic-meta, .ai-chat .aic-msg.cc .aic-meta { color: #948fb2; }
.ai-chat .aic-msg .aic-body { color: #e6e1f7; }
.ai-chat .aic-msg .aic-body b { color: #fff; }
.ai-chat .aic-msg .aic-li::before { color: var(--accent, #b06cf5); }

/* plan answers: soft outlines, only Confirm lightly filled */
.ai-chat .aic-plan { border-top-color: rgba(255, 255, 255, .08); }
.ai-chat .aic-act.aic-act { background: transparent; border: 1px solid rgba(255, 255, 255, .16); color: #cfc9e6; }
.ai-chat .aic-act.aic-act:hover:not(:disabled) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); }
.ai-chat .aic-act.act-confirm { background: rgba(0, 212, 138, .12); border-color: rgba(0, 212, 138, .32); color: #bfeedd; }
.ai-chat .aic-act.act-confirm:hover:not(:disabled) { background: rgba(0, 212, 138, .2); }
.ai-chat .aic-verdict { gap: 6px; padding: 0; background: none; font-weight: 600; }
.ai-chat .aic-verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ai-chat .aic-verdict.v-confirm { color: #8fdcbc; }
.ai-chat .aic-verdict.v-decline { color: #f0a3b1; }
.ai-chat .aic-verdict.v-change { color: #e3c47a; }

/* thinking: softer */
.ai-chat .aic-thinking i, .ai-chat .aic-thinking i:nth-child(2), .ai-chat .aic-thinking i:nth-child(3) { background: rgba(192, 132, 252, .7); }

/* ═══ Where the other person is ══════════════════════════════════════════ */
.peerbox { display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .pcur { transition: none !important; } }

/* ═══ The mirror switch ══════════════════════════════════════════════════
   Together / Separate. Quiet when off, clearly lit when two people share one
   screen, and it says who moved things for a moment after they did. */
.mirrorbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #b9b3d3;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mirrorbtn i { width: 7px; height: 7px; border-radius: 50%; background: #7d78a0; transition: background .15s ease, box-shadow .15s ease; }
.mirrorbtn:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.mirrorbtn.on { border-color: rgba(0, 212, 138, .5); background: rgba(0, 212, 138, .12); color: #c9f5e2; }
.mirrorbtn.on i { background: #00d48a; box-shadow: 0 0 8px rgba(0, 212, 138, .8); }
.mirrorbtn.led { border-color: rgba(53, 186, 242, .6); background: rgba(53, 186, 242, .14); color: #d6f1ff; }
.mirrorbtn.led i { background: #35baf2; box-shadow: 0 0 8px rgba(53, 186, 242, .8); }
.mirrorbtn:focus-visible, .mirrorhint:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.mirrorhint {
  padding: 4px 11px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255, 196, 0, .4);
  background: rgba(255, 196, 0, .1); color: #ffe7a3; font: inherit; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.mirrorhint:hover { background: rgba(255, 196, 0, .2); }
.mirrorhint[hidden] { display: none; }

/* ═══ The bin: deleted drawings ══════════════════════════════════════════ */
.trash { margin-top: 14px; border-top: 1px solid rgba(190, 170, 255, 0.10); }
body.trading .trash, body.history .trash { display: none; }
.trash > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 10px 4px 6px; font-size: 12px; font-weight: 600; color: #9c97b8;
}
.trash > summary:hover, .trash[open] > summary { color: #d6d1ea; }
.trash > summary::-webkit-details-marker { display: none; }
.trash > summary::before {
  content: ''; width: 5px; height: 5px; border-right: 1.5px solid #9c97b8; border-bottom: 1.5px solid #9c97b8;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.trash[open] > summary::before { transform: rotate(45deg); }
.trash-count {
  padding: 1px 7px; border-radius: 999px; font: 600 10px/1.4 "JetBrains Mono", ui-monospace, monospace;
  color: #9c97b8; background: rgba(255, 255, 255, 0.05);
}
.trash-count:empty { display: none; }
.trash-hint { margin: 2px 4px 6px; font-size: 11px; line-height: 1.45; color: #8e88ad; }
.trash-list { list-style: none; margin: 0; padding: 0 4px; display: grid; max-height: 260px; overflow-y: auto; }
.trash-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.trash-item + .trash-item { border-top: 1px solid rgba(190, 170, 255, 0.06); }
.trash-text { min-width: 0; flex: 1; display: grid; gap: 1px; }
.trash-text b { font-size: 12px; font-weight: 600; color: #ece9f6; overflow-wrap: anywhere; }
.trash-text small { font-size: 10.5px; color: #8e88ad; }
.trash-back {
  flex: none; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font: 600 11px/1.3 inherit; color: #d6d1ea;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(190, 170, 255, 0.18);
}
.trash-back:hover { background: rgba(176, 108, 245, 0.18); border-color: rgba(176, 108, 245, 0.5); color: #fff; }
.trash-back:focus-visible { outline: 2px solid #b06cf5; outline-offset: 2px; }
.trash-back:disabled { opacity: .5; cursor: default; }

/* ═══ Overview: every running and every waiting trade ════════════════════ */
body.overview:not(.folded) .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.overview:not(.folded) { --panelW: 50%; }
body.overview .trash { display: none; }
.ovpanel { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; overflow-y: auto; padding: 2px 2px 18px; }
.ovpanel[hidden] { display: none !important; }
.ovpanel > * { flex-shrink: 0; }
.ov-intro h2 { margin: 0 0 4px; font-size: 15px; font-weight: 650; color: #f2effa; }
.ov-intro p { margin: 0; font-size: 12px; line-height: 1.5; color: #bdb7d4; }
.ov-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ov-chip { padding: 4px 11px; border-radius: 999px; font-size: 11.5px; color: #cfc9e6;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(190, 170, 255, .14); }
.ov-chip b { font: 700 12px/1 "JetBrains Mono", ui-monospace, monospace; color: #fff; margin-right: 3px; }
.ov-chip.live { border-color: rgba(0, 212, 138, .4); background: rgba(0, 212, 138, .10); color: #c9f5e2; }
.ov-price { margin-left: auto; font: 600 11.5px/1 "JetBrains Mono", ui-monospace, monospace; color: #9c97b8; }
.ov-h { display: flex; align-items: baseline; gap: 10px; margin: 10px 2px 0; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #8e88ad; }
.ov-h small { font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #6f698c; }
.ov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ov-row { padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(190, 170, 255, .10);
  transition: background .15s ease, border-color .15s ease; }
.ov-row:hover { background: rgba(176, 108, 245, .10); border-color: rgba(176, 108, 245, .35); }
.ov-row:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.ov-row.live { border-color: rgba(0, 212, 138, .28); background: rgba(0, 212, 138, .05); }
.ov-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ov-top b { font-size: 12.5px; font-weight: 650; color: #f2effa; white-space: nowrap; }
.ov-top em { margin-left: auto; font-style: normal; font-size: 11px; color: #8e88ad; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-side { padding: 1px 6px; border-radius: 5px; font: 700 9.5px/1.5 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; }
.ov-side.long { color: #00d48a; background: rgba(0, 212, 138, .12); }
.ov-side.short { color: #ff6b85; background: rgba(255, 77, 109, .12); }
.ov-nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 6px;
  font-size: 11px; color: #9c97b8; font-variant-numeric: tabular-nums; }
.ov-nums b { font: 600 11.5px/1 "JetBrains Mono", ui-monospace, monospace; color: #e4e0f3; }
.ov-dist { margin-left: auto; color: #b9b3d3; }
.ov-r { margin-left: auto; font: 700 12.5px/1 "JetBrains Mono", ui-monospace, monospace; }
.ov-r.up { color: #00d48a; } .ov-r.down { color: #ff6b85; }
.ov-tag { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; color: #c9f5e2; background: rgba(0, 212, 138, .10); }
.ov-tag.dim { margin-left: auto; color: #8e88ad; background: rgba(255, 255, 255, .05); }
.ov-bar { height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ov-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #35baf2, #00d48a); }
.ov-sub { margin-top: 5px; font-size: 10.5px; color: #7d78a0; }
.ov-empty, .ov-err { margin: 2px; font-size: 12px; color: #8e88ad; }
.ov-err { color: #f5c451; }
.ov-foot { margin: 10px 2px 0; font-size: 10.5px; line-height: 1.5; color: #6f698c; max-width: 70ch; }

/* ═══ DeskShare: who is in it ════════════════════════════════════════════ */
.mirrorbtn .ds-with { display: inline-flex; align-items: center; gap: 0; margin-left: 2px; padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, .16); }
.mirrorbtn .ds-with[hidden] { display: none; }
.ds-face { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 700; color: #0d0a1a;
  box-shadow: 0 0 0 1px rgba(5, 8, 16, 0.9); }
.ds-face + .ds-face { margin-left: -5px; }
.ds-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-wait { font-style: normal; font-weight: 500; color: #ffe7a3; }
/* on, but alone: the light breathes amber until somebody joins */
.mirrorbtn.on.waiting { border-color: rgba(255, 196, 0, .45); background: rgba(255, 196, 0, .08); color: #ffe7a3; }
.mirrorbtn.on.waiting i { background: #ffc400; box-shadow: 0 0 8px rgba(255, 196, 0, .8); animation: dsWait 1.6s ease-in-out infinite; }
@keyframes dsWait { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mirrorbtn.on.waiting i { animation: none; } }
/* DeskShare off here, on over there: their face wears the green mark */
.peerbox.sharing { position: relative; }
.peerbox.sharing::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
  background: #00d48a; border: 2px solid #120d24; box-shadow: none; }

/* ═══ Cockpit: fixed indicators, the four trades, the checklist ══════════ */
body.cockpit:not(.folded) .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.cockpit:not(.folded) { --panelW: 50%; }
body.cockpit .trash { display: none; }
#cockpit { display: flex; flex-direction: column; gap: 14px; min-height: 0; flex: 1; overflow-y: auto; padding: 2px 2px 22px; }
#cockpit[hidden] { display: none !important; }
#cockpit > * { flex-shrink: 0; }
.cp-intro h2 { margin: 0 0 4px; font-size: 15px; font-weight: 650; color: #f2effa; }
.cp-intro p { margin: 0; font-size: 12px; line-height: 1.5; color: #bdb7d4; }
.cp-fresh { margin-left: auto; font: 500 10.5px/1 "JetBrains Mono", ui-monospace, monospace; color: #7d78a0; }
.cp-pattern { margin-left: auto; max-width: 55%; padding: 3px 8px; border-radius: 8px; font: inherit; font-size: 11.5px;
  color: #e4e0f3; background: rgba(255, 255, 255, .06); border: 1px solid rgba(190, 170, 255, .18); }
.cp-pattern:focus-visible, .cp-acts button:focus-visible, .cp-pick input:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.cp-plays { display: grid; gap: 6px; }
.cp-play { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 4px 9px; padding: 8px 10px;
  border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(190, 170, 255, .08); }
.cp-play.live { border-color: rgba(0, 212, 138, .3); background: rgba(0, 212, 138, .05); }
.cp-play.done { opacity: .55; }
.cp-play > b { font-size: 12.5px; font-weight: 650; color: #f2effa; white-space: nowrap; }
.cp-play > p { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.45; color: #9c97b8; }
.cp-step { font-size: 10.5px; color: #b9b3d3; white-space: nowrap; }
.cp-pct { min-width: 44px; text-align: right; font: 700 13px/1 "JetBrains Mono", ui-monospace, monospace; color: #e9d9ff; }
.cp-dots { display: inline-flex; gap: 3px; justify-self: start; }
.cp-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.cp-dots i.done { background: rgba(0, 212, 138, .7); }
.cp-dots i.now { background: #ffc400; box-shadow: 0 0 6px rgba(255, 196, 0, .7); }
.cp-note { margin: 6px 2px 0; font-size: 10.5px; line-height: 1.45; color: #6f698c; }
.cp-empty { margin: 2px; font-size: 12px; color: #8e88ad; }
.cp-choose { border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(190, 170, 255, .10); }
.cp-choose > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px;
  font-size: 12.5px; font-weight: 650; color: #e4e0f3; }
.cp-choose > summary::-webkit-details-marker { display: none; }
.cp-choose > summary::before { content: ''; width: 5px; height: 5px; border-right: 1.5px solid #9c97b8; border-bottom: 1.5px solid #9c97b8;
  transform: rotate(-45deg); transition: transform .15s ease; }
.cp-choose[open] > summary::before { transform: rotate(45deg); }
.cp-count { margin-left: auto; padding: 1px 8px; border-radius: 999px; font: 600 10px/1.5 "JetBrains Mono", ui-monospace, monospace;
  color: #9c97b8; background: rgba(255, 255, 255, .05); }
.cp-hint { margin: 0 12px 8px; font-size: 11px; line-height: 1.45; color: #8e88ad; }
.cp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px 10px; }
.cp-acts button { padding: 4px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; color: #d6d1ea;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(190, 170, 255, .18); }
.cp-acts button:hover { background: rgba(176, 108, 245, .18); border-color: rgba(176, 108, 245, .5); color: #fff; }
.cp-group { padding: 0 12px 10px; }
.cp-group h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 8px 0 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #8e88ad; }
.cp-group h4 em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: #cdb88a; }
.cp-pick { display: grid; grid-template-columns: 18px 1fr; gap: 8px; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.cp-pick:hover { background: rgba(255, 255, 255, .03); }
.cp-pick input { margin: 2px 0 0; accent-color: #b06cf5; }
.cp-pick b { display: block; font-size: 12px; font-weight: 600; color: #ece9f6; }
.cp-pick small { display: block; margin-top: 1px; font-size: 10.5px; line-height: 1.45; color: #8e88ad; }
.cp-pick.locked { cursor: default; opacity: .55; }
/* five modes have to fit beside DeskShare on a half-width window */
@media (max-width: 1180px) { html.glass .mode { padding-left: 9px; padding-right: 9px; font-size: 11px; } }
.cp-pick input { width: 15px; height: 15px; }

/* ═══ Cockpit + Overview: the same dark boxes as the Trading mode ═════════
   (Marco, 19 Sept: "die Boxen etwas dunkler wie bei Trading, so ist alles
   besser lesbar"). The Desk read sits on rgba(10, 7, 24, .62); the first
   version of these pages used a 3 % white film, which let the coloured
   background through and cost the small text its contrast. */
.cp-choose { background: rgba(10, 7, 24, 0.62); border-color: rgba(190, 170, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.cp-play { background: rgba(255, 255, 255, .045); border-color: rgba(190, 170, 255, .12); }
.cp-play.live { background: rgba(0, 212, 138, .09); border-color: rgba(0, 212, 138, .36); }
.cp-play > p { color: #b9b3d3; }
.cp-note, .ov-foot { color: #8e88ad; }
.cp-pick small, .cp-hint { color: #a8a2c4; }
.ov-row { background: rgba(10, 7, 24, 0.62); border-color: rgba(190, 170, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.ov-row:hover { background: rgba(40, 22, 70, 0.78); }
.ov-row.live { background: rgba(6, 28, 24, 0.66); border-color: rgba(0, 212, 138, .36); }
.ov-nums { color: #b3adcf; }
.ov-top em, .ov-sub { color: #a8a2c4; }

/* ═══ "use the pattern as it is now" — inside the drifted-lines notice ════ */
.tpr-drift { flex-wrap: wrap; }
.tpr-drift > span { flex: 1 1 260px; }
.tpr-driftbtn { flex: 0 0 auto; margin-left: 14px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 650; white-space: nowrap; color: #1a1300;
  background: linear-gradient(90deg, #ffc400, #ffdf7a); border: 0; box-shadow: 0 4px 14px rgba(255, 196, 0, .25);
  transition: transform .12s ease, box-shadow .12s ease; }
.tpr-driftbtn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 196, 0, .35); }
.tpr-driftbtn:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.tpr-driftbtn[hidden] { display: none; }

/* ═══ Cockpit: one row per indicator ═════════════════════════════════════ */
.cp-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; }
.cp-head h2 { margin: 0; font-size: 16px; font-weight: 650; color: #f2effa; }
.cp-head p { grid-column: 1 / -1; margin: 0; font-size: 11.5px; line-height: 1.5; color: #a8a2c4; }
.cp-head .cp-fresh { margin: 0; }
.cp-grp h3 { margin: 4px 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #b9b3d3; }
.cp-fold { border-radius: 14px; background: rgba(10, 7, 24, 0.62); border: 1px solid rgba(190, 170, 255, 0.16); }
.cp-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 12px;
  font-size: 12.5px; font-weight: 650; color: #e4e0f3; }
.cp-fold > summary::-webkit-details-marker { display: none; }
.cp-fold > summary::before { content: ''; width: 5px; height: 5px; border-right: 1.5px solid #9c97b8; border-bottom: 1.5px solid #9c97b8;
  transform: rotate(-45deg); transition: transform .15s ease; }
.cp-fold[open] > summary::before { transform: rotate(45deg); }
.cp-playsum { font-size: 11px; font-weight: 500; color: #9c97b8; }
.cp-fold .cp-pattern { margin-left: auto; }
.cp-fold .cp-plays { padding: 0 12px 12px; }

/* the "+" beside the tabs: a circle, not an oval — it was taking the tab's
   own stretch and padding */
html.glass .tabs .tab.tab-add { flex: 0 0 22px; width: 22px; height: 22px; min-width: 0; min-height: 0; padding: 0; margin: 0 0 0 6px;
  align-self: center; border-radius: 50%; border: 0; line-height: 1; box-sizing: border-box; }

/* ═══ Cockpit v3: bars with a yardstick ══════════════════════════════════
   One row per indicator: name · word · number, the bar with its reference
   marks, the scale under it, and the plain sentence. */
.cp-rows { display: grid; gap: 2px; padding: 6px 8px; border-radius: 14px; background: rgba(10, 7, 24, 0.66);
  border: 1px solid rgba(190, 170, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.cpr { border-radius: 10px; }
.cpr + .cpr { border-top: 1px solid rgba(190, 170, 255, 0.08); border-radius: 0; }
.cpr > summary { list-style: none; cursor: pointer; display: grid; gap: 5px; padding: 10px 8px 9px; border-radius: 10px; }
.cpr > summary::-webkit-details-marker { display: none; }
.cpr > summary:hover { background: rgba(255, 255, 255, 0.03); }
.cpr > summary:focus-visible { outline: 2px solid #35baf2; outline-offset: 1px; }
.cpr-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cpr-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: #ece9f6; }
.cpr-word { flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 600; color: #9c97b8; white-space: nowrap; }
.cpr-val { flex: 0 0 auto; min-width: 74px; text-align: right; font: 700 15px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: -0.01em; color: #f4f2ff; white-space: nowrap; }
.cpr-bar { position: relative; display: block; height: 6px; margin-top: 2px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.cpr-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 6px; transition: width .4s ease, left .4s ease; }
.cpr-bar .cpr-fill { background: rgba(205, 184, 138, .85); }
.cpr-bar .cpr-ghost { background: repeating-linear-gradient(135deg, rgba(205, 184, 138, .34) 0 4px, rgba(205, 184, 138, .16) 4px 8px); }
.cpr-bar u { position: absolute; top: -4px; bottom: -4px; width: 1.5px; margin-left: -0.75px; background: rgba(255, 255, 255, .55); text-decoration: none; }
.cpr-bar s { position: absolute; top: -2px; bottom: -2px; border-radius: 3px; background: rgba(255, 255, 255, .13); text-decoration: none; }
.cpr-scale { position: relative; display: block; height: 13px; font-size: 9.5px; line-height: 13px; color: #8e88ad; font-variant-numeric: tabular-nums; }
.cpr-scale em { position: absolute; top: 0; font-style: normal; white-space: nowrap; }
.cpr-scale .l { left: 0; } .cpr-scale .r { right: 0; }
.cpr-scale .m { transform: translateX(-50%); color: #b9b3d3; }
.cpr-say { font-size: 11.5px; line-height: 1.45; color: #b9b3d3; }
.cpr.up .cpr-val, .cpr.up .cpr-word { color: #5fe8b4; }
.cpr.up .cpr-bar .cpr-fill { background: linear-gradient(90deg, #00b377, #5fe8b4); }
.cpr.up .cpr-bar .cpr-ghost { background: repeating-linear-gradient(135deg, rgba(95, 232, 180, .38) 0 4px, rgba(95, 232, 180, .16) 4px 8px); }
.cpr.down .cpr-val, .cpr.down .cpr-word { color: #ff8fa3; }
.cpr.down .cpr-bar .cpr-fill { background: linear-gradient(90deg, #ff4d6d, #ff8fa3); }
.cpr.low .cpr-word { color: #cdb88a; }
.cpr.flat .cpr-val { color: #d6d1ea; }
.cpr.nodata .cpr-val { font-size: 12px; font-weight: 500; color: #6f698c; }
.cpr-more { padding: 0 8px 11px; }
.cpr-exp { margin: 0; font-size: 11.5px; line-height: 1.5; color: #a8a2c4; max-width: 86ch; }
@media (prefers-reduced-motion: reduce) { .cpr-bar i { transition: none; } }
.cp-hm a { color: #cdb8ff; text-decoration: underline; text-underline-offset: 2px; }
.cp-hm a:hover { color: #fff; }
.cpr.stale .cpr-say { color: #f5c451; }

/* ═══ Cockpit: the curve, and the board that can be rearranged ═══════════ */
.cpr-chart { margin: 2px 0 10px; }
.cph-plot { position: relative; height: 120px; border-radius: 10px; background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(190, 170, 255, 0.10); overflow: hidden; }
.cph-plot svg { position: absolute; inset: 8px 0; width: 100%; height: calc(100% - 16px); display: block; }
.cph-line { fill: none; stroke: #cdb8ff; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cph-area { fill: rgba(176, 108, 245, 0.13); stroke: none; }
.cph-ref { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.cph-band { fill: rgba(255, 255, 255, 0.07); }
.cph-bar.up { fill: rgba(0, 212, 138, 0.8); } .cph-bar.down { fill: rgba(255, 77, 109, 0.8); }
.cph-bar.soft { opacity: .45; }
.cph-plot em { position: absolute; font-style: normal; font: 500 9.5px/1 "JetBrains Mono", ui-monospace, monospace; color: #b9b3d3;
  padding: 2px 5px; border-radius: 5px; background: rgba(10, 7, 24, 0.72); pointer-events: none; }
.cph-hi { top: 4px; left: 4px; } .cph-lo { bottom: 4px; left: 4px; }
.cph-reflab { right: 4px; transform: translateY(-50%); color: #fff; }
.cph-axis { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px;
  font: 500 10px/1.3 "JetBrains Mono", ui-monospace, monospace; color: #8e88ad; }
.cph-axis b { color: #f4f2ff; font-weight: 700; }
.cph-none { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 11.5px; color: #8e88ad; background: rgba(255, 255, 255, 0.03); }

.cp-grip { flex: 0 0 auto; width: 12px; height: 16px; margin-right: 2px; cursor: grab; opacity: .28; align-self: center;
  background-image: radial-gradient(circle, #cfc9e6 1.1px, transparent 1.4px); background-size: 6px 6px; background-position: 0 1px;
  transition: opacity .15s ease; }
.cpr > summary:hover .cp-grip, .cp-grp h3:hover .cp-grip { opacity: .8; }
.cp-grip:active { cursor: grabbing; }
.cp-grp h3 { display: flex; align-items: center; gap: 6px; }
.cp-dragging { opacity: .4; }
.cpr.cp-dropb { box-shadow: inset 0 2px 0 #b06cf5; } .cpr.cp-dropa { box-shadow: inset 0 -2px 0 #b06cf5; }
.cp-grp.cp-dropb { box-shadow: 0 -3px 0 #b06cf5; } .cp-grp.cp-dropa { box-shadow: 0 3px 0 #b06cf5; }
.cp-grp.cp-dropin .cp-rows { border-color: #b06cf5; }
.cp-own { color: #cdb88a !important; }

/* ═══ Cockpit: spans, the read-out under the mouse, the user's own groups ═ */
.cph-ranges { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 6px; }
.cph-r { padding: 2px 8px; border-radius: 999px; cursor: pointer; font: 600 10px/1.5 "JetBrains Mono", ui-monospace, monospace;
  color: #a8a2c4; background: transparent; border: 1px solid transparent; }
.cph-r:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .06); }
.cph-r.on { color: #fff; background: rgba(176, 108, 245, .22); border-color: rgba(176, 108, 245, .5); }
.cph-r:disabled { opacity: .28; cursor: default; }
.cph-r:focus-visible { outline: 2px solid #35baf2; outline-offset: 1px; }
.cph-plot { cursor: crosshair; }
.cph-plot.loading { opacity: .55; }
.cph-cross { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: rgba(255, 255, 255, .45); pointer-events: none; }
.cph-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 2px rgba(176, 108, 245, .7); pointer-events: none; }
.cph-tip { position: absolute; bottom: 6px; transform: translateX(-50%); padding: 3px 8px; border-radius: 7px; white-space: nowrap; pointer-events: none;
  font: 600 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace; color: #fff; background: rgba(20, 12, 44, .94); border: 1px solid rgba(190, 170, 255, .35); }
.cph-tip.flip { transform: translateX(-100%); margin-left: -8px; }
.cph-tip:not(.flip) { transform: translateX(0); margin-left: 8px; }
.cph-tip.low { bottom: auto; top: 6px; }
.cph-cross[hidden], .cph-dot[hidden], .cph-tip[hidden] { display: none; }

/* a smaller handle (Marco: "the drag and drop icon is too big") */
.cp-grip { width: 7px; height: 11px; margin-right: 1px; opacity: .22;
  background-image: radial-gradient(circle, #cfc9e6 0.9px, transparent 1.2px); background-size: 4px 4px; background-position: 0 0; }
.cp-gname { outline: none; border-radius: 5px; padding: 1px 3px; margin-left: -3px; }
.cp-gname.editing { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1.5px #b06cf5; color: #fff; text-transform: none; letter-spacing: 0; cursor: text; }
.cp-gbtn { padding: 0 5px; border: 0; border-radius: 5px; background: transparent; color: #8e88ad; font-size: 11px; line-height: 1.4; cursor: pointer; opacity: 0;
  transition: opacity .15s ease; }
.cp-grp h3:hover .cp-gbtn, .cp-gbtn:focus-visible { opacity: 1; }
.cp-gbtn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.cp-dropzone { margin: 0; padding: 14px 10px; text-align: center; font-size: 11.5px; color: #8e88ad; border: 1px dashed rgba(190, 170, 255, .25); border-radius: 10px; }
.cp-gbtn:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }

/* the Cockpit's action row: under the intro, like .sideacts in the pattern notes */
.cp-head { grid-template-columns: 1fr auto; }
.cp-acts-top { grid-column: 1 / -1; display: flex; gap: var(--s2, 8px); margin-top: 10px; }

/* …and exactly like it: the pattern notes' own row class for the small pill
   buttons, pushed to the right edge, without that row's side padding (the
   Cockpit panel has its own) */
html.glass .cp-acts-top.sideacts, .cp-acts-top.sideacts { padding: 0; margin-top: 8px; justify-content: flex-end; gap: 6px; }
/* the pill itself, measured off the pattern notes' "Neue Gruppe": 10.5px, 2px 6px, 19px high */
html.glass .cp-acts-top .act, .cp-acts-top .act { padding: 2px 6px; font-size: 10.5px; font-weight: 400; line-height: normal; border-radius: 999px;
  color: #e3dff5; background: rgba(163, 148, 243, 0.08); border: 0.8px solid rgba(163, 148, 243, 0.24); }
html.glass .cp-acts-top .act:hover, .cp-acts-top .act:hover { background: rgba(163, 148, 243, 0.16); }

/* ═══ Masterminds: a person's public rules, measured ═════════════════════
   The rows are the Cockpit's (.cp-rows / .cpr …) on purpose; only what this
   page has of its own is here, all of it prefixed mm-. */
body.minds:not(.folded) .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.minds:not(.folded) { --panelW: 50%; }
body.minds .trash { display: none; }
#minds { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; overflow-y: auto; padding: 2px 2px 22px; }
#minds[hidden] { display: none !important; }
#minds > * { flex-shrink: 0; }
.mm-card { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(10, 7, 24, 0.66);
  border: 1px solid rgba(190, 170, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.mm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mm-avatar { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  font: 700 16px/1 "JetBrains Mono", ui-monospace, monospace; color: #e9d9ff; background: #2a2150;
  border: 1px solid rgba(190, 170, 255, 0.35); }
.mm-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-who { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.mm-who b { font-size: 15px; font-weight: 650; color: #f2effa; }
.mm-who em { font-style: normal; font-size: 11.5px; line-height: 1.4; color: #9c97b8; }
.mm-links { display: flex; gap: 6px; }
.mm-links a { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-decoration: none; color: #d6d1ea;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(190, 170, 255, .18); }
.mm-links a:hover { background: rgba(176, 108, 245, .18); border-color: rgba(176, 108, 245, .5); color: #fff; }
.mm-links a:focus-visible, .mm-videos a:focus-visible, .mm-about > summary:focus-visible, .mm-beyond > summary:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.mm-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(190, 170, 255, .12); }
.mm-verdict b { font-size: 14px; font-weight: 650; color: #f2effa; }
.mm-verdict span { font-size: 11.5px; color: #b9b3d3; }
.mm-verdict.bull { border-color: rgba(0, 212, 138, .35); background: rgba(0, 212, 138, .06); }
.mm-verdict.bull b { color: #5fe8b4; }
.mm-verdict.bear { border-color: rgba(255, 77, 109, .35); background: rgba(255, 77, 109, .06); }
.mm-verdict.bear b { color: #ff8fa3; }
.mm-verdict.mixed b { color: #f5c451; }
.mm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mm-chip { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.mm-chip.ok { color: #5fe8b4; background: rgba(0, 212, 138, .10); border-color: rgba(0, 212, 138, .3); }
.mm-chip.no { color: #ff8fa3; background: rgba(255, 77, 109, .10); border-color: rgba(255, 77, 109, .3); }
.mm-price { margin-left: auto; font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; color: #8e88ad; }
.mm-about > summary, .mm-beyond > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: #b9b3d3; border-radius: 6px; }
.mm-about > summary::-webkit-details-marker, .mm-beyond > summary::-webkit-details-marker { display: none; }
.mm-about > summary::before, .mm-beyond > summary::before { content: ''; width: 5px; height: 5px; border-right: 1.5px solid #9c97b8; border-bottom: 1.5px solid #9c97b8;
  transform: rotate(-45deg); transition: transform .15s ease; }
.mm-about[open] > summary::before, .mm-beyond[open] > summary::before { transform: rotate(45deg); }
.mm-about p { margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: #a8a2c4; max-width: 86ch; }
.mm-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 6px 2px -4px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #8e88ad; }
.mm-h small { font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #cdb88a; }
.mm-check { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; align-self: center;
  font-size: 11px; font-weight: 700; line-height: 1; }
.mm-check.ok { color: #06130e; background: #5fe8b4; }
.mm-check.no { color: #1c060b; background: #ff8fa3; }
.mm-check.na { color: #6f698c; background: rgba(255, 255, 255, .06); }
.mm-row .cpr-more h5 { margin: 10px 0 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8e88ad; }
.mm-row .cpr-more h5:first-child { margin-top: 0; }
.mm-tablewrap { margin-top: 10px; overflow-x: auto; }
.mm-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mm-table th, .mm-table td { padding: 6px 8px; text-align: right; vertical-align: top; border-top: 1px solid rgba(190, 170, 255, 0.08); }
.mm-table thead th { border-top: 0; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #8e88ad; white-space: nowrap; }
.mm-table th:first-child { text-align: left; font-weight: 600; color: #d6d1ea; }
.mm-table td { color: #d6d1ea; white-space: nowrap; }
.mm-table td b { display: block; font: 700 12.5px/1.2 "JetBrains Mono", ui-monospace, monospace; }
.mm-table td small { display: block; margin-top: 1px; font-size: 10px; color: #8e88ad; }
.mm-table td.up b { color: #5fe8b4; } .mm-table td.down b { color: #ff8fa3; } .mm-table td.none { color: #6f698c; }
.mm-table tr.now th, .mm-table tr.now td { background: rgba(205, 184, 138, .06); }
.mm-foot { margin: 6px 0 0; font-size: 10.5px; line-height: 1.45; color: #6f698c; max-width: 86ch; }
.mm-beyond { padding: 12px; }
.mm-beyond ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.mm-beyond li { display: grid; gap: 2px; }
.mm-beyond li b { font-size: 12px; font-weight: 600; color: #ece9f6; }
.mm-beyond li span { font-size: 11.5px; line-height: 1.5; color: #a8a2c4; max-width: 86ch; }
.mm-videos { list-style: none; margin: 0; padding: 6px 8px; display: grid; gap: 2px; border-radius: 14px; background: rgba(10, 7, 24, 0.66);
  border: 1px solid rgba(190, 170, 255, 0.16); }
.mm-videos li + li { border-top: 1px solid rgba(190, 170, 255, 0.08); }
.mm-videos a { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: baseline; padding: 8px; border-radius: 8px; text-decoration: none; }
.mm-videos a:hover { background: rgba(255, 255, 255, 0.04); }
.mm-videos time { font: 500 10.5px/1.4 "JetBrains Mono", ui-monospace, monospace; color: #8e88ad; white-space: nowrap; }
.mm-videos span { font-size: 12.5px; line-height: 1.4; color: #ece9f6; }
/* six modes have to fit beside DeskShare */
@media (max-width: 1320px) { html.glass .mode { padding-left: 9px; padding-right: 9px; font-size: 11px; } }
@media (max-width: 1100px) { html.glass .mode { padding-left: 7px; padding-right: 7px; font-size: 10.5px; } }
/* the running price on the other side of what the last close decided */
.mm-row.up .cpr-bar .cpr-fill.mm-plain, .mm-row.down .cpr-bar .cpr-fill.mm-plain { background: rgba(205, 184, 138, .85); }
.mm-row.up .cpr-val, .mm-row.down .cpr-val { color: #f4f2ff; }
.mm-row .cpr-more .cpr-exp + .cpr-exp { margin-top: 8px; }
/* the week as a feed of posts */
.mm-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mm-post { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px;
  background: rgba(10, 7, 24, 0.66); border: 1px solid rgba(190, 170, 255, 0.16); }
.mm-avatar.mm-sm { width: 36px; height: 36px; font-size: 12px; }
.mm-postbody { display: block; min-width: 0; text-decoration: none; color: inherit; }
a.mm-postbody:hover p { color: #fff; }
a.mm-postbody:focus-visible { outline: 2px solid #35baf2; outline-offset: 3px; border-radius: 6px; }
.mm-posthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; }
.mm-posthead b { font-size: 12.5px; font-weight: 650; color: #f2effa; }
.mm-posthead em { font-style: normal; font-size: 11.5px; color: #8e88ad; }
.mm-posthead time { margin-left: auto; font: 500 10.5px/1.4 "JetBrains Mono", ui-monospace, monospace; color: #8e88ad; white-space: nowrap; }
.mm-post p { margin: 4px 0 6px; font-size: 13px; line-height: 1.5; color: #ece9f6; max-width: 78ch; white-space: pre-line; overflow-wrap: anywhere; }
.mm-post small { display: block; font-size: 10.5px; line-height: 1.4; color: #8e88ad; }
.mm-post.real small { color: #9fd0ff; }
.mm-morefeed > .mm-feed { margin-top: 10px; }
.mm-morefeed .mm-post { background: rgba(255, 255, 255, .03); }
/* ═══ Masterminds: the round ═════════════════════════════════════════════ */
.mm-strip { display: flex; flex-wrap: wrap; gap: 8px 4px; padding: 10px 8px; border-radius: 14px; background: rgba(10, 7, 24, 0.5);
  border: 1px solid rgba(190, 170, 255, 0.12); }
.mm-face { display: grid; justify-items: center; gap: 4px; width: 58px; padding: 4px 0; border: 0; border-radius: 10px; cursor: pointer;
  background: none; font: inherit; color: #9c97b8; }
.mm-face em { font-style: normal; font-size: 9.5px; line-height: 1.15; text-align: center; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-face:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.mm-face:focus-visible, .mm-pill:focus-visible, .mm-facebtn:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.mm-face.on { color: #fff; }
.mm-face.on .mm-avatar { border-color: #b06cf5; box-shadow: none; }
.mm-facewrap { position: relative; display: block; }
.mm-avatar.mm-md { width: 40px; height: 40px; font-size: 12.5px; }
.mm-avatar.mm-xs { width: 18px; height: 18px; font-size: 7.5px; border-width: 0; }
.mm-allicon { background: rgba(255, 255, 255, .06); color: #d6d1ea; }
.mm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #5d587a; flex: none; }
.mm-facewrap .mm-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid #120c26; box-sizing: content-box; }
.mm-dot.bullish { background: #5fe8b4; } .mm-dot.bearish { background: #ff8fa3; } .mm-dot.neutral { background: #f5c451; }
.mm-round { gap: 12px; }
.mm-roundhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mm-roundhead b { font-size: 15px; font-weight: 650; color: #f2effa; }
.mm-roundhead span { font-size: 11.5px; color: #b9b3d3; }
.mm-seg { display: flex; gap: 2px; height: 8px; border-radius: 8px; overflow: hidden; }
.mm-seg i { display: block; min-width: 4px; }
.mm-seg .bullish { background: linear-gradient(90deg, #00b377, #5fe8b4); }
.mm-seg .neutral { background: #f5c451; }
.mm-seg .bearish { background: linear-gradient(90deg, #ff8fa3, #ff4d6d); }
.mm-groups { display: grid; gap: 10px; }
.mm-group h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8e88ad; }
.mm-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px;
  font-weight: 600; color: #e4e0f3; background: rgba(255, 255, 255, .05); border: 1px solid rgba(190, 170, 255, .16); }
.mm-pill:hover { background: rgba(176, 108, 245, .18); border-color: rgba(176, 108, 245, .5); color: #fff; }
.mm-group.bullish .mm-pill { border-color: rgba(0, 212, 138, .3); }
.mm-group.bearish .mm-pill { border-color: rgba(255, 77, 109, .3); }
.mm-group.neutral .mm-pill { border-color: rgba(245, 196, 81, .3); }
.mm-group.none .mm-pill { color: #9c97b8; font-weight: 500; }
.mm-facebtn { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; align-self: start; }
.mm-stance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(190, 170, 255, .12); }
.mm-stance i { width: 9px; height: 9px; border-radius: 50%; background: #5d587a; align-self: center; }
.mm-stance b { font-size: 13px; font-weight: 650; color: #d6d1ea; }
.mm-stance span { flex: 1 1 220px; font-size: 11.5px; line-height: 1.45; color: #b9b3d3; }
.mm-stance em { font-style: normal; font-size: 10px; color: #6f698c; }
.mm-stance.bullish i { background: #5fe8b4; } .mm-stance.bullish b { color: #5fe8b4; }
.mm-stance.bearish i { background: #ff8fa3; } .mm-stance.bearish b { color: #ff8fa3; }
.mm-stance.neutral i { background: #f5c451; } .mm-stance.neutral b { color: #f5c451; }
.mm-proof { margin: 5px 0 0; font-size: 10.5px; color: #8e88ad; }
.mm-proof a { color: #9fd0ff; text-decoration: none; }
.mm-proof a:hover { text-decoration: underline; }
.mm-proof a:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; border-radius: 3px; }
/* regions and waves */
.mm-regions { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-region { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600;
  color: #b9b3d3; background: rgba(255, 255, 255, .04); border: 1px solid rgba(190, 170, 255, .16); }
.mm-region i { font-style: normal; font: 600 10px/1 "JetBrains Mono", ui-monospace, monospace; color: #8e88ad; }
.mm-region:hover { color: #fff; background: rgba(176, 108, 245, .16); }
.mm-region.on { color: #fff; background: rgba(176, 108, 245, .28); border-color: rgba(176, 108, 245, .6); }
.mm-region.on i { color: #e9d9ff; }
.mm-region:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.mm-waves { gap: 10px; }
.mm-mood { padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #b9b3d3; background: rgba(255, 255, 255, .05); }
.mm-mood.loud { color: #1c1204; background: #f5c451; }
.mm-mood.quiet { color: #8e88ad; }
.mm-wave { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.mm-wave h5 { grid-column: 1 / -1; margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8e88ad; }
.mm-wave p { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; line-height: 1.5; color: #d6d1ea; }
.mm-wave .mm-spark + p { grid-column: 2; }
.mm-spark { display: inline-flex; align-items: flex-end; gap: 3px; width: 62px; height: 26px; }
.mm-spark i { flex: 1; border-radius: 2px; background: rgba(205, 184, 138, .45); }
.mm-spark i.now { background: #cdb88a; }
.mm-shift, .mm-topic { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; color: #b9b3d3;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(190, 170, 255, .14); }
.mm-shift b, .mm-topic b { font-weight: 650; color: #f2effa; }
.mm-shift em { font-style: normal; font-size: 10px; color: #8e88ad; }
.mm-shift.bullish { border-color: rgba(0, 212, 138, .4); } .mm-shift.bearish { border-color: rgba(255, 77, 109, .4); }
/* the list is the desk's: add, take off, bring back */
.mm-addbtn .mm-allicon { font-size: 18px; font-weight: 500; }
.mm-addform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(10, 7, 24, 0.62);
  border: 1px solid rgba(190, 170, 255, 0.16); }
.mm-addform input { min-width: 0; padding: 7px 10px; border-radius: 9px; font: inherit; font-size: 12.5px; color: #f2effa; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(190, 170, 255, .22); }
.mm-addform input:focus-visible { outline: 2px solid #35baf2; outline-offset: 1px; }
.mm-addform p { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.5; color: #8e88ad; max-width: 86ch; }
.mm-addform p.ok { color: #5fe8b4; } .mm-addform p.bad { color: #ff8fa3; }
.mm-remove { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; color: #b9b3d3; }
.mm-removelink { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 11px; color: #6f698c; text-decoration: underline; text-underline-offset: 2px; }
.mm-removelink:hover { color: #ff8fa3; }
.mm-removelink:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.mm-remove .act.danger { color: #ffd1d9; border-color: rgba(255, 77, 109, .5); background: rgba(255, 77, 109, .14); }
.mm-gone .mm-goneitem { grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; display: grid; }
/* what they expect: levels and if/thens; the round's ladder */
.mm-calls h5, .mm-ladder h5 { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8e88ad; }
.mm-calls h5 em { margin-left: auto; font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0; color: #8e88ad; font-style: normal; }
.mm-calls ul, .mm-ladder ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mm-call { display: grid; grid-template-columns: 112px auto auto minmax(0, 1fr); align-items: baseline; gap: 2px 10px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .035); }
.mm-kind { font-size: 10.5px; font-weight: 600; color: #b9b3d3; }
.mm-lvl { font: 700 15px/1.1 "JetBrains Mono", ui-monospace, monospace; color: #f4f2ff; white-space: nowrap; }
.mm-call i, .mm-rung i { font-style: normal; font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; white-space: nowrap; }
.mm-call i.up, .mm-rung i.up { color: #5fe8b4; } .mm-call i.down, .mm-rung i.down { color: #ff8fa3; }
.mm-ifthen { grid-column: 2 / -1; font-size: 12px; line-height: 1.45; color: #e4e0f3; }
.mm-ifthen u { text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #cdb88a; }
.mm-quote { grid-column: 2 / -1; font-size: 11px; line-height: 1.45; color: #8e88ad; text-decoration: none; font-style: italic; }
.mm-quote:hover { color: #cdb8ff; }
.mm-quote:focus-visible, .mm-rung a:focus-visible, .mm-rungname:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; border-radius: 3px; }
.mm-call.support .mm-lvl, .mm-rung.support .mm-lvl { color: #9fe8cc; }
.mm-call.resistance .mm-lvl, .mm-rung.resistance .mm-lvl { color: #ffc2cc; }
.mm-ladder { gap: 8px; }
.mm-rung { display: grid; grid-template-columns: 18px minmax(70px, 120px) minmax(0, 1fr) auto 48px 16px; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; }
.mm-rung:hover { background: rgba(255, 255, 255, .04); }
.mm-rungname { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: #ece9f6; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-rungname:hover { color: #cdb8ff; }
.mm-rung .mm-lvl { font-size: 13.5px; text-align: right; }
.mm-rung i { text-align: right; }
.mm-rung a { color: #8e88ad; text-decoration: none; font-size: 12px; }
.mm-rung a:hover { color: #fff; }
.mm-now { display: flex; align-items: center; gap: 10px; margin: 4px 0; padding: 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #cdb88a; }
.mm-now::before, .mm-now::after { content: ''; flex: 1; height: 1px; background: rgba(205, 184, 138, .45); }
.mm-now b { font: 700 13px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0; color: #f4e6c4; }
@media (max-width: 1500px) { .mm-call { grid-template-columns: 92px auto auto minmax(0, 1fr); } }
.mm-setregion { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #8e88ad; margin-right: auto; }
.mm-setregion select { padding: 2px 6px; border-radius: 7px; font: inherit; font-size: 11px; color: #e4e0f3; background: rgba(255, 255, 255, .06); border: 1px solid rgba(190, 170, 255, .18); }
.mm-setregion select:focus-visible { outline: 2px solid #35baf2; outline-offset: 1px; }

/* the reader's order; the number it is made of; reach by channel */
.mm-sort { padding: 3px 10px; }
.mm-face small { font: 600 9px/1.1 "JetBrains Mono", ui-monospace, monospace; color: #8e88ad; white-space: nowrap; }
.mm-face.on small { color: #cdb8ff; }
.mm-face small.bullish { color: #5fe8b4; } .mm-face small.bearish { color: #ff8fa3; } .mm-face small.neutral { color: #f5c451; }
.mm-face { width: 62px; }
.mm-reach { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 11.5px; color: #b9b3d3; }
.mm-reach b { font-weight: 650; color: #f2effa; }
.mm-reach span { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .05); font-variant-numeric: tabular-nums; }
.mm-reach em { flex-basis: 100%; font-style: normal; font-size: 10px; color: #6f698c; }
/* the order as a small menu, so regions and order share one row */
.mm-regions { flex-wrap: nowrap; align-items: center; overflow-x: auto; scrollbar-width: none; }
.mm-regions::-webkit-scrollbar { display: none; }
.mm-region { flex: none; white-space: nowrap; padding: 3px 9px; }
.mm-sortsel { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 9px; border-radius: 999px; color: #b9b3d3;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(190, 170, 255, .16); }
.mm-sortsel select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 600; color: #e4e0f3; cursor: pointer;
  padding: 2px 16px 2px 2px; background-image: linear-gradient(45deg, transparent 50%, #9c97b8 50%), linear-gradient(135deg, #9c97b8 50%, transparent 50%);
  background-position: calc(100% - 8px) 55%, calc(100% - 4px) 55%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.mm-sortsel select:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; border-radius: 6px; }

/* the glass skin paints every select and input dark (html.glass select …), which
   out-ranks a plain class: the order menu stood there as a black box (Marco's
   screenshot, 19 Sept). Said again with the skin's own weight. */
html.glass .mm-sortsel select, .mm-sortsel select { background-color: transparent; border: 0; box-shadow: none; outline-offset: 2px; }
html.glass .mm-sortsel select:hover, .mm-sortsel select:hover { color: #fff; }
html.glass .mm-sortsel, .mm-sortsel { padding: 3px 6px 3px 10px; }
html.glass .mm-sortsel:hover, .mm-sortsel:hover { background: rgba(176, 108, 245, .16); color: #fff; }
html.glass .mm-setregion select, .mm-setregion select { background-color: rgba(255, 255, 255, .06); }
html.glass .mm-addform input, .mm-addform input { background-color: rgba(255, 255, 255, .06); }
/* valuation by their own numbers */
.mm-pill em { font-style: normal; font: 600 10px/1 "JetBrains Mono", ui-monospace, monospace; color: #9c97b8; margin-left: 2px; }
.mm-valuation b { text-transform: none; }
.mm-call.desk { background: rgba(205, 184, 138, .07); }
.mm-call.desk .mm-quote { font-style: normal; color: #cdb88a; }
.mm-quote em { font-style: normal; color: #6f698c; }
/* …and one older rule paints every select with !important (so that Firefox's option list is dark).
   Only !important answers that. The option list itself stays dark on purpose. */
html.glass .mm-sortsel select, .mm-sortsel select { background-color: transparent !important; }
html.glass .mm-setregion select, .mm-setregion select { background-color: rgba(255, 255, 255, .06) !important; }
.mm-sortsel select option, .mm-setregion select option { color: #e4e0f3; }
/* ═══ the Pattern School: a pinned tab, labels on the cards, our own odds ═══ */
html.glass .tabs .tab.tab-school, .tab.tab-school { display: inline-flex; align-items: center; gap: 6px; flex: none; color: #cdb88a;
  border-right: 1px solid rgba(205, 184, 138, .25); margin-right: 6px; }
html.glass .tabs .tab.tab-school.on, .tab.tab-school.on { color: #f4e6c4; background-color: rgba(205, 184, 138, .14); }
.tab-fixedname { font-weight: 600; white-space: nowrap; }
.school-box { display: grid; gap: 8px; margin: 0 0 12px; padding: 12px; border-radius: 14px; background: rgba(10, 7, 24, 0.62); border: 1px solid rgba(205, 184, 138, .28); }
.school-box h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; font-weight: 650; color: #f4e6c4; }
.school-box h3 em { font-style: normal; font-size: 11px; font-weight: 500; color: #9c97b8; }
.school-box p { margin: 0; font-size: 11.5px; line-height: 1.5; color: #bdb7d4; }
.school-tablewrap { overflow-x: auto; min-width: 0; max-width: 100%; }
.school-box > *, .lab-box > *, .lab-sec > * { min-width: 0; max-width: 100%; }
.school-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.school-table th, .school-table td { padding: 5px 6px; text-align: right; border-top: 1px solid rgba(190, 170, 255, .08); color: #d6d1ea; white-space: nowrap; }
.school-table thead th { border-top: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: #8e88ad; }
.school-table th:first-child { text-align: left; font-weight: 600; }
.school-how > summary { cursor: pointer; font-size: 11px; font-weight: 600; color: #9c97b8; list-style: none; }
.school-how > summary::-webkit-details-marker { display: none; }
.school-how p { margin-top: 6px; font-size: 11px; color: #a8a2c4; }
.schoolrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; }
html.glass .schoolrow .school-type, .schoolrow .school-type { max-width: 190px; padding: 3px 6px; border-radius: 8px; font: inherit; font-size: 11.5px; color: #f2effa;
  background-color: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(205, 184, 138, .35); }
.schoolrow .school-type.unset { color: #cdb88a; border-style: dashed; }
.school-dir { padding: 2px 9px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #9c97b8;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(190, 170, 255, .16); }
.school-dir.long.on { color: #06130e; background: #5fe8b4; border-color: #5fe8b4; }
.school-dir.short.on { color: #1c060b; background: #ff8fa3; border-color: #ff8fa3; }
.school-type:focus-visible, .school-dir:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.school-out { flex-basis: 100%; font-size: 11px; line-height: 1.45; color: #9c97b8; }
.school-out.hit { color: #5fe8b4; } .school-out.miss { color: #ff8fa3; }
/* the order menu, drawn by the desk instead of the browser */
.mm-regions { overflow: visible; }
.mm-sortmenu { position: relative; flex: none; margin-left: auto; }
.mm-sortbtn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px; color: #b9b3d3;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(190, 170, 255, .16); }
.mm-sortbtn b { font-weight: 600; color: #e4e0f3; }
.mm-sortbtn i { width: 5px; height: 5px; border-right: 1.5px solid #9c97b8; border-bottom: 1.5px solid #9c97b8; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.mm-sortmenu.open .mm-sortbtn i { transform: rotate(-135deg) translateY(-1px); }
.mm-sortbtn:hover, .mm-sortmenu.open .mm-sortbtn { background: rgba(176, 108, 245, .18); border-color: rgba(176, 108, 245, .5); color: #fff; }
.mm-sortbtn:focus-visible, .mm-sortlist button:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
.mm-sortlist { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 100%; display: grid; gap: 2px; padding: 5px; border-radius: 12px;
  background: rgba(22, 14, 44, 0.96); border: 1px solid rgba(190, 170, 255, .28); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); backdrop-filter: blur(10px); }
.mm-sortlist button { padding: 6px 12px; border: 0; border-radius: 8px; cursor: pointer; text-align: left; white-space: nowrap; font: inherit; font-size: 12px; font-weight: 500;
  color: #d6d1ea; background: none; }
.mm-sortlist button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.mm-sortlist button.on { color: #fff; background: rgba(176, 108, 245, .28); font-weight: 650; }
.mm-regions { flex-wrap: wrap; }
/* strike a call the AI misread */
.mm-wrong { grid-column: 2 / -1; justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 10px; color: #6f698c; text-decoration: underline; text-underline-offset: 2px; }
.mm-wrong:hover { color: #ff8fa3; }
.mm-wrong:focus-visible { outline: 2px solid #35baf2; outline-offset: 2px; }
/* "Von der Liste nehmen" was a grey underlined word at the very bottom — Marco, 19 Sept: "needs to be
   better visible". A real button now, quiet until the hand is on it, red when it is. */
.mm-remove { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(10, 7, 24, 0.5); border: 1px solid rgba(190, 170, 255, 0.12); }
.mm-removelink { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #ffb3c0;
  text-decoration: none; background: rgba(255, 77, 109, .08); border: 1px solid rgba(255, 77, 109, .35); }
.mm-removelink::before { content: '×'; font-size: 14px; line-height: 1; }
.mm-removelink:hover { color: #fff; background: rgba(255, 77, 109, .28); border-color: rgba(255, 77, 109, .7); }
/* twenty-four timeframes on a pattern card: small chips that wrap, instead of one long line */
.tfrow { flex-wrap: wrap; row-gap: 3px; }

/* ── the Lab, folded under the school's odds ── */
.lab-box > summary em { font-style: normal; font-weight: 500; color: #7f7a9c; margin-left: 6px; }
.lab-lead { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 11.5px; line-height: 1.5; color: #d6d1ea; }
.lab-lead b { color: #f4e6c4; font-weight: 650; }
.lab-sec { margin-top: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .025); }
.lab-sec > summary { cursor: pointer; font-size: 11px; font-weight: 600; color: #cdb88a; list-style: none; }
.lab-sec > p { margin: 6px 0; font-size: 11px; color: #9c97b8; }
.lab-note { margin-top: 6px; font-size: 10.5px; color: #8e88ad; }
.lab-table td:nth-child(2), .lab-table th:nth-child(2) { text-align: left; white-space: normal; min-width: 140px; }

/* ── sources: the line under the legend, the ⓘ, the page ── */
#chartwrap { position: relative; }
.srcline { position: absolute; left: 104px; bottom: 66px; z-index: 3; pointer-events: auto; cursor: pointer;
  font-size: 10.5px; letter-spacing: .01em; color: rgba(190, 182, 214, .62); padding: 1px 6px; border-radius: 6px; background: rgba(5, 5, 13, .35); }
.srcline:hover { color: #e9dfc0; }
.srcbtn { margin-left: 4px; }
.srcdlg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(4, 3, 12, .62); backdrop-filter: blur(6px); padding: 16px; }
.srcdlg-card { width: min(720px, 100%); max-height: 88vh; overflow: auto; padding: 16px 18px; border-radius: 16px;
  background: rgba(14, 10, 32, .96); border: 1px solid rgba(205, 184, 138, .3); color: #d6d1ea; font-size: 12px; line-height: 1.5; }
.srcdlg-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.srcdlg-card h2 { margin: 0; font-size: 15px; font-weight: 650; color: #f4e6c4; }
.srcdlg-x { border: 0; background: transparent; color: #9c97b8; font-size: 22px; line-height: 1; cursor: pointer; }
.srcdlg-intro, .srcdlg-note { margin: 8px 0; color: #9c97b8; font-size: 11.5px; }
.srcdlg-list { margin: 10px 0 0; display: grid; gap: 8px; }
.srcdlg-row { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(190, 170, 255, .08); }
.srcdlg-row dt { margin: 0; font-weight: 650; color: #e9dfc0; }
.srcdlg-row dt em { display: block; font-style: normal; font-weight: 500; font-size: 10.5px; color: #8e88ad; }
.srcdlg-row dd { margin: 0; }
.srcdlg-row a { color: #cdb88a; text-decoration: none; margin-left: 4px; }
@media (max-width: 640px) { .srcdlg-row { grid-template-columns: 1fr; gap: 2px; } }

/* the panel handle grows with its word: "schließen" is longer than "close" (Marco, 25 Sept 2026) */
.collapse { height: auto; min-height: 64px; padding: 9px 0; }
.collapse em { line-height: 1; }

/* ── trade-line grips: the label is the handle (js/tv-tradedesk.js) ── */
.tgrip { position: absolute; z-index: 5; pointer-events: auto; padding: 0 5px; height: 14px; line-height: 14px; border-radius: 3px;
  font: 600 9.5px "JetBrains Mono", monospace; color: #050810; white-space: nowrap; user-select: none; -webkit-user-select: none; touch-action: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: default; opacity: .92; }
.tgrip.grab { cursor: ns-resize; }
.tgrip.grab:hover { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 1px 4px rgba(0, 0, 0, .35); }
.tgrip.grab::before { content: '\2195 '; opacity: .6; }

/* the drag shield: over the chart only while a trade level is being pulled */
.tshield { position: absolute; inset: 0; z-index: 6; pointer-events: auto; cursor: ns-resize; background: transparent; touch-action: none; }
.tshield[hidden] { display: none; }

.rtcstate { cursor: default; font-variant-numeric: tabular-nums; min-width: 52px; justify-content: center; }
.rtcstate[hidden] { display: none; }