/*
 * Bot?zinha Mini App — visual system.
 *
 * DESIGN BRIEF (Phase 11)
 * -----------------------
 * Futuristic BLACK + NEON PINK. Premium, feminine, cute — but a real
 * application, not a generic crypto dashboard.
 *
 * The rules that keep it from becoming a wall of identical cards:
 *   * one hero, not twenty
 *   * information hierarchy via type scale, not box borders
 *   * compact data rows for values, cards only for workspaces
 *   * dedicated pages with back navigation, never one endless scroll
 *   * active-state indicators on tabs and sub-tabs
 *   * subtle motion, and only motion that respects the platform
 *
 * Palette is fixed to the brief: #050206 / #0a0410 base, #ff2d90 neon.
 */

:root {
  --bg: #050206;
  --bg-2: #0a0410;
  --panel: #100a18;
  --panel-2: #170d22;
  --line: #2a1a3a;
  --pink: #ff2d90;
  --pink-soft: #ff7ac0;
  --pink-dim: rgba(255, 45, 144, 0.16);
  --text: #f6eefb;
  --text-dim: #b9a3c9;
  --text-mute: #7d6a8d;
  --green: #2ee6a8;
  --red: #ff5470;
  --amber: #ffc857;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --glow: 0 0 0 1px rgba(255, 45, 144, 0.35), 0 0 22px rgba(255, 45, 144, 0.18);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  overscroll-behavior-y: contain;
}

body {
  /* A faint pink aurora so the black never reads as flat/dead. */
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(255, 45, 144, 0.16), transparent 60%),
    radial-gradient(700px 380px at 92% 4%, rgba(255, 45, 144, 0.10), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  padding-bottom: 84px;   /* room for the fixed tab bar */
}

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  background: rgba(5, 2, 6, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.top-title h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#topIcon { font-size: 17px; }

.back {
  display: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.back:active { transform: scale(0.94); }

.pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.pill.paper { color: var(--pink); border-color: var(--pink-dim); background: var(--pink-dim); }
.pill.live  { color: var(--red);  border-color: rgba(255,84,112,.3); background: rgba(255,84,112,.12); }

/* --------------------------------------------------------------- statusbar */
.statusbar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  font-size: 11.5px;
  color: var(--text-mute);
  background: rgba(10, 4, 16, 0.6);
  border-bottom: 1px solid var(--line);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); flex: none; }
.dot.ok  { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2.4s ease-in-out infinite; }
.dot.bad { background: var(--red); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* -------------------------------------------------------------------- view */
.view { padding: 16px 14px 28px; max-width: 720px; margin: 0 auto; }
.loading, .empty {
  padding: 22px 16px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13.5px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(16, 10, 24, 0.5);
}
.u { color: var(--text-mute); font-style: italic; }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; padding: 22px 4px 18px; text-align: center; }
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(300px 120px at 50% 0%, rgba(255,45,144,.28), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}
.hero-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(120deg, #fff 10%, var(--pink) 55%, var(--pink-soft) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--text-mute); letter-spacing: 1.4px; text-transform: uppercase; }

/* ------------------------------------------------------------------- cards */
.card {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px 0;
  box-shadow: var(--shadow);
  animation: rise .28s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.card-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.subhead {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--pink-soft);
  margin: 14px 0 6px;
}
.divider { height: 1px; background: var(--line); margin: 12px 0; }

/* wallet card is the visual anchor of Home */
.wallet-card { border-color: rgba(255,45,144,.28); box-shadow: var(--shadow), var(--glow); cursor: pointer; }
.wallet-main { font-size: 30px; font-weight: 750; letter-spacing: -0.6px; line-height: 1.15; }
.wallet-main .sym { font-size: 16px; font-weight: 600; color: var(--pink); }
.wallet-main .usd { display: block; font-size: 14px; font-weight: 500; color: var(--pink-soft); }
.wallet-usd { font-size: 15px; color: var(--pink-soft); font-weight: 600; margin-top: 2px; }
.asset-title { font-size: 19px; font-weight: 700; }
.addr {
  font-family: var(--mono); font-size: 11px; color: var(--text-mute);
  margin: 3px 0 8px; word-break: break-all;
}

/* ------------------------------------------------ candidate asset identity
   The user must be able to tell WHAT asset a card is before reading any
   number on it. Name first, ticker second, chain/address third. Uses the
   existing dark surface + neon pink palette; nothing else on the page
   changes. */
.ident {
  display: flex; flex-direction: column; gap: 3px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 45, 144, 0.18);
}
.ident-name {
  font-size: 20px; font-weight: 750; line-height: 1.2;
  color: #fff; word-break: break-word;
}
.ident-tick {
  font-size: 14px; font-weight: 700; color: var(--pink);
  letter-spacing: 0.02em;
}
.ident-sub {
  font-family: var(--mono); font-size: 11px; color: var(--text-mute);
  word-break: break-all;
}
.candidate .card-head { margin-bottom: 8px; }

