:root{
    --paper: oklch(0.96 0.02 90);
    --paper-deep: oklch(0.92 0.03 85);
    --kraft: oklch(0.82 0.06 75);
    --ink: oklch(0.30 0.03 250);
    --ink-soft: oklch(0.45 0.03 250);
    --red: oklch(0.55 0.19 27);
    --red-deep: oklch(0.45 0.16 27);
    --flame: oklch(0.65 0.19 55);
    --water: oklch(0.62 0.13 230);
    --leaf: oklch(0.60 0.14 145);
    --gold: oklch(0.72 0.14 85);
    --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px; --space-xl:24px; --space-2xl:32px; --space-3xl:48px;
    --radius-sm:10px; --radius: 18px; --radius-lg:22px;
    --ink-line: 2.5px solid var(--ink);
    --ease-snap: cubic-bezier(.22,1,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --focus: oklch(0.72 0.16 85);
    --shadow-hard-sm:3px 3px 0 var(--ink);
    --shadow-hard:5px 5px 0 var(--ink);
    --shadow-hard-lg:7px 7px 0 var(--ink);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    font-family:"Microsoft YaHei","PingFang SC",sans-serif;
    background: var(--paper);
    background-image: radial-gradient(oklch(0.88 0.03 85) 1px, transparent 1px);
    background-size: 22px 22px;
    color: var(--ink);
    min-height:100vh;
  }
  .en{font-family:"Courier New",monospace; font-weight:700;}
  button{font-family:inherit; cursor:pointer; border:none;}
  [hidden]{display:none!important;}
  .skip-link{
    position:fixed; left:16px; top:-80px; z-index:400;
    background:var(--gold); color:var(--ink); font-weight:900;
    padding:10px 16px; border:var(--ink-line); border-radius:var(--radius-sm);
    box-shadow:var(--shadow-hard-sm); transition:top .2s var(--ease-out);
  }
  .skip-link:focus{top:12px;}
  :where(button,a,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
    outline:3px solid var(--focus); outline-offset:3px;
  }

  /* ---------- 顶部事务所横幅 ---------- */
  header{
    background: var(--ink);
    color: var(--paper);
    padding: 10px var(--space-lg);
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-md);
    box-shadow: 0 4px 0 oklch(0.25 0.03 250);
    border-bottom: 4px solid var(--red-deep);
  }
  .agency-brand{display:flex; align-items:center; gap:10px; min-width:0;}
  .detective-avatar{
    position:relative; flex:0 0 52px; width:52px; height:52px; padding:0; overflow:hidden;
    display:grid; place-items:center; background:var(--paper-deep); color:var(--red-deep);
    border:3px solid var(--paper); border-radius:12px;
    box-shadow:4px 4px 0 var(--red-deep);
    transition:transform .12s var(--ease-snap), box-shadow .12s var(--ease-snap);
  }
  .detective-avatar:hover{transform:translateY(-2px); box-shadow:5px 6px 0 var(--red-deep);}
  .detective-avatar:active{transform:translateY(2px); box-shadow:2px 2px 0 var(--red-deep);}
  .detective-avatar img{width:100%; height:100%; object-fit:cover; object-position:center 24%;}
  .detective-avatar #detectiveAvatarPlaceholder{font-size:1.35rem; font-weight:900; letter-spacing:0;}
  .agency-name{font-size:1.35rem; font-weight:900; letter-spacing:2px; text-shadow:3px 3px 0 var(--red-deep);}
  .agency-name .stamp{
    display:inline-block; background:var(--red); color:var(--paper);
    font-size:.7rem; padding:2px 10px; border-radius:6px; margin-left:10px;
    transform:rotate(-3deg); vertical-align:middle; letter-spacing:4px;
  }
  .hud{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .rank-box{display:flex; align-items:center; gap:var(--space-md);}
  .rank-icon{font-size:1.5rem;}
  .rank-name{font-weight:900; font-size:.94rem;}
  .rank-bar{
    position:relative; width:170px; height:20px; background:var(--paper-deep);
    border-radius:99px; overflow:hidden; margin-top:4px; border:2px solid oklch(0.15 0.02 250);
  }
  .rank-fill{height:100%; background:var(--flame); border-radius:99px; transition:width .6s var(--ease-snap); position:relative; overflow:hidden;}
  .rank-fill::after{
    content:''; position:absolute; inset:0;
    background: linear-gradient(105deg, transparent 35%, oklch(0.97 0.03 90 / .6) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: shimmer 2.6s ease-in-out infinite;
  }
  .rank-progress{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:.68rem; font-weight:900; color:var(--ink); pointer-events:none; z-index:2;
  }
  .rank-progress-fill{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:.68rem; font-weight:900; color:var(--paper); pointer-events:none; z-index:3;
    clip-path:inset(0 100% 0 0); transition:clip-path .6s var(--ease-snap);
  }
  .rank-progress-fill span{text-shadow:1px 1px 0 oklch(0.2 0.03 250);}
  @keyframes shimmer{ 55%,100%{ transform: translateX(100%); } }
  .clue-box{background:oklch(0.25 0.03 250); border-radius:12px; padding:5px 11px; font-weight:700; border:2.5px solid oklch(0.15 0.02 250); box-shadow:0 3px 0 oklch(0.15 0.02 250);}
  .clue-box b{color:var(--gold); font-size:1.2rem;}
  .hud-btn{
    background:var(--red); color:var(--paper); border-radius:12px; padding:6px 12px;
    font-weight:900; font-size:.9rem;
    border:2.5px solid oklch(0.15 0.02 250); box-shadow:0 4px 0 oklch(0.15 0.02 250);
    transition:transform .1s ease, box-shadow .1s ease;
  }
  .hud-btn:hover{transform:translateY(-2px); box-shadow:0 6px 0 oklch(0.15 0.02 250);}
  .hud-btn:active{transform:translateY(3px); box-shadow:0 1px 0 oklch(0.15 0.02 250);}
  .hud-btn.exchange{background:var(--gold); color:var(--ink); animation:pulse 1.2s ease infinite;}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

  main{max-width:1180px; margin:0 auto; padding:12px var(--space-lg) 12px;}

  /* ---------- 学科入口 ---------- */
  .subject-tabs{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--space-md);
    margin-bottom:16px;
  }
  .subject-tab{
    position:relative; background:var(--paper); border:var(--ink-line); border-radius:var(--radius);
    padding:12px; text-align:left; color:var(--ink);
    box-shadow:4px 4px 0 var(--ink);
    transition:transform .15s var(--ease-snap), box-shadow .15s var(--ease-snap), background .15s ease;
  }
  .subject-tab:hover{transform:translateY(-3px); box-shadow:6px 7px 0 var(--ink);}
  .subject-tab:active{transform:translateY(2px); box-shadow:2px 2px 0 var(--ink);}
  .subject-tab.active{background:var(--ink); color:var(--paper);}
  .subject-tab .subject-ico{font-size:1.7rem; display:block; margin-bottom:6px;}
  .subject-tab .subject-name{font-size:1.1rem; font-weight:900;}
  .subject-tab .subject-note{display:block; margin-top:4px; font-size:.78rem; line-height:1.45; opacity:.78;}
  .subject-tab .subject-count{
    display:inline-block; margin-top:8px; padding:2px 9px; border-radius:99px;
    background:var(--paper-deep); color:var(--ink); font-size:.72rem; font-weight:900;
  }
  .subject-tab.active .subject-count{background:var(--red); color:var(--paper);}

  /* ---------- 技能树 ---------- */
  .skill-layout{display:grid; grid-template-columns:150px 1fr 220px; gap:12px; align-items:start;}
  .skill-branches,.skill-detail{background:var(--paper-deep); border:var(--ink-line); border-radius:var(--radius); padding:9px; box-shadow:4px 4px 0 var(--ink);}
  .skill-branches{display:grid; gap:8px;}
  .skill-branch{display:flex; align-items:center; gap:8px; text-align:left; background:var(--paper); border:2px solid var(--ink); border-radius:12px; padding:9px 10px; font-weight:900;}
  .skill-branch.active{background:var(--ink); color:var(--paper);}
  .skill-branch.locked{opacity:.45; cursor:not-allowed;}
  .skill-tree{position:relative; min-height:0; padding:10px; background:var(--paper-deep); border:2px dashed oklch(0.7 0.05 80); border-radius:var(--radius); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;}
  .skill-tier{display:grid; gap:12px; margin-bottom:18px; position:relative;}
  .skill-node{position:relative; text-align:left; background:var(--paper); border:2.5px solid var(--ink); border-radius:14px; padding:8px 10px; box-shadow:3px 3px 0 var(--ink); font-weight:900;}
  .skill-node.active{border-color:var(--gold); box-shadow:0 0 0 3px oklch(0.72 0.14 85 / .25),3px 3px 0 var(--ink);}
  .skill-node.max{background:oklch(0.90 0.08 85);}
  .skill-node:disabled{opacity:.45; cursor:not-allowed;}
  .skill-node small{display:block; font-weight:700; color:var(--ink-soft); margin-top:4px;}
  .skill-points{font-weight:900; color:var(--gold);}
  .skill-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
  .skill-bar-area{position:relative; min-height:0;}
  .sword-slash{position:absolute; inset:-14px; overflow:hidden; pointer-events:none; z-index:60;}
  .sword-slash::before{
    content:''; position:absolute; width:180%; height:14px; left:100%; top:-8%;
    background:linear-gradient(90deg,transparent 0 8%,oklch(0.98 0.01 95) 9% 54%,var(--ink) 55% 58%,transparent 59%);
    border-radius:99px; transform:rotate(135deg); transform-origin:left center;
    filter:drop-shadow(0 0 8px oklch(0.98 0.01 95 / .95)) drop-shadow(3px 3px 0 var(--ink));
    animation:slashSweep .62s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes slashSweep{to{left:-95%; top:105%;}}
  .skill-use-pop{
    position:fixed; left:50%; top:42%; transform:translate(-50%,-50%); z-index:260;
    background:var(--ink); color:var(--paper); border:3px solid var(--gold); border-radius:18px;
    padding:18px 24px; font-weight:900; box-shadow:0 8px 0 oklch(0.15 0.02 250); text-align:center;
    animation:pop .22s ease;
  }
  @media(max-width:820px){.skill-layout{grid-template-columns:1fr}.skill-tree{min-height:auto}}
  @media(min-width:821px){
    .level-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
    .skill-layout{grid-template-columns:minmax(0,1fr) 220px;}
    .skill-branches{grid-column:1 / -1; grid-template-columns:repeat(10,minmax(0,1fr));}
    .skill-tree{grid-column:1;}
    .skill-detail{grid-column:2; grid-row:2;}
    .skill-tree h3{grid-column:1 / -1; margin-bottom:0!important;}
  }
  @media(max-width:900px){.quiz-layout{grid-template-columns:1fr}.quiz-feedback{min-height:0;}}

  /* ---------- 案件地图 ---------- */
  .map-title{font-size:1.6rem; font-weight:900; margin-bottom:var(--space-xs);}
  .map-sub{color:var(--ink-soft); margin-bottom:16px;}
  .unit-tabs{
    display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px;
    padding:7px; background:var(--paper-deep); border:2px solid var(--ink);
    border-radius:14px; box-shadow:3px 3px 0 var(--ink);
  }
  .unit-tab{
    min-height:42px; padding:6px 13px; display:inline-flex; align-items:center; gap:7px;
    background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:10px;
    font-weight:900; box-shadow:2px 2px 0 var(--ink);
    transition:transform .12s var(--ease-snap), box-shadow .12s var(--ease-snap), background .12s ease;
  }
  .unit-tab small{font-size:.68rem; color:var(--ink-soft);}
  .unit-tab:hover{transform:translateY(-2px); box-shadow:3px 4px 0 var(--ink);}
  .unit-tab:active{transform:translateY(2px); box-shadow:0 0 0 var(--ink);}
  .unit-tab.active{background:var(--red); color:var(--paper); box-shadow:3px 3px 0 var(--red-deep);}
  .unit-tab.active small{color:var(--paper); opacity:.82;}
  .case-stage{position:relative; overflow:hidden;}
  .case-page{position:relative; width:100%; transform:translateX(0); opacity:1;}
  .case-page.entering{position:absolute; inset:0 0 auto; z-index:2; pointer-events:none;}
  .case-page.entering.next{transform:translateX(24%); opacity:0;}
  .case-page.entering.prev{transform:translateX(-24%); opacity:0;}
  .case-page.entering.is-active{transform:translateX(0); opacity:1; transition:transform .44s var(--ease-out), opacity .28s ease-out;}
  .case-page.is-leaving{position:absolute; inset:0 0 auto; z-index:1; pointer-events:none;}
  .case-page.is-leaving.next{transform:translateX(-24%); opacity:0; transition:transform .44s var(--ease-out), opacity .24s ease-out;}
  .case-page.is-leaving.prev{transform:translateX(24%); opacity:0; transition:transform .44s var(--ease-out), opacity .24s ease-out;}
  .case-stage.is-switching .case-card{pointer-events:none;}
  .case-list{display:grid; gap:16px;}
  .case-card{
    position:relative; background:var(--kraft); border-radius:var(--radius);
    padding:var(--space-xl) var(--space-2xl);
    border: var(--ink-line);
    box-shadow: 6px 6px 0 var(--ink);
    transform: rotate(-.6deg);
    transition: transform .2s var(--ease-snap), box-shadow .2s var(--ease-snap);
    text-align:left; width:100%;
  }
  .case-card::before{
    content:''; position:absolute; top:-11px; left:30px; width:84px; height:22px;
    background: oklch(0.78 0.09 85 / .5);
    border-left:2px dashed oklch(0.98 0.01 90 / .7); border-right:2px dashed oklch(0.98 0.01 90 / .7);
    transform: rotate(-5deg); pointer-events:none;
  }
  .case-card:nth-child(even)::before{left:auto; right:30px; transform:rotate(4deg);}
  .case-card:nth-child(even){transform: rotate(.7deg);}
  .case-card:hover:not(.locked){transform: rotate(0) translateY(-4px); box-shadow: 8px 10px 0 var(--ink);}
  .case-card:active:not(.locked){transform: rotate(0) translateY(3px); box-shadow: 2px 2px 0 var(--ink);}
  .case-card.locked{opacity:.55; cursor:not-allowed;}
  .case-pin{
    position:absolute; top:-12px; left:50%; margin-left:-12px;
    width:24px; height:24px; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, oklch(0.65 0.2 27), var(--red-deep));
    box-shadow: 0 3px 4px oklch(0.3 0.05 27 / .5);
  }
  .case-unit{font-size:.8rem; font-weight:900; letter-spacing:3px; color:var(--red-deep);}
  .case-name{font-size:1.4rem; font-weight:900; margin:4px 0;}
  .case-theme{color:var(--ink-soft);}
  .case-status{
    position:absolute; top:18px; right:22px;
    font-weight:900; color:var(--red); border:3px solid var(--red);
    padding:4px 12px; border-radius:8px; transform:rotate(8deg);
    font-size:.95rem; letter-spacing:2px; opacity:.85;
    box-shadow:2px 2px 0 oklch(0.55 0.19 27 / .4);
  }
  .empty-board{
    background:var(--paper-deep); border:2px dashed oklch(0.7 0.05 80);
    border-radius:var(--radius); padding:var(--space-3xl) var(--space-xl); text-align:center;
  }
  .empty-board .empty-ico{font-size:3rem; display:block; margin-bottom:var(--space-md);}
  .empty-board h2{font-size:1.35rem; margin-bottom:var(--space-sm);}
  .empty-board p{color:var(--ink-soft); line-height:1.8;}

  /* ---------- 返回导航卡（与卡牌图鉴同款的旋转光晕卡） ---------- */
  .nav-card{
    position:relative; display:inline-flex; padding:5px; border-radius:20px; overflow:hidden;
    background:none; cursor:pointer; margin-bottom:var(--space-lg);
    --aura1: oklch(0.60 0.21 27); --aura2: oklch(0.95 0.06 85);
    box-shadow:0 5px 0 oklch(0.15 0.02 250);
    transition:transform .15s var(--ease-snap), box-shadow .15s var(--ease-snap);
  }
  .nav-card::before{
    content:''; position:absolute; left:50%; top:50%; width:340%; aspect-ratio:1;
    background: conic-gradient(from 0deg, var(--aura1), var(--aura2) 22%, var(--aura1) 46%, var(--aura2) 72%, var(--aura1));
    animation: auraSpin 3s linear infinite;
  }
  .nav-card:hover{transform:translateY(-3px); box-shadow:0 8px 0 oklch(0.15 0.02 250);}
  .nav-card:active{transform:translateY(2px); box-shadow:0 2px 0 oklch(0.15 0.02 250);}
  .nav-inner{
    position:relative; display:flex; align-items:center; gap:12px; text-align:left;
    background:var(--paper); border:2.5px solid var(--ink); border-radius:15px;
    padding:11px 26px 11px 14px; color:var(--ink);
  }
  .nav-ico{
    flex:0 0 auto; width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:1.35rem;
    background:var(--paper-deep); border:2px solid var(--ink);
  }
  .nav-txt{display:flex; flex-direction:column; line-height:1.25;}
  .nav-txt b{font-weight:900; font-size:1.08rem; letter-spacing:1.5px;}
  .nav-txt small{font-size:.76rem; font-weight:700; color:var(--ink-soft); letter-spacing:.5px; margin-top:2px;}
  .nav-home{--aura1:oklch(0.66 0.20 27);  --aura2:oklch(0.95 0.06 85);}
  .nav-case{--aura1:oklch(0.68 0.15 230); --aura2:oklch(0.94 0.06 230);}
  .nav-quit{--aura1:oklch(0.72 0.19 55);  --aura2:oklch(0.95 0.06 85);}
  .nav-end {--aura1:oklch(0.66 0.16 145); --aura2:oklch(0.94 0.06 145);}
  .nav-card.sm{padding:4px; border-radius:17px;}
  .nav-card.sm .nav-inner{padding:7px 20px 7px 10px; gap:10px; border-radius:13px;}
  .nav-card.sm .nav-ico{width:32px; height:32px; font-size:1.05rem; border-radius:8px;}
  .nav-card.sm .nav-txt b{font-size:.98rem;}
  .nav-card.sm .nav-txt small{font-size:.72rem;}
  .nav-card.inline{margin-bottom:0; align-self:center;}

  /* ---------- 云存档状态灯 ---------- */
  .cloud-dot{
    display:inline-flex; align-items:center; gap:7px;
    background:oklch(0.25 0.03 250); border-radius:12px; padding:6px 12px;
    border:2.5px solid oklch(0.15 0.02 250);
    font-weight:700; font-size:.78rem; color:oklch(0.85 0.02 250);
  }
  .cloud-dot .dot{width:8px; height:8px; border-radius:50%; background:oklch(0.6 0.02 250); flex:0 0 auto;}
  .cloud-dot.ok .dot{background:oklch(0.72 0.14 145);}
  .cloud-dot.err .dot{background:oklch(0.65 0.19 27);}
  .cloud-dot.busy .dot{background:var(--gold); animation:pulse 1s ease infinite;}

  /* ---------- 本地文件打开警告 ---------- */
  .file-warn{
    background:var(--red); color:var(--paper); border-bottom:4px solid var(--red-deep);
    padding:10px var(--space-lg); display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap;
    font-weight:700; font-size:.95rem;
  }
  .file-warn b{font-weight:900;}
  .file-warn button{
    background:var(--paper); color:var(--red-deep); font-weight:900; font-size:.85rem;
    padding:6px 14px; border-radius:9px; border:2px solid var(--ink);
  }

  /* ---------- 案件详情 ---------- */
  .intro-board{
    background:var(--paper-deep); border:2px dashed oklch(0.7 0.05 80);
    border-radius:var(--radius); padding:14px; margin-bottom:14px;
  }
  .intro-board h2{font-size:1.25rem; margin-bottom:6px;}
  .intro-board .keyq{margin-top:var(--space-md); color:var(--red-deep); font-weight:700;}
  .chapter-page{position:relative;}
  .chapter-return{
    position:absolute; top:0; z-index:2;
    left:calc(-1 * max(0px,(100vw - 1180px) / 2));
  }
  .chapter-return .nav-card{margin-bottom:0;}
  .chapter-head .intro-board{margin-top:0; margin-bottom:8px;}
  .case-brief{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.65;}
  .chapter-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px;}
  .chapter-actions .notes-btn,.chapter-actions .truth-btn{margin-top:0;}
  .level-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px;}
  .level-card{
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    background:var(--paper); border:var(--ink-line); border-radius:var(--radius);
    padding:10px; text-align:left; width:100%;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform .15s var(--ease-snap), box-shadow .15s var(--ease-snap); position:relative;
  }
  .level-card:hover:not(.locked){transform:translateY(-3px); box-shadow:6px 7px 0 var(--ink);}
  .level-card:active:not(.locked){transform:translateY(2px); box-shadow:2px 2px 0 var(--ink);}
  .level-card.locked{opacity:.5; cursor:not-allowed;}
  .level-head{display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:10px; min-height:40px;}
  .level-emoji{
    display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
    background:var(--paper-deep); border:var(--ink-line); border-radius:50%;
    box-shadow:2px 2px 0 var(--ink); font-size:1.2rem;
  }
  .level-head .level-name{font-weight:900; font-size:1rem; margin:0; min-width:0;}
  .level-desc{color:var(--ink-soft); font-size:.82rem; line-height:1.35;}
  .level-badge{position:absolute; top:10px; right:14px; font-weight:900; font-size:1.2rem;}
  .badge-S{color:var(--gold);} .badge-A{color:var(--leaf);} .badge-B{color:var(--water);} .badge-C{color:var(--ink-soft);}
  .level-done{color:var(--leaf); font-weight:700; font-size:.85rem; margin-top:6px;}
  .truth-btn{
    margin-top:16px; width:100%;
    background:var(--red); color:var(--paper); font-size:1.15rem; font-weight:900;
    padding:var(--space-lg); border-radius:var(--radius); letter-spacing:3px;
    border:var(--ink-line);
    box-shadow:0 5px 0 var(--red-deep);
    transition:transform .1s ease, box-shadow .1s ease;
  }
  .truth-btn:hover:not(.locked){transform:translateY(-2px); box-shadow:0 7px 0 var(--red-deep);}
  .truth-btn:active{transform:translateY(3px); box-shadow:0 2px 0 var(--red-deep);}
  .truth-btn.locked{background:oklch(0.6 0.02 250); box-shadow:0 5px 0 oklch(0.5 0.02 250); cursor:not-allowed;}
  .notes-btn{
    margin-top:10px; width:100%; background:var(--ink); color:var(--paper);
    padding:10px; border-radius:var(--radius); font-weight:700; font-size:1rem;
    border:var(--ink-line); box-shadow:0 4px 0 oklch(0.2 0.02 250);
    transition:transform .1s ease, box-shadow .1s ease;
  }
  .notes-btn:active{transform:translateY(3px); box-shadow:0 1px 0 oklch(0.2 0.02 250);}

  /* ---------- 答题界面 ---------- */
  .quiz-toolbar{display:flex; align-items:center; gap:var(--space-md); margin:0 auto 30px; max-width:980px; flex-wrap:wrap;}
  .quiz-toolbar .nav-card{margin-bottom:0;}
  .quiz-top{display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom:0; flex:1; min-width:260px; flex-wrap:wrap;}
  .quiz-title{font-weight:900; font-size:1.15rem;}
  .quiz-progress{color:var(--ink-soft); font-weight:700;}
  .combo-meter{font-weight:900; color:var(--flame); font-size:1rem; min-height:1.2em;}
  .quiz-layout{display:block; max-width:980px; margin:0 auto;}
  .quiz-main{min-width:0;}
  .quiz-feedback{min-width:0; min-height:0; margin-top:12px;}
  .q-card{
    background:var(--paper); border:var(--ink-line);
    border-radius:var(--radius); padding:16px; margin-bottom:0;
    box-shadow: 6px 6px 0 var(--ink);
    background-image: radial-gradient(oklch(0.88 0.03 85) 1px, transparent 1.4px);
    background-size: 14px 14px;
  }
  .q-split-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,1fr); gap:20px; align-items:start; margin-top:12px;}
  .q-media-pane{min-width:0; position:sticky; top:88px;}
  .q-media-pane .q-media{margin:0;}
  .q-answer-pane{min-width:0;}
  @media (max-width:900px){
    .q-split-layout{grid-template-columns:1fr;}
    .q-media-pane{position:static;}
  }
  .q-kind{font-size:.8rem; letter-spacing:2px; color:var(--ink-soft); font-weight:700; margin-bottom:var(--space-sm);}
  .q-prompt{font-size:1.35rem; font-weight:900; line-height:1.4; margin-bottom:var(--space-xs); text-shadow:2px 2px 0 oklch(0.88 0.03 85);}
  .q-prompt .en{font-size:1.35rem; text-shadow:none;}
  .q-sub{color:var(--ink-soft); margin-bottom:var(--space-md);}
  .q-media{display:grid; gap:12px; margin:12px 0 16px;}
  .q-image-wrap{margin:0;}
  .q-image-button{display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in;}
  .q-image{display:block; width:100%; max-height:min(52vh,520px); object-fit:contain; border-radius:12px; background:oklch(0.98 0.01 90);}
  .q-image-wrap figcaption{display:none; padding:18px; border:2px dashed oklch(0.7 0.05 80); border-radius:12px; color:var(--ink-soft); font-weight:700; text-align:center;}
  .q-image-wrap.image-error .q-image{display:none;}
  .q-image-wrap.image-error figcaption{display:block;}
  .image-zoom-overlay{
    position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center;
    overflow:auto; padding:56px 18px 24px; background:oklch(0.12 0.02 260 / .92);
  }
  .image-zoom-overlay:focus{outline:none;}
  .image-zoom-image{
    display:block; width:min(1800px,96vw); max-width:none; height:auto; flex:none;
    border-radius:12px; background:white; box-shadow:0 18px 60px oklch(0 0 0 / .45);
  }
  .image-zoom-close{
    position:fixed; top:12px; right:14px; z-index:1; width:44px; height:44px;
    border:2px solid white; border-radius:50%; background:oklch(0.18 0.02 260 / .9); color:white;
    font-size:2rem; line-height:1; cursor:pointer;
  }
  .image-zoom-tip{
    position:fixed; left:50%; bottom:10px; transform:translateX(-50%);
    padding:6px 12px; border-radius:999px; background:oklch(0.16 0.02 260 / .88);
    color:white; font-size:.8rem; font-weight:700; pointer-events:none;
  }
  .opt-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md);}
  @media (max-width:560px){.opt-grid{grid-template-columns:1fr;}}
  .opt{
    background:var(--paper-deep); border:var(--ink-line); border-radius:14px;
    padding:10px; font-size:1rem; font-weight:700; text-align:center;
    box-shadow:0 4px 0 var(--ink);
    transition: transform .1s ease, box-shadow .1s ease, background .12s ease;
  }
  .opt:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); background:oklch(0.93 0.03 85);}
  .opt:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 var(--ink);}
  .opt.correct{background:oklch(0.88 0.09 145); border-color:oklch(0.45 0.12 145); color:oklch(0.35 0.1 145); box-shadow:0 4px 0 oklch(0.45 0.12 145);}
  .opt.wrong{background:oklch(0.93 0.05 27); border-color:oklch(0.6 0.14 27); color:var(--red-deep); box-shadow:0 4px 0 oklch(0.6 0.14 27); animation:softPulse .5s ease;}
  .opt.selected{background:oklch(0.9 0.08 85); border-color:oklch(0.62 0.14 75); box-shadow:0 4px 0 oklch(0.62 0.14 75); transform:translateY(2px);}
  @keyframes softPulse{0%{transform:scale(1)}40%{transform:scale(.975)}100%{transform:scale(1)}}
  .opt:disabled{cursor:default;}
  .opt.has-image{flex-direction:column; min-height:132px; padding:8px;}
  .opt-media{display:flex; width:100%; min-height:84px; align-items:center; justify-content:center; overflow:hidden; border-radius:9px; background:oklch(0.98 0.01 90);}
  .opt-image{display:block; width:100%; max-height:150px; object-fit:contain;}
  .opt-media.image-error{min-height:84px; padding:10px; color:var(--ink-soft); font-size:.82rem;}
  .opt-media.image-error::after{content:'图片加载失败';}
  .opt-media.image-error .opt-image{display:none;}
  .opt-label{display:block;}
  .rich-text{overflow-wrap:anywhere;}
  .rich-text .katex{font-size:1.05em;}
  .judge-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
  .judge-btn{min-height:84px; font-size:1.2rem;}
  .fill-grid{display:grid; gap:12px; margin-top:12px;}
  .fill-item{display:flex; align-items:center; gap:10px;}
  .fill-label{min-width:62px; font-weight:900; color:var(--ink-soft);}
  .fill-input{
    flex:1; min-width:0; min-height:52px; font-size:1.15rem; padding:10px 14px;
    border:2px solid oklch(0.82 0.03 85); border-radius:12px; font-family:"Courier New",monospace; font-weight:700;
    background:var(--paper-deep); color:var(--ink);
  }
  .fill-input:focus{outline:3px solid var(--focus); outline-offset:3px; border-color:var(--ink);}
  .submit-row{display:flex; justify-content:flex-end; margin-top:16px;}
  .match-wrap{position:relative; margin-top:12px; padding:12px; border:2px dashed oklch(0.72 0.04 85); border-radius:14px; background:oklch(0.94 0.02 88);}
  .match-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0;}
  .match-lines line{stroke:var(--water); stroke-width:3; stroke-linecap:round;}
  .match-grid{position:relative; z-index:1; display:grid; gap:10px;}
  .match-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:stretch;}
  .match-item{
    display:flex; align-items:center; justify-content:center; gap:8px; min-height:54px;
    padding:9px 12px; border:2.5px solid var(--ink); border-radius:12px;
    background:var(--paper); color:var(--ink); font-weight:800; text-align:center;
    box-shadow:0 3px 0 var(--ink); height:100%;
  }
  .match-item:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 5px 0 var(--ink);}
  .match-item.active{background:oklch(0.88 0.07 85); box-shadow:0 3px 0 oklch(0.58 0.13 75);}
  .match-item.matched{background:oklch(0.9 0.06 230);}
  .match-item.match-color-0{background:#dbeafe; border-color:#2563eb; box-shadow:0 4px 0 #2563eb;}
  .match-item.match-color-1{background:#dcfce7; border-color:#16a34a; box-shadow:0 4px 0 #16a34a;}
  .match-item.match-color-2{background:#ffedd5; border-color:#ea580c; box-shadow:0 4px 0 #ea580c;}
  .match-item.match-color-3{background:#fce7f3; border-color:#db2777; box-shadow:0 4px 0 #db2777;}
  .match-item.match-color-4{background:#ccfbf1; border-color:#0f766e; box-shadow:0 4px 0 #0f766e;}
  .match-item.match-color-5{background:#ede9fe; border-color:#7c3aed; box-shadow:0 4px 0 #7c3aed;}
  .match-item.correct{background:oklch(0.88 0.09 145); border-color:oklch(0.45 0.12 145);}
  .match-item.wrong{background:oklch(0.93 0.05 27); border-color:oklch(0.6 0.14 27);}
  .match-item.correct::before{content:'✓'; font-weight:900;}
  .match-item.wrong::before{content:'×'; font-weight:900;}
  .match-item:disabled{cursor:default;}
  .match-item-media{width:100%; max-height:96px; object-fit:contain; border-radius:8px;}
  .match-tip{color:var(--ink-soft); font-weight:700; margin-top:8px;}
  .fill-input.wrong{border-color:oklch(0.6 0.14 27); background:oklch(0.96 0.03 27);}
  @media (max-width:560px){
    .judge-grid,.match-row{grid-template-columns:1fr;}
    .match-grid{gap:12px;}
    .match-row{gap:10px;}
    .match-lines{display:none;}
    .fill-item{align-items:flex-start; flex-direction:column;}
    .fill-label{min-width:0;}
    .fill-input{width:100%;}
  }
  .spell-row{display:flex; gap:var(--space-md); flex-wrap:wrap;}
  .spell-input{
    flex:1; min-width:200px; font-size:1.3rem; padding:var(--space-md) var(--space-lg);
    border:2px solid oklch(0.82 0.03 85); border-radius:14px; font-family:"Courier New",monospace; font-weight:700;
    background:var(--paper-deep); color:var(--ink);
  }
  .spell-input:focus{outline:none; border-color:var(--water);}
  .btn{
    background:var(--ink); color:var(--paper); font-weight:900; font-size:1.05rem;
    padding:var(--space-md) var(--space-xl); border-radius:14px;
    border:var(--ink-line);
    box-shadow:0 5px 0 oklch(0.2 0.02 250);
    transition:transform .1s ease, box-shadow .1s ease, background .15s ease;
  }
  .btn:hover{background:oklch(0.38 0.03 250); transform:translateY(-1px); box-shadow:0 6px 0 oklch(0.2 0.02 250);}
  .btn:active{transform:translateY(4px); box-shadow:0 1px 0 oklch(0.2 0.02 250);}
  .btn.primary{background:var(--red); box-shadow:0 5px 0 var(--red-deep);}
  .btn.primary:hover{background:oklch(0.6 0.19 27); box-shadow:0 6px 0 var(--red-deep);}
  .btn.primary:active{box-shadow:0 1px 0 var(--red-deep);}
  .chips{display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-md);}
  .chip{
    background:var(--paper-deep); border:var(--ink-line); border-radius:99px;
    padding:8px 16px; font-family:"Courier New",monospace; font-weight:700; font-size:1.05rem;
    box-shadow:0 3px 0 var(--ink);
    transition:transform .1s ease, box-shadow .1s ease;
  }
  .chip:hover{transform:translateY(-2px); box-shadow:0 5px 0 var(--ink);}
  .chip:active{transform:translateY(2px); box-shadow:0 1px 0 var(--ink);}
  .answer-area{
    min-height:64px; border:2px dashed oklch(0.72 0.04 85); border-radius:14px;
    padding:var(--space-md); display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:center;
    background:oklch(0.94 0.02 88); margin-bottom:var(--space-md);
  }
  .answer-area .chip{background:var(--water); color:var(--paper); border-color:var(--ink); box-shadow:0 3px 0 oklch(0.45 0.1 230);}
  .answer-hint{color:var(--ink-soft); font-size:.9rem;}
  .listen-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
  .listen-count{font-weight:700;color:var(--ink-soft);}

  /* ---------- 反馈与解析 ---------- */
  .feedback{
    border-radius:var(--radius); padding:var(--space-lg) var(--space-xl); margin-bottom:var(--space-lg);
    animation:pop .25s ease;
  }
  @keyframes pop{from{transform:scale(.96); opacity:0}to{transform:scale(1); opacity:1}}
  .feedback.good{background:oklch(0.92 0.07 145); border:2px solid var(--leaf);}
  .feedback.bad{background:oklch(0.94 0.05 27); border:2px solid oklch(0.72 0.12 27);}
  .feedback .fb-head{font-weight:900; font-size:1.1rem; margin-bottom:4px;}
  .feedback.good .fb-head{color:oklch(0.4 0.1 145);}
  .feedback.bad .fb-head{color:var(--red-deep);}
  .fb-explain{color:var(--ink-soft); line-height:1.7;}
  .fb-hook{font-weight:700; color:var(--ink); margin:6px 0 2px;}
  .fb-answer{font-weight:900; margin:4px 0;}
  .float-clue{
    position:fixed; font-weight:900; color:var(--gold); font-size:1.3rem; pointer-events:none;
    animation:floatUp 1s ease forwards; z-index:60; text-shadow:0 1px 0 oklch(0.4 0.1 85);
  }
  @keyframes floatUp{from{opacity:1; transform:translateY(0)}to{opacity:0; transform:translateY(-60px)}}

  /* ---------- 动漫特效库 ---------- */
  /* 集中线（速度线）全屏背景：连击/抽卡/破案/升级的大时刻用 */
  .rays-fixed{
    position:fixed; inset:-50%; pointer-events:none; z-index:105;
    background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 7deg, oklch(0.3 0.03 250 / .10) 7deg 10deg);
    animation: raysSpin 18s linear infinite;
  }
  .rays-fixed.gold{ background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 7deg, oklch(0.72 0.14 85 / .3) 7deg 10deg); }
  .rays-fixed.green{ background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 7deg, oklch(0.6 0.14 145 / .28) 7deg 10deg); }
  @keyframes raysSpin{ to{ transform:rotate(360deg); } }
  .overlay > .overlay-card, .overlay > .collection-modal{ position:relative; z-index:110; }

  /* 拟声词星爆徽章：连击里程碑 */
  .burst-badge{
    position:fixed; top:36%; left:50%; z-index:210; pointer-events:none;
    width:290px; height:290px;
    display:flex; align-items:center; justify-content:center;
    background: var(--gold);
    clip-path: polygon(50% 0%, 60% 13%, 74% 5%, 78% 20%, 93% 16%, 90% 32%, 100% 40%, 90% 51%, 98% 64%, 86% 70%, 88% 86%, 74% 84%, 68% 98%, 56% 89%, 44% 100%, 38% 87%, 23% 94%, 22% 78%, 7% 78%, 12% 64%, 2% 54%, 11% 44%, 4% 30%, 17% 28%, 16% 12%, 30% 17%, 35% 3%);
    filter: drop-shadow(5px 5px 0 var(--ink));
    animation: badgeIn .95s var(--ease-snap) forwards;
  }
  .burst-badge span{
    font-size:2rem; font-weight:900; color:var(--ink);
    transform:rotate(-6deg); text-align:center; line-height:1.2; padding:0 34px;
    letter-spacing:2px;
  }
  @keyframes badgeIn{
    0%{transform:translate(-50%,-50%) scale(0) rotate(-18deg); opacity:0;}
    30%{transform:translate(-50%,-50%) scale(1.1) rotate(3deg); opacity:1;}
    50%{transform:translate(-50%,-50%) scale(1) rotate(-3deg);}
    78%{transform:translate(-50%,-50%) scale(1) rotate(-3deg); opacity:1;}
    100%{transform:translate(-50%,-50%) scale(1.04) rotate(-3deg); opacity:0;}
  }

  /* キラキラ 火花粒子（JS 生成，--sx/--sy 起点，--dx/--dy 位移） */
  .sparkle{
    position:fixed; left:0; top:0; width:16px; height:16px; pointer-events:none; z-index:220;
    background: var(--gold);
    clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
    animation: sparkleFly .75s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes sparkleFly{
    0%{ transform: translate(var(--sx), var(--sy)) scale(.3) rotate(0deg); opacity:1; }
    100%{ transform: translate(calc(var(--sx) + var(--dx)), calc(var(--sy) + var(--dy))) scale(1.1) rotate(120deg); opacity:0; }
  }

  /* 画面轻微震颤：大连击专属 */
  @keyframes screenShake{
    0%,100%{transform:translate(0,0);}
    20%{transform:translate(-3px,2px);}
    40%{transform:translate(3px,-2px);}
    60%{transform:translate(-2px,-1px);}
    80%{transform:translate(2px,1px);}
  }
  main.shaking{ animation: screenShake .22s ease; }

  /* 页面切换过渡 */
  #app.page-in{ animation: pageIn .3s var(--ease-snap); }
  @keyframes pageIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

  /* 漫画式描边大标题 */
  .manga-title{
    font-size:2.1rem; font-weight:900; letter-spacing:4px; color:var(--red-deep);
    text-shadow: 3px 3px 0 var(--paper), 6px 6px 0 oklch(0.85 0.06 75);
  }

  /* 抽卡白光闪过 */
  .draw-flash{
    position:fixed; inset:0; background:oklch(0.99 0.01 95); z-index:230; pointer-events:none;
    animation: flashOut .45s ease-out forwards;
  }
  @keyframes flashOut{ 0%{opacity:0;} 18%{opacity:.95;} 100%{opacity:0;} }

  /* 减弱动态：尊重系统设置 */
  @media (prefers-reduced-motion: reduce){
    .rank-fill::after, .rays-fixed, .draw-flash, .card-front::after{ display:none!important; }
    .aura-card::before, .nav-card::before{ animation:none!important; }
    #app.page-in{ animation:none; }
    .card-draw{ animation-delay:0s!important; animation-duration:.01s!important; }
    .burst-badge{ animation-duration:.4s; }
    .lucky-card-slot, .lucky-card-back::after{ animation:none!important; }
    .lucky-card-slot, .lucky-card-flipper, .lucky-draw-result{ transition:none!important; }
  }

  /* ---------- 默写关 ---------- */
  .dictation-card{
    background:var(--paper-deep); border:var(--ink-line); border-radius:var(--radius);
    padding:24px 20px; text-align:center; margin-bottom:14px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .dictation-zh{font-size:1.7rem; font-weight:900; margin-bottom:var(--space-md);}
  .dictation-tip{color:var(--ink-soft); margin-bottom:var(--space-xl);}
  .dictation-answer{font-family:"Courier New",monospace; font-weight:700; font-size:1.5rem; color:var(--red-deep); margin:var(--space-lg) 0;}
  .dictation-actions{display:flex; gap:var(--space-md); justify-content:center; flex-wrap:wrap; margin-top:var(--space-lg);}
  .btn.good{background:var(--leaf); box-shadow:0 5px 0 oklch(0.42 0.1 145);}
  .btn.good:active{box-shadow:0 1px 0 oklch(0.42 0.1 145);}
  .btn.bad{background:var(--red); box-shadow:0 5px 0 var(--red-deep);}
  .btn.bad:active{box-shadow:0 1px 0 var(--red-deep);}

  /* ---------- 结算 ---------- */
  .result-card{
    background:var(--paper-deep); border-radius:var(--radius); padding:26px;
    text-align:center; border:var(--ink-line);
    box-shadow: 8px 8px 0 var(--ink);
  }
  .result-grade{font-size:4.5rem; font-weight:900; line-height:1; text-shadow:4px 4px 0 oklch(0.85 0.04 85);}
  .grade-S{color:var(--gold);} .grade-A{color:var(--leaf);} .grade-B{color:var(--water);} .grade-C{color:var(--ink-soft);}
  .result-score{font-size:1.3rem; font-weight:900; margin:var(--space-md) 0;}
  .result-gains{display:flex; justify-content:center; gap:var(--space-2xl); margin:var(--space-lg) 0 var(--space-xl); flex-wrap:wrap;}
  .gain{font-weight:700; color:var(--ink-soft);}
  .gain b{display:block; font-size:1.6rem; color:var(--ink);}
  .result-actions{display:flex; gap:var(--space-md); justify-content:center; flex-wrap:wrap;}

  /* ---------- 推理笔记 ---------- */
  .notes-tabs{display:flex; gap:var(--space-sm); margin-bottom:14px; flex-wrap:wrap;}
  .tab{background:var(--paper-deep); border:2.5px solid var(--ink); border-radius:99px; padding:8px 18px; font-weight:700; box-shadow:0 2px 0 var(--ink); transition:transform .1s ease, box-shadow .1s ease;}
  .tab:active{transform:translateY(2px); box-shadow:0 0 0 var(--ink);}
  .tab.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
  .note-item{background:var(--paper); border:2px solid oklch(0.88 0.03 85); border-radius:14px; padding:var(--space-md) var(--space-lg); margin-bottom:var(--space-md);}
  .note-item .en{font-size:1.1rem;}
  .note-item .zh{color:var(--ink-soft);}
  .note-item .ex{margin-top:6px; color:var(--ink-soft); font-size:.9rem;}
  .note-item .ex .en{font-size:.95rem;}
  .note-rule{font-weight:900; margin:var(--space-xs) 0;}
  .note-pitfall{margin-top:6px; color:var(--red-deep); font-weight:700; font-size:.9rem;}

  /* ---------- 弹层 ---------- */
  .overlay{
    position:fixed; inset:0; background:oklch(0.2 0.03 250 / .82);
    display:flex; align-items:center; justify-content:center; z-index:100; padding:var(--space-lg);
    animation:fadeIn .3s ease;
  }
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .overlay-card{
    background:var(--paper); border-radius:24px; max-width:640px; width:100%;
    padding:24px; text-align:center; max-height:88vh; overflow-y:auto;
    animation:pop .35s cubic-bezier(.22,1,.36,1);
  }
  .overlay-card h2{font-size:1.8rem; margin-bottom:var(--space-md);}
  .overlay-card .big-emoji{font-size:3.5rem;}
  .rankup-name{font-size:1.8rem; font-weight:900; color:var(--flame); margin:var(--space-md) 0;}
  .truth-text{text-align:left; line-height:2; color:var(--ink); margin:var(--space-lg) 0;}
  .truth-text p{margin-bottom:var(--space-md);}
  .detective-overlay{display:block; padding:0; overflow-y:auto; background:var(--ink);}
  .detective-page{
    min-height:100%; padding:24px clamp(16px,4vw,48px) 28px;
    display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:20px;
    color:var(--paper);
    background:
      linear-gradient(oklch(0.92 0.03 85 / .05) 1px, transparent 1px),
      radial-gradient(oklch(0.96 0.03 90 / .08) 1px, transparent 1px),
      var(--ink);
    background-size:100% 30px,24px 24px,auto;
  }
  .detective-page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; max-width:1180px; width:100%; margin:0 auto;}
  .detective-kicker{font-family:"Courier New",monospace; font-size:.72rem; letter-spacing:4px; color:var(--gold); font-weight:900;}
  .detective-page h2{font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.1; margin-top:4px; text-shadow:4px 4px 0 var(--red-deep);}
  .detective-close{
    flex:0 0 48px; width:48px; height:48px; border:3px solid var(--paper); border-radius:12px;
    background:var(--red); color:var(--paper); font-size:2rem; line-height:1; font-weight:900;
    box-shadow:4px 4px 0 var(--red-deep);
  }
  .detective-page-body{
    width:100%; max-width:1180px; margin:0 auto; min-height:0;
    display:grid; grid-template-columns:minmax(220px,280px) minmax(0,1fr); gap:18px;
    align-items:start;
  }
  .detective-preview{
    padding:14px; background:var(--paper); color:var(--ink);
    border:3px solid var(--paper-deep); border-radius:18px; box-shadow:7px 7px 0 var(--red-deep);
    position:sticky; top:18px;
  }
  .detective-preview-frame{
    width:100%; aspect-ratio:1; overflow:hidden; display:grid; place-items:center;
    border:3px solid var(--ink); border-radius:14px; background:var(--paper-deep);
  }
  .detective-preview-frame img{width:100%; height:100%; object-fit:cover; object-position:center 22%;}
  .detective-preview-empty{font-size:4rem; font-weight:900; color:var(--red-deep); text-shadow:3px 3px 0 var(--kraft);}
  .detective-preview-label{margin-top:12px; font-size:.72rem; letter-spacing:3px; color:var(--red-deep); font-weight:900;}
  .detective-preview-name{font-size:1.35rem; font-weight:900; margin-top:2px;}
  .detective-selector{
    min-width:0; padding:18px; background:var(--paper-deep); color:var(--ink);
    border:3px solid var(--paper); border-radius:18px; box-shadow:7px 7px 0 var(--red-deep);
  }
  .detective-selector-head{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:14px;}
  .detective-selector-head h3{font-size:1.25rem;}
  .detective-selector-head p{color:var(--ink-soft); font-size:.86rem; margin-top:2px;}
  .detective-owned-count{
    flex:0 0 auto; padding:4px 10px; border:2px solid var(--red-deep); border-radius:999px;
    background:var(--paper); color:var(--red-deep); font-weight:900; font-size:.78rem;
  }
  .detective-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px;
  }
  .detective-choice{
    position:relative; min-width:0; padding:5px; overflow:hidden; text-align:left;
    background:var(--paper); color:var(--ink); border:2.5px solid var(--ink); border-radius:14px;
    box-shadow:3px 3px 0 var(--ink);
    transition:transform .14s var(--ease-snap), box-shadow .14s var(--ease-snap), background .14s ease;
  }
  .detective-choice:hover{transform:translateY(-3px); box-shadow:5px 5px 0 var(--ink);}
  .detective-choice.selected{background:oklch(0.91 0.08 85); box-shadow:5px 5px 0 var(--red-deep);}
  .detective-choice img{width:100%; aspect-ratio:1; object-fit:cover; object-position:center 20%; border-radius:9px; display:block;}
  .detective-choice-name{display:block; padding:6px 4px 4px; font-weight:900; font-size:.78rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .detective-choice-mark{
    position:absolute; top:9px; right:9px; width:26px; height:26px; display:none;
    place-items:center; border-radius:50%; background:var(--red); color:var(--paper);
    border:2px solid var(--paper); font-weight:900;
  }
  .detective-choice.selected .detective-choice-mark{display:grid;}
  .detective-empty{
    min-height:280px; display:grid; place-items:center; align-content:center; gap:8px;
    text-align:center; border:2px dashed var(--ink-soft); border-radius:14px; padding:24px;
  }
  .detective-empty-icon{font-size:3rem;}
  .detective-empty p{color:var(--ink-soft); margin:0 0 8px;}
  .detective-page-actions{
    width:100%; max-width:1180px; margin:0 auto; display:flex; justify-content:flex-end; gap:10px;
  }
  .detective-page-actions .btn{min-width:120px;}

  /* ---------- 卡牌 ---------- */
  .card-draw-wrap{perspective:900px; margin:var(--space-lg) auto;}
  .card-draw{
    width:170px; height:230px; margin:0 auto; border-radius:16px; position:relative;
    transform-style:preserve-3d; animation:flip .9s var(--ease-snap) .35s both;
  }
  @keyframes flip{from{transform:rotateY(180deg)}to{transform:rotateY(0)}}
  .card-face{
    position:absolute; inset:0; border-radius:16px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px; padding:12px;
    backface-visibility:hidden;
  }
  .card-front{border:3px solid var(--gold); background:linear-gradient(160deg, oklch(0.93 0.05 85), oklch(0.85 0.07 75)); overflow:hidden;}
  .card-front::after{
    content:''; position:absolute; inset:0; border-radius:13px; pointer-events:none;
    background: linear-gradient(115deg, transparent 42%, oklch(0.98 0.03 95 / .55) 50%, transparent 58%);
    background-size: 260% 100%; background-position: 130% 0;
    animation: holoSweep 1.4s 1.15s var(--ease-snap) forwards;
  }
  @keyframes holoSweep{ to{ background-position: -60% 0; } }
  .card-front.rare{border-color:oklch(0.75 0.16 145); box-shadow:0 0 24px oklch(0.75 0.16 145 / .6);}
  .card-front.epic{border-color:var(--gold); box-shadow:0 0 28px oklch(0.72 0.14 85 / .8);}
  .card-img{width:110px; height:110px; object-fit:cover; border-radius:12px; background:oklch(0.8 0.04 80);}
  .card-placeholder{
    width:110px; height:110px; border-radius:12px; background:oklch(0.78 0.04 80);
    display:flex; align-items:center; justify-content:center; font-size:2.6rem;
  }
  .card-name{font-weight:900; font-size:1rem;}
  .card-layer{font-size:.8rem; color:var(--red-deep); font-weight:700; letter-spacing:2px;}

  /* ---------- 获得卡牌：选卡转场 ---------- */
  .lucky-draw-overlay{overflow:hidden; padding:clamp(12px,3vw,32px);}
  .lucky-draw-modal{
    position:relative; z-index:110; width:min(980px,100%); max-height:94vh; overflow:auto;
    padding:clamp(18px,3vw,30px) clamp(14px,3vw,34px) 24px; text-align:center;
    background:var(--paper); border:var(--ink-line); border-radius:26px;
    box-shadow:12px 12px 0 var(--ink);
  }
  .lucky-draw-modal::before,
  .lucky-draw-modal::after{
    content:''; position:absolute; top:18px; width:64px; height:18px; pointer-events:none;
    background:oklch(0.88 0.04 85 / .78); border:1px solid oklch(0.72 0.04 80 / .65);
  }
  .lucky-draw-modal::before{left:-18px; transform:rotate(-14deg);}
  .lucky-draw-modal::after{right:-18px; transform:rotate(13deg);}
  .lucky-draw-kicker{
    display:inline-block; padding:3px 12px; margin-bottom:8px;
    color:var(--paper); background:var(--red-deep); border-radius:99px;
    font-size:.72rem; font-weight:900; letter-spacing:3px;
  }
  .lucky-draw-title{font-size:clamp(1.45rem,3vw,2.1rem); font-weight:900; letter-spacing:2px;}
  .lucky-draw-help{margin-top:6px; color:var(--ink-soft); font-weight:700;}
  .lucky-card-stage{
    position:relative; min-height:242px; margin:16px auto 0;
    display:flex; align-items:center; justify-content:center; gap:12px;
    perspective:1200px; isolation:isolate;
  }
  .lucky-card-slot{
    position:relative; z-index:1; flex:0 0 132px; width:132px; height:184px; padding:0;
    background:transparent; color:var(--ink); transform-style:preserve-3d;
    transform:translateY(var(--ty,0px)) rotate(var(--rot,0deg));
    animation:luckyDeal .74s var(--ease-snap) var(--delay,0ms) both;
    transition:transform .58s var(--ease-snap), opacity .42s ease;
  }
  .lucky-card-slot:not(:disabled):hover .lucky-card-flipper{
    transform:translateY(-10px) rotateY(0deg);
    filter:drop-shadow(0 9px 0 oklch(0.18 0.03 250 / .24));
  }
  .lucky-card-slot:disabled{cursor:default;}
  @keyframes luckyDeal{
    from{opacity:0; transform:translateY(130px) scale(.52) rotate(var(--rot-start,0deg));}
    to{opacity:1; transform:translateY(var(--ty,0px)) rotate(var(--rot,0deg));}
  }
  .lucky-card-flipper{
    position:absolute; inset:0; display:block; transform-style:preserve-3d;
    transition:transform .64s cubic-bezier(.16,1,.3,1), filter .2s ease;
  }
  .lucky-card-face{
    position:absolute; inset:0; overflow:hidden; border-radius:18px;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  .lucky-card-back{
    border:3px solid var(--ink); background:var(--ink);
    box-shadow:4px 5px 0 oklch(0.16 0.03 250);
  }
  .lucky-card-back img{width:100%; height:100%; object-fit:cover; display:block;}
  .lucky-card-back::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg,transparent 38%,oklch(0.98 0.02 95 / .34) 49%,transparent 60%);
    background-size:250% 100%; background-position:130% 0;
    animation:luckyCardSheen 2.8s ease-in-out infinite;
  }
  @keyframes luckyCardSheen{45%,100%{background-position:-70% 0;}}
  .lucky-card-front{
    display:flex; flex-direction:column; justify-content:flex-end;
    border:4px solid var(--gold); background:oklch(0.91 0.05 85);
    transform:rotateY(180deg);
    box-shadow:0 0 0 3px var(--ink),0 0 34px var(--aura1,var(--gold));
  }
  .lucky-card-front img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .lucky-card-front::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg,transparent 40%,oklch(0.99 0.01 95 / .62) 50%,transparent 60%);
    background-size:260% 100%; background-position:130% 0;
  }
  .lucky-draw-overlay.is-revealed .lucky-card-front::after{
    animation:holoSweep 1.2s .05s var(--ease-snap) forwards;
  }
  .lucky-card-front-name{
    position:relative; z-index:2; width:100%; padding:28px 8px 9px;
    color:var(--paper); font-weight:900; font-size:.95rem; line-height:1.25;
    text-shadow:2px 2px 0 var(--ink);
    background:linear-gradient(transparent,oklch(0.16 0.03 250 / .88));
  }
  .lucky-card-front-layer{
    position:relative; z-index:2; display:block; margin-top:2px;
    color:var(--gold); font-size:.68rem; letter-spacing:1px;
  }
  .lucky-card-stage.has-selection .lucky-card-slot.is-discarded{
    opacity:0; transform:translateY(110px) scale(.7) rotate(8deg);
    transition-delay:calc(var(--i,0) * 24ms);
  }
  .lucky-card-stage.has-selection .lucky-card-slot.is-selected{
    z-index:6; transform:translateX(var(--move-x,0px)) translateY(-14px) scale(1.26) rotate(0deg);
    transition-delay:0s;
  }
  .lucky-card-slot.is-selected .lucky-card-flipper{
    transform:rotateY(180deg); transition-delay:.3s;
  }
  .lucky-draw-overlay.is-revealed .lucky-card-slot.is-selected{
    filter:drop-shadow(0 0 20px var(--aura1,var(--gold)));
  }
  .lucky-draw-result{
    min-height:96px; margin-top:4px; opacity:0; transform:translateY(12px);
    pointer-events:none; transition:opacity .38s ease,transform .38s var(--ease-snap);
  }
  .lucky-draw-overlay.is-revealed .lucky-draw-result{opacity:1; transform:none; pointer-events:auto;}
  .lucky-result-line{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; font-weight:900;}
  .lucky-result-name{font-size:1.3rem;}
  .lucky-result-note{margin:9px 0 14px; color:var(--ink-soft); font-weight:700;}

  /* ---------- 卡牌图鉴（整页） ---------- */
  .coll-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
  .coll-head-left{display:flex; align-items:center; gap:var(--space-md); min-width:0;}
  .coll-head-left .nav-card{margin-bottom:0;}
  .coll-title{font-size:1.8rem; font-weight:900;}
  .coll-progress{font-weight:900; color:var(--red-deep); font-size:1.1rem;}
  .coll-layout{display:flex; gap:12px; align-items:flex-start;}
  .coll-side{flex:0 0 200px; display:flex; flex-direction:column; gap:var(--space-sm); position:sticky; top:16px;}
  .layer-item{
    background:var(--paper-deep); border:var(--ink-line); border-radius:14px;
    padding:7px 10px; text-align:left; width:100%;
    box-shadow:3px 3px 0 var(--ink);
    transition:transform .12s var(--ease-snap), box-shadow .12s var(--ease-snap), background .12s ease;
  }
  .layer-item:hover{transform:translateY(-2px); box-shadow:4px 5px 0 var(--ink);}
  .layer-item.sel{background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--red-deep);}
  .layer-item .li-name{font-weight:900; font-size:.98rem; display:flex; justify-content:space-between; gap:8px;}
  .layer-item .li-stars{font-size:.75rem; letter-spacing:1px; opacity:.85; color:var(--gold);}
  .layer-item .li-own{font-size:.75rem; font-weight:700; opacity:.8; margin-top:2px;}
  .coll-tip{font-size:.75rem; color:var(--ink-soft); line-height:1.6; padding:0 4px;}
  .coll-main{flex:1; min-width:0;}
  .coll-layer-desc{
    background:var(--paper-deep); border:2px dashed oklch(0.7 0.05 80); border-radius:14px;
    padding:9px 12px; margin-bottom:10px;
    color:var(--ink-soft); font-weight:700; line-height:1.7;
  }
  .coll-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px;}

  /* 查克拉气旋边框：conic 渐变旋转涌动 */
  .aura-card{
    position:relative; border-radius:18px; padding:4px; overflow:hidden;
    cursor:pointer; transition:transform .15s var(--ease-snap);
    --aura1: oklch(0.55 0.1 250); --aura2: oklch(0.9 0.03 90);
  }
  .aura-card:hover{transform:translateY(-4px) scale(1.02);}
  .aura-card::before{
    content:''; position:absolute; left:50%; top:50%;
    width:340%; aspect-ratio:1;
    background: conic-gradient(from 0deg, var(--aura1), var(--aura2) 22%, var(--aura1) 46%, var(--aura2) 72%, var(--aura1));
    animation: auraSpin 3s linear infinite;
  }
  @keyframes auraSpin{
    from{ transform: translate(-50%,-50%) rotate(0deg); }
    to{ transform: translate(-50%,-50%) rotate(360deg); }
  }
  .aura-inner{
    position:relative; border-radius:14px; background:var(--paper);
    border:2px solid var(--ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:0; min-height:0; aspect-ratio:3/4; overflow:hidden; text-align:center;
  }
  .aura-L1{--aura1: oklch(0.62 0.13 230); --aura2: oklch(0.92 0.04 230);}
  .aura-L2{--aura1: oklch(0.60 0.14 145); --aura2: oklch(0.92 0.05 145);}
  .aura-L3{--aura1: oklch(0.58 0.16 300); --aura2: oklch(0.90 0.05 300);}
  .aura-L4{--aura1: oklch(0.65 0.19 55);  --aura2: oklch(0.93 0.05 85);}
  .aura-L5{--aura1: oklch(0.55 0.19 27);  --aura2: oklch(0.78 0.14 85);}
  .aura-L6{--aura1: oklch(0.72 0.14 85);  --aura2: oklch(0.95 0.04 95);}
  .aura-L7{--aura1: oklch(0.65 0.20 27);  --aura2: oklch(0.62 0.16 300);}
  .aura-card.unowned::before{ animation-duration:7s; opacity:.45; }
  .aura-card.unowned .aura-inner{
    background:linear-gradient(160deg, oklch(0.32 0.03 250), oklch(0.24 0.02 250));
    border-color:oklch(0.15 0.02 250);
  }
  .mystery-q{
    font-size:4.2rem; font-weight:900; color:var(--paper); line-height:1;
    text-shadow: 0 0 18px oklch(0.62 0.13 230 / .8), 3px 3px 0 oklch(0.15 0.02 250);
  }
  .coll-card-img{width:100%; height:100%; object-fit:cover; border-radius:0; border:0; display:block; background:oklch(0.8 0.04 80);}
  .aura-inner > .card-placeholder{width:100%!important; height:100%!important; border-radius:0;}
  .card-count-burst{
    position:absolute; top:6px; right:6px; z-index:4;
    min-width:34px; height:34px; padding:0 7px;
    display:flex; align-items:center; justify-content:center;
    background:var(--red); color:var(--paper); font-size:.88rem; font-weight:900;
    clip-path:polygon(50% 0%,61% 14%,78% 6%,79% 24%,97% 29%,86% 44%,100% 58%,82% 65%,84% 84%,66% 79%,54% 100%,43% 81%,24% 91%,23% 72%,4% 68%,15% 51%,0% 38%,19% 31%,16% 12%,36% 17%);
    filter:drop-shadow(2px 2px 0 var(--ink));
    text-shadow:1px 1px 0 var(--red-deep);
  }
  .coll-card-name{font-weight:900; font-size:1rem;}
  .coll-card-stars{font-size:.8rem; color:var(--red-deep); letter-spacing:2px; font-weight:900;}
  .coll-count{
    position:absolute; top:8px; right:8px; z-index:2;
    background:var(--red); color:var(--paper); font-size:.78rem; font-weight:900;
    border-radius:99px; padding:2px 9px; border:2px solid var(--ink);
  }

  /* 卡牌大图弹窗 */
  .card-detail-inner{display:flex; flex-direction:column; align-items:center; gap:var(--space-lg);}
  .aura-card.big{ width:100%; max-width:420px; cursor:default; }
  .aura-card.big:hover{transform:none;}
  .aura-card.big .aura-inner{min-height:0; padding:0; gap:0;}
  .aura-card.big .coll-card-img{width:100%; height:100%; border:0; border-radius:0;}
  .aura-card.big .card-placeholder{width:100%!important; height:100%!important; border-radius:0; font-size:4rem;}
  .aura-card.big .mystery-q{font-size:7rem;}
  .aura-card.big .coll-card-name{font-size:1.4rem;}

  .card-detail-modal{
    width:min(1280px,calc(100vw - 48px)); height:min(820px,calc(100vh - 48px));
    max-width:none; max-height:none; padding:32px; display:flex;
    align-items:center; justify-content:center; overflow:auto;
  }
  .card-detail-layout{
    display:grid; grid-template-columns:minmax(300px,420px) minmax(0,1fr);
    width:100%; align-items:center; justify-content:center; gap:clamp(28px,4vw,64px);
  }
  .card-detail-info{min-width:0; display:flex; flex-direction:column; gap:24px;}
  .card-detail-meta{display:grid; gap:14px;}
  .card-detail-row{
    min-width:0; display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding:13px 18px; border:2px solid var(--ink); border-radius:14px;
    background:var(--paper-deep); box-shadow:4px 4px 0 var(--ink);
  }
  .card-detail-label{font-weight:900; color:var(--ink-soft);}
  .card-detail-value{font-weight:900; font-size:1.35rem; text-align:right; overflow-wrap:anywhere;}
  .rarity-badge{
    display:inline-flex; align-items:center; justify-content:center; min-width:72px;
    padding:5px 12px; border:2px solid var(--ink); border-radius:10px;
    color:var(--ink); font-size:1.05rem; font-weight:900; letter-spacing:.04em;
  }
  .rarity-N{background:oklch(0.79 0.025 250);}
  .rarity-R{background:oklch(0.73 0.09 235);}
  .rarity-SR{background:oklch(0.73 0.13 150);}
  .rarity-SSR{background:oklch(0.78 0.15 85);}
  .rarity-UR{background:oklch(0.62 0.20 28); color:var(--paper);}
  .card-star-panel{
    padding:16px 18px; border:2px solid var(--ink); border-radius:14px;
    background:oklch(0.92 0.025 86); box-shadow:4px 4px 0 var(--ink);
  }
  .card-star-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; font-weight:900;}
  .card-star-head strong{color:var(--red-deep); font-size:1.1rem;}
  .card-star-track{display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px;}
  .card-star-slot{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    border:2px solid var(--ink); border-radius:10px; font-size:1.35rem; line-height:1;
    background:oklch(0.82 0.015 90); color:oklch(0.68 0.02 90);
  }
  .card-star-slot.lit{
    background:var(--gold); color:var(--paper); box-shadow:3px 3px 0 var(--ink);
    text-shadow:1px 1px 0 var(--ink);
  }
  .card-actions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:stretch;}
  .card-action{min-height:80px; border-radius:16px; padding:10px 14px; color:var(--paper); border:2.5px solid var(--ink); font-weight:900; box-shadow:0 5px 0 var(--ink);}
  .card-action.count{background:var(--leaf); cursor:default;}
  .card-action.fuse{background:var(--red);}
  .card-action.fuse:disabled{background:oklch(0.58 0.03 250); cursor:not-allowed;}
  .card-action.star{grid-column:1/-1; background:var(--gold); color:var(--ink);}
  .card-action.star:disabled{background:oklch(0.70 0.03 90); color:oklch(0.43 0.02 90); cursor:not-allowed;}
  .card-action.close{background:oklch(0.48 0.02 250);}
  .card-action:not(:disabled):active{transform:translateY(4px); box-shadow:1px 1px 0 var(--ink);}

  @media (max-width:1360px),(max-height:840px){
    .card-detail-modal{width:calc(100vw - 32px); height:calc(100vh - 32px);}
  }
  @media (max-width:720px){
    .chapter-page{padding-top:0;}
    .chapter-return{position:static; left:auto; margin:0 0 8px;}
    .chapter-actions{grid-template-columns:1fr;}
    .quiz-layout{grid-template-columns:1fr;}
    .quiz-feedback{min-height:0;}
    .coll-layout{flex-direction:column;}
    .coll-side{flex:1 1 auto; flex-direction:row; flex-wrap:wrap; position:static;}
    .layer-item{width:auto; flex:1 1 30%;}
    .coll-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .card-detail-modal{height:auto; min-height:calc(100vh - 32px); padding:16px;}
    .card-detail-layout{grid-template-columns:1fr; gap:20px;}
    .aura-card.big{width:min(78vw,320px); justify-self:center;}
    .card-detail-info{gap:16px;}
    .card-detail-row{padding:10px 12px;}
    .card-detail-value{font-size:1.05rem;}
    .card-star-panel{padding:12px;}
    .card-star-track{gap:3px;}
    .card-star-slot{border-radius:7px; font-size:1rem;}
    .card-actions{width:100%; grid-template-columns:1fr; gap:8px;}
    .card-action{min-height:52px; font-size:.88rem; padding:6px 10px;}
    .card-action.star{grid-column:auto;}
  }
  .fuse-anim{display:flex; align-items:center; justify-content:center; gap:var(--space-lg); margin:var(--space-xl) 0;}
  .fuse-card{width:90px; height:118px; border-radius:12px; border:2px solid var(--gold); background:var(--paper-deep);
    display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.8rem; text-align:center; padding:6px;}
  .fuse-left{animation:fuseL .9s ease forwards;}
  .fuse-right{animation:fuseR .9s ease forwards;}
  @keyframes fuseL{to{transform:translateX(70px) rotate(8deg); opacity:0;}}
  @keyframes fuseR{to{transform:translateX(-70px) rotate(-8deg); opacity:0;}}
  .fuse-flash{font-size:3rem; animation:flashIn .5s .8s ease both;}
  @keyframes flashIn{from{transform:scale(0); opacity:0}to{transform:scale(1); opacity:1}}

  /* ---------- toast ---------- */
  .toast{
    position:fixed; top:84px; left:50%; transform:translateX(-50%);
    background:var(--ink); color:var(--paper); padding:var(--space-md) var(--space-xl);
    border-radius:99px; font-weight:900; z-index:90;
    border:2.5px solid oklch(0.15 0.02 250);
    box-shadow:0 5px 0 oklch(0.15 0.02 250), 0 10px 24px oklch(0.2 0.03 250 / .35);
    animation:pop .25s ease;
  }
  .toast .mini-btn{margin-left:12px; background:var(--red); color:var(--paper); border-radius:99px; padding:2px 12px; font-weight:700;}

  /* ---------- 背景音乐 ---------- */
  .music-player{
    position:fixed; right:18px; bottom:18px; z-index:70;
    display:flex; align-items:center; gap:7px; padding:4px 9px 4px 4px;
    background:var(--paper); border:2.5px solid var(--ink); border-radius:999px;
    box-shadow:var(--shadow-hard-sm);
  }
  .music-toggle{
    width:44px; height:44px; display:grid; place-items:center;
    background:var(--red); color:var(--paper); border:2.5px solid var(--ink); border-radius:50%;
    box-shadow:0 3px 0 var(--ink); font-size:1.08rem; font-weight:900; line-height:1;
    transition:transform .12s var(--ease-snap), box-shadow .12s var(--ease-snap), background .12s ease;
  }
  .music-toggle:hover{transform:translateY(-2px); box-shadow:0 5px 0 var(--ink);}
  .music-toggle:active{transform:translateY(3px); box-shadow:0 0 0 var(--ink);}
  .music-toggle[aria-pressed="true"]{background:var(--ink); color:var(--gold);}
  .music-count{font-family:"Courier New",monospace; font-size:.74rem; font-weight:900; color:var(--ink-soft);}

  /* ---------- 统一视觉与交互升级 ---------- */
  html{scroll-padding-top:92px; scroll-behavior:smooth;}
  body{
    line-height:1.5;
    background-image:
      linear-gradient(oklch(0.92 0.03 85 / .22) 1px, transparent 1px),
      radial-gradient(oklch(0.87 0.035 82) 1px, transparent 1px);
    background-size:100% 28px,22px 22px;
  }
  ::selection{background:var(--gold); color:var(--ink);}
  header{
    position:sticky; top:0; z-index:80;
    min-height:70px; padding:10px 20px;
    box-shadow:0 5px 0 oklch(0.23 0.03 250);
  }
  .agency-name{font-size:1.28rem; letter-spacing:1.5px;}
  .agency-name::before{content:'CASE FILE'; display:block; font-family:"Courier New",monospace; font-size:.56rem; letter-spacing:3px; color:oklch(0.82 0.05 85); opacity:.8; margin-bottom:1px;}
  .agency-name .stamp{font-size:.68rem; padding:3px 9px; letter-spacing:3px;}
  .hud{gap:8px;}
  .rank-box{
    min-height:46px; padding:5px 10px; border-radius:14px;
    background:oklch(0.24 0.03 250); border:2px solid oklch(0.15 0.02 250);
  }
  .rank-icon{font-size:1.4rem;}
  .rank-name{font-size:.9rem; white-space:nowrap;}
  .rank-bar{width:180px; height:19px; margin-top:3px; background:oklch(0.89 0.03 88);}
  .clue-box,.hud-btn,.cloud-dot{min-height:42px; display:inline-flex; align-items:center; justify-content:center;}
  .hud-btn{padding:8px 13px; border-radius:12px; font-size:.88rem;}
  .cloud-dot{padding:7px 11px;}
  main{max-width:1200px; padding:18px 20px 24px;}

  .subject-tabs{gap:12px; margin-bottom:22px;}
  .subject-tab{
    height:100px; min-height:100px; padding:12px; border-radius:16px;
    display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto auto 1fr;
    column-gap:12px; align-content:start;
    box-shadow:var(--shadow-hard);
  }
  .subject-tab .subject-ico{
    grid-row:1 / 3; width:48px; height:48px; margin:0;
    display:grid; place-items:center; border:2px solid var(--ink); border-radius:14px;
    background:var(--paper-deep); box-shadow:var(--shadow-hard-sm); font-size:1.45rem;
  }
  .subject-tab .subject-name{font-size:1.05rem; align-self:end;}
  .subject-tab .subject-note{font-size:.82rem; margin-top:2px; line-height:1.45;}
  .subject-tab .subject-count{
    grid-column:2; align-self:end; justify-self:start; margin-top:8px;
    padding:3px 10px; font-size:.72rem; border:1.5px solid currentColor;
  }
  .subject-tab.active{background:var(--red); color:var(--paper); box-shadow:6px 6px 0 var(--red-deep);}
  .subject-tab.active .subject-ico{background:var(--paper); color:var(--red-deep);}

  .map-title{font-size:1.85rem; letter-spacing:1px;}
  .map-sub{font-size:.95rem; margin-bottom:18px; max-width:72ch;}
  .case-list{gap:14px;}
  .case-card{
    min-height:136px; padding:22px 28px; border-radius:18px;
    box-shadow:var(--shadow-hard-lg);
  }
  .case-unit{font-size:.78rem; letter-spacing:2.5px;}
  .case-name{font-size:1.65rem; line-height:1.25; margin:6px 0;}
  .case-theme{font-size:.95rem; line-height:1.5;}
  .case-status{font-size:.88rem; padding:5px 13px; top:20px; right:24px;}
  .empty-board{padding:42px 24px;}
  .empty-board .empty-ico{font-size:2.7rem;}

  .chapter-page{display:grid; gap:12px;}
  .chapter-return{position:absolute; top:0; z-index:2; left:calc(-1 * max(0px,(100vw - 1180px) / 2)); margin:0;}
  .chapter-head .intro-board{margin-bottom:0;}
  .intro-board{padding:16px 18px; border-radius:16px; background:var(--paper);}
  .intro-board h2{font-size:1.45rem; line-height:1.3;}
  .intro-board .keyq{font-size:.94rem; margin-top:9px;}
  .case-brief{font-size:.92rem; line-height:1.65;}
  .chapter-actions{gap:12px; margin-top:2px;}
  .truth-btn,.notes-btn{min-height:52px; display:flex; align-items:center; justify-content:center; margin-top:0;}
  .truth-btn{font-size:1.05rem; padding:12px 18px;}
  .notes-btn{font-size:.98rem; padding:12px 18px;}
  .level-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;}
  .level-card{
    min-height:128px; padding:12px; border-radius:16px;
    box-shadow:var(--shadow-hard);
  }
  .level-head{grid-template-columns:42px minmax(0,1fr); gap:10px; min-height:42px;}
  .level-emoji{width:42px; height:42px; font-size:1.18rem;}
  .level-head .level-name{font-size:1.02rem; line-height:1.25;}
  .level-desc{font-size:.85rem; line-height:1.48;}
  .level-done{font-size:.82rem; margin-top:8px;}
  .level-badge{top:11px; right:13px;}

  .quiz-toolbar{gap:10px; margin-bottom:16px; align-items:stretch;}
  .quiz-toolbar .nav-card.sm{min-height:52px;}
  .quiz-top{
    min-height:52px; padding:8px 14px; border-radius:14px;
    background:var(--ink); color:var(--paper);
    border:var(--ink-line); box-shadow:var(--shadow-hard-sm);
  }
  .quiz-title{font-size:1.08rem;}
  .quiz-progress{color:oklch(0.84 0.03 85);}
  .combo-meter{color:var(--gold); min-width:88px; text-align:right;}
  .q-card{padding:22px 24px; border-radius:18px; box-shadow:var(--shadow-hard-lg);}
  .q-kind{
    display:inline-flex; width:max-content; padding:3px 9px;
    border:1.5px solid var(--ink); border-radius:999px; background:var(--paper-deep);
    font-size:.76rem; margin-bottom:10px;
  }
  .q-prompt{font-size:1.48rem; line-height:1.42; margin-bottom:8px;}
  .q-prompt .en{font-size:1.48rem;}
  .q-sub{font-size:.94rem; line-height:1.55;}
  .opt-grid{gap:10px;}
  .opt{
    min-height:52px; padding:12px 14px; border-radius:14px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    line-height:1.4;
  }
  .opt.correct::before{content:'✓'; font-weight:900;}
  .opt.wrong::before{content:'×'; font-weight:900;}
  .feedback{margin-bottom:12px; padding:18px 22px; border-width:3px; box-shadow:var(--shadow-hard);}
  .feedback .fb-head{font-size:1.16rem;}
  .fb-explain{font-size:.94rem; line-height:1.65;}
  .fb-answer{font-size:1rem;}
  .spell-input{min-height:52px;}
  .spell-input:focus{outline:3px solid var(--focus); outline-offset:3px; border-color:var(--ink);}
  .btn{min-height:44px; padding:11px 22px; border-radius:12px; font-size:1rem;}
  .chip{min-height:40px; padding:8px 14px;}

  .coll-head{margin-bottom:14px;}
  .coll-title{font-size:1.7rem; line-height:1.25;}
  .coll-progress{font-size:1rem; padding:6px 11px; border:2px solid var(--red-deep); border-radius:999px; background:var(--paper);}
  .coll-layout{gap:16px;}
  .coll-side{flex-basis:220px; top:88px; gap:8px;}
  .layer-item{min-height:50px; padding:9px 11px; border-radius:12px;}
  .layer-item .li-name{font-size:.94rem;}
  .layer-item.sel{box-shadow:5px 5px 0 var(--red-deep);}
  .coll-layer-desc{font-size:.84rem; line-height:1.55; margin-bottom:12px;}
  .coll-grid{grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;}
  .aura-card{
    width:100%; padding:4px; border:0; border-radius:16px;
    background:none; color:inherit; font:inherit; text-align:inherit;
    box-shadow:0 4px 0 oklch(0.2 0.03 250 / .2);
  }
  .aura-card::before{animation-duration:6s;}
  .aura-card:hover{transform:translateY(-3px) scale(1.015);}
  .aura-inner{border-radius:12px; border-width:2.5px;}
  .card-count-burst{top:7px; right:7px; min-width:32px; height:32px; font-size:.82rem;}
  .coll-card-name{font-size:.95rem;}

  .skill-branches,.skill-detail,.skill-tree{border-radius:16px;}
  .skill-branches{gap:8px;}
  .skill-branch{min-height:52px; padding:9px 11px;}
  .skill-node{
    min-height:144px; padding:10px 12px; display:flex; flex-direction:column;
    border-radius:14px;
  }
  .skill-node > div:first-child{line-height:1.45;}
  .skill-node small{line-height:1.55; flex:1;}
  .skill-actions{gap:8px; margin-top:12px;}
  .skill-detail{position:sticky; top:88px;}
  .notes-tabs{display:flex; gap:8px; margin-bottom:12px;}
  .tab{
    min-height:42px; padding:8px 16px; border:var(--ink-line); border-radius:999px;
    background:var(--paper); color:var(--ink); font-weight:900; box-shadow:var(--shadow-hard-sm);
  }
  .tab.active{background:var(--ink); color:var(--paper);}

  .overlay-card{border-radius:18px; box-shadow:10px 10px 0 var(--ink);}
  .toast{border-radius:14px; max-width:min(720px,calc(100vw - 32px)); text-align:center;}

  @media(max-width:900px){
    header{position:static;}
    main{padding:14px 14px 22px;}
    .subject-tab{min-height:96px; padding:12px;}
    .level-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .quiz-toolbar{margin-bottom:12px;}
    .quiz-layout{max-width:100%;}
    .coll-side{top:16px;}
    .skill-detail{position:static;}
    .detective-page-body{grid-template-columns:1fr;}
    .detective-preview{position:static; display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr); gap:12px; align-items:center;}
    .detective-preview-frame{grid-row:1 / 4;}
    .detective-preview-label{margin-top:0;}
  }

  @media(min-width:721px){
    .chapter-head,
    .level-grid,
    .chapter-actions{padding-left:clamp(0px, calc(172px - max(0px,(100vw - 1200px) / 2)), 172px);}
    .coll-head{position:relative;}
    .coll-head-left{padding-left:clamp(0px, calc(172px - max(0px,(100vw - 1200px) / 2)), 172px);}
    .coll-head-left .nav-home{position:absolute; top:0; left:calc(-1 * max(0px,(100vw - 1180px) / 2)); z-index:2;}
  }

  @media(max-width:720px){
    .chapter-return{position:static; left:auto; margin:0 0 8px;}
    .chapter-head,
    .level-grid,
    .chapter-actions{padding-left:0;}
    .coll-head-left{padding-left:0;}
    .coll-head-left .nav-home{position:static; left:auto;}
    .coll-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .nav-card{background:conic-gradient(from 0deg,var(--aura1),var(--aura2) 22%,var(--aura1) 46%,var(--aura2) 72%,var(--aura1));}
    .nav-card::before{display:none;}
  }

  @media(max-width:720px){
    .music-player{right:10px; bottom:10px; padding:3px 7px 3px 3px;}
    .music-toggle{width:40px; height:40px;}
    header{position:relative; display:grid; grid-template-columns:1fr; gap:6px; padding:8px 10px; min-height:0;}
    .agency-brand{gap:8px;}
    .detective-avatar{flex-basis:44px; width:44px; height:44px; border-radius:10px; box-shadow:3px 3px 0 var(--red-deep);}
    .agency-name{font-size:1.05rem; letter-spacing:1px; padding-right:18px;}
    .agency-name::before{font-size:.52rem; letter-spacing:2px;}
    .agency-name .stamp{font-size:.62rem; padding:2px 7px; letter-spacing:2px; margin-left:7px;}
    .hud{width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px;}
    .rank-box{grid-column:1 / -1; min-height:44px; padding:5px 8px;}
    .rank-icon{font-size:1.2rem;}
    .rank-name{font-size:.82rem;}
    .rank-bar{width:100%; height:17px;}
    .rank-bar,.rank-progress,.rank-progress-fill{font-size:.63rem;}
    .clue-box,.hud-btn{min-height:40px; padding:7px 9px; font-size:.78rem;}
    .cloud-dot{position:absolute; top:21px; right:11px; min-height:0; padding:0; border:0; background:transparent; color:oklch(0.86 0.02 250);}
    .cloud-dot #cloudTxt{display:none;}
    .cloud-dot .dot{width:10px; height:10px;}
    main{padding:12px 10px 20px;}
    .subject-tabs{gap:8px; margin-bottom:16px;}
    .subject-tab{height:100px; min-height:100px; padding:8px; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) auto; row-gap:3px;}
    .subject-tab .subject-ico{grid-row:auto; width:34px; height:34px; font-size:1rem; border-radius:10px;}
    .subject-tab .subject-name{font-size:.94rem;}
    .subject-tab .subject-note{display:none;}
    .subject-tab .subject-count{grid-column:1; font-size:.64rem; padding:2px 7px;}
    .map-title{font-size:1.5rem;}
    .map-sub{font-size:.87rem;}
    .unit-tabs{flex-wrap:nowrap; overflow-x:auto; padding:6px; scrollbar-width:thin;}
    .unit-tab{flex:0 0 auto; min-height:40px; padding:6px 10px;}
    .case-page.entering.next{transform:translateX(18%);}
    .case-page.is-leaving.next{transform:translateX(-18%);}
    .case-page.entering.prev{transform:translateX(-18%);}
    .case-page.is-leaving.prev{transform:translateX(18%);}
    .case-card{min-height:0; padding:18px; border-radius:16px;}
    .case-name{font-size:1.35rem;}
    .case-status{position:static; display:inline-block; transform:none; margin-bottom:8px; font-size:.76rem;}
    .chapter-page{padding-top:0;}
    .intro-board{padding:14px;}
    .intro-board h2{font-size:1.25rem;}
    .chapter-actions{grid-template-columns:1fr;}
    .level-grid{grid-template-columns:1fr;}
    .level-card{min-height:0;}
    .lucky-draw-modal{padding:16px 14px 18px; overflow-x:hidden;}
    .lucky-draw-title{font-size:1.25rem; letter-spacing:1px;}
    .lucky-draw-help{font-size:.78rem; line-height:1.45;}
    .lucky-card-stage{min-height:clamp(160px,34vw,246px); gap:clamp(3px,1.4vw,7px); margin-top:10px;}
    .lucky-card-slot{flex:1 1 0; width:auto; min-width:0; height:auto; aspect-ratio:132/184;}
    .lucky-card-front-name{font-size:.58rem; letter-spacing:0; padding:18px 3px 5px;}
    .lucky-card-front-layer{font-size:.48rem; letter-spacing:0;}
    .lucky-draw-result{min-height:86px;}
    .lucky-result-name{font-size:1.05rem;}
    .lucky-result-note{font-size:.78rem; margin:6px 0 10px;}
    .quiz-toolbar{display:grid; grid-template-columns:auto minmax(0,1fr);}
    .quiz-top{min-width:0; padding:7px 10px;}
    .quiz-title{font-size:1rem;}
    .combo-meter{grid-column:1 / -1; min-height:0; text-align:left;}
    .q-card{padding:16px;}
    .q-prompt,.q-prompt .en{font-size:1.25rem;}
    .opt{min-height:50px;}
    .feedback{padding:15px 16px;}
    .coll-head{gap:8px; align-items:flex-start;}
    .coll-head-left{gap:8px;}
    .coll-title{font-size:1.42rem;}
    .coll-progress{font-size:.82rem;}
    .coll-layout{gap:12px;}
    .coll-grid{gap:8px;}
    .skill-layout{gap:10px;}
    .skill-branches{grid-template-columns:repeat(2,minmax(0,1fr));}
    .skill-branch{min-height:48px; padding:7px 8px; gap:5px;}
    .skill-branch small{display:none;}
    .skill-tree{padding:9px;}
    .skill-node{min-height:0;}
    .detective-page{padding:14px 10px 18px; gap:12px;}
    .detective-close{flex-basis:42px; width:42px; height:42px; font-size:1.6rem;}
    .detective-preview{grid-template-columns:96px minmax(0,1fr); padding:10px; box-shadow:5px 5px 0 var(--red-deep);}
    .detective-selector{padding:12px; box-shadow:5px 5px 0 var(--red-deep);}
    .detective-selector-head{align-items:flex-start;}
    .detective-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
    .detective-page-actions{position:sticky; bottom:0; padding-top:8px; background:linear-gradient(transparent,var(--ink) 28%);}
    .detective-page-actions .btn{flex:1; min-width:0;}
  }

  @media(max-width:420px){
    .subject-tabs{gap:6px;}
    .subject-tab{padding:8px; height:100px; min-height:100px;}
    .subject-tab .subject-name{font-size:.88rem;}
    .subject-tab .subject-count{font-size:.6rem;}
    .hud{grid-template-columns:1fr 1fr;}
    .clue-box{grid-column:1;}
    .hud-btn{min-width:0;}
    .quiz-toolbar{grid-template-columns:1fr;}
    .quiz-toolbar .nav-card{justify-self:start;}
  }

  @media(max-width:360px){
    .map-sub{display:none;}
    .subject-tab{padding:7px; height:100px; min-height:100px;}
    .subject-tab .subject-ico{width:32px; height:32px; font-size:.95rem;}
    .subject-tab .subject-name{font-size:.78rem;}
    .subject-tab .subject-count{font-size:.55rem; padding:1px 5px;}
  }

  /* ---------- 打印样式（推理笔记导出 PDF） ---------- */
  #printArea{display:none;}
  @media print{
    header, main, .toast, .music-player, .overlay, .burst-badge, .rays-fixed, .sparkle, .draw-flash{display:none!important;}
    body{background:#fff;}
    #printArea{display:block; font-size:12pt; color:#000; padding:0 8mm;}
    #printArea h1{font-size:20pt; margin-bottom:4mm;}
    #printArea h2{font-size:15pt; margin:7mm 0 3mm; border-bottom:2px solid #000; padding-bottom:1.5mm;}
    #printArea .p-item{margin-bottom:3mm; line-height:1.7; page-break-inside:avoid;}
    #printArea .p-en{font-family:"Courier New",monospace; font-weight:700;}
    #printArea .p-rule{font-weight:900; font-size:13pt;}
    #printArea .p-pit{color:#000; font-weight:700;}
  }

  /* ---------- 学习进度（按页出题） ---------- */
  .page-scope{
    background:var(--paper); border:2px solid var(--ink); border-radius:var(--radius);
    padding:12px 14px; margin:10px 0 14px; box-shadow:var(--shadow-hard-sm);
  }
  .page-scope-head{font-weight:900; color:var(--ink); margin-bottom:8px;}
  .page-scope-row{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-weight:700; color:var(--ink-soft);
  }
  .page-scope-input{
    width:88px; min-height:44px; padding:8px 10px; font-size:1rem; font-weight:900;
    text-align:center; color:var(--ink); background:var(--paper-deep);
    border:2px solid var(--ink); border-radius:10px;
  }
  .page-scope-input:focus-visible{outline:3px solid var(--focus); outline-offset:2px;}
  .page-scope-note{margin-top:8px; font-size:.82rem; line-height:1.5; color:var(--ink-soft);}
  .page-scope .btn{min-height:40px; padding:8px 16px; font-size:.92rem;}

  /* ---------- 练功室：每日作业记录 ---------- */
  .hud-btn.dojo{background:var(--gold); color:var(--ink); order:-1;}
  .homework-overlay{
    display:block; padding:0; overflow-y:auto;
    background:oklch(0.20 0.03 250 / .94);
  }
  .homework-page{
    max-width:none; width:100%; margin:0; padding:0;
    min-height:100vh; max-height:100vh; overflow-y:auto;
    text-align:left; border-radius:0;
  }
  .homework-page-head{
    display:grid; grid-template-columns:minmax(250px,1fr) auto auto; align-items:center; gap:16px;
    padding:20px clamp(16px,3vw,30px); background:var(--ink); color:var(--paper);
    border-bottom:4px solid var(--gold);
  }
  .homework-page-title{min-width:0;}
  .homework-kicker{font-family:"Courier New",monospace; font-size:.7rem; letter-spacing:3px; font-weight:900; color:var(--gold);}
  .homework-page-head h2{font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.05; margin-top:4px; text-shadow:4px 4px 0 var(--red-deep);}
  .homework-page-head p{color:oklch(0.90 0.02 85); margin-top:8px;}
  .homework-head-stats{display:grid; grid-template-columns:repeat(4,minmax(112px,auto)); gap:8px;}
  .homework-head-stats>div{
    min-width:0; padding:7px 10px; border:2px solid var(--paper); border-radius:10px;
    background:oklch(0.25 0.03 250); box-shadow:3px 3px 0 var(--red-deep);
  }
  .homework-head-stats span{display:block; color:oklch(0.84 0.02 85); font-size:.68rem; font-weight:700; white-space:nowrap;}
  .homework-head-stats b{display:block; margin-top:2px; color:var(--gold); font-size:.94rem; white-space:nowrap;}
  .homework-card-stat{display:flex; flex-direction:column; gap:4px;}
  .homework-card-stat span{white-space:nowrap;}
  .homework-card-stat span b{display:inline; margin:0 2px;}
  .homework-card-stat button{
    align-self:flex-start; padding:3px 10px; border:2px solid var(--paper); border-radius:8px;
    background:var(--red); color:var(--paper); font-weight:900; font-size:.72rem;
    box-shadow:2px 2px 0 var(--red-deep); cursor:pointer; white-space:nowrap;
  }
  .homework-card-stat button:hover{transform:translateY(-1px);}
  .homework-card-stat button:active{transform:translateY(1px); box-shadow:1px 1px 0 var(--red-deep);}
  .game-code-card{max-width:420px; text-align:center; padding:26px 28px;}
  .game-code-kicker{font-family:"Courier New",monospace; font-size:.7rem; letter-spacing:3px; font-weight:900; color:var(--gold);}
  .game-code-card h3{margin-top:6px; font-size:1.3rem;}
  .game-code-num{
    margin:14px auto; padding:10px 18px; display:inline-block;
    font-family:"Courier New",monospace; font-size:2.6rem; font-weight:900; letter-spacing:.35em;
    color:var(--gold); border:3px dashed var(--paper); border-radius:12px; background:oklch(0.25 0.03 250);
    text-shadow:3px 3px 0 var(--red-deep);
  }
  .game-code-tip{font-size:.85rem; color:oklch(0.90 0.02 85); line-height:1.6;}
  .game-code-tip b{color:var(--gold);}
  .game-code-actions{margin-top:14px; display:flex; gap:10px; justify-content:center;}
  .game-code-actions button{
    padding:8px 18px; border:2px solid var(--paper); border-radius:10px; font-weight:900; cursor:pointer;
    background:var(--red); color:var(--paper); box-shadow:3px 3px 0 var(--red-deep);
  }
  .game-code-actions button.game-code-close{background:oklch(0.25 0.03 250);}
  .homework-close{
    flex:0 0 46px; width:46px; height:46px; border:3px solid var(--paper); border-radius:12px;
    background:var(--red); color:var(--paper); font-size:1.85rem; line-height:1; font-weight:900;
    box-shadow:4px 4px 0 var(--red-deep);
  }
  .homework-close:hover{transform:translateY(-2px);}
  .homework-close:active{transform:translateY(2px); box-shadow:2px 2px 0 var(--red-deep);}
  .homework-layout{
    display:grid; grid-template-columns:minmax(360px,460px) minmax(0,1fr);
    gap:18px; padding:20px; background:var(--paper); align-items:stretch;
  }
  .homework-calendar-panel,
  .homework-main-panel{
    min-width:0; background:var(--paper-deep); border:var(--ink-line); border-radius:18px;
    box-shadow:var(--shadow-hard-sm);
  }
  .homework-calendar-panel{padding:15px; align-self:stretch;}
  .homework-main-panel{display:flex; flex-direction:column;}
  .homework-calendar-head,
  .homework-section-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
  .homework-calendar-head h3,
  .homework-section-head h3{font-size:1.3rem; margin-top:3px;}
  .homework-calendar-actions{display:flex; align-items:center; gap:5px;}
  .homework-month-btn{
    width:36px; height:36px; border:2px solid var(--ink); border-radius:9px;
    background:var(--paper); color:var(--ink); font-size:1.3rem; font-weight:900; line-height:1;
    box-shadow:2px 2px 0 var(--ink);
  }
  .homework-month-btn:active,
  .homework-month-today:active,
  .homework-add-btn:active,
  .homework-status:active{transform:translateY(2px); box-shadow:none;}
  .homework-month-today{
    min-height:36px; padding:5px 9px; border:2px solid var(--ink); border-radius:9px;
    background:var(--gold); color:var(--ink); font-weight:900; box-shadow:2px 2px 0 var(--ink);
  }
  .homework-weekdays,
  .homework-days{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px;}
  .homework-weekdays{margin-top:14px; margin-bottom:5px; color:var(--ink-soft); font-size:.72rem; font-weight:900; text-align:center;}
  .homework-day{
    position:relative; min-width:0; min-height:64px; padding:6px 4px 4px; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    border:2px solid var(--ink); border-radius:10px; background:var(--paper); color:var(--ink);
    box-shadow:2px 2px 0 var(--ink); font-weight:900;
  }
  .homework-day:hover{transform:translateY(-2px);}
  .homework-day.today{border-color:var(--red);}
  .homework-day.selected{background:var(--ink); color:var(--paper); box-shadow:3px 3px 0 var(--red-deep);}
  .homework-day.has-items .homework-day-count{color:var(--red-deep);}
  .homework-day.selected.has-items .homework-day-count{color:var(--gold);}
  .homework-day.cleared{background:oklch(0.90 0.09 85);}
  .homework-day.cleared.selected{background:var(--gold);}
  .homework-day-num{font-size:.86rem;}
  .homework-day-count{font-size:.64rem; letter-spacing:0; color:var(--ink-soft); white-space:nowrap;}
  .homework-day.cleared .homework-day-count{opacity:.72;}
  .homework-clear-stamp{
    position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:0;
    background:oklch(0.25 0.03 250 / .09); pointer-events:none;
  }
  .homework-clear-stamp b{
    position:relative; z-index:1; color:var(--red-deep); font-family:"STKaiti","KaiTi","楷体",serif;
    font-size:1.15rem; letter-spacing:2px; transform:rotate(-8deg);
    text-shadow:2px 2px 0 var(--paper);
  }
  .homework-clear-stamp span{font-size:1.35rem; line-height:1; transform:rotate(8deg);}
  .homework-calendar-legend{display:flex; gap:12px; margin-top:12px; color:var(--ink-soft); font-size:.72rem; font-weight:700;}
  .legend-dot{display:inline-block; width:10px; height:10px; margin-right:3px; border:1px solid var(--ink); border-radius:50%;}
  .legend-dot.filled{background:var(--paper);}
  .legend-dot.cleared{background:var(--gold);}
  .homework-main-panel{padding:15px;}
  .homework-main-top{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding-bottom:12px; border-bottom:2px dashed oklch(0.72 0.05 80);
  }
  .homework-reward-rule{
    padding:7px 10px; border:2px solid var(--ink); border-radius:10px; background:var(--paper);
    color:var(--ink-soft); font-size:.78rem; font-weight:700; text-align:right;
  }
  .homework-reward-rule b{color:var(--red-deep);}
  .homework-add{
    margin-top:14px; padding:12px; background:oklch(0.95 0.05 85); border:2px solid var(--ink); border-radius:14px;
  }
  .homework-add-title{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px;}
  .homework-add-title b{font-size:.96rem;}
  .homework-add-title span{color:var(--ink-soft); font-size:.75rem;}
  .homework-add-grid{
    display:grid; grid-template-columns:120px 104px minmax(150px,1fr) 82px 82px minmax(130px,1fr) auto;
    gap:7px; align-items:end;
  }
  .homework-add label{display:grid; gap:4px; color:var(--ink-soft); font-size:.7rem; font-weight:900;}
  .homework-add input,
  .homework-add select,
  .homework-cell-input,
  .homework-week-note{
    width:100%; min-width:0; min-height:40px; padding:7px 8px; color:var(--ink);
    background:var(--paper); border:2px solid var(--ink); border-radius:8px; font:inherit; font-size:.82rem; font-weight:700;
  }
  .homework-add input:focus,
  .homework-add select:focus,
  .homework-cell-input:focus,
  .homework-week-note:focus{outline:3px solid var(--focus); outline-offset:2px;}
  .homework-add-btn{
    min-height:40px; padding:8px 12px; border:2px solid var(--ink); border-radius:9px;
    background:var(--gold); color:var(--ink); font-weight:900; white-space:nowrap;
    box-shadow:2px 2px 0 var(--ink);
  }
  .homework-table-scroll{width:100%; overflow-x:auto; scrollbar-width:thin;}
  .homework-daily-scroll{margin-top:14px; border:2px solid var(--ink); border-radius:12px; background:var(--paper);}
  .homework-daily-table,
  .homework-weekly-table{width:100%; border-collapse:collapse;}
  .homework-daily-table{min-width:820px;}
  .homework-weekly-table{min-width:880px;}
  .homework-daily-table th,
  .homework-daily-table td,
  .homework-weekly-table th,
  .homework-weekly-table td{
    padding:6px; border-bottom:1px solid oklch(0.82 0.04 85); text-align:left; vertical-align:middle;
  }
  .homework-daily-table th,
  .homework-weekly-table th{
    position:sticky; top:0; z-index:1; background:var(--ink); color:var(--paper);
    font-size:.72rem; white-space:nowrap;
  }
  .homework-daily-table th small{color:oklch(0.86 0.02 250); font-weight:700;}
  .homework-daily-table td{font-size:.82rem;}
  .homework-daily-table tbody tr:hover{background:oklch(0.95 0.04 85);}
  .homework-subject-select{min-width:88px;}
  .homework-task-input{min-width:160px;}
  .homework-number-input{width:70px; min-width:70px; text-align:center;}
  .homework-note-input{min-width:150px;}
  .homework-calculated{width:60px; color:var(--ink-soft); font-weight:900; text-align:center!important;}
  .homework-status{
    min-width:76px; min-height:38px; padding:6px 8px; border:2px solid var(--ink); border-radius:9px;
    background:var(--paper-deep); color:var(--ink); font-weight:900; box-shadow:2px 2px 0 var(--ink);
    white-space:nowrap;
  }
  .homework-status.done{background:var(--leaf); color:var(--paper);}
  .homework-empty-row td{padding:22px; text-align:center; color:var(--ink-soft); font-weight:700;}
  .homework-weekly-panel{margin-top:18px; padding-top:15px; border-top:2px dashed oklch(0.72 0.05 80);}
  .homework-weekly-help{max-width:260px; color:var(--ink-soft); font-size:.76rem; line-height:1.45; text-align:right;}
  .homework-weekly-panel .homework-table-scroll{margin-top:10px; border:2px solid var(--ink); border-radius:12px; background:var(--paper);}
  .homework-weekly-table{min-width:880px;}
  .homework-weekly-table th:first-child,
  .homework-weekly-table td:first-child{width:108px; white-space:nowrap;}
  .homework-weekly-table th:nth-child(n+2):nth-child(-n+6),
  .homework-weekly-table td:nth-child(n+2):nth-child(-n+6){text-align:center; width:72px;}
  .homework-rate-cell{font-weight:900; color:var(--red-deep);}
  .homework-week-note{min-width:190px; min-height:36px; padding:5px 7px; font-size:.78rem;}

  @media(max-width:1050px){
    .homework-layout{grid-template-columns:minmax(330px,400px) minmax(0,1fr);}
    .homework-page-head{grid-template-columns:minmax(180px,1fr) auto auto; gap:10px;}
    .homework-head-stats{grid-template-columns:repeat(4,minmax(92px,auto)); gap:5px;}
    .homework-head-stats>div{padding:6px 7px;}
    .homework-head-stats b{font-size:.82rem;}
    .homework-add-grid{grid-template-columns:110px 100px minmax(140px,1fr) 76px 76px minmax(120px,1fr);}
    .homework-add-btn{grid-column:1 / -1; justify-self:start;}
  }
  @media(max-width:900px){
    .homework-page{max-height:none;}
    .homework-page-head{grid-template-columns:1fr auto; align-items:start;}
    .homework-head-stats{grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%;}
    .homework-layout{grid-template-columns:1fr; padding:14px;}
    .homework-calendar-panel{position:static; align-self:auto;}
    .homework-main-panel{display:block;}
    .homework-add-grid{grid-template-columns:1fr 1fr;}
    .homework-add-task{grid-column:1 / -1;}
    .homework-add-btn{grid-column:1 / -1;}
    .homework-weekly-help{display:none;}
  }
  @media(max-width:560px){
    .homework-page-head{padding:15px 12px; gap:8px;}
    .homework-page-head p{font-size:.8rem;}
    .homework-close{flex-basis:40px; width:40px; height:40px; font-size:1.55rem;}
    .homework-layout{padding:10px; gap:12px;}
    .homework-calendar-panel,.homework-main-panel{padding:10px;}
    .homework-add-title{display:block;}
    .homework-add-title span{display:block; margin-top:3px;}
    .homework-reward-rule{max-width:140px; font-size:.68rem; padding:5px 7px;}
    .homework-days{gap:3px;}
    .homework-day{min-height:56px; padding:5px 2px 3px;}
    .homework-day-count{font-size:.56rem;}
    .homework-clear-stamp b{font-size:.9rem;}
    .homework-head-stats{gap:4px;}
    .homework-head-stats>div{padding:5px 6px;}
    .homework-head-stats span{font-size:.61rem;}
    .homework-head-stats b{font-size:.78rem;}
    .homework-main-top{display:block;}
    .homework-main-top .homework-reward-rule{margin-top:7px; text-align:left;}
  }

  /* ================= 记忆锦囊：科学记忆法提示（侦探档案便签风） ================= */
  .memory-tip{
    margin:0 0 14px;
    background:var(--paper-deep);
    border:2.5px dashed var(--ink);
    border-radius:var(--radius-sm);
    padding:10px 16px;
    box-shadow:var(--shadow-hard-sm);
    font-size:.92rem;
    color:var(--ink);
  }
  .memory-tip summary{
    cursor:pointer;
    font-weight:900;
    color:var(--red-deep);
    user-select:none;
    list-style-position:inside;
  }
  .memory-tip[open] summary{margin-bottom:4px;}
  .memory-tip-body{line-height:1.8; color:var(--ink-soft); font-weight:600;}
  .fb-mnemo{
    margin-top:10px;
    background:var(--paper-deep);
    border-left:5px solid var(--red);
    border-radius:8px;
    padding:8px 12px;
    color:var(--ink);
    font-size:.88rem;
    font-weight:600;
    line-height:1.7;
  }

  /* ================= 单元单词熟记进度 ================= */
  .word-mastery{ color:var(--red-deep); font-weight:800; }

  /* ================= 武林秘籍：拍照讲题（总分总） ================= */
  .hud-btn.wulin-entry{ background:var(--red); color:var(--paper); order:-2; }
  .hud-btn.wulin-entry:hover{ box-shadow:0 6px 0 var(--red-deep); }

  .wulin-overlay{ display:block; padding:0; overflow-y:auto; background:oklch(0.20 0.03 250 / .95); }
  .wulin-page{
    max-width:none; width:100%; margin:0; padding:0;
    min-height:100vh; max-height:100vh; overflow-y:auto;
    text-align:left; border-radius:0; background:var(--paper);
  }
  .wulin-head{
    display:grid; grid-template-columns:minmax(200px,1fr) auto auto; align-items:center; gap:14px;
    padding:16px clamp(14px,3vw,28px); background:var(--ink); color:var(--paper);
    border-bottom:4px solid var(--gold); position:sticky; top:0; z-index:6;
  }
  .wulin-head-title{ min-width:0; }
  .wulin-kicker{ font-family:"Courier New",monospace; font-size:.68rem; letter-spacing:3px; font-weight:900; color:var(--gold); }
  .wulin-head-title h2{ font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.05; margin-top:3px; text-shadow:3px 3px 0 var(--red-deep); }
  .wulin-head-title p{ color:oklch(0.88 0.02 85); margin-top:6px; font-size:.86rem; }
  .wulin-tabs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .wulin-tab{
    min-height:40px; padding:8px 14px; border:2px solid var(--paper); border-radius:12px;
    background:oklch(0.26 0.03 250); color:var(--paper); font-weight:800; font-size:.86rem;
    box-shadow:3px 3px 0 var(--red-deep); cursor:pointer;
  }
  .wulin-tab b{ color:var(--gold); }
  .wulin-tab:hover{ transform:translateY(-2px); }
  .wulin-tab.active{ background:var(--gold); color:var(--ink); border-color:var(--ink); }
  .wulin-tab.active b{ color:var(--red-deep); }
  .wulin-close{
    flex:0 0 44px; width:44px; height:44px; border:3px solid var(--paper); border-radius:12px;
    background:var(--red); color:var(--paper); font-size:1.75rem; line-height:1; font-weight:900;
    box-shadow:4px 4px 0 var(--red-deep); cursor:pointer;
  }
  .wulin-close:hover{ transform:translateY(-2px); }
  .wulin-close:active{ transform:translateY(2px); box-shadow:2px 2px 0 var(--red-deep); }

  .wulin-body{ padding:18px clamp(14px,3vw,28px) 60px; max-width:900px; margin:0 auto; }
  .wulin-case-title{
    display:inline-block; margin-bottom:14px; padding:8px 16px; background:var(--gold); color:var(--ink);
    border:var(--ink-line); border-radius:12px; box-shadow:var(--shadow-hard-sm); font-weight:900; font-size:1.05rem;
  }

  /* ---- 上传区 ---- */
  .wulin-upload{
    display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 18px;
    background:var(--paper-deep); border:3px dashed var(--ink); border-radius:18px; text-align:center;
  }
  .wulin-upload.has-image{ border-style:solid; }
  .wulin-drop{ color:var(--ink-soft); font-size:.9rem; }
  .wulin-preview{ position:relative; max-width:100%; }
  .wulin-preview img{ display:block; max-width:min(520px,90vw); max-height:46vh; border:var(--ink-line); border-radius:12px; box-shadow:var(--shadow-hard); background:#fff; }
  .wulin-repick{
    position:absolute; right:8px; bottom:8px; padding:7px 14px; border:2px solid var(--ink); border-radius:10px;
    background:var(--paper); color:var(--ink); font-weight:800; cursor:pointer; box-shadow:2px 2px 0 var(--ink);
  }
  .wulin-upload-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
  .wulin-primary{
    min-height:48px; padding:12px 24px; border:3px solid var(--ink); border-radius:14px;
    background:var(--red); color:var(--paper); font-weight:900; font-size:1.02rem;
    box-shadow:0 6px 0 var(--red-deep); cursor:pointer;
  }
  .wulin-primary:hover{ transform:translateY(-2px); }
  .wulin-primary:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--red-deep); }
  .wulin-primary:disabled{ opacity:.55; cursor:default; transform:none; }
  .wulin-ghost{
    min-height:44px; padding:10px 18px; border:2px solid var(--ink); border-radius:12px;
    background:var(--paper); color:var(--ink); font-weight:800; font-size:.92rem;
    box-shadow:3px 3px 0 var(--ink); cursor:pointer;
  }
  .wulin-ghost:hover{ transform:translateY(-2px); }
  .wulin-ghost:active{ transform:translateY(2px); box-shadow:1px 1px 0 var(--ink); }
  .wulin-ghost:disabled{ opacity:.45; cursor:default; transform:none; }
  .wulin-hint-label{ display:flex; flex-direction:column; gap:6px; font-size:.86rem; font-weight:800; color:var(--ink-soft); width:min(520px,90vw); text-align:left; }
  .wulin-hint-label input{ min-height:42px; padding:8px 12px; border:2px solid var(--ink); border-radius:10px; background:var(--paper); font-size:1rem; }
  .wulin-error{ padding:10px 14px; border:2px solid var(--red-deep); border-radius:12px; background:oklch(0.94 0.04 40); color:var(--red-deep); font-weight:700; font-size:.9rem; max-width:560px; }

  /* ---- 加载 ---- */
  .wulin-loading{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; text-align:center; }
  .wulin-spinner{ font-size:3.4rem; animation:wulin-bob 1.1s var(--ease-out) infinite; }
  @keyframes wulin-bob{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-12px) rotate(4deg); } }
  .wulin-loading h3{ font-size:1.3rem; }
  .wulin-loading p{ color:var(--ink-soft); }
  .wulin-loading .wulin-loading-hint{ font-size:.84rem; color:var(--red-deep); font-weight:700; }

  /* ---- 讲解卡片 ---- */
  .wulin-section{
    margin-bottom:18px; padding:16px; background:var(--paper);
    border:var(--ink-line); border-radius:18px; box-shadow:var(--shadow-hard-sm);
  }
  .wulin-total-first{ background:var(--paper-deep); }
  .wulin-total-last{ background:oklch(0.93 0.05 85); }
  .wulin-section-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
  .wulin-section-head h3{ font-size:1.24rem; line-height:1.15; }
  .wulin-section-head p{ color:var(--ink-soft); font-size:.88rem; margin-top:5px; }
  .wulin-badge{
    flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center;
    border:var(--ink-line); border-radius:12px; background:var(--gold); color:var(--ink);
    font-weight:900; font-size:1.2rem; box-shadow:2px 2px 0 var(--ink);
  }
  .wulin-badge-split{ background:var(--red); color:var(--paper); }
  .wulin-badge-total{ background:var(--ink); color:var(--gold); }

  .wulin-points{ list-style:none; display:grid; gap:10px; }
  .wulin-points li{ padding:12px 14px; background:var(--paper); border:2px solid var(--ink); border-radius:14px; box-shadow:2px 2px 0 var(--ink); }
  .wulin-point-name{ font-weight:900; font-size:1.02rem; }
  .wulin-point-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; font-size:.82rem; color:var(--ink-soft); }
  .wulin-point-meta span{ padding:2px 8px; background:var(--paper-deep); border-radius:8px; }
  .wulin-point-meta .wulin-page-tag{ background:var(--gold); color:var(--ink); font-weight:900; }
  .wulin-point-why{ margin-top:7px; font-size:.88rem; color:var(--ink-soft); }
  .wulin-scope{
    margin-top:9px; padding:7px 11px; border:2px solid var(--leaf); border-radius:10px;
    background:oklch(0.93 0.05 145); color:oklch(0.34 0.10 145); font-size:.86rem; font-weight:800;
  }
  .wulin-scope.is-out{ border-color:var(--flame); background:oklch(0.94 0.06 65); color:oklch(0.40 0.13 55); }

  .wulin-step{
    margin-bottom:14px; padding:14px; border:2px solid var(--ink); border-radius:14px;
    background:var(--paper-deep); box-shadow:2px 2px 0 var(--ink);
  }
  .wulin-step.is-current{ background:var(--paper); border-width:3px; box-shadow:4px 4px 0 var(--red-deep); animation:wulin-pop .32s var(--ease-out); }
  @keyframes wulin-pop{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  .wulin-step-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .wulin-step-no{ padding:3px 10px; background:var(--ink); color:var(--gold); border-radius:9px; font-size:.76rem; font-weight:900; }
  .wulin-step-head h4{ font-size:1.1rem; }
  .wulin-step-body{ margin-top:10px; line-height:1.75; font-size:1rem; }
  .wulin-bridge{ margin-top:10px; padding:8px 12px; border-left:5px solid var(--gold); background:oklch(0.90 0.04 85); border-radius:8px; font-size:.88rem; color:var(--ink-soft); }
  .wulin-purpose{ margin-top:10px; font-size:.9rem; color:var(--ink-soft); }
  .wulin-purpose b{ display:block; color:var(--red-deep); font-size:.78rem; letter-spacing:1px; margin-bottom:2px; }
  .wulin-key{ margin-top:10px; padding:8px 12px; background:var(--ink); color:var(--gold); border-radius:10px; font-weight:800; font-size:.94rem; }

  .wulin-foot-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px; }
  .wulin-foot-note{ text-align:center; margin-top:12px; font-size:.82rem; color:var(--ink-soft); }

  /* ---- 总结 ---- */
  .wulin-summary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
  .wulin-summary-cell{ padding:12px 14px; background:var(--paper); border:2px solid var(--ink); border-radius:14px; box-shadow:2px 2px 0 var(--ink); }
  .wulin-summary-cell span{ display:block; font-size:.76rem; font-weight:800; color:var(--ink-soft); letter-spacing:1px; }
  .wulin-summary-cell b{ display:block; margin-top:4px; font-size:1.06rem; }
  .wulin-summary-cell.wulin-entry-cell{ background:var(--gold); }
  .wulin-summary-cell.wulin-entry-cell b{ color:var(--red-deep); }
  .wulin-approach, .wulin-traps{ margin-top:12px; padding:12px 14px; background:var(--paper); border:2px solid var(--ink); border-radius:14px; line-height:1.7; }
  .wulin-approach b, .wulin-traps b{ display:block; color:var(--red-deep); font-size:.8rem; letter-spacing:1px; margin-bottom:6px; }
  .wulin-traps ul{ padding-left:20px; }
  .wulin-answer{ margin-top:14px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
  .wulin-answer-body{ padding:12px 14px; background:var(--ink); color:var(--paper); border-radius:12px; line-height:1.7; width:100%; }

  /* ---- 案卷 ---- */
  .wulin-case-list{ display:grid; gap:12px; }
  .wulin-case-row{ display:flex; align-items:stretch; gap:8px; }
  .wulin-case-open{
    flex:1; display:flex; align-items:center; gap:12px; padding:10px 14px; text-align:left;
    background:var(--paper); border:var(--ink-line); border-radius:14px; box-shadow:var(--shadow-hard-sm); cursor:pointer;
  }
  .wulin-case-open:hover{ transform:translateY(-2px); }
  .wulin-case-open img{ width:64px; height:64px; object-fit:cover; border:2px solid var(--ink); border-radius:10px; }
  .wulin-case-noimg{ width:64px; height:64px; display:grid; place-items:center; font-size:1.6rem; background:var(--paper-deep); border:2px solid var(--ink); border-radius:10px; }
  .wulin-case-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
  .wulin-case-info b{ font-size:1rem; }
  .wulin-case-info small{ color:var(--ink-soft); font-size:.78rem; }
  .wulin-case-go{ font-weight:900; color:var(--red-deep); white-space:nowrap; }
  .wulin-case-del{
    flex:0 0 44px; width:44px; border:2px solid var(--ink); border-radius:12px; background:var(--paper-deep);
    color:var(--red-deep); font-size:1.4rem; font-weight:900; cursor:pointer; box-shadow:2px 2px 0 var(--ink);
  }
  .wulin-case-del:hover{ background:var(--red); color:var(--paper); }
  .wulin-empty{ text-align:center; padding:50px 20px; }
  .wulin-empty-emoji{ font-size:3.2rem; }
  .wulin-empty h3{ margin-top:10px; font-size:1.3rem; }
  .wulin-empty p{ color:var(--ink-soft); margin:8px 0 18px; }

  .wulin-demo-bar{ margin-bottom:14px; padding:10px 14px; background:var(--gold); border:2px solid var(--ink); border-radius:12px; font-size:.88rem; font-weight:700; }

  /* ---- 秘籍试炼 ---- */
  .wulin-trial-btn{
    min-height:48px; padding:12px 24px; border:3px solid var(--ink); border-radius:14px;
    background:var(--gold); color:var(--ink); font-weight:900; font-size:1.02rem;
    box-shadow:0 6px 0 oklch(0.55 0.13 85); cursor:pointer;
  }
  .wulin-trial-btn:hover{ transform:translateY(-2px); }
  .wulin-trial-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 oklch(0.55 0.13 85); }
  .wulin-trial-stem{ font-size:1.06rem; line-height:1.8; padding:12px 14px; background:var(--paper-deep); border:2px solid var(--ink); border-radius:12px; }
  .wulin-trial-options{ display:grid; gap:10px; margin-top:12px; }
  .wulin-trial-opt{
    display:flex; align-items:center; gap:12px; padding:12px 14px; text-align:left; width:100%;
    background:var(--paper); border:2px solid var(--ink); border-radius:14px;
    box-shadow:2px 2px 0 var(--ink); cursor:pointer; font-size:1rem; line-height:1.6;
  }
  .wulin-trial-opt b{ flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; background:var(--paper-deep); border:2px solid var(--ink); border-radius:9px; font-weight:900; }
  .wulin-trial-opt span{ flex:1; min-width:0; }
  .wulin-trial-opt:hover{ transform:translateY(-2px); }
  .wulin-trial-opt.is-picked{ background:var(--gold); box-shadow:3px 3px 0 var(--ink); }
  .wulin-trial-opt.is-picked b{ background:var(--ink); color:var(--gold); }
  .wulin-trial-tip{ align-self:center; color:var(--ink-soft); font-size:.9rem; font-weight:700; }
  .wulin-trial-verdict{ margin-bottom:14px; padding:12px 16px; border:var(--ink-line); border-radius:14px; font-weight:900; font-size:1.05rem; box-shadow:var(--shadow-hard-sm); }
  .wulin-trial-verdict.is-pass{ background:var(--gold); color:var(--ink); }
  .wulin-trial-verdict.is-fail{ background:oklch(0.94 0.06 65); color:oklch(0.40 0.13 55); border-color:var(--flame); }
  .wulin-trial-result-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .wulin-trial-no{ padding:3px 10px; background:var(--ink); color:var(--gold); border-radius:9px; font-size:.78rem; font-weight:900; }
  .wulin-trial-mark{ font-weight:900; font-size:.92rem; }
  .wulin-trial-mark.is-ok{ color:oklch(0.45 0.14 145); }
  .wulin-trial-mark.is-no{ color:var(--red-deep); }
  .wulin-trial-answer-line{ display:flex; flex-direction:column; gap:6px; margin-top:10px; font-size:.92rem; color:var(--ink-soft); }
  .wulin-trial-answer-line .wulin-trial-right{ color:oklch(0.42 0.14 145); font-weight:800; }

  @media(max-width:900px){
    .wulin-head{ grid-template-columns:1fr auto; }
    .wulin-tabs{ grid-column:1 / -1; order:3; }
    .wulin-close{ order:2; }
  }
  @media(max-width:560px){
    .wulin-body{ padding:14px 12px 50px; }
    .wulin-tab{ font-size:.78rem; padding:7px 10px; }
    .wulin-primary{ width:100%; }
    .wulin-case-open img, .wulin-case-noimg{ width:52px; height:52px; }
    .wulin-case-info small{ font-size:.72rem; }
  }
  @media (prefers-reduced-motion: reduce){
    .wulin-spinner{ animation:none; }
    .wulin-step.is-current{ animation:none; }
  }