/* ui2.css — Futu-style visual system for YOLO Monitor.
 *
 * EVERY rule in this file MUST be scoped under .ui2 — either ".ui2 X" (descendant,
 * for markup inside a view) or ".ui2.X" (same element, for body-level overlays).
 * A rule without that prefix leaks into all 18 modules; web/dev/ui2-verify.html
 * check #1 fails on any leak, so run it after every change.
 *
 * styles.css is NEVER edited. A module opts in by gaining the "ui2" class on its
 * view root; removing the class is the rollback.
 *
 * Spec: docs/superpowers/specs/2026-08-16-ui2-visual-refresh-design.md
 * Plan: docs/superpowers/plans/2026-08-16-ui2-visual-refresh.md
 */

/* ============================ 1. tokens ============================ */
.ui2{
  --u2-bg:#f6f7f9;
  --u2-panel:#ffffff;
  --u2-line:#e8ebef;
  --u2-line-soft:#f1f3f6;
  --u2-ink:#1b2430;
  --u2-ink-2:#5b6675;
  --u2-muted:#8b94a3;
  --u2-accent:#2563eb;
  --u2-accent-soft:#eff4ff;
  --u2-up:#12a05c;
  --u2-down:#e0453a;
  --u2-track:#f1f3f6;
  --u2-fs-xs:11px; --u2-fs-sm:12px; --u2-fs-md:13px; --u2-fs-lg:15px;
  --u2-s1:4px; --u2-s2:8px; --u2-s3:12px; --u2-s4:16px; --u2-s5:24px;
  --u2-radius:4px;          /* corner radius for EVERY surface - cards, panels,
                               controls, menus. One value, deliberately tight:
                               a terminal reads as crisp, not pill-shaped. */
  --u2-ctl:32px;
}
[data-bs-theme="dark"] .ui2{
  --u2-bg:#0d1117;
  --u2-panel:#151b23;
  --u2-line:#242c37;
  --u2-line-soft:#1c232c;
  --u2-ink:#e6edf3;
  --u2-ink-2:#aeb9c6;
  --u2-muted:#7d8794;
  --u2-accent:#5b8dff;
  --u2-accent-soft:#182338;
  --u2-up:#2ea36a;
  --u2-down:#e05a50;
  --u2-track:#1c232c;
}

/* ============================ 2. surfaces ============================
   These restyle the EXISTING class names rather than introducing new markup, so
   adopting a module is "add one class to the view" and nothing else moves. */
.ui2 .tablePanel,
.ui2 .chartPanel,
.ui2 .optionsUniverse,
.ui2 .koreaControls,
.ui2 .optionsControls,
.ui2 .watchlistControls{
  background:var(--u2-panel);
  border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);
  box-shadow:none;
  overflow:hidden;                 /* keeps grids/tables inside the rounded border */
}
.ui2 .tablePanel:hover,
.ui2 .chartPanel:hover{box-shadow:none;transform:none;}

.ui2 .panelHeader{
  padding:9px var(--u2-s4);
  border-bottom:1px solid var(--u2-line-soft);
  gap:var(--u2-s2) var(--u2-s3);
  flex-wrap:wrap;                  /* legend/controls can never overlap the title */
}
.ui2 .panelHeader h2{font-size:var(--u2-fs-md);font-weight:600;}
.ui2 .panelHeader > div:first-child{min-width:0;}
.ui2 .legend{flex:0 0 auto;align-items:flex-end;gap:var(--u2-s2) var(--u2-s3);font-size:var(--u2-fs-xs);}
.ui2 .miniNote{font-size:var(--u2-fs-xs);color:var(--u2-muted);}

/* stat strip: ONE quiet divided bar, not N floating cards */
.ui2 .strip{
  display:flex;gap:0;
  background:var(--u2-panel);
  border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);
  overflow:hidden;
  margin-bottom:var(--u2-s4);
}
.ui2 .strip .statCard{
  flex:1 1 0;min-width:0;
  border:0;border-radius:0;box-shadow:none;background:transparent;
  padding:9px var(--u2-s4);
  border-left:1px solid var(--u2-line-soft);
  gap:0;display:block;
}
.ui2 .strip .statCard:first-child{border-left:0;}
.ui2 .statCardIcon{display:none;}          /* icon tiles are noise at this density */
.ui2 .statCardLabel,
.ui2 .metricBox span{
  font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--u2-muted);margin-bottom:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ui2 .statCardValue,
