/* AI 语伴 · 样式（移动端优先，浅色 + 深色自适应） */
:root{
  --bg:#f6f6f4; --card:#ffffff; --ink:#1c1c1a; --ink2:#4b4b46; --mut:#7b7a72;
  --line:rgba(0,0,0,.10); --line2:rgba(0,0,0,.18);
  --brand:#1f6fb2; --brand-soft:#e8f2fb; --brand-line:#bcd9f0;
  --ok:#0f6e56; --ok-soft:#e4f5ee; --warn:#8a5a12; --warn-soft:#fdf1dd;
  --bad:#b3261e; --bad-soft:#fdecea;
  --r:12px; --r-lg:16px; --r-xl:20px;
  --sh:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --tab-h:58px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#131417; --card:#1c1e22; --ink:#f1f1ee; --ink2:#c3c4bf; --mut:#8e8f88;
    --line:rgba(255,255,255,.13); --line2:rgba(255,255,255,.24);
    --brand:#63a8e0; --brand-soft:#17293a; --brand-line:#2a4d70;
    --ok:#6fd3b0; --ok-soft:#14302a; --warn:#e0b568; --warn-soft:#332711;
    --bad:#f0918a; --bad-soft:#361917;
    --sh:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0}
img{display:block}
.hidden{display:none !important}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.spacer{flex:1}
.center{text-align:center}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.app{max-width:480px; margin:0 auto; height:100vh; height:100dvh; display:flex; flex-direction:column; background:var(--bg)}
@media (min-width:520px){
  body{background:#ececes}
  body{background:color-mix(in srgb, var(--bg) 82%, #888)}
  .app{box-shadow:var(--sh); border-left:1px solid var(--line); border-right:1px solid var(--line)}
}
.topbar{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bg); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:8px}
.logo{width:22px; height:22px; border-radius:7px; background:var(--brand); position:relative; flex:none}
.logo::after{content:""; position:absolute; inset:6px 5px; border-radius:2px; background:var(--bg)}
.brand-name{font-weight:600; letter-spacing:.2px}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:5px 11px; background:var(--card)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none}
.dot.demo{background:var(--warn)} .dot.off{background:var(--mut)}

#main{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 16px 20px}
.page{padding-top:6px}
.hero{margin:10px 2px 6px}
.hero h1{margin:0 0 4px; font-size:21px; font-weight:600; letter-spacing:.2px}
.hero p{margin:0; color:var(--mut); font-size:13.5px}
.sec-title{display:flex; align-items:baseline; gap:8px; margin:20px 2px 8px; font-size:13px; color:var(--mut)}
.sec-note{font-size:12px; color:var(--mut)}
.hint{margin:8px 2px 0; font-size:12.5px; color:var(--mut)}
.hidden-note{color:var(--bad)}

/* 语言选择 */
.lang-row{display:flex; gap:12px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:none; scroll-snap-type:x proximity}
.lang-row::-webkit-scrollbar{display:none}
.lang-item{flex:none; width:64px; display:flex; flex-direction:column; align-items:center; gap:5px; scroll-snap-align:center}
.lang-av{width:56px; height:56px; border-radius:50%; overflow:hidden; border:2px solid transparent; background:var(--brand-soft); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; color:var(--brand)}
.lang-av img{width:100%; height:100%; object-fit:cover}
.lang-item[aria-checked="true"] .lang-av{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.lang-name{font-size:12px; color:var(--ink2); white-space:nowrap}
.lang-item[aria-checked="true"] .lang-name{color:var(--brand); font-weight:500}

.partner-card{display:flex; align-items:center; gap:12px; margin:6px 0 4px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh)}
#partnerAvatar{width:52px; height:52px; border-radius:14px; object-fit:cover; flex:none; background:var(--brand-soft)}
.partner-info{min-width:0}
.partner-name{font-weight:600; font-size:15px}
.partner-intro{font-size:12.5px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.partner-tag{font-size:11.5px; color:var(--brand); background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:999px; padding:3px 9px; flex:none}

/* 场景 / 分类 chips */
.chips{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; font-size:13.5px; color:var(--ink2); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 14px}
.chip[aria-selected="true"], .chip[aria-checked="true"]{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand); font-weight:500}

/* 分段控件 */
.seg{display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.seg button{padding:9px 18px; font-size:14px; color:var(--ink2)}
.seg button[aria-checked="true"]{background:var(--brand); color:#fff}

/* 按钮 */
.btn{border:1px solid var(--line2); background:var(--card); border-radius:11px; padding:10px 14px; font-size:14.5px; transition:background .15s, border-color .15s}
.btn:hover{background:color-mix(in srgb, var(--card) 80%, var(--ink) 6%)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:color-mix(in srgb, var(--brand) 86%, #000)}
.btn-danger{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent)}
.btn-block{display:block; width:100%}
.btn-lg{padding:14px; font-size:16px; font-weight:500; border-radius:13px}
.btn-sm{padding:6px 11px; font-size:13px; border-radius:9px}
.iconbtn{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line)}
.iconbtn svg{width:19px; height:19px}
.callbar{padding:10px 16px; background:var(--bg); border-top:1px solid var(--line)}

/* 卡片 */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; margin-bottom:12px; box-shadow:var(--sh)}
.card-title{font-size:13px; color:var(--mut); margin-bottom:10px}
.field{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line)}
.field:last-of-type{border-bottom:0}
/* API Key 行：输入框默认明文、占满宽度，右侧一个「显示/隐藏」开关 */
.key-row{padding:10px 0 11px; border-bottom:1px solid var(--line)}
.key-label{display:block; font-size:14px; color:var(--ink2); margin-bottom:7px}
.key-input-wrap{display:flex; gap:8px; align-items:stretch}
.key-input-wrap input{flex:1 1 auto; min-width:0; background:var(--card); border:1px solid var(--line2);
  border-radius:9px; padding:9px 11px; font-size:13.5px; color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.key-input-wrap input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.key-eye{flex:0 0 auto; padding:9px 14px; font-size:13.5px; border:1px solid var(--line2);
  border-radius:9px; background:var(--card); color:var(--ink2); cursor:pointer; white-space:nowrap}
.key-eye:active{transform:scale(.98)}
.field select{background:var(--card); border:1px solid var(--line2); border-radius:9px; padding:7px 10px; font-size:14px; max-width:60%}
.switch-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.switch-row:last-of-type{border-bottom:0}
.switch-row input{width:44px; height:26px; appearance:none; background:var(--line2); border-radius:999px; position:relative; transition:background .15s; flex:none; cursor:pointer}
.switch-row input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .15s}
.switch-row input:checked{background:var(--brand)}
.switch-row input:checked::after{transform:translateX(18px)}
.kv{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:6px 0; color:var(--ink2)}
.kv b{font-weight:500; color:var(--ink); text-align:right; word-break:break-all}

/* 词库 */
.stat-row{display:flex; gap:10px; margin:12px 0 2px}
.stat{flex:1; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px}
.stat b{display:block; font-size:19px; font-weight:600}
.stat span{font-size:11.5px; color:var(--mut)}
/* 词库搜索（v4.14.0）：18 套词库逐个翻太麻烦，输入考试名直接筛 */
.bank-search{margin:14px 0 4px}
.bank-search input{width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line2); border-radius:999px; padding:11px 16px;
  -webkit-appearance:none; appearance:none}
