/* ============================================================
   View Points — Modern SaaS Design System
   accent: Navy (#1E40AF), left-nav: Dark (#0F172A)
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Neutral */
  --bg-canvas:        #FFFFFF;
  --bg-surface:       #F8FAFC;
  --bg-surface-alt:   #F1F5F9;
  --border-default:   #E2E8F0;
  --border-strong:    #CBD5E1;
  --border-subtle:    #EEF2F6;
  --text-primary:     #0F172A;
  --text-secondary:   #475569;
  --text-tertiary:    #94A3B8;
  --text-disabled:    #CBD5E1;

  /* Brand (single accent) */
  --brand-50:   #EEF4FF;
  --brand-100:  #DCE6FF;
  --brand-200:  #B8C9FF;
  --brand-300:  #8AA5FF;
  --brand-400:  #5777F0;
  --brand-500:  #1E40AF;
  --brand-600:  #1B388F;
  --brand-700:  #16306E;
  --brand-900:  #0F1F5C;

  /* Dark surface (left nav) */
  --dark-canvas:   #0F172A;
  --dark-surface:  #1E293B;
  --dark-border:   #334155;
  --dark-text:     #E2E8F0;
  --dark-text-dim: #94A3B8;
  --dark-accent:   #5777F0;

  /* Status */
  --success:        #16A34A;
  --success-bg:     #DCFCE7;
  --warning:        #B45309;
  --warning-bg:     #FEF3C7;
  --danger:         #B91C1C;
  --danger-bg:      #FEE2E2;
  --info:           #0369A1;
  --info-bg:        #E0F2FE;

  /* Tier (refined palette - 各色相を明確に分離)
     S=Gold(黄系)/ A=Violet(紫系)/ B=Emerald(緑系)/ C=Orange(橙系)/ D=Slate(灰系)
     A をブランド navy から分離(視覚的階層を保つため) */
  --tier-S:         #A16207;   /* yellow-700 — premium gold */
  --tier-S-bg:      #FEF9C3;   /* yellow-100 */
  --tier-S-border:  rgba(161, 98, 7, 0.25);
  --tier-A:         #5B21B6;   /* violet-800 — distinct from brand navy */
  --tier-A-bg:      #EDE9FE;   /* violet-100 */
  --tier-A-border:  rgba(91, 33, 182, 0.25);
  --tier-B:         #15803D;   /* green-700 */
  --tier-B-bg:      #DCFCE7;   /* green-100 */
  --tier-B-border:  rgba(21, 128, 61, 0.25);
  --tier-C:         #C2410C;   /* orange-700 — clearly different from S */
  --tier-C-bg:      #FFEDD5;   /* orange-100 */
  --tier-C-border:  rgba(194, 65, 12, 0.25);
  --tier-D:         #475569;   /* slate-600 */
  --tier-D-bg:      #F1F5F9;   /* slate-100 */
  --tier-D-border:  rgba(71, 85, 105, 0.25);

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, .12);

  /* Layout */
  --nav-width:        240px;
  --nav-width-collapsed: 64px;
  --topbar-height:    56px;
  --content-max:      1600px;
  --content-pad-x:    32px;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Consolas, Menlo, monospace;
}

/* ---------- 2. Reset / Base ---------- */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
h1 { font-size: 22px; line-height: 1.3; }
h2 { font-size: 18px; line-height: 1.4; }
h3 { font-size: 15px; line-height: 1.4; }
h4 { font-size: 14px; line-height: 1.4; }

p { margin: 0; }
a { color: var(--brand-500); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--brand-700); }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }

code, pre, .num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- 3. Layout (Left nav + Topbar + Main) ---------- */
body.layout-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--nav-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  /* Prevent wide tables from causing horizontal page scroll without
   * breaking `position: sticky` (overflow: hidden would make body the
   * sticky scroll container and break thead stickiness; `clip` does not). */
  overflow-x: clip;
}

.vp-sidebar {
  grid-area: sidebar;
  /* subtle vertical gradient for depth */
  background:
    linear-gradient(180deg, #0F172A 0%, #0B1424 100%);
  color: var(--dark-text);
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1E293B;
  /* 3D edge: top inner highlight + right shadow falloff */
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.04),
    4px 0 24px rgba(0,0,0,.18);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.vp-sidebar__brand {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
  text-decoration: none;
  color: #FFFFFF;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.vp-sidebar__brand:hover { color: #FFFFFF; }
.vp-sidebar__brand-mark {
  width: 32px; height: 32px;
  border-radius: 6px;
  /* image fits within the rounded box, white bg slot for the navy icon */
  background: #FFFFFF;
  object-fit: contain;
  padding: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 2px 6px rgba(30, 64, 175, .35);
  flex-shrink: 0;
}
.vp-sidebar__brand-name {
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.005em;
  color: #FFFFFF;
}

.vp-sidebar__section { padding: 10px 0; }
.vp-sidebar__section + .vp-sidebar__section {
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 -1px 0 rgba(0,0,0,.4);
}
.vp-sidebar__heading {
  padding: 14px 20px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* brighter than --dark-text-dim for readability */
  color: #94A3B8;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.vp-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  /* brighter base color for inactive items (was --dark-text-dim #94A3B8) */
  color: #CBD5E1;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 150ms, color 150ms, border 150ms, box-shadow 150ms;
}
.vp-sidebar__link:hover {
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: #FFFFFF;
}
.vp-sidebar__link.is-active {
  color: #FFFFFF;
  background: linear-gradient(90deg, rgba(87,119,240,.22), rgba(87,119,240,.04) 70%, transparent);
  border-left-color: var(--brand-400);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.2);
}
.vp-sidebar__link.is-active svg { color: var(--brand-300); }
.vp-sidebar__link svg { width: 16px; height: 16px; flex-shrink: 0; }

.vp-sidebar__footer {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 -1px 0 rgba(0,0,0,.4);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18));
  padding: 14px 20px;
  display: flex; align-items: center; gap: 10px;
}
.vp-sidebar__user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 1px 3px rgba(0,0,0,.4);
}
.vp-sidebar__user-name {
  font-size: 12px;
  font-weight: 500;
  color: #E2E8F0;
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vp-sidebar__logout {
  background: transparent;
  border: none;
  color: #94A3B8;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center;
  transition: background 150ms, color 150ms;
}
.vp-sidebar__logout:hover { color: #FFFFFF; background: rgba(255,255,255,.08); }
.vp-sidebar__logout svg { width: 16px; height: 16px; }

/* Topbar */
.vp-topbar {
  grid-area: topbar;
  /* subtle white→cool-white gradient + lift shadow */
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border-bottom: 1px solid var(--border-default);
  box-shadow:
    0 1px 0 rgba(15,23,42,.03),
    0 4px 12px -2px rgba(15,23,42,.06);
  display: flex;
  align-items: center;
  padding: 0 var(--content-pad-x);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 10;
}
.vp-topbar__breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
}
.vp-topbar__breadcrumb a { color: var(--text-secondary); }
.vp-topbar__breadcrumb a:hover { color: var(--brand-500); }
.vp-topbar__breadcrumb-sep { color: var(--text-tertiary); }
.vp-topbar__breadcrumb-current { color: var(--text-primary); font-weight: 500; }

.vp-topbar__spacer { flex: 1; }
.vp-topbar__actions { display: flex; align-items: center; gap: 8px; }
.vp-topbar__icon-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: background 150ms;
}
.vp-topbar__icon-btn:hover { background: var(--bg-surface); color: var(--text-primary); }
.vp-topbar__icon-btn svg { width: 16px; height: 16px; }

/* ===== Font scale toggle (top-right) ===== */
.vp-topbar__font-scale {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 2px;
}
.vp-topbar__font-scale__label {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  padding: 0 6px 0 4px;
  text-transform: uppercase;
  font-weight: 600;
}
.vp-topbar__font-scale button {
  border: none;
  background: transparent;
  width: 28px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  transition: background 120ms, color 120ms;
}
.vp-topbar__font-scale button[data-fs="sm"] { font-size: 11px; }
.vp-topbar__font-scale button[data-fs="md"] { font-size: 13px; }
.vp-topbar__font-scale button[data-fs="lg"] { font-size: 15px; }
.vp-topbar__font-scale button[data-fs="xl"] { font-size: 17px; }
.vp-topbar__font-scale button:hover {
  background: var(--bg-canvas);
  color: var(--text-primary);
}
.vp-topbar__font-scale button.is-active {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .15);
}