.ui2 .metricBox strong{
  font-size:var(--u2-fs-md);font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ui2 .metricBox{
  background:var(--u2-panel);border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);box-shadow:none;padding:10px var(--u2-s3);
}
.ui2 .metricBox::before{display:none;}     /* drop the accent rail */

/* market-view style cards */
.ui2 .mvCard{
  background:var(--u2-panel);
  border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);
  box-shadow:none;
}
.ui2 .mvCard:hover{box-shadow:none;}
.ui2 .mvCardHead{
  background:transparent;
  border-bottom:1px solid var(--u2-line-soft);
  padding:9px var(--u2-s3);
}
.ui2 .mvCardTitle{font-size:var(--u2-fs-md);font-weight:600;}
.ui2 .mvCardSub{font-size:var(--u2-fs-xs);color:var(--u2-muted);font-weight:400;}
.ui2 .mvCardFoot{border-top:1px solid var(--u2-line-soft);padding:6px var(--u2-s3) 8px;}
.ui2 .mvCardMeta{font-size:10.5px;color:var(--u2-muted);}
.ui2 .mvCardBody{padding:10px var(--u2-s3);font-variant-numeric:tabular-nums;}

/* ============================ 3. tables + AG Grid ============================ */
.ui2 .mvTable{font-size:var(--u2-fs-sm);}
.ui2 .mvTable th{
  font-size:var(--u2-fs-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--u2-muted);font-weight:600;
}
.ui2 .mvTable td{font-variant-numeric:tabular-nums;}

.ui2 .ag-theme-quartz{
  --ag-font-family:"Noto Sans",system-ui,-apple-system,sans-serif;
  --ag-font-size:12px;
  --ag-grid-size:5px;                        /* row height ~34px */
  --ag-borders:none;
  --ag-border-color:var(--u2-line);
  --ag-row-border-color:var(--u2-line-soft);
  --ag-header-background-color:var(--u2-panel);
  --ag-header-foreground-color:var(--u2-muted);
  --ag-background-color:var(--u2-panel);
  --ag-odd-row-background-color:var(--u2-panel);
  --ag-foreground-color:var(--u2-ink);
  --ag-row-hover-color:var(--u2-line-soft);
  --ag-selected-row-background-color:var(--u2-accent-soft);
  --ag-header-column-separator-display:none;
  --ag-wrapper-border-radius:0;
}
.ui2 .ag-theme-quartz .ag-cell{font-variant-numeric:tabular-nums;}
.ui2 .ag-theme-quartz .ag-header{border-bottom:1px solid var(--u2-line);}
.ui2 .ag-theme-quartz .ag-header-cell-text{
  text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;font-weight:600;
}

/* ============================ 4. controls ============================
   ONE height for every control, and border-box sizing. Without border-box, the
   height property excludes padding, so a select renders taller than a text input
   and a bottom-aligned row shows their labels at different heights — fixing the
   box model is what actually aligns the row. */
.ui2 .koreaControls,
.ui2 .optionsControls,
.ui2 .watchlistControls{padding:var(--u2-s3) var(--u2-s4);}
.ui2 .koreaControls h2,
.ui2 .optionsControls h2{font-size:var(--u2-fs-lg);font-weight:700;}
.ui2 .koreaControls p,
.ui2 .optionsControls p{font-size:var(--u2-fs-sm);color:var(--u2-muted);}

.ui2 .controls{gap:var(--u2-s3);align-items:flex-end;}
.ui2 .controls label,
.ui2 .legend label{
  display:flex;flex-direction:column;gap:5px;
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--u2-muted);
  line-height:13px;                 /* fixed so every label block is the same height */
}
.ui2 .controls select,
.ui2 .controls input,
.ui2 .controls button,
.ui2 .u2Seg,
.ui2 select,
.ui2 input[type="search"]{
  box-sizing:border-box;
  height:var(--u2-ctl);
  border-radius:var(--u2-radius);
  font:400 var(--u2-fs-sm)/1 inherit;
  text-transform:none;letter-spacing:normal;
}
.ui2 .controls select,
.ui2 .controls input,
.ui2 select,
.ui2 input[type="search"]{
  border:1px solid var(--u2-line);
  background:var(--u2-panel);
  color:var(--u2-ink);
  padding:0 10px;
  font-variant-numeric:tabular-nums;
}
.ui2 .controls select:focus,
.ui2 .controls input:focus,
.ui2 select:focus,
.ui2 input[type="search"]:focus{outline:none;border-color:var(--u2-accent);}

