/* ============================================================
   Market Watch — Clay (claymorphism) design system
   Soft, puffy, rounded shapes; depth from dual soft shadows
   (a light highlight + a warm dark shadow) instead of hard
   borders. Every selector below matches an id/class the JS in
   js/app.js reads or toggles — do not rename them without also
   updating app.js.
   ============================================================ */

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

:root{
  color-scheme: light;
  box-sizing: border-box;
}
html{ scroll-padding-top: env(safe-area-inset-top, 0px); }
*{ box-sizing: border-box; }
img{ max-width: 100%; }
[hidden]{ display: none !important; }

:root{
  /* base surface */
  --bg:#e0d0b4;
  --surface:#ecdcbe;
  --surface-2:#d3c1a0;
  --border: transparent;
  --text:#3b2c1e;
  --text-dim:#6b5844;

  /* accents -- a deliberately varied palette, not a single-hue theme:
     amber (primary/simulator), teal (crypto), copper (gold/metal),
     violet (manual/advanced), plus the semantic profit/loss/info trio.
     Each hue carries a text-safe tone, a pale badge background, and a
     bright "pill" + dark "ink" pair for solid-fill elements (active tabs,
     zone tiers). Pill tones stay light in BOTH themes -- only the ink
     shifts -- exactly like the original --accent/--accent-ink pair. */
  --accent:#d7a23c;
  --accent-ink:#4a3410;
  --profit:#4c9f78;
  --profit-bg:#dcefe2;
  --loss:#d97862;
  --loss-bg:#f8ddd4;
  --info:#6f95c2;
  --info-bg:#dfe8f4;

  --crypto:#2f7d94;
  --crypto-bg:#dcf0f4;
  --crypto-pill:#6cc3da;
  --crypto-ink:#0c333d;

  --metal:#a85f22;
  --metal-bg:#f5e3d3;
  --metal-pill:#d99a52;
  --metal-ink:#4a2c08;

  --violet:#7c5aa8;
  --violet-bg:#ece3f5;
  --violet-pill:#b39bdb;
  --violet-ink:#2f1c4d;

  /* clay shadow duo: warm dark + soft light, both diffuse */
  --clay-dark: rgba(110, 78, 45, 0.38);
  --clay-light: rgba(255, 236, 200, 0.7);
  --clay-raised: 7px 7px 14px var(--clay-dark), -7px -7px 14px var(--clay-light);
  --clay-raised-sm: 4px 4px 9px var(--clay-dark), -4px -4px 9px var(--clay-light);
  --clay-pressed: inset 4px 4px 9px var(--clay-dark), inset -4px -4px 9px var(--clay-light);
  --clay-pressed-sm: inset 3px 3px 6px var(--clay-dark), inset -3px -3px 6px var(--clay-light);

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#221f19; --surface:#2a261e; --surface-2:#332e24;
    --text:#f0ebdd; --text-dim:#a89f8c;
    --accent:#e8bb4e; --accent-ink:#2c1f06;
    --profit:#5fd39c; --profit-bg:#1c3a2c; --loss:#ec8a76; --loss-bg:#3d271f;
    --info:#8fb6e6; --info-bg:#22344a;
    --crypto:#74c3da; --crypto-bg:#173a42; --crypto-pill:#7fd0e4; --crypto-ink:#082830;
    --metal:#e0975a; --metal-bg:#3d2a18; --metal-pill:#e3ab72; --metal-ink:#3a2205;
    --violet:#c3a3e8; --violet-bg:#2e2440; --violet-pill:#c9b3ec; --violet-ink:#291a42;
    --clay-dark: rgba(0, 0, 0, 0.55);
    --clay-light: rgba(255, 255, 255, 0.06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#221f19; --surface:#2a261e; --surface-2:#332e24;
  --text:#f0ebdd; --text-dim:#a89f8c;
  --accent:#e8bb4e; --accent-ink:#2c1f06;
  --profit:#5fd39c; --profit-bg:#1c3a2c; --loss:#ec8a76; --loss-bg:#3d271f;
  --info:#8fb6e6; --info-bg:#22344a;
  --crypto:#74c3da; --crypto-bg:#173a42; --crypto-pill:#7fd0e4; --crypto-ink:#082830;
  --metal:#e0975a; --metal-bg:#3d2a18; --metal-pill:#e3ab72; --metal-ink:#3a2205;
  --violet:#c3a3e8; --violet-bg:#2e2440; --violet-pill:#c9b3ec; --violet-ink:#291a42;
  --clay-dark: rgba(0, 0, 0, 0.55);
  --clay-light: rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}

.mono{ font-family:'IBM Plex Mono','IBM Plex Sans',monospace; }
.ltr{ direction:ltr; unicode-bidi:isolate; }

body{
  margin:0;
  background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  padding-inline:14px;
  padding-block: calc(16px + env(safe-area-inset-top,0px)) calc(40px + env(safe-area-inset-bottom,0px));
  max-width:780px; margin-inline:auto; font-size:14px; line-height:1.6;
}
@media (min-width:820px){
  body{ max-width:1180px; padding-inline:24px; }
}

/* ---------- header ---------- */
header.top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 16px; padding-block-end:16px; margin-block-end:18px;
}
@font-face{ font-family:"Orbitron"; font-weight:900; font-style:normal; font-display:swap; src:url("../fonts/Orbitron-Black.ttf") format("truetype"); }
.mw-logo{
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:12px 20px; border-radius:var(--radius-md);
  background:var(--crypto-pill); color:#000; cursor:pointer;
  box-shadow: var(--clay-raised-sm); user-select:none;
  font-family:'Orbitron','IBM Plex Sans',sans-serif; font-weight:900;
  font-size:26px; line-height:1; letter-spacing:.5px; text-align:left;
}
.mw-line{ display:block; overflow:hidden; padding-block:2px; }
.mw-word{ display:inline-block; transform:translateX(110%); animation: mwIn .8s cubic-bezier(.22,1,.36,1) forwards; }
.mw-word.w1{ animation-delay:.15s; }
.mw-word.w2{ animation-delay:.75s; }
.mw-logo.replay .mw-word{ animation-name:mwIn2; }
.mw-logo.replay .mw-word.w1{ animation-delay:.05s; }
.mw-logo.replay .mw-word.w2{ animation-delay:.6s; }
@keyframes mwIn2{ from{ transform:translateX(110%); } to{ transform:translateX(0); } }
@keyframes mwIn{ from{ transform:translateX(110%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .mw-word{ animation-duration:.01s; animation-delay:0s; } }
header.top h1{ font-size:18px; font-weight:700; margin:0; letter-spacing:.2px; }
header.top p{ margin:0; color:var(--text-dim); font-size:12px; }
.hdr-right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (max-width:640px){ .hdr-right{ width:100%; gap:6px; } .hdr-right .badge{ margin-inline-end:auto; } }
.lang-btn{
  font-size:11.5px; font-weight:700; padding:9px 14px; min-height:38px; border-radius:var(--radius-pill);
  border:none; background:var(--surface); color:var(--text-dim);
  box-shadow: var(--clay-raised-sm);
  cursor:pointer; font-family:inherit; transition: box-shadow .15s ease, color .15s ease;
}
.lang-btn:active{ box-shadow: var(--clay-pressed-sm); }
.lang-btn.active{ background:var(--accent); color:var(--accent-ink); box-shadow: var(--clay-pressed-sm); }

/* ---------- main tabs ---------- */
nav.maintabs{
  display:flex; gap:8px; margin-block-end:20px; overflow-x:auto;
  padding: 6px; background:var(--surface-2); border-radius:var(--radius-pill);
  box-shadow: var(--clay-pressed);
  -webkit-overflow-scrolling: touch;
}
nav.maintabs button{
  flex:1 1 0; text-align:center; line-height:1.3;
  border:none; background:transparent; color:var(--text-dim);
  padding:8px 6px; min-height:44px; font-size:12.5px; font-weight:700; cursor:pointer;
  font-family:inherit; white-space:normal; border-radius:var(--radius-pill);
  transition: box-shadow .15s ease, color .15s ease, background .15s ease;
}
/* every active tab uses the same light-blue pill */
nav.maintabs button.active{ color:var(--crypto-ink); background:var(--crypto-pill); box-shadow: var(--clay-raised-sm); }

/* theme toggle (sun/moon), styled as a compact segmented control */
.theme-seg{ padding:4px !important; gap:2px !important; }
.theme-seg button{ padding:7px 10px !important; min-height:34px; font-size:14px !important; }

/* ---------- panels (the core clay surface) ---------- */
.panel{
  background:var(--surface); border-radius:var(--radius-lg); padding:20px;
  box-shadow: var(--clay-raised);
}
.panel + .panel{ margin-block-start:20px; }
.panel h2{ font-size:13px; font-weight:700; margin:0 0 14px; display:flex; align-items:center; gap:9px; }
.panel h2 .n{
  width:22px;height:22px;border-radius:8px; background:var(--surface-2); color:var(--text-dim);
  display:inline-flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;
  font-family:'IBM Plex Mono',monospace; box-shadow: var(--clay-pressed-sm);
}

/* ---------- form fields ---------- */
label.field{ display:block; margin-block-end:16px; }
label.field .lbl{ display:flex;justify-content:space-between;align-items:baseline; font-size:12px;color:var(--text-dim);margin-block-end:7px; }
label.field .lbl b{ color:var(--text); font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12.5px; }
input[type=number]{
  width:100%; background:var(--surface-2); border:none; color:var(--text);
  border-radius:var(--radius-sm); padding:11px 12px; font-family:'IBM Plex Mono',monospace; font-size:14px;
  direction:ltr; text-align:left; box-shadow: var(--clay-pressed-sm);
}
input[type=number]:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.seg{ display:flex; background:var(--surface-2); border-radius:var(--radius-md); padding:5px; gap:4px; box-shadow: var(--clay-pressed); }
.seg button{
  flex:1; border:none; background:transparent; color:var(--text-dim); padding:10px 4px; min-height:40px;
  border-radius:var(--radius-sm); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit;
  transition: box-shadow .15s ease, color .15s ease;
}
.seg button.active{ background:var(--surface); color:var(--text); box-shadow: var(--clay-raised-sm); }

input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:8px; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--profit), var(--accent) 55%, var(--loss));
  box-shadow: var(--clay-pressed-sm);
  margin-block:12px 6px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px;height:26px;border-radius:50%; background:var(--surface);
  box-shadow: var(--clay-raised-sm); cursor:pointer;
}
input[type=range]::-moz-range-thumb{ width:26px;height:26px;border-radius:50%; background:var(--surface); border:none; box-shadow: var(--clay-raised-sm); cursor:pointer; }
input.chart-pan[type=range]{ background:var(--surface-2); margin-block:10px 4px; touch-action:pan-y; }
input.chart-pan[type=range]:disabled{ opacity:.4; }
.chart-pan::-webkit-slider-thumb{ width:34px; height:26px; border-radius:var(--radius-pill); background:var(--accent); }
.chart-pan::-moz-range-thumb{ width:34px; height:26px; border-radius:var(--radius-pill); background:var(--accent); }
.risk-scale{ display:flex;justify-content:space-between; font-size:11px;color:var(--text-dim); margin-block-end:8px; }

