:root{
  --bg:#080d1f;--bg2:#101731;--bg3:#0c1226;
  --line:#1d2842;--text:#E8ECF7;--sub:#8A93B8;
  --blue:#4FA8FF;--blue-d:#2F7BFF;
  --green:#2ED47A;--red:#FF5B5B;--purple:#A78BFA;
  --amber:#FFB84D;--cyan:#5EE9E9;--pink:#FF7EB6;
  --r:16px;--rs:12px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.5;overflow-x:hidden;}
#starsBg{position:fixed;inset:0;z-index:0;pointer-events:none;}
.app{position:relative;z-index:1;max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:rgba(8,13,31,.55);}
.navbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(8,13,31,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.navbar h1{font-size:16px;margin:0;font-weight:700;flex:1;}
.back-btn{background:none;border:none;color:var(--blue);font-size:22px;cursor:pointer;padding:0 6px;}
.view{flex:1;padding:14px 16px 96px;}
.hidden{display:none!important;}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:560px;margin:0 auto;display:flex;background:rgba(16,23,49,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);}
.tabbar button{flex:1;background:none;border:none;cursor:pointer;padding:8px 0 10px;color:var(--sub);font-size:11px;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;transition:.2s;position:relative;}
.tabbar button .ico{font-size:18px;line-height:1;}
.tabbar button.active{color:var(--blue);}
.tabbar button.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--blue);border-radius:0 0 3px 3px;}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px;}
.title{font-size:22px;font-weight:800;margin:0 0 6px;}
.sub{color:var(--sub);font-size:13px;}
.sec-title{font-size:15px;font-weight:700;margin:20px 0 10px;display:flex;align-items:center;gap:6px;}
.btn{display:block;width:100%;padding:14px;border:none;border-radius:999px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .12s;}
.btn:active{transform:scale(.97);}
.btn-main{background:linear-gradient(135deg,#2F7BFF,#4FA8FF);color:#fff;}
.btn-ghost{background:transparent;color:var(--blue);border:1px solid var(--blue-d);}
.btn-amber{background:linear-gradient(135deg,#E08A1E,#FFB84D);color:#fff;}
.btn-sm{padding:8px 15px;font-size:13.5px;width:auto;border-radius:999px;}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn-row{display:flex;gap:10px;}
.btn-row .btn{flex:1;}
.tag{display:inline-block;font-size:11.5px;color:var(--blue);background:rgba(79,168,255,.12);padding:2px 9px;border-radius:20px;margin-right:5px;}
.tag.err{color:var(--red);background:rgba(255,91,91,.12);}
.tag.ok{color:var(--green);background:rgba(46,212,122,.12);}
.tag.amber{color:var(--amber);background:rgba(255,184,77,.14);}
.tag.purple{color:var(--purple);background:rgba(167,139,250,.15);}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}

/* === 首页：品牌 + 快捷入口 + 学习地图 === */
.brand{padding:8px 0 16px;text-align:center;}
.brand h2{margin:0 0 4px;font-size:30px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(135deg,#8FB4FF,#4FA8FF 40%,#A78BFA 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.brand .sub{font-size:12.5px;}
.brand .sign{font-size:11px;color:var(--sub);margin-top:6px;}
.brand .sign b{color:var(--blue);}

/* 快捷入口网格 */
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px;}
.quick-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 8px;text-align:center;cursor:pointer;transition:.2s;position:relative;overflow:hidden;}
.quick-card:active{transform:scale(.96);}
.quick-card::after{content:'';position:absolute;top:-20px;right:-20px;width:60px;height:60px;border-radius:50%;opacity:.1;background:var(--blue);}
.quick-card .qi{font-size:26px;line-height:1;margin-bottom:8px;display:block;}
.quick-card .qt{font-size:13px;font-weight:700;}
.quick-card .qs{font-size:10.5px;color:var(--sub);margin-top:3px;}
.q-blue{border-color:rgba(79,168,255,.3);}
.q-blue::after{background:var(--blue);}
.q-purple{border-color:rgba(167,139,250,.3);}
.q-purple::after{background:var(--purple);}
.q-green{border-color:rgba(46,212,122,.3);}
.q-green::after{background:var(--green);}
.q-amber{border-color:rgba(255,184,77,.3);}
.q-amber::after{background:var(--amber);}
.q-cyan{border-color:rgba(94,233,233,.3);}
.q-cyan::after{background:var(--cyan);}
.q-pink{border-color:rgba(255,126,182,.3);}
.q-pink::after{background:var(--pink);}

/* 学习地图：知识点卡片网格 */
.map-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.map-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;transition:.2s;position:relative;}
.map-card:active{transform:scale(.97);}
.map-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.map-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;background:rgba(79,168,255,.14);flex-shrink:0;}
.map-name{font-size:14px;font-weight:700;flex:1;line-height:1.3;}
.map-bar{height:5px;background:#1A2340;border-radius:5px;overflow:hidden;margin:6px 0 5px;}
.map-bar>i{display:block;height:100%;border-radius:5px;transition:width .3s;}
.map-info{font-size:11px;color:var(--sub);display:flex;justify-content:space-between;}

/* 学习进度概览 */
.progress-overview{background:linear-gradient(135deg,rgba(47,123,255,.14),rgba(123,79,224,.12));border:1px solid rgba(79,168,255,.28);border-radius:14px;padding:16px;margin-bottom:14px;}
.po-row{display:flex;align-items:center;gap:14px;}
.po-circle{width:64px;height:64px;position:relative;flex-shrink:0;}
.po-circle svg{display:block;transform:rotate(-90deg);}
.po-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:var(--blue);}
.po-info{flex:1;}
.po-info h4{margin:0 0 6px;font-size:14px;font-weight:700;}
.po-info p{margin:0;font-size:11.5px;color:var(--sub);line-height:1.7;}
.po-info p b{color:var(--text);}

/* === 题型标签 === */
.type-badge{font-size:10.5px;padding:2px 7px;border-radius:5px;background:rgba(255,184,77,.16);color:var(--amber);margin-left:5px;font-weight:600;}
.type-badge.blue{background:rgba(79,168,255,.16);color:var(--blue);}
.type-badge.purple{background:rgba(167,139,250,.16);color:var(--purple);}
.type-badge.green{background:rgba(46,212,122,.16);color:var(--green);}

/* === 模拟器 === */
.sim-box{background:#04081a;border:1px solid rgba(79,168,255,.3);border-radius:14px;margin:10px 0;overflow:hidden;}
.sim-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:linear-gradient(90deg,rgba(79,168,255,.12),rgba(167,139,250,.08));border-bottom:1px solid rgba(79,168,255,.2);font-size:11.5px;}
.sim-head .sim-tag{color:var(--blue);font-weight:700;letter-spacing:.3px;}
.sim-head .sim-info{color:var(--sub);font-size:11px;}
.sim-canvas{display:block;width:100%;height:auto;background:#04081a;}
.sim-ctrl{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid rgba(79,168,255,.15);background:rgba(4,8,26,.95);}
.sim-ctrl button{background:rgba(79,168,255,.08);border:1px solid rgba(79,168,255,.25);color:var(--blue);font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:inherit;min-width:58px;transition:.2s;}
.sim-ctrl button:active{transform:scale(.95);}
.sim-ctrl button.active{background:linear-gradient(135deg,#2F7BFF,#4FA8FF);color:#fff;border-color:transparent;}
.sim-ctrl .sim-sp{flex:1;display:flex;align-items:center;gap:6px;color:var(--sub);font-size:11px;}
.sim-ctrl input[type=range]{flex:1;-webkit-appearance:none;height:4px;border-radius:4px;background:rgba(79,168,255,.2);outline:none;}
.sim-ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#2F7BFF,#4FA8FF);cursor:pointer;box-shadow:0 0 6px rgba(79,168,255,.6);}
.sim-ctrl .sim-sp-val{min-width:34px;text-align:right;color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums;}

/* === 学习卡片 === */
.study-box{background:linear-gradient(135deg,rgba(47,123,255,.08),rgba(123,79,224,.08));border:1px solid rgba(79,168,255,.22);border-radius:var(--r);padding:16px;margin-bottom:14px;}
.k-content{font-size:14.5px;line-height:2;color:#C8D2E8;white-space:pre-wrap;}

/* === AI 页面 === */
.ai-hero{background:linear-gradient(135deg,rgba(47,123,255,.18),rgba(167,139,250,.14));border:1px solid rgba(79,168,255,.35);border-radius:16px;padding:18px;margin-bottom:14px;position:relative;overflow:hidden;}
.ai-hero::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(79,168,255,.3),transparent 70%);}
.ai-hero h3{margin:0 0 6px;font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px;}
.ai-hero p{margin:0;font-size:12px;color:var(--sub);line-height:1.7;position:relative;}

/* AI 模型选择 */
.model-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;}
.model-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;transition:.2s;position:relative;overflow:hidden;}
.model-card:active{transform:scale(.97);}
.model-card.active{border-color:var(--blue);background:linear-gradient(135deg,rgba(47,123,255,.14),rgba(123,79,224,.10));}
.model-card.active::after{content:'✓';position:absolute;top:8px;right:10px;color:var(--blue);font-weight:900;font-size:14px;}
.model-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:10px;background:rgba(79,168,255,.14);}
.model-name{font-size:13.5px;font-weight:700;margin-bottom:3px;}
.model-desc{font-size:10.5px;color:var(--sub);line-height:1.5;}

