/* ═══════════════════════════════════════════════════════════
   PandaRu 熊猫来华 — 视觉体系
   暗金稳重（承 RuStudy） + 亮黄活力（承 liuxue） + 俄式构成主义
   ═══════════════════════════════════════════════════════════ */
:root{
  /* 底色层次 */
  --bg:#08090D; --bg2:#0B0D14; --surface:#12151F; --surface2:#181C28;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  /* 强调色 */
  --gold:#D4A853;         /* RuStudy 金 —— 质感与权威 */
  --yellow:#FFD60A;       /* liuxue 亮黄 —— 活力主调 */
  --cyan:#22D3EE; --magenta:#FF6B9D; --green:#4ADE80; --violet:#8B5CF6;
  --red:#EF4444; --orange:#FB923C;
  /* 文字 */
  --t1:#F5F6F8; --t2:#A8AEBD; --t3:#6B7285;
  /* 几何 */
  --r-s:10px; --r:16px; --r-l:22px; --r-xl:28px;
  --sh:0 8px 32px rgba(0,0,0,.45);
  --sh-glow:0 0 0 1px rgba(255,214,10,.25), 0 8px 32px rgba(255,214,10,.12);
  --ff:"PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic","Tahoma",sans-serif;
  --ff-ru:"Inter","Noto Sans","Roboto","Segoe UI","Helvetica Neue",Arial,"Liberation Sans","Noto Sans Arabic","Tahoma",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--ff); background:#05060A; color:var(--t1);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word; word-break:break-word;
}
/* 桌面端背景：俄式构成主义斜切块 */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 600px at 15% 12%, rgba(255,214,10,.08), transparent 60%),
    radial-gradient(800px 700px at 85% 88%, rgba(34,211,238,.07), transparent 62%),
    linear-gradient(135deg,transparent 46%,rgba(212,168,83,.05) 47%,rgba(212,168,83,.05) 48%,transparent 49%),
    #05060A;
}
/* 桌面端西里尔字母水印 */
.watermark{
  position:fixed; z-index:0; font-family:var(--ff-ru); font-weight:900;
  color:rgba(255,255,255,.022); user-select:none; pointer-events:none; letter-spacing:-.04em;
}
.wm1{top:4vh; left:3vw; font-size:min(20vw,240px); transform:rotate(-8deg)}
.wm2{bottom:2vh; right:3vw; font-size:min(16vw,190px); transform:rotate(6deg)}

/* ─────────── 手机壳 ─────────── */
#shell{
  position:relative; z-index:1; width:390px; height:844px;
  background:var(--bg); border-radius:46px; overflow:hidden;
  box-shadow:0 0 0 11px #14161D, 0 0 0 13px #2A2E38, 0 40px 90px rgba(0,0,0,.75);
  display:flex; flex-direction:column;
}
#shell::after{ /* 灵动岛 */
  content:''; position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:104px; height:26px; background:#000; border-radius:16px; z-index:60;
}
.statusbar{
  height:46px; flex:0 0 46px; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 26px 5px; font-size:12.5px; font-weight:700; color:var(--t1); letter-spacing:.02em; z-index:55;
}
.statusbar .sb-r{display:flex; gap:5px; align-items:center; opacity:.9}

