/* ══════════════════════════════════════════════
   臻运盛典 · 官网首页样式（基于入口模板）
   模块：全局令牌 / 通用组件 / 动效 / 版式 / Toast
   ══════════════════════════════════════════════ */

/* ────────── 1. 设计令牌（改这里换主题色） ────────── */
:root{
  --radius:.5rem;
  --font-display:"Songti SC","STSong","SimSun","Noto Serif SC",ui-serif,Georgia,serif;
  --font-sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",ui-sans-serif,system-ui,sans-serif;

  /* 暗金体系：近墨底 + 香槟金 */
  --ink:oklch(0.13 0.012 75);
  --ink-soft:oklch(0.18 0.014 75);
  --bg:oklch(0.11 0.01 70);
  --fg:oklch(0.93 0.015 85);
  --card:oklch(0.16 0.013 72);
  --primary:oklch(0.78 0.11 85);
  --primary-fg:oklch(0.16 0.02 70);
  --gold:oklch(0.78 0.11 85);
  --gold-bright:oklch(0.86 0.09 92);
  --gold-dim:oklch(0.6 0.06 82);
  --muted:oklch(0.68 0.02 80);
  --muted-dim:oklch(0.68 0.02 80 / 70%);
  --border-gold:oklch(0.78 0.11 85 / 16%);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:oklch(0.78 0.11 85 / 30%);color:var(--gold-bright)}
.icon{width:1em;height:1em;flex:none}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
@media(min-width:768px){.wrap{padding:0 2rem}}
.display{font-family:var(--font-display)}
.muted{color:var(--muted)}
.gold{color:var(--gold-bright)}
.gold-dim-c{color:var(--gold-dim)}
.hidden{display:none!important}

