*{box-sizing:border-box} [hidden]{display:none!important} :root{--ink:#19201d;--muted:#69736e;--line:#dfe5e1;--paper:#fff;--bg:#f3f6f3;--green:#176b50;--mint:#dff3e8;--warn:#b15a15;--danger:#a53c3c} body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Noto Sans TC",sans-serif}header{height:64px;background:#153d32;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 24px}header>div:first-child{display:flex;align-items:baseline;gap:9px}.brand-mark{font-size:30px;transform:rotate(-12deg)}header b{font-size:21px;letter-spacing:.12em}header small{opacity:.68}.status{border:1px solid #ffffff30;border-radius:999px;padding:7px 12px;font-size:12px}.status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#efb45d;margin-right:6px}.status.ready i{background:#64dc95}.status.error i{background:#ff7474}main{height:calc(100vh - 91px);display:grid;grid-template-columns:240px minmax(420px,1fr) 280px;gap:1px;background:var(--line)}aside,.workspace{background:var(--paper);min-height:0}.pages-panel,.settings-panel{padding:18px;display:flex;flex-direction:column;overflow:auto}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-title>div{display:flex;gap:8px;align-items:center}.panel-title span{color:var(--muted);font-size:12px}.panel-title button{border:0;background:none;color:var(--green)}.icon-btn{width:29px;height:29px;border-radius:8px;background:var(--mint);color:var(--green);font-size:21px;text-align:center;cursor:pointer}.drop-zone{border:1.5px dashed #9eb6aa;border-radius:12px;min-height:124px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:#f9fbf9;transition:.2s}.drop-zone.drag{background:var(--mint);border-color:var(--green);transform:scale(1.015)}.drop-zone span{font-size:23px;color:var(--green)}.drop-zone small{color:var(--muted);margin-top:5px}#pageList{padding:0;margin:14px 0;display:flex;flex-direction:column;gap:8px}#pageList li{list-style:none;border:1px solid var(--line);border-radius:10px;padding:7px;display:grid;grid-template-columns:46px 1fr auto;gap:8px;align-items:center;cursor:pointer}#pageList li.selected{border:2px solid var(--green);background:#f3fbf7}#pageList img{width:46px;height:56px;object-fit:cover;border-radius:5px}#pageList small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:95px}#pageList .actions{display:grid;grid-template-columns:1fr 1fr}#pageList button{border:0;background:none;padding:3px;color:#627068;cursor:pointer}#pageList .delete{color:var(--danger)}.privacy{margin-top:auto;color:var(--muted);font-size:11px}.workspace{position:relative;padding:20px;overflow:auto}#emptyState{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}#emptyState h1{color:var(--ink);font-size:24px;margin:16px 0 4px}.empty-art{width:96px;height:120px;border:2px solid #81a696;border-radius:8px;display:grid;place-items:center;font-size:48px;color:var(--green);transform:rotate(-3deg);box-shadow:8px 8px 0 var(--mint)}button{font:inherit;cursor:pointer}.primary,.secondary{border-radius:9px;padding:10px 15px;font-weight:650}.primary{border:0;background:var(--green);color:white}.secondary{border:1px solid var(--green);background:white;color:var(--green)}button:disabled{opacity:.45;cursor:not-allowed}.editor-toolbar{display:flex;justify-content:space-between;margin-bottom:12px}.editor-toolbar button{border:1px solid var(--line);background:white;border-radius:7px;padding:7px 10px}.badge{border-radius:999px;padding:6px 10px;font-size:12px}.badge.ok{background:var(--mint);color:var(--green)}.badge.warn{background:#fff0da;color:var(--warn);font-weight:650}.canvas-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:calc(100vh - 165px)}.canvas-card{background:#f5f7f5;border-radius:12px;padding:12px;display:flex;min-height:350px;flex-direction:column;position:relative}.caption{font-size:12px;font-weight:700;margin-bottom:8px}.canvas-card p{text-align:center;color:var(--muted);font-size:11px;margin:8px 0 0}.preview-wrap,#canvasWrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#29302d;border-radius:8px}#sourceCanvas,#previewCanvas{max-width:100%;max-height:100%;object-fit:contain}#overlayCanvas{position:absolute;touch-action:none;cursor:crosshair}.settings-panel label{display:flex;flex-direction:column;gap:5px;margin-bottom:13px;font-size:12px;color:var(--muted)}select,input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;background:white;color:var(--ink)}.range-head{display:flex;justify-content:space-between}.range-value{color:var(--green);font-variant-numeric:tabular-nums}input[type=range]{padding:0;accent-color:var(--green)}.check{flex-direction:row!important;align-items:center}.check input{width:auto}.settings-panel hr{border:0;border-top:1px solid var(--line);width:100%;margin:10px 0}.settings-panel h3{font-size:14px}.settings-panel>button{margin-top:8px;width:100%}#busy{position:absolute;inset:0;background:#ffffffd9;z-index:10;display:flex;align-items:center;justify-content:center;gap:12px}.spinner{width:24px;height:24px;border:3px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#errorBox{position:absolute;left:24px;right:24px;bottom:20px;background:#ffeded;color:var(--danger);padding:12px;border-radius:8px;z-index:20}footer{height:27px;background:#153d32;color:#ffffff99;text-align:center;font-size:11px;padding:5px}
@media(max-width:1000px){main{grid-template-columns:200px 1fr}.settings-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:auto}.settings-panel .panel-title,.settings-panel hr,.settings-panel h3{grid-column:1/-1}.canvas-grid{height:620px}}
@media(max-width:680px){header{padding:0 12px}header small{display:none}main{height:auto;display:flex;flex-direction:column}.pages-panel{max-height:none}.drop-zone{min-height:90px}.workspace{min-height:680px}.canvas-grid{grid-template-columns:1fr;height:auto}.canvas-card{height:420px}.settings-panel{display:flex}.status{font-size:0}.status i{margin:0}.privacy{margin-top:10px}footer{height:auto}}

