:root{--bg-primary:#000;--bg-secondary:#0a0a0a;--bg-card:#0d0d0d;--bg-card-hover:#141414;--bg-glass:#0a0a0ad9;--bg-glass-elevated:#0f0f0ff2;--border-glass:#222;--border-glass-hover:#383838;--border-subtle:#1c1c1c;--accent-primary:#fff;--accent-blue:#0070f3;--accent-cyan:#0096c7;--accent-rose:#ef4444;--accent-emerald:#10b981;--accent-amber:#f59e0b;--text-main:#ededed;--text-muted:#888;--text-dim:#555;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--shadow-sm:0 2px 8px #00000080;--shadow-md:0 8px 24px #000000b3;--shadow-lg:0 16px 40px #000000d9;--shadow-vercel:0 20px 50px #000000e6, 0 0 0 1px #ffffff0f;--transition-fast:.15s cubic-bezier(.16, 1, .3, 1);--transition-smooth:.28s cubic-bezier(.16, 1, .3, 1);--font-main:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-heading:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", Menlo, Monaco, Consolas, monospace}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-main);color:var(--text-main);-webkit-user-select:none;user-select:none;overflow:hidden;background-color:#000!important;background-image:radial-gradient(circle at 50% 0,#ffffff0a 0%,#0000 65%)!important}#app{background:0 0;flex-direction:column;width:100%;height:100%;display:flex;position:relative}.top-navbar{-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-glass);z-index:100;height:60px;transition:transform var(--transition-smooth), opacity var(--transition-smooth);background:#000000e0;justify-content:space-between;align-items:center;padding:0 24px;display:flex}.top-navbar.hidden{opacity:0;pointer-events:none;transform:translateY(-100%)}.nav-left{align-items:center;gap:16px;display:flex}.brand{cursor:pointer;align-items:center;gap:10px;text-decoration:none;display:flex}.brand-icon{border-radius:var(--radius-sm);border:1px solid var(--border-glass-hover);color:#fff;background:#111;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.brand-icon svg{width:18px;height:18px}.brand-title{font-family:var(--font-heading);letter-spacing:-.3px;color:#ededed;font-size:17px;font-weight:700}.brand-badge{text-transform:uppercase;letter-spacing:.8px;border-radius:var(--radius-full);color:var(--text-muted);border:1px solid var(--border-glass);background:#141414;padding:2px 7px;font-size:10px;font-weight:700}.doc-info{border-left:1px solid var(--border-glass);align-items:center;gap:8px;padding-left:14px;display:flex}.doc-name{color:#ededed;border-radius:var(--radius-sm);white-space:nowrap;text-overflow:ellipsis;max-width:240px;padding:4px 8px;font-size:13px;font-weight:500;overflow:hidden}.nav-center,.nav-right{align-items:center;gap:10px;display:flex}.btn{border-radius:var(--radius-sm);font-size:13px;font-weight:500;font-family:var(--font-main);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:1px solid #0000;align-items:center;gap:8px;padding:7px 14px;text-decoration:none;display:inline-flex}.btn svg{width:15px;height:15px}.btn-ghost{color:var(--text-muted);background:0 0}.btn-ghost:hover{color:var(--text-main);background:#ffffff14}.btn-glass{color:var(--text-main);border:1px solid var(--border-glass);background:#0a0a0a}.btn-glass:hover{border-color:var(--border-glass-hover);color:#fff;background:#141414}.btn-primary{color:#000;background:#fff;border:1px solid #fff;font-weight:600}.btn-primary:hover{background:#e6e6e6;border-color:#e6e6e6}.btn-add-hotspot{color:#000;background:#fff;border:1px solid #fff;font-weight:600}.btn-add-hotspot:hover{background:#e6e6e6}.btn-add-hotspot.active{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.btn-danger-soft{color:#f87171;cursor:pointer;transition:all var(--transition-fast);background:#ef44441f;border:1px solid #ef444459;align-items:center;gap:6px;font-weight:600;display:inline-flex}.btn-danger-soft:hover{color:#fff;background:#ef44443d;border-color:#ef4444a6;transform:translateY(-1px)}.btn-icon{border-radius:var(--radius-sm);width:34px;height:34px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.btn-icon:hover{color:var(--text-main);background:#ffffff14}.btn-icon.active{color:#fff;background:#ffffff24}.placing-mode-banner{border:1px solid var(--border-glass-hover);border-radius:var(--radius-full);z-index:105;box-shadow:var(--shadow-md);color:#ededed;background:#0a0a0a;align-items:center;gap:12px;padding:8px 18px;font-size:13px;font-weight:500;animation:2s ease-in-out infinite pulse-banner;display:flex;position:absolute;top:72px;left:50%;transform:translate(-50%)}.placing-mode-banner svg{color:#fff;width:16px;height:16px}.placing-mode-banner button{border:1px solid var(--border-glass);color:var(--text-muted);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);background:#171717;padding:3px 10px;font-size:11px}.placing-mode-banner button:hover{color:#fff;background:#222}@keyframes pulse-banner{0%,to{border-color:var(--border-glass-hover)}50%{border-color:#fff6}}.stage-container{flex:1;justify-content:center;align-items:center;height:100%;padding:8px 12px;display:flex;position:relative;overflow:hidden}.stage-container.placing-hotspot{cursor:crosshair}.flipbook-wrapper{transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex;position:relative}#flipbook-container{will-change:transform;background:0 0;border-radius:4px;transition:transform .55s cubic-bezier(.25,1,.5,1)}.page-block{background-color:#fff;position:relative;overflow:hidden;box-shadow:0 20px 50px #000000d9,0 0 0 1px #ffffff14}.page-block.--left{border-radius:4px 0 0 4px}.page-block.--right{border-radius:0 4px 4px 0}.page-block[data-page-index="0"],.page-block:last-child{border-radius:4px}.page-content{background:#fff;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.page-img{object-fit:fill;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;display:block}.page-hotspots-layer{pointer-events:none;z-index:10;position:absolute;inset:0}.hotspot-pin{pointer-events:auto;cursor:pointer;z-index:25;transition:transform .2s cubic-bezier(.34,1.56,.64,1);position:absolute;transform:translate(-50%,-50%);color:#000!important}.hotspot-pin:hover{z-index:35;transform:translate(-50%,-50%)scale(1.12)}.hotspot-badge{justify-content:center;align-items:center;width:44px;height:44px;transition:all .25s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;-webkit-backdrop-filter:blur(12px)!important;background:#ffffff85!important;border:1px solid #ffffffd9!important;border-radius:50%!important;box-shadow:0 4px 14px #0000001f,inset 0 1px 1px #ffffffe6!important}.hotspot-pin:hover .hotspot-badge{background:#ffffffd1!important;border-color:#fff!important;box-shadow:0 6px 20px #0000002e!important}.hotspot-badge svg,.hotspot-badge .speaker-svg-icon{width:24px;height:24px;transition:transform .2s;stroke:#000!important;color:#000!important;filter:none!important}.hotspot-badge svg polygon{fill:#000!important;stroke:#000!important}.hotspot-badge svg path{fill:none!important;stroke:#000!important}.hotspot-pulse-ring,.hotspot-pulse-ring-2{visibility:hidden!important;opacity:0!important;animation:none!important;display:none!important}.hotspot-pin.is-playing .hotspot-badge{background:#ffffffe6!important;animation:1.4s ease-in-out infinite translucent-speaker-pulse!important;box-shadow:0 0 0 4px #00000014,0 6px 22px #0003!important}@keyframes translucent-speaker-pulse{0%,to{transform:scale(1);box-shadow:0 0 0 2px #0000000f,0 4px 14px #00000024!important}50%{transform:scale(1.1);box-shadow:0 0 0 6px #0000001a,0 8px 24px #00000038!important}}.hotspot-tooltip{border:1px solid var(--border-glass-hover);color:#ededed;border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:all var(--transition-fast);z-index:50;background:#000;flex-direction:column;align-items:flex-end;gap:2px;padding:7px 12px;font-size:12px;display:flex;position:absolute;top:calc(100% + 10px);right:0;transform:translateY(-4px);box-shadow:0 10px 30px #000000d9}.hotspot-tooltip:after{content:"";border:5px solid #0000;border-bottom-color:#000;position:absolute;bottom:100%;right:16px;transform:none}.hotspot-pin.align-left .hotspot-tooltip{align-items:flex-start;left:0;right:auto}.hotspot-pin.align-left .hotspot-tooltip:after{left:16px;right:auto}.hotspot-tooltip-title{color:#fff;font-size:12px;font-weight:600}.hotspot-tooltip-sub{color:var(--text-muted);font-size:11px}.hotspot-pin:hover .hotspot-tooltip{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.hotspot-pin.admin-mode{cursor:grab}.hotspot-pin.admin-mode:active{cursor:grabbing}.reader-controls-bar{-webkit-backdrop-filter:blur(24px)saturate(190%);border-radius:var(--radius-full);z-index:80;transition:all var(--transition-smooth);background:#0f0f146b;border:1px solid #ffffff24;align-items:center;gap:10px;padding:6px 14px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 16px 40px #00000073,0 0 0 1px #ffffff0d,inset 0 1px #ffffff2e}.reader-controls-bar:hover{background:#14141a94;border-color:#ffffff3d;box-shadow:0 20px 48px #0000008c,inset 0 1px #ffffff47}.page-indicator{color:#f1f5f9;font-size:12px;font-weight:500;font-family:var(--font-mono);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(14px);background:#ffffff14;border:1px solid #ffffff1f;align-items:center;gap:6px;padding:4px 12px;display:flex;box-shadow:inset 0 1px #ffffff1a}.divider-vert{background:#ffffff24;width:1px;height:20px}.reader-controls-bar .btn-icon{color:#ffffffd9;background:#ffffff0f;border:1px solid #ffffff14;border-radius:50%;transition:all .2s cubic-bezier(.16,1,.3,1)}.reader-controls-bar .btn-icon:hover{color:#fff;background:#ffffff38;border-color:#ffffff59;transform:scale(1.1);box-shadow:0 0 14px #fff3}.reader-controls-bar .btn-icon.active{color:#fff;background:#ffffff40;border-color:#fff9;box-shadow:0 0 16px #ffffff59}.side-nav-arrow{-webkit-backdrop-filter:blur(24px)saturate(190%);color:#ffffffe0;cursor:pointer;z-index:70;background:#12121852;border:1px solid #ffffff29;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .22s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 8px 32px #00000059,0 0 0 1px #ffffff0f,inset 0 1px #ffffff38}.side-nav-arrow svg{stroke-width:2.2px;width:22px;height:22px}.side-nav-arrow:hover{color:#fff;background:#ffffff38;border-color:#ffffff6b;transform:translateY(-50%)scale(1.12);box-shadow:0 12px 36px #00000073,0 0 20px #fff3,inset 0 1px #ffffff59}.side-nav-arrow.left{left:18px}.side-nav-arrow.right{right:18px}.audio-active-pulse{color:var(--accent-cyan)!important;background:#06b6d42e!important;border-color:#06b6d473!important;box-shadow:0 0 16px #06b6d466!important}.floating-audio-player{display:none!important}@keyframes player-pop-in{0%{opacity:0;transform:translateY(20px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.player-header{justify-content:space-between;align-items:center;display:flex}.player-track-info{align-items:center;gap:12px;display:flex;overflow:hidden}.player-artwork{border-radius:var(--radius-sm);border:1px solid var(--border-glass);color:#fff;background:#141414;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.player-artwork svg{width:18px;height:18px}.player-text{flex-direction:column;display:flex;overflow:hidden}.player-title{color:#ededed;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.player-sub{color:var(--text-muted);align-items:center;gap:6px;font-size:11px;display:flex}.player-equalizer{align-items:flex-end;gap:2px;height:12px;display:flex}.eq-bar{background:#fff;border-radius:1px;width:2.5px;animation:.8s ease-in-out infinite alternate eq-bounce}.eq-bar:first-child{height:40%;animation-delay:.1s}.eq-bar:nth-child(2){height:90%;animation-delay:.3s}.eq-bar:nth-child(3){height:60%;animation-delay:.5s}.eq-bar:nth-child(4){height:100%;animation-delay:.2s}.floating-audio-player.paused .eq-bar{opacity:.4;height:3px!important;animation:none!important}@keyframes eq-bounce{0%{height:20%}to{height:100%}}.player-scrubber{flex-direction:column;gap:6px;display:flex}.scrub-track{border-radius:var(--radius-full);cursor:pointer;background:#222;width:100%;height:4px;position:relative;overflow:hidden}.scrub-fill{border-radius:var(--radius-full);background:#fff;width:0%;height:100%;transition:width .1s linear}.scrub-times{font-size:11px;font-family:var(--font-mono);color:var(--text-dim);justify-content:space-between;display:flex}.player-controls{justify-content:space-between;align-items:center;display:flex}.player-main-controls{align-items:center;gap:10px;display:flex}.btn-play-pause-circle{color:#000;cursor:pointer;width:36px;height:36px;transition:all var(--transition-fast);background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.btn-play-pause-circle svg{width:16px;height:16px}.btn-play-pause-circle:hover{background:#e6e6e6;transform:scale(1.06)}.volume-control{color:var(--text-muted);align-items:center;gap:8px;display:flex}.volume-control svg{width:15px;height:15px}.volume-slider{accent-color:#fff;cursor:pointer;width:70px}.hotspots-drawer{border-left:1px solid var(--border-glass);z-index:110;width:380px;transition:transform var(--transition-smooth);background:#0a0a0a;flex-direction:column;display:flex;position:fixed;top:60px;bottom:0;right:0;transform:translate(100%);box-shadow:-15px 0 40px #000c}.hotspots-drawer.open{transform:translate(0)}.drawer-header{border-bottom:1px solid var(--border-glass);justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.drawer-actions-bar{border-bottom:1px solid var(--border-glass);background:#ffffff05;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.drawer-title{font-family:var(--font-heading);color:#ededed;align-items:center;gap:10px;font-size:16px;font-weight:700;display:flex}.drawer-title svg{width:18px;height:18px}.drawer-content{flex-direction:column;flex:1;gap:10px;padding:18px;display:flex;overflow-y:auto}.hotspot-card{border:1px solid var(--border-glass);border-radius:var(--radius-sm);transition:all var(--transition-fast);background:#111;flex-direction:column;gap:8px;padding:14px;display:flex}.hotspot-card:hover{border-color:var(--border-glass-hover);background:#141414}.hotspot-card-header{justify-content:space-between;align-items:center;display:flex}.hotspot-card-badge{font-size:11px;font-weight:700;font-family:var(--font-mono);color:var(--text-muted);border-radius:var(--radius-xs);border:1px solid var(--border-glass);background:#1a1a1a;padding:2px 7px}.hotspot-card-actions{align-items:center;gap:4px;display:flex}.hotspot-card-title{color:#ededed;font-size:13px;font-weight:600}.hotspot-card-info{color:var(--text-muted);align-items:center;gap:6px;font-size:12px;display:flex}.thumbnails-bar{-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-glass);z-index:75;height:130px;transition:transform var(--transition-smooth);background:#0a0a0af2;align-items:center;gap:14px;padding:0 24px;display:flex;position:absolute;bottom:0;left:0;right:0;overflow-x:auto;transform:translateY(100%)}.thumbnails-bar.open{transform:translateY(0)}.thumb-item{aspect-ratio:.707;border:2px solid var(--border-glass);cursor:pointer;height:96px;transition:all var(--transition-fast);border-radius:4px;flex-shrink:0;position:relative;overflow:hidden}.thumb-item img{object-fit:cover;width:100%;height:100%}.thumb-item:hover{border-color:var(--border-glass-hover);transform:scale(1.05)}.thumb-item.active{border-color:#fff;box-shadow:0 0 12px #ffffff40}.thumb-num{color:#ededed;font-size:10px;font-family:var(--font-mono);background:#000000d9;border-radius:3px;padding:1px 4px;position:absolute;bottom:3px;right:3px}.modal-backdrop{-webkit-backdrop-filter:blur(14px);z-index:200;opacity:0;pointer-events:none;transition:opacity var(--transition-smooth);background:#000000d9;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal-container{border:1px solid var(--border-glass);border-radius:var(--radius-lg);width:100%;max-width:520px;box-shadow:var(--shadow-vercel);transition:all var(--transition-smooth);background:#0a0a0a;flex-direction:column;display:flex;overflow:hidden;transform:scale(.96)translateY(8px)}.modal-backdrop.open .modal-container{transform:scale(1)translateY(0)}.modal-header{border-bottom:1px solid var(--border-glass);justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.modal-title{font-family:var(--font-heading);color:#ededed;align-items:center;gap:10px;font-size:17px;font-weight:700;display:flex}.modal-title svg{width:18px;height:18px}.modal-body{flex-direction:column;gap:16px;max-height:75vh;padding:22px;display:flex;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-glass);background:#050505;justify-content:flex-end;align-items:center;gap:10px;padding:14px 22px;display:flex}.form-group{flex-direction:column;gap:7px;display:flex}.form-label{color:var(--text-muted);font-size:12px;font-weight:500}.form-input{border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:#ededed;font-size:13px;font-family:var(--font-main);transition:all var(--transition-fast);background:#000;outline:none;padding:9px 12px}.form-input:focus{border-color:#ededed;box-shadow:0 0 0 1px #ededed}.audio-source-tabs{border-radius:var(--radius-sm);border:1px solid var(--border-glass);background:#000;grid-template-columns:repeat(3,1fr);gap:6px;padding:3px;display:grid}.source-tab-btn{border-radius:var(--radius-xs);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;padding:7px 8px;font-size:12px;font-weight:500;display:flex}.source-tab-btn svg{width:14px;height:14px}.source-tab-btn.active{color:#fff;border-color:var(--border-glass-hover);background:#171717}.color-picker-row{gap:10px;display:flex}.color-option{cursor:pointer;width:28px;height:28px;transition:transform var(--transition-fast);border:2px solid #0000;border-radius:50%}.color-option:hover{transform:scale(1.15)}.color-option.selected{border-color:#fff;box-shadow:0 0 10px}.dropzone-container{border:1px dashed var(--border-glass-hover);border-radius:var(--radius-md);text-align:center;cursor:pointer;transition:all var(--transition-fast);background:#000;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:30px 20px;display:flex}.dropzone-container:hover,.dropzone-container.drag-over{background:#0d0d0d;border-color:#fff}.dropzone-icon{border:1px solid var(--border-glass);color:#fff;background:#141414;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;display:flex}.dropzone-icon svg{width:22px;height:22px}.audio-docs-list{flex-direction:column;gap:6px;max-height:220px;padding:2px;display:flex;overflow-y:auto}.audio-doc-item{border:1px solid var(--border-glass);border-radius:var(--radius-sm);transition:all var(--transition-fast);background:#111;justify-content:space-between;align-items:center;padding:9px 12px;display:flex}.audio-doc-item:hover{border-color:var(--border-glass-hover);background:#141414}.audio-doc-name{color:#ededed;text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:8px;font-size:13px;font-weight:500;display:flex;overflow:hidden}.audio-doc-badge{color:var(--accent-cyan);text-transform:uppercase;letter-spacing:.5px;background:#06b6d426;border:1px solid #06b6d44d;border-radius:4px;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:700;display:inline-block}@keyframes spinIcon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin-anim{animation:.6s linear infinite spinIcon}.app-loader-overlay{z-index:999;background:#000;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .35s ease-out,visibility .35s ease-out;display:flex;position:fixed;inset:0}.app-loader-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.app-loader-spinner{border:2px solid #222;border-top-color:#fff;border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin-loader}@keyframes spin-loader{to{transform:rotate(360deg)}}.app-loader-text{font-family:var(--font-heading);color:#ededed;font-size:17px;font-weight:700}.app-loader-sub{color:var(--text-muted);font-size:12px}.admin-shortcut-pill{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-glass);color:var(--text-muted);border-radius:var(--radius-full);z-index:70;opacity:.4;transition:all var(--transition-fast);background:#0a0a0ad9;align-items:center;gap:6px;padding:6px 12px;font-size:11px;font-weight:500;text-decoration:none;display:flex;position:fixed;bottom:24px;right:24px}.admin-shortcut-pill:hover{opacity:1;color:#fff;border-color:var(--border-glass-hover);background:#141414}@media (width<=900px){.top-navbar{height:56px;padding:0 14px}.doc-name{display:none}.stage-container{padding:10px}.side-nav-arrow{display:none}.floating-audio-player{width:auto;bottom:80px;left:14px;right:14px}.reader-controls-bar{gap:6px;padding:5px 12px;bottom:14px}.hotspots-drawer{width:100%}}