:root {
  --bg: #080d17;
  --bg-soft: #0d1422;
  --panel: #111a2a;
  --panel-2: #162237;
  --panel-3: #1b2940;
  --line: rgba(178, 197, 226, .14);
  --line-strong: rgba(178, 197, 226, .24);
  --fg: #f4f1e9;
  --muted: #91a1b9;
  --faint: #607089;
  --accent: #f4c563;
  --accent-soft: rgba(244, 197, 99, .12);
  --blue: #68aefe;
  --blue-soft: rgba(104, 174, 254, .12);
  --up: #35d69b;
  --down: #ff6178;
  --warn: #f4c563;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --sidebar: 248px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(circle at 78% -10%, rgba(60, 105, 180, .17), transparent 34rem),
    linear-gradient(145deg, #080d17 0%, #0a1120 48%, #080d17 100%);
  color: var(--fg); font-family: var(--sans); font-size: 14px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
a { color: var(--blue); text-underline-offset: 3px; }
button, select, input { font: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* sidebar */
.topbar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar); padding: 28px 18px 20px;
  display: flex; flex-direction: column; background: rgba(8, 13, 23, .94);
  border-right: 1px solid var(--line); backdrop-filter: blur(18px);
}
.brand { display: flex; gap: 13px; align-items: center; padding: 0 8px 26px; }
.logo {
  position: relative; flex: 0 0 42px; width: 42px; height: 42px; overflow: hidden;
  border: 1px solid rgba(244, 197, 99, .42); border-radius: 13px; background: var(--accent-soft);
}
.logo::before, .logo::after, .logo span {
  content: ""; position: absolute; left: 7px; right: 7px; height: 2px; border-radius: 2px;
  background: var(--accent); transform-origin: left center;
}
.logo::before { top: 13px; transform: rotate(12deg); }
.logo span { top: 21px; transform: rotate(-14deg); opacity: .82; }
.logo::after { top: 29px; transform: rotate(7deg); opacity: .58; }
.brand h1 { margin: 1px 0 0; font-size: 20px; letter-spacing: .055em; line-height: 1.25; }
.brand-kicker, .eyebrow { margin: 0; color: var(--accent); font: 700 9px/1.4 var(--mono); letter-spacing: .18em; }
.brand .sub { margin: 4px 0 0; color: var(--faint); font: 9px/1.2 var(--mono); letter-spacing: .08em; }
.tabs { display: flex; flex-direction: column; gap: 5px; }
.tabs button {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 9px;
  text-align: left; cursor: pointer; font-weight: 600; transition: .16s ease;
}
.tabs button span { width: 18px; color: var(--faint); font: 17px/1 var(--mono); text-align: center; }
.tabs button:hover { color: var(--fg); background: rgba(255,255,255,.035); }
.tabs button.active { color: var(--fg); background: var(--accent-soft); border-color: rgba(244,197,99,.18); }
.tabs button.active span { color: var(--accent); }
.sidebar-status {
  margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 12px;
  background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 10px;
}
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #61d3b1; box-shadow: 0 0 0 5px rgba(97,211,177,.09); }
.sidebar-status b, .sidebar-status small { display: block; }
.sidebar-status b { font-size: 11px; }
.sidebar-status small { color: var(--faint); font-size: 9px; margin-top: 2px; }

main { margin-left: var(--sidebar); min-height: 100vh; padding: 42px clamp(22px, 4vw, 64px) 80px; }
main > section { max-width: 1440px; margin: 0 auto; }
footer { margin-left: var(--sidebar); padding: 24px clamp(22px, 4vw, 64px) 38px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; text-align: center; }
footer p { margin: 4px 0; }
.tab { display: none; }
.tab.active { display: block; animation: reveal .18s ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.loading { margin-left: var(--sidebar); min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
.loading span { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite alternate; }
@keyframes pulse { to { transform: scale(.45); opacity: .45; } }

/* headings and controls */
.page-head, .dashboard-hero { margin-bottom: 26px; }
.page-head h2, .dashboard-hero h2 { margin: 5px 0 7px; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.2; letter-spacing: -.035em; }
.page-head p, .dashboard-hero p { max-width: 760px; margin: 0; color: var(--muted); }
.dashboard-hero { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.hero-badge { min-width: 136px; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); text-align: right; }
.hero-badge b, .hero-badge span { display: block; }
.hero-badge b { font: 700 18px/1.2 var(--mono); color: var(--accent); }
.hero-badge span { margin-top: 3px; color: var(--faint); font-size: 10px; }
.controls, .filter-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 18px;
  padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(17,26,42,.72);
}
.controls label, .filter-bar label { display: flex; flex-direction: column; gap: 5px; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.controls label.chk { flex-direction: row; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; padding: 0 4px 9px; }
.search-field { flex: 1 1 180px; }
select, input[type="search"] {
  min-width: 160px; max-width: 360px; height: 39px; padding: 0 12px; color: var(--fg);
  background: var(--panel-3); border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12px;
}
.date-stepper { display: flex; gap: 5px; padding-bottom: 1px; }
.date-stepper button {
  height: 39px; padding: 0 11px; color: var(--muted); background: var(--panel-3);
  border: 1px solid var(--line-strong); border-radius: 8px; font-size: 11px; cursor: pointer;
}
.date-stepper button:hover:not(:disabled) { color: var(--fg); border-color: rgba(244,197,99,.42); background: var(--accent-soft); }
.date-stepper button:disabled { opacity: .35; cursor: default; }
.search-field input { width: 100%; max-width: none; }
input::placeholder { color: var(--faint); }

/* dashboard */
.data-health { display: none; margin-bottom: 14px; padding: 11px 14px; border: 1px solid rgba(244,197,99,.22); border-radius: 9px; background: var(--accent-soft); color: #d9c18a; font-size: 12px; }
.data-health.show { display: flex; gap: 8px; align-items: center; }
.metric-strip, .daily-summary { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.daily-summary { grid-template-columns: repeat(6, minmax(120px, 1fr)); }
.metric-card, .daily-metric { min-height: 88px; padding: 14px 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.metric-card span, .daily-metric span { display: block; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.metric-card b, .daily-metric b { display: block; margin-top: 8px; font: 700 21px/1.1 var(--mono); letter-spacing: -.04em; }
.metric-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.daily-insights { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); gap: 16px; align-items: start; }
.daily-top-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.daily-top-card { min-width: 0; padding: 13px; color: var(--fg); text-align: left; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: .16s ease; }
.daily-top-card:hover { transform: translateY(-2px); border-color: rgba(244,197,99,.42); background: var(--accent-soft); }
.daily-top-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.daily-top-head b { font: 800 15px/1 var(--mono); }
.daily-rank { color: var(--accent); font: 800 9px/1 var(--mono); }
.daily-top-card strong, .daily-top-card small { display: block; }
.daily-top-card strong { margin-top: 11px; font: 800 15px/1.2 var(--mono); }
.daily-top-card small { min-height: 27px; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.4; }
.daily-top-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.daily-top-meta span { padding: 3px 5px; border-radius: 5px; background: rgba(255,255,255,.045); color: var(--muted); font: 8px/1.35 var(--mono); }
.ranking-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ranking-conclusion {
  position: relative; overflow: hidden; margin: 0 0 14px; padding: 20px 22px 21px;
  background: linear-gradient(135deg, rgba(53,214,155,.13), rgba(17,26,42,.96) 56%);
  border: 1px solid rgba(53,214,155,.3); border-left: 5px solid var(--up); border-radius: 14px;
}
.ranking-conclusion::after {
  content: ""; position: absolute; top: -46px; right: -24px; width: 170px; height: 170px;
  border-radius: 50%; background: rgba(53,214,155,.06); pointer-events: none;
}
.ranking-conclusion.neutral { background: linear-gradient(135deg, rgba(145,161,185,.1), rgba(17,26,42,.96) 56%); border-color: var(--line-strong); border-left-color: var(--muted); }
.ranking-conclusion.weak { background: linear-gradient(135deg, rgba(255,97,120,.1), rgba(17,26,42,.96) 56%); border-color: rgba(255,97,120,.28); border-left-color: var(--down); }
.ranking-conclusion-top, .ranking-card-top, .ranking-list-head, .store-verdict-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ranking-answer-label { color: var(--up); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.ranking-conclusion h3 { position: relative; margin: 10px 0 4px; font-size: clamp(20px, 2.3vw, 28px); line-height: 1.35; }
.ranking-conclusion p { position: relative; max-width: 850px; margin: 0; color: #ced8e6; font-size: 13px; }
.ranking-conclusion small { position: relative; display: block; margin-top: 9px; color: var(--muted); font: 10px/1.5 var(--mono); }
.store-verdict { display: inline-flex; align-items: center; min-height: 24px; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; }
.store-verdict.hot { color: #062318; background: var(--up); }
.store-verdict.good { color: #7ff2c9; background: rgba(53,214,155,.14); border: 1px solid rgba(53,214,155,.3); }
.store-verdict.slight { color: #a8e8d2; background: rgba(53,214,155,.08); border: 1px solid rgba(53,214,155,.18); }
.store-verdict.neutral { color: #c5ceda; background: rgba(145,161,185,.1); border: 1px solid var(--line-strong); }
.store-verdict.weak { color: #ff9aaa; background: rgba(255,97,120,.1); border: 1px solid rgba(255,97,120,.24); }
.ranking-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ranking-card {
  min-width: 0; padding: 17px; color: var(--fg); text-align: left; cursor: pointer;
  background: linear-gradient(155deg, rgba(20,31,50,.98), rgba(14,22,36,.96));
  border: 1px solid var(--line); border-radius: 13px; transition: .16s ease;
}
.ranking-card:hover { transform: translateY(-2px); border-color: rgba(244,197,99,.42); background: linear-gradient(155deg, rgba(44,42,36,.95), rgba(16,24,38,.98)); }
.ranking-medal { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font: 800 9px/1 var(--mono); }
.ranking-card strong, .ranking-card > b { display: block; }
.ranking-card strong { margin-top: 12px; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.ranking-card > b { margin-top: 10px; font: 800 22px/1 var(--mono); }
.ranking-card p { min-height: 62px; margin: 10px 0 0; color: #c3cfde; font-size: 11px; line-height: 1.75; }
.ranking-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.ranking-card-meta span { padding: 4px 6px; border-radius: 5px; color: var(--muted); background: rgba(255,255,255,.045); font: 9px/1 var(--mono); }
.ranking-list-head { margin: 22px 2px 10px; align-items: flex-end; }
.ranking-list-head h3 { margin: 0; font-size: 16px; }
.ranking-list-head span { color: var(--faint); font-size: 10px; }
.store-verdict-list { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(17,26,42,.7); }
.store-verdict-row {
  width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(210px, auto); gap: 14px; align-items: center;
  padding: 14px 16px; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; transition: .14s ease;
}
.store-verdict-row:last-child { border-bottom: 0; }
.store-verdict-row:hover { background: rgba(255,255,255,.035); }
.store-rank { width: 30px; height: 30px; display: grid; place-items: center; color: var(--faint); border: 1px solid var(--line); border-radius: 50%; font: 700 10px/1 var(--mono); }
.store-verdict-main { min-width: 0; }
.store-verdict-name { justify-content: flex-start; }
.store-verdict-name strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.store-verdict-name small { flex: 0 0 auto; color: var(--faint); font-size: 9px; }
.store-verdict-main p { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.store-verdict-result { display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: center; justify-items: end; }
.store-verdict-result .store-verdict { grid-row: 1 / 3; grid-column: 1; }
.store-verdict-result b { grid-row: 1; grid-column: 2; font: 800 13px/1 var(--mono); }
.store-verdict-result small { grid-row: 2; grid-column: 2; color: var(--faint); font: 8px/1 var(--mono); }
.daily-kishu-panel .tbl-wrap { max-height: 324px; overflow: auto; }
.compact-table th, .compact-table td { padding: 8px 7px; font-size: 10px; }
.compact-table th:first-child, .compact-table td:first-child { max-width: 220px; overflow: hidden; text-align: left; text-overflow: ellipsis; }
.daily-dist-panel { margin-top: 0; }
.distribution-bars { display: grid; grid-template-columns: repeat(6, minmax(90px, 1fr)); gap: 12px; }
.distribution-item { min-width: 0; }
.distribution-item > span { display: block; min-height: 27px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.distribution-track { height: 9px; overflow: hidden; margin: 7px 0 6px; border-radius: 999px; background: rgba(255,255,255,.055); }
.distribution-fill { height: 100%; border-radius: inherit; background: var(--down); }
.distribution-fill.positive { background: var(--up); }
.distribution-item b { font: 700 11px/1 var(--mono); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: 16px; align-items: start; }
.panel, .card, .chart-wrap, .tbl-wrap {
  background: linear-gradient(160deg, rgba(20,31,50,.94), rgba(14,22,36,.96));
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 45px rgba(0,0,0,.12);
}
.panel, .card { padding: 18px; margin-bottom: 16px; }
.panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 14px; }
.panel-head h3, .card h3 { margin: 3px 0 0; font-size: 15px; }
.count-pill, .grade-badge { padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font: 700 10px/1.4 var(--mono); }
.candidate-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.candidate {
  position: relative; width: 100%; min-height: 126px; padding: 14px; color: var(--fg); text-align: left;
  background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; transition: .16s ease;
}
.candidate:hover, .candidate.active { transform: translateY(-2px); border-color: rgba(244,197,99,.42); background: var(--accent-soft); }
.candidate-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.candidate-num { font: 800 18px/1 var(--mono); }
.candidate-score { font: 800 18px/1 var(--mono); color: var(--accent); }
.candidate-kishu { margin: 8px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.candidate-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.candidate-meta span { padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.045); color: var(--muted); font: 9px/1.4 var(--mono); }
.candidate-meta .hot { color: var(--accent); background: var(--accent-soft); }
.empty-state { grid-column: 1 / -1; padding: 42px 20px; text-align: center; color: var(--muted); }
.detail-panel { position: sticky; top: 24px; min-height: 420px; }
.detail-top { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; margin-bottom: 18px; }
.score-ring { --score: 50; --ring: var(--accent); width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring) calc(var(--score) * 1%), rgba(255,255,255,.07) 0); }
.score-ring::before { content: ""; grid-area: 1/1; width: 68px; height: 68px; border-radius: 50%; background: var(--panel); }
.score-ring b { position: relative; grid-area: 1/1; font: 800 25px/1 var(--mono); }
.detail-title h3 { margin: 4px 0; font-size: 21px; }
.detail-title p { margin: 0; color: var(--muted); font-size: 11px; }
.signal-label { display: inline-flex; padding: 4px 8px; border-radius: 5px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; }
.evidence-list { display: grid; gap: 11px; margin: 17px 0; }
.evidence-row { display: grid; grid-template-columns: 82px 1fr 38px; gap: 8px; align-items: center; }
.evidence-row span { color: var(--muted); font-size: 10px; }
.evidence-track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.evidence-fill { height: 100%; border-radius: inherit; background: var(--blue); }
.evidence-row b { text-align: right; font: 700 10px/1 var(--mono); }
.detail-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.detail-metric { padding: 10px; border-radius: 8px; background: rgba(255,255,255,.026); border: 1px solid var(--line); }
.detail-metric span, .detail-metric b { display: block; }
.detail-metric span { color: var(--faint); font-size: 9px; }
.detail-metric b { margin-top: 4px; font: 700 12px/1.3 var(--mono); }
.reason-list { margin: 15px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.reason-list li { display: flex; gap: 8px; color: var(--muted); font-size: 11px; }
.reason-list li::before { content: "•"; color: var(--accent); }
.detail-action { width: 100%; margin-top: 16px; padding: 10px 12px; border: 1px solid rgba(244,197,99,.28); border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 800; cursor: pointer; }
.score-guide { margin-top: 16px; display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.guide-grid b, .guide-grid span { display: block; }
.guide-grid b { font-size: 11px; }
.guide-grid span { margin-top: 3px; color: var(--muted); font-size: 10px; }

/* chart */
.chart-wrap { position: relative; padding: 15px 15px 8px; margin-bottom: 16px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 3px 10px; }
.unit-num { font: 800 21px/1.3 var(--mono); }
.unit-kishu { margin-left: 10px; color: var(--muted); font-size: 12px; }
.quote { text-align: right; font-family: var(--mono); }
.quote-main { font-size: 21px; font-weight: 800; }
.quote-sub { margin-left: 8px; font-size: 11px; }
canvas { display: block; width: 100%; }
.tip { position: absolute; z-index: 5; pointer-events: none; padding: 8px 10px; background: rgba(5,9,16,.94); border: 1px solid var(--line-strong); border-radius: 7px; font: 10px/1.65 var(--mono); white-space: nowrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.oracle .gauge { position: relative; height: 34px; overflow: hidden; margin: 10px 0 12px; background: rgba(255,255,255,.055); border-radius: 999px; }
.gauge-fill { height: 100%; width: 0; background: var(--accent); transition: width .28s ease; }
.gauge span { position: absolute; inset: 0; display: grid; place-items: center; color: white; font: 800 15px/1 var(--mono); text-shadow: 0 1px 3px #000; }
.oracle-comment { margin: 0 0 12px; font-size: 13px; }
.oracle-detail { display: grid; gap: 6px; font: 10px/1.5 var(--mono); color: var(--muted); }
.oracle-detail div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 5px; border-bottom: 1px dotted var(--line); }

/* tables and shared analysis */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th { color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: .04em; }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover { background: rgba(255,255,255,.025); }
.clickable-row { cursor: pointer; }
.tbl-wrap { overflow-x: auto; margin-bottom: 16px; }
.card .tbl-wrap { margin: 0; border: 0; box-shadow: none; background: transparent; }
.mono { font-family: var(--mono); }
.up { color: var(--up); }
.down { color: var(--down); }
.dimc, .note { color: var(--muted); }
.note { margin: 0 0 10px; font-size: 11px; }
table.mini td { padding: 6px 7px; font-size: 10px; }
.daily-table th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.daily-empty { padding: 36px; text-align: center; color: var(--muted); }
.verdict { margin-bottom: 16px; padding: 15px 17px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--panel); }
.verdict b { font-size: 15px; }
.rules { display: grid; gap: 9px; }
.rule { display: grid; grid-template-columns: 1fr 140px 110px; gap: 14px; align-items: center; padding: 13px 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.rule.sig { border-color: rgba(244,197,99,.32); background: linear-gradient(90deg, var(--accent-soft), var(--panel) 42%); }
.rule-name { font-size: 12px; }
.rule-name .tag { display: inline-block; margin-right: 7px; padding: 2px 6px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; font-size: 8px; }
.rule-stats { margin-top: 4px; color: var(--faint); font: 9px/1.5 var(--mono); }
.rule-eff { text-align: right; font-family: var(--mono); }
.rule-eff .big { display: block; font-size: 16px; font-weight: 800; }
.rule-eff .p { font-size: 9px; color: var(--faint); }
.rule-verdict { padding: 5px; border-radius: 5px; text-align: center; font-size: 9px; font-weight: 800; }
.v-noise { background: rgba(255,255,255,.04); color: var(--faint); }
.v-maybe { background: var(--blue-soft); color: var(--blue); }
.v-real { background: var(--accent-soft); color: var(--accent); }

/* setting map */
.statline { margin-bottom: 14px; color: var(--muted); font: 11px/1.7 var(--mono); }
.statline b { color: var(--fg); }
.setting-summary { margin-bottom: 14px; }
.legend { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--faint); font: 9px/1.4 var(--mono); }
.legend i { width: 26px; height: 11px; display: inline-block; border-radius: 3px; }
.heat { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.cell { width: 48px; height: 43px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,.18); border-radius: 6px; color: var(--fg); font: 9px/1.25 var(--mono); cursor: pointer; transition: .12s ease; }
.cell b { font-size: 10px; }
.cell:hover, .cell:focus-visible, .cell.active { outline: 2px solid var(--accent); outline-offset: 1px; transform: translateY(-1px); }
.setting-unit-detail { min-height: 78px; margin-bottom: 13px; padding: 13px 14px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 11px; }
.setting-unit-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; color: var(--fg); }
.setting-unit-title strong { color: var(--accent); font: 800 16px/1 var(--mono); }
.setting-unit-title span { font-size: 13px; font-weight: 700; }
.setting-unit-detail-grid { display: grid; grid-template-columns: repeat(6, minmax(85px, 1fr)); gap: 7px; }
.setting-unit-detail-item span, .setting-unit-detail-item b { display: block; }
.setting-unit-detail-item span { color: var(--faint); font-size: 8px; }
.setting-unit-detail-item b { margin-top: 2px; color: var(--fg); font: 700 10px/1.3 var(--mono); }
.prose p, .prose li { font-size: 12px; }
.prose h4 { margin: 23px 0 7px; color: var(--accent); font-size: 13px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose code { padding: 1px 5px; border-radius: 4px; background: var(--panel-3); font-family: var(--mono); }

@media (max-width: 1180px) {
  .candidate-list { grid-template-columns: 1fr; }
  .metric-strip, .daily-summary { grid-template-columns: repeat(3, 1fr); }
  .daily-insights { grid-template-columns: 1fr; }
  .ranking-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .store-verdict-row { grid-template-columns: 36px minmax(0, 1fr) minmax(190px, auto); gap: 10px; }
}
@media (max-width: 900px) {
  :root { --sidebar: 0px; }
  .topbar { position: sticky; inset: 0; width: 100%; height: auto; padding: 10px 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 4px 9px; }
  .logo { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
  .logo::before { top: 10px; }.logo span { top: 17px; }.logo::after { top: 24px; }
  .brand h1 { font-size: 17px; }.brand-kicker { font-size: 7px; }.brand .sub { display: none; }
  .tabs { margin: 0 -12px; padding: 0 12px 9px; flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { width: auto; min-width: max-content; padding: 8px 10px; font-size: 11px; }
  .tabs button span { width: 13px; font-size: 13px; }
  .sidebar-status { display: none; }
  main { margin-left: 0; padding: 27px 16px 60px; }
  footer, .loading { margin-left: 0; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .detail-panel { position: static; }
  .candidate-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .distribution-bars { grid-template-columns: repeat(3, 1fr); }
  .score-guide { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dashboard-hero { align-items: flex-start; }
  .hero-badge { display: none; }
  .page-head h2, .dashboard-hero h2 { font-size: 28px; }
  .filter-bar, .controls { gap: 8px; padding: 10px; }
  .filter-bar label, .controls label { flex: 1 1 140px; }
  .date-stepper { flex: 1 1 100%; }
  .date-stepper button { flex: 1; }
  select, input[type="search"] { width: 100%; min-width: 0; max-width: none; }
  .metric-strip, .daily-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card, .daily-metric { min-height: 75px; padding: 12px; }
  .metric-card b, .daily-metric b { font-size: 17px; }
  .candidate-list { grid-template-columns: 1fr; }
  .daily-top-list, .distribution-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-podium { grid-template-columns: 1fr; }
  .ranking-summary { grid-template-columns: 1fr; }
  .ranking-conclusion { padding: 17px 16px 18px; }
  .ranking-conclusion h3 { font-size: 20px; }
  .ranking-conclusion p { font-size: 12px; }
  .ranking-card p { min-height: 0; }
  .ranking-list-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .store-verdict-row { grid-template-columns: 34px minmax(0, 1fr); padding: 13px 12px; }
  .store-verdict-result { grid-column: 2; grid-template-columns: auto 1fr; justify-items: start; }
  .store-verdict-result .store-verdict { grid-row: 1 / 3; grid-column: 1; }
  .store-verdict-main p { white-space: normal; }
  .grid2 { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .rule { grid-template-columns: 1fr; }
  .rule-eff { text-align: left; }
  .setting-unit-detail-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .setting-unit-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .detail-top { grid-template-columns: 80px 1fr; }
  .score-ring { width: 76px; height: 76px; }.score-ring::before { width: 60px; height: 60px; }
}