@layer base,theme,layout,components,animations,pages;
@layer base {
  :root {
    --radius-sm:12px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-full:100px;
    --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --font-mono:'Space Grotesk','JetBrains Mono','Fira Code',monospace;
    --z-bg:-1;
    --z-content:1;
    --z-card:10;
    --z-nav:100;
    --z-sidebar:150;
    --z-modal:200;
    --z-toast:300;
    --z-glow:9999;
    --transition-theme:background 0.5s ease,color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease
  }
  *,*::before,*::after {
    margin:0;
    padding:0;
    box-sizing:border-box
  }
  /* 全站隐藏 number 输入框滚轮箭头 */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance:none;
    margin:0
  }
  input[type="number"] {
    -moz-appearance:textfield
  }
  html {
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    scroll-behavior:smooth
  }
  body {
    font-family:var(--font-sans);
    background:var(--bg-base);
    color:var(--text-primary);
    min-height:100vh;
    line-height:1.6;
    overflow-x:hidden;
    transition:var(--transition-theme)
  }
  a {
    color:var(--accent);
    text-decoration:none
  }
  a:hover {
    text-decoration:underline
  }
  img {
    max-width:100%;
    height:auto;
    display:block
  }
  button,input,select,textarea {
    font-family:inherit;
    font-size:inherit
  }
  ::-webkit-scrollbar {
    width:6px;
    height:6px
  }
  ::-webkit-scrollbar-track {
    background:transparent
  }
  ::-webkit-scrollbar-thumb {
    background:var(--scrollbar-thumb);
    border-radius:3px
  }
  ::-webkit-scrollbar-thumb:hover {
    background:var(--scrollbar-hover)
  }
  .font-mono {
    font-family:var(--font-mono)
  }
  @media print {
    .cyber-nav,.bg-layer,.theme-toggle,.cyber-toast {
      display:none !important
    }
    body {
      background:#fff !important;
      color:#000 !important
    }
    .cyber-card {
      background:#fff !important;
      border:1px solid #ccc !important;
      box-shadow:none !important
    }
    .main-content {
      padding:0 !important
    }
  }
}
@layer theme {
  [data-theme="cyber"],:root {
    --bg-deep:#030308;
    --bg-base:#030308;
    --card-base:#12121f;
    --card-elevated:#1a1a2e;
    --bg-card:linear-gradient(135deg,rgba(18,18,31,0.75),rgba(26,26,46,0.7));
    --bg-card-flat:#12121f;
    --bg-card-hover:#1a1a2e;
    --bg-frosted:rgba(15,23,42,0.93);
    --bg-input:rgba(0,0,0,0.3);
    --bg-table-head:rgba(6,182,212,0.1);
    --bg-table-hover:rgba(6,182,212,0.05);
    --cyan-primary:#06b6d4;
    --cyan-glow:rgba(6,182,212,0.4);
    --purple-primary:#8b5cf6;
    --purple-glow:rgba(139,92,246,0.4);
    --emerald-primary:#10b981;
    --accent:#06b6d4;
    --accent-glow:rgba(6,182,212,0.4);
    --accent2:#8b5cf6;
    --accent2-glow:rgba(139,92,246,0.4);
    --brand-start:#3b82f6;
    --brand-end:#8b5cf6;
    --emerald:#10b981;
    --color-success:#10b981;
    --color-danger:#ef4444;
    --color-warning:#f59e0b;
    --color-info:#60a5fa;
    --text-primary:#f8fafc;
    --text-secondary:#94a3b8;
    --text-muted:#64748b;
    --border-subtle:rgba(255,255,255,0.08);
    --border-card:rgba(255,255,255,0.08);
    --border-hover:rgba(139,92,246,0.3);
    --border-nav:rgba(255,255,255,0.08);
    --radius-lg:24px;
    --radius-md:16px;
    --shadow-card:none;
    --shadow-hover:0 12px 28px rgba(0,0,0,0.4),0 0 20px rgba(139,92,246,0.15),0 0 60px rgba(139,92,246,0.05);
    --shadow-nav:none;
    --badge-progress-bg:rgba(6,182,212,0.15);
    --badge-progress-color:#06b6d4;
    --badge-progress-border:rgba(6,182,212,0.3);
    --badge-done-bg:rgba(16,185,129,0.15);
    --badge-done-color:#10b981;
    --badge-done-border:rgba(16,185,129,0.3);
    --badge-void-bg:rgba(239,68,68,0.15);
    --badge-void-color:#ef4444;
    --badge-void-border:rgba(239,68,68,0.3);
    --progress-a:linear-gradient(90deg,#06b6d4,#22d3ee);
    --progress-b:linear-gradient(90deg,#8b5cf6,#a78bfa);
    --progress-glow-a:0 0 16px rgba(6,182,212,0.4);
    --progress-glow-b:0 0 16px rgba(139,92,246,0.4);
    --rank-gold:linear-gradient(135deg,#fbbf24,#f59e0b);
    --rank-silver:linear-gradient(135deg,#94a3b8,#cbd5e1);
    --rank-silver-text:#0f172a;
    --rank-bronze:linear-gradient(135deg,#b45309,#d97706);
    --stat-color-1:#a78bfa;
    --stat-color-2:#f472b6;
    --stat-color-3:#fb923c;
    --stat-color-4:#34d399;
    --stat-color-5:#60a5fa;
    --progress-a:linear-gradient(90deg,#06b6d4,#22d3ee);
    --progress-b:linear-gradient(90deg,#8b5cf6,#a78bfa);
    --progress-glow-a:0 0 16px rgba(6,182,212,0.4);
    --progress-glow-b:0 0 16px rgba(139,92,246,0.4);
    --rank-gold:linear-gradient(135deg,#fbbf24,#f59e0b);
    --rank-silver:linear-gradient(135deg,#94a3b8,#cbd5e1);
    --rank-silver-text:#0f172a;
    --rank-bronze:linear-gradient(135deg,#b45309,#d97706);
    --scrollbar-thumb:rgba(148,163,184,0.3);
    --scrollbar-hover:rgba(148,163,184,0.5);
    --glow-card:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(139,92,246,0.25),transparent 50%);
    --input-focus-shadow:0 0 0 2px rgba(6,182,212,0.2);
    --nav-active-bg:linear-gradient(135deg,#3b82f6,#8b5cf6);
    --nav-hover-bg:rgba(59,130,246,0.15);
    --nav-hover-color:#60a5fa;
    --nav-hover-border:rgba(59,130,246,0.3);
    --deco-type:cyber
  }
  [data-theme="rainbow"] {
    --bg-deep:#faf8ff;
    --card-base:rgba(255,255,255,0.7);
    --card-elevated:rgba(255,255,255,0.85);
    --cyan-primary:#06b6d4;
    --cyan-glow:rgba(6,182,212,0.4);
    --purple-primary:#8b5cf6;
    --purple-glow:rgba(139,92,246,0.4);
    --emerald-primary:#10b981;
    --bg-base:#faf8ff;
    --bg-card:rgba(255,255,255,0.6);
    --bg-card-flat:#ffffff;
    --bg-card-solid:#ffffff;
    --bg-card-hover:rgba(255,255,255,0.88);
    --bg-frosted:rgba(255,255,255,0.6);
    --bg-input:rgba(0,0,0,0.03);
    --bg-table-head:linear-gradient(135deg,rgba(192,132,252,0.08),rgba(244,114,182,0.08));
    --bg-table-hover:rgba(192,132,252,0.04);
    --accent:#d946ef;
    --accent-glow:rgba(217,70,239,0.25);
    --accent2:#f472b6;
    --accent2-glow:rgba(244,114,182,0.2);
    --brand-start:#c084fc;
    --brand-end:#f472b6;
    --emerald:#34d399;
    --color-success:#34d399;
    --color-danger:#fb7185;
    --color-warning:#fbbf24;
    --color-info:#60a5fa;
    --text-primary:#1e1b4b;
    --text-secondary:#6b7280;
    --text-muted:#9ca3af;
    --border-subtle:rgba(0,0,0,0.08);
    --border-card:rgba(0,0,0,0.12);
    --border-hover:rgba(192,132,252,0.3);
    --border-nav:rgba(255,255,255,0.5);
    --shadow-card:0 2px 16px rgba(0,0,0,0.04),0 1px 4px rgba(0,0,0,0.02);
    --shadow-hover:0 12px 36px rgba(192,132,252,0.2),0 4px 12px rgba(0,0,0,0.06);
    --shadow-nav:0 2px 16px rgba(0,0,0,0.04);
    --badge-progress-bg:rgba(96,165,250,0.12);
    --badge-progress-color:#60a5fa;
    --badge-progress-border:transparent;
    --badge-done-bg:rgba(52,211,153,0.12);
    --badge-done-color:#34d399;
    --badge-done-border:transparent;
    --badge-void-bg:rgba(251,113,133,0.12);
    --badge-void-color:#fb7185;
    --badge-void-border:transparent;
    --stat-color-1:#a78bfa;
    --stat-color-2:#f472b6;
    --stat-color-3:#fb923c;
    --stat-color-4:#34d399;
    --stat-color-5:#60a5fa;
    --progress-a:linear-gradient(90deg,#f472b6,#e879f9);
    --progress-b:linear-gradient(90deg,#60a5fa,#22d3ee);
    --progress-glow-a:none;
    --progress-glow-b:none;
    --rank-gold:linear-gradient(135deg,#fbbf24,#f59e0b);
    --rank-silver:linear-gradient(135deg,#c084fc,#a78bfa);
    --rank-silver-text:#fff;
    --rank-bronze:linear-gradient(135deg,#f472b6,#fb7185);
    --scrollbar-thumb:rgba(0,0,0,0.1);
    --scrollbar-hover:rgba(0,0,0,0.2);
    --glow-card:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(192,132,252,0.15),transparent 50%);
    --input-focus-shadow:0 0 0 3px rgba(217,70,239,0.12);
    --nav-active-bg:linear-gradient(135deg,#c084fc,#f472b6);
    --nav-hover-bg:rgba(217,70,239,0.1);
    --nav-hover-color:#d946ef;
    --nav-hover-border:transparent;
    --deco-type:rainbow
  }
  .brand-gradient {
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text
  }
  .text-accent {
    color:var(--accent)
  }
  .text-success {
    color:var(--color-success)
  }
  .text-danger {
    color:var(--color-danger)
  }
  .text-muted {
    color:var(--text-muted)
  }
  .sensitive {
    filter:blur(4px);
    cursor:pointer;
    transition:filter 0.3s;
    user-select:none
  }
  .sensitive:hover {
    filter:blur(0)
  }
}
@layer layout {
  .bg-layer {
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:var(--z-bg);
    overflow:hidden
  }
  .bg-grid {
    position:absolute;
    inset:0
  }
  .bg-deco {
    position:absolute;
    border-radius:50%;
    filter:blur(100px)
  }
  [data-theme="cyber"] .bg-grid {
    background-image:linear-gradient(rgba(6,182,212,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,0.06) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 0%,transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 0%,transparent 70%)
  }
  [data-theme="cyber"] .deco-1 {
    width:600px;
    height:600px;
    top:-10%;
    left:-10%;
    background:radial-gradient(circle,rgba(6,182,212,0.4) 0%,transparent 70%);
    opacity:0.3;
    animation:pulse-slow 8s ease-in-out infinite
  }
  [data-theme="cyber"] .deco-2 {
    width:500px;
    height:500px;
    bottom:-5%;
    right:-5%;
    background:radial-gradient(circle,rgba(139,92,246,0.4) 0%,transparent 70%);
    opacity:0.25;
    animation:pulse-slow 10s ease-in-out infinite reverse
  }
  [data-theme="cyber"] .deco-3,[data-theme="cyber"] .deco-4 {
    display:none
  }
  [data-theme="cyber"] .bg-stars {
    display:block;
    position:absolute;
    inset:0;
    overflow:hidden
  }
  [data-theme="rainbow"] .bg-grid {
    background-image:linear-gradient(rgba(192,132,252,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(192,132,252,0.04) 1px,transparent 1px);
    background-size:48px 48px
  }
  [data-theme="rainbow"] .deco-1 {
    width:500px;
    height:500px;
    top:-10%;
    left:-5%;
    background:linear-gradient(135deg,#c084fc,#818cf8);
    opacity:0.3;
    animation:float 20s ease-in-out infinite
  }
  [data-theme="rainbow"] .deco-2 {
    width:400px;
    height:400px;
    top:20%;
    right:-5%;
    background:linear-gradient(135deg,#f472b6,#fb923c);
    opacity:0.25;
    animation:float 20s ease-in-out infinite -7s
  }
  [data-theme="rainbow"] .deco-3 {
    width:350px;
    height:350px;
    bottom:-5%;
    left:30%;
    background:linear-gradient(135deg,#34d399,#22d3ee);
    opacity:0.25;
    animation:float 20s ease-in-out infinite -14s
  }
  [data-theme="rainbow"] .deco-4 {
    width:300px;
    height:300px;
    top:50%;
    left:10%;
    background:linear-gradient(135deg,#fbbf24,#fb923c);
    opacity:0.2;
    animation:float 20s ease-in-out infinite -3s
  }
  [data-theme="rainbow"] .bg-stars {
    display:none
  }
  .star {
    position:absolute;
    width:3px;
    height:3px;
    background:rgba(255,255,255,0.6);
    border-radius:50%;
    animation:twinkle 3s ease-in-out infinite
  }
  .cyber-nav {
    position:fixed;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:16px 6px;
    z-index:var(--z-nav);
    background:var(--bg-frosted);
    backdrop-filter:blur(24px) saturate(1.8);
    border:1px solid var(--border-nav);
    border-radius:20px;
    box-shadow:var(--shadow-nav);
    transition:var(--transition-theme)
  }
  .nav-logo {
    width:40px;
    height:40px;
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 16px var(--accent-glow);
    margin-bottom:4px
  }
  .nav-logo svg {
    width:20px;
    height:20px;
    color:white
  }
  .nav-menu {
    display:flex;
    flex-direction:column;
    gap:2px
  }
  .nav-create-btn {
    width:48px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:6px 0 4px;
    background:#10b981;
    color:#fff;
    transition:all 0.2s;
    margin-bottom:2px
  }
  .nav-create-btn svg {
    width:18px;
    height:18px
  }
  .nav-create-btn:hover {
    background:#059669;
    transform:scale(1.08)
  }
  .nav-item {
    width:48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:6px 0 4px;
    border-radius:10px;
    color:var(--text-muted);
    text-decoration:none;
    transition:all 0.3s;
    cursor:pointer
  }
  .nav-item svg {
    width:18px;
    height:18px
  }
  .nav-label {
    font-size:10px;
    line-height:1;
    white-space:nowrap;
    opacity:0.85
  }
  .nav-item:hover {
    background:var(--nav-hover-bg);
    color:var(--nav-hover-color);
    border-color:var(--nav-hover-border);
    transform:scale(1.08);
    text-decoration:none
  }
  .nav-item.active {
    background:var(--nav-active-bg);
    color:white;
    box-shadow:0 4px 16px var(--accent-glow)
  }
  .brand-header {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-bottom:32px
  }
  .brand-title {
    font-size:22px;
    font-weight:800;
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    letter-spacing:3px
  }
  .system-status-bar {
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 20px;
    background:rgba(16,185,129,0.1);
    border:1px solid rgba(16,185,129,0.2);
    border-radius:var(--radius-full)
  }
  .status-dots {
    display:flex;
    gap:3px
  }
  .status-dot {
    width:3px;
    height:14px;
    background:var(--emerald);
    border-radius:2px;
    animation:pulse-bar 1.5s ease-in-out infinite
  }
  .status-dot:nth-child(2) {
    animation-delay:0.1s
  }
  .status-dot:nth-child(3) {
    animation-delay:0.2s
  }
  .status-text {
    font-size:11px;
    font-weight:700;
    color:var(--emerald);
    letter-spacing:2px;
    text-transform:uppercase
  }
  .main-content {
    position:relative;
    z-index:var(--z-content);
    padding: 0 36px 36px 100px;
    max-width: 1600px;
    margin: 0 auto
  }
  .theme-toggle {
    position:fixed;
    top:16px;
    right:16px;
    z-index:var(--z-nav);
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px;
    background:var(--bg-frosted);
    backdrop-filter:blur(20px);
    border:1px solid var(--border-nav);
    border-radius:var(--radius-full);
    box-shadow:var(--shadow-nav)
  }
  .theme-toggle button {
    padding:8px 16px;
    border:none;
    border-radius:var(--radius-full);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    background:transparent;
    color:var(--text-muted);
    transition:all 0.3s
  }
  .theme-toggle button.active {
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    color:white;
    box-shadow:0 2px 8px var(--accent-glow)
  }
  .theme-toggle button:hover:not(.active) {
    color:var(--text-primary)
  }
  /* ===== 顶栏容器（正常流，不固定） ===== */
  .topbar {
    position:relative;
    z-index:var(--z-nav);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 24px 16px 100px;
    max-width:1600px;
    margin:0 auto
  }
  /* ===== 右侧（主题切换 + 用户信息） ===== */
  .topbar-right {
    display:flex;
    align-items:center;
    gap:12px
  }
  /* ===== 左侧（系统名 + 健康状态） ===== */
  .topbar-left {
    display:flex;
    align-items:center;
    gap:10px
  }
  .topbar-brand {
    font-size:20px;
    font-weight:700;
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    letter-spacing:1px;
    line-height:36px
  }
  .topbar-health {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:var(--radius-full);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
    transition:all 0.3s
  }
  .topbar-health .health-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--text-muted);
    transition:background 0.3s
  }
  .topbar-health .health-text {
    color:var(--text-muted);
    transition:color 0.3s
  }
  .topbar-health.online {
    background:rgba(16,185,129,0.1);
    border:1px solid rgba(16,185,129,0.2)
  }
  .topbar-health.online .health-dot {
    background:#10b981;
    box-shadow:0 0 6px rgba(16,185,129,0.6)
  }
  .topbar-health.online .health-text {
    color:#10b981
  }
  .topbar-health.offline {
    background:rgba(239,68,68,0.1);
    border:1px solid rgba(239,68,68,0.2)
  }
  .topbar-health.offline .health-dot {
    background:#ef4444;
    box-shadow:0 0 6px rgba(239,68,68,0.6)
  }
  .topbar-health.offline .health-text {
    color:#ef4444
  }
  .topbar-user {
    display:flex;
    align-items:center;
    gap:10px;
    padding:4px;
    background:var(--bg-frosted);
    backdrop-filter:blur(20px);
    border:1px solid var(--border-nav);
    border-radius:var(--radius-full);
    transition:all 0.2s;
    cursor:default
  }
  .topbar-user:hover {
    border-color:var(--accent);
    background:rgba(6,182,212,0.1)
  }
  .topbar-avatar {
    width:32px;
    height:32px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg-input);
    border:2px solid var(--border-subtle);
    flex-shrink:0
  }
  .topbar-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
  }
  .topbar-avatar-placeholder {
    font-size:13px;
    font-weight:700;
    color:var(--accent)
  }
  .topbar-nickname {
    font-size:13px;
    font-weight:600;
    color:var(--text-primary);
    white-space:nowrap;
    max-width:80px;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .global-store-filter {
    display:flex;
    align-items:center;
  }
  .global-store-select {
    font-size:12px;
    padding:4px 24px 4px 8px;
    height:28px;
    min-width:auto;
    background:transparent;
    border:1px solid var(--border-nav);
    border-radius:var(--radius-full);
    color:var(--text-secondary);
    cursor:pointer;
  }
  .global-store-select:focus {
    border-color:var(--accent);
    color:var(--text-primary);
  }
  .topbar-divider {
    width:1px;
    height:24px;
    background:var(--border-nav);
    flex-shrink:0
  }
  .topbar-logout-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
    transition:all 0.2s;
    flex-shrink:0;
    padding:0
  }
  .topbar-logout-btn:hover {
    color:#ef4444;
    background:rgba(239,68,68,0.1)
  }
  @media (max-width:768px) {
    .cyber-nav {
      left:50%;
      top:auto;
      bottom:20px;
      transform:translateX(-50%);
      flex-direction:row;
      padding:10px 14px;
      border-radius:var(--radius-full)
    }
    .nav-logo {
      display:none
    }
    .nav-menu {
      flex-direction:row;
      gap:6px
    }
    .nav-item,
    .nav-create-btn {
      width:auto;
      padding:6px 8px 4px;
      gap:2px
    }
    .nav-label {
      font-size:9px
    }
    .main-content {
      padding:0 20px 100px
    }
    .topbar {
      padding:12px 12px 12px 80px
    }
    .topbar-brand {
      font-size:12px
    }
    .topbar-divider,
    .topbar-logout-btn {
      display:none
    }
    .topbar-nickname {
      display:none
    }
    .topbar-user {
      display:none
    }
  }
  @media (max-width:480px) {
    .topbar-brand {
      font-size:11px
    }
    .topbar-health {
      display:none
    }
    .nav-item,
    .nav-create-btn {
      width:38px;
      padding:5px 0 3px
    }
    .nav-item svg,
    .nav-create-btn svg {
      width:16px;
      height:16px
    }
    .nav-label {
      font-size:8px
    }
  }
}
@layer components {
  .cyber-card {
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--card-base),var(--card-elevated));
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    padding:24px;
    margin-bottom:20px;
    transition:all 0.3s ease
  }
  .cyber-card::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(139,92,246,0.1),transparent 60%);
    opacity:0;
    transition:opacity 0.3s ease;
    pointer-events:none
  }
  .cyber-card:hover::before {
    opacity:1
  }
  .cyber-card:hover {
    border-color:rgba(139,92,246,0.3);
    box-shadow:0 8px 16px rgba(0,0,0,0.3),0 0 16px rgba(139,92,246,0.1)
  }
[data-theme="cyber"] .cyber-card:hover {
  background:linear-gradient(135deg,rgba(18,18,31,0.85),rgba(26,26,46,0.8))
}
[data-theme="rainbow"] .cyber-card:hover {
  background:rgba(255,255,255,0.75)
}
[data-theme="rainbow"] .cyber-card.rainbow-border {
  border:none
}
[data-theme="rainbow"] .cyber-card.rainbow-border::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius-lg);
  padding:1.5px;
  background:linear-gradient(135deg,#c084fc,#f472b6,#fb923c,#fbbf24,#34d399,#60a5fa);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0.4;
  transition:opacity 0.3s;
  pointer-events:none
}
[data-theme="rainbow"] .cyber-card.rainbow-border:hover::after {
  opacity:1
}
.card-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border-subtle)
}
.card-header-split {
  justify-content:space-between
}
.card-header-left {
  display:flex;
  align-items:center;
  gap:12px
}
.card-header-right {
  display:flex;
  align-items:center;
  gap:8px
}
.card-icon {
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px
}
[data-theme="cyber"] .card-icon {
  background:rgba(6,182,212,0.1);
  border:1px solid rgba(6,182,212,0.3)
}
[data-theme="cyber"] .card-icon svg {
  color:#06b6d4
}
[data-theme="rainbow"] .card-icon {
  background:rgba(217,70,239,0.1)
}
[data-theme="rainbow"] .card-icon svg {
  color:#d946ef
}
.card-icon svg {
  width:16px;
  height:16px
}
.card-title {
  font-size:14px;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:0.5px
}
[data-theme="cyber"] .card-title {
  text-transform:uppercase;
  letter-spacing:1px
}
.cyber-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  font-size:13px;
  font-weight:600;
  color:white;
  border:none;
  cursor:pointer;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
  box-shadow:0 4px 12px var(--accent-glow);
  transition:all 0.3s
}
.cyber-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px var(--accent-glow)
}
.cyber-btn:active {
  transform:translateY(0)
}
.cyber-btn:disabled {
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none
}
.cyber-btn.secondary {
  background:var(--bg-input);
  border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  box-shadow:none
}
.cyber-btn.secondary:hover {
  border-color:var(--border-hover);
  color:var(--accent)
}
.cyber-btn.danger {
  background:linear-gradient(135deg,#ef4444,#dc2626)
}
.cyber-btn.soft {
  background:rgba(217,70,239,0.1);
  color:var(--accent);
  box-shadow:none
}
.cyber-btn.soft:hover {
  background:rgba(217,70,239,0.18)
}
.cyber-table-container {
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border-subtle)
}
[data-theme="cyber"] .cyber-table-container {
  background:rgba(0,0,0,0.3)
}
[data-theme="rainbow"] .cyber-table-container {
  background:rgba(255,255,255,0.5)
}
.cyber-table {
  width:100%;
  border-collapse:collapse
}
.cyber-table thead {
  display:table-header-group
}
.cyber-table thead th {
  background:var(--bg-table-head);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:12px;
  text-align:left
}
[data-theme="cyber"] .cyber-table thead th {
  border-bottom:2px solid rgba(6,182,212,0.3)
}
[data-theme="rainbow"] .cyber-table thead th {
  border-bottom:2px solid rgba(192,132,252,0.15)
}
.cyber-table tbody tr {
  border-bottom:1px solid var(--border-subtle);
  transition:all 0.3s
}
.cyber-table tbody tr:hover {
  background:var(--bg-table-hover)
}
[data-theme="cyber"] .cyber-table tbody tr:hover {
  transform:translateX(4px)
}
.cyber-table td {
  padding:12px;
  font-size:13px
}
.cyber-label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:6px
}
/* ========== Input 输入框 ========== */
.cyber-input {
  display:block;
  width:100%;
  height:38px;
  padding:0 12px;
  border:1px solid var(--border-card);
  border-radius:var(--radius-sm);
  background:var(--bg-input);
  color:var(--text-primary);
  font-size:13px;
  transition:all 0.2s;
  box-sizing:border-box
}
.cyber-input:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--input-focus-shadow)
}
.cyber-input::placeholder {
  color:var(--text-muted)
}
.cyber-input.invalid {
  border-color:var(--color-danger);
  box-shadow:0 0 0 2px rgba(239,68,68,0.2)
}
.cyber-input.valid {
  border-color:var(--color-success)
}
/* ========== Select 下拉选择框 ========== */
.cyber-select {
  display:block;
  width:100%;
  height:38px;
  padding:0 12px;
  border:1px solid var(--border-card);
  border-radius:var(--radius-sm);
  background:var(--bg-input);
  color:var(--text-primary);
  font-size:13px;
  transition:all 0.2s;
  box-sizing:border-box;
  cursor:pointer;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:30px
}
.cyber-select:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--input-focus-shadow)
}
.cyber-select option {
  background:var(--card-base);
  color:var(--text-primary)
}
.field-error {
  color:var(--color-danger);
  font-size:0.75rem;
  margin-top:0.25rem
}
.cyber-search {
  position:relative
}
.cyber-search input {
  width:100%;
  padding:10px 14px 10px 40px;
  font-size:14px;
  color:var(--text-primary);
  background:var(--bg-input);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  outline:none;
  transition:all 0.3s
}
.cyber-search input:focus {
  border-color:var(--accent);
  box-shadow:var(--input-focus-shadow)
}
.cyber-search svg {
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  color:var(--text-muted)
}
.cyber-modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  z-index:var(--z-modal);
  display:none;
  align-items:center;
  justify-content:center;
  animation:fadeIn 0.2s ease
}
.cyber-modal-overlay.active {
  display:flex
}
.cyber-modal {
  background:var(--bg-card-flat);
  border:1px solid var(--border-card);
  border-radius:var(--radius-lg);
  padding:32px;
  max-width:600px;
  width:90%;
  max-height:85vh;
  overflow-y:auto;
  animation:slideUp 0.3s ease;
  box-shadow:var(--shadow-hover)
}
.cyber-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  border-radius:var(--radius-full)
}
.cyber-badge.progress {
  background:var(--badge-progress-bg);
  color:var(--badge-progress-color);
  border:1px solid var(--badge-progress-border)
}
.cyber-badge.completed {
  background:var(--badge-done-bg);
  color:var(--badge-done-color);
  border:1px solid var(--badge-done-border)
}
.cyber-badge.voided {
  background:var(--badge-void-bg);
  color:var(--badge-void-color);
  border:1px solid var(--badge-void-border)
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px
}
.stat-card {
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:20px;
  text-align:center;
  transition:all 0.3s
}
.stat-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover)
}
.stat-label {
  font-size:11px;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px
}
.stat-value {
  font-family:var(--font-mono);
  font-size:30px;
  font-weight:800
}
.stat-card:nth-child(1) .stat-value {
  color:#a78bfa;
  text-shadow:0 0 20px rgba(167,139,252,0.3)
}
.stat-card:nth-child(2) .stat-value {
  color:#f472b6;
  text-shadow:0 0 20px rgba(244,114,182,0.3)
}
.stat-card:nth-child(3) .stat-value {
  color:#fb923c;
  text-shadow:0 0 20px rgba(251,146,60,0.3)
}
.stat-card:nth-child(4) .stat-value {
  color:#34d399;
  text-shadow:0 0 20px rgba(52,211,153,0.3)
}
.stat-card:nth-child(5) .stat-value {
  color:#60a5fa;
  text-shadow:0 0 20px rgba(96,165,250,0.3)
}
.stat-card:nth-child(6) .stat-value {
  color:#10b981;
  text-shadow:0 0 20px rgba(16,185,129,0.3)
}
.stat-value {
  font-family:var(--font-mono);
  font-size:30px;
  font-weight:800
}