/* selects lose the OS chevron so they match the rest of the kit */
.ui2 select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='none' stroke='%238b94a3' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
[data-bs-theme="dark"] .ui2 select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='none' stroke='%237d8794' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

.ui2 .controls button{
  border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink);
  padding:0 14px;font-weight:600;cursor:pointer;
}
.ui2 .controls button:hover{border-color:var(--u2-muted);}
.ui2 .controls button.primary{background:var(--u2-accent);border-color:var(--u2-accent);color:#fff;}
.ui2 .controls button.primary:hover{filter:brightness(1.06);}
.ui2 .panelHeader input[type="search"]{width:190px;height:30px;}
.ui2 .legend select{height:28px;}

/* ============================ 5. segmented control ============================ */
.ui2 .u2Seg{
  display:inline-flex;align-items:stretch;
  background:var(--u2-track);
  border-radius:var(--u2-radius);
  padding:2px;gap:2px;
}
.ui2 .u2Seg button{
  appearance:none;box-sizing:border-box;
  border:1px solid transparent;background:transparent;
  font:500 var(--u2-fs-sm)/1 inherit;color:var(--u2-ink-2);
  padding:0 12px;border-radius:4px;cursor:pointer;white-space:nowrap;
  text-transform:none;letter-spacing:normal;
}
.ui2 .u2Seg button:hover{color:var(--u2-ink);}
.ui2 .u2Seg button.on{
  background:var(--u2-panel);color:var(--u2-ink);font-weight:600;border-color:var(--u2-line);
}
/* a segmented control's source stays in the DOM (module JS reads/writes it) but is
   visually replaced by the buttons */
.ui2 .u2SegSource{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* ============================ 7. K-line toolbar ============================ */
.ui2 .klBar{padding:var(--u2-s2) var(--u2-s4) 0;gap:4px;}
.ui2 .klBar .klBarLbl{
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--u2-muted);
}
.ui2 .klBar button{
  border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink-2);
  border-radius:4px;font:600 11px/1 inherit;padding:5px 9px;
}
.ui2 .klBar button.on{background:var(--u2-accent);border-color:var(--u2-accent);color:#fff;}

/* ============================ 8. mobile ============================
   Rules live inside the SAME html.mobileLayout gate the app already uses (set before
   paint by /mobile-layout.js on all seven pages). Floors: no interactive target under
   36px, no text under 12px.

   Mobile is the SAME system as desktop, re-tokenised: the control height and the type
   scale step up here and everything that reads var(--u2-ctl) / var(--u2-fs-*) follows.
   It used to be ~15 hard-coded 38px rules, which is why anything with its own explicit
   size (icon buttons, chips, the RRG toggles) ended up at 22 / 26 / 28 / 32px beside
   them and the phone looked nothing like the desktop. */
html.mobileLayout .ui2{
  --u2-ctl:38px;
  --u2-fs-xs:11.5px;
  --u2-fs-sm:12.5px;
  --u2-fs-md:13.5px;
  --u2-fs-lg:16px;
}
html.mobileLayout .ui2 .u2Seg{height:auto;}
html.mobileLayout .ui2 .u2Seg button{height:var(--u2-ctl);padding:0 14px;font-size:var(--u2-fs-md);}
html.mobileLayout .ui2 .controls select,
html.mobileLayout .ui2 .controls input,
html.mobileLayout .ui2 select,
html.mobileLayout .ui2 input[type="search"]{height:var(--u2-ctl);font-size:16px;}
html.mobileLayout .ui2 .statCardLabel,
html.mobileLayout .ui2 .metricBox span,
html.mobileLayout .ui2 .mvCardSub,
html.mobileLayout .ui2 .mvCardMeta,
html.mobileLayout .ui2 .ag-theme-quartz .ag-header-cell-text{font-size:12px;}
html.mobileLayout .ui2 .ag-theme-quartz{--ag-font-size:13px;--ag-grid-size:6px;}
html.mobileLayout .ui2 .strip{flex-direction:column;}
html.mobileLayout .ui2 .strip .statCard{border-left:0;border-top:1px solid var(--u2-line-soft);}
html.mobileLayout .ui2 .strip .statCard:first-child{border-top:0;}

/* ============================ 9. module-specific mappings ============================
   The shared classes above cover only a fraction of what a user sees: each module
   also has its own bespoke class family (kmm*, mv*, zsxq*, bk*, src* ...), roughly
   1,400 rules in styles.css. Rather than re-skinning each rule, map each family onto
   the SAME primitives already defined above — card, tile, group header, segmented
   button, range button. One grouped selector per primitive, per family. */

/* ---- Korea Macro (kmm*) ---- */
.ui2 .kmmHead{
  background:var(--u2-panel);border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);box-shadow:none;padding:var(--u2-s3) var(--u2-s4);
  margin-bottom:var(--u2-s4);
}
.ui2 .kmmHead h2,
.ui2 #kmmTitle{font-size:var(--u2-fs-lg);font-weight:700;color:var(--u2-ink);}
.ui2 .kmmSub{font-size:var(--u2-fs-sm);color:var(--u2-muted);}
.ui2 .kmmMeta{font-size:var(--u2-fs-xs);color:var(--u2-muted);font-variant-numeric:tabular-nums;}