/* ----------------------------------------------------- compact data rows */
.kv { display: flex; flex-direction: column; gap: 1px; }
.row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 7px 0;
  border-bottom: 1px solid rgba(42, 26, 58, 0.5);
}
.row:last-child { border-bottom: none; }
.row-l { font-size: 13px; color: var(--text-dim); min-width: 0; }
.row-v { font-size: 13.5px; font-weight: 600; text-align: right; flex: none; }
.row-v .usd { color: var(--pink-soft); font-weight: 500; }
.pos { color: var(--green); }
.neg { color: var(--red); }

.tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim);
  text-transform: uppercase; vertical-align: middle;
}
.tag.on  { color: var(--green); border-color: rgba(46,230,168,.32); background: rgba(46,230,168,.10); }
.tag.off { color: var(--red);   border-color: rgba(255,84,112,.32); background: rgba(255,84,112,.10); }
.tag.unknown { color: var(--text-mute); }

.note { font-size: 12px; color: var(--text-mute); margin: 8px 0 0; line-height: 1.5; }
.warn {
  font-size: 12px; color: var(--amber); margin: 8px 0 0;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: rgba(255,200,87,.07); border: 1px solid rgba(255,200,87,.18);
}
.warn-box { border-color: rgba(255,84,112,.4); }

/* ------------------------------------------------------------- section + grid */
.section-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-mute);
  margin: 22px 0 8px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid2.utility { margin-top: 18px; }

.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 14px 8px;
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-family: var(--font); cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.tile:active { transform: scale(0.96); border-color: var(--pink); box-shadow: var(--glow); }
.tile-i { font-size: 20px; line-height: 1; }
.tile-l { font-size: 11px; color: var(--text-dim); text-align: center; font-weight: 600; }
.tile-n { font-size: 17px; font-weight: 750; color: var(--pink); }
.tile.wide { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px 14px; }
.tile.preset { padding: 12px 4px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--text); font-family: var(--font);
  font-size: 12.5px; font-weight: 650; letter-spacing: .3px;
  cursor: pointer; transition: transform .12s ease, border-color .12s ease;
}
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: linear-gradient(120deg, var(--pink) 0%, #ff5aa8 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px rgba(255,45,144,.28);
}
.btn-soft { background: var(--panel-2); color: var(--text-dim); }
.btn.wide { width: 100%; }
.btn-tiny { padding: 5px 9px; font-size: 11px; }
.actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.actions .btn { flex: 1 1 auto; min-width: 84px; }

/* ------------------------------------------------------------------ subnav */
.subnav {
  display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.subnav::-webkit-scrollbar { display: none; }
.subtab {
  flex: none; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--text-dim); font-family: var(--font);
  font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.subtab.on { color: #fff; background: var(--pink); border-color: transparent; box-shadow: 0 4px 14px rgba(255,45,144,.3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip {
  padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--text-dim); font-family: var(--font);
  font-size: 12px; cursor: pointer;
}
.chip:active { border-color: var(--pink); color: var(--text); }
.chip.static { cursor: default; }

/* ------------------------------------------------------------------ forms */
.input {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--bg-2);
  color: var(--text); font-family: var(--font); font-size: 14px;
  outline: none; transition: border-color .15s ease;
}
.input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-dim); }
.field { display: block; margin-bottom: 11px; }
.field span { display: block; font-size: 11.5px; color: var(--text-mute); margin-bottom: 5px; letter-spacing: .4px; }
.inv-form, .qf-form, .chat-form { display: flex; gap: 8px; align-items: flex-end; }
.qf-form { flex-direction: column; align-items: stretch; }
.qf-form .field { margin-bottom: 9px; }
.chat-form { margin: 12px 0; }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 17px; font-weight: 700; }

/* --------------------------------------------------------------- evidence */
.why { margin: 10px 0; }
.bullet {
  font-size: 12.5px; color: var(--text-dim);
  padding: 5px 0 5px 12px; border-left: 2px solid var(--pink-dim);
  line-height: 1.45;
}
details { margin: 9px 0; border-top: 1px solid var(--line); padding-top: 8px; }
summary { font-size: 12px; color: var(--pink); cursor: pointer; font-weight: 600; }
details.contra summary { color: var(--amber); }

