@charset "UTF-8";
/**
 * 笨小孩信息管理系统 —— bxh-landing.css
 * 职责：落地页 / 品牌卡片 / 登录模态框 / 改密模态框
 * 来源：app.html（4338 行单体版）第 8-218 行，按源码行序剪切，禁止重排规则
 */
*{box-sizing:border-box;margin:0;padding:0}
:root{--p:#6366f1;--p2:#4f46e5;--pl:#eef2ff;--s:#059669;--d:#dc2626;--w:#d97706;--bg:#f1f5f9;--bd:#e2e8f0;--t:#0f172a;--t2:#475569;--t3:#94a3b8;--r:12px;--card:#ffffff;--sidebar:#0f172a;--accent:#6366f1}
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;background:#e0e7ff;min-height:100vh;color:var(--t)}
a{text-decoration:none;color:inherit}
.app{display:flex;min-height:100vh}

/* ── LANDING PAGE ── */
.lg{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;position:relative;overflow:hidden;background:#0b0f1a}

/* 动态网格背景 */
.lg-grid{position:absolute;inset:0;z-index:0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(99,102,241,.08) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(37,99,235,.06) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(139,92,246,.06) 0%, transparent 50%);
  background-size:120% 120%;
  animation:gridDrift 20s ease-in-out infinite alternate;
}
@keyframes gridDrift{0%{background-position:0% 0%}100%{background-position:100% 100%}}

/* 鼠标跟随光晕 */
.lg-mouse-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.08) 0%,transparent 70%);pointer-events:none;z-index:1;transform:translate(-50%,-50%);transition:opacity .3s;opacity:0}
.lg-mouse-glow.show{opacity:1}

/* 动态渐变光晕 */
.lg::before{content:'';position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%);top:-150px;right:-120px;animation:lgGlow 12s ease-in-out infinite alternate;z-index:1}
.lg::after{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(37,99,235,.1) 0%,transparent 70%);bottom:-100px;left:-100px;animation:lgGlow 15s ease-in-out infinite alternate-reverse;z-index:1}
@keyframes lgGlow{0%{transform:translate(0,0) scale(1) rotate(0deg)}100%{transform:translate(40px,-30px) scale(1.1) rotate(3deg)}}

/* 浮动粒子 */
.lg-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.lg-particle{position:absolute;border-radius:50%}

/* Landing 居中内容 */
.landing-center{position:relative;z-index:2;text-align:center;animation:landingIn .8s cubic-bezier(.16,1,.3,1) both}
@keyframes landingIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Logo - 极简专业风 */
.landing-logo{display:inline-flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#fff;letter-spacing:-.5px;font-family:'SF Pro Display','PingFang SC','Helvetica Neue',sans-serif;width:88px;height:88px;border-radius:24px;background:#0f172a;border:1.5px solid rgba(99,102,241,.3);box-shadow:0 4px 24px rgba(0,0,0,.25);transition:border-color .3s,box-shadow .3s;user-select:none;position:relative;overflow:hidden;margin-bottom:18px}
.landing-logo::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(99,102,241,.08) 0%,transparent 100%);pointer-events:none}
.landing-logo:hover{border-color:rgba(99,102,241,.6);box-shadow:0 4px 32px rgba(99,102,241,.2)}
.landing-title{font-size:32px;font-weight:800;letter-spacing:-.8px;margin-bottom:8px;background:linear-gradient(135deg,#fff 0%,#c7d2fe 50%,#a5b4fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.landing-sub{font-size:12px;color:rgba(255,255,255,.25);letter-spacing:2.5px;text-transform:uppercase;font-weight:400;margin-bottom:0}
.landing-ver{display:inline-block;font-size:10px;color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);padding:3px 10px;border-radius:20px;letter-spacing:.5px;margin-top:14px}

/* 标题渐变文字 */
.landing-title{font-size:32px;font-weight:800;letter-spacing:-.8px;margin-bottom:8px;background:linear-gradient(135deg,#fff 0%,#c7d2fe 50%,#a5b4fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fi .8s .15s cubic-bezier(.16,1,.3,1) both}
/* 英文副标题 */
.landing-sub{font-size:13px;color:rgba(255,255,255,.3);letter-spacing:2px;text-transform:uppercase;font-weight:400;animation:fi .8s .3s cubic-bezier(.16,1,.3,1) both}
/* 版本角标 */
.landing-ver{display:inline-block;font-size:10px;color:rgba(255,255,255,.25);background:rgba(255,255,255,.06);padding:3px 10px;border-radius:20px;letter-spacing:.5px;margin-top:16px;animation:fi .8s .45s cubic-bezier(.16,1,.3,1) both}

/* 隐蔽登录入口 - 右下角，呼吸灯 */
.landing-login-trigger{position:absolute;bottom:24px;right:24px;z-index:3;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);color:rgba(255,255,255,.2);font-size:15px;animation:triggerPulse 4s ease-in-out infinite;backdrop-filter:blur(4px)}
@keyframes triggerPulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}50%{box-shadow:0 0 12px 2px rgba(99,102,241,.12)}}
.landing-login-trigger:hover{background:rgba(255,255,255,.1);border-color:rgba(99,102,241,.25);color:rgba(255,255,255,.7);transform:scale(1.08);animation:none;box-shadow:0 0 20px rgba(99,102,241,.15)}
.landing-login-trigger:active{transform:scale(.96);animation:none}

