/* ============================================================
   トレンドサーチ — base + 3 themes (A light / B pop / C dark)
   Themes set color tokens via [data-theme]; layout is shared.
   Tweaks override --lime / --radius / density at :root.
   ============================================================ */

:root {
  --font-jp: 'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-num: 'Space Grotesk', var(--font-jp);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --num: var(--font-num);

  /* defaults (overridden per theme) */
  --bg: #FAFAF6;
  --surface: #FFFFFF;
  --surface2: #F4F4EE;
  --border: #ECECE3;
  --border-strong: #DEDED2;
  --text: #14171A;
  --muted: #717A82;
  --faint: #A6ADB2;

  --lime: #CBF135;          /* brand accent */
  --lime-soft: #EAF7A6;
  --on-lime: #11140B;

  --up: #16A34A;
  --up-bar: #4FB477;
  --down: #E0484D;
  --down-bar: #E78A8E;
  --flat: #B7BCC0;

  --radius: 16px;
  --radius-sm: 11px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(16,20,24,.04), 0 8px 24px rgba(16,20,24,.05);
  --shadow-sm: 0 1px 2px rgba(16,20,24,.05);
  --ring: rgba(0,0,0,.06);

  --maxw: 1320px;
  --gap: 22px;
  --card-pad: 22px;
}

/* density tweak */
[data-density="compact"] { --gap: 14px; --card-pad: 16px; }
[data-density="airy"]    { --gap: 30px; --card-pad: 28px; }

/* ---------- THEME A : clean light ---------- */
[data-theme="A"] {
  --bg: #FAFAF6; --surface:#fff; --surface2:#F5F5EF; --border:#ECECE3; --border-strong:#DEDED2;
  --text:#15181B; --muted:#6E777E; --faint:#A6ADB2;
  --num: var(--font-num);
}
/* ---------- THEME B : pop organized ---------- */
[data-theme="B"] {
  --bg:#F3F3EC; --surface:#fff; --surface2:#FAFAF4; --border:#E6E6DB; --border-strong:#D7D7C9;
  --text:#16181C; --muted:#6B7178; --faint:#9aa0a6;
  --num: var(--font-num);
}
/* ---------- THEME C : dark terminal ---------- */
[data-theme="C"] {
  --bg:#0B0D0C; --surface:#13160F14; --surface2:#161A12; --border:#262B22; --border-strong:#333a2c;
  --text:#E9EEE2; --muted:#8B948A; --faint:#5d645b;
  --lime:#CDF23E; --lime-soft:#26310f; --on-lime:#0C0F07;
  --up:#34D399; --up-bar:#2f9d76; --down:#FB7185; --down-bar:#b85666; --flat:#4a504a;
  --shadow: 0 1px 0 rgba(255,255,255,.02), 0 18px 40px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 0 rgba(255,255,255,.03);
  --ring: rgba(205,242,62,.14);
  --num: var(--font-mono);
  --surface:#14180F;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-jp);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .35s ease, color .35s ease;
}
.app { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 90px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--lime); color: var(--on-lime); }

/* ===================== HEADER ===================== */
.hd { position: relative; padding: 30px 0 22px; }
.hd-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 16px; }
.brand-mark {
  width: 54px; height: 54px; border-radius: 15px; flex: none;
  display: grid; place-items: center; background: var(--lime); color: var(--on-lime);
  box-shadow: var(--shadow-sm);
}
.brand-mark svg { width: 28px; height: 28px; }
.brand h1 { margin: 0; font-size: 32px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.brand .sub {
  margin-top: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 7px; color: var(--muted);
}
.brand .sub::before { content:""; width: 16px; height: 2px; background: var(--lime); border-radius: 2px; }
.hd-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.stamp {
  font-size: 11.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--border);
  padding: 8px 13px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm);
}
.stamp .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px color-mix(in oklab, var(--up) 22%, transparent); }
.link-btn {
  font-size: 12.5px; font-weight: 700; padding: 9px 15px; border-radius: var(--radius-pill);
  background: var(--text); color: var(--bg); display: inline-flex; align-items: center; gap: 7px;
  transition: transform .12s ease, opacity .2s; 
}
.link-btn:hover { transform: translateX(-2px); opacity: .9; }
.lead { margin: 18px 0 0; max-width: 760px; color: var(--muted); font-size: 14.5px; line-height: 1.75; }
.lead b { color: var(--text); font-weight: 700; }