.body {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font); font-size: 13px; line-height: 1.55;
  color: var(--text-dim); max-height: 60vh; overflow-y: auto;
}
.qa { margin: 10px 0; }
.qa .q { font-size: 12.5px; font-weight: 700; color: var(--pink-soft); }
.qa .a { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.qa.unsupported .q { color: var(--text-mute); }

/* -------------------------------------------------------------------- chat */
.chat-head { text-align: left; }
.transcript { max-height: 52vh; overflow-y: auto; }
.msg { margin: 9px 0; }
.msg-role { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 3px; }
.msg-text {
  padding: 9px 12px; border-radius: 13px; font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.msg.user .msg-text { background: var(--pink-dim); border: 1px solid rgba(255,45,144,.24); }
.msg.assistant .msg-text { background: var(--bg-2); border: 1px solid var(--line); }

/* ------------------------------------------------------------------ tabbar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex;
  padding: 6px 8px max(6px, env(safe-area-inset-bottom));
  background: rgba(5, 2, 6, 0.9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; border: none; background: none;
  color: var(--text-mute); font-family: var(--font);
  cursor: pointer; border-radius: 11px; position: relative;
  transition: color .18s ease;
}
.tab span { font-size: 18px; line-height: 1; transition: transform .18s ease; }
.tab i { font-size: 9.5px; font-style: normal; font-weight: 600; letter-spacing: .3px; }
.tab.on { color: var(--pink); }
.tab.on span { transform: translateY(-1px) scale(1.1); }
.tab.on::after {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 2px; border-radius: 2px;
  background: var(--pink); box-shadow: 0 0 8px var(--pink);
}

.alert.hi { border-color: rgba(255,84,112,.3); }
.candidate { border-color: rgba(255,45,144,.22); }

/* --------------------------------------------------------------- a11y/motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 380px) {
  .grid2 { grid-template-columns: 1fr; }
  .wallet-main { font-size: 26px; }
  .hero-title { font-size: 26px; }
}

/* ===================================================================
   MARKET INTELLIGENCE — watch layer, asset cards, candles
   Keeps the pink / cute Bot?zinha identity: rounded, soft, feminine.
   =================================================================== */

/* Headline counters: "she is actively watching" made visible. */
.watch-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.wh-cell {
  background: linear-gradient(160deg, #fff0f6, #ffe3ef);
  border: 1px solid #ffc9de;
  border-radius: 16px;
  padding: 10px 6px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(255, 138, 191, .18);
}
.wh-cell b {
  display: block;
  font-size: 20px;
  color: #d6337c;
  line-height: 1.1;
}
.wh-cell span {
  display: block;
  font-size: 9px;
  letter-spacing: .04em;
  color: #a35b7d;
  margin-top: 3px;
  text-transform: uppercase;
}
.wh-cell.qualified { background: linear-gradient(160deg, #e8fff1, #d4ffe6); border-color: #7ee2b8; }
.wh-cell.qualified b { color: #0f9d58; }
.wh-cell.near { background: linear-gradient(160deg, #fff7e6, #ffeccc); border-color: #ffd08a; }
.wh-cell.near b { color: #d98324; }

/* Compact professional asset card. */
.asset-card {
  background: #fff;
  border: 1px solid #ffd0e2;
  border-radius: 18px;
  padding: 12px;
  margin: 10px 0;
  box-shadow: 0 3px 12px rgba(255, 138, 191, .14);
}
.ac-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.ac-title {
  font-size: 17px;
  font-weight: 700;
  color: #b62a6f;
  letter-spacing: -.01em;
}
.ac-meta {
  font-size: 11px;
  color: #a35b7d;
  margin-top: 2px;
}
.ac-addr {
  margin-top: 6px;
  font-size: 10px;
  color: #b98aa3;
  word-break: break-all;
}
.ac-ident { margin-top: 6px; }

.ac-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 8px;
  flex-wrap: wrap;
}
.ac-px { font-size: 20px; font-weight: 700; color: #7a2a55; }
.ac-ch { font-size: 12px; font-weight: 600; }
.ac-ch em { font-style: normal; font-size: 9px; color: #b98aa3; margin-left: 2px; }

/* Field grid. */
.ac-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.ac-cell {
  background: #fff7fb;
  border: 1px solid #ffe3ef;
  border-radius: 12px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ac-cell span { font-size: 9.5px; color: #a35b7d; text-transform: uppercase; letter-spacing: .03em; }
.ac-cell b { font-size: 12.5px; color: #5c2544; overflow: hidden; text-overflow: ellipsis; }

.ac-score {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  background: linear-gradient(90deg, #ffe9f3, #fff6fa);
  border-radius: 12px;
  font-size: 11px;
  color: #8a3b66;
}
.ac-score b { color: #b62a6f; font-size: 13px; }
.ac-score em { font-style: normal; font-size: 9px; color: #b98aa3; }

.ac-why { margin-top: 8px; }
.ac-why .bullet { font-size: 11px; color: #6d3a56; line-height: 1.45; }

.ac-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Real candles only. */
.candles { margin-top: 4px; }
.candle-head, .candle-row {
  display: grid;
  grid-template-columns: 52px 1fr 78px 1fr;
  gap: 6px;
  padding: 6px 4px;
  font-size: 11.5px;
  align-items: center;
}
.candle-head {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #a35b7d;
  border-bottom: 1px solid #ffe3ef;
}
.candle-row { border-bottom: 1px dashed #ffe3ef; color: #5c2544; }
.candle-row .ct { font-weight: 600; color: #b62a6f; }
.candle-row .cv { text-align: right; }

.up { color: #0f9d58; }
.down { color: #d6336c; }

/* ---------------------------------------------------- FOMO context block */
.ac-fomo {
  margin: 10px 0 4px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 179, 71, .28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 179, 71, .10), rgba(255, 179, 71, .03));
}

.ac-fomo-head,
.ac-fomo {
  font-size: 12px;
  line-height: 1.5;
}

.ac-fomo > em:first-of-type,
.ac-fomo-head em {
  color: #b9c2d0;
  font-style: normal;
  margin-left: 6px;
}

.ac-fomo-empty {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  color: #8a94a6;
}

.fomo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.fomo-row:first-of-type { border-top: 0; }

.fomo-rank {
  min-width: 26px;
  color: #8a94a6;
  font-variant-numeric: tabular-nums;
}

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

.fomo-link {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(15, 157, 88, .16);
  color: #0f9d58;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}

.fomo-pnl {
  font-variant-numeric: tabular-nums;
}


/* =======================================================================
   PERSONAL SPACES — who is active, and the switcher
   =======================================================================
   The switcher is a real control at the top of the shell. It is part of the
   chrome, not a page, so it survives every route and every refresh.

   ------------------------------------------------------------- WHO IS ACTIVE
   Two people share this one bot, so the name of the person whose personal
   space is open is stated at the top of every page. It is drawn from the
   THEME TOKENS, so switching profiles re-skins it automatically — the banner
   can never show Sarah's pink while the page is Alessio's Dragon, because both
   read the same `data-profile` attribute. */
.whois {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--pink) 12%, transparent), transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  overflow-wrap: anywhere;   /* a long name must never widen the layout */
}

.whois .whois-e {
  font-size: 14px;
  line-height: 1;
  flex: none;
}

.whois .whois-t { min-width: 0; }

body[data-profile="dragon"] .whois {
  /* No new colour tokens: the Dragon theme already retints `--pink` (the one
     accent slot the whole sheet reads) to ki orange and `--pink-soft` to gold,
     so this re-skins with the rest of the app for free. */
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--pink) 16%, transparent),
    color-mix(in srgb, var(--pink-soft) 12%, transparent),
    transparent);
  text-shadow: 0 0 14px rgba(120, 150, 255, .35);
}

body[data-profile="dragon"] .whois .whois-e {
  filter: drop-shadow(0 0 6px rgba(255, 170, 60, .5));
}

/* --------------------------------------------------------------- switcher */
.profilebar {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(5, 2, 6, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.profilebar-inner {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 520px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
}

.pbtn {
  flex: 1 1 0;
  min-width: 0;                       /* lets the label ellipsis instead of
                                         forcing horizontal overflow */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}

.pbtn .pbtn-e { font-size: 15px; line-height: 1; flex: none; }
.pbtn .pbtn-l { overflow: hidden; text-overflow: ellipsis; }

.pbtn[aria-pressed="true"] {
  color: var(--text);
  background: var(--pink-dim);
  box-shadow: var(--glow);
}

.pbtn:active { transform: scale(.97); }

/* =======================================================================
   🐉 DRAGON MODE — the original ki/energy theme
   =======================================================================
   ORIGINALITY: every rule below is original CSS written for this product.
   It reproduces no copyrighted character art, logo or screenshot. The
   "Dragon Ball" feeling is carried by an energy language that is entirely
   generic to the genre: deep-space blue/violet, ki-orange, gold, a glowing
   aura, segmented energy meters and an original serpentine silhouette.

   The whole theme is a set of OVERRIDDEN TOKENS. Nothing here restructures
   the layout, so switching spaces cannot break a page, and the pink theme is
   untouched because it is simply the absence of these overrides.
   ======================================================================= */
body[data-profile="dragon"] {
  --bg: #04060f;
  --bg-2: #080a1c;
  --panel: #0c1030;
  --panel-2: #121a44;
  --line: #24306e;

  /* The accent slot is the ONLY thing the existing stylesheet reads for
     "brand" colour, so retinting it here re-skins every card, head, hero and
     glow at once without editing a single component rule. */
  --pink: #ff9a1f;          /* ki orange  */
  --pink-soft: #ffd166;     /* gold       */
  --pink-dim: rgba(255, 154, 31, .16);

  --text: #eef2ff;
  --text-dim: #aab6e8;
  --text-mute: #6b78ad;
  --green: #35e0a1;
  --red: #ff5470;
  --amber: #ffc857;

  --glow: 0 0 0 1px rgba(90, 140, 255, .40), 0 0 26px rgba(70, 110, 255, .28);
  --shadow: 0 12px 34px rgba(0, 0, 0, .6);
}

/* Ki aurora behind the whole app. Two overlapping blooms read as an aura
   gathering around the content rather than a flat background. */
body[data-profile="dragon"] {
  background-image:
    radial-gradient(900px 480px at 18% -10%, rgba(70, 110, 255, .26), transparent 62%),
    radial-gradient(760px 420px at 88% 2%, rgba(150, 60, 255, .20), transparent 64%),
    radial-gradient(600px 340px at 50% 108%, rgba(255, 154, 31, .12), transparent 66%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* ---- POWER UP labels ---- */
.powerup {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 2px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink-soft);
}
.powerup::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 209, 102, .5), transparent);
}

/* ---- the Dragon header ---- */
.ki-header {
  position: relative;
  padding: 26px 16px 22px;
  text-align: center;
  overflow: hidden;
  border-radius: 0 0 22px 22px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(90, 140, 255, .28), transparent 70%),
    linear-gradient(180deg, rgba(18, 26, 68, .9), rgba(4, 6, 15, .2));
  border-bottom: 1px solid rgba(255, 209, 102, .18);
}

/* Original serpentine silhouette: a single rotated, blurred gradient bar
   suggestion of a coiling form. Abstract geometry, not a character. */
.ki-aura {
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 220px;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(120, 170, 255, .30), transparent 70%);
  filter: blur(6px);
  animation: ki-breathe 5.5s ease-in-out infinite;
}

.ki-title {
  position: relative;
  margin: 0;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.15;
  background: linear-gradient(120deg, #ffffff 8%, #9dc0ff 42%, var(--pink) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for a browser without background-clip:text */
  -webkit-text-fill-color: transparent;
}

.ki-sub {
  position: relative;
  margin: 6px 0 0;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ki-status {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.ki-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .35);
  color: var(--text-dim);
  white-space: nowrap;
}
.ki-chip.on  { color: var(--green); border-color: rgba(53, 224, 161, .4); }
.ki-chip.off { color: var(--red);   border-color: rgba(255, 84, 112, .4); }
.ki-chip.gold { color: var(--pink-soft); border-color: rgba(255, 209, 102, .45); }

@keyframes ki-breathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.06); }
}

/* ---- ⚡ POWER LEVEL meter ---- */
.power-card {
  position: relative;
  padding: 18px 16px 16px;
  border: 1px solid rgba(255, 209, 102, .22);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18, 26, 68, .92), rgba(8, 10, 28, .92));
  box-shadow: var(--shadow), 0 0 30px rgba(90, 140, 255, .18);
  overflow: hidden;
}

.power-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.power-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.power-value {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pink-soft);
  text-shadow: 0 0 18px rgba(255, 154, 31, .45);
}
.power-value .power-max {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-mute);
  text-shadow: none;
}
.power-value.na { font-size: 17px; color: var(--text-mute); text-shadow: none; }

/* Segmented energy cells. Built as a flex row of spans so the meter reflows
   inside any card width and can never overflow a phone screen. */
.power-track {
  display: flex;
  gap: 3px;
  margin: 12px 0 10px;
}
.power-seg {
  flex: 1 1 0;
  min-width: 0;
  height: 12px;
  border-radius: 3px;
  background: rgba(120, 140, 220, .18);
}
.power-seg.on {
  background: linear-gradient(180deg, #ffd166, #ff9a1f);
  box-shadow: 0 0 8px rgba(255, 154, 31, .55);
}

.power-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-mute);
}

/* ---- MARKET POWER tiles ---- */
.ki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.ki-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 26, 68, .8), rgba(8, 10, 28, .8));
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ki-tile:active { transform: scale(.98); }
.ki-tile-i { font-size: 17px; }
.ki-tile-l {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.ki-tile-n {
  font-size: 21px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--pink-soft);
}
.ki-tile.na .ki-tile-n { font-size: 13px; color: var(--text-mute); }

/* ---- BATTLEFIELD asset cards ---- */
.ki-asset {
  position: relative;
  padding: 14px 13px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 26, 68, .86), rgba(8, 10, 28, .86));
  overflow: hidden;
}
/* The aura hugs the qualified card so a real qualification is visible
   without colour alone carrying the meaning — the state text is still
   rendered next to it. */
.ki-asset.qualified {
  border-color: rgba(255, 209, 102, .5);
  box-shadow: 0 0 22px rgba(255, 154, 31, .2);
}
.ki-asset.qualified::before {
  content: "";
  position: absolute;
  inset: -60% -30% auto -30%;
  height: 150px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 154, 31, .22), transparent 70%);
  filter: blur(4px);
}

