/* ===== LingoLoop 练习中心 设计系统 ===== */
:root{
  --brand:#6366f1; --brand2:#8b5cf6; --brand3:#ec4899;
  --ink:#1e2333; --muted:#6b7280; --line:#e8eaf0; --bg:#f5f6fb;
  --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444; --card:#fff;
  --shadow:0 10px 30px rgba(30,35,51,.08); --shadow-sm:0 4px 14px rgba(30,35,51,.06);
  --r:18px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.hidden{display:none !important}
.muted{color:var(--muted);font-size:14px}
.gradient-text{background:linear-gradient(90deg,var(--brand),var(--brand2),var(--brand3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* 顶栏 */
.practop{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.plogo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px}
.plogo .dot{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 6px 16px rgba(99,102,241,.35)}
.pnav{display:flex;align-items:center;gap:8px}
.pu-pill{font-size:13px;color:var(--muted);background:#f0f1f7;padding:5px 12px;border-radius:999px;font-weight:600}
.pbtn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;transition:.18s}
.pbtn:hover{border-color:var(--brand);color:var(--brand)}
.pbtn.sm{padding:5px 11px;font-size:12px}

.container{max-width:1080px;margin:0 auto;padding:26px 20px 60px}

/* ===== 引导（未登录） ===== */
.onboard{min-height:72vh;display:grid;place-items:center}
.ob-card{width:100%;max-width:560px;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:34px 32px}
.ob-hero{text-align:center;margin-bottom:24px}
.ob-hero .badge{display:inline-block;font-size:12px;font-weight:700;color:var(--brand);background:#eef0ff;padding:5px 14px;border-radius:999px;margin-bottom:14px}
.ob-hero h1{margin:0 0 8px;font-size:27px;line-height:1.3}
.ob-hero p{margin:0;color:var(--muted)}
.field{margin-bottom:18px}
.field>label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
.f-input{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:14px;font-size:15px;outline:none;transition:.18s;background:#fbfbfe}
.f-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(99,102,241,.12)}
.lang-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lang-opt{border:1.5px solid var(--line);border-radius:14px;padding:12px 6px;text-align:center;cursor:pointer;transition:.18s;background:#fbfbfe}
.lang-opt .fl{font-size:22px}.lang-opt .lt{font-size:13px;font-weight:600;margin-top:3px}
.lang-opt.active{border-color:var(--brand);background:#eef0ff;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.level-opt{border:1.5px solid var(--line);border-radius:12px;padding:11px 4px;text-align:center;cursor:pointer;font-weight:700;transition:.18s;background:#fbfbfe}
.level-opt small{display:block;font-size:10px;color:var(--muted);font-weight:500}
.level-opt.active{border-color:var(--brand);background:#eef0ff;color:var(--brand)}
.ob-feats{display:flex;gap:10px;margin-top:22px}
.ob-feat{flex:1;text-align:center;background:#f8f9ff;border-radius:14px;padding:12px 8px;font-size:12.5px;color:var(--muted)}
.ob-feat b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.btn-primary{width:100%;margin-top:22px;border:0;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  font-size:16px;font-weight:700;padding:14px;border-radius:14px;box-shadow:0 10px 24px rgba(99,102,241,.35);transition:.18s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(99,102,241,.45)}

/* ===== 情景库 ===== */
.lib-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:6px;flex-wrap:wrap;gap:10px}
.lib-head h2{margin:0;font-size:23px}
.lib-head .sub{color:var(--muted);font-size:14px}
.lib-bar{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px;align-items:center}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;color:var(--muted)}
.chip:hover{border-color:var(--brand)}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.ghost{background:#f0f1f7;border-color:transparent}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px}
.sc-card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm);border:1px solid #f0f1f6;
  cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.sc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e3e0fb}
.sc-card .topline{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sc-ico{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#eef0ff,#f3e9ff);display:grid;place-items:center;font-size:22px;flex:none}
.sc-card h4{margin:0;font-size:16px}
.sc-tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.tag.lang{background:#eef0ff;color:#4f46e5}.tag.cefr{background:#ecfdf5;color:#059669}.tag.cat{background:#fef3f2;color:#e11d48}
.sc-desc{font-size:13px;color:var(--muted);min-height:34px;margin:4px 0 10px}
.sc-goals{font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:9px}
.sc-goals b{color:var(--ink)}
.sc-start{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:grid;place-items:center;font-size:16px;box-shadow:0 6px 14px rgba(99,102,241,.3);opacity:0;transform:scale(.8);transition:.2s}
.sc-card:hover .sc-start{opacity:1;transform:scale(1)}
.sc-custom{background:linear-gradient(135deg,#fbfbff,#f6f1ff);border:1.5px dashed #c9c4f5}
.sc-custom .sc-ico{background:#fff}

/* ===== 练习房 ===== */
.room{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.room-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow-sm)}
.room-head .rh-left{display:flex;align-items:center;gap:12px}
.back-btn{border:1.5px solid var(--line);background:#fff;width:36px;height:36px;border-radius:10px;font-size:16px}
.rh-title{font-weight:800;font-size:17px}
.rh-meta{font-size:12.5px;color:var(--muted)}
.rh-right{display:flex;align-items:center;gap:10px}
.timer{font-variant-numeric:tabular-nums;font-weight:700;background:#f0f1f7;padding:6px 12px;border-radius:999px;font-size:13px}
.chat{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);padding:20px;min-height:460px;max-height:62vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.bubble{max-width:80%;padding:12px 15px;border-radius:16px;font-size:15px;position:relative;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bubble.ai{align-self:flex-start;background:#f3f4fb;border-bottom-left-radius:5px}
.bubble.me{align-self:flex-end;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-bottom-right-radius:5px}
.bubble .who{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:3px}
.bubble.ai .who{color:#818cf8}
.bubble .corr{display:block;margin-top:6px;font-size:12.5px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:6px 9px;border-radius:10px}
.bubble .corr b{color:#b91c1c}
.typing{display:flex;gap:4px;align-self:flex-start;background:#f3f4fb;padding:14px 16px;border-radius:16px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* 侧栏 */
.room-side{display:flex;flex-direction:column;gap:16px}
.panel{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);padding:18px}
.panel h5{margin:0 0 12px;font-size:14px;display:flex;align-items:center;gap:7px}
.partner{text-align:center}
.avatar{width:74px;height:74px;border-radius:50%;margin:0 auto 10px;background:linear-gradient(135deg,var(--brand),var(--brand3));
  display:grid;place-items:center;font-size:34px;position:relative;box-shadow:0 8px 20px rgba(99,102,241,.3)}
.avatar.speaking::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--brand);animation:ring 1.2s infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.partner .pname{font-weight:800;font-size:16px}
.partner .pdesc{font-size:12.5px;color:var(--muted)}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.metric{background:#f8f9ff;border-radius:12px;padding:10px;text-align:center}
.metric b{display:block;font-size:20px;font-weight:800;color:var(--brand)}
.metric span{font-size:11px;color:var(--muted)}
.vocab-chips{display:flex;flex-wrap:wrap;gap:6px}
.vchip{font-size:12px;font-weight:600;background:#eef0ff;color:#4f46e5;padding:4px 10px;border-radius:999px}
.goals-list{margin:0;padding-left:18px;font-size:13px;color:var(--muted)}
.goals-list li{margin:4px 0}

/* 输入条 */
.composer{display:flex;gap:10px;margin-top:14px;align-items:center}
.composer input{flex:1;padding:13px 16px;border:1.5px solid var(--line);border-radius:14px;font-size:15px;outline:none;background:#fbfbfe}
.composer input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(99,102,241,.12)}
.mic-btn,.send-btn{border:0;border-radius:14px;padding:0 18px;height:48px;font-weight:700;font-size:14px;transition:.18s}
.mic-btn{background:#eef0ff;color:var(--brand);min-width:54px;font-size:20px}
.mic-btn.on{background:var(--bad);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(239,68,68,.25)}}
.send-btn{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 8px 18px rgba(99,102,241,.3)}
.hint-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--muted)}

/* ===== 报告弹层 ===== */
.overlay{position:fixed;inset:0;background:rgba(20,22,34,.55);backdrop-filter:blur(4px);z-index:100;
  display:grid;place-items:center;padding:20px;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.report-card{background:#fff;border-radius:24px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;padding:30px;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.report-card .rc-head{text-align:center;margin-bottom:18px}
.score-ring{width:128px;height:128px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;
  background:conic-gradient(var(--brand) calc(var(--p)*1%),#eef0f7 0);position:relative}
.score-ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}
.score-ring b{position:relative;font-size:34px;font-weight:800;color:var(--brand)}
.score-ring small{position:relative;display:block;font-size:12px;color:var(--muted)}
.rc-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.rc-kpi .k{background:#f8f9ff;border-radius:14px;padding:12px 6px;text-align:center}
.rc-kpi .k b{display:block;font-size:20px;font-weight:800}.rc-kpi .k span{font-size:11px;color:var(--muted)}
.err-item{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:9px}
.err-item .line{font-size:14px}.err-item .bad{color:var(--bad);text-decoration:line-through}
.err-item .good{color:var(--ok);font-weight:700}.err-item .typ{font-size:11px;background:#fee2e2;color:#b91c1c;padding:1px 8px;border-radius:999px;margin-left:6px}
.err-item .ex{font-size:12.5px;color:var(--muted);margin-top:4px}
.rc-actions{display:flex;gap:10px;margin-top:18px}
.rc-actions button{flex:1;border:0;border-radius:14px;padding:13px;font-weight:700;font-size:14px}
.btn-ghost{background:#f0f1f7;color:var(--ink)}.btn-main{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}

/* 提示条 */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:12px;font-size:14px;z-index:200;box-shadow:var(--shadow);animation:pop .25s}
.review-list .rv{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 0;gap:10px}
.review-list .rv .info b{color:var(--bad)}.review-list .rv .info .c{color:var(--ok);font-weight:700;margin-left:6px}

@media(max-width:860px){
  .room{grid-template-columns:1fr}
  .lang-grid{grid-template-columns:repeat(4,1fr)}
  .level-grid{grid-template-columns:repeat(3,1fr)}
  .rc-kpi{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .pnav .pbtn{display:none}
  .lib-grid{grid-template-columns:1fr}
  .ob-feats{flex-direction:column}
}