:root{font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:#17253c;background:#edf2f8;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,select,textarea{font:inherit}button{cursor:pointer;border:0;font-weight:700;border-radius:13px;min-height:47px;padding:11px 18px}button:disabled{opacity:.48;cursor:not-allowed}button:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #51b9ff;outline-offset:2px}header{height:76px;background:#101c31;color:white;padding:0 max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand strong{display:block;font-size:1.12rem}.brand small{display:block;color:#b7c8df;font-size:.76rem;margin-top:1px}.mark{width:37px;height:37px;display:grid;place-items:center;background:#2765e9;border-radius:10px;font-size:1.45rem}.privacy{color:#b7e8cf;border:1px solid #417061;padding:7px 11px;border-radius:30px;font-size:.78rem}main{max-width:1180px;margin:30px auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:24px;align-items:start}.workspace{background:white;border:1px solid #dce4ee;border-radius:22px;box-shadow:0 12px 35px #243a5b0c;padding:28px}.stage-head,.ocr-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.step{font-size:.76rem;letter-spacing:.09em;color:#3975d3;font-weight:800}h1{font-size:1.65rem;margin:5px 0 22px;letter-spacing:-.03em}h2{font-size:1.12rem;margin:5px 0 10px}.quiet,.text-button{background:transparent;color:#336cca;padding:7px 9px}.empty{border:2px dashed #ccdaeb;background:#f8fbff;border-radius:18px;min-height:430px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}.paper-icon{width:74px;height:83px;border-radius:14px;background:white;box-shadow:0 8px 24px #426cab20;display:grid;place-items:center;color:#3c7be0;font-size:3.5rem;margin-bottom:15px}.empty p{color:#5f7087;margin:0 0 25px}.entry,.controls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.primary{background:#2769e7;color:#fff;box-shadow:0 4px 10px #2769e729}.primary:hover{background:#1456d4}.secondary{background:#eaf1fc;color:#2659a9}.secondary:hover{background:#dae8fa}.hint{font-size:.8rem!important;color:#718198!important;margin:18px 0 0!important}.tabs{display:flex;gap:8px;margin-bottom:14px}.tabs button{background:transparent;border-radius:0;color:#6c7b90;border-bottom:3px solid transparent}.tabs .active{color:#195dda;border-color:#2769e7}.canvas-wrap{background:#18243a;border-radius:14px;min-height:320px;display:grid;place-items:center;padding:14px;overflow:hidden}.canvas-wrap canvas{display:block;max-width:100%;max-height:62vh;object-fit:contain;touch-action:none}.instruction{color:#60718a;font-size:.88rem;margin:13px 0 16px}.controls{justify-content:flex-end}.filter-row{display:flex;gap:8px;margin:16px 0}.filter-row button{background:#eef3f9;color:#50617b;font-size:.85rem;min-height:40px;padding:8px 13px}.filter-row .selected{background:#dceaff;color:#1752ae}.text-button{display:block;margin:9px 0 0 auto}.ocr-panel{border-top:1px solid #e3eaf2;margin-top:30px;padding-top:24px}.ocr-head h2{margin-bottom:12px}.ocr-controls{display:flex;align-items:center;gap:12px;font-size:.87rem;color:#51627b}select{background:white;border:1px solid #cbd7e7;border-radius:9px;padding:8px}.status{font-size:.88rem;color:#58718d}textarea{width:100%;height:200px;resize:vertical;border:1px solid #cad8e8;border-radius:12px;padding:14px;line-height:1.6;color:#17253c}aside{display:grid;gap:16px}.side-card{background:#fff;border:1px solid #dce4ee;border-radius:17px;padding:21px;color:#586980;font-size:.87rem;line-height:1.75}.side-card ol{padding-left:22px;margin:13px 0 0}.side-card li{margin:10px 0}.privacy-card{background:#e6f3ee;border-color:#d1e7db}.privacy-card strong{color:#1d624a}.privacy-card p{margin:10px 0 0}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#152944;color:#fff;border-radius:11px;padding:11px 18px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10;max-width:90vw}#toast.show{opacity:1}@media(max-width:760px){header{height:66px;padding:0 17px}.privacy{font-size:.7rem}.brand small{font-size:.66rem}main{display:block;margin:14px auto;padding:0 12px}.workspace{padding:18px;border-radius:17px}aside{margin-top:14px;grid-template-columns:1fr 1fr}.side-card{padding:15px}.empty{min-height:400px;padding:20px}.canvas-wrap{min-height:220px;padding:8px}.controls button{flex:1}.entry button{min-width:130px}}@media(max-width:480px){aside{grid-template-columns:1fr}.entry{width:100%}.entry button{flex:1}.privacy{display:none}.tabs button{font-size:.86rem;padding:9px}.filter-row button{flex:1;padding:7px 5px;font-size:.77rem}}
[hidden]{display:none!important}

/* Keep the crop gesture inside the editor and make every corner readable under a finger. */
#editor{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#editor .canvas-wrap{position:relative;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#editor #canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#editor #loupe{position:absolute;width:144px;height:144px;max-width:none;max-height:none;border:3px solid #fff;border-radius:50%;box-shadow:0 5px 22px #091a36a8;pointer-events:none;z-index:3;background:#fff}

.view-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.view-controls button{min-height:42px;padding:8px 12px;background:#eaf1fc;color:#2659a9;font-size:.88rem}
.view-controls button:hover{background:#d7e6fb}
.view-spacer{flex:1}
#zoomLabel{min-width:48px;text-align:center;font-size:.84rem;font-weight:750;color:#435b78}
.canvas-wrap{display:block;overflow:hidden;min-height:0;padding:10px}
.canvas-viewport{width:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.canvas-viewport.zoomed{padding:56px}
.canvas-viewport::-webkit-scrollbar{display:none}
.canvas-viewport canvas{display:block;margin:0 auto;max-width:none;max-height:none;object-fit:fill}
#canvasViewport #canvas{touch-action:none}
@media(max-width:480px){.view-controls{gap:5px}.view-controls button{padding:7px 9px;font-size:.79rem}.view-spacer{flex-basis:100%;height:0}#zoomLabel{min-width:44px}}

.canvas-wrap{overflow:visible}

.main-nav{display:flex;gap:8px;border-bottom:1px solid #e2eaf4;margin:-5px 0 23px;padding-bottom:10px}
.main-nav button{background:transparent;color:#66758b;border-radius:10px;min-height:44px;padding:9px 14px}
.main-nav button.active{background:#e7f0ff;color:#1759ba}
.history-note{color:#61718a;font-size:.88rem;line-height:1.65;margin:-8px 0 20px}
.history-list{display:grid;gap:11px}
.history-item{display:grid;grid-template-columns:82px minmax(0,1fr);gap:14px;align-items:center;padding:11px;border:1px solid #dce5f0;border-radius:14px;background:#f9fbff}
.history-thumb{width:82px;height:105px;object-fit:contain;background:#e8edf5;border-radius:8px}
.history-details{min-width:0}.history-details strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.94rem}.history-details time{display:block;color:#64758d;font-size:.78rem;margin-top:3px}
.history-actions{display:flex;gap:7px;margin-top:12px}.history-actions button{min-height:39px;padding:7px 14px;font-size:.84rem}.history-actions .delete{background:transparent;color:#a43842}
.history-empty{border:2px dashed #cfdae9;border-radius:14px;text-align:center;color:#64758d;padding:40px 18px;line-height:1.6}
@media(max-width:480px){.history-item{grid-template-columns:68px minmax(0,1fr);gap:10px}.history-thumb{width:68px;height:92px}.history-actions button{padding:7px 11px}}

.ratio-picker{width:min(100%,520px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0 0 22px;text-align:left}.ratio-picker legend{width:100%;text-align:center;color:#435976;font-size:.82rem;font-weight:750;margin-bottom:8px}.ratio-picker label{position:relative;cursor:pointer}.ratio-picker input{position:absolute;opacity:0;pointer-events:none}.ratio-picker span{height:100%;display:flex;flex-direction:column;gap:2px;border:1px solid #cfdaea;border-radius:12px;background:#fff;padding:10px 12px;color:#50627b}.ratio-picker strong{font-size:.92rem;color:#263e60}.ratio-picker small{font-size:.75rem;line-height:1.35}.ratio-picker input:checked+span{border:2px solid #2769e7;background:#eaf2ff;padding:9px 11px;box-shadow:0 0 0 2px #2769e712}.ratio-picker input:focus-visible+span{outline:3px solid #51b9ff;outline-offset:2px}.ratio-picker-editor{width:100%;margin:0 0 14px;padding:12px;border:1px solid #dce5f0;border-radius:14px;background:#f8fbff}.ratio-picker-editor legend{text-align:left;padding:0 5px}.ratio-picker-editor span{padding:8px 11px}.ratio-picker-editor input:checked+span{padding:7px 10px}@media(max-width:480px){.ratio-picker{gap:6px}.ratio-picker span{padding:9px 8px}.ratio-picker input:checked+span{padding:8px 7px}.ratio-picker-editor{padding:9px}.ratio-picker-editor span{padding:8px 6px}.ratio-picker-editor input:checked+span{padding:7px 5px}.canvas-viewport.zoomed{padding:48px}}