/* 星卡学堂 — a quiet collection of curious things. */
:root {
  --bg:#f5f3ec; --panel:#fcfbf7; --panel-2:#f0eee5;
  --line:#deddd3; --line-strong:#c6c5b9;
  --ink:#282b25; --ink-2:#53564b; --muted:#73766a;
  --brand:#bb4934; --brand-dark:#a23b29; --brand-2:#bb4934;
  --brand-soft:#f5e8e1; --brand-line:#e8c5b8;
  --card:#b7513a; --card-soft:#eae6dc;
  --gold-1:#bd4b35; --gold-2:#a93d2b; --gold-ink:#fffaf2;
  --r-s:5px; --r:8px; --r-l:10px; --r-xl:12px;
  --sh-1:none; --sh-2:0 4px 14px -10px #292b2426; --sh-3:0 14px 36px -24px #292b2433;
  --sh-modal:0 28px 90px #24271e26;
  --serif:"Songti SC","STSong","Noto Serif CJK SC","SimSun",Georgia,serif;
}
body { background:var(--bg); color:var(--ink); font-size:14px; }
::selection { background:#ebcabc; }
button { -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:not-allowed; opacity:.45; transform:none!important; }
.skip-link { position:fixed; top:-60px; left:230px; z-index:300; background:var(--ink); color:#fff; padding:10px 20px; }
.skip-link:focus { top:8px; }
.topbar { position:fixed; inset:0 auto 0 0; width:212px; height:100dvh; padding:38px 22px 22px; flex-direction:column; align-items:stretch; gap:0; background:#eeede5; border:0; border-right:1px solid var(--line); backdrop-filter:none; }
.brand { padding:0; text-align:left; gap:10px; }
.brand-mark { width:36px; height:44px; background:none; color:var(--brand); font-size:43px; border-radius:0; box-shadow:none; font-weight:400; }
.brand-word { display:flex; flex-direction:column; gap:2px; }
.brand-name { font-family:var(--serif); font-size:20px; letter-spacing:1px; font-weight:700; }
.brand-en { font-size:8px; font-weight:600; letter-spacing:1.8px; color:var(--muted); }
.sidebar-label { margin:56px 12px 17px; color:#848579; font-size:10px; letter-spacing:2px; }
.nav { flex:0 0 auto; flex-direction:column; gap:8px; overflow:visible; }
.nav-item { position:relative; display:flex; align-items:center; gap:13px; padding:13px 12px; border-radius:5px; font-size:13px; font-weight:500; color:var(--ink-2); }
.nav-item svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.nav-item:hover { background:#e5e3d8; }
.nav-item.on { background:#e3e0d5; color:var(--ink); font-weight:650; }
.nav-item.on::after { content:''; position:absolute; right:0; height:15px; width:3px; background:var(--brand); border-radius:1px; }
.nav-no { margin-left:auto; color:#8b8c7f; font-family:Georgia,serif; font-size:11px; }
.sidebar-note { margin-top:auto; padding:42px 12px 28px; }
.mini-star { display:block; color:var(--brand); font-size:31px; line-height:1; margin-bottom:16px; }
.sidebar-note p { font-family:var(--serif); font-size:19px; line-height:1.6; letter-spacing:.5px; }
.sidebar-note>span:last-child { display:block; font-size:8px; letter-spacing:2px; color:var(--muted); margin-top:13px; }
.wallet { flex-direction:column; align-items:stretch; border-top:1px solid #d9d8cd; padding-top:18px; gap:12px; }
.wallet .btn { justify-content:flex-start; padding-left:12px; font-weight:400; font-size:12px; }
.wallet .btn span { font-size:18px; margin-right:8px; }
.local-status { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); padding-left:12px; }
.local-status i { width:5px; height:5px; border-radius:50%; background:#78856c; }
.workspace { margin-left:212px; padding:0 44px; max-width:1720px; }
.workspace-top { height:90px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); }
.breadcrumb { display:flex; align-items:center; gap:15px; font-size:11px; color:var(--muted); }
.breadcrumb span { color:#b3b4a8; }
.breadcrumb b { color:var(--ink); font-weight:500; }
.chip { border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--ink-2); box-shadow:none; font-size:11px; }
.chip-unlock { background:transparent; border:0; padding-right:0; color:var(--ink-2); font-weight:400; gap:8px; }
.chip-unlock>span:first-child { color:var(--brand); font-size:18px; }
.chip-unlock b { font-weight:500; }
.badge-divider { color:var(--muted); }
#app { max-width:none; width:100%; margin:0; padding:32px 0 10px; min-height:calc(100dvh - 161px); outline:none; }
.workspace-footer { display:flex; justify-content:space-between; gap:20px; padding:23px 0 25px; border-top:1px solid var(--line); margin-top:35px; color:var(--muted); font-size:10px; }
.workspace-footer>span:last-child { font-size:8px; letter-spacing:1.5px; }
.footer-dot { padding:0 8px; }
.eyebrow { display:flex; align-items:center; gap:8px; font-family:Arial,sans-serif; font-size:9px; font-weight:500; letter-spacing:2px; color:var(--muted); }
.eyebrow i { height:5px; width:5px; border-radius:50%; background:var(--brand); }
.hero { display:grid; grid-template-columns:1.12fr 1fr; min-height:350px; padding:22px 0 34px; column-gap:25px; }
.hero-copy { padding-top:17px; position:relative; z-index:2; }
.hero h1 { font-family:var(--serif); font-size:clamp(34px,3.4vw,54px); line-height:1.45; font-weight:500; letter-spacing:1px; margin:20px 0 19px; }
.hero h1 span { color:var(--brand); position:relative; }
.hero-copy>p { font-size:13px; line-height:2.05; color:var(--muted); letter-spacing:.2px; }
.hero-actions { display:flex; align-items:center; gap:23px; margin-top:29px; }
.btn { border-radius:4px; box-shadow:none; font-weight:500; font-size:12px; padding:11px 17px; min-height:39px; gap:12px; }
.btn-primary { background:var(--brand); border:1px solid var(--brand); box-shadow:none; color:#fffaf5; }
.btn-primary:hover { background:var(--brand-dark); box-shadow:0 5px 15px #bb493417; transform:translateY(-1px); }
.btn-primary span { font-size:18px; }
.btn-gold { background:var(--brand); border:1px solid var(--brand); box-shadow:none; color:#fffaf5; }
.btn-gold:hover { background:var(--brand-dark); box-shadow:none; }
.btn-soft { background:#e9e8df; border:1px solid #e0dfd3; color:var(--ink); }
.btn-soft:hover { background:#e2e1d5; }
.btn-ghost { background:transparent; border-color:var(--line); color:var(--ink-2); }
.btn-ghost:hover { background:#eae8df; border-color:#c8c6b9; }
.btn-sm { padding:6px 10px; font-size:11px; min-height:31px; }
.btn-lg { padding:12px 28px; min-height:47px; font-size:14px; }
.hero-link,.text-action { font-size:12px; color:var(--ink-2); display:inline-flex; align-items:center; gap:12px; padding:5px 0; }
.hero-link:hover,.text-action:hover { color:var(--brand); }
.hero-link span { font-size:18px; }
.hero-art { position:relative; min-height:315px; }
.art-caption { position:absolute; left:17px; top:1px; font-size:8px; letter-spacing:2px; color:#838678; }
.paper-card { position:absolute; width:185px; height:254px; border-radius:8px; transition:transform .5s ease; }
.paper-back { top:39px; left:calc(50% - 66px); transform:rotate(15deg); background:#b94c36; color:#f6e6d5; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:18px 8px; box-shadow:8px 12px 20px -14px #403a3459; border:1px solid #a84530; }
.paper-back::before { content:''; position:absolute; inset:9px; border:1px solid #e3a69680; border-radius:4px; }
.paper-back>span { font-size:6px; letter-spacing:1.5px; }
.paper-star { font-family:Arial,sans-serif; font-size:121px; line-height:1; font-weight:400; }
.paper-front { top:35px; left:calc(50% - 130px); transform:rotate(-12deg); background:#fdfaf2; border:1px solid #cfcebd; padding:18px; box-shadow:7px 12px 25px -13px #39393050; }
.paper-front::after { content:''; position:absolute; inset:7px; border:1px solid #e5e1d3; border-radius:3px; pointer-events:none; }
.paper-card-top { display:flex; justify-content:space-between; font-size:7px; color:var(--muted); }
.paper-character { height:159px; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:124px; font-weight:400; line-height:1; letter-spacing:-14px; }
.paper-character>span { font-size:25px; align-self:flex-end; margin:0 0 29px 6px; color:var(--brand); letter-spacing:0; }
.paper-card-bottom { display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--line); padding-top:12px; }
.paper-card-bottom b { font-family:var(--serif); font-size:11px; font-weight:500; }
.paper-card-bottom>span { font-size:5px; letter-spacing:1px; color:var(--muted); }
.art-stamp { position:absolute; right:3px; top:9px; border:1px solid #b9533f; width:75px; height:75px; border-radius:50%; color:var(--brand); font-family:var(--serif); font-size:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(12deg); outline:1px solid #b9533f; outline-offset:-5px; }
.art-stamp span { font-family:Arial,sans-serif; font-size:5px; letter-spacing:1px; margin-top:5px; }
.art-foot { position:absolute; bottom:0; left:17px; right:7px; display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px; font-size:8px; letter-spacing:1px; color:var(--muted); }
.art-foot>span:last-child { font-size:18px; line-height:1; }
.hero-art:hover .paper-front { transform:rotate(-16deg) translateX(-5px); }
.hero-art:hover .paper-back { transform:rotate(20deg) translateX(4px); }
.progress-strip { display:grid; grid-template-columns:1fr 1fr 1fr 1.15fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:21px 0; margin-top:4px; }
.progress-strip>div { padding:0 26px; border-right:1px solid var(--line); }
.progress-strip>div:first-child { padding-left:0; }
.progress-strip>div:last-child { padding-right:0; border:0; }
.metric-label { display:block; font-size:11px; color:var(--muted); margin-bottom:9px; }
.progress-strip b { font-family:Georgia,serif; font-size:31px; font-weight:400; line-height:1; }
.progress-strip small { font-family:inherit; font-size:10px; color:var(--muted); margin-left:5px; }
.progress-message { display:flex; align-items:center; justify-content:center; gap:15px; }
.progress-message>span { font-size:31px; color:var(--brand); }
.progress-message p { font-family:var(--serif); font-size:12px; line-height:1.8; }
.home-lower { display:grid; grid-template-columns:minmax(0,1fr) 248px; gap:30px; padding-top:34px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:21px; }
.section-heading h2 { font-family:var(--serif); font-size:25px; font-weight:500; letter-spacing:.5px; margin-top:8px; }
.section-heading h2 small { font-family:Georgia,serif; font-size:12px; font-weight:400; color:var(--muted); margin-left:9px; vertical-align:middle; }
.section-heading .eyebrow { font-size:8px; }
.library-empty { border:1px dashed #cfcec1; border-radius:7px; min-height:251px; text-align:center; padding:28px 15px 24px; background:#f8f7f0; }
.empty-paper { width:72px; height:51px; position:relative; margin:0 auto 19px; }
.empty-paper i { position:absolute; top:4px; left:20px; width:33px; height:44px; border:1px solid #b6b9a9; background:#f8f7f0; border-radius:3px; transform:rotate(-17deg); }
.empty-paper i:nth-child(2) { transform:rotate(16deg); left:29px; background:#e5e8dd; }
.empty-paper i:nth-child(3) { transform:rotate(0); left:22px; display:grid; place-items:center; color:var(--muted); font-size:18px; font-style:normal; }
.library-empty h3 { font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink-2); letter-spacing:.5px; }
.library-empty p { margin:11px 0 18px; font-size:12px; color:var(--muted); line-height:1.9; }
.library-empty>div:last-child { display:flex; justify-content:center; align-items:center; gap:23px; }
.daily-note { background:#e6eadf; border:1px solid #dce1d3; border-radius:7px; padding:23px; min-height:327px; position:relative; }
.daily-note>.eyebrow { font-size:8px; letter-spacing:1.5px; display:flex; justify-content:space-between; color:#6d7963; }
.daily-note>.eyebrow>span { font-size:19px; line-height:1; }
.daily-note h2 { font-family:var(--serif); font-size:25px; line-height:1.6; font-weight:500; color:#3e4d37; margin-top:27px; letter-spacing:.5px; }
.daily-number { font-family:Georgia,serif; font-size:55px; color:#4b5b40; line-height:1.2; margin-top:16px; }
.daily-number span { display:block; margin-top:4px; font-family:inherit; font-size:9px; letter-spacing:1px; color:#6f7b63; }
.daily-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #cad2bf; padding-top:13px; margin-top:20px; gap:8px; }
.daily-bottom>span { font-size:9px; color:#69765f; }
.daily-bottom button { width:28px; height:28px; border-radius:50%; border:1px solid #aebaa0; font-size:16px; color:#4b5b40; display:grid; place-items:center; }
.daily-bottom button:hover { background:#d1dac4; }
.grid-sets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.setcard { background:#fcfbf6; border:1px solid var(--line); border-radius:6px; padding:19px; box-shadow:none; transition:border-color .2s, transform .2s; }
.setcard:hover { border-color:#aeb2a0; transform:translateY(-2px); box-shadow:none; }
.setcard-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:19px; gap:10px; }
.setcard-subject { padding:3px 7px; background:var(--set-accent); border-radius:3px; font-size:9px; }
.setcard-serial { color:#8a8e7e; font-size:8px; letter-spacing:1px; }
.setcard-open { display:flex; justify-content:space-between; gap:12px; width:100%; text-align:left; padding:0; }
.setcard-open>span:last-child { font-size:17px; color:var(--muted); }
.setcard-title { font-family:var(--serif); font-size:21px; font-weight:500; line-height:1.45; overflow-wrap:anywhere; }
.setcard-desc { font-size:12px; margin:11px 0 20px; color:var(--muted); min-height:30px; line-height:1.8; }
.setcard-progress { display:flex; justify-content:space-between; gap:8px; font-size:9px; color:var(--muted); margin-bottom:8px; }
.bar { background:#e8e7dc; height:3px; border-radius:0; }
.bar i { background:#818e6f; border-radius:0; }
.setcard-actions { margin-top:18px; gap:6px; }
.setcard-actions .btn { font-size:10px; }
.setcard-actions .btn-ghost { border-color:transparent; padding:5px; }
.view-head { margin-bottom:30px; align-items:flex-end; gap:18px; }
.view-head .eyebrow { margin-bottom:14px; }
.view-title { font-family:var(--serif); font-size:38px; font-weight:500; letter-spacing:.5px; line-height:1.5; }
.view-sub { font-size:12px; color:var(--muted); margin-top:12px; line-height:1.9; }
.page-index { font-size:9px; color:var(--muted); letter-spacing:1px; padding-bottom:8px; white-space:nowrap; }
.panel { border-radius:6px; border-color:var(--line); box-shadow:none; background:#fcfbf7; }
.stage { background:#e8e9df; border:1px solid #d6d9cc; border-radius:8px; box-shadow:none; padding:42px 25px; overflow:hidden; }
.stage::before,.stage::after { display:none; }
.stage-wide { min-height:570px; }
.stage-inner { gap:23px; }
.stage-copy { color:var(--ink); }
.stage-copy h2 { font-family:var(--serif); font-size:25px; font-weight:500; }
.stage-copy p { color:var(--muted); font-size:11px; }
.draw-card-art { position:relative; width:180px; height:225px; margin-bottom:6px; }
.draw-card-art>div { width:153px; height:209px; position:absolute; left:14px; top:6px; border:1px solid #a6ae96; border-radius:7px; background:#d2d9c7; transform:rotate(-12deg); }
.draw-card-art>div:nth-child(2) { transform:rotate(12deg); background:#e8e8da; }
.draw-card-art>div:last-child { background:#304635; color:#e8eadc; transform:rotate(-3deg); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:17px 10px; border:1px solid #304635; box-shadow:3px 10px 20px -12px #26332280; }
.draw-card-art>div:last-child::after { content:''; position:absolute; inset:7px; border:1px solid #819477; border-radius:3px; }
.draw-card-art span { font-size:7px; letter-spacing:1.5px; }
.draw-card-art b { font-size:90px; line-height:1; font-weight:400; color:#e4e9d7; }
.draw-hint { font-size:10px; color:var(--muted); }
.pool-chip { background:transparent; border-color:#c5cab9; color:#657158; border-radius:4px; font-weight:400; font-size:11px; }
.pool-chip.on { background:#334a37; color:#f0f2e9; border-color:#334a37; }
.pool-chip:hover { background:#d6deca; }
.filters { gap:10px; margin-bottom:27px; }
.filter { border-radius:4px; background:transparent; border:1px solid var(--line); font-weight:400; font-size:11px; }
.filter.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.filter:hover { border-color:#979f8a; }
.dex-empty { margin-top:20px; padding:60px 20px; }
.empty-star { display:block; font-size:48px; color:#82916f; line-height:1; margin-bottom:25px; }
.grid-dex { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:19px; }
.card { background:#e8e6d9; border:1px solid #d3d1c0; border-radius:7px; box-shadow:none; cursor:pointer; }
.card:hover { border-color:#a6ad97; }
.card-in { background:#fcfbf6; border-radius:5px; padding:16px; gap:13px; }
.card-art { background:#e8ecdf; color:#637352; border-color:#dce3d1; border-radius:4px; }
.card-term { font-family:var(--serif); font-size:19px; font-weight:600; }
.card-def { font-size:12px; }
.card.locked { background:#e8e7dc; }
.card.locked .card-in { background:#eeede5; }
.card.locked .card-art::after { color:#73776a; }
.card.locked .card-term { color:#73776a; }
.overlay-light { background:var(--bg); }
.overlay-dark { background:#253a2f; }
.rcard-back { background:#304b38; border:1px solid #8b9a74; color:#e4e7cd; box-shadow:none; }
.rcard-front { background:#d8dccd; border:1px solid #adb99d; box-shadow:0 12px 30px #172f2233; }
.rcard-body { background:#fcfaf0; }
.draw-title { font-family:var(--serif); font-weight:500; }
.overlay-dark .btn-ghost { color:#e2e6d7; border-color:#76846d; }
.overlay-dark .chip { color:#e2e6d7; border-color:#76846d; }
.study-card { border:1px solid var(--line); background:#fcfbf6; box-shadow:none; }
.study-top { background:var(--bg); border-bottom:1px solid var(--line); }
.study-progress { background:#e2e4d7; }
.study-progress i { background:#82926f; }
.flip-card { background:#fcfbf6; border:1px solid #d8d9cb; box-shadow:none; }
.mode { background:#fcfbf7; border:1px solid var(--line); border-radius:5px; box-shadow:none; }
.mode:hover { background:#f0eee3; border-color:#a9b296; box-shadow:none; transform:translateY(-2px); }
.mode-ico { background:#ebece1; border-radius:4px; }
.mode-name { font-family:var(--serif); font-weight:600; }
.mode-desc { font-size:11px; }
.opt { background:#fcfbf6; border-color:var(--line); border-radius:5px; }
.opt:hover { border-color:#aab096; background:#f0f1e8; }
.mtile { border-radius:5px; border-color:var(--line); background:#fcfbf6; }
.mtile:hover { border-color:#acb29a; }
.dropzone { padding:38px 20px; background:#eef0e6; border:1px dashed #aebaa0; border-radius:7px; }
.dropzone:hover { background:#e8eddf; }
.dropzone.over { background:#e2e9d8; border-color:#7b8d69; box-shadow:0 0 0 4px #7b8d6918; }
.drop-ico { color:#657b53; font-size:36px; margin-bottom:14px; }
.drop-title { font-family:var(--serif); font-size:25px; font-weight:500; color:#48563d; margin-bottom:13px; }
.dropzone .small { font-size:10px; line-height:1.9; color:#727b65; }
.dropzone .btn { margin-top:4px; }
.src { background:#fcfbf6; border-color:var(--line); border-radius:5px; padding:17px; font-size:12px; }
.ai-settings { background:#f0eee5; border:1px solid var(--line); border-radius:5px; }
.ai-settings summary { cursor:pointer; padding:14px 17px; font-size:12px; color:var(--ink-2); }
.ai-settings summary>span { font-size:10px; color:var(--muted); margin-left:13px; }
.ai-box { background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:17px; }
.ai-box input,.ai-box select { background:#fcfbf7; border-color:#d8d6c9; border-radius:4px; font-size:12px; }
.ai-box .small { font-size:10px; line-height:1.8; overflow-wrap:anywhere; }
.attach-row { border-color:var(--line); background:#f9f8f2; border-radius:5px; }
.attach-name { font-weight:500; }
.gen-img,.card-img { border-radius:4px; border-color:var(--line); }
.modal-mask { background:#25281d66; backdrop-filter:blur(5px); }
.modal { background:#f9f8f1; border-radius:10px; border:1px solid #d5d5c7; }
.modal-head { background:#f9f8f1f5; padding:21px 25px; }
.modal-head h2,.modal-head h3 { font-family:var(--serif); font-size:24px; font-weight:500; }
.modal-body { padding:25px; }
.modal-foot { background:#f9f8f1f5; padding:17px 25px; }
.field input,.field textarea,.field select,.editor-row input,.editor-row select,.editor-row .e-term,.editor-row .e-def { background:#fffef9; border:1px solid #d5d5c8; border-radius:4px; font-size:12px; }
.x-btn { border-radius:50%; }
.x-btn:hover { background:#e9e7dd; }
.toast { background:var(--ink); border-radius:5px; box-shadow:0 8px 24px #25281d20; }
.toast.good { background:#4c6341; }
.toast.warn { background:#996944; }
@media (min-width:1600px) {
  .workspace { padding:0 64px; }
  .hero { min-height:405px; padding-top:33px; }
  .hero-art { min-height:355px; }
  .paper-card { width:207px; height:280px; }
  .paper-character { height:181px; }
  .art-stamp { right:24px; }
  .home-lower { grid-template-columns:minmax(0,1fr) 285px; }
}
@media (max-width:1180px) and (min-width:821px) {
  .topbar { width:180px; padding-left:16px; padding-right:16px; }
  .workspace { margin-left:180px; padding:0 30px; }
  .brand-name { font-size:17px; }
  .brand-en { font-size:7px; letter-spacing:1.3px; }
  .hero { gap:10px; }
  .hero h1 { font-size:38px; }
  .hero-actions { gap:17px; flex-wrap:wrap; }
  .paper-card { width:160px; height:231px; }
  .paper-character { font-size:108px; height:137px; }
  .paper-card-top { font-size:6px; }
  .paper-front { left:calc(50% - 102px); top:49px; padding:17px; }
  .paper-back { left:calc(50% - 51px); top:51px; }
  .art-stamp { width:58px; height:58px; right:0; top:5px; font-size:10px; }
  .home-lower { grid-template-columns:minmax(0,1fr) 210px; gap:22px; }
  .daily-note { padding:20px; }
  .daily-note h2 { font-size:22px; }
  .progress-strip { grid-template-columns:1fr 1fr 1fr; }
  .progress-strip>div:nth-child(3) { border:0; }
  .progress-strip .progress-message { display:none; }
  .grid-sets { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .topbar { position:sticky; inset:auto; top:0; height:auto; width:100%; padding:16px 24px 0; border:0; border-bottom:1px solid var(--line); z-index:40; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .brand { width:max-content; }
  .brand-mark { font-size:33px; width:30px; height:33px; }
  .brand-name { font-size:18px; }
  .brand-en { font-size:6px; }
  .sidebar-label,.sidebar-note,.local-status { display:none; }
  .wallet { order:1; margin-left:auto; border:0; padding:0; }
  .wallet .btn { font-size:10px; padding:5px 0; min-height:28px; }
  .wallet .btn span { margin-right:0; }
  .nav { order:2; width:100%; flex-direction:row; gap:9px; margin-top:16px; }
  .nav-item { flex:1; justify-content:center; padding:11px 5px 13px; border-radius:0; font-size:12px; gap:8px; }
  .nav-item svg { width:15px; height:15px; }
  .nav-no { display:none; }
  .nav-item.on { background:transparent; color:var(--brand); }
  .nav-item.on::after { bottom:-1px; width:30px; height:2px; right:calc(50% - 15px); }
  .workspace { margin-left:0; padding:0 28px; }
  .workspace-top { height:63px; }
  #app { padding-top:20px; min-height:calc(100dvh - 240px); }
  .hero { padding-top:5px; column-gap:12px; min-height:330px; }
  .hero h1 { font-size:38px; }
  .hero-actions { gap:16px; }
  .hero-art { min-height:315px; }
  .art-stamp { width:62px; height:62px; right:0; font-size:10px; top:9px; }
  .paper-card { width:155px; height:225px; }
  .paper-front { left:calc(50% - 101px); top:50px; padding:16px; }
  .paper-back { left:calc(50% - 47px); top:52px; }
  .paper-character { font-size:106px; height:135px; }
  .paper-card-top { font-size:6px; }
  .paper-card-bottom b { font-size:9px; }
  .paper-card-bottom>span { font-size:4px; }
  .paper-star { font-size:110px; }
  .progress-strip { grid-template-columns:1fr 1fr 1fr; margin-top:0; }
  .progress-strip>div:nth-child(3) { border:0; }
  .progress-strip .progress-message { display:none; }
  .progress-strip>div { padding:0 20px; }
  .home-lower { grid-template-columns:minmax(0,1fr) 205px; gap:22px; padding-top:28px; }
  .daily-note { padding:20px; min-height:315px; }
  .daily-note h2 { font-size:21px; margin-top:32px; }
  .section-heading h2 { font-size:23px; }
  .section-heading .text-action { font-size:10px; }
  .library-empty h3 { font-size:16px; }
  .library-empty>div:last-child { gap:16px; }
  .grid-sets { grid-template-columns:1fr; }
  .workspace-footer>span:last-child { display:none; }
  .view-title { font-size:32px; }
  .page-index { display:none; }
  .skip-link { left:20px; }
}
@media (max-width:620px) {
  .topbar { padding:14px 18px 0; }
  .nav { gap:3px; margin-top:13px; }
  .nav-item { font-size:11px; gap:6px; }
  .workspace { padding:0 21px; }
  .workspace-top { height:55px; }
  .breadcrumb { font-size:10px; gap:10px; }
  .chip-unlock { font-size:10px; gap:5px; }
  .hero { grid-template-columns:1fr; padding:5px 0 22px; gap:8px; }
  .hero-copy { padding-top:8px; }
  .hero h1 { font-size:40px; margin-top:19px; line-height:1.4; }
  .hero-copy>p { font-size:11px; }
  .hero-actions { margin-top:24px; gap:20px; }
  .hero-actions .btn { font-size:11px; padding:10px 14px; }
  .hero-link { font-size:10px; }
  .hero-art { min-height:269px; margin-top:26px; }
  .art-caption { left:0; top:0; font-size:7px; }
  .paper-front { top:23px; }
  .paper-back { top:25px; }
  .art-stamp { right:12px; top:22px; }
  .art-foot { bottom:0; left:0; right:0; padding-top:10px; font-size:7px; }
  .progress-strip { padding:20px 0; }
  .progress-strip>div { padding:0 13px; }
  .metric-label { font-size:9px; margin-bottom:10px; }
  .progress-strip b { font-size:27px; }
  .progress-strip small { font-size:8px; display:block; margin:8px 0 0; }
  .home-lower { grid-template-columns:1fr; gap:24px; padding-top:28px; }
  .section-heading { margin-bottom:18px; }
  .section-heading h2 { font-size:24px; }
  .library-empty { min-height:252px; padding-top:28px; }
  .library-empty h3 { font-size:18px; }
  .daily-note { min-height:218px; padding:22px; display:grid; grid-template-columns:1fr 90px; column-gap:15px; }
  .daily-note>.eyebrow { grid-column:1 / -1; }
  .daily-note h2 { font-size:24px; margin-top:24px; }
  .daily-number { margin-top:27px; font-size:52px; }
  .daily-number span { font-size:8px; }
  .daily-bottom { grid-column:1 / -1; margin-top:21px; }
  .workspace-footer { font-size:9px; margin-top:29px; }
  .view-head { flex-wrap:wrap; margin-top:9px; }
  .view-title { font-size:30px; }
  .view-sub { font-size:11px; }
  .stage { padding:30px 15px; min-height:530px; }
  .stage-inner { gap:21px; }
  .draw-hint { font-size:9px; }
  .grid-dex { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .card-in { padding:11px; }
  .card-term { font-size:17px; }
  .dropzone { padding:30px 15px; }
  .drop-title { font-size:22px; }
  .dropzone .small { font-size:9px; }
  .ai-settings summary { font-size:11px; padding:14px; }
  .ai-settings summary>span { font-size:9px; margin-left:6px; }
  .ai-box { padding:13px; }
  .modal-mask { padding:10px; }
  .modal-head,.modal-body { padding:18px; }
  .modal-foot { padding:14px 18px; }
  .modal { max-height:92dvh; }
  .field-2 { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Learning sessions use the same paper and ink language as the collection. */
.quiz-card,.flashcard { background:#fcfaf2; border-color:#d9d8c9; border-radius:8px; box-shadow:none; }
.quiz-q,.flash-term { font-family:var(--serif); font-weight:600; }
.opt-key { border-radius:4px; background:#ebece0; font-weight:500; }
.opt.right .opt-key { background:var(--ok); }
.opt.wrong .opt-key { background:var(--bad); }
.opt { font-weight:500; }
.mode-ico { font-family:Georgia,serif; font-size:19px; color:#798768; }
.mode-name { font-size:16px; }
.summary-score { font-family:Georgia,serif; font-weight:400; }
.modal-head h3 { font-size:23px!important; }
.rcard.is-new .rcard-body::before { background:#b54c35; color:#fff8e8; border-radius:3px; box-shadow:none; }
.setcard { gap:0; }
.setcard-open:hover { color:var(--brand); }
.setcard .bar { flex:none; margin-top:0; }

#genMode,#maxCards { padding:6px 8px; border:1px solid #d4d5c5; border-radius:4px; background:#fcfbf6; color:var(--ink-2); font-size:12px; min-height:32px; }

/* =========================================================
   收藏风 · 新版界面沿用同一套纸面语言
   （首页 / 学习工具 / 导入识别），只补样式
   ========================================================= */

/* ---- 侧栏：新建学习集 ---- */
.sidebar-create { margin:20px 12px 0; justify-content:center; font-size:12px; }
.sidebar-create span { font-size:15px; }

/* ---- 顶栏：搜索 ---- */
.workspace-top { justify-content:flex-start; gap:22px; }
.breadcrumb { flex:none; }
.search-field { display:flex; align-items:center; gap:9px; flex:0 1 300px; height:38px; margin:0 auto; padding:0 13px; background:#fcfbf6; border:1px solid var(--line); border-radius:4px; cursor:text; }
.search-field svg { width:16px; height:16px; fill:none; stroke:#8b8c7f; stroke-width:1.6; flex:none; }
.search-field input { width:100%; min-width:0; border:0; outline:0; background:none; font-size:12px; color:var(--ink); }
.search-field input::placeholder { color:#9d9e91; }
.search-field:focus-within { border-color:var(--brand-line); background:#fffef9; box-shadow:0 0 0 3px #bb49340f; }
.chip-unlock::before { content:'✳'; color:var(--brand); font-size:15px; line-height:1; }

/* ---- 首页 ---- */
.home-heading { margin-bottom:24px; }
.home-heading .view-title { font-family:var(--serif); font-size:clamp(30px,3vw,40px); font-weight:500; letter-spacing:1px; line-height:1.45; }
.home-heading .view-sub { font-size:12px; }
.library { margin-top:30px; }
.library-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:15px; margin-bottom:21px; }
.library-heading h2 { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:25px; font-weight:500; letter-spacing:.5px; }
.library-heading h2>span { font-family:Georgia,serif; font-size:12px; font-weight:400; color:var(--muted); }
.library-count { font-size:11px; color:var(--muted); overflow-wrap:anywhere; }

/* 空状态：和收藏风同一套纸片 */
.library-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.empty-deck { width:72px; height:51px; position:relative; margin:0 auto 19px; }
.empty-deck i { position:absolute; top:4px; left:20px; width:33px; height:44px; border:1px solid #b6b9a9; background:#f8f7f0; border-radius:3px; transform:rotate(-17deg); }
.empty-deck i:last-child { left:29px; transform:rotate(16deg); background:#e5e8dd; }
.empty-deck i:last-child { transform:rotate(0); left:22px; display:grid; place-items:center; }
.empty-deck svg { width:17px; height:17px; fill:none; stroke:#7b8d69; stroke-width:1.6; stroke-linecap:round; }
.empty-icon { width:42px; height:42px; fill:none; stroke:#a8ab9b; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:19px; }
.empty-actions { display:flex; justify-content:center; align-items:center; gap:23px; flex-wrap:wrap; }

/* ---- 学习工具 ---- */
.big-num { font-family:Georgia,serif; font-weight:400; font-size:31px; letter-spacing:0; }
.mode-ico { display:inline-block; min-width:28px; margin-bottom:12px; padding:3px 8px; background:#ebece1; border-radius:4px; font-family:Georgia,serif; font-size:12px; letter-spacing:1px; text-align:center; }
.study-tools { margin-top:36px; }
.study-tools h2 { font-family:var(--serif); font-size:25px; font-weight:500; letter-spacing:.5px; margin-bottom:18px; }
.tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.tool-card { position:relative; display:flex; align-items:flex-start; text-align:left; gap:13px; padding:20px 18px; background:#fcfbf7; border:1px solid var(--line); border-radius:6px; transition:background .2s, border-color .2s; }
.tool-card:hover { background:#f0eee3; border-color:#a9b296; }
.tool-icon { width:34px; height:34px; border-radius:4px; background:#e9ecdd; color:#5f6f4f; display:grid; place-items:center; flex:none; }
.tool-card:nth-child(2) .tool-icon { background:#ece7db; color:#8a7350; }
.tool-card:nth-child(3) .tool-icon { background:#f2e3dc; color:var(--brand); }
.tool-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tool-copy { display:flex; flex-direction:column; gap:6px; padding-right:14px; }
.tool-copy b { font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.3px; }
.tool-copy>span { font-size:11px; color:var(--muted); line-height:1.8; }
.tool-arrow { position:absolute; top:20px; right:16px; font-size:15px; color:#a8ab9b; }
.today-summary { margin-top:30px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted); }

/* ---- 导入识别：题型可用性 / 待核对 ---- */
.mode-preview { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.mode-status { padding:10px; border:1px solid #d7dbcb; border-radius:5px; background:#f3f5ea; font-size:11px; color:#4d6340; }
.mode-status small { display:block; margin-top:5px; font-size:10px; line-height:1.6; color:#6f7a63; }
.mode-status.unavailable { background:#f2f1ea; border-color:#e4e3d8; color:#8b8c7f; }
.mode-status.unavailable small { color:#8b8c7f; }
.mode-rule { font-size:10px; line-height:1.6; color:var(--muted); }
.question-meta { display:block; margin-bottom:7px; font-size:9px; letter-spacing:1px; color:#8a8e7e; }
.review-note { display:block; margin:10px 0; padding:10px 12px; border-left:2px solid #c08a4a; border-radius:3px; background:#f7efe3; font-size:11px; line-height:1.7; color:#8a6430; }
.review-tag { display:inline-block; margin-left:8px; padding:2px 6px; border-radius:3px; background:#f7efe3; color:#8a6430; font-size:9px; white-space:nowrap; }
.review-confirm, .editor-review { display:flex; align-items:center; gap:9px; font-size:11px; line-height:1.7; color:var(--ink-2); }
.review-confirm input, .editor-review input { width:auto; flex:none; }
.recognition-editor { display:flex; flex-direction:column; gap:14px; }
.recognition-editor textarea { min-height:100px; }

/* ---- 抽卡舞台的纸牌堆（用现有标记重现收藏风造型） ---- */
.draw-card-art { width:180px; height:225px; position:relative; }
.draw-card-art i { position:absolute; left:14px; top:6px; width:153px; height:209px; border:1px solid #a6ae96; border-radius:7px; background:#d2d9c7; transform:rotate(-12deg); font-style:normal; }
.draw-card-art i:first-child::after { content:''; position:absolute; inset:-1px; border:1px solid #a6ae96; border-radius:7px; background:#e8e8da; transform:rotate(24deg); }
.draw-card-art i:last-child { background:#304635 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 153 209'%3E%3Crect x='7' y='7' width='139' height='195' fill='none' stroke='%23819477'/%3E%3Ctext x='76' y='27' text-anchor='middle' font-size='7' letter-spacing='1.5' fill='%23c9d2bb' font-family='Arial'%3ESTAR STUDY CLUB%3C/text%3E%3Ctext x='76' y='135' text-anchor='middle' font-size='86' fill='%23e4e9d7' font-family='Georgia'%3E%E2%9C%B3%3C/text%3E%3Ctext x='76' y='190' text-anchor='middle' font-size='7' letter-spacing='1' fill='%23c9d2bb' font-family='Arial'%3E%E4%BF%9D%E6%8C%81%E5%A5%BD%E5%A5%87 %C2%B7 %E5%8D%B3%E5%88%BB%E5%8F%91%E7%8E%B0%3C/text%3E%3C/svg%3E") center/100% 100% no-repeat; transform:rotate(-3deg); box-shadow:3px 10px 20px -12px #26332280; font-size:0; }

/* ---- 卡片纸色：按顺序轮换，和收藏风一致 ---- */
.grid-sets .setcard:nth-child(3n+1) { --set-accent:#e7ede4; }
.grid-sets .setcard:nth-child(3n+2) { --set-accent:#eee3d3; }
.grid-sets .setcard:nth-child(3n) { --set-accent:#eadfda; }
.setcard-subject { color:var(--ink-2); letter-spacing:.6px; }

@media (max-width:1180px) {
  .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mode-preview { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .search-field { flex:1 1 auto; min-width:0; margin:0; }
  .breadcrumb { display:none; }
  .sidebar-create { order:3; width:100%; margin:14px 0 0; }
  .study-tools { margin-top:28px; }
  .study-tools h2 { font-size:21px; }
  .tool-grid { grid-template-columns:1fr; gap:13px; }
  .today-summary { flex-direction:column; align-items:flex-start; gap:8px; }
  .mode-preview { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .modal-foot { flex-wrap:wrap; }
  .modal-foot .btn { flex:1 1 auto; justify-content:center; }
}