/* 发卡网 —— 前台样式（白天/黑夜双主题 + 二次元背景，手机优先）
 *
 * 配色一律走变量：上面的 :root 是「深色（默认）」，下面 [data-theme="light"] 覆盖成白天。
 * 改配色只动变量，别往选择器里写死颜色（写死的 #fff 在深色下就是白块）。
 * 主题由 assets/theme.js 写在 <html data-theme="..."> 上。
 */
:root{
  /* ---------- 深色（默认） ---------- */
  --bg:#070910; --panel:#0f1219;
  --card:rgba(21,25,36,.72); --card-solid:#151926;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
  --text:#e9edf7; --text-2:#b9c3da; --dim:#93a0bb; --dim2:#6d7893;
  --brand:#a78bfa; --brand2:#ff7ac6; --brand3:#67e8f9;
  --brand-ink:#cbbeff; --brand-soft:rgba(167,139,250,.16); --brand-line:rgba(167,139,250,.32);
  --link:#a78bfa;
  --ok:#3ddc97; --ok-ink:#84f0be; --ok-soft:rgba(61,220,151,.10); --ok-line:rgba(61,220,151,.30);
  --warn:#ffc857; --warn-ink:#ffd88a;
  --bad:#ff6b6b; --bad-ink:#ff9f9f; --bad-soft:rgba(255,107,107,.14); --bad-line:rgba(255,107,107,.32);
  --fill-1:rgba(255,255,255,.05); --fill-2:rgba(255,255,255,.10); --fill-3:rgba(255,255,255,.04);
  --edge:rgba(255,255,255,.30);
  --cover-bg:linear-gradient(135deg,#1b1f2f,#241b33);
  --code-bg:#04060b; --code-text:#cfe0f5;
  --nav-bg:rgba(9,11,18,.72);
  --toast-bg:rgba(15,18,26,.94); --toast-text:#fff;
  --notice-bg:linear-gradient(90deg,rgba(167,139,250,.16),rgba(255,122,198,.12));
  --notice-line:rgba(167,139,250,.28); --notice-ink:#ddd6ff;
  --h1-grad:linear-gradient(100deg,#fff 10%,#d6c9ff 48%,#ffb4dd 92%);
  --price-grad:linear-gradient(100deg,#c4b0ff,#ff9ad5);
  --amount-grad:linear-gradient(100deg,#d8ccff,#ffa8dc);
  --hero-fade:linear-gradient(90deg,rgba(10,12,20,.72),rgba(10,12,20,0) 52%);
  /* 背景图：亮度 + 暗罩/亮罩 + 三处光斑 */
  --bg-bright:.52; --bg-sat:1.05;
  --veil-a:rgba(5,7,13,.70); --veil-b:rgba(5,7,13,.84); --veil-c:rgba(5,7,13,.93);
  --glow-a:rgba(124,92,255,.30); --glow-b:rgba(255,107,181,.20); --glow-c:rgba(103,232,249,.10);
  --glow-hero-a:rgba(167,139,250,.30); --glow-hero-b:rgba(255,122,198,.20);
  --radius:18px; --shadow:0 2px 10px rgba(0,0,0,.35),0 18px 46px rgba(0,0,0,.34);
  --shadow-hi:0 12px 34px rgba(120,80,220,.28),0 2px 10px rgba(0,0,0,.40);
  --glass:blur(16px) saturate(150%);
}
/* ---------- 白天 ---------- */
:root[data-theme="light"]{
  --bg:#eef1f8; --panel:#ffffff;
  --card:rgba(255,255,255,.80); --card-solid:#ffffff;
  --line:rgba(26,33,58,.12); --line2:rgba(26,33,58,.22);
  --text:#1c2138; --text-2:#3d4763; --dim:#5f6a87; --dim2:#7d879f;
  --brand:#7c5cff; --brand2:#e05bb0; --brand3:#12a2b8;
  --brand-ink:#5b32c9; --brand-soft:rgba(124,92,255,.12); --brand-line:rgba(124,92,255,.28);
  --link:#5b32c9;
  --ok:#0f9d68; --ok-ink:#0b7d52; --ok-soft:rgba(15,157,104,.10); --ok-line:rgba(15,157,104,.28);
  --warn:#a8710f; --warn-ink:#8a5c07;
  --bad:#cf3b3b; --bad-ink:#b32d2d; --bad-soft:rgba(207,59,59,.10); --bad-line:rgba(207,59,59,.28);
  --fill-1:rgba(26,33,58,.05); --fill-2:rgba(26,33,58,.10); --fill-3:rgba(26,33,58,.035);
  --edge:rgba(255,255,255,.90);
  --cover-bg:linear-gradient(135deg,#e6ebf7,#f2e6f4);
  --code-bg:#f3f5fb; --code-text:#26314e;
  --nav-bg:rgba(255,255,255,.78);
  --toast-bg:rgba(26,33,58,.94); --toast-text:#ffffff;
  --notice-bg:linear-gradient(90deg,rgba(124,92,255,.10),rgba(224,91,176,.08));
  --notice-line:rgba(124,92,255,.24); --notice-ink:#46309c;
  --h1-grad:linear-gradient(100deg,#1d2340 8%,#5b46c8 52%,#b83d8f 94%);
  --price-grad:linear-gradient(100deg,#6b46d6,#d1489c);
  --amount-grad:linear-gradient(100deg,#6b46d6,#d1489c);
  --hero-fade:linear-gradient(90deg,rgba(255,255,255,.62),rgba(255,255,255,0) 56%);
  --bg-bright:1; --bg-sat:.92;
  --veil-a:rgba(248,250,255,.80); --veil-b:rgba(246,249,255,.88); --veil-c:rgba(244,247,254,.93);
  --glow-a:rgba(124,92,255,.16); --glow-b:rgba(224,91,176,.12); --glow-c:rgba(18,162,184,.10);
  --glow-hero-a:rgba(124,92,255,.16); --glow-hero-b:rgba(224,91,176,.12);
  --shadow:0 2px 10px rgba(30,40,80,.08),0 16px 40px rgba(30,40,80,.10);
  --shadow-hi:0 12px 30px rgba(110,80,200,.18),0 2px 8px rgba(30,40,80,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.7 system-ui,-apple-system,"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh}
/* 二次元背景图 + 罩层（用 position:fixed 的伪元素，手机上滚动不抖） */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:url(bg/page.jpg) center center/cover no-repeat;
  filter:brightness(var(--bg-bright)) saturate(var(--bg-sat)) contrast(1.02);
  transform:scale(1.03)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(920px 620px at 10% -12%,var(--glow-a),transparent 62%),
    radial-gradient(820px 520px at 102% -4%,var(--glow-b),transparent 58%),
    radial-gradient(760px 700px at 50% 120%,var(--glow-c),transparent 60%),
    linear-gradient(180deg,var(--veil-a),var(--veil-b) 42%,var(--veil-c))}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px;position:relative;z-index:1}
/* 正文里的链接（原来各页面内联写的紫色） */
.lnk{color:var(--link)}

/* 白天/黑夜切换按钮 */
.themebtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--fill-3);color:var(--text-2);font:inherit;font-size:13px;
  line-height:1;cursor:pointer;transition:.16s;white-space:nowrap}
.themebtn:hover{background:var(--fill-2);color:var(--text)}
.themebtn .ic{font-size:13.5px;line-height:1}
.themebtn .ic-moon{display:none}
.themebtn .tx-moon{display:none}
:root[data-theme="light"] .themebtn .ic-sun{display:none}
:root[data-theme="light"] .themebtn .tx-sun{display:none}
:root[data-theme="light"] .themebtn .ic-moon{display:inline}
:root[data-theme="light"] .themebtn .tx-moon{display:inline}

/* 顶栏 */
.nav{position:sticky;top:0;z-index:30;background:var(--nav-bg);
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:14px;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:.2px}
.logo .mk{width:32px;height:32px;border-radius:10px;display:block;flex:0 0 32px;box-shadow:0 6px 16px rgba(130,90,250,.35)}
.nav .links{margin-left:auto;display:flex;gap:6px;font-size:14px;align-items:center}
.nav .links a{padding:7px 13px;border-radius:10px;color:var(--text-2);transition:.16s}
.nav .links a:hover{background:var(--fill-2);color:var(--text)}

/* 首页 hero：左边文案 + 右边二次元插画 */
.hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;margin:18px 0 20px;
  display:flex;align-items:center;gap:26px;padding:26px 28px;
  background:var(--card);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  box-shadow:var(--shadow)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 340px at 6% 0%,var(--glow-hero-a),transparent 62%),
    radial-gradient(520px 320px at 96% 110%,var(--glow-hero-b),transparent 60%)}
.hero .hin{position:relative;z-index:1;flex:1 1 auto;min-width:0;max-width:620px}
.hero .hart{position:relative;z-index:1;flex:0 0 42%;max-width:440px;aspect-ratio:16/9;border-radius:16px;
  overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.hero .hart img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero .hart::after{content:"";position:absolute;inset:0;background:var(--hero-fade)}
.hero .kicker{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--brand-ink);
  background:var(--brand-soft);border:1px solid var(--brand-line);padding:3px 11px;border-radius:20px;margin-bottom:12px}
.hero h1{margin:0 0 8px;font-size:29px;line-height:1.35;letter-spacing:-.4px;font-weight:800;
  background:var(--h1-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.hero p{margin:0 0 16px;color:var(--text-2);font-size:14px;line-height:1.8;max-width:520px;white-space:pre-line}
.hero .hchips{display:flex;gap:8px;flex-wrap:wrap}
.hero .hchips span{font-size:12.5px;color:var(--text-2);background:var(--fill-3);border:1px solid var(--line);
  padding:4px 12px;border-radius:20px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(max-width:700px){
  .hero{flex-direction:column;align-items:stretch;gap:16px;padding:20px}
  .hero .hin{max-width:none}
  .hero .hart{flex:none;max-width:none;order:-1;aspect-ratio:16/9}
  .hero h1{font-size:23px}
  .hero p{font-size:13.5px}
}

.notice{background:var(--notice-bg);
  border:1px solid var(--notice-line);color:var(--notice-ink);font-size:13.5px;padding:11px 15px;border-radius:14px;margin:16px 0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* 商品网格 */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));margin:18px 0 48px}
.pcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);box-shadow:var(--shadow);transition:.2s;
  display:flex;flex-direction:column}
.pcard::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--edge),transparent)}
.pcard:hover{transform:translateY(-4px);border-color:var(--brand-line);
  box-shadow:var(--shadow-hi)}