.cyber-toast {
  position:fixed;
  top:24px;
  right:24px;
  padding:12px 24px;
  color:white;
  border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  z-index:var(--z-toast);
  animation:slideInRight 0.3s ease
}
.cyber-toast.success {
  background:var(--color-success)
}
.cyber-toast.error {
  background:var(--color-danger)
}
.cyber-toast.info {
  background:var(--color-info)
}
.skeleton {
  background:linear-gradient(90deg,rgba(128,128,128,0.06) 25%,rgba(128,128,128,0.12) 50%,rgba(128,128,128,0.06) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm)
}
.skeleton-text {
  height:14px;
  margin-bottom:8px
}
.skeleton-text:last-child {
  width:60%
}
.skeleton-card {
  height:120px;
  border-radius:var(--radius-md)
}
.cyber-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:60px 20px;
  text-align:center
}
.cyber-empty-icon {
  font-size:48px;
  margin-bottom:16px;
  opacity:0.6
}
.cyber-empty-text {
  font-size:16px;
  color:var(--text-secondary);
  margin-bottom:8px
}
.cyber-empty-hint {
  font-size:13px;
  color:var(--text-muted)
}
.cyber-error {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:60px 20px;
  text-align:center
}
.cyber-error-icon {
  font-size:48px;
  margin-bottom:16px
}
.cyber-error-text {
  font-size:16px;
  color:var(--color-danger);
  margin-bottom:16px
}

.nav-avatar-btn {
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  border:2px solid var(--border-subtle);
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-input)
}
.nav-avatar-btn:hover {
  border-color:var(--accent);
  box-shadow:0 0 8px rgba(6,182,212,0.3);
  transform:scale(1.08)
}
@media (max-width:1200px) {
  .stats-grid {
    grid-template-columns:repeat(3,1fr)
  }
}
@media (max-width:768px) {
  .cyber-card {
    padding:20px
  }
  .stat-card {
    padding:16px
  }
  .stat-value {
    font-size:20px
  }
  .stats-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .cyber-modal {
    padding:24px;
    width:95%
  }
}
@media (max-width:480px) {
  .card-title {
    font-size:12px
  }
  .stat-label {
    font-size:10px
  }
  .stat-value {
    font-size:18px
  }
}