.bank-search input::placeholder{color:var(--mut)}
.bank-search input:focus{outline:none; border-color:var(--brand-line); background:var(--brand-soft)}
.bank-list{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.bank-card{display:flex; align-items:center; gap:12px; text-align:left; width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:13px; box-shadow:var(--sh)}
.bank-card:active{background:color-mix(in srgb, var(--card) 92%, var(--brand) 8%)}
.bank-badge{width:42px; height:42px; flex:none; border-radius:12px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; border:1px solid var(--brand-line)}
.bank-main{flex:1; min-width:0}
.bank-name{font-weight:500; font-size:15px}
.bank-desc{font-size:12.5px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bank-meta{font-size:12px; color:var(--mut); flex:none; text-align:right}
.bar{height:4px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:6px}
.bar i{display:block; height:100%; background:var(--ok); border-radius:99px}

/* 底部 Tab */
.tabbar{display:flex; border-top:1px solid var(--line); background:var(--bg); padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1; padding:8px 0 6px; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11.5px; color:var(--mut)}
.tab svg{width:23px; height:23px}
.tab.active{color:var(--brand)}
.tab.active svg{stroke-width:2.2}

/* ============ 通话全屏 ============ */
.overlay{position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; background:var(--bg)}
.call-overlay{background:#101114; color:#fff}
.stage{flex:1; position:relative; overflow:hidden; background:#1b1d22}
.stage-avatar{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%}
.stage-vignette{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0) 38%, rgba(0,0,0,.42) 100%)}
.stage-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%, #2a3040 0%, #14161b 70%)}
.fb-initials{font-size:64px; font-weight:600; color:rgba(255,255,255,.9); letter-spacing:2px}
.nameplate{position:absolute; top:12px; left:14px; display:flex; flex-direction:column; gap:2px; text-shadow:0 1px 6px rgba(0,0,0,.6)}
.np-name{font-size:15px; font-weight:600}
.np-meta{font-size:11.5px; opacity:.8}
.speaking{position:absolute; top:14px; right:14px; display:flex; align-items:flex-end; gap:3px; height:18px; padding:5px 8px; background:rgba(0,0,0,.34); border-radius:99px; backdrop-filter:blur(6px)}
.speaking i{width:3px; background:#fff; border-radius:2px; height:6px; animation:eq .9s infinite ease-in-out}
.speaking i:nth-child(2){animation-delay:.15s} .speaking i:nth-child(3){animation-delay:.3s} .speaking i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:5px} 50%{height:15px}}

.self{position:absolute; right:12px; bottom:12px; width:92px; height:124px; border-radius:14px; overflow:hidden; background:#23262c; border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 18px rgba(0,0,0,.4)}
.self video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.self-off{position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:rgba(255,255,255,.7); font-size:10.5px; text-align:center}
.self.off .self-off{display:flex}
.self.off video{visibility:hidden}
.self-off svg{width:22px; height:22px}

.caption{position:absolute; left:0; right:0; bottom:0; padding:44px 16px 16px; background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.35) 55%, transparent)}
.cap-main{font-size:19px; line-height:1.42; font-weight:500; text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cap-roman{font-size:13px; opacity:.78; margin-top:2px; font-style:italic}
.cap-zh{font-size:13.5px; opacity:.86; margin-top:6px; border-top:1px solid rgba(255,255,255,.18); padding-top:6px}
.toast-slot{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{background:rgba(0,0,0,.78); color:#fff; font-size:13px; padding:9px 14px; border-radius:999px; max-width:80vw; text-align:center; backdrop-filter:blur(8px)}

.suggest-bar{display:flex; gap:8px; overflow-x:auto; padding:8px 12px; background:#16181d; scrollbar-width:none; align-items:center}
.suggest-bar::-webkit-scrollbar{display:none}
.sug{flex:none; font-size:13px; color:#cfe4f6; background:rgba(80,150,220,.16); border:1px solid rgba(120,180,230,.34); border-radius:999px; padding:7px 13px}
.sug small{display:block; font-size:10.5px; opacity:.7; margin-top:1px}

.type-bar{display:flex; gap:8px; padding:8px 12px 2px; background:#16181d}
.type-bar input{flex:1; min-width:0; background:#23262c; border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:11px; padding:11px 13px; font-size:16px}
.type-bar input::placeholder{color:rgba(255,255,255,.45)}

.callbar-wrap{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:12px 14px calc(14px + env(safe-area-inset-bottom)); background:#16181d}
.cbtn{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; color:rgba(255,255,255,.82); padding:6px 0; border-radius:12px; position:relative}
.cbtn svg{width:23px; height:23px}
.cbtn[aria-pressed="true"]{color:#fff; background:rgba(255,255,255,.10)}
.cbtn-hang{color:#ff8b82}
.cbtn-hang svg{transform:rotate(135deg)}
.badge-num{position:absolute; top:1px; right:calc(50% - 20px); background:var(--brand); color:#fff; font-size:9.5px; border-radius:99px; padding:0 5px; font-style:normal}
.cbtn.rec{color:#ff8b82}
.cbtn.rec svg{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.42}}

/* ============ 背单词 ============ */
.study-overlay{background:var(--bg)}
.study-head{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line)}
.study-title{flex:1; text-align:center; font-weight:500; font-size:15px}
.study-title small{display:block; font-size:11.5px; color:var(--mut); font-weight:400}
.study-body{flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; justify-content:center; gap:14px}
.study-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:flex; gap:10px; background:var(--bg)}
.study-foot .btn{flex:1}

.wordcard{position:relative; min-height:230px; perspective:1200px; cursor:pointer}
.wc-face{position:absolute; inset:0; border-radius:var(--r-xl); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; backface-visibility:hidden; transition:transform .45s cubic-bezier(.4,.2,.2,1)}
.wc-back{transform:rotateY(180deg); align-items:flex-start; justify-content:center; gap:12px; text-align:left}
.wordcard.flipped .wc-front{transform:rotateY(-180deg)}
.wordcard.flipped .wc-back{transform:rotateY(0)}
.wc-word{font-size:33px; font-weight:600; letter-spacing:.5px; text-align:center; word-break:break-word; line-height:1.25}
.wc-phon{font-size:14px; color:var(--mut)}
.wc-pos{font-size:12.5px; color:var(--brand); background:var(--brand-soft); border-radius:6px; padding:2px 8px}
.wc-zh{font-size:23px; font-weight:500}
.wc-ex{font-size:14.5px; line-height:1.6}
.wc-exz{font-size:13px; color:var(--mut)}
.wc-hintline{font-size:11.5px; color:var(--mut)}
.wc-div{width:100%; height:1px; background:var(--line)}
.flip-note{font-size:11.5px; color:var(--mut); text-align:center}
.q-head{font-size:13px; color:var(--mut); text-align:center}
.q-word{font-size:29px; font-weight:600; text-align:center; line-height:1.3}
.q-sub{font-size:13.5px; color:var(--mut); text-align:center; margin-top:4px}
.q-opts{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.q-opt{text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; font-size:15px}
.q-opt.right{border-color:var(--ok); background:var(--ok-soft); color:var(--ok)}
.q-opt.wrong{border-color:var(--bad); background:var(--bad-soft); color:var(--bad)}
.result-big{font-size:46px; font-weight:600; text-align:center; line-height:1.1}
.result-sub{text-align:center; color:var(--mut); font-size:13.5px}
.result-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* ============ 弹层 ============ */
.modal{position:fixed; inset:0; z-index:60; background:rgba(16,17,20,.5); display:flex; align-items:flex-end; justify-content:center}
@media (min-width:520px){.modal{align-items:center}}
.sheet{background:var(--card); width:100%; max-width:480px; max-height:88vh; overflow-y:auto; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
@media (min-width:520px){.sheet{border-radius:var(--r-xl)}}
.sheet h3{margin:0 0 4px; font-size:17px; font-weight:600}
.sheet .sub{color:var(--mut); font-size:12.5px; margin:0 0 14px}
.sheet-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.sheet-head h3{flex:1; margin:0}
.coach-block{border-radius:var(--r); padding:11px 12px; font-size:13.5px; margin-bottom:10px; background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 25%, transparent)}
.coach-ok{background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 25%, transparent); color:var(--ok)}
.coach-block .tag{display:inline-block; font-size:11px; background:var(--card); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); color:var(--warn); border-radius:6px; padding:1px 6px; margin-right:6px}
.coach-block ul{margin:0; padding:0; list-style:none}
.coach-block li{margin-bottom:9px}
.coach-block li:last-child{margin-bottom:0}
.badline{color:var(--bad); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--bad) 45%, transparent)}
.goodline{color:var(--ok); font-weight:500}
.whyline{display:block; color:var(--mut); font-size:12.5px; margin-top:3px}
.score-line{display:flex; align-items:baseline; gap:8px; margin:6px 0 12px}
.score-line b{font-size:36px; font-weight:600; color:var(--brand); line-height:1}
.score-line span{color:var(--mut); font-size:12.5px}
.sheet h4{margin:14px 0 6px; font-size:12.5px; color:var(--mut); font-weight:500}
.sum-list{margin:0; padding:0; list-style:none; font-size:14px}
.sum-list li{padding:8px 0; border-top:1px solid var(--line)}
.sum-list li:first-child{border-top:0}
.pill-tag{display:inline-block; font-size:11px; background:var(--brand-soft); color:var(--brand); border-radius:6px; padding:1px 7px; margin-right:7px}
.sheet .field input, .sheet .field select{background:var(--card); border:1px solid var(--line2); border-radius:9px; padding:9px 11px; font-size:14.5px; max-width:62%}
.sheet .field input{min-width:0}
.eng-list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.eng-pick{font-size:13px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink2)}
.eng-pick[aria-pressed="true"]{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand); font-weight:500}
.warn-box{background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 25%, transparent); color:var(--warn); border-radius:var(--r); padding:10px 12px; font-size:12.5px; line-height:1.6; margin-bottom:12px}
.ok-box{background:var(--ok-soft); border:1px solid color-mix(in srgb, var(--ok) 25%, transparent); color:var(--ok); border-radius:var(--r); padding:10px 12px; font-size:13px; margin-bottom:12px; word-break:break-all}
.bad-box{background:var(--bad-soft); border:1px solid color-mix(in srgb, var(--bad) 25%, transparent); color:var(--bad); border-radius:var(--r); padding:10px 12px; font-size:13px; margin-bottom:12px; word-break:break-all}

/* ============ v2 新增 ============ */
.stage-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 24%}
.stage-avatar{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 24%}

.listen-pill{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; align-items:center; gap:7px; background:rgba(0,0,0,.55); color:#fff; font-size:12.5px; padding:7px 14px; border-radius:999px; backdrop-filter:blur(10px); white-space:nowrap}
.rec-dot{width:8px; height:8px; border-radius:50%; background:#ff6b60; animation:blink 1s infinite; flex:none}
@keyframes blink{0%,100%{opacity:1} 50%{opacity:.25}}
.caption.has-listen .cap-main{padding-bottom:4px}

.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.btn-row .btn{flex:1; min-width:120px}

.memory-note{background:var(--ok-soft); border:1px solid color-mix(in srgb, var(--ok) 22%, transparent); color:var(--ok); border-radius:var(--r); padding:10px 12px; font-size:12.5px; line-height:1.6; margin:10px 0 2px}

.eng-strip{display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none}
.eng-strip::-webkit-scrollbar{display:none}
.eng-chip{flex:none; font-size:13px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink2); display:flex; align-items:center; gap:6px}
.eng-chip[aria-pressed="true"]{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand); font-weight:500}
.eng-chip .free-tag{font-size:10px; background:var(--ok-soft); color:var(--ok); border-radius:5px; padding:1px 5px; border:1px solid color-mix(in srgb, var(--ok) 25%, transparent)}

.call-history{display:flex; flex-direction:column; gap:8px}
.hist-item{display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:7px 0; border-bottom:1px solid var(--line)}
.hist-item:last-child{border-bottom:0}
.hist-item .m{color:var(--mut); font-size:12px; flex:none}

.opt-list{display:flex; flex-direction:column; gap:8px; margin:4px 0 12px}
.opt-row{display:flex; align-items:center; gap:10px; text-align:left; width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.opt-row[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft)}
.opt-row .t{flex:1; font-size:14.5px}
.opt-row .d{font-size:11.5px; color:var(--mut); display:block; margin-top:2px}
.src-note{font-size:11.5px; color:var(--mut); margin-top:6px; line-height:1.5}

.free-badge{display:inline-block; font-size:10.5px; background:var(--ok-soft); color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 25%, transparent); border-radius:5px; padding:1px 6px; margin-left:6px}

.word-ph{font-size:13.5px; color:var(--brand); margin-top:4px}
.word-phz{font-size:12.5px; color:var(--mut)}

/* 让静态形象看起来像"视频信号"而不是贴图：呼吸感的轻微推进 + 手持摄像头的细微位移 */
@keyframes camBreath{
  0%,100%{ transform:scale(1.005) translate3d(0,0,0) }
  22%{ transform:scale(1.016) translate3d(0.35%,-0.25%,0) }
  48%{ transform:scale(1.024) translate3d(-0.25%,0.2%,0) }
  74%{ transform:scale(1.014) translate3d(0.2%,0.35%,0) }
}
@keyframes talkGlow{
  0%,100%{ filter:brightness(1) saturate(1) }
  50%{ filter:brightness(1.05) saturate(1.02) }
}
.stage-avatar,.stage-video{
  animation:camBreath 15s ease-in-out infinite;
  will-change:transform;
  transform-origin:52% 28%;
}
.stage.talking .stage-avatar,.stage.talking .stage-video{
  animation:camBreath 8.5s ease-in-out infinite, talkGlow 1.7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .stage-avatar,.stage-video{animation:none}
}

/* ============ v3：通话与单词模块增强 ============ */

/* 字幕 / 点评挪到画面右上角，底部只留通话必需的操作，手机单手更好点 */
.stage-tools{position:absolute; top:12px; right:12px; display:flex; gap:8px; z-index:4}
.cbtn-mini{flex:none; width:54px; background:rgba(0,0,0,.42); color:#fff; border-radius:12px; padding:6px 0; backdrop-filter:blur(8px)}
.cbtn-mini svg{width:20px; height:20px}
.cbtn-mini[aria-pressed="true"]{background:rgba(255,255,255,.2); color:#fff}
.cbtn-mini .badge-num{right:4px; top:2px}

/* 麦克风电平：让用户"看见"它在听，而不是怀疑麦克风坏了 */
.mic-live{display:inline-flex; align-items:flex-end; gap:2px; height:13px; flex:none}
.mic-live i{width:3px; height:4px; border-radius:2px; background:rgba(255,255,255,.32); transition:height .09s linear, background .09s linear}
.mic-live i.on{background:#7ee0b0}
.mic-live i.on:nth-child(1){height:6px}
.mic-live i.on:nth-child(2){height:11px}
.mic-live i.on:nth-child(3){height:8px}
.mic-live i.on:nth-child(4){height:13px}
.mic-live i.on:nth-child(5){height:7px}

/* 自己画面：关闭时把文案写清楚，别让人以为是画面卡住 */
.self{cursor:pointer}
.self .self-off span{font-size:9.5px; line-height:1.25; padding:0 6px}

/* 底部 5 个按钮在 360px 窄屏上也要排得下 */
.callbar-wrap{gap:2px; padding-left:8px; padding-right:8px}
.callbar-wrap .cbtn{min-width:0}
.callbar-wrap .cbtn span{white-space:nowrap; font-size:10px}
.callbar-wrap .cbtn svg{width:22px; height:22px}

/* 单词页：自动播放读音开关 */
.word-tools{margin:12px 0 4px}
.switch-row.compact{border-bottom:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:10px 13px; font-size:14px}

/* 语音自检里的小字状态 */
#voiceDiag{line-height:1.75}

/* ============ v3.2：统计可点击 / 单词列表 / 间隔重复标签 / 安装提示 ============ */

/* 统计卡片现在是按钮，点开能看单词列表 */
button.stat{border:0; background:transparent; font:inherit; color:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .1s}
button.stat:active{transform:scale(.96)}
button.stat:hover{background:var(--brand-soft)}

/* 「已掌握 / 学习中 / 待复习」点开后的单词列表 */
.wordlist{max-height:52vh; overflow-y:auto; margin-top:6px; -webkit-overflow-scrolling:touch}
.wl-row{display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left;
  padding:9px 8px; border-bottom:1px solid var(--line); background:transparent; color:inherit;
  font:inherit; cursor:pointer; border-radius:8px}
.wl-row:active{background:var(--brand-soft)}
.wl-w{font-size:15px; font-weight:500; line-height:1.3}
.wl-z{font-size:12.5px; color:var(--mut); margin-top:2px; line-height:1.4}

/* 卡片上的「新词 / 复习」标签与发音按钮 */
.wc-tag{position:absolute; top:10px; left:12px; font-size:11px; padding:3px 9px; border-radius:99px; z-index:2}
.wc-tag.new{background:var(--brand-soft); color:var(--brand)}
.wc-tag.review{background:var(--warn-soft); color:var(--warn)}
.wc-sound{margin-top:12px; font-size:13px; color:var(--brand); background:var(--brand-soft);
  border:1px solid var(--brand-line); padding:7px 16px; border-radius:99px; cursor:pointer; font:inherit}
.wc-sound:active{transform:scale(.97)}

/* 添加到主屏幕的提示条（解决"输错地址进到股票雷达"的问题） */
.install-tip{display:flex; align-items:center; gap:8px; margin:0 16px 8px; padding:9px 12px;
  background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:var(--r);
  font-size:12.5px; color:var(--brand)}
.install-tip #installTipText{flex:1; line-height:1.5}
.tip-action{background:var(--brand); color:#fff; border:0; border-radius:8px; padding:6px 12px;
  font-size:12px; flex:none; font-family:inherit; cursor:pointer}
.tip-close{background:transparent; border:0; color:var(--brand); font-size:18px; padding:0 4px;
  flex:none; cursor:pointer; line-height:1}

/* 麦克风打不开时的帮助步骤 */
.mic-steps{margin:10px 0 4px; padding-left:20px; font-size:13px; color:var(--ink2); line-height:1.9}
.mic-steps li{margin-bottom:2px}

/* 语音诊断报告：等宽字体，方便截图对照 */
.diag-out{white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; line-height:1.7; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 12px; max-height:58vh; overflow-y:auto; -webkit-overflow-scrolling:touch}

@media (prefers-reduced-motion: reduce){
  .stage-avatar,.stage-video{animation:none}
}

/* ══════════════════════════════════════════════════════════════════
   视觉升级层
   目标：更干净、层次更清楚、细节更考究；
        手机与电脑用同一套内容与结构，但电脑上把宽度用起来（多列网格），
        而不是把手机界面简单拉长。
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f7f8fb; --card:#ffffff; --ink:#0f1419; --ink2:#414a56; --mut:#78838f;
  --line:rgba(15,20,25,.075); --line2:rgba(15,20,25,.15);
  --brand:#1667c9; --brand-soft:#edf4fd; --brand-line:#c9def8;
  --ok:#0b7257; --ok-soft:#e6f6f0; --warn:#8a5a12; --warn-soft:#fdf3e0;
  --bad:#c2261c; --bad-soft:#fdeceb;
  --r:14px; --r-lg:18px; --r-xl:24px;
  --sh:0 1px 2px rgba(15,20,25,.04), 0 2px 10px rgba(15,20,25,.045);
  --sh-hi:0 2px 6px rgba(15,20,25,.05), 0 14px 34px rgba(15,20,25,.09);
  --tab-h:62px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --card:#191c21; --ink:#f2f4f6; --ink2:#c2c8d0; --mut:#8b939d;
    --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.20);
    --brand:#6aa9ea; --brand-soft:#14243a; --brand-line:#27476b;
    --ok:#68d0ae; --ok-soft:#12302a; --warn:#e2b667; --warn-soft:#2f2411;
    --bad:#ef918a; --bad-soft:#331917;
    --sh:0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.30);
    --sh-hi:0 2px 6px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);
  }
}

body{letter-spacing:.012em}
.hero h1{letter-spacing:-.01em}

/* —— 卡片：更柔和的层次感 —— */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh); padding:16px 16px 15px; transition:box-shadow .22s ease}
@media (hover:hover){ .card:hover{box-shadow:var(--sh-hi)} }
.card-title{font-size:13.5px; font-weight:600; letter-spacing:.02em; color:var(--ink)}

/* —— 按钮：更精致 —— */
.btn{border:1px solid var(--line2); background:var(--card); border-radius:12px;
  padding:11px 16px; font-size:14.5px; font-weight:500;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease}
@media (hover:hover){ .btn:hover{box-shadow:var(--sh); border-color:var(--brand-line)} }
.btn:active{transform:scale(.985)}
.btn-primary{background:linear-gradient(180deg,#2382e4,#1667c9); border-color:transparent;
  color:#fff; box-shadow:0 2px 8px rgba(22,103,201,.26)}
@media (hover:hover){ .btn-primary:hover{box-shadow:0 8px 22px rgba(22,103,201,.34)} }
.btn-lg{padding:14px 18px; font-size:15.5px; border-radius:14px}

/* —— 顶栏 / 底部导航：毛玻璃 —— */
.topbar{background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.5) blur(14px); -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line)}
.tabbar{background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:saturate(1.5) blur(16px); -webkit-backdrop-filter:saturate(1.5) blur(16px);
  border-top:1px solid var(--line)}
.tab{transition:color .16s ease, transform .16s ease}
.tab:active{transform:translateY(1px)}

/* —— 品牌标 —— */
.logo{border-radius:9px; box-shadow:0 2px 8px rgba(22,103,201,.28)}
.brand-name{font-weight:650; letter-spacing:.01em}
.pill{background:var(--card); border:1px solid var(--line); font-weight:500}

/* —— 语伴卡 —— */
.partner-card{border-radius:var(--r-lg); box-shadow:var(--sh); border:1px solid var(--line)}

/* —— 弹层 —— */
.sheet{border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--sh-hi)}

/* ══════ 桌面端：内容与手机一致，但充分利用宽度 ══════ */
@media (min-width:900px){
  body{background:
    radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--brand-soft) 70%, var(--bg)), transparent 70%),
    var(--bg)}
  /* 桌面上不再显示"手机框"：去掉 520px 断点给 .app 加的阴影与左右边框 */
  .app{max-width:1080px; box-shadow:none; border-left:0; border-right:0}
  .topbar{padding:15px 26px 14px}
  #main{padding:0 26px 40px}

  .hero{margin:22px 2px 8px}
  .hero h1{font-size:30px; margin-bottom:6px}
  .hero p{font-size:14.5px}
  .sec-title{margin:30px 2px 12px; font-size:13.5px}
  .hint{font-size:13px}

  /* 语言选择：横向滚动 → 网格（一眼看到所有语种，不用划） */
  .lang-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
    gap:18px; overflow:visible; padding:10px 2px 6px; scroll-snap-type:none}
  .lang-item{width:auto}
  .lang-av{width:72px; height:72px; font-size:17px; border-width:2.5px}
  .lang-name{font-size:12.5px}

  /* 卡片内留白更舒展 */
  .card{padding:20px 22px 19px; border-radius:var(--r-xl)}
  .card-title{font-size:14px}

  /* 「我的」页：两列卡片，避免单列无限拉长 */
  #page-me{display:block; column-count:2; column-gap:22px}
  #page-me > .hero{column-span:all; margin-bottom:0}
  #page-me > .card{break-inside:avoid; margin-bottom:18px; display:inline-block; width:100%}
  #accountCard{grid-column:1 / -1}     /* 账号信息整行更醒目 */

  /* 词库列表两列 */
  .bank-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .bank-list > li{break-inside:avoid}

  /* 统计行更舒展 */
  .stat-row{gap:14px}

  /* 练习页：场景 chips 允许换行显示（桌面不需要横滑） */
  .chips{flex-wrap:wrap}

  /* 通话页：桌面端画面更大、字幕更宽 */
  .caption{max-width:min(760px, 72vw)}
  .suggest-bar{max-width:min(880px, 82vw)}

  /* 弹层居中且更宽 */
  .sheet{max-width:620px; border-radius:var(--r-xl)}
}

