/* =============================================================
   企数定制 v2 · 设计系统
   美学：清透现代光感 · 浅色为主 · 深浅双主题
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Fira+Code:wght@400;500&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

/* ── Light Mode Tokens (Default) ─────────────────────────── */
:root {
  /* Backgrounds */
  --bg-void:    #EDF0FF;
  --bg-base:    #F4F5FF;
  --bg-raised:  #FFFFFF;
  --bg-card:    rgba(255,255,255,0.92);
  --bg-hover:   rgba(94,95,245,0.06);
  --bg-input:   rgba(94,95,245,0.05);

  /* Brand · Electric Periwinkle */
  --brand:      #5E5FF5;
  --brand-l:    #7879F8;
  --brand-xl:   #A4A5FB;
  --brand-glow: rgba(94,95,245,0.22);
  --brand-soft: rgba(94,95,245,0.10);
  --grad-brand: linear-gradient(135deg,#5E5FF5,#9B6BF2);

  /* Coin · Warm Amber */
  --coin:       #E86F1A;
  --coin-l:     #F08840;
  --coin-glow:  rgba(232,111,26,0.22);
  --coin-soft:  rgba(232,111,26,0.10);
  --grad-coin:  linear-gradient(135deg,#E86F1A,#FFB84D);

  /* AI · Cerulean */
  --ai:         #0E8FCC;
  --ai-soft:    rgba(14,143,204,0.10);
  --grad-ai:    linear-gradient(135deg,#0E8FCC,#0066AA);

  /* Status */
  --ok:         #17A26A;
  --ok-soft:    rgba(23,162,106,0.10);
  --warn:       #C98A0A;
  --warn-soft:  rgba(201,138,10,0.10);
  --err:        #D42B5A;
  --err-soft:   rgba(212,43,90,0.10);

  /* Text */
  --t1: #0C0E2A;
  --t2: #3C4070;
  --t3: #8590BA;
  --t4: #C0C5DC;

  /* Borders */
  --line:   rgba(0,0,0,0.07);
  --line-2: rgba(0,0,0,0.11);
  --line-3: rgba(0,0,0,0.18);

  /* Shadows (light: purple-tinted) */
  --sh-sm:    0 2px 12px rgba(94,95,245,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --sh-md:    0 6px 28px rgba(94,95,245,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --sh-lg:    0 12px 48px rgba(94,95,245,0.14), 0 4px 16px rgba(0,0,0,0.07);
  --sh-brand: 0 4px 24px rgba(94,95,245,0.30);
  --sh-coin:  0 4px 20px rgba(232,111,26,0.28);

  /* Surface specific */
  --tab-bar-bg:   rgba(250,251,255,0.95);
  --toast-bg:     rgba(250,251,255,0.97);
  --skel-mid:     rgba(94,95,245,0.05);
  --status-grad:  linear-gradient(to bottom, #F4F5FF 80%, transparent);
  --noise-op:     0.35;

  /* Typography */
  --font: 'Instrument Sans','Noto Sans SC',sans-serif;
  --mono: 'Fira Code',monospace;

  /* Layout */
  --px: 18px;

  /* Radii */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* Timing */
  --ease: cubic-bezier(0.22,1,0.36,1);
}

/* ── Dark Mode Overrides ─────────────────────────────────── */
html.dark {
  --bg-void:    #04061A;
  --bg-base:    #070A1E;
  --bg-raised:  #0C1030;
  --bg-card:    rgba(255,255,255,0.042);
  --bg-hover:   rgba(255,255,255,0.072);
  --bg-input:   rgba(255,255,255,0.06);

  --brand-l:    #8A8BF8;
  --brand-xl:   #B8B9FC;
  --brand-glow: rgba(94,95,245,0.38);
  --brand-soft: rgba(94,95,245,0.13);

  --coin:       #FF9140;
  --coin-l:     #FFB876;
  --coin-glow:  rgba(255,145,64,0.38);
  --coin-soft:  rgba(255,145,64,0.12);
  --grad-coin:  linear-gradient(135deg,#FF9140,#FFD166);

  --ai:         #00D9FF;
  --ai-soft:    rgba(0,217,255,0.10);
  --grad-ai:    linear-gradient(135deg,#00D9FF,#00AAFF);

  --ok:         #2ECC90;
  --ok-soft:    rgba(46,204,144,0.12);
  --warn:       #F5C842;
  --warn-soft:  rgba(245,200,66,0.12);
  --err:        #FF5F7A;
  --err-soft:   rgba(255,95,122,0.12);

  --t1: #ECF0FF;
  --t2: #8A93BF;
  --t3: #49517A;
  --t4: #252A4A;

  --line:   rgba(255,255,255,0.07);
  --line-2: rgba(255,255,255,0.13);
  --line-3: rgba(255,255,255,0.22);

  --sh-sm:    0 2px 10px rgba(0,0,0,0.45);
  --sh-md:    0 6px 24px rgba(0,0,0,0.55);
  --sh-lg:    0 12px 48px rgba(0,0,0,0.65);
  --sh-brand: 0 0 36px var(--brand-glow);
  --sh-coin:  0 0 28px var(--coin-glow);

  --tab-bar-bg:   rgba(7,10,30,0.90);
  --toast-bg:     rgba(16,20,52,0.97);
  --skel-mid:     rgba(255,255,255,0.06);
  --status-grad:  linear-gradient(to bottom, #070A1E 80%, transparent);
  --noise-op:     0.65;
}

/* ── Global Reset ────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; -webkit-text-size-adjust:none; }
body {
  font-family: var(--font);
  background: var(--bg-void);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  transition: background .25s, color .25s;
}
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; outline:none; background:none; }
input,textarea { font-family:inherit; outline:none; border:none; background:none; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ── Phone Frame ─────────────────────────────────────────── */
.phone {
  position: relative;
  width: 390px;
  min-height: 844px;
  background: var(--bg-base);
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 88px;
  transition: background .25s;
}
.phone::-webkit-scrollbar { display:none; }

/* Noise overlay */
.phone::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: var(--noise-op);
}

/* ── Status Bar ──────────────────────────────────────────── */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 6px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--status-grad);
  backdrop-filter: blur(12px);
}
.status-bar .time {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--t1);
}
.status-bar .icons {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--t1);
}
.status-bar .icons svg { opacity: 0.75; }

/* ── Ambient Glow ────────────────────────────────────────── */
.ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.ambient-brand {
  width: 280px; height: 280px;
  background: var(--brand-soft);
  top: -60px; right: -80px;
}
.ambient-coin {
  width: 200px; height: 200px;
  background: var(--coin-soft);
  top: 120px; left: -60px;
}

/* ── Page Header ─────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--px) 14px;
  position: relative;
  z-index: 5;
}
.page-header .back-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--t1);
  box-shadow: var(--sh-sm);
  transition: all .2s var(--ease);
}
.page-header .back-btn:active { background: var(--bg-hover); }
.page-header .page-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.page-header .header-action {
  font-size: 13px;
  color: var(--brand);
  font-weight: 500;
}

/* ── Section Labels ──────────────────────────────────────── */
.sec-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 var(--px) 12px;
}
.sec-label .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 6px var(--brand-glow);
  flex-shrink: 0;
}
.sec-label .text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.sec-label .sub {
  font-size: 12px;
  color: var(--t3);
  font-style: italic;
  margin-left: auto;
}

/* ── Glass Cards ─────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--sh-sm);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.card-raised {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 22px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  transition: all .2s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .15s;
}
.btn:active::after { background: rgba(255,255,255,0.10); }

.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.btn-coin {
  background: var(--grad-coin);
  color: #fff;
  box-shadow: var(--sh-coin);
}
.btn-ghost {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  color: var(--t1);
  box-shadow: var(--sh-sm);
}
.btn-danger {
  background: var(--err-soft);
  border: 1px solid rgba(212,43,90,0.25);
  color: var(--err);
}
.btn-block {
  width: 100%;
  padding: 16px 22px;
  border-radius: var(--r-lg);
  font-size: 16px;
}
.btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ── Sticky Bottom CTA ───────────────────────────────────── */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 390px;
  padding: 16px var(--px) 32px;
  background: linear-gradient(to top, var(--bg-base) 70%, transparent);
  z-index: 50;
}

/* ── Tab Bar ─────────────────────────────────────────────── */
.tab-bar {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 390px;
  height: 82px;
  background: var(--tab-bar-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 10px 0 0;
  z-index: 200;
  transition: background .25s, border-color .25s;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  color: var(--t3);
  transition: color .2s var(--ease);
  padding-bottom: 4px;
}
.tab-item.active { color: var(--brand); }
.tab-item .tab-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.tab-item.active .tab-icon {
  filter: drop-shadow(0 0 6px var(--brand-glow));
}
.tab-item .tab-label {
  font-size: 11px;
  font-weight: 500;
}

/* 中央定制突出按钮 */
.tab-item.tab-center {
  margin-top: -18px;
  flex: 1.1;
}
.tab-item.tab-center.active { color: var(--brand); }
.tab-center-btn {
  width: 52px; height: 52px;
  border-radius: 18px;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: var(--sh-brand), 0 4px 16px rgba(94,95,245,0.4);
  transition: transform .2s var(--ease), box-shadow .2s;
  position: relative;
}
.tab-center-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 22px;
  background: var(--brand-soft);
  z-index: -1;
  border: 1px solid rgba(94,95,245,0.2);
}
.tab-item.tab-center:active .tab-center-btn {
  transform: scale(0.94);
  box-shadow: var(--sh-sm);
}
.tab-item.tab-center .tab-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  margin-top: 2px;
}