.risk-readout{ margin-block-start:14px; padding:14px; border-radius:var(--radius-md); background:var(--surface-2); box-shadow: var(--clay-pressed-sm); }
.risk-readout .tier{ font-weight:700;font-size:13.5px;margin-block-end:4px; }
.risk-readout .desc{ color:var(--text-dim);font-size:12px; }

.warn{
  margin-block-start:12px; display:flex;gap:9px; align-items:flex-start; background:var(--loss-bg);
  color:var(--loss); padding:12px 14px; border-radius:var(--radius-md); box-shadow: var(--clay-raised-sm);
  font-size:12px; font-weight:600;
}
.warn .ic{ flex:none;font-size:15px;line-height:1; }
.note{
  margin-block-start:12px; display:flex;gap:9px; align-items:flex-start; background:var(--info-bg);
  color:var(--info); padding:12px 14px; border-radius:var(--radius-md); box-shadow: var(--clay-raised-sm); font-size:12px;
}

/* ---------- strategy legs ---------- */
.leg-list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px; }
.leg-list li{ display:flex;justify-content:space-between;align-items:center; padding:11px 14px; border-radius:var(--radius-md); background:var(--surface-2); box-shadow: var(--clay-pressed-sm); font-size:12.5px; }
.leg-list li .side{ font-family:'IBM Plex Mono',monospace; font-weight:700; padding:3px 9px;border-radius:var(--radius-pill); font-size:11px; }
.leg-list li .side.buy{ color:var(--profit);background:var(--profit-bg); }
.leg-list li .side.sell{ color:var(--loss);background:var(--loss-bg); }

