/* ==========================================================================
   发密匙商城 · 前台统一样式（蓝白主题）
   适用页面：商城下单页(/) · PDF云打印(/print) · 订单查询(/query) · 待付款(/pay)
            支付中心(/submit) · 支付成功(/pay/success) · 支付失败(error.html)
   主题机制：
     - 默认浅色蓝白主题（--xxx 浅色变量）
     - [data-theme="dark"]：手动暗黑
     - @media (prefers-color-scheme: dark) 且未强制 light：自动跟随系统暗黑
     - 手动切换按钮由 /static/js/theme.js 管理
   ========================================================================== */

:root{
  /* 声明页面已自行处理明暗，阻止浏览器（Chrome/WebView 深色系统下）
     自动强制反色，否则 data-theme="light" 会被无视 */
  color-scheme: light;

  /* 蓝白基础 */
  --paper:#f6f8fc;
  --paper-3:#ffffff;
  --ink:#0f172a;
  --ink-soft:#475569;
  --ink-mute:#94a3b8;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --accent:#2563eb;
  --accent-dark:#1d4ed8;
  --accent-soft:#eff6ff;
  --danger:#dc2626;
  --ok:#16a34a;
  --warn-ink:#b45309;
  --err-ink:#b91c1c;
  --err-bg:rgba(220,38,38,.08);
  --err-bd:rgba(220,38,38,.30);
  --warn-bg:rgba(249,115,22,.12);
  --warn-bd:rgba(249,115,22,.32);
  --radius:16px;
  --shadow:0 8px 30px rgba(15,23,42,.08);

  /* 顶栏（品牌蓝渐变，与内容区明显分层） */
  --topbar-a:#2563eb;
  --topbar-b:#1d4ed8;
  --brand-ink:#ffffff;
  --nav-ink:rgba(255,255,255,.88);
  --nav-ink-h:#ffffff;

  /* 半透明玻璃底 */
  --glass:rgba(255,255,255,.75);
  --glass-strong:#ffffff;

  /* 文字派生 */
  --head-ink:#0f172a;
  --desc-ink:#475569;
  --step-ink:#334155;
  --notice-ink:#475569;

  /* 渐变末端（面板/弹层） */
  --panel-end:#ffffff;
  --sheet-end:#ffffff;
  /* 卡片选中态 */
  --sel-a:#eff6ff;
  --sel-b:#dbeafe;
  --sel-glow:rgba(37,99,235,.22);

  /* 底部下单栏 / 分类筛选条（亮色模式下用偏深的蓝灰色与白卡/蓝顶栏区分层次） */
  --bar-a:#ffffff;
  --bar-b:#f8fafc;
  --fil-a:#d8e2f5;
  --fil-b:#c3d2ec;
  --fil-bd:#9fb3dd;
  --fil-ink:#3e5178;

  /* 商品卡片（亮色模式：冷白微蓝，底部带淡蓝影） */
  --card-a:#ffffff;
  --card-b:#e6eefb;

  /* 下拉框箭头 */
  --arrow:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3e%3cpath fill='%232563eb' d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

/* ---------- 页面背景 ---------- */
body{
  font-family:-apple-system,"Segoe UI",Roboto,"Microsoft YaHei",sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.wrap{flex:1 1 auto;width:100%;max-width:1200px;margin:0 auto;padding:16px 20px 40px}
.wrap.narrow{max-width:820px}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;
  background:linear-gradient(180deg,var(--topbar-a),var(--topbar-b));
  box-shadow:0 2px 16px rgba(29,78,216,.22);
  position:relative;z-index:30;
}
.brand{font-size:19px;font-weight:800;letter-spacing:.3px;color:var(--brand-ink)}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.topbar nav a{
  color:var(--nav-ink);text-decoration:none;font-size:14px;
  padding:6px 2px;transition:color .2s;white-space:nowrap;
}
.topbar nav a:hover{color:var(--nav-ink-h);text-decoration:underline;text-underline-offset:4px}

/* 主题切换按钮（蓝底上白描边） */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;font-size:16px;line-height:1;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.6);border-radius:50%;
  transition:background .2s,border-color .2s;flex:0 0 auto;
}
.theme-toggle:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.26)}

