:root {
  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Typo */
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px;
  --text-xl: 24px; --text-2xl: 30px; --text-3xl: 40px;

  /* Neutrals (Light) */
  --gray-50: #f8f9fb;
  --gray-100: #f1f3f6;
  --gray-200: #e3e6eb;
  --gray-400: #9aa3b2;
  --gray-600: #6b7280;
  --gray-800: #2b3444;
  --gray-900: #1a2233;

  /* Primary */
  --blue-50: #eaf2fb;
  --blue-100: #d7e6f7;
  --blue-600: #0b5cab;
  --blue-700: #094a89;

  /* Semantic */
  --up-50: #e7f6ee;
  --up-700: #147d4b;
  --down-50: #fbeaea;
  --down-700: #b3261e;

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

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, .08);

  /* Aliases used throughout (Light default) */
  --bg: var(--gray-50);
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --border: var(--gray-200);
  --text: var(--gray-900);
  --text-dim: var(--gray-600);
  --accent: var(--blue-600);
  --accent-soft: var(--blue-50);
  --up: var(--up-700);
  --up-soft: var(--up-50);
  --down: var(--down-700);
  --down-soft: var(--down-50);
  --flat: var(--gray-600);
  --radius: var(--radius-md);
}

/* Dark Theme */
[data-theme="dark"] {
  --gray-50: #1a2130;
  --gray-100: #202a3d;
  --gray-200: #2a3446;
  --gray-400: #6b7690;
  --gray-600: #97a2b8;
  --gray-900: #e8ecf3;

  --blue-50: rgba(76, 154, 235, 0.12);
  --blue-100: #1c3a5c;
  --blue-600: #4c9aeb;
  --blue-700: #7fbcf5;

  --up-50: rgba(52, 211, 153, 0.14);
  --up-700: #34d399;
  --down-50: rgba(248, 113, 113, 0.14);
  --down-700: #f87171;

  --bg: #0b0f18;
  --bg-elevated: #11151f;
  --card: #141a26;
  --border: #232b3d;
  --text: #e8ecf3;
  --text-dim: #97a2b8;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  transition: background-color .15s, color .15s;
}

a { color: inherit; text-decoration: none; }

/* Accessibility: sichtbarer Fokusring auf allen interaktiven Elementen */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--accent);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: #21252b;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: #ffffff;
  font-family: "Consolas", "SF Mono", monospace;
  justify-self: start;
}

.brand-mark {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-links-center {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-links-center a {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
  font-weight: 500;
}
.nav-links-center a:hover, .nav-links-center a:focus-visible { color: #ffffff; }

.nav-links-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-links-right a {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
  font-weight: 500;
}
.nav-links-right a:hover, .nav-links-right a:focus-visible { color: #ffffff; }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 0;
}
.theme-toggle:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: inline-block; }
[data-theme="dark"] .icon-moon { display: none; }

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-8);
}

.page-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-1);
  letter-spacing: -0.01em;
}

.page-subtitle {
  color: var(--text-dim);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

/* Hero (Landing) */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-7) 0 var(--space-6);
  flex-wrap: wrap;
}
.hero-text { flex: 1 1 420px; }
.hero-eyebrow {
  font-family: "Consolas", "SF Mono", monospace;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.hero-text h1 {
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
}
.hero-text h1 .accent-text { color: var(--accent); }
.hero-lead {
  color: var(--text-dim);
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 560px;
  margin-bottom: var(--space-5);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.hero-as-of { color: var(--text-dim); font-size: var(--text-sm); }
.hero-art { flex: 1 1 280px; max-width: 360px; }

.section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: var(--space-7) 0 var(--space-4);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color .15s, transform .15s;
}
.feature-card:hover, .feature-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.feature-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.feature-title { font-weight: 600; font-size: var(--text-base); color: var(--text); }
.feature-desc { color: var(--text-dim); font-size: var(--text-sm); line-height: 1.5; }

.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.section-title-row .section-title { margin-bottom: 0; }

.news-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.news-preview-head .section-title { margin-bottom: 0; }
.news-preview-all { font-size: var(--text-sm); font-weight: 600; color: var(--accent); white-space: nowrap; }
.news-preview-all:hover { text-decoration: underline; }

/* Roadmap-Teaser (Startseite) */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.roadmap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.roadmap-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.all-markets-preview { margin-bottom: var(--space-7); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.news-grid-compact { margin-bottom: var(--space-7); }

.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color .15s, transform .15s;
}
.news-card:hover, .news-card:focus-within { border-color: var(--accent); transform: translateY(-2px); }

.news-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-dim);
}
.news-source { font-weight: 600; color: var(--accent); }
.news-date::before { content: "·"; margin-right: var(--space-2); color: var(--text-dim); }