/* ---------- quant metrics ---------- */
.metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-block-end:20px; }
@media (min-width:520px){ .metrics{ grid-template-columns:repeat(4,1fr); } }
.metric{ background:var(--surface-2); border-radius:var(--radius-md); padding:14px 16px; box-shadow: var(--clay-raised-sm); }
.metric .k{ font-size:11px;color:var(--text-dim);margin-block-end:6px; }
.metric .v{ font-family:'IBM Plex Mono',monospace; font-weight:700;font-size:17px; direction:ltr;text-align:left; }
.metric .v.profit{ color:var(--profit); }
.metric .v.loss{ color:var(--loss); }
.metric .sub{ font-size:10.5px;color:var(--text-dim);margin-block-start:4px; }

/* ---------- chart ---------- */
.chart-wrap{ background:var(--surface-2); border-radius:var(--radius-md); padding:10px 6px 4px; box-shadow: var(--clay-pressed); }
svg{ display:block;width:100%;height:auto; }
.ax-label{ font-size:10px;fill:var(--text-dim);font-family:'IBM Plex Mono',monospace; }
.grid-line{ stroke:var(--surface); stroke-width:1; opacity:.6; }
.zero-line{ stroke:var(--text-dim);stroke-width:1;stroke-dasharray:3 3; }
.spot-line{ stroke:var(--accent);stroke-width:1.6;stroke-dasharray:4 3; }
.payoff-line{ stroke:var(--text);stroke-width:2.4;fill:none; }
.profit-area{ fill:var(--profit);opacity:.18; }
.loss-area{ fill:var(--loss);opacity:.18; }
.density-area{ fill:var(--accent);opacity:.16; }
.breakeven-dot{ fill:var(--surface);stroke:var(--text);stroke-width:1.6; }
.hover-line{ stroke:var(--text-dim);stroke-width:1;stroke-dasharray:2 3; }
.hover-dot{ fill:var(--accent);stroke:var(--surface);stroke-width:2.5; }
.hover-box-bg{ fill:var(--surface);stroke:none;filter:drop-shadow(0 4px 10px rgba(60,50,30,.28)); }
.hover-lbl{ font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;font-size:11.5px;fill:var(--text-dim); }
.hover-val{ font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:700;fill:var(--text); }
.hover-val.profit{ fill:var(--profit); }
.hover-val.loss{ fill:var(--loss); }
.chart-wrap svg{ touch-action:none; }
/* zoom: the SVG is widened inside a horizontally scrolling box, so its text and lines scale up too */
.chart-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; direction:ltr; }
.chart-scroll.zoomed svg{ touch-action:pan-x pan-y; }
.chart-zoom{ display:none; gap:6px; justify-content:flex-end; margin-block-end:8px; }
.chart-zoom button{
  border:none; min-width:44px; min-height:36px; padding:0 12px; border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--text-dim); font:600 13px 'IBM Plex Mono',monospace; cursor:pointer;
  box-shadow:var(--clay-raised-sm);
}
.chart-zoom button.active{ background:var(--accent); color:var(--accent-ink); box-shadow:var(--clay-pressed-sm); }
@media (max-width:640px){
  .chart-zoom{ display:flex; }
  .ax-label{ font-size:12px; }
}