/* 登录模态框 */
.login-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);z-index:1000;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}
.login-overlay.on{display:flex;opacity:1}
.login-overlay.on .lb{animation:modalIn .35s cubic-bezier(.16,1,.3,1) both}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* 登录卡片 */
.lb{position:relative;z-index:2;background:rgba(255,255,255,.97);backdrop-filter:blur(24px);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06);padding:40px 36px 36px;width:100%;max-width:400px}
.lb h1{font-size:20px;font-weight:700;text-align:center;margin-bottom:3px;color:var(--t);letter-spacing:-.3px}
.lb .l-sub{text-align:center;color:var(--t3);font-size:12px;margin-bottom:26px}
.f{margin-bottom:14px;position:relative}
.f label{display:block;font-size:11.5px;font-weight:600;color:var(--t2);margin-bottom:6px;letter-spacing:.2px}
.f input{width:100%;padding:11px 14px;border:1.5px solid var(--bd);border-radius:10px;font-size:14px;outline:none;transition:all .2s;background:var(--card);color:var(--t)}
.f input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.f input::placeholder{color:var(--t3)}
.bl{width:100%;padding:12px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border:none;border-radius:10px;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .25s;margin-top:6px;box-shadow:0 4px 16px rgba(99,102,241,.3);position:relative;overflow:hidden}
.bl::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);opacity:0;transition:opacity .25s}
.bl:hover{box-shadow:0 6px 28px rgba(37,99,235,.4);transform:translateY(-1px)}
.bl:hover::after{opacity:1}
.bl:active{transform:translateY(0) scale(.985)}
.bl:disabled{opacity:.65;cursor:not-allowed;transform:none}
.l-copy{text-align:center;font-size:10px;color:rgba(255,255,255,.18);position:absolute;bottom:14px;left:0;right:0;z-index:2}
.lerr{color:var(--d);font-size:12px;text-align:center;margin-top:8px;display:none;animation:lerrShake .4s ease}
@keyframes lerrShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
/* 登录卡片底部返回链接 */
.lb-back{text-align:center;margin-top:14px;font-size:12px;color:var(--t3);cursor:pointer;transition:color .2s}
.lb-back:hover{color:var(--p)}
/* Change Password Modal */
.cpw-wrap{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:2001;display:none;align-items:center;justify-content:center}
.cpw-wrap.on{display:flex}
.cpw-box{background:var(--card);border-radius:16px;padding:32px 28px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.15);animation:mi .25s cubic-bezier(.16,1,.3,1)}
.cpw-box h3{font-size:17px;font-weight:700;margin-bottom:4px}
.cpw-box>p{font-size:12px;color:var(--t3);margin-bottom:18px}
.cpw-f{margin-bottom:12px}
.cpw-f label{display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:5px}
.cpw-f input{width:100%;padding:10px 14px;border:1.5px solid var(--bd);border-radius:10px;font-size:14px;outline:none;transition:all .2s;background:var(--card)}
.cpw-f input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.cpw-btns{display:flex;gap:8px;margin-top:6px}
@keyframes fi{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════
   LANDING PAGE — 高大上版
   ════════════════════════════════════════ */
.lg{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:20px;padding-bottom:80px;position:relative;overflow-y:auto;background:#06080f}

/* Canvas 粒子网络层 */
.lg-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%}

/* 浮动渐变光球 */
.lg-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;opacity:.45;will-change:transform}
.lg-blob.b1{width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,.4),rgba(99,102,241,0));top:-200px;left:-100px;animation:blob1 18s ease-in-out infinite alternate}
.lg-blob.b2{width:500px;height:500px;background:radial-gradient(circle,rgba(37,99,235,.35),rgba(37,99,235,0));top:60%;right:-150px;animation:blob2 22s ease-in-out infinite alternate}
.lg-blob.b3{width:450px;height:450px;background:radial-gradient(circle,rgba(139,92,246,.3),rgba(139,92,246,0));bottom:-150px;left:30%;animation:blob3 20s ease-in-out infinite alternate-reverse}
.lg-blob.b4{width:350px;height:350px;background:radial-gradient(circle,rgba(6,182,212,.25),rgba(6,182,212,0));top:20%;left:60%;animation:blob4 25s ease-in-out infinite alternate}
@keyframes blob1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(80px,60px) scale(1.15)}}
@keyframes blob2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-60px,-80px) scale(1.1)}}
@keyframes blob3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,-50px) scale(1.2)}}
@keyframes blob4{0%{transform:translate(0,0) scale(1) rotate(0deg)}100%{transform:translate(-50px,40px) scale(1.08) rotate(15deg)}}

