/* ==========================================================================
   天津千弘电动车 — UI 现代化样式 (Design Spec v1.0)
   全面重写：海军蓝 + 科技青 + 暖琥珀，工业可信 · 现代 B2B
   所有原有类名保留，仅重写皮肤。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   1. 设计令牌 (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Brand — 深海军蓝 */
  --brand-900: #0A1A2F;
  --brand-800: #0F2542;
  --brand-700: #143A63;
  --brand-600: #1E4976;
  --brand-500: #1F6FEB;
  --brand-400: #4D90F0;
  --brand-300: #8AB4F8;
  --brand-100: #E8F0FE;
  --brand-50:  #F4F8FF;

  /* Accent — 科技青 */
  --cyan-500: #06B6D4;
  --cyan-400: #22D3EE;
  --cyan-100: #CFFAFE;

  /* Warm — 琥珀 */
  --amber-500: #F59E0B;
  --amber-400: #FBBF24;
  --amber-100: #FEF3C7;

  /* Neutral — Slate 冷工业灰 */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* Semantic */
  --success-500: #16A34A;
  --success-100: #DCFCE7;
  --danger-500:  #DC2626;
  --danger-600:  #B91C1C;
  --danger-100:  #FEE2E2;
  --warning-500: #D97706;
  --warning-100: #FEF3C7;
  --info-500:    #0EA5E9;
  --info-100:    #E0F2FE;

  /* Surface */
  --bg:            #F8FAFC;
  --bg-gradient:   linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%);
  --surface:       #FFFFFF;
  --surface-alt:   #F1F5F9;
  --surface-elev:  #FFFFFF;
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;
  --text:          #0F172A;
  --text-sec:      #334155;
  --text-muted:    #64748B;
  --text-inverse:  #FFFFFF;
  --text-on-brand: #FFFFFF;
  --ring:          rgba(31,111,235,.35);

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Roboto", "Helvetica Neue",
               Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;
  --font-display: var(--font-sans);

  --text-display: 3.25rem;
  --text-h1: 2.25rem;
  --text-h2: 1.75rem;
  --text-h3: 1.25rem;
  --text-lg: 1.0625rem;
  --text-base: 0.9375rem;
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;
  --text-2xs: 0.75rem;

  /* Spacing — 4px grid */
  --space-0:  0;
  --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;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --r-none: 0;
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* Elevation — 冷 slate 阴影，工业内敛 */
  --shadow-rest:  0 1px 2px rgba(15,23,42,.04),
                  0 1px 3px rgba(15,23,42,.06);
  --shadow-hov:   0 8px 24px rgba(15,23,42,.08),
                  0 2px 8px rgba(15,23,42,.04);
  --shadow-float: 0 16px 40px rgba(15,23,42,.16),
                  0 4px 12px rgba(15,23,42,.08);
  --shadow-hero:  0 20px 48px rgba(14,37,66,.18),
                  0 4px 16px rgba(14,37,66,.10);
  --shadow-focus: 0 0 0 4px var(--ring);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* Layout */
  --header-h: 68px;
  --content-max: 1280px;

  /* ---- Legacy aliases — keep old variable names working with new values ---- */
  --accent:        var(--brand-500);
  --accent-strong: var(--brand-600);
  --accent-weak:   var(--brand-100);
  --card:          var(--surface);
  --line:          var(--border);
  --muted:         var(--text-muted);
  --gold:          var(--amber-400);
  --price:         var(--danger-600);
  --price-weak:    var(--danger-100);
  --stock-yes:     var(--success-500);
  --stock-yes-weak:var(--success-100);
  --stock-no:      var(--slate-500);
  --stock-no-weak: var(--slate-100);
}

@media (max-width: 760px) {
  :root { --header-h: 56px; }
}

/* --------------------------------------------------------------------------
   2. Dark Mode — [data-theme="dark"]
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg:            #0B1220;
  --bg-gradient:   linear-gradient(180deg, #0B1220 0%, #0F1A2E 100%);
  --surface:       #131C2E;
  --surface-alt:   #1A2438;
  --surface-elev:  #1E2A42;
  --border:        #243049;
  --border-strong: #334155;
  --text:          #E5ECF5;
  --text-sec:      #B8C3D3;
  --text-muted:    #8896AB;
  --text-inverse:  #0F172A;
  --text-on-brand: #FFFFFF;
  --ring:          rgba(77,144,240,.45);
  --brand-500:     #4D90F0;
  --brand-100:     rgba(77,144,240,.18);
  --brand-50:      rgba(77,144,240,.08);
  --brand-400:     #6BA6F5;
  --brand-300:     #8AB4F8;
  --cyan-400:      #38E0F2;
  --cyan-500:      #22D3EE;
  --shadow-rest:   0 1px 2px rgba(0,0,0,.4);
  --shadow-hov:    0 12px 28px rgba(0,0,0,.5);
  --shadow-float:  0 20px 48px rgba(0,0,0,.6);
  --shadow-hero:   0 16px 40px rgba(0,0,0,.55);
  --slate-50:      #0F1A2E;
  --slate-100:     #1A2438;
  --slate-200:     #243049;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0B1220;
    --bg-gradient:   linear-gradient(180deg, #0B1220 0%, #0F1A2E 100%);
    --surface:       #131C2E;
    --surface-alt:   #1A2438;
    --surface-elev:  #1E2A42;
    --border:        #243049;
    --border-strong: #334155;
    --text:          #E5ECF5;
    --text-sec:      #B8C3D3;
    --text-muted:    #8896AB;
    --ring:          rgba(77,144,240,.45);
    --brand-500:     #4D90F0;
    --brand-100:     rgba(77,144,240,.18);
    --brand-50:      rgba(77,144,240,.08);
    --shadow-rest:   0 1px 2px rgba(0,0,0,.4);
    --shadow-hov:    0 12px 28px rgba(0,0,0,.5);
    --shadow-float:  0 20px 48px rgba(0,0,0,.6);
    --shadow-hero:   0 16px 40px rgba(0,0,0,.55);
    --slate-50:      #0F1A2E;
    --slate-100:     #1A2438;
    --slate-200:     #243049;
  }
}

/* --------------------------------------------------------------------------
   3. Base / Reset
   -------------------------------------------------------------------------- */