/* ===== Machine list category headers ===== */
.vp-cat-th {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: 1.2;
}
.vp-cat-th__letter {
  font-weight: 700;
  font-size: 12px;
  color: var(--brand-500);
  letter-spacing: 0;
}
.vp-cat-th__name {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 1px;
}

/* Category legend strip above the table */
.vp-cat-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-secondary);
}
.vp-cat-legend__title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.vp-cat-legend b { color: var(--brand-500); font-weight: 700; margin-right: 4px; }

/* Font scaling via CSS variable instead of `zoom`.
 * Why: `zoom` (and `transform: scale()`) creates a new containing block,
 * which breaks `position: sticky` for descendants (the sticky thead in
 * machine-list would scroll away under the topbar). Using calc(... * var)
 * on font-size keeps the layout/containing-blocks untouched. */
:root { --vp-fs: 1; }
body.font-scale-sm { --vp-fs: 0.92; }
body.font-scale-md { --vp-fs: 1.00; }
body.font-scale-lg { --vp-fs: 1.14; }
body.font-scale-xl { --vp-fs: 1.28; }

/* Apply the scale to common text selectors.
   Hardcoded px values on each rule are kept for backward visual consistency;
   only the calc-wrapper here multiplies by --vp-fs. */
body { font-size: calc(14px * var(--vp-fs)); }
.small,
p.small,
div.small,
span.small,
td.small,
li.small { font-size: calc(12px * var(--vp-fs)); }
.text-tertiary { /* often inline with .small, no override */ }

.data-table { font-size: calc(13px * var(--vp-fs)); }
.data-table thead th { font-size: calc(11px * var(--vp-fs)); }
.data-table tbody td { font-size: calc(13px * var(--vp-fs)); }

.chart-card__title { font-size: calc(15px * var(--vp-fs)); }
.chart-card__sub   { font-size: calc(12px * var(--vp-fs)); }

.tier-badge { font-size: calc(11px * var(--vp-fs)); }

.btn    { font-size: calc(13px * var(--vp-fs)); }
.btn-sm { font-size: calc(12px * var(--vp-fs)); }
.btn-lg { font-size: calc(14px * var(--vp-fs)); }

.vp-sidebar__link    { font-size: calc(13px * var(--vp-fs)); }
.vp-sidebar__heading { font-size: calc(10px * var(--vp-fs)); }
.vp-sidebar__user-name { font-size: calc(12px * var(--vp-fs)); }
.vp-sidebar__brand-name { font-size: calc(15px * var(--vp-fs)); }

.vp-topbar__breadcrumb { font-size: calc(13px * var(--vp-fs)); }

.vp-page-header__title { font-size: calc(22px * var(--vp-fs)); }
.vp-page-header__subtitle { font-size: calc(13px * var(--vp-fs)); }

.method-h2 { font-size: calc(22px * var(--vp-fs)); }
.method-h3 { font-size: calc(15px * var(--vp-fs)); }

.dash-section-heading { font-size: calc(13px * var(--vp-fs)); }
.alert { font-size: calc(13px * var(--vp-fs)); }
.kpi-tile__value { font-size: calc(28px * var(--vp-fs)); }
.kpi-tile__label { font-size: calc(12px * var(--vp-fs)); }
.dash-kpi__value { font-size: calc(28px * var(--vp-fs)); }
.dash-kpi__label { font-size: calc(11px * var(--vp-fs)); }
.dash-kpi__sub   { font-size: calc(11px * var(--vp-fs)); }

/* Main
 * NOTE: do NOT set `overflow` (any axis) here — `overflow: hidden|auto|scroll`
 * makes this element the scrolling container for descendant `position: sticky`,
 * which breaks the sticky thead in machine-list (it would only stick within
 * .vp-main's own scroll, but .vp-main never actually scrolls vertically). */
.vp-main {
  grid-area: main;
  padding: var(--space-8) var(--content-pad-x);
  background: var(--bg-canvas);
  /* Prevent horizontal overflow at the parent level (body) instead */
  min-width: 0;
}
.vp-main__container {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Auth layout */
body.layout-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-surface);
}

/* ---------- 4. Page header ---------- */
.vp-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.vp-page-header__title { font-size: 22px; font-weight: 600; margin: 0; }
.vp-page-header__subtitle { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.vp-page-header__actions { display: flex; gap: 8px; align-items: center; }

/* ---------- 5. KPI tiles ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.kpi-tile {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.kpi-tile__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.kpi-tile__value {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.kpi-tile__delta { margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.kpi-tile__delta.is-up { color: var(--success); }
.kpi-tile__delta.is-down { color: var(--danger); }

/* ---------- 6. Cards ---------- */
.card {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.card__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-4);
}
.card__title { font-size: 14px; font-weight: 600; margin: 0; }
.card__subtitle { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.card-section + .card-section { margin-top: var(--space-8); }

.section-heading {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

/* ---------- 7. Tier badge ---------- */
.tier-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  line-height: 1;
}
.tier-badge.tier-S { color: var(--tier-S); background: var(--tier-S-bg); border-color: var(--tier-S-border); }
.tier-badge.tier-A { color: var(--tier-A); background: var(--tier-A-bg); border-color: var(--tier-A-border); }
.tier-badge.tier-B { color: var(--tier-B); background: var(--tier-B-bg); border-color: var(--tier-B-border); }
.tier-badge.tier-C { color: var(--tier-C); background: var(--tier-C-bg); border-color: var(--tier-C-border); }
.tier-badge.tier-D { color: var(--tier-D); background: var(--tier-D-bg); border-color: var(--tier-D-border); }
.tier-badge.tier-empty,
.tier-badge.tier- { color: var(--text-tertiary); background: var(--bg-surface); }

.tier-badge--lg { min-width: 32px; height: 28px; font-size: 14px; padding: 0 10px; }

/* legacy alias for older templates */
.axis-tier-large {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 28px; padding: 0 10px;
  font-size: 14px; font-weight: 600;
  font-family: var(--font-mono);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.axis-tier-large.tier-S { color: var(--tier-S); background: var(--tier-S-bg); border-color: var(--tier-S-border); }
.axis-tier-large.tier-A { color: var(--tier-A); background: var(--tier-A-bg); border-color: var(--tier-A-border); }
.axis-tier-large.tier-B { color: var(--tier-B); background: var(--tier-B-bg); border-color: var(--tier-B-border); }
.axis-tier-large.tier-C { color: var(--tier-C); background: var(--tier-C-bg); border-color: var(--tier-C-border); }
.axis-tier-large.tier-D { color: var(--tier-D); background: var(--tier-D-bg); border-color: var(--tier-D-border); }
.axis-tier-large.tier-empty,
.axis-tier-large.tier- { color: var(--text-tertiary); background: var(--bg-surface); }

/* ---------- 8. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--brand-500);
  color: white;
  border: 1px solid var(--brand-500);
  border-radius: var(--radius);
  transition: background 150ms, border-color 150ms, color 150ms;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--brand-700); border-color: var(--brand-700); color: white; }
.btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { /* alias of .btn */ }

.btn-outline {
  background: var(--bg-canvas);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-outline:hover { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); }
.btn-outline[aria-current="page"] {
  background: var(--brand-500);
  color: white;
  border-color: var(--brand-500);
  box-shadow: 0 1px 2px rgba(30, 64, 175, 0.15);
}
.btn-outline[aria-current="page"]:hover {
  background: var(--brand-700);
  color: white;
  border-color: var(--brand-700);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-surface); color: var(--text-primary); border-color: transparent; }

.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 9px 18px; font-size: 14px; }
.btn svg { width: 14px; height: 14px; }

/* count badge inside button (compare cart 用) */
.btn #compare-count,
.btn .btn-count {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-size: 11px; font-weight: 600;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.22);
  margin-left: 4px;
}

/* disabled-style: primary を control 風に弱める */
.btn.btn-disabled {
  background: var(--bg-surface);
  color: var(--text-tertiary);
  border-color: var(--border-strong);
  cursor: not-allowed;
}
.btn.btn-disabled:hover {
  background: var(--bg-surface);
  color: var(--text-tertiary);
  border-color: var(--border-strong);
}
.btn.btn-disabled #compare-count,
.btn.btn-disabled .btn-count {
  background: var(--bg-surface-alt);
  color: var(--text-tertiary);
}

