/* ============ 上岸督学 · 交互原型 ============ */
:root{
  --bg:#f7f6f1; --surface:#fffdf8; --ink:#2c2b26; --ink2:#706d61; --ink3:#a3a094;
  --line:#e7e4d9; --line2:#efecdf;
  --accent:#2358b8; --accent-d:#1a438c; --accent-soft:#e3ecf8; --accent-faint:#f0f5fc;
  --warn:#bd8326; --warn-soft:#f6ecd9;
  --risk:#bd5245; --risk-soft:#f7e6e2;
  --gold:#a97e1f; --gold-soft:#f5edd8;
  --radius:14px;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  min-height:100vh;
}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.01em}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#d5d1c2;border-radius:3px}

/* ---------- 顶部原型导航 ---------- */
.proto-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 20px; background:#23221e; color:#efece2;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.proto-nav .brand{font-weight:700; font-size:15px; letter-spacing:.04em}
.proto-nav .brand small{font-weight:400; color:#9d998b; margin-left:8px; font-size:12px}
.proto-tabs{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
.proto-tabs button{
  padding:7px 16px; border-radius:999px; font-size:13px; color:#b9b4a4;
  border:1px solid #44423a; transition:all .18s ease;
}
.proto-tabs button.on{background:#efece2; color:#23221e; border-color:#efece2; font-weight:600}
.proto-tabs button:hover:not(.on){color:#efece2; border-color:#6a675c}
.proto-hint{width:100%; font-size:12px; color:#8f8b7d}
.proto-hint b{color:#d9d4c4; font-weight:600}

/* ---------- 舞台布局 ---------- */
.stage{display:flex; justify-content:center; padding:34px 16px 80px}
.view{display:none; width:100%}
.view.on{display:block; animation:viewIn .35s ease}
@keyframes viewIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- 手机壳 ---------- */
.phone-wrap{display:flex; gap:36px; justify-content:center; align-items:flex-start; flex-wrap:wrap}
.phone{
  width:390px; height:800px; flex:none;
  background:#1c1b18; border-radius:52px; padding:12px;
  box-shadow:0 30px 70px -20px rgba(40,38,30,.45), 0 4px 14px rgba(40,38,30,.2);
}
.screen{
  position:relative; width:100%; height:100%;
  background:var(--bg); border-radius:42px; overflow:hidden;
  display:flex; flex-direction:column;
}
.statusbar{
  height:44px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; font-size:13px; font-weight:600; color:var(--ink);
  background:transparent; position:relative; z-index:5;
}
.statusbar .capsule{
  display:flex; gap:5px; align-items:center; background:rgba(0,0,0,.06);
  border-radius:999px; padding:4px 10px; font-size:11px; color:var(--ink2);
}
.screens{position:relative; flex:1; overflow:hidden}
.pg{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  background:var(--bg); display:none; flex-direction:column;
  scrollbar-width:none;
}
.pg::-webkit-scrollbar{display:none}
.pg.on{display:flex; animation:pgIn .3s cubic-bezier(.2,.8,.3,1)}
@keyframes pgIn{from{opacity:0; transform:translateX(18px)}to{opacity:1; transform:none}}
.pg.back{animation:pgBack .3s cubic-bezier(.2,.8,.3,1)}
@keyframes pgBack{from{opacity:0; transform:translateX(-18px)}to{opacity:1; transform:none}}

/* 屏幕内页头 */
.pg-head{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:8px 18px 12px; background:var(--bg);
}
.pg-head .back-btn{
  width:30px; height:30px; border-radius:50%; background:var(--surface);
  border:1px solid var(--line); display:grid; place-items:center; font-size:15px; color:var(--ink2);
}
.pg-head h3{font-size:16px; font-weight:700}
.pg-body{flex:1; padding:0 18px 24px; overflow-y:auto; scrollbar-width:none}
.pg-body::-webkit-scrollbar{display:none}

/* 底部 Tab */
.tabbar{
  flex:none; height:64px; background:var(--surface); border-top:1px solid var(--line);
  display:flex; z-index:6;
}
.tabbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:11px; color:var(--ink3); transition:color .15s;
}
.tabbar button .ico{font-size:19px; line-height:1}
.tabbar button.on{color:var(--accent-d); font-weight:600}

/* ---------- 通用组件 ---------- */
.btn-primary{
  display:block; width:100%; padding:14px; border-radius:14px;
  background:var(--accent); color:#fff; font-size:16px; font-weight:600; text-align:center;
  transition:transform .12s ease, background .15s;
  box-shadow:0 6px 16px -6px rgba(35,88,184,.5);
}
.btn-primary:active{transform:scale(.97); background:var(--accent-d)}
.btn-ghost{
  display:block; width:100%; padding:12px; border-radius:14px; text-align:center;
  background:transparent; color:var(--ink2); font-size:14px; border:1px solid var(--line);
}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.tag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:600; line-height:1.6;
}
.tag.risk{background:var(--risk-soft); color:var(--risk)}
.tag.warn{background:var(--warn-soft); color:var(--warn)}
.tag.ok{background:var(--accent-soft); color:var(--accent-d)}
.tag.gold{background:var(--gold-soft); color:var(--gold)}
.divider{height:1px; background:var(--line2); margin:14px 0}

/* ---------- S1 登录 ---------- */
.pg-login{justify-content:flex-end; background:
  radial-gradient(120% 60% at 50% -10%, #dde7f5 0%, var(--bg) 55%);}
.login-hero{padding:0 30px; margin-bottom:34px}
.login-mark{
  width:64px; height:64px; border-radius:18px; background:var(--accent);
  display:grid; place-items:center; color:#fff; font-size:26px; font-weight:800;
  box-shadow:0 10px 24px -8px rgba(35,88,184,.55); margin-bottom:20px;
}
.login-hero h1{font-size:27px; font-weight:800; letter-spacing:.02em; line-height:1.35}
.login-hero p{margin-top:10px; color:var(--ink2); font-size:14px}
.login-panel{padding:0 24px 40px}
.login-note{margin-top:14px; text-align:center; font-size:11.5px; color:var(--ink3)}
.login-note u{text-decoration:none; border-bottom:1px dotted var(--ink3)}

/* 手机号绑定 sheet */
.sheet-mask{
  position:absolute; inset:0; background:rgba(30,29,25,.45); z-index:20;
  display:none; align-items:flex-end;
}
.sheet-mask.on{display:flex; animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%; background:var(--surface); border-radius:22px 22px 0 0; padding:22px 22px 34px;
  animation:sheetUp .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes sheetUp{from{transform:translateY(40%)}to{transform:none}}
.sheet h4{font-size:17px; font-weight:700; margin-bottom:4px}
.sheet .sub{font-size:12.5px; color:var(--ink2); margin-bottom:16px}
.fake-input{
  border:1px solid var(--line); border-radius:12px; padding:13px 14px; font-size:15px;
  background:var(--bg); color:var(--ink); margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.fake-input .caret{width:1.5px; height:18px; background:var(--accent); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- S2 AI 测评对话 ---------- */
.chat{background:var(--bg)}
.chat-banner{
  margin:2px 0 12px; padding:10px 14px; border-radius:12px;
  background:var(--accent-faint); border:1px dashed #c6d6ee;
  font-size:12px; color:var(--accent-d);
}
.msg{display:flex; margin-bottom:14px; gap:9px; animation:msgIn .35s ease}
@keyframes msgIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.msg .avatar{
  width:32px; height:32px; border-radius:10px; flex:none; display:grid; place-items:center;
  font-size:14px; font-weight:700; color:#fff; background:var(--accent);
}
.msg.me{justify-content:flex-end}
.msg .bubble{
  max-width:76%; padding:11px 14px; border-radius:14px; font-size:14px;
  background:var(--surface); border:1px solid var(--line); border-top-left-radius:4px;
}
.msg.me .bubble{background:var(--accent); color:#fff; border:none; border-radius:14px; border-top-right-radius:4px}
.msg .bubble b{font-weight:700}
.typing{display:inline-flex; gap:4px; padding:4px 2px}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--ink3); animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.chips{
  position:sticky; bottom:0; flex:none; padding:10px 14px 16px;
  background:linear-gradient(transparent, var(--bg) 30%);
  display:flex; flex-wrap:wrap; gap:8px;
}
.chips button{
  padding:9px 15px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-size:13.5px; color:var(--ink);
  transition:all .15s; animation:msgIn .35s ease;
}
.chips button:active{background:var(--accent); color:#fff; border-color:var(--accent)}
.chips button.hot{border-color:var(--accent); color:var(--accent-d); font-weight:600; background:var(--accent-faint)}

/* ---------- S3 方案 ---------- */
.plan-hero{
  padding:18px; border-radius:16px; color:#fff;
  background:linear-gradient(135deg,#2358b8 0%, #3a6cc4 55%, #5b87d1 100%);
  box-shadow:0 12px 26px -12px rgba(35,88,184,.6); margin-bottom:16px;
}
.plan-hero .row{display:flex; justify-content:space-between; align-items:baseline}
.plan-hero .big{font-size:34px; font-weight:800; line-height:1.1}
.plan-hero small{opacity:.85; font-size:12px}
.plan-hero .target{margin-top:12px; display:flex; gap:14px; font-size:12.5px}
.plan-hero .target b{display:block; font-size:16px}
.day-pick{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:6px 0 16px}
.day-pick button{
  padding:12px 4px; border-radius:12px; background:var(--surface); border:1.5px solid var(--line);
  text-align:center; transition:all .15s;
}
.day-pick button b{display:block; font-size:19px; font-weight:800}
.day-pick button span{font-size:11px; color:var(--ink2)}
.day-pick button.on{border-color:var(--accent); background:var(--accent-faint); color:var(--accent-d)}
.day-pick button.on span{color:var(--accent-d)}
.day-pick button:disabled{opacity:.4; cursor:not-allowed}
.roadmap{position:relative; padding-left:22px; margin:8px 0 18px}
.roadmap::before{content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px;
  background:repeating-linear-gradient(var(--line) 0 5px, transparent 5px 10px)}
.rm-item{position:relative; padding:0 0 16px 14px; animation:msgIn .4s ease backwards}
.rm-item::before{
  content:""; position:absolute; left:-22px; top:5px; width:14px; height:14px; border-radius:50%;
  background:var(--surface); border:3px solid var(--accent); box-sizing:border-box;
}
.rm-item.phase::before{background:var(--accent)}
.rm-item .d{font-size:11.5px; color:var(--accent-d); font-weight:700; letter-spacing:.05em}
.rm-item .t{font-size:14px; font-weight:600}
.rm-item .s{font-size:12px; color:var(--ink2)}
.plan-cta{position:sticky; bottom:0; padding:12px 0 4px; background:linear-gradient(transparent,var(--bg) 35%)}

/* ---------- S4 首页 ---------- */
.home-top{padding:4px 18px 0}
.home-date{font-size:12px; color:var(--ink2); display:flex; justify-content:space-between; align-items:center}
.home-date b{color:var(--accent-d); font-size:13px}
.gap-hero{
  margin:10px 0 14px; padding:20px 18px 18px; border-radius:18px; color:#fff;
  background:linear-gradient(150deg,#1b3a6b 0%, #2358b8 60%, #3f6fbf 100%);
  box-shadow:0 14px 30px -14px rgba(38,70,62,.55);
  position:relative; overflow:hidden;
}
.gap-hero::after{
  content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);
}
.gap-hero .label{font-size:12px; opacity:.85; display:flex; justify-content:space-between}
.gap-hero .gap-num{font-size:46px; font-weight:800; line-height:1.15; letter-spacing:.01em}
.gap-hero .gap-num small{font-size:15px; font-weight:500; opacity:.85; margin-left:4px}
.gap-hero .encourage{font-size:12.5px; margin-top:6px; background:rgba(255,255,255,.14);
  display:inline-block; padding:4px 10px; border-radius:999px}
.gap-bar{margin-top:14px; height:8px; border-radius:99px; background:rgba(255,255,255,.2); overflow:hidden}
.gap-bar i{display:block; height:100%; border-radius:99px; background:#ffd98a; width:78%;
  transition:width 1s cubic-bezier(.2,.8,.3,1)}
.gap-hero .scale{display:flex; justify-content:space-between; font-size:10.5px; opacity:.75; margin-top:5px}
.streak-line{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; padding:11px 15px; border-radius:12px;
  background:var(--gold-soft); border:1px solid #e9dcb9; font-size:12.5px; color:#7c6317;
}
.streak-line b{font-size:15px}
.sec-title{font-size:15px; font-weight:700; margin:4px 0 10px; display:flex; justify-content:space-between; align-items:baseline}
.sec-title small{font-weight:400; font-size:11.5px; color:var(--ink3)}
.task{
  display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .12s ease, box-shadow .15s; text-align:left; width:100%;
}
.task:active{transform:scale(.98)}
.task.done{opacity:.55}
.task .tico{
  width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  font-size:17px; background:var(--accent-soft); color:var(--accent-d); font-weight:700;
}
.task.done .tico{background:#eeece2; color:var(--ink3)}
.task .tt{flex:1; min-width:0}
.task .tt b{font-size:14px; display:block}
.task .tt span{font-size:11.5px; color:var(--ink2)}
.task .arr{color:var(--ink3); font-size:15px}
.task .chk{
  width:22px; height:22px; border-radius:50%; border:2px solid var(--accent);
  display:grid; place-items:center; color:#fff; background:var(--accent); font-size:12px; flex:none;
}
.live-pill{
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin:6px 0 14px; font-size:12px; color:var(--ink2);
}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(35,88,184,.4)}55%{box-shadow:0 0 0 6px rgba(35,88,184,0)}}
.home-cta{padding:0 18px 18px}

/* ---------- S5 知识切片 ---------- */
.slice-meta{display:flex; gap:8px; margin-bottom:12px}
.slice-body{font-size:14.5px; line-height:1.9}
.slice-body h5{font-size:16px; margin:14px 0 6px; color:var(--accent-d)}
.slice-body p{margin-bottom:10px; color:#3d3c35}
.slice-body .formula{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin:10px 0; font-family:var(--mono); font-size:13.5px; color:var(--accent-d);
}
.slice-body .tip{
  background:var(--warn-soft); border-left:3px solid var(--warn); border-radius:0 10px 10px 0;
  padding:10px 13px; font-size:13px; color:#6d5415; margin:12px 0;
}
.read-progress{position:sticky; top:0; height:3px; background:var(--line2); z-index:3}
.read-progress i{display:block; height:100%; background:var(--accent); width:0}

/* ---------- S6 刷题 ---------- */
.quiz-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:12.5px; color:var(--ink2)}
.quiz-top .qn{font-weight:700; color:var(--ink); font-size:14px}
.q-dots{display:flex; gap:5px}
.q-dots i{width:7px; height:7px; border-radius:50%; background:var(--line)}
.q-dots i.done{background:var(--accent)}
.q-dots i.cur{background:var(--warn); transform:scale(1.25)}
.q-stem{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; font-size:14.5px; line-height:1.8; margin-bottom:14px;
}
.q-opt{
  display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
  padding:13px 14px; margin-bottom:10px; border-radius:12px;
  background:var(--surface); border:1.5px solid var(--line); font-size:14px; transition:all .15s;
}
.q-opt .k{
  width:24px; height:24px; flex:none; border-radius:50%; border:1.5px solid var(--line);
  display:grid; place-items:center; font-size:12.5px; font-weight:700; color:var(--ink2);
}
.q-opt.sel{border-color:var(--accent); background:var(--accent-faint)}
.q-opt.sel .k{background:var(--accent); border-color:var(--accent); color:#fff}
.q-opt.right{border-color:var(--accent); background:var(--accent-soft)}
.q-opt.right .k{background:var(--accent); border-color:var(--accent); color:#fff}
.q-opt.wrong{border-color:var(--risk); background:var(--risk-soft)}
.q-opt.wrong .k{background:var(--risk); border-color:var(--risk); color:#fff}
.q-explain{
  display:none; background:var(--accent-faint); border:1px solid #ccd9ee; border-radius:12px;
  padding:12px 14px; font-size:13px; color:#274067; margin-bottom:12px; animation:msgIn .3s ease;
}
.q-explain.on{display:block}
.q-explain b{color:var(--accent-d)}
.quiz-result{text-align:center; padding:26px 0 10px}
.quiz-result .score{font-size:52px; font-weight:800; color:var(--accent-d)}
.quiz-result .score small{font-size:16px; color:var(--ink2); font-weight:500}
.quiz-result p{font-size:13px; color:var(--ink2); margin:6px 0 18px}
.encourage-card{
  text-align:left; background:var(--gold-soft); border:1px solid #e8dab4; border-radius:12px;
  padding:13px 15px; font-size:13px; color:#715a14; margin-bottom:16px;
}

/* ---------- S7 打卡 ---------- */
.checkin-wrap{text-align:center; padding-top:26px}
.stamp{
  width:120px; height:120px; margin:0 auto 18px; border-radius:50%;
  border:4px solid var(--accent); color:var(--accent-d);
  display:grid; place-items:center; font-size:24px; font-weight:800; letter-spacing:.1em;
  transform:rotate(-8deg) scale(0); animation:stampIn .5s cubic-bezier(.2,1.4,.4,1) .15s forwards;
  box-shadow:inset 0 0 0 3px rgba(35,88,184,.15);
}
@keyframes stampIn{to{transform:rotate(-8deg) scale(1)}}
.checkin-wrap h2{font-size:22px; font-weight:800}
.checkin-wrap .sub{color:var(--ink2); font-size:13px; margin:6px 0 20px}
.share-card{
  margin:0 6px 18px; padding:20px 18px; border-radius:18px; color:#fff; text-align:left;
  background:linear-gradient(160deg,#1b3a6b,#2358b8 70%);
  box-shadow:0 16px 30px -14px rgba(38,70,62,.55); position:relative; overflow:hidden;
}
.share-card::before{
  content:"Day 12"; position:absolute; right:-8px; bottom:-26px; font-size:88px; font-weight:800;
  color:rgba(255,255,255,.08); font-family:var(--mono); letter-spacing:-.04em;
}
.share-card .sc-top{font-size:11.5px; opacity:.8; letter-spacing:.14em}
.share-card .sc-day{font-size:40px; font-weight:800; line-height:1.2}
.share-card .sc-quote{font-size:13px; margin-top:8px; opacity:.92}
.share-card .sc-foot{display:flex; justify-content:space-between; margin-top:16px; font-size:11px; opacity:.75}

/* ---------- S8 自习室 ---------- */
.room-stat{display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-bottom:16px}
.room-stat .cell{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 8px; text-align:center}
.room-stat b{display:block; font-size:21px; font-weight:800; color:var(--accent-d)}
.room-stat span{font-size:11px; color:var(--ink2)}
.rank-item{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; margin-bottom:9px}
.rank-item .rk{width:26px; text-align:center; font-weight:800; font-family:var(--mono); color:var(--ink3)}
.rank-item:nth-child(1) .rk{color:#b8860b}
.rank-item:nth-child(2) .rk{color:#8a8a80}
.rank-item:nth-child(3) .rk{color:#a0622d}
.rank-item .rava{width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#fff; background:#93a9c9; flex:none}
.rank-item .rn{flex:1}
.rank-item .rn b{font-size:13.5px; display:block}
.rank-item .rn span{font-size:11px; color:var(--ink2)}
.rank-item .rd{font-family:var(--mono); font-weight:700; color:var(--accent-d); font-size:14px}
.rank-item.me{border-color:var(--accent); background:var(--accent-faint)}

/* ---------- S9 我的 ---------- */
.me-card{display:flex; align-items:center; gap:13px; padding:16px; margin-bottom:12px}
.me-card .mava{width:52px; height:52px; border-radius:16px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:19px; font-weight:800}
.me-card b{font-size:16px; display:block}
.me-card span{font-size:12px; color:var(--ink2)}
.trial-banner{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:13px 15px; border-radius:12px; margin-bottom:12px;
  background:var(--warn-soft); border:1px solid #e9dab4; font-size:12.5px; color:#715a14;
}
.trial-banner b{font-size:14px}
.trial-banner button{
  padding:8px 14px; border-radius:999px; background:var(--gold); color:#fff;
  font-size:12.5px; font-weight:700; flex:none;
}
.me-list{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:14px}
.me-list button, .me-list .row{
  display:flex; align-items:center; gap:11px; width:100%; padding:14px 15px; font-size:14px;
  border-bottom:1px solid var(--line2); text-align:left;
}
.me-list button:last-child, .me-list .row:last-child{border-bottom:none}
.me-list .dot{width:8px; height:8px; border-radius:50%; background:var(--accent-soft); border:2px solid var(--accent); flex:none}
.me-list .grow{flex:1}
.me-list .arr{color:var(--ink3)}
.me-list .lock{font-size:11px; color:var(--ink3)}

/* 付费弹窗 */
.pay-sheet h4{font-size:18px}
.price-line{display:flex; align-items:baseline; gap:8px; margin:10px 0 4px}
.price-line .p{font-size:38px; font-weight:800; color:var(--ink)}
.price-line .p::before{content:"¥"; font-size:19px; margin-right:2px}
.price-line s{color:var(--ink3); font-size:14px}
.pay-feats{margin:12px 0 16px}
.pay-feats div{display:flex; gap:9px; font-size:13.5px; padding:5px 0; color:#3d3c35}
.pay-feats div::before{content:"✓"; color:var(--accent); font-weight:800}
.pay-note{font-size:11px; color:var(--ink3); text-align:center; margin-top:10px; line-height:1.7}

/* ---------- 关怀模式（大字大图） ---------- */
.login-elder{
  margin-top:14px; text-align:center; font-size:13.5px; color:var(--accent-d);
  padding:9px; border-radius:10px; border:1px dashed #b9cdea; background:var(--accent-faint);
}
.login-elder:active{background:var(--accent-soft)}
.eswitch{
  width:46px; height:27px; border-radius:999px; background:var(--line);
  position:relative; flex:none; transition:background .2s;
}
.eswitch i{
  position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s;
}
.eswitch.on{background:var(--accent)}
.eswitch.on i{left:22px}
.elder-float{
  position:absolute; left:50%; bottom:150px; transform:translateX(-50%); z-index:30;
  display:none; background:rgba(35,34,30,.93); color:#f2efe6;
  padding:12px 20px; border-radius:999px; font-size:15px; white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.screen.elder .elder-float{display:block; animation:msgIn .3s ease}
.screen.elder.hide-float .elder-float{display:none}
.screen.elder .pg{zoom:1.25}
.screen.elder .tabbar{zoom:1.22}
.screen.elder .sheet-mask{zoom:1.18}
.screen.elder .toast{zoom:1.18}

/* toast */
.toast{
  position:absolute; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
  background:rgba(35,34,30,.92); color:#f2efe6; padding:10px 18px; border-radius:999px;
  font-size:13px; opacity:0; pointer-events:none; transition:all .3s ease; z-index:40; white-space:nowrap;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- 手机旁注释栏 ---------- */
.side-notes{width:300px; flex:none; display:flex; flex-direction:column; gap:12px}
.note-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.note-card h5{font-size:13px; color:var(--accent-d); margin-bottom:6px; letter-spacing:.05em}
.note-card p{font-size:12.5px; color:var(--ink2); line-height:1.7}
.note-card .flow-map{display:flex; flex-direction:column; gap:5px; margin-top:6px}
.note-card .flow-map button{
  text-align:left; font-size:12.5px; padding:8px 11px; border-radius:9px;
  background:var(--bg); border:1px solid var(--line); transition:all .15s;
}
.note-card .flow-map button:hover{border-color:var(--accent); color:var(--accent-d)}
.note-card .flow-map button.here{border-color:var(--accent); background:var(--accent-faint); color:var(--accent-d); font-weight:600}
@media (max-width:900px){.side-notes{width:100%; max-width:390px}}

/* ============ 管理后台 ============ */
.admin{max-width:1240px; margin:0 auto; padding:8px 8px 60px}
.admin-shell{background:#23221e; border-radius:18px; padding:10px; box-shadow:0 24px 60px -24px rgba(40,38,30,.4)}
.admin-inner{background:#f5f4ee; border-radius:12px; overflow:hidden}
.admin-head{
  display:flex; align-items:center; gap:16px; padding:13px 20px;
  background:#2c2b26; color:#e9e6db; flex-wrap:wrap;
}
.admin-head .logo{font-weight:800; font-size:15px; letter-spacing:.03em}
.admin-head .logo i{color:#8fb2e8; font-style:normal}
.admin-nav{display:flex; gap:4px}
.admin-nav button{
  padding:7px 15px; border-radius:8px; font-size:13px; color:#a8a496; transition:all .15s;
}
.admin-nav button.on{background:#3d3b33; color:#f2efe6; font-weight:600}
.admin-head .who{margin-left:auto; font-size:12px; color:#8f8b7d; display:flex; align-items:center; gap:8px}
.admin-head .who .pill{background:#3d3b33; padding:4px 11px; border-radius:999px; color:#d9d4c4}
.admin-body{padding:20px 22px 30px; display:none}
.admin-body.on{display:block; animation:viewIn .3s ease}

.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:18px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.kpi .k-label{font-size:11.5px; color:var(--ink2); letter-spacing:.06em; display:flex; align-items:center; gap:6px}
.kpi .k-val{font-size:27px; font-weight:800; font-family:var(--mono); margin-top:2px; line-height:1.2}
.kpi .k-sub{font-size:11px; color:var(--ink3); margin-top:2px}
.kpi.warn .k-val{color:var(--warn)}
.kpi.risk .k-val{color:var(--risk)}
.kpi.ok .k-val{color:var(--accent-d)}
.live-badge{width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; animation:pulse 1.6s infinite}

.admin-cols{display:grid; grid-template-columns:1fr 380px; gap:16px; align-items:start}
@media (max-width:1000px){.admin-cols{grid-template-columns:1fr}}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--line2); flex-wrap:wrap;
}
.panel-head h4{font-size:14.5px; font-weight:700}
.panel-head .sub{font-size:11.5px; color:var(--ink3); font-weight:400; margin-left:8px}
.panel-tools{display:flex; gap:8px}
.tool-btn{
  padding:7px 13px; border-radius:9px; font-size:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); transition:all .15s; display:inline-flex; align-items:center; gap:6px;
}
.tool-btn:hover{border-color:var(--accent); color:var(--accent-d)}
.tool-btn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.tool-btn.primary:hover{background:var(--accent-d)}

.follow-item{
  display:grid; grid-template-columns:34px 1.35fr 1fr 1.5fr auto; gap:10px; align-items:center;
  padding:13px 16px; border-bottom:1px solid var(--line2); width:100%; text-align:left;
  transition:background .15s;
}
.follow-item:hover{background:var(--accent-faint)}
.follow-item.sel{background:var(--accent-faint); box-shadow:inset 3px 0 0 var(--accent)}
.follow-item:last-child{border-bottom:none}
.follow-item .no{font-family:var(--mono); font-weight:800; color:var(--ink3); font-size:14px}
.follow-item .who b{font-size:13.5px; display:block}
.follow-item .who span{font-size:11px; color:var(--ink3); font-family:var(--mono)}
.follow-item .prog{font-size:11.5px; color:var(--ink2)}
.follow-item .prog b{font-family:var(--mono); color:var(--ink); font-size:12.5px}
.mini-bar{height:5px; border-radius:99px; background:var(--line2); margin-top:5px; overflow:hidden; width:90%}
.mini-bar i{display:block; height:100%; background:var(--accent); border-radius:99px}
.follow-item .act{font-size:11.5px; color:var(--ink2); line-height:1.5}
@media (max-width:760px){
  .follow-item{grid-template-columns:26px 1.4fr 1fr auto}
  .follow-item .act{display:none}
}

/* profile drawer */
.profile-drawer{position:sticky; top:16px}
.pd-hero{padding:16px; border-bottom:1px solid var(--line2)}
.pd-hero .top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.pd-hero .ava{width:46px; height:46px; border-radius:14px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:16px}
.pd-hero b{font-size:16px; display:block}
.pd-hero .ph{font-size:12px; color:var(--ink2); font-family:var(--mono)}
.pd-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pd-grid .cell{background:var(--bg); border:1px solid var(--line2); border-radius:10px; padding:9px 11px}
.pd-grid .cell span{font-size:10.5px; color:var(--ink3); display:block}
.pd-grid .cell b{font-size:14px; font-family:var(--mono)}
.pd-sec{padding:14px 16px; border-bottom:1px solid var(--line2)}
.pd-sec h6{font-size:11px; color:var(--ink3); letter-spacing:.1em; margin-bottom:9px; font-weight:700}
.weak-row{display:flex; align-items:center; gap:9px; margin-bottom:8px; font-size:12px}
.weak-row .wn{width:76px; flex:none; color:var(--ink2)}
.weak-row .wb{flex:1; height:6px; border-radius:99px; background:var(--line2); overflow:hidden}
.weak-row .wb i{display:block; height:100%; border-radius:99px}
.weak-row .wv{width:40px; text-align:right; font-family:var(--mono); font-size:11.5px; color:var(--ink2)}
.tl{position:relative; padding-left:16px}
.tl::before{content:""; position:absolute; left:4px; top:6px; bottom:6px; width:2px; background:var(--line2)}
.tl-item{position:relative; padding-bottom:11px; font-size:12px; color:var(--ink2)}
.tl-item::before{content:""; position:absolute; left:-15.5px; top:4px; width:9px; height:9px; border-radius:50%;
  background:var(--surface); border:2px solid var(--accent)}
.tl-item.warn::before{border-color:var(--warn)}
.tl-item.risk::before{border-color:var(--risk)}
.tl-item b{color:var(--ink); font-weight:600}
.tl-item .tm{font-family:var(--mono); font-size:10.5px; color:var(--ink3); margin-right:6px}
.pd-action{margin:14px 16px 16px; padding:13px 14px; border-radius:12px;
  background:var(--accent-faint); border:1px dashed #c2d2ea; font-size:12.5px; color:#274067}
.pd-action b{color:var(--accent-d)}
.pd-btns{display:flex; gap:8px; padding:0 16px 16px}
.pd-btns .tool-btn{flex:1; justify-content:center}

/* 学员列表表 */
.stu-table{width:100%; border-collapse:collapse; font-size:12.5px}
.stu-table th{
  text-align:left; padding:10px 14px; font-size:11px; color:var(--ink3); letter-spacing:.06em;
  border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; font-weight:600;
}
.stu-table td{padding:11px 14px; border-bottom:1px solid var(--line2); vertical-align:middle}
.stu-table tr:hover td{background:var(--accent-faint)}
.stu-table .mono{font-family:var(--mono)}
.table-wrap{overflow-x:auto}

/* CRM 同步示意 */
.crm-flow{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch; margin-bottom:16px}
@media (max-width:800px){.crm-flow{grid-template-columns:1fr}}
.crm-node{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:15px 17px}
.crm-node h5{font-size:13.5px; margin-bottom:4px}
.crm-node p{font-size:12px; color:var(--ink2)}
.crm-node code{font-family:var(--mono); font-size:11px; background:var(--bg); padding:2px 7px; border-radius:6px; border:1px solid var(--line2)}
.crm-arrow{display:grid; place-items:center; color:var(--accent); font-size:22px; font-weight:700}
.sync-log{font-family:var(--mono); font-size:12px; background:#23221e; color:#b8c9bd; border-radius:12px;
  padding:15px 17px; line-height:1.9; min-height:120px}
.sync-log .ok{color:#8fb2e8}
.sync-log .tm{color:#6f6c61}

/* 经营汇总 */
.boss-quote{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:12px; padding:14px 17px; font-size:13.5px; color:#3d3c35; margin-bottom:16px;
}
.funnel-bars{display:flex; flex-direction:column; gap:9px}
.fn-row{display:grid; grid-template-columns:110px 1fr 54px; gap:10px; align-items:center; font-size:12.5px}
.fn-row .fb{height:22px; border-radius:6px; background:var(--accent-soft); overflow:hidden}
.fn-row .fb i{display:block; height:100%; background:linear-gradient(90deg,#3f6fbf,#2358b8); border-radius:6px}
.fn-row .fv{font-family:var(--mono); font-weight:700; text-align:right}
.fn-row.leak .fb i{background:linear-gradient(90deg,#d08a52,#bd5245)}
.fn-row.leak .fv{color:var(--risk)}