/* ==========================================================================
   鸵鸟商城 · 全站主题层
   所有页面只引用这一份，主题由 <html data-theme="..."> 驱动
   ========================================================================== */

/* ---------- 主题定义 ---------- */
:root{
  --radius-xl:26px;
  --radius-lg:20px;
  --radius:14px;
  --radius-sm:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --up:#16a37a;
  --down:#e5484d;
  --shadow-card:0 12px 30px -18px rgba(20,30,55,.35), 0 2px 6px -4px rgba(20,30,55,.14);
  --nav-h:64px;
}

/* 黑金（默认 · 高端） */
html[data-theme="luxe"]{
  --g1:#e9cf8c; --g2:#b8873a;
  --accent:#e3c47c; --accent-2:#f7e6bb;
  --on-accent:#1d1709;
  --bg:#17161a;
  --halo-1:rgba(233,207,140,.20); --halo-2:rgba(184,135,58,.13);
  --card:#22212a; --card-2:#2b2a34;
  --text:#f8f4ea; --text-2:#d8d1c1; --muted:#9d9689;
  --line:rgba(233,207,140,.20);
  --soft:rgba(233,207,140,.16);
  --nav-bg:rgba(34,33,42,.92);
  --shadow-card:0 16px 38px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(233,207,140,.09);
}

/* 黑金：流动的金色丝线底纹 */
html[data-theme="luxe"] body{
  background:
    radial-gradient(ellipse 78% 40% at 82% -6%, rgba(233,207,140,.26), transparent 60%),
    radial-gradient(ellipse 60% 34% at 6% 0%, rgba(233,207,140,.11), transparent 64%),
    url("bg-luxe.svg?v=20261029") center top / cover no-repeat,
    var(--bg);
  background-attachment: fixed, fixed, fixed, fixed;
}

/* 黑金：顶部一条金色细光带，增加层次 */
html[data-theme="luxe"] body::before{
  content:"";
  position:fixed; inset:0 0 auto 0;
  height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(224,191,122,.55) 22%, rgba(247,235,200,.75) 50%, rgba(224,191,122,.55) 78%, transparent);
  pointer-events:none;
}

/* 黑金：让内容压在底纹之上 */
html[data-theme="luxe"] .page{ position:relative; z-index:2; }

/* 黑金：卡片描边更精致 */
html[data-theme="luxe"] .card,
html[data-theme="luxe"] .good{
  border-color:rgba(233,207,140,.18);
  background-image:linear-gradient(180deg, rgba(233,207,140,.06), transparent 42%);
}