/* ---------- 9. Forms / filters ---------- */
.filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.filters select,
.filters input[type="text"],
.filters input[type="search"] {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-canvas);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color 150ms, box-shadow 150ms;
}
.filters input[type="text"] { min-width: 200px; }
.filters select:hover, .filters input:hover { border-color: var(--brand-300); }
.filters select:focus, .filters input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, .12);
}

/* ---------- 10. Tables ---------- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.data-table thead th {
  position: sticky;
  top: var(--topbar-height);   /* topbar (56px) の真下に張り付く */
  z-index: 2;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 1px 0 var(--border-default);
}
.data-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-md); }
.data-table thead tr:first-child th:last-child  { border-top-right-radius: var(--radius-md); }
.data-table tbody tr:last-child td:first-child  { border-bottom-left-radius: var(--radius-md); }
.data-table tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--radius-md); }
.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 100ms; }
.data-table tbody tr:hover { background: var(--bg-surface); }
.data-table .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.data-table .text-center { text-align: center; }
.data-table a:not(.btn) { color: var(--text-primary); font-weight: 500; }
.data-table a:not(.btn):hover { color: var(--brand-500); }
/* button color stays as .btn defines (white on navy primary) */
.data-table .btn { color: white; }
.data-table .btn:hover { color: white; }
.data-table .btn-outline,
.data-table .btn-ghost { color: var(--text-primary); }
.data-table .btn-outline:hover,
.data-table .btn-ghost:hover { color: var(--text-primary); }

/* legacy plain tables */
table:not(.data-table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table:not(.data-table) th,
table:not(.data-table) td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
table:not(.data-table) th {
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- 11. Pagination ---------- */
.pagination {
  display: flex; gap: 4px; align-items: center;
  margin-top: var(--space-4);
}
.pagination a, .pagination span {
  padding: 6px 11px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 150ms;
}
.pagination a:hover { background: var(--bg-surface); color: var(--text-primary); }
.pagination .current { background: var(--brand-500); color: white; font-weight: 600; }

/* ---------- 12. Alerts ---------- */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: 13px;
  border-left: 3px solid;
  margin-bottom: var(--space-4);
}
.alert-info     { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.alert-success  { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.alert-warning,
.alert-warn     { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.alert-error,
.alert-danger   { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

/* ---------- 13. Score hero (3-column on full HD) ---------- */
.score-hero {
  display: grid;
  grid-template-columns: minmax(320px, 1.0fr) minmax(280px, 0.9fr) minmax(360px, 1.3fr);
  gap: var(--space-6);
  margin: var(--space-4) 0;
  padding: var(--space-6);
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
@media (max-width: 1280px) {
  .score-hero {
    grid-template-columns: 1fr 1fr;
  }
  .score-hero__convergence {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-5);
    margin-top: var(--space-2);
  }
}
@media (max-width: 760px) {
  .score-hero { grid-template-columns: 1fr; }
  .score-hero__convergence { grid-column: 1; border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); }
}
.score-gauge-block { text-align: center; }
.score-gauge-svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.score-hero-readout { margin-top: -32px; }
.score-hero__convergence-title {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.score-hero-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin-bottom: 6px;
}
.score-label { margin-bottom: 4px; }

/* Tier probability bars */
.tier-prob-block { padding: var(--space-1) 0; }
.tier-prob-rows {
  margin-top: var(--space-2);
  display: flex; flex-direction: column; gap: 8px;
}
.tier-prob-row { display: flex; align-items: center; gap: 10px; }
.tier-prob-label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px;
  font-family: var(--font-mono);
  font-weight: 600; font-size: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.tier-prob-label.tier-S { color: var(--tier-S); background: var(--tier-S-bg); border-color: var(--tier-S-border); }
.tier-prob-label.tier-A { color: var(--tier-A); background: var(--tier-A-bg); border-color: var(--tier-A-border); }
.tier-prob-label.tier-B { color: var(--tier-B); background: var(--tier-B-bg); border-color: var(--tier-B-border); }
.tier-prob-label.tier-C { color: var(--tier-C); background: var(--tier-C-bg); border-color: var(--tier-C-border); }
.tier-prob-label.tier-D { color: var(--tier-D); background: var(--tier-D-bg); border-color: var(--tier-D-border); }
.tier-prob-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-surface-alt);
  border-radius: 4px;
  overflow: hidden;
}
.tier-prob-fill { height: 100%; transition: width 300ms ease; }
.tier-bg-S { background: var(--tier-S); }
.tier-bg-A { background: var(--tier-A); }
.tier-bg-B { background: var(--tier-B); }
.tier-bg-C { background: var(--tier-C); }
.tier-bg-D { background: var(--tier-D); }
.tier-prob-pct {
  min-width: 48px; text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---------- 14. Axis cards ---------- */
.axis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.axis-card {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.axis-card__title,
.axis-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.axis-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.0;
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.axis-sub {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
}

/* small gauge bar */
.gauge { margin-top: var(--space-2); }
.gauge-track {
  width: 100%;
  height: 6px;
  background: var(--bg-surface-alt);
  border-radius: 3px;
  overflow: hidden;
}
.gauge-fill {
  height: 100%;
  background: var(--brand-500);
  transition: width 300ms ease;
}
.gauge-fill.high { background: var(--success); }
.gauge-fill.mid  { background: var(--brand-500); }
.gauge-fill.low  { background: var(--text-tertiary); }

/* ---------- 15. Chart container ---------- */
.chart-container {
  position: relative;
  width: 100%;
  margin: var(--space-3) 0;
}
.chart-wide { max-width: 100%; }

/* Height variants (full-HD optimized) */
.chart-h-sm  { height: 220px; }
.chart-h-md  { height: 300px; }
.chart-h-lg  { height: 380px; }
.chart-h-xl  { height: 460px; }
.chart-square { aspect-ratio: 1 / 1; max-width: 480px; margin-left: auto; margin-right: auto; }

/* Side-by-side chart grids */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
  margin: var(--space-4) 0;
}
.chart-grid--asym {
  grid-template-columns: minmax(380px, 0.9fr) minmax(480px, 1.4fr);
}
.chart-grid--three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
  .chart-grid,
  .chart-grid--asym,
  .chart-grid--three { grid-template-columns: 1fr; }
}

.chart-card {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.chart-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.chart-card__sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

/* ---------- 16. Action / Recommendation card ---------- */
.action-card {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
.action-card__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: var(--brand-50);
  color: var(--brand-500);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.action-card__icon svg { width: 22px; height: 22px; }
.action-card__body { flex: 1; }
.action-card__label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.action-card__title {
  font-size: 18px; font-weight: 600; color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.action-card__reason { font-size: 14px; color: var(--text-primary); margin-bottom: 4px; }
.action-card__sub-reason { font-size: 12px; color: var(--text-secondary); }

/* ---------- 17. Utilities ---------- */
.text-muted { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-bold { font-weight: 600; }
.small { font-size: 12px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

.divider {
  height: 1px;
  background: var(--border-default);
  margin: var(--space-6) 0;
}

.commentary {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-left: 2px solid var(--border-strong);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin: var(--space-3) 0;
}
.commentary b { color: var(--text-primary); font-weight: 600; }

code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-surface);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-secondary);
}
.empty-state svg {
  width: 48px; height: 48px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}
.empty-state__title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }

/* ---------- 18. Auth ---------- */
.auth-card {
  width: 100%;
  max-width: 380px;
  padding: var(--space-8);
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   Dashboard premium styling (TOP page)
   ============================================================ */

/* セクションヘッダー (アクセントバー付き) */
.dash-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: var(--space-6) 0 var(--space-3);
}
.dash-section-heading::before {
  content: '';
  width: 3px;
  height: 16px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-700));
  border-radius: 2px;
}

/* methodology page: large semantic section headings */
.method-h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  /* generous top gap to clearly separate sections */
  margin: var(--space-12) 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--border-default);
}
/* first method-h2 after the TL;DR card needs slightly less top margin */
.chart-card + .method-h2 { margin-top: var(--space-10); }
.method-h2::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-700));
  border-radius: 2px;
}
.method-h2 svg {
  color: var(--brand-500);
  flex-shrink: 0;
}
.method-h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-5) 0 var(--space-3);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.method-h3 svg { color: var(--brand-500); flex-shrink: 0; }