.grid2{ display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; }
@media (max-width:760px){ .grid2{ grid-template-columns:1fr; } }

/* ---------- strategy picker ---------- */
.mode-seg{ display:flex; gap:8px; margin-block-end:16px; }
.mode-seg button{
  flex:1; border:none; background:var(--surface-2); color:var(--text-dim);
  padding:11px 6px; min-height:44px; border-radius:var(--radius-md); font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;
  box-shadow: var(--clay-raised-sm); transition: box-shadow .15s ease, color .15s ease;
}
.mode-seg button.active{ background:var(--surface); color:var(--text); box-shadow: var(--clay-pressed-sm); }

.strat-cat{ margin-block-end:16px; }
.strat-cat .cat-title{ font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; margin-block-end:8px; }
.strat-cat.cat-bull .cat-title{ color:var(--profit); }
.strat-cat.cat-bear .cat-title{ color:var(--loss); }
.strat-cat.cat-income .cat-title{ color:var(--accent); }
.strat-cat.cat-vol .cat-title{ color:var(--crypto); }
.strat-cat.cat-adv .cat-title{ color:var(--violet); }
.strat-item{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  padding:11px 14px; min-height:44px; border-radius:var(--radius-md); border:none; background:var(--surface-2);
  font-size:12.5px; cursor:pointer; margin-block-end:7px; color:var(--text); font-family:inherit; text-align:start;
  box-shadow: var(--clay-raised-sm); transition: box-shadow .15s ease;
}
.strat-item.active{ background:var(--surface); box-shadow: var(--clay-pressed-sm); }
.strat-item .rtag{ font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:var(--radius-pill); }
.strat-item .rtag.defined{ background:var(--profit-bg); color:var(--profit); }
.strat-item .rtag.undefined{ background:var(--loss-bg); color:var(--loss); }