/* 背景渐变铺满视口；用 min-height 不让 body 高度锁死（否则 sticky 冻结范围被限制在视口高度内） */
html, body { min-height: 100%; }

/* 防横向溢出：overflow-x: clip 优先（不破坏 sticky），回退 hidden */
body { overflow-x: hidden; }
html, body { overflow-x: clip; }
main, .detail, .company, .admin-wrap { min-width: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg-gradient);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 等宽数字 — 价格、统计、参数 */
.hero-stat b,
.price-range .from,
.pc-price,
.qs-value,
.fc-value,
.raw-price {
  font-feature-settings: "tnum" 1, "cv11" 1;
}

::placeholder { color: var(--slate-400); opacity: 1; }

/* 选中文字 */
::selection { background: var(--brand-100); color: var(--brand-800); }

/* 标题层级 */
h1, .h1 {
  font: 800 var(--text-h1)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text);
}
h2, .h2 {
  font: 700 var(--text-h2)/1.25 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text);
}
h3, .h3 {
  font: 700 var(--text-h3)/1.3 var(--font-sans);
  color: var(--text);
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }

p { max-width: 68ch; }

/* 内联线性图标基类 */
.ico {
  width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.15em; flex: 0 0 auto;
}

.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   4. Header / 顶部导航
   -------------------------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-h);
  padding: 0 var(--space-8);
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur-base) var(--ease-in-out),
              background var(--dur-base) var(--ease-in-out);
}
header.scrolled { box-shadow: var(--shadow-rest); }

.brand {
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 0;
}
.brand h1 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; color: var(--text);
}
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--brand-600), var(--cyan-500));
  color: #fff; font-weight: 800; font-size: 18px;
  text-decoration: none; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(31,111,235,.30);
}
.brand-logo:hover { transform: none; }

.stats {
  color: var(--text-muted); font-size: var(--text-2xs);
  white-space: nowrap; font-weight: 500;
}

.actions {
  display: flex; gap: var(--space-2); flex: 1;
  max-width: 560px; justify-content: flex-end; align-items: center;
}

#search {
  flex: 1; min-width: 200px;
  height: 40px; padding: 0 var(--space-4);
  font-size: var(--text-sm); font-family: var(--font-sans);
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--slate-100); color: var(--text);
  outline: none;
  transition: background var(--dur-fast) var(--ease-in-out),
              border-color var(--dur-fast) var(--ease-in-out),
              box-shadow var(--dur-fast) var(--ease-in-out);
}
#search:hover { background: var(--slate-50); border-color: var(--border); }
#search:focus {
  background: var(--surface);
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
}

/* 管理后台深色 Header */
body.admin-page header,
body.admin header,
body:has(.admin-wrap) header {
  background: var(--slate-900);
  color: #fff;
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.admin-page .brand h1,
body.admin .brand h1,
body:has(.admin-wrap) .brand h1,
body.admin-page .stats,
body.admin .stats,
body:has(.admin-wrap) .stats { color: #fff; }
body.admin-page #search,
body.admin #search,
body:has(.admin-wrap) #search {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}
body.admin-page #search::placeholder,
body.admin #search::placeholder,
body:has(.admin-wrap) #search::placeholder { color: rgba(255,255,255,.50); }
body.admin-page #search:focus,
body.admin #search:focus,
body:has(.admin-wrap) #search:focus {
  background: rgba(255,255,255,.16);
  border-color: var(--brand-400);
}
body.admin-page .btn-ghost,
body.admin .btn-ghost,
body:has(.admin-wrap) .btn-ghost {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.14);
}
body.admin-page .btn-ghost:hover,
body.admin .btn-ghost:hover,
body:has(.admin-wrap) .btn-ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
}

/* 暗色模式 Header */
[data-theme="dark"] header {
  background: rgba(19,28,46,.72);
  border-bottom-color: var(--border);
}
[data-theme="dark"] #search {
  background: rgba(255,255,255,.06);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] #search:hover { background: rgba(255,255,255,.10); }

/* --------------------------------------------------------------------------
   5. Buttons & Controls
   -------------------------------------------------------------------------- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 40px; padding: 0 var(--space-5);
  border: none; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-in-out),
              box-shadow var(--dur-fast) var(--ease-in-out),
              border-color var(--dur-fast) var(--ease-in-out);
  box-shadow: 0 4px 12px rgba(31,111,235,.20);
}
button:hover, .btn:hover {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  box-shadow: 0 6px 16px rgba(31,111,235,.28);
}
button:active, .btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(31,111,235,.20); }
button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
button:disabled:hover { transform: none; }

.btn-lg { height: 44px; padding: 0 var(--space-6); font-size: var(--text-base); }

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--slate-100);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow-rest);
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger-500), var(--danger-600));
  box-shadow: 0 4px 12px rgba(220,38,38,.22);
}
.btn-danger:hover {
  background: linear-gradient(135deg, var(--danger-600), #991B1B);
  box-shadow: 0 6px 16px rgba(220,38,38,.30);
}

.btn-edit { /* inherits .btn primary */ }