.news-title { font-size: var(--text-base); font-weight: 600; line-height: 1.4; margin: 0; }
.news-title a { color: var(--text); }
.news-title a:hover { color: var(--accent); }

.news-summary { color: var(--text-dim); font-size: var(--text-sm); line-height: 1.5; margin: 0; }
.news-link { font-size: var(--text-sm); font-weight: 600; color: var(--accent); margin-top: auto; }
.news-link:hover { text-decoration: underline; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.step { display: flex; gap: var(--space-3); align-items: flex-start; }
.step-num {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-sm);
}
.step-title { font-weight: 600; margin-bottom: 2px; }
.step-desc { color: var(--text-dim); font-size: var(--text-sm); line-height: 1.5; }

/* Tabs */
.tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
  min-width: max-content;
}

.tab-btn {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-btn .as-of {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-left: var(--space-1);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.section-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.section-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--gray-50);
}
.section-name-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.section-actions { display: flex; gap: var(--space-1); }
.section-btn {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  transition: transform .15s;
}
.section-btn:hover { border-color: var(--accent); color: var(--accent); }
.section-block.is-minimized .section-minimize { transform: rotate(-90deg); }
.section-block.is-minimized .section-body { display: none; }
.section-block.is-hidden { display: none; }
.section-block.search-no-match { display: none; }
.section-block.search-no-match { display: none; }

.hidden-sections-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--accent-soft);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--blue-700);
}

table.price-table {
  width: 100%;
  border-collapse: collapse;
}
table.price-table td {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border);
}
table.price-table tr:last-child td { border-bottom: none; }
table.price-table tr:hover td { background: var(--gray-50); }

.price-table .col-product {
  color: var(--text);
  word-break: break-word;
}
.price-table .col-product a:hover,
.price-table .col-product a:focus-visible { color: var(--accent); text-decoration: underline; }

.price-table .col-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  width: 140px;
}
.price-table .col-value .unit {
  font-weight: 400;
  color: var(--text-dim);
  font-size: var(--text-xs);
  margin-left: 3px;
}

.price-table .col-change {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 110px;
}

.chg-pill {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 5px;
  font-size: var(--text-sm);
  font-weight: 600;
}
.chg-pill.up { color: var(--up); background: var(--up-soft); }
.chg-pill.down { color: var(--down); background: var(--down-soft); }
.chg-pill.flat { color: var(--flat); background: var(--gray-100); }

.empty-state {
  color: var(--text-dim);
  font-size: var(--text-sm);
  padding: var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.empty-state strong { color: var(--text); font-size: var(--text-base); display: block; margin-bottom: var(--space-1); }
.empty-state p { margin: 0; }

.error-page {
  max-width: 480px;
  margin: var(--space-8) auto;
  text-align: center;
}
.error-page .btn { margin-top: var(--space-4); }

/* Produkt-Detailseite */
.breadcrumb {
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin-bottom: var(--space-4);
}
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--accent); text-decoration: underline; }

.product-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}
.product-header h1 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-1);
  word-break: break-word;
}
.product-header .meta {
  font-size: var(--text-sm);
  color: var(--text-dim);
}
.product-header .current-price {
  text-align: right;
}
.product-header .current-price .value {
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.product-header .current-price .unit {
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-weight: 400;
}

.info-box {
  background: var(--accent-soft);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--blue-700);
  margin-bottom: var(--space-5);
}

.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.chart-card h2 { font-size: var(--text-base); margin: 0 0 var(--space-4); }

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.stat-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.stat-box .label { font-size: var(--text-xs); color: var(--text-dim); margin-bottom: var(--space-1); }
.stat-box .value { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Admin */
.auth-card {
  max-width: 380px;
  margin: var(--space-8) auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
}
.auth-card h1 { font-size: var(--text-lg); margin-bottom: var(--space-5); }
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--text-sm); color: var(--text-dim); margin-bottom: var(--space-1); }
.field input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: var(--text-base);
}
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}
.btn:hover { background: var(--blue-700); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
  display: inline-block;
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.success-msg {
  color: var(--up);
  background: var(--up-soft);
  border: 1px solid var(--up);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.auth-hint { font-size: var(--text-xs); color: var(--text-dim); margin-top: var(--space-4); }

/* Kundenbereich & Admin-Benutzerverwaltung */
.settings-card, .auth-card.wide {
  max-width: 480px;
  margin: 0 0 var(--space-5);
}
.auth-card h2 { font-size: var(--text-base); margin: 0 0 var(--space-4); }

.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-right: var(--space-1);
}
.badge-active { color: var(--up); background: var(--up-soft); }
.badge-locked { color: var(--down); background: var(--down-soft); }
.badge-inactive { color: var(--text-dim); background: var(--gray-100); }

.user-search {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-5);
}
.user-search input {
  flex: 1;
  max-width: 320px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: var(--text-sm);
}