.ki-asset-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ki-asset-id { min-width: 0; }
.ki-asset-sym {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.ki-asset-name {
  font-size: 11.5px;
  color: var(--text-mute);
  overflow-wrap: anywhere;
}
.ki-asset-power {
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ki-asset-power b {
  display: block;
  font-size: 19px;
  font-weight: 900;
  color: var(--pink-soft);
}
.ki-asset-power i {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.ki-asset-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 10px;
  margin-top: 10px;
}
.ki-mini {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  min-width: 0;
}
.ki-mini span { color: var(--text-mute); flex: none; }
.ki-mini b {
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.ki-acts {
  position: relative;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ki-acts .btn { flex: 1 1 130px; min-width: 0; }

/* ---- 🙏 FAITH ---- */
.ki-faith {
  position: relative;
  padding: 20px 18px;
  margin-top: 6px;
  border: 1px solid rgba(255, 209, 102, .22);
  border-radius: 18px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(120, 90, 255, .22), transparent 70%),
    linear-gradient(180deg, rgba(18, 26, 68, .9), rgba(6, 8, 22, .92));
}
.ki-faith-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pink-soft);
}
.ki-faith-quote {
  margin: 12px 0 6px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
  color: #ffe9b8;
  text-shadow: 0 0 16px rgba(255, 209, 102, .25);
  overflow-wrap: anywhere;
}
.ki-faith-ref {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--pink-soft);
}
.ki-faith-note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-mute);
}