/* 语言 select 复用按钮外观（v2 修复：显式背景/文字/边框，避免白底白字）
   根因：v1 用背景图自绘白色 chevron 会整层覆盖 .btn 的品牌渐变，且 .btn 白字命中，
   导致白字白边+透明底 = 白底白字。必须显式声明 background-color + color。 */
select.btn {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding-right: 36px;
  /* 深色 chevron（对浅底可见） */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--slate-500) 50%),
    linear-gradient(135deg, var(--slate-500) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
select.btn:hover { border-color: var(--slate-400); }
select.btn:focus-visible { box-shadow: var(--shadow-focus); }
select.btn option { color: var(--text); background: var(--surface); }

/* 管理后台深色 header 变体 */
body.admin select.btn,
body.admin-page select.btn {
  background-color: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.14);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%);
}
body.admin select.btn option,
body.admin-page select.btn option { color: var(--text); background: var(--surface); }

/* 暗色主题变体 */
[data-theme="dark"] select.btn {
  background-color: rgba(255,255,255,.08);
  color: #fff;
  border-color: var(--border);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.8) 50%),
    linear-gradient(135deg, rgba(255,255,255,.8) 50%, transparent 50%);
}

/* 返回链接 */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 var(--space-5);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--brand-600);
  border: 1px solid var(--border);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-rest);
  transition: all var(--dur-base) var(--ease-out);
}
.back-link:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hov);
}
.back-link:active { transform: translateY(0); }
.back-link.centered { display: flex; justify-content: center; margin: 0 auto; width: max-content; }
.detail-back .back-link { height: 36px; padding: 0 var(--space-4); font-size: var(--text-xs); }

/* 表格行内小按钮 */
.mini-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px;
  font-size: var(--text-xs); font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-sec);
  border-radius: var(--r-xs);
  cursor: pointer; line-height: 1.4;
  transition: all var(--dur-fast) var(--ease-in-out);
}
.mini-btn:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-600);
}
.mini-btn:disabled { opacity: .35; cursor: not-allowed; }

.del-btn { color: var(--danger-600); }
.del-btn:hover {
  border-color: var(--danger-500);
  background: var(--danger-100);
  color: var(--danger-600);
}

/* 统一 Focus ring */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
button:focus-visible,
.btn:focus-visible,
.back-link:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
.mini-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* --------------------------------------------------------------------------
   6. Inputs
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  height: 40px; padding: 0 14px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-in-out),
              box-shadow var(--dur-fast) var(--ease-in-out);
}
input:hover, textarea:hover, select:hover { border-color: var(--slate-400); }
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
}
input:disabled, textarea:disabled, select:disabled {
  background: var(--slate-100); color: var(--text-muted); cursor: not-allowed;
}
textarea { height: auto; padding: 10px 14px; line-height: 1.6; resize: vertical; }

/* --------------------------------------------------------------------------
   7. Layout / 全宽容器（v2：去掉 .layout 侧栏，改为全宽 + .container）
   -------------------------------------------------------------------------- */
main {
  width: 100%;
  padding: 0;
  overflow-y: visible;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   8. Header 水平导航
   -------------------------------------------------------------------------- */
.nav-bar {
  display: flex; align-items: center; gap: var(--space-2);
  margin-inline: auto;
}
.nav-link {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-sec); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out);
  white-space: nowrap;
}
.nav-link:hover { background: var(--slate-100); color: var(--brand-600); }
.nav-link.active {
  color: var(--brand-600);
  background: var(--brand-50);
  box-shadow: inset 0 -2px 0 var(--brand-500);
}

/* Sticky top: Hero + 分类胶囊条冻结在顶端 */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 45;
}

/* --------------------------------------------------------------------------
   9. 水平分类胶囊条（替代侧栏）
   -------------------------------------------------------------------------- */
.cat-pills {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  background: var(--surface);
}
@media (min-width: 1024px) {
  .cat-pills {
    padding-inline: clamp(16px, 4vw, 48px);
  }
}
.cat-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-sec);
  font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-in-out);
  text-decoration: none;
}
.cat-pill .pill-ico { color: var(--text-muted); }
.cat-pill .pill-count {
  font-size: var(--text-2xs); font-weight: 700;
  color: var(--text-muted);
  background: var(--slate-100);
  padding: 1px 8px; border-radius: var(--r-pill);
}
.cat-pill:hover {
  border-color: var(--brand-400);
  color: var(--brand-600);
}
.cat-pill.active {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(31,111,235,.28);
}
.cat-pill.active .pill-ico { color: #fff; }
.cat-pill.active .pill-count {
  background: rgba(255,255,255,.22); color: #fff;
}
.cat-block { scroll-margin-top: calc(var(--header-h) + 240px); }

.data-root { font-size: 11px; color: var(--muted); word-break: break-all; line-height: 1.5; }
.last-sync { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* --------------------------------------------------------------------------
   9b. 工厂优势区块（Why Choose Us）
   -------------------------------------------------------------------------- */
.why-us {
  background: var(--surface-alt);
  padding-block: var(--space-12);
  margin-bottom: var(--space-8);
}
.section-heading {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-h2); font-weight: 800;
  margin-bottom: var(--space-6);
  color: var(--text);
}
.section-heading .sh-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--brand-100), var(--cyan-100));
  color: var(--brand-600);
  font-size: 20px;
}
.section-heading .sh-sub {
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}
.why-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-500);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-rest);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hov);
  border-top-color: var(--cyan-500);
}
.why-card .wc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-100); color: var(--brand-600);
  font-size: 22px; margin-bottom: var(--space-3);
}
.why-card h3 { font-size: 17px; font-weight: 700; margin-bottom: var(--space-1); color: var(--text); }
.why-card p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; }

/* --------------------------------------------------------------------------
   9c. Main content area
   -------------------------------------------------------------------------- */