/* ─────────── 视图容器 ─────────── */
#views{flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; position:relative}
#views::-webkit-scrollbar{display:none}
.view{display:none; padding:0 18px 30px; animation:fade .28s ease both}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─────────── 页眉 ─────────── */
.head{padding:6px 0 16px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.head h1{font-size:26px; font-weight:900; letter-spacing:-.03em; line-height:1.12}
.head h1 .accent{color:var(--yellow)}
.head .sub{font-size:12.5px; color:var(--t3); margin-top:5px; font-family:var(--ff-ru); letter-spacing:.01em}
.head-act{display:flex; gap:7px; flex-shrink:0}

/* ─────────── 通用组件 ─────────── */
.card{
  background:linear-gradient(160deg,var(--surface),var(--bg2));
  border:1px solid var(--line); border-radius:var(--r-l); padding:16px;
  margin-bottom:13px; position:relative; overflow:hidden;
}
.card.glow{border-color:rgba(255,214,10,.3); box-shadow:var(--sh-glow)}
.card-t{font-size:15px; font-weight:800; margin-bottom:3px; display:flex; align-items:center; gap:7px}
.card-s{font-size:11.5px; color:var(--t3); font-family:var(--ff-ru)}
.row{display:flex; align-items:center; gap:10px}
.between{display:flex; align-items:center; justify-content:space-between; gap:10px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.sp{flex:1}
.mt{margin-top:12px} .mt-s{margin-top:7px} .mb{margin-bottom:12px}
.center{text-align:center}
.hide{display:none !important}

.btn{
  border:none; border-radius:var(--r); padding:13px 18px; font-size:14.5px; font-weight:800;
  font-family:var(--ff); cursor:pointer; transition:transform .12s, filter .16s, box-shadow .16s;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap;
}
.btn:active{transform:scale(.96)}
.btn-p{background:linear-gradient(135deg,var(--yellow),#F5B800); color:#141414; box-shadow:0 6px 20px rgba(255,214,10,.28)}
.btn-g{background:linear-gradient(135deg,var(--gold),#B8873A); color:#12100B; box-shadow:0 6px 20px rgba(212,168,83,.25)}
.btn-c{background:linear-gradient(135deg,var(--cyan),#0EA5C4); color:#04262D}
.btn-o{background:transparent; border:1.5px solid var(--line2); color:var(--t1)}
.btn-d{background:var(--surface2); color:var(--t1); border:1px solid var(--line)}
.btn-full{width:100%}
.btn-s{padding:9px 13px; font-size:12.5px; border-radius:11px}
.btn-xs{padding:7px 11px; font-size:11.5px; border-radius:9px}
.icon-btn{
  width:38px; height:38px; border-radius:12px; background:var(--surface2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; flex-shrink:0;
  transition:transform .12s
}
.icon-btn:active{transform:scale(.9)}

.chip{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:700; background:rgba(255,255,255,.06); color:var(--t2);
  border:1px solid var(--line); white-space:nowrap;
}
.chip.y{background:rgba(255,214,10,.14); color:var(--yellow); border-color:rgba(255,214,10,.3)}
.chip.c{background:rgba(34,211,238,.13); color:var(--cyan); border-color:rgba(34,211,238,.3)}
.chip.g{background:rgba(74,222,128,.13); color:var(--green); border-color:rgba(74,222,128,.3)}
.chip.m{background:rgba(255,107,157,.13); color:var(--magenta); border-color:rgba(255,107,157,.3)}
.chip.gold{background:rgba(212,168,83,.15); color:var(--gold); border-color:rgba(212,168,83,.32)}
.chip.r{background:rgba(239,68,68,.14); color:#FF8080; border-color:rgba(239,68,68,.3)}

.tabs{display:flex; gap:7px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:8px 15px; border-radius:999px; font-size:12.5px; font-weight:800; cursor:pointer;
  background:var(--surface2); color:var(--t2); border:1px solid var(--line); white-space:nowrap; flex-shrink:0;
  transition:all .16s
}
.tab.on{background:var(--yellow); color:#141414; border-color:var(--yellow)}

.bar{height:7px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--yellow),var(--gold)); transition:width .5s cubic-bezier(.4,0,.2,1)}
.bar.c i{background:linear-gradient(90deg,var(--cyan),#0891B2)}
.bar.g i{background:linear-gradient(90deg,var(--green),#16A34A)}
.bar.m i{background:linear-gradient(90deg,var(--magenta),#DB2777)}

.stat{text-align:center; padding:11px 6px; background:var(--surface2); border-radius:var(--r); border:1px solid var(--line)}
.stat b{display:block; font-size:21px; font-weight:900; letter-spacing:-.03em; line-height:1.1}
.stat span{display:block; font-size:10px; color:var(--t3); margin-top:3px; font-weight:600}

.empty{text-align:center; padding:44px 20px; color:var(--t3)}
.empty .e-ico{font-size:44px; opacity:.35; margin-bottom:12px}
.empty p{font-size:13px; line-height:1.6}

/* ─────────── 底部导航 ─────────── */
#nav{
  flex:0 0 76px; display:flex; align-items:center; padding:0 6px 14px;
  background:linear-gradient(0deg,rgba(8,9,13,.98),rgba(8,9,13,.9));
  border-top:1px solid var(--line); backdrop-filter:blur(20px); z-index:50;
}
.nav-i{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  color:var(--t3); font-size:9.5px; font-weight:700; padding-top:9px; transition:color .16s; position:relative;
}
.nav-i em{font-size:21px; font-style:normal; line-height:1; transition:transform .2s}
.nav-i.on{color:var(--yellow)}
.nav-i.on em{transform:translateY(-2px) scale(1.06)}
.nav-i.on::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:99px; background:var(--yellow);
}
.nav-i .badge{
  position:absolute; top:5px; right:calc(50% - 20px); min-width:17px; height:17px; padding:0 4px;
  background:var(--red); color:#fff; border-radius:99px; font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bg);
}

/* ─────────── 今日面板（首页环形进度） ─────────── */
.today{
  background:
    linear-gradient(135deg,transparent 62%,rgba(255,214,10,.07) 63%),
    linear-gradient(160deg,#1A1E2C,#0D1016);
  border:1px solid rgba(212,168,83,.22); border-radius:var(--r-xl); padding:19px; margin-bottom:14px;
  position:relative; overflow:hidden;
}
.today::after{
  content:'УЧЁБА'; position:absolute; right:-6px; bottom:-14px; font-family:var(--ff-ru);
  font-size:52px; font-weight:900; color:rgba(255,255,255,.028); letter-spacing:-.04em;
}
.ring-wrap{display:flex; align-items:center; gap:17px; position:relative; z-index:1}
.ring{position:relative; width:96px; height:96px; flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
.ring-txt{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ring-txt b{font-size:24px; font-weight:900; letter-spacing:-.04em; line-height:1}
.ring-txt span{font-size:9.5px; color:var(--t3); font-weight:700; margin-top:1px}
.flame{
  display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:999px;
  background:linear-gradient(135deg,rgba(251,146,60,.2),rgba(239,68,68,.14));
  border:1px solid rgba(251,146,60,.34); font-size:12.5px; font-weight:800; color:#FDBA74;
}

/* ─────────── 热力图 ─────────── */
.heat{display:grid; grid-template-columns:repeat(17,1fr); gap:3.5px; margin-top:6px}
.heat i{aspect-ratio:1; border-radius:2.5px; background:rgba(255,255,255,.05)}
.heat i.l1{background:rgba(255,214,10,.28)} .heat i.l2{background:rgba(255,214,10,.5)}
.heat i.l3{background:rgba(255,214,10,.72)} .heat i.l4{background:var(--yellow)}

/* ─────────── 单词卡（SRS 翻卡） ─────────── */
.flash-wrap{perspective:1400px; margin:8px 0 14px}
.flash{
  position:relative; width:100%; min-height:270px; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,0,.2,1); cursor:pointer;
}
.flash.flip{transform:rotateY(180deg)}
.flash-f,.flash-b{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--r-xl);
  padding:22px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; border:1px solid var(--line2);
}
.flash-f{background:linear-gradient(160deg,#1D2233,#0E1118)}
.flash-b{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,#2A2416,#14110A); border-color:rgba(212,168,83,.4);
}
.fw{font-size:52px; font-weight:900; letter-spacing:.02em; line-height:1.14; margin-bottom:10px}
.fp{font-size:17px; color:var(--gold); font-weight:700; font-family:var(--ff-ru); letter-spacing:.01em}
.fr{font-size:20px; font-weight:800; font-family:var(--ff-ru); color:var(--t1); line-height:1.35; margin-bottom:14px}
.fex{
  font-size:14px; color:var(--t2); line-height:1.65; padding:12px 14px; border-radius:var(--r);
  background:rgba(0,0,0,.3); border:1px solid var(--line); width:100%;
}
.fex .fex-ru{display:block; margin-top:6px; font-size:12.5px; color:var(--t3); font-family:var(--ff-ru)}
.flip-hint{position:absolute; bottom:13px; left:0; right:0; font-size:10.5px; color:var(--t3); font-weight:600}
.q-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.q-btn{
  padding:12px 4px; border-radius:13px; border:1px solid var(--line); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px; transition:transform .12s;
  background:var(--surface2);
}
.q-btn:active{transform:scale(.94)}
.q-btn b{font-size:12.5px; font-weight:800}
.q-btn span{font-size:9px; color:var(--t3)}
.q1{border-color:rgba(239,68,68,.4)} .q1 b{color:#FF8080}
.q2{border-color:rgba(251,146,60,.4)} .q2 b{color:var(--orange)}
.q3{border-color:rgba(34,211,238,.4)} .q3 b{color:var(--cyan)}
.q4{border-color:rgba(74,222,128,.45)} .q4 b{color:var(--green)}

/* ─────────── 滑校卡（Tinder 手势） ─────────── */
.swipe-stage{position:relative; height:452px; margin:4px 0 12px}
.swipe-card{
  position:absolute; inset:0; border-radius:var(--r-xl); overflow:hidden; cursor:grab;
  background:var(--surface); border:1px solid var(--line2); box-shadow:var(--sh);
  transition:transform .38s cubic-bezier(.3,0,.2,1), opacity .38s;
  display:flex; flex-direction:column;
}
.swipe-card.gone-r{transform:translateX(420px) rotate(22deg) !important; opacity:0}
.swipe-card.gone-l{transform:translateX(-420px) rotate(-22deg) !important; opacity:0}
.sc-vis{height:186px; position:relative; flex-shrink:0; overflow:hidden}
.sc-body{padding:16px; flex:1; display:flex; flex-direction:column}
.sc-name{font-size:22px; font-weight:900; letter-spacing:-.03em; line-height:1.15}
.sc-ru{font-size:12px; color:var(--t3); font-family:var(--ff-ru); margin-top:3px}
.sc-match{
  position:absolute; top:13px; right:13px; z-index:3; padding:6px 12px; border-radius:999px;
  background:rgba(8,9,13,.82); backdrop-filter:blur(10px); border:1px solid rgba(255,214,10,.4);
  font-size:13px; font-weight:900; color:var(--yellow);
}
.stamp{
  position:absolute; top:44px; z-index:5; padding:8px 17px; border-radius:11px;
  font-size:22px; font-weight:900; letter-spacing:.06em; opacity:0; transition:opacity .14s;
  border:3.5px solid; text-transform:uppercase;
}
.stamp-y{left:18px; transform:rotate(-16deg); color:var(--green); border-color:var(--green)}
.stamp-n{right:18px; transform:rotate(16deg); color:var(--red); border-color:var(--red)}
.swipe-acts{display:flex; justify-content:center; gap:16px; margin-top:2px}
.sw-btn{
  width:60px; height:60px; border-radius:50%; border:2px solid var(--line2); background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-size:25px; cursor:pointer;
  transition:transform .14s;
}
.sw-btn:active{transform:scale(.88)}
.sw-no{border-color:rgba(239,68,68,.55)}
.sw-yes{border-color:rgba(74,222,128,.6); width:68px; height:68px; font-size:29px}
.sw-info{border-color:rgba(34,211,238,.5); width:50px; height:50px; font-size:20px; align-self:center}

/* ─────────── 雷达图 ─────────── */
.radar-box{position:relative; display:flex; justify-content:center; padding:6px 0}

/* ─────────── 列表项 ─────────── */
.item{
  display:flex; align-items:center; gap:12px; padding:13px; border-radius:var(--r);
  background:var(--surface2); border:1px solid var(--line); margin-bottom:9px; cursor:pointer;
  transition:transform .12s, border-color .16s;
}
.item:active{transform:scale(.985)}
.item.on{border-color:rgba(255,214,10,.42); background:rgba(255,214,10,.06)}
.item-ic{
  width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; background:rgba(255,255,255,.06);
}
.item-b{flex:1; min-width:0}
.item-t{font-size:14px; font-weight:800; line-height:1.3}
.item-s{font-size:11.5px; color:var(--t3); margin-top:3px; line-height:1.45}
.item-r{flex-shrink:0; text-align:right}

/* ─────────── 弹层 ─────────── */
.sheet-bg{
  position:absolute; inset:0; background:rgba(0,0,0,.68); backdrop-filter:blur(6px);
  z-index:100; opacity:0; pointer-events:none; transition:opacity .28s;
}
.sheet-bg.on{opacity:1; pointer-events:auto}
.sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:86%; z-index:101;
  background:var(--bg2); border-top:1px solid var(--line2);
  border-radius:26px 26px 0 0; transform:translateY(100%); transition:transform .34s cubic-bezier(.3,0,.2,1);
  display:flex; flex-direction:column;
}
.sheet.on{transform:none}
.sheet-h{padding:16px 18px 12px; flex-shrink:0; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:10px}
.sheet-h h3{font-size:19px; font-weight:900; letter-spacing:-.02em; line-height:1.25; flex:1}
.sheet-h .s-ru{font-size:12px; color:var(--t3); font-family:var(--ff-ru); margin-top:3px}
.sheet-c{padding:16px 18px 26px; overflow-y:auto; scrollbar-width:none}
.sheet-c::-webkit-scrollbar{display:none}
.grab{width:38px; height:4px; border-radius:99px; background:var(--line2); margin:9px auto 0}

/* ─────────── Toast ─────────── */
#toast{
  position:absolute; top:64px; left:50%; transform:translateX(-50%) translateY(-24px);
  z-index:200; padding:12px 20px; border-radius:14px; font-size:13.5px; font-weight:800;
  background:rgba(20,23,32,.96); border:1px solid var(--line2); backdrop-filter:blur(14px);
  opacity:0; transition:all .3s cubic-bezier(.3,0,.2,1); pointer-events:none; max-width:88%;
  text-align:center; box-shadow:var(--sh);
}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.ok{border-color:rgba(74,222,128,.5); color:var(--green)}
#toast.err{border-color:rgba(239,68,68,.5); color:#FF8080}
#toast.gold{border-color:rgba(212,168,83,.55); color:var(--gold)}

/* ─────────── 成就解锁动效 ─────────── */
#ach-pop{
  position:absolute; inset:0; z-index:210; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.76); backdrop-filter:blur(8px);
}
#ach-pop.on{display:flex; animation:fade .3s both}
.ach-card{
  width:270px; padding:28px 22px; border-radius:26px; text-align:center;
  background:linear-gradient(160deg,#2A2416,#14110A); border:1.5px solid rgba(212,168,83,.5);
  box-shadow:0 0 60px rgba(212,168,83,.24); animation:pop .48s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pop{0%{transform:scale(.6) rotate(-7deg);opacity:0}100%{transform:none;opacity:1}}
.ach-ic{font-size:60px; margin-bottom:12px; animation:bounce .7s .2s both}
@keyframes bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-13px)}}

/* ─────────── 考试 ─────────── */
.exam-bar{
  position:sticky; top:0; z-index:20; padding:11px 0; margin:0 -18px 12px; padding-left:18px; padding-right:18px;
  background:rgba(8,9,13,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.opt{
  padding:14px 15px; border-radius:var(--r); border:1.5px solid var(--line);
  background:var(--surface2); cursor:pointer; margin-bottom:9px; font-size:14.5px; line-height:1.45;
  display:flex; align-items:flex-start; gap:11px; transition:all .16s;
}
.opt:active{transform:scale(.99)}
.opt .oi{
  width:25px; height:25px; border-radius:8px; background:rgba(255,255,255,.08); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--t2);
}
.opt.sel{border-color:var(--yellow); background:rgba(255,214,10,.09)}
.opt.sel .oi{background:var(--yellow); color:#141414}
.opt.right{border-color:var(--green); background:rgba(74,222,128,.1)}
.opt.right .oi{background:var(--green); color:#052E16}
.opt.wrong{border-color:var(--red); background:rgba(239,68,68,.09)}
.opt.wrong .oi{background:var(--red); color:#fff}
.q-dots{display:flex; flex-wrap:wrap; gap:5px}
.q-dots i{
  width:26px; height:26px; border-radius:8px; background:var(--surface2); border:1px solid var(--line);
  font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-style:normal; color:var(--t3);
}
.q-dots i.done{background:rgba(255,214,10,.2); color:var(--yellow); border-color:rgba(255,214,10,.4)}
.q-dots i.cur{background:var(--yellow); color:#141414; border-color:var(--yellow)}
/* 选词填空：题干里的空位（填词前/后） */
.blank{ display:inline-block; min-width:54px; padding:0 8px; margin:0 3px; border-bottom:2.5px solid var(--t3);
  color:var(--t3); text-align:center; font-weight:800; border-radius:6px 6px 0 0; }
.blank.on{ border-bottom-color:var(--yellow); background:rgba(255,214,10,.16); color:var(--yellow); }

/* ─────────── 书写题：连词成句词块 ─────────── */
.wslot{
  min-height:66px; border-radius:var(--r); padding:11px 12px;
  border:1.5px dashed rgba(255,214,10,.34); background:rgba(255,214,10,.045);
  display:flex; flex-wrap:wrap; gap:7px; align-items:center; transition:all .2s;
}
.wslot.full{border-style:solid; border-color:rgba(74,222,128,.5); background:rgba(74,222,128,.06)}
.wph{font-size:11.5px; color:var(--t3); line-height:1.6; text-align:center; width:100%}
.wbank{
  display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; padding-top:11px;
  border-top:1px dashed var(--line);
}
.wk{
  display:inline-flex; align-items:center; gap:3px;
  padding:9px 13px; border-radius:10px; cursor:pointer; user-select:none;
  font-size:14.5px; font-weight:700; line-height:1;
  background:var(--surface2); border:1.5px solid var(--line); color:var(--t1);
  transition:transform .13s, background .16s, border-color .16s, opacity .16s;
}
.wk:active{transform:scale(.94)}
.wk.on{
  background:linear-gradient(135deg,rgba(255,214,10,.2),rgba(255,214,10,.1));
  border-color:rgba(255,214,10,.55); color:var(--yellow);
}
.wk.on i{font-style:normal; font-size:10px; opacity:.55; margin-left:1px}
.wk.dim{opacity:.24; cursor:default; border-style:dashed}
.wk.dim:active{transform:none}
.wsent{
  margin-top:10px; font-size:17px; font-weight:800; letter-spacing:.03em;
  color:var(--t1); line-height:1.5; padding:9px 12px; border-radius:10px;
  background:rgba(255,255,255,.04); border-left:3px solid var(--yellow);
}
.wrv{
  border-radius:10px; padding:9px 12px; margin-bottom:7px;
  border:1px solid var(--line); background:var(--surface2);
}
.wrv.ok{border-color:rgba(74,222,128,.4); background:rgba(74,222,128,.07)}
.wrv.no{border-color:rgba(239,68,68,.36); background:rgba(239,68,68,.06)}
.wrv-l{font-size:10px; font-weight:900; letter-spacing:.04em; opacity:.75}
.wrv.ok .wrv-l{color:var(--green)}
.wrv.no .wrv-l{color:#FF8080}
.wrv-s{font-size:15.5px; font-weight:800; line-height:1.5; margin-top:3px}

/* ─────────── 图表 ─────────── */
.chart{width:100%; overflow:visible}
.mini-bars{display:flex; align-items:flex-end; gap:5px; height:62px}
.mini-bars i{flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--yellow),rgba(255,214,10,.25)); min-height:3px}

/* ─────────── 录音波形 ─────────── */
.wave{display:flex; align-items:center; justify-content:center; gap:3.5px; height:46px}
.wave i{width:3.5px; border-radius:99px; background:var(--yellow); height:8px; animation:w .95s infinite ease-in-out}
@keyframes w{0%,100%{height:8px;opacity:.4}50%{height:34px;opacity:1}}
.rec-btn{
  width:82px; height:82px; border-radius:50%; border:none; cursor:pointer; font-size:32px;
  background:linear-gradient(135deg,var(--magenta),#DB2777); color:#fff;
  box-shadow:0 8px 30px rgba(255,107,157,.36); transition:transform .16s;
  display:flex; align-items:center; justify-content:center; margin:0 auto;
}
.rec-btn:active{transform:scale(.92)}
.rec-btn.recording{animation:pulse 1.3s infinite; background:linear-gradient(135deg,var(--red),#B91C1C)}
@keyframes pulse{0%,100%{box-shadow:0 8px 30px rgba(239,68,68,.4)}50%{box-shadow:0 8px 46px rgba(239,68,68,.7)}}
.score-big{font-size:58px; font-weight:900; letter-spacing:-.05em; line-height:1}
.diff-chars{display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:12px}
.diff-chars span{
  font-size:23px; font-weight:800; padding:5px 9px; border-radius:9px;
  background:rgba(74,222,128,.15); color:var(--green); border:1px solid rgba(74,222,128,.3);
}
.diff-chars span.bad{background:rgba(239,68,68,.14); color:#FF8080; border-color:rgba(239,68,68,.32)}

/* ─────────── 登录页 ─────────── */
.auth-wrap{padding:44px 6px 20px}
.auth-logo{font-size:60px; text-align:center; margin-bottom:8px}
.inp{
  width:100%; padding:14px 15px; border-radius:var(--r); border:1.5px solid var(--line);
  background:var(--surface2); color:var(--t1); font-size:14.5px; font-family:var(--ff);
  margin-bottom:11px; outline:none; transition:border-color .16s;
}
.inp:focus{border-color:var(--yellow)}
.inp::placeholder{color:var(--t3)}
label.lb{display:block; font-size:11.5px; font-weight:700; color:var(--t2); margin-bottom:6px}

/* ─────────── PRO 标记 ─────────── */
.pro-tag{
  display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:7px;
  background:linear-gradient(135deg,var(--gold),#A9762C); color:#12100B;
  font-size:9.5px; font-weight:900; letter-spacing:.04em;
}
.lock-veil{
  position:absolute; inset:0; background:rgba(8,9,13,.82); backdrop-filter:blur(3px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-l); z-index:5;
}

/* ─────────── 小屏全屏适配 ─────────── */
@media (max-width:440px), (max-height:900px){
  body{display:block; overflow:auto}
  body::before{background:#08090D}
  .watermark{display:none}
  #shell{
    width:100%; height:100vh; height:100dvh; border-radius:0; box-shadow:none;
  }
  #shell::after{display:none}
  .statusbar{display:none}
  #views{padding-top:14px}
}

/* ───── 语言切换栏（登录页 / 设置页共用 .lang-sw）───── */
.lang-bar{display:flex; gap:8px; justify-content:center; margin:14px 0 4px}
.lang-sw{
  flex:0 0 auto; height:38px; padding:0 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); color:var(--t2); font-size:18px; line-height:1;
  cursor:pointer; transition:.15s; display:flex; align-items:center; justify-content:center;
}
.lang-sw:hover{border-color:var(--line2)}
.lang-sw.on{background:rgba(255,214,10,.14); border-color:var(--yellow); color:var(--t1); box-shadow:var(--sh-glow)}

/* ───── 阿拉伯语 RTL 适配 ───── */
body.rtl{font-family:var(--ff-ru)}
body.rtl .head .sub, body.rtl .card-s, body.rtl .fp, body.rtl .fr, body.rtl .fex .fex-ru, body.rtl .sc-ru, body.rtl .sheet-h .s-ru{font-family:var(--ff-ru)}
[dir="rtl"] .nav-i em{margin-right:0; margin-left:8px}
[dir="rtl"] .row{flex-direction:row-reverse}
[dir="rtl"] .card-t.mb{text-align:right}
[dir="rtl"] input.inp{text-align:right}
[dir="rtl"] #toast{left:auto; right:50%; transform:translateX(50%)}

/* ───── 语言下拉菜单（直接下拉选择，支持 6 语）───── */
.lang-pill{font-size:13px; font-weight:700; gap:6px}
#lang-menu{
  position:fixed; z-index:80; min-width:184px; max-width:88vw;
  background:var(--surface); border:1px solid var(--line2); border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.28); padding:6px; opacity:0;
  transform:translateY(-6px); pointer-events:none; visibility:hidden;
  transition:opacity .15s, transform .15s;
}
#lang-menu.on{opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible}
.ld-menu .ld-item{padding:11px 12px}
.ld-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; cursor:pointer; transition:.12s}
.ld-item:hover{background:var(--surface2)}
.ld-item.on{background:rgba(255,214,10,.13)}
.ld-f{font-size:21px; line-height:1}
.ld-n{flex:1; font-size:15px; font-weight:700; color:var(--t1)}
.ld-item.on .ld-n{color:var(--yellow)}
.ld-check{color:var(--yellow); font-weight:900; font-size:18px}
[dir="rtl"] .ld-n{text-align:right}

/* ───── PWA 安装引导条 ───── */
.install-bar{
  position:fixed; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom));
  z-index:60; display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:16px; background:var(--surface); border:1px solid var(--line2);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.install-bar[hidden]{display:none}
.ib-ico{font-size:22px; flex:0 0 auto}
.ib-txt{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.ib-txt b{font-size:14px; color:var(--t1)}
.ib-txt small{font-size:11px; color:var(--t2)}
.ib-btn{flex:0 0 auto; height:34px; padding:0 16px; border:none; border-radius:11px;
  background:var(--yellow); color:#111; font-weight:800; font-size:13px; cursor:pointer}
.ib-btn:disabled{opacity:.6; cursor:default}

/* ───── 图片/视频横滑画廊（院校·城市·酒店详情）───── */
.media-strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-bottom:14px}
.media-strip::-webkit-scrollbar{height:6px}
.media-strip::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.media-strip img,.media-strip video{scroll-snap-align:start;flex:0 0 auto;height:150px;max-width:82vw;border-radius:12px;object-fit:cover;background:var(--surface2);display:block}
.media-strip video{background:#000}
.zoom-ov{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}
.zoom-ov img{max-width:100%;max-height:100%;border-radius:12px;object-fit:contain}
.zoom-x{position:absolute;top:18px;right:18px;width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer}
.ib-x{flex:0 0 auto; width:30px; height:30px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface2); color:var(--t2); font-size:13px; cursor:pointer}

/* ───── 列表卡片封面缩略图（院校·城市·酒店）───── */
.list-thumb{overflow:hidden; flex-shrink:0; background:var(--surface2); display:flex; align-items:center; justify-content:center; color:var(--t2)}
.list-thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* ───── 视频学习 ───── */
.vchips{display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; -webkit-overflow-scrolling:touch}
.vchip{flex:0 0 auto; padding:7px 14px; border-radius:20px; background:var(--surface2); color:var(--t2);
  font-size:12.5px; font-weight:700; border:1px solid transparent; cursor:pointer; white-space:nowrap; font-family:var(--ff-ru)}
.vchip.on{background:rgba(212,168,83,.16); color:var(--gold); border-color:rgba(212,168,83,.4)}
.vlist{display:flex; flex-direction:column; gap:13px}
.vcard{background:var(--surface); border:1px solid var(--line); border-radius:15px; overflow:hidden; cursor:pointer; transition:transform .15s, border-color .15s}
.vcard:active{transform:scale(.985)}
.vcover{position:relative; width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#1b2030,#2a2030); display:flex; align-items:center; justify-content:center}
.vcover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.vcover .play{position:relative; z-index:2; width:54px; height:54px; border-radius:50%; background:rgba(0,0,0,.45); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; padding-left:4px; box-shadow:0 4px 18px rgba(0,0,0,.4)}
.vdur{position:absolute; right:8px; bottom:8px; z-index:3; background:rgba(0,0,0,.62); color:#fff; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:7px; font-family:var(--ff-ru)}
.vinfo{padding:11px 13px 13px}
.vt{font-size:14.5px; font-weight:800; color:var(--t1); line-height:1.35; letter-spacing:-.01em}
.vmeta{display:flex; align-items:center; gap:8px; margin-top:8px}
.vtag{font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:8px; background:rgba(212,168,83,.16); color:var(--gold)}
.vtag.animated{background:rgba(168,85,247,.18); color:#C49BFF}
.vempty{text-align:center; padding:60px 20px; color:var(--t3); font-size:13px; line-height:1.7}

/* ───── 视频全屏播放层 ───── */
.vmodal{position:fixed; inset:0; z-index:120; background:#000; display:flex; flex-direction:column}
.vmodal[hidden]{display:none}
.vmodal-bar{display:flex; align-items:center; gap:10px; padding:10px 12px; background:#0b0c10; color:#fff}
.vmodal-t{flex:1; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--ff-ru)}
.vmodal-body{flex:1; display:flex; align-items:center; justify-content:center; background:#000; min-height:0}
.vmodal-body video, .vmodal-body iframe{width:100%; height:100%; max-height:100%; background:#000}
.vmodal-body video{object-fit:contain}