/* language toggle -> segmented control */
.ui2 .kmmLangSeg{
  display:inline-flex;align-items:stretch;background:var(--u2-track);
  border-radius:var(--u2-radius);padding:2px;gap:2px;border:0;
}
.ui2 .kmmLangBtn{
  appearance:none;box-sizing:border-box;border:1px solid transparent;background:transparent;
  font:500 var(--u2-fs-sm)/1 inherit;color:var(--u2-ink-2);
  padding:6px 12px;border-radius:4px;cursor:pointer;
}
.ui2 .kmmLangBtn:hover{color:var(--u2-ink);}
.ui2 .kmmLangBtn.active{
  background:var(--u2-panel);color:var(--u2-ink);font-weight:600;border-color:var(--u2-line);
}

/* KPI tiles -> the stat primitive */
.ui2 .kmmTiles{gap:var(--u2-s2);}
.ui2 .kmmTile{
  background:var(--u2-panel);border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);box-shadow:none;padding:9px var(--u2-s3);
}
.ui2 .kmmTileName{
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--u2-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ui2 .kmmTileVal{
  font-size:var(--u2-fs-lg);font-weight:700;color:var(--u2-ink);
  font-variant-numeric:tabular-nums;
}
.ui2 .kmmTileUnit{font-size:var(--u2-fs-xs);color:var(--u2-muted);font-weight:400;}
.ui2 .kmmTileChg{font-size:var(--u2-fs-xs);font-variant-numeric:tabular-nums;font-weight:600;}
.ui2 .kmmTileDt{font-size:10px;color:var(--u2-muted);font-variant-numeric:tabular-nums;}

/* group headers */
.ui2 .kmmGroupHead{
  font-size:var(--u2-fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--u2-muted);padding:var(--u2-s3) 0 var(--u2-s2);
}
.ui2 .kmmGroupCount{
  font-size:10px;color:var(--u2-muted);background:var(--u2-track);
  border-radius:999px;padding:2px 7px;font-variant-numeric:tabular-nums;font-weight:600;
}
.ui2 .kmmGroupCaret{color:var(--u2-muted);}

/* chart cards -> the card primitive */
.ui2 .kmmGrid{gap:var(--u2-s3);}
.ui2 .kmmCard{
  background:var(--u2-panel);border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);box-shadow:none;
}
.ui2 .kmmCard:hover{box-shadow:none;}
.ui2 .kmmCardHead{
  border-bottom:1px solid var(--u2-line-soft);padding:9px var(--u2-s3);background:transparent;
}
.ui2 .kmmCardTitle{font-size:var(--u2-fs-md);font-weight:600;color:var(--u2-ink);}
.ui2 .kmmCardSub,
.ui2 .kmmSrc{font-size:var(--u2-fs-xs);color:var(--u2-muted);}
.ui2 .kmmChartWrap{padding:var(--u2-s2) var(--u2-s3) var(--u2-s3);}