/* ---------- 提示 ---------- */
.notice{
  font-size:13px;color:var(--notice-ink);line-height:1.7;
  background:var(--glass);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:8px;padding:10px 14px;margin-bottom:14px;
}
.err{
  font-size:13.5px;color:var(--err-ink);background:var(--err-bg);
  border:1px solid var(--err-bd);border-radius:8px;padding:10px 14px;margin-bottom:14px;
}
.empty{
  text-align:center;color:var(--ink-soft);font-size:14px;padding:64px 20px;
  border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--glass);
}

/* ---------- 卡片面板 ---------- */
.panel{
  background:linear-gradient(180deg,var(--paper-3),var(--panel-end));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;box-shadow:var(--shadow);
}
.panel h2{font-size:16px;color:var(--head-ink);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.panel h3{font-size:15px;color:var(--head-ink);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.panel h3 .step-num{
  display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;
  background:var(--accent);color:#fff;border-radius:50%;font-size:12px;flex:0 0 auto;
}

/* ---------- 表单 ---------- */
.fld{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:7px}
.inp,select.sel,input.sel{
  width:100%;padding:12px;font-size:14.5px;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:9px;background:var(--paper-3);
}
select.sel{
  appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:var(--arrow);
  background-repeat:no-repeat;background-position:right 12px center;
}
.inp:focus,select.sel:focus,input.sel:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.submit{
  width:100%;padding:15px;font-size:16.5px;font-weight:700;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  border:none;border-radius:10px;box-shadow:0 4px 12px rgba(37,99,235,.30);transition:.15s;
}
.submit:hover{filter:brightness(1.06)}
.submit:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn-sm{
  padding:5px 12px;font-size:12.5px;color:var(--accent);background:var(--glass);
  border:1px solid var(--line-strong);border-radius:7px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn-sm:hover{background:var(--glass-strong);border-color:var(--accent)}
.btn-sm.ok{color:var(--ok);border-color:rgba(22,163,74,.45);background:rgba(22,163,74,.10)}

/* ---------- 数量 ---------- */
.qty-btn{width:36px;height:36px;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper-3);color:var(--ink);font-size:19px;cursor:pointer}
.qty-btn:hover{background:var(--glass-strong)}
.qty-input{width:64px;height:36px;text-align:center;font-size:15px;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper-3);color:var(--ink)}

/* ---------- 键值行 / 徽标 ---------- */
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.row:last-child{border-bottom:none}
.row .k{color:var(--ink-mute);white-space:nowrap;flex:0 0 auto}
.row .v{text-align:right;word-break:break-all;flex:1 1 auto}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.badge-0{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-bd)}
.badge-1{background:rgba(22,163,74,.12);color:var(--ok);border:1px solid rgba(22,163,74,.32)}

/* ---------- 商品网格 ---------- */
.sec-head{
  display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:800;color:var(--head-ink);
  margin:6px 0 14px;
}
.sec-head::after{content:"";flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{
  position:relative;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(180deg,var(--card-a),var(--card-b));
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  box-shadow:var(--shadow);cursor:pointer;overflow:hidden;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 12px 26px rgba(37,99,235,.14)}
.card .cname{font-size:15.5px;font-weight:700;color:var(--head-ink);line-height:1.4;padding-right:22px}
.card .csku{font-size:12px;color:var(--accent);background:var(--accent-soft);border:1px solid var(--line);border-radius:20px;padding:2px 9px;align-self:flex-start}
.card .cdesc{
  font-size:13px;color:var(--desc-ink);line-height:1.65;white-space:pre-wrap;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.card .cfoot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px dashed var(--line)}
.card .cprice{font-size:19px;font-weight:800;color:var(--accent);font-family:Georgia,"Times New Roman",serif}
.card .cprice small{font-size:12px;font-weight:600;color:var(--ink-mute);margin-left:2px}
.card .cstock{font-size:12px;color:var(--ok);white-space:nowrap}
.card .cstock.out{color:var(--danger)}
.card.disabled{opacity:.6;cursor:not-allowed}
.card.disabled:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow)}

