:root{--bg: #f5f6f8;--panel: #ffffff;--border: #d8dce2;--text: #1f2328;--muted: #6b7280;--accent: #1a73e8;--accent-dark: #1456b8;--danger: #d93025;--ok: #188038}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}#app{display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}#topbar{background:var(--panel);border-bottom:1px solid var(--border);padding:4px 8px;display:flex;align-items:center;gap:8px}#mobile-header{display:flex;align-items:center;gap:6px;width:100%}.mobile-title{font-weight:700;font-size:15px;margin-left:4px}.drawer-backdrop{position:fixed;inset:0;background:#0006;z-index:390;display:none}.drawer-backdrop.visible{display:block}#toolbar-drawer{position:fixed;top:0;bottom:0;left:0;width:min(72vw,240px);background:var(--panel);border-right:1px solid var(--border);box-shadow:2px 0 14px #00000040;z-index:400;padding:10px 8px 16px;overflow-y:auto;transform:translate(-105%);transition:transform .18s ease}#toolbar-drawer.open{transform:translate(0)}.toolbar-row{display:flex;flex-direction:column;align-items:stretch;gap:6px}.toolbar-group{display:flex;flex-direction:column;align-items:stretch;gap:4px;border-bottom:1px solid var(--border);padding:6px 2px}.toolbar-group:last-child{border-bottom:none}.toolbar-group.inline{flex-direction:row;justify-content:center;gap:6px}#style-bar{background:var(--panel);border-bottom:1px solid var(--border);padding:4px 10px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}#style-bar[hidden]{display:none}.style-size-row{display:flex;align-items:center;justify-content:center;gap:4px}.style-size-row[hidden]{display:none}.style-size-row .size-label{min-width:26px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text)}.color-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:4px 2px 2px}.color-swatch{width:20px;height:20px;border-radius:50%;border:1px solid var(--border);cursor:pointer;padding:0;flex:0 0 auto}.color-swatch.active{outline:2px solid var(--accent);outline-offset:2px}.color-swatch:disabled{opacity:.35;cursor:default}.btn{font:inherit;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:6px;padding:5px 10px;cursor:pointer;white-space:nowrap}.btn:hover:not(:disabled){background:#eef1f5}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover:not(:disabled){background:var(--accent-dark)}.tool-btn,.open-btn,.download-btn,.icon-btn{width:100%;min-width:0;text-align:left;padding:6px 10px;font-size:14px}.tool-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.download-btn{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}.download-btn:hover:not(:disabled){background:#146c2e}.link-btn{border-color:transparent;background:transparent;color:var(--accent)}#workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0}#main{min-height:0;min-width:0;display:flex;flex-direction:column}#canvas-host{position:relative;flex:1;overflow-y:auto;overflow-x:auto;background:linear-gradient(45deg,#e8eaed 25%,transparent 25%,transparent 75%,#e8eaed 75%),linear-gradient(45deg,#e8eaed 25%,transparent 25%,transparent 75%,#e8eaed 75%);background-size:20px 20px;background-position:0 0,10px 10px}#pages{position:relative;display:flex;flex-direction:column;align-items:center;align-items:safe center;gap:16px;padding:16px}.page-slot{position:relative;flex:none;box-shadow:0 1px 6px #00000040;background:#fff}.page-slot canvas{display:block}.page-canvas,.page-overlay{position:absolute;inset:0}.page-overlay{touch-action:pan-x pan-y}.text-tool-input{position:absolute;z-index:10;min-width:120px;max-width:420px;font:14px Helvetica,Arial,sans-serif;padding:2px 4px;border:1px solid var(--accent);border-radius:3px;resize:both;overflow:hidden;background:#fffffff2}#sidebar{position:fixed;top:0;right:0;bottom:0;width:min(82vw,340px);background:var(--panel);border-left:1px solid var(--border);box-shadow:-2px 0 14px #00000040;z-index:400;padding:8px;overflow-y:auto;transform:translate(105%);transition:transform .18s ease}#sidebar.open{transform:translate(0)}#page-list{display:flex;flex-direction:column;gap:8px}.page-item{position:relative;border:2px solid var(--border);border-radius:6px;padding:6px;cursor:pointer;background:#fff;display:flex;flex-direction:column;align-items:center;gap:4px}.page-item.active{border-color:var(--accent);background:#e8f0fe}.page-thumb{max-width:100%;height:auto;border:1px solid #e5e7eb;background:#fff}.page-label{font-size:12px;color:var(--muted)}.page-del{position:absolute;top:2px;right:2px;border:none;background:transparent;cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px;opacity:.55}.page-del:hover{opacity:1;background:#fee2e2}#status-bar{background:var(--panel);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 10px;font-size:13px;color:var(--muted);min-height:38px}#status-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-nav{display:flex;align-items:center;gap:6px}.page-input{width:52px;font:inherit;padding:3px 6px;border:1px solid var(--border);border-radius:4px;text-align:center}.zoom-value{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}#error-banner{background:#fdecea;color:var(--danger);border-top:1px solid #f5c6c2;padding:8px 12px;font-size:14px}#error-banner[hidden]{display:none}#save-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100}#save-overlay[hidden]{display:none}.save-box{background:#fff;padding:18px 28px;border-radius:10px;font-size:15px;box-shadow:0 4px 20px #0003}.drop-overlay{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;z-index:300}.drop-overlay.visible{display:flex}.drop-inner{text-align:center;padding:40px;border:3px dashed var(--border);border-radius:16px;background:#fff;max-width:520px}.drop-icon{font-size:56px}.drop-icon svg{width:96px;height:96px}.drop-inner h2{margin:8px 0 4px}.drop-inner p{color:var(--muted);margin:8px 0}.drop-hint{font-size:12px}