/* 天赋学院V9.2 · H5 客户端（设计令牌沿用原型 V2） */
:root{--deep:#0E2E44;--blue:#1668D6;--teal:#0FA3A3;--gold:#D9A527;--ink:#1B2B36;--dim:#6B8194;--line:#E3EAF1;--bg:#F2F5F8;
--grad:linear-gradient(135deg,#3D8BFF,#00D4B8);--ok:#0B8E7C;--warn:#B2761A;--err:#C1443B}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0}
body{font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;line-height:1.65;padding-bottom:64px}
.hidden{display:none!important}
.boot{padding:60px 0;text-align:center;color:var(--dim)}
/* 顶栏 */
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(150deg,#0B2438,#123A5A);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px}
.topbar .back{font-size:18px;cursor:pointer;padding:0 6px;color:#fff;text-decoration:none}
.topbar b{font-size:16px;letter-spacing:.02em}
.topbar .sub{font-size:10px;opacity:.7;letter-spacing:.18em}
/* 页面容器 */
.page{max-width:520px;margin:0 auto;padding:14px 14px 30px}
.hero{background:linear-gradient(150deg,#0B2438,#123A5A 55%,#17578F);color:#fff;padding:26px 18px 30px;position:relative;overflow:hidden}
.hero:after{content:'';position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,212,105,.22),transparent 70%)}
.hero .tag{display:inline-block;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);border-radius:20px;padding:3px 12px;font-size:10px;letter-spacing:.24em;color:#FFE9AE}
.hero h1{font-size:24px;margin:10px 0 4px}
.hero h1 em{font-style:normal;color:#FFD469}
.hero p{font-size:12px;color:rgba(255,255,255,.78)}
/* 卡片 */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 2px 10px rgba(14,46,68,.05)}
.card h3{font-size:14px;color:var(--deep);margin-bottom:8px;padding-left:9px;border-left:3px solid var(--blue)}
.card .row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line)}
.card .row:last-child{border-bottom:0}
.card .muted{color:var(--dim);font-size:12px}
.card .grow{flex:1}
.chip{display:inline-block;font-size:10.5px;padding:2px 9px;border-radius:7px;background:#F1F6FB;color:#3C6F9E;border:1px solid #E1EBF5;margin:2px 4px 2px 0}
.chip.gold{background:#FFF7E8;color:#8a6a10;border-color:#F0DFB4}
.chip.on{background:var(--grad);color:#fff;border-color:transparent}
.bar-wrap{background:#EEF3F8;border-radius:6px;height:8px;overflow:hidden;flex:1}
.bar-fill{height:100%;background:var(--grad);border-radius:6px}
/* 按钮 */
.btn{display:block;width:100%;border:0;border-radius:12px;padding:13px;font-size:15px;font-weight:700;color:#fff;background:var(--grad);cursor:pointer;box-shadow:0 6px 16px -8px rgba(22,104,214,.7)}
.btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid #BBD4F2;box-shadow:none}
.btn.warn{background:linear-gradient(135deg,#FF7A59,#FFB259)}
.btn.sm{width:auto;display:inline-block;padding:7px 14px;font-size:12.5px;border-radius:9px}
.btnline{display:flex;gap:8px;margin-top:10px}
.btnline .btn{flex:1}
/* 表单 */
input[type=text],input[type=password],input[type=number],select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
textarea{min-height:70px;resize:vertical}
label.f{display:block;font-size:12px;color:var(--dim);margin:10px 0 4px}
.checkline{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.checkline input{width:18px;height:18px;margin-top:2px;flex:0 0 18px}
/* 答题 */
.qhead{background:#fff;border-radius:14px;padding:14px;margin-bottom:12px;border:1px solid var(--line)}
.qprog{height:6px;background:#EEF3F8;border-radius:4px;overflow:hidden;margin-top:8px}
.qprog i{display:block;height:100%;background:var(--grad);transition:width .2s}
.qopt{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px;margin-bottom:9px;cursor:pointer;font-size:13.5px}
.qopt.on{border-color:var(--blue);background:#F2F8FF;box-shadow:0 0 0 3px rgba(61,139,255,.12)}
.qopt .pick{width:18px;height:18px;border-radius:50%;border:2px solid #C6D6E4;flex:0 0 18px;margin-top:2px;position:relative}
.qopt.on .pick{border-color:var(--blue)}
.qopt.on .pick:after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--grad)}
/* Tabbar */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-top:1px solid var(--line);display:flex}
.tabbar a{flex:1;text-align:center;padding:9px 0 8px;font-size:10.5px;color:var(--dim);text-decoration:none;position:relative}
.tabbar a .ico{font-size:19px;display:block;margin-bottom:1px}
.tabbar a.on{color:var(--blue);font-weight:700}
.tabbar .dot{position:absolute;top:5px;right:calc(50% - 20px);background:var(--err);color:#fff;font-size:9px;border-radius:8px;padding:0 5px;min-width:15px}
/* Toast / Modal */
.toast{position:fixed;top:16%;left:50%;transform:translateX(-50%);z-index:99;background:rgba(14,46,68,.92);color:#fff;padding:11px 20px;border-radius:12px;font-size:13px;max-width:82vw;text-align:center}
.modal-wrap{position:fixed;inset:0;z-index:50;background:rgba(10,25,40,.45);display:flex;align-items:flex-end;justify-content:center}
.modal{background:#fff;width:100%;max-width:520px;border-radius:18px 18px 0 0;padding:18px 16px 26px;max-height:80vh;overflow:auto}
/* 列表 */
.item{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:9px}
.item .ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;flex:0 0 40px}
.item .tt{font-size:14px;font-weight:600;color:var(--deep)}
.item .ds{font-size:11.5px;color:var(--dim)}
.item .arrow{color:#C0CDDB}
.kv{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0}
.kv b{font-weight:600}
.price{color:var(--gold);font-weight:800}
.price del{color:#B8C6D2;font-weight:400;font-size:11px;margin-left:5px}
.disclaim{font-size:10.5px;color:#8FA5B8;line-height:1.8;text-align:center;padding:14px 8px}
.notice{background:#FFFBF3;border:1px solid rgba(255,198,74,.4);border-radius:12px;padding:11px 13px;font-size:12px;color:#6B5A3A;margin-bottom:12px}
.alert{background:#FFF0EE;border:1px solid rgba(193,68,59,.3);border-radius:12px;padding:11px 13px;font-size:12px;color:#8C3A31;margin-bottom:12px}
.okbox{background:#E9FBF7;border:1px solid rgba(11,142,124,.3);border-radius:12px;padding:11px 13px;font-size:12px;color:#0B6E60;margin-bottom:12px}
.spark{width:100%;height:44px}
.kid .price,.kid .money{filter:blur(5px)}
.seg{display:flex;background:#EAF0F6;border-radius:10px;padding:3px;margin-bottom:12px}
.seg a{flex:1;text-align:center;padding:7px 0;font-size:12.5px;color:var(--dim);border-radius:8px;text-decoration:none}
.seg a.on{background:#fff;color:var(--blue);font-weight:700;box-shadow:0 1px 4px rgba(14,46,68,.12)}
.empty{padding:40px 20px;text-align:center;color:var(--dim)}
.empty .big{font-size:34px;margin-bottom:8px}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:16px;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{font-size:10.5px;color:#8FA5B8;line-height:1.7}
/* 三态规范：骨架屏（G4） */
.skel{border-radius:10px;background:linear-gradient(90deg,#EDF2F7 25%,#F7FAFC 37%,#EDF2F7 63%);background-size:400% 100%;animation:skel 1.2s ease infinite;height:14px;margin-bottom:10px}
.skel.tall{height:64px;border-radius:14px}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* 指纹/掌纹交替水印（11s 循环，M1-02：任一刻只显示一种） */
.wm{position:absolute;right:16px;top:18px;width:36px;height:40px;pointer-events:none}
.wm span{position:absolute;right:0;top:0;font-size:32px;opacity:.4;animation:wmfade 11s infinite}
.wm span:nth-child(2){animation-delay:5.5s}
@keyframes wmfade{0%,45%{opacity:.4}50%,95%{opacity:0}100%{opacity:.4}}
/* 品牌球体（P28：拖拽旋转 + 惯性 + 点击进企业卡） */
.sphere{position:relative;height:250px;overflow:hidden;border-radius:14px;background:linear-gradient(150deg,#0B2438,#17578F);cursor:grab;touch-action:none}
.sphere:active{cursor:grabbing}
.sphere .b{position:absolute;left:50%;top:50%;color:#fff;font-weight:700;white-space:nowrap;cursor:pointer;text-shadow:0 1px 6px rgba(0,0,0,.5);text-align:center}
.sphere .b small{display:block;font-weight:400;opacity:.7;font-size:9px}
.sphere .hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:10px;color:rgba(255,255,255,.55);pointer-events:none}