/* ===========================================================
   050262 商务英语 · 学习站 公共样式
   适用：全部页面；可直接部署到静态站点
   =========================================================== */

:root{
  --ink:#1c2430;
  --ink-2:#465266;
  --ink-3:#7a8699;
  --line:#e3e8ef;
  --bg:#f6f7f9;
  --card:#ffffff;
  --brand:#1e3a5f;
  --brand-2:#2f5d8f;
  --accent:#d97742;
  --ok:#2f855a;
  --warn:#b7791f;
  --danger:#c53030;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.05);
  --sidebar-w:248px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 布局 ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--brand);color:#cbd7e6;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:22px 0 40px;
}
.sidebar .brand{padding:0 20px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px}
.sidebar .brand b{display:block;color:#fff;font-size:17px;letter-spacing:.5px}
.sidebar .brand span{display:block;color:#8fa6c0;font-size:12px;margin-top:4px;line-height:1.5}
.sidebar nav a{
  display:block;padding:9px 20px;color:#c2d0e0;text-decoration:none;font-size:14.5px;
  border-left:3px solid transparent;transition:.15s;
}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar nav a.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--accent);font-weight:600}
.sidebar .nav-group{padding:14px 20px 6px;font-size:11.5px;letter-spacing:1px;color:#7d94af;text-transform:uppercase}
.sidebar .foot{padding:18px 20px 0;font-size:11.5px;color:#6f87a3;line-height:1.7}

.main{flex:1;min-width:0;padding:38px 44px 90px;max-width:1080px}
.topbar{display:none}
@media(max-width:900px){
  .layout{display:block}
  .sidebar{position:fixed;left:-260px;top:0;z-index:60;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.2)}
  .sidebar.open{left:0}
  .main{padding:74px 18px 70px}
  .topbar{
    display:flex;align-items:center;gap:12px;position:fixed;top:0;left:0;right:0;z-index:50;
    height:56px;padding:0 16px;background:#fff;border-bottom:1px solid var(--line);
  }
  .topbar b{font-size:15px}
  .topbar button{
    border:1px solid var(--line);background:#fff;border-radius:8px;width:38px;height:34px;
    font-size:16px;cursor:pointer;color:var(--brand)
  }
}

/* ---------- 排版 ---------- */
h1{font-size:27px;line-height:1.35;margin:0 0 8px;letter-spacing:-.3px;color:var(--brand)}
h2{font-size:20px;margin:40px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--line);color:var(--brand)}
h3{font-size:16.5px;margin:26px 0 10px;color:var(--ink)}
h4{font-size:15px;margin:18px 0 8px;color:var(--ink-2)}
p{margin:10px 0}
.lead{color:var(--ink-2);font-size:15.5px;margin:0 0 24px}
.sub{color:var(--ink-3);font-size:13px}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}
a{color:var(--brand-2)}
code{background:#eef2f7;padding:1px 6px;border-radius:4px;font-size:13.5px;font-family:ui-monospace,Consolas,monospace}
.en{font-family:"Segoe UI",Georgia,serif}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:16px 0;box-shadow:var(--shadow)}
.card.tight{padding:14px 16px}
.card h3:first-child,.card h4:first-child{margin-top:0}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid.c2,.grid.c3{grid-template-columns:1fr}}

