:root{--navy:#123a63;--blue:#1769aa;--cyan:#eaf4fc;--ink:#152536;--muted:#6c7c8d;--line:#dce5ed;--bg:#f5f8fb;--white:#fff;--red:#c83c4a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 980px)/2));position:sticky;top:0;z-index:5}.brand{display:flex;gap:11px;align-items:center}.brandmark{display:grid;place-items:center;background:var(--navy);color:#fff;border-radius:10px;font-weight:900;letter-spacing:-1px;width:45px;height:42px}.brand b{display:block;font-size:16px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:3px}main{max-width:980px;margin:auto;padding:22px 16px 40px}.hero{background:linear-gradient(130deg,#102f50,#1d659c);color:white;padding:28px 24px;border-radius:22px;box-shadow:0 12px 30px #14395b20}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;opacity:.8}.hero h1{font-size:clamp(27px,6vw,42px);line-height:1.13;margin:12px 0}.hero h1 span{color:#a9dcff}.hero p{font-size:14px;line-height:1.6;max-width:520px;color:#e0edf8}.primary,.secondary,.iconbtn,.tool,.tool-card{font:inherit;cursor:pointer;border:0;transition:transform .12s,background .12s}.primary{background:#1769aa;color:white;border-radius:12px;padding:13px 17px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px}.hero .primary{background:white;color:var(--navy);margin-top:8px}.upload{position:relative;overflow:hidden}.upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;display:block;cursor:pointer}.shape-picker{display:flex;align-items:center;gap:6px;flex:0 0 auto}.shape-picker select{max-width:115px;border:1px solid #dce5ed;border-radius:7px;padding:5px;background:#fff;color:#20394e;font:inherit;font-size:12px}.status{font-size:12px;margin-top:12px;color:#d8e9f7}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-head h2{font-size:19px;margin:0}.section-head p{font-size:12px;color:var(--muted);margin:4px 0 0}.workspace,.tools-section{margin-top:25px;background:white;border:1px solid var(--line);border-radius:18px;padding:17px}.hidden{display:none!important}.iconbtn{background:#f1f5f8;border-radius:10px;padding:9px 12px}.toolbar{display:flex;gap:7px;overflow-x:auto;padding:4px 0 12px}.tool{flex:0 0 auto;background:#f1f5f8;border:1px solid #e0e8ef;border-radius:10px;padding:11px 13px;font-size:14px;font-weight:600;color:#20394e}.tool.active{background:var(--cyan);border-color:#7cb5e4;color:var(--navy);font-weight:800}.pagebar{display:flex;align-items:center;justify-content:center;gap:8px;margin:5px 0 13px;flex-wrap:wrap}.pagebar span{font-size:14px;color:var(--muted);padding:0 6px}.secondary{background:#eef3f7;color:#20394e;border-radius:9px;padding:10px 13px;font-size:14px}.page-stage{position:relative;min-height:220px;background:#e9eef3;border-radius:12px;padding:12px;overflow:auto;display:flex;justify-content:flex-start;align-items:flex-start;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.page-wrap{position:relative;flex:0 0 auto;line-height:0;box-shadow:0 3px 14px #102a401f;background:#fff;max-width:none}.page-wrap canvas{display:block;max-width:none;height:auto}.page-wrap .overlay{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.empty-page{padding:65px 10px;color:#758697;font-size:13px;text-align:center}.export-row{display:flex;justify-content:center;margin-top:14px}.export-row button{width:100%;max-width:360px}.hint{font-size:11px;line-height:1.5;color:var(--muted);margin:12px 0 0}.tools-section{margin-top:24px}.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tool-card{text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 12px;display:flex;flex-direction:column;gap:5px;min-height:112px}.tool-card:active{transform:scale(.98);background:#f6fbff}.tile-icon{display:grid;place-items:center;width:35px;height:35px;background:var(--cyan);color:var(--navy);border-radius:10px;font-size:20px;margin-bottom:3px}.tool-card b{font-size:13px}.tool-card small{font-size:11px;color:var(--muted);line-height:1.4}.privacy{display:flex;gap:12px;margin-top:20px;padding:16px;border-radius:14px;background:#eaf6f0;color:#1b563c;font-size:12px}.privacy p{margin:4px 0 0;line-height:1.5;color:#426c59}.privacy>span{font-size:20px}footer{text-align:center;color:#82909c;font-size:11px;padding:20px}
.app-footer{display:flex;flex-direction:column;align-items:center;gap:7px}
.creator-credit{font-size:12px;color:#52677b;letter-spacing:.15px}
.creator-credit strong{color:#123a63;font-weight:800}
dialog{border:0;border-radius:18px;width:min(92vw,400px);padding:22px;box-shadow:0 20px 80px #00182b40}dialog::backdrop{background:#102b40a8}dialog h3{margin:0 0 16px}dialog label{display:block;font-size:12px;font-weight:700;margin:12px 0}dialog input,dialog select{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#102b40;color:white;border-radius:12px;padding:12px 16px;font-size:12px;max-width:90vw;z-index:10;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}button:disabled{opacity:.45;cursor:not-allowed}@media(min-width:700px){main{padding-top:30px}.hero{padding:38px}.tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.workspace{padding:22px}.page-stage{max-height:72vh}}
.shape-picker{display:flex;align-items:center;gap:6px;flex:0 0 auto;font-size:11px;color:#30465a;background:#f1f5f8;border:1px solid #e0e8ef;border-radius:10px;padding:5px 8px}.shape-picker select{max-width:130px;border:0;background:transparent;color:#20394e;font:inherit;outline:none}.tool:disabled{opacity:.4}.toolbar{align-items:center}.page-stage{touch-action:pan-x pan-y}

/* V0.4.0: crisp vector icons for editor toolbar and PDF tools */
.tool{display:inline-flex;align-items:center;gap:7px}
.tool-icon{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;flex:0 0 19px;line-height:0}
.tool-icon svg{display:block;width:19px;height:19px;overflow:visible;shape-rendering:geometricPrecision}
.tile-icon svg{display:block;width:22px;height:22px;overflow:visible;shape-rendering:geometricPrecision}
.tile-icon{line-height:0}

/* V0.4.3: accessible custom text color picker */
#textColor{display:block;width:100%;height:44px;padding:4px;margin-top:6px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}

/* V0.4.4: color picker for shapes and freehand drawing */
.color-picker{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
#drawColor{width:38px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}

/* V0.4.5: restored delete-selected-annotation control */
.delete-tool{color:#a52b36;border-color:#f0cbd0;background:#fff5f5}
.delete-tool:disabled{opacity:.4}
.delete-tool:not(:disabled):hover{background:#ffe7e9}


/* V0.4.9: wide, app-like PDF editing workspace on desktop and mobile */
body:has(#workspace:not(.hidden)) main{width:100%;max-width:none;margin:0;padding:8px 12px 14px}
body:has(#workspace:not(.hidden)) .topbar{height:58px;padding:0 18px}
body:has(#workspace:not(.hidden)) .hero,
body:has(#workspace:not(.hidden)) .tools-section,
body:has(#workspace:not(.hidden)) .privacy,
body:has(#workspace:not(.hidden)) footer{display:none}
body:has(#workspace:not(.hidden)) .workspace{margin:0;padding:10px 12px 12px;border-radius:12px;width:100%;min-width:0}
body:has(#workspace:not(.hidden)) .section-head{margin-bottom:8px}
body:has(#workspace:not(.hidden)) .section-head h2{font-size:16px}
body:has(#workspace:not(.hidden)) .section-head p{max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:has(#workspace:not(.hidden)) .toolbar{padding:3px 0 8px;max-width:100%;scrollbar-width:thin}
body:has(#workspace:not(.hidden)) .pagebar{margin:2px 0 8px}
body:has(#workspace:not(.hidden)) .page-stage{height:calc(100vh - 245px);min-height:320px;max-height:none;width:100%;padding:10px;justify-content:center;align-items:flex-start;overflow:auto}
body:has(#workspace:not(.hidden)) .export-row{margin-top:8px}
body:has(#workspace:not(.hidden)) .export-row button{max-width:420px}
body:has(#workspace:not(.hidden)) .hint{margin-top:7px}
@media(max-width:700px){
 body:has(#workspace:not(.hidden)) main{padding:5px}
 body:has(#workspace:not(.hidden)) .topbar{height:54px;padding:0 10px}
 body:has(#workspace:not(.hidden)) .workspace{padding:8px}
 body:has(#workspace:not(.hidden)) .page-stage{height:calc(100dvh - 255px);min-height:260px;padding:6px;justify-content:flex-start}
 body:has(#workspace:not(.hidden)) .tool{padding:9px 10px;font-size:12px}
 body:has(#workspace:not(.hidden)) .pagebar span{font-size:12px}
}

/* V0.5.0: editor occupies the viewport; only the PDF stage scrolls. */
@media (min-width: 701px) {
  html:has(body #workspace:not(.hidden)),
  body:has(#workspace:not(.hidden)) { height:100%; overflow:hidden; }
  body:has(#workspace:not(.hidden)) { height:100vh; display:flex; flex-direction:column; }
  body:has(#workspace:not(.hidden)) .topbar { flex:0 0 58px; }
  body:has(#workspace:not(.hidden)) main { height:calc(100vh - 58px); min-height:0; flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; }
  body:has(#workspace:not(.hidden)) .workspace { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  body:has(#workspace:not(.hidden)) .section-head,
  body:has(#workspace:not(.hidden)) .toolbar,
  body:has(#workspace:not(.hidden)) .pagebar,
  body:has(#workspace:not(.hidden)) .export-row,
  body:has(#workspace:not(.hidden)) .hint { flex-shrink:0; }
  body:has(#workspace:not(.hidden)) .page-stage { flex:1 1 auto; min-height:0; height:auto; max-height:none; overflow:auto; }
}
@media (max-width: 700px) {
  html:has(body #workspace:not(.hidden)),
  body:has(#workspace:not(.hidden)) { height:100%; overflow:hidden; }
  body:has(#workspace:not(.hidden)) { height:100dvh; display:flex; flex-direction:column; }
  body:has(#workspace:not(.hidden)) .topbar { flex:0 0 54px; }
  body:has(#workspace:not(.hidden)) main { height:calc(100dvh - 54px); min-height:0; flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; }
  body:has(#workspace:not(.hidden)) .workspace { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  body:has(#workspace:not(.hidden)) .section-head,
  body:has(#workspace:not(.hidden)) .toolbar,
  body:has(#workspace:not(.hidden)) .pagebar,
  body:has(#workspace:not(.hidden)) .export-row,
  body:has(#workspace:not(.hidden)) .hint { flex-shrink:0; }
  body:has(#workspace:not(.hidden)) .page-stage { flex:1 1 auto; min-height:0; height:auto; max-height:none; overflow:auto; }
}