.admin-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.markets-toolbar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.markets-toolbar input, .markets-toolbar select {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: var(--text-sm);
}
.markets-toolbar input { flex: 1; min-width: 200px; }
.markets-table th {
  text-align: left;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.markets-table th:hover { color: var(--accent); }

/* Dashboard-Layout mit Sidebar (Admin + Kundenbereich) */
.dashboard-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}
.dashboard-sidebar {
  flex: none;
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: calc(64px + var(--space-6));
}
.dashboard-sidebar a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: var(--text-sm);
  font-weight: 500;
}
.dashboard-sidebar a:hover, .dashboard-sidebar a:focus-visible {
  background: var(--gray-100);
  color: var(--text);
}
.dashboard-sidebar a.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.dashboard-sidebar-spacer { flex: 1; min-height: var(--space-4); }
.dashboard-content { flex: 1; min-width: 0; }

@media (max-width: 800px) {
  .dashboard-layout { flex-direction: column; }
  .dashboard-sidebar {
    position: static;
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-4);
  }
  .dashboard-sidebar-spacer { display: none; }
  .dashboard-sidebar a { white-space: nowrap; }
}

/* Buttons als Aktions-Header */
.page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.page-actions .page-title, .page-actions .page-title + .page-subtitle { margin-bottom: 0; }

.col-watch { width: 40px; text-align: center; }
.watch-form { display: inline-block; }
.watch-btn {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
}
.watch-btn:hover { border-color: var(--accent); color: var(--accent); }
.watch-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.watch-hint { font-size: var(--text-sm); }
.watch-meta { display: block; font-size: var(--text-xs); color: var(--text-dim); }
.error-msg { color: var(--down); font-size: var(--text-sm); margin-bottom: var(--space-4); }

.badge-market { color: var(--accent); background: var(--accent-soft); }

.watch-list { display: flex; flex-direction: column; gap: var(--space-3); }
.watch-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.watch-row-main { flex: 1; min-width: 0; }
.watch-product-name {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: 2px;
  word-break: break-word;
}
.watch-product-name a { color: var(--text); }
.watch-product-name a:hover { color: var(--accent); }
.watch-sparkline { flex: none; }
.watch-price { flex: none; text-align: right; }
.watch-price-value { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.watch-price-value .unit { font-size: var(--text-xs); font-weight: 400; color: var(--text-dim); margin-left: 3px; }

@media (max-width: 640px) {
  .watch-row { flex-wrap: wrap; }
  .watch-price { text-align: left; }
}

.upload-box {
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

table.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table.log-table th, table.log-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
table.log-table th { color: var(--text); font-weight: 600; background: var(--gray-50); }
.status-ok { color: var(--up); }
.status-error { color: var(--down); }

.result-list { margin-bottom: var(--space-5); }
.result-item {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  background: var(--card);
}

footer.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--text-xs);
  padding: var(--space-6) 0;
}
footer.site-footer a:hover, footer.site-footer a:focus-visible { color: var(--accent); text-decoration: underline; }

/* Responsive */
@media (max-width: 640px) {
  .topbar { padding: var(--space-3) var(--space-4); }
  main { padding: var(--space-4) var(--space-4) var(--space-7); }
  .page-title { font-size: var(--text-lg); }
  .hero { padding: var(--space-5) 0; }
  .hero-text h1 { font-size: var(--text-2xl); }
  .hero-art { display: none; }
  .steps { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .product-header { flex-direction: column; }
  .product-header .current-price { text-align: left; }
  table.price-table td { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
  .price-table .col-value { width: auto; }
}

/* ── Disclaimer ─────────────────────────────────────────────────────── */
.disclaimer-banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--accent-soft);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: 1.55;
}
.disclaimer-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent);
}

.disclaimer-table-note {
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.7;
  padding: var(--space-1) var(--space-3) var(--space-2);
  font-style: italic;
  line-height: 1.45;
  border-top: 1px solid var(--border);
}