.footnote{ color:var(--text-dim); font-size:11.5px; margin-block-start:18px; padding-block-start:16px; border-block-start: 1px solid var(--surface-2); }
.footnote b{ color:var(--text); }

.tf-tabs{ display:flex;gap:8px;margin-block-end:16px; }
.tf-tabs button{
  flex:1; border:none; background:var(--surface-2); color:var(--text-dim);
  padding:10px 4px; min-height:46px; border-radius:var(--radius-md); font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit;
  box-shadow: var(--clay-raised-sm); transition: box-shadow .15s ease;
}
.tf-tabs button.active{ background:var(--surface); color:var(--text); box-shadow: var(--clay-pressed-sm); }
.tf-tabs button .s{ display:block;font-size:9.5px;color:var(--text-dim);font-weight:500;margin-block-start:3px; }

/* ---------- reports ---------- */
.score-gauge{ position:relative; height:12px; border-radius:var(--radius-pill); background:linear-gradient(90deg, var(--loss), var(--accent) 33%, var(--accent) 67%, var(--profit)); box-shadow: var(--clay-pressed-sm); margin-block:12px; }
.score-gauge .ptr{ position:absolute; top:-5px; width:4px; height:22px; background:var(--text); border-radius:var(--radius-pill); transform:translateX(50%); box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:6px 13px; border-radius:var(--radius-pill); box-shadow: var(--clay-raised-sm); }
.badge.bull{ background:var(--profit-bg); color:var(--profit); }
.badge.bear{ background:var(--loss-bg); color:var(--loss); }
.badge.neutral{ background:var(--surface-2); color:var(--text-dim); }
.kv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-block:14px; }
.kv{ background:var(--surface-2); border-radius:var(--radius-md); padding:12px 14px; box-shadow: var(--clay-raised-sm); }
.kv .k{ font-size:10.5px;color:var(--text-dim); }
.kv .v{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:14px; direction:ltr; text-align:left; }
.factor-cols{ display:grid; grid-template-columns:1fr; gap:14px; margin-block:14px; }
@media (min-width:520px){ .factor-cols{ grid-template-columns:1fr 1fr; } }
.factor-col h4{ font-size:12px;margin:0 0 9px; }
.factor-col.bull h4{ color:var(--profit); }
.factor-col.bear h4{ color:var(--loss); }
.factor-col ul{ margin:0;padding-inline-start:18px;font-size:12px;color:var(--text-dim); }
.factor-col li{ margin-block-end:6px; }
.hist-item{
  border:none; border-radius:var(--radius-md); padding:12px 14px; margin-block-end:9px;
  background:var(--surface-2); cursor:pointer; box-shadow: var(--clay-raised-sm);
}
.hist-item .row1{ display:flex;justify-content:space-between;align-items:center; }
.hist-item .date{ font-weight:700; font-size:12.5px; }
.hist-body{ display:none; margin-block-start:9px; padding-block-start:9px; border-block-start:1px solid var(--surface); font-size:12px; color:var(--text-dim); white-space:pre-line; }
.hist-item.open .hist-body{ display:block; }
.review-box{ background:var(--surface-2); border-radius:var(--radius-md); padding:14px 16px; margin-block:14px; box-shadow: var(--clay-raised-sm); }
.review-box .rh{ font-size:12px; font-weight:700; margin-block-end:8px; display:flex; align-items:center; gap:8px; }
.verdict{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); }
.verdict.match{ background:var(--profit-bg); color:var(--profit); }
.verdict.miss{ background:var(--loss-bg); color:var(--loss); }
.verdict.partial{ background:var(--info-bg); color:var(--info); }
.dca-plan{ display:flex; flex-direction:column; gap:9px; margin-block:14px; }
.dca-row{ display:flex; justify-content:space-between; align-items:center; background:var(--surface-2); border-radius:var(--radius-md); padding:12px 14px; font-size:12.5px; box-shadow: var(--clay-raised-sm); }
.dca-row .action{ font-weight:700; }
.empty-state{ color:var(--text-dim); font-size:12.5px; padding:22px; text-align:center; background:var(--surface-2); border-radius:var(--radius-md); box-shadow: var(--clay-pressed-sm); }
.sugg-card{ border:none; border-radius:var(--radius-md); padding:14px 16px; margin-block-end:10px; background:var(--surface-2); cursor:pointer; box-shadow: var(--clay-raised-sm); transition: box-shadow .15s ease; }
.sugg-card:hover{ box-shadow: var(--clay-raised); }
.sugg-card .row1{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-block-end:9px; flex-wrap:wrap; }
.expiry-chip{
  display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-block:6px 10px; padding:6px 14px; border-radius:var(--radius-pill);
  background:var(--surface); color:var(--text); font-size:12.5px; font-weight:600;
  box-shadow:var(--clay-raised-sm);
}
.expiry-chip:empty{ display:none; }
.expiry-chip .lbl{ color:var(--text-dim); font-weight:500; }
.expiry-chip .dte{ color:var(--text-dim); font-weight:500; font-size:11.5px; }
.sugg-card .name{ font-weight:700; font-size:13px; display:flex; align-items:center; gap:8px; }
.sugg-card .ratio-badge{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; color:var(--profit); background:var(--profit-bg); padding:4px 11px; border-radius:var(--radius-pill); box-shadow: var(--clay-raised-sm); }
.sugg-card .metrics-inline{ display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--text-dim); }
.sugg-card .metrics-inline b{ color:var(--text); font-family:'IBM Plex Mono',monospace; font-weight:600; }
.sugg-card .sel-btn{ margin-block-start:10px; font-size:11px; font-weight:700; color:var(--accent-ink); background:var(--accent); border:none; padding:9px 16px; min-height:40px; border-radius:var(--radius-pill); cursor:pointer; font-family:inherit; box-shadow: var(--clay-raised-sm); }
.sugg-card .sel-btn:active{ box-shadow: var(--clay-pressed-sm); }