/* 「你说」那一行：和 AI 的字幕用分隔线区分，双方同时可见 */
.cap-user{margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.16);
  font-size:13.5px; line-height:1.5; color:#cfe2f6; opacity:.95; text-align:left}
.cap-user::before{content:"你说："; opacity:.6; font-size:12px}

/* ══════ 桌面端：聊天界面（更像真实的视频聊天窗口）══════ */
@media (min-width:900px){
  /* 画面：人像位置略微上移，避免大屏上人物被切 */
  .stage-avatar{object-position:center 18%}

  /* 字幕：加宽并居中，长句不折断 */
  .caption{max-width:min(860px, 76vw); margin:0 auto; padding:64px 28px 24px}
  .cap-main{font-size:22px; line-height:1.45}
  .cap-roman{font-size:14px}
  .cap-zh{font-size:15px; margin-top:8px; padding-top:8px}
  .cap-user{font-size:14.5px; margin-top:10px; padding-top:10px}

  /* 姓名牌与状态 */
  .nameplate{top:22px; left:26px}
  .np-name{font-size:17px}
  .np-meta{font-size:12.5px}

  /* 建议句：居中排布，不用横滑 */
  .suggest-bar{justify-content:center; flex-wrap:wrap; padding:10px 20px}

  /* 打字条与通话控制：居中收窄，操作区不散 */
  .type-bar{max-width:860px; margin:0 auto}
  .callbar-wrap{max-width:860px; margin:0 auto}
  .cbtn{width:54px; height:54px}
  .self{width:168px; height:126px; border-radius:14px}
}

/* ---------- 逐句重播按钮（v3.9.0）----------
   学语言最高频的动作是"这句再说一遍"：点一下重播最后一句，按住慢速重播 */
.cap-replay{position:absolute; right:14px; top:10px; display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.30);
  background:rgba(18,20,26,.62); color:#fff; font-size:12.5px; line-height:1; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); touch-action:manipulation;
  user-select:none; -webkit-user-select:none; transition:transform .12s ease, background .15s ease}
.cap-replay svg{width:14px; height:14px; display:block}
.cap-replay:active{transform:scale(.94); background:rgba(58,120,255,.75)}
@media (min-width:900px){ .cap-replay{right:22px; top:14px; font-size:13px; padding:7px 13px} }

/* ---------- 跟读纠错按钮与结果卡（v4.8.0）----------
   按钮与「重播」并排（在其左侧）；结果卡是底部弹层，词 chip 三色：
   对上=绿 / 被听错=琥珀 / 没读出来=灰。诚实口径：这是文本对比。 */
.cap-read{position:absolute; right:100px; top:10px; display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.30);
  background:rgba(18,20,26,.62); color:#fff; font-size:12.5px; line-height:1; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); touch-action:manipulation;
  user-select:none; -webkit-user-select:none; transition:transform .12s ease, background .15s ease}
