/* ianki —— 极简纸卡。移动优先，桌面只是把内容居中限宽。
   视觉基准是 设计稿/1-卡片界面方案.html 的方案 A。 */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* HTML 的 hidden 属性等价于 display:none，但任何显式 display 声明都会盖掉它——
   .btn-primary 的 display:block 就把 hidden 顶掉了，导致「显示答案」和「下一张」
   两个按钮同时出现。这条必须放在所有组件样式之前兜底。 */
[hidden]{display:none !important}

:root{
  --sc:1;                       /* 正文字号缩放，三档，存 localStorage */
  --card:#ffffff; --page:#ffffff;
  --ink:#16181d; --ink2:#5f636b; --ink3:#a2a6ae;
  --line:#e7e7ea; --line2:#f2f2f4;
  --accent:#186b57; --accent-soft:#e8f2ee;
  --warm:#a8501f; --warm-soft:#fbeee6;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --card:#17191c; --page:#0e0f11;
    --ink:#eceef1; --ink2:#9aa0a8; --ink3:#63686f;
    --line:#26282c; --line2:#1c1e21;
    --accent:#4bbf9c; --accent-soft:#16302a;
    --warm:#d98a5a; --warm-soft:#2e211a;
  }
}

html,body{height:100%;overscroll-behavior-y:none}
body{
  background:var(--card); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.screen{
  position:fixed; inset:0; display:flex; flex-direction:column;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);
  background:var(--card); max-width:560px; margin:0 auto;
}
.screen[hidden]{display:none}



/* ───────── 通用控件 ───────── */
.btn-primary{
  display:block; width:100%; padding:17px; border:0; border-radius:16px;
  background:var(--ink); color:var(--card);
  font:600 16.5px/1 inherit; font-family:inherit; cursor:pointer;
  transition:transform .12s, opacity .12s; min-height:52px;
}
.btn-primary:active{transform:scale(.975)}
.btn-primary:disabled{opacity:.4}
.btn-ghost{
  display:block; width:100%; padding:14px; border:1px solid var(--line);
  border-radius:14px; background:var(--card); color:var(--ink);
  font:500 15px/1 inherit; font-family:inherit; cursor:pointer;
  text-align:center; text-decoration:none; margin-top:14px;
}
.icon-btn{
  width:44px; height:44px; display:grid; place-items:center;
  border:0; background:none; color:var(--ink3); cursor:pointer; border-radius:50%;
}
.icon-btn:active{background:var(--line2)}
label{display:block; font-size:13px; color:var(--ink2); margin:18px 0 7px; font-weight:500}
textarea,input[type=text],input[type=search],input[type=password],select{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--ink);
  font:16px/1.6 inherit; font-family:inherit;   /* 16px 防止 iOS 聚焦时缩放 */
  -webkit-appearance:none; appearance:none;
}
textarea{resize:vertical; min-height:76px}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

/* ───────── 登录 ───────── */
.login{flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 34px}
.login-h{font-size:30px; font-weight:680; letter-spacing:-.6px; margin-bottom:28px; text-align:center}
#login-form{display:flex; flex-direction:column; gap:12px}
.login-err{color:var(--warm); font-size:14px; text-align:center; margin-top:14px}

/* ───────── 今天 ───────── */
.today-head{display:flex; align-items:flex-start; justify-content:space-between; padding:26px 26px 22px}
.today-head .date{font-size:13px; color:var(--ink3); letter-spacing:.3px}
.today-head h1{font-size:31px; font-weight:680; letter-spacing:-.7px; margin-top:5px}
.groups{flex:1; overflow-y:auto; padding:0 26px}
.grp{
  display:flex; align-items:center; gap:15px; width:100%;
  padding:19px 4px; border:0; border-bottom:1px solid var(--line);
  background:none; color:var(--ink); font:inherit; cursor:pointer; text-align:left;
  transition:opacity .18s;
}
.grp:active{opacity:.5}
.grp .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 9px}
.grp.done .dot{background:var(--line)}
.grp .nm{flex:1; font-size:18px; font-weight:520}
.grp.done .nm{color:var(--ink3)}
.grp .n{font-size:15px; color:var(--ink2); font-variant-numeric:tabular-nums}
.grp .chev{color:var(--ink3); font-size:17px}
.grp.done .n,.grp.done .chev{color:var(--accent)}
.today-foot{padding:20px 26px calc(26px + var(--safe-b))}
.hint{text-align:center; font-size:12.5px; color:var(--ink3); margin-top:13px}

/* ───────── 顶栏 ───────── */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px 12px; font-size:14px; color:var(--ink2);
}
.topbar .back{
  width:44px; height:38px; border:0; background:none; color:var(--ink2);
  font-size:26px; line-height:1; cursor:pointer; text-align:left; padding-left:10px;
}
.topbar .mid{font-weight:600; color:var(--ink); font-size:15px}
.topbar .cnt{min-width:56px; text-align:right; padding-right:12px;
  font-size:13.5px; color:var(--ink3); font-variant-numeric:tabular-nums}