/* ---------- 标签 / 提示 ---------- */
.tag{display:inline-block;font-size:12px;padding:2px 8px;border-radius:20px;background:#eef2f7;color:var(--ink-2);margin-right:6px;vertical-align:middle}
.tag.b{background:#e6f0fa;color:#2f5d8f}
.tag.g{background:#e7f5ec;color:var(--ok)}
.tag.o{background:#fdf0e4;color:#b45309}
.tag.r{background:#fdeaea;color:var(--danger)}

.note{border-left:3px solid var(--brand-2);background:#f4f8fd;padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0;font-size:14.5px;color:var(--ink-2)}
.note.warn{border-left-color:var(--warn);background:#fdf8ec}
.note.danger{border-left-color:var(--danger);background:#fdf1f1}
.note b{color:var(--ink)}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:8px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#f2f5f9;font-weight:600;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfd}
td.num{white-space:nowrap;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- 列表 ---------- */
ul,ol{padding-left:22px;margin:10px 0}
li{margin:5px 0}
ul.clean{list-style:none;padding-left:0}
ul.clean li{padding-left:20px;position:relative}
ul.clean li:before{content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--brand-2)}

/* ---------- 勾选进度 ---------- */
.check{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line)}
.check:last-child{border-bottom:0}
.check input{margin-top:7px;width:16px;height:16px;accent-color:var(--brand-2);flex:0 0 auto;cursor:pointer}
.check label{cursor:pointer;flex:1;font-size:14.5px}
.check input:checked + label{color:var(--ink-3);text-decoration:line-through}
.progress-wrap{margin:14px 0 4px}
.progress-bar{height:8px;background:#e6ebf2;border-radius:20px;overflow:hidden}
.progress-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-2),var(--accent));border-radius:20px;transition:width .3s}
.progress-txt{font-size:13px;color:var(--ink-3);margin-top:6px}

/* ---------- 折叠 ---------- */
details{border:1px solid var(--line);border-radius:8px;background:#fff;margin:10px 0;padding:0}
details summary{padding:12px 16px;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--brand);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary:before{content:"▸";display:inline-block;margin-right:8px;color:var(--ink-3);transition:.2s}
details[open] summary:before{transform:rotate(90deg)}
details .body{padding:0 16px 16px;border-top:1px solid var(--line)}

/* ---------- 术语表工具条 ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 6px;position:sticky;top:0;background:var(--bg);padding:10px 0;z-index:20}
.toolbar input[type=search]{
  flex:1;min-width:220px;padding:9px 13px;border:1px solid var(--line);border-radius:8px;font-size:14.5px;background:#fff;
}
.toolbar input[type=search]:focus{outline:2px solid #cfe0f2;border-color:var(--brand-2)}
.chip{
  border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:20px;
  padding:6px 14px;font-size:13.5px;cursor:pointer;transition:.15s;
}
.chip:hover{border-color:var(--brand-2);color:var(--brand-2)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.count{font-size:13px;color:var(--ink-3);margin-left:auto}
.term-en{font-weight:600;color:var(--brand)}
.term-cn{color:var(--ink)}
.term-eg{color:var(--ink-3);font-size:13.5px}
mark{background:#fff3bf;padding:0 2px}

/* ---------- 题目 ---------- */
.q{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:12px 0;background:#fff}
.q .stem{font-size:14.5px;margin-bottom:8px}
.q .opts{color:var(--ink-2);font-size:14.5px}
.q .opts span{display:inline-block;margin-right:18px}
.ans{font-size:13.5px;color:var(--ok);margin-top:8px}

/* ---------- 页脚 ---------- */
.pagefoot{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);line-height:1.8}

/* ---------- 打印 ---------- */
@media print{
  .sidebar,.topbar,.toolbar,.no-print{display:none!important}
  .main{max-width:none;padding:0}
  body{background:#fff;font-size:12pt}
  .card{box-shadow:none;break-inside:avoid}
  details{border:0}
  details .body{display:block!important}
  h2{break-after:avoid}
}

/* ---------- 追加：表格数字与列表 ---------- */
table .num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
ul.clean{margin:10px 0;padding-left:22px;color:var(--ink-2);font-size:14.5px;line-height:1.85}
ul.clean li{margin:4px 0}
ul.clean b{color:var(--ink)}
@media(max-width:900px){.grid.c3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid.c2,.grid.c3{grid-template-columns:1fr}}

/* ================= 追加：今日面板 / 朗读 / 复习 / 同步 ================= */
.today-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 2px}
.today-cell{background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.today-num{font-size:26px;font-weight:700;color:var(--brand);line-height:1.15;letter-spacing:-.5px}
.today-num small{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:2px}
.today-label{font-size:12px;color:var(--ink-3);margin-top:5px}
@media(max-width:820px){.today-grid{grid-template-columns:repeat(2,1fr)}}

.spk{border:0;background:#eef4fb;color:#2f5d8f;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 7px;margin-left:8px;vertical-align:middle;line-height:1.6}
.spk:hover{background:#dbe9f8}
.spk:active{transform:scale(.96)}

.srs-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px;margin:14px 0;text-align:center;min-height:170px;display:flex;flex-direction:column;justify-content:center}
.srs-en{font-size:27px;font-weight:700;color:var(--brand);letter-spacing:-.3px;line-height:1.3}
.srs-cn{font-size:16px;color:var(--ink-2);margin-top:12px}
.srs-eg{font-size:13.5px;color:var(--ink-3);margin-top:10px;line-height:1.7}
.srs-meta{font-size:12px;color:var(--ink-3);margin-top:4px}
.srs-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:9px 18px;font-size:14px;cursor:pointer;font-family:inherit}
.btn:hover{border-color:var(--brand-2);color:var(--brand-2)}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.p:hover{background:#16314f;color:#fff}
.btn.g{background:#e7f5ec;border-color:#bfe3cd;color:#177245}
.btn.o{background:#fdf0e4;border-color:#f3d5b5;color:#b45309}
.btn.r{background:#fdeaea;border-color:#f6c9c9;color:#b91c1c}
.btn.sm{padding:6px 12px;font-size:13px}

.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;z-index:200;padding:18px}
.modal-mask.on{display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:14px;max-width:580px;width:100%;padding:22px 24px;box-shadow:0 24px 60px rgba(0,0,0,.22);max-height:88vh;overflow:auto}
.modal h3{margin:0 0 6px;font-size:18px;color:var(--brand)}
.modal textarea{width:100%;height:110px;font-size:12px;font-family:ui-monospace,Consolas,monospace;border:1px solid var(--line);border-radius:8px;padding:10px;margin:8px 0;resize:vertical;background:#fafbfd}
.modal .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.sync-btn{display:block;width:100%;margin-top:14px;padding:9px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#a8bdd6;font-size:12.5px;cursor:pointer;font-family:inherit}
.sync-btn:hover{background:rgba(255,255,255,.12);color:#fff}

@media(max-width:640px){
  .main{padding:20px 15px 70px}
  h1{font-size:23px}
  h2{font-size:18px;margin:30px 0 12px}
  .table-wrap{-webkit-overflow-scrolling:touch}
  .table-wrap table{font-size:13px}
  .srs-en{font-size:22px}
  .toolbar{position:static}
}

/* ================= 追加：多科目小站 / 范文 / 五十音 / 背词卡 ================= */
.hero{background:linear-gradient(135deg,#1e3a5f 0%,#2f5d8f 100%);color:#fff;border-radius:14px;padding:32px 34px 28px;margin:0 0 24px;box-shadow:var(--shadow)}
.hero h1{color:#fff;font-size:29px;margin:0 0 6px}
.hero .hp{color:#c9d9ec;font-size:15px;margin:0}
.hero .facts{display:flex;gap:30px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.hero .fact b{display:block;font-size:21px;color:#fff;line-height:1.2}
.hero .fact span{font-size:12px;color:#a9c0da}
@media(max-width:640px){.hero{padding:24px 20px}.hero h1{font-size:23px}.hero .facts{gap:20px}.hero .fact b{font-size:18px}}

.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0}
@media(max-width:820px){.subject-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.subject-grid{grid-template-columns:1fr}}
.subject-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand-2);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow);text-decoration:none;color:inherit;display:block;transition:.15s}
.subject-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,24,40,.1)}
.subject-card h3{margin:0 0 4px;font-size:16px;color:var(--brand)}
.subject-card .meta{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.subject-card .go{font-size:13px;color:var(--brand-2);margin-top:9px;display:inline-block;font-weight:600}
.s13605{border-left-color:#2f5d8f}.s13607{border-left-color:#b45309}.s00840{border-left-color:#0f766e}
.sprac{border-left-color:#7c3aed}.sother{border-left-color:#94a3b8}

.prompt{background:#f7f9fc;border:1px dashed #c8d6e6;border-radius:8px;padding:12px 16px;margin:10px 0;font-size:14.5px;color:var(--ink-2)}
.prompt b{color:var(--brand)}
.model{background:#fbfdf9;border:1px solid #d9e8d9;border-radius:8px;padding:14px 16px;margin:10px 0;font-size:14.5px;line-height:1.85}
.model .mhead{font-size:12px;color:var(--ok);font-weight:700;margin-bottom:6px;letter-spacing:.6px}
.model .anno{color:#b45309;font-size:13px;font-style:normal}
.wc{font-size:12.5px;color:var(--ink-3);margin-top:8px}
.box{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:#fff;margin:10px 0}
.box h4{margin:0 0 6px;font-size:14px;color:var(--brand)}
.box p{margin:5px 0;font-size:14px}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:12px 14px;white-space:pre-wrap;line-height:1.8;overflow-x:auto}

.kana-table{width:100%;border-collapse:collapse;font-size:14px;text-align:center;background:#fff}
.kana-table th{background:#f2f5f9;color:var(--ink-2);font-size:12.5px;padding:7px 4px;border:1px solid var(--line)}
.kana-table td{border:1px solid var(--line);padding:6px 4px}
.kana-table .k{font-size:19px;color:var(--brand);display:block;line-height:1.3}
.kana-table .r{font-size:11px;color:var(--ink-3);letter-spacing:.3px}
.kana-table td.empty{background:#fafbfd}
.jp{font-family:"Yu Gothic","Hiragino Sans","Noto Sans JP","Meiryo","Microsoft YaHei",sans-serif}

/* ---------- 卡片背单词 ---------- */
.vwrap{max-width:600px;margin:0 auto}
.vbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.vstat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
.vstat div{background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:9px 6px;text-align:center}
.vstat b{display:block;font-size:19px;color:var(--brand);line-height:1.2}
.vstat span{font-size:11.5px;color:var(--ink-3)}
.vcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(16,24,40,.08);
  min-height:330px;padding:26px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform .18s,opacity .18s}
.vcard.flip{background:linear-gradient(180deg,#fff,#f8fbff)}
.vcard.swipe-l{transform:translateX(-120%) rotate(-8deg);opacity:0}
.vcard.swipe-r{transform:translateX(120%) rotate(8deg);opacity:0}
.vcard.swipe-u{transform:translateY(-120%);opacity:0}
.v-front{font-size:34px;font-weight:700;color:var(--brand);line-height:1.35;letter-spacing:-.5px;word-break:break-word}
.v-front.jpword{font-size:44px;letter-spacing:.02em}
.v-sub{font-size:15px;color:var(--ink-3);margin-top:10px}
.v-back{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);width:100%}
.v-cn{font-size:20px;color:var(--ink);font-weight:600}
.v-eg{font-size:13.5px;color:var(--ink-2);margin-top:10px;line-height:1.75;text-align:left;background:#f8fafc;border-radius:8px;padding:10px 12px}
.v-egcn{font-size:12.5px;color:var(--ink-3);margin-top:5px;display:block}
.v-hint{font-size:12px;color:var(--ink-3);margin-top:14px}
.v-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.v-btns button{padding:13px 4px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-family:inherit;cursor:pointer;color:var(--ink)}
.v-btns button:active{transform:scale(.97)}
.v-btns .b1{border-color:#f6c9c9;background:#fdeaea;color:#b91c1c}
.v-btns .b2{border-color:#f3d5b5;background:#fdf0e4;color:#b45309}
.v-btns .b3{border-color:#bfe3cd;background:#e7f5ec;color:#177245}
.v-btns .b4{border-color:#c9dcf5;background:#eaf2fd;color:#1d4ed8}
.v-btns button:disabled{opacity:.4;cursor:default}
.v-empty{text-align:center;padding:60px 20px;color:var(--ink-3)}
.v-src{font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:16px;line-height:1.7}
@media(max-width:640px){
  .v-front{font-size:29px}.v-front.jpword{font-size:38px}
  .vcard{min-height:300px;padding:22px 16px}
  .v-btns button{padding:14px 2px;font-size:12.5px}
}

/* ========== 13607 写作分册：范文与批注样式 ========== */
.letter{background:#fbfaf6;border:1px solid var(--line);border-left:3px solid #c9a227;border-radius:8px;padding:16px 18px;font-family:Georgia,"Times New Roman","Songti SC",serif;font-size:14.5px;line-height:1.9;white-space:pre-wrap;overflow-x:auto;color:#1c2430}
.letter b{color:var(--brand)}
.letter-cap{font-size:12.5px;color:var(--ink-3);margin:8px 0 0;line-height:1.7}
.anno{margin:10px 0 0;padding:0;list-style:none;font-size:13.5px}
.anno li{padding:6px 0 6px 26px;position:relative;border-bottom:1px dashed var(--line)}
.anno li:last-child{border-bottom:0}
.anno li:before{content:"✎";position:absolute;left:6px;top:6px;color:var(--accent);font-size:12px}
.tier{display:grid;gap:10px}
.tier .t{padding:12px 14px;border-radius:8px;border:1px solid var(--line);background:#fff}
.tier .t h4{margin:0 0 6px;font-size:14px}
.tier .t.p1{border-left:3px solid #c53030}
.tier .t.p2{border-left:3px solid #b7791f}
.tier .t.p3{border-left:3px solid #2f855a}
.tier .t p{margin:0;font-size:13.5px;color:var(--ink-3)}
.tier .t .en{font-family:Georgia,serif;color:#1c2430}
.node{border-left:3px solid var(--brand);padding:2px 0 2px 14px;margin:16px 0}
.node h3{margin:0 0 4px}
.node .tag{font-size:12px;color:var(--ink-3);letter-spacing:.04em}