.zone-card{ border:none; border-radius:var(--radius-md); padding:14px 16px; margin-block-end:11px; background:var(--surface-2); position:relative; box-shadow: var(--clay-raised-sm); }
.zone-card.in-zone{ box-shadow: var(--clay-raised), 0 0 0 2px var(--accent) inset; }
.zone-card .row1{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-block-end:7px; }
.zone-card .tier-label{ font-weight:700; font-size:13px; }
.zone-card .range{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:15px; direction:ltr; unicode-bidi:isolate; color:var(--accent-ink); background:var(--accent); padding:4px 13px; border-radius:var(--radius-pill); box-shadow: var(--clay-raised-sm); }
/* tier progression: calmer teal -> warm copper -> alert violet */
.zone-card.tier-near .range{ color:var(--crypto-ink); background:var(--crypto-pill); }
.zone-card.tier-major .range{ color:var(--metal-ink); background:var(--metal-pill); }
.zone-card.tier-structural .range{ color:var(--violet-ink); background:var(--violet-pill); }
.zone-card .weight{ font-size:11.5px; font-weight:700; color:var(--profit); margin-block-end:7px; display:block; }
.zone-card .znote{ font-size:12px; color:var(--text-dim); line-height:1.8; }
.zone-card .now-tag{ font-size:10px; font-weight:700; color:var(--accent-ink); background:var(--accent); padding:3px 9px; border-radius:var(--radius-pill); margin-inline-start:7px; }
.live-dot{ width:8px;height:8px;border-radius:50%; display:inline-block; background:var(--text-dim); }
.live-dot.on{ background:var(--profit); box-shadow:0 0 0 4px var(--profit-bg); }