/* ========== Size Chip 尺码标签（全局组件） ========== */
.size-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(6,182,212,0.08);
  border: 1px solid rgba(6,182,212,0.2);
  border-radius: 4px;
  padding: 2px 0;
  font-size: 13px;
  line-height: 1.4;
  margin: 2px 3px;
}
.size-key {
  padding: 1px 6px;
  font-weight: 600;
  color: var(--cyan-primary);
}
.size-val {
  padding: 1px 7px 1px 5px;
  font-weight: 700;
  color: var(--text-primary);
  border-left: 1px solid rgba(6,182,212,0.15);
}
.size-chip-short {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.25);
}
.size-chip-short .size-key {
  color: var(--color-danger);
}
.size-chip-short .size-val {
  color: var(--color-danger);
  font-weight: 700;
  border-left-color: rgba(239,68,68,0.2);
}
}
@layer animations {
  @keyframes pulse-slow {
    0%,100% {
      opacity:0.3;
      transform:scale(1)
    }
    50% {
      opacity:0.5;
      transform:scale(1.1)
    }
  }
  @keyframes pulse-bar {
    0%,100% {
      opacity:0.3;
      transform:scaleY(0.7)
    }
    50% {
      opacity:1;
      transform:scaleY(1)
    }
  }
  @keyframes twinkle {
    0%,100% {
      opacity:0.3
    }
    50% {
      opacity:1
    }
  }
  @keyframes float {
    0%,100% {
      transform:translate(0,0) scale(1)
    }
    25% {
      transform:translate(30px,-20px) scale(1.05)
    }
    50% {
      transform:translate(-20px,20px) scale(0.95)
    }
    75% {
      transform:translate(10px,-10px) scale(1.02)
    }
  }
  @keyframes barGrow {
    from {
      opacity:0;
      transform:scaleY(0)
    }
    to {
      opacity:1;
      transform:scaleY(1)
    }
  }
  @keyframes fadeIn {
    from {
      opacity:0
    }
    to {
      opacity:1
    }
  }
  @keyframes fadeInUp {
    from {
      opacity:0;
      transform:translateY(16px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
  @keyframes slideUp {
    from {
      opacity:0;
      transform:translateY(24px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
  @keyframes slideInRight {
    from {
      opacity:0;
      transform:translateX(100%)
    }
    to {
      opacity:1;
      transform:translateX(0)
    }
  }
  @keyframes slideOutRight {
    from {
      opacity:1;
      transform:translateX(0)
    }
    to {
      opacity:0;
      transform:translateX(100%)
    }
  }
  @keyframes shimmer {
    0% {
      background-position:-200% 0
    }
    100% {
      background-position:200% 0
    }
  }
  @keyframes rainbow-shift {
    0% {
      background-position:0% 50%
    }
    50% {
      background-position:100% 50%
    }
    100% {
      background-position:0% 50%
    }
  }
  .page-enter {
    animation:fadeInUp 0.2s ease-out
  }
  .page-exit {
    opacity:0;
    transition:opacity 0.15s
  }
  @media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
      transition-duration:0.01ms !important;
      animation-duration:0.01ms !important
    }
  }
}
/* ============================================================
   Bobo AI 聊天浮窗
   ============================================================ */

/* --- 浮动按钮 --- */
.chat-fab/* --- 导航栏 logo 作为聊天触发器 --- */
.nav-logo[data-chat-bound] {
  transition: transform 0.2s, filter 0.2s;
}
.nav-logo[data-chat-bound]:hover {
  transform: scale(1.1);
  filter: brightness(1.3);
}

/* --- 聊天窗口 --- */
.chat-window {
  position: fixed;
  top: 50%;
  left: 100px;
  transform: translateY(-50%);
  width: 400px;
  height: 560px;
  min-width: 320px;
  min-height: 360px;
  max-height: calc(100vh - 40px);
  background: var(--card-base, #12121f);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 24px);
  z-index: 250;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  animation: chatSlideIn 0.25s ease-out;
}

/* --- 调整大小手柄（右下角） --- */
.chat-resize-handle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  opacity: 0.35;
  transition: opacity 0.15s;
  z-index: 3;
  color: var(--text-muted, #64748b);
}
.chat-resize-handle:hover {
  opacity: 0.7;
}
.chat-resize-handle svg {
  width: 16px;
  height: 16px;
}

@keyframes chatSlideIn {
  from { opacity: 0; transform: translateY(-50%) translateX(-20px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* --- 头部 --- */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--card-elevated, #1a1a2e);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}
.chat-header.dragging {
  cursor: grabbing;
}
.chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.chat-header-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #f8fafc);
}
.chat-header-subtitle {
  font-size: 11px;
  color: var(--text-muted, #64748b);
}
.chat-header-actions {
  display: flex;
  gap: 4px;
}
.chat-header-actions button {
  background: none;
  border: none;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
}
.chat-header-actions button:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #f8fafc);
}
.chat-header-actions button svg {
  width: 16px;
  height: 16px;
}

/* --- 消息区域 --- */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.chat-messages::-webkit-scrollbar {
  width: 4px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

/* --- 消息气泡 --- */
.chat-msg {
  display: flex;
  gap: 8px;
  max-width: 88%;
  animation: chatMsgIn 0.2s ease-out;
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  object-fit: cover;
}
.chat-msg.assistant .chat-msg-avatar {
  /* 图片头像不需要背景色 */
}
.chat-msg.user .chat-msg-avatar {
  background: var(--cyan-primary, #06b6d4);
}
.chat-msg-bubble {
  padding: 10px 14px;
  border-radius: var(--radius-md, 16px);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary, #f8fafc);
  word-break: break-word;
}
.chat-msg.assistant .chat-msg-bubble {
  background: var(--card-elevated, #1a1a2e);
  border-bottom-left-radius: 4px;
}
.chat-msg.user .chat-msg-bubble {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-bottom-right-radius: 4px;
}

/* 消息内图片 */
.chat-msg-image {
  max-width: 200px;
  max-height: 160px;
  border-radius: 12px;
  margin-top: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.chat-msg-image:hover {
  opacity: 0.85;
}

/* 时间戳 */
.chat-msg-time {
  font-size: 10px;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
  text-align: right;
}
.chat-msg.assistant .chat-msg-time {
  text-align: left;
}

/* --- 打字指示器 --- */
.chat-typing {
  display: flex;
  gap: 4px;
  padding: 8px 14px;
  align-items: center;
}
.chat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #64748b);
  animation: typingBounce 1.2s ease-in-out infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* --- 确认卡片 --- */
.chat-action-card {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-md, 16px);
  padding: 14px;
  margin-top: 8px;
}
.chat-action-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-primary, #8b5cf6);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-action-card-body {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.7;
  margin-bottom: 12px;
}
.chat-action-card-body .field {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.chat-action-card-body .field-label {
  color: var(--text-muted, #64748b);
  min-width: 48px;
}
.chat-action-card-body .field-value {
  color: var(--text-primary, #f8fafc);
  font-weight: 500;
}
.chat-action-card-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}
.chat-action-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.chat-action-btns button {
  padding: 6px 16px;
  border-radius: var(--radius-sm, 12px);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}
.chat-action-btns .btn-confirm {
  background: linear-gradient(135deg, var(--brand-start, #3b82f6), var(--purple-primary, #8b5cf6));
  color: #fff;
}
.chat-action-btns .btn-confirm:hover {
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}
.chat-action-btns .btn-cancel {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary, #94a3b8);
  border: 1px solid rgba(255,255,255,0.1);
}
.chat-action-btns .btn-cancel:hover {
  background: rgba(255,255,255,0.1);
}
.chat-action-btns button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-action-card.confirmed {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.06);
}
.chat-action-card.cancelled {
  opacity: 0.5;
}
.chat-action-result {
  font-size: 12px;
  margin-top: 8px;
  font-weight: 600;
}
.chat-action-result.success {
  color: var(--color-success, #10b981);
}
.chat-action-result.error {
  color: var(--color-danger, #ef4444);
}

/* --- 输入区域 --- */
.chat-input-area {
  padding: 12px 16px;
  background: var(--card-elevated, #1a1a2e);
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-input-upload {
  background: none;
  border: none;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
}
.chat-input-upload:hover {
  color: var(--cyan-primary, #06b6d4);
  background: rgba(6, 182, 212, 0.1);
}
.chat-input-upload svg {
  width: 20px;
  height: 20px;
}
.chat-input-wrapper {
  flex: 1;
  position: relative;
}
.chat-input {
  width: 100%;
  background: var(--bg-input, rgba(0,0,0,0.3));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm, 12px);
  padding: 10px 14px;
  color: var(--text-primary, #f8fafc);
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  outline: none;
  max-height: 100px;
  overflow-y: auto;
  font-family: inherit;
  transition: border-color 0.15s;
}
.chat-input:focus {
  border-color: var(--cyan-primary, #06b6d4);
}
.chat-input::placeholder {
  color: var(--text-muted, #64748b);
}
.chat-send-btn {
  background: linear-gradient(135deg, var(--brand-start, #3b82f6), var(--purple-primary, #8b5cf6));
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  flex-shrink: 0;
  transition: opacity 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
}
.chat-send-btn:hover {
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4);
}
.chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.chat-send-btn svg {
  width: 18px;
  height: 18px;
}

/* 图片预览条 */
.chat-image-preview {
  display: flex;
  gap: 8px;
  padding: 8px 0 4px;
  overflow-x: auto;
}
.chat-image-preview-item {
  position: relative;
  flex-shrink: 0;
}
.chat-image-preview-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
}
.chat-image-preview-item .remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-danger, #ef4444);
  border: none;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* --- 会话列表 --- */
.chat-sessions-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card-base, #12121f);
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.chat-sessions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chat-sessions-header h3 {
  font-size: 14px;
  color: var(--text-primary, #f8fafc);
  margin: 0;
}
.chat-sessions-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.chat-session-item {
  padding: 12px 14px;
  border-radius: var(--radius-sm, 12px);
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
}
.chat-session-item:hover {
  background: rgba(255,255,255,0.05);
}
.chat-session-item-title {
  font-size: 13px;
  color: var(--text-primary, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-session-item-time {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}

/* --- 欢迎消息 --- */
.chat-welcome {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, #64748b);
}
.chat-welcome-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-start, #3b82f6), var(--purple-primary, #8b5cf6));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}
.chat-welcome h3 {
  font-size: 15px;
  color: var(--text-primary, #f8fafc);
  margin: 0 0 6px;
}
.chat-welcome p {
  font-size: 12px;
  margin: 0;
  line-height: 1.6;
}

/* --- 彩虹主题不透明覆盖 --- */
[data-theme="rainbow"] .chat-window {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 12px 48px rgba(0,0,0,0.15);
}
[data-theme="rainbow"] .chat-header {
  background: #f8f9fa;
  border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="rainbow"] .chat-input-area {
  background: #f8f9fa;
  border-top-color: rgba(0,0,0,0.08);
}
[data-theme="rainbow"] .chat-msg.assistant .chat-msg-bubble {
  background: #f1f3f5;
}
[data-theme="rainbow"] .chat-sessions-panel {
  background: #ffffff;
}

/* --- 手机端适配 --- */
@media (max-width: 768px) {
  .chat-window {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    min-width: unset;
    min-height: unset;
    transform: none;
    border-radius: 0;
    z-index: 300;
    animation: none;
    resize: none;
  }
  .chat-header {
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    cursor: default;
  }
  .chat-messages {
    padding: 12px;
  }
  .chat-input-area {
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .chat-resize-handle {
    display: none;
  }
}
/* Customer Detail Page Styles */

/* ===== 页面容器 ===== */
.customer-detail-page {
  
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 220px;
}

/* ===== 顶部导航栏 ===== */
.detail-topbar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.detail-topbar .btn-back {
  padding: 6px 14px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-topbar .btn-back svg {
  width: 14px;
  height: 14px;
}

/* ===== 客户信息卡片 ===== */
.customer-info-card {
  margin-bottom: 16px;
}

.customer-info-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.customer-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.customer-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}

.customer-avatar::after {
  content: '📸';
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 14px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.customer-avatar:hover::after {
  opacity: 1;
}

.customer-info-content {
  flex: 1;
  min-width: 200px;
}

.customer-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--cyan-primary);
  margin-bottom: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.customer-name:hover {
  opacity: 0.7;
}

.customer-name .edit-hint {
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s;
}

.customer-name:hover .edit-hint {
  opacity: 1;
}

/* ===== 字段网格 ===== */
.customer-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

.customer-field-item {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  transition: all 0.2s;
  line-height: 1.6;
}

.customer-field-item:hover {
  background: rgba(6, 182, 212, 0.08);
  color: var(--text-primary);
}

.customer-field-item .field-label {
  margin-right: 2px;
  opacity: 0.7;
}

.customer-field-item .field-value {
  color: var(--text-primary);
}

.customer-field-item .field-value.empty {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.6;
}

/* ===== 操作按钮 ===== */
.customer-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.customer-actions .btn-danger-ghost {
  padding: 6px 14px;
  font-size: 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.customer-actions .btn-danger-ghost:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}

/* ===== 订单统计卡片 ===== */
.customer-stats-card {
  margin-bottom: 16px;
}

.customer-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 0;
}

.stat-item {
  text-align: center;
  padding: 8px 4px;
}

.stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1.3;
}

.stat-value.cyan {
  color: var(--cyan-primary);
}

.stat-value.success {
  color: var(--color-success);
}

.stat-unit {
  font-size: 10px;
  color: var(--text-muted);
}

/* ===== 订单记录表格 ===== */
.customer-orders-card {
  margin-bottom: 16px;
}

.customer-orders-card .cyber-table-container {
  max-height: 500px;
  overflow-y: auto;
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
  .customer-detail-page {
    padding: 12px;
    padding-bottom: 220px;
  }

  .customer-avatar {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .customer-name {
    font-size: 18px;
  }

  /* 字段单列 */
  .customer-fields-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .customer-field-item {
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
  }

  /* 统计 2+1 布局 */
  .customer-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat-item:first-child {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(6, 182, 212, 0.05);
    border-radius: 8px;
    padding: 10px;
  }

  .stat-item:first-child .stat-label,
  .stat-item:first-child .stat-unit {
    margin: 0;
  }

  .stat-value {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .customer-detail-page {
    padding: 8px;
    padding-bottom: 220px;
  }

  .customer-info-header {
    gap: 10px;
  }

  .customer-avatar {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .customer-name {
    font-size: 17px;
  }

  .detail-topbar .btn-back span {
    display: none;
  }

  .detail-topbar .btn-back {
    padding: 6px 10px;
  }

  .stat-value {
    font-size: 18px;
  }

  .stat-item:first-child {
    flex-direction: row;
    gap: 8px;
  }
}
@layer pages {
  .customers-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:16px
  }
  .customer-card {
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px;
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-md);
    backdrop-filter:blur(16px);
    background:var(--bg-input);
    cursor:pointer;
    transition:all 0.35s cubic-bezier(0.4,0,0.2,1)
  }
  .customer-card:hover {
    border-color:var(--border-hover);
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover)
  }
  [data-theme="cyber"] .customer-card:hover {
    background:rgba(18,18,31,0.85)
  }
  [data-theme="rainbow"] .customer-card:hover {
    background:rgba(255,255,255,0.75)
  }
  .customer-avatar {
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:20px;
    color:white;
    flex-shrink:0;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    position:relative
  }
  .customer-avatar::after {
    content:'';
    position:absolute;
    inset:-3px;
    border-radius:50%;
    border:2px solid transparent;
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end)) border-box;
    -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0.6;
    transition:opacity 0.3s
  }
  .customer-card:hover .customer-avatar::after {
    opacity:1
  }
  .customer-info {
    flex:1;
    min-width:0
  }
  .customer-name {
    font-weight:700;
    font-size:15px;
    margin-bottom:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .customer-meta {
    font-size:12px;
    color:var(--text-muted);
    margin-bottom:4px
  }
  .customer-stats {
    font-size:12px;
    color:var(--accent);
    font-family:var(--font-mono);
    font-weight:600
  }
  .customer-card:nth-child(1) {
    animation:fadeInUp 0.4s ease 0s both
  }
  .customer-card:nth-child(2) {
    animation:fadeInUp 0.4s ease 0.05s both
  }
  .customer-card:nth-child(3) {
    animation:fadeInUp 0.4s ease 0.1s both
  }
  .customer-card:nth-child(4) {
    animation:fadeInUp 0.4s ease 0.15s both
  }
  .customer-card:nth-child(5) {
    animation:fadeInUp 0.4s ease 0.2s both
  }
  .customer-card:nth-child(6) {
    animation:fadeInUp 0.4s ease 0.25s both
  }
  .customer-card:nth-child(n+7) {
    animation:fadeInUp 0.4s ease 0.3s both
  }
  .customer-detail-header {
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:24px
  }
  .customer-detail-avatar-lg {
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:28px;
    color:white;
    flex-shrink:0;
    box-shadow:0 4px 16px rgba(0,0,0,0.2)
  }
  .customer-detail-name {
    font-size:20px;
    font-weight:800;
    margin-bottom:4px
  }
  .customer-detail-mark {
    font-size:13px;
    color:var(--accent)
  }
  .customer-fields-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:24px;
    padding:16px;
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);
    background:var(--bg-input)
  }
  .customer-field-item {
    display:flex;
    flex-direction:column;
    gap:3px
  }
  .customer-field-icon {
    font-size:10px;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-weight:600
  }
  .customer-field-val {
    font-size:13px;
    color:var(--text-primary)
  }
  .customer-recent-orders {
    margin-bottom:20px
  }
  .recent-order-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid var(--border-subtle);
    cursor:pointer;
    transition:all 0.2s
  }
  .recent-order-item:last-child {
    border-bottom:none
  }
  .recent-order-item:hover {
    padding-left:8px
  }
  .recent-order-no {
    font-weight:600;
    color:var(--accent);
    font-size:13px;
    flex:1
  }
  .recent-order-amount {
    font-family:var(--font-mono);
    font-weight:700;
    font-size:13px
  }
  .recent-order-date {
    font-size:11px;
    color:var(--text-muted)
  }
  .customer-sidebar {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:480px;
    max-width:90vw;
    background:var(--bg-card-flat);
    border-left:1px solid var(--border-subtle);
    z-index:var(--z-sidebar);
    transform:translateX(100%);
    transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow-y:auto;
    padding:24px;
    box-shadow:-8px 0 32px rgba(0,0,0,0.2)
  }
  .customer-sidebar.open {
    transform:translateX(0)
  }
  .sidebar-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    z-index:calc(var(--z-sidebar) - 1);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s
  }
  .sidebar-overlay.open {
    opacity:1;
    pointer-events:auto
  }
  .sidebar-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border-subtle)
  }
  .sidebar-close {
    width:32px;
    height:32px;
    border-radius:8px;
    border:1px solid var(--border-subtle);
    background:none;
    color:var(--text-muted);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s
  }
  .sidebar-close:hover {
    border-color:var(--color-danger);
    color:var(--color-danger)
  }
  @media (max-width:900px) {
    .customers-grid {
      grid-template-columns:repeat(2,1fr)
    }
    .customer-fields-grid {
      grid-template-columns:repeat(2,1fr)
    }
  }
  @media (max-width:600px) {
    .customers-grid {
      grid-template-columns:1fr
    }
    .customer-sidebar {
      width:100%
    }
  }
  .customer-mark {
    font-size:13px;
    font-weight:600;
    color:var(--accent);
    margin-bottom:3px
  }
}
@layer pages {
  .home-top-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,3fr);
    gap:20px;
    margin-bottom:24px
  }
  .stat-card-lg {
    background:var(--bg-card);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    padding:20px;
    backdrop-filter:blur(16px);
    position:relative;
    overflow:hidden
  }
  .stat-card-lg::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,#06b6d4,#8b5cf6);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0
  }
  .stat-card-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px
  }
  .stat-card-title {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    gap:8px
  }
  .stat-card-icon {
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(128,128,128,0.1);
    border-radius:8px;
    font-size:14px
  }
  .smart-stat-tabs {
    display:flex;
    gap:4px;
    padding:3px;
    background:rgba(128,128,128,0.06);
    border-radius:8px
  }
  .smart-tab {
    padding:4px 12px;
    font-size:12px;
    font-weight:600;
    border-radius:6px;
    border:none;
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
    transition:all 0.2s
  }
  .smart-tab:hover {
    color:var(--text-primary);
    background:rgba(128,128,128,0.08)
  }
  .smart-tab.active {
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    color:white;
    box-shadow:0 2px 6px var(--accent-glow)
  }
  .stat-card-value {
    font-size:32px;
    font-weight:700;
    font-family:var(--font-mono);
    margin-bottom:16px
  }
  .stat-card-sub {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding-top:12px;
    border-top:1px solid var(--border-subtle)
  }
  .stat-sub-item {
    text-align:center
  }
  .stat-sub-label {
    font-size:10px;
    color:var(--text-muted);
    margin-bottom:4px
  }
  .stat-sub-value {
    font-size:14px;
    font-weight:600;
    font-family:var(--font-mono)
  }
  .pipeline-card {
    background:var(--bg-card);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    padding:24px 20px;
    position:relative;
    overflow:hidden
  }
  .pipeline-card::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg,#f59e0b,#06b6d4,#10b981);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0
  }
  .pipeline-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px
  }
  .pipeline-title {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    gap:8px
  }
  .pipeline-total {
    font-size:12px;
    color:var(--text-muted)
  }
  .pipeline-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0;
    padding:4px 0
  }
  /* --- Pipeline Node: Glass Card --- */
  .pipeline-node {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    cursor:default;
    padding:12px 8px 10px;
    border-radius:12px;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    min-width:68px;
    position:relative;
    background:rgba(128,128,128,0.04);
    border:1px solid transparent
  }
  .pipeline-node.active {
    cursor:pointer;
    background:rgba(6,182,212,0.06);
    border-color:rgba(6,182,212,0.15);
    box-shadow:0 0 12px rgba(6,182,212,0.08)
  }
  .pipeline-node.active:hover {
    background:rgba(6,182,212,0.12);
    border-color:rgba(6,182,212,0.3);
    box-shadow:0 0 20px rgba(6,182,212,0.15);
    transform:translateY(-3px)
  }
  /* Icon */
  .pipeline-icon {
    width:20px;
    height:20px;
    color:var(--text-muted);
    opacity:0.4;
    transition:all 0.3s
  }
  .pipeline-icon svg {
    width:20px;
    height:20px
  }
  .pipeline-node.active .pipeline-icon {
    color:var(--cyan-primary);
    opacity:1;
    filter:drop-shadow(0 0 4px rgba(6,182,212,0.4))
  }
  /* Count */
  .pipeline-count {
    font-size:22px;
    font-weight:700;
    font-family:var(--font-mono);
    color:var(--text-muted);
    line-height:1;
    opacity:0.35;
    transition:all 0.3s
  }
  .pipeline-node.active .pipeline-count {
    color:var(--cyan-primary);
    opacity:1;
    text-shadow:0 0 12px rgba(6,182,212,0.5)
  }
  /* Label */
  .pipeline-label {
    font-size:10px;
    color:var(--text-muted);
    white-space:nowrap;
    opacity:0.5;
    transition:all 0.3s
  }
  .pipeline-node.active .pipeline-label {
    color:var(--cyan-primary);
    font-weight:600;
    opacity:1
  }
  /* Glow ring behind active nodes */
  .pipeline-glow {
    position:absolute;
    top:50%;
    left:50%;
    width:90%;
    height:90%;
    transform:translate(-50%,-50%);
    border-radius:12px;
    background:radial-gradient(ellipse,rgba(6,182,212,0.12) 0%,transparent 70%);
    animation:pipelineGlow 3s ease-in-out infinite;
    pointer-events:none
  }
  /* --- Connector: flowing energy line --- */
  .pipeline-connector {
    flex:1;
    height:2px;
    background:rgba(128,128,128,0.15);
    min-width:6px;
    margin:0;
    align-self:center;
    position:relative;
    overflow:hidden;
    border-radius:1px
  }
  .pipeline-connector-flow {
    position:absolute;
    top:0;
    left:-100%;
    width:60%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(6,182,212,0.6),var(--cyan-primary),rgba(6,182,212,0.6),transparent);
    animation:pipelineFlow 2.5s linear infinite;
    border-radius:1px
  }
  @keyframes pipelineGlow {
    0%,100% {
      opacity:0.6;
      transform:translate(-50%,-50%) scale(1)
    }
    50% {
      opacity:1;
      transform:translate(-50%,-50%) scale(1.05)
    }
  }
  @keyframes pipelineFlow {
    0% {
      left:-60%
    }
    100% {
      left:100%
    }
  }
  .pipeline-tooltip {
    position:fixed;
    z-index:9999;
    background:rgba(15,23,42,0.96);
    border:1px solid var(--border-subtle);
    border-radius:12px;
    padding:12px;
    min-width:280px;
    max-width:360px;
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
    pointer-events:none;
    opacity:0;
    transition:opacity 0.15s ease;
    transform:translateY(4px);
    backdrop-filter:blur(12px)
  }
  .pipeline-tooltip.visible {
    opacity:1;
    transform:translateY(0);
    pointer-events:auto
  }
  .pipeline-tooltip::before {
    content:"";
    position:absolute;
    top:-4px;
    left:0;
    right:0;
    height:4px;
    background:transparent
  }
  .pipeline-tooltip-header {
    font-size:12px;
    font-weight:600;
    color:var(--cyan-primary);
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:6px;
    padding-bottom:8px;
    border-bottom:1px solid var(--border-subtle)
  }
  .pipeline-tooltip-list {
    display:flex;
    flex-direction:column;
    gap:3px
  }
  .pipeline-tooltip-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6px 8px;
    border-radius:6px;
    background:rgba(128,128,128,0.06);
    font-size:11px;
    transition:background 0.15s
  }
  .pipeline-tooltip-item:hover {
    background:rgba(6,182,212,0.15);
    pointer-events:auto
  }
  .pipeline-tooltip-order {
    color:var(--cyan-primary);
    font-weight:600;
    font-family:var(--font-mono);
    font-size:11px
  }
  .pipeline-tooltip-customer {
    color:var(--text-secondary);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100px
  }
  .pipeline-tooltip-amount {
    color:var(--text-muted);
    font-family:var(--font-mono);
    font-size:11px;
    white-space:nowrap;
    margin-left:8px
  }
}
.charts-row {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:24px
}
.charts-row.three-cols {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.chart-section {
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:24px
}
.chart-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  flex-wrap:wrap;
  gap:12px
}
.chart-title {
  font-size:15px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px
}
.chart-controls {
  display:flex;
  align-items:center;
  gap:8px
}
.metric-buttons {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.metric-btn {
  padding:4px 10px;
  font-size:11px;
  border-radius:6px;
  border:1px solid var(--border-subtle);
  background:var(--bg-input);
  color:var(--text-secondary);
  cursor:pointer;
  transition:all 0.2s
}
.metric-btn:hover {
  border-color:var(--cyan-primary)
}
.metric-btn.active {
  background:var(--cyan-primary);
  color:white;
  border-color:var(--cyan-primary)
}
.metric-btn.metric-revenue.active {
  background:#60a5fa
}
.metric-btn.metric-profit.active {
  background:#10b981
}
.metric-btn.metric-qty.active {
  background:#34d399
}
.metric-btn.metric-orders.active {
  background:#f472b6
}
.metric-btn.metric-customers.active {
  background:#a78bfa
}
.metric-btn.metric-avgPrice.active {
  background:#fb923c
}
.time-filter {
  display:flex;
  gap:4px;
  margin-left:12px
}
.time-btn {
  padding:4px 8px;
  font-size:11px;
  border-radius:6px;
  border:1px solid var(--border-subtle);
  background:var(--bg-input);
  color:var(--text-secondary);
  cursor:pointer;
  transition:all 0.2s
}
.time-btn.active {
  background:var(--cyan-primary);
  color:white;
  border-color:var(--cyan-primary)
}
.chart-container {
  position:relative;
  height:320px;
  width:100%
}
.radar-section {
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:20px;
  display:flex;
  flex-direction:column
}
.radar-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px
}
.radar-title {
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px
}
.radar-container {
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px
}

/* 最新动态列表 */
.recent-logs-list {
  flex: 1;
  overflow-y: auto;
  max-height: 340px;
}
.recent-logs-list::-webkit-scrollbar { width: 3px; }
.recent-logs-list::-webkit-scrollbar-thumb { background: var(--border-card); border-radius: 2px; }
.log-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.log-item:last-child { border-bottom: none; }
.log-item:hover { background: rgba(128, 128, 128, 0.08); }
.log-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 11px;
  color: var(--accent);
}
.log-order {
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  min-width: 40px;
}
.log-content {
  flex: 1;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-customer {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 11px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-time {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
  min-width: 50px;
  text-align: right;
}
.top3-grid {
  display:flex;
  flex-direction:column;
  gap:14px
}
.top3-card {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:16px;
  background:rgba(128,128,128,0.05);
  border:1px solid var(--border-subtle);
  border-radius:14px;
  padding:16px;
  cursor:pointer;
  transition:all 0.2s
}
.top3-card:hover {
  border-color:var(--cyan-primary);
  transform:translateY(-3px);
  box-shadow:0 6px 24px rgba(6,182,212,0.2)
}
.top3-img {
  width:64px;
  height:64px;
  border-radius:12px;
  object-fit:cover;
  flex-shrink:0
}
.top3-placeholder {
  width:64px;
  height:64px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:700;
  color:#fff;
  flex-shrink:0
}
.top3-info {
  flex:1;
  min-width:0
}
.top3-rank-badge {
  display:inline-block;
  padding:2px 10px;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  margin-bottom:4px
}
.top3-rank-badge.rank-gold {
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:white
}
.top3-rank-badge.rank-silver {
  background:linear-gradient(135deg,#94a3b8,#cbd5e1);
  color:#0f172a
}
.top3-rank-badge.rank-bronze {
  background:linear-gradient(135deg,#b45309,#d97706);
  color:white
}
.top3-rank {
  font-size:14px;
  margin-bottom:2px
}
.top3-name {
  font-size:15px;
  font-weight:600;
  color:var(--cyan-primary)
}
.top3-color {
  font-size:12px;
  color:var(--text-secondary);
  margin-top:3px
}
.top3-stats {
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-size:13px;
  color:var(--text-muted);
  font-family:var(--font-mono)
}
.podium-wrapper {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:12px;
  padding:16px 12px 0;
  min-height:240px
}
.podium-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  width:100px;
  cursor:pointer;
  transition:transform 0.3s;
  animation:podiumFadeIn 0.6s ease-out both
}
.podium-item.rank-1 { animation-delay:0.3s }
.podium-item.rank-2 { animation-delay:0.1s }
.podium-item.rank-3 { animation-delay:0.5s }
.podium-item:hover {
  transform:translateY(-6px)
}
/* Avatar */
.podium-avatar {
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  border:2px solid rgba(255,255,255,0.15);
  margin-bottom:8px;
  position:relative;
  z-index:2;
  animation:podiumAvatarDrop 0.5s ease-out both
}
.podium-item.rank-1 .podium-avatar { animation-delay:0.5s }
.podium-item.rank-2 .podium-avatar { animation-delay:0.3s }
.podium-item.rank-3 .podium-avatar { animation-delay:0.7s }
.podium-avatar.gold {
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  border-color:rgba(251,191,36,0.4);
  box-shadow:0 0 20px rgba(251,191,36,0.3),0 4px 16px rgba(0,0,0,0.4)
}
.podium-avatar.silver {
  background:linear-gradient(135deg,#94a3b8,#cbd5e1);
  color:#0f172a
}
.podium-avatar.bronze {
  background:linear-gradient(135deg,#b45309,#d97706)
}
/* Crown glow for #1 */
.podium-item.rank-1 .podium-avatar::after {
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid rgba(251,191,36,0.3);
  animation:podiumCrownGlow 2s ease-in-out infinite;
  pointer-events:none
}
/* Step / Pedestal */
.podium-step {
  width:100%;
  border-radius:8px 8px 0 0;
  position:relative;
  overflow:hidden;
  background:rgba(128,128,128,0.06)
}
.podium-step-fill {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:0;
  border-radius:8px 8px 0 0;
  animation:podiumRise 0.8s ease-out both
}
.podium-item.rank-1 .podium-step-fill {
  animation-delay:0.3s;
  background:linear-gradient(180deg,rgba(251,191,36,0.25),rgba(251,191,36,0.08))
}
.podium-item.rank-2 .podium-step-fill {
  animation-delay:0.1s;
  background:linear-gradient(180deg,rgba(148,163,184,0.2),rgba(148,163,184,0.06))
}
.podium-item.rank-3 .podium-step-fill {
  animation-delay:0.5s;
  background:linear-gradient(180deg,rgba(217,119,6,0.2),rgba(217,119,6,0.06))
}
/* Info below step */
.podium-info {
  text-align:center;
  padding:8px 0 4px
}
.podium-rank-badge {
  width:22px;
  height:22px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#fff;
  margin-bottom:4px;
  box-shadow:0 2px 8px rgba(0,0,0,0.3)
}
.podium-rank-badge.gold {
  background:linear-gradient(135deg,#fbbf24,#f59e0b)
}
.podium-rank-badge.silver {
  background:linear-gradient(135deg,#94a3b8,#cbd5e1);
  color:#0f172a
}
.podium-rank-badge.bronze {
  background:linear-gradient(135deg,#b45309,#d97706)
}
.podium-name {
  font-size:12px;
  font-weight:600;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:90px
}
.podium-stats {
  font-size:11px;
  color:var(--text-secondary);
  font-family:var(--font-mono);
  font-weight:600
}
/* Animations */
@keyframes podiumRise {
  from { height:0 }
  to { height:100% }
}
@keyframes podiumAvatarDrop {
  from { opacity:0; transform:translateY(-20px) scale(0.6) }
  to { opacity:1; transform:translateY(0) scale(1) }
}
@keyframes podiumFadeIn {
  from { opacity:0; transform:translateY(16px) }
  to { opacity:1; transform:translateY(0) }
}
@keyframes podiumCrownGlow {
  0%,100% { opacity:0.4; transform:scale(1) }
  50% { opacity:1; transform:scale(1.08) }
}
.ranking-rank.gold {
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:white
}
.ranking-rank.silver {
  background:linear-gradient(135deg,#94a3b8,#cbd5e1);
  color:#0f172a
}
.ranking-rank.bronze {
  background:linear-gradient(135deg,#b45309,#d97706);
  color:white
}
.ranking-rank.normal {
  background:rgba(148,163,191,0.3);
  color:var(--text-secondary)
}
.size-chart-container {
  height:370px;
  position:relative
}
.live-container {
  position:relative;
  overflow:hidden;
  border-radius:8px;
  aspect-ratio:16/9;
}
/* 回放按钮 */
.cam-playback-btn {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  font-size:12px;
  color:var(--text-secondary);
  background:rgba(6,182,212,0.1);
  border:1px solid rgba(6,182,212,0.3);
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all 0.2s;
}
.cam-playback-btn:hover {
  background:rgba(6,182,212,0.2);
  color:var(--text-primary);
}
/* 监控弹窗 */
.cam-modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.8);
  backdrop-filter:blur(6px);
  z-index:var(--z-modal);
  display:none;
  align-items:center;
  justify-content:center;
  animation:fadeIn 0.2s ease;
}
.cam-modal-overlay.active {
  display:flex;
}
.cam-modal {
  position:relative;
  width:90vw;
  max-width:1200px;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,0.5);
}
.cam-modal iframe {
  width:100%;
  height:100%;
  border:none;
}
.cam-modal-close {
  position:absolute;
  top:12px;
  right:12px;
  z-index:10;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s;
}
.cam-modal-close:hover {
  background:rgba(255,255,255,0.2);
}
.cam-modal-tabs {
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  gap:8px;
  background:rgba(0,0,0,0.6);
  padding:4px;
  border-radius:var(--radius-full);
}
.cam-modal-tab {
  padding:6px 16px;
  font-size:12px;
  color:rgba(255,255,255,0.7);
  background:none;
  border:none;
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all 0.2s;
}
.cam-modal-tab.active {
  background:rgba(6,182,212,0.5);
  color:#fff;
}
@media (max-width:1024px) {
  .charts-row.three-cols {
    grid-template-columns:repeat(2,1fr)
  }
}
@media (max-width:1200px) {
  .home-top-row {
    grid-template-columns:1fr
  }
  .charts-row {
    grid-template-columns:1fr
  }
  .pipeline-bar {
    flex-wrap:wrap;
    gap:8px
  }
  .pipeline-connector {
    display:none
  }
}
@media (max-width:900px) {
  .charts-row.three-cols {
    grid-template-columns:1fr
  }
  .top3-grid {
    grid-template-columns:repeat(2,1fr)
  }
}
@media (max-width:768px) {
  .top3-grid {
    grid-template-columns:1fr
  }
  .pipeline-bar {
    justify-content:flex-start
  }
  .chart-legend {
    display:flex;
    gap:8px;
    font-size:10px;
    color:var(--text-secondary)
  }
}
/* pages/login.css — 登录页样式 v8.201 */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 24px 16px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-logo {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--cyber-cyan);
}

.login-logo svg {
  width: 64px;
  height: 64px;
}

.login-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--cyber-text);
  margin: 0 0 32px 0;
  text-align: center;
  letter-spacing: 1px;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field label {
  font-size: 13px;
  color: var(--cyber-text-secondary);
  letter-spacing: 0.5px;
}

.login-field input {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--cyber-text);
  background: rgba(6, 182, 212, 0.05);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: system-ui, -apple-system, sans-serif;
}

.login-field input:focus {
  border-color: var(--cyber-cyan);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

.login-field input::placeholder {
  color: var(--cyber-text-muted);
}

.login-remember {
  display: flex;
  align-items: center;
}

.login-remember label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cyber-text-secondary);
  cursor: pointer;
  user-select: none;
}

.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--cyber-cyan);
  cursor: pointer;
}

.login-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 4px;
  margin-top: 8px;
  cursor: pointer;
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-error {
  min-height: 20px;
  font-size: 13px;
  color: #ff4757;
  text-align: center;
}

/* 手机端 */
@media (max-width: 480px) {
  .login-page {
    min-height: calc(100vh - 100px);
    padding: 16px 12px;
  }

  .login-card {
    padding: 32px 20px;
  }

  .login-logo {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .login-logo svg {
    width: 48px;
    height: 48px;
  }

  .login-title {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .login-form {
    gap: 16px;
  }

  .login-field input {
    padding: 10px 12px;
    font-size: 14px;
  }
}
@layer pages {
.order-detail-page {
margin:0 auto;
padding:20px;
padding-bottom:100px}
/* 工具条 */
.detail-toolbar {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 0;
margin-bottom:4px;
flex-wrap:wrap}
.detail-toolbar-left {
display:flex;
align-items:center;
gap:10px;
min-width:0;
flex:1}
.detail-toolbar-info {
font-size:14px;
font-weight:600;
color:var(--text-primary);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.detail-toolbar-right {
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
flex-wrap:wrap}
.detail-status-badge {
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:0 0 8px 0;
font-size:12px;
font-weight:600;
background:rgba(16,185,129,0.15);
color:var(--color-success);
border:1px solid rgba(16,185,129,0.2);
white-space:nowrap}
.cyber-card.rainbow-border {
overflow-x:visible}
.status-timeline {
display:flex;
align-items:center;
gap:0;
padding:20px 0 16px 0;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
position:relative;
scroll-behavior:smooth;
width:100%;
box-sizing:border-box;
margin-bottom:16px}
.status-timeline::-webkit-scrollbar {
display:none}
.status-timeline::before {
content:'';
position:absolute;
top:33px;
left:var(--line-start,0px);
width:var(--line-width,100%);
height:2px;
background:var(--border-subtle);
border-radius:1px;
z-index:0}
.status-timeline::after {
content:'';
position:absolute;
top:33px;
left:var(--line-start,0px);
height:2px;
background:linear-gradient(90deg,#06b6d4,#10b981);
border-radius:1px;
z-index:1;
transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
width:var(--progress-width,0px);
box-shadow:0 0 6px rgba(6,182,212,0.4)}
.progress-shimmer {
position:absolute;
top:33px;
left:var(--line-start,0px);
height:2px;
z-index:1;
width:var(--progress-width,0px);
overflow:hidden;
border-radius:1px;
pointer-events:none}
.progress-shimmer::after {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent 0%,rgba(6,182,212,0.6) 40%,rgba(6,182,212,0.8) 50%,rgba(6,182,212,0.6) 60%,transparent 100% );
background-size:100% 100%;
animation:shimmerSlide 2s ease-in-out infinite}
@keyframes shimmerSlide {
0% {
transform:translateX(-100%)}
100% {
transform:translateX(100%)}
}
.timeline-step {
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
flex:1 1 0;
min-width:0;
padding:0 4px;
position:relative;
z-index:3}
.timeline-track {
display:flex;
align-items:center;
justify-content:center;
position:relative;
height:28px;
width:100%}
.timeline-dot {
width:12px;
height:12px;
border-radius:50%;
background:var(--border-subtle);
flex-shrink:0;
z-index:5;
position:relative;
transition:all 0.4s cubic-bezier(0.4,0,0.2,1)}
.timeline-line {
display:none}
.timeline-step.done .timeline-dot {
background:var(--color-success);
box-shadow:0 0 12px rgba(16,185,129,0.4)}
.timeline-step.current .timeline-dot {
width:12px;
height:12px;
position:relative;
background:var(--cyan-primary);
box-shadow:0 0 12px rgba(6,182,212,0.5),0 0 24px rgba(6,182,212,0.2)}
.timeline-step.current .timeline-dot::before {
content:'';
position:absolute;
top:0;
left:0;
width:12px;
height:12px;
border-radius:50%;
border:1.5px solid rgba(6,182,212,0.25);
animation:ringPulse 2.5s ease-in-out infinite}
@keyframes ringPulse {
0%,100% {
transform:scale(1);
opacity:0.7}
50% {
transform:scale(1.6);
opacity:0.15}
}
.timeline-step.future .timeline-dot {
background:var(--border-subtle)}
.timeline-step.voided .timeline-dot {
background:var(--color-danger);
box-shadow:0 0 12px rgba(239,68,68,0.4)}
.timeline-label {
font-size:11px;
color:var(--text-muted);
text-align:center;
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:95px;
transition:all 0.3s;
line-height:1.3}
.timeline-step.done .timeline-label {
color:var(--color-success);
font-weight:600;
text-shadow:0 0 10px rgba(16,185,129,0.3)}
.timeline-step.current .timeline-label {
color:var(--cyan-primary);
font-weight:700;
text-shadow:0 0 10px rgba(6,182,212,0.3)}
.timeline-step.voided .timeline-label {
color:var(--color-danger);
font-weight:700;
text-shadow:0 0 10px rgba(239,68,68,0.3)}
.order-info-grid {
display:flex;
flex-direction:column;
gap:6px;
padding:12px 0 8px}
.order-info-row {
display:flex;
align-items:center;
padding:14px 16px;
border-radius:var(--radius-md);
transition:background 0.15s;
gap:16px}
.order-info-row:hover {
background:rgba(128,128,128,0.06)}
.order-info-row .order-info-label {
font-size:16px;
color:var(--text-muted);
font-weight:600;
flex-shrink:0;
min-width:72px}
.order-info-row .order-info-value {
font-size:18px;
font-weight:700;
color:var(--text-primary);
font-family:var(--font-mono);
text-align:left}
.order-info-row:nth-child(1) .order-info-value {
font-size:24px;
font-weight:800;
color:var(--cyan-primary);
font-family:inherit;
letter-spacing:0.5px}
.order-info-row:nth-child(2) .order-info-value,.order-info-row:nth-child(4) .order-info-value {
font-size:16px;
color:var(--text-secondary);
letter-spacing:0.3px}
.order-info-row:nth-child(2) .order-info-label,.order-info-row:nth-child(4) .order-info-label {
font-size:13px;
opacity:0.7}
.order-info-row:nth-child(3) .order-info-value {
font-size:24px;
font-weight:800;
color:#E67E22}
.order-info-unit {
font-size:14px;
font-weight:600;
margin-left:3px;
opacity:0.7}
.payment-cards {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-bottom:20px}
.payment-card {
display:flex;
flex-direction:column;
gap:8px;
padding:20px;
background:var(--bg-input);
border:1px solid var(--border-subtle);
border-radius:var(--radius-md);
transition:all 0.3s;
position:relative}
.payment-card:hover {
border-color:var(--border-hover);
transform:translateY(-2px)}
.payment-card.deposit {
border-color:rgba(16,185,129,0.3);
background:rgba(16,185,129,0.05)}
.payment-card.balance {
border-color:rgba(245,158,11,0.3);
background:rgba(245,158,11,0.05)}
.payment-card-label {
font-size:11px;
color:var(--text-muted);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px}
.payment-card-value {
font-size:24px;
font-weight:700;
color:var(--text-primary);
font-family:var(--font-mono);
line-height:1.2}
.card-header {
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 16px;
border-bottom:1px solid var(--border-subtle);
background:rgba(128,128,128,0.03);
border-radius:var(--radius-md) var(--radius-md) 0 0}
.card-title {
font-size:14px;
font-weight:700;
color:var(--text-primary);
letter-spacing:0.5px;
display:flex;
align-items:center;
gap:6px}
[data-theme="cyber"] .card-title {
text-transform:uppercase;
letter-spacing:1px}
.status-actions {
display:flex;
gap:8px;
align-items:center}
.detail-grid-2col {
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:20px;
align-items:stretch}
.detail-grid-info {
grid-template-columns:1fr 2fr}
.payment-hero {
padding:16px}
.payment-detail {
padding:12px;
background:rgba(128,128,128,0.03);
border-radius:var(--radius-sm);
margin-top:12px}
.payment-row {
display:flex;
justify-content:space-between;
align-items:center;
padding:6px 0;
border-bottom:1px solid var(--border-subtle)}
.payment-row:last-child {
border-bottom:none}
.payment-row-label {
font-size:12px;
color:var(--text-muted)}
.payment-row-value {
font-size:14px;
font-weight:600;
color:var(--text-primary);
font-family:var(--font-mono)}
.payment-progress-bar {
height:6px;
background:var(--border-subtle);
border-radius:3px;
overflow:hidden;
margin:12px 0;
position:relative}
.payment-progress-fill {
height:100%;
background:linear-gradient(90deg,var(--cyan-primary),var(--color-success),var(--cyan-primary));
background-size:200% 100%;
border-radius:3px;
transition:width 0.3s;
animation:progressShimmer 2s linear infinite}
@keyframes progressShimmer {
0% {
background-position:200% 0}
100% {
background-position:-200% 0}
}
.profit-section {
border-top:1px solid rgba(128,128,128,0.08);
margin-top:12px;
padding-top:12px}
.profit-detail {
padding:12px;
background:rgba(128,128,128,0.03);
border-radius:var(--radius-sm);
margin-top:8px}
.products-card-list {
display:none}
.product-item {
display:grid;
grid-template-columns:80px 1fr auto;
gap:16px;
padding:12px;
border:1px solid var(--border-subtle);
border-radius:var(--radius-md);
background:var(--bg-input);
align-items:center}
.product-item-img {
width:80px;
height:80px;
border-radius:var(--radius-sm);
object-fit:cover;
background:var(--border-subtle)}
.product-item-info {
display:flex;
flex-direction:column;
gap:6px}
.product-item-no {
font-size:14px;
font-weight:600;
color:var(--text-primary);
font-family:var(--font-mono)}
.product-item-color {
font-size:12px;
color:var(--text-secondary)}
.product-item-price {
font-size:13px;
font-weight:600;
color:var(--cyan-primary);
font-family:var(--font-mono)}
.product-item-qty {
font-size:12px;
color:var(--text-muted)}
.product-item-actions {
display:flex;
gap:8px}
.detail-fields {
display:flex;
flex-direction:column;
gap:12px;
padding:16px}
.detail-field {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 12px;
background:var(--bg-input);
border:1px solid var(--border-subtle);
border-radius:var(--radius-sm)}
.detail-field-label {
font-size:12px;
color:var(--text-muted);
font-weight:600}
.detail-field-value {
font-size:13px;
color:var(--text-primary);
font-family:var(--font-mono)}
.notes-card,.log-card {
display:flex;
flex-direction:column;
min-height:0;
max-height:420px}
.notes-list {
display:flex;
flex-direction:column;
gap:8px;
padding:16px;
flex:1;
overflow-y:auto}
.notes-item {
padding:10px 12px;
background:var(--bg-input);
border:1px solid var(--border-subtle);
border-radius:var(--radius-sm);
font-size:13px;
color:var(--text-primary);
line-height:1.5}
.notes-input-bar {
display:flex;
gap:8px;
padding:12px 16px;
border-top:1px solid var(--border-subtle);
flex-shrink:0}
.log-list {
display:flex;
flex-direction:column;
gap:8px;
padding:16px;
flex:1;
overflow-y:auto}
.log-item {
padding:10px 12px;
background:var(--bg-input);
border:1px solid var(--border-subtle);
border-radius:var(--radius-sm);
font-size:12px}
.log-time {
font-size:10px;
color:var(--text-muted);
font-family:var(--font-mono);
margin-bottom:4px}
.log-content {
color:var(--text-primary)}
.log-item-warehouse {
border-left:3px solid var(--cyan-primary);
background:rgba(6,182,212,0.04)}
.log-item-warehouse .log-time {
color:var(--cyan-primary)}
@media (max-width:1024px) {
.order-detail-page {
padding:16px;
padding-bottom:80px}
.detail-grid-2col {
grid-template-columns:1fr;
gap:16px}
.payment-cards {
grid-template-columns:repeat(2,1fr);
gap:12px}
.status-timeline {
padding:12px 0 10px 0;
width:100%;
box-sizing:border-box}
.status-timeline::before,.status-timeline::after,.status-timeline .progress-shimmer {
top:25px;
left:var(--line-start,0px);
height:2px}
.timeline-step {
flex:1 1 0;
min-width:0;
padding:0 3px;
gap:12px}
.timeline-dot {
width:10px;
height:10px}
.timeline-step.current .timeline-dot {
width:10px;
height:10px}
.timeline-step.current .timeline-dot::before {
width:10px;
height:10px}
.timeline-track {
height:24px}
.timeline-label {
font-size:10px;
max-width:85px}
.cyber-table-container {
overflow-x:auto}
.cyber-table th,.cyber-table td {
white-space:nowrap}
.photo-grid-wrapper {
max-height:220px;
overflow-y:auto;
overflow-x:hidden}
.photo-grid {
grid-template-columns:repeat(4,1fr);
gap:8px;
padding:12px}
.products-card-list {
display:none}
}
@media (max-width:768px) {
.order-detail-page {
padding:12px;
padding-bottom:100px}
.status-timeline {
padding:10px 0 8px 0;
max-width:100%;
width:100%;
box-sizing:border-box}
.status-timeline::before,.status-timeline::after,.status-timeline .progress-shimmer {
top:23px;
left:var(--line-start,0px);
height:2px}
.timeline-step {
flex:1 1 0;
min-width:0;
padding:0 2px;
gap:10px}
.timeline-dot {
width:8px;
height:8px}
.timeline-step.current .timeline-dot {
width:8px;
height:8px}
.timeline-step.current .timeline-dot::before {
width:8px;
height:8px}
.timeline-track {
height:20px}
.timeline-label {
font-size:9px;
max-width:70px}
.card-header {
padding:12px 14px}
.card-title {
font-size:13px}
.payment-cards {
grid-template-columns:1fr;
gap:10px}
.payment-card {
padding:14px}
.payment-card-label {
font-size:10px}
.payment-card-value {
font-size:20px}
.cyber-table-container {
display:none}
.products-card-list {
display:flex;
flex-direction:column;
gap:10px;
padding:0 14px 14px 14px}
.product-item {
display:grid;
grid-template-columns:60px 1fr;
gap:10px;
padding:10px;
border:1px solid var(--border-subtle);
border-radius:var(--radius-md);
background:var(--bg-input);
align-items:center}
.product-item-img {
width:60px;
height:60px;
border-radius:var(--radius-sm);
object-fit:cover;
background:var(--border-subtle)}
.product-item-info {
display:flex;
flex-direction:column;
gap:4px}
.product-item-no {
font-size:13px;
font-weight:600;
color:var(--text-primary);
font-family:var(--font-mono)}
.product-item-color {
font-size:11px;
color:var(--text-secondary)}
.product-item-price {
font-size:12px;
font-weight:600;
color:var(--cyan-primary);
font-family:var(--font-mono)}
.product-item-qty {
font-size:11px;
color:var(--text-muted)}
.product-item-actions {
grid-column:2;
display:flex;
gap:6px}
.detail-fields {
padding:12px;
gap:10px}
.detail-field {
padding:10px}
.detail-field-label {
font-size:11px}
.detail-field-value {
font-size:12px;
color:var(--text-primary);
font-weight:600}
.photo-grid-wrapper {
max-height:180px;
overflow-y:auto;
overflow-x:hidden}
.photo-grid {
grid-template-columns:repeat(4,1fr);
gap:6px;
padding:12px}
.photo-wall-item {
border-radius:6px}
.photo-wall-delete {
width:20px;
height:20px;
font-size:12px}
.notes-list,.log-list {
padding:12px;
max-height:250px;
gap:6px}
.notes-item,.log-item {
padding:10px;
font-size:12px}
.notes-input-bar {
padding:10px 12px;
gap:6px}
.notes-input-bar input {
font-size:13px}
.notes-input-bar button {
padding:6px 12px;
font-size:12px}
.detail-toolbar-right {
flex-wrap:wrap;
gap:6px}
.detail-toolbar-right .cyber-btn {
padding:6px 12px;
font-size:11px}
.detail-toolbar-info {
font-size:12px}
}
@media (max-width:480px) {
.order-detail-page {
padding:8px;
padding-bottom:100px}
.timeline-step {
flex:1 1 0;
min-width:0;
padding:0 2px;
gap:8px}
.status-timeline::before,.status-timeline::after,.status-timeline .progress-shimmer {
top:21px;
left:var(--line-start,0px);
height:2px}
.timeline-dot {
width:6px;
height:6px}
.timeline-step.current .timeline-dot {
width:6px;
height:6px}
.timeline-step.current .timeline-dot::before {
width:6px;
height:6px}
.timeline-track {
height:16px}
.timeline-label {
font-size:8px;
max-width:62px}
.cyber-card {
border-radius:var(--radius-md)}
.card-header {
padding:10px 12px}
.card-title {
font-size:12px}
.payment-card {
padding:12px}
.payment-card button.cyber-btn.secondary {
padding:3px 8px;
font-size:11px;
border-radius:6px}
.payment-card-value {
font-size:18px}
}
.row-delete-btn {
width:28px;
height:28px;
border:none;
background:transparent;
color:var(--text-muted);
cursor:pointer;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.2s;
padding:0}
.row-delete-btn:hover {
background:rgba(239,68,68,0.1);
color:var(--color-danger)}
.delete-icon {
width:12px;
height:12px;
position:relative}
.delete-icon::before,.delete-icon::after {
content:'';
position:absolute;
top:50%;
left:50%;
width:12px;
height:1.5px;
background:currentColor;
border-radius:1px}
.delete-icon::before {
transform:translate(-50%,-50%) rotate(45deg)}
.delete-icon::after {
transform:translate(-50%,-50%) rotate(-45deg)}
.product-item-actions .cyber-btn.danger {
position:relative;
width:32px;
height:32px;
padding:0;
min-width:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
font-size:0}
.product-item-actions .cyber-btn.danger .delete-icon {
width:10px;
height:10px}
.items-footer {
padding:12px 16px 16px 16px;
display:flex;
justify-content:center}
.items-footer .cyber-btn {
border:1px dashed var(--border-subtle);
background:rgba(6,182,212,0.03);
color:var(--text-muted);
font-size:13px;
font-weight:600;
letter-spacing:0.5px;
border-radius:var(--radius-sm);
transition:all 0.3s;
padding:10px 24px;
min-width:140px}
.items-footer .cyber-btn::before {
content:'+';
margin-right:6px;
font-size:16px;
font-weight:300;
line-height:1}
.items-footer .cyber-btn:hover {
border-color:var(--cyan-primary);
color:var(--cyan-primary);
background:rgba(6,182,212,0.08);
box-shadow:0 0 20px rgba(6,182,212,0.1);
transform:translateY(-1px)}
.items-footer .cyber-btn:active {
transform:translateY(0)}
.order-detail-page .profit-toggle {
cursor:pointer;
padding:12px 0;
display:flex;
align-items:center;
gap:10px;
color:var(--text-muted);
font-size:13px;
border-top:1px solid rgba(128,128,128,0.08);
user-select:none;
transition:color 0.2s}
.profit-toggle:hover {
color:var(--cyan-primary)}
.profit-toggle .profit-lock-icon {
width:14px;
height:14px;
opacity:0.5}
.profit-toggle .profit-arrow {
transition:transform 0.2s;
font-size:8px;
opacity:0.5;
margin-left:auto;
width:16px;
height:16px;
display:flex;
align-items:center;
justify-content:center}
.photo-wall-empty {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:120px;
gap:10px;
color:var(--text-muted);
font-size:12px;
padding:16px}
.photo-wall-empty .photo-empty-icon {
width:36px;
height:36px;
border:2px dashed var(--border-subtle);
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
opacity:0.4}
.photo-wall-empty .photo-empty-icon::before {
content:'';
width:14px;
height:10px;
border:2px solid currentColor;
border-radius:2px;
position:relative}
.photo-wall-empty .photo-empty-icon::after {
content:'';
position:absolute;
top:-4px;
right:-4px;
width:6px;
height:6px;
border:2px solid currentColor;
border-radius:50%;
background:var(--bg-card)}
.notes-empty,.log-empty {
padding:24px 20px;
text-align:center;
color:var(--text-muted);
font-size:12px}
.order-detail-page .export-format-card:hover {
border-color:var(--cyan-primary);
background:rgba(0,210,211,0.05);
transform:translateY(-1px);
box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.export-format-card:active {
transform:translateY(0)}
.field-toggle {
display:inline-block;
padding:4px 10px;
border-radius:6px;
font-size:13px;
font-weight:400;
background:#E8E8E8;
color:#999;
cursor:pointer;
transition:all 0.15s;
user-select:none}
.field-toggle:hover {
background:#D0D0D0}
.field-toggle span {
pointer-events:none}
.photo-wall {
flex:1;
display:flex;
flex-direction:column;
min-height:0}
.photo-grid-wrapper {
flex:1;
max-height:240px;
overflow-y:auto;
overflow-x:hidden}
.photo-grid {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
padding:16px}
.order-detail-page .photo-upload-btn {
padding:4px 10px;
font-size:11px;
min-height:0;
line-height:1.2;
height:auto}
.photo-item {
position:relative;
aspect-ratio:1;
border-radius:var(--radius-sm);
overflow:hidden;
border:1px solid var(--border-subtle);
cursor:pointer;
transition:all 0.2s}
.photo-item:hover {
border-color:var(--cyan-primary);
transform:scale(1.02);
z-index:2}
.photo-item .photo-thumb {
width:100%;
height:100%;
object-fit:cover;
display:block}
.photo-hover-preview {
position:fixed;
z-index:9999;
width:280px;
height:280px;
border-radius:12px;
overflow:hidden;
opacity:0;
pointer-events:none;
transition:opacity 0.2s;
box-shadow:0 12px 40px rgba(0,0,0,0.5);
border:2px solid var(--cyan-primary);
background:var(--bg-card);
transform:scale(0.95)}
.photo-hover-preview.visible {
opacity:1;
transform:scale(1)}
.photo-hover-preview img {
width:100%;
height:100%;
object-fit:contain;
background:var(--bg-card)}
.photo-delete-btn {
position:absolute;
top:4px;
right:4px;
width:24px;
height:24px;
border-radius:50%;
background:rgba(239,68,68,0.9);
color:white;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
opacity:0;
transition:opacity 0.2s}
.photo-item:hover .photo-delete-btn {
opacity:1}
.photo-cargo-badge {
position:absolute;
top:4px;
left:4px;
padding:2px 6px;
border-radius:4px;
background:rgba(245,158,11,0.9);
color:white;
font-size:10px;
font-weight:700;
white-space:nowrap;
z-index:3;
pointer-events:none}
.photo-cargo-btn {
position:absolute;
top:4px;
right:32px;
width:24px;
height:24px;
border-radius:50%;
background:rgba(6,182,212,0.9);
color:white;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
opacity:0;
transition:opacity 0.2s;
z-index:3}
.photo-item:hover .photo-cargo-btn {
opacity:1}
.photo-item[data-cargo=true] {
border-color:rgba(245,158,11,0.5);
box-shadow:0 0 8px rgba(245,158,11,0.2)}
.order-detail-page .confirm-dialog-btn {
padding:8px 28px;
font-size:13px;
border-radius:8px;
min-width:80px;
}
.order-detail-page .confirm-dialog-btn.danger {
background:rgba(239,68,68,0.15);
border-color:rgba(239,68,68,0.3);
color:#ef4444}
.customer-hover-card {
background:var(--bg-card-solid, var(--bg-card));
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid var(--border-subtle);
border-radius:var(--radius-md);
padding:16px 20px;
box-shadow:0 8px 30px rgba(0,0,0,0.15);
min-width:280px;
max-width:340px;
z-index:999}

/* 尺码编辑弹窗 */
.size-editor-modal {
max-width:420px;
}
.size-editor-body {
display:flex;
flex-direction:column;
gap:10px;
padding:16px 0;
}
.size-editor-row {
display:flex;
align-items:center;
gap:12px;
}
.size-editor-label {
width:40px;
font-size:14px;
font-weight:600;
color:var(--text-secondary);
text-align:center;
flex-shrink:0;
}
.size-editor-input {
flex:1;
padding:8px 12px;
font-size:14px;
color:var(--text-primary);
background:var(--bg-input);
border:1px solid var(--border-subtle);
border-radius:var(--radius-sm);
outline:none;
transition:all 0.3s;
text-align:center;
font-family:var(--font-mono);
-moz-appearance:textfield;
}
.size-editor-input::-webkit-outer-spin-button,.size-editor-input::-webkit-inner-spin-button {
-webkit-appearance:none;
margin:0;
}
.size-editor-input:focus {
border-color:var(--cyan-primary);
box-shadow:0 0 0 2px rgba(6,182,212,0.2);
}
.size-editor-input::-webkit-inner-spin-button,.size-editor-input::-webkit-outer-spin-button {
opacity:0.4;
}
.size-editor-footer {
display:flex;
justify-content:space-between;
align-items:center;
padding-top:16px;
border-top:1px solid var(--border-subtle);
}
.size-editor-total {
font-size:14px;
color:var(--text-secondary);
}
.size-editor-total strong {
color:var(--cyan-primary);
font-family:var(--font-mono);
font-size:16px;
}

/* 骨架屏加载态 — 数据加载完成前隐藏所有内容 */
.order-detail-page.loading > * {
opacity:0 !important;
}

.order-detail-page.loading::after {

  content:'';
position:fixed;
top:0;
left:0;
right:0;
bottom:0;

  background:rgba(10,10,20,0.85);
backdrop-filter:blur(4px);

  z-index:998;
pointer-events:none;

  display:flex;
align-items:center;
justify-content:center;

}

.order-detail-page.loading .cyber-card::before {

  content:'';
position:absolute;
top:0;
left:0;
right:0;
height:3px;

  background:linear-gradient(90deg,transparent,var(--cyan-primary),transparent);

  background-size:200% 100%;
animation:loadBar 1.2s ease-in-out infinite;

  z-index:1;
border-radius:var(--radius-md) var(--radius-md) 0 0;

}

@keyframes loadBar {
0% {
background-position:-200% 0}
100% {
background-position:200% 0}
}

.order-detail-page.loading .cyber-card {
position:relative;
overflow:hidden;
}

.order-detail-page.loaded {
animation:fadeUp 0.5s ease;
}

@keyframes fadeUp {
from {
opacity:0.7;
transform:translateY(4px)}
to {
opacity:1;
transform:translateY(0)}
}
.cost-toggle-btn {
position:fixed;
top:0;
left:0;
width:14px;
height:14px;
z-index:9999;
cursor:pointer;
opacity:0.08;
transition:opacity 0.2s;
}
.cost-toggle-btn:hover {
opacity:0.3;
}
.cost-toggle-btn.active {
opacity:0.3;
background:rgba(6,182,212,0.3);
}
.cost-toggle-btn.active:hover {
opacity:0.6;
}
.order-detail-page.cost-hidden #profitSection {
display:none;
}
.order-detail-page.cost-visible #profitSection {
display:block;
}

}

/* ===== 验货报告弹窗 ===== */
.report-modal .cyber-modal  {
 max-width: 520px;
 width: 95%;
 max-height: 80vh;
 display: flex;
 flex-direction: column;
 padding: 0;
 }

.report-wrap  {
 display: flex;
 flex-direction: column;
 height: 100%;
 overflow: hidden;
 }

/* 固定头部区域 */
.report-head-fixed  {
 flex-shrink: 0;
 border-bottom: 1px solid var(--border-subtle);
 }

.report-head  {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px 18px;
 border-bottom: 1px solid var(--border-subtle);
 }

.report-head-left  {
 display: flex;
 align-items: center;
 gap: 8px;
 }

.report-icon  {
 font-size: 18px;
 }

.report-title  {
 font-size: 15px;
 font-weight: 700;
 }

.report-order-no  {
 font-size: 12px;
 color: var(--cyan-primary);
 font-family: var(--font-mono);
 font-weight: 600;
 background: rgba(6,182,212,0.1);
 padding: 2px 8px;
 border-radius: 4px;
 }

.report-x  {
 width: 28px;
 height: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 6px;
 border: 1px solid var(--border-subtle);
 background: transparent;
 color: var(--text-secondary);
 cursor: pointer;
 font-size: 14px;
 }

.report-x:hover  {
 background: rgba(239,68,68,0.15);
 color: #ef4444;
 }

/* 汇总 */
.report-summary  {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 6px;
 padding: 10px 18px;
 background: var(--bg-card-flat);
 border-bottom: 1px solid var(--border-subtle);
 }

.summary-card  {
 text-align: center;
 padding: 10px 4px;
 border-radius: 8px;
 background: var(--bg-input);
 }

.summary-label  {
 font-size: 10px;
 color: var(--text-muted);
 margin-bottom: 3px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 }

.summary-value  {
 font-size: 18px;
 font-weight: 700;
 }

/* 验货信息 */
.report-info-grid  {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
 padding: 8px 18px;
 }

.info-item  {
 display: flex;
 flex-direction: column;
 gap: 2px;
 align-items: center;
 text-align: center;
 }

.info-label  {
 font-size: 9px;
 color: var(--text-muted);
 }

.info-value  {
 font-size: 11px;
 font-weight: 500;
 color: var(--text-secondary);
 }

/* 可滚动内容区 */
.report-scroll  {
 flex: 1;
 overflow-y: auto;
 overflow-x: hidden;
 padding: 0;
 }

.report-scroll::-webkit-scrollbar  {
 width: 4px;
 }

.report-scroll::-webkit-scrollbar-thumb  {
 background: var(--border-subtle);
 border-radius: 2px;
 }

/* 照片区（在底部，滚动区外） */
.report-photos-area  {
 flex-shrink: 0;
 border-top: 1px solid var(--border-subtle);
 }

/* 产品块 */
.rp-block  {
 border-bottom: 1px solid var(--border-subtle);
 }

.rp-block:last-child  {
 border-bottom: none;
 }

.rp-header  {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 8px 14px;
 cursor: pointer;
 user-select: none;
 }

.rp-header:hover  {
 background: rgba(128,128,128,0.04);
 }

.rp-no  {
 font-weight: 700;
 color: var(--cyan-primary);
 font-family: var(--font-mono);
 font-size: 13px;
 }

.rp-color  {
 font-size: 11px;
 color: var(--text-secondary);
 background: var(--bg-input);
 padding: 1px 5px;
 border-radius: 3px;
 }

.rp-nums  {
 margin-left: auto;
 font-size: 11px;
 font-weight: 600;
 color: var(--text-muted);
 }

.rp-diff  {
 font-size: 11px;
 font-weight: 700;
 min-width: 36px;
 text-align: right;
 }

.rp-diff .diff-short  {
 display: inline-block;
 }

.rp-arrow  {
 font-size: 10px;
 color: var(--text-muted);
 margin-left: 2px;
 transition: transform 0.15s;
 }

/* 尺码表 */
.rp-body  {
 padding: 0 0 10px;
 }

.rp-table  {
 width: 100%;
 border-collapse: collapse;
 background: var(--bg-input);
 border-radius: 6px 6px 0 0;
 overflow: hidden;
 }

.rp-table th, .rp-table td  {
 padding: 8px 4px;
 text-align: center;
 font-size: 12px;
 }

.rp-table thead th  {
 color: var(--text-muted);
 font-size: 10px;
 text-transform: uppercase;
 font-weight: 600;
 padding: 7px 2px;
 background: rgba(128,128,128,0.08);
 letter-spacing: 0.5px;
 }

.rp-table thead th:first-child  {
 min-width: 36px;
 text-align: left;
 padding-left: 8px;
 }

.rp-table tbody th  {
 text-align: left;
 padding-left: 8px;
 color: var(--text-muted);
 font-size: 10px;
 font-weight: 600;
 background: rgba(128,128,128,0.04);
 min-width: 36px;
 }

.rp-table tbody td  {
 font-variant-numeric: tabular-nums;
 font-weight: 600;
 }

.val-ok  {
 color: var(--text-primary);
 }

.val-short  {
 color: var(--color-danger);
 background: rgba(239,68,68,0.1);
 border-radius: 6px;
 font-weight: 700;
 padding: 4px 8px;
 }

/* 缺货标签 */
/* 缺件汇总 — 对齐表格第一列(36px + padding-left 8px) */
.rp-shortage-summary  {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 8px 0 4px 8px;
 }

.rp-shortage-icon  {
 font-size: 11px;
 flex-shrink: 0;
 }

.rp-shortage-item  {
 font-size: 10px;
 font-weight: 600;
 color: var(--color-danger);
 background: rgba(239,68,68,0.08);
 padding: 4px 10px;
 border-radius: 6px;
 border: 1px solid rgba(239,68,68,0.2);
 white-space: nowrap;
 }

/* 备注 */
.rp-note  {
 font-size: 10px;
 color: var(--text-muted);
 padding: 2px 0 6px;
 }

/* 照片 */
.report-photos-label  {
 padding: 10px 18px 3px;
 font-size: 10px;
 font-weight: 600;
 color: var(--text-secondary);
 }

.report-photos  {
 display: flex;
 gap: 5px;
 padding: 0 18px 10px;
 overflow-x: auto;
 }

.report-photo-thumb  {
 width: 48px;
 height: 48px;
 border-radius: 5px;
 overflow: hidden;
 flex-shrink: 0;
 cursor: pointer;
 border: 1px solid var(--border-subtle);
 }

.report-photo-thumb:hover  {
 border-color: var(--cyan-primary);
 }

.report-photo-thumb img  {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }

.diff-ok  {
 color: var(--color-success);
 }

.diff-over  {
 color: #22c55e;
 }

.diff-short  {
 color: var(--color-danger);
 background: rgba(239,68,68,0.1);
 border-radius: 6px;
 padding: 3px 8px;
 font-weight: 700;
 font-size: 11px;
 }

/* 缺货行 — 柔和背景 */
.rp-block-short  {
 background: rgba(239,68,68,0.03);
 }

.rp-block-short .rp-header  {
 background: rgba(239,68,68,0.04);
 }

@media (max-width: 480px)  {

  .report-summary, .report-info-grid  {
 gap: 4px;
 padding: 8px 12px;
 }

  .report-head  {
 padding: 12px 12px;
 }

  .rp-header  {
 padding: 7px 10px;
 }

  .rp-body  {
 padding: 0 10px 6px;
 }

  .summary-value  {
 font-size: 13px;
 }

  .rp-table th, .rp-table td  {
 padding: 4px 2px;
 font-size: 10px;
 }

  .report-photos-label  {
 padding: 8px 12px 2px;
 }

  .report-photos  {
 padding: 0 12px 8px;
 }

}

/* === 导出弹窗 === */
.export-modal {
  max-width: 480px;
}
.export-formats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.export-format-card {
  cursor: pointer;
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
  transition: all 0.2s;
  background: transparent;
}
.export-format-card:hover {
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.04);
}
.export-format-card.active {
  border-color: var(--cyan-primary);
  background: rgba(6, 182, 212, 0.08);
}
.export-format-icon {
  margin-bottom: 6px;
  color: var(--text-muted);
  display: flex;
  justify-content: center;
}
.export-format-card.active .export-format-icon {
  color: var(--cyan-primary);
}
.export-format-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.export-format-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.export-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.field-toggle {
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  background: var(--bg-input, rgba(128,128,128,0.1));
  color: var(--text-muted);
  transition: all 0.15s;
  user-select: none;
}
.field-toggle.active {
  background: var(--cyan-primary);
  color: #fff;
  font-weight: 600;
}
.export-hint {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 10px 12px;
  background: rgba(6, 182, 212, 0.06);
  border-radius: 8px;
  border-left: 3px solid var(--cyan-primary);
  margin-top: 16px;
  line-height: 1.5;
}
/* pages/orders.css — 订单管理页专属样式 */
@layer pages {
  /* 状态筛选按钮 */
  .status-filter-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
  }
  .status-filter-btn:hover {
    border-color: var(--cyan-primary);
    color: var(--cyan-primary);
  }
  .status-filter-btn.active {
    background: var(--cyan-primary);
    color: white;
    border-color: var(--cyan-primary);
  }

  /* 订单行状态颜色标识 */
  .order-row.status-normal {
    border-left: 4px solid #10b981;  /* 绿色 - 正常/进行中 */
  }
  .order-row.status-pending {
    border-left: 4px solid #f59e0b;  /* 黄色 - 待处理 */
    background: rgba(245, 158, 11, 0.03);
  }
  .order-row.status-risk {
    border-left: 4px solid #ef4444;  /* 红色 - 风险/逾期 */
    background: rgba(239, 68, 68, 0.05);
  }
  .order-row.status-completed {
    border-left: 4px solid #10b981;  /* 绿色 - 已完成 */
    opacity: 0.7;
  }
  .order-row.status-voided {
    border-left: 4px solid #6b7280;  /* 灰色 - 已作废 */
    opacity: 0.5;
    text-decoration: line-through;
  }

  /* 状态徽章 */
  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
  }
  .status-badge.normal {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
  }
  .status-badge.pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
  }
  .status-badge.risk {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
  }
  .status-badge.completed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
  }
  .status-badge.voided {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
  }

  /* 敏感数据模糊处理 */
  .sensitive {
    filter: blur(3px);
    transition: filter 0.2s;
    cursor: pointer;
  }
  .sensitive:hover {
    filter: blur(0);
  }
@layer pages {
  /* 状态筛选按钮组 */
  .orders-filter-group {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .orders-filter-btn {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s;
  }
  .orders-filter-btn:hover {
    border-color: var(--border-hover);
    color: var(--accent);
  }
  .orders-filter-btn.active {
    background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px var(--accent-glow);
  }

  /* 订单详情弹窗 */
  .order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }
  .order-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .order-detail-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .order-detail-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
  }

  /* 订单操作按钮组 */
  .order-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
  }

  /* 每页行数选择器 */
  .orders-page-size {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-muted);
  }
  .page-size-btn {
    padding: 4px 10px;
    font-size: 12px; font-weight: 600;
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .page-size-btn:hover { border-color: var(--border-hover); color: var(--accent); }
  .page-size-btn.active {
    background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
    color: white; border-color: transparent;
  }

  /* 分页 */
  .orders-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }
  .orders-pagination button {
    padding: 8px 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s;
  }
  .orders-pagination button:hover:not(:disabled) {
    border-color: var(--border-hover);
    color: var(--accent);
  }
  .orders-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .orders-pagination button.active {
    background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
    color: white;
    border-color: transparent;
  }
  .orders-pagination .page-info {
    font-size: 12px;
    color: var(--text-muted);
  }

  /* 响应式 */
  @media (max-width: 768px) {
    .order-detail-grid { grid-template-columns: 1fr; }
    .orders-filter-group { flex-wrap: wrap; }
  }
}


  /* 管道筛选栏 */
  .pipeline-filter-bar {
    display:flex;
    align-items:center;
    overflow-x:auto;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    padding: 16px 12px;
  }
  .pipeline-filter-btn {
    flex: 1;
    justify-content: center;
  }
  .pipeline-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 56px;
  }
  .pipeline-filter-btn:hover { background: rgba(6,182,212,0.08); }
  .pipeline-filter-btn .pipeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-subtle);
    transition: all 0.3s;
  }
  .pipeline-filter-btn.has-orders .pipeline-dot {
    background: var(--cyan-primary);
    box-shadow: 0 0 0 3px rgba(6,182,212,0.15);
    animation: pipelinePulseOrders 2s ease-in-out infinite;
  }
  .pipeline-filter-btn.active .pipeline-dot {
    background: var(--cyan-primary);
    box-shadow: 0 0 0 4px rgba(6,182,212,0.3);
  }
  .pipeline-filter-btn .pipeline-count {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-muted);
    line-height: 1;
  }
  .pipeline-filter-btn.has-orders .pipeline-count { color: var(--cyan-primary); }
  .pipeline-filter-btn.active .pipeline-count { color: var(--cyan-primary); }
  .pipeline-filter-btn .pipeline-label {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .pipeline-filter-btn.active .pipeline-label { color: var(--cyan-primary); font-weight: 600; }
  .pipeline-connector-short {
    width: 16px;
    height: 2px;
    background: var(--border-subtle);
    flex-shrink: 0;
    margin-bottom: 24px;
  }
  @keyframes pipelinePulseOrders {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(6,182,212,0.15); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(6,182,212,0.08); }
  }


  /* 订单页管道手机端 */
  @media (max-width: 768px) {
    .pipeline-filter-bar { overflow-x: auto; padding-bottom: 8px; }
    .pipeline-filter-btn { min-width: 52px; padding: 8px 4px; }
    .pipeline-filter-btn .pipeline-count { font-size: 14px; }
    .pipeline-filter-btn .pipeline-label { font-size: 9px; }
    .pipeline-connector-short { min-width: 12px; margin-bottom: 20px; }
  }

  .orders-pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
    flex-wrap:wrap;
    gap:12px
  }
}