/* ---- wallet add form ---- */
.wallet-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.wallet-form input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, .35);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}
.wallet-form input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-dim);
}
.wallet-hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-mute);
  margin: 0;
}
.wallet-lock {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 11px;
  margin-top: 4px;
  border-radius: 10px;
  border: 1px solid rgba(53, 224, 161, .28);
  background: rgba(53, 224, 161, .07);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

/* Respect the platform: no aura motion for a user who asked for less. */
@media (prefers-reduced-motion: reduce) {
  .ki-aura { animation: none; }
  .pbtn, .ki-tile { transition: none; }
}

/* Narrow phones: tighten the meter and the switcher so nothing overflows. */
@media (max-width: 380px) {
  .pbtn { padding: 8px 6px; font-size: 11px; }
  .pbtn .pbtn-e { font-size: 13px; }
  .ki-title { font-size: 22px; }
  .power-value { font-size: 26px; }
  .ki-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .ki-asset-grid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
}

/* ============================================================ CANDLESTICK
   DEFECT FIXED: the candle surface was a text table. These styles draw a
   real candlestick from the provider's own open/high/low/close.

   Every bar is positioned in PERCENT so the chart scales to any container
   width with no canvas and no synthetic values. A wick spans the real
   high->low range and a body spans the real open->close range. */
.candle-ohlc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 4px 0 8px;
  font-size: 12px;
  color: #5c2544;
}
.candle-ohlc span { white-space: nowrap; }
.candle-ohlc i {
  font-style: normal;
  font-weight: 700;
  color: #b62a6f;
  margin-right: 4px;
}