.cap-read svg{width:14px; height:14px; display:block}
.cap-read:active{transform:scale(.94); background:rgba(58,120,255,.75)}
@media (min-width:900px){ .cap-read{right:118px; top:14px; font-size:13px; padding:7px 13px} }
.rp-target{font-size:16px; line-height:1.5; font-weight:600; margin:2px 0 8px; word-break:break-word}
.rp-recrow{display:flex; gap:8px; align-items:center; margin:10px 0}
.rp-rec{flex:1}
.rp-hint{font-size:12.5px; opacity:.72; margin:6px 0 2px}
.rp-note{font-size:12px; opacity:.62; margin-top:10px; line-height:1.5}
.rp-words{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px}
.rp-w{display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:6px 9px; border-radius:10px; font-size:14px; line-height:1.25; max-width:100%}
.rp-w b{font-weight:600}
.rp-w i{font-style:normal; font-size:11px; opacity:.85}
.rp-w.ok{background:rgba(48,164,108,.16); color:var(--ok,#2e9e6b)}
.rp-w.wrong{background:rgba(214,143,29,.18); color:#c47f10}
.rp-w.missing{background:rgba(127,127,127,.14); opacity:.75; text-decoration:line-through}
.rp-w small{font-size:10.5px; opacity:.75; font-weight:400}
.rp-extra{font-size:12px; opacity:.6; margin-top:2px}
.rp-tip{margin:8px 0 0; padding:8px 10px; border-radius:10px; background:rgba(127,127,127,.10);
  font-size:13px; line-height:1.55}
.rp-tip b{font-weight:600}
.rp-overall{margin-top:10px; font-size:13.5px; line-height:1.6}
.rp-score{font-size:12.5px; opacity:.75; margin-top:4px}

/* ---------- 学习统计卡片（v3.9.0）---------- */
.study-stats{margin-top:12px; padding:12px 13px; border-radius:14px;
  background:var(--card2, rgba(127,127,127,.08)); border:1px solid var(--line, rgba(127,127,127,.18))}
.ss-head{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:14px}
.ss-head b{font-size:15px}
.ss-fire{font-size:17px; line-height:1}
.ss-sub{color:var(--mut,#8a8a8a); font-size:12.5px}
.ss-bars{display:flex; align-items:flex-end; gap:6px; margin-top:10px; height:52px}
.ss-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px}
.ss-col i{display:block; width:100%; max-width:26px; border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg, #4c8dff, #2f6bd8); transition:height .3s ease}
.ss-col span{font-size:11px; color:var(--mut,#8a8a8a)}

/* ══════════════════════════════════════════════════════════════════
   v4.0 界面重构层（2026-09-22）
   目标：简洁 / 美观 / 大气，手机与电脑都像"专门为学语言做的"
   思路：
     ① 先修结构性问题（kv 行被挤成一列字、统计卡与列表并排溢出）
     ② 统一设计语言（配色、圆角、阴影、间距、字阶）
     ③ 三个页面各自重新排布：陪练=选择区+语伴卡，单词=数据+词库网格，我的=卡片双栏
   ══════════════════════════════════════════════════════════════════ */

/* ---------- ① 键值列表：从"挤成一列"改成两列网格 ---------- */
.kv-list{display:block}
.kv{display:grid; grid-template-columns:minmax(5.5em,auto) minmax(0,1fr); gap:4px 14px;
  align-items:baseline; padding:9px 0; font-size:14px; color:var(--ink2);
  border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kv > b{font-weight:550; color:var(--ink); text-align:right; word-break:break-word; overflow-wrap:anywhere}
.api-key-row .kv > b{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px}

/* ---------- ② 设计令牌微调：更安静的中性色 + 更舒展的层级 ---------- */
:root{
  --bg:#f5f6f8; --card:#ffffff; --ink:#15171c; --ink2:#494f5c; --mut:#7c8391;
  --line:rgba(16,20,30,.09); --line2:rgba(16,20,30,.16);
  --brand:#1667c9; --brand-soft:#e9f1fd; --brand-line:#c3daf7;
  --r:14px; --r-lg:18px; --r-xl:24px;
  --sh:0 1px 2px rgba(16,20,30,.04), 0 6px 20px rgba(16,20,30,.06);
  --sh-hi:0 2px 6px rgba(16,20,30,.06), 0 16px 40px rgba(16,20,30,.10);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --card:#191c22; --ink:#f2f3f5; --ink2:#c2c6d0; --mut:#8b919d;
    --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.20);
    --brand:#5ea3f0; --brand-soft:#16283d; --brand-line:#2b4b73;
    --sh:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
    --sh-hi:0 2px 8px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
  }
}
body{font-size:16px; line-height:1.6}
/* v4.3.0：底部「开始聊天」按钮和 Dock 都在正常文档流里（不是悬浮），#main 不需要给它们预留空间。
   以前预留了 58+96=154px，就是用户截图里"难度下面那一大片空白"（红框3）的来源。 */
#main{padding-bottom:20px}

/* ---------- ③ 通用组件：区块标题 / 卡片 / 芯片 ---------- */
.hero{margin:16px 2px 4px}
.hero h1{font-size:25px; line-height:1.25; letter-spacing:-.015em; margin:0 0 6px; font-weight:680}
.hero p{font-size:13.5px; color:var(--mut)}

.sec-title{display:flex; align-items:center; gap:8px; margin:26px 2px 12px;
  font-size:13px; font-weight:620; letter-spacing:.06em; color:var(--mut); text-transform:none}
.sec-title::before{content:""; width:3px; height:14px; border-radius:2px; background:var(--brand); flex:none}
.sec-note{margin-left:auto; font-weight:400; letter-spacing:0; color:var(--mut); font-size:12px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh); padding:17px 17px 16px; margin-bottom:14px}
.card-title{display:flex; align-items:center; gap:7px; font-size:14px; font-weight:640;
  letter-spacing:.01em; color:var(--ink); margin-bottom:10px}
.card-title::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none; opacity:.85}

.chip{border:1px solid var(--line); background:var(--card); border-radius:999px;
  padding:9px 15px; font-size:14px; color:var(--ink2); transition:all .16s ease}
.chip[aria-checked="true"]{background:var(--brand-soft); border-color:var(--brand-line);
  color:var(--brand); font-weight:600}
.seg{border:1px solid var(--line); background:color-mix(in srgb, var(--card) 60%, var(--bg));
  border-radius:999px; padding:3px; gap:3px; display:flex}
.seg button{border-radius:999px; padding:9px 14px; font-size:14px; color:var(--ink2); flex:1}
.seg button[aria-checked="true"]{background:var(--card); color:var(--ink); font-weight:620; box-shadow:var(--sh)}

.hint{font-size:12.5px; line-height:1.6; color:var(--mut)}

/* ---------- ④ 今日概览条 ---------- */
.today-strip{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:12px 0 2px; padding:12px 15px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 40%, var(--card)));
  border:1px solid var(--brand-line); font-size:13.5px; color:var(--ink2)}
.today-strip b{font-size:15px; color:var(--ink)}
.ts-fire{font-size:17px; line-height:1}
.ts-sep{opacity:.45}

/* ---------- ⑤ 语言选择：更大的可点区域 ---------- */
.lang-row{gap:16px; padding:6px 2px 2px}
.lang-item{border-radius:var(--r-lg); padding:10px 6px 8px; transition:background .16s ease, transform .12s ease}
.lang-item:active{transform:scale(.97)}
.lang-item[aria-checked="true"]{background:var(--brand-soft)}
.lang-name{font-size:13px; margin-top:7px; font-weight:500}
.lang-item[aria-checked="true"] .lang-name{color:var(--brand); font-weight:640}

/* ---------- ⑥ 语伴卡：更像"接通前看见人" ---------- */
.partner-card{border-radius:var(--r-lg); overflow:hidden}
.partner-name{font-size:15.5px; font-weight:640}
.partner-intro{font-size:12.5px; color:var(--mut); line-height:1.5}

/* ---------- ⑦ 单词页：数据卡 + 词库网格 ---------- */
.stat-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px}
.stat-row > *{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 8px; text-align:center; box-shadow:var(--sh)}
.bank-list{display:grid; gap:10px}
.bank{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; box-shadow:var(--sh); transition:transform .12s ease, box-shadow .2s ease}
@media (hover:hover){ .bank:hover{transform:translateY(-1px); box-shadow:var(--sh-hi)} }

/* ---------- ⑧ 底部操作条 / 导航：不再压住内容，留出安全区 ---------- */
.callbar{background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.callbar-sub{font-size:12.5px; color:var(--mut); text-align:center; margin-bottom:7px}
.callbar-sub b{color:var(--ink)}
.tabbar{gap:2px}
.tab{border-radius:12px; transition:background .16s ease, color .16s ease}
.tab.active{color:var(--brand)}

/* ---------- ⑨ 学习统计卡（独立成区，不再与列表并排） ---------- */
.study-stats{padding:0; border:0; background:none}
.study-stats + .hint{margin-top:10px}
.ss-head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.ss-head b{font-size:18px; letter-spacing:-.01em}
.ss-fire{font-size:19px; line-height:1}
.ss-sub{color:var(--mut); font-size:12.5px}
.study-stats .ss-bars{display:flex; align-items:flex-end; gap:7px; margin-top:14px; height:64px}
.ss-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px}
.ss-col i{display:block; width:100%; max-width:30px; border-radius:6px 6px 4px 4px;
  background:linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #0b3f80))}
.ss-col span{font-size:11px; color:var(--mut)}
.ss-col.is-today span{color:var(--brand); font-weight:640}

/* ══════════ 桌面端：从"手机放大"变成真正的双栏版面 ══════════ */
@media (min-width:900px){
  #main{padding:0 30px 60px}
  .hero{margin:26px 2px 6px}
  .hero h1{font-size:31px}
  .hero p{font-size:14.5px}
  .sec-title{margin:30px 2px 14px}

  /* 陪练页：左侧选择、右侧语伴（右侧吸顶，滚到哪都看得见"跟谁聊"） */
  #page-practice{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    column-gap:26px; align-items:start}
  #page-practice > .hero,
  #page-practice > .today-strip,
  #page-practice > .memory-note,
  #page-practice > .fb-entry,
  #page-practice > .ai-disclaimer{grid-column:1 / -1}
  #page-practice > .sec-title,
  #page-practice > .lang-row,
  #page-practice > .chips,
  #page-practice > .seg,
  #page-practice > .hint{grid-column:1}
  #page-practice > .partner-card{grid-column:2; grid-row:2 / span 5;
    position:sticky; top:16px; margin-top:26px}
  .lang-row{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:16px}

  /* 我的页：卡片双栏 */
  #page-me{display:block; column-count:2; column-gap:22px;
    gap:16px; align-items:start}
  #page-me > .hero,
  #page-me > .hint.center{grid-column:1 / -1}
  #page-me > .card{margin-bottom:0}
  #page-me > .card:nth-of-type(1){break-inside:avoid}   /* 学习数据（瀑布流下不再通栏） */

  /* 单词页：数据通栏 + 词库两栏 */
  #page-words{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 22px; align-items:start}
  #page-words > .hero,
  #page-words > .stat-row,
  #page-words > .word-tools,
  #page-words > .sec-title{grid-column:1 / -1}
  #page-words > .bank-list{grid-column:1 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}

  /* 底部主按钮：桌面漂浮在右下，不再横跨整屏 */
  .callbar{position:fixed; left:0; right:0; bottom:22px; max-width:460px; margin:0 auto;
    border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-hi);
    padding:12px 16px; border-top:1px solid var(--line)}
  .tabbar{max-width:1080px; margin:0 auto}
}

