:root{--navy:#12355b;--blue:#1769e0;--light:#f3f6fa;--line:#dce5ef;--text:#17324d;--muted:#66798d;--green:#138a48;--red:#c62828}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--light);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}.topbar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:8px 14px}.brand{font-weight:900;color:var(--navy);text-decoration:none}.title{font-weight:800;flex:1}.home{color:var(--blue);text-decoration:none;font-weight:700}.open-btn{border:0;background:var(--blue);color:#fff;border-radius:10px;padding:9px 14px;font-weight:800}.shell{max-width:1400px;margin:auto;padding:10px}.intro{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px;display:flex;gap:12px;align-items:center}.intro img{width:58px;height:58px;object-fit:contain;border-radius:12px}.intro h1{margin:0;font-size:1.28rem}.intro p{margin:3px 0 0;color:var(--muted);font-size:.9rem}.toolbar{display:flex;gap:7px;overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;margin-bottom:8px;scrollbar-width:thin}.tool{border:1px solid var(--line);background:#f8fbff;color:var(--navy);border-radius:10px;padding:8px 10px;white-space:nowrap;font-weight:750}.tool.active{background:var(--navy);color:#fff;border-color:var(--navy)}.tool:disabled{opacity:.45;cursor:not-allowed}.subbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;margin-bottom:8px}.subbar label{display:flex;align-items:center;gap:5px;font-size:.82rem;font-weight:700}.subbar input[type=number],.subbar select{width:86px;border:1px solid var(--line);border-radius:8px;padding:6px}.workspace{background:#d8e0e8;border-radius:14px;border:1px solid #c8d2dd;min-height:58vh;overflow:auto;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:16px;touch-action:pan-x pan-y}.canvas-wrap{position:relative;transform-origin:top center;box-shadow:0 8px 24px rgba(0,0,0,.15);background:#fff}.canvas-wrap canvas{display:block;max-width:none}.overlay{position:absolute;inset:0;pointer-events:auto;touch-action:none}.pagebar{display:flex;justify-content:center;align-items:center;gap:8px;margin:8px 0 74px}.pagebar button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 11px}.fixed-actions{position:fixed;z-index:40;left:50%;bottom:10px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(84px,1fr));gap:7px;width:min(720px,calc(100% - 18px));background:#fff;border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.18);border-radius:16px;padding:8px}.fixed-actions button{border:0;border-radius:11px;padding:11px 8px;font-weight:900}.undo,.redo{background:#edf3f9;color:var(--navy)}.save{background:var(--green);color:#fff}.share{background:#24a148;color:#fff}.fixed-actions button:disabled{opacity:.4}.status{font-size:.84rem;color:var(--muted);min-height:20px;margin:4px 4px 8px}.status.bad{color:var(--red)}.status.good{color:var(--green)}dialog{width:min(520px,94vw);border:0;border-radius:16px;padding:0;box-shadow:0 22px 70px rgba(0,0,0,.3)}dialog::backdrop{background:rgba(0,0,0,.42)}.dlg{padding:18px}.dlg h2{margin:0 0 12px}.field{display:grid;gap:5px;margin:10px 0;font-weight:700}.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:9px;padding:9px}.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.dlg-actions button{border:0;border-radius:9px;padding:9px 13px;font-weight:800}.cancel{background:#edf1f5}.primary{background:var(--blue);color:#fff}.hint{font-size:.8rem;color:var(--muted)}.word-box{position:absolute;border:1px dashed transparent;pointer-events:auto}.word-box:hover{border-color:#2d77ff;background:rgba(45,119,255,.07)}.word-box.hit{border-color:#2d77ff;background:rgba(45,119,255,.12)}
@media(max-width:680px){.shell{padding:6px}.intro{border-radius:12px}.intro p{display:none}.workspace{min-height:62vh;padding:8px}.fixed-actions{grid-template-columns:repeat(4,1fr)}.fixed-actions button{font-size:.78rem;padding:10px 4px}.topbar{padding:7px 9px}.title{font-size:.92rem}}