/* ==========================================================================
   teleTest · 设计系统 (base)
   深夜 / 暗紫酒红 / 霓虹暧昧
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}

:root{
  /* 底色 */
  --bg:#0A0710;
  --bg-2:#120B1A;
  --card:rgba(255,255,255,.045);
  --card-2:rgba(255,255,255,.07);
  --solid:#160F20;
  --solid-2:#1D1429;
  --border:rgba(255,255,255,.09);
  --border-hi:rgba(255,46,99,.42);

  /* 字色 */
  --text:#F4EDF8;
  --muted:#9A8DAD;
  --dim:#6E6280;

  /* 主题色 */
  --pink:#FF2E63;
  --magenta:#B02E7A;
  --purple:#7C3AED;
  --gold:#E8B667;
  --danger:#FF4D6D;
  --ok:#37D67A;

  --grad:linear-gradient(135deg,#FF2E63 0%,#B02E7A 48%,#6D28D9 100%);
  --grad-soft:linear-gradient(135deg,rgba(255,46,99,.18),rgba(124,58,237,.18));
  --grad-text:linear-gradient(100deg,#FF6B8F 0%,#FF2E63 30%,#C42B86 62%,#9B5CF6 100%);
  --glow:0 10px 34px rgba(255,46,99,.30);
  --glow-sm:0 4px 18px rgba(255,46,99,.22);

  --r:20px;
  --r-sm:14px;
  --r-xs:10px;

  --serif:"Source Serif 4","Playfair Display",Georgia,"Songti SC","Noto Serif SC",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;

  --topbar-h:52px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(760px 420px at 10% -6%,rgba(255,46,99,.20),transparent 62%),
    radial-gradient(700px 460px at 106% 4%,rgba(124,58,237,.22),transparent 62%),
    radial-gradient(620px 560px at 50% 112%,rgba(176,46,122,.16),transparent 60%);
  background-attachment:fixed;
  min-height:100vh;
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
}

/* 细颗粒噪点，压住渐变的塑料感 */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

/* ---------- 排版 ---------- */
.h-serif{font-family:var(--serif);font-weight:600;letter-spacing:.01em}
.grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.eyebrow{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);font-weight:600;
}

/* ---------- 布局 ---------- */
.wrap{width:100%;max-width:560px;margin:0 auto;padding:0 18px}
.stack>*+*{margin-top:14px}
.row{display:flex;align-items:center}
.row.gap{gap:10px}
.spacer{flex:1}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;height:var(--topbar-h);
  display:flex;align-items:center;gap:10px;
  padding:0 18px;
  background:linear-gradient(180deg,rgba(10,7,16,.92),rgba(10,7,16,.62) 70%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand__mark{
  width:26px;height:26px;border-radius:9px;flex:none;
  background:var(--grad);box-shadow:var(--glow-sm);
  display:grid;place-items:center;font-size:13px;
}
.brand__name{font-family:var(--serif);font-size:17px;font-weight:600;white-space:nowrap}
.brand__sub{font-size:9px;letter-spacing:.24em;color:var(--dim);margin-top:-3px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 20px;border-radius:var(--r-sm);
  font-size:15px;font-weight:600;letter-spacing:.01em;
  border:1px solid var(--border);background:var(--card-2);color:var(--text);
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s;
}
.btn:active{transform:scale(.975)}
.btn--primary{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:var(--glow);
}
.btn--ghost{background:rgba(255,255,255,.03);color:var(--muted)}
.btn--block{width:100%}
.btn--sm{min-height:38px;padding:0 14px;font-size:13px;border-radius:var(--r-xs)}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* ---------- 徽标 / 标签 ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  height:24px;padding:0 10px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted);
}
.chip--hot{background:rgba(255,46,99,.14);border-color:rgba(255,46,99,.3);color:#FF7D9C}
.chip--new{background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.32);color:#B79BFF}

/* ---------- 广告位 ---------- */
.adslot{position:relative;display:block;overflow:hidden;border-radius:var(--r-sm);border:1px solid var(--border)}
.adslot img{width:100%;aspect-ratio:4/1.35;object-fit:cover}
.adslot__fallback{
  aspect-ratio:4/1.35;display:grid;place-items:center;text-align:center;
  background:var(--grad-soft);color:var(--dim);font-size:11px;letter-spacing:.18em;
}
.adslot__tag{
  position:absolute;top:7px;right:7px;padding:1px 6px;border-radius:5px;
  font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.62);
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.12);
}

/* ---------- 分隔 ---------- */
.hr{height:1px;background:var(--border);border:0;margin:18px 0}
.sect-head{display:flex;align-items:baseline;gap:8px;margin:22px 0 12px}
.sect-head h2{font-family:var(--serif);font-size:17px;font-weight:600;margin:0}
.sect-head span{font-size:11px;color:var(--dim)}

/* ---------- 空态 ---------- */
.empty{padding:44px 20px;text-align:center;color:var(--dim)}
.empty__icon{font-size:30px;opacity:.5;margin-bottom:10px}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:calc(28px + var(--safe-b));transform:translate(-50%,14px);
  z-index:90;padding:10px 18px;border-radius:999px;
  background:rgba(24,16,34,.96);border:1px solid var(--border-hi);
  color:var(--text);font-size:13px;font-weight:500;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
  max-width:84vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 屏幕切换 ---------- */
.screen{display:none;padding-bottom:calc(40px + var(--safe-b))}
.screen.active{display:block;animation:screenIn .3s ease}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:0;height:0}