/* ---------- ⑩ 陪练页分栏（手机单列 / 桌面左选择右语伴） ---------- */
.p-left{min-width:0}
.p-right{min-width:0}
.p-cta{margin-top:14px}
@media (min-width:900px){
  #page-practice{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    column-gap:30px; align-items:start}
  #page-practice > .hero,
  #page-practice > .today-strip,
  #page-practice > .memory-note,
  #page-practice > .fb-entry,
  #page-practice > .ai-disclaimer{grid-column:1 / -1}
  #page-practice > .p-left{grid-column:1; grid-row:2}
  #page-practice > .p-right{grid-column:2; grid-row:2; position:sticky; top:14px; margin-top:26px}
  #page-practice > .partner-card{grid-column:auto; grid-row:auto; position:static; margin-top:0}
  #page-practice .p-cta{display:block}
  #page-practice .p-cta.hidden{display:block !important}
  #callBar{display:none !important}          /* 桌面上不再用底部悬浮条 */
  #main{padding-bottom:40px}
}

/* ══════════════════════════════════════════════════════════════════════════
   v4.1 视觉重构层（2026-09-23）
   目标：专业 / 简洁 / 大气 —— 一眼看出是"认真做的产品"，而不是拼起来的表单。
   做法：
     ① 新的设计令牌：更干净的中性底色 + 有记忆点的品牌渐变
     ② 字阶拉开：大标题够大、小标签够轻，层次一眼可见
     ③ 组件统一：卡片 / 芯片 / 分段控件 / 语言卡 用同一套圆角与阴影
     ④ 底部导航改成"悬浮 Dock"；语伴卡改成品牌渐变主视觉卡
     ⑤ 通话页：铭牌与字幕改成毛玻璃胶囊/卡片，操作条更有质感
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- ① 设计令牌 ---------- */
:root{
  --bg:#f1f4f9;
  --bg-glow:radial-gradient(1000px 460px at 50% -180px, rgba(31,106,224,.18), rgba(31,106,224,0) 68%);
  --card:#ffffff;
  --ink:#0e1218; --ink2:#454f5e; --mut:#79838f;
  --line:rgba(14,18,24,.08); --line2:rgba(14,18,24,.16);
  --brand:#1f6ae0; --brand-deep:#1348a8; --brand-soft:#eaf1fd; --brand-line:#c6dbfa;
  --grad:linear-gradient(135deg,#3f86f7 0%,#1f6ae0 52%,#1348a8 100%);
  --ok:#0a7f5f; --ok-soft:#e4f6ef; --warn:#8a5a12; --warn-soft:#fdf3e2;
  --bad:#c2261c; --bad-soft:#fdecea;
  --r:16px; --r-lg:20px; --r-xl:26px;
  --sh:0 1px 2px rgba(14,18,24,.05), 0 8px 24px rgba(14,18,24,.055);
  --sh-hi:0 2px 8px rgba(14,18,24,.06), 0 20px 48px rgba(14,18,24,.12);
  --dock-h:62px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d0f14;
    --bg-glow:radial-gradient(1000px 460px at 50% -180px, rgba(58,130,246,.20), rgba(58,130,246,0) 68%);
    --card:#161a20;
    --ink:#f3f5f8; --ink2:#c3c9d4; --mut:#8b939f;
    --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.20);
    --brand:#5ea0f5; --brand-deep:#2b6fd0; --brand-soft:#152740; --brand-line:#2a4a78;
    --grad:linear-gradient(135deg,#3a82f0 0%,#2258c8 55%,#16408f 100%);
    --ok:#4fc79c; --ok-soft:#112e26; --warn:#e0b667; --warn-soft:#2f2412;
    --bad:#ef918a; --bad-soft:#301716;
    --sh:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.32);
    --sh-hi:0 2px 8px rgba(0,0,0,.4), 0 20px 48px rgba(0,0,0,.5);
  }
}
html,body{background:var(--bg)}
.app{background-color:var(--bg); background-image:var(--bg-glow); background-repeat:no-repeat}

/* ---------- ② 顶栏 ---------- */
.topbar{padding:14px 16px 12px; border-bottom:0; background:transparent}
.logo{width:26px; height:26px; border-radius:9px; background:var(--grad);
  box-shadow:0 3px 10px rgba(31,106,224,.32)}
.logo::after{inset:7px 6px; border-radius:3px; background:#fff; opacity:.95}
.brand-name{font-size:16.5px; font-weight:700; letter-spacing:.015em}
.pill{border-radius:999px; padding:6px 12px; font-size:12px; font-weight:500;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--sh)}

/* ---------- ③ 大标题 ---------- */
.hero{margin:16px 2px 10px}
.hero-eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.16em; color:var(--brand)}
.hero h1{margin:9px 0 0; font-size:28px; line-height:1.22; font-weight:750;
  letter-spacing:-.02em; color:var(--ink)}
.hero p{margin:10px 0 0; font-size:14px; line-height:1.65; color:var(--mut); max-width:36em}
.hero-facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.hero-facts span{display:inline-flex; align-items:baseline; gap:4px; font-size:12.5px;
  color:var(--ink2); background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; box-shadow:var(--sh)}
.hero-facts b{font-size:14px; font-weight:750; color:var(--brand); letter-spacing:-.01em}

/* ---------- ④ 区块标题 ---------- */
.sec-title{margin:26px 2px 12px; font-size:12px; font-weight:700; letter-spacing:.09em; color:var(--mut)}
.sec-title::before{width:14px; height:3px; border-radius:2px; background:var(--brand); opacity:.9}
.sec-note{font-weight:400; letter-spacing:0}

/* ---------- ⑤ 语言卡 ---------- */
.lang-row{gap:12px; padding:4px 2px 6px}
.lang-item{width:76px; padding:11px 6px 9px; gap:6px; border-radius:18px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--sh);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease}
.lang-item:active{transform:scale(.96)}
.lang-av{width:54px; height:54px; border-radius:18px; border:2px solid transparent;
  font-size:16px; font-weight:700; color:var(--brand); background:var(--brand-soft)}
.lang-item[aria-checked="true"]{background:var(--brand-soft); border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent), var(--sh)}
.lang-item[aria-checked="true"] .lang-av{border-color:var(--brand);
  box-shadow:0 5px 14px rgba(31,106,224,.26)}
.lang-name{font-size:12.5px; font-weight:500; margin-top:4px}

/* ---------- ⑥ 芯片 / 分段控件 ---------- */
.chips{gap:9px; padding:2px 2px 8px}
.chip{padding:10px 16px; font-size:14px; font-weight:500; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:var(--ink2); box-shadow:var(--sh);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease}
.chip:active{transform:scale(.97)}
.chip[aria-checked="true"],.chip[aria-selected="true"]{
  background:var(--grad); border-color:transparent; color:#fff; font-weight:600;
  box-shadow:0 6px 18px rgba(31,106,224,.30)}
.seg{padding:4px; gap:4px; border-radius:999px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 55%, var(--bg)); box-shadow:var(--sh); display:flex}
.seg button{padding:10px 16px; font-size:14px; font-weight:500; border-radius:999px; color:var(--ink2)}
.seg button[aria-checked="true"]{background:var(--grad); color:#fff; font-weight:650;
  box-shadow:0 5px 14px rgba(31,106,224,.28)}

/* ---------- ⑦ 语伴卡：品牌渐变主视觉 ---------- */
.partner-card{position:relative; overflow:hidden; gap:14px; margin:6px 0 2px; padding:18px;
  border:0; border-radius:var(--r-xl); background:var(--grad); color:#fff;
  box-shadow:0 14px 36px rgba(19,72,168,.26)}
.partner-card::after{content:""; position:absolute; right:-40px; bottom:-70px;
  width:190px; height:190px; border-radius:50%; background:rgba(255,255,255,.13); pointer-events:none}
#partnerAvatar{width:60px; height:60px; border-radius:19px; background:rgba(255,255,255,.22);
  border:2px solid rgba(255,255,255,.6); box-shadow:0 6px 18px rgba(0,0,0,.18)}
.partner-name{font-size:17px; font-weight:700; letter-spacing:-.01em; color:#fff}
.partner-intro{font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.86);
  white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.partner-tag{background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.32);
  color:#fff; font-weight:500; padding:5px 12px; border-radius:999px}

/* ---------- ⑧ 卡片 / 按钮 ---------- */
.card{border-radius:var(--r-lg); padding:18px; margin-bottom:14px;
  border:1px solid var(--line); box-shadow:var(--sh); background:var(--card)}
.card-title{margin-bottom:12px; font-size:13.5px; font-weight:700; letter-spacing:.02em}
.btn{border-radius:14px; padding:12px 16px; font-weight:500; border:1px solid var(--line2)}
.btn-primary{background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:0 8px 20px rgba(31,106,224,.28)}
.btn-lg{padding:15px 18px; font-size:16px; font-weight:650; border-radius:16px}
.btn-danger{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 38%, transparent)}

/* ---------- ⑨ 底部导航：悬浮 Dock ---------- */
.tabbar{margin:0 12px calc(10px + env(safe-area-inset-bottom)); border-radius:24px;
  border:1px solid var(--line); border-top:1px solid var(--line); padding:6px;
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:saturate(1.6) blur(18px); -webkit-backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:var(--sh-hi)}
.tab{border-radius:18px; padding:8px 0 7px; font-size:11.5px; font-weight:500; color:var(--mut)}
.tab svg{width:22px; height:22px}
.tab.active{background:var(--brand-soft); color:var(--brand)}
.tab.active svg{stroke-width:2.1}

/* 底部主按钮：淡出背景，不与内容抢 */
.callbar{background:linear-gradient(to top, var(--bg) 58%, color-mix(in srgb, var(--bg) 0%, transparent));
  border-top:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.callbar-sub{margin-bottom:8px}

/* ---------- ⑩ 通话页：铭牌 / 字幕 / 操作条 ---------- */
.nameplate{top:14px; left:14px; flex-direction:row; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px; background:rgba(10,12,16,.42);
  border:1px solid rgba(255,255,255,.16); text-shadow:none;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.np-name{font-size:14.5px; font-weight:650}
.np-meta{font-size:11.5px; opacity:.72}

.listen-pill{top:14px; bottom:auto; left:50%; transform:translateX(-50%); z-index:6;
  background:rgba(10,12,16,.5); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:12.5px}

.caption{left:12px; right:12px; bottom:12px; padding:16px 16px 14px; border-radius:22px;
  background:rgba(10,12,16,.58); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
.cap-main{font-size:19px; line-height:1.45; padding-right:76px}
.caption.has-listen .cap-main{padding-bottom:0}
.cap-roman{font-size:13px; opacity:.75}
.cap-zh{font-size:13.5px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.16)}
.cap-user{margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.14)}
.cap-replay{top:12px; right:12px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28)}