.camera-btn{width:100%;margin:0 0 10px;padding:11px;border:1px solid var(--green);border-radius:9px;background:var(--green);color:#fff;font-weight:700;cursor:pointer}.file-toolbar{display:flex;align-items:center;gap:8px;padding:0 0 12px;border-bottom:1px solid var(--line)}.file-toolbar h2{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px}.file-toolbar button{flex:0 0 auto;border:0;border-radius:8px;padding:7px 10px;background:var(--mint);color:var(--green);cursor:pointer}.file-toolbar #renamePage{font-size:18px}.mobile-only{display:none}#galleryState{height:100%;padding:32px;place-content:center;text-align:center}#galleryState:not([hidden]){display:grid}.camera-dialog{width:min(720px,calc(100% - 20px));padding:0;border:0;border-radius:16px;background:#111;color:#fff;overflow:hidden}.camera-dialog::backdrop{background:#000c}.camera-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}.camera-head button{border:0;background:none;color:#fff;font-size:28px}.camera-dialog video{display:block;width:100%;max-height:72vh;background:#000}.camera-dialog p{text-align:center}.camera-actions{display:flex;align-items:center;justify-content:center;gap:28px;padding:0 16px 18px}.camera-actions .secondary{width:auto;margin:0;background:#fff;color:#222}.shutter{width:66px;height:66px;border:7px double #fff;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffffff80}.shutter:disabled{opacity:.45}

@media(max-width:680px){.mobile-only{display:inline-block}.pages-panel{order:1}.workspace{order:2;min-height:220px}.settings-panel{order:3}#dropZone{display:none}#pageList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}#pageList li{position:relative;display:block;padding:0;overflow:hidden;border-radius:12px;background:#f7faf8}#pageList li:only-child{grid-column:1/-1}#pageList li>img{width:100%;height:180px;display:block;object-fit:contain;background:#e8edea}#pageList li:only-child>img{height:240px}#pageList li>div:nth-child(2){padding:8px 10px}#pageList li .actions{display:flex;justify-content:space-around;padding:2px 8px 10px}#pageList li .actions button{min-width:40px;min-height:40px;font-size:18px}#pageList li.selected{box-shadow:0 0 0 3px var(--green)}.camera-btn{font-size:16px;padding:13px}.editor-toolbar{align-items:flex-start;gap:8px}.editor-toolbar>div{display:flex;flex-wrap:wrap}.file-toolbar{position:sticky;top:0;z-index:5;background:#fff}.canvas-card{height:390px}#galleryState{min-height:220px;padding:24px 18px}.settings-panel{border-top:1px solid var(--line)}}