.adv-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:transparent; border:none; padding:0; margin:0; cursor:pointer; font-family:inherit;
  color:var(--text); text-align:start; font-size:13px; font-weight:700; min-height:40px;
}
.adv-toggle .chev{ transition:transform .15s ease; color:var(--text-dim); font-size:11px; }
.adv-toggle.open .chev{ transform:rotate(180deg); }
.adv-sub{ font-size:11.5px; color:var(--text-dim); margin-block:14px 16px; line-height:1.7; }

/* ---------- small-screen refinements ---------- */
@media (max-width:380px){
  body{ padding-inline:10px; font-size:13.5px; }
  .panel{ padding:16px; border-radius:20px; }
  header.top h1{ font-size:16.5px; }
}

/* ---------- beginner-friendly additions ---------- */
.intro-box{ background:var(--surface); border-radius:var(--radius-lg); padding:18px 20px; margin-block-end:18px; box-shadow:var(--clay-raised); }
.intro-box h2{ font-size:14px; margin:0 0 8px; }
.intro-box p{ font-size:12.5px; line-height:1.9; margin:0 0 8px; color:var(--text); }
.intro-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-block-start:10px; }
.note-box{ font-size:12px; line-height:1.9; color:var(--text); background:var(--surface-2); border-radius:var(--radius-md); padding:10px 14px; margin-block:10px; box-shadow:var(--clay-pressed-sm); }
.help-box{ margin-block-start:10px; font-size:12px; color:var(--text); }
.help-box summary, .glossary summary{ cursor:pointer; font-weight:700; font-size:12.5px; min-height:32px; display:flex; align-items:center; }
.help-box p{ line-height:1.9; margin:6px 0 0; color:var(--text-dim); }
.glossary{ margin-block:18px; }
.glossary dl{ margin:12px 0 0; }
.glossary dt{ font-weight:700; font-size:12.5px; margin-block-start:12px; }
.glossary dd{ margin:3px 0 0; font-size:12px; line-height:1.9; color:var(--text-dim); }
.sel-name{ margin-block-start:14px; font-size:13px; }
.sel-name .lbl{ color:var(--text-dim); }
.sel-desc{ font-size:12px; line-height:1.9; color:var(--text-dim); margin-block-start:4px; }
.sugg-card .sel-desc{ margin-block-end:8px; }
.summary-list{ margin:10px 0 0; padding-inline-start:20px; font-size:12.5px; line-height:1.9; color:var(--text-dim); }
.summary-list li{ margin-block-end:6px; }
p.summary{ font-size:12.5px; color:var(--text-dim); line-height:1.8; margin-block-start:10px; }
.chart-zoom{ align-items:center; }
.chart-zoom .zlabel{ font-size:12px; color:var(--text-dim); margin-inline-end:4px; }
.metrics-inline{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--text-dim); }
.metrics-inline > span{ white-space:nowrap; }
.metrics-inline b{ color:var(--text); font-family:'IBM Plex Mono',monospace; font-weight:600; }
details.strat-cat > summary.cat-title{ cursor:pointer; list-style:none; min-height:36px; display:flex; align-items:center; }
details.strat-cat > summary.cat-title::before{ content:'▸'; margin-inline-end:6px; }
details.strat-cat[open] > summary.cat-title::before{ content:'▾'; }