/* theme B pop header band */
[data-theme="B"] .hd { padding: 26px 26px 22px; margin: 12px -10px 0; border-radius: var(--radius);
  background: linear-gradient(120deg, var(--lime) 0%, color-mix(in oklab, var(--lime) 80%, #e6ff7a) 100%);
  color: var(--on-lime); box-shadow: var(--shadow); }
[data-theme="B"] .brand-mark { background: var(--on-lime); color: var(--lime); }
[data-theme="B"] .brand .sub { color: color-mix(in oklab, var(--on-lime) 78%, transparent); }
[data-theme="B"] .brand .sub::before { background: var(--on-lime); }
[data-theme="B"] .stamp { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.08); color: #2a3310; }
[data-theme="B"] .link-btn { background: var(--on-lime); color: var(--lime); }
[data-theme="B"] .lead { color: var(--text); }

/* theme C dark header */
[data-theme="C"] .brand-mark { box-shadow: 0 0 0 1px rgba(205,242,62,.4), 0 0 24px rgba(205,242,62,.25); }
[data-theme="C"] .link-btn { background: var(--lime); color: var(--on-lime); }
[data-theme="C"] .stamp { background: var(--surface2); }

/* ===================== CARD shell ===================== */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); 
}
.section-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.section-title h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.section-title .meta { font-size: 11.5px; color: var(--faint); margin-left: auto; font-weight: 600; }

/* ===================== CONTROLS ===================== */
.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 0 4px; margin-top: 4px;
  border-top: 1px solid var(--border); }
.seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px; gap: 2px; }
.seg button { font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: var(--radius-pill); color: var(--muted); white-space: nowrap; transition: all .16s ease; display: inline-flex; align-items: center; gap: 7px; }
.seg button .badge { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: color-mix(in oklab, var(--muted) 16%, transparent); }
.seg button.on { background: var(--text); color: var(--bg); box-shadow: var(--shadow-sm); }
.seg button.on .badge { background: color-mix(in oklab, var(--bg) 25%, transparent); color: var(--bg); }
.seg.lime button.on { background: var(--lime); color: var(--on-lime); }
.seg.lime button.on .badge { background: rgba(0,0,0,.14); color: var(--on-lime); }
.controls .spacer { flex: 1 1 auto; }
.ctrl-note { font-size: 11px; color: var(--faint); font-weight: 600; margin-right: auto; }

.filterset { display: inline-flex; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px; }
.filterset button { font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; transition: all .15s; }
.filterset button .fdot { width: 8px; height: 8px; border-radius: 50%; }
.filterset button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.select {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 9px 14px; color: var(--text); box-shadow: var(--shadow-sm);
}
.select:hover { border-color: var(--border-strong); }
.select svg { width: 13px; height: 13px; opacity: .55; }

