* { box-sizing: border-box; }
:root{
  --bg:#eef1f5; --panel:#ffffff; --border:#e1e5ec; --text:#1f2430;
  --muted:#6b7280; --accent:#2563eb; --accent-soft:#eaf1ff; --ok:#16a34a;
  --shadow:0 1px 3px rgba(16,24,40,.08);
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.65;}
a{color:var(--accent);}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--border);box-shadow:var(--shadow);}
.brand{font-weight:700;font-size:16px;white-space:nowrap;}
.menu-btn{display:none;border:none;background:transparent;font-size:22px;cursor:pointer;margin-right:-6px;}
.search-wrap{flex:1;display:flex;align-items:center;gap:8px;max-width:620px;}
#search{flex:1;padding:9px 13px;border:1px solid var(--border);border-radius:9px;
  font-size:14px;outline:none;background:#fff;}
#search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.search-count{color:var(--muted);font-size:13px;white-space:nowrap;}
.progress{color:var(--ok);font-size:13px;font-weight:600;white-space:nowrap;}

.layout{display:flex;align-items:stretch;height:calc(100vh - 57px);}

/* ---------- 左侧栏：导航 + 题列表 ---------- */
.sidebar{width:380px;flex:0 0 380px;display:flex;flex-direction:column;
  background:var(--panel);border-right:1px solid var(--border);min-height:0;}
.sidebar-nav{flex:0 0 auto;max-height:44%;overflow-y:auto;border-bottom:1px solid var(--border);padding:8px 0 4px;}
.sidebar-head{padding:4px 18px 8px;font-size:12px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
.nav-group{margin-bottom:2px;}
.nav-group-title{padding:7px 16px;font-weight:700;font-size:13px;color:var(--text);cursor:pointer;
  display:flex;align-items:center;gap:6px;user-select:none;}
.nav-group-title .tg{transition:transform .15s;font-size:10px;color:var(--muted);}
.nav-group.collapsed .tg{transform:rotate(-90deg);}
.nav-group.collapsed .nav-cats{display:none;}
.nav-cats{display:flex;flex-direction:column;}
.nav-cat{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 6px 30px;
  cursor:pointer;color:var(--muted);font-size:13.5px;border-left:3px solid transparent;}
.nav-cat:hover{background:var(--accent-soft);color:var(--text);}
.nav-cat.active{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent);font-weight:600;}
.nav-cat .cnt{font-size:11px;color:var(--muted);background:#eef1f5;border-radius:10px;padding:0 7px;}
.nav-all{padding:7px 16px;cursor:pointer;color:var(--muted);font-size:13.5px;font-weight:600;border-left:3px solid transparent;}
.nav-all:hover{background:var(--accent-soft);color:var(--text);}
.nav-all.active{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent);}

.sidebar-list{flex:1 1 auto;overflow-y:auto;min-height:0;padding:0 0 20px;}
.list-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:baseline;
  padding:10px 18px 8px;background:var(--panel);border-bottom:1px solid var(--border);}
