:root{--ink:#171717;--muted:#6f6b67;--paper:#fffefa;--cream:#f4efe7;--wine:#7b2d26;--line:#ddd5ca;--shadow:0 16px 45px rgba(42,31,24,.13)}
[data-theme="dark"]{--ink:#f0efe9;--muted:#a39d95;--cream:#161412;--wine:#d4a256;--line:#3a3532;--shadow:0 16px 45px rgba(0,0,0,.45)}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Inter,"DM Sans",system-ui,sans-serif;background:var(--cream);color:var(--ink);overflow:hidden}
button,select,input{font:inherit}.wb-header{height:64px;padding:max(10px,env(safe-area-inset-top)) 18px 10px;display:flex;align-items:center;gap:12px;background:#201c1a;color:#fff}.wb-header h1{display:block;font-size:16px;line-height:1.2;margin:0}.wb-header span{display:block;color:#c8c0ba;font-size:11px;margin-top:2px}.wb-back,.icon-btn{display:grid;place-items:center;width:38px;height:38px;border:1px solid #4a423d;border-radius:10px;color:#fff;background:#302a27;text-decoration:none;cursor:pointer}.icon-btn{margin-left:auto}
.wb-app{height:calc(100% - 64px);display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;padding:12px}.toolbar,.board-shell{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.toolbar{padding:10px;overflow:auto}.tool-group{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tool{min-height:58px;border:1px solid transparent;border-radius:10px;background:#f7f4ef;color:#463f3a;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:19px;cursor:pointer}.tool span{font-size:10px}.tool:hover{border-color:#cabdb1}.tool.active{background:#f5e2df;border-color:#b7675e;color:#6d211b}.divider{height:1px;background:#e8e1da;margin:10px 0}.control-label{display:flex;justify-content:space-between;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:8px 2px 6px}.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.swatch,#colorInput{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #cfc7bf;background:var(--swatch);padding:0;cursor:pointer}.swatch.active{box-shadow:0 0 0 3px #a8635c}#colorInput{overflow:hidden}.range{width:100%;accent-color:var(--wine)}.select{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px;background:#fff;color:#413b36;font-size:11px}
.board-shell{min-width:0;display:flex;flex-direction:column;overflow:hidden}.top-actions{min-height:52px;padding:8px 12px;border-bottom:1px solid #ebe5df;display:flex;align-items:center;gap:7px;overflow-x:auto}.top-actions button,.action-file{height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 11px;color:#453e39;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}.top-actions button:hover,.action-file:hover{background:#f7f3ef}.top-actions button:disabled{opacity:.38;cursor:not-allowed}.top-actions .danger{color:#9e2e27}.action-spacer{flex:1}.action-file input{display:none}.canvas-wrap{position:relative;flex:1;min-height:0;margin:10px;border:1px solid #d8d0c8;border-radius:9px;overflow:hidden;background:#e9e4dd;touch-action:none}.stage{position:absolute;left:50%;top:50%;width:1200px;height:800px;background:var(--paper);transform-origin:center center;box-shadow:0 4px 24px rgba(30,20,10,.12)}#board{position:absolute;inset:0;width:1200px;height:800px;display:block;cursor:default;touch-action:none}.empty-hint{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;color:#666259;z-index:2}.empty-hint b{font-size:18px;font-weight:600}.empty-hint span{font-size:12px;margin-top:5px}.text-editor{position:absolute;min-width:140px;min-height:38px;padding:6px 8px;border:1.5px solid #2463d4;background:#fff;outline:none;border-radius:5px;z-index:5;white-space:pre-wrap}.statusbar{height:34px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ebe5df;color:#77706a;font-size:11px}.zoom{display:flex;align-items:center;gap:5px}.zoom button,.pagebar button{border:1px solid var(--line);background:#fff;border-radius:6px;min-width:27px;height:25px;color:#534b45;cursor:pointer}.zoom output{min-width:42px;text-align:center}.toast{position:fixed;left:50%;bottom:24px;translate:-50% 20px;background:#211d1b;color:#fff;padding:10px 16px;border-radius:10px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;translate:-50% 0}
.pagebar{height:40px;display:flex;align-items:center;gap:6px;padding:5px 10px;border-top:1px solid #ebe5df;background:#faf8f5}.page-tabs{display:flex;gap:5px;overflow-x:auto;flex:1}.page-tab{border:1px solid var(--line)!important;background:#fff!important;padding:0 10px!important;min-width:82px!important;font-size:11px}.page-tab.active{background:#f5e2df!important;border-color:#b7675e!important;color:#6d211b!important}.pagebar .add-page{min-width:88px}.paper-kanji .stage{background-color:var(--paper);background-image:linear-gradient(#ddd8d0 1px,transparent 1px),linear-gradient(90deg,#ddd8d0 1px,transparent 1px);background-size:80px 80px}.paper-lines .stage{background-color:var(--paper);background-image:linear-gradient(transparent 31px,#dcd7cf 32px);background-size:100% 32px}.paper-dots .stage{background-color:var(--paper);background-image:radial-gradient(#bcb5ad 1.2px,transparent 1.2px);background-size:24px 24px}.paper-genkou .stage{background-color:var(--paper);background-image:linear-gradient(#d9b4ad 1px,transparent 1px),linear-gradient(90deg,#d9b4ad 1px,transparent 1px);background-size:48px 48px}.paper-cornell .stage,.paper-kaigo .stage{background:var(--paper)}
@media(max-width:720px){.wb-app{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:7px;gap:7px}.toolbar{display:flex;align-items:center;gap:7px;padding:7px;overflow-x:auto;overflow-y:hidden}.tool-group{display:flex}.tool{min-width:58px;min-height:49px}.toolbar .divider,.toolbar .control-label{display:none}.colors{display:flex}.swatch,#colorInput{min-width:27px}.range{min-width:95px}.select{min-width:112px}.top-actions span{display:none}.board-shell{border-radius:12px}.canvas-wrap{margin:6px}.statusbar{height:30px}.wb-header{height:58px}.wb-app{height:calc(100% - 58px)}.pagebar{height:37px}.pagebar .add-page{font-size:0;min-width:32px}.pagebar .add-page::after{content:'＋';font-size:16px}}
@media(max-width:420px){.colors .swatch:nth-of-type(n+4){display:none}.top-actions{padding:6px;gap:4px}.top-actions button,.action-file{padding:0 9px}.wb-header{padding-inline:10px}}
[data-theme="dark"] body{background:var(--cream)}
[data-theme="dark"] .toolbar,[data-theme="dark"] .board-shell{background:#1c1a18;border-color:var(--line)}
[data-theme="dark"] .tool{background:#26221f;color:#d8d2c9}
[data-theme="dark"] .tool:hover{border-color:#4a423d}
[data-theme="dark"] .tool.active{background:#3a2420;border-color:#8a5a4e;color:#e8b8ab}
[data-theme="dark"] .select,[data-theme="dark"] .action-file,[data-theme="dark"] .top-actions button{background:#26221f;color:#d8d2c9;border-color:var(--line)}
[data-theme="dark"] .top-actions button:hover,[data-theme="dark"] .action-file:hover{background:#302b28}
[data-theme="dark"] .top-actions .danger{color:#e8877c}
[data-theme="dark"] .canvas-wrap{background:#0e0d0c;border-color:#3a3532}
/* Petunjuk papan kosong: #99918a cuma 2,45:1 di atas kanvas terang dan
   #6f6b67 cuma 3,68:1 di atas kanvas gelap — gagal di KEDUA arah. */
[data-theme="dark"] .empty-hint{color:#9A958F}
[data-theme="dark"] .text-editor{background:#26221f;color:#f0efe9;border-color:#5590e0}
[data-theme="dark"] .zoom button,[data-theme="dark"] .pagebar button{background:#26221f;color:#d8d2c9;border-color:var(--line)}
[data-theme="dark"] .pagebar{background:#1c1a18;border-color:var(--line)}
[data-theme="dark"] .page-tab{background:#26221f!important;color:#d8d2c9;border-color:var(--line)!important}
[data-theme="dark"] .page-tab.active{background:#3a2420!important;border-color:#8a5a4e!important;color:#e8b8ab!important}
[data-theme="dark"] .statusbar{color:#a39d95;border-color:var(--line)}
[data-theme="dark"] .wb-back,[data-theme="dark"] .icon-btn{background:#26221f;border-color:#4a423d}
[data-theme="dark"] .swatch,[data-theme="dark"] #colorInput{box-shadow:0 0 0 1px #4a423d}
[data-theme="dark"] .swatch.active{box-shadow:0 0 0 3px #b7675e}