.pcard .cover{aspect-ratio:16/10;background:var(--cover-bg);position:relative;overflow:hidden}
.pcard .cover img{width:100%;height:100%;object-fit:cover;transition:.35s}
.pcard:hover .cover img{transform:scale(1.05)}
.pcard .cover .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:800;color:var(--brand-line)}
.pcard .body{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1;gap:7px}
.pcard h3{margin:0;font-size:15px;line-height:1.45;font-weight:600;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .sum{color:var(--dim);font-size:12.5px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .foot{margin-top:auto;display:flex;align-items:flex-end;gap:8px;padding-top:6px}
.price{font-weight:800;font-size:20px;letter-spacing:-.3px;
  background:var(--price-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.price small{font-size:12px;font-weight:500;-webkit-text-fill-color:var(--dim);color:var(--dim);margin-right:1px}
.meta{margin-left:auto;color:var(--dim2);font-size:11.5px;text-align:right;line-height:1.5}
.tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:20px;background:var(--brand-soft);
  color:var(--brand-ink);border:1px solid var(--brand-line);margin-left:6px;vertical-align:1px}
.tag.out{background:var(--bad-soft);color:var(--bad-ink);border-color:var(--bad-line)}

/* 通用卡片/表单 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);padding:20px;margin:16px 0}
.card h2{margin:0 0 14px;font-size:17px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;border-radius:12px;
  border:1px solid var(--line2);background:var(--fill-1);color:var(--text);font-size:14.5px;font-family:inherit;
  cursor:pointer;transition:.16s;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn:hover{border-color:var(--brand-line);background:var(--fill-2)}
.btn-primary{background:linear-gradient(135deg,var(--brand),#8b5cf6 55%,var(--brand2));border-color:transparent;
  color:#fff;font-weight:700;box-shadow:0 8px 22px rgba(140,92,255,.40)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
label.fld{display:block;font-size:13.5px;color:var(--text-2);margin-bottom:14px}
label.fld input,label.fld select,label.fld textarea{width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line);
  border-radius:11px;font-size:15px;font-family:inherit;background:var(--fill-1);color:var(--text)}
label.fld input::placeholder,label.fld textarea::placeholder{color:var(--dim2)}
label.fld input:focus,label.fld select:focus,label.fld textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);background:var(--fill-2)}
label.fld select option{background:var(--card-solid);color:var(--text)}
.hint{color:var(--dim);font-size:12.5px;margin-top:6px}
/* 跟输入框一起排在一行的那种输入框（查订单、验证邮箱） */
.inp{flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:11px;font-size:15px;
  background:var(--fill-1);color:var(--text);font-family:inherit;box-sizing:border-box}
.inp::placeholder{color:var(--dim2)}
.inp:focus{outline:none;border-color:var(--brand);background:var(--fill-2);
  box-shadow:0 0 0 3px var(--brand-soft)}

.detail{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) 340px;align-items:start;margin:18px 0 48px;
  grid-template-areas:"head buy" "body buy"}
/* 在手机上把购买卡提到详情前面：不用滚过一整屏介绍才看到价格和下单 */
.dhead{grid-area:head}
.dbody{grid-area:body}
.dbuy{grid-area:buy;position:sticky;top:76px}
.detail .pdetail{white-space:pre-wrap;color:var(--text-2);font-size:14.5px}
.detail .pdetail img{display:block;max-width:100%;height:auto;margin:10px 0;border-radius:12px;border:1px solid var(--line)}
/* 商品详情的轻标记（rich_detail）：## 小节标题 / - 列表 / > 提示条 / [文字](网址) 按钮 */
.detail .pdetail .dtxt{margin:8px 0;white-space:pre-wrap}
.detail .pdetail>*:first-child{margin-top:0}
.dsec{position:relative;margin:24px 0 10px;padding-left:13px;font-size:15px;font-weight:800;
  line-height:1.5;letter-spacing:.2px;color:var(--text)}
.dsec::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:4px;
  background:var(--price-grad)}
.dlist{list-style:none;margin:4px 0 2px;padding:0}
.dlist li{position:relative;padding:5px 0 5px 20px;font-size:14.5px;line-height:1.68;color:var(--text-2)}
.dlist li::before{content:"";position:absolute;left:3px;top:14px;width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.dtip{margin:10px 0;padding:10px 13px;border-radius:11px;background:var(--brand-soft);
  border:1px solid var(--brand-line);color:var(--brand-ink);font-size:13px;line-height:1.65;
  white-space:pre-wrap}
.dbtn{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 6px;padding:13px 16px;
  border-radius:12px;background:linear-gradient(135deg,var(--brand),#8b5cf6 55%,var(--brand2));color:#fff;
  font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;
  box-shadow:0 8px 22px rgba(140,92,255,.35);transition:.16s}
.dbtn:hover{filter:brightness(1.08)}
.dbtn:active{transform:translateY(1px)}
@media(max-width:820px){
  .dsec{font-size:14.5px;margin-top:20px}
  .dlist li{font-size:14px;line-height:1.66}
  .dbtn{font-size:14.5px;padding:12px 14px}
}
/* 商品页顶部的商品简介小条 */
.pnote{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:12px;padding:12px 14px;
  color:var(--brand-ink);font-size:13.5px;margin-bottom:16px}
.dim2{color:var(--dim2)}
@media(max-width:820px){
  .detail{grid-template-columns:1fr;grid-template-areas:"head" "buy" "body"}
  .dbuy{position:static}
}

/* 支付页 */
.paybox{max-width:520px;margin:26px auto 60px}
.amount{text-align:center;font-size:42px;font-weight:800;letter-spacing:-1.2px;
  background:var(--amount-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 4px 18px var(--brand-soft))}
.amount small{font-size:18px;font-weight:700;margin-right:2px}
.qr{width:230px;height:230px;margin:16px auto;border:1px solid var(--line2);border-radius:16px;background:#fff;
  padding:8px;object-fit:contain;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.qr.empty{display:flex;align-items:center;justify-content:center;color:var(--dim2);font-size:13px;text-align:center;
  padding:20px;background:var(--fill-3)}
.chiptabs{display:flex;gap:8px;justify-content:center;margin:14px 0 6px}
.chiptabs button{padding:8px 18px;border-radius:11px;border:1px solid var(--line);background:var(--fill-1);
  font-family:inherit;font-size:14px;cursor:pointer;color:var(--text-2);transition:.16s}
.chiptabs button:hover{background:var(--fill-2)}
.chiptabs button.active{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft);font-weight:600}
.kv{display:flex;gap:10px;font-size:13.5px;padding:8px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--dim);flex:0 0 78px}
.kv .v{word-break:break-all}
.status{text-align:center;padding:10px 0;font-size:14px;color:var(--dim)}
.status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warn);margin-right:7px;
  animation:blink 1.3s infinite}