/* 毛玻璃内容卡片 — 品牌落地页版 */
.landing-glass{position:relative;z-index:2;text-align:center;animation:landingIn .9s cubic-bezier(.16,1,.3,1) both;background:rgba(255,255,255,.03);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border:1px solid rgba(255,255,255,.08);border-radius:32px;padding:40px 44px 36px;max-width:580px;width:100%;box-shadow:0 12px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06),0 0 120px rgba(99,102,241,.06)}
@media(max-width:640px){.landing-glass{padding:28px 22px 24px;margin:0 12px;border-radius:24px}}

/* Logo — 品牌标识 */
.landing-logo-wrap{display:inline-block;position:relative;margin-bottom:20px}
.landing-logo-ring{position:absolute;inset:-4px;border-radius:28px;background:conic-gradient(from 0deg,#f59e0b,#d97706,#fbbf24,#f59e0b);animation:ringRotate 4s linear infinite;z-index:0;opacity:.65;filter:blur(1.2px)}
@keyframes ringRotate{to{transform:rotate(360deg)}}
.landing-logo{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#fff;letter-spacing:-.5px;font-family:'SF Pro Display','PingFang SC','Helvetica Neue',sans-serif;width:80px;height:80px;border-radius:24px;background:linear-gradient(145deg,#0f172a 0%,#1e293b 100%);transition:transform .35s cubic-bezier(.4,0,.2,1);user-select:none;border:1px solid rgba(251,191,36,.15)}
.landing-logo-wrap:hover .landing-logo{transform:scale(1.06)}
.landing-logo-wrap:hover .landing-logo-ring{opacity:1;filter:blur(0)}

/* 品牌主标题 */
.landing-title{font-size:30px;font-weight:800;letter-spacing:2px;margin-bottom:6px;background:linear-gradient(135deg,#fff 0%,#fef3c7 35%,#fcd34d 70%,#fbbf24 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fi .8s .1s cubic-bezier(.16,1,.3,1) both;line-height:1.3;text-shadow:none}
@media(max-width:640px){.landing-title{font-size:24px}}

/* 品牌英文副标题 */
.landing-sub{font-size:13px;color:rgba(251,191,36,.55);letter-spacing:3px;text-transform:uppercase;font-weight:500;animation:fi .8s .25s cubic-bezier(.16,1,.3,1) both;min-height:22px;margin-top:2px;font-family:'SF Pro Display','PingFang SC',sans-serif}
.landing-sub .cursor{display:inline-block;width:2px;height:14px;background:rgba(251,191,36,.7);margin-left:2px;animation:curBlink .8s step-end infinite;vertical-align:text-bottom}
@keyframes curBlink{0%,100%{opacity:1}50%{opacity:0}}

/* 品牌分割线 */
.landing-divider{width:56px;height:2px;background:linear-gradient(90deg,transparent,rgba(251,191,36,.5),transparent);margin:20px auto 16px;border-radius:1px;animation:fi .8s .35s cubic-bezier(.16,1,.3,1) both}

/* 品牌描述文字 */
.landing-desc{font-size:14px;color:rgba(255,255,255,.4);line-height:1.75;max-width:420px;margin:0 auto;animation:fi .8s .45s cubic-bezier(.16,1,.3,1) both;font-weight:400}

/* 品牌标签 */
.landing-ver{display:inline-block;font-size:11px;color:rgba(251,191,36,.5);background:rgba(251,191,36,.06);padding:4px 16px;border-radius:20px;letter-spacing:2px;margin-top:18px;animation:fi .8s .55s cubic-bezier(.16,1,.3,1) both;border:1px solid rgba(251,191,36,.1);font-weight:500}

/* 探索好物 CTA 按钮 */
.landing-cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:12px 32px;background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(245,158,11,.08));border:1px solid rgba(251,191,36,.25);border-radius:14px;color:#fcd34d;font-size:14px;font-weight:600;letter-spacing:1px;cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);animation:fi .8s .65s cubic-bezier(.16,1,.3,1) both;user-select:none;text-decoration:none}
.landing-cta:hover{background:linear-gradient(135deg,rgba(251,191,36,.25),rgba(245,158,11,.15));border-color:rgba(251,191,36,.45);box-shadow:0 4px 24px rgba(251,191,36,.15),0 0 48px rgba(251,191,36,.06);transform:translateY(-2px);color:#fbbf24}
.landing-cta:active{transform:translateY(0) scale(.97)}
.landing-cta .cta-arrow{display:inline-block;transition:transform .3s}
.landing-cta:hover .cta-arrow{transform:translateX(4px)}

/* ══ 醒目的下滑看商品引导条 ══ */
.shop-scroll-bridge{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:32px 0 18px;animation:fi .8s .7s cubic-bezier(.16,1,.3,1) both}
.shop-scroll-bridge-line{width:1px;height:44px;background:linear-gradient(180deg,rgba(251,191,36,.35),transparent)}
.shop-scroll-bridge-text{font-size:11px;color:rgba(251,191,36,.45);letter-spacing:3px;margin-bottom:12px;font-weight:500}
.shop-scroll-bridge-arrow{width:24px;height:24px;border-right:2px solid rgba(251,191,36,.35);border-bottom:2px solid rgba(251,191,36,.35);transform:rotate(45deg);animation:scrollBounce 2s ease-in-out infinite}
@keyframes scrollBounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(6px)}}

/* 向下滚动提示 */
.landing-scroll-hint{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;animation:fi .8s .7s cubic-bezier(.16,1,.3,1) both;cursor:pointer}
.landing-scroll-hint span{font-size:10px;color:rgba(251,191,36,.3);letter-spacing:2px}
.landing-scroll-arrow{width:20px;height:20px;border-right:1.5px solid rgba(251,191,36,.25);border-bottom:1.5px solid rgba(251,191,36,.25);transform:rotate(45deg);animation:scrollBounce 2s ease-in-out infinite}
@keyframes scrollBounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(6px)}}

/* 隐蔽登录入口 - 右下角，呼吸灯 */
.landing-login-trigger{position:absolute;bottom:24px;right:24px;z-index:3;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);color:rgba(255,255,255,.2);font-size:16px;animation:triggerPulse 4s ease-in-out infinite;backdrop-filter:blur(6px)}
@keyframes triggerPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}50%{box-shadow:0 0 12px 2px rgba(251,191,36,.1)}}
.landing-login-trigger:hover{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.2);color:rgba(255,255,255,.7);transform:scale(1.1);animation:none;box-shadow:0 0 24px rgba(251,191,36,.15)}
.landing-login-trigger:active{transform:scale(.94);animation:none}