/* ===== KPI ヒーロー (グラデ + ホバーリフト + アイコンバッジ) ===== */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 1280px) {
  .dash-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.dash-kpi {
  position: relative;
  background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  overflow: hidden;
}
.dash-kpi::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(30, 64, 175, 0.04), transparent 50%);
  pointer-events: none;
}
.dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  border-color: var(--brand-200);
}
.dash-kpi__icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-500);
  box-shadow: inset 0 0 0 1px rgba(30, 64, 175, 0.08);
}
.dash-kpi__icon svg { width: 18px; height: 18px; }
.dash-kpi__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  position: relative;
  z-index: 1;
}
.dash-kpi__value {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.0;
  position: relative;
  z-index: 1;
}
.dash-kpi__sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}

/* ===== AI インサイトカード (ダークグラデ + グロー) ===== */
.ai-insight {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 90% 10%, rgba(99, 102, 241, 0.22), transparent 70%),
    linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #1E3A8A 120%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: var(--space-6);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15), 0 1px 3px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.ai-insight::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 30%;
  height: 140%;
  background: radial-gradient(ellipse at center, rgba(91, 33, 182, 0.18), transparent 70%);
  pointer-events: none;
}
.ai-insight__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #818CF8, #4338CA);
  display: flex; align-items: center; justify-content: center;
  color: white;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}
.ai-insight__icon svg { width: 24px; height: 24px; }
.ai-insight__body {
  flex: 1;
  position: relative;
  z-index: 1;
}
.ai-insight__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.ai-insight__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.ai-insight__badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  background: rgba(129, 140, 248, 0.18);
  border: 1px solid rgba(129, 140, 248, 0.35);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #C7D2FE;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ai-insight__text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  /* white-space: pre-line; */
}
.ai-insight__text b { color: #FFFFFF; }

/* ===== スポットライトカード (業務注目 3 種、tier アクセント) ===== */
.spotlight-card {
  position: relative;
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: transform 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
}
.spotlight-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.spotlight-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--spotlight-accent, var(--brand-500));
}
.spotlight-card--gold {
  --spotlight-accent: linear-gradient(90deg, #B45309, #F59E0B 50%, #FCD34D);
}
.spotlight-card--gold .spotlight-card__icon {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
}
.spotlight-card--danger {
  --spotlight-accent: linear-gradient(90deg, #991B1B, #DC2626 50%, #F87171);
}
.spotlight-card--danger .spotlight-card__icon {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  color: #B91C1C;
}
.spotlight-card--brand {
  --spotlight-accent: linear-gradient(90deg, #1E40AF, #4F46E5 50%, #818CF8);
}
.spotlight-card--brand .spotlight-card__icon {
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-500);
}
.spotlight-card__head {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
  margin-bottom: 4px;
}
.spotlight-card__icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.spotlight-card__icon svg { width: 16px; height: 16px; }
.spotlight-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.spotlight-card__sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}
.spotlight-card__item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
}
.spotlight-card__item + .spotlight-card__item {
  border-top: 1px solid var(--border-subtle);
}
.spotlight-card__item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spotlight-card__item-sub {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ===== クイックアクセスタイル ===== */
.dash-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 1100px) { .dash-quick-grid { grid-template-columns: repeat(2, 1fr); } }

.quick-tile {
  display: block;
  padding: 18px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}
.quick-tile:hover {
  border-color: var(--brand-300);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
  color: inherit;
}
.quick-tile__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-500);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(30, 64, 175, 0.08);
}
.quick-tile__icon svg { width: 18px; height: 18px; }
.quick-tile__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.quick-tile__sub {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Top makers leaderboard #1 row highlight */
.data-table tr.rank-first td {
  background: linear-gradient(90deg, rgba(254, 249, 195, 0.45), rgba(254, 249, 195, 0.0) 60%);
}
.data-table tr.rank-first td:first-child {
  font-weight: 600;
}

/* Data freshness bar - premium */
.dash-freshness {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  margin-top: var(--space-6);
  background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-secondary);
}
.dash-freshness__icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: white;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.dash-freshness__icon svg { width: 14px; height: 14px; }

/* Tier distribution donut center text */
.donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.donut-center__num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}
.donut-center__label {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   Maker selector (compare page) — checkbox list + search + chips
   ============================================================ */
.maker-selector {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  overflow: hidden;
}
.maker-selector__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 18px;
  background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.maker-selector__title {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
}
.maker-selector__count {
  font-size: 12px;
  color: var(--text-secondary);
}
.maker-selector__count.is-max { color: var(--warning); font-weight: 600; }

.maker-selector__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 18px;
  min-height: 24px;
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-subtle);
}
.maker-selector__chips:empty::before {
  content: 'まだ選択されていません — 下から最大 5 社を選択';
  font-size: 12px;
  color: var(--text-tertiary);
}
.maker-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-700);
}
.maker-chip__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--brand-200);
  border: none;
  border-radius: 50%;
  color: var(--brand-700);
  cursor: pointer;
  padding: 0;
  transition: background 150ms;
}
.maker-chip__remove:hover { background: var(--brand-300); color: white; }
.maker-chip__remove svg { width: 10px; height: 10px; }

.maker-selector__search {
  padding: 12px 18px 8px;
  position: relative;
}
.maker-selector__search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--bg-canvas);
  transition: border-color 150ms, box-shadow 150ms;
}
.maker-selector__search input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, .12);
}
.maker-selector__search-icon {
  position: absolute;
  left: 30px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.maker-selector__list {
  max-height: 380px;
  overflow-y: auto;
  padding: 4px 8px 8px;
}
.maker-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 100ms;
}
.maker-option:hover { background: var(--bg-surface); }
.maker-option.is-disabled { opacity: 0.4; cursor: not-allowed; }
.maker-option.is-disabled:hover { background: transparent; }
.maker-option input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--brand-500);
  flex-shrink: 0;
}
.maker-option__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}
.maker-option.is-selected .maker-option__name { color: var(--brand-700); }
.maker-option__stats {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.maker-option__hidden { display: none !important; }

.maker-selector__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 18px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
}

/* Recent new releases table rank circle */
.rank-circle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-surface-alt);
  color: var(--text-secondary);
  border-radius: 50%;
}
.rank-circle--gold { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; }
.rank-circle--silver { background: linear-gradient(135deg, #F1F5F9, #E2E8F0); color: #475569; }
.rank-circle--bronze { background: linear-gradient(135deg, #FFEDD5, #FED7AA); color: #9A3412; }

/* ---------- Legacy compat ---------- */
.vp-header { display: none; }

/* ===== Binary badge (初動度 / 長期度 用) =====
 * 連続値由来の tier-badge と視覚的に区別するため、用途別に 3 種類のスタイル。
 *   .bi-badge  ← [案C 矢印型] 一覧テーブル等の密度高い箇所
 *   .bi-check  ← [案B アイコン型] お宝/失速カードなど業務判断のハイライト
 *   .bi-toggle ← [案D トグル型] 機種予測ページ 3 軸サマリのヒーロー領域
 */

/* --- 案 C: 矢印型バッジ(矢印 + ラベル) --- */
.bi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  font-size: calc(11px * var(--vp-fs));
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.3;
}
.bi-badge svg { flex-shrink: 0; }
.bi-badge--strong {
  background: #EEF4FF;
  color: var(--brand-500);
  border: 1.5px solid var(--brand-300);
}
.bi-badge--weak {
  background: #F1F5F9;
  color: #64748B;
  border: 1.5px solid #CBD5E1;
}
.bi-badge--none {
  display: inline-block;
  padding: 3px 10px;
  font-size: calc(11px * var(--vp-fs));
  font-weight: 600;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px dashed var(--border-default);
  border-radius: 999px;
}

/* --- 案 B: アイコン強調バッジ(チェック / マイナス) --- */
.bi-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px 3px 9px;
  font-size: calc(11px * var(--vp-fs));
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.3;
}
.bi-check svg { flex-shrink: 0; }
.bi-check--strong {
  background: #DCFCE7;
  color: #15803D;
  border: 1.5px solid #86EFAC;
}
.bi-check--weak {
  background: #F1F5F9;
  color: #64748B;
  border: 1.5px solid #CBD5E1;
}
.bi-check--none {
  display: inline-block;
  padding: 3px 10px;
  font-size: calc(11px * var(--vp-fs));
  color: var(--text-tertiary);
  background: transparent;
  border: 1px dashed var(--border-default);
  border-radius: 999px;
}

/* --- 案 D: トグル並列型(両ラベル表示、該当側ハイライト) --- */
.bi-toggle {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-surface);
  font-weight: 700;
  font-size: calc(12px * var(--vp-fs));
  letter-spacing: 0.04em;
  line-height: 1.2;
  user-select: none;
}
.bi-toggle > span {
  padding: 4px 14px;
  color: var(--text-tertiary);
  transition: background 120ms, color 120ms;
}
.bi-toggle > span.is-active {
  background: var(--brand-500);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15),
              inset 0 -1px 0 rgba(0,0,0,.1);
}
.bi-toggle--none { opacity: 0.5; }