.suggest-bar{background:transparent; padding:6px 12px 2px; align-items:center}
.sug{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  color:#e9f2fc; border-radius:999px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
/* ⚠️ v4.5.8：call.js 用了 .sug-note（「接不上时可以试试」）但 CSS 里从未定义 →
   作为 flex 子项被压缩到 1 字宽，文字竖排成一长条，还把同排的 .sug 气泡一起
   stretch 成巨块，严重遮挡字幕。这里定成「不收缩的小标签」。 */
.sug-note{flex:0 0 auto; white-space:nowrap; align-self:center;
  font-size:11.5px; line-height:1; color:rgba(255,255,255,.5);
  padding:0 2px 0 1px; letter-spacing:.02em}
@media (max-width:400px){ .sug-note{font-size:11px} }
.suggest-bar .sug{align-self:center}
.type-bar{background:transparent; padding:6px 12px 2px}
.type-bar input{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}

.callbar-wrap{gap:8px; padding:12px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(8,9,12,.70), rgba(8,9,12,0))}
.cbtn{border-radius:18px; padding:9px 4px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.86);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.cbtn[aria-pressed="true"]{background:rgba(255,255,255,.24); color:#fff}
.cbtn-hang{background:rgba(255,86,76,.92); border-color:transparent; color:#fff}
.cbtn-hang svg{width:22px; height:22px}
.cbtn span{font-size:10.5px}
.cbtn-mini{background:rgba(10,12,16,.42); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}

/* ---------- ⑪ 单词页数据卡 ---------- */
.stat-row{gap:10px; margin-top:14px}
.stat-row > *{padding:14px 8px; border-radius:var(--r); box-shadow:var(--sh)}
.stat b{font-size:21px; font-weight:750; letter-spacing:-.02em}
.stat span{font-size:11.5px}
.bank{border-radius:var(--r)}
.bank-badge{border-radius:14px}

/* ---------- ⑫ 弹层 ---------- */
.sheet{border-radius:28px 28px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:var(--sh-hi)}
.sheet h3{font-size:18px; font-weight:700; letter-spacing:-.01em}

/* ---------- ⑬ 今日概览 / 记忆提示 ---------- */
.today-strip{margin:14px 0 2px; padding:13px 16px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 35%, var(--card)));
  border:1px solid var(--brand-line); font-size:13.5px}
.memory-note{margin:12px 0 2px; border-radius:var(--r-lg)}

/* ══════ 桌面端：更宽的版面、更大的字阶 ══════ */
@media (min-width:900px){
  .app{max-width:1120px}
  .topbar{padding:16px 28px 14px}
  #main{padding:0 28px 56px}
  .hero{margin:26px 2px 10px}
  .hero h1{font-size:38px; line-height:1.18}
  .hero p{font-size:15px}
  .hero-facts span{font-size:13px; padding:7px 14px}
  .sec-title{margin:30px 2px 14px; font-size:12.5px}

  .partner-card{padding:22px; border-radius:28px}
  #partnerAvatar{width:74px; height:74px; border-radius:22px}
  .partner-name{font-size:19px}
  .partner-intro{font-size:13.5px}

  .lang-row{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:18px}
  .lang-item{width:auto; padding:14px 8px 12px}
  .lang-av{width:64px; height:64px; border-radius:20px; font-size:18px}

  .card{padding:22px; border-radius:var(--r-xl)}
  .tabbar{width:100%; max-width:720px; margin:0 auto calc(16px + env(safe-area-inset-bottom)); align-self:center}
  .caption{max-width:min(860px,76vw); margin:0 auto; padding:20px 22px 18px}
  .cap-main{font-size:23px}
  .cap-zh{font-size:15px}
  .callbar-wrap{max-width:880px; margin:0 auto}
  .type-bar{max-width:880px; margin:0 auto}
  .suggest-bar{max-width:880px; margin:0 auto}
  .sheet{max-width:640px; border-radius:28px}
}

/* ══════════════════════════════════════════════════════════════════════════
   v4.3.0 新增组件（2026-09-23）
   ① 陪练页布局：语伴卡+选择区上移、今日概览下移、消除底部空白
   ② 联想记忆 / ③ 例句逐词发音 / ④ 我的页折叠 / ⑥ 打断提示 / ⑤ Key 三步配置
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- ② 联想记忆 ---------- */
.wc-assocbox{margin-top:14px; text-align:left}
.assoc-head{display:flex; align-items:center; gap:6px; margin-bottom:6px}
.assoc-title{font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--brand)}
.assoc-tip{font-size:13.5px; line-height:1.7; color:var(--ink2);
  background:color-mix(in srgb, var(--brand-soft) 60%, transparent);
  border:1px solid var(--brand-line); border-radius:12px; padding:9px 11px; margin-bottom:9px}
.assoc-chips{display:flex; flex-wrap:wrap; gap:7px}
.assoc-chip{display:inline-flex; align-items:stretch; overflow:hidden;
  border:1px solid var(--line2); border-radius:999px; background:var(--card); box-shadow:var(--sh)}
.assoc-w{display:inline-flex; align-items:baseline; gap:5px; border:0; background:none;
  padding:7px 6px 7px 12px; font-size:13.5px; color:var(--ink); cursor:pointer}
.assoc-w:active{background:var(--brand-soft)}
.assoc-w b{font-weight:650}
.assoc-w i{font-style:normal; font-size:11.5px; color:var(--mut)}
.assoc-add{border:0; border-left:1px dashed var(--line2); background:none; cursor:pointer;
  padding:4px 10px; font-size:14px; color:var(--brand)}
.assoc-add:disabled{color:var(--ok); cursor:default}
.assoc-loading,.assoc-fail{font-size:12.5px; color:var(--mut)}
.assoc-fail{color:var(--warn)}

/* ---------- ③ 例句发音：整句按钮 + 逐词点读 ---------- */
.wc-exrow{display:flex; align-items:flex-start; gap:8px; text-align:left}
.wc-exrow .wc-ex{flex:1}
.wc-explay{flex:none; border:1px solid var(--brand-line); background:var(--brand-soft);
  border-radius:999px; padding:3px 9px; font-size:12px; cursor:pointer; line-height:1.5}
.wc-explay:active{transform:scale(.94)}
.wc-tok{cursor:pointer; border-bottom:1.5px dotted color-mix(in srgb, var(--brand) 55%, transparent);
  transition:background .12s ease, color .12s ease}
@media (hover:hover){ .wc-tok:hover{background:var(--brand-soft); color:var(--brand)} }
.wc-tok:active{background:var(--brand-soft)}

/* ---------- ④ 我的页：卡片折叠 ---------- */
#page-me .card-title{cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none}
#page-me .card-title .chev{margin-left:auto; width:0; height:0; flex:none;
  border-left:5.5px solid transparent; border-right:5.5px solid transparent;
  border-top:6.5px solid var(--mut); transition:transform .18s ease; opacity:.75}
#page-me .card.collapsed .card-title .chev{transform:rotate(-90deg)}
#page-me .card.collapsed > *:not(.card-title){display:none}
#page-me .card.collapsed{padding-bottom:15px}

/* ---------- ⑤ 大模型 Key：三步式配置（同股票雷达） ---------- */
.key-guide{border:1px solid var(--line); border-radius:16px; padding:14px; background:color-mix(in srgb, var(--card) 92%, var(--bg))}
.key-step{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:650; color:var(--ink); margin:11px 0 6px}
.key-step:first-child{margin-top:0}
.key-stepnum{display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:var(--grad); color:#fff;
  font-size:12px; font-weight:700; flex:none}
.key-sel,.key-guide input[type="text"],.key-guide input[type="number"]{
  width:100%; padding:10px 12px; border:1px solid var(--line2); border-radius:12px;
  font-size:14px; background:var(--card); color:var(--ink); outline:none}
.key-sel:focus,.key-guide input:focus{border-color:var(--brand)}
.key-guide .key-input-wrap{display:flex; gap:6px}
.key-hint{font-size:12.3px; line-height:1.85; color:var(--warn);
  background:var(--warn-soft); border-radius:10px; padding:8px 10px; margin-top:9px;
  white-space:pre-line; max-height:180px; overflow-y:auto}
.key-result{font-size:12.5px; line-height:1.8; margin-top:9px; color:var(--mut)}
.key-result.ok{color:var(--ok); font-weight:600}
.key-result.bad{color:var(--bad)}
.key-adv{margin-top:10px; border:1px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--card)}
.key-adv summary{cursor:pointer; font-size:13px; font-weight:650; color:var(--brand); list-style:none}
.key-adv summary::before{content:"▸ "; color:var(--mut)}
.key-adv[open] summary::before{content:"▾ "}
.key-where{font-size:12.3px; line-height:1.9; color:var(--ink2); margin-top:8px; white-space:pre-line; max-height:240px; overflow-y:auto}
.eng-status{margin-top:12px; display:grid; gap:6px}
.eng-status-row{display:flex; align-items:center; gap:8px; font-size:12.5px;
  border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--card)}
.eng-status-row b{font-weight:650; flex:none}
.eng-status-model{color:var(--mut); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.tag-mini{flex:none; font-size:11px; border-radius:999px; padding:2px 8px}
.tag-mini.ok{background:var(--ok-soft); color:var(--ok)}
.tag-mini.off{background:color-mix(in srgb, var(--mut) 14%, transparent); color:var(--mut)}
.eng-status-row a{flex:none; font-size:12px; color:var(--brand)}

/* ---------- ⑥ 通话页：打断提示 ---------- */
/* 位置放在顶部中央（AI 说话时「正在听」胶囊是隐藏的，正好腾出这个位置；放底部会被字幕卡挡住） */
.barge-hint{position:absolute; left:50%; transform:translateX(-50%); top:62px; z-index:6;
  font-size:11.5px; color:rgba(255,255,255,.82); background:rgba(10,12,16,.42);
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:5px 13px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); pointer-events:none;
  animation:bargePulse 2.4s ease-in-out infinite}
@keyframes bargePulse{0%,100%{opacity:.75}50%{opacity:1}}
@media (min-width:900px){ .barge-hint{top:18px; font-size:12px} }

/* v4.3.0：翻面后让卡片随内容长高 —— 背面现在多了例句点读与联想记忆，
   固定 230px 装不下，内容会溢出卡片边界。翻面时把背面改为文档流定位，
   卡片高度由内容决定；正面保持绝对覆盖。翻回正面时自动恢复。 */
.wordcard.flipped .wc-back{position:relative; inset:auto; width:100%}
.wordcard.flipped .wc-front{height:100%}
.wordcard .wc-back{overflow-y:auto}

/* ══════════════════════════════════════════════════════════════════════════
   v4.4.0 学习体验补强（2026-09-23 晚）
   ① 字幕点词查义（对话中遇到生词即时处理）② 阿拉伯语等 RTL 字幕方向
   ③ 站内确认弹层（替代原生 confirm）④ 未登录的"从今天开始记"引导
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- ① 字幕可点词 ---------- */
.cap-tok{cursor:pointer; border-radius:5px; padding:0 1px;
  transition:background .12s ease, color .12s ease, box-shadow .12s ease}