/* 档口筛选 */
.store-filter-wrapper {
  padding: 0 20px 12px;
}

/* 批量分配操作条 */
.batch-assign-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-card-flat);
  border-top: 1px solid var(--border-subtle);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.batch-count {
  font-size: 14px;
  color: var(--text-primary);
}
.batch-count strong {
  color: var(--accent);
}
.batch-action {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}
.customer-card.batch-mode {
  position: relative;
}
.customer-card.batch-mode .customer-cb {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.customer-card.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
@layer pages {
  .product-detail-page {
    
    margin:0 auto;
    padding:20px;
    padding-bottom:100px
  }
  .detail-topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    height:48px
  }
  .detail-product-card {
    margin-bottom:20px
  }
  .product-content {
    display:flex;
    gap:32px;
    align-items:stretch
  }
  /* ─── 左侧图片区 ─── */
  .product-images {
    display:flex;
    gap:8px;
    align-items:stretch;
    flex-shrink:0
  }
  .game-card {
    width:200px;
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--border-card);
    background:var(--bg-card-flat);
    transition:transform 0.25s, box-shadow 0.25s;
    display:flex;
    flex-direction:column
  }
  .game-card:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(6,182,212,0.12)
  }
  .game-card.single {
    width:280px
  }
  .game-card-img {
    width:100%;
    flex:1;
    min-height:180px;
    overflow:hidden;
    background:rgba(128,128,128,0.06)
  }
  .game-card-img img {
    width:100%;
    height:100%;
    object-fit:cover
  }
  .game-card-placeholder {
    width:100%;
    height:100%;
    color:#fff;
    font-weight:700;
    font-size:48px;
    display:flex;
    align-items:center;
    justify-content:center
  }
  .game-card-footer {
    padding:8px 10px;
    display:flex;
    align-items:center;
    gap:6px;
    border-top:1px solid var(--border-subtle)
  }
  .game-card-type {
    font-size:10px;
    font-weight:700;
    padding:2px 6px;
    border-radius:4px;
    background:rgba(6,182,212,0.12);
    color:var(--cyan-primary);
    flex-shrink:0
  }
  .game-card-no {
    font-size:13px;
    font-weight:700;
    color:var(--text-primary);
    flex:1
  }
  .game-card-price {
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
    font-family:var(--font-mono)
  }
  /* 套装连接线 */
  .set-link {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    flex-shrink:0
  }
  .set-link-line {
    width:2px;
    height:28px;
    background:linear-gradient(180deg, transparent, var(--cyan-primary), transparent);
    opacity:0.35
  }
  .set-link-badge {
    font-size:9px;
    font-weight:700;
    padding:3px 8px;
    border-radius:12px;
    background:rgba(6,182,212,0.1);
    color:var(--cyan-primary);
    border:1px solid rgba(6,182,212,0.25);
    letter-spacing:1px
  }
  /* ─── 右侧信息区 ─── */
  .product-info {
    flex:1;
    min-width:0;
    padding:8px 0
  }
  #productBadges .product-type-badge {
    font-size:12px;
    padding:2px 8px;
    border-radius:4px
  }
  /* ── 产品详情头部 ── */
  .pd-header {
    margin-bottom:20px
  }
  .pd-title-row {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px
  }
  .pd-product-no {
    font-size:26px;
    font-weight:800;
    color:var(--cyan-primary);
    font-family:var(--font-mono)
  }
  .pd-badge {
    font-size:11px;
    font-weight:600;
    padding:2px 10px;
    border-radius:4px;
    line-height:1.6
  }
  .pd-badge-parent {
    background:rgba(34,197,94,0.1);
    color:var(--color-success);
    border:1px solid rgba(34,197,94,0.25)
  }
  .pd-badge-type {
    background:rgba(139,92,246,0.12);
    color:var(--purple-primary);
    border:1px solid rgba(139,92,246,0.25)
  }
  .pd-badge-brand {
    background:rgba(128,128,128,0.08);
    color:var(--text-secondary);
    border:1px solid var(--border-subtle)
  }
  .pd-badge-supplier {
    background:rgba(245,158,11,0.08);
    color:var(--color-warning);
    border:1px solid rgba(245,158,11,0.25)
  }
  .pd-badge-season-spring {
    background:rgba(34,197,94,0.08);
    color:#22c55e;
    border:1px solid rgba(34,197,94,0.25)
  }
  .pd-badge-season-summer {
    background:rgba(245,158,11,0.08);
    color:#f59e0b;
    border:1px solid rgba(245,158,11,0.25)
  }
  .pd-badge-season-autumn {
    background:rgba(234,88,12,0.08);
    color:#ea580c;
    border:1px solid rgba(234,88,12,0.2)
  }
  .pd-badge-season-winter {
    background:rgba(99,102,241,0.08);
    color:#6366f1;
    border:1px solid rgba(99,102,241,0.2)
  }

  /* ── 游戏数值面板 ── */
  .pd-stats-panel {
    margin-bottom:20px
  }
  .pd-stat-row {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:8px
  }
  .pd-stat-card {
    background:var(--bg-input);
    border:1px solid var(--border-subtle);
    border-radius:8px;
    padding:10px 12px;
    text-align:center
  }
  .pd-stat-label {
    font-size:11px;
    color:var(--text-muted);
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:0.5px
  }
  .pd-stat-val {
    font-size:20px;
    font-weight:700;
    font-family:var(--font-mono);
    color:var(--text-primary)
  }
  .pd-stat-highlight {
    border-color:rgba(16,185,129,0.4);
    background:rgba(16,185,129,0.06)
  }
  .pd-stat-highlight .pd-stat-label {
    color:var(--color-success)
  }
  .pd-stat-highlight .pd-stat-val {
    color:var(--color-success);
    font-size:24px
  }
  .pd-cost-inline {
    font-size:11px;
    color:var(--text-muted);
    margin-left:8px;
    font-weight:400;
    font-family:var(--font-mono)
  }
  .pd-stat-highlight .pd-cost-inline {
    color:rgba(16,185,129,0.7)
  }
  .price-value.sensitive {
    filter:blur(6px);
    cursor:pointer;
    transition:filter 0.2s
  }
  .price-value.sensitive:hover {
    filter:blur(0)
  }
  .info-section {
    margin-bottom:16px
  }
  .section-label {
    font-size:12px;
    color:var(--text-muted);
    margin-bottom:8px
  }
  .size-tags,.color-tags {
    display:flex;
    gap:8px;
    flex-wrap:wrap
  }
  .size-tag,.color-tag {
    padding:4px 12px;
    border-radius:6px;
    background:rgba(128,128,128,0.08);
    font-size:12px;
    color:var(--text-secondary)
  }
  .detail-sales-card {
    margin-bottom:20px
  }
  .sales-stats-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:16px
  }
  .stat-item {
    text-align:center;
    padding:24px 16px;
    background:rgba(128,128,128,0.03);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
  }
  .stat-label {
    font-size:12px;
    color:var(--text-muted);
    margin-bottom:8px
  }
  .stat-value {
    font-size:36px;
    font-weight:700;
    font-family:var(--font-mono);
    color:var(--cyan-primary);
    margin-bottom:4px
  }
  .stat-unit {
    font-size:12px;
    color:var(--text-muted)
  }
  .detail-orders-card {
    margin-bottom:20px
  }
  .detail-orders-card .table-container {
    height:380px;
    overflow-y:auto;
    margin-top:12px;
    scrollbar-gutter:stable;
  }

  @media (max-width:1024px) {
    .product-content {
      flex-direction:column;
      align-items:center
    }
    .product-images {
      justify-content:center
    }
    .game-card.single {
      width:240px
    }
    .product-info {
      width:100%;
      padding:16px 0 0
    }
    .sales-stats-grid {
      grid-template-columns:repeat(3,1fr)
    }
  }
  @media (max-width:768px) {
    .product-detail-page {
      padding:16px;
      padding-bottom:80px
    }
    .game-card {
      width:160px
    }
    .game-card.single {
      width:220px
    }
    .price-section {
      gap:24px
    }
    .pd-stat-val {
      font-size:16px
    }
    .pd-stat-highlight .pd-stat-val {
      font-size:20px
    }
    .sales-stats-grid {
      grid-template-columns:1fr
    }
    .stat-item {
      flex-direction:row;
      justify-content:space-between;
      padding:16px 20px
    }
    .stat-label {
      margin-bottom:0
    }
    .stat-value {
      font-size:28px;
      margin-bottom:0
    }
  }
  @media (max-width:480px) {
    .product-title {
      font-size:20px
    }
    .product-brand {
      font-size:13px
    }
    .game-card {
      width:130px
    }
    .game-card.single {
      width:180px
    }
    .game-card-placeholder {
      font-size:32px
    }
    .price-section {
      flex-direction:column;
      gap:12px
    }
  }
  .detail-orders-card .order-tabs {
    display:flex;
    gap:8px
  }
  .detail-orders-card .order-tab {
    padding:4px 14px;
    font-size:12px;
    font-weight:600;
    border-radius:16px;
    border:1px solid var(--border-subtle);
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
    transition:all 0.2s
  }
  .detail-orders-card .order-tab:hover {
    border-color:var(--cyan-primary);
    color:var(--cyan-primary)
  }
  .detail-orders-card .order-tab.active {
    background:rgba(6,182,212,0.15);
    border-color:var(--cyan-primary);
    color:var(--cyan-primary)
  }
  .cost-row {
    display:none;
  }
  .cost-row.visible {
    display:inline;
  }
  .cost-toggle-btn {
    position:fixed;
    top:0;
    left:0;
    width:14px;
    height:14px;
    z-index:9999;
    cursor:pointer;
    opacity:0.08;
    transition:opacity 0.2s;
  }
  .cost-toggle-btn:hover {
    opacity:0.3;
  }
  .cost-toggle-btn.active {
    opacity:0.3;
    background:rgba(6,182,212,0.3);
  }
  .cost-toggle-btn.active:hover {
    opacity:0.6;
  }
}
@layer pages {
  /* ===== 筛选排序栏 ===== */
  .filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .filter-select {
    padding: 6px 28px 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: all 0.2s;
    min-width: 100px;
    height: 32px;
    box-sizing: border-box;
  }
  .filter-select:hover { border-color: var(--border-hover); }
  .filter-select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(6,182,212,0.1); }
  .filter-select option { background: var(--bg-card-solid, #1e1e2e); color: var(--text-primary); }

  .products-toolbar {
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto
  }
  .brand-filter-btn {
    padding:6px 14px;
    font-size:12px;
    font-weight:600;
    border-radius:8px;
    border:1px solid var(--border-subtle);
    background:var(--bg-input);
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.2s;
    white-space:nowrap;
    flex-shrink:0
  }
  .brand-filter-btn:hover {
    border-color:var(--border-hover);
    color:var(--accent);
    background:rgba(139,92,246,0.08)
  }
  .brand-filter-btn.active {
    background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
    color:white;
    border-color:transparent;
    box-shadow:0 2px 8px var(--accent-glow)
  }
  .brand-filter-btn .brand-count {
    font-size:10px;
    opacity:0.6;
    font-weight:400;
    margin-left:2px
  }
  #brandFilterBar {
    display:flex;
    gap:8px;
    margin-bottom:16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    flex-wrap:nowrap
  }
  .products-sort-bar {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px
  }
  .sort-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .products-sort-bar .sort-label {
    font-size:12px;
    color:var(--text-muted);
    margin-right:4px
  }
  .sort-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    height: 32px;
    box-sizing: border-box;
    min-width: 60px;
    text-align: center;
  }
  .sort-btn:hover {
    border-color:var(--cyan-primary);
    color:var(--cyan-primary)
  }
  .sort-btn.active {
    background:rgba(6,182,212,0.12);
    color:var(--cyan-primary);
    border-color:rgba(6,182,212,0.3)
  }
  .sort-btn.active::after {
    content:' ↓';
    font-size:10px
  }
  .sort-btn.active.asc::after {
    content:' ↑'
  }
  .products-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px
  }
  .product-card {
    display:block;
    position:relative;
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
    backdrop-filter:blur(16px);
    background:var(--bg-input);
    cursor:pointer;
    min-width:0
  }
  .product-card:hover {
    border-color:var(--border-hover);
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover)
  }
  [data-theme="cyber"] .product-card:hover {
    background:rgba(18,18,31,0.85)
  }
  [data-theme="rainbow"] .product-card:hover {
    background:rgba(255,255,255,0.75)
  }
  .product-card-img {
    width:100%;
    aspect-ratio:1;
    background:rgba(128,128,128,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative
  }
  .product-card-img img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.4s ease
  }
  .product-card:hover .product-card-img img {
    transform:scale(1.05)
  }
  .product-card-img .placeholder-icon {
    font-size:48px;
    opacity:0.3
  }

  /* ─── 卡片信息区 ─── */
  .product-card-info {
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    gap:4px
  }
  .product-card-no {
    display:flex;
    align-items:center;
    gap:4px;
    font-weight:700;
    font-size:13px;
    color:var(--accent);
    overflow:hidden;
    white-space:nowrap;
    flex-wrap:wrap
  }
  .product-link {
    color:inherit;
    text-decoration:none;
    transition:opacity 0.15s
  }
  .product-link:hover {
    text-decoration:underline;
    opacity:0.85
  }

  /* 价格 + 销量同行 */
  .product-price-row {
    display:flex;
    align-items:baseline;
    justify-content:space-between
  }
  .product-card-price {
    font-family:var(--font-mono);
    font-weight:700;
    font-size:16px;
    color:var(--text-primary)
  }
  .product-card-sold {
    font-size:11px;
    color:var(--text-muted);
    white-space:nowrap
  }
  .product-card-brand {
    font-size:11px;
    color:var(--text-muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }

  /* 颜色文字标签 — 横向滚动 */
  .product-color-dots {
    display:flex;
    gap:4px;
    align-items:center;
    overflow-x:auto;
    overflow-y:hidden;
    min-height:22px;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch
  }
  .product-color-dots::-webkit-scrollbar { height:0; width:0 }
  .product-color-chip {
    flex-shrink:0;
    cursor:pointer;
    border-radius:4px;
    padding:0 6px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border-subtle);
    background:rgba(128,128,128,0.06);
    transition:all 0.15s;
    user-select:none
  }
  .product-color-chip:hover {
    background:rgba(128,128,128,0.1);
    border-color:var(--border-hover)
  }
  .product-color-name {
    font-size:10px;
    color:var(--text-secondary);
    white-space:nowrap;
    font-weight:500;
    line-height:1
  }
  .product-color-chip.active {
    background:rgba(6,182,212,0.1);
    border-color:var(--accent)
  }
  .product-color-chip.active .product-color-name {
    color:var(--text-primary);
    font-weight:600
  }

  /* 底部：类型标签 */
  .product-card-footer {
    display:flex;
    justify-content:flex-end;
    gap:4px;
    min-height:16px;
    margin-top:2px
  }
  .product-type-badge {
    font-size:9px;
    font-weight:700;
    padding:1px 5px;
    border-radius:3px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    background:rgba(148,163,184,0.12);
    color:#94a3b8;
    border:1px solid rgba(148,163,184,0.25)
  }
  .product-type-badge.top {
    background:rgba(6,182,212,0.12);
    color:var(--cyan-primary);
    border:1px solid rgba(6,182,212,0.25)
  }
  .product-type-badge.bottom {
    background:rgba(168,85,247,0.12);
    color:#a855f7;
    border:1px solid rgba(168,85,247,0.25)
  }
  .product-type-badge.set {
    background:rgba(251,191,36,0.12);
    color:#fbbf24;
    border:1px solid rgba(251,191,36,0.25)
  }
  /* 套装关联样式保留但不再在footer使用 */
  .product-type-badge.other {
    background:rgba(148,163,184,0.12);
    color:#94a3b8;
    border:1px solid rgba(148,163,184,0.25)
  }
  .product-type-badge.parent {
    background:rgba(74,222,128,0.12);
    color:#4ade80;
    border:1px solid rgba(74,222,128,0.25)
  }
  /* 季节标签 */
  .product-type-badge.season-spring {
    background:rgba(74,222,128,0.12);
    color:#4ade80;
    border:1px solid rgba(74,222,128,0.25)
  }
  .product-type-badge.season-summer {
    background:rgba(251,146,60,0.12);
    color:#fb923c;
    border:1px solid rgba(251,146,60,0.25)
  }
  .product-type-badge.season-autumn {
    background:rgba(234,179,8,0.12);
    color:#eab308;
    border:1px solid rgba(234,179,8,0.25)
  }
  .product-type-badge.season-winter {
    background:rgba(96,165,250,0.12);
    color:#60a5fa;
    border:1px solid rgba(96,165,250,0.25)
  }

  /* 套装角标 */
  .product-set-badge {
    position:absolute;
    top:8px;
    right:8px;
    z-index:2;
    font-size:10px;
    font-weight:700;
    padding:2px 8px;
    border-radius:10px;
    background:var(--accent);
    color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.3)
  }

  /* 套装hover tooltip — 显示上下装货号 */
  .is-set-product {
    position:relative
  }
  .is-set-product::after {
    content:attr(data-set-tooltip);
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    padding:6px 10px;
    font-size:11px;
    font-weight:600;
    color:#fff;
    background:rgba(0,0,0,0.85);
    border-radius:6px;
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.15s;
    z-index:10;
    box-shadow:0 4px 12px rgba(0,0,0,0.4)
  }
  .is-set-product::before {
    content:'';
    position:absolute;
    bottom:calc(100% + 2px);
    left:50%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-top-color:rgba(0,0,0,0.85);
    pointer-events:none;
    opacity:0;
    transition:opacity 0.15s;
    z-index:10
  }
  .is-set-product:hover::after,
  .is-set-product:hover::before {
    opacity:1
  }

  /* 套装网格视图：一行两对 */
  .products-grid.set-grid-view {
    grid-template-columns:1fr 1fr;
    gap:20px
  }
  .set-card-group {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:stretch;
    gap:0;
    border:1px solid var(--accent);
    border-radius:var(--radius-lg);
    padding:12px;
    background:var(--bg-card-flat);
    position:relative
  }
  .set-card-group .product-card {
    border:1px solid var(--border-subtle);
    margin:0
  }
  .set-card-group .product-card:hover {
    transform:translateY(-2px)
  }
  .set-card-link {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    min-width:50px
  }
  .set-card-link-icon {
    font-size:20px;
    font-weight:700;
    color:var(--accent);
    line-height:1
  }
  .set-card-link-price {
    font-size:11px;
    color:var(--text-muted);
    white-space:nowrap;
    margin-top:4px
  }
  @media (max-width:1200px) {
    .products-grid.set-grid-view {
      grid-template-columns:1fr
    }
  }

  /* 动画 */
  .product-card:nth-child(1) { animation:fadeInUp 0.4s ease 0.0s both }
  .product-card:nth-child(2) { animation:fadeInUp 0.4s ease 0.05s both }
  .product-card:nth-child(3) { animation:fadeInUp 0.4s ease 0.1s both }
  .product-card:nth-child(4) { animation:fadeInUp 0.4s ease 0.15s both }
  .product-card:nth-child(5) { animation:fadeInUp 0.4s ease 0.2s both }
  .product-card:nth-child(6) { animation:fadeInUp 0.4s ease 0.25s both }
  .product-card:nth-child(7) { animation:fadeInUp 0.4s ease 0.3s both }
  .product-card:nth-child(8) { animation:fadeInUp 0.4s ease 0.35s both }
  .product-card:nth-child(n+9) { animation:fadeInUp 0.4s ease 0.4s both }

  @media (max-width:1400px) { .products-grid { grid-template-columns:repeat(4,1fr) } }
  @media (max-width:900px) { .products-grid { grid-template-columns:repeat(3,1fr) } }
  @media (max-width:480px) { .products-grid { grid-template-columns:repeat(1,1fr) } }

  /* 视图切换 */
  .view-toggle { display:flex; gap:2px }
  .view-toggle-btn {
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    border:none; border-radius:6px; background:transparent; color:var(--text-muted);
    cursor:pointer; transition:all 0.15s
  }
  .view-toggle-btn:hover { color:var(--text-secondary); background:rgba(255,255,255,0.04) }
  .view-toggle-btn.active { color:var(--cyan-primary); background:rgba(6,182,212,0.1) }
  .view-toggle-btn svg { width:15px; height:15px }

  /* ====== 列表视图 ====== */
  .products-grid.list-view { grid-template-columns:1fr; gap:0 }
  .products-grid.set-view { grid-template-columns:1fr !important; }
  .list-header {
    display:grid;
    grid-template-columns:40px 80px 90px 90px minmax(80px,1fr) 60px 60px minmax(80px,1fr) 50px 90px;
    align-items:center; gap:8px; padding:8px 16px;
    font-size:11px; color:var(--text-muted); border-bottom:1px solid var(--border-subtle)
  }
  .product-row {
    display:grid;
    grid-template-columns:40px 80px 90px 90px minmax(80px,1fr) 60px 60px minmax(80px,1fr) 50px 90px;
    align-items:center; gap:8px; padding:8px 16px;
    border-bottom:1px solid rgba(255,255,255,0.03);
    cursor:pointer; transition:background 0.15s
  }
  .product-row:hover { background:rgba(255,255,255,0.03) }
  .pr-img {
    width:36px; height:36px; border-radius:6px; overflow:hidden; flex-shrink:0;
    background:rgba(255,255,255,0.04)
  }
  .pr-img img { width:100%; height:100%; object-fit:cover }
  .pr-img-ph {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700; color:var(--text-muted)
  }
  .pr-no { font-weight:600; font-size:13px; color:var(--cyan-primary) }
  .pr-type { display:flex; gap:3px; flex-wrap:wrap; align-items:center }
  .pr-brand { font-size:12px; color:var(--text-secondary) }
  .pr-colors { display:flex; gap:4px; flex-wrap:wrap; max-height:24px; overflow:hidden }
  .pr-color-tag {
    font-size:11px; padding:2px 8px; border-radius:4px;
    background:rgba(255,255,255,0.06); color:var(--text-secondary); white-space:nowrap
  }
  .pr-price { font-size:13px; font-weight:600; color:var(--text-primary) }
  .pr-cost { font-size:12px; color:var(--text-muted) }
  .pr-sizes { display:flex; gap:3px; flex-wrap:wrap; max-height:24px; overflow:hidden }
  .pr-sizes .size-tag { font-size:10px; padding:1px 5px }
  .pr-sold { font-size:13px; font-weight:600; color:var(--text-secondary); text-align:center }
  .pr-date { font-size:11px; color:var(--text-muted) }

  /* ====== 套装配对卡片 ====== */
  .set-pair-card {
    position:relative; border-left:4px solid var(--border-subtle);
    border-radius:12px; margin-bottom:16px; padding:16px;
    display:flex; gap:16px; align-items:center;
    background:var(--bg-card-flat);
    animation:fadeInUp 0.3s ease both
  }
  .set-pair-badge {
    position:absolute; top:8px; right:12px;
    font-size:10px; padding:2px 8px; border-radius:10px;
    background:var(--accent); color:#fff; font-weight:600
  }
  .set-member {
    flex:1; display:flex; gap:12px; align-items:center
  }
  .set-member-img {
    width:60px; height:60px; border-radius:8px; overflow:hidden; flex-shrink:0;
    background:rgba(128,128,128,0.06); display:flex; align-items:center; justify-content:center
  }
  .set-member-img img { width:100%; height:100%; object-fit:cover }
  .set-member-info { flex:1; min-width:0 }
  .set-member-no { font-size:13px; font-weight:700; color:var(--accent); margin-bottom:2px }
  .set-member-brand { font-size:11px; color:var(--text-muted) }
  .set-member-price { font-size:14px; font-weight:700; color:var(--text-primary) }
  .set-plus { font-size:20px; color:var(--accent); flex-shrink:0; font-weight:700 }
  .set-pair-price {
    font-size:16px; font-weight:700; color:var(--accent);
    padding-left:12px; border-left:1px solid var(--border-subtle); flex-shrink:0; white-space:nowrap
  }
}/* product-settings.css — 页面特有样式，组件用系统类(cyber-btn/cyber-input/cyber-card) */

