/* AI 导购教练 · 培训 1.0 · 双端原型 V1.0 —— 视觉定义（逐字取自原型 V1.0，未改动）
   本文件是原型 CSS 的复制件：产品定义了视觉，实现侧不改。 */
:root{
  --bg:#FBFAF8;--surface:#FFFFFF;--surface-2:#F4F1EB;
  --ink:#16181D;--ink-2:#3D424B;--muted:#71787F;
  --line:#E7E3DC;--line-2:#D8D3C9;
  --accent:#0ABAB5;--accent-2:#067F7C;--accent-soft:#DFF3F2;
  --warm:#C2643A;--warm-soft:#FBEEE6;
  --dark:#081A1E;--dark-2:#0E262B;
  --ok:#3F8F5B;--ok-soft:#E7F2EA;--warn:#C2643A;--danger:#B4443C;--danger-soft:#F8E9E7;--info:#3B5B8C;--info-soft:#EAF0F8;
  --r-s:10px;--r-m:16px;--r-l:24px;
  --sh:0 1px 2px rgba(22,24,29,.05),0 4px 14px rgba(22,24,29,.04);
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#EFEDE8;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;display:flex;overflow:hidden}
button{font:inherit;border:none;background:none;color:inherit;cursor:pointer}
.serif{font-family:var(--serif)}
.side{width:296px;flex:0 0 296px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;height:100vh}
.side-hd{padding:16px 20px 12px;border-bottom:1px solid var(--line)}
.side-hd .bt{display:flex;align-items:center;gap:10px}
.mark{width:36px;height:36px;border-radius:9px;background:var(--dark);color:#7CD8D4;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px;font-weight:700;flex:0 0 auto}
.side-hd h1{font-family:var(--serif);font-size:16.5px;font-weight:700;letter-spacing:.02em}
.side-hd p{font-size:11px;color:var(--muted);margin-top:2px}
.role-sw{display:flex;margin:11px 14px 0;background:var(--surface-2);border-radius:100px;padding:4px;gap:4px}
.role-sw button{flex:1;padding:8px 0;border-radius:100px;font-size:12.5px;font-weight:700;color:var(--muted);transition:.18s}
.role-sw button.on{background:var(--dark);color:#F0F4F4;box-shadow:0 3px 10px rgba(8,26,30,.28)}
.side-sub{padding:10px 20px;font-size:11px;color:var(--muted);letter-spacing:.06em;border-bottom:1px solid var(--line);background:var(--surface-2)}
.side-nav{flex:1;overflow-y:auto;padding:9px 11px 20px}
.navgrp{display:none}
.navgrp.on{display:block}
.grp-t{font-size:11px;color:var(--muted);letter-spacing:.08em;padding:9px 10px 5px;display:flex;align-items:center;gap:6px}
.grp-t .n{width:16px;height:16px;border-radius:4px;background:var(--accent-soft);color:var(--accent-2);font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.nav-i{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:.16s;width:100%;text-align:left}
.nav-i:hover{background:var(--surface-2)}
.nav-i.on{background:var(--accent-soft);color:var(--accent-2);font-weight:600}
.nav-i .pn{font-size:9.5px;color:var(--muted);font-family:ui-monospace,Consolas,monospace;min-width:20px}
.nav-i.on .pn{color:var(--accent-2)}
.nav-i .star{margin-left:auto;font-size:11px;color:var(--warm)}
.side-ft{padding:11px 20px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);background:var(--surface-2);line-height:1.7}
.side-ft b{color:var(--ink-2)}
.pal{display:flex;gap:4px;margin-top:7px}
.pal i{width:17px;height:17px;border-radius:5px;display:block}
.stage{flex:1;height:100vh;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:20px 18px 56px;gap:12px}
.stage-hd{text-align:center;max-width:700px}
.stage-hd h2{font-family:var(--serif);font-size:18.5px;font-weight:700}
.stage-hd p{font-size:12px;color:var(--muted);margin-top:4px}
.hint{font-size:11.5px;color:var(--muted);background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-s);padding:6px 14px;text-align:center}
.phone{width:390px;height:844px;flex:0 0 auto;background:var(--bg);border-radius:46px;box-shadow:0 30px 70px rgba(22,24,29,.18),0 0 0 11px #17191D,0 0 0 13px #2C2F35;position:relative;overflow:hidden;display:flex;flex-direction:column}
.sb{height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:6px 26px 0;font-size:12px;font-weight:600;position:relative;z-index:3}
.sb .nt{width:78px;height:24px;background:#17191D;border-radius:14px;position:absolute;left:50%;transform:translateX(-50%);top:8px}
.screen{display:none;flex-direction:column;height:100%;overflow:hidden}
.screen.on{display:flex}
.nv{height:50px;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.nv-t{font-family:var(--serif);font-size:16.5px;font-weight:700;flex:1;text-align:center;letter-spacing:.02em}
.nv-b{width:34px;display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.nv-b.r{justify-content:flex-end}
.body{flex:1;overflow-y:auto;padding:13px 16px 18px}
.body::-webkit-scrollbar{width:4px}
.body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:2px}
.body.np{padding:0}
.tb{height:58px;flex:0 0 auto;display:flex;background:var(--surface);border-top:1px solid var(--line);position:relative;z-index:5}
.tb div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;color:var(--muted);cursor:pointer}
.tb div.on{color:var(--accent-2)}
.tb svg{width:20px;height:20px}
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic.s{width:14px;height:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:13px;box-shadow:var(--sh)}
.card+.card{margin-top:11px}
.ch{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ch h3{font-family:var(--serif);font-size:14.5px;font-weight:700}
.ch .sub{font-size:11px;color:var(--muted)}
.ch .rt{margin-left:auto;font-size:11.5px;color:var(--accent-2);display:flex;align-items:center;gap:2px;cursor:pointer}
.eyebrow{font-size:10px;letter-spacing:.14em;color:var(--accent-2);font-weight:700;text-transform:uppercase}
.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:100px;font-size:10.5px;font-weight:600;white-space:nowrap}
.t-a{background:var(--accent-soft);color:var(--accent-2)}
.t-w{background:var(--warm-soft);color:var(--warm)}
.t-o{background:var(--ok-soft);color:var(--ok)}
.t-d{background:var(--danger-soft);color:var(--danger)}
.t-i{background:var(--info-soft);color:var(--info)}
.t-n{background:var(--surface-2);color:var(--muted)}
.t-k{background:var(--dark);color:#7CD8D4}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;transition:.18s}
.btn-p{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(6,127,124,.22)}
.btn-p:hover{background:var(--accent-2)}
.btn-g{border:1.5px solid var(--line-2);color:var(--ink-2)}
.btn-g:hover{border-color:var(--accent);color:var(--accent-2)}
.btn-k{background:var(--dark);color:#F0F4F4}
.btn.dg{background:var(--danger);color:#fff}
.btn.full{width:100%}
.btn.sm{padding:6px 12px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.seg{display:flex;background:var(--surface-2);border-radius:100px;padding:3px;gap:2px}
.seg button{flex:1;padding:6px 0;border-radius:100px;font-size:12.5px;color:var(--muted);font-weight:600}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(22,24,29,.08)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:100px;border:1px solid var(--line-2);background:var(--surface);font-size:12px;color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:.15s}
.chip.on{background:var(--dark);border-color:var(--dark);color:#F0F4F4}
.row{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--surface-2);border-radius:var(--r-s);margin-bottom:7px;cursor:pointer;transition:.15s}
.row:hover{background:#EDE9E2}
.row.sel{background:var(--accent-soft);border:1px solid var(--accent)}
.row .av{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px;font-weight:700;flex:0 0 auto}
.row .tx{flex:1;min-width:0}
.row .tx b{font-size:13.5px;font-weight:600;display:block}
.row .tx span{font-size:11px;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:11px 12px}
.kpi b{display:block;font-family:var(--serif);font-size:21px;line-height:1.15}
.kpi span{font-size:10.5px;color:var(--muted)}
.kpi .dl{font-size:10.5px;font-weight:600;margin-top:2px}
.up{color:var(--danger)}.down{color:var(--ok)}
.bar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.bar.w i{background:var(--warm)}
.bar.d i{background:var(--dark)}
.lbl{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:5px;color:var(--ink-2)}
.note{background:var(--warm-soft);border-left:3px solid var(--warm);border-radius:6px;padding:9px 11px;font-size:11.5px;line-height:1.65;color:#7A4326}
.note.a{background:var(--accent-soft);border-left-color:var(--accent);color:#0A5F5C}
.note.i{background:var(--info-soft);border-left-color:var(--info);color:#2A4570}
.note.k{background:var(--dark);border-left-color:#7CD8D4;color:#D6E3E4}
.note+.note{margin-top:8px}
.note b{font-weight:700}
.mini{font-size:11px;color:var(--muted);line-height:1.6}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dot.w{background:var(--warn);box-shadow:0 0 0 3px rgba(194,100,58,.16)}
.dot.o{background:var(--ok);box-shadow:0 0 0 3px rgba(63,143,91,.16)}
.hd-dark{background:linear-gradient(160deg,var(--dark-2),var(--dark));color:#F0F4F4;padding:15px;border-radius:var(--r-m);margin-bottom:11px;position:relative;overflow:hidden}
.hd-dark::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(10,186,181,.22),transparent 70%)}
.hd-dark .eyebrow{color:#7CD8D4}
.hd-dark h3{font-family:var(--serif);font-size:17px;font-weight:700;margin:5px 0 3px}
.hd-dark p{font-size:11.5px;color:#99A7AB}
.metricline{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12.5px;gap:10px}
.metricline:last-child{border-bottom:none}
.metricline b{font-family:var(--serif);font-size:15px}
.bub{max-width:84%;padding:10px 13px;border-radius:15px;font-size:12.5px;line-height:1.72;margin-bottom:9px;clear:both}
.bub.ai{background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:4px;float:left}
.bub.me{background:var(--accent);color:#fff;border-bottom-right-radius:4px;float:right}
.bub.tip{background:var(--warm-soft);border:1px solid var(--warm);color:#7A4326;float:left;font-size:11.5px}
.bub .t{font-size:9.5px;opacity:.55;margin-top:4px;display:block;clear:both}
.clear{clear:both;height:1px}
.sw{width:38px;height:22px;border-radius:11px;background:var(--line-2);position:relative;transition:.2s;flex:0 0 auto}
.sw.on{background:var(--accent)}
.sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on i{left:19px}
.ear{position:absolute;left:14px;right:14px;top:52px;background:rgba(8,26,30,.92);color:#D6E3E4;border-radius:14px;padding:12px 14px;z-index:12;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(8,26,30,.3)}
.ear .eh{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.1em;color:#7CD8D4;font-weight:700}
.ear .et{font-size:13px;line-height:1.6;margin-top:7px;color:#F0F4F4}
.ear .ef{font-size:10px;color:#8C9DA1;margin-top:6px}
.empty{text-align:center;padding:24px 12px;color:var(--muted);font-size:12px}
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:13px;margin-bottom:11px}
.q .qn{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.q .qn .nb{width:20px;height:20px;border-radius:6px;background:var(--dark);color:#7CD8D4;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.q .qn b{font-size:13.5px;font-family:var(--serif)}
.q .qh{font-size:11px;color:var(--muted);margin-bottom:9px;padding-left:27px}
.q .qh em{font-style:normal;color:var(--accent-2)}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1.5px solid var(--line);border-radius:var(--r-s);font-size:12.5px;cursor:pointer;transition:.15s;background:var(--surface)}
.opt:hover{border-color:var(--line-2);background:var(--surface-2)}
.opt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);font-weight:600}
.opt .bx{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line-2);flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--surface)}
.opt .bx.rd{border-radius:50%}
.opt.on .bx{background:var(--accent);border-color:var(--accent)}
.opt.on .bx svg{stroke:#fff;width:11px;height:11px;stroke-width:3}
.opt .bx svg{width:11px;height:11px;stroke:transparent}
.ev{background:var(--surface-2);border-radius:var(--r-s);padding:10px 11px;margin-top:8px;border-left:3px solid var(--warn)}
.ev .eh{font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:5px}
.ev .eq{font-size:12px;color:var(--ink);line-height:1.7;font-family:var(--serif)}
.ev .eq b{background:#FBE3C8;padding:0 2px;border-radius:3px;font-weight:400}
.ev .es{font-size:11.5px;color:var(--accent-2);margin-top:7px;padding-top:7px;border-top:1px dashed var(--line-2)}
.ev .es i{font-style:normal;color:var(--muted);display:block;font-size:10px;margin-bottom:2px}
.ev.plus{border-left-color:var(--ok)}
.dim{width:100%;height:8px;display:flex;align-items:center;gap:8px;margin-bottom:9px}
.dim .dn{font-size:11.5px;flex:0 0 56px;color:var(--ink-2)}
.dim .db{flex:1;height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.dim .db i{display:block;height:100%;border-radius:4px}
.dim .dv{font-family:var(--serif);font-size:13.5px;flex:0 0 30px;text-align:right;font-weight:700}
.pf{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.pf span{font-size:10px;padding:2px 7px;border-radius:5px;background:var(--surface-2);color:var(--muted)}
.pf span.k{background:var(--dark);color:#7CD8D4}
.pill{display:flex;align-items:center;gap:7px;background:var(--surface-2);border-radius:100px;padding:7px 13px;font-size:12px;color:var(--ink-2)}
.lock{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:5px 9px;margin-top:7px}
.ftx{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);background:var(--dark);color:#F0F4F4;padding:11px 20px;border-radius:100px;font-size:12.5px;z-index:99;transition:.28s;box-shadow:0 10px 30px rgba(8,26,30,.3);opacity:0}
.ftx.on{transform:translateX(-50%) translateY(0);opacity:1}
.wxtext{background:var(--surface-2);border-radius:var(--r-s);padding:12px;font-size:12.5px;line-height:1.8}

/* ── 实现侧新增：四态（加载 / 错误 / 空态 / 权限不足）与演示控制台 ── */
.state-wrap{padding:8px 0 4px}
.sk{background:linear-gradient(90deg,var(--surface-2) 25%,#EDE9E2 37%,var(--surface-2) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:var(--r-s);height:56px;margin-bottom:9px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.state{text-align:center;padding:30px 16px;background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-m)}
.state .si{width:44px;height:44px;border-radius:50%;margin:0 auto 11px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted)}
.state.err .si{background:var(--danger-soft);color:var(--danger)}
.state.deny .si{background:var(--info-soft);color:var(--info)}
.state h4{font-family:var(--serif);font-size:14.5px;margin-bottom:5px}
.state p{font-size:11.5px;color:var(--muted);line-height:1.7;margin-bottom:11px}
.state code{font-family:ui-monospace,Consolas,monospace;font-size:11px;background:var(--surface-2);padding:2px 6px;border-radius:4px;color:var(--ink-2)}
.console{width:390px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--sh);padding:11px 13px}
.console .ct{font-size:11px;color:var(--muted);letter-spacing:.06em;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.console .cr{display:flex;gap:6px;flex-wrap:wrap}
.console .cr button{font-size:11px;padding:5px 11px;border-radius:100px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface)}
.console .cr button.on{background:var(--dark);color:#F0F4F4;border-color:var(--dark)}
.screen-caption{font-size:11px;color:var(--muted);text-align:center;margin-top:2px}
.screen-caption b{color:var(--ink-2)}