/* 1M / 3M / 1Y / 3Y / All -> the K-line toolbar button primitive */
.ui2 .kmmRangeBtns{display:inline-flex;gap:3px;}
.ui2 .kmmRangeBtns button{
  box-sizing:border-box;
  border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink-2);
  border-radius:4px;font:600 11px/1 inherit;padding:5px 9px;cursor:pointer;
}
.ui2 .kmmRangeBtns button:hover{border-color:var(--u2-muted);color:var(--u2-ink);}
.ui2 .kmmRangeBtns button.active{
  background:var(--u2-accent);border-color:var(--u2-accent);color:#fff;
}
html.mobileLayout .ui2 .kmmRangeBtns button{padding:0 12px;font-size:var(--u2-fs-sm);}
html.mobileLayout .ui2 .kmmLangBtn{padding:9px 13px;font-size:var(--u2-fs-md);}


/* ============================ 25. tabs (Futu-style) ============================
   The app ships .newsSubTabs as a PILL CONTAINER: grey track (#eef1f6), 1px border,
   12px radius, 4px padding, and the active link gets a white chip + shadow. Styling
   only the links left that container behind, which is the box that looked wrong.
   Futu uses none of it: plain text, generous spacing, a 2px underline under the
   active label. So the CONTAINER has to be reset too, not just the links.

   Specificity: the app has [data-bs-theme="dark"] .newsSubTabs .nav-link.active at
   0,4,0 and Bootstrap has .nav-pills .nav-link.active at 0,3,0. The selectors below
   are 0,5,0 so they win on specificity rather than relying on file order. */
.ui2 .nav-pills.newsSubTabs,
.ui2 .newsSubTabs{
  display:flex;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--u2-line);
  border-radius:0;
  padding:0;
  gap:26px;
  margin-bottom:var(--u2-s4);
  box-shadow:none;
}
.ui2 .nav-pills.newsSubTabs .nav-link,
.ui2 .newsSubTabs .nav-link{
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  box-shadow:none;
  margin-bottom:-1px;
  padding:7px 0 9px;
  font-size:14px;
  font-weight:500;
  color:var(--u2-ink-2);
  gap:6px;
}
.ui2 .nav-pills.newsSubTabs .nav-link:hover,
.ui2 .newsSubTabs .nav-link:hover{
  background:transparent;
  color:var(--u2-ink);
  border-bottom-color:var(--u2-line);
}
.ui2 .nav-pills.newsSubTabs .nav-link.active,
.ui2 .newsSubTabs .nav-link.active{
  background:transparent;
  box-shadow:none;
  border:0;
  border-bottom:2px solid var(--u2-accent);
  color:var(--u2-accent);
  font-weight:600;
}
/* dark: same shape, tokens do the colour work */
[data-bs-theme="dark"] .ui2 .nav-pills.newsSubTabs,
[data-bs-theme="dark"] .ui2 .newsSubTabs{background:transparent;border-bottom-color:var(--u2-line);}
[data-bs-theme="dark"] .ui2 .nav-pills.newsSubTabs .nav-link,
[data-bs-theme="dark"] .ui2 .newsSubTabs .nav-link{background:transparent;color:var(--u2-ink-2);}
[data-bs-theme="dark"] .ui2 .nav-pills.newsSubTabs .nav-link.active,
[data-bs-theme="dark"] .ui2 .newsSubTabs .nav-link.active{
  background:transparent;box-shadow:none;color:var(--u2-accent);
  border-bottom:2px solid var(--u2-accent);
}
/* the in-module tab bars (Market View etc.) follow the same shape */
.ui2 .mvTabs{
  display:flex;gap:26px;background:transparent;border:0;
  border-bottom:1px solid var(--u2-line);border-radius:0;padding:0;
  margin:2px 0 var(--u2-s4);
}
.ui2 .mvTab{
  background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;
  margin-bottom:-1px;padding:7px 0 9px;
  font-size:14px;font-weight:500;color:var(--u2-ink-2);
}
.ui2 .mvTab:hover{background:transparent;color:var(--u2-ink);border-bottom-color:var(--u2-line);}
.ui2 .mvTab.active{
  background:transparent;color:var(--u2-accent);font-weight:600;
  border-bottom:2px solid var(--u2-accent);
}
html.mobileLayout .ui2 .newsSubTabs,
html.mobileLayout .ui2 .mvTabs{gap:18px;overflow-x:auto;flex-wrap:nowrap;}
html.mobileLayout .ui2 .newsSubTabs .nav-link,
html.mobileLayout .ui2 .mvTab{white-space:nowrap;flex:0 0 auto;}