:root{
  --status-bg:#170b4f;
  --ink:#48294e;
  --brand-slot:108px;
  --nav-slot:88px;
  --board-bleed:32px;
  --row-h:46px;
  --visible-rows:7;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--status-bg);overscroll-behavior:none}
body{font-family:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","SimSun",serif;-webkit-text-size-adjust:100%;color:var(--ink)}
button{font:inherit;-webkit-tap-highlight-color:transparent}
.app-shell{position:fixed;inset:0;height:100dvh;overflow:hidden;background:var(--status-bg);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);display:flex;flex-direction:column}
/* Exact bookshelf scene asset, but starts immediately after status bar. */
.scene-bg{position:absolute;z-index:0;left:0;right:0;top:env(safe-area-inset-top);bottom:0;background:#170b4f url('assets_v9/shell_scene.webp') center top/cover no-repeat;pointer-events:none}
.brand-zone{position:relative;isolation:isolate;z-index:5;flex:0 0 clamp(96px,25.5vw,108px);min-height:clamp(96px,25.5vw,108px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(44px,12.2vw,54px) 20px 0;gap:1px;text-align:center;overflow:visible}
.brand-vine{position:absolute;z-index:-1;top:-6px;left:0;right:0;height:clamp(105px,33.34vw,156px);background:url('assets_v9/brand_vine.webp') center top/100% auto no-repeat;pointer-events:none}
.brand-zone b{color:#f8e7b9;font:400 clamp(18px,calc(5.55vw - 3px),22px)/1.12 "STFangsong","华文仿宋","FangSong","Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;letter-spacing:2.2px;text-shadow:0 2px 7px #090822,0 0 10px #f6cb8a55;white-space:nowrap;font-synthesis:none;position:relative;z-index:1;transform:translateY(-20px)}
.brand-zone small{color:#ead0a7;font:400 clamp(7.4px,calc(2.2vw - .45px),9.15px)/1.35 Georgia,"Times New Roman",serif;letter-spacing:.95px;text-shadow:0 1px 5px #100923;white-space:nowrap;position:relative;z-index:1;transform:translateY(-20px)}
.workspace{position:relative;z-index:2;flex:1 1 auto;min-height:0;display:block;overflow:visible}
.dictation-board{position:absolute;left:50%;bottom:-2px;width:calc(100vw + var(--board-bleed));height:calc((100vw + var(--board-bleed))*1.5);transform:translateX(-50%);filter:drop-shadow(0 8px 16px rgba(9,5,35,.3))}
.board-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.board-title{position:absolute;top:calc(1.55% + 10px);left:19%;right:19%;height:9.35%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#41215e;text-shadow:0 1px 0 #fff0c8}
.board-title h1{margin:0;font:400 clamp(16px,calc(5vw - 4px),19px)/1.12 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;letter-spacing:.4px;white-space:nowrap;transform:translateY(4px)}
.board-title span{margin-top:2px;font:400 clamp(14px,3.65vw,17px)/1.2 "Snell Roundhand","Apple Chancery","Brush Script MT","Lobster Two","Z003",cursive;color:#68445e;letter-spacing:.2px;transform:translateY(4px)}
/* Wood zone: intentionally taller than V5 and centered between plaque and parchment tabs. */
.mode-actions{position:absolute;top:14.55%;left:8.6%;right:8.6%;height:7.35%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:stretch}
.mode-btn{position:relative;border:0;background:url('assets_v9/button_purple.webp') center/100% 100% no-repeat;color:#fff2cf;min-width:0;min-height:0;padding:0 7px;display:flex;align-items:center;justify-content:center;gap:4px;text-shadow:0 1px 2px #3a1f62;font:400 clamp(11.4px,2.95vw,13.2px)/1 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;letter-spacing:.1px;overflow:visible}
.mode-btn img{width:clamp(24px,6vw,27px);height:clamp(24px,6vw,27px);object-fit:contain;filter:drop-shadow(0 1px 2px rgba(35,14,67,.35))}.mode-btn:nth-child(2) img,.mode-btn:nth-child(3) img{width:clamp(27px,6.5vw,30px);height:clamp(25px,6.1vw,28px)}.mode-btn span{white-space:nowrap}
/* Tabs are now independent absolute geometry, mapped to the annotated parchment top band. */
.dict-tabs{position:absolute;top:24.03%;left:10.625%;right:10.625%;height:6.57%;display:grid;grid-template-columns:1fr 1fr;gap:4px;z-index:4;align-items:stretch;overflow:visible}
.tab{min-height:0;border:0;background:url('assets_v9/tab_unselected_v8.webp') center/100% 100% no-repeat;color:#5d3b53;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 7px 9px;font:650 clamp(11px,2.8vw,12.5px)/1 "Songti SC","STSong",serif;white-space:nowrap}.tab.active{background-image:url('assets_v9/tab_selected_v8.webp');color:#fff4d0;text-shadow:0 1px 2px #432058}.tab img{width:17px;height:17px;object-fit:contain}.tab.active img{filter:brightness(0) invert(1)}
/* Everything below tabs stays fixed; only the list itself scrolls. */
.paper-body{position:absolute;top:30.6%;left:6.25%;right:6.25%;bottom:4.7%;min-height:0;overflow:hidden}
.paper-content{position:absolute;inset:0;padding:.45% 4.2% .8%;overflow:hidden;display:flex;flex-direction:column;color:#4c2b50}
.paper-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(156,105,61,.26);padding-bottom:2px}.paper-heading h2{margin:0;font:700 clamp(15.5px,3.95vw,17.5px)/1.12 "Songti SC","STSong",serif;letter-spacing:.2px;color:#45265d}.paper-heading span{font:600 clamp(10px,2.45vw,11px)/1.1 "Songti SC","STSong",serif;white-space:nowrap}
.summary{display:flex;align-items:center;gap:clamp(12px,3.7vw,17px);padding:2px 1px 1px;font:650 clamp(10.5px,2.7vw,12px)/1.1 "Songti SC","STSong",serif}.summary span{display:flex;align-items:center;gap:4px;white-space:nowrap}.summary i{font-style:normal;width:17px;height:17px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font:800 10px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}.summary .good i{background:#438a78}.summary .bad i{background:#ca4b4a}.summary .pending i{background:#7d758b}.summary .good{color:#345d58}.summary .bad{color:#8f333c}.summary .pending{color:#5a5167}
.progress{height:5px;margin:1px 0 4px;background:rgba(122,91,91,.18);border-radius:999px;box-shadow:inset 0 1px 2px #8e6b6035}.progress i{display:block;width:40%;height:100%;border-radius:inherit;background:linear-gradient(180deg,#8f4ad3,#6534aa);box-shadow:0 0 4px #7c42bc}
.toolbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:2px}.toolbar button{height:28px;border:1px solid rgba(150,94,70,.34);border-radius:9px;background:linear-gradient(#fff5db,#f7e3c6);color:#4c3151;box-shadow:0 1px 3px rgba(119,73,48,.13);padding:0 2px;display:flex;align-items:center;justify-content:center;gap:2px;font:600 clamp(9px,2.3vw,10.2px)/1 "Songti SC","STSong",serif;white-space:nowrap}.toolbar img{width:15px;height:15px}
.word-list{flex:0 0 calc(var(--row-h)*var(--visible-rows));height:calc(var(--row-h)*var(--visible-rows));min-height:0;overflow:hidden}.word-list::-webkit-scrollbar{display:none}
.word-row{height:var(--row-h);min-height:var(--row-h);display:grid;grid-template-columns:25px minmax(0,1fr) 94px;align-items:center;border-bottom:1px solid rgba(143,102,70,.24);gap:4px}
.word-row>em{width:24px;height:24px;border:1px solid #dcba87;border-radius:47% 53% 50% 46%;display:grid;place-items:center;font-style:normal;font:700 10.8px/1 Georgia,serif;background:#fff0cf;box-shadow:0 1px 2px rgba(122,79,47,.1);color:#74534b}
.word-info{min-width:0;height:40px;align-self:center;display:grid;grid-template-rows:19px 21px;align-content:center;gap:0}
.dictation-answer{display:block;min-width:0;height:19px;color:#32205d;font:700 clamp(17px,4.45vw,19.5px)/19px Georgia,"Times New Roman",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}.dictation-answer[hidden]{display:block;visibility:hidden;opacity:0;pointer-events:none}
.word-meta-line{display:flex;align-items:center;min-width:0;gap:1px;height:21px;white-space:nowrap;overflow:hidden}
.meaning-toggle{appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:3px;flex:0 1 auto;min-width:0;max-width:100%;height:21px;margin:0;padding:0;border:0;background:transparent;color:#503948;text-align:left;white-space:nowrap;overflow:hidden}.meaning-toggle small{flex:none;color:#7d6b78;font:600 clamp(9.4px,2.25vw,10.2px)/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}.meaning-toggle span{min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 clamp(10px,2.5vw,11.2px)/1.1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;transition:font-size .12s ease,font-weight .12s ease}.word-row.answer-hidden .word-info{display:flex;align-items:center;height:40px}.word-row.answer-hidden .dictation-answer{position:absolute;visibility:hidden;opacity:0;pointer-events:none}.word-row.answer-hidden .word-meta-line{width:100%;height:26px;align-items:center}.word-row.answer-hidden .meaning-toggle{height:26px}.word-row.answer-hidden .meaning-toggle span{font-size:clamp(12px,3vw,13.4px);font-weight:700}.word-row.answer-hidden .meaning-toggle small{font-size:clamp(9.8px,2.35vw,10.6px)}.word-row.answer-hidden .speak-button,.word-row.answer-hidden .ipa-button{height:26px}
.speak-button{appearance:none;-webkit-appearance:none;flex:0 0 22px;width:22px;height:21px;display:grid;place-items:center;margin:0;padding:1px;border:0;border-radius:4px;background:transparent;color:#5c3b79}.speak-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}.speak-button:active{background:#e8dac3}
.ipa-button{appearance:none;-webkit-appearance:none;flex:0 1 auto;min-width:0;max-width:46%;height:21px;margin:0;padding:0;border:0;border-radius:4px;background:transparent;color:#5c3b79;font:700 clamp(9.8px,2.35vw,10.8px)/1.05 Georgia,"Times New Roman",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.ipa-button.ipa-hidden{flex:0 0 22px;width:22px;text-align:center;font-size:16px;color:#7b5a87}
.marks{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;justify-self:end}.marks button{width:28px;height:28px;border:1px solid #d7ad7d;border-radius:50%;background:linear-gradient(#fff4d8,#f4debd);color:#744b38;font:700 16px/1 Georgia,serif;box-shadow:0 1px 4px rgba(95,53,32,.15);display:grid;place-items:center;padding:0}.marks button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.marks button.chosen.good{background:linear-gradient(#eef6c7,#d9e7a1);color:#286e51;box-shadow:0 0 8px rgba(111,169,79,.42)}.marks button.chosen.bad{background:linear-gradient(#ffd8cd,#ffc1bb);color:#b62f2f;box-shadow:0 0 8px rgba(235,91,85,.42)}
.paper-note{text-align:center;margin:3px 0 0;font:500 clamp(8.7px,2.15vw,9.5px)/1.1 "Songti SC","STSong",serif;color:#70505b;white-space:nowrap}.today-panel{gap:8px}.today-card{margin-top:8px;padding:14px;border:1px solid rgba(152,110,75,.3);border-radius:10px;background:rgba(255,245,216,.34);font-size:12px;line-height:1.55}
/* Exact final V21 shelf navigation settings. */
.sl-nav{position:relative;isolation:isolate;z-index:5;display:flex;flex:0 0 88px;min-height:88px;width:100%;margin:0 0 calc(-1 * min(7px, env(safe-area-inset-bottom, 0px)));align-items:center;justify-content:space-around;gap:0;padding:2px 15px 0;border:0!important;border-radius:0;background:transparent;box-shadow:none}
.sl-nav::before{content:"";position:absolute;inset:-1px 4px -2px;z-index:-1;pointer-events:none;border:20px solid transparent;border-image-source:url('assets_v9/nav_frame.webp');border-image-slice:110 145 110 145 fill;border-image-width:24px 24px 22px 24px;border-image-repeat:stretch}
.sl-nav button{position:relative;flex:1 1 25%;min-width:0;max-width:none;min-height:75px;padding:0 2px;border:0;border-radius:0;box-shadow:none;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#f8deb4;font:400 12.5px/1.12 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;font-synthesis:none}
.sl-nav button img{flex:none;width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 2px 2px #08041a55)}
.sl-nav button span{position:relative;z-index:1}.sl-nav button[aria-current=page]{color:#fff4d4}.sl-nav button[aria-current=page]::before{content:"";position:absolute;z-index:-1;top:0;left:23%;right:23%;height:56px;pointer-events:none;background:radial-gradient(ellipse at center,#f4c77b66 0%,#b88ad344 42%,transparent 74%);filter:drop-shadow(0 0 7px #f3bf8470);opacity:.85}
[hidden]{display:none!important}
@media(max-height:780px){
  :root{--brand-slot:96px;--nav-slot:74px;--board-bleed:24px;--row-h:43px;--visible-rows:7}
  .brand-zone{flex-basis:96px;min-height:96px}
  .mode-actions{top:14.45%;left:8.2%;right:8.2%;height:7.35%}
  .dict-tabs{top:24.12%;left:10.625%;right:10.625%;height:6.48%;gap:4px}
  .paper-body{top:30.6%;bottom:4.7%}
  .toolbar button{height:28px}.summary{padding:4px 1px 2px}
  .sl-nav{flex-basis:74px;min-height:74px;padding:1px 12px 0;margin-bottom:calc(-1 * min(5px, env(safe-area-inset-bottom, 0px)))}
  .sl-nav::before{inset:-1px 3px -2px;border-image-width:21px 21px 19px 21px}
  .sl-nav button{min-height:66px;font-size:11.5px}
  .sl-nav button img{width:47px;height:47px}
  .sl-nav button[aria-current=page]::before{top:0;height:47px}
  .dictation-answer{font-size:clamp(17px,4.45vw,19.5px)}.meaning-toggle span{font-size:9.8px}.ipa-button{font-size:9.3px;max-width:43%}
}
@media(min-width:500px){.app-shell{left:50%;right:auto;transform:translateX(-50%);width:440px;box-shadow:0 0 60px #050316;background:#170b4f}.dictation-board{width:472px;height:708px}}

/* V10: merge status summary into the former heading row; keep original summary typography/colors. */
.paper-heading{align-items:center;min-height:24px;padding-bottom:2px}
.paper-heading>.summary{padding:0 1px;gap:clamp(12px,3.7vw,17px);min-width:0}
.paper-heading>span{margin-left:auto}

/* V12: left-side filter drawer for dictation builder */
.builder-handle{position:absolute;z-index:9;left:1.2%;top:35.1%;width:24px;height:60px;border:1px solid rgba(203,151,78,.72);border-right:0;border-radius:14px 0 0 14px;background:linear-gradient(180deg,#f7e4bf,#e7c88e);box-shadow:0 4px 10px rgba(52,22,19,.22);display:grid;place-items:center;padding:0;color:#6b4262;font:700 14px/1 Georgia,serif;transform:translateX(-8px);transition:transform .24s ease,opacity .2s ease}.builder-handle span{transform:translateX(-1px)}
.builder-drawer{position:absolute;z-index:8;left:2.1%;top:31.8%;bottom:7.2%;width:min(74%,325px);transform:translateX(calc(-100% - 10px));transition:transform .26s ease;filter:drop-shadow(0 10px 18px rgba(24,10,41,.28));overflow:visible}.drawer-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}.drawer-scroll{position:absolute;inset:0;padding:10.8% 11.2% 5.7% 12.4%;overflow:hidden}.drawer-inner{height:100%;display:flex;flex-direction:column;gap:7px;overflow:auto;scrollbar-width:none}.drawer-inner::-webkit-scrollbar{display:none}.drawer-heading{text-align:center;padding:1px 4px 0}.drawer-heading h3{margin:0;color:#6b4163;font:700 clamp(14px,3.45vw,16px)/1.18 "Songti SC","STSong",serif}.drawer-heading p{margin:2px 0 0;color:#8d7465;font:600 clamp(9.5px,2.15vw,10.5px)/1.2 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}.drawer-section{display:flex;flex-direction:column;gap:4px}.drawer-section h4{margin:0;padding-left:2px;color:#7c553f;font:700 clamp(10.2px,2.4vw,11px)/1.1 "Songti SC","STSong",serif}.drawer-field-grid{display:grid;gap:6px}.drawer-field-grid.two-col{grid-template-columns:1fr 1fr}.drawer-field{display:flex;flex-direction:column;gap:3px;min-width:0}.drawer-field.full{display:flex}.drawer-field>span{padding-left:2px;color:#765958;font:600 clamp(8.9px,2.02vw,9.8px)/1.15 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}.drawer-field select,.drawer-field input{width:100%;height:29px;border:1px solid rgba(165,116,79,.35);border-radius:8px;background:rgba(255,248,233,.92);box-shadow:inset 0 1px 1px rgba(255,255,255,.72),0 1px 3px rgba(134,89,58,.08);padding:0 10px;color:#5d4555;font:600 clamp(10px,2.3vw,10.8px)/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;outline:none}.drawer-field input::placeholder{color:#b1988c}.choice-chips{display:flex;flex-wrap:wrap;gap:5px}.choice-chip{height:28px;padding:0 11px;border:1px solid rgba(167,119,79,.34);border-radius:999px;background:linear-gradient(#fff7e7,#f3e3c6);box-shadow:0 1px 3px rgba(103,67,41,.08);color:#614457;font:700 clamp(9.8px,2.28vw,10.6px)/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;white-space:nowrap}.choice-chip.active{background:linear-gradient(180deg,#8c46d0,#6334aa);border-color:#6a33b2;color:#fff4d4;box-shadow:0 0 8px rgba(111,61,180,.24)}.drawer-actions{margin-top:auto;display:grid;grid-template-columns:1fr;gap:7px;padding-top:2px}.drawer-generate{height:34px;border:0;border-radius:14px;background:linear-gradient(180deg,#9050d8,#6838b3);color:#fff6da;box-shadow:0 4px 10px rgba(80,47,127,.28);font:700 clamp(11.2px,2.65vw,12px)/1 "Songti SC","STSong",serif;letter-spacing:.3px}.drawer-reset{height:28px;border:1px solid rgba(162,111,74,.32);border-radius:999px;background:rgba(255,247,231,.85);color:#795c55;font:600 clamp(9.2px,2.1vw,10px)/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}.drawer-mask{position:fixed;inset:0;z-index:7;border:0;background:rgba(15,6,37,.18);opacity:0;pointer-events:none;transition:opacity .22s ease}.drawer-open .builder-drawer{transform:translateX(0)}.drawer-open .builder-handle{transform:translateX(0)}.drawer-open .drawer-mask{opacity:1;pointer-events:auto}.drawer-open .builder-handle span{transform:none}
@media(max-width:380px){.builder-drawer{width:min(77%,318px)}.drawer-scroll{padding:11.5% 11.6% 5.7% 12.6%}.drawer-field select,.drawer-field input{height:28px;padding:0 8px}.choice-chip{padding:0 9px;height:27px}}

/* V11 prototype-only: double-tap word row -> word-card navigation hint */
.word-card-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:90;max-width:min(78vw,320px);padding:9px 16px;border:1px solid rgba(188,122,39,.62);border-radius:18px;background:rgba(255,244,220,.96);box-shadow:0 5px 18px rgba(38,18,73,.22);color:#3b2767;font:600 13px/1.35 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity .16s ease,transform .16s ease;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.word-card-toast.show{opacity:1;transform:translate(-50%,0)}

/* V13 — student-mode magic drawer refinement */
.builder-drawer{
  left:-5.15%;
  top:30.6%;
  bottom:6.7%;
  width:min(76%,338px);
  overflow:visible;
}
.drawer-art{
  object-fit:fill;
  object-position:center top;
}
.drawer-scroll{
  padding:11.2% 9.6% 5.5% 13.8%;
}
.drawer-inner{
  gap:8px;
  padding-right:1px;
}
.drawer-heading{
  position:relative;
  padding:0 2px 4px;
}
.drawer-heading::after{
  content:"";
  display:block;
  width:74%;
  height:1px;
  margin:5px auto 0;
  background:linear-gradient(90deg,transparent,rgba(164,112,62,.44),transparent);
}
.drawer-heading h3{
  color:#5b315f;
  font:400 clamp(15px,3.65vw,17px)/1.08 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;
  letter-spacing:.7px;
  text-shadow:0 1px 0 #fff0cc;
}
.drawer-heading p{
  margin-top:3px;
  color:#8c6579;
  font:400 clamp(10px,2.25vw,11px)/1.15 "Snell Roundhand","Apple Chancery","Brush Script MT",cursive;
  letter-spacing:.2px;
}
.drawer-section{
  gap:5px;
}
.drawer-section h4{
  display:flex;
  align-items:center;
  gap:5px;
  color:#70455f;
  font:400 clamp(10.8px,2.55vw,11.8px)/1.1 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;
  letter-spacing:.15px;
}
.drawer-section h4::before{
  content:"✦";
  color:#b27a36;
  font:700 8px/1 Georgia,serif;
}
.drawer-field-grid{
  gap:6px 7px;
}
.drawer-field>span{
  color:#7a5a65;
  font:400 clamp(9.4px,2.15vw,10.2px)/1.1 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;
  letter-spacing:.1px;
}
.drawer-field select{
  appearance:none;
  -webkit-appearance:none;
  height:31px;
  border:1px solid rgba(163,112,72,.34);
  border-radius:9px;
  background:
    linear-gradient(45deg,transparent 50%,#80616f 50%) calc(100% - 13px) 13px/4px 4px no-repeat,
    linear-gradient(135deg,#80616f 50%,transparent 50%) calc(100% - 9px) 13px/4px 4px no-repeat,
    linear-gradient(180deg,rgba(255,249,232,.96),rgba(246,229,199,.94));
  box-shadow:inset 0 1px 0 #fff9e9,0 1px 3px rgba(114,72,42,.08);
  padding:0 24px 0 9px;
  color:#604457;
  font:400 clamp(10.4px,2.4vw,11.2px)/1 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;
}
.choice-chips{
  gap:5px 6px;
}
.choice-chip{
  height:28px;
  padding:0 10px;
  border-color:rgba(168,119,71,.34);
  background:linear-gradient(180deg,#fff6df,#f2dfbc);
  color:#694759;
  font:400 clamp(10px,2.28vw,10.8px)/1 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 3px rgba(106,65,39,.08);
}
.choice-chip.active{
  background:linear-gradient(180deg,#8150c5,#63339d);
  border-color:#6b3a9f;
  color:#fff0ca;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 7px rgba(113,64,161,.28);
}
/* Compact search field follows the bookshelf word-list search treatment.
   The input itself exposes roughly six Chinese-character widths. */
.drawer-search-section{align-items:flex-start}
.magic-search{
  position:relative;
  width:calc(6em + 46px);
  height:40px;
  min-height:40px;
  display:flex;
  align-items:center;
  padding:0 13px 0 14px;
  border:0;
  border-radius:13px;
  background:url('assets_v13/search_panel.webp') center/100% 100% no-repeat;
  box-shadow:0 2px 5px rgba(106,66,44,.085);
  color:#856395;
}
.magic-search:focus-within{
  filter:drop-shadow(0 0 3px rgba(129,83,151,.24));
}
.magic-search-icon{
  flex:0 0 21px;
  margin-right:2px;
  color:#856395;
  font:700 20px/1 Georgia,serif;
}
.magic-search input{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 6em;
  width:6em;
  min-width:0;
  height:36px;
  min-height:36px;
  padding:0 0 0 2px;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#523c5a;
  box-shadow:none!important;
  font:400 16px/1 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;
}
.magic-search input::-webkit-search-cancel-button{display:none}
.magic-search input::placeholder{
  color:#9e867f;
  opacity:1;
  font-size:14px;
}
.drawer-actions{
  gap:5px;
  padding-top:3px;
}
.drawer-generate{
  height:38px;
  border:0;
  border-radius:0;
  background:url('assets_v9/button_purple.webp') center/100% 100% no-repeat;
  box-shadow:none;
  color:#fff0ca;
  text-shadow:0 1px 2px #3a1f62;
  font:400 clamp(11.5px,2.7vw,12.4px)/1 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;
  letter-spacing:.3px;
}
.drawer-reset{
  height:25px;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#8a6a67;
  text-decoration:underline;
  text-underline-offset:2px;
  font:400 clamp(9px,2.05vw,9.8px)/1 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;
}
.builder-handle{
  left:-.7%;
  top:36.2%;
  width:22px;
  height:54px;
  border:1px solid #b88645;
  border-right:0;
  border-radius:13px 0 0 13px;
  background:linear-gradient(180deg,#7436ad,#4f2382);
  color:#ffeec5;
  box-shadow:0 2px 7px rgba(40,17,57,.26),inset 0 0 0 1px rgba(255,218,145,.16);
  text-shadow:0 1px 2px #351552;
}
.builder-handle span{font-size:13px}
.drawer-mask{background:rgba(17,7,39,.12)}

@media(max-width:390px){
  .builder-drawer{left:-5.4%;width:min(78%,326px)}
  .drawer-scroll{padding:11.5% 9.4% 5.4% 13.9%}
  .magic-search{width:calc(6em + 44px);height:39px;min-height:39px;padding-left:12px;padding-right:11px}
  .drawer-field select{height:30px}
}

/* V14: drawer handle belongs to the app shell/workspace, never to the bleeding board. */
.workspace>.builder-handle{
  position:absolute;
  z-index:30;
  left:0;
  top:40.5%;
  width:25px;
  height:52px;
  margin:0;
  padding:0;
  transform:none;
  border:1px solid #c6954b;
  border-left:0;
  border-radius:0 14px 14px 0;
  background:linear-gradient(180deg,#7436ad 0%,#542587 100%);
  color:#fff0c9;
  box-shadow:0 3px 9px rgba(31,12,55,.34),inset 0 0 0 1px rgba(255,218,145,.16);
  display:grid;
  place-items:center;
  text-shadow:0 1px 2px #351552;
  pointer-events:auto;
  transition:left .24s ease,background .18s ease,box-shadow .18s ease;
}
.workspace>.builder-handle span{
  display:block;
  font:400 25px/1 Georgia,"Times New Roman",serif;
  transform:translate(-1px,-1px);
}
.workspace>.builder-handle:active{background:linear-gradient(180deg,#8244ba,#5b2a91)}
.drawer-open .workspace>.builder-handle{
  left:0;
  transform:none;
}
.drawer-open .workspace>.builder-handle span{transform:translate(-1px,-1px)}
@media(max-height:780px){.workspace>.builder-handle{top:39%;height:48px}}


/* V15: fixed 7-row pages for stable spatial positioning. */
.word-list{flex:0 0 calc(var(--row-h)*7);height:calc(var(--row-h)*7);overflow:hidden}
.word-pager{flex:0 0 28px;height:28px;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:3px;user-select:none}
.word-pager button{appearance:none;-webkit-appearance:none;width:26px;height:26px;border:1px solid rgba(177,126,76,.46);border-radius:50%;padding:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,247,224,.96),rgba(241,220,183,.94));box-shadow:0 1px 4px rgba(91,55,35,.14);color:#6b4366;font:700 20px/20px Georgia,serif}
.word-pager button:active:not(:disabled){transform:translateY(1px);background:linear-gradient(180deg,#f1dfc0,#e9c994)}
.word-pager button:disabled{opacity:.28;box-shadow:none}
.word-pager span{min-width:52px;height:23px;padding:0 10px;border:1px solid rgba(167,116,74,.28);border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(255,246,222,.62);color:#6b4b5f;font:700 10.6px/1 Georgia,"Times New Roman",serif;letter-spacing:.35px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
@media(max-height:780px){.word-pager{height:25px;flex-basis:25px;margin-top:2px}.word-pager button{width:23px;height:23px;font-size:18px}.word-pager span{height:21px;min-width:48px;font-size:10px}}

/* V16 — drawer rebuilt from the actual V21 word-list filter parameters.
   Order follows the parent dictation generator; no accordion/fold layers. */
.builder-drawer{
  position:fixed;
  z-index:24;
  left:0;
  top:calc(env(safe-area-inset-top, 0px) + 26px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 92px);
  width:min(60vw,270px);
  transform:translateX(calc(-100% - 12px));
  filter:drop-shadow(6px 8px 16px rgba(23,8,43,.28));
  overflow:visible;
}
.drawer-open .builder-drawer{transform:translateX(0)}
.drawer-art{
  position:absolute;
  top:0;bottom:0;left:-8%;
  width:108%;height:100%;
  object-fit:fill;object-position:center top;
  pointer-events:none;user-select:none;
}
.drawer-scroll{
  position:absolute;inset:0;
  padding:10.2% 8.5% 5.6% 7.5%;
  overflow:visible;
}
.drawer-inner{
  height:100%;min-height:0;
  display:flex;flex-direction:column;gap:7px;
  overflow:visible;padding:0;
}
.drawer-heading{padding:0 4px 3px;text-align:center}
.drawer-heading::after{width:78%;margin-top:5px}
.drawer-heading h3{
  margin:0;color:#56315e;
  font:400 clamp(15px,3.65vw,17px)/1.08 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;
  letter-spacing:.7px;text-shadow:0 1px 0 #fff0cc;
}
.drawer-heading p{
  margin:2px 0 0;color:#8b697e;
  font:400 clamp(9.6px,2.2vw,10.8px)/1.1 "Snell Roundhand","Apple Chancery","Brush Script MT",cursive;
}
.drawer-form-section{display:flex;flex-direction:column;gap:3px;margin:0;padding:0}
.drawer-form-section h4,.drawer-section-title h4{
  margin:0;color:#6f5769;
  font:600 10.5px/16px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  letter-spacing:0;
}
.drawer-form-section h4::before,.drawer-section-title h4::before{content:none}
.drawer-section-title{height:22px;display:flex;align-items:center;justify-content:space-between;gap:5px}
.drawer-section-title>span{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#987f8d;font:500 9.5px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.drawer-single-row,.drawer-grid-row{
  min-width:0;height:27px;min-height:27px;
  display:flex;align-items:center;gap:3px;
  color:#6f5769;font:550 10.5px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  white-space:nowrap;
}
.drawer-label,.drawer-grid-row>span{flex:0 0 auto;white-space:nowrap}
.drawer-single-row>.wl-picker,.drawer-grid-row>.wl-picker{flex:1 1 0;min-width:0}
.drawer-grid{display:grid;grid-template-columns:1fr;gap:0}
.drawer-fine-section .drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:9px;row-gap:0}
.drawer-fine-section .drawer-grid-row{
  height:46px;min-height:46px;
  flex-direction:column;align-items:stretch;justify-content:flex-start;gap:1px;
}
.drawer-fine-section .drawer-grid-row>span{height:17px;line-height:17px;overflow:hidden;text-overflow:ellipsis}
.wl-picker{position:relative;min-width:0}
.wl-picker-trigger{
  box-sizing:border-box;width:100%;min-width:0;
  height:26px;min-height:26px;
  display:flex;align-items:center;justify-content:space-between;gap:3px;
  padding:1px 2px 1px 3px;
  border:0;border-bottom:1px solid rgba(141,113,101,.35);
  border-radius:0;background:transparent;box-shadow:none;
  color:#5e4569;text-align:left;
  font:500 10.5px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.wl-picker-trigger>span{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wl-picker-trigger>i{flex:0 0 auto;margin:0;color:#9773a4;font:400 12px/1 Georgia,serif;font-style:normal}
.wl-picker-menu{
  position:absolute;z-index:80;left:0;top:calc(100% + 3px);
  min-width:100%;width:max-content;max-width:min(235px,78vw);
  margin:0;padding:4px;
  border:1px solid #c8a575;border-radius:10px;
  background:#fff0d4;box-shadow:0 5px 15px #2c183b38;
  overflow:visible;
}
.wl-picker-menu[hidden]{display:none!important}
.wl-picker-menu button{
  box-sizing:border-box;display:block;width:100%;height:34px;min-height:34px;
  padding:6px 10px;border:0;border-radius:6px;background:transparent;
  color:#563b60;text-align:left;white-space:nowrap;
  font:500 12px/20px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.wl-picker-menu button:active,.wl-picker-menu button.selected{background:#ead8ed}
/* Exact word-list search treatment; width follows the usable scroll width instead of a hard six-character box. */
.drawer-search{
  box-sizing:border-box;position:relative;
  width:100%;max-width:100%;height:42px;min-height:42px;
  margin:1px 0 4px;padding:0 12px 0 13px;
  display:flex;align-items:center;
  border:0;border-radius:13px;
  background:url('assets_v13/filter_panel_ornate_r21.webp') center/100% 100% no-repeat;
  box-shadow:0 2px 5px rgba(106,66,44,.085);
}
.drawer-search:focus-within{filter:drop-shadow(0 0 3px rgba(129,83,151,.23))}
.drawer-search-icon{flex:0 0 22px;color:#856395;font:700 20px/1 Georgia,serif}
.drawer-search input{
  flex:1 1 0;min-width:0;height:37px;min-height:37px;
  padding:0 0 0 4px;border:0;outline:0;background:transparent;box-shadow:none;
  color:#523c5a;font:400 16px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.drawer-search input::placeholder{color:#9e867f;opacity:1;font-size:14px}
.drawer-search input::-webkit-search-cancel-button{display:none}
.drawer-reset{
  align-self:flex-start;width:auto;height:27px;min-height:27px;margin:0;padding:3px 2px;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  color:#765278;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(112,79,124,.32);
  font:650 11px/1.25 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.drawer-count-section{padding-top:1px}
.drawer-generate{
  flex:0 0 38px;height:38px;min-height:38px;margin-top:1px;
  border:0;border-radius:0;background:url('assets_v9/button_purple.webp') center/100% 100% no-repeat;
  box-shadow:none;color:#fff0ca;text-shadow:0 1px 2px #3a1f62;
  font:400 clamp(11.5px,2.7vw,12.4px)/1 "STFangsong","华文仿宋","FangSong","Songti SC","STSong",serif;
  letter-spacing:.25px;
}
.drawer-mask{z-index:20;background:rgba(17,7,39,.11)}
.workspace>.builder-handle{z-index:31}
@media(max-width:390px){
  .builder-drawer{width:min(62vw,264px)}
  .drawer-scroll{padding:10.7% 8.3% 5.4% 7.2%}
  .drawer-fine-section .drawer-grid{column-gap:7px}
  .drawer-fine-section .drawer-grid-row{font-size:10px}
  .wl-picker-trigger{font-size:10px}
}
@media(max-height:780px){
  .builder-drawer{top:calc(env(safe-area-inset-top,0px) + 14px);bottom:calc(env(safe-area-inset-bottom,0px) + 77px)}
  .drawer-inner{gap:4px}
  .drawer-heading p{display:none}
  .drawer-search{height:40px;min-height:40px;margin-bottom:2px}
  .drawer-fine-section .drawer-grid-row{height:43px;min-height:43px}
  .drawer-generate{height:35px;min-height:35px;flex-basis:35px}
}
@media(min-width:500px){
  .builder-drawer{left:calc(50vw - 220px);width:270px}
}

/* V17 drawer scale/layout refinement */
.builder-drawer{
  left:-2.2% !important;
  top:calc(env(safe-area-inset-top,0px) + 2px) !important;
  bottom:calc(env(safe-area-inset-bottom,0px) + 83px) !important;
  width:min(88vw, 386px) !important;
  z-index:30 !important;
  filter:drop-shadow(0 14px 22px rgba(22,9,41,.28));
}
.drawer-art{object-fit:fill}
.drawer-scroll{
  padding:16.5% 11.5% 11.5% 12.7% !important;
}
.drawer-inner{
  gap:10px !important;
  overflow:auto;
  padding-right:1px;
}
.drawer-heading{
  text-align:center;
  padding:3px 10px 2px !important;
  margin-top:12px;
}
.drawer-heading::after{
  width:72% !important;
  margin-top:7px !important;
}
.drawer-heading h3{
  font-size:clamp(16px,4.2vw,21px) !important;
  line-height:1.08 !important;
}
.drawer-heading p{
  margin-top:4px !important;
  font-size:clamp(10px,2.45vw,12px) !important;
}
.drawer-form-section{
  padding-inline:2px;
}
.drawer-search-top-section{margin-top:2px;margin-bottom:1px}
.drawer-search{
  width:min(100%, 258px) !important;
  margin:0 0 0 1px !important;
}
.drawer-scope-section h4,
.drawer-count-section h4,
.drawer-section-title h4{
  margin-bottom:3px !important;
}
.drawer-grid{
  row-gap:10px !important;
  column-gap:12px !important;
}
.drawer-grid-row,
.drawer-single-row{
  gap:4px !important;
}
.drawer-grid-row>span,
.drawer-single-row>.drawer-label{
  padding-left:1px;
}
.drawer-search input{font-size:16px !important}
.drawer-fine-section{margin-top:1px}
.drawer-actions-row{
  display:grid;
  grid-template-columns:minmax(0, .78fr) minmax(0, 1.22fr);
  gap:10px;
  align-items:center;
  margin-top:3px;
  padding:4px 1px 0;
}
.drawer-reset,
.drawer-generate{
  width:100%;
  min-width:0;
}
.drawer-reset{
  height:34px !important;
  border-radius:18px !important;
  border:1.2px solid rgba(158,110,82,.44) !important;
  background:linear-gradient(180deg,#fff1d9,#f0dec0) !important;
  color:#7b5956 !important;
  box-shadow:0 3px 7px rgba(107,76,55,.12) !important;
  font:700 clamp(10.5px,2.45vw,11.8px)/1 "Songti SC","STSong",serif !important;
}
.drawer-generate{
  height:34px !important;
  border-radius:18px !important;
}
.drawer-mask{
  z-index:20 !important;
  background:rgba(16,7,39,.16) !important;
  backdrop-filter:saturate(.95) blur(.5px);
}
.drawer-open .paper-body,
.drawer-open .dict-tabs,
.drawer-open .mode-strip,
.drawer-open .paper-pager{
  filter:grayscale(.05) brightness(.93);
}
.workspace>.builder-handle{
  z-index:31 !important;
  top:39% !important;
  left:0 !important;
  width:26px !important;
  height:58px !important;
  transform:translateX(-1px);
}
.drawer-open .workspace>.builder-handle{transform:translateX(-1px)}
@media (max-width: 460px){
  .builder-drawer{
    width:min(86.5vw, 378px) !important;
    left:-2.5% !important;
    top:calc(env(safe-area-inset-top,0px) + 4px) !important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 84px) !important;
  }
  .drawer-scroll{padding:17.2% 11.8% 12.4% 13.1% !important}
  .drawer-search{width:min(100%, 246px) !important}
  .drawer-heading{margin-top:13px}
}

/* V18: drawer parchment is exactly as tall as the current dictation board. */
.builder-drawer{
  top:0 !important;
  bottom:auto !important;
  height:100% !important;
  /* Drawer art 941:1672, board art 1024:1536.
     At equal height the drawer width is 0.8442 of the board width. */
  width:84.42% !important;
  left:3.35% !important;
  z-index:30 !important;
  transform:translateX(calc(-100% - 18px));
  filter:drop-shadow(0 14px 23px rgba(22,9,41,.30));
}
.drawer-open .builder-drawer{transform:translateX(0)}
.drawer-art{width:100%;height:100%;object-fit:contain;object-position:left top}
.drawer-scroll{
  inset:0 !important;
  padding:15.8% 9.7% 11.3% 11.5% !important;
}
.drawer-inner{
  gap:10px !important;
  padding:0 2px 0 0;
}
.drawer-heading{
  margin-top:12px !important;
  padding:3px 8px 3px !important;
}
.drawer-heading h3{font-size:clamp(16px,4.15vw,20px) !important}
.drawer-heading p{font-size:clamp(10px,2.42vw,11.6px) !important}
.drawer-search-top-section{margin-top:1px !important}
.drawer-search{width:min(100%,270px) !important}
.drawer-form-section{padding-inline:3px !important}
.drawer-grid{row-gap:10px !important;column-gap:13px !important}
.drawer-actions-row{margin-top:4px !important}
.drawer-mask{
  z-index:20 !important;
  background:rgba(16,7,39,.22) !important;
  backdrop-filter:blur(1.1px) saturate(.86);
  -webkit-backdrop-filter:blur(1.1px) saturate(.86);
}
/* Keep handle visible at the left screen edge; it remains shell-level. */
.workspace>.builder-handle{top:37.5% !important}

@media(min-width:500px){
  .builder-drawer{
    width:398.4px !important;
    height:708px !important;
    left:16px !important;
    top:0 !important;
  }
}
@media(max-height:780px){
  .builder-drawer{top:0 !important;bottom:auto !important;height:100% !important;width:84.42% !important;left:3.35% !important}
  .drawer-scroll{padding:15.3% 9.5% 10.8% 11.3% !important}
  .drawer-heading{margin-top:8px !important}
}

/* V19 — size against the actual parchment BODY, not the transparent artwork box.
   Source art: 941×1672. Main paper body is approx x=123..816.
   At 440px viewport, a 114% board-width art box makes the actual paper body ~90vw.
   The negative left offset aligns the paper BODY to the screen edge and naturally clips the left roller end. */
.builder-drawer{
  top:0 !important;
  bottom:auto !important;
  height:100% !important;
  width:114% !important;
  left:-11.5% !important;
  z-index:30 !important;
  transform:translateX(calc(-100% - 24px));
  overflow:visible !important;
  filter:drop-shadow(0 15px 24px rgba(22,9,41,.31));
}
.drawer-open .builder-drawer{transform:translateX(0)}
/* Deliberately fill the fixed board-height box horizontally: latest requirement is
   equal height to the dictation container + ~90% visible parchment width. */
.drawer-art{
  inset:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:left top !important;
}
/* Safe area is measured from the visible paper body rather than the art canvas. */
.drawer-scroll{
  inset:0 !important;
  padding:13.8% 17.2% 9.8% 16.7% !important;
  overflow:visible !important;
}
.drawer-inner{
  height:100% !important;
  min-height:0 !important;
  gap:10px !important;
  padding:0 !important;
  overflow:visible !important;
}
.drawer-heading{
  margin:0 !important;
  padding:1px 8px 4px !important;
}
.drawer-heading::after{margin-top:7px !important;width:68% !important}
.drawer-heading h3{
  font-size:clamp(17px,4.25vw,20px) !important;
  line-height:1.08 !important;
  white-space:nowrap;
}
.drawer-heading p{
  display:block !important;
  margin-top:4px !important;
  font-size:clamp(10px,2.4vw,11.5px) !important;
}
.drawer-search-top-section{margin:1px 0 3px !important}
.drawer-search{
  width:100% !important;
  max-width:none !important;
  height:42px !important;
  min-height:42px !important;
  margin:0 !important;
}
.drawer-form-section{padding-inline:0 !important;min-width:0}
.drawer-scope-section h4,.drawer-count-section h4,.drawer-section-title h4{margin-bottom:3px !important}
.drawer-single-row,.drawer-grid-row{min-width:0 !important}
.drawer-single-row>.wl-picker,.drawer-grid-row>.wl-picker{min-width:0 !important}
.drawer-grid{min-width:0 !important;row-gap:9px !important;column-gap:12px !important}
.drawer-section-title{min-width:0;gap:8px}
.drawer-section-title>span{
  flex:0 1 auto;
  max-width:58%;
  font-size:9.2px !important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wl-picker-trigger{min-width:0 !important}
.wl-picker-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-fine-section .drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.drawer-fine-section .drawer-grid-row{min-width:0 !important;height:46px !important}
.drawer-count-section{padding-top:1px !important}
.drawer-actions-row{
  width:100%;
  min-width:0;
  display:grid !important;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr) !important;
  gap:10px !important;
  align-items:center;
  margin-top:3px !important;
  padding:3px 0 0 !important;
}
.drawer-reset,.drawer-generate{
  box-sizing:border-box;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:34px !important;
  overflow:hidden;
  white-space:nowrap;
}
.drawer-reset{padding:0 10px !important}
.drawer-generate{padding:0 9px !important;font-size:clamp(11px,2.6vw,12.2px) !important}
.drawer-mask{
  z-index:20 !important;
  background:rgba(13,6,35,.29) !important;
  backdrop-filter:blur(1.5px) saturate(.78) brightness(.9) !important;
  -webkit-backdrop-filter:blur(1.5px) saturate(.78) brightness(.9) !important;
}
.drawer-open .paper-body,
.drawer-open .dict-tabs,
.drawer-open .mode-actions,
.drawer-open .board-title{
  filter:brightness(.82) saturate(.72) !important;
}
.workspace>.builder-handle{
  left:0 !important;
  top:38% !important;
  z-index:31 !important;
}
@media(max-width:390px){
  .builder-drawer{width:116% !important;left:-12.6% !important}
  .drawer-scroll{padding:13.6% 17.6% 9.5% 17.0% !important}
  .drawer-grid{column-gap:10px !important}
}
@media(max-height:780px){
  .builder-drawer{top:0 !important;height:100% !important;width:114% !important;left:-11.5% !important}
  .drawer-scroll{padding:13.1% 17.2% 8.8% 16.7% !important}
  .drawer-inner{gap:7px !important}
  .drawer-heading p{display:block !important}
  .drawer-search{height:40px !important;min-height:40px !important}
}
@media(min-width:500px){
  .builder-drawer{width:538px !important;height:708px !important;left:-54px !important;top:0 !important}
}

/* V20 — new scroll artwork, original aspect ratio, one filter per row. */
.builder-drawer{
  top:0 !important;
  bottom:auto !important;
  height:100% !important;
  width:96.4% !important; /* 708px height => ~455px width, matching 1006:1564 artwork */
  left:-11.5% !important; /* keeps parchment body near the screen edge; roller end clips naturally */
  transform:translateX(calc(-100% - 24px));
  overflow:visible !important;
}
.drawer-open .builder-drawer{transform:translateX(0)}
.drawer-art{
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:left top !important;
}
.drawer-scroll{
  inset:0 !important;
  padding:13.2% 17.2% 11.8% 17.2% !important;
  overflow:visible !important;
}
.drawer-inner{
  height:100% !important;
  gap:8px !important;
  padding:0 !important;
  overflow:visible !important;
}
.drawer-heading{
  margin:0 0 2px !important;
  padding:0 0 2px !important;
  text-align:center;
}
.drawer-heading::after{display:none !important}
.drawer-heading h3{
  font-size:clamp(17px,4.2vw,20px) !important;
  line-height:1.08 !important;
}
.drawer-heading p{
  display:block !important;
  margin-top:3px !important;
  font-size:clamp(9.8px,2.35vw,11px) !important;
}
.drawer-search-top-section{
  margin:3px 0 2px !important;
  padding:0 !important;
  align-items:flex-start;
}
.drawer-search{
  width:258px !important;
  max-width:100% !important;
  height:42px !important;
  min-height:42px !important;
  margin:0 !important;
}
.drawer-filter-list{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  margin:0 !important;
  padding:0 !important;
}
.drawer-filter-row{
  display:grid !important;
  grid-template-columns:112px 174px !important;
  align-items:center !important;
  column-gap:8px !important;
  min-width:0 !important;
  min-height:29px !important;
  color:#6f5769;
  font:550 10.5px/1.15 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.drawer-filter-row>span{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.drawer-filter-row>.wl-picker{
  width:174px !important;
  max-width:174px !important;
  min-width:0 !important;
}
.drawer-filter-row .wl-picker-trigger{
  width:174px !important;
  max-width:174px !important;
}
.drawer-filter-row .wl-picker-menu{
  min-width:174px !important;
  width:174px !important;
  max-width:174px !important;
  box-sizing:border-box;
  overflow:hidden !important;
}
.drawer-filter-row .wl-picker-menu button{
  overflow:hidden;
  text-overflow:ellipsis;
}
.drawer-actions-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  width:100% !important;
  margin-top:5px !important;
  padding:0 !important;
}
.drawer-reset,.drawer-generate{
  width:100% !important;
  height:38px !important;
  min-width:0 !important;
  padding:0 8px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  font:600 clamp(11.5px,2.72vw,12.5px)/1 "Songti SC","STSong",serif !important;
  letter-spacing:.1px;
  white-space:nowrap;
}
.drawer-reset{
  background-image:url('assets_v20/button_secondary_cream.webp') !important;
  color:#654a63 !important;
}
.drawer-generate{
  background-image:url('assets_v20/button_primary_purple.webp') !important;
  color:#fff1d4 !important;
  text-shadow:0 1px 1px rgba(62,22,91,.25);
}
.drawer-section-title,.drawer-scope-section,.drawer-fine-section,.drawer-count-section{display:none !important}
.drawer-mask{
  background:rgba(13,6,35,.31) !important;
  backdrop-filter:blur(1.7px) saturate(.76) brightness(.88) !important;
  -webkit-backdrop-filter:blur(1.7px) saturate(.76) brightness(.88) !important;
}
@media(max-width:390px){
  .builder-drawer{width:96.4% !important;left:-11.5% !important}
  .drawer-scroll{padding:13.0% 17.3% 11.4% 17.3% !important}
  .drawer-filter-row{grid-template-columns:106px 164px !important;column-gap:7px !important}
  .drawer-filter-row>.wl-picker,.drawer-filter-row .wl-picker-trigger,.drawer-filter-row .wl-picker-menu{width:164px !important;max-width:164px !important;min-width:164px !important}
  .drawer-search{width:246px !important}
  .drawer-filter-list{gap:5px !important}
}
@media(min-width:500px){
  .builder-drawer{width:455.4px !important;height:708px !important;left:-54px !important;top:0 !important}
}

/* V21 — title back inside parchment safe zone, preserve full left parchment edge */
.builder-drawer{
  width:96.4% !important;
  height:100% !important;
  top:0 !important;
  left:-8.4% !important; /* show full parchment left edge; only roller end clips */
}
.drawer-scroll{
  inset:0 !important;
  /* safety area inside parchment */
  padding:15.5% 16.2% 11.7% 15.2% !important;
  overflow:visible !important;
}
.drawer-inner{
  gap:8px !important;
}
.drawer-heading{
  margin:0 0 6px !important;
  padding:0 !important;
  text-align:center !important;
}
.drawer-heading::after{
  content:'' !important;
  display:block !important;
  width:62% !important;
  height:1.5px !important;
  margin:8px auto 0 !important;
  background:linear-gradient(90deg, rgba(177,139,113,0), rgba(177,139,113,.82) 22%, rgba(177,139,113,.92) 50%, rgba(177,139,113,.82) 78%, rgba(177,139,113,0));
}
.drawer-heading h3{
  font-size:clamp(16.5px,4.0vw,19px) !important;
  line-height:1.06 !important;
}
.drawer-heading p{
  margin-top:4px !important;
  font-size:clamp(9.5px,2.25vw,10.8px) !important;
}
.drawer-search-top-section{
  margin:3px 0 5px !important;
}
.drawer-search{
  width:244px !important;
  max-width:100% !important;
  height:42px !important;
  min-height:42px !important;
}
.drawer-filter-list{
  gap:7px !important;
}
.drawer-filter-row{
  grid-template-columns:102px 160px !important;
  column-gap:8px !important;
  min-height:31px !important;
}
.drawer-filter-row>.wl-picker,
.drawer-filter-row .wl-picker-trigger,
.drawer-filter-row .wl-picker-menu{
  width:160px !important;
  max-width:160px !important;
  min-width:160px !important;
}
.drawer-actions-row{
  margin-top:8px !important;
  gap:10px !important;
}
.drawer-reset,.drawer-generate{
  height:38px !important;
}
@media (max-width:390px){
  .builder-drawer{left:-8.2% !important;width:96.2% !important;}
  .drawer-scroll{padding:15.7% 16.4% 11.8% 15.3% !important;}
  .drawer-search{width:236px !important;}
  .drawer-filter-row{grid-template-columns:97px 154px !important;}
  .drawer-filter-row>.wl-picker,
  .drawer-filter-row .wl-picker-trigger,
  .drawer-filter-row .wl-picker-menu{width:154px !important;max-width:154px !important;min-width:154px !important;}
}
@media(min-width:500px){
  .builder-drawer{width:455.4px !important;height:708px !important;left:-38px !important;top:0 !important;}
}

/* V22 — symmetric parchment safe area + center search + content group down 20px */
.drawer-scroll{
  /* Keep the V21 artwork position; make the writable safe area symmetrical. */
  padding-left:15.7% !important;
  padding-right:15.7% !important;
}
.drawer-inner{
  transform:translateY(20px) !important;
}
.drawer-search-top-section{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
}
.drawer-search{
  margin-left:auto !important;
  margin-right:auto !important;
}
@media(max-width:390px){
  .drawer-scroll{
    padding-left:15.8% !important;
    padding-right:15.8% !important;
  }
}