.topbar .del{border:0; background:none; color:var(--warm); font:500 14px inherit;
  font-family:inherit; cursor:pointer; padding:0 12px}
.prog{flex:0 0 3px; height:3px; background:var(--line)}
.prog i{display:block; height:100%; width:0; background:var(--accent);
  transition:width .35s cubic-bezier(.4,0,.2,1)}

/* ───────── 卡片（方案 A） ───────── */
.scroll{
  flex:1; overflow-y:auto; padding:14px 28px 20px; min-height:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent);
}
.qa{padding-top:10px}
.src{font-size:12px; color:var(--ink3); margin-bottom:12px; letter-spacing:.3px}
.q{font-size:calc(24px * var(--sc)); font-weight:600; line-height:1.48; letter-spacing:-.3px}
.q.small{font-size:calc(17px * var(--sc)); font-weight:600; color:var(--ink2); line-height:1.5}
.divider{height:1px; background:var(--line); margin:26px 0}
.a{font-size:calc(17px * var(--sc)); line-height:1.78; color:var(--ink); word-break:break-word}
.a.big{font-size:calc(26px * var(--sc)); font-weight:600; line-height:1.5}
/* 从 Anki 搬来的内联 HTML：br / small / hr / b 都要正常显示 */
/* 顶上的 *{margin:0} 把 <p> 的默认边距清零了，而 Markdown 的段落全是 <p>，
   不补回来的话答案里的多个自然段会连成一坨。 */
.a p,.q p{margin:0 0 .9em}
.a p:last-child,.q p:last-child{margin-bottom:0}
.a a,.q a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.a hr{border:0; border-top:1px solid var(--line); margin:18px 0}
.a small{font-size:.84em; color:var(--ink2)}
.a strong,.a b{font-weight:660}
.a ul,.a ol{margin:12px 0 12px 22px}
.a li{margin:5px 0}
.a code{background:var(--line2); padding:2px 6px; border-radius:5px;
  font-family:ui-monospace,Menlo,monospace; font-size:.88em}