/* ===================== OVERVIEW ===================== */
.overview { position: relative; overflow: hidden; padding: 30px; margin-top: var(--gap);
  background: #0E110C; color: #F3F6EC; border: 1px solid #1b2015; border-radius: 22px; }
[data-theme="A"] .overview { background: #0E110C; }
[data-theme="C"] .overview { background: linear-gradient(180deg,#121610,#0d100b); border-color: var(--border); box-shadow: var(--shadow); }
.ov-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.ov-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: .02em; }
.ov-big { display: flex; align-items: baseline; gap: 0; margin: 6px 0 4px; }
.ov-big .v { font-size: clamp(64px, 11vw, 108px); font-weight: 600; line-height: .9; letter-spacing: -.04em; }
.ov-big .pct { font-size: 34px; font-weight: 500; opacity: .7; margin-left: 4px; align-self: flex-end; margin-bottom: 14px; }
.ov-counts { display: flex; gap: 22px; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 8px; }
.ov-counts b { color: #fff; font-weight: 700; }
.ov-counts .sep { opacity: .3; }
.ov-ring { position: relative; width: 116px; height: 116px; flex: none; }
.ov-ring .lbl { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ov-ring .lbl .b { font-size: 24px; font-weight: 800; font-family: var(--num); }
.ov-ring .lbl .s { font-size: 10px; color: rgba(255,255,255,.6); margin-top: 2px; }
.ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 26px; background: rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; }
.ov-stat { background: #14180F; padding: 16px 18px; }
[data-theme="C"] .ov-stat { background: #10140C; }
.ov-stat .k { font-size: 11px; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 6px; }
.ov-stat .nm { font-size: 16px; font-weight: 700; margin-top: 7px; }
.ov-stat .mini { font-size: 13px; font-weight: 700; margin-top: 3px; font-family: var(--num); }
.ov-stat .help { margin-left: auto; width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); font-size: 9px; display: grid; place-items: center; color: rgba(255,255,255,.5); }
.pos { color: var(--up); } .neg { color: var(--down); }
.ov-stat .pos { color: #46d98a; } .ov-stat .neg { color: #ff7a82; }

/* ===================== SIGNALS ===================== */
.signals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: var(--gap); }
.sig { padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .14s ease, box-shadow .2s; position: relative; overflow: hidden; }
.sig:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sig .tag { font-size: 11px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.sig .tag .ic { width: 16px; height: 16px; }
.sig .name { font-size: 19px; font-weight: 800; margin: 10px 0 8px; letter-spacing: -.01em; }
.sig .val { font-size: 30px; font-weight: 600; font-family: var(--num); letter-spacing: -.02em; }
.sig .val .u { font-size: 16px; opacity: .6; font-weight: 500; }
.sig .note { font-size: 11.5px; color: var(--faint); margin-top: 8px; font-weight: 600; }
.sig.feat { background: var(--lime); border-color: transparent; color: var(--on-lime); }
.sig.feat .tag, .sig.feat .note { color: color-mix(in oklab, var(--on-lime) 72%, transparent); }
.sig.feat .val { color: var(--on-lime); }
.sig-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }

/* ===================== LEADING ===================== */
.leading-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 40px; }
.leading-head h2 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.01em; }
.leading-head .sub { font-size: 12px; color: var(--faint); margin-top: 6px; font-weight: 600; }
.shuffle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; padding: 10px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); transition: all .15s; }
.shuffle:hover { border-color: var(--border-strong); }
.shuffle:active { transform: scale(.96); }
.shuffle svg { width: 14px; height: 14px; }
.lead-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 18px; }
.lcard { position: relative; border-radius: var(--radius); padding: 16px 14px 15px; aspect-ratio: 1 / 1.16; display: flex; flex-direction: column; cursor: pointer; overflow: hidden; transition: transform .16s ease, box-shadow .2s; box-shadow: var(--shadow-sm); }
.lcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lcard .rs { align-self: flex-end; font-size: 11px; font-weight: 800; font-family: var(--num); padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.78); color: #fff; }
.lcard .ic { flex: 1; display: grid; place-items: center; }
.lcard .ic svg { width: 46px; height: 46px; opacity: .92; }
.lcard .nm { font-size: 13px; font-weight: 800; }
.lcard .rk { position: absolute; top: 14px; left: 14px; font-size: 10px; font-weight: 800; font-family: var(--num); opacity: .55; }
/* theme A desaturates leading cards into elegant tinted surfaces */
[data-theme="A"] .lcard { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
[data-theme="A"] .lcard .ic svg { color: var(--lc); }
[data-theme="A"] .lcard .rs { background: var(--text); }
[data-theme="A"] .lcard .bar { position:absolute; left:0; right:0; bottom:0; height:4px; background: var(--lc); }
/* theme B full pop colors */
[data-theme="B"] .lcard { background: var(--lc); color: #fff; }
[data-theme="B"] .lcard .ic svg { color: rgba(255,255,255,.95); }
/* theme C neon on dark */
[data-theme="C"] .lcard { background: color-mix(in oklab, var(--lc) 18%, #0f130c); border: 1px solid color-mix(in oklab, var(--lc) 40%, transparent); color: #fff; }
[data-theme="C"] .lcard .ic svg { color: var(--lc); }
[data-theme="C"] .lcard .rs { background: var(--lc); color: #0b0d08; }

/* ===================== SECTOR LIST ===================== */
.listcard { margin-top: 26px; padding: 24px 26px 12px; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.list-head .eyebrow { font-size: 11.5px; color: var(--faint); font-weight: 600; }
.list-head h2 { margin: 4px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.015em; }
.list-head .scale { font-size: 11.5px; color: var(--faint); font-weight: 600; }
.sortrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; margin: 14px 0 4px; }
.axis { display: grid; grid-template-columns: 318px 1fr 64px; align-items: center; padding: 8px 0 10px; border-bottom: 1px solid var(--border); font-size: 10.5px; color: var(--faint); font-weight: 600; font-family: var(--num); }
.axis .scale-line { position: relative; height: 14px; }
.axis .scale-line span { position: absolute; transform: translateX(-50%); }
.axis .rs-h { text-align: right; color: var(--lime-text, var(--muted)); }

.row { display: grid; grid-template-columns: 318px 1fr 64px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .14s; position: relative; }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--surface2); }
.row .lead-cell { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 12px; }
.row .rk { font-size: 12px; color: var(--faint); font-family: var(--num); width: 20px; font-weight: 700; }
.row .chip { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; }
.row .chip svg { width: 18px; height: 18px; }
.row .who { min-width: 0; }
.row .who .tid { font-size: 10px; color: var(--faint); font-family: var(--num); font-weight: 700; }
.row .who .nm { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .fav { margin-left: 4px; opacity: 0; transition: opacity .15s; color: var(--faint); }
.row:hover .fav, .row .fav.on { opacity: 1; }
.row .fav.on { color: var(--lime); }
.row .fav svg { width: 16px; height: 16px; }

.barwrap { position: relative; height: 22px; }
.barwrap .zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--border-strong); }
.bar-el { position: absolute; top: 3px; height: 16px; border-radius: 5px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.bar-el.up { background: var(--up-bar); }
.bar-el.down { background: var(--down-bar); }
.bar-el.flat { background: var(--flat); }
[data-theme="C"] .bar-el.up { box-shadow: 0 0 14px color-mix(in oklab, var(--up) 50%, transparent); }
[data-theme="C"] .bar-el.down { box-shadow: 0 0 14px color-mix(in oklab, var(--down) 45%, transparent); }
.row .endcell { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.row .chv { font-size: 14.5px; font-weight: 700; font-family: var(--num); min-width: 70px; text-align: right; }
.row .chv .u { font-size: 10px; opacity: .55; }
.row .rsv { font-size: 13px; font-weight: 800; font-family: var(--num); width: 30px; text-align: right; }
.rs-strong { color: var(--up); } .rs-mid { color: var(--muted); } .rs-weak { color: var(--faint); }

/* ===================== switcher (design A/B/C) ===================== */
.switcher { position: sticky; top: 14px; z-index: 40; display: flex; justify-content: center; margin: 8px 0 -8px; pointer-events: none; }
.switcher-inner { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 86%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--border); box-shadow: 0 8px 30px rgba(0,0,0,.14); }
.switcher-inner .lab { font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 10px 0 12px; }
.switcher-inner button { font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; transition: all .16s; }
.switcher-inner button small { font-size: 9px; font-weight: 600; opacity: .7; }
.switcher-inner button.on { background: var(--lime); color: var(--on-lime); }

/* responsive overrides live at the END of this file (see "responsive" block)
   so they win the cascade over the component base rules they target.
   .tt-head/.tt-row, .dt-head/.dt-row and .pickup-grid are defined further
   down, and equal-specificity rules must come AFTER them to override
   grid-template-columns at narrow widths. */

/* ===================== §2 detail tables ===================== */
.detailcard { margin-top: 26px; padding: 24px 24px 14px; }
.detail-help { font-size: 11.5px; color: var(--faint); font-weight: 600; margin-top: 8px; }
.detailcard .list-head h2 { margin-top: 4px; }
.sortbtn { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--faint); justify-content: flex-end; }
.sortbtn.on { color: var(--text); }
.sortbtn svg { opacity: .6; }

/* sector detail grid */
.dt-head, .dt-row { display: grid; grid-template-columns: 34px 36px minmax(220px,1fr) 100px 54px 84px 150px 26px; align-items: center; gap: 4px; }
.dt-head { padding: 0 6px 12px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--faint); font-weight: 700; }
.dt-head .c-num, .dt-head .c-rs, .dt-head .c-cnt { text-align: right; }
.dt-row { padding: 12px 6px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 10px; transition: background .14s; }
.dt-row:last-child { border-bottom: none; }
.dt-row:hover { background: var(--surface2); }
.favbox { color: var(--faint); display: grid; place-items: center; transition: color .15s, transform .12s; }
.favbox:hover { color: var(--lime); transform: scale(1.12); }
.favbox.on { color: var(--lime); }
.c-id { font-size: 12px; color: var(--faint); font-weight: 700; }
.c-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dt-chip { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.dt-chip svg { width: 19px; height: 19px; }
.dt-chip.sm { width: 28px; height: 28px; border-radius: 8px; }
.dt-chip.sm svg { width: 16px; height: 16px; }
.dt-names { min-width: 0; display: flex; flex-direction: column; }
.dt-names .jp { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-names .en { font-size: 10.5px; color: var(--faint); font-weight: 500; letter-spacing: .01em; }
.c-num, .c-rs { text-align: right; }
.c-cnt { text-align: right; color: var(--muted); font-size: 13px; }
.c-spark { display: flex; justify-content: center; }
.c-go { color: var(--faint); display: grid; place-items: center; }
.spark { display: block; }

/* theme detail grid */
.tt-head, .tt-row { display: grid; grid-template-columns: 46px minmax(200px,1fr) 160px 56px 60px 92px 150px; align-items: center; gap: 6px; }
.tt-head .t-rs, .tt-head .t-num { text-align: right; justify-content: flex-end; }
.tt-head .t-cnt { text-align: right; }
.t-id { font-size: 12px; color: var(--faint); font-weight: 700; }
.t-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tt-nm { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solo-badge { font-size: 10px; font-weight: 700; color: var(--down); background: color-mix(in oklab, var(--down) 12%, transparent); padding: 2px 7px; border-radius: 6px; white-space: nowrap; flex: none; }
.t-sec { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-cnt { text-align: right; color: var(--muted); font-size: 13px; }
.t-rs, .t-num { text-align: right; }
.t-spark { display: flex; justify-content: center; }

/* ===================== filter bar (小テーマ) ===================== */
.filterbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-top: var(--gap); box-shadow: var(--shadow-sm); }
.fb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.fb-label { font-size: 11.5px; color: var(--faint); font-weight: 700; margin-right: 4px; }
.fb-chip { font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface2); color: var(--muted); display: inline-flex; align-items: center; gap: 7px; transition: all .15s; }
.fb-chip:hover { border-color: var(--border-strong); }
.fb-chip.on { background: var(--text); color: var(--bg); border-color: transparent; }
.fb-code { font-size: 10px; font-weight: 800; opacity: .6; font-family: var(--num); }
.fb-chip.on .fb-code { opacity: .8; }
.fb-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.fb-search { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 10px 16px; color: var(--muted); }
.fb-search input { flex: 1; border: none; background: none; outline: none; font-family: inherit; font-size: 13.5px; color: var(--text); }
.fb-selects { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fb-selects label { font-size: 12px; color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.fb-selects select { font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 12px; }
.fb-summary { font-size: 12px; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.fb-summary b { color: var(--text); font-weight: 800; }
.fb-summary .d { opacity: .35; }

/* ===================== pickup cards ===================== */
.pickup-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.pickup { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--lc); border-radius: var(--radius-sm); padding: 16px 16px 14px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .14s, box-shadow .2s; }
.pickup:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pk-top { display: flex; align-items: center; justify-content: space-between; }
.pk-chip { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
.pk-chip svg { width: 18px; height: 18px; }
.pk-meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pk-meta .num { font-size: 10.5px; color: var(--faint); font-weight: 700; }
.pk-cnt { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.pk-cnt.solo { color: var(--down); }
.pk-name { font-size: 14px; font-weight: 700; margin: 12px 0 6px; min-height: 38px; line-height: 1.35; }
.pk-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.pk-val { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.pk-val .u { font-size: 12px; opacity: .55; }

/* ===================== §2 sector inline accordion ===================== */
.dt-block { border-bottom: 1px solid var(--border); }
.dt-block:last-child { border-bottom: none; }
.dt-block.open { background: var(--surface2); border-radius: 14px; border-bottom-color: transparent; margin: 2px 0; box-shadow: inset 3px 0 0 var(--text); }
.dt-block .dt-row { border-bottom: none; border-radius: 0; }
.dt-block.open .dt-row { background: transparent; }
.acc-chev svg { transition: transform .22s ease; }
.dt-block.open .acc-chev svg { transform: rotate(180deg); }
.dt-acc { padding: 2px 18px 18px 62px; animation: accIn .22s ease both; }
@keyframes accIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dt-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); font-weight: 600; margin: 4px 0 12px; }
.dt-more { font-size: 12px; font-weight: 700; padding: 8px 15px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); display: inline-flex; align-items: center; gap: 6px; transition: opacity .15s, transform .12s; }
.dt-more:hover { transform: translateX(2px); opacity: .9; }
.dt-acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.acc-item { display: grid; grid-template-columns: 24px 1fr auto 62px; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; border-radius: 6px; }
.acc-item:hover { background: color-mix(in oklab, var(--text) 4%, transparent); }
.acc-rk { font-size: 11px; color: var(--faint); font-weight: 700; }
.acc-mid { min-width: 0; }
.acc-nm { font-size: 13.5px; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-bar { display: block; height: 3px; width: 64%; background: var(--border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.acc-bar i { display: block; height: 100%; border-radius: 2px; }
.acc-cnt { font-size: 11px; color: var(--muted); }
.acc-ch { font-size: 13.5px; font-weight: 700; text-align: right; }
.acc-ch .u, .acc-item .u { font-size: 9px; opacity: .55; }

/* ===================== rich detail modal ===================== */
.modal.rd { width: min(760px, 95vw); max-height: 90vh; overflow-y: auto; padding: 0 28px 22px; }
.modal.rd::-webkit-scrollbar { width: 10px; }
.modal.rd::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 3px solid var(--surface); }
.rd-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 22px 0 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.rd-chip { width: 58px; height: 58px; border-radius: 16px; flex: none; display: grid; place-items: center; color: #fff; }
.rd-chip svg { width: 32px; height: 32px; }
.rd-titles { min-width: 0; flex: 1; }
.rd-eyebrow { font-size: 11.5px; color: var(--faint); font-weight: 700; letter-spacing: .01em; }
.rd-title { margin: 5px 0 0; font-size: 25px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.rd-rs { flex: none; text-align: center; background: var(--text); color: var(--bg); border-radius: 14px; padding: 9px 16px; line-height: 1.1; }
.rd-rs small { font-size: 9px; opacity: .7; font-weight: 700; letter-spacing: .04em; }
.rd-rs .num { font-size: 22px; font-weight: 800; }
.rd-x { position: relative; top: auto; right: auto; width: 34px; height: 34px; flex: none; }
.rd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 20px 0 0; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.rd-stat { background: var(--surface); padding: 15px 16px; }
.rd-stat .k { font-size: 10.5px; color: var(--muted); font-weight: 600; line-height: 1.45; min-height: 30px; }
.rd-stat .v { font-size: 23px; font-weight: 700; margin-top: 8px; letter-spacing: -.02em; }
.rd-stat .v .u { font-size: 12px; opacity: .55; font-weight: 600; }
.rd-stat .v.rs.rs-strong { color: var(--up); }
.rd-period { margin: 22px auto 0; width: 100%; justify-content: stretch; }
.rd-period button { flex: 1; justify-content: center; }
.rd-chart { width: 100%; height: 230px; margin-top: 14px; display: block; }
.rd-break { margin-top: 22px; }
.rd-break-h { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.rd-break-h .num { color: var(--faint); font-weight: 700; }
.rd-break-list { border-top: 1px solid var(--border); }
.rd-item { display: grid; grid-template-columns: 14px 1fr auto 78px; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--border); }
.rd-dot { width: 8px; height: 8px; border-radius: 50%; }
.rd-item .nm { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-item .cnt { font-size: 12px; color: var(--muted); text-align: right; }
.rd-item .chv { font-size: 14px; font-weight: 700; text-align: right; }
.rd-item .u { font-size: 10px; opacity: .55; }
.rd-empty { padding: 20px; text-align: center; color: var(--faint); font-size: 13px; }
.rd-foot { font-size: 11px; color: var(--faint); line-height: 1.6; margin-top: 16px; }
@media (max-width: 620px) {
  .rd-stats { grid-template-columns: 1fr 1fr; }
  .rd-title { font-size: 20px; }
  .dt-acc-grid { grid-template-columns: 1fr; }
  .dt-acc { padding: 2px 10px 16px 14px; }
}

/* ===================== modal ===================== */
.modal-back { position: fixed; inset: 0; background: rgba(8,10,7,.5); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 100; padding: 20px; animation: fadeUp .2s ease both; }
.modal { width: min(440px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.4); position: relative; }
.modal-x { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--surface2); color: var(--muted); font-size: 13px; display: grid; place-items: center; }
.modal-x:hover { background: var(--border); }
.modal-head { display: flex; align-items: center; gap: 14px; }
.modal-chip { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none; }
.modal-chip svg { width: 26px; height: 26px; }
.modal-id { font-size: 11px; color: var(--faint); font-weight: 700; }
.modal-nm { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.modal-rs { margin-left: auto; text-align: center; }
.modal-rs .num { font-size: 26px; font-weight: 800; }
.modal-rs small { font-size: 10px; color: var(--faint); font-weight: 700; }
.modal-big { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 4px; }
.modal-big .num { font-size: 46px; font-weight: 600; letter-spacing: -.03em; }
.modal-sub { font-size: 12px; color: var(--muted); font-weight: 600; }
.modal-spark { width: 100%; height: 64px; margin: 8px 0 4px; }
.modal-foot { font-size: 11.5px; color: var(--faint); line-height: 1.6; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 8px; }

.empty { text-align: center; color: var(--faint); font-size: 13px; padding: 40px; font-weight: 600; }
.ftr { text-align: center; color: var(--faint); font-size: 11.5px; margin-top: 44px; font-weight: 600; letter-spacing: .02em; }

/* fade-in */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade { animation: fadeUp .5s ease both; }

/* ===================== responsive =====================
   NOTE: kept at the end of the file on purpose. These max-width overrides
   share specificity with the component base rules (.tt-row/.dt-row/
   .pickup-grid etc.), so they must appear AFTER those definitions to win
   the cascade. Moving them earlier silently breaks the narrow-width grid
   templates (columns collapse to the desktop track count → left-shift). */
@media (max-width: 1080px) {
  .pickup-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .lead-grid { grid-template-columns: repeat(4, 1fr); }
  .signals { grid-template-columns: 1fr; }
  .row, .axis { grid-template-columns: 200px 1fr 50px; }
  .dt-head, .dt-row { grid-template-columns: 30px 30px minmax(150px,1fr) 84px 44px 110px 22px; }
  .dt-head .c-cnt, .dt-row .c-cnt { display: none; }
  .tt-head, .tt-row { grid-template-columns: 40px minmax(150px,1fr) 50px 80px 110px; }
  .tt-head .t-sec, .tt-row .t-sec, .tt-head .t-cnt, .tt-row .t-cnt { display: none; }
  .dt-names .en { display: none; }
}
@media (max-width: 620px) {
  .app { padding: 0 14px 70px; }
  .brand h1 { font-size: 26px; }
  .lead-grid { grid-template-columns: repeat(3, 1fr); }
  .pickup-grid { grid-template-columns: 1fr; }
  .ov-stats { grid-template-columns: 1fr; }
  .ov-big .v { font-size: 64px; }
  .row, .axis { grid-template-columns: 130px 1fr 38px; }
  .row .endcell { gap: 8px; }
  .row .chv { min-width: 56px; font-size: 13px; }
  .controls { gap: 8px; }
  .dt-head, .dt-row { grid-template-columns: 26px minmax(120px,1fr) 76px 40px 84px 20px; }
  .dt-head .c-id, .dt-row .c-id { display: none; }
  .tt-head .t-spark, .tt-row .t-spark { display: none; }
  .tt-head, .tt-row { grid-template-columns: 36px minmax(130px,1fr) 46px 76px; }
}