/* ─── Tab栏 ─── */
.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 20px;
}

.settings-tab {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.settings-tab:hover {
  color: var(--text-primary);
}

.settings-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.settings-panel {
  min-height: 200px;
}

.panel-loading {
  color: var(--text-muted);
  font-size: 13px;
  padding: 40px 0;
  text-align: center;
}

/* ─── 品类树: 组内条目 ─── */
.category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 8px 28px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
}

.category-item .cat-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.category-item .cat-name {
  font-weight: 500;
  color: var(--text-primary);
}

.category-item .cat-sizes {
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.category-item .cat-count {
  color: var(--text-secondary);
  font-size: 11px;
  margin-left: auto;
  margin-right: 8px;
  white-space: nowrap;
}

.category-item .cat-actions,
.ps-group-actions {
  display: flex;
  gap: 4px;
}

/* ─── 品牌/供货商: grid列表 ─── */
.settings-list-header {
  display: grid;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-list-row {
  display: grid;
  align-items: center;
  padding: 10px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: background 0.15s;
}

.settings-list-row:hover {
  background: var(--bg-input);
}

.settings-list-row:last-child {
  border-bottom: none;
}

.brand-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 100px;
}

.supplier-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 100px;
}

.color-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 100px;
}

.settings-list-row .row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