/* ===== Weekly report week navigator ===== */
.vp-weeknav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-3) 0 var(--space-5);
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.vp-weeknav__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 120ms, border-color 120ms;
}
.vp-weeknav__btn:hover { background: var(--bg-surface-alt); border-color: var(--brand-500); color: var(--brand-500); }
.vp-weeknav__btn--disabled {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed;
}
.vp-weeknav__current {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.vp-weeknav__archive { position: relative; }
.vp-weeknav__archive summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.vp-weeknav__archive summary::-webkit-details-marker { display: none; }
.vp-weeknav__archive summary:hover { background: var(--bg-surface-alt); border-color: var(--brand-500); color: var(--brand-500); }
.vp-weeknav__archive-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
  z-index: 20;
}
.vp-weeknav__archive-list a {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.vp-weeknav__archive-list a:hover { background: var(--bg-surface); color: var(--brand-500); }
.vp-weeknav__archive-list a.is-current { background: var(--brand-50); color: var(--brand-500); font-weight: 600; }

/* ---------- Footer ---------- */
.vp-footer {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--content-pad-x) var(--space-4);
  text-align: center;
  font-size: calc(12px * var(--vp-fs));
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-subtle);
  letter-spacing: 0.01em;
}
.row-data-na td { color: var(--text-tertiary); font-style: italic; }
.meta {
  padding: var(--space-3);
  background: var(--bg-surface);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

/* ---------- Org switcher (SaaS Phase A) ---------- */
.vp-org-switcher {
  position: relative;
}
.vp-org-switcher__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.vp-org-switcher__button:hover { background: var(--bg-canvas); border-color: var(--border-strong); }
.vp-org-switcher--single {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 13px; color: var(--text-secondary);
}
.vp-org-switcher__menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 240px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
  list-style: none; margin: 0; padding: 4px 0;
  display: none;
  z-index: 100;
}
.vp-org-switcher__menu.is-open { display: block; }
.vp-org-switcher__menu li { padding: 0; }
.vp-org-switcher__menu form { margin: 0; }
.vp-org-switcher__menu button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 8px 12px;
  background: transparent; border: 0; cursor: pointer;
  text-align: left; font-size: 13px; color: var(--text-primary);
}
.vp-org-switcher__menu button:hover { background: var(--bg-surface); }
.vp-org-switcher__menu li.is-active button { background: var(--brand-50); color: var(--brand-500); font-weight: 600; }

/* ---------- User menu (sidebar footer, SaaS Phase B) ---------- */
.vp-sidebar__footer {
  position: relative;
}
.vp-user-menu__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background 150ms;
}
.vp-user-menu__trigger:hover,
.vp-user-menu__trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.06);
}
.vp-user-menu__trigger .vp-sidebar__user-avatar {
  flex-shrink: 0;
}
.vp-user-menu__trigger .vp-sidebar__user-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
}
.vp-user-menu__handle {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  margin-top: 1px;
}
.vp-user-menu__caret {
  color: rgba(255, 255, 255, 0.55);
  transition: transform 150ms;
  display: inline-flex;
}
.vp-user-menu__trigger[aria-expanded="true"] .vp-user-menu__caret {
  transform: rotate(180deg);
}

.vp-user-menu__dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px;
  right: 8px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
  padding: 4px 0;
  display: none;
  z-index: 200;
  color: var(--text-primary);
}
.vp-user-menu__dropdown.is-open { display: block; }

.vp-user-menu__header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}
.vp-user-menu__header-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.vp-user-menu__header-email {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  word-break: break-all;
}
.vp-user-menu__section-label {
  padding: 6px 14px 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vp-user-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.vp-user-menu__item:hover {
  background: var(--bg-surface);
}
.vp-user-menu__item.is-active {
  background: var(--brand-50);
  color: var(--brand-500);
  font-weight: 600;
}
.vp-user-menu__item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-tertiary);
}
.vp-user-menu__item.is-active svg { color: var(--brand-500); }
.vp-user-menu__item--danger { color: var(--danger); }
.vp-user-menu__item--danger svg { color: var(--danger); }
.vp-user-menu__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}
.vp-user-menu__logout-form {
  margin: 0;
}

/* ===== レート別分析ページ用 (SaaS Phase 2) ===== */

/* 選択レート表のハイライト */
.vp-rate-row {
  cursor: pointer;
  transition: background 100ms;
}
.vp-rate-row:hover {
  background: var(--bg-surface);
}
.vp-rate-row.is-selected {
  background: var(--brand-50);
  border-left: 3px solid var(--brand-500);
}
.vp-rate-row.is-total {
  cursor: not-allowed;
  background: var(--bg-surface-alt);
  font-weight: 600;
  color: var(--text-secondary);
}
.vp-rate-row.is-total:hover {
  background: var(--bg-surface-alt);
}

/* 平均データ表: 増減 diff の色付け */
.vp-diff-up   { color: var(--text-primary); font-weight: 500; }
.vp-diff-down { color: var(--danger); font-weight: 500; }
.vp-diff-zero { color: var(--text-tertiary); }

/* ヘッダの期間単位トグル */
.vp-period-toggle {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
  background: var(--bg-canvas);
}
.vp-period-toggle button {
  padding: 4px 12px;
  font-size: 12px;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text-secondary);
  cursor: pointer;
}
.vp-period-toggle button.is-active {
  background: var(--brand-500);
  color: white;
}
.vp-period-toggle button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 期間指定モーダル */
.vp-modal[hidden] { display: none; }
.vp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.vp-modal__body {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  padding: 24px;
  max-width: 480px;
  width: 90%;
}
.vp-modal__body h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}
.vp-modal__body form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vp-modal__body label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.vp-modal__body input[type="date"] {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
}
.vp-modal__body .vp-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* 平均データテーブル (3 列: 全体 / 4円 / 低貸) */
.vp-avg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vp-avg-table th, .vp-avg-table td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border-subtle);
}
.vp-avg-table th:first-child, .vp-avg-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text-secondary);
}
.vp-avg-table thead th {
  font-weight: 600;
  background: var(--bg-surface);
}

/* 期間表示バッジ (単日 or 期間) */
.vp-period-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--brand-50);
  color: var(--brand-500);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

/* ===== レート別分析: overflow ラッパ内テーブルの sticky 解除 ===== */
.vp-scroll-wrap {
  overflow-x: auto;
  overflow-y: visible;
  /* 横スクロールコンテナ内では sticky thead を無効化 */
}
.vp-scroll-wrap .data-table thead th {
  position: static;
  top: auto;
}

/* ===== ページネーション UI ===== */
.vp-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.vp-pagination__info {
  margin-right: var(--space-3);
  font-size: 12px;
  color: var(--text-tertiary);
}
.vp-pagination__link,
.vp-pagination__current,
.vp-pagination__disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-canvas);
  color: var(--text-primary);
  text-decoration: none;
}
.vp-pagination__link:hover {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}
.vp-pagination__current {
  background: var(--brand-500);
  color: white;
  border-color: var(--brand-500);
  font-weight: 600;
}
.vp-pagination__disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vp-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: var(--text-tertiary);
}

/* ===== レート別分析: 平均データカード(エディトリアル型) ===== */
.vp-avg-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px 20px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vp-avg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}
.vp-avg-card::after {
  /* 右上のアクセントライン */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-500));
  border-radius: 0 var(--radius-md) 0 0;
}