/* 黑金：关键数字用金色渐变 */
html[data-theme="luxe"] .q-price .big,
html[data-theme="luxe"] .pts-card .v,
html[data-theme="luxe"] .wallet .wval,
html[data-theme="luxe"] .pval,
html[data-theme="luxe"] .hero .amt{
  background:linear-gradient(135deg,#f7ebc8,#dcb769 46%,#a3762b 82%,#e8d3a0);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* 极光（默认） */
html[data-theme="aurora"]{
  --g1:#6f5bff; --g2:#3fc6f5;
  --accent:#6f5bff; --accent-2:#3fc6f5;
  --on-accent:#fff;
  --bg:#f4f6fc;
  --halo-1:rgba(111,91,255,.20); --halo-2:rgba(63,198,245,.18);
  --card:#fff; --card-2:#f7f9ff;
  --text:#1b2136; --text-2:#434c68; --muted:#8a93ad;
  --line:rgba(27,33,54,.09);
  --soft:rgba(111,91,255,.09);
  --nav-bg:rgba(255,255,255,.82);
}

/* 日落 */
html[data-theme="sunset"]{
  --g1:#ff7a3d; --g2:#ff3d8b;
  --accent:#ff6a3d; --accent-2:#ff3d8b;
  --on-accent:#fff;
  --bg:#fdf5f1;
  --halo-1:rgba(255,122,61,.22); --halo-2:rgba(255,61,139,.18);
  --card:#fff; --card-2:#fff8f4;
  --text:#2a1a18; --text-2:#5b4038; --muted:#a08e88;
  --line:rgba(42,26,24,.09);
  --soft:rgba(255,106,61,.09);
  --nav-bg:rgba(255,252,250,.84);
}

/* 海洋 */
html[data-theme="ocean"]{
  --g1:#0e9f9a; --g2:#2d6cf6;
  --accent:#0e9f9a; --accent-2:#2d6cf6;
  --on-accent:#fff;
  --bg:#f0f8f9;
  --halo-1:rgba(14,159,154,.18); --halo-2:rgba(45,108,246,.16);
  --card:#fff; --card-2:#f4fbfb;
  --text:#10222a; --text-2:#3d5560; --muted:#7f97a2;
  --line:rgba(16,34,42,.09);
  --soft:rgba(14,159,154,.09);
  --nav-bg:rgba(250,255,255,.84);
}

/* 森林 */
html[data-theme="forest"]{
  --g1:#3f8f4a; --g2:#b6cc35;
  --accent:#3f8f4a; --accent-2:#92b528;
  --on-accent:#fff;
  --bg:#f5f9f1;
  --halo-1:rgba(63,143,74,.18); --halo-2:rgba(180,204,53,.18);
  --card:#fff; --card-2:#f8fcf3;
  --text:#1e2a1c; --text-2:#475c43; --muted:#8d9c87;
  --line:rgba(30,42,28,.09);
  --soft:rgba(63,143,74,.09);
  --nav-bg:rgba(252,255,249,.84);
}

/* 午夜（暗） */
html[data-theme="midnight"]{
  --g1:#8b7bff; --g2:#3fd0c9;
  --accent:#8b7bff; --accent-2:#3fd0c9;
  --on-accent:#10121f;
  --bg:#0d1020;
  --halo-1:rgba(139,123,255,.26); --halo-2:rgba(63,208,201,.18);
  --card:#171b30; --card-2:#1d223a;
  --text:#eef1ff; --text-2:#b9c0dd; --muted:#7f87a8;
  --line:rgba(238,241,255,.10);
  --soft:rgba(139,123,255,.14);
  --nav-bg:rgba(23,27,48,.86);
  --shadow-card:0 12px 30px -16px rgba(0,0,0,.7), 0 2px 6px -4px rgba(0,0,0,.5);
}

/* ---------- 基础 ---------- */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh;
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% -6%, var(--halo-1) 0%, transparent 52%),
    radial-gradient(circle at 96% 8%, var(--halo-2) 0%, transparent 46%),
    var(--bg);
  background-attachment:fixed;
  transition:background-color .35s var(--ease), color .35s var(--ease);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; }
h1,h2,h3,h4,p{ margin:0; }
.mono{ font-variant-numeric:tabular-nums; }

.page{
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:14px 16px calc(var(--nav-h) + 34px);
  min-height:100vh;
}

/* ---------- 顶部栏 ---------- */
.appbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:6px 2px 14px;
}
.appbar .ttl{ display:flex; flex-direction:column; gap:2px; }
.appbar h1{ font-size:21px; letter-spacing:.3px; font-weight:800; }
.appbar .sub{ font-size:12px; color:var(--muted); }
.icon-btn{
  width:40px; height:40px; flex:0 0 auto;
  display:grid; place-items:center;
  border:none; border-radius:13px;
  background:var(--card); color:var(--text-2);
  box-shadow:var(--shadow-card);
  cursor:pointer;
  transition:transform .18s var(--ease), background .2s;
}
.icon-btn:active{ transform:scale(.94); }
.icon-btn svg{ width:20px; height:20px; }

/* ---------- 卡片 ---------- */
.card{
  background:#22212ac2;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--line);
  padding:16px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.card + .card{ margin-top:12px; }
.card-title{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.card-title h3{ font-size:15px; font-weight:700; letter-spacing:.2px; }
.card-title .more{ font-size:12px; color:var(--muted); }

/* ---------- 渐变主色块 ---------- */
.grad{
  background:linear-gradient(135deg, var(--g1), var(--g2));
  color:var(--on-accent);
}
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--radius-xl);
  padding:18px;
  color:var(--on-accent);
  background:linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow:0 18px 36px -20px var(--g1);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.28), transparent 46%),
    radial-gradient(circle at 8% 96%, rgba(255,255,255,.16), transparent 44%);
  pointer-events:none;
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:44px; padding:0 18px;
  border:none; border-radius:13px;
  font-size:14px; font-weight:700;
  background:var(--card-2); color:var(--text);
  cursor:pointer;
  transition:transform .16s var(--ease), filter .2s, opacity .2s;
}
.btn:active{ transform:scale(.97); }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn-primary{
  background:linear-gradient(135deg, var(--g1), var(--g2));
  color:var(--on-accent);
  box-shadow:0 12px 24px -14px var(--g1);
}
.btn-block{ width:100%; }
.btn-sm{ height:34px; padding:0 12px; font-size:13px; border-radius:10px; }
.btn-ghost{ background:var(--soft); color:var(--accent); }
.btn-danger{ background:rgba(229,72,77,.12); color:var(--down); }