.candle-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 180px;
  padding: 6px 4px;
  background: linear-gradient(180deg, rgba(255,240,247,0.75), rgba(255,255,255,0.35));
  border: 1px solid #ffe3ef;
  border-radius: 10px;
  overflow: hidden;
}
.candle {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  min-width: 3px;
}
/* Wick = the real high-to-low range for that candle. */
.candle .wick {
  position: absolute;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: #c98aa8;
}
/* Body = the real open-to-close movement. */
.candle .body {
  position: absolute;
  left: 12%;
  right: 12%;
  border-radius: 1px;
  min-height: 1.5px;
}
.candle .body.up   { background: #d6336c; }
.candle .body.down { background: #2f9e8f; }

.candle-axis,
.candle-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: #8a5a72;
}

.candle-read .note { margin-top: 8px; }

/* ===================================================================
 * Product surface — Investigation, candles, Mirror, Actors, Capital.
 * -------------------------------------------------------------------
 * Everything below is built on the EXISTING theme variables (--pink,
 * --bg, --fg and the dragon override at line ~769), so Sarah's pink and
 * Alessio's blue/purple/gold all inherit automatically with no per-theme
 * duplication and no chance of the two drifting apart.
 * =================================================================== */

/* ---------------------------------------------------- availability --- */
/* The single most important addition: "we do not know" is now a styled,
   explained state instead of an empty cell that looks like a bug. */
.unavail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 8px 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border-left: 3px solid var(--pink-dim, rgba(255, 45, 144, 0.4));
}
.unavail-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pink-soft, #ff7ac0);
}
.unavail-why {
  font-size: 12px;
  line-height: 1.45;
  color: #b9a8c4;
}
.u { color: #8f7fa0; font-size: 11px; }

/* --------------------------------------------------------- hero ------ */
.hero { border-color: var(--pink-dim); }
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.hero-sym { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.hero-name { font-size: 12px; color: #b9a8c4; margin-top: 2px; }
.hero-price { text-align: right; }
.hp { font-size: 20px; font-weight: 700; }
.hchg { font-size: 12px; font-weight: 600; margin-top: 2px; }
.up { color: #2fbf71; }
.dn { color: #e5484d; }
.warn-line {
  margin: 9px 0 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: #ffb45c;
  background: rgba(255, 180, 92, 0.09);
  border-radius: 8px;
}
.row-strong .row-v { font-weight: 700; }

/* ----------------------------------------------------- stat grid ----- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
  gap: 7px;
  margin: 10px 0;
}
.stat {
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 0;
}
.stat-l {
  font-size: 9px;
  letter-spacing: 0.09em;
  color: #9d8bab;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-v {
  font-size: 15px;
  font-weight: 700;
  margin-top: 3px;
  word-break: break-word;
}
.stat-sub { font-size: 9px; color: #8f7fa0; margin-top: 2px; }

/* ------------------------------------------------------- sections ---- */
.sec {
  margin: 9px 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 13px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sec-head::-webkit-details-marker { display: none; }
.sec-ic { font-size: 15px; }
.sec-title {
  flex: 1;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
}
.sec-chev { color: #9d8bab; font-size: 11px; transition: transform .18s; }
.sec[open] .sec-chev { transform: rotate(180deg); }
.sec-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}
.sec-badge.warn {
  color: #ffb45c;
  background: rgba(255, 180, 92, 0.13);
}
.sec-badge.ok {
  color: #2fbf71;
  background: rgba(47, 191, 113, 0.13);
}
.sec-body {
  padding: 0 13px 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* --------------------------------------------------------- candles --- */
.chart { margin: 10px 0 4px; }
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #b9a8c4;
  margin-bottom: 6px;
}
.chart-chg { font-size: 12px; }
svg.candles {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 9.5px;
  color: #8f7fa0;
  margin-top: 7px;
}
.chart-legend .sw {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: 3px;
  vertical-align: middle;
}
.sw.up { background: #2fbf71; }
.sw.dn { background: #e5484d; }
.sw.vol { background: #8b7ad8; }
.chart-note { margin-left: auto; font-variant-numeric: tabular-nums; }
.read-out {
  margin: 9px 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  border-radius: 10px;
  background: var(--pink-dim, rgba(255, 45, 144, 0.1));
  border-left: 3px solid var(--pink, #ff2d90);
}

/* ------------------------------------------------------ evidence ----- */
.ev-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ev {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  border-left: 2px solid rgba(255, 255, 255, 0.14);
}
.ev.risk { border-left-color: #ffb45c; }
.ev.pos { border-left-color: #2fbf71; }
.ev-h {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #b9a8c4;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.ev-b { font-size: 12px; line-height: 1.5; margin-top: 3px; }
.ev-src { font-size: 9px; color: #8f7fa0; margin-left: 5px; }
.pos-none {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #8f7fa0;
  font-style: italic;
}

/* --------------------------------------------------------- mirror ---- */
.mirror-state { display: flex; align-items: center; gap: 9px; margin: 9px 0; }
.ms { font-size: 11px; color: #8f7fa0; }
.ctrl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 11px 0;
}
.ctrl-row .btn { flex: 1 1 calc(50% - 4px); min-width: 118px; }
.set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 9px;
  margin: 10px 0;
}
.mirror-settings { margin-top: 9px; }

/* --------------------------------------------------------- actors ---- */
.actor-form { display: flex; gap: 7px; margin: 10px 0 4px; }
.actor-form .input { flex: 1; }
.actor-list { display: flex; flex-direction: column; gap: 9px; }
.actor {
  padding: 11px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.actor-h {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.actor-handle { font-size: 14px; font-weight: 700; }
.actor-meta { font-size: 10.5px; color: #8f7fa0; margin-top: 3px; }
.actor-acts { display: flex; gap: 6px; margin-top: 8px; }

/* The 🐉 COPY workflow. Five explicit steps, and a blocked step is visible
   rather than silently skipped — the user can see exactly where evidence
   stops, which is the whole point of not auto-copying anyone. */
.copy-flow { margin-top: 9px; display: flex; flex-direction: column; gap: 4px; }
.flow-step {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #8f7fa0;
}
.flow-step span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.flow-step.done { color: #2fbf71; background: rgba(47, 191, 113, 0.09); }
.flow-step.blocked { color: #ffb45c; background: rgba(255, 180, 92, 0.09); }

/* -------------------------------------------------------- capital ---- */
.cap-presets { margin: 6px 0; }
.cap-result {
  margin: 11px 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cap-result.ok { border-color: rgba(47, 191, 113, 0.4); }
.cap-result.no { border-color: rgba(255, 180, 92, 0.32); }
.cap-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cap-sym { font-size: 15px; font-weight: 800; }
.blockers { margin-top: 9px; }
.cap-bl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: #ffb45c;
  margin-bottom: 5px;
}

/* ---------------------------------------------------- entry read ----- */
.entry-read {
  border-color: var(--pink-dim, rgba(255, 45, 144, 0.35));
  background: linear-gradient(160deg,
    rgba(255, 45, 144, 0.07), rgba(255, 255, 255, 0.02));
}
.entry-read .card-head { letter-spacing: 0.1em; }

/* ------------------------------------------------------- loading ----- */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 16px;
  color: #b9a8c4;
}
.ls-dots { display: flex; gap: 5px; }
.ls-dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink, #ff2d90);
  animation: ls-pulse 1.1s ease-in-out infinite;
}
.ls-dots i:nth-child(2) { animation-delay: .18s; }
.ls-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ls-pulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-dots i { animation: none; opacity: .7; }
  .sec-chev { transition: none; }
}
.ls-text { font-size: 12.5px; }
.msg.pending .msg-text { padding: 0; }

/* ----------------------------------------------------------- chat ----- */
.ctx-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 4px;
  font-size: 11px;
  color: #b9a8c4;
}
.ctx-asset {
  font-weight: 700;
  color: var(--pink-soft, #ff7ac0);
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--pink-dim, rgba(255, 45, 144, 0.12));
}
.ctx-none { color: #8f7fa0; font-style: italic; }
.transcript { max-height: 58vh; overflow-y: auto; }
.act-row { display: flex; gap: 8px; margin: 11px 0 4px; }
.act-row .btn { flex: 1; }

/* --------------------------------------------------- PAPER / LIVE switcher */
/* Only the controls the operating-mode switch needs. Reuses the existing
   button/pill tokens so the mode UI matches the rest of the design. */
.act-row.mode-row { margin-top: 12px; }
.mode-card { }
.mode-row .btn { width: 100%; }

/* LIVE confirmation. Rendered on demand by requestMode(); not part of any
   routed view, so it cannot affect page layout when no switch is happening. */
.modal-back {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(8,5,12,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal {
  width: 100%; max-width: 340px;
  padding: 20px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 18px 48px rgba(0,0,0,.5);
  animation: modal-in .16s ease-out;
}
@keyframes modal-in {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.modal-title {
  font-size: 14px; font-weight: 800; letter-spacing: .4px;
  color: var(--red); margin-bottom: 9px;
}
.modal-text {
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
  margin: 0 0 16px;
}
.modal-row { display: flex; gap: 8px; }
.modal-row .btn { flex: 1 1 0; }
.btn.danger {
  background: rgba(255,84,112,.16);
  border-color: rgba(255,84,112,.45);
  color: var(--red);
}