/* ─── 小按钮修饰(复用cyber-btn缩小padding) ─── */
.ps-btn {
  padding: 4px 10px !important;
  font-size: 11px !important;
  gap: 4px !important;
}
.ps-sort-btn {
  padding: 3px 6px !important;
  min-width: unset !important;
}

/* ─── 拖拽排序 ─── */
.ps-drag-handle {
  cursor: grab;
  opacity: 0.4;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: opacity 0.15s;
}
.ps-drag-handle:hover {
  opacity: 0.8;
}
.ps-drag-handle:active {
  cursor: grabbing;
}
.ps-drag-item {
  transition: opacity 0.15s, box-shadow 0.15s;
}
.ps-drag-item.ps-dragging {
  opacity: 0.3;
}
.ps-drag-item.ps-drag-over {
  box-shadow: 0 -2px 0 0 var(--accent);
}
.category-item .ps-drag-handle {
  flex-shrink: 0;
  margin-right: 6px;
}
.ps-color-picker {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}

/* ─── 添加行 ─── */
.settings-add-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  align-items: center;
}

.settings-add-row .cyber-input {
  flex: 1;
  min-width: 0;
  padding: 6px 12px;
  font-size: 12px;
}

/* ─── 行内编辑 ─── */
.inline-edit-input {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
  width: 100%;
  max-width: 180px;
}