/* ラベル(左上、ドット付き) */
.vp-avg-card__label {
  position: relative;
  z-index: 2;
  font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vp-avg-card__label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--brand-500);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.10);
}

/* 背景に透かした巨大数字 */
.vp-avg-card__watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 128px;
  font-weight: 800;
  letter-spacing: -0.06em;
  color: rgba(30, 64, 175, 0.055);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ヒーロー(主指標 = アウト) */
.vp-avg-card__hero {
  position: relative;
  z-index: 2;
  margin: 20px 0 14px;
}
.vp-avg-card__hero-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.vp-avg-card__hero-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 38px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.vp-avg-card__hero-diff {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(30, 64, 175, 0.06);
}
.vp-avg-card__hero-diff.vp-diff-up   { background: rgba(15, 128, 61, 0.09);  color: #15803D; }
.vp-avg-card__hero-diff.vp-diff-down { background: rgba(220, 38, 38, 0.09);  color: #DC2626; }
.vp-avg-card__hero-diff.vp-diff-zero { background: rgba(148, 163, 184, 0.10); color: var(--text-tertiary); }

/* サブ指標(売上・粗利) */
.vp-avg-card__sub {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vp-avg-card__sub-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.vp-avg-card__sub-label {
  color: var(--text-tertiary);
  font-weight: 500;
}
.vp-avg-card__sub-value {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-weight: 500;
}
.vp-avg-card__sub-diff {
  min-width: 68px;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* 男女比バー */
.vp-avg-card__gender {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.vp-avg-card__gender-bar {
  flex: 1;
  height: 4px;
  margin: 0 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-500) 0%, var(--brand-500) var(--male-pct, 50%), #EC4899 var(--male-pct, 50%), #EC4899 100%);
}

/* ===== レート別分析: ランキング男女比セル(セル内スタックバー) ===== */
.vp-gender-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 70px;
}
.vp-gender-cell__bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-surface-alt);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04);
}
.vp-gender-cell__male   { background: #1E40AF; }
.vp-gender-cell__female { background: #EC4899; }
.vp-gender-cell__labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.vp-gender-cell__labels .m { color: #1E40AF; }
.vp-gender-cell__labels .f { color: #EC4899; }
.vp-gender-cell__labels .sep { color: var(--text-tertiary); font-weight: 400; }

/* ===== レート別分析: 平均データカード クリック可能状態 ===== */
.vp-avg-card.is-selectable {
  cursor: pointer;
}
.vp-avg-card.is-selectable:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(30, 64, 175, .14);
  border-color: rgba(30, 64, 175, .30);
}
.vp-avg-card.is-selectable:hover::after {
  width: 100%;
  transition: width 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vp-avg-card.is-selectable:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
}

/* アクティブ(選択中)状態 */
.vp-avg-card.is-active {
  border: 2px solid var(--brand-500);
  padding: 21px 23px 19px;   /* border 増分を吸収して要素サイズ維持 */
  background: linear-gradient(135deg, #FFFFFF 0%, #EEF2FF 100%);
  box-shadow: 0 12px 28px rgba(30, 64, 175, .18);
}
.vp-avg-card.is-active::after {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-500), #6366F1);
}
.vp-avg-card.is-active .vp-avg-card__watermark {
  color: rgba(30, 64, 175, 0.11);   /* 少し濃くして "生きている" 感 */
}
.vp-avg-card.is-active .vp-avg-card__hero-value {
  color: var(--brand-500);          /* 主指標をブランドカラーに */
}
.vp-avg-card.is-active .vp-avg-card__label::before {
  background: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.20),
              0 0 12px 2px rgba(30, 64, 175, 0.35);
  animation: vp-avg-pulse 2s ease-in-out infinite;
}
@keyframes vp-avg-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.20), 0 0 12px 2px rgba(30, 64, 175, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(30, 64, 175, 0.10), 0 0 16px 4px rgba(30, 64, 175, 0.20); }
}

/* 選択中バッジ / CTA */
.vp-avg-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 8px;
  font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: white;
  background: var(--brand-500);
  border-radius: 999px;
  text-transform: uppercase;
}
.vp-avg-card__cta {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 200ms;
}
.vp-avg-card.is-selectable:hover .vp-avg-card__cta {
  opacity: 1;
  color: var(--brand-500);
}
@media (prefers-reduced-motion: reduce) {
  .vp-avg-card.is-active .vp-avg-card__label::before { animation: none; }
  .vp-avg-card.is-selectable:hover { transform: none; }
}

/* ===== レート別分析: 客内訳表の選択行 強化 ===== */
.vp-rate-row.is-selected {
  background: linear-gradient(90deg, var(--brand-50) 0%, rgba(238, 242, 255, 0.6) 100%);
  border-left: 4px solid var(--brand-500);
  box-shadow: inset 0 0 0 1px rgba(30, 64, 175, .15);
  font-weight: 600;
}
.vp-rate-row.is-selected td {
  color: var(--text-primary);
}
.vp-rate-row.is-selected td:first-child {
  color: var(--brand-500);
}
.vp-rate-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-right: 6px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: var(--brand-500);
  border-radius: 50%;
  vertical-align: middle;
  line-height: 1;
}


/* ============================================================
 * 業界トレンド widget(dashboard 用)
 * ============================================================ */
.vp-trend-widget {
  margin: 24px 0;
  padding: 20px 22px 18px;
  background: #ffffff;
  border: 1px solid #e6e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(31,43,87,0.03);
}
.vp-trend-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.vp-trend-widget__eyebrow {
  color: #1f2b57;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 4px;
}
.vp-trend-widget__title {
  font-size: 16px;
  font-weight: 700;
  color: #0d1435;
  margin: 0;
}
.vp-trend-widget__more {
  color: #1f2b57;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 120ms;
}
.vp-trend-widget__more:hover { background: #eef1f9; }

.vp-trend-widget__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vp-trend-widget__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.vp-trend-widget__item + .vp-trend-widget__item {
  border-top: 1px dashed #edeff5;
  padding-top: 10px;
}
.vp-trend-widget__tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  flex-shrink: 0;
}
.vp-trend-widget__tag--news_rss   { background: #eef2ff; color: #4338ca; }
.vp-trend-widget__tag--x_search   { background: #f1f5f9; color: #0f172a; }
.vp-trend-widget__tag--comment_db { background: #ecfdf5; color: #065f46; }

.vp-trend-widget__link,
.vp-trend-widget__text {
  color: #1a1f36;
  font-size: 13px;
  line-height: 1.55;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.vp-trend-widget__link:hover {
  color: #1f2b57;
  text-decoration: underline;
  text-decoration-color: #b8c5eb;
  text-underline-offset: 2px;
}
.vp-trend-widget__foot {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed #dde3f4;
  font-size: 11px;
  color: #9ba1b8;
  text-align: right;
  letter-spacing: 0.02em;
}

/* コメント急増 ratio 表示 */
.vp-comment-surge__ratio {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 700;
  color: #dc2626;
  background: #fee2e2; padding: 2px 8px; border-radius: 4px;
  flex-shrink: 0;
}


/* ============================================================
 * 台データページ(templates/insights/dai.html)
 * ============================================================ */
.vp-section-note {
  font-weight: normal;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 12px;
}

/* A1 指標カード(レート別分析の平均データカードと同じ部品を使う) */
.vp-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1280px) { .vp-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .vp-kpi-row { grid-template-columns: 1fr; } }

.vp-avg-card--kpi { min-height: 268px; padding: 20px 22px 18px; }
.vp-avg-card--kpi .vp-avg-card__watermark { font-size: 104px; }
.vp-avg-card--kpi .vp-avg-card__hero { margin: 16px 0 12px; }
.vp-avg-card--kpi .vp-avg-card__hero-value { font-size: 34px; }
.vp-avg-card__hero-unit {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 4px;
}
.vp-avg-card__note {
  position: relative;
  z-index: 2;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: -6px;
}
.vp-avg-card__sub-row.is-selected .vp-avg-card__sub-label {
  color: var(--brand-500);
  font-weight: 700;
}
.vp-avg-card__sub-row.is-selected .vp-avg-card__sub-value { font-weight: 700; }

/* A2 推移: 5 指標の小グラフ */
.vp-trend-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1400px) { .vp-trend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .vp-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .vp-trend-grid { grid-template-columns: 1fr; } }
.vp-trend-grid .chart-card { padding: var(--space-4); }
.vp-trend-chart { height: 150px; }

/* 推移カード: 最新値 + 前期比 */
.vp-trend-card { display: flex; flex-direction: column; }
.vp-trend-card .chart-card__title { margin-bottom: 2px; }
.vp-trend-card__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 8px;
}
.vp-trend-card__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.vp-trend-card__unit { font-size: 11px; color: var(--text-tertiary); }
.vp-trend-card__diff {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .12);
  margin-left: auto;
}
.vp-trend-card__diff.vp-diff-up   { background: rgba(15, 128, 61, .10);  color: #15803D; }
.vp-trend-card__diff.vp-diff-down { background: rgba(220, 38, 38, .10);  color: #DC2626; }

.vp-legend-inline {
  display: inline-flex;
  gap: 14px;
  margin-left: 12px;
  font-size: 12px;
  font-weight: normal;
  color: var(--text-secondary);
}
.vp-legend-inline[hidden] { display: none; }
.vp-legend-inline > span { display: inline-flex; align-items: center; gap: 6px; }
.vp-legend-inline__key {
  display: inline-block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
}
.vp-legend-inline__key--s1 { background: #2a78d6; }
.vp-legend-inline__key--s2 { background: #eb6834; }

/* グラフの表表示(折りたたみ) */
.vp-table-view { margin-top: var(--space-3); font-size: 12px; }
.vp-table-view summary {
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px 0;
}
.vp-table-view .data-table { font-size: 12px; font-variant-numeric: tabular-nums; }

/* A3 散布図 */
.vp-scatter-chart { height: 440px; }
.vp-quadrant-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 900px) { .vp-quadrant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vp-quadrant-chip {
  position: relative;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 12px 10px 16px;
  overflow: hidden;
}
.vp-quadrant-chip::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--brand-500);
  opacity: .85;
}
.vp-quadrant-chip--draw::before   { opacity: .6; }
.vp-quadrant-chip--profit::before { opacity: .4; }
.vp-quadrant-chip--review::before { background: var(--border-strong); opacity: 1; }
.vp-quadrant-chip__label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.vp-quadrant-chip__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-left: 8px;
}
.vp-quadrant-chip__count::after { content: ' 機種'; font-size: 10px; font-weight: 500; color: var(--text-tertiary); }
.vp-quadrant-chip__hint { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text-tertiary); }