/* 登录模态框 */
.login-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:1000;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .35s ease}
.login-overlay.on{display:flex;opacity:1}
.login-overlay.on .lb{animation:modalIn .4s cubic-bezier(.16,1,.3,1) both}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* 登录卡片 */
.lb{position:relative;z-index:2;background:rgba(15,23,42,.92);backdrop-filter:blur(32px) saturate(1.4);-webkit-backdrop-filter:blur(32px) saturate(1.4);border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 32px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);padding:44px 40px 38px;width:100%;max-width:400px}
.lb h1{font-size:22px;font-weight:700;text-align:center;margin-bottom:4px;color:#fff;letter-spacing:-.3px}
.lb .l-sub{text-align:center;color:rgba(255,255,255,.35);font-size:12.5px;margin-bottom:28px}
.f{margin-bottom:16px;position:relative}
.f label{display:block;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.45);margin-bottom:7px;letter-spacing:.2px}
.f input{width:100%;padding:11px 14px;border:1.5px solid rgba(255,255,255,.1);border-radius:10px;font-size:14px;outline:none;transition:all .25s;background:rgba(255,255,255,.05);color:#fff;font-family:inherit}
.f input::placeholder{color:rgba(255,255,255,.2)}
.f input:focus{border-color:rgba(99,102,241,.6);box-shadow:0 0 0 3px rgba(99,102,241,.12);background:rgba(99,102,241,.06)}
.bl{width:100%;padding:12px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:10px;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .25s;margin-top:8px;box-shadow:0 4px 20px rgba(99,102,241,.35);position:relative;overflow:hidden;font-family:inherit;letter-spacing:.3px}
.bl::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 50%);opacity:0;transition:opacity .25s}
.bl:hover{box-shadow:0 6px 32px rgba(99,102,241,.45);transform:translateY(-1px)}
.bl:hover::after{opacity:1}
.bl:active{transform:translateY(0) scale(.985)}
.bl:disabled{opacity:.55;cursor:not-allowed;transform:none}
.l-copy{text-align:center;font-size:10px;color:rgba(255,255,255,.15);position:absolute;bottom:14px;left:0;right:0;z-index:2}
.lerr{color:#f87171;font-size:12px;text-align:center;margin-top:8px;display:none;animation:lerrShake .4s ease}
@keyframes lerrShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.lb-back{text-align:center;margin-top:16px;font-size:12px;color:rgba(255,255,255,.3);cursor:pointer;transition:color .2s}
.lb-back:hover{color:rgba(165,180,252,.8)}
/* Change Password Modal */
.cpw-wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2001;display:none;align-items:center;justify-content:center}
.cpw-wrap.on{display:flex}
.cpw-box{background:rgba(15,23,42,.95);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:36px 32px;width:100%;max-width:400px;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.cpw-box h3{font-size:17px;font-weight:700;margin-bottom:4px;color:#fff}
.cpw-box>p{font-size:12px;color:rgba(255,255,255,.35);margin-bottom:20px}
.cpw-f{margin-bottom:14px}
.cpw-f label{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.45);margin-bottom:6px}
.cpw-f input{width:100%;padding:10px 14px;border:1.5px solid rgba(255,255,255,.1);border-radius:10px;font-size:14px;outline:none;transition:all .2s;background:rgba(255,255,255,.05);color:#fff;font-family:inherit}
.cpw-f input:focus{border-color:rgba(99,102,241,.5);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.cpw-btns{display:flex;gap:10px;margin-top:8px}
@keyframes fi{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}