.settings-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 24px 0;
  text-align: center;
}

/* ─── 弹窗内部布局 ─── */
.ps-modal-title {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-primary);
}

.ps-modal-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ps-modal-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 6px 0 12px;
}

.ps-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.ps-modal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ps-modal-check label {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ps-modal-textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  box-sizing: border-box;
}

/* ─── 计数小字(品类数/产品数) ─── */
.ps-count {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
}

/* ─── 颜色占用产品列表 ─── */
.ps-color-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
}
.ps-color-link:hover {
  text-decoration: underline;
}
.ps-color-products li {
  padding: 2px 0;
  font-size: 12px;
}
@layer pages {
  /* ─── 页面容器 ─── */
  .products-new-page {
    margin: 0 auto;
    padding: 12px 16px;
    padding-bottom: 120px;
  }

  /* ─── 顶部工具条 ─── */
  .pn-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .pn-page-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
  }
  .pn-back-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
  .pn-header-actions {
    display: flex;
    gap: 6px;
  }

  /* ─── 主体布局：左悬浮 + 右滚动 ─── */
  .pn-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  /* 左侧：Sticky */
  .pn-left {
    flex: 1;
    min-width: 260px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
  }
  .pn-left::-webkit-scrollbar {
    width: 3px;
  }
  .pn-left::-webkit-scrollbar-thumb {
    background: var(--border-card);
    border-radius: 2px;
  }

  /* 右侧：滚动颜色列表 */
  .pn-right {
    flex: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ─── 通用区块 ─── */
  .pn-section {
    background: var(--bg-card-flat);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    padding: 10px 12px;
  }
  .pn-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }

  /* ─── 微供抓取 ─── */
  .pn-fetch {
    border-color: rgba(245, 158, 11, 0.25);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.03), rgba(239, 68, 68, 0.02));
  }
  .pn-fetch-row {
    display: flex;
    gap: 6px;
  }
  .pn-fetch-input {
    flex: 1;
    height: 32px;
    font-size: 12px;
  }
  .pn-fetch-btn {
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 11px;
    height: 32px;
  }
  .pn-fetch-status {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    min-height: 16px;
  }
  .pn-fetch-status.success { color: var(--color-success); }
  .pn-fetch-status.error { color: var(--color-danger); }
  .pn-fetch-status.loading {
    color: var(--color-info);
    animation: pulse-text 1s ease infinite;
  }
  @keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* ─── 产品信息 ─── */
  .pn-product-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pn-product-info .pn-section-title {
    margin-bottom: 0;
  }
  .pn-product-info .pn-info-grid {
    margin-bottom: 0;
  }
  .pn-product-info .pn-info-divider {
    margin: 2px 0;
  }
  .pn-sub-section {
    background: rgba(128, 128, 128, 0.04);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pn-sub-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 2px;
  }
  .pn-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .pn-field .cyber-label {
    margin-bottom: 0;
  }

  /* 必填字段 placeholder 醒目提示 */
  .pn-required::placeholder {
    color: rgba(251, 146, 60, 0.7);
  }
  .pn-required:placeholder-shown {
    border-color: rgba(251, 146, 60, 0.3);
  }
  .pn-info-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 10px 0;
  }
  .pn-type-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .pn-type-label {
    font-size: 13px;
    color: var(--text-muted);
  }
  .pn-type-radio {
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 0;
    min-width: 48px;
    text-align: center;
    border-radius: 6px;
    transition: all 0.15s;
  }
  .pn-type-radio:hover {
    background: rgba(128, 128, 128, 0.15);
  }
  input[name="productType"],
  input[name="productSeason"],
  .pn-type-selector .size-checkbox,
  #setModeToggle {
    display: none;
  }
  input[name="productType"]:checked + .pn-type-radio,
  input[name="productSeason"]:checked + .pn-type-radio,
  .pn-type-selector .size-checkbox:checked + .pn-type-radio,
  #setModeToggle:checked + .pn-type-radio {
    background: var(--accent);
    color: #fff;
  }

  /* ─── 应用到所有颜色按钮 ─── */
  .pn-apply-btn {
    width: 100%;
    padding: 10px 8px;
    font-size: 13px;
    height: auto;
    margin-top: 10px;
  }

  /* ─── 套装价（放在下装信息底部） ─── */
  .pn-set-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
  }
  .pn-set-price-row label {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 40px;
    flex-shrink: 0;
  }

  /* ─── 图片池 ─── */
  .pn-image-pool {
    border-color: rgba(6, 182, 212, 0.2);
  }
  .pn-pool-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-secondary);
  }
  .pn-pool-clear {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 3px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pn-pool-clear:hover {
    background: rgba(239, 68, 68, 0.2);
  }
  .pn-pool-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
    align-content: start;
    padding: 2px;
  }
  .pn-pool-images::-webkit-scrollbar {
    width: 3px;
  }
  .pn-pool-images::-webkit-scrollbar-thumb {
    background: var(--border-card);
    border-radius: 2px;
  }
  .pn-pool-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    font-size: 11px;
    color: var(--text-muted);
    border: 1px dashed var(--border-card);
    border-radius: 6px;
  }
  .pn-pool-img {
    aspect-ratio: 1;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid var(--border-card);
    cursor: grab;
    transition: all 0.15s;
    position: relative;
    user-select: none;
  }
  .pn-pool-img:hover {
    border-color: var(--accent);
    transform: scale(1.04);
  }
  .pn-pool-img.selected {
    border-color: var(--cyan-primary);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25);
  }
  .pn-pool-img.dragging {
    opacity: 0.35;
  }
  .pn-pool-img.assigned {
    border-color: var(--color-success);
  }
  .pn-pool-img.assigned::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--color-success);
    color: #fff;
    font-size: 8px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pn-pool-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }

  /* ─── 颜色列表区 ─── */
  .pn-color-section {
    background: var(--bg-card-flat);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .pn-color-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(128, 128, 128, 0.04);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .pn-add-color-btn {
    padding: 4px 10px;
    font-size: 11px;
    height: auto;
  }
  .pn-colors-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    min-height: 80px;
  }
  .pn-colors-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
  }
  .pn-colors-empty .empty-icon {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-subtle);
    border-radius: 6px;
    position: relative;
    opacity: 0.3;
  }
  .pn-colors-empty .empty-icon::before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border: 2px solid var(--text-muted);
    border-radius: 2px;
  }

  /* ─── 颜色行 ─── */
  .pn-color-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    transition: all 0.15s;
  }
  .pn-color-item:hover {
    border-color: var(--border-hover);
  }
  .pn-color-item.error {
    border-color: var(--color-danger);
  }
  .pn-color-item.dragover-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
    background: rgba(6, 182, 212, 0.05);
  }
  .pn-color-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(6, 182, 212, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* 颜色行内的图片槽 */
  .pn-color-img-slot {
    width: 56px;
    height: 56px;
    border: 2px dashed var(--border-card);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
  }
  .pn-color-img-slot:hover {
    border-color: var(--accent);
  }
  .pn-color-img-slot .slot-placeholder {
    width: 16px;
    height: 16px;
    border: 2px dashed var(--text-muted);
    border-radius: 3px;
    opacity: 0.4;
    position: relative;
  }
  .pn-color-img-slot .slot-placeholder::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 1px;
  }
  .pn-color-img-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pn-color-img-slot .slot-delete {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border: none;
    font-size: 8px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .pn-color-img-slot:hover .slot-delete {
    display: flex;
  }
  .pn-color-img-slot input[type="file"] {
    display: none;
  }

  /* 颜色名称输入 */
  .pn-color-name {
    width: 90px;
    height: 34px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    padding: 0 8px;
    font-size: 13px;
    color: var(--text-primary);
    flex-shrink: 0;
  }
  .pn-color-name:focus {
    outline: none;
    border-color: var(--accent);
  }
  .pn-color-name::placeholder {
    color: var(--text-muted);
  }

  /* ─── 统一尺码选择器（左侧产品区） ─── */
  .size-selector {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .size-selector .size-checkbox { display: none; }
  .size-selector .size-label {
    min-width: 28px;
    height: 26px;
    border: 1px solid var(--border-card);
    background: var(--bg-input);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    transition: all 0.15s;
    user-select: none;
  }
  .size-selector .size-label:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .size-selector .size-checkbox:checked + .size-label {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  /* 颜色行内的尺码（更小更紧凑） */
  .pn-color-sizes {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
  }
  .pn-color-sizes .size-checkbox { display: none; }
  .pn-color-sizes .size-label {
    min-width: 28px;
    height: 30px;
    border: 1px solid var(--border-card);
    background: var(--bg-card);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    transition: all 0.15s;
  }
  .pn-color-sizes .size-label:hover {
    border-color: var(--accent);
  }
  .pn-color-sizes .size-checkbox:checked + .size-label {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  /* 颜色行内的价格 */
  .pn-color-prices {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
  }
  .pn-color-prices .price-tag {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  .pn-color-price-input {
    width: 58px;
    height: 30px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 12px;
    color: var(--text-primary);
    flex-shrink: 0;
  }
  .pn-color-price-input:focus {
    outline: none;
    border-color: var(--accent);
  }

  /* 删除按钮 */
  .pn-color-remove {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .pn-color-remove:hover {
    background: rgba(239, 68, 68, 0.2);
  }
  .pn-color-remove:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  /* ─── 图片选择器弹窗 ─── */
  .img-picker-popup {
    background: var(--bg-card-solid, var(--bg-card));
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    width: 280px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .img-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .img-picker-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
  }
  .img-picker-close:hover { color: var(--color-danger); }
  .img-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
  }
  .img-picker-grid::-webkit-scrollbar { width: 3px; }
  .img-picker-grid::-webkit-scrollbar-thumb { background: var(--border-card); border-radius: 2px; }
  .img-picker-item {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid var(--border-card);
    cursor: pointer;
    transition: all 0.15s;
  }
  .img-picker-item:hover {
    border-color: var(--accent);
    transform: scale(1.05);
  }
  .img-picker-item.assigned {
    opacity: 0.4;
  }
  .img-picker-item.assigned::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 12px;
    color: var(--color-success);
    font-weight: 700;
  }
  .img-picker-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }
  .img-picker-upload {
    margin: 8px;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* ─── 底部操作栏 ─── */
  .pn-form-actions {
    margin-top: 16px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
  }
  .pn-validation-hints {
    text-align: center;
    color: var(--color-danger);
    font-size: 11px;
    margin-bottom: 8px;
  }
  .pn-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .pn-actions-row .cyber-btn {
    min-width: 70px;
    padding: 7px 14px;
    font-size: 12px;
  }

  /* ─── 字段错误/提示 ─── */
  .field-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
    min-height: 13px;
  }
  .field-hint {
    font-size: 10px;
    color: var(--text-muted);
  }
  .field-error {
    font-size: 10px;
    color: var(--color-danger);
    min-height: 13px;
  }

  /* ─── 验证错误红框 ─── */
  .field-error-border {
    outline: 2px solid var(--color-danger) !important;
    outline-offset: -1px;
    animation: errorShake 0.4s ease;
  }
  @keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
  }

  /* ─── 品牌下拉（复用已有样式） ─── */
  .brand-select-wrapper { position: relative; width: 100%; }
  .brand-select-trigger {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; height: 32px; padding: 0 10px;
    border: 1px solid var(--border-card); border-radius: var(--radius-md);
    background: var(--bg-input); color: var(--text-primary); font-size: 12px;
    cursor: pointer;
  }
  .brand-select-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-select-arrow { color: var(--text-secondary); flex-shrink: 0; transition: transform 0.2s; }
  .brand-select-wrapper.open .brand-select-arrow { transform: rotate(180deg); }
  .brand-select-dropdown {
    position: fixed; max-height: 240px; overflow-y: auto;
    background: var(--bg-card-flat); border: 1px solid var(--border-card);
    border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    z-index: 9999; display: none; padding: 4px; min-width: 180px;
  }
  .brand-select-dropdown.show { display: block; }
  .brand-select-option {
    padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;
    color: var(--text-primary); transition: all 0.15s;
  }
  .brand-select-option:hover { background: rgba(6,182,212,0.1); color: var(--accent); }
  .brand-select-option.selected { background: var(--accent); color: #fff; }

  /* ═══════════════════════════════════════
     响应式断点
     ═══════════════════════════════════════ */

  /* 13寸屏 / 分屏 (< 1100px) */
  @media (max-width: 1100px) {
    .pn-left {
      width: 260px;
    }
    .pn-pool-images {
      grid-template-columns: repeat(3, 1fr);
    }
    .pn-color-name {
      width: 70px;
    }
  }

  /* 平板 (< 900px)：上下堆叠 */
  @media (max-width: 900px) {
    .pn-body {
      flex-direction: column;
    }
    .pn-left {
      width: 100%;
      position: static;
      max-height: none;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
    .pn-image-pool {
      grid-column: 1 / -1;
    }
    .pn-pool-images {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* 手机 (< 768px) */
  @media (max-width: 768px) {
    .products-new-page {
      padding: 8px 10px;
      padding-bottom: 160px;
    }
    .pn-header {
      gap: 6px;
      margin-bottom: 10px;
    }
    .pn-page-title {
      font-size: 14px;
      text-align: center;
      order: 0;
    }
    .pn-back-btn {
      order: -1;
    }
    .pn-header-actions {
      order: 1;
    }
    .pn-left {
      grid-template-columns: 1fr;
    }
    .pn-pool-images {
      grid-template-columns: repeat(4, 1fr);
    }
    .pn-color-item {
      flex-wrap: wrap;
      gap: 4px;
      padding: 8px;
    }
    .pn-color-num {
      align-self: flex-start;
    }
    .pn-color-img-slot {
      width: 40px;
      height: 40px;
    }
    .pn-color-name {
      flex: 1;
      min-width: 0;
    }
    .pn-color-sizes {
      width: 100%;
      justify-content: center;
    }
    .pn-color-prices {
      width: 100%;
      justify-content: center;
      margin-left: 0;
    }
    .pn-form-actions {
      padding: 16px 8px 24px;
    }
    .pn-actions-row .cyber-btn {
      flex: 1;
      justify-content: center;
    }
  }

  /* ===== 套装颜色配对行（上衣图+下装图+颜色+尺码+上衣价+下装价） ===== */
  .pn-color-item.pn-set-pair {
    gap: 6px;
    padding: 8px 10px;
  }

  /* 图片对（上衣+下装并排） */
  .pn-set-img {
    width: 48px;
    height: 48px;
    border: 2px dashed var(--border-card);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
  }
  .pn-set-img:hover {
    border-color: var(--accent);
  }
  .pn-set-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pn-set-img .slot-placeholder {
    width: 14px;
    height: 14px;
    border: 2px dashed var(--text-muted);
    border-radius: 3px;
    opacity: 0.4;
    position: relative;
  }
  .pn-set-img .slot-placeholder::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border: 2px solid currentColor;
    border-radius: 1px;
  }
  .pn-set-img .slot-delete {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border: none;
    font-size: 8px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .pn-set-img:hover .slot-delete {
    display: flex;
  }
  .pn-set-img input[type="file"] {
    display: none;
  }

  /* 价格组（上衣/下装） */
  .pn-set-prices {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
  }
  .pn-set-price-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
  }

  /* 套装行：上衣价格放左，下装价格放右 */
  .pn-set-top-prices {
    margin-left: auto;
  }

  /* 套装行紧凑模式：减少间距 */
  .pn-set-pair .pn-color-num {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
  .pn-set-pair .pn-color-name {
    width: 70px;
    height: 30px;
    font-size: 12px;
  }
  .pn-set-pair .pn-color-sizes {
    gap: 2px;
  }
  .pn-set-pair .pn-color-sizes .size-label {
    min-width: 24px;
    height: 26px;
    font-size: 10px;
    padding: 0 2px;
  }
  .pn-set-pair .pn-color-price-input {
    width: 50px;
    height: 28px;
    font-size: 11px;
  }
  .pn-set-pair .pn-color-remove {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  /* 小屏手机 (< 480px) */
  @media (max-width: 480px) {
    .pn-pool-images {
      grid-template-columns: repeat(3, 1fr);
    }
    .pn-form-actions {
      flex-direction: column;
      gap: 6px;
    }
    .pn-actions-row .cyber-btn {
      width: 100%;
    }
    /* 套装行手机端：图片更小 */
    .pn-set-img {
      width: 36px;
      height: 36px;
    }
    .pn-set-pair .pn-color-name {
      width: 50px;
    }
    .pn-set-pair .pn-color-price-input {
      width: 42px;
    }
  }
}
/* pages/profile.css — 个人中心弹窗样式 */

.profile-modal-content {
  max-width: 480px;
  width: 92%;
  padding: 32px;
  max-height: 85vh;
  overflow-y: auto;
}

.profile-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.profile-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.profile-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.profile-close-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.profile-close-btn svg {
  width: 16px;
  height: 16px;
}

/* 头像区 */
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.profile-avatar-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}

.profile-avatar-actions {
  display: flex;
  gap: 8px;
}

.small-btn {
  padding: 6px 14px;
  font-size: 12px;
}

/* 信息区 */
.profile-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-value {
  font-size: 14px;
  color: var(--text-primary);
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.profile-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 24px 0;
}

.profile-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.profile-error {
  font-size: 13px;
  color: #ff4757;
  text-align: center;
  min-height: 20px;
}

/* 头像裁剪弹窗 */
.crop-modal-content {
  max-width: 420px;
  width: 94%;
  padding: 24px;
}

.crop-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.crop-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.crop-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #0a0a14;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: move;
  border: 1px solid var(--border-subtle);
}

#cropCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.crop-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
}

.crop-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}

.crop-actions .cyber-btn {
  flex: 1;
  max-width: 140px;
}

/* 手机端 */
@media (max-width: 480px) {
  .crop-modal-content {
    width: 96%;
    padding: 20px 14px;
  }

  .crop-actions .cyber-btn {
    max-width: 120px;
  }
}
/* settings.css — 系统设置页样式 */

.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 20px;
}

.settings-tab {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-tab:hover {
  color: var(--text-primary);
}

.settings-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.settings-panel {
  padding: 20px;
}

.settings-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.settings-form {
  padding: 20px;
}

.settings-form .form-field {
  margin-bottom: 16px;
}

.settings-form .form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-form .form-field input,
.settings-form .form-field select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input, var(--bg-body));
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  box-sizing: border-box;
}