/* report numbers as lists, analysis as bullets; guide tab */
.sub-h{ font-size:12.5px; font-weight:700; margin:16px 0 8px; color:var(--text); }
.asset-cards{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:520px){ .asset-cards{ grid-template-columns:1fr 1fr; } }
.asset-card{ background:var(--surface-2); border-radius:var(--radius-md); padding:12px 14px; box-shadow:var(--clay-pressed-sm); }
.asset-name{ font-weight:700; font-size:13px; margin-block-end:6px; }
.num-list{ list-style:none; margin:0; padding:0; }
.num-list li{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; padding:7px 0; border-block-end:1px solid rgba(120,90,50,.15); font-size:12.5px; }
.num-list li:last-child{ border-block-end:none; }
.num-list .k{ color:var(--text-dim); }
.num-list .v{ font-family:'IBM Plex Mono',monospace; font-weight:700; direction:ltr; }
.num-list .row-note{ flex-basis:100%; font-size:11.5px; color:var(--text-dim); }
.metrics-list{ flex-direction:column; align-items:stretch; gap:6px; }
.metrics-list > span{ display:flex; justify-content:space-between; gap:12px; white-space:normal; padding-block:4px; border-block-end:1px solid rgba(120,90,50,.15); }
.metrics-list > span:last-child{ border-block-end:none; }
.guide-p{ font-size:13px; line-height:2; margin:0 0 10px; }
.guide-list{ margin:0; padding-inline-start:20px; font-size:13px; line-height:2; }
.guide-list li{ margin-block-end:8px; }

/* macro tab */
.macro-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-block:6px 12px; font-size:13px; }
.macro-score{ font-size:13px; color:var(--text-dim); margin-block-end:10px; }
.macro-score b{ font-size:26px; color:var(--text); font-family:'IBM Plex Mono',monospace; }
.gauge-zones{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-dim); margin-block-start:12px; }
.gauge-hint{ font-size:11px; color:var(--text-dim); margin-block-start:4px; }
.regime-expl{ font-size:12.5px; line-height:1.9; margin:12px 0 0; padding:10px 14px; background:var(--surface-2); border-radius:var(--radius-md); box-shadow:var(--clay-pressed-sm); }
.sub-note{ font-size:11.5px; color:var(--text-dim); margin-block:-8px 12px; }
.impact-card, .macro-box{ background:var(--surface-2); border-radius:var(--radius-md); padding:12px 14px; box-shadow:var(--clay-pressed-sm); }
.macro-box{ margin-block:12px; }
.impact-title, .macro-box-title{ font-weight:700; font-size:13px; margin-block-end:8px; }
.impact-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.impact-conf{ font-size:11.5px; color:var(--text-dim); }
.impact-why{ font-size:12.5px; line-height:1.9; color:var(--text-dim); margin:8px 0 0; }
.link-btn{ background:none; border:none; padding:6px 0 0; font:inherit; font-size:11.5px; color:var(--accent-ink); text-decoration:underline; cursor:pointer; }
.macro-sec{ background:var(--surface-2); border-radius:var(--radius-md); padding:12px 14px; margin-block-end:12px; box-shadow:var(--clay-pressed-sm); }
.macro-sec-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-block-end:8px; }
.macro-sec-head .nm{ font-weight:700; font-size:13px; }
.macro-sec-head .sc{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; direction:ltr; }
.sec-bar{ height:8px; border-radius:var(--radius-pill); background:var(--surface); box-shadow:var(--clay-pressed-sm); overflow:hidden; }
.sec-bar .fill{ height:100%; border-radius:var(--radius-pill); }
.sec-bar .fill.hi{ background:var(--profit); } .sec-bar .fill.mid{ background:var(--accent); } .sec-bar .fill.lo{ background:var(--loss); }
.ind-list{ list-style:none; margin:10px 0 0; padding:0; }
.ind-list li{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; padding:7px 0; border-block-start:1px solid rgba(120,90,50,.15); font-size:12.5px; }
.ind-list .k{ flex:1 1 auto; color:var(--text-dim); }
.ind-list .v{ font-family:'IBM Plex Mono',monospace; font-weight:700; direction:ltr; }
.ind-list .row-note{ flex-basis:100%; font-size:11.5px; color:var(--text-dim); }
.vd{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:var(--radius-pill); }
.vd.vg, .vd.g{ background:var(--profit-bg); color:var(--profit); }
.vd.n{ background:var(--surface); color:var(--text-dim); }
.vd.b, .vd.vb{ background:var(--loss-bg); color:var(--loss); }