/* ---------- 表单 ---------- */
.field{ margin-top:12px; }
.field > label{
  display:block; margin-bottom:6px;
  font-size:12.5px; font-weight:600; color:var(--text-2);
}
.input{
  width:100%; height:46px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--card-2);
  color:var(--text);
  font-size:15px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .3s;
}
.input::placeholder{ color:var(--muted); }
.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--soft);
}
textarea.input{ height:74px; padding:12px 14px; resize:none; line-height:1.5; }
select.input{ appearance:none; background-image:none; }
.hintline{ margin-top:6px; font-size:11.5px; color:var(--muted); line-height:1.55; }

/* ---------- 列表 ---------- */
.list{ display:flex; flex-direction:column; }
.list-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 2px;
  border-bottom:1px solid var(--line);
}
.list-item:last-child{ border-bottom:none; }
.list-item .li-main{ min-width:0; }
.list-item .li-ttl{ font-size:13.5px; font-weight:600; }
.list-item .li-sub{ margin-top:3px; font-size:11.5px; color:var(--muted); }
.list-item .li-right{ text-align:right; flex:0 0 auto; }
.list-item .li-amt{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
.list-item .li-amt.plus{ color:var(--up); }
.list-item .li-amt.minus{ color:var(--down); }
.list-item .li-state{ font-size:11px; color:var(--muted); margin-top:3px; }

/* 空状态 */
.empty{
  padding:22px 0;
  text-align:center;
  font-size:12.5px;
  color:var(--muted);
}

/* ---------- 状态徽章 ---------- */
.badge{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  background:var(--soft);
  color:var(--accent);
}
.badge.warn{ background:rgba(240,160,30,.13); color:#c9860f; }
.badge.ok{ background:rgba(22,163,122,.13); color:var(--up); }
.badge.off{ background:rgba(140,140,140,.14); color:var(--muted); }

/* ---------- 分段控件 ---------- */
.seg{
  display:flex; gap:4px;
  padding:4px;
  background:var(--card-2);
  border-radius:12px;
}
.seg button{
  flex:1;
  height:34px;
  border:none; border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-size:12.5px; font-weight:600;
  cursor:pointer;
  transition:all .2s var(--ease);
}
.seg button.on{
  background:var(--card);
  color:var(--text);
  box-shadow:0 3px 10px -6px rgba(0,0,0,.4);
}

/* ---------- 弹层 ---------- */
.mask{
  position:fixed; inset:0; z-index:200;
  display:none;
  align-items:flex-end; justify-content:center;
  background:rgba(12,16,30,.42);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.mask.open{ display:flex; }
.sheet{
  width:100%;
  max-width:520px;
  max-height:88vh;
  overflow:auto;
  padding:8px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;
  background:var(--card);
  color:var(--text);
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.5);
  animation:sheetIn .28s var(--ease);
}
@keyframes sheetIn{
  from{ transform:translateY(100%); }
  to{ transform:translateY(0); }
}
.sheet-grip{
  width:38px; height:4px; margin:6px auto 12px;
  border-radius:99px;
  background:var(--line);
}
.sheet h2{ font-size:17px; font-weight:800; margin-bottom:4px; }
.sheet .sheet-sub{ font-size:12.5px; color:var(--muted); margin-bottom:14px; line-height:1.6; }
.sheet .sheet-actions{ display:flex; gap:10px; margin-top:18px; }
.sheet .sheet-actions .btn{ flex:1; }
.sheet-close{
  position:absolute; top:12px; right:14px;
}

/* 弹层里的 key-value 行 */
.kv{
  display:flex; justify-content:space-between; gap:14px;
  font-size:13px; padding:7px 0;
}
.kv .k{ color:var(--muted); flex:0 0 auto; }
.kv .v{ text-align:right; font-weight:600; }

/* ---------- 底部导航 ---------- */
.tabbar{
  position:fixed;
  left:50%; bottom:12px;
  transform:translateX(-50%);
  z-index:150;
  width:min(464px, calc(100% - 24px));
  height:var(--nav-h);
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  align-items:center;
  padding:0 6px;
  border-radius:22px;
  background:var(--nav-bg);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -18px rgba(15,22,45,.45);
  transition:background .3s var(--ease);
}
.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:52px;
  border-radius:15px;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2px;
  transition:color .2s, background .2s;
}
.tab svg{ width:21px; height:21px; transition:transform .22s var(--ease); }
.tab.active{
  color:var(--accent);
  background:var(--soft);
}
.tab.active svg{ transform:translateY(-1px) scale(1.06); }
.tab:active svg{ transform:scale(.92); }

/* ---------- 主题选择器 ---------- */
.theme-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  margin-top:4px;
}
.theme-opt{
  position:relative;
  border:2px solid transparent;
  border-radius:16px;
  padding:12px;
  text-align:left;
  cursor:pointer;
  background:var(--card-2);
  color:var(--text);
  transition:border-color .2s, transform .18s var(--ease);
}
.theme-opt:active{ transform:scale(.97); }
.theme-opt.on{ border-color:var(--accent); }
.theme-opt .sw{
  height:40px;
  border-radius:10px;
  margin-bottom:9px;
}
.theme-opt .nm{ font-size:13px; font-weight:700; }
.theme-opt .tick{
  position:absolute; top:8px; right:8px;
  width:18px; height:18px; border-radius:50%;
  display:none; place-items:center;
  background:#fff; color:#111;
  font-size:11px; font-weight:800;
}
.theme-opt.on .tick{ display:grid; }

