:root {
  --bg:#eef1f5;
  --surface:rgba(255,255,255,.96);
  --line:#d8dde5;
  --text:#121417;
  --muted:#667085;
  --accent:#2563eb;
  --shadow:0 10px 35px rgba(15,23,42,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#app{width:100%;height:100%;margin:0}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
button,input{font:inherit}
button{touch-action:none}
.hidden{display:none!important}
.landing{height:100%;display:grid;place-items:center;padding:24px}
.landing-card{width:min(720px,100%);background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow)}
.landing-card h1{margin:0 0 8px;font-size:30px}.landing-card p{color:var(--muted);margin:0 0 18px}
.url-row{display:flex;gap:10px}.url-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:14px;padding:14px 16px;outline:none;background:white}.url-row input:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.1)}
.primary{border:0;background:var(--accent);color:white;padding:0 20px;border-radius:14px;font-weight:700}.error{color:#c62828!important;margin-top:12px!important;min-height:1.3em}
.viewer{height:100%;display:grid;grid-template-rows:auto auto 1fr auto;min-height:0}
.topbar,.write-toolbar,.bottombar{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-color:var(--line);z-index:30}
.topbar{height:58px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;gap:10px}
.top-left,.top-right{display:flex;align-items:center;gap:8px}.top-right{justify-content:flex-end}.top-center{font-size:14px;font-weight:700;color:#525b69}.icon-btn,.tool-btn,.nav-btn{border:1px solid var(--line);background:white;color:var(--text);border-radius:12px;font-weight:700}.icon-btn{width:42px;height:42px;font-size:22px}.icon-btn.accent{color:var(--accent)}.zoom-label{font-size:13px;color:var(--muted);min-width:44px;text-align:center}
.write-toolbar{min-height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;overflow:visible}.tool-wrap{position:relative}.tool-btn{height:40px;padding:0 16px}.tool-btn.active{background:#eaf1ff;border-color:#a9c1ff;color:#174fb8}
.popover{position:absolute;top:48px;left:50%;transform:translateX(-50%);width:220px;background:white;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);z-index:60}.popover label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}.popover input[type=range]{width:100%;margin:0 0 12px}.color-row{display:flex;align-items:center;gap:8px}.color-dot{width:26px;height:26px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #cfd5df;background:var(--c)}.color-row input[type=color]{width:30px;height:30px;padding:0;border:0;background:transparent}
.stage{min-height:0;overflow:hidden;position:relative;display:grid;place-items:center;padding:12px}.page-viewport{width:100%;height:100%;overflow:hidden;position:relative;touch-action:none}.page-track{height:100%;width:300%;display:flex;transform:translateX(-33.333333%);will-change:transform}.page-slot{width:33.333333%;height:100%;display:grid;place-items:center;padding:8px}.page-shell{position:relative;background:white;box-shadow:0 8px 30px rgba(0,0,0,.12);transform-origin:center center;will-change:transform}.pdf-canvas,.draw-canvas,.laser-canvas{position:absolute;left:0;top:0;width:100%;height:100%}.pdf-canvas{position:relative;display:block}.draw-canvas,.laser-canvas{touch-action:none}.laser-canvas{pointer-events:none}
.bottombar{height:68px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 14px;gap:10px}.nav-btn{justify-self:start;height:44px;padding:0 18px;min-width:100px}.nav-btn:last-child{justify-self:end}.page-indicator{font-weight:800;background:#f5f7fa;border:1px solid var(--line);padding:9px 16px;border-radius:999px;min-width:88px;text-align:center}
body.pan-mode .draw-canvas{pointer-events:none}.page-shell.dragging{transition:none!important}
@media (max-width:650px){.landing-card{padding:20px;border-radius:20px}.url-row{flex-direction:column}.primary{height:48px}.topbar{grid-template-columns:auto 1fr auto}.top-center{text-align:center}.write-toolbar{justify-content:flex-start;overflow-x:auto}.tool-btn{padding:0 13px}.bottombar{height:64px}.nav-btn{min-width:88px;padding:0 12px}.stage{padding:6px}}