/* ────────── 2. 通用组件 ────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;font-weight:500;letter-spacing:.1em;transition:all .3s;user-select:none;border-radius:calc(var(--radius) - 4px)}
.btn:disabled{opacity:.55;pointer-events:none}
.btn-solid{background:linear-gradient(90deg,oklch(0.66 0.09 78),oklch(0.85 0.1 90),oklch(0.7 0.1 82));color:var(--primary-fg);box-shadow:0 10px 36px -12px oklch(0.78 0.11 85 / 60%)}
.btn-solid:hover{box-shadow:0 14px 44px -10px oklch(0.82 0.11 88 / 75%);filter:brightness(1.1)}
.btn-solid:active{transform:scale(.98)}
.btn-outline{border:1px solid oklch(0.78 0.11 85 / 45%);color:var(--gold-bright);background:transparent}
.btn-outline:hover{background:oklch(0.78 0.11 85 / 10%);border-color:oklch(0.78 0.11 85 / 80%)}
.btn-outline:active{transform:scale(.98)}
.btn-md{height:2.75rem;padding:0 1.75rem;font-size:.875rem}
.btn-lg{height:3.5rem;padding:0 2.5rem;font-size:1rem}
.btn-sm{height:2.25rem;padding:0 1rem;font-size:.75rem}
.btn-block{width:100%}

.input{position:relative}
.input input{height:2.75rem;width:100%;border-radius:calc(var(--radius) - 4px);border:1px solid oklch(0.78 0.11 85 / 20%);background:oklch(0.13 0.012 75 / 80%);padding-left:2.5rem;padding-right:.75rem;font-size:.875rem;letter-spacing:.05em;transition:border-color .2s}
.input input::placeholder{color:oklch(0.68 0.02 80 / 60%)}
.input input:focus{border-color:oklch(0.78 0.11 85 / 60%)}
.input>.icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--gold-dim);pointer-events:none}
.input .suffix{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);padding-left:.875rem;border-left:1px solid oklch(0.78 0.11 85 / 20%);font-size:.75rem;letter-spacing:.05em;color:var(--gold-bright);white-space:nowrap}
.input .suffix:hover{color:var(--gold)}
.input .suffix.dim{color:oklch(0.68 0.02 80 / 50%);pointer-events:none}
.input.pw{padding-right:2.5rem}

.card{border:1px solid oklch(0.78 0.11 85 / 12%);background:oklch(0.16 0.013 72 / 60%);border-radius:calc(var(--radius) - 4px);backdrop-filter:blur(4px)}
.chip{display:inline-flex;align-items:center;gap:.625rem;border:1px solid oklch(0.78 0.11 85 / 30%);background:oklch(0.78 0.11 85 / 8%);border-radius:9999px;padding:.375rem 1rem;backdrop-filter:blur(4px)}
.tag{border:1px solid oklch(0.78 0.11 85 / 40%);background:oklch(0.78 0.11 85 / 15%);padding:1px .375rem;font-size:.625rem;letter-spacing:.1em;color:var(--gold-bright);border-radius:2px}
.ico-box{display:flex;align-items:center;justify-content:center;border:1px solid oklch(0.78 0.11 85 / 30%);background:oklch(0.78 0.11 85 / 8%);border-radius:calc(var(--radius) - 4px);color:var(--gold-bright);transition:background .25s}
.hairline{height:1px;background:linear-gradient(to right,transparent,oklch(0.78 0.11 85 / 55%),transparent)}
.section{padding:6rem 0}
@media(max-width:767px){.section{padding:3.75rem 0}}
.eyebrow{font-size:.75rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-dim)}
.h2{font-family:var(--font-display);font-size:1.875rem;letter-spacing:.06em;margin-top:1rem;line-height:1.25}
@media(min-width:768px){.h2{font-size:3rem}}
.lede{margin-top:1.5rem;line-height:1.75;letter-spacing:.05em;color:var(--muted)}

/* ────────── 3. 动效 ────────── */
@keyframes glow-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ping-soft{0%{transform:scale(1);opacity:.8}75%,100%{transform:scale(2.4);opacity:0}}
@keyframes ken-burns{0%,100%{transform:scale(1.06)}50%{transform:scale(1.14) translate3d(-1.2%,-1%,0)}}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.5}50%{transform:translate3d(6rem,3rem,0) scale(1.25);opacity:.9}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0) scale(1.1);opacity:.35}50%{transform:translate3d(-5rem,-2.5rem,0) scale(.9);opacity:.7}}
@keyframes fall{0%{transform:translateY(-10%);opacity:0}12%{opacity:.9}85%{opacity:.5}100%{transform:translateY(110vh) translateX(2rem);opacity:0}}
@keyframes shine-sweep{0%{background-position:-150% 0}55%,100%{background-position:250% 0}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes flip-pulse{0%,100%{box-shadow:0 0 0 0 oklch(0.78 0.11 85 / 0%);border-color:oklch(0.78 0.11 85 / 25%)}50%{box-shadow:0 0 18px -4px oklch(0.78 0.11 85 / 35%);border-color:oklch(0.78 0.11 85 / 55%)}}
@keyframes halo{0%,100%{box-shadow:0 0 0 0 oklch(0.78 0.11 85 / 30%),0 10px 30px -12px oklch(0.78 0.11 85 / 40%)}50%{box-shadow:0 0 0 8px oklch(0.78 0.11 85 / 0%),0 14px 36px -10px oklch(0.78 0.11 85 / 55%)}}
@keyframes drift-down{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(8px);opacity:.4}}
@keyframes toast-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