/* ---------- 提示条 ---------- */
#toast{
  position:fixed;
  left:50%; bottom:calc(var(--nav-h) + 26px);
  transform:translate(-50%, 12px);
  z-index:400;
  max-width:min(400px, calc(100% - 40px));
  padding:11px 18px;
  border-radius:14px;
  background:rgba(20,24,40,.92);
  color:#fff;
  font-size:13px;
  line-height:1.5;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s, transform .22s var(--ease);
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ---------- 骨架 ---------- */
.stack-8 > * + *{ margin-top:8px; }
.stack-12 > * + *{ margin-top:12px; }
.row{ display:flex; align-items:center; gap:10px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.grow{ flex:1; min-width:0; }
.text-muted{ color:var(--muted); }
.text-sm{ font-size:12px; }
.text-accent{ color:var(--accent); }
.nowrap{ white-space:nowrap; }

/* ---------- VIP 等级徽章 ---------- */
/* 图标由 assets/vip.js 注入（自带渐变的 <svg>），这里只管尺寸与光效 */
.vip-badge{
  display:inline-flex; align-items:center; gap:4px;
  flex:0 0 auto;
  vertical-align:middle;
}
.vip-badge .vip-ico{
  width:20px; height:20px;
  display:block;
  flex:0 0 auto;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.vip-badge.hi .vip-ico{
  filter:drop-shadow(0 0 6px rgba(255,215,106,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
/* 图标后面的等级名称：金色渐变字，不换行 */
.vip-badge .vip-txt{
  font-size:11px; font-weight:800; letter-spacing:.4px;
  line-height:1;
  white-space:nowrap;
  background:linear-gradient(135deg, #fff6d8, #d8ab52 62%, #b8873a);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
/* 光晕等级（5 级以上）名称更亮 */
.vip-badge.hi .vip-txt{
  background:linear-gradient(135deg, #fffdf2, #ffe9ac 58%, #d8ab52);
  -webkit-background-clip:text; background-clip:text;
}
/* 7 级：名称也带呼吸光 */
.vip-badge.mythic .vip-txt{
  text-shadow:0 0 8px rgba(255,226,140,.65);
}
/* 7 级：徽章外圈缓慢金光呼吸 */
.vip-badge.mythic .vip-ico{
  animation:vipBreath 2.8s ease-in-out infinite;
}
@keyframes vipBreath{
  0%,100%{ filter:drop-shadow(0 0 4px rgba(255,215,106,.45)) drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
  50%    { filter:drop-shadow(0 0 11px rgba(255,226,140,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
}
@media (prefers-reduced-motion: reduce){
  .vip-badge.mythic .vip-ico{ animation:none; }
}