.cap-tok:active{background:rgba(255,255,255,.22); color:#fff}
@media (hover:hover){
  .cap-tok:hover{background:rgba(255,255,255,.16);
    box-shadow:inset 0 -1.5px 0 rgba(255,255,255,.65)}
}
/* RTL 语言（阿拉伯语）字幕跟随语言方向；中文对照恒为 LTR */
.cap-main[dir="rtl"]{text-align:right}
.cap-user[dir="rtl"]{text-align:right}

/* ---------- 查词弹层 ---------- */
.wp-body{display:flex; flex-direction:column; gap:10px}
.wp-loading{font-size:14px; color:var(--mut); padding:10px 2px}
.wp-head{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.wp-w{font-size:24px; font-weight:750; letter-spacing:-.01em; color:var(--ink)}
.wp-p{font-size:14px; color:var(--brand); font-weight:500}
.wp-pos{font-size:12px; color:var(--mut); background:var(--brand-soft);
  border-radius:6px; padding:2px 7px}
.wp-z{font-size:16px; line-height:1.6; color:var(--ink)}
.wp-ex{display:flex; align-items:flex-start; gap:8px; font-size:14.5px; line-height:1.65;
  color:var(--ink2); background:var(--brand-soft); border:1px solid var(--brand-line);
  border-radius:12px; padding:10px 12px}
.wp-extext{flex:1; min-width:0}
.wp-exz{font-size:13px; color:var(--mut); line-height:1.6; margin-top:-2px}
.wp-actions{display:flex; gap:9px; margin-top:4px}
.wp-actions .btn{flex:1}
.wp-actions .btn:disabled{color:var(--ok); border-color:var(--ok);
  background:var(--ok-soft); opacity:1}

/* ---------- ③ 站内确认弹层 ---------- */
.confirm-text{font-size:14.5px; line-height:1.7; color:var(--ink2);
  background:color-mix(in srgb, var(--card) 88%, var(--bg));
  border:1px solid var(--line); border-radius:14px; padding:12px 14px}
.confirm-row{display:flex; gap:10px; margin-top:14px}
.confirm-row .btn{flex:1; padding:13px 14px; font-size:15px}

/* ---------- ④ 未登录引导（陪练页今日条） ---------- */
.today-strip .ts-go{margin-left:auto; font-size:12.5px; font-weight:650; color:var(--brand)}
.today-strip{cursor:pointer; display:flex; align-items:center; gap:7px; flex-wrap:wrap}

/* ---------- ⑤ 通话页占位卡（没有真人照片的语种） ---------- */
/* 以前这里只有一行首字母，现在做成"头像卡"：圆角方块 + 品牌渐变 + 语种说明，
   一眼能看出是"这个语种用的语音聊天界面"，而不是页面坏了。 */
.stage-fallback{flex-direction:column; gap:16px; background:radial-gradient(circle at 50% 38%, #2a3040 0%, #14161b 72%)}
.fb-initials{width:132px; height:132px; border-radius:44px; display:flex; align-items:center; justify-content:center;
  font-size:50px; font-weight:650; letter-spacing:1px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.3);
  background:linear-gradient(135deg,#3f86f7 0%,#1f6ae0 52%,#1348a8 100%);
  box-shadow:0 18px 44px rgba(19,72,168,.45), inset 0 1px 0 rgba(255,255,255,.25)}
.fb-meta{font-size:12.5px; color:rgba(255,255,255,.62); letter-spacing:.02em; text-align:center; padding:0 24px}

/* ---------- ⑥ 字幕可点词的"看得见" ---------- */
/* 功能再好，学习者不知道能点也没用：给可点词一条很淡的点状下划线。 */
.cap-tok{border-bottom:1px dotted rgba(255,255,255,.34)}
@media (hover:hover){ .cap-tok:hover{border-bottom-color:rgba(255,255,255,.8)} }

/* ══════════════════════════════════════════════════════════════════════════
   v4.5.3：对话设置下拉卡（紧凑版）+ 我的页折叠回归 + 语言卡尺寸保险
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 对话设置下拉卡（v4.5.5 精修：与整体卡片同一质感） ---------- */
.settings-card{padding:2px 16px; border-radius:16px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--sh)}
.set-row{display:flex; align-items:center; gap:12px; padding:5px 2px;
  border-bottom:1px solid var(--line); border-radius:8px;
  transition:background .15s ease}
.set-row:hover{background:color-mix(in srgb, var(--brand-soft) 45%, transparent)}
.set-row:last-of-type{border-bottom:0}
.set-label{flex:none; width:40px; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  color:var(--mut)}
.set-row select{flex:1; min-width:0; appearance:none; -webkit-appearance:none;
  border:0; background:transparent; font-size:13.5px; font-weight:600; color:var(--ink);
  padding:3px 22px 3px 0; outline:none; cursor:pointer; max-width:72%;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2379838f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  transition:color .15s ease}
.set-row select:focus{color:var(--brand)}
.set-row:focus-within{background:color-mix(in srgb, var(--brand-soft) 55%, transparent)}
.set-hint{font-size:11px; line-height:1.5; color:var(--brand);
  background:color-mix(in srgb, var(--brand-soft) 55%, transparent);
  border-radius:8px; padding:4px 9px; margin:4px 0 6px}

/* ---------- 「我的」页卡片折叠（v4.5.3 补回丢失的样式；JS 逻辑在 settings.js） ----------
   折叠的 JS（settings.js initCollapse）一直在，但样式块随一次文件回退丢了 ——
   结果是"功能在、看不见"：没有箭头、收起也不隐藏内容，用户自然以为功能没了。 */
#page-me .card-title.collapsible{display:flex; align-items:center; cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent}
#page-me .card-title .chev{margin-left:auto; width:0; height:0; flex:none;
  border-left:5.5px solid transparent; border-right:5.5px solid transparent;
  border-top:6.5px solid var(--mut); transition:transform .18s ease; opacity:.75;
  margin-right:2px}
#page-me .card.collapsed .card-title .chev{transform:rotate(-90deg)}
#page-me .card.collapsed > *:not(.card-title){display:none}
#page-me .card.collapsed{padding-bottom:15px}

/* ---------- 语言卡尺寸保险（防止图片把卡撑高） ---------- */
.lang-item{overflow:hidden}
.lang-av, .lang-av img{aspect-ratio:1/1}
.lang-row{align-items:start}

/* ═══════ v4.7.0「什么时候算说完了」：低置信度确认条 ═══════
   识别结果"可能没听全"时不硬发也不硬吞 —— 把这句标出来，
   给「重说 / 就这样发」两个出口，8 秒无操作自动发送（不会卡住）。
   配色沿用通话页的深色底 + 琥珀警示色。 */
.lowconf-bar{display:flex; align-items:center; gap:10px; padding:9px 12px; background:#2a2113;
  border-top:1px solid rgba(224,181,104,.5); border-bottom:1px solid rgba(224,181,104,.22); color:#f4e6c8}
.lowconf-body{flex:1; min-width:0}
.lowconf-body strong{display:block; font-size:13.5px; font-weight:600; color:#ffe6b0; word-break:break-word}
.lowconf-body span{display:block; font-size:11.5px; opacity:.84; margin-top:3px; line-height:1.4}
.lowconf-body em{display:block; font-size:11px; opacity:.68; font-style:normal; margin-top:2px}
.lowconf-act{display:flex; gap:6px; flex:none}
.lowconf-act button{font-size:12.5px; padding:7px 11px; border-radius:999px; color:#fff; white-space:nowrap}
#lowConfRetry{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26)}
#lowConfSend{background:#a8761a; border:1px solid rgba(255,255,255,.22); font-weight:600}
@media (min-width:520px){ .lowconf-bar{max-width:min(880px,82vw); margin:0 auto} }
@media (prefers-color-scheme: light){ .lowconf-bar{background:#fdf3e0; color:#5a4413}
  .lowconf-body strong{color:#7a5a12} #lowConfRetry{background:#fff; color:#5a4413; border-color:rgba(0,0,0,.18)}
  #lowConfSend{background:#c98a12; color:#fff} }


/* ══════════════════════════════════════════════════════════════════════
   v4.9.0 · 统一深色骨架 + 暖橙品牌
   四站设计系统（AI语伴 / 云途 / 比翼 / 准时下班）共用同一套骨架：
   底色 #0B0E13 · 面板 #151A23 · 边框 rgba(255,255,255,.075)
   本层只覆盖，不删除原有任何规则。
   ══════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme: dark;
  /* —— 骨架 —— */
  --bg:#0B0E13; --bg2:#0F131A; --card:#151A23; --card2:#1B222D;
  --ink:#E9EDF5; --ink2:#A7B1C2; --mut:#6E7A8D;
  --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.14);
  /* —— 品牌：暖橙 —— */
  --brand:#FF8A3D; --brand-deep:#D9661F;
  --brand-soft:rgba(255,138,61,.13); --brand-line:rgba(255,138,61,.30);
  --grad:linear-gradient(135deg,#FFA45C 0%,#FF7A2F 52%,#DB5518 100%);
  --bg-glow:radial-gradient(1200px 560px at 50% -220px, rgba(255,138,61,.16), rgba(255,138,61,0) 70%);
  /* —— 语义 —— */
  --ok:#34D399; --ok-soft:rgba(52,211,153,.14);
  --warn:#F5C047; --warn-soft:rgba(245,192,71,.14);
  --bad:#FF6B6B; --bad-soft:rgba(255,107,107,.14);
  --sh:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.34);
  --sh-hi:0 1px 0 rgba(255,255,255,.05) inset, 0 20px 48px rgba(0,0,0,.55);
  --r:12px; --r-lg:16px; --r-xl:20px;
}
html,body{background:var(--bg); color:var(--ink)}
body{background-image:var(--bg-glow); background-repeat:no-repeat; background-attachment:fixed}
.app{background-color:transparent; background-image:none}
/* 桌面端原来给手机框加的浅灰底，深色下需要抹掉 */
@media (min-width:520px){ body{background:#B7BEC9} body{background:var(--bg)} }

/* ——— 硬编码色修正 ——— */
.btn-primary{background:var(--grad); border-color:transparent; box-shadow:0 8px 22px rgba(224,86,26,.30)}
.lang-item[aria-checked="true"] .lang-av{box-shadow:0 5px 14px rgba(255,122,47,.30)}
.logo{box-shadow:0 3px 12px rgba(255,122,47,.38)}
.chip[aria-checked="true"],.chip[aria-selected="true"],
.seg button[aria-checked="true"]{background:var(--grad); box-shadow:0 6px 18px rgba(224,86,26,.32)}
.partner-card{box-shadow:0 16px 40px rgba(120,44,10,.30)}
.topbar{background:color-mix(in srgb, var(--bg) 82%, transparent)}
.tabbar{background:color-mix(in srgb, #0F131A 82%, transparent)}
.tabadge,.dot{box-shadow:0 0 0 1px rgba(0,0,0,.35)}

/* 顶部标签/胶囊、输入框在深色下的对比度 */
.pill{background:var(--card); border-color:var(--line); color:var(--ink2)}
.pill:hover{border-color:var(--line2); color:var(--ink)}
select,input[type="text"],input[type="number"],textarea{background:var(--card2); border-color:var(--line); color:var(--ink)}
select:focus,input:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,138,61,.16)}

/* ══════════ 桌面端：顶栏导航取代底部 Dock，两栏重排 ══════════ */
.desk-nav{display:none}
@media (min-width:900px){
  .app{max-width:1240px}
  .topbar{padding:16px 32px 14px; border-bottom:1px solid var(--line); gap:12px}
  #main{padding:0 32px 40px}

  /* 顶部导航 */
  .desk-nav{
    display:flex; align-items:center; gap:2px; margin-left:26px;
    padding:4px; border-radius:999px; background:var(--card); border:1px solid var(--line);
  }
  .desk-nav button{
    padding:7px 18px; border-radius:999px; font-size:13.5px; font-weight:500;
    color:var(--mut); transition:background .16s ease, color .16s ease;
  }
  .desk-nav button:hover{color:var(--ink)}
  .desk-nav button.active{background:var(--brand-soft); color:var(--brand); font-weight:600}
  .tabbar{display:none}
  .callbar{display:none !important}

  /* Hero 压缩：桌面不再占三行 */
  #page-practice .hero{margin:20px 2px 2px}
  #page-practice .hero h1{font-size:27px; line-height:1.2; margin:7px 0 0}
  #page-practice .hero h1 br{display:none}
  #page-practice .hero p{margin-top:9px; font-size:13.5px; max-width:54em}
  #page-practice .hero-facts{margin-top:12px}

  /* 两栏：左选择自适应 / 右语伴 392px 吸顶 */
  #page-practice{grid-template-columns:minmax(0,1fr) 392px; column-gap:34px; row-gap:0}
  #page-practice > .hero{grid-column:1 / -1; grid-row:1}
  #page-practice > .p-left{grid-column:1; grid-row:2}
  #page-practice > .p-right{grid-column:2; grid-row:2; position:sticky; top:14px; margin-top:20px}
  #page-practice > .today-strip{grid-column:2; grid-row:3; margin-top:12px}
  #page-practice > .memory-note{grid-column:1 / -1; grid-row:4}
  #page-practice > .fb-entry{grid-column:1 / -1; grid-row:5}
  #page-practice > .ai-disclaimer{grid-column:1 / -1; grid-row:6}

  /* 语言卡：三行 → 两行，节省垂直空间 */
  .lang-row{grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:12px; padding:8px 2px 4px}
  .lang-item{width:auto; padding:9px 4px 7px; border-radius:16px; gap:4px}
  .lang-av{width:50px; height:50px; border-radius:15px; font-size:14.5px}
  .lang-name{font-size:11.5px; margin-top:2px}

  .sec-title{margin:22px 2px 9px}

  /* 对话设置：单列 → 两列 */
  .settings-card{
    display:grid; grid-template-columns:1fr 1fr; column-gap:20px; row-gap:0;
    padding:6px 18px 10px; border-radius:16px;
  }
  .set-row{padding:9px 2px; border-bottom:1px solid var(--line)}
  .set-row:nth-last-of-type(2){border-bottom:0}
  .set-hint,.settings-card .hint{grid-column:1 / -1; margin:8px 0 0; padding-top:2px}
  .set-label{font-size:12.5px; color:var(--mut); min-width:34px}

  /* 右栏 CTA */
  .p-cta{margin-top:12px}
  .p-cta .btn-lg{padding:16px; font-size:16.5px; border-radius:15px}
  .partner-card{margin-bottom:0}

  /* 单词页 / 我的页：内容更宽，避免单列拉到太长 */
  #page-words{column-gap:26px}
  .bank-list{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
  #page-me{column-gap:26px}
}

/* ══════════ 移动端：首屏更紧凑 ══════════ */
@media (max-width:899px){
  .topbar{padding:12px 16px 10px; border-bottom:1px solid var(--line);
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
    position:sticky; top:0; z-index:30}
  #page-practice .hero{margin:12px 2px 4px}
  #page-practice .hero h1{font-size:24px; line-height:1.24}
  #page-practice .hero p{font-size:13px; margin-top:7px}
  .hero-facts{gap:6px; margin-top:10px}
  .hero-facts span{padding:5px 10px; font-size:12px}
  .lang-item{width:70px}
  .lang-av{width:50px; height:50px; border-radius:16px}
  .sec-title{margin:18px 2px 9px}
  .partner-card{padding:14px}
  #partnerAvatar{width:54px; height:54px; border-radius:16px}
}


/* ══════════════════════════════════════════════════════════════════════
   v4.9.1 · 布局微调（首屏密度 / 语言网格列数 / 提示条）
   ══════════════════════════════════════════════════════════════════════ */

/* 桌面：语言卡固定列数，12 个语种刚好排满，不留单数尾巴 */
@media (min-width:1200px){
  .lang-row{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:900px) and (max-width:1199px){
  .lang-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* 桌面不需要「安装到桌面」——那是一个纯移动端动作，横贯一条太浪费 */
@media (min-width:900px){
  #installTip{display:none !important}
  /* 设置行的可交互反馈 */
  .set-row{border-radius:9px; margin:0 -6px; padding-left:8px; padding-right:8px}
  .set-row:hover{background:rgba(255,255,255,.025)}
  .set-row select{cursor:pointer}
  /* 右栏今日概览贴紧语伴卡 */
  #page-practice > .today-strip{margin-top:14px}
  #page-practice > .today-strip.hidden{display:none}
}

/* 移动端：把首屏还给学生本人（提示条 + 大标题过去吃掉近半屏） */
@media (max-width:899px){
  #installTip{
    padding:6px 10px; gap:8px; align-items:center;
    border-radius:11px; margin:8px 12px 0;
  }
  #installTipText{font-size:11px; line-height:1.4; flex:1; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #installTip .tip-action{padding:6px 10px; font-size:11.5px; border-radius:8px; flex:none; white-space:nowrap}
  #installTip .tip-close{font-size:16px; padding:0 2px; flex:none}

  #page-practice .hero{margin:10px 2px 2px}
  #page-practice .hero-eyebrow{font-size:10.5px; letter-spacing:.14em}
  #page-practice .hero h1{font-size:22px; line-height:1.26; margin-top:6px}
  #page-practice .hero p{
    margin-top:6px; font-size:12.5px; line-height:1.55;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .hero-facts{margin-top:9px; gap:6px}
  .hero-facts span{padding:4px 9px; font-size:11.5px}
  .hero-facts b{font-size:13px}

  .sec-title{margin:16px 2px 8px; font-size:11.5px}
  .partner-card{padding:13px; gap:11px}
  #partnerAvatar{width:50px; height:50px; border-radius:15px}
  .partner-name{font-size:15.5px}
  .partner-intro{font-size:12px}

  /* 底部两条悬浮条不要挤在一起 */
  .callbar{padding:8px 14px calc(8px + env(safe-area-inset-bottom))}
  .tabbar{margin:0 12px calc(8px + env(safe-area-inset-bottom))}
  .callbar .btn-lg{padding:13px; font-size:15px}
}

/* 语伴卡：简介别被标签挤成半行 */
@media (min-width:900px){
  .partner-card{gap:13px; padding:16px}
  .partner-info{flex:1; min-width:0}
  .partner-intro{font-size:12px; line-height:1.5}
  .partner-tag{font-size:10.5px; padding:4px 9px; align-self:flex-start}
  #partnerAvatar{width:56px; height:56px; border-radius:17px}
}

/* ══════════════════════════════════════════════════════════════════════
   v4.9.2 · 骨架抬升：近黑 → 石墨玻璃（Graphite Glass）
   ─────────────────────────────────────────────────────────────────────────
   v4.9.0 把页面压到 #0B0E13 / #151A23。问题不在"深"，在于"整片一样深"：
   底色、卡片、内嵌控件三层只差 4%，全挤在一个明度台阶上，
   内容于是没有了轮廓——文字看着灰，卡片看不出边界，像一块没打光的黑布。

   这一版按「云途 / 比翼 v0.8.0 / v3.0.0」同一套石墨骨架抬升并拉开三级：
   底 #151B24 / 卡片 #1E2631 / 内嵌 #253040，每级差约 6%，
   边界靠亮度差就能读出来，不再依赖那一道 7% 的白描边。
   暖橙品牌色不变，但从"大面积平铺"退到"按钮渐变 + 焦点光"——
   中性色做体积、品牌色做焦点，深色界面才显贵。
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* —— 骨架：四级表面，每级差一档 —— */
  --bg:#151B24; --bg2:#10151C;
  --card:#1E2631; --card2:#253040; --card3:#2E3A4A;
  /* —— 文字：三级对比全部拉到 WCAG AA 以上 —— */
  --ink:#F3F7FC; --ink2:#C2CCDB; --mut:#929EB2;
  /* —— 描边：石墨骨架用实色，比 rgba 白更"物质" —— */
  --line:#303B4A; --line2:#3A4757;
  /* —— 阴影：底色变亮后投影要加深，否则卡片会"飘" —— */
  --sh:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.42);
  --sh-hi:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 48px rgba(0,0,0,.58);
}
/* 顶光：暖橙只留在最上面一道，面积收到原来的四成 */
body{background-image:radial-gradient(1200px 460px at 50% -200px, rgba(255,138,61,.11), rgba(255,138,61,0) 70%)}

/* 玻璃质感：卡片加一道极淡的内顶光，暗底下像磨砂金属 */
.card,.panel,.sheet,.card-soft{
  background-image:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 42%);
}
/* 输入框：内嵌表面比卡片再暗一档，形成"凹进去"的错觉 */
input,textarea,select,.field,.input{
  background-color:var(--bg2) !important;
  border-color:var(--line2) !important;
}

/* ============ 问题反馈及建议（v4.13.0） ============ */
.fb-mine{margin-top:14px}
.fb-item{padding:11px 0 9px; border-top:1px solid var(--line)}
.fb-item:first-child{border-top:0; padding-top:4px}
.fb-head{display:flex; align-items:center; gap:8px; margin-bottom:5px; flex-wrap:wrap}
.fb-tag{font-size:12px; padding:1px 8px; border-radius:999px; background:rgba(255,138,61,.16); color:#e8761f}
.fb-cat{font-size:12px; color:var(--mut)}
.fb-st{margin-left:auto; font-size:12px; padding:1px 9px; border-radius:999px; background:var(--brand-soft); color:var(--mut)}
.fb-st-accepted{background:var(--warn-soft); color:var(--warn)}
.fb-st-doing{background:rgba(31,111,178,.14); color:var(--brand)}
.fb-st-done{background:var(--ok-soft); color:var(--ok)}
.fb-st-rejected{background:var(--bg2, rgba(127,127,127,.12)); color:var(--mut)}
.fb-text{margin:0; font-size:14px; color:var(--ink2); line-height:1.55; white-space:pre-wrap; word-break:break-word}
.fb-foot{font-size:12px; color:var(--mut); margin-top:5px}
.fb-note{margin:6px 0 0; font-size:12.5px; color:var(--ok); line-height:1.5}
.fb-tabs{display:flex; gap:8px; margin-bottom:12px}
.fb-tabs button{flex:1; padding:10px; border-radius:var(--r); border:1px solid var(--line2); background:transparent; color:var(--mut); font-size:14px; transition:.15s}
.fb-tabs button.on{background:rgba(255,138,61,.14); border-color:rgba(255,138,61,.55); color:#e8761f; font-weight:600}
.fb-imgbox{margin-top:10px}
.fb-imgbox img{max-width:100%; max-height:220px; object-fit:contain; border-radius:var(--r); border:1px solid var(--line); margin-bottom:8px}
.fb-pick{margin-top:10px; width:100%}

/* ============ 问题反馈及建议 · 入口卡（v4.13.1，与小程序首页一致） ============ */
.fb-entry{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; margin:16px 0 0;
  background:rgba(245,192,71,.14);
  border:1px solid rgba(212,131,26,.34);
  border-radius:var(--r-lg); padding:13px 15px;
  transition:background .15s ease;
}
.fb-entry:active{background:rgba(245,192,71,.22)}
.fb-entry-txt{display:flex; flex-direction:column; min-width:0}
.fb-entry-t{display:block; font-size:14.5px; font-weight:700; color:#9a5b00; line-height:1.4}
.fb-entry-s{display:block; font-size:12px; color:#a9741f; margin-top:3px; line-height:1.5}
.fb-entry-go{font-size:20px; line-height:1; color:#c9861c; flex:none}
@media (prefers-color-scheme: dark){
  .fb-entry{background:rgba(245,192,71,.10); border-color:rgba(230,150,40,.28)}
  .fb-entry-t{color:#f0c878}
  .fb-entry-s{color:#c9a86a}
  .fb-entry-go{color:#d9a94a}
}
.ai-disclaimer{font-size:11.5px; color:var(--mut); text-align:center; margin:12px 0 6px; line-height:1.5}

/* 反馈中心里的分区标题 + 返回 */
.fb-sec{font-size:13px; font-weight:600; color:var(--ink2); margin:18px 0 8px}
.fb-back{font-size:13px; color:var(--brand); padding:6px 0 10px; text-align:left}

/* 移动端：内容不满一屏时，让反馈入口自动贴到「开始聊天」悬浮条正上方（与小程序观感一致） */
@media (max-width:519.98px){
  #main{display:flex; flex-direction:column}
  #page-practice{display:flex; flex-direction:column; flex:1 1 auto}
  #page-practice > .fb-entry{margin-top:auto}
  #page-practice > .ai-disclaimer{margin-bottom:0}
}