/* 基础样式 */
*{ box-sizing: border-box; }
body{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", sans-serif; margin:0; background:#fff; color:#111; }
a{ color:#111; text-decoration:none; }
/* Theme accents */
:root{
  --accent-700:#6d28d9;
  --accent-600:#7c3aed;
  --accent-500:#8b5cf6;
  --accent-400:#a78bfa;
  --accent-300:#c4b5fd;
  --accent-200:#ddd6fe;
  --accent-100:#ede9fe;
  --accent-50:#f5f3ff;
  /* Brand palette */
  --brand-ink:#0b0f12;
  --brand-bg:#0e1217;
  --brand-card:#121720;
  --brand-soft:rgba(255,255,255,0.08);
  --brand-text:#e6e8eb;
  --brand-muted:#a6adbb;
  --brand-accent:#f5b914; /* 金色 */
  --brand-accent-2:#3b82f6; /* 蓝色 */
  --brand-success:#22c55e;
  --brand-warning:#f59e0b;
  --brand-danger:#ef4444;
  /* Brand font (optional: 可替换为专用字体) */
  --brand-font: 'ChrisellaBrand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
  /* Theme dynamic gradients */
  --hero-from: var(--accent-300);
  --hero-to: #a7f3d0;
  --badge-from: #ff7a00;
  --badge-to: #ffbf69;
}

/* 导航（白底极简） */
.nav{ position:sticky; top:0; background:#fff; color:#111; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; box-shadow:0 2px 10px rgba(0,0,0,0.06); border-bottom:1px solid rgba(0,0,0,0.08); }
.nav .brand{ font-weight:700; letter-spacing:0.5px; }
.nav .links{ display:flex; gap:14px; }
.nav .links a{ color:#111; opacity:0.8; }
.nav .links a.active{ opacity:1; font-weight:600; }
.nav.nav-visible{ background:#000; color:#fff; border-bottom:1px solid rgba(255,255,255,0.12); box-shadow:0 2px 10px rgba(0,0,0,0.3); }
.nav.nav-visible .links a{ color:#fff; opacity:0.9; }
.nav.nav-visible .brand{ color:#fff; }
.nav .actions{ display:flex; align-items:center; gap:12px; }
.nav .cart{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid #111; border-radius:50%; }
.nav.nav-visible .cart{ border-color:#fff; }
.nav .cart .badge{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 6px; display:flex; align-items:center; justify-content:center; background:#111; color:#fff; font-size:10px; border-radius:12px; }
.nav.nav-visible .cart .badge{ background:#fff; color:#000; }

/* 统一模板：黑底居中品牌 + 下方子导航 */
.site-topbar{ position:sticky; top:0; background:#000; color:#fff; display:flex; justify-content:center; align-items:center; height:64px; border-bottom:1px solid rgba(255,255,255,0.12); box-shadow:0 2px 10px rgba(0,0,0,0.3); z-index:101; animation: topbarIn .36s ease-out both; padding-top: env(safe-area-inset-top, 0px); }
.brand-hero{ font-weight:900; letter-spacing:6px; font-size: clamp(22px, 3.2vw, 28px); font-family: var(--brand-font); }
.brand-hero.logo-animated{ position:relative; animation: logoGlow 6s ease-in-out infinite; }
.brand-hero.logo-animated::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-10px; width: clamp(160px, 28vw, 320px); height:2px; background:linear-gradient(90deg, rgba(255,72,120,0), rgba(255,72,120,.85), rgba(118,196,255,.85), rgba(118,196,255,0)); background-size:200% 100%; filter:blur(.2px); opacity:.9; animation: underlineFlow 6s linear infinite; }
/* 顶部黑底场景：仅保留粉色光晕，禁用下划线 */
.site-topbar .brand-hero.logo-animated{ animation: logoGlow 6s ease-in-out infinite; }
.site-topbar .brand-hero.logo-animated::after{ display:block; opacity:.95; }
.site-subnav{ background:#fff; border-bottom:1px solid rgba(0,0,0,0.08); display:flex; justify-content:center; gap:22px; padding:8px 0; position:sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index:100; backdrop-filter:saturate(120%) blur(6px); animation: subnavIn .42s ease-out both; }
.site-subnav a{ color:#111; font-size:13px; letter-spacing:1px; font-family: var(--brand-font); opacity:0.85; padding:6px 12px; border-radius:999px; transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.site-subnav a:hover{ opacity:1; transform:translateY(-1px); }
.site-subnav a.active{ opacity:1; font-weight:800; background:#fff; border:1px solid rgba(0,0,0,0.08); box-shadow:0 10px 24px rgba(0,0,0,0.14); animation: pillIn .24s ease-out both; }

@keyframes pillIn{ from{ transform: translateY(2px) scale(0.98); box-shadow:0 0 0 rgba(0,0,0,0); } to{ transform: translateY(0) scale(1); } }

/* 通用 LOGO 动画（与首页一致） */
@keyframes logoGlow{
  0%{ text-shadow:0 1px 0 rgba(255,255,255,.02), 0 0 10px rgba(255,72,120,.35), 0 0 18px rgba(118,196,255,.25); }
  50%{ text-shadow:0 1px 0 rgba(255,255,255,.02), 0 0 16px rgba(255,72,120,.5), 0 0 28px rgba(118,196,255,.35); }
  100%{ text-shadow:0 1px 0 rgba(255,255,255,.02), 0 0 10px rgba(255,72,120,.35), 0 0 18px rgba(118,196,255,.25); }
}
@keyframes underlineFlow{ 0%{ background-position:0% 0; opacity:.8;} 50%{ background-position:100% 0; opacity:1;} 100%{ background-position:0% 0; opacity:.8;} }
/* 顶部LOGO的粉色光晕（更贴近示例） */
@keyframes topbarLogoGlow{
  0%{ text-shadow:0 1px 0 rgba(255,255,255,.02), 0 0 6px rgba(255,72,120,.22), 0 0 14px rgba(255,72,120,.18); }
  50%{ text-shadow:0 1px 0 rgba(255,255,255,.02), 0 0 10px rgba(255,72,120,.35), 0 0 22px rgba(255,72,120,.28); }
  100%{ text-shadow:0 1px 0 rgba(255,255,255,.02), 0 0 6px rgba(255,72,120,.22), 0 0 14px rgba(255,72,120,.18); }
}

/* 顶栏入场动画 */
@keyframes topbarIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
/* 子导航入场动画 */
@keyframes subnavIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }

/* 顶栏右侧操作区域（放置用户信息） */
.site-topbar .actions{ position:absolute; right:16px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:12px; z-index:102; }
/* 顶部购物车按钮（黑底右上角） */
.site-topbar .cart{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid #fff; border-radius:50%; color:#fff; transition:transform .16s ease, box-shadow .16s ease; }
.site-topbar .cart:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,255,255,0.24); }
/* 购物车图标动画 */
.icon-cart{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:1.8; filter:drop-shadow(0 0 2px rgba(255,255,255,0.25)); }
.icon-cart path{ stroke-dasharray:60; stroke-dashoffset:60; transition: stroke-dashoffset .6s ease; }
.site-topbar .cart:hover .icon-cart path{ stroke-dashoffset:0; }
.icon-cart circle{ fill:#fff; opacity:.9; transform-origin:center; transition: transform .3s ease, opacity .3s ease; }
.site-topbar .cart:hover .icon-cart circle{ transform: scale(1.15); opacity:1; }
@keyframes cartPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.35);} 70%{ box-shadow:0 0 0 10px rgba(255,255,255,0);} 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0);} }
.site-topbar .cart{ animation: cartPulse 3s ease-out infinite; }

/* 用户菜单（通用） */
.user-menu{ position:relative; }
.user-menu .trigger{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:rgba(255,255,255,0.8); box-shadow:0 1px 2px rgba(0,0,0,0.06); cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; }
.user-menu .trigger:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,0.12); }
.user-menu .avatar{ width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#a48bfd,#7bd0ff); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.user-menu .name{ font-size:13px; color:#333; }
.site-topbar .user-menu .name{ color:#fff; }
.site-topbar .user-menu .trigger{ background:rgba(255,255,255,0.14); }
.user-menu .dropdown{ position:absolute; top:110%; right:0; min-width:360px; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:18px; box-shadow:0 22px 46px rgba(0,0,0,0.16); padding:8px; z-index:100;
  visibility:hidden; opacity:0; transform:translateY(10px) scale(0.98); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; }
.user-menu.open .dropdown{ visibility:visible; opacity:1; transform:translateY(0) scale(1); }
.dropdown .user-head{ display:flex; gap:16px; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(0,0,0,0.08); }
.dropdown .avatar-lg{ width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#a48bfd,#7bd0ff); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; }
.dropdown .name-full{ font-weight:800; font-size:16px; color:#111; }
.dropdown .identity{ font-size:13px; color:#666; }
.dropdown .actions{ display:flex; gap:12px; padding:12px 14px; }
.dropdown .btn-outline{ flex:1; background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:14px; padding:12px 14px; }
.dropdown .btn-outline:hover{ border-color:#cfd4dc; box-shadow:0 8px 18px rgba(0,0,0,0.08); transform:translateY(-1px); }
.dropdown .btn-primary-dark{ flex:1; background:#111; color:#fff; border-radius:14px; padding:12px 14px; }
.dropdown .btn-primary-dark:hover{ box-shadow:0 10px 24px rgba(0,0,0,0.18); transform:translateY(-1px); }
.user-menu .dropdown a, .user-menu .dropdown button{ display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px; font-size:13px; color:#333; background:transparent; border:none; cursor:pointer; }
.user-menu .dropdown a:hover, .user-menu .dropdown button:hover{ background:rgba(0,0,0,0.05); }

/* 页面内容入场动画（通用content容器） */
.content{ animation: contentIn .36s ease-out both; }
@keyframes contentIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }

/* 容器与卡片（浅色） */
.container{ max-width: 1100px; margin: 0 auto; padding: 18px; }
.card{ background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,0.06); padding:16px; margin:16px 0; }
.card h2{ margin:0 0 8px 0; font-size:18px; color:#111; }
.sub{ color:#666; font-size:14px; }

/* 表单（浅色） */
.row{ display:flex; gap:10px; margin:8px 0; }
input, textarea, select{ flex:1; padding:10px; border-radius:10px; border:1px solid #ddd; background:#fff; color:#111; }
button{ padding:10px 16px; border-radius:10px; border:none; background:#111; color:#fff; cursor:pointer; }
button[disabled]{ opacity:0.5; cursor:not-allowed; }

/* 列表（产品网格更时尚） */
.list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.list.cols-3{ grid-template-columns: repeat(3, 1fr); }
.item{ border:1px solid rgba(0,0,0,0.08); border-radius:12px; padding:12px; background:#fff; }
.item .title{ font-weight:600; color:#111; }
.item .desc{ color:#666; font-size:13px; margin-top:6px; }
.item img{ width:100%; height:180px; object-fit:cover; border-radius:8px; margin-bottom:8px; }

/* LV风格产品卡（悬浮信息条） */
.product{ position:relative; border:1px solid rgba(0,0,0,0.08); border-radius:12px; overflow:hidden; background:#fff; content-visibility:auto; contain-intrinsic-size: 320px 420px; }
.product img{ width:100%; aspect-ratio: 4 / 3; height:auto; object-fit:cover; transition:transform .2s ease, filter .2s ease; filter:brightness(0.96); }
.product:hover img{ transform:scale(1.02); filter:brightness(1.0); }
.product:hover{ border-color:rgba(124,58,237,0.25); box-shadow:0 4px 18px rgba(124,58,237,0.18); }
.product .meta{ padding:12px; }
.product .code-badge{ position:absolute; top:12px; right:12px; padding:6px 10px; background:rgba(255,255,255,0.95); border:1px solid #dddfe3; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,0.08); color:#111; font-weight:600; font-size:13px; letter-spacing:0.6px; backdrop-filter:saturate(120%) blur(2px); }
.product .title{ font-weight:700; letter-spacing:0.5px; font-size:16px; }
.product .specs{ display:grid; grid-template-columns: 64px 1fr; gap:8px 10px; margin-top:6px; }
.product .spec-label{ color:#6b7280; font-size:12px; letter-spacing:1px; }
.product .spec-value{ font-size:13px; font-weight:600; color:#111; white-space:nowrap; }
.product .chips-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.product .chip-min{ background:var(--accent-50); border:1px solid rgba(124,58,237,0.18); border-radius:999px; padding:6px 10px; font-size:12px; color:#111; box-shadow:0 2px 8px rgba(124,58,237,0.10); letter-spacing:0.6px; }
.product .chip-min:hover{ background:var(--accent-100); }
.product .price{ margin-top:4px; color:#333; font-weight:700; }
.product .overlay{ position:absolute; inset:auto 12px 12px 12px; display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.08); border-radius:12px; padding:8px 10px; opacity:0; transform:translateY(10px); transition:all .2s ease; }
.product:hover .overlay{ opacity:1; transform:translateY(0); }
.product .btn{ border:1px solid #111; background:#111; color:#fff; padding:8px 12px; border-radius:24px; font-size:12px; letter-spacing:1px; }
.product .link{ color:#111; text-decoration:none; font-size:12px; }

/* 工具栏（重新设计更美观） */
.toolbar{ display:flex; gap:12px; align-items:center; margin:18px 0 12px; }
.toolbar .search{ position:relative; flex:1; }
.toolbar .search::before{ content:'\1F50D'; position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#999; font-size:14px; }
.toolbar input[type="search"]{ width:100%; padding:10px 12px 10px 34px; border:1px solid #e5e7eb; border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,0.06); }
.toolbar input[type="search"]:focus{ outline:none; border-color:var(--accent-400); box-shadow:0 0 0 3px var(--accent-100); }
.toolbar .filters{ display:flex; gap:10px; align-items:center; }
.toolbar .filters select{ appearance:none; border:1px solid #e5e7eb; border-radius:999px; padding:10px 28px 10px 12px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.06);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px; }
.toolbar .filters select:focus{ outline:none; border-color:var(--accent-400); box-shadow:0 0 0 3px var(--accent-100); }
/* 搜索与筛选的时尚动效 */
.toolbar .search::before{ animation: floatIcon 2.8s ease-in-out infinite; }
@keyframes floatIcon{ 0%{ transform:translateY(-50%) translateX(0); opacity:.7; } 50%{ transform:translateY(-50%) translateX(2px); opacity:1; } 100%{ transform:translateY(-50%) translateX(0); opacity:.7; } }
.toolbar input[type="search"]{ transition: transform .18s ease, box-shadow .18s ease; }
.toolbar input[type="search"]:focus{ animation: focusPulse 1.8s ease-in-out infinite; transform: translateY(-1px) scale(1.01); }
@keyframes focusPulse{ 0%{ box-shadow:0 0 0 3px var(--accent-100); } 50%{ box-shadow:0 0 0 5px rgba(124,58,237,0.20); } 100%{ box-shadow:0 0 0 3px var(--accent-100); } }
.toolbar .filters select{ transition: transform .18s ease, box-shadow .18s ease; }
.toolbar .filters select:hover{ transform:translateY(-1px) scale(1.01); box-shadow:0 4px 14px rgba(124,58,237,0.12); }

/* 分类横向滚动条（美观胶囊标签） */
.cat-scroll{ display:flex; gap:10px; overflow-x:auto; padding:8px 2px 4px; margin:6px 0 12px; scroll-snap-type:x mandatory; }
.cat-scroll::-webkit-scrollbar{ height:8px; }
.cat-scroll::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.12); border-radius:999px; }
.cat-chip{ flex:0 0 auto; scroll-snap-align:start; border:1px solid rgba(0,0,0,0.10); background:#fff; color:#111; border-radius:999px; padding:8px 14px; font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,0.06); letter-spacing:0.5px; cursor:pointer; position:relative; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.cat-chip:hover{ border-color:var(--accent-400); box-shadow:0 6px 18px rgba(124,58,237,0.16); transform:translateY(-1px); animation: chipPulse 2s ease-in-out infinite; }
.cat-chip.active{ background:var(--accent-50); color:#111; border-color:var(--accent-400); box-shadow:0 6px 18px rgba(124,58,237,0.22); animation: chipPulse 2s ease-in-out infinite; }
.cat-chip::after{ content:""; position:absolute; top:0; left:-40%; width:40%; height:100%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0)); transform:skewX(-20deg); opacity:0; }
.cat-chip:hover::after{ animation: chipShine 1.6s ease-out forwards; }
@keyframes chipPulse{ 0%{ box-shadow:0 2px 8px rgba(124,58,237,0.10);} 50%{ box-shadow:0 8px 22px rgba(124,58,237,0.22);} 100%{ box-shadow:0 2px 8px rgba(124,58,237,0.10);} }
@keyframes chipShine{ 0%{ left:-40%; opacity:0;} 20%{ opacity:.9;} 100%{ left:110%; opacity:0;} }

/* 弹窗详情 */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:100; }
.modal.show{ display:flex; }
.modal .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.4); }
.modal .dialog{ position:relative; z-index:1; width:min(800px, 92vw); background:#fff; border-radius:12px; box-shadow:0 8px 40px rgba(0,0,0,0.2); overflow:hidden; }
.modal .dialog .content{ display:grid; grid-template-columns: 1.25fr 0.85fr; gap:16px; padding:16px; }
.modal .dialog img{ width:100%; aspect-ratio: 4 / 3; height:auto; object-fit:cover; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,0.12); }
.modal .dialog .title{ font-size:24px; font-weight:700; letter-spacing:1px; line-height:1.25; }
.modal .dialog .details{ display:flex; flex-direction:column; gap:16px; }
.modal .dialog .details .meta-top{ display:flex; align-items:flex-start; justify-content:flex-start; flex-wrap:wrap; gap:8px 12px; padding-right:0; }
.modal .dialog .code-pill{ border:1px solid var(--accent-400); background:var(--accent-50); color:var(--accent-700); padding:8px 12px; border-radius:999px; font-size:13px; letter-spacing:1px; box-shadow:0 2px 8px rgba(124,58,237,0.12); }
.modal .dialog .specs{ display:grid; grid-template-columns: 80px 1fr; gap:12px 14px; margin-top:10px; }
.modal .dialog .spec-label{ color:#6b7280; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
.modal .dialog .spec-value{ font-size:14px; font-weight:600; color:#111; white-space:nowrap; word-break:keep-all; }
.modal .dialog .chips-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.modal .dialog .chip-min{ background:var(--accent-50); border:1px solid rgba(124,58,237,0.20); border-radius:999px; padding:8px 12px; font-size:12px; color:#111; box-shadow:0 2px 8px rgba(124,58,237,0.10); letter-spacing:0.6px; }
.modal .dialog .desc{ margin-top:8px; color:#444; line-height:1.6; }
.modal .dialog .price{ font-size:18px; font-weight:700; color:#333; }
.modal .dialog .close{ position:absolute; top:10px; right:12px; background:#111; color:#fff; border:none; border-radius:20px; padding:6px 10px; cursor:pointer; }

/* 统计 */
.stats{ display:flex; gap:12px; flex-wrap:wrap; }
.chip{ background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:32px; padding:10px 14px; display:flex; gap:10px; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.chip .label{ color:#666; font-weight:600; }
.chip .num{ color:#111; font-weight:700; font-size:18px; }

/* 横幅（浅色） */
.hero{ position:relative; height: clamp(240px, 32vw, 380px); background:#f8f8f8; border-bottom:1px solid rgba(0,0,0,0.06); }
.hero img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.92); }
.hero .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05)); }
.hero .content{ position:absolute; bottom:26px; left:26px; color:#111; }
.hero .title{ font-size:36px; font-weight:700; letter-spacing:1px; }
.hero .sub{ color:#666; }

/* 栏目磁贴（浅色） */
.tiles{ display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
.tile{ position:relative; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:12px; overflow:hidden; }
.tile img{ width:100%; height:160px; object-fit:cover; filter:brightness(0.96); }
.tile .label{ position:absolute; bottom:10px; left:10px; color:#111; font-weight:700; background:rgba(255,255,255,0.7); padding:6px 10px; border-radius:20px; }

.footer{ text-align:center; color:#888; padding:22px; border-top:1px solid rgba(0,0,0,0.06); }

/* 轻量提示（toast） */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px); background:#111; color:#fff; padding:10px 16px; border-radius:24px; box-shadow:0 6px 20px rgba(0,0,0,0.2); opacity:0; pointer-events:none; z-index:200; transition:all .25s ease; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.nav.nav-visible ~ .toast{ background:#fff; color:#000; border:1px solid rgba(0,0,0,0.12); }

/* 响应式适配（iPad/窄屏） */
@media (max-width: 1024px){
  .toolbar{ flex-direction: column; align-items:stretch; gap:10px; }
  .toolbar .filters{ justify-content: space-between; }
  .toolbar .filters select{ flex:1; min-width:0; }
  .list{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .product .title{ font-size:15px; }
  .product .chip-min{ padding:6px 10px; font-size:12px; }
  .modal .dialog .content{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .container{ padding: 14px; }
  .card{ padding:14px; }
  .toolbar .search::before{ left:10px; }
  .toolbar input[type="search"]{ padding-left:32px; }
  .product .code-badge{ font-size:12px; padding:6px 10px; }
  .product .specs{ grid-template-columns: 56px 1fr; }
}

@media (max-width: 600px){
  .list{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .product .title{ font-size:14px; }
  .product .spec-value{ font-size:12px; }
  .modal .dialog .title{ font-size:20px; }
}

/* 更小屏幕（小手机） */
@media (max-width: 480px){
  .container{ padding: 12px; }
  .card{ padding:12px; }
  .toolbar{ gap:8px; }
  .list{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
  .product .overlay{ inset:auto 8px 8px 8px; }
}

/* 大屏增强（桌面宽屏） */
@media (min-width: 1280px){
  .container{ max-width: 1280px; }
  .list{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .hero{ height: clamp(320px, 28vw, 460px); }
  .tiles{ grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1536px){
  .container{ max-width: 1400px; }
  .list{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* 无悬停设备：确保操作可见 */
@media (hover: none){
  .product .overlay{ opacity:1; transform:none; }
}

/* 减少动效以提升可访问性 */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* =====================
   Tech 主题（玻璃/微光/渐变）
   仅在 body.tech 上生效，避免影响其它页面
===================== */
body.tech{ background:
  radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,0.25), rgba(124,58,237,0) 60%),
  radial-gradient(900px 500px at 90% 10%, rgba(8,145,178,0.25), rgba(8,145,178,0) 55%),
  linear-gradient(180deg, #0b1020, #0a0f1b 60%, #0a0e1a);
  color:#e8eaf6;
}

/* =====================
   Brand 深色主题（强调品牌风格）
   仅在 body.brand 上生效
===================== */
body.brand{ background:
  radial-gradient(1200px 700px at 10% -10%, rgba(245,185,20,0.12), rgba(245,185,20,0) 60%),
  radial-gradient(900px 500px at 90% 10%, rgba(59,130,246,0.18), rgba(59,130,246,0) 55%),
  linear-gradient(180deg, var(--brand-bg), #0c1015 60%, #0b0f12);
  color: var(--brand-text);
}
body.brand a{ color: #eaf2ff; }
body.brand .card{ background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04)); border:1px solid rgba(255,255,255,0.12); border-radius:16px; backdrop-filter:saturate(130%) blur(8px); box-shadow:0 10px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12); }
body.brand .sub{ color: var(--brand-muted); }
body.brand .btn-primary{ background: linear-gradient(135deg, var(--brand-accent), #e7a90f); color:#111; box-shadow:0 10px 24px rgba(245,185,20,0.35), inset 0 1px 0 rgba(255,255,255,0.35); border:1px solid rgba(245,185,20,0.6); }
body.brand .btn-primary:hover{ filter:brightness(1.06); transform: translateY(-0.5px); box-shadow:0 14px 34px rgba(245,185,20,0.45); }
body.brand .btn-outline{ background:transparent; color:var(--brand-text); border:1px solid rgba(255,255,255,0.22); }
body.brand .btn-outline:hover{ border-color: rgba(245,185,20,0.55); box-shadow:0 8px 22px rgba(59,130,246,0.22); }

/* 顶部品牌栏与子导航在深色主题下的优化 */
body.brand .site-topbar{ background:#000; border-bottom:1px solid rgba(255,255,255,0.12); }
body.brand .brand-hero{ color:#fff; letter-spacing:6px; }
body.brand .site-subnav{ background:rgba(255,255,255,0.06); border-bottom-color: rgba(255,255,255,0.12); }
body.brand .site-subnav a{ color:#111; opacity:1; }
body.brand .site-subnav a.active{ background: rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.20); box-shadow:0 6px 16px rgba(0,0,0,0.30); }

/* 时间轴在品牌主题下的重设计 */
body.brand .timeline{ border-left:2px solid rgba(255,255,255,0.14); padding-left:22px; }
body.brand .timeline .timeline-item{ animation: riseFade .34s ease-out both; }
body.brand .timeline .timeline-item::before{ left:-8px; top:10px; width:12px; height:12px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff, #ffd677 35%, #f5b914 60%, #b3830a 100%); box-shadow: 0 0 0 4px rgba(245,185,20,0.16), 0 0 12px rgba(245,185,20,0.35); animation: dotPulse 2.4s ease-in-out infinite; }
body.brand .timeline .timeline-meta{ color: var(--brand-muted); }
body.brand .timeline .timeline-content{ background:#fff; border:1px solid rgba(0,0,0,0.10); box-shadow:0 6px 18px rgba(0,0,0,0.08); }
body.brand .timeline .timeline-content:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,0.12); }

/* 类型胶囊统一品牌风格 */
body.brand .type-pill{ border:1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: var(--brand-text); }
body.brand .type-default{ background: rgba(255,255,255,0.06); }
body.brand .type-color{ background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.35); color:#dce9ff; }
body.brand .type-so{ background: rgba(167,139,250,0.20); border-color: rgba(167,139,250,0.40); color:#efeaff; }
body.brand .type-sample{ background: rgba(34,197,94,0.20); border-color: rgba(34,197,94,0.38); color:#e8fff0; }
body.brand .type-find{ background: rgba(245,158,11,0.20); border-color: rgba(245,158,11,0.38); color:#fff4d6; }
body.brand .type-quote{ background: rgba(244,114,182,0.20); border-color: rgba(244,114,182,0.38); color:#ffe6f4; }
body.brand .type-spandex{ background: rgba(14,116,144,0.20); border-color: rgba(14,116,144,0.38); color:#e6fbff; }

/* 状态胶囊品牌色 */
body.brand .status-pill.todo{ background: rgba(245,158,11,0.20); color:#fff1ce; border:1px solid rgba(245,158,11,0.42); }
body.brand .status-pill.done{ background: rgba(34,197,94,0.22); color:#e6ffee; border:1px solid rgba(34,197,94,0.42); }

/* 附件缩略图在深色主题下的边框与阴影 */
body.brand .att-thumb, body.brand .att-thumb-lg{ border-color: rgba(255,255,255,0.20); box-shadow:0 6px 16px rgba(0,0,0,0.30); }
body.brand .file-chip{ border-color: rgba(255,255,255,0.22); color: var(--brand-text); background: rgba(255,255,255,0.06); }

/* 发布弹窗品牌化 */
body.brand .modal .dialog{ background: var(--brand-card); border:1px solid rgba(255,255,255,0.14); }
body.brand .modal .dialog .title{ color:#fff; }
body.brand .modal .dialog .desc{ color: var(--brand-muted); }
body.brand .modal .dialog .chip-min{ background: rgba(59,130,246,0.16); border-color: rgba(59,130,246,0.35); color:#dce9ff; }

/* 品牌动效：时间轴项上浮、胶囊微光、节点脉冲 */
@keyframes riseFade{ from{ transform: translateY(10px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
@keyframes dotPulse{ 0%{ box-shadow:0 0 0 4px rgba(245,185,20,0.16), 0 0 12px rgba(245,185,20,0.35); } 50%{ box-shadow:0 0 0 6px rgba(245,185,20,0.10), 0 0 20px rgba(245,185,20,0.50); } 100%{ box-shadow:0 0 0 4px rgba(245,185,20,0.16), 0 0 12px rgba(245,185,20,0.35); } }
@keyframes capsuleShimmer{ 0%{ background-position: -120px 0; } 100%{ background-position: 120px 0; } }
body.brand .type-pill:hover{ background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.06) 100%); background-size: 240px 100%; animation: capsuleShimmer 1.4s linear infinite; }


/* =====================
   门户布局与版式增强
===================== */
.client-layout{ display:grid; grid-template-columns: 240px 1fr; gap:20px; align-items:start; max-width: none; width: 100vw; margin: 0; }
.client-sidebar{ position:sticky; top: calc(64px + 44px); display:flex; flex-direction:column; gap:8px; padding:12px; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,0.06); }
.client-sidebar .side-link{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#111; border:1px solid rgba(0,0,0,0.06); background:#fff; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.client-sidebar .side-link:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,0.10); border-color:#e5e7eb; }
.client-sidebar .side-link.active{ background:var(--accent-50); border-color:var(--accent-300); box-shadow:0 6px 16px rgba(124,58,237,0.12); }
.client-sidebar .side-link .label{ font-size:13px; font-weight:600; letter-spacing:.6px; }
.client-main{ min-height: 0; }
.panel{ display:none; }
.panel.show{ display:block; animation: panelIn .28s ease-out both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* 概览卡片（胶囊数字卡） */
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.card-hero{ position:relative; padding:16px; border-radius:16px; color:#111; box-shadow:0 4px 16px rgba(0,0,0,0.08); border:1px solid rgba(0,0,0,0.08); overflow:hidden; }
.card-hero .title{ font-size:13px; color:#374151; letter-spacing:.6px; }
.card-hero .num{ font-size:28px; font-weight:800; letter-spacing:.8px; margin-top:6px; }
.card-hero::after{ content:''; position:absolute; inset:auto -20px -20px auto; width:120px; height:120px; border-radius:50%; opacity:.18; }
.card-hero.blue{ background:linear-gradient(180deg, #e0f2fe, #fff 60%); border-color:#bfdbfe; }
.card-hero.blue::after{ background:#60a5fa; }
.card-hero.green{ background:linear-gradient(180deg, #dcfce7, #fff 60%); border-color:#bbf7d0; }
.card-hero.green::after{ background:#34d399; }
.card-hero.yellow{ background:linear-gradient(180deg, #fef9c3, #fff 60%); border-color:#fde68a; }
.card-hero.yellow::after{ background:#f59e0b; }

/* 进入动画（卡片/列表统一） */
.card-enter{ animation: cardIn .28s ease-out both; }
@keyframes cardIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: translateY(0); } }
.card-enter:nth-child(1){ animation-delay:.02s; }
.card-enter:nth-child(2){ animation-delay:.04s; }
.card-enter:nth-child(3){ animation-delay:.06s; }
.card-enter:nth-child(4){ animation-delay:.08s; }
.card-enter:nth-child(5){ animation-delay:.10s; }

/* 订单卡片（更美观） */
.order-card{ position:relative; border:1px solid rgba(0,0,0,0.08); border-radius:14px; background:#fff; padding:14px; box-shadow:0 2px 10px rgba(0,0,0,0.06); margin:12px 0; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.order-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.12); border-color:#e5e7eb; }
.order-card .head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.order-card .title{ font-weight:700; letter-spacing:.6px; }
.order-card .sub{ color:#666; font-size:12px; }
.order-card .due-badge{ position:absolute; top:12px; right:12px; background:#111; color:#fff; border-radius:999px; padding:6px 10px; font-size:12px; box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.order-card .metrics{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; margin-top:8px; }
.order-card .metric{ background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:12px; padding:10px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.order-card .metric .label{ color:#6b7280; font-size:12px; letter-spacing:.6px; }
.order-card .metric .value{ font-size:16px; font-weight:700; }
.order-card .metric.success .value{ color:#16a34a; }
.order-card .metric.warning .value{ color:#f59e0b; }
.order-card .meta-grid{ display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:10px; margin-top:10px; }
.order-card .meta .label{ color:#6b7280; font-size:12px; }
.order-card .meta .value{ font-weight:600; }
.order-card .progress{ position:relative; height:8px; background:#f3f4f6; border-radius:999px; margin-top:12px; overflow:hidden; }
.order-card .progress .bar{ height:100%; background:linear-gradient(90deg, var(--accent-400), var(--accent-600)); border-radius:999px; animation: barGrow .6s ease-out both; }
@keyframes barGrow{ from{ width:0; } to{ width:var(--bar-w, 100%); } }
.order-card .progress-info{ display:flex; justify-content:flex-end; font-size:12px; color:#6b7280; margin-top:4px; }

/* 样品卡片 */
.sample-card{ border:1px solid rgba(0,0,0,0.08); border-radius:14px; background:#fff; padding:14px; box-shadow:0 2px 10px rgba(0,0,0,0.06); margin:12px 0; transition:transform .16s ease, box-shadow .16s ease; }
.sample-card:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,0.12); }
.sample-card .photo{ width:100%; aspect-ratio: 4 / 3; object-fit:cover; border-radius:10px; }
.sample-card .body .title{ font-weight:700; }
.sample-card .body .sub{ color:#6b7280; font-size:12px; margin-top:4px; }
.sample-card .meta-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:10px; }
.sample-card .meta .label{ color:#6b7280; font-size:12px; }
.sample-card .meta .value{ font-weight:600; }
.sample-card .weave{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.sample-card .weave .thumb{ width:80px; height:80px; object-fit:cover; border-radius:10px; border:1px solid #e5e7eb; }
.sample-card .spec{ font-size:13px; color:#374151; }
.sample-card .actions{ display:flex; justify-content:flex-end; }
.sample-card .spec-panel{ display:none; border-top:1px dashed #e5e7eb; margin-top:10px; padding-top:10px; }
.sample-card.open .spec-panel{ display:block; animation: panelIn .24s ease-out both; }
.spec-table{ width:100%; border-collapse:collapse; font-size:13px; }
.spec-table th, .spec-table td{ border:1px solid #e5e7eb; padding:8px; }
.spec-badge{ display:inline-block; padding:2px 8px; background:#111; color:#fff; border-radius:999px; font-size:12px; }

/* 时间轴（发布内容） */
.timeline{ position:relative; padding-left:0; border-left:none; display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:12px; align-content:start; }
.timeline .timeline-item{ position:relative; margin:0; animation: slideIn .32s ease-out both; display:block; }
.timeline .timeline-item::before{ content:''; display:none; }
.timeline .timeline-meta{ position:absolute; left:84px; right:12px; top:10px; font-size:12px; color:#667085; margin:0; opacity:.9; }
.timeline .timeline-content{ position:relative; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:14px; padding:16px; padding-top:52px; box-shadow:0 2px 10px rgba(0,0,0,0.06); transition:transform .16s ease, box-shadow .16s ease; }
.timeline .timeline-content:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,0.12); }
.timeline .timeline-content .content{ font-size:14px; line-height:1.7; color:#111; }
.type-pill{ display:inline-block; border:1px solid #e5e7eb; border-radius:999px; padding:4px 10px; font-size:12px; letter-spacing:.6px; }
.type-default{ background:#f3f4f6; border-color:#e5e7eb; }
.type-color{ background:#dbeafe; border-color:#bfdbfe; color:#1e40af; }
.type-so{ background:#e0e7ff; border-color:#c7d2fe; color:#3730a3; }
.type-sample{ background:#dcfce7; border-color:#bbf7d0; color:#065f46; }
.type-find{ background:#fef3c7; border-color:#fde68a; color:#92400e; }
.type-quote{ background:#fae8ff; border-color:#f5d0fe; color:#6b21a8; }
.type-spandex{ background:#cffafe; border-color:#a5f3fc; color:#0e7490; }
.status-pill{ display:inline-block; border-radius:999px; padding:4px 10px; font-size:12px; }
.status-pill.todo{ background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.status-pill.done{ background:#dcfce7; color:#065f46; border:1px solid #bbf7d0; }
.attachments{ margin-top:8px; }
.att-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; }
.timeline .att-grid{ grid-template-columns: repeat(4, 1fr); }
.att-thumb{ width:100%; aspect-ratio: 1 / 1; object-fit:cover; border-radius:8px; border:1px solid #e5e7eb; }
.att-thumb-lg{ width:100%; max-height:320px; object-fit:contain; border-radius:8px; border:1px solid #e5e7eb; }
.file-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.file-chip{ display:inline-block; border:1px solid #e5e7eb; border-radius:999px; padding:6px 10px; font-size:12px; color:#374151; background:#fff; }

/* 发布弹窗的类型选择胶囊 */
.type-row{ display:flex; flex-wrap:wrap; gap:8px; }
.type-row .type-pill{ background:#fff; border:1px solid #e5e7eb; border-radius:999px; padding:8px 12px; }
.type-row .type-pill.active{ background:var(--accent-50); border-color:var(--accent-400); box-shadow:0 4px 14px rgba(124,58,237,0.12); }

/* 通用按钮样式补充 */
.btn-primary{ background:#111; color:#fff; border-radius:10px; padding:10px 14px; }
.btn-outline{ background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px; }
.btn-outline:hover{ border-color:#cfd4dc; box-shadow:0 6px 16px rgba(0,0,0,0.10); }
.btn-danger{ background:#ef4444; color:#fff; border-radius:10px; padding:10px 14px; }

/* 动画：列表项滑入 */
@keyframes slideIn{ from{ transform:translateY(12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* 日期胶囊（左侧小卡片） */
:root{ --pill-radius: 16px; }
.date-pill{ position:absolute; left:12px; top:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:56px; padding:6px 4px; border-radius: var(--pill-radius); background: linear-gradient(180deg, #fef3c7, #fde68a); border:1px solid #fcd34d; box-shadow:0 6px 16px rgba(245,158,11,0.18); }
.date-pill .day{ font-size:16px; font-weight:800; color:#111; letter-spacing:0.8px; }
.date-pill .ym{ font-size:11px; color:#6b7280; }
.date-pill .type{ font-size:10px; font-weight:700; color:#92400e; background:#fff; border:1px solid #fcd34d; border-radius:999px; padding:2px 6px; }

/* 品牌主题下的日期胶囊 */
body.brand .date-pill{ background: linear-gradient(180deg, #ffe6a7, #f5b914); border-color: rgba(245,185,20,0.65); box-shadow:0 10px 24px rgba(245,185,20,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
body.brand .date-pill .day{ color:#111; }
body.brand .date-pill .ym{ color:#3f4959; }
body.brand .date-pill .type{ background: rgba(255,255,255,0.85); border-color: rgba(245,185,20,0.65); color:#7a5b0a; }

/* 响应式适配（侧栏堆叠） */
@media (max-width: 1024px){
  .client-layout{ grid-template-columns: 1fr; }
  .client-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
}
body.tech::before{ content:""; position:fixed; inset:0; pointer-events:none; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 24px),
  repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 24px);
  mask-image: radial-gradient(600px 600px at 50% 30%, rgba(0,0,0,0.8), rgba(0,0,0,0));
  z-index:0;
}
body.tech a{ color:#d9d7ff; }

/* 顶栏：玻璃质感 + 模糊 */
body.tech .nav{ position:sticky; top:0; height:64px; padding:0 18px; background:rgba(13,17,33,0.6); color:#e8eaf6; border-bottom:1px solid rgba(255,255,255,0.08);
  backdrop-filter:saturate(130%) blur(12px); box-shadow:0 8px 24px rgba(0,0,0,0.25); }
body.tech .nav .brand{ letter-spacing:1.2px; font-weight:800; color:#fff; }
body.tech .nav .links a{ color:#e8eaf6; opacity:0.9; }
body.tech .nav .links a.active{ color:#fff; text-shadow:0 0 14px rgba(167,139,250,0.55); }
body.tech .nav .cart{ border-color:rgba(255,255,255,0.25); }
body.tech .nav .cart .badge{ background:linear-gradient(135deg, var(--accent-600), var(--accent-400)); color:#fff; }

/* 容器与卡片：玻璃卡片 + 渐变描边 */
body.tech .container{ position:relative; z-index:1; max-width:1080px; padding:22px; }
body.tech .card{ background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.06));
  border:1px solid rgba(255,255,255,0.12); border-radius:16px; box-shadow:
  0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  padding:18px; margin:18px 0; backdrop-filter:saturate(140%) blur(10px); }
body.tech .card h2{ margin:0 0 8px 0; font-size:20px; font-weight:800; letter-spacing:1.2px; background:
  linear-gradient(90deg, #ffffff, #c7bfff 60%, #9aa5ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
body.tech .sub{ color:#c8cbe8; }

/* 表单：霓虹聚焦 + 圆角更大 */
body.tech input, body.tech textarea, body.tech select{
  flex:1; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,0.18);
  background:rgba(14,18,36,0.6); color:#e9ecff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 0 rgba(124,58,237,0);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.tech input::placeholder, body.tech textarea::placeholder{ color:#9aa2c7; }
body.tech input:focus, body.tech textarea:focus, body.tech select:focus{
  outline:none; border-color:rgba(167,139,250,0.65);
  box-shadow:0 0 0 4px rgba(167,139,250,0.22), 0 8px 22px rgba(124,58,237,0.25);
  background:rgba(20,24,44,0.7);
}

/* 按钮：主按钮渐变光晕 + 幽灵描边按钮 */
body.tech button{ padding:10px 18px; border-radius:14px; border:none; cursor:pointer; }
body.tech .btn-primary{
  background:linear-gradient(135deg, var(--accent-600), var(--accent-400)); color:#fff;
  box-shadow:0 10px 24px rgba(124,58,237,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
body.tech .btn-primary:hover{ filter:brightness(1.06); box-shadow:0 14px 34px rgba(124,58,237,0.45); transform:translateY(-0.5px); }
body.tech .btn-ghost{
  background:transparent; color:#e9ecff; border:1px solid rgba(255,255,255,0.26);
}
body.tech .btn-ghost:hover{ border-color:rgba(167,139,250,0.6); box-shadow:0 8px 22px rgba(167,139,250,0.22); }

/* ---- 客户门户（左侧导航 + 时尚动画） ---- */
.user-menu .dropdown-modern{ position:absolute; top:110%; right:0; width:360px; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:18px; box-shadow:0 22px 46px rgba(0,0,0,0.16); padding:0; z-index:100; visibility:hidden; opacity:0; transform:translateY(10px) scale(0.98); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; }
.user-menu.open .dropdown-modern{ visibility:visible; opacity:1; transform:translateY(0) scale(1); }
.dropdown-modern .head{ padding:16px 18px; border-bottom:1px solid rgba(0,0,0,0.08); font-weight:800; letter-spacing:0.5px; color:#1f2937; }
.dropdown-modern .list{ padding:8px; }
.dropdown-modern .item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:#111; text-decoration:none; }
.dropdown-modern .item:hover{ background:#f3f4f6; }
.dropdown-modern .item .icon{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:#6b7280; }
.dropdown-modern .avatar-lg{ width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#a48bfd,#7bd0ff); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; }
.dropdown-modern .name-full{ font-weight:800; font-size:16px; color:#111; }
.dropdown-modern .identity{ font-size:13px; color:#666; }
.dropdown-modern .foot{ padding:12px 14px; border-top:1px solid rgba(0,0,0,0.08); display:flex; justify-content:flex-end; }
.dropdown-modern .btn-danger{ background:#111; color:#fff; border-radius:12px; padding:10px 14px; }

.client-layout{ display:grid; grid-template-columns: 260px 1fr; gap:18px; padding:0; max-width: none; width: 100vw; margin:0; }
.client-sidebar{ border-right:0; padding-right:12px; display:grid; grid-template-columns: 1fr; gap:12px; }
.client-sidebar .side-link{ display:flex; align-items:center; padding:16px 14px; border-radius:16px; color:#111; text-decoration:none; background:#fff; border:1px solid rgba(0,0,0,0.08); box-shadow:0 2px 10px rgba(0,0,0,0.06); position:relative; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.client-sidebar .side-link .label{ font-weight:800; letter-spacing:0.6px; }
.client-sidebar .side-link::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:4px 0 0 4px; background:transparent; transition:background .18s ease; }
.client-sidebar .side-link:hover{ border-color:#cfd4dc; box-shadow:0 8px 18px rgba(0,0,0,0.08); transform:translateY(-1px); }
.client-sidebar .side-link.active{ background:#eef2ff; border-color:#93c5fd; box-shadow:0 10px 22px rgba(147,197,253,0.35); animation: linkPulse .8s ease both; }
.client-sidebar .side-link.active::before{ background:linear-gradient(180deg, #93c5fd, #3b82f6); }
@keyframes linkPulse{ 0%{ box-shadow:0 0 0 0 rgba(147,197,253,0.0); } 60%{ box-shadow:0 0 0 10px rgba(147,197,253,0.12); } 100%{ box-shadow:0 10px 22px rgba(147,197,253,0.35); } }

.client-main{ min-height: 0; }
.panel{ display:none; animation: panelFade .24s ease both; }
.panel.show{ display:block; }
@keyframes panelFade{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } }

.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.card-hero{ border-radius:14px; padding:16px; color:#111; box-shadow:0 10px 24px rgba(0,0,0,0.06); }
.card-hero.yellow{ background:linear-gradient(180deg, #fde68a, #f59e0b); color:#111; }
.card-hero.blue{ background:linear-gradient(180deg, #c7d2fe, #60a5fa); color:#111; }
.card-hero.green{ background:linear-gradient(180deg, #bbf7d0, #34d399); color:#111; }
.card-hero .title{ font-weight:800; font-size:16px; }
.card-hero .num{ font-size:36px; font-weight:800; }

.grid-table{ border:1px solid #eee; border-radius:12px; overflow:hidden; }
.grid-table .row{ display:grid; grid-template-columns: 120px 1fr 140px 120px; padding:10px 12px; border-bottom:1px solid #eee; }
.grid-table .row.head{ background:#f9fafb; font-weight:700; }
.grid-table .row:last-child{ border-bottom:0; }

/* 列表/卡片文字颜色在暗底下的微调 */
body.tech .item{ background:rgba(14,18,36,0.6); border-color:rgba(255,255,255,0.12); }
body.tech .item .title{ color:#eef1ff; }
body.tech .item .desc{ color:#b7bddb; }

/* 页脚：暗色弱化 */
body.tech .footer{ border-top-color:rgba(255,255,255,0.08); color:#b3b8d6; }

/* =====================
   Tech-Light 主题（浅色科技）
   柔和浅色背景 + 玻璃卡片 + 霓虹聚焦
===================== */
body.tech-light{ background:
  radial-gradient(1400px 700px at -10% -10%, rgba(167,139,250,0.18), rgba(167,139,250,0) 60%),
  radial-gradient(1000px 600px at 110% 0%, rgba(16,185,129,0.12), rgba(16,185,129,0) 55%),
  linear-gradient(180deg, #ffffff, #fafafa 55%, #f7f7fb);
  color:#111;
}
body.tech-light::before{ content:""; position:fixed; inset:0; pointer-events:none; background:
  repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0, rgba(0,0,0,0.03) 1px, transparent 1px, transparent 24px),
  repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 24px);
  mask-image: radial-gradient(600px 600px at 50% 30%, rgba(0,0,0,0.2), rgba(0,0,0,0));
  z-index:0;
}
body.tech-light a{ color:#111; }

/* 顶栏：浅色玻璃 */
body.tech-light .nav{ height:64px; padding:0 18px; background:rgba(255,255,255,0.75); color:#111; border-bottom:1px solid rgba(0,0,0,0.08);
  backdrop-filter:saturate(130%) blur(10px); box-shadow:0 8px 24px rgba(0,0,0,0.06); }
body.tech-light .nav .brand{ letter-spacing:1.1px; font-weight:800; color:#111; }
body.tech-light .nav .links a{ color:#222; opacity:0.85; }
body.tech-light .nav .links a.active{ color:#111; text-shadow:0 0 12px rgba(167,139,250,0.35); }
body.tech-light .nav .cart{ border-color:rgba(0,0,0,0.35); }
body.tech-light .nav .cart .badge{ background:linear-gradient(135deg, var(--accent-600), var(--accent-400)); color:#fff; }
body.tech-light .user-menu .trigger{ background:rgba(255,255,255,0.9); }

/* 容器与卡片：浅色玻璃卡片 */
body.tech-light .container{ position:relative; z-index:1; max-width:1080px; padding:22px; }
body.tech-light .card{ background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.90));
  border:1px solid rgba(0,0,0,0.08); border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.55);
  padding:18px; margin:18px 0; backdrop-filter:saturate(130%) blur(8px); }
body.tech-light .card h2{ margin:0 0 8px 0; font-size:20px; font-weight:800; letter-spacing:1.1px; background:
  linear-gradient(90deg, #111111, #3a2d7a 60%, #6d28d9);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
body.tech-light .sub{ color:#555; }

/* 表单：浅色聚焦 */
body.tech-light input, body.tech-light textarea, body.tech-light select{
  flex:1; padding:12px 14px; border-radius:14px; border:1px solid #e5e7eb; background:#fff; color:#111;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.tech-light input::placeholder, body.tech-light textarea::placeholder{ color:#999; }
body.tech-light input:focus, body.tech-light textarea:focus, body.tech-light select:focus{
  outline:none; border-color:var(--accent-400);
  box-shadow:0 0 0 4px var(--accent-100), 0 8px 22px rgba(124,58,237,0.14);
  background:#fff;
}

/* 按钮：主按钮渐变 + 幽灵描边 */
body.tech-light button{ padding:10px 18px; border-radius:14px; border:none; cursor:pointer; }
body.tech-light .btn-primary{
  background:linear-gradient(135deg, var(--accent-600), var(--accent-400)); color:#fff;
  box-shadow:0 10px 24px rgba(124,58,237,0.24), inset 0 1px 0 rgba(255,255,255,0.55);
}
body.tech-light .btn-primary:hover{ filter:brightness(1.05); box-shadow:0 14px 34px rgba(124,58,237,0.32); transform:translateY(-0.5px); }
body.tech-light .btn-ghost{
  background:transparent; color:#111; border:1px solid #ddd;
}
body.tech-light .btn-ghost:hover{ border-color:var(--accent-400); box-shadow:0 8px 22px rgba(167,139,250,0.18); }

/* 列表/卡片文字微调 */
body.tech-light .item{ background:#fff; border-color:rgba(0,0,0,0.08); }
body.tech-light .item .title{ color:#111; }
body.tech-light .item .desc{ color:#666; }

/* 页脚 */
body.tech-light .footer{ border-top-color:rgba(0,0,0,0.06); color:#666; }

/* =====================
   客户门户：订单进度 & 任务分配详情卡片
   卡片列表、进度条、倒计时徽章与动画
===================== */
.card-list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
@media (max-width: 980px){ .card-list{ grid-template-columns: 1fr; } }

/* 订单卡片 */
.order-card{ position:relative; overflow:hidden; border:1px solid rgba(0,0,0,0.08); border-radius:12px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.06); padding:14px; }
.order-card .head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.order-card .head .title{ font-size:18px; font-weight:800; letter-spacing:.6px; color:#0f172a; }
.order-card .head .sub{ font-size:13px; color:#667085; }
.order-card .head .contract-chip{ display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid #cfe0ff; background:#eef2ff; color:#1d4ed8; font-size:12px; }
.order-card .head.fancy{ display:grid; grid-template-columns: auto 1fr auto; gap:10px; align-items:center; }
.order-card .title.major{ font-size:20px; font-weight:900; letter-spacing:.8px; }
.order-card .chips{ display:flex; gap:8px; flex-wrap:wrap; }
.order-card .chip{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:12px; }
.order-card .chip.our{ background:#eef2ff; border:1px solid #cfe0ff; color:#1d4ed8; }
.order-card .chip.client{ background:#f1f5f9; border:1px solid #e5e7eb; color:#0f172a; }
.order-card .qty-pill{ justify-self:end; padding:6px 12px; border-radius:999px; background:#f7f9fc; border:1px solid #e5e7eb; font-size:12px; color:#0f172a; }
.order-card .kpi-band{ display:flex; gap:8px; align-items:center; margin:6px 0 10px; }
.order-card .kpi-fixed{ display:flex; gap:8px; flex:0 0 auto; }
.order-card .kpi-scroll{ display:flex; gap:8px; flex:1 1 auto; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.order-card .kpi-scroll::-webkit-scrollbar{ height:6px; }
.order-card .kpi-scroll::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
.order-card .kpi-scroll::-webkit-scrollbar-track{ background:transparent; }
.order-card .kpi-chip{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.order-card .kpi-chip .label{ font-size:12px; color:#667085; }
.order-card .kpi-chip .value{ font-weight:800; color:#0f172a; }
.order-card .kpi-chip.primary{ background:linear-gradient(90deg,#eef2ff,#f8fafc); border-color:#cfe0ff; }
.order-card .kpi-chip.primary .value{ color:#1e3a8a; }
.order-card .kpi-chip .kpi-bar{ width:120px; height:6px; background:#eef2f6; border-radius:999px; overflow:hidden; }
.order-card .kpi-chip .kpi-bar .inner{ height:100%; width:0; background:var(--kpi-progress-gradient); transition: width var(--kpi-anim-duration) var(--kpi-anim-ease); }
.order-card .kpi-chip.rate .kpi-bar .inner{ background:var(--kpi-rate-gradient); }
.order-card .kpi-chip.warn{ background:#fff7ed; border-color:#ffedd5; }
.order-card .kpi-chip.warn .value{ color:#7c2d12; }
.order-card .kpi-chip.danger{ background:#fee2e2; border-color:#fecaca; }
.order-card .kpi-chip.danger .value{ color:#991b1b; }
.order-card .status-corner{ position:absolute; top:12px; right:12px; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid #e5e7eb; background:#f9fafb; color:#0f172a; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.order-card .status-corner.progress{ background:#f1f5f9; border-color:#e5e7eb; color:#0f172a; }
.order-card .status-corner.done{ background:#ecfdf5; border-color:#6ee7b7; color:#065f46; }
.order-card .status-corner.abnormal{ background:#fff1f2; border-color:#fecdd3; color:#9f1239; }
.order-card .meta-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; margin:10px 0; }
.order-card .meta{ background:#f7f9fc; border:1px solid #e5e7eb; border-radius:10px; padding:10px; }
.order-card .meta .label{ font-size:12px; color:#667085; letter-spacing:.5px; }
.order-card .meta .value{ font-weight:700; margin-top:3px; color:#111; }
.order-card .meta.date .value{ font-size:18px; font-weight:800; color:#0f172a; }
.order-card .progress{ height:10px; background:#eef2f6; border-radius:999px; overflow:hidden; }
.order-card .progress > .bar{ height:100%; width:0; background:linear-gradient(90deg,#4a7df5,#6aa8ff); transition: width .5s ease; }
.order-card .progress > .bar{ transition: width var(--kpi-anim-duration) var(--kpi-anim-ease); }
.order-card .progress-info{ display:flex; justify-content:flex-end; font-size:12px; color:#667085; margin-top:6px; }
.order-card .due-badge{ position:absolute; top:12px; left:0; padding:6px 12px; background:linear-gradient(90deg,#ff7a00,#ffbf69); color:#fff; font-size:12px; border-top-right-radius:999px; border-bottom-right-radius:999px; box-shadow:0 6px 12px rgba(255,122,0,.25); }
.order-card .countdown-badge{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:86px; height:86px; border-radius:999px; background:linear-gradient(135deg, var(--badge-from), var(--badge-to)); color:#fff; box-shadow:0 10px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.55); }
.order-card .countdown-badge .countdown{ text-align:center; line-height:1.2; font-weight:800; color:#fff; }
.order-card .countdown-badge .countdown .days{ display:block; font-size:16px; letter-spacing:.6px; }
.order-card .countdown-badge .countdown .hms{ display:block; font-size:12px; opacity:.95; margin-top:4px; letter-spacing:.6px; }

/* 订单详情摘要（未开发票金额等） */
.order-summary .meta-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin:8px 0; }
.order-summary .meta{ background:#f7f9fc; border:1px solid #e5e7eb; border-radius:10px; padding:10px; }
.order-summary .meta .label{ font-size:12px; color:#667085; }
.order-summary .meta .value{ font-weight:800; color:#111; }

/* 色盲友好方案：提升对比度与色相区分 */
.colorblind-friendly{
  --kpi-progress-gradient: linear-gradient(90deg,#16a34a,#15803d);
  --kpi-rate-gradient: linear-gradient(90deg,#1e40af,#1d4ed8);
}
.colorblind-friendly .order-card .kpi-chip.warn{ background:#fde68a; border-color:#f59e0b; }
.colorblind-friendly .order-card .kpi-chip.warn .value{ color:#7c2d12; }
.colorblind-friendly .order-card .kpi-chip.danger{ background:#fca5a5; border-color:#ef4444; }
.colorblind-friendly .order-card .kpi-chip.danger .value{ color:#7f1d1d; }

/* 状态说明弹层 */
.status-modal-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.4); backdrop-filter:saturate(180%) blur(2px); display:none; align-items:center; justify-content:center; z-index:1000; }
.status-modal-backdrop.show{ display:flex; }
.status-modal{ background:#fff; border-radius:12px; border:1px solid #e5e7eb; box-shadow:0 10px 24px rgba(0,0,0,.08); width: min(520px, 90vw); max-height: 80vh; overflow:auto; }
.status-modal header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #f1f5f9; }
.status-modal .content{ padding:12px 16px; }
.status-modal .reason{ background:#f7f9fc; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.status-modal .actions{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid #f1f5f9; }

@media (max-width: 980px){
  .order-card .metrics{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* 主题切换器 */
.theme-switcher{ position:fixed; bottom:16px; right:16px; background:#fff; border:1px solid #e5e7eb; border-radius:999px; box-shadow:0 8px 22px rgba(0,0,0,0.10); padding:6px; display:flex; gap:6px; z-index:1000; }
.theme-chip{ padding:6px 10px; border-radius:999px; border:1px solid #d0d7e2; background:#fff; font-size:12px; color:#0f172a; cursor:pointer; }
.theme-chip.active{ background:var(--accent-50); border-color:var(--accent-300); }

/* 任务卡片 */
.task-card{ border:1px solid rgba(0,0,0,0.08); border-radius:12px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.06); padding:14px; }
.task-card .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.task-card .company{ font-weight:700; letter-spacing:.4px; }
.task-card .att-count{ margin-left:8px; padding:4px 8px; border-radius:999px; font-size:12px; background:#eef2ff; color:#1d4ed8; border:1px solid #cfe0ff; }
.task-card .pub{ font-size:12px; color:#667085; }
.task-card .content{ background:#f7f9fc; border:1px solid #e5e7eb; border-radius:10px; padding:10px; margin:8px 0; color:#111; white-space:pre-wrap; word-break:break-word; }
.task-card .footer{ display:flex; justify-content:space-between; align-items:center; }
.status-pill{ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.status-pill.done{ background:#e9f9f1; color:#0f9f5f; border:1px solid #c8f2df; }
.status-pill.todo{ background:#fff3cd; color:#8a6d3b; border:1px solid #ffe49f; }
.task-actions{ display:flex; gap:8px; }
.btn-outline{ background:#fff; border:1px solid #d0d7e2; color:#344054; padding:6px 10px; border-radius:10px; cursor:pointer; }
.btn-outline:hover{ background:#f6f8fb; }

/* 任务附件预览与文件标签 */
.attachments{ margin:8px 0; }
.attachments .att-grid{ display:flex; gap:8px; flex-wrap:wrap; }
.attachments .file-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.att-thumb{ width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.file-chip{ display:inline-block; padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; font-size:12px; color:#111; background:#fff; text-decoration:none; }
.file-chip:hover{ background:#f6f8fb; }

/* 弹窗内的附件预览容器（与任务卡片一致的样式） */
.attachments-preview{ display:flex; gap:8px; flex-wrap:wrap; }

/* 任务详情展开动画与大图 */
.task-card{ transition: box-shadow .18s ease, transform .18s ease; }
.task-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,0.08); transform:translateY(-1px); }

/* 产品详情卡片（每个产品一个卡片，颜色作为子项） */
.prod-card{ border:1px solid rgba(0,0,0,0.08); border-radius:16px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,0.08); padding:22px; transition: box-shadow .18s ease, transform .18s ease; }
.prod-card:hover{ box-shadow:0 12px 28px rgba(0,0,0,0.10); transform: translateY(-1px); }
.prod-card .head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.prod-card .head .title{ font-size:20px; font-weight:800; letter-spacing:.6px; color:#0f172a; }
.prod-card .head .sub{ font-size:12px; color:#667085; }

/* 英雄布局订单卡片：突出款号与倒计时 */
.order-card.hero{ position:relative; border:1px solid rgba(0,0,0,0.08); border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.08); padding:0; overflow:hidden; }
.order-card .card-hero{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px; padding:12px; background:linear-gradient(90deg,var(--hero-from),var(--hero-to)); }
.order-card .style-major{ font-size:24px; font-weight:900; letter-spacing:.8px; color:#0f172a; text-shadow:0 1px 0 rgba(255,255,255,.6); }
.order-card .card-hero .chips{ margin-top:4px; }
.order-card .hero-right{ display:flex; align-items:center; }
.order-card.hero .progress-line{ padding:8px 14px 4px; }
.order-card.hero .meta-compact{ padding:6px 14px 12px; }
.order-card.hero .status-corner{ top:10px; right:10px; }

/* 细节优化：去掉扣款率区块、收紧头部与信息条间距 */
.order-card .kpi-band{ display:none; }
.order-card.hero .card-hero{ padding:10px 14px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.5); }
.order-card.hero .progress-line{ padding:12px 16px 6px; }
.order-card.hero .countdown-badge{ width:64px; height:64px; }
.order-card .meta-compact{ gap:10px; }
.order-card .meta-compact .item{ box-shadow:0 2px 8px rgba(0,0,0,0.04); position:relative; padding-left:12px; }
.order-card .meta-compact .item::before{ content:""; position:relative; left:0; width:8px; height:8px; border-radius:999px; background:#cfe0ff; display:inline-block; margin-right:6px; }
.order-card .meta-compact .item .label{ font-weight:700; }

@media (max-width: 780px){
  .order-card .style-major{ font-size:20px; }
  .order-card .countdown-badge{ width:64px; height:64px; }
}
.prod-card .meta-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin:12px 0; }
.prod-card .meta{ background:#f7f9fc; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.prod-card .meta .label{ font-size:12px; color:#667085; letter-spacing:.5px; }
.prod-card .meta .value{ font-weight:800; margin-top:4px; color:#111; }
.prod-card .variants{ display:grid; grid-template-columns: 1fr; gap:12px; margin-top:8px; }
.variant{ display:grid; grid-template-columns: 1.3fr 1fr 0.9fr 0.9fr 0.9fr 0.8fr; gap:10px; align-items:center; padding:12px; border:1px solid #e5e7eb; border-radius:14px; background:#f8fafc; }
@media (max-width: 980px){ .variant{ grid-template-columns: 1fr; } }

/* 变体行的chip排版与强调 */
.prod-card .variant .chip-min{ display:flex; align-items:center; justify-content:flex-start; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; font-size:14px; color:#111; letter-spacing:.3px; }
.variant .chip-color{ background:var(--chip-bg, #eef2ff); border-color:var(--chip-border, #c7d2fe); color:var(--chip-text, #1e3a8a); }
.variant .chip-min:nth-child(2){ background:#f1f5f9; color:#0f172a; }
.variant .chip-min:nth-child(3),
.variant .chip-min:nth-child(4),
.variant .chip-min:nth-child(5){ font-size:16px; font-weight:800; color:#0f172a; }
.variant .chip-min:nth-child(6){ background:linear-gradient(90deg,#4a7df5,#6aa8ff); color:#fff; border-color:transparent; font-weight:800; }

/* 卡片入场动画（统一） */
.card-enter{ animation: cardIn .32s ease-out both; }
@keyframes cardIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: translateY(0); } }

/* =====================
   样品分析：卡片式详情
===================== */
.sample-list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
@media (max-width: 980px){ .sample-list{ grid-template-columns: 1fr; } }
.sample-card{ position:relative; overflow:hidden; border:1px solid rgba(0,0,0,0.08); border-radius:16px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.sample-card .photo{ width:100%; height:180px; object-fit:cover; display:block; }
.sample-card .body{ padding:16px; }
.sample-card .title{ font-weight:800; font-size:18px; color:#0f172a; }
.sample-card .sub{ color:#667085; font-size:12px; margin-top:4px; }
.sample-card .meta-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin:12px 0; }
.sample-card .meta{ background:#f7f9fc; border:1px solid #e5e7eb; border-radius:12px; padding:10px; }
.sample-card .meta .label{ font-size:12px; color:#667085; }
.sample-card .meta .value{ font-weight:800; color:#111; margin-top:4px; }
.sample-card .weave{ display:flex; gap:10px; align-items:center; border-top:1px solid #eef2f6; padding:12px 16px; }
.sample-card .weave .thumb{ width:84px; height:64px; object-fit:cover; border-radius:10px; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.sample-card .weave .spec{ flex:1; font-size:13px; color:#0f172a; }
.sample-card .actions{ display:flex; justify-content:flex-end; align-items:center; gap:8px; border-top:1px solid #eef2f6; padding:10px 16px; }
.sample-card .spec-toggle{ background:#fff; color:#344054; border:1px solid #d0d7e2; padding:6px 10px; border-radius:10px; cursor:pointer; font-size:12px; }
.sample-card .spec-toggle:hover{ background:#f6f8fb; }
.sample-card .spec-toggle .chev{ display:inline-block; transition: transform .18s ease; margin-right:4px; }
.sample-card.open .spec-toggle .chev{ transform: rotate(180deg); }
.sample-card .spec-panel{ border-top:1px dashed #e5e7eb; margin:0 16px 14px; overflow:hidden; max-height:0; opacity:0; transform: translateY(4px); transition: max-height .24s ease, opacity .24s ease, transform .24s ease; }
.sample-card .spec-panel.show{ max-height:800px; opacity:1; transform: translateY(0); }
.spec-head{ font-size:13px; color:#667085; padding:10px 0 6px; }
.spec-table{ width:100%; border-collapse: collapse; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.spec-table thead th{ background:#f9fafb; color:#374151; font-weight:700; font-size:12px; padding:8px 10px; border-bottom:1px solid #e5e7eb; text-align:left; }
.spec-table tbody td{ font-size:12px; color:#111; padding:8px 10px; border-top:1px solid #f1f5f9; }
.spec-badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; background:#eef2ff; color:#1d4ed8; border:1px solid #cfe0ff; }
.ratio-pill{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#f1f5ff; color:#1d4ed8; border:1px solid #cfe0ff; }
.spec-table tbody tr{ animation: fadeSlide .28s ease-out both; }
.spec-table tbody tr:hover{ background:#f9fafb; }
@keyframes fadeSlide{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform: translateY(0); } }
.sample-card:hover{ box-shadow:0 12px 28px rgba(0,0,0,0.10); transform: translateY(-1px); transition: box-shadow .18s ease, transform .18s ease; }
.sample-toolbar{ display:flex; gap:8px; align-items:center; justify-content:space-between; }
.sample-toolbar .search{ display:flex; gap:8px; align-items:center; }
.sample-toolbar input{ padding:8px 10px; border-radius:10px; border:1px solid #e5e7eb; }
.sample-toolbar .btn-primary{ padding:8px 12px; border-radius:10px; }
.task-card .task-detail{ display:none; margin-top:8px; border-top:1px dashed #e5e7eb; padding-top:10px; }
.task-card.expand .task-detail{ display:block; animation: taskDetailEnter .22s ease both; }
.task-detail .att-grid{ gap:10px; }
.att-thumb-lg{ width:160px; height:120px; object-fit:cover; border-radius:10px; border:1px solid #e5e7eb; box-shadow:0 4px 14px rgba(0,0,0,0.08); }
.task-detail .meta{ font-size:12px; color:#667085; margin-bottom:6px; }

@keyframes taskDetailEnter{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } }

/* 动画 */
.card-enter{ animation: cardEnter .35s ease both; }
@keyframes cardEnter{ from{ opacity:0; transform: translateY(6px) scale(.98); } to{ opacity:1; transform: translateY(0) scale(1); } }

/* 品牌主题下禁用旧的轴点圆形装饰（平铺卡片无需） */
body.brand .timeline .timeline-item::before{ display:none !important; }

.glow-on-active{ position:relative; }
.glow-on-active::after{ content:''; position:absolute; inset:-2px; border-radius:14px; background: radial-gradient(120px 120px at 10% 0%, rgba(74,125,245,.25), transparent 60% ); opacity:.6; animation: pulseGlow 1.6s ease infinite; pointer-events:none; }
@keyframes pulseGlow{ 0%{ opacity:.6 } 50%{ opacity:.25 } 100%{ opacity:.6 } }

/* 订单详情产品卡片 */
.prod-card .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.prod-card .head .title{ font-weight:700; }
.prod-card .head .sub{ font-size:12px; color:#667085; }
.variants{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.variant{ display:flex; flex-wrap:wrap; gap:8px; background:#f7f9fc; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; }

/* 任务类型标签 */
.type-row{ display:flex; gap:8px; flex-wrap:wrap; }
.type-pill{ border:1px solid #d0d7e2; background:#fff; color:#344054; padding:8px 12px; border-radius:999px; cursor:pointer; font-size:12px; }
.type-pill.active{ border-color:#2563eb; box-shadow:0 6px 16px rgba(37,99,235,0.18); }
.type-color{ background:#e0f2fe; color:#075985; border-color:#93c5fd; }
.type-so{ background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.type-sample{ background:#ecfccb; color:#365314; border-color:#a3e635; }
.type-find{ background:#fae8ff; color:#6b21a8; border-color:#e9d5ff; }
.type-quote{ background:#f0fdf4; color:#166534; border-color:#86efac; }
.root, :root{
  --kpi-anim-duration: .45s;
  --kpi-anim-ease: ease;
  --kpi-progress-gradient: linear-gradient(90deg,#22c55e,#86efac);
  --kpi-rate-gradient: linear-gradient(90deg,#6366f1,#93c5fd);
}
.order-card.pretty{ position:relative; border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.05); }
.order-card.pretty::before{ content:""; position:absolute; inset:0; border-top-left-radius:12px; border-top-right-radius:12px; height:6px; background:linear-gradient(90deg,#93c5fd,#a7f3d0); opacity:.6; }
.order-card .card-top{ display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; }
.order-card .title-wrap{ display:flex; flex-direction:column; gap:6px; }
.order-card .amount-pill{ display:flex; flex-direction:column; align-items:flex-end; padding:8px 12px; border-radius:12px; background:linear-gradient(90deg,#eef2ff,#f8fafc); border:1px solid #cfe0ff; }
.order-card .amount-pill .label{ font-size:12px; color:#1e3a8a; }
.order-card .amount-pill .value{ font-size:20px; font-weight:900; color:#1e3a8a; }
.order-card .progress-line{ display:grid; grid-template-columns: auto auto; align-items:center; gap:8px; margin:6px 0 4px; }
.order-card .progress-line .label{ font-size:12px; color:#667085; }
.order-card .progress-line .value{ font-size:12px; color:#0f172a; font-weight:700; }
.order-card .progress-line .bar{ grid-column: 1 / -1; height:6px; background:#eef2f6; border-radius:999px; overflow:hidden; }
.order-card .progress-line .bar .inner{ height:100%; width:0; background:var(--kpi-progress-gradient); transition: width var(--kpi-anim-duration) var(--kpi-anim-ease); }
.order-card .meta-compact{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px; }
.order-card .meta-compact .item{ display:flex; gap:6px; align-items:center; font-size:12px; color:#667085; background:#f7f9fc; border:1px solid #e5e7eb; padding:6px 8px; border-radius:10px; }
.order-card .meta-compact .item .label{ opacity:.9; }
.order-card .meta-compact .item .value{ color:#0f172a; font-weight:700; }
.order-card .meta-compact .link{ margin-left:auto; font-size:12px; color:#2563eb; text-decoration:none; }

/* 主题色系：覆盖强调色与渐变变量 */
.theme-bluegreen{ --accent-700:#1e3a8a; --accent-600:#2563eb; --accent-500:#3b82f6; --accent-400:#60a5fa; --accent-300:#93c5fd; --accent-200:#bfdbfe; --accent-100:#dbeafe; --accent-50:#eff6ff; --hero-from: var(--accent-300); --hero-to:#a7f3d0; --badge-from:#ff7a00; --badge-to:#ffbf69; }
.theme-teal{ --accent-700:#0f766e; --accent-600:#0d9488; --accent-500:#14b8a6; --accent-400:#2dd4bf; --accent-300:#5eead4; --accent-200:#99f6e4; --accent-100:#ccfbf1; --accent-50:#f0fdfa; --hero-from: var(--accent-300); --hero-to: var(--accent-100); --badge-from:#0ea5e9; --badge-to:#22d3ee; }
.theme-orange{ --accent-700:#9a3412; --accent-600:#ea580c; --accent-500:#f97316; --accent-400:#fdba74; --accent-300:#fed7aa; --accent-200:#ffedd5; --accent-100:#fff7ed; --accent-50:#fffaf3; --hero-from:#fed7aa; --hero-to:#fde68a; --badge-from:#f97316; --badge-to:#fdba74; }
.theme-slate{ --accent-700:#334155; --accent-600:#475569; --accent-500:#64748b; --accent-400:#94a3b8; --accent-300:#cbd5e1; --accent-200:#e2e8f0; --accent-100:#f1f5f9; --accent-50:#f8fafc; --hero-from:#cbd5e1; --hero-to:#e5e7eb; --badge-from:#64748b; --badge-to:#94a3b8; }
/* 奢华黑金（参考奢侈品牌）：深墨 + 金色 */
.theme-inkgold{ --accent-700:#0b0f12; --accent-600:#121720; --accent-500:#1f2937; --accent-400:#374151; --accent-300:#4b5563; --accent-200:#6b7280; --accent-100:#9ca3af; --accent-50:#f4f4f5; --hero-from:#111827; --hero-to:#f5b914; --badge-from:#d4af37; --badge-to:#f5b914; }
/* 森林绿（参考户外品牌）：墨绿 + 青柠 */
.theme-forest{ --accent-700:#064e3b; --accent-600:#065f46; --accent-500:#0f766e; --accent-400:#16a34a; --accent-300:#22c55e; --accent-200:#86efac; --accent-100:#dcfce7; --accent-50:#f0fdf4; --hero-from:#a7f3d0; --hero-to:#86efac; --badge-from:#16a34a; --badge-to:#22c55e; }
/* 玫瑰金（参考美妆品牌）：粉金 + 香槟 */
.theme-rose{ --accent-700:#9d174d; --accent-600:#be185d; --accent-500:#ec4899; --accent-400:#f9a8d4; --accent-300:#fbcfe8; --accent-200:#fde2e4; --accent-100:#fff1f2; --accent-50:#fff7f9; --hero-from:#fbcfe8; --hero-to:#fde68a; --badge-from:#ec4899; --badge-to:#f59e0b; }
/* 海军蓝（参考运动/航海）：海军蓝 + 珊瑚红 */
.theme-navy{ --accent-700:#0f172a; --accent-600:#1e293b; --accent-500:#1d4ed8; --accent-400:#60a5fa; --accent-300:#93c5fd; --accent-200:#bfdbfe; --accent-100:#e0f2fe; --accent-50:#f0f9ff; --hero-from:#93c5fd; --hero-to:#a5f3fc; --badge-from:#ef4444; --badge-to:#fb7185; }

/* 移除英雄头部右上角的圆形装饰 */
.order-card .card-hero::after{ display:none !important; }

/* 倒计时徽章：去掉黄色圆形背景，文字改黑色，缩小字号 */
.order-card .hero-right{ align-items:flex-start; }
.order-card.hero .card-hero{ position:relative; }
.order-card.hero .countdown-badge{ position:absolute; top:10px; right:12px; }
.order-card .countdown-badge{
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.order-card.hero .countdown-badge{ width:auto !important; height:auto !important; }
.order-card .countdown-badge .countdown{
  color: #111 !important;
  text-align: right;
  font-weight: 700;
  text-shadow: none;
  line-height: 1.1;
  white-space: nowrap;
}
.order-card .countdown-badge .countdown .days{
  display:block;
  font-size: 14px !important;
  letter-spacing: .4px;
}
.order-card .countdown-badge .countdown .hms{
  display:block;
  font-size: 12px !important;
  opacity: .9;
  margin-top: 2px;
  letter-spacing: .4px;
}
/* 无限滚动哨兵（占满一行并居中显示） */
#sentinel{ grid-column: 1 / -1; color:#667085; padding:12px 0; text-align:center; }
/* 加载更多按钮动效（柔和渐变、涟漪、加载中旋转） */
#btnLoadMore{ position:relative; overflow:hidden; background: linear-gradient(135deg, #f7fbff 0%, #eef4ff 50%, #f9fbff 100%); border:1px solid #cbd5e1; color:#344054; border-radius:999px; padding:10px 18px; box-shadow: 0 6px 20px rgba(21, 94, 239, 0.06); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
#btnLoadMore:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(21, 94, 239, 0.12); border-color:#b6c3d6; }
#btnLoadMore:active{ transform: translateY(0); box-shadow: 0 4px 16px rgba(21,94,239,0.08); }
#btnLoadMore::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; opacity:0; background: radial-gradient(120% 120% at var(--x,50%) var(--y,50%), rgba(59,130,246,0.18), transparent 45%); transform: scale(0.96); transition: opacity .25s ease, transform .25s ease; }
#btnLoadMore.pulse::before{ opacity:1; animation: btn-ripple .6s ease-out forwards; }
@keyframes btn-ripple{ 0%{ transform:scale(0.96); opacity:.28; } 100%{ transform:scale(1.18); opacity:0; } }
#btnLoadMore.loading{ color:#667085; cursor:default; }
#btnLoadMore.loading::after{ content:""; position:absolute; left:12px; top:50%; width:16px; height:16px; border-radius:50%; border:2px solid #98a2b3; border-right-color: transparent; transform: translateY(-50%); animation: spin .8s linear infinite; }
@keyframes spin{ from{ transform: translateY(-50%) rotate(0); } to{ transform: translateY(-50%) rotate(360deg); } }