.glow-pulse{animation:glow-pulse 5s ease-in-out infinite}
.ping-soft{animation:ping-soft 1.8s cubic-bezier(0,0,.2,1) infinite}
.hero-kenburns{animation:ken-burns 26s ease-in-out infinite;will-change:transform}
.drift-a{animation:drift-a 18s ease-in-out infinite}
.drift-b{animation:drift-b 24s ease-in-out infinite}
.float-y{animation:float-y 7s ease-in-out infinite;will-change:transform}
.flip-pulse{animation:flip-pulse 2s ease-in-out infinite}
.cta-halo{animation:halo 2.8s ease-out infinite}
.drift-down{animation:drift-down 2.2s ease-in-out infinite}
.dust{position:absolute;top:0;width:3px;height:3px;border-radius:9999px;background:oklch(0.86 0.09 92 / 70%);box-shadow:0 0 6px oklch(0.82 0.1 88 / 60%);animation:fall linear infinite;pointer-events:none}
.shine{position:relative;display:inline-block}
.shine::after{content:attr(data-text);position:absolute;inset:0;background-image:linear-gradient(110deg,oklch(0.68 0.08 78) 0%,oklch(0.88 0.1 92) 45%,oklch(0.75 0.1 84) 100%);background-size:200% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine-sweep 6s ease-in-out infinite;pointer-events:none}
.lift{transition:transform .25s,border-color .25s,box-shadow .25s}
.lift:hover{transform:translateY(-4px);border-color:oklch(0.78 0.11 85 / 45%);box-shadow:0 18px 40px -18px oklch(0.78 0.11 85 / 25%)}
.ulink{position:relative}
.ulink::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:bottom right;transition:transform .3s}
.ulink:hover::after{transform:scaleX(1);transform-origin:bottom left}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.left{transform:translateX(28px)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .glow-pulse,.ping-soft,.drift-down,.hero-kenburns,.drift-a,.drift-b,.dust,.shine::after,.float-y,.flip-pulse,.cta-halo{animation:none}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ────────── 4. 版式 ────────── */
#header{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
#header.solid{background:oklch(0.11 0.01 70 / 85%);backdrop-filter:blur(12px);border-bottom-color:var(--border-gold)}
.nav{display:flex;align-items:center;justify-content:space-between;height:4.5rem}
.brand{display:flex;align-items:center;gap:.625rem;font-family:var(--font-display);font-size:1.125rem;letter-spacing:.3em;color:var(--gold-bright)}
.brand .ico-box{width:2rem;height:2rem;border-color:oklch(0.78 0.11 85 / 40%);background:oklch(0.78 0.11 85 / 10%)}
.links{display:none;gap:2rem}
@media(min-width:1024px){.links{display:flex}}
.links a{font-size:.875rem;letter-spacing:.1em;color:var(--muted);transition:color .2s}
.links a:hover{color:var(--gold-bright)}
.head-actions{display:none;align-items:center;gap:1rem}
@media(min-width:1024px){.head-actions{display:flex}}
.burger{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid oklch(0.78 0.11 85 / 25%);border-radius:calc(var(--radius) - 4px);color:var(--gold-bright)}
@media(min-width:1024px){.burger{display:none}}
#mobile-nav{display:none;border-top:1px solid var(--border-gold);background:oklch(0.11 0.01 70 / 96%);backdrop-filter:blur(12px);padding:1rem 1.25rem 1.5rem}
#mobile-nav.open{display:block}
#mobile-nav a{display:block;padding:.75rem 0;font-size:.875rem;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid oklch(0.78 0.11 85 / 8%)}
#mobile-nav .row{display:grid;grid-template-columns:1fr;gap:.75rem;margin-top:1rem}

#hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
#hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
#hero .veil{position:absolute;inset:0;background:linear-gradient(to bottom,oklch(0.11 0.01 70 / 55%),oklch(0.11 0.01 70 / 35%),var(--bg))}
#hero .blob{position:absolute;border-radius:9999px;pointer-events:none}
#hero .inner{position:relative;width:100%;max-width:72rem;margin:0 auto;padding:9rem 1.25rem 6rem}
@media(min-width:768px){#hero .inner{padding:10rem 2rem 6rem}}
#hero h1{font-family:var(--font-display);font-size:3rem;line-height:1.15;letter-spacing:.08em;margin-top:2rem}
@media(min-width:768px){#hero h1{font-size:4.5rem}}
@media(min-width:1024px){#hero h1{font-size:6rem}}
#hero .sub{margin-top:1.75rem;max-width:36rem;font-size:1rem;line-height:1.75;letter-spacing:.05em;color:var(--muted)}
@media(min-width:768px){#hero .sub{font-size:1.125rem}}
.cta-row{margin-top:2.75rem;display:flex;flex-wrap:wrap;gap:1rem}
.fineprint{margin-top:1.5rem;font-size:.75rem;letter-spacing:.1em;color:var(--muted-dim)}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:oklch(0.78 0.11 85 / 60%);display:none}
@media(min-width:768px){.scroll-hint{display:block}}

.cd{margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.25rem .75rem}
.cd-label{padding-bottom:1rem;font-size:.75rem;letter-spacing:.3em;color:var(--gold-dim)}
.cd-cells{display:flex;align-items:flex-end;gap:.625rem}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:.375rem}
.cd-num{display:flex;align-items:center;justify-content:center;height:2.75rem;min-width:2.75rem;padding:0 .5rem;border:1px solid oklch(0.78 0.11 85 / 25%);border-radius:calc(var(--radius) - 4px);background:oklch(0.13 0.012 75 / 70%);font-family:var(--font-display);font-size:1.25rem;font-variant-numeric:tabular-nums;letter-spacing:.05em;color:var(--gold-bright)}
@media(min-width:768px){.cd-num{height:3rem;font-size:1.5rem}}
.cd-unit{font-size:.625rem;letter-spacing:.2em;color:var(--muted)}
.cd-sep{padding-bottom:1.5rem;font-family:var(--font-display);font-size:1.125rem;color:var(--gold-dim)}

.grid4{margin-top:3.5rem;display:grid;gap:1.25rem}
@media(min-width:640px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid4{grid-template-columns:repeat(4,1fr)}}
.grid4 article{padding:1.75rem}
.grid4 .ico-box{width:2.75rem;height:2.75rem}
.grid4 article:hover .ico-box{background:oklch(0.78 0.11 85 / 18%)}
.grid4 h3{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.05em;margin-top:1.5rem}
.grid4 p{margin-top:.75rem;font-size:.875rem;line-height:1.7;color:var(--muted)}

#prizes{border-top:1px solid oklch(0.78 0.11 85 / 10%);border-bottom:1px solid oklch(0.78 0.11 85 / 10%);background:oklch(0.13 0.012 75 / 60%)}
.prize-grid{display:grid;gap:3.5rem;align-items:center}
@media(min-width:1024px){.prize-grid{grid-template-columns:1.05fr 1fr;gap:3.5rem}}
.prize-media{position:relative;margin-top:2.5rem}
@media(min-width:1024px){.prize-media{margin-top:0;order:1}}
.prize-list-wrap{order:-1}
@media(min-width:1024px){.prize-list-wrap{order:2}}
.prize-img{position:relative;width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid oklch(0.78 0.11 85 / 15%);border-radius:calc(var(--radius) - 4px);box-shadow:0 30px 80px -30px oklch(0.78 0.11 85 / 30%);background:var(--card)}
.prize-badge{position:absolute;bottom:1.25rem;left:1.25rem;border:1px solid oklch(0.78 0.11 85 / 30%);background:oklch(0.11 0.01 70 / 80%);backdrop-filter:blur(12px);padding:.5rem 1rem;border-radius:calc(var(--radius) - 4px)}
.prize-badge span{display:block;font-size:.6875rem;letter-spacing:.3em;color:var(--gold-dim)}
.prize-badge strong{display:block;margin-top:.125rem;font-family:var(--font-display);font-size:1.125rem;font-weight:400;letter-spacing:.05em;color:var(--gold-bright)}
.tiers{margin-top:2.5rem;display:grid;gap:1rem}
.tier{display:flex;align-items:center;gap:1.25rem;padding:1.25rem 1.5rem}
.tier .ico-box{width:3rem;height:3rem;border-color:oklch(0.78 0.11 85 / 25%);flex:none}
.tier-head{display:flex;align-items:center;gap:.625rem}
.tier-head em{font-style:normal;font-size:.6875rem;letter-spacing:.28em;color:var(--gold-dim)}
.tier h4{margin-top:.25rem;font-family:var(--font-display);font-size:1rem;line-height:1.4;letter-spacing:.05em;font-weight:400}
@media(min-width:768px){.tier h4{font-size:1.125rem}}
.tier p{margin-top:.125rem;font-size:.75rem;color:var(--muted)}
.disclaim{margin-top:1.5rem;font-size:.75rem;line-height:1.7;letter-spacing:.05em;color:var(--muted-dim)}

.steps{margin-top:3.5rem;display:grid;gap:2.5rem;text-align:center}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.steps .ico-box{width:4rem;height:4rem;border-radius:9999px;margin:0 auto}
.step-no{margin-top:1.25rem;font-family:var(--font-display);font-size:.875rem;letter-spacing:.4em;color:var(--gold-dim)}
.steps h3{margin-top:.5rem;font-family:var(--font-display);font-size:1.25rem;letter-spacing:.05em;font-weight:400}
.steps p{margin:.75rem auto 0;max-width:20rem;font-size:.875rem;line-height:1.7;color:var(--muted)}
.center{text-align:center}

.contact-card{padding:2rem}
@media(min-width:768px){.contact-card{padding:3rem}}
.contact-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}
.contact-items{margin-top:2rem;display:grid;gap:1.5rem}
@media(min-width:768px){.contact-items{grid-template-columns:repeat(3,1fr)}}
.contact-items li{display:flex;align-items:flex-start;gap:1rem}
.contact-items .ico-box{width:2.75rem;height:2.75rem;border-color:oklch(0.78 0.11 85 / 25%);flex:none}
.contact-items li:hover .ico-box{background:oklch(0.78 0.11 85 / 18%)}
.c-label{font-size:.6875rem;letter-spacing:.25em;color:var(--gold-dim)}
.c-value{margin-top:.375rem;font-size:.875rem;font-weight:500;letter-spacing:.05em;word-break:break-word}
@media(min-width:768px){.c-value{font-size:1rem}}
.c-hint{margin-top:.25rem;font-size:.75rem;line-height:1.7;color:var(--muted)}
.copy-btn{margin-top:.5rem;display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;letter-spacing:.05em;color:var(--gold-bright)}
.copy-btn:hover{color:var(--gold)}

.faq{margin-top:3rem;display:grid;gap:.75rem}
.faq-item{border:1px solid oklch(0.78 0.11 85 / 12%);background:oklch(0.16 0.013 72 / 60%);border-radius:calc(var(--radius) - 4px);padding:0 1.5rem}
.faq-item.open{border-color:oklch(0.78 0.11 85 / 30%)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:1.25rem 0;text-align:left;font-family:var(--font-display);font-size:1rem;letter-spacing:.05em}
.faq-q:hover{color:var(--gold-bright)}
.faq-q .icon{color:var(--gold-dim);transition:transform .3s}
.faq-item.open .faq-q .icon{transform:rotate(180deg)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-item.open .faq-body{grid-template-rows:1fr}
.faq-body>div{overflow:hidden}
.faq-body p{padding:0 0 1.25rem;font-size:.875rem;line-height:1.7;color:var(--muted)}

footer{border-top:1px solid oklch(0.78 0.11 85 / 12%);background:var(--ink);padding:3.5rem 0}
.foot-top{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:2.5rem}
@media(min-width:768px){.foot-top{flex-direction:row;align-items:flex-end}}
.foot-nav{display:flex;flex-wrap:wrap;gap:.75rem 2rem;font-size:.875rem}
.foot-nav a{letter-spacing:.05em;color:var(--muted);transition:color .2s}
.foot-nav a:hover{color:var(--gold-bright)}
.copyright{margin-top:3rem;font-size:.75rem;letter-spacing:.1em;color:var(--muted-dim)}
@media(min-width:768px){.copyright{text-align:left}}

/* ────────── 5. 弹窗 / Toast ────────── */
.mask{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:oklch(0.08 0.008 70 / 72%);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.mask.show{opacity:1}
.modal{width:100%;max-width:28rem;max-height:90vh;overflow-y:auto;border:1px solid oklch(0.78 0.11 85 / 20%);background:oklch(0.14 0.012 72);border-radius:var(--radius);padding:1.5rem;position:relative;transform:translateY(16px) scale(.98);transition:transform .25s}
.mask.show .modal{transform:none}
@media(min-width:640px){.modal{padding:1.75rem}}
.modal-close{position:absolute;right:1rem;top:1rem;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;color:var(--muted);border-radius:calc(var(--radius) - 4px)}
.modal-close:hover{color:var(--fg);background:oklch(0.78 0.11 85 / 10%)}
.modal h2{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.2em;color:var(--gold-bright)}
.modal .desc{margin-top:.375rem;letter-spacing:.05em;font-size:.875rem;color:var(--muted)}
.form{margin-top:1.5rem;display:grid;gap:.875rem}
.notice{border-radius:calc(var(--radius) - 4px);padding:.625rem .875rem;font-size:.75rem;line-height:1.7;letter-spacing:.05em}
.notice.ok{border:1px solid oklch(0.78 0.11 85 / 20%);background:oklch(0.78 0.11 85 / 8%);color:var(--gold-bright);display:flex;align-items:center;gap:.5rem}
.notice.warn{border:1px solid oklch(0.78 0.11 85 / 15%);background:oklch(0.13 0.012 75 / 70%);color:var(--muted)}
.btn-row{display:grid;gap:.75rem;margin-top:.25rem}
@media(min-width:400px){.btn-row.two-col{grid-template-columns:5.75rem 1fr}}
@media(min-width:400px){.btn-row.equal{grid-template-columns:1fr 1fr}}

.pick{width:100%;text-align:left;border-radius:var(--radius);padding:1.25rem;transition:all .3s}
.pick.vip{border:1px solid oklch(0.78 0.11 85 / 35%);background:oklch(0.78 0.11 85 / 8%)}
.pick.vip:hover{border-color:oklch(0.78 0.11 85 / 70%);background:oklch(0.78 0.11 85 / 12%);box-shadow:0 10px 36px -14px oklch(0.78 0.11 85 / 55%)}
.pick.plain{border:1px solid oklch(0.78 0.11 85 / 15%);background:oklch(0.13 0.012 75 / 60%)}
.pick.plain:hover{border-color:oklch(0.78 0.11 85 / 40%);background:var(--ink)}
.pick-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.375rem .75rem}
.pick-title{display:flex;flex-shrink:0;align-items:center;gap:.625rem;font-family:var(--font-display);font-size:1.125rem;letter-spacing:.1em}
.pill{flex-shrink:0;white-space:nowrap;border-radius:9999px;padding:.125rem .625rem;font-size:.625rem;letter-spacing:.1em}
.pill.on{border:1px solid oklch(0.78 0.11 85 / 40%);color:var(--gold-bright)}
.pill.off{border:1px solid oklch(0.78 0.11 85 / 15%);color:var(--muted)}
.pick p{margin-top:.625rem;font-size:.75rem;line-height:1.7;color:var(--muted)}

.stepbar{display:flex;align-items:center;margin-top:1.25rem}
.step-dot{display:flex;flex-direction:column;align-items:center;gap:.375rem}
.step-dot i{font-style:normal;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:9999px;font-size:.75rem;font-weight:500;transition:all .3s;white-space:nowrap}
.step-dot b{font-weight:400;white-space:nowrap;font-size:.75rem;letter-spacing:.2em;color:oklch(0.68 0.02 80 / 70%)}
.step-dot.todo i{border:1px solid oklch(0.78 0.11 85 / 20%);color:oklch(0.68 0.02 80 / 60%)}
.step-dot.active i{background:linear-gradient(135deg,oklch(0.85 0.1 90),oklch(0.66 0.09 78));color:var(--primary-fg);box-shadow:0 4px 16px -4px oklch(0.78 0.11 85 / 70%)}
.step-dot.active b{color:var(--gold-bright)}
.step-dot.done i{border:1px solid oklch(0.78 0.11 85 / 50%);background:oklch(0.78 0.11 85 / 15%);color:var(--gold-bright)}
.step-line{flex:1;margin:0 .75rem 1.25rem;height:1px;background:oklch(0.78 0.11 85 / 15%);transition:background .5s}
.step-line.on{background:oklch(0.78 0.11 85 / 50%)}

.genid{border:1px solid oklch(0.78 0.11 85 / 25%);background:oklch(0.13 0.012 75 / 70%);border-radius:var(--radius);padding:.875rem}
.genid small{font-size:.625rem;letter-spacing:.25em;color:var(--muted)}
.genid .row{margin-top:.375rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.genid strong{font-family:var(--font-display);font-size:1.25rem;font-weight:400;letter-spacing:.18em;color:var(--gold-bright)}
.genid button{flex:none;border:1px solid oklch(0.78 0.11 85 / 30%);padding:.25rem .625rem;font-size:.6875rem;letter-spacing:.05em;color:var(--gold-bright);border-radius:2px}
.genid button:hover{background:oklch(0.78 0.11 85 / 15%)}
.genid .tip{margin-top:.375rem;font-size:.6875rem;line-height:1.7;color:oklch(0.68 0.02 80 / 80%)}

#toaster{position:fixed;top:1rem;left:0;right:0;z-index:200;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.625rem;max-width:24rem;border:1px solid oklch(0.78 0.11 85 / 25%);background:oklch(0.15 0.012 72 / 95%);backdrop-filter:blur(12px);border-radius:var(--radius);padding:.75rem 1rem;box-shadow:0 18px 40px -18px oklch(0 0 0 / 70%);animation:toast-in .25s ease}
.toast.out{opacity:0;transform:translateY(-12px);transition:all .3s}
.toast .icon{margin-top:2px}
.toast.ok .icon{color:var(--gold-bright)}
.toast.err .icon{color:oklch(0.62 0.2 25)}
.toast.info .icon{color:var(--gold)}
.toast b{display:block;font-weight:500;font-size:.875rem;letter-spacing:.05em}
.toast span{display:block;margin-top:.125rem;font-size:.75rem;line-height:1.6;color:var(--muted)}

/* ────────── 6. 登录页视图 ────────── */
#view-login{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:3.5rem 1.25rem}
#view-login .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
#view-login .veil{position:absolute;inset:0;background:linear-gradient(to bottom,oklch(0.11 0.01 70 / 75%),oklch(0.11 0.01 70 / 60%),var(--bg))}
.back-home{position:absolute;left:1.25rem;top:1.25rem;z-index:10;display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;letter-spacing:.1em;color:var(--muted)}
@media(min-width:768px){.back-home{left:2rem;top:2rem}}
.back-home:hover{color:var(--gold-bright)}
.login-card{position:relative;width:100%;max-width:28rem}
.login-brand{text-align:center;margin-bottom:2.25rem}
.login-brand .ico-box{width:3rem;height:3rem;margin:0 auto;border-color:oklch(0.78 0.11 85 / 40%);background:oklch(0.78 0.11 85 / 10%)}
.login-brand h1{margin-top:1.25rem;font-family:var(--font-display);font-size:1.875rem;letter-spacing:.2em;color:var(--gold-bright)}
.login-brand p{margin-top:.625rem;font-size:.75rem;letter-spacing:.3em;color:var(--gold-dim)}
.login-form{border:1px solid oklch(0.78 0.11 85 / 20%);background:oklch(0.16 0.013 72 / 80%);backdrop-filter:blur(12px);border-radius:var(--radius);padding:1.75rem}
@media(min-width:768px){.login-form{padding:2.25rem}}
.login-form h2{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.05em;font-weight:400}
.login-form .sub{margin-top:.375rem;font-size:.75rem;line-height:1.7;color:var(--muted)}
.login-meta{margin-top:1rem;display:flex;align-items:center;justify-content:space-between;font-size:.75rem;letter-spacing:.05em;color:var(--muted)}
.demo-note{margin-top:1.25rem;display:flex;align-items:flex-start;gap:.375rem;font-size:.6875rem;line-height:1.7;color:oklch(0.68 0.02 80 / 70%)}
.demo-note .icon{margin-top:1px;flex:none;color:var(--gold-dim)}