@keyframes blink{50%{opacity:.3}}
.okbox{background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:14px;padding:14px;margin-top:14px}
.okbox h3{margin:0 0 8px;font-size:15px;color:var(--ok-ink)}
pre.deliver{margin:0;background:var(--code-bg);color:var(--code-text);padding:14px;border-radius:12px;font-size:13px;
  overflow:auto;white-space:pre-wrap;word-break:break-all;border:1px solid var(--line);
  font-family:"JetBrains Mono","DejaVu Sans Mono",Consolas,monospace}
.empty{padding:56px 20px;text-align:center;color:var(--dim);background:var(--card);border:1px dashed var(--line2);
  border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-text);
  border:1px solid var(--line2);padding:11px 20px;border-radius:12px;font-size:14px;z-index:99;
  box-shadow:0 12px 34px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;bottom:40px}

.foot{color:var(--dim2);font-size:12.5px;text-align:center;padding:26px 0 40px;border-top:1px solid var(--line);
  margin-top:20px}
.steps{display:flex;gap:8px;justify-content:center;margin:0 0 18px;font-size:13px;color:var(--dim);flex-wrap:wrap}
.steps span{display:flex;align-items:center;gap:6px}
.steps b{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--brand-soft);
  border:1px solid var(--brand-line);color:var(--brand-ink);align-items:center;justify-content:center;font-size:11.5px}
.sec{display:flex;align-items:baseline;gap:10px;margin:24px 0 0;padding-bottom:2px}
.sec h2{margin:0;font-size:17px;letter-spacing:.2px}
.sec span{color:var(--dim2);font-size:12.5px}