.search-bar {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); color: var(--slate-600);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-rest);
}
.search-bar mark {
  background: var(--brand-100); color: var(--brand-700);
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
}

/* 分类标题 */
.cat-heading {
  font-size: var(--text-h2); font-weight: 700;
  margin: var(--space-8) 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--brand-100);
  display: flex; align-items: baseline; gap: var(--space-3);
  letter-spacing: -0.01em;
}
.cat-heading:first-child { margin-top: 0; }
.cat-heading .muted { font-size: var(--text-sm); font-weight: 400; color: var(--text-muted); }

.cat-block { scroll-margin-top: calc(var(--header-h) + 240px); }

/* 网格（问题3：产品展示按屏幕尺寸响应式且更大 —— 卡片最小 300px，桌面 3 列） */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-6);
  row-gap: var(--space-7);
}

/* --------------------------------------------------------------------------
   10. Product Card
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-rest);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hov);
  border-color: var(--brand-300);
}
.card:active { transform: translateY(-2px); }

.card .thumb-wrap {
  width: 100%; aspect-ratio: 4/3;
  background: var(--slate-100);
  overflow: hidden;
}
.card .thumb {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card .thumb.placeholder {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: var(--text-xs);
}
.card:hover .thumb { transform: scale(1.04); }

.card .body {
  padding: var(--space-5);
  margin-top: auto;
}
.card .cat {
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-100);
  padding: 3px 10px; border-radius: var(--r-pill);
  display: inline-block; margin-bottom: var(--space-2);
}
.card h3 {
  font-size: 17px; font-weight: 700;
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .meta {
  font-size: var(--text-xs); color: var(--text-muted);
  line-height: 1.7;
  display: flex; flex-wrap: wrap; gap: 4px;
}

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: var(--text-2xs); font-weight: 600;
  line-height: 1.6;
}
.badge.material { background: var(--slate-200); color: var(--slate-800); }
.badge.stock-yes { background: var(--success-100); color: #14532D; }
.badge.stock-no { background: var(--slate-100); color: var(--slate-600); }
.badge.hot { background: var(--amber-100); color: #92400E; }
.badge.new { background: var(--cyan-100); color: #155E75; }

/* Price */
.price-range {
  margin: var(--space-1) 0 var(--space-2);
  display: flex; align-items: baseline; gap: 4px;
  flex-wrap: wrap;
}
.price-range .from-label {
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--danger-600); opacity: .80;
}
.price-range .from {
  font-size: 20px; font-weight: 800;
  color: var(--danger-600);
  letter-spacing: -0.02em;
}
.price-range .to {
  font-size: var(--text-xs); font-weight: 500;
  color: var(--text-muted);
}
.price-range.single .from { font-size: 20px; }

.cur { font-size: 80%; font-weight: 700; margin-right: 1px; }

/* Empty state */
.empty {
  text-align: center; color: var(--text-muted);
  padding: var(--space-12) var(--space-6);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}

/* --------------------------------------------------------------------------
   11. Hero
   -------------------------------------------------------------------------- */
.hero-wrap { margin: 0; }

.hero {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1200px 400px at 90% -10%, rgba(34,211,238,.25), transparent 60%),
    radial-gradient(800px 400px at -10% 120%, rgba(77,144,240,.30), transparent 60%),
    linear-gradient(135deg, #0A1A2F 0%, #143A63 55%, #0F2542 100%);
  box-shadow: var(--shadow-hero);
}
/* 网格纹理 */
.hero::before {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}
/* 右上琥珀光晕 */
.hero::after {
  content: ""; position: absolute;
  right: -120px; top: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(245,158,11,.22) 0%, transparent 70%);
  pointer-events: none;
}

/* Hero 顶部工具栏（品牌 + 导航 + 搜索/语言/导入/管理，合并进深色横幅内） */
.hero-toolbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-4) clamp(28px, 6vw, 72px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-toolbar .brand h1 { color: #fff; font-size: 16px; }
.hero-toolbar .nav-link { color: rgba(255,255,255,.82); }
.hero-toolbar .nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.hero-toolbar .nav-link.active {
  color: #fff; background: rgba(255,255,255,.14);
  box-shadow: inset 0 -2px 0 var(--cyan-400);
}
.hero-toolbar .stats { color: rgba(255,255,255,.6); }
.hero-toolbar #search {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.hero-toolbar #search::placeholder { color: rgba(255,255,255,.55); }
.hero-toolbar #search:focus { border-color: var(--cyan-400); background: rgba(255,255,255,.14); }
.hero-toolbar select.btn { background-color: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.18); }
.hero-toolbar select.btn option { color: var(--text); background: var(--surface); }
.hero-toolbar .btn { background: linear-gradient(135deg, var(--cyan-500), var(--brand-500)); }
.hero-toolbar .actions{ max-width: 640px; }

.hero-inner {
  position: relative; z-index: 1;
  padding: var(--space-5) clamp(28px, 6vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-copy { min-width: 0; text-align: center; }
.hero-visual {
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}
.hero-visual .hero-img {
  width: 100%; max-height: 260px;
  object-fit: contain;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-hero);
}
.hero-visual::before {
  content: "";
  position: absolute; top: 50%; right: 8%;
  transform: translateY(-50%);
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(34,211,238,.20) 0%, transparent 70%);
  pointer-events: none;
}
.hero h2 {
  font-size: var(--text-h2); font-weight: 800;
  letter-spacing: -0.02em; color: #fff;
}
.hero-sub {
  display: block;
  font-size: var(--text-lg); font-weight: 500;
  color: rgba(255,255,255,.75);
  margin-top: var(--space-2);
}
.hero-slogan {
  margin-top: 0;
  font-size: var(--text-sm); line-height: 1.6; color: #fff;
}
.hero-stats {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-2) var(--space-6);
  border-top: 1px solid rgba(255,255,255,.10);
  padding: var(--space-3) clamp(28px, 6vw, 72px);
  background: rgba(0,0,0,.12);
}
.hero-stat {
  display: inline-flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--space-1);
  color: rgba(255,255,255,.85);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.hero-stat b {
  font-size: var(--text-base); font-weight: 800;
  color: var(--amber-400);
}