/* 对话 */
.ai-chat{display:flex;flex-direction:column;gap:10px;padding-bottom:18px;min-height:100px;}
.ai-msg{max-width:88%;padding:11px 15px;border-radius:14px;font-size:14px;line-height:1.7;animation:fadeIn .3s;word-break:break-word;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.ai-msg.user{align-self:flex-end;background:linear-gradient(135deg,#2F7BFF,#4FA8FF);color:#fff;border-bottom-right-radius:4px;}
.ai-msg.bot{align-self:flex-start;background:var(--bg2);border:1px solid var(--line);color:#D0DAF0;border-bottom-left-radius:4px;}
.ai-msg.bot b{color:var(--blue);}
.ai-typing{align-self:flex-start;color:var(--sub);font-size:13px;padding:8px 14px;display:flex;gap:3px;align-items:center;}
.ai-typing span{width:5px;height:5px;border-radius:50%;background:var(--blue);animation:dot 1.2s infinite;}
.ai-typing span:nth-child(2){animation-delay:.2s;}
.ai-typing span:nth-child(3){animation-delay:.4s;}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

.ai-input-row{position:fixed;left:0;right:0;bottom:62px;z-index:15;max-width:560px;margin:0 auto;display:flex;gap:8px;padding:10px 16px;background:rgba(8,13,31,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);}
.ai-input{flex:1;padding:12px 16px;border-radius:999px;background:var(--bg3);border:1px solid var(--line);color:var(--text);font-size:14.5px;font-family:inherit;outline:none;}
.ai-input:focus{border-color:var(--blue);}
.ai-send{padding:0 20px;border-radius:999px;border:none;background:linear-gradient(135deg,#2F7BFF,#4FA8FF);color:#fff;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;}

/* === 读报 === */
.news-list{display:flex;flex-direction:column;gap:10px;}
.news-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;transition:.2s;}
.news-card:hover{border-color:var(--blue);}
.news-card.active{border-color:var(--blue);background:linear-gradient(135deg,rgba(47,123,255,.12),rgba(123,79,224,.10));}
.news-top{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap;}
.news-date{font-size:11px;color:var(--sub);}
.news-title{font-size:15px;font-weight:700;margin-bottom:6px;line-height:1.4;}
.news-summary{font-size:12.5px;color:#B8C2DC;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-actions{display:flex;gap:8px;margin-top:10px;}
.news-actions button{flex:1;font-size:12.5px;padding:9px;border-radius:10px;border:1px solid rgba(79,168,255,.35);background:none;color:var(--blue);cursor:pointer;font-family:inherit;}
.news-actions button.playing{background:linear-gradient(135deg,#2F7BFF,#4FA8FF);color:#fff;border-color:transparent;}

/* 播放器面板 */
.reader-panel{position:fixed;left:0;right:0;bottom:62px;z-index:35;max-width:560px;margin:0 auto;background:rgba(12,18,38,.98);backdrop-filter:blur(16px);border-top:1px solid var(--blue-d);padding:12px 16px 14px;transform:translateY(130%);transition:transform .32s ease;box-shadow:0 -10px 30px rgba(0,0,0,.55);}
.reader-panel.show{transform:translateY(0);}
.reader-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;color:var(--sub);}
.reader-title{font-size:13px;color:var(--blue);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%;}
.reader-text{font-size:13.5px;color:#C8D2E8;line-height:1.7;max-height:130px;overflow-y:auto;padding:9px 11px;background:rgba(8,13,31,.75);border-radius:10px;margin-bottom:10px;}
.reader-text .hl{background:rgba(79,168,255,.32);color:#fff;border-radius:3px;padding:1px 4px;}
.reader-text::-webkit-scrollbar{width:4px;}
.reader-text::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px;}

.reader-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.reader-row button{background:rgba(79,168,255,.08);border:1px solid rgba(79,168,255,.3);color:var(--blue);font-size:13px;padding:8px 14px;border-radius:9px;cursor:pointer;font-family:inherit;min-width:58px;}
.reader-row button.main{background:linear-gradient(135deg,#2F7BFF,#4FA8FF);color:#fff;border-color:transparent;flex:1;font-weight:700;}
.reader-row button:active{transform:scale(.96);}

.reader-sliders{display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:1px solid var(--line);}
.r-slider{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--sub);}
.r-slider label{min-width:30px;}
.r-slider input{flex:1;-webkit-appearance:none;height:4px;border-radius:4px;background:rgba(79,168,255,.2);outline:none;}
.r-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,#2F7BFF,#4FA8FF);cursor:pointer;box-shadow:0 0 5px rgba(79,168,255,.6);}
.r-slider .r-val{min-width:36px;text-align:right;color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums;}

/* === 练习/考试 === */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px;}
.counter{font-size:12.5px;color:var(--sub);}
.counter .ok{color:var(--green);}
.counter .no{color:var(--red);}
.progress{height:5px;background:#1A2340;border-radius:5px;overflow:hidden;margin-bottom:16px;}
.progress>i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#2F7BFF,#4FA8FF);transition:width .3s;}
.stem{font-size:16.5px;line-height:1.65;margin:4px 0 14px;font-weight:500;}
.option{display:flex;align-items:center;padding:13px 14px;margin-bottom:9px;background:var(--bg3);border:2px solid var(--line);border-radius:13px;cursor:pointer;transition:all .18s;}
.option:active{transform:scale(.99);}
.option.selected{border-color:var(--blue);background:rgba(79,168,255,.12);}
.option.right{border-color:var(--green);background:rgba(46,212,122,.12);}
.option.wrong{border-color:var(--red);background:rgba(255,91,91,.12);}
.option.dim{opacity:.45;}
.opt-key{width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;background:var(--line);font-size:13px;font-weight:700;margin-right:11px;flex-shrink:0;}
.option.selected .opt-key{background:var(--blue);color:#0B1026;}
.option.right .opt-key{background:var(--green);color:#0B1026;}
.option.wrong .opt-key{background:var(--red);color:#fff;}
.opt-text{flex:1;font-size:14.5px;line-height:1.5;}
.order-num{display:inline-block;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;background:linear-gradient(135deg,#2F7BFF,#4FA8FF);color:#fff;font-size:12.5px;font-weight:800;margin-right:11px;flex-shrink:0;}
.order-item.taken{opacity:.4;pointer-events:none;}
.fill-input{width:100%;padding:14px 15px;border-radius:13px;background:var(--bg3);border:2px solid var(--line);color:var(--text);font-size:15px;font-family:inherit;outline:none;}
.fill-input:focus{border-color:var(--blue);}
.explain{background:var(--bg2);border-left:4px solid var(--blue);border-radius:12px;padding:14px;margin-top:14px;animation:fadeIn .25s;}
.explain .head{font-size:15px;font-weight:700;margin-bottom:8px;}
.explain .head.ok{color:var(--green);}
.explain .head.no{color:var(--red);}
.explain .line{font-size:13.5px;line-height:1.75;color:#B8C2DC;margin-bottom:5px;}
.footer{margin-top:18px;}
.timer{font-size:18px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;}
.card-btn{font-size:11.5px;color:var(--blue);border:1px solid var(--blue-d);padding:4px 11px;border-radius:999px;background:none;cursor:pointer;font-family:inherit;}
.mask{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:40;}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:560px;margin:0 auto;background:var(--bg2);border-radius:22px 22px 0 0;padding:22px 18px 34px;transform:translateY(110%);transition:transform .28s;max-height:70vh;overflow-y:auto;}
.sheet.show{transform:translateY(0);}
.sheet h3{margin:0 0 14px;font-size:16px;}
.sheet-grid{display:flex;flex-wrap:wrap;gap:9px;}
.sheet-item{width:40px;height:40px;line-height:40px;text-align:center;border-radius:50%;background:var(--line);color:var(--sub);font-size:13px;cursor:pointer;transition:.15s;}
.sheet-item.done{background:rgba(79,168,255,.22);color:var(--blue);font-weight:700;}
.sheet-item.active{outline:2px solid var(--blue);color:#fff;}

.score-card{background:linear-gradient(135deg,#1E4FA8,#2F7BFF 60%,#4FA8FF);border-radius:20px;padding:30px 20px;text-align:center;margin-bottom:16px;}
.score-card .lb{font-size:12.5px;opacity:.85;}
.score-card .num{font-size:56px;font-weight:900;line-height:1.15;}
.score-card .full{font-size:12.5px;opacity:.8;}
.score-card .rate{display:inline-block;margin-top:10px;font-size:12.5px;padding:5px 15px;background:rgba(255,255,255,.18);border-radius:999px;}
.stat-row{display:flex;background:var(--bg2);border-radius:var(--r);padding:16px 0;margin-bottom:18px;border:1px solid var(--line);}
.stat-row>div{flex:1;text-align:center;}
.stat-row .n{font-size:22px;font-weight:800;}
.stat-row .n.ok{color:var(--green);}
.stat-row .n.no{color:var(--red);}
.stat-row .n.gray{color:var(--sub);}
.stat-row .l{font-size:11.5px;color:var(--sub);margin-top:2px;}

.q-stem{font-size:14.5px;line-height:1.6;margin-bottom:11px;font-weight:500;}
.q-line{font-size:13px;line-height:1.9;color:#B8C2DC;}
.q-line .ok{color:var(--green);font-weight:700;}
.q-line .no{color:var(--red);text-decoration:line-through;}
.q-exp{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--sub);line-height:1.7;}

.group-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;margin-bottom:9px;}
.group-head .gh-l{display:flex;align-items:center;gap:9px;}
.group-head .gn{font-size:14.5px;font-weight:700;}
.group-head .gc{font-size:11.5px;color:var(--sub);}
.group-body{margin:-3px 0 12px;padding:0 3px;}

.row-item{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;cursor:pointer;padding:14px 16px;}
.row-item .arrow{color:#5C6688;font-size:13.5px;}
.empty{text-align:center;padding:60px 0;}
.empty .ico{font-size:44px;margin-bottom:12px;}
.empty .txt{color:var(--sub);font-size:13.5px;}

.grid2{display:flex;flex-wrap:wrap;background:var(--bg2);border-radius:var(--r);border:1px solid var(--line);padding:10px 0;margin-bottom:16px;}
.grid2>div{width:50%;text-align:center;padding:12px 0;}
.grid2 .n{font-size:22px;font-weight:800;color:var(--blue);}
.grid2 .l{font-size:11.5px;color:var(--sub);margin-top:2px;}

.profile-card{background:linear-gradient(135deg,#1A2A5A,#2F4FA8);border-radius:20px;padding:28px 20px;text-align:center;margin-bottom:16px;position:relative;overflow:hidden;}
.profile-card::before{content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(79,168,255,.3),transparent 70%);}
.profile-card .av{font-size:48px;margin-bottom:10px;position:relative;}
.profile-card .nk{font-size:19px;font-weight:800;position:relative;}
.profile-card .sign{position:relative;margin-top:8px;font-size:11.5px;color:rgba(255,255,255,.75);}
.profile-card .sign b{color:#fff;}

.filter-bar{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;}
.filter-bar::-webkit-scrollbar{display:none;}
.filter-item{flex-shrink:0;padding:6px 15px;border-radius:999px;cursor:pointer;background:var(--bg2);border:1px solid var(--line);color:var(--sub);font-size:13px;font-family:inherit;white-space:nowrap;}
.filter-item.active{background:linear-gradient(135deg,#2F7BFF,#4FA8FF);color:#fff;border-color:transparent;}

.learn-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:10px;cursor:pointer;transition:.2s;}
.learn-card:active{transform:scale(.985);}
.learn-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.learn-ico{width:38px;height:38px;border-radius:11px;background:rgba(79,168,255,.14);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.learn-name{font-size:15.5px;font-weight:700;flex:1;}
.learn-meta{font-size:11.5px;color:var(--sub);}
.mastery-bar{height:5px;background:#1A2340;border-radius:5px;overflow:hidden;margin:8px 0 5px;}
.mastery-bar>i{display:block;height:100%;border-radius:5px;transition:width .3s;}
.mastery-info{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub);}

.version{text-align:center;color:#3E4767;font-size:11.5px;margin:30px 0 10px;line-height:1.8;}
.dyn-caption{font-size:10.5px;color:var(--sub);text-align:center;padding:4px 12px 8px;font-style:italic;}
@media (max-width:360px){body{font-size:14px;}.stem{font-size:15.5px;}.quick-grid{grid-template-columns:repeat(2,1fr);}.map-grid{grid-template-columns:1fr;}.model-grid{grid-template-columns:1fr;}}

/* Ternence UX foundation: keyboard access, reduced motion, resilient small screens. */
:focus-visible{outline:2px solid var(--focus-ring,#60a5fa);outline-offset:3px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
img,svg,canvas,video{max-width:100%}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{*{box-shadow:none!important;text-shadow:none!important}body{overflow:visible!important;height:auto!important;min-height:0!important;background:#fff!important;color:#111!important}.sidebar,.bottomnav,.bottomnav,.tabbar,.toast,.toast-container,.modal-backdrop{display:none!important}.main,.main-content,.content,.view{overflow:visible!important;height:auto!important;min-height:0!important;margin:0!important;width:100%!important;color:#111!important;background:#fff!important}}

/* XingSaiTong learning product redesign v1 */
.study-intro{--intro-accent:#a78bfa;margin:12px 18px 0;padding:17px 20px;border-radius:18px;border:1px solid rgba(167,139,250,.25);background:radial-gradient(circle at 88% 0,rgba(94,233,233,.13),transparent 32%),linear-gradient(115deg,#171d3c,#151b35 65%,#1d1b3b);display:flex;align-items:center;justify-content:space-between;gap:16px}.study-intro .eyebrow{font-size:10px;font-weight:800;letter-spacing:1.7px;color:#c4b5fd}.study-intro h2{font-size:20px;color:#f3efff;margin:4px 0}.study-intro p{font-size:11.5px;line-height:1.65;color:#aab3d2;max-width:650px}.study-intro .study-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.study-intro .study-tags span{font-size:10px;padding:5px 9px;border-radius:99px;border:1px solid rgba(196,181,253,.22);background:rgba(167,139,250,.09);color:#ddd6fe}.study-intro .orbit{width:66px;height:66px;flex:0 0 66px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(94,233,233,.28);background:radial-gradient(circle,rgba(94,233,233,.18),rgba(167,139,250,.06));font-size:28px;color:#a5f3fc}@media(max-width:680px){.study-intro{margin:10px 10px 0;padding:14px}.study-intro .orbit{display:none}}