.settings-form .form-field input:focus,
.settings-form .form-field select:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.btn-sm {
  padding: 4px 10px !important;
  font-size: 12px !important;
}

/* 响应式 */
@media (max-width: 768px) {
  .settings-tabs {
    padding: 0 12px;
  }
  .settings-tab {
    padding: 8px 14px;
    font-size: 13px;
  }
  .settings-panel {
    padding: 12px;
  }
  .settings-form {
    padding: 12px;
  }
}
/* 仓库看板 */
@layer pages {
.warehouse-page {
  
  margin: 0 auto;
  padding: 16px 20px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.warehouse-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 日期显示 */
.warehouse-date-display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.warehouse-date-display:hover {
  border-color: var(--cyan-primary);
  background: rgba(6, 182, 212, 0.05);
}

.warehouse-date-display svg {
  color: var(--text-muted);
  transition: color 0.2s;
}

.warehouse-date-display:hover svg {
  color: var(--cyan-primary);
}

/* 日历弹窗 */
.calendar-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
}

.calendar-modal.active {
  display: flex;
}

.calendar-modal > .calendar-card {
  background: var(--bg-card-flat);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  width: 340px;
  max-width: 95vw;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  padding: 16px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.calendar-nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.calendar-nav-btn:hover {
  border-color: var(--cyan-primary);
  color: var(--cyan-primary);
}

.calendar-month-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 8px;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 12px;
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  font-size: 13px;
  color: var(--text-secondary);
}

.calendar-day:hover {
  background: rgba(6, 182, 212, 0.1);
  color: var(--text-primary);
}

.calendar-day.today {
  font-weight: 700;
  color: var(--cyan-primary);
}

.calendar-day.selected {
  background: var(--cyan-primary);
  color: white;
}

.calendar-day.selected:hover {
  background: var(--cyan-primary);
  color: white;
}

.calendar-day.has-data .day-num {
  font-weight: 700;
  color: var(--text-primary);
}

.calendar-day.today.has-data .day-num {
  color: var(--cyan-primary);
}

.day-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan-primary);
  position: absolute;
  bottom: 3px;
}

.calendar-day.selected .day-dot {
  background: white;
}

.calendar-footer {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.calendar-today-btn {
  padding: 6px 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.calendar-today-btn:hover {
  border-color: var(--cyan-primary);
  color: var(--cyan-primary);
}

.warehouse-actions .cyber-btn.secondary {
  padding: 6px 12px;
  font-size: 12px;
}

/* 统计栏 */
.warehouse-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: stretch;
}

.warehouse-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
}

.warehouse-stat-card .stat-value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1;
}

.warehouse-stat-card .stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.warehouse-stat-card.pending .stat-value {
  color: var(--color-warning);
}

.warehouse-stat-card.checked .stat-value {
  color: var(--color-success);
}

/* 筛选栏 */
.warehouse-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 16px;
}

.filter-group {
  display: flex;
  gap: 6px;
}

.filter-btn {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: var(--cyan-primary);
}

.filter-btn.active {
  background: var(--cyan-primary);
  color: white;
  border-color: var(--cyan-primary);
}

.search-group {
  flex: 1;
  max-width: 300px;
}

.warehouse-search {
  width: 100%;
  height: 34px;
  font-size: 13px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-input);
  color: var(--text-secondary);
  transition: border-color 0.2s;
}

.warehouse-search:focus {
  border-color: var(--cyan-primary);
  outline: none;
}

.warehouse-search::placeholder {
  color: var(--text-muted);
}

/* 订单列表 */
.warehouse-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warehouse-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: all 0.2s;
}

.warehouse-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.warehouse-card.pending {
  border-left: 3px solid var(--color-warning);
}

.warehouse-card.checked {
  border-left: 3px solid var(--color-success);
}

.card-top {
  margin-bottom: 12px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.card-order-no {
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan-primary);
  cursor: pointer;
  font-family: var(--font-mono);
}

.card-order-no:hover {
  text-decoration: underline;
}

.card-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.card-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
}

.card-badge.checked {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-success);
}
.card-header-row > .card-badge,
.card-header-row > .card-shortage-badge {
  margin-left: 6px;
}
.card-shortage-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-danger);
  background: rgba(239,68,68,0.12);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(239,68,68,0.25);
  animation: pulse-shortage 2s infinite;
}
.card-shortage-badge span {
  font-size: 14px;
  margin: 0 2px;
}
@keyframes pulse-shortage {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.card-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.card-customer {
  font-weight: 500;
}

.card-time {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* 货物照片 */
.card-photos {
  display: flex;
  gap: 6px;
  margin: 10px 0;
  overflow-x: auto;
  padding: 4px 0;
}

.card-photos::-webkit-scrollbar {
  height: 3px;
}

.card-photo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
  transition: all 0.2s;
}

.card-photo:hover {
  border-color: var(--cyan-primary);
  transform: scale(1.05);
}

.card-photo-more {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: rgba(128, 128, 128, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* 货物照片区域 */
.card-cargo-photos {
  margin: 10px 0;
  padding: 8px;
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 8px;
}

.card-cargo-label {
  font-size: 11px;
  font-weight: 700;
  color: #f59e0b;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.card-cargo {
  border-color: rgba(245, 158, 11, 0.3);
}

.card-cargo:hover {
  border-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

/* 缺件提示 */
.card-shortage {
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-danger);
  margin-bottom: 10px;
}

/* 操作按钮 */
.card-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.card-actions .cyber-btn {
  padding: 6px 16px;
  font-size: 12px;
}

/* 空状态 */
.warehouse-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.warehouse-empty .empty-icon {
  margin-bottom: 16px;
  color: var(--text-muted);
  opacity: 0.5;
}

.warehouse-empty .empty-text {
  font-size: 14px;
  color: var(--text-muted);
}

.warehouse-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--text-secondary);
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(128, 128, 128, 0.2);
  border-top-color: var(--cyan-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.warehouse-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-danger);
}

/* 验货弹窗 */
.inspection-modal {
  background: var(--bg-card-flat);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  width: 95%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.inspection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.inspection-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.inspection-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inspection-close:hover {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.1);
}

.inspection-info {
  padding: 12px 20px;
  background: rgba(128, 128, 128, 0.04);
  border-bottom: 1px solid var(--border-subtle);
}

.inspection-info .info-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
}

.inspection-info .info-label {
  color: var(--text-muted);
}

.inspection-info .info-value {
  color: var(--text-primary);
  font-weight: 600;
}

.inspection-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* 照片上传 */
.inspection-photo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inspection-upload-btn {
  width: 80px;
  height: 80px;
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-input);
}

.inspection-upload-btn:hover {
  border-color: var(--cyan-primary);
  background: rgba(6, 182, 212, 0.05);
}

.inspection-upload-btn .upload-icon {
  font-size: 24px;
}

.inspection-upload-btn span:last-child {
  font-size: 10px;
  color: var(--text-muted);
}

.inspection-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inspection-photo-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.inspection-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.inspection-photo-item .photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.inspection-photo-item:hover .photo-remove {
  opacity: 1;
}

/* 验货明细 */
.inspection-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inspection-item {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px;
}

.inspection-item .item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.inspection-item-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(128,128,128,0.15);
  flex-shrink: 0;
}

.inspection-item-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inspection-item .item-product {
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan-primary);
  font-family: var(--font-mono);
}

.inspection-item .item-color {
  font-size: 12px;
  color: var(--text-secondary);
}

.size-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.size-check-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.size-check-row .size-label {
  width: 24px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.size-check-row .size-expected {
  color: var(--text-muted);
  min-width: 32px;
}

.size-check-input {
  width: 48px;
  height: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  color: var(--text-primary);
  padding: 0 4px;
}

.size-check-input:focus {
  outline: none;
  border-color: var(--cyan-primary);
}

.size-diff {
  font-size: 11px;
  font-weight: 600;
  min-width: 40px;
}

.size-diff.ok {
  color: var(--color-success);
}

.size-diff.shortage {
  color: var(--color-danger);
}

.size-diff.extra {
  color: var(--color-warning);
}

/* 备注 */
.inspection-notes {
  width: 100%;
  height: 70px;
  resize: vertical;
  padding: 10px;
  font-size: 13px;
}

/* 底部 */
.inspection-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
}

.inspection-footer .cyber-btn {
  padding: 8px 20px;
  font-size: 13px;
}

/* 验货报告弹窗 */
.report-modal {
  background: var(--bg-card-flat);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  width: 95%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.report-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.report-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-close:hover {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.1);
}

.report-content {
  padding: 16px 20px;
}

.report-info {
  margin-bottom: 16px;
}

.report-info .info-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
}

.report-info .info-label {
  color: var(--text-muted);
}

.report-info .info-value {
  color: var(--text-primary);
  font-weight: 600;
}

.report-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.report-photos img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  transition: all 0.2s;
}

.report-photos img:hover {
  border-color: var(--cyan-primary);
  transform: scale(1.05);
}

.report-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.report-item {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px;
}

.report-item.ok {
  border-left: 3px solid var(--color-success);
}

.report-item.shortage {
  border-left: 3px solid var(--color-danger);
}

.report-item .item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.report-item .item-product {
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan-primary);
  font-family: var(--font-mono);
}

.report-item .item-color {
  font-size: 12px;
  color: var(--text-secondary);
}

.report-item .item-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
}

.report-item .item-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.size-report {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(128, 128, 128, 0.06);
}

.size-report.ok {
  color: var(--color-success);
}

.size-report.shortage {
  color: var(--color-danger);
}

.size-report.extra {
  color: var(--color-warning);
}

.report-item .item-notes {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.report-notes {
  padding: 10px 12px;
  background: rgba(128, 128, 128, 0.06);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 12px;
}

/* 全屏照片预览 */
.photo-fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.photo-fullscreen-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

/* 响应式 */
@media (max-width: 768px) {
  .warehouse-page {
    padding: 12px;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .page-title {
    text-align: center;
  }

  .warehouse-actions {
    justify-content: center;
  }

  .warehouse-date-display {
    width: 100%;
    justify-content: center;
  }

  .calendar-modal > .calendar-card {
    width: 95vw;
    padding: 12px;
  }

  .warehouse-filters {
    flex-direction: column;
  }

  .search-group {
    max-width: 100%;
    width: 100%;
  }

  .warehouse-search {
    width: 100%;
  }

  .card-info {
    flex-direction: column;
    gap: 4px;
  }

  .card-meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .item-row {
    flex-wrap: wrap;
  }

  .item-sizes {
    width: 100%;
    margin-top: 2px;
  }

  .inspection-modal,
  .report-modal {
    max-height: 90vh;
    width: 98%;
  }

  .size-check-group {
    gap: 6px;
  }

  .size-check-input {
    width: 42px;
  }
}

@media (max-width: 480px) {
  .warehouse-stats {
    flex-wrap: wrap;
    gap: 6px;
  }

  .warehouse-stat-card {
    padding: 8px 14px;
    min-width: 0;
    flex: 1 1 45%;
  }

  .warehouse-stat-card .stat-value {
    font-size: 22px;
  }

  .filter-group {
    width: 100%;
    justify-content: center;
  }

  .card-photos {
    gap: 4px;
  }

  .card-photo {
    width: 50px;
    height: 50px;
  }

  .inspection-upload-btn,
  .inspection-photo-item {
    width: 70px;
    height: 70px;
  }
}
}

/* 日期筛选标签 */
.date-filter-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 20px;
  font-size: 12px;
  color: var(--cyan-primary);
  font-weight: 600;
}
.date-filter-active .clear-date-filter {
  background: none;
  border: none;
  color: var(--cyan-primary);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.7;
}
.date-filter-active .clear-date-filter:hover { opacity: 1; }

/* 排序按钮 */
.sort-group {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border-radius: 8px;
  padding: 2px;
}
.sort-btn {
  padding: 6px 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  white-space: nowrap;
  height: 32px;
  box-sizing: border-box;
  min-width: 60px;
  text-align: center;
}
.sort-btn:hover { color: var(--text-primary); border-color: var(--cyan-primary); }
.sort-btn.active {
  background: rgba(6, 182, 212, 0.12);
  color: var(--cyan-primary);
  font-weight: 600;
  border-color: rgba(6, 182, 212, 0.3);
}

/* 统计卡片 - 全局 */
.warehouse-stat-card.pending-all {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.12);
}
.warehouse-stat-card.checked-all {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.12);
}
/* 卡片日期信息 */
/* 超时警告 */
.overdue-badge {
  display: inline-block;
  margin-right: 4px;
}
.overdue-warning { opacity: 0.8; }
.overdue-critical { animation: pulse-red 2s ease-in-out infinite; }
@keyframes pulse-red {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ===== 新版卡片布局 ===== */
.card-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(128,128,128,0.1);
}
.card-order-no {
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan-primary);
  font-family: var(--font-mono);
}
.card-order-no span { margin-left: 4px; }

/* 元信息 4 列 */
.card-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(128,128,128,0.04);
  border-radius: 8px;
}
.meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meta-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.meta-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.meta-value.highlight {
  color: var(--cyan-primary);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* 货物详情 */
.card-items {
  margin-bottom: 12px;
}
.item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(128,128,128,0.06);
}
.item-row:last-child { border-bottom: none; }
.item-row-shortage { background: rgba(239,68,68,0.06); border-left: 3px solid var(--color-danger); padding-left: 8px; }
.item-shortage { font-size: 11px; color: var(--color-danger); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; white-space: nowrap; }
/* 验货对比样式 - 正常 */
.size-chip-ok {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.25);
}
.size-chip-ok .size-key {
  color: var(--color-success);
}
.size-chip-ok .size-val {
  color: var(--color-success);
  border-left-color: rgba(16,185,129,0.2);
}
/* 验货对比样式 - 缺货 */
.size-chip-short {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.4);
}
.size-chip-short .size-key {
  color: var(--color-danger);
}
.size-chip-short .size-val {
  color: var(--color-danger);
  font-weight: 700;
  border-left-color: rgba(239,68,68,0.3);
}
/* 多货样式 */
.card-surplus-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-warning);
  background: rgba(245,158,11,0.12);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(245,158,11,0.25);
  margin-left: 6px;
}
.card-surplus-badge span {
  font-size: 14px;
  margin: 0 2px;
}
.item-surplus { font-size: 11px; color: var(--color-warning); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; white-space: nowrap; }
.size-chip-extra {
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.4);
}
.size-chip-extra .size-key {
  color: var(--color-warning);
}
.size-chip-extra .size-val {
  color: var(--color-warning);
  font-weight: 700;
  border-left-color: rgba(245,158,11,0.2);
}
.item-no {
  font-weight: 600;
  color: var(--cyan-primary);
  font-family: var(--font-mono);
  min-width: 70px;
  font-size: 13px;
}
.item-color {
  color: var(--text-secondary);
  min-width: 45px;
  font-weight: 500;
}
.item-sizes {
  color: var(--text-muted);
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.size-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(6,182,212,0.08);
  border: 1px solid rgba(6,182,212,0.2);
  border-radius: 4px;
  padding: 1px 0;
  font-size: 12px;
  line-height: 1.3;
}
.size-key {
  padding: 1px 5px;
  font-weight: 600;
  color: var(--cyan-primary);
}
.size-val {
  padding: 1px 6px 1px 4px;
  font-weight: 700;
  color: var(--text-primary);
  border-left: 1px solid rgba(6,182,212,0.15);
}
.item-qty {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

/* 货物图片 */
.card-cargo-photos {
  margin-bottom: 12px;
}
.cargo-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.cargo-photos-grid {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cargo-photo {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid rgba(128,128,128,0.15);
  transition: all 0.2s;
}
.cargo-photo:hover {
  border-color: var(--cyan-primary);
  transform: scale(1.05);
}

/* 卡片操作按钮 */
.card-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid rgba(128,128,128,0.1);
}
.warehouse-page .card-actions .cyber-btn {
  padding: 8px 20px;
  font-size: 13px;
  border-radius: 8px;
}

/* 筛选栏 */
.warehouse-page .card-actions .cyber-btn.danger {
  border-color: rgba(239,68,68,0.5);
  background: rgba(239,68,68,0.08);
}
.size-shortage-hint {
  font-size: 10px;
  color: var(--color-danger);
  white-space: nowrap;
  margin-left: 4px;
  font-weight: 600;
}