.hero-cta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero-cta .btn {
  background: linear-gradient(135deg, var(--cyan-500), var(--brand-500));
  box-shadow: 0 6px 20px rgba(6,182,212,.30);
}
.hero-cta .btn:hover {
  background: linear-gradient(135deg, var(--cyan-400), var(--brand-400));
}
.hero-cta .btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: none;
}
.hero-cta .btn-ghost:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.40);
}

/* Hero 入场动画 */
@media (prefers-reduced-motion: no-preference) {
  .hero.is-loaded .hero-copy > * {
    animation: heroFadeUp .6s var(--ease-out) both;
  }
  .hero.is-loaded .hero-copy > *:nth-child(1) { animation-delay: .05s; }
  .hero.is-loaded .hero-copy > *:nth-child(2) { animation-delay: .12s; }
  .hero.is-loaded .hero-copy > *:nth-child(3) { animation-delay: .20s; }
  .hero.is-loaded .hero-copy > *:nth-child(4) { animation-delay: .28s; }
  .hero.is-loaded .hero-visual { animation: heroFadeUp .6s var(--ease-out) .1s both; }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   12. Detail Page
   -------------------------------------------------------------------------- */
.detail {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  line-height: 1.6;
}
.detail-back { margin-bottom: var(--space-4); }

/* 详情页两栏布局（v2） */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-8);
}
.detail-media { min-width: 0; }
.detail-info { min-width: 0; }
@media (min-width: 1024px) {
  .detail-info { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}
.detail-price {
  display: flex; align-items: baseline; gap: var(--space-1);
  flex-wrap: wrap;
  margin: var(--space-4) 0;
}
.detail-price .from-label {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--danger-600); opacity: .85;
}
.detail-price .from {
  font-size: 28px; font-weight: 800;
  color: var(--danger-600); letter-spacing: -0.02em;
}
.detail-price .to {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-muted);
}
.detail-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.detail-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-5);
}
.detail-actions .btn-lg { flex: 1 1 100%; }
.detail-below { min-width: 0; }

.dv-title {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-2);
}
.dv-title h2 {
  font-size: var(--text-h1); font-weight: 800;
  color: var(--text); letter-spacing: -0.02em;
}
.dv-title .cat {
  font-size: var(--text-xs); font-weight: 600;
  background: linear-gradient(135deg, var(--brand-100), var(--cyan-100));
  color: var(--brand-700);
  border: 1px solid var(--brand-100);
  padding: 4px 14px; border-radius: var(--r-pill);
}
.dv-meta {
  color: var(--text-muted); font-size: var(--text-sm);
  margin: var(--space-2) 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

/* Gallery */
.gallery-main {
  margin-bottom: var(--space-4);
  position: relative;
}
.gallery-main img,
.gallery-main .gallery-item img {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--r-xl);
  background: var(--slate-100);
  box-shadow: var(--shadow-hov);
  cursor: zoom-in;
  display: block;
}
.gallery-main .gallery-item {
  display: block; border-radius: var(--r-xl); overflow: hidden;
}
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.gallery-thumbs button {
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer; overflow: hidden;
  aspect-ratio: 16/9; display: block;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: none; height: auto;
}
.gallery-thumbs button:hover {
  border-color: var(--brand-400);
  transform: none; box-shadow: none;
}
.gallery-thumbs button.active {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.gallery-thumbs img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gallery-counter {
  position: absolute; top: 12px; right: 12px;
  background: rgba(15,23,42,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--text-2xs); font-weight: 600;
  padding: 6px 12px; border-radius: var(--r-pill);
}

/* Additional gallery grid (file-list images, company gallery detail view) */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.gallery img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--r-sm);
  cursor: zoom-in; background: var(--slate-100);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.gallery img:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hov);
}
.gallery-more { margin-bottom: var(--space-5); }
.gallery-more summary {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600; font-size: var(--text-sm);
  user-select: none; outline: none;
  list-style: none;
}
.gallery-more summary::-webkit-details-marker { display: none; }
.gallery-more[open] summary { margin-bottom: var(--space-3); }
.gallery-more .gallery { margin-bottom: 0; }

/* Quick specs */
.quick-specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.quick-spec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-left-color var(--dur-fast);
}
.quick-spec:hover {
  border-left-color: var(--cyan-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-rest);
}
.quick-spec .qs-label {
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.quick-spec .qs-value {
  font-size: var(--text-h3); font-weight: 700;
  color: var(--text); line-height: 1.3;
}

/* All specs — 弱化左边框 */
.all-specs {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
  margin-bottom: 0;
}
.all-specs .quick-spec {
  border-left-color: var(--border);
  padding: 10px 12px;
}
.all-specs .quick-spec:hover { border-left-color: var(--cyan-500); }
.all-specs .quick-spec .qs-label {
  font-size: 11px; text-transform: none; letter-spacing: 0;
}
.all-specs .quick-spec .qs-value {
  font-size: var(--text-sm); font-weight: 600;
  line-height: 1.5; word-break: break-word; overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .all-specs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Section block */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-rest);
}
.section h3 {
  font-size: var(--text-h3); margin-bottom: var(--space-4);
  color: var(--text); font-weight: 700;
  display: flex; align-items: center; gap: var(--space-2);
}
.section h3 .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--brand-100); color: var(--brand-600);
}

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td {
  text-align: left;
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  color: var(--text-sec); font-weight: 600;
  background: var(--surface-alt);
  white-space: nowrap;
}
td { color: var(--text-sec); }
tr:last-child td { border-bottom: none; }
tr:hover { background: var(--brand-50); }