.a img{max-width:100%; height:auto; border-radius:8px}
.spk{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--accent);
  background:var(--accent-soft); padding:5px 11px; border-radius:999px; margin-bottom:14px;
}
.spk i{width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
/* 这里必须有 display:flex —— 只写 flex:0 0 auto 是把自己当 flex item，
   不会让子元素成为 flex 布局，桌面上按钮就靠左了 */
.acts{flex:0 0 auto; display:flex; justify-content:center; gap:11px; padding:14px 22px calc(26px + var(--safe-b))}

/* ───────── 完成 ───────── */
.done{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px 34px}
.done .ck{width:64px; height:64px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; font-size:31px; margin-bottom:24px}
.done h2{font-size:26px; font-weight:650; letter-spacing:-.4px}
.done p{color:var(--ink2); font-size:14.5px; margin-top:10px}
.done .more{margin-top:38px; background:none; border:0; color:var(--ink3);
  font:13.5px inherit; font-family:inherit; cursor:pointer;
  border-bottom:1px solid var(--line); padding-bottom:3px}

/* ───────── 卡片库 ───────── */
.tabs{display:flex; gap:4px; padding:0 20px 12px; border-bottom:1px solid var(--line)}
.tab{flex:1; padding:11px 0; border:0; background:none; color:var(--ink3);
  font:600 14.5px inherit; font-family:inherit; cursor:pointer; border-radius:10px}
.tab.on{color:var(--ink); background:var(--line2)}
.pane{flex:1; overflow-y:auto; padding:18px 22px calc(30px + var(--safe-b))}
.searchbar{display:flex; gap:9px; margin-bottom:14px}
.searchbar input{flex:1}
.searchbar select{width:auto; min-width:106px; padding-right:34px}
.list{display:flex; flex-direction:column}
.row{
  display:block; width:100%; text-align:left; padding:15px 4px;
  border:0; border-bottom:1px solid var(--line); background:none;
  color:var(--ink); font:inherit; cursor:pointer;
}
.row:active{background:var(--line2)}
.row .rf{font-size:15.5px; font-weight:560; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.row .rb{font-size:13px; color:var(--ink2); margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.row .rg{font-size:11.5px; color:var(--ink3); margin-top:6px}
.empty{text-align:center; color:var(--ink3); font-size:14px; padding:50px 0}

.seg{display:flex; gap:6px; background:var(--line2); padding:4px; border-radius:12px; margin-bottom:6px}
.seg-btn{flex:1; padding:9px 0; border:0; border-radius:9px; background:none; color:var(--ink2);
  font:600 14px inherit; font-family:inherit; cursor:pointer}
.seg-btn.on{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08)}
@media (prefers-color-scheme:dark){.seg-btn.on{box-shadow:none; background:var(--line)}}

.dups{margin-top:16px; padding:14px 16px; background:var(--warm-soft); border-radius:12px}
.dups .dh{font-size:13px; color:var(--warm); font-weight:600; margin-bottom:9px}
.dups .di{font-size:13.5px; color:var(--ink2); padding:5px 0; line-height:1.5}
.preview{margin-top:18px}
.preview .pc{border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin-bottom:10px}
.preview .pf{font-size:14.5px; font-weight:560}
.preview .pb{font-size:13px; color:var(--ink2); margin-top:5px; white-space:pre-wrap}
.preview .warn{color:var(--warm); font-size:12px; margin-top:6px}

.sec-h{font-size:13px; color:var(--ink3); font-weight:600; margin:26px 0 10px; letter-spacing:.3px}
.sec-h:first-child{margin-top:4px}
.setting-list{border-top:1px solid var(--line)}
.srow{display:flex; align-items:center; gap:13px; padding:15px 2px; border-bottom:1px solid var(--line)}
.srow .sn{flex:1; font-size:15.5px}
.srow .sc{font-size:12px; color:var(--ink3); margin-top:3px}
.srow input[type=number]{width:62px; padding:8px; text-align:center; font-size:15px}
.sw{position:relative; width:47px; height:29px; flex:0 0 47px}
.sw input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2}
.sw span{position:absolute; inset:0; background:var(--line); border-radius:99px; transition:background .22s}
.sw span::after{content:""; position:absolute; top:3px; left:3px; width:23px; height:23px;
  background:#fff; border-radius:50%; transition:transform .22s; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked + span{background:var(--accent)}
.sw input:checked + span::after{transform:translateX(18px)}
.stat{font-size:14px; color:var(--ink2); line-height:1.9}
.fineprint{font-size:12px; color:var(--ink3); margin-top:10px; line-height:1.65}
.meta-line{font-size:12px; color:var(--ink3); margin-top:20px; line-height:1.8}

/* ───────── 提示条 ───────── */
.toast{
  position:fixed; left:50%; bottom:calc(30px + var(--safe-b)); transform:translateX(-50%);
  background:var(--ink); color:var(--card); padding:12px 22px; border-radius:999px;
  font-size:14px; z-index:99; max-width:88vw; text-align:center;
  animation:rise .22s cubic-bezier(.32,.72,0,1);
}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.offline-bar{
  position:fixed; top:var(--safe-t); left:0; right:0; z-index:98;
  background:var(--warm-soft); color:var(--warm); text-align:center;
  font-size:12.5px; padding:7px 12px;
}

/* ═══════════ 桌面适配 ═══════════
   必须放在文件最末尾：CSS 同特异性时后面的规则胜出，
   这块原本写在 .acts / .btn-primary 定义之前，被它们整个盖掉了 —— 
   症状是 .acts 的 display 算出来还是 block、padding 还是手机的 22px。*/
/* 桌面：不再是「居中的窄条」，而是一张真正的卡片。
   内容用 margin:auto 垂直居中 —— 内容少时不会孤零零吊在顶上、下面空一大片，
   内容多时又能正常滚动（flex 的 justify-content:center 在内容超高时会裁掉顶部，不能用）。 */
@media (min-width:600px){
  body{background:var(--page); display:grid; place-items:center}
  .screen{
    position:relative; inset:auto;
    width:min(720px, 94vw); max-width:none; height:min(880px, 92vh);
    border-radius:20px; border:1px solid var(--line);
    box-shadow:0 1px 3px rgba(0,0,0,.04), 0 18px 50px rgba(0,0,0,.08);
    padding-top:0; padding-bottom:0;
  }
  body.dark .screen{box-shadow:none}

  /* .scroll 本身要是 flex 容器，margin:auto 才有支点 —— 否则 .qa 照样贴顶 */
  .scroll{padding:26px 44px 24px; display:flex; flex-direction:column}
  .qa{margin:auto 0}                    /* 内容少时垂直居中，多时照常滚 */
  .q{font-size:calc(26px * var(--sc))}
  .a{font-size:calc(17.5px * var(--sc)); line-height:1.85}

  /* 按钮不占满一整条，桌面上太宽的按钮很笨重 */
  /* 按钮别用 flex:1 —— 那样它从左边起算宽度，max-width 一限就贴在左侧了 */
  .acts{justify-content:center; padding:18px 44px 30px}
  .acts .btn-primary,.acts .reveal{flex:0 0 auto; width:240px}
  .acts .abtn{flex:0 0 auto; width:150px}
  .home{padding:34px 44px 30px}
  .today-head{padding:34px 44px 24px}
  .groups{padding:0 44px}
  .today-foot{padding:22px 44px 34px}
  .today-foot .btn-primary{max-width:320px; margin:0 auto}
  .pane{padding:22px 44px 34px}
  .tabs{padding:0 44px 12px}
  .topbar{padding:14px 20px 12px}
}

/* 快捷键提示：只在有真键盘的设备上出现 */
.keyhint{
  display:none; text-align:center; font-size:12px; color:var(--ink3);
  padding:0 0 14px; letter-spacing:.2px;
}
.keyhint kbd{
  font-family:inherit; font-size:11.5px; background:var(--line2); color:var(--ink2);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:2px 7px; margin:0 2px;
}
@media (min-width:600px) and (hover:hover) and (pointer:fine){
  .keyhint{display:block}
}