/* A4 / A5 */
.vp-mini-title { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.vp-mini-chart { height: 130px; }
.vp-change-table { font-size: 12px; margin-top: var(--space-3); }
.vp-change-table td { vertical-align: middle; }
.vp-change-table td.num {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.vp-change-table__name { font-weight: 500; }
.vp-change-table__meta { font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; }
.vp-change-table__from { color: var(--text-tertiary); }
.vp-change-table__arrow { color: var(--text-tertiary); margin: 0 2px; }

/* 順位バッジ */
.vp-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--bg-surface-alt);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.vp-rank-badge.is-top { background: rgba(30, 64, 175, .10); color: var(--brand-500); }

/* 増減率のピル */
.vp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .12);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
}
.vp-pill.vp-diff-up   { background: rgba(15, 128, 61, .10);  color: #15803D; }
.vp-pill.vp-diff-down { background: rgba(220, 38, 38, .10);  color: #DC2626; }

/* ページヘッダのレートバッジ */
.vp-period-badge--rate { margin-left: 6px; }

/* 台データ: 機種の軌跡モーダル */
.vp-modal__body--wide {
  max-width: 920px;
  width: 94%;
  max-height: 92vh;
  overflow-y: auto;
}
.vp-traj__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.vp-traj__title { margin: 0 0 4px; }
.vp-modal__body h3.vp-traj__title { margin-bottom: 4px; }
.vp-traj__sub { font-size: 12px; color: var(--text-secondary); }
.vp-traj__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0 8px;
}
.vp-traj__ramp i {
  display: inline-block;
  width: 64px;
  height: 8px;
  border-radius: 4px;
  vertical-align: middle;
  background: linear-gradient(90deg, #86b6ef, #2a78d6, #0d366b);
}
.vp-traj__ramp-label { font-size: 11px; color: var(--text-tertiary); }
.vp-traj__status { font-size: 12px; color: var(--text-secondary); min-height: 0; }
.vp-traj__status:not(:empty) { padding: 6px 0; }
.vp-traj__chart { height: 400px; transition: opacity .15s; }
.vp-traj__chart.is-loading { opacity: .45; }
.vp-traj__note { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }
.vp-traj__table { max-height: 260px; overflow-y: auto; }

/* 切替トグル内のリンク(メーカー / グループ の切替など) */
.vp-period-toggle a {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.vp-period-toggle a:hover { background: var(--bg-surface-alt); color: var(--text-primary); }
.vp-period-toggle a.is-active,
.vp-period-toggle a.is-active:hover { background: var(--brand-500); color: #FFFFFF; }

/* ============================================================
 * 機種予測ページ: 暫定バッジ / 予測の「入力 → 対象」表示
 * ============================================================ */
.vp-provisional {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warning-bg, #FEF3C7);
  color: #92400E;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.axis-note {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* 補足のヘルプアイコン(カーソルを乗せると説明) */
.vp-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-left: 2px;
  border-radius: 50%;
  color: var(--text-tertiary);
  font-size: 11px;
  cursor: help;
}
.vp-help:hover, .vp-help:focus-visible { color: var(--brand-500); }

/* ============================================================
   レポート一覧 (/reports/) — 種別が増えても同じ体裁で並ぶカード
   ============================================================ */
.vp-reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
}
.vp-report-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--space-5);
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
a.vp-report-card:hover, a.vp-report-card:focus-visible {
  border-color: rgba(30, 64, 175, .28);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
  outline: none;
}
.vp-report-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: #EEF4FF;
  color: var(--brand-500);
}
.vp-report-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.vp-report-card__title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; line-height: 1.3;
}
.vp-report-card__mt,
.vp-report-card__badge {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--bg-surface-alt); color: var(--text-secondary);
}
.vp-report-card__badge { background: #FFEDD5; color: #C2410C; }
.vp-report-card__desc { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.vp-report-card__meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-tertiary);
}
.vp-report-card__meta .vp-svg-icon { vertical-align: -2px; }
.vp-report-card__go { color: var(--text-tertiary); flex-shrink: 0; align-self: center; }
a.vp-report-card:hover .vp-report-card__go { color: var(--brand-500); }
.vp-report-card.is-planned { background: var(--bg-surface); box-shadow: none; }
.vp-report-card.is-planned .vp-report-card__icon { background: var(--bg-surface-alt); color: var(--text-tertiary); }
.vp-report-card.is-planned .vp-report-card__title { color: var(--text-secondary); }
/* レポートカード: プラン制限によるロック表示 */
.vp-report-card.is-locked { background: var(--bg-surface); box-shadow: none; }
.vp-report-card.is-locked .vp-report-card__icon { background: var(--bg-surface-alt); color: var(--text-tertiary); }
.vp-report-card.is-locked .vp-report-card__title { color: var(--text-secondary); }
.vp-report-card__badge--lock { background: #EEF4FF; color: var(--brand-500); }

/* レポート詳細: payload.facts の確定値テーブル */
.vp-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.vp-fact-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.vp-fact-table th {
  text-align: left; font-weight: 500; color: var(--text-secondary);
  text-transform: none; letter-spacing: normal; background: transparent;
  /* グローバルの `table:not(.data-table) th { font-size: 11px }` を打ち消す(同詳細度 + 後方) */
  font-size: inherit;
  padding: 5px 8px 5px 0; white-space: nowrap;
  border-bottom: 1px solid var(--bg-surface-alt);
}
.vp-fact-table td {
  text-align: right; padding: 5px 0; color: var(--text-primary); font-weight: 600;
  border-bottom: 1px solid var(--bg-surface-alt);
}
.vp-fact-table tr:last-child th, .vp-fact-table tr:last-child td { border-bottom: none; }

/* レポート一覧: 種別チップと無効トグル */
.vp-report-type-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-surface-alt); color: var(--text-secondary);
  font-size: 11px; white-space: nowrap;
}
.vp-report-type-chip .vp-svg-icon { opacity: .7; }
.vp-period-toggle__disabled {
  display: inline-flex; align-items: center; padding: 4px 12px;
  font-size: 12px; color: var(--text-tertiary); white-space: nowrap; cursor: not-allowed;
}