/* Price cards */
.price-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--danger-500);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.price-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hov);
}
.price-card .pc-variant {
  font-size: var(--text-sm); font-weight: 700;
  color: var(--text); line-height: 1.4; word-break: break-word;
}
.price-card .pc-body {
  display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap;
}
.price-card .pc-cap { font-size: var(--text-sm); color: var(--slate-600); }
.price-card .pc-cap b { font-weight: 700; color: var(--text-sec); }
.price-card .pc-weight { font-size: var(--text-xs); color: var(--slate-500); }
.price-card .pc-price {
  font-size: 22px; font-weight: 800;
  color: var(--danger-600);
  margin-left: auto; white-space: nowrap;
}
@media (max-width: 760px) {
  .price-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
}
html[lang="en"] .pc-price::after {
  content: " CNY";
  font-size: 11px; font-weight: 700;
  color: var(--slate-500); letter-spacing: .3px;
}

/* Scalar spec highlight */
.scalar-as-spec { background: var(--brand-50); }
.scalar-as-spec td input[type=text]:first-of-type { color: var(--brand-600); }

.raw-price {
  white-space: pre-wrap; color: var(--text-muted);
  line-height: 1.7; font-size: var(--text-sm);
}

/* File list */
.file-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.file-tag {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  background: var(--slate-100);
  font-size: var(--text-2xs); color: var(--slate-600);
}
.file-tag img {
  max-width: 120px; max-height: 90px;
  border-radius: 6px; display: block; margin-top: var(--space-1);
  cursor: zoom-in;
}
.file-tag a { color: inherit; }

/* --------------------------------------------------------------------------
   13. Company Page
   -------------------------------------------------------------------------- */
.company {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}
/* 公司页：介绍 + 事实卡两栏（可选增强） */
.company-layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 1023px) {
  .company-layout { grid-template-columns: 1fr; gap: var(--space-5); }
}
.company-title {
  font-size: var(--text-h1); font-weight: 800;
  margin-bottom: var(--space-5);
  display: flex; align-items: center; gap: var(--space-2);
}
.company-title .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--brand-100); color: var(--brand-600);
}
.company-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.company-gallery img,
.company-gallery .gallery-item img {
  width: 100%; height: 220px; object-fit: cover;
  border-radius: var(--r-lg);
  cursor: zoom-in; background: var(--slate-100);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.company-gallery .gallery-item {
  display: block; border-radius: var(--r-lg); overflow: hidden;
}
.company-gallery img:hover,
.company-gallery .gallery-item:hover img {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hov);
}
.company-intro {
  font-size: var(--text-lg); line-height: 1.85;
  color: var(--text-sec);
  white-space: pre-line;
  max-width: 68ch;
}
.company-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.fact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--brand-500), var(--cyan-500)) 1;
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: var(--space-1);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.fact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-rest);
}
.fact-card .fc-label {
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}
.fact-card .fc-label .ico { color: var(--brand-500); }
.fact-card .fc-value {
  font-size: var(--text-h3); font-weight: 700;
  color: var(--text); line-height: 1.4;
}
.company-table { width: 100%; border-collapse: collapse; }
.company-table th, .company-table td {
  border: 1px solid var(--border);
  padding: 10px var(--space-4);
  text-align: left; font-size: var(--text-base);
}
.company-table th {
  width: 140px;
  background: var(--surface-alt);
  color: var(--text-sec); font-weight: 600;
}
.company-tags { margin-top: var(--space-4); }
.company-tag-line { margin: 6px 0; }
.company-tag-label {
  color: var(--text-muted); font-size: var(--text-sm); margin-right: 6px;
}
.company-tags .badge {
  font-size: var(--text-xs); padding: 4px 12px; margin-right: 6px;
}

/* --------------------------------------------------------------------------
   14. 多栏深色 Footer（v2）
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--brand-900);
  color: rgba(255,255,255,.72);
  margin-top: var(--space-12);
  padding: var(--space-12) 0 var(--space-8);
}
.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
}
.footer-col { min-width: 0; }
.footer-brand {
  display: block;
  color: #fff; font-weight: 700; font-size: var(--text-base);
  margin-bottom: var(--space-3);
}
.footer-col p {
  font-size: var(--text-sm); line-height: 1.7;
  color: rgba(255,255,255,.7);
  margin: 0;
}
.footer-title {
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-300);
  margin: 0 0 var(--space-3);
}
.footer-link {
  display: block;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  padding: 4px 0;
  font-size: var(--text-sm);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.footer-link:hover {
  color: #fff;
  transform: translateX(2px);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,.6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 8px;
}

/* --------------------------------------------------------------------------
   15. Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--slate-900);
  color: #fff;
  padding: 12px var(--space-6);
  border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 500;
  box-shadow: var(--shadow-float);
  z-index: 999;
  opacity: 0;
  max-width: 80vw; text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.toast.info    { background: var(--brand-600); }
.toast.error   { background: var(--danger-600); }
.toast.success { background: var(--success-500); }

/* --------------------------------------------------------------------------
   15. Admin
   -------------------------------------------------------------------------- */
.admin-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}
.admin-wrap .section { margin-bottom: var(--space-4); }
.admin-table { background: var(--surface); }
.admin-table th {
  background: var(--slate-100);
  color: var(--text-sec);
}
.admin-table td, .admin-table th { padding: 8px 10px; }
.row-hidden td { opacity: .55; }