/* ---------- 移动端 ---------- */
@media (max-width:720px){
  /* 主题切换按钮固定到页面最右上角：脱离文档流，导航区留出右侧空间 */
  .topbar{position:relative;padding:10px 56px 10px 12px}
  .theme-toggle{position:absolute;top:10px;right:12px;z-index:6}
  .brand{font-size:16.5px}
  .topbar nav{gap:14px}
  .topbar nav a{font-size:13px}
  .wrap{padding:12px 12px 32px}
  .panel{padding:15px;border-radius:12px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .card{padding:13px;border-radius:12px}
  .card .cname{font-size:14px}
  .card .cdesc{-webkit-line-clamp:3;font-size:12.5px}
  .card .cprice{font-size:17px}
}
@media (max-width:380px){
  .grid{grid-template-columns:1fr}
}

/* ==========================================================================
   暗黑模式（深蓝夜间，跟随系统自动 / 按钮手动）
   ========================================================================== */
:root[data-theme="dark"]{
  color-scheme: dark;

  --paper:#0e1526;
  --paper-3:#182338;
  --ink:#e7edf8;
  --ink-soft:#a9b6cd;
  --ink-mute:#7e8ca6;
  --line:#28354f;
  --line-strong:#31405f;
  --accent:#4a8bff;
  --accent-dark:#2563eb;
  --accent-soft:rgba(74,139,255,.16);
  --danger:#f87171;
  --ok:#4ade80;
  --warn-ink:#fbbf24;
  --err-ink:#fca5a5;
  --err-bg:rgba(248,113,113,.12);
  --err-bd:rgba(248,113,113,.35);
  --warn-bg:rgba(251,146,60,.14);
  --warn-bd:rgba(251,146,60,.35);
  --shadow:0 8px 30px rgba(0,0,0,.45);

  --topbar-a:#3a6bff;
  --topbar-b:#1e40af;
  --brand-ink:#ffffff;
  --nav-ink:rgba(255,255,255,.88);
  --nav-ink-h:#ffffff;

  --glass:rgba(255,255,255,.05);
  --glass-strong:rgba(255,255,255,.12);

  --head-ink:#e7edf8;
  --desc-ink:#a9b6cd;
  --step-ink:#c7d2e5;
  --notice-ink:#a9b6cd;

  --panel-end:#182338;
  --sheet-end:#182338;
  --sel-a:#1d3260;
  --sel-b:#1a2b52;
  --sel-glow:rgba(74,139,255,.30);

  --bar-a:#131c31;
  --bar-b:#0e1526;
  --fil-a:#2f4180;
  --fil-b:#243468;
  --fil-bd:#4a62b8;
  --fil-ink:#ccd6f4;

  --card-a:#25375f;
  --card-b:#1c2b4e;

  --arrow:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3e%3cpath fill='%234a8bff' d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
}

/* 暗黑：绿色徽标在深色底上的对比度修正 */
:root[data-theme="dark"] .badge-1{
  background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.35);
}
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .card:not(.selected){
  border-color:var(--line-strong);
}

/* 自动跟随系统：未强制浅色时，系统暗黑即用暗黑变量 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --paper:#0e1526;
    --paper-3:#182338;
    --ink:#e7edf8;
    --ink-soft:#a9b6cd;
    --ink-mute:#7e8ca6;
    --line:#28354f;
    --line-strong:#31405f;
    --accent:#4a8bff;
    --accent-dark:#2563eb;
    --accent-soft:rgba(74,139,255,.16);
    --danger:#f87171;
    --ok:#4ade80;
    --warn-ink:#fbbf24;
    --err-ink:#fca5a5;
    --err-bg:rgba(248,113,113,.12);
    --err-bd:rgba(248,113,113,.35);
    --warn-bg:rgba(251,146,60,.14);
    --warn-bd:rgba(251,146,60,.35);
    --shadow:0 8px 30px rgba(0,0,0,.45);

    --topbar-a:#3a6bff;
    --topbar-b:#1e40af;
    --brand-ink:#4a8bff;
    --nav-ink:#a9b6cd;
    --nav-ink-h:#4a8bff;

    --glass:rgba(255,255,255,.05);
    --glass-strong:rgba(255,255,255,.12);

    --head-ink:#e7edf8;
    --desc-ink:#a9b6cd;
    --step-ink:#c7d2e5;
    --notice-ink:#a9b6cd;

    --panel-end:#182338;
    --sheet-end:#182338;

    --sel-a:#1d3260;
    --sel-b:#1a2b52;
    --sel-glow:rgba(74,139,255,.30);

    --bar-a:#131c31;
    --bar-b:#0e1526;
    --fil-a:#2f4180;
    --fil-b:#243468;
    --fil-bd:#4a62b8;
    --fil-ink:#ccd6f4;

    --card-a:#25375f;
    --card-b:#1c2b4e;

    --arrow:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3e%3cpath fill='%234a8bff' d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  }
  :root:not([data-theme="light"]) .badge-1{
    background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.35);
  }
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .card:not(.selected){
    border-color:var(--line-strong);
  }
}