/* ============================================================
   レポート詳細(/reports/<type>/<scope>/)の可読性
   - LLM 本文は 1 行 40〜45 文字・行間 1.95 で読みやすさを優先
   - 確定値テーブルと明細テーブルは本文より 1 段小さいが 13.5px 以上を確保
   ============================================================ */
.vp-report-detail .vp-llm-body {
  font-size: calc(15.5px * var(--vp-fs));
  line-height: 1.95;
  color: var(--text-primary);
  max-width: 46em;
}
.vp-report-detail .vp-llm-body h2 { font-size: calc(17.5px * var(--vp-fs)); margin: 24px 0 10px; }
.vp-report-detail .vp-llm-body h3 {
  font-size: calc(16px * var(--vp-fs));
  font-weight: 600;
  margin: 26px 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--brand-500);
  line-height: 1.5;
}
.vp-report-detail .vp-llm-body h2:first-child, .vp-report-detail .vp-llm-body h3:first-child { margin-top: 0; }
.vp-report-detail .vp-llm-body p { margin: 0 0 14px; }
.vp-report-detail .vp-llm-body ul, .vp-report-detail .vp-llm-body ol { margin: 8px 0 14px; padding-left: 24px; }
.vp-report-detail .vp-llm-body li { margin-bottom: 7px; }
.vp-report-detail .vp-llm-body b, .vp-report-detail .vp-llm-body strong { color: var(--brand-500); font-weight: 600; }
.vp-report-detail .vp-llm-body hr { border: none; border-top: 1px solid var(--border-default); margin: 20px 0; }

.vp-report-detail .vp-fact-grid { gap: var(--space-5); margin-bottom: var(--space-6); }
.vp-report-detail .vp-fact-table { font-size: calc(13.5px * var(--vp-fs)); }
.vp-report-detail .vp-fact-table th,
.vp-report-detail .vp-fact-table td {
  font-size: calc(13.5px * var(--vp-fs));
  padding: 8px 0;
  line-height: 1.6;
}
.vp-report-detail .vp-fact-table th { padding-right: 12px; }
.vp-report-detail .chart-card__title { font-size: calc(14px * var(--vp-fs)); margin-bottom: 4px; }

.vp-report-detail .data-table,
.vp-report-detail .data-table tbody td { font-size: calc(13.5px * var(--vp-fs)); }
.vp-report-detail .data-table thead th { font-size: calc(12px * var(--vp-fs)); }
.vp-report-detail .data-table tbody td { padding-top: 10px; padding-bottom: 10px; }
.vp-report-detail .data-table .small { font-size: calc(12.5px * var(--vp-fs)); }

/* 日本語ラベルに uppercase + 広い字間は読みにくいので、このページでは素の表記にする */
.vp-report-detail .kpi-tile__label {
  font-size: calc(12.5px * var(--vp-fs));
  text-transform: none;
  letter-spacing: 0.01em;
}
.vp-report-detail .kpi-tile__value {
  font-family: var(--font-sans);
  font-size: calc(24px * var(--vp-fs));
}
.vp-report-detail h2 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.vp-report-detail .commentary { font-size: calc(13.5px * var(--vp-fs)); line-height: 1.8; }
/* レポート詳細の KPI タイル: 5 枚でも 1 行に収める(折り返して 1 枚だけ余るのを防ぐ) */
.vp-report-detail .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .vp-report-detail .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .vp-report-detail .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* レポート詳細: 解説(左) + 確定値(右)の 2 カラム
   本文を 45 字前後に保ちながら、右側の余白に数値を置いて視線移動を減らす */
.vp-report-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr);
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-6);
}
.vp-report-cols__main > * + * { margin-top: var(--space-4); }
.vp-report-cols__side > * + * { margin-top: var(--space-3); }
.vp-fact-grid--stack { grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: 0; }
@media (max-width: 1150px) {
  .vp-report-cols { grid-template-columns: 1fr; }
  .vp-fact-grid--stack { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
}
/* 2 カラム内では本文の最大幅制限は不要(カラム幅が既に読みやすい) */
.vp-report-cols .vp-llm-body { max-width: none; }
/* 確定値パネルが無い種別は 1 カラム。 本文は読みやすい行長で左寄せのまま伸ばす */
.vp-report-cols--single { grid-template-columns: minmax(0, 1fr); }
.vp-report-cols--single .vp-llm-body { max-width: 54em; }
/* レポート一覧: 種別 × 機種ごとの最新号 */
.vp-report-latest {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; background: #EEF4FF; color: var(--brand-500);
  font-size: 10.5px; font-weight: 600; vertical-align: 1px;
}

/* レポート明細: 注目すべき数値の色分け */
.vp-report-detail .vp-num--up   { color: var(--brand-500); font-weight: 600; }
.vp-report-detail .vp-num--down { color: var(--danger);    font-weight: 600; }
.vp-report-detail .vp-num--none { color: var(--text-tertiary); }

/* 判定の根拠(長文なので指標テーブルから分離) */
.vp-reason-box {
  margin: var(--space-3) 0 var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.vp-reason-box > summary {
  padding: 10px var(--space-4);
  font-size: calc(12.5px * var(--vp-fs));
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}
.vp-reason-box > summary::-webkit-details-marker { display: none; }
.vp-reason-box > summary::before { content: '▾ '; color: var(--text-tertiary); }
.vp-reason-box:not([open]) > summary::before { content: '▸ '; }
table.vp-reason-table { width: 100%; border-collapse: collapse; }
table.vp-reason-table th {
  width: 30%; text-align: left; vertical-align: top; font-weight: 500;
  /* グローバルの table:not(.data-table) th(uppercase)を打ち消す。
     機種名が「e牙狼」→「E牙狼」と化けるため */
  text-transform: none; letter-spacing: normal; background: transparent;
  font-size: calc(12.5px * var(--vp-fs)); color: var(--text-primary);
  padding: 8px var(--space-4); border-top: 1px solid var(--border-default);
}
table.vp-reason-table td {
  font-size: calc(12.5px * var(--vp-fs)); line-height: 1.7; color: var(--text-secondary);
  padding: 8px var(--space-4) 8px 0; border-top: 1px solid var(--border-default);
}
/* レポート一覧: 冒頭の抜粋(余った幅を使う。 2 行で省略)
   clamp は内側の span に掛ける。 td 自体を -webkit-box にすると
   テーブルセルのレイアウトが崩れて 3 行目が中途半端に見えてしまう */
.vp-report-excerpt {
  font-size: calc(12.5px * var(--vp-fs));
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 460px;
}
.vp-report-excerpt > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.3em;
}

/* レポート種別のチップ色。 色は insights/report_catalog.py の chip で決まる */
.vp-report-type-chip--blue   { background: #EEF4FF; color: #1E40AF; }
.vp-report-type-chip--green  { background: #DCFCE7; color: #15803D; }
.vp-report-type-chip--purple { background: #EDE9FE; color: #5B21B6; }
.vp-report-type-chip--amber  { background: #FEF9C3; color: #A16207; }
.vp-report-type-chip--slate  { background: var(--bg-surface-alt); color: var(--text-secondary); }
.vp-report-type-chip--blue .vp-svg-icon,
.vp-report-type-chip--green .vp-svg-icon,
.vp-report-type-chip--purple .vp-svg-icon,
.vp-report-type-chip--amber .vp-svg-icon { opacity: .85; }

/* 詳細ページの種別バッジ(同じ色相を濃く) */
a.vp-report-type-chip--solid { text-decoration: none; padding: 4px 10px; font-weight: 600; }
a.vp-report-type-chip--solid.vp-report-type-chip--blue   { background: #1E40AF; color: #fff; }
a.vp-report-type-chip--solid.vp-report-type-chip--green  { background: #15803D; color: #fff; }
a.vp-report-type-chip--solid.vp-report-type-chip--purple { background: #5B21B6; color: #fff; }
a.vp-report-type-chip--solid.vp-report-type-chip--amber  { background: #A16207; color: #fff; }
a.vp-report-type-chip--solid .vp-svg-icon { opacity: 1; }
a.vp-report-type-chip--solid:hover { filter: brightness(1.12); }