.ok-msg {
  background: var(--success-100);
  border: 1px solid #86EFAC;
  color: #14532D;
  border-radius: var(--r-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* Vehicle card list */
#vlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}
.vcard {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.vcard:hover {
  box-shadow: var(--shadow-rest);
  transform: translateY(-2px);
}
.vcard.row-hidden { opacity: .55; }
.vcard-thumb {
  width: 100%; height: 120px;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border);
  background: var(--slate-100);
  display: flex; align-items: center; justify-content: center;
}
.vcard-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vcard-thumb .muted { font-size: 11px; }
.vcard-info { flex: 1; min-width: 0; margin-top: var(--space-3); }
.vcard-title {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; font-size: var(--text-base); margin-bottom: var(--space-1);
}
.vcard-meta {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  color: var(--text-muted); font-size: var(--text-2xs); line-height: 1.6;
}
.vcard-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--space-3);
}
.vcard-actions form { flex: 1 1 calc(50% - 3px); display: inline-flex; }
.vcard-actions .btn,
.vcard-actions button {
  width: 100%; text-align: center;
  padding: 8px 6px; font-size: var(--text-xs);
  justify-content: center; height: 36px;
}
.vcard-actions .btn-edit { flex: 1 1 100%; padding: 9px 6px; font-size: var(--text-sm); }

.nowrap { white-space: nowrap; }
.muted { color: var(--text-muted); font-size: var(--text-2xs); }

.inline-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.inline-form input {
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  min-width: 180px; height: 38px;
}
.inline-form input[name=name] { flex: 1; min-width: 240px; }

.admin-wrap input[type=text],
.admin-wrap input[type=number] {
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  font-size: var(--text-sm);
  width: 100%;
  height: 36px;
}
.admin-wrap input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
}
.admin-wrap textarea { height: auto; }

.ovr {
  font-size: var(--text-2xs); color: var(--text-muted);
  margin-left: var(--space-2);
  display: inline-flex; align-items: center; gap: 4px;
}

/* Cover selector */
.cover-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cover-opt { cursor: pointer; }
.cover-opt input { display: none; }
.cover-thumb {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px; background: var(--surface);
  width: 120px; height: 110px;
  justify-content: center; overflow: hidden;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.cover-opt input:checked + .cover-thumb {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}
.cover-thumb img {
  max-width: 104px; max-height: 70px;
  object-fit: contain; border-radius: 4px;
}
.cover-thumb.auto {
  color: var(--text-muted); font-size: var(--text-2xs);
  text-align: center; line-height: 1.5;
}
.cover-name {
  font-size: 10px; color: var(--text-muted);
  max-width: 110px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   16. Login Page
   -------------------------------------------------------------------------- */
.login-body {
  background: linear-gradient(135deg, var(--slate-100) 0%, var(--brand-50) 100%);
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; margin: 0;
  padding: var(--space-4);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-8) var(--space-8);
  width: 360px; max-width: 100%;
  box-shadow: var(--shadow-float);
}
.login-card h1 {
  font-size: var(--text-h3);
  text-align: center;
  margin: 0 0 var(--space-1);
}
.login-card label {
  display: block;
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--text-sm); color: var(--slate-600);
  font-weight: 500;
}
.login-card input {
  width: 100%; box-sizing: border-box;
  margin-top: 4px; padding: 10px var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  height: 42px;
}
.login-card input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
}
.login-card .btn {
  margin-top: var(--space-6);
  width: 100%; justify-content: center;
  height: 44px; font-size: var(--text-base);
}
.login-err {
  background: var(--danger-100);
  border: 1px solid #FCA5A5;
  color: #991B1B;
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  text-align: center;
}

/* --------------------------------------------------------------------------
   17. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8);
}
.lightbox img {
  max-width: 94vw; max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: #000;
  box-shadow: var(--shadow-float);
}
.lb-close {
  position: fixed; top: 14px; right: 18px; z-index: 1000;
  width: 44px; height: 44px; border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast);
  box-shadow: none; padding: 0;
}
.lb-close:hover { background: rgba(255,255,255,.32); transform: none; }

.lb-nav {
  position: fixed; top: 50%;
  transform: translateY(-50%); z-index: 1000;
  width: 48px; height: 48px; border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast);
  box-shadow: none; padding: 0;
}
.lb-nav:hover { background: rgba(255,255,255,.32); transform: translateY(-50%); }
.lb-nav:disabled { opacity: .3; cursor: default; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-prev .ico { transform: rotate(90deg); }
.lb-next .ico { transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   18. Accessibility — Skip Link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  padding: 10px var(--space-5);
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none; font-weight: 700;
  box-shadow: var(--shadow-hov);
}
.skip-link:focus {
  left: 0;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   19. Card entrance animation (search results)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .grid .card,
  .cat-block .card {
    animation: fadeUp .28s var(--ease-out) both;
  }
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */

/* Tablet and below */
@media (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: var(--space-4);
  }
  /* 详情两栏收紧 */
  .detail-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .9fr);
    gap: var(--space-5);
  }
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
  }
}

