@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap";:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #09090b 0%, #18181b 50%, #27272a 100%);--glass-bg: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .08);--glass-hover: rgba(255, 255, 255, .06);--accent: #7f5af0;--accent-hover: #6c47d9;--text-main: #f4f4f5;--text-muted: #a1a1aa}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased}.viewer-fullscreen{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center}.viewer-top-bar{position:fixed;top:1rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;border-radius:16px;z-index:100;animation:slideDown .4s ease-out}.dark .viewer-top-bar{background:#14141eb3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 20px #0000004d}.light .viewer-top-bar{background:#ffffffbf;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.08);box-shadow:0 4px 20px #00000014}.viewer-pill-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:10px;border:none;font-family:Space Grotesk,Inter,sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s ease}.dark .viewer-pill-btn{background:#7f5af026;color:#c4b5fd}.dark .viewer-pill-btn:hover{background:#7f5af040}.light .viewer-pill-btn{background:#7f5af014;color:#7f5af0}.light .viewer-pill-btn:hover{background:#7f5af026}.viewer-file-name{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dark .viewer-file-name{color:#ffffff80}.light .viewer-file-name{color:#1a1a2e80}.viewer-status{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:500}.dark .viewer-status{color:#fff6}.light .viewer-status{color:#1a1a2e73}.viewer-status-done{color:#10b981!important}.viewer-spinner{width:14px;height:14px;border:2px solid rgba(127,90,240,.2);border-top-color:#7f5af0;border-radius:50%;animation:spin .8s linear infinite}.viewer-canvas-area{flex:1;display:flex;align-items:center;justify-content:center;padding:5rem 2rem 6rem;min-height:100vh}.viewer-page-wrapper{position:relative;border-radius:8px;overflow:visible}.dark .viewer-page-wrapper{box-shadow:0 20px 60px #00000080,0 4px 15px #0000004d}.light .viewer-page-wrapper{box-shadow:0 20px 60px #0000001f,0 4px 15px #0000000f}.viewer-bottom-bar{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:1rem;padding:.5rem;border-radius:16px;z-index:100;animation:slideUp .4s ease-out}.dark .viewer-bottom-bar{background:#14141eb3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);box-shadow:0 -4px 20px #0000004d}.light .viewer-bottom-bar{background:#ffffffbf;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.08);box-shadow:0 -4px 20px #00000014}.viewer-page-nav{display:flex;align-items:center;gap:.3rem}.viewer-nav-btn{width:34px;height:34px;border-radius:10px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.dark .viewer-nav-btn{background:#ffffff0f;color:#e0e0ff}.dark .viewer-nav-btn:hover{background:#ffffff1f}.dark .viewer-nav-btn:disabled{opacity:.3;cursor:default}.light .viewer-nav-btn{background:#0000000a;color:#1a1a2e}.light .viewer-nav-btn:hover{background:#00000014}.light .viewer-nav-btn:disabled{opacity:.3;cursor:default}.viewer-page-label{font-size:.82rem;font-weight:600;min-width:50px;text-align:center}.dark .viewer-page-label{color:#fff9}.light .viewer-page-label{color:#1a1a2e99}.viewer-save-btn{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.5rem;background:linear-gradient(135deg,#7f5af0,#2ee8c6);color:#fff;border:none;border-radius:12px;font-family:Space Grotesk,Inter,sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #7f5af040}.viewer-save-btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px #7f5af059}.viewer-save-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}.canvas-input{position:absolute;background:transparent;border:1px solid transparent;border-radius:2px;color:transparent;padding:0 2px;font-family:inherit;z-index:10;transition:all .15s ease;cursor:text;line-height:1}.canvas-input:hover{background:#7f5af00f;border-color:#7f5af059}.canvas-input:focus{outline:none;background:#fffffff2;border-color:#7f5af0;box-shadow:0 0 0 2px #7f5af040;z-index:20}.canvas-input.is-visible{background:#fffffff2;z-index:15}.dark .canvas-input.is-visible,.dark .canvas-input:focus{background:#14141ef2}.floating-toolbar{position:absolute;border-radius:10px;padding:.4rem .5rem;display:flex;gap:.35rem;align-items:center;z-index:50;animation:slideDown .15s ease-out}.dark .floating-toolbar{background:#14141ee6;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 25px #00000080}.light .floating-toolbar{background:#fffffff2;border:1px solid rgba(0,0,0,.1);box-shadow:0 8px 25px #0000001f}.toolbar-btn{background:transparent;border:1px solid transparent;padding:.35rem;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.dark .toolbar-btn{color:#e0e0ff}.dark .toolbar-btn:hover{background:#ffffff1a}.light .toolbar-btn{color:#1a1a2e}.light .toolbar-btn:hover{background:#0000000f}.toolbar-btn.active{background:#7f5af026!important;color:#7f5af0!important;border-color:#7f5af04d}.toolbar-select,.toolbar-input{padding:.3rem;border-radius:6px;font-family:Inter,sans-serif;font-size:.78rem}.dark .toolbar-select,.dark .toolbar-input{background:#0000004d;border:1px solid rgba(255,255,255,.1);color:#fff}.light .toolbar-select,.light .toolbar-input{background:#0000000a;border:1px solid rgba(0,0,0,.1);color:#1a1a2e}.toolbar-select:focus,.toolbar-input:focus{outline:none;border-color:#7f5af0}.toolbar-color{width:22px;height:22px;padding:0;border:none;border-radius:6px;cursor:pointer;background:transparent}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.hidden-input{display:none}.loader{border:3px solid rgba(127,90,240,.15);border-top-color:#7f5af0;border-radius:50%;width:24px;height:24px;animation:spin .8s linear infinite;margin:0 auto}