:root {
  color-scheme: dark;
  font-family: "DM Sans", "Noto Sans TC", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --page: #0b1120;
  --surface: #111a2b;
  --surface-raised: #151f32;
  --surface-hover: #1b2940;
  --border: #25334a;
  --text: #eef3fb;
  --muted: #91a0b7;
  --subtle: #65748b;
  --accent: #6de0bd;
  --accent-strong: #38cba1;
  --purple: #a795ff;
  --blue: #77b9ff;
  --orange: #ffc27c;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(ellipse at 75% -20%, rgb(75 91 153 / 18%), transparent 48rem),
    var(--page);
  color: var(--text);
}

button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.page-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.topbar { height: 76px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgb(145 160 183 / 12%); }
.brand { display: inline-flex; gap: 11px; align-items: center; text-decoration: none; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #76efcb, #37bb9a); color: #09251e; font-weight: 800; font-size: 19px; }
.brand-name { font-size: 14px; letter-spacing: .12em; font-weight: 700; }
.brand-name span { color: var(--accent); margin-left: 5px; }
.topbar-meta { display: flex; align-items: center; gap: 20px; }
.live-indicator { color: #b6c4d6; display: flex; align-items: center; gap: 9px; font-size: 12px; }
.live-indicator > span { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px rgb(109 224 189 / 65%); }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; transition: .2s ease; }
.icon-button:hover { border-color: var(--accent); color: var(--accent); transform: rotate(-15deg); }
.icon-button svg, .button svg, .hero-aside svg, .search-box svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.hero { min-height: 260px; display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 46px 8px 48px; }
.eyebrow { margin: 0 0 10px; color: var(--accent); font: 700 10px/1.3 "DM Sans", sans-serif; letter-spacing: .16em; }
.hero h1 { margin: 0; font-size: clamp(32px, 5vw, 48px); line-height: 1.25; letter-spacing: -.045em; }
.hero h1 span { color: #92a4bc; margin-left: 12px; font-weight: 500; }
.hero-description { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.hero-aside { min-width: 190px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: rgb(17 26 43 / 65%); }
.source-label, .updated-at { display: block; color: var(--subtle); font-size: 11px; }
.hero-aside a { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 12px; font-size: 13px; font-weight: 600; text-decoration: none; }
.hero-aside a:hover { color: var(--accent); }
.hero-aside svg { width: 14px; height: 14px; }

.browser-card { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, rgb(17 26 43 / 98%), rgb(14 22 37 / 98%)); box-shadow: 0 24px 70px rgb(0 0 0 / 19%); }
.vehicle-tabs { display: flex; gap: 8px; padding: 12px 20px 0; border-bottom: 1px solid var(--border); }
.vehicle-tab { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 15px 18px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 600; }
.vehicle-tab::after { position: absolute; right: 14px; bottom: -1px; left: 14px; height: 2px; content: ""; background: transparent; }
.vehicle-tab[aria-selected="true"] { color: var(--text); }
.vehicle-tab[aria-selected="true"]::after { background: var(--accent); box-shadow: 0 -3px 12px rgb(109 224 189 / 24%); }
.tab-icon { color: var(--accent); font-size: 16px; }
.panel-content { padding: 28px 28px 22px; }
.section-heading, .list-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-heading h2, .list-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.download-actions { display: flex; gap: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 39px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 600; transition: .18s ease; }
.button[hidden] { display: none; }
.button svg { width: 15px; height: 15px; }
.button:disabled { opacity: .42; cursor: not-allowed; }
.button-secondary { background: var(--surface-raised); color: #c4cfdf; }
.button-secondary:not(:disabled):hover { border-color: #60748f; background: var(--surface-hover); }
.button-primary { border-color: transparent; background: var(--accent); color: #09261f; }
.button-primary:not(:disabled):hover { background: #8af0d2; box-shadow: 0 5px 20px rgb(109 224 189 / 16%); }

.stats-table-wrap { margin: 20px 0 38px; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.stats-table { width: 100%; min-width: 360px; table-layout: fixed; }
.stats-table thead { background: #151f31; }
.stats-table th, .stats-table td { padding: 15px 17px; text-align: center; }
.stats-table thead th { color: #aab8cd; font-size: 14px; }
.stats-table tbody th { border-top: 1px solid rgb(37 51 74 / 70%); color: #c4cfdf; font-size: 16px; font-weight: 600; }
.stats-table tbody td { border-top: 1px solid rgb(37 51 74 / 70%); color: var(--text); font: 700 20px "DM Sans", "Noto Sans TC", sans-serif; font-variant-numeric: tabular-nums; }
.stats-table tr[data-tone="light"] th { color: var(--accent); }
.stats-table tr[data-tone="heavy"] th { color: var(--purple); }
.stats-table tr[data-tone="combined"] th { color: var(--blue); }

.list-heading { align-items: flex-end; }
.list-heading h2 { display: flex; align-items: center; gap: 10px; }
.result-count { padding: 3px 8px; border-radius: 20px; background: #1c2a3e; color: #9eacc1; font: 600 11px "DM Sans", sans-serif; }
.search-box { display: flex; align-items: center; gap: 9px; width: min(300px, 46%); min-height: 39px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; background: #0d1626; color: var(--subtle); }
.search-box:focus-within { border-color: #527b79; box-shadow: 0 0 0 3px rgb(109 224 189 / 7%); }
.search-box svg { width: 16px; height: 16px; flex: 0 0 auto; }
.search-box input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.search-box input::placeholder { color: #718099; }
.list-filters { display: flex; gap: 7px; margin: 18px 0 13px; }
.filter-chip { min-height: 31px; padding: 0 11px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.filter-chip span { margin-left: 3px; color: var(--subtle); font-size: 10px; }
.filter-chip[aria-pressed="true"] { border-color: #315449; background: rgb(109 224 189 / 8%); color: var(--accent); }
.table-wrap { min-height: 220px; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.vehicle-table { width: 100%; border-collapse: collapse; text-align: left; }
.vehicle-table thead { background: #151f31; }
.vehicle-table th { padding: 12px 15px; color: #7f8da3; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.vehicle-table td { padding: 12px 15px; border-top: 1px solid rgb(37 51 74 / 70%); color: #bdc9d9; font-size: 12px; }
.vehicle-table tbody tr { transition: background .15s ease; }
.vehicle-table tbody tr:hover { background: rgb(27 41 64 / 60%); }
.vehicle-table td:nth-child(2) { color: var(--text); font-weight: 600; }
.vehicle-table td:last-child { color: #9cabc0; font: 500 11px "DM Sans", sans-serif; white-space: nowrap; }
.type-badge { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid rgb(109 224 189 / 18%); border-radius: 6px; background: rgb(109 224 189 / 7%); color: var(--accent); font-size: 10px; white-space: nowrap; }
.type-badge.heavy { border-color: rgb(167 149 255 / 22%); background: rgb(167 149 255 / 8%); color: #baaaff; }
.empty-state { min-height: 220px; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.empty-state:not([hidden]) { display: flex; }
.empty-state > span { margin-bottom: 8px; color: var(--subtle); font-size: 28px; }
.empty-state strong { color: #c4cfdf; font-size: 13px; }
.empty-state p { margin: 6px 0 0; font-size: 11px; }
.table-footer { display: flex; justify-content: space-between; align-items: center; padding: 13px 2px 0; color: var(--subtle); font-size: 10px; }
.pagination { display: flex; align-items: center; gap: 12px; color: #aab7ca; }
.page-button { width: 27px; height: 27px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); color: #c6d1e0; cursor: pointer; font-size: 19px; line-height: 1; }
.page-button:disabled { opacity: .35; cursor: not-allowed; }
.sync-banner { display: flex; align-items: center; gap: 11px; margin: 18px 28px 0; padding: 11px 13px; border: 1px solid rgb(109 224 189 / 20%); border-radius: 10px; background: rgb(109 224 189 / 6%); color: #a8e8d5; font-size: 12px; }
.sync-banner[hidden] { display: none; }
.spinner { width: 14px; height: 14px; border: 2px solid rgb(109 224 189 / 26%); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
footer { display: flex; justify-content: space-between; padding: 22px 4px 30px; color: #647289; font-size: 10px; }
footer span:first-child { letter-spacing: .1em; }

@media (max-width: 700px) {
  .page-shell { width: min(100% - 28px, 560px); }
  .topbar { height: 64px; }
  .live-indicator { font-size: 0; }
  .live-indicator > span { width: 8px; height: 8px; }
  .topbar-meta { gap: 12px; }
  .hero { min-height: 0; align-items: flex-start; flex-direction: column; gap: 20px; padding: 36px 2px 27px; }
  .hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .hero h1 span { margin-left: 7px; }
  .hero-description { max-width: 330px; font-size: 12px; line-height: 1.7; }
  .hero-aside { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; width: 100%; padding: 11px 13px; }
  .hero-aside a { margin: 0; }
  .updated-at { grid-column: 2; margin-top: 3px; }
  .browser-card { border-radius: 15px; }
  .vehicle-tabs { padding: 8px 10px 0; }
  .vehicle-tab { flex: 1; justify-content: center; padding: 13px 8px; }
  .panel-content { padding: 23px 15px 17px; }
  .section-heading { align-items: flex-start; }
  .section-heading h2, .list-heading h2 { font-size: 18px; }
  .download-actions { gap: 6px; }
  .button { min-height: 36px; gap: 5px; padding: 0 9px; font-size: 10px; }
  .button svg { width: 13px; height: 13px; }
  .stats-table-wrap { margin: 17px 0 31px; }
  .stats-table { min-width: 0; }
  .stats-table th, .stats-table td { padding: 14px 8px; }
  .stats-table thead th { font-size: 12px; }
  .stats-table tbody th { font-size: 13px; }
  .stats-table tbody td { font-size: 17px; }
  .list-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .search-box { width: 100%; }
  .list-filters { margin-top: 14px; }
  .vehicle-table th, .vehicle-table td { padding: 11px 9px; }
  .vehicle-table th { font-size: 9px; }
  .vehicle-table td { font-size: 11px; }
  .type-badge { padding: 4px 6px; font-size: 9px; }
  .sync-banner { margin: 12px 15px 0; font-size: 11px; }
  footer { gap: 12px; font-size: 9px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 28px; }
  .hero h1 span { margin-left: 4px; }
  .button { padding: 0 7px; }
}