/* Mobile */
@media (max-width: 760px) {
  header {
    flex-wrap: wrap;
    height: auto;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .brand { width: 100%; }
  .brand h1 { font-size: 16px; }
  .nav-bar {
    order: 2; flex: 0 0 100%;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav-bar::-webkit-scrollbar { display: none; }
  .nav-link { min-height: 44px; }
  .actions {
    max-width: none; width: 100%;
    order: 3; flex: 0 0 100%;
  }
  #search { min-width: 0; }

  /* Hero 工具栏（移动端）：品牌+导航+操作 分多行堆叠 */
  .hero-toolbar {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .hero-toolbar .brand { width: 100%; }
  .hero-toolbar .nav-bar {
    order: 2; flex: 0 0 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hero-toolbar .actions {
    order: 4; flex: 0 0 100%; width: 100%; max-width: none;
  }
  .hero-toolbar #search { min-width: 0; }

  /* 分类胶囊条：横向滚动 */
  .cat-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: var(--space-3) var(--space-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .cat-pill { min-height: 44px; }

  main { padding: 0; }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .card { border-radius: var(--r-md); }
  .card .body { padding: var(--space-3) var(--space-4) var(--space-4); }
  .card .cat { font-size: 11px; padding: 2px 8px; margin-bottom: var(--space-1); }
  .card h3 { font-size: 14px; margin: var(--space-1) 0 var(--space-2); }
  .card .meta { font-size: 11px; }
  .price-range .from,
  .price-range.single .from { font-size: 16px; }
  .price-range .from-label { font-size: 11px; }
  .price-range .to { font-size: var(--text-2xs); }
  .badge { font-size: 11px; padding: 2px 8px; }

  .btn, .back-link { min-height: 44px; }
  button, .btn { height: 44px; }

  /* Hero */
  .hero-inner {
    padding: var(--space-6) var(--space-5);
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .hero-visual { display: none; }
  .hero h2 { font-size: var(--text-h2); }
  .hero-slogan { font-size: var(--text-xs); padding: 6px 12px; }
  .hero-stats {
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }
  .hero-stat { padding: var(--space-2) var(--space-3); }
  .hero-stat b { font-size: var(--text-h2); }

  /* Detail */
  .detail-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .detail-price .from { font-size: 24px; }
  .detail { padding: var(--space-4); line-height: 1.5; }
  .dv-title { gap: var(--space-2); }
  .dv-title h2 { font-size: 22px; }
  .dv-title .cat { font-size: var(--text-2xs); padding: 3px 10px; }
  .dv-meta { font-size: var(--text-2xs); margin: var(--space-1) 0 var(--space-4); padding-bottom: var(--space-3); }
  .gallery-main img { border-radius: var(--r-md); }
  .gallery-thumbs { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .quick-specs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .section { padding: var(--space-4); border-radius: var(--r-md); }
  .section h3 { font-size: 15px; margin-bottom: var(--space-3); }
  table { font-size: var(--text-xs); }
  th, td { padding: 6px 8px; word-break: break-word; overflow-wrap: anywhere; }
  th { width: auto; min-width: 0; white-space: normal; }
  .gallery {
    gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
  .detail table { table-layout: auto; }

  /* Company */
  .company { padding: var(--space-4) var(--space-3); }
  .company-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
  .company-gallery img,
  .company-gallery .gallery-item img { height: 120px; }
  .company-facts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .company-intro { font-size: 15px; }
  .company-table th { width: 100px; }
  .company-table th, .company-table td { padding: 8px 10px; font-size: var(--text-sm); }

  /* Admin */
  .admin-wrap { padding: var(--space-3); }
  .admin-wrap .section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table { min-width: 560px; }
  #vlist { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
  .vcard { padding: var(--space-3); }
  .vcard-thumb { height: 100px; }
  .vcard-actions .btn,
  .vcard-actions button { padding: 10px 6px; }
  .inline-form input { min-width: 0; width: 100%; }
  .inline-form input[name=name] { min-width: 0; }
  .cover-thumb { width: 92px; height: 92px; }
  .cover-thumb img { max-width: 80px; max-height: 56px; }

  .login-card {
    width: auto; max-width: 340px;
    margin: 0 var(--space-4);
    padding: var(--space-6);
  }
}

/* Small phones */
@media (max-width: 480px) {
  .stats { display: none; }
  .brand h1 { white-space: normal; }
  .grid { grid-template-columns: 1fr; }
  .hero-stat b { font-size: 20px; }
  .hero-stats { gap: var(--space-2); }
  .hero-stat { padding: var(--space-2) var(--space-3); }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-5); }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .why-card { padding: var(--space-4); }
}

/* Large desktop — 3 列大卡片（问题3：更大、更易看清） */
@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1536px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

/* Desktop detail typography refinement */
@media (min-width: 761px) {
  .detail { font-size: var(--text-base); line-height: 1.7; }
  .dv-title h2 { font-size: var(--text-h1); font-weight: 800; }
  .dv-title .cat { font-size: var(--text-sm); font-weight: 600; }
  .dv-meta { font-size: var(--text-sm); }
  .detail .section h3 { font-size: var(--text-h3); font-weight: 700; }
  .detail table { font-size: var(--text-sm); }
  .detail table th { font-weight: 600; padding: 10px var(--space-4); }
  .detail table td { font-weight: 400; padding: 10px var(--space-4); }
  .detail-back { font-size: var(--text-sm); }
}

/* --------------------------------------------------------------------------
   21. Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */
@media print {
  header, .detail-back, .back-link, .lightbox, .toast,
  .gallery-thumbs, .actions, .hero-cta, .cat-pills, .why-us, .site-footer {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  .detail, .company { max-width: none; padding: 0; }
  .detail-grid { display: block; }
  .detail-grid .detail-info { position: static; }
  .section {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .hero {
    background: #1a3a5c !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .quick-spec, .price-card, .fact-card {
    break-inside: avoid;
  }
  a { color: #000; text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   23. Safe Area (iOS notch)
   -------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-top)) {
  header {
    padding-top: calc(var(--space-2, 10px) + env(safe-area-inset-top));
    padding-left: calc(var(--space-6, 20px) + env(safe-area-inset-left));
    padding-right: calc(var(--space-6, 20px) + env(safe-area-inset-right));
  }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .lb-close {
    top: calc(14px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
  }
  .lb-prev { left: calc(18px + env(safe-area-inset-left)); }
  .lb-next { right: calc(18px + env(safe-area-inset-right)); }
}