#listTitle{font-weight:700;font-size:14px;}
.list-count{font-size:12px;color:var(--muted);}
.list{display:flex;flex-direction:column;}
.list-item{padding:10px 18px 10px 28px;cursor:pointer;border-left:3px solid transparent;
  border-bottom:1px solid #f1f3f7;font-size:14px;color:var(--text);}
.list-item:hover{background:var(--accent-soft);}
.list-item.active{background:var(--accent-soft);border-left-color:var(--accent);color:var(--accent);font-weight:600;}
.list-item .li-q{line-height:1.45;}
.list-item .li-cat{display:block;font-size:11px;color:var(--muted);margin-top:3px;}
.list-item.mastered .li-q::after{content:"✓";color:var(--ok);font-weight:700;margin-left:6px;}
.list-empty{text-align:center;color:var(--muted);padding:36px 16px;font-size:14px;}

/* ---------- 右侧阅读区 ---------- */
.reader{flex:1 1 auto;overflow-y:auto;background:var(--bg);min-width:0;}
.reader-empty{max-width:520px;margin:120px auto 40px;padding:46px 36px;text-align:center;
  background:var(--panel);border-radius:14px;box-shadow:var(--shadow);color:var(--muted);}
.reader-empty .re-ico{font-size:46px;margin-bottom:12px;}
.reader-empty .re-text{font-size:15px;}
.reader-doc{max-width:780px;margin:22px auto 60px;background:var(--panel);border-radius:14px;
  box-shadow:var(--shadow);padding:32px 38px 80px;}
.reader-q{font-size:22px;font-weight:800;line-height:1.45;margin:0 0 10px;color:#111827;}
.reader-meta{color:var(--muted);font-size:13px;margin-bottom:16px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.reader-meta .tag{background:#e9edf3;border-radius:6px;padding:2px 9px;font-size:12px;}
.reader-actions{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;
  padding:10px 0 12px;margin-bottom:16px;background:linear-gradient(var(--panel) 80%, rgba(255,255,255,0));
  border-bottom:1px solid var(--border);flex-wrap:wrap;}
.btn{border:1px solid var(--border);background:#fff;color:var(--text);padding:7px 14px;border-radius:8px;
  font-size:13px;cursor:pointer;}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.mastered-label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer;
  user-select:none;}
.card-check{width:16px;height:16px;cursor:pointer;accent-color:var(--ok);}
.reader-pos{margin-left:auto;color:var(--muted);font-size:12px;}

/* 答案正文排版（与卡片一致，放宽为更舒服的阅读尺寸） */
.reader-a{font-size:15.5px;line-height:1.75;color:#243044;}
.reader-a :first-child{margin-top:0;}
.reader-a h1,.reader-a h2,.reader-a h3{margin:20px 0 10px;line-height:1.4;color:#111827;}
.reader-a h1{font-size:20px;} .reader-a h2{font-size:17px;} .reader-a h3{font-size:15.5px;}
.reader-a p{margin:9px 0;}
.reader-a ul,.reader-a ol{margin:10px 0;padding-left:24px;}
.reader-a li{margin:5px 0;}
.reader-a code{background:#e9edf3;padding:1px 6px;border-radius:4px;font-size:14px;
  font-family:"SFMono-Regular",Consolas,monospace;}
.reader-a pre{background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius:10px;overflow:auto;
  font-size:13.5px;line-height:1.55;}
.reader-a pre code{background:transparent;color:inherit;padding:0;font-size:inherit;}
.reader-a table{border-collapse:collapse;margin:12px 0;width:100%;font-size:14.5px;}
.reader-a th,.reader-a td{border:1px solid var(--border);padding:7px 11px;text-align:left;}
.reader-a th{background:#eef2f7;}
.reader-a blockquote{margin:12px 0;padding:8px 14px;border-left:3px solid var(--accent);
  background:var(--accent-soft);color:#33415c;border-radius:0 8px 8px 0;}
.reader-a img{max-width:100%;border-radius:8px;}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .menu-btn{display:block;}
  .sidebar{position:fixed;left:0;top:57px;bottom:0;z-index:40;
    transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 24px rgba(0,0,0,.18);}
  .sidebar.show{transform:translateX(0);}
  .reader-doc{padding:22px 18px 80px;}
}
.answer-loading {
  color: #64748b;
  padding: 24px 0;
}
.mobile-back{display:none;}

/* iPhone / 手机专用阅读模式 */
@media (max-width:700px){
  html,body{width:100%;height:100%;overflow:hidden;background:#fff;-webkit-text-size-adjust:100%;}
  body{padding-top:env(safe-area-inset-top);}
  .topbar{height:auto;min-height:58px;padding:8px 12px;gap:8px;flex-wrap:wrap;}
  .menu-btn{display:block;flex:0 0 40px;width:40px;height:40px;margin:0;border-radius:10px;
    font-size:23px;line-height:40px;color:#1f2937;touch-action:manipulation;}
  .menu-btn:active{background:var(--accent-soft);}
  .brand{font-size:15px;max-width:118px;overflow:hidden;text-overflow:ellipsis;}
  .progress{margin-left:auto;font-size:11px;}
  .search-wrap{order:2;flex:0 0 100%;max-width:none;}
  #search{height:42px;font-size:16px;border-radius:12px;padding:9px 13px;}
  .search-count{font-size:11px;}
  .layout{height:calc(100dvh - 108px - env(safe-area-inset-top));display:block;}

  .sidebar{position:relative;inset:auto;width:100%;height:100%;display:flex;transform:none;
    box-shadow:none;border:0;transition:none;}
  .sidebar-nav{max-height:38%;padding-top:4px;overscroll-behavior:contain;}
  .sidebar-head{padding-left:16px;}
  .nav-group-title,.nav-all{min-height:44px;padding-top:10px;padding-bottom:10px;}
  .nav-cat{min-height:42px;padding-top:9px;padding-bottom:9px;}
  .sidebar-list{padding-bottom:calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain;}
  .list-head{padding:10px 16px;}
  .list-item{min-height:58px;padding:11px 16px;border-left:0;touch-action:manipulation;}
  .list-item.active{border-left:0;}

  .reader{display:none;width:100%;height:100%;overflow-y:auto;background:#fff;
    -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;}
  body.mobile-reading .sidebar{display:none;}
  body.mobile-reading .reader{display:block;}
  body.mobile-reading .topbar{min-height:56px;height:56px;flex-wrap:nowrap;}
  body.mobile-reading .search-wrap,body.mobile-reading .progress{display:none;}
  body.mobile-reading .layout{height:calc(100dvh - 56px - env(safe-area-inset-top));}
  .reader-empty{display:none;}
  .reader-doc{max-width:none;min-height:100%;margin:0;border-radius:0;box-shadow:none;
    padding:20px 17px calc(100px + env(safe-area-inset-bottom));}
  .reader-q{font-size:21px;line-height:1.42;margin-bottom:10px;}
  .reader-meta{font-size:12px;margin-bottom:12px;gap:6px;}
  .reader-meta .tag{padding:2px 7px;}
  .reader-a{font-size:16px;line-height:1.78;overflow-wrap:anywhere;}
  .reader-a h1{font-size:20px}.reader-a h2{font-size:18px}.reader-a h3{font-size:16px}
  .reader-a pre,.reader-a table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .reader-a pre{font-size:13px;padding:12px;border-radius:8px;}

  .reader-actions{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:50;margin:0;
    min-height:64px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:7px;flex-wrap:nowrap;
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--border);border-bottom:0;box-shadow:0 -3px 18px rgba(15,23,42,.08);}
  .reader-actions .btn{min-height:42px;padding:7px 10px;font-size:13px;white-space:nowrap;touch-action:manipulation;}
  .mobile-back{display:inline-flex;align-items:center;color:var(--accent);font-weight:700;}
  .mastered-label{min-width:42px;justify-content:center;font-size:0;}
  .mastered-label::after{content:"掌握";font-size:12px;}
  .card-check{width:20px;height:20px;}
  .reader-pos{font-size:11px;white-space:nowrap;margin-left:auto;}
}