:root{--font-ui:"Google Sans", sans-serif;--font-content:"Inter", sans-serif;--color-bg:#f8fafc;--color-toolbar:#ffffffe6;--color-toolbar-border:#e2e8f0;--color-primary:#0f172a;--color-hover:#f1f5f9;--color-active:#e2e8f0;--shadow-sm:0 1px 2px #0000000d;--radius:4px}*{box-sizing:border-box}body{font-family:var(--font-ui);background:var(--color-bg);color:#111827;margin:0}.toolbar{background:var(--color-toolbar);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-toolbar-border);box-shadow:var(--shadow-sm);z-index:10;flex-wrap:wrap;gap:6px;padding:8px 12px;display:flex;position:sticky;top:0}.tool-button{border-radius:var(--radius);color:#111827;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;transition:background-color .2s,color .2s;display:inline-flex}.tool-button:hover{background:var(--color-hover);color:#0f172a}.tool-button.active{background:var(--color-active);color:#0f172a}select{border:1px solid var(--color-toolbar-border);border-radius:var(--radius);height:36px;font-family:var(--font-ui);cursor:pointer;background:#fff;padding:0 8px}#pages-container{flex-direction:column;align-items:center;gap:24px;min-height:calc(100vh - 52px);padding:24px 0;display:flex}.page{border:1px solid var(--color-toolbar-border);width:210mm;height:297mm;font-family:var(--font-content);background:#fff;padding:25.4mm;line-height:1.6;position:relative;overflow:hidden;box-shadow:0 2px 8px #00000014}.page:focus{border-color:#cbd5e1;outline:none;box-shadow:0 2px 8px #00000014,0 0 0 2px #e2e8f080}.page img{max-width:100%;height:auto;display:block}.tool-button svg,.tool-button span{pointer-events:none}#imageInput{display:none}#unsupported-screen{z-index:10000;text-align:center;background:#fff;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:none;position:fixed;top:0;left:0}.message-box{flex-direction:column;align-items:center;max-width:400px;display:flex}@media (width<=767px){#unsupported-screen{display:flex}header,#pages-container{display:none!important}}.sync-badge{transition:background-color .2s,color .2s}.sync-badge.offline{color:#64748b;background:#f1f5f9}.sync-badge.syncing{color:#d97706;background:#fef3c7}.sync-badge.syncing .material-symbols-outlined{animation:2s linear infinite spin}.sync-badge.online{color:#15803d;background:#dcfce7}.sync-badge.error{color:#b91c1c;background:#fee2e2}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dropdown-menu a:hover{background-color:var(--color-hover)}