/* ── Inputs ──────────────────────────────────────────────── */
.input-field {
  width: 100%;
  padding: 13px 16px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--t1);
  font-size: 14px;
  transition: border-color .2s, background .25s;
}
.input-field:focus { border-color: var(--brand); background: var(--bg-card); }
.input-field::placeholder { color: var(--t3); }

.textarea-field {
  width: 100%;
  padding: 13px 16px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--t1);
  font-size: 14px;
  resize: none;
  transition: border-color .2s, background .25s;
  min-height: 96px;
}
.textarea-field:focus { border-color: var(--brand); background: var(--bg-card); }
.textarea-field::placeholder { color: var(--t3); }

/* ── Badges & Tags ───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-brand {
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid rgba(94,95,245,0.22);
}
.badge-coin {
  background: var(--coin-soft);
  color: var(--coin);
  border: 1px solid rgba(232,111,26,0.22);
}
.badge-ok {
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid rgba(23,162,106,0.22);
}
.badge-err {
  background: var(--err-soft);
  color: var(--err);
  border: 1px solid rgba(212,43,90,0.22);
}
.badge-warn {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid rgba(201,138,10,0.22);
}
.badge-ai {
  background: var(--ai-soft);
  color: var(--ai);
  border: 1px solid rgba(14,143,204,0.22);
}
.badge-member {
  background: linear-gradient(90deg, var(--coin-soft), rgba(255,184,77,0.15));
  color: var(--coin);
  border: 1px solid rgba(232,111,26,0.25);
}

/* ── Coin Display ────────────────────────────────────────── */
.coin-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.coin-amount .val {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  background: var(--grad-coin);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.coin-amount .unit {
  font-size: 13px;
  color: var(--coin-l);
  font-weight: 500;
}

/* ── Progress Bar ────────────────────────────────────────── */
.progress-wrap {
  background: var(--line);
  border-radius: var(--r-pill);
  height: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  transition: width .6s var(--ease);
}

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--line);
  margin: 0 var(--px);
}

/* ── List Row ────────────────────────────────────────────── */
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--px);
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.list-row:last-child { border-bottom: none; }
.list-row:active { background: var(--bg-hover); }
.list-row .row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.list-row .row-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.list-row .row-text .label { font-size: 14px; font-weight: 500; }
.list-row .row-text .desc { font-size: 12px; color: var(--t2); margin-top: 2px; }
.list-row .row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--t3);
}
.list-row .chevron { opacity: .5; }

/* ── Loading Skeleton ────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg,
    var(--bg-raised) 25%,
    var(--skel-mid) 50%,
    var(--bg-raised) 75%);
  background-size: 200% 100%;
  animation: skel-shine 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes skel-shine {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes rise {
  from { opacity:0; transform: translateY(18px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 12px var(--brand-glow); }
  50%     { box-shadow: 0 0 28px var(--brand-glow), 0 0 60px var(--brand-soft); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

.rise-1 { animation: rise .5s var(--ease) both; }
.rise-2 { animation: rise .5s .08s var(--ease) both; }
.rise-3 { animation: rise .5s .16s var(--ease) both; }
.rise-4 { animation: rise .5s .24s var(--ease) both; }
.rise-5 { animation: rise .5s .32s var(--ease) both; }
.rise-6 { animation: rise .5s .40s var(--ease) both; }

/* ── Gradient Text ───────────────────────────────────────── */
.grad-text-brand {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-text-coin {
  background: var(--grad-coin);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 80px; left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--toast-bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 10px 20px;
  font-size: 13px;
  color: var(--t1);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: all .3s var(--ease);
  z-index: 9999;
  white-space: nowrap;
  box-shadow: var(--sh-md);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Scroll Fade ─────────────────────────────────────────── */
.h-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px var(--px) 8px;
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display:none; }

/* ── Switch ──────────────────────────────────────────────── */
.switch {
  width: 42px; height: 24px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  position: relative;
  transition: background .25s, border-color .25s;
  flex-shrink: 0;
  cursor: pointer;
}
.switch.on {
  background: var(--brand);
  border-color: var(--brand);
}
.switch::after {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px; left: 2px;
  transition: transform .25s var(--ease);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.switch.on::after { transform: translateX(18px); }

/* ── Quantity Stepper ────────────────────────────────────── */
.stepper {
  display: flex;
  align-items: center;
  background: var(--bg-raised);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.stepper button {
  width: 32px; height: 32px;
  font-size: 18px;
  color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.stepper button:active { background: var(--bg-hover); color: var(--brand); }
.stepper .qty {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--t1);
  width: 36px;
  text-align: center;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  height: 32px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Theme Toggle Button ─────────────────────────────────── */
.theme-toggle-btn {
  position: fixed;
  bottom: 92px;
  right: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--t2);
  cursor: pointer;
  z-index: 300;
  box-shadow: var(--sh-md);
  transition: all .22s var(--ease);
}
.theme-toggle-btn:hover {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: rgba(94,95,245,0.3);
  transform: scale(1.08);
}
.theme-toggle-btn svg { pointer-events: none; }