:root{--primary:#667eea;--secondary:#764ba2;--bg:#2c3e50;--bg2:#34495e;--bgc:#34495e;--tx:#fff;--btn:#3cab48;--btnhv:#308838}[data-theme=dark]{--bg:#1a1a1a;--bg2:#2d2d2d;--bgc:#1a1a1a}[data-theme=light]{--bg:#ecf0f1;--bg2:#fff;--bgc:#e8e8e8;--tx:#2c3e50}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}body{background:var(--bg);font-family:Arial,sans-serif;overflow:hidden;transition:background .3s}.header{background:var(--bg2);color:var(--tx);display:flex;justify-content:space-between;align-items:center;padding:0 20px;min-height:var(--hdr-h);box-shadow:0 2px 5px rgba(0,0,0,.3);flex-wrap:wrap;gap:8px;position:fixed;top:0;left:0;right:0;z-index:1000;transition:transform .3s,background .3s}.header.hidden{transform:translateY(-100%)}.header-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.btn{background:var(--btn);color:#fff;padding:0 16px;height:36px;text-decoration:none;border:none;border-radius:5px;cursor:pointer;transition:background .25s;font-size:var(--icon);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.btn:hover:not(:disabled){background:var(--btnhv)}.btn:disabled{background:#95a5a6;cursor:not-allowed}.btn.saved{background:#27ae60}.btn-theme{background:rgba(60,171,72,.14);border:2px solid var(--btn)}.theme-picker{position:relative;display:inline-flex}.theme-menu{position:absolute;right:0;top:44px;min-width:142px;background:var(--bg2);border:1px solid rgba(255,255,255,.18);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:6px;display:none;z-index:1002}.theme-menu.show{display:block}.theme-menu button{width:100%;border:0;background:transparent;color:var(--tx);display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:6px;cursor:pointer;font-size:13px;text-align:left}.theme-menu button:hover,.theme-menu button.active{background:rgba(60,171,72,.16)}.theme-menu button.active{color:var(--btn);font-weight:700}.theme-menu i{width:16px;text-align:center}.controls{background:var(--bg2);color:var(--tx);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;padding:0 10px;min-height:var(--ctrl-h);box-shadow:0 2px 5px rgba(0,0,0,.2);position:fixed;left:0;right:0;z-index:999;transition:top .3s,background .3s}.controls.with-hdr{top:var(--hdr-h)}.controls.no-hdr{top:0}.controls button{background:var(--btn);color:#fff;border:none;height:32px;padding:0 16px;border-radius:5px;cursor:pointer;font-size:var(--icon);transition:background .25s;display:inline-flex;align-items:center;gap:5px}.controls button:hover:not(:disabled){background:var(--btnhv)}.controls button:disabled{background:#95a5a6;cursor:not-allowed}.controls .page-info{font-weight:bold;font-size:var(--icon);padding:0 6px}#canvas-container{height:100vh;overflow-y:auto;overflow-x:auto;background:var(--bgc);display:flex;flex-direction:column;align-items:center;padding:0 20px 20px;scroll-behavior:smooth;transition:background .3s,padding-top .3s}#canvas-container.with-hdr{padding-top:var(--pad-both)}#canvas-container.no-hdr{padding-top:var(--pad-ctrl)}.page-wrapper{margin-bottom:20px;box-shadow:0 0 20px rgba(0,0,0,.5);background:#fff;position:relative;pointer-events:none}[data-theme=dark] .page-wrapper{filter:brightness(.85) contrast(1.1)}.page-wrapper svg{display:block;max-width:100%;height:auto;pointer-events:none}.page-ph{background:#e0e0e0;display:flex;align-items:center;justify-content:center;color:#999;font-size:13px}[data-theme=dark] .page-ph{background:#333;color:#666}.page-label{position:absolute;top:8px;right:8px;background:rgba(35,189,48,.3);color:#fff;padding:4px 6px;border-radius:5px;font-size:10px;z-index:10}.msg{color:var(--tx);font-size:1.1em;padding:20px;text-align:center}#scroll-top{position:fixed;bottom:28px;right:28px;background:var(--btn);color:#fff;border:none;width:46px;height:46px;border-radius:50%;font-size:18px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.3);display:none;z-index:1000;opacity:.38;transition:background .25s}#scroll-top:hover{background:var(--btnhv)}#scroll-top.show{display:flex;align-items:center;justify-content:center}.nav-div{width:2px;height:28px;background:rgba(255,255,255,.28)}@media print{body{display:none!important}}@media(max-width:600px){.btn{padding:0 10px;font-size:12px}.controls button{padding:0 10px}}