.app-header{display:flex;align-items:center;gap:24px;padding:0 24px;height:64px;border-bottom:1px solid var(--panel-border);box-shadow:0 2px 12px #0000000f;position:relative;flex-shrink:0;z-index:2000}body.dark .app-header{box-shadow:0 2px 16px #0000004d}.app-logo{display:flex;align-items:center;flex-shrink:0}.app-logo .logo-img{height:40px;width:auto}.app-nav{display:flex;align-items:center;gap:4px;position:absolute;left:50%;transform:translate(-50%);z-index:4000}.nav-link{display:inline-flex;align-items:center;padding:6px 14px;height:auto;border-radius:8px;font-size:14px;font-weight:500;color:var(--text);background:transparent;border:none;cursor:pointer;text-decoration:none;opacity:.65;transition:opacity .15s,background .15s;white-space:nowrap}.nav-link:hover{opacity:1;background:var(--btn-active, rgba(0,0,0,.06))}.nav-link.active{opacity:1;background:var(--btn-active, rgba(0,0,0,.08));font-weight:600}.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.nav-account{position:relative}.nav-account-btn{opacity:1;font-weight:600;background:var(--primary, #6366f1);color:#fff!important;border-radius:20px;padding:6px 16px;min-width:36px;text-align:center}.nav-account-btn:hover{background:var(--primary-dark, #4f46e5)!important;opacity:1}.community-view{overflow-y:auto}.community-view-inner{display:flex;flex-direction:column;height:100%;min-height:0}@media(max-width:768px){.app-header{padding:0 16px;height:56px}.app-nav{display:none;position:fixed;top:64px;left:0;right:0;transform:none;flex-direction:column;align-items:stretch;background:var(--panel);border-bottom:1px solid var(--panel-border);padding:8px;gap:2px;z-index:5000;box-shadow:0 8px 24px #00000026;max-height:calc(100dvh - 64px);max-height:calc(var(--app-height, 100dvh) - 64px);overflow-y:auto}.app-nav.open{display:flex}.nav-link{height:44px;border-radius:10px;font-size:15px;padding:0 16px;justify-content:center;text-align:center;width:100%;box-sizing:border-box}.nav-account{margin-left:0;width:100%}#accountDropdownMenu{position:fixed;left:0;right:0;top:auto;width:100%;border-radius:0;border-left:none;border-right:none;box-sizing:border-box}#accountDropdownMenu button{text-align:center;justify-content:center}.hamburger-btn{display:flex!important}}body{transition:padding-left .4s cubic-bezier(.16,1,.3,1);overflow-y:hidden;margin:0;padding:0}.footer{margin-top:18px;font-size:13px;opacity:.6}#accountDropdownMenu{max-height:700px;overflow-y:scroll;z-index:5000}.mobile-controls-btn{display:none}.hamburger-btn{display:none;background:transparent;border:none;cursor:pointer;padding:8px;color:var(--text);border-radius:8px;align-items:center;justify-content:center}.hamburger-btn:hover{background:#0000000d}@media(max-width:768px){.nav-account .dropdown-content button{text-align:left;padding:12px;background:#00000008;border-radius:8px}}button{min-width:50px}div.grid-child.account{justify-content:right;justify-self:right;display:flex;align-items:center;gap:8px}div.grid-container.handpan-options{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}div.grid-child.handpan-options.label{text-align:right;padding-right:10px}div.grid-child.handpan-options.select{align-content:center}div.container{margin:0 auto;width:98%;height:98vh;min-height:600px;padding:0;z-index:1000;display:flex;flex-direction:column;align-items:stretch;gap:0;position:relative;transition:transform .4s cubic-bezier(.16,1,.3,1);overflow:hidden}.route-view{display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto}.route-view.active{display:flex}#view-studio{padding:0}#view-studio>*:not(#primaryControlsWrapper){padding-left:32px;padding-right:32px}#view-studio>#sharedBanner{padding-top:16px}#view-studio>#main{padding-top:24px}.route-view.active{display:flex!important}.main{display:flex;flex:1;min-height:0;gap:20px}.grid-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;min-height:72px;margin-top:4px;border-top:1px solid var(--panel-border);border-radius:0 0 12px 12px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.02));flex-shrink:0;position:relative}.grid-bottom-row .measure-tools,.grid-bottom-row .controls-transport{display:flex;align-items:center}body.dark .grid-bottom-row{background:linear-gradient(to bottom,transparent,rgba(0,0,0,.12));border-top-color:var(--panel-border)}.left{display:flex;flex-direction:column;flex:1;min-height:0}.grid-phrase-name-row{display:flex;align-items:center;gap:10px;padding-bottom:20px}.grid-phrase-name{font-size:18px;font-weight:600;color:var(--text-secondary, #4d4d4d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.7;cursor:pointer;transition:opacity .15s ease}.grid-phrase-name:hover{opacity:1}.quick-save-btn{display:none;height:20px;padding:0 10px;font-size:12px;font-weight:600;border-radius:12px;border:1px solid currentColor;background:transparent;cursor:pointer;white-space:nowrap;color:var(--accent, #6366f1);opacity:.85;transition:opacity .15s,background .15s}.quick-save-btn:hover{opacity:1;background:#6366f11a}.quick-save-btn.visible{display:inline-block}.auth-panel:before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(var(--panel-rgb),.95);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}.container:before{content:"";position:absolute;opacity:0;z-index:-1;pointer-events:none;will-change:transform;transform:translateZ(0);border:1px solid white}body.dark .container:before{background-image:url(/assets/starry-sky-zfMxlUDb.jpg);opacity:.35}body.dark div.container{background:#16161fb3;border-color:#ffffff1a;box-shadow:0 20px 60px #00000080,0 0 0 1px #ffffff0d inset}@media(max-width:768px){html{height:100dvh;overflow:hidden}body{height:100dvh;overflow:hidden;display:flex;flex-direction:column}#view-studio>*:not(#primaryControlsWrapper){padding-left:10px;padding-right:10px}div.container{margin:0 auto;width:100%;height:100%;flex:1 1 0;min-height:0;overflow:hidden;padding:10px 5px 0;border-radius:0;border:none;gap:8px}.footer{display:none}body.route-studio #view-studio{display:flex;flex-direction:column;overflow:hidden;min-height:0;flex:1 1 0}body.route-studio #main{display:flex;flex-direction:column;flex:1 1 0;min-height:0;gap:0}body.route-studio .left{display:flex;flex-direction:column;flex:1 1 0;min-height:0}#measures{flex:1 1 0!important;min-height:0!important;overflow-y:auto;margin-top:10px}#measureTools{flex-shrink:0}.controls-primary{flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:flex-start!important;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:5px}.controls-primary::-webkit-scrollbar{display:none}#primaryControlsWrapper,.measure-tools{display:none;width:93vw;position:absolute;top:5px;left:8px;right:8px;background:rgba(var(--panel-rgb),.98);border:1px solid var(--panel-border);border-radius:12px;box-shadow:0 10px 30px #0006;padding:12px;z-index:2000;overflow:hidden}#primaryControlsWrapper .scrollable-controls-wrapper,.measure-tools .selection-group{padding:0}#primaryControlsWrapper.open{display:block}.handpan-panel{order:10;flex-shrink:0;padding-bottom:calc(72px + env(safe-area-inset-bottom,10px))}.grid-bottom-row{min-height:0!important;padding:0!important;border:none!important;background:none!important;height:0;overflow:visible}#measures{padding-bottom:calc(72px + env(safe-area-inset-bottom,10px))}.grid-phrase-name-row{justify-content:center;padding-bottom:5px;padding-top:10px}}select#patternSelect{max-width:160px}.phrase-current-name{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.5;padding:4px 14px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;pointer-events:none;text-align:left}.phrase-menu-btn{display:block;width:100%;text-align:left;padding:8px 14px;font-weight:500;font-size:14px;background:transparent;border:none;cursor:pointer;color:var(--text);border-radius:6px;min-width:auto}.phrase-menu-btn:hover{background:#0000000d}body.dark .phrase-menu-btn:hover{background:#ffffff0d}.phrase-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.16,1,.3,1)}.phrase-submenu.open{grid-template-rows:1fr}.phrase-submenu-inner{overflow:hidden;padding:0 6px}.phrase-submenu button{background:#fff6!important}.phrase-submenu button:hover{background-color:var(--btn-active)!important;color:#000}.admin-menu-btn{display:block;width:100%;text-align:left;padding:8px 14px;font-weight:500;font-size:14px;background:transparent;border:none;cursor:pointer;border-radius:6px;min-width:auto}.admin-menu-btn:hover{background:#0000000d}body.dark .admin-menu-btn:hover{background:#ffffff0d}.admin-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.16,1,.3,1)}.admin-submenu.open{grid-template-rows:1fr}.admin-submenu-inner{overflow:hidden;padding:0 6px}.admin-submenu button{background:#fff6!important}.admin-submenu button:hover{background-color:var(--btn-active)!important;color:#000}.dropdown-content{display:none;min-width:200px!important;position:absolute;top:100%;left:0;background-color:var(--panel);min-width:160px;box-shadow:0 8px 24px #0003;border-radius:12px;z-index:4000;padding:8px;border:1px solid var(--panel-border);margin-top:8px}.dropdown-content.show{display:block;animation:fadeIn .1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.dropdown-content button{color:var(--text);padding:10px 16px;text-decoration:none;display:block;width:100%;text-align:left;background:transparent;border-radius:8px;margin-bottom:2px;border:none;align-items:center!important}.dropdown-content button:hover{background-color:var(--btn-active);color:#000}.dropdown-divider{height:1px;background-color:var(--panel-border);margin:6px 0}.dropdown-content.right-aligned{left:auto;right:0}.dropdown-header-item{color:var(--text);font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.open-phrase-modal{max-width:460px;padding:0;display:flex;flex-direction:column;max-height:80vh}.open-phrase-search{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--panel-border);color:var(--text);opacity:.7;flex-shrink:0}#phraseSearchInput{flex:1;border:none;background:transparent;font-size:14px;color:var(--text);outline:none}#phraseSearchInput::placeholder{opacity:.5}.open-phrase-create-row{padding:14px 16px 10px;display:flex;justify-content:center;border-bottom:1px solid var(--panel-border);flex-shrink:0}.open-phrase-create-row .primary-btn{padding:10px 28px;font-size:14px;width:100%}.phrase-list{padding:8px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1}.phrase-list-loading,.phrase-list-empty{display:flex;align-items:center;justify-content:center;padding:32px 16px;font-size:14px;opacity:.5}.phrase-list-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:8px;background:transparent;border:1px solid transparent;cursor:pointer;font-size:14px;color:var(--text);transition:background .15s,border-color .15s,transform .1s;min-width:auto}.phrase-list-item:hover{background:#0000000a;border-color:var(--panel-border);transform:translate(2px)}body.dark .phrase-list-item:hover{background:#ffffff0d}.phrase-item-icon{opacity:.45;flex-shrink:0}.phrase-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phrase-item-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--btn-active);background:rgba(var(--panel-rgb),.6);border:1px solid var(--btn-active);border-radius:4px;padding:2px 6px;flex-shrink:0}.phrase-list-item.current{background:#00000008;border-color:var(--panel-border)}.phrase-list-item.current .phrase-item-icon,.phrase-list-item.current .phrase-item-name{font-weight:600}body.dark .phrase-list-item.current{background:#ffffff0a}.sortable-indicator{height:2px;background:var(--primary-color, #f1c40f);border-radius:99px;margin:2px 0;pointer-events:none}.sortable-dragging{opacity:.4;transform:scale(.98)}.pattern-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 14px;border-radius:16px;background:var(--offwhite);border:1px solid var(--panel-border)}#primaryControlsWrapper.pattern-row.player{border-radius:0;border-left:none;border-right:none;border-top:none;border-bottom:1px solid var(--panel-border);background:rgba(var(--panel-rgb, 255,255,255),.6);padding:6px 24px;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}#primaryControlsWrapper.pattern-row.player::-webkit-scrollbar{display:none}.controls{display:flex;flex-direction:column;gap:20px;align-items:center;width:100%;margin:0 auto 20px}.controls-primary{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}button{height:36px;padding:6px 14px;border-radius:999px;border:none;background:var(--btn-bg);color:var(--text);cursor:pointer;font-weight:500;font-size:13px;white-space:nowrap}button.active{background:var(--btn-active)}button:disabled{opacity:.45;cursor:not-allowed}button.compose-btn{font-size:20px}button#metronomeBtn svg{width:30px;height:30px}button#presentBtn{font-size:20px}select{padding:5px 14px;height:36px;border-radius:999px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);font-size:13px}.bpm-control input[type=range]{width:140px;accent-color:var(--accent-glow, #6366f1)}.dropdown{position:relative;display:inline-block}.dropdown-toggle{display:flex;align-items:center;gap:6px;background:var(--btn-bg);color:var(--text);padding:10px 20px}.ts-wrapper{display:flex;align-items:center;gap:0;background:var(--btn-bg);padding:0 12px;border-radius:999px;height:36px;box-sizing:border-box}.ts-select{appearance:none;-webkit-appearance:none;background:transparent;border:none;color:var(--text);font-weight:600;font-size:16px;padding:0 2px;text-align:center;cursor:pointer;min-width:24px;font-family:inherit}.ts-select:focus{outline:none;color:#6366f1}.ts-select option{background:var(--panel);color:var(--text)}.ts-sep{color:var(--text);opacity:.4;font-weight:300;font-size:20px;-webkit-user-select:none;user-select:none;margin:0 4px;transform:translateY(-1px)}.transport-group{display:flex;flex-direction:row;align-items:center;gap:8px;justify-content:center}.transport-group .t-play-btn,.transport-group .t-metro-btn,.transport-group .t-subdiv-btn{background:none;border:1px solid var(--panel-border);border-radius:8px;padding:6px 14px;height:36px;font-size:14px;font-weight:500;color:var(--text);transition:border-color .15s,color .15s,background .15s}.transport-group .t-subdiv-btn{font-size:11px;font-weight:700;letter-spacing:.5px;padding:6px 10px}.transport-group .t-play-btn:hover,.transport-group .t-metro-btn:hover,.transport-group .t-subdiv-btn:hover{border-color:var(--accent-glow, #818cf8);color:var(--accent-glow, #818cf8)}.transport-group .t-play-btn.active,.transport-group .t-subdiv-btn.active{background:#6366f11f;border-color:var(--accent-glow, #818cf8);color:var(--accent-glow, #818cf8)}body:not(.dark) .transport-group .t-play-btn,body:not(.dark) .transport-group .t-metro-btn,body:not(.dark) .transport-group .t-subdiv-btn{border-color:#6366f140;color:#4f46e5}body:not(.dark) .transport-group .t-play-btn:hover,body:not(.dark) .transport-group .t-metro-btn:hover,body:not(.dark) .transport-group .t-subdiv-btn:hover{border-color:#6366f1;color:#fff;background:#6366f1}body:not(.dark) .transport-group .t-play-btn.active{background:#6366f11f;border-color:#6366f1;color:#4f46e5}body:not(.dark) .transport-group .t-subdiv-btn.active{background:#6366f11f;border-color:#6366f1;color:#4f46e5}.bpm-control{display:flex;flex-direction:row;align-items:center;gap:8px;background:none;padding:4px 12px;border-radius:8px;border:1px solid var(--panel-border);height:36px;box-sizing:border-box}body:not(.dark) .bpm-control{border-color:#6366f140}.bpm-control label,.t-bpm-label{font-size:11px;font-weight:600;color:var(--text);opacity:.55;white-space:nowrap}.t-bpm-num{width:46px;border:none;background:transparent;color:var(--text);font-size:13px;font-weight:700;text-align:center;padding:0;height:auto;border-radius:0;-moz-appearance:textfield}.t-bpm-num::-webkit-inner-spin-button,.t-bpm-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.t-bpm-num:focus{outline:none;color:var(--accent-glow, #818cf8)}.transport-group .t-tap-btn{background:none;border:1px solid var(--panel-border);border-radius:8px;padding:6px 14px;height:36px;font-size:13px;font-weight:600;color:var(--text);transition:border-color .15s,color .15s,background .15s}.transport-group .t-tap-btn:hover{border-color:var(--accent-glow, #818cf8);color:var(--accent-glow, #818cf8)}.transport-group .t-tap-btn.tapping{background:#6366f12e;border-color:var(--accent-glow, #818cf8);color:var(--accent-glow, #818cf8)}body:not(.dark) .transport-group .t-tap-btn{border-color:#6366f140;color:#4f46e5}body:not(.dark) .transport-group .t-tap-btn:hover,body:not(.dark) .transport-group .t-tap-btn.tapping{border-color:#6366f1;color:#fff;background:#6366f1}.scrollable-controls-wrapper{position:relative;width:100%;display:flex;align-items:center}.scroll-indicator{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:32px;height:100%;align-items:center;justify-content:center;pointer-events:none;color:var(--text);font-size:20px;opacity:0;transition:opacity .3s ease}.scroll-indicator.active{opacity:.8}.scroll-indicator.left{left:0;background:linear-gradient(to right,var(--bg) 80%,transparent)}.scroll-indicator.right{right:0;background:linear-gradient(to left,var(--bg) 80%,transparent)}#themeBtn,#labelNotationBtn,#clearBtn-A,#clearBtn-B,.compose-btn,#stickingBtn{min-width:52px}@media(max-width:768px){.scroll-indicator{display:flex}.bpm-control input[type=range]{width:100px}.transport-group{flex-wrap:nowrap;gap:6px}.transport-group .t-play-btn,.transport-group .t-metro-btn,.transport-group .t-subdiv-btn,.transport-group .t-tap-btn{padding:6px 10px}}@media(max-width:430px){.bpm-control input[type=range]{display:none}.transport-group{gap:5px}.transport-group .t-play-btn,.transport-group .t-metro-btn,.transport-group .t-subdiv-btn,.transport-group .t-tap-btn{padding:6px 8px}}@media(max-width:768px){.mobile-controls-btn{display:flex!important}#primaryControlsWrapper{display:none}#primaryControlsWrapper.mobile-open{display:flex;background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}#primaryControlsWrapper.pattern-row.player{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}#primaryControlsWrapper.pattern-row.player button{padding:0 10px}}*{box-sizing:border-box}body{margin:0;padding:5px;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(160deg,#fdf8ee,#ece7f5 60%,#f5eef8);color:var(--text);min-height:100dvh;min-height:var(--app-height, 100dvh);position:relative}body.dark:after{background-image:url(/assets/starry-sky-zfMxlUDb.jpg)}h2{margin:0 0 16px;font-weight:500}:root{--bg: #f9f6ef;--panel: #f4f1e8;--panel-rgb: 244, 241, 232;--panel-border: #dbd5c8;--offwhite: #faf8f2;--text: #2f2f2f;--cell-bg: #fffef8;--cell-border: #dbd5c8;--cell-on: #eaeaea;--play-glow: rgba(97, 10, 66, .35);--down-glow: rgba(97, 10, 66, .22);--up-glow: rgba(2, 68, 150, .22);--btn-bg: #e8e5dc;--btn-active: #ffd166;--primary-color: #ffd166}body.dark{background:linear-gradient(160deg,#0f0f14,#12101a);--bg: #0f0f14;--panel: #16161f;--panel-rgb: 22, 22, 31;--panel-border: #2f2f45;--offwhite: #1a1a24;--text: #eaeaf0;--cell-bg: #222233;--cell-border: #2f2f45;--cell-on: #5b8cff;--play-glow: rgba(253, 3, 128, .45);--down-glow: rgba(253, 3, 128, .28);--up-glow: rgba(30, 121, 232, .28);--btn-bg: #2a2a38;--btn-active: #5b8cff}@media(max-width:768px){body:after{background-size:cover;background-repeat:no-repeat;background-position:center center}}.labels{display:grid;grid-template-columns:repeat(var(--cols, 8),1fr);gap:12px;margin-bottom:12px;max-width:900px;font-size:24px;font-weight:500;opacity:.8;text-align:center;pointer-events:none}.grid{display:grid;grid-template-columns:repeat(var(--cols, 8),1fr);gap:12px;max-width:900px}.cell{touch-action:none;width:100%;padding-top:100%;border-radius:50%;background:var(--cell-bg);border:2px solid var(--cell-border);cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden;pointer-events:auto;container-type:inline-size}.cell{position:relative}.inner{position:relative;z-index:1;pointer-events:none}.quad-container{position:absolute;inset:0;z-index:10!important;pointer-events:none!important;display:grid;grid-template-columns:44cqw 44cqw;column-gap:0;justify-content:center;align-content:center;padding:0;box-sizing:border-box;opacity:0;transition:opacity .3s ease}.cell.multi-selected{background:var(--cell-bg)}.cell.multi-selected .quad-container,.cell.active .quad-container,.cell.multi-mode .quad-container{opacity:1}.hand-column{display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none}.sub-dot{width:44cqw;height:44cqw;pointer-events:auto!important;z-index:11!important;position:relative;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:22cqw;font-weight:700;color:#fff;transition:all .2s ease;cursor:pointer}.sixteen-beats .cell.has-label .inner{font-size:24px}@media(max-width:768px){.grid,.labels{grid-template-columns:repeat(var(--cols, 8),1fr)!important;gap:4px}.measure{grid-template-columns:repeat(var(--cols, 8),1fr) auto!important;gap:4px;margin-bottom:8px}.quad-container{opacity:0;pointer-events:none}.cell.multi-mode .quad-container{opacity:1;pointer-events:auto}}.sub-dot.active{opacity:.8}.cell.multi-mode.has-label{background-color:rgba(1,1,1,1,0);overflow:visible}.hand-column.left .sub-dot{background:color-mix(in srgb,var(--up-fill) var(--mix),var(--cell-bg))}.hand-column.right .sub-dot{background:color-mix(in srgb,var(--down-fill) var(--mix),var(--cell-bg))}.cell.multi-selected .hand-column.left .sub-dot{background-color:color-mix(in srgb,var(--up-fill),transparent 50%)}.cell.multi-selected .hand-column.right .sub-dot{background-color:color-mix(in srgb,var(--down-fill),transparent 50%)}.sub-dot.selected{border:2px solid #fff;box-shadow:0 0 10px var(--btn-active);z-index:2}.cell.multi-mode .inner{display:none}.cell.multi-mode .quad-container{opacity:1}.cell{transform:translateZ(0) scale(1);transition:transform .8s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),background .3s ease;will-change:transform}@keyframes rhythmicPulse{0%{transform:translateZ(0) scale(1);box-shadow:0 0 #4f8cff00}15%{transform:translateZ(0) scale(1.3);box-shadow:0 0 0 4px var(--play-glow)}to{transform:translateZ(0) scale(1);box-shadow:0 0 #4f8cff00}}@keyframes cellTapRipple{0%{opacity:.55;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}.cell:before{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;background:var(--beat-glow, rgba(255, 255, 255, .3));pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(0)}.cell:active{transform:translateZ(0) scale(.92);transition:transform .07s ease-out}.cell:active:before{animation:cellTapRipple .45s ease-out forwards}.cell.play{animation:rhythmicPulse 1s cubic-bezier(.22,1,.36,1) forwards;z-index:5;outline:2.5px solid #4f1a6e;outline-offset:3px}body.dark .cell.play{outline-color:#a855f7}body.present .cell.play{outline:none}.cell .inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:650;font-size:36px;letter-spacing:.5px;opacity:.95;pointer-events:none;color:#fff}@media(max-width:768px){.cell .inner{font-size:25px}.measures{box-shadow:0 18px 18px #ffffff73}}.measures{max-width:900px;flex:1;min-height:120px;padding:0 15px;overflow-y:auto;position:relative;scroll-behavior:smooth;--sb-thumb-opacity: 0;--sb-thumb-color: rgba(128, 128, 128, .4)}body:not(.dark) .measures:before{content:"";position:absolute;inset:0;background-image:url(/assets/handpan-for-groovepan-BoB935kb.png);background-repeat:no-repeat;background-position:center center;background-size:55%;opacity:.06;pointer-events:none;z-index:0}body.dark .measures{--sb-thumb-color: rgba(255, 255, 255, .25)}.measures.scrollbar-visible{--sb-thumb-opacity: 1}.measures::-webkit-scrollbar{width:6px;display:block}.measures::-webkit-scrollbar-track{background:transparent}.measures::-webkit-scrollbar-thumb{background-color:var(--sb-thumb-color);border-radius:20px;border:1px solid transparent;background-clip:padding-box;transition:background-color .5s ease}.measures:not(.scrollbar-visible)::-webkit-scrollbar-thumb{background-color:transparent}.measures-scroller{will-change:transform;zoom:var(--grid-zoom, 100%);width:calc(100% / (var(--grid-zoom-raw, 100) / 100))}.measure{display:grid;grid-template-columns:repeat(var(--cols, 8),1fr) auto;grid-template-rows:auto auto;gap:12px;margin-bottom:16px;align-items:center;content-visibility:auto;contain-intrinsic-size:1px 200px}.labelCell{text-align:center;font-size:24px;font-weight:500;opacity:.8}.gridCell{grid-row:2;min-height:32px;min-width:32px;aspect-ratio:1 / 1}.add-measure{grid-column:calc(var(--cols, 8) + 1);grid-row:1 / span 2;width:46px;height:46px;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:26px;line-height:1;font-weight:700;background:var(--btn-bg);border:1px solid var(--panel-border)}.add-measure:hover{filter:brightness(1.03)}@media(max-width:600px){.labelCell{font-size:14px}.add-measure{width:32px;height:32px;font-size:20px}}.cell.selected{border-color:#eaeaf0e6;box-shadow:0 0 0 6px #eaeaf01f}body:not(.dark) .cell.selected{border-color:#2f2f2fd9;box-shadow:0 0 0 10px #4a4a4a38}.cell.selected:not(.label-ding):not(.label-t):not(.label-s):not(.label-n){background:var(--cell-on)}:root{--down-fill: #610a42;--up-fill: rgb(2, 68, 150)}body.dark{--down-fill: #fd0380;--up-fill: rgb(30, 121, 232)}.cell.off.has-label{--mix: 46%}.cell.has-label{--mix: 78%;box-shadow:inset 0 2px 4px #ffffff38,inset 0 -2px 5px #0000002e,0 2px 6px #0000001a,0 0 18px var(--beat-glow, transparent)}body.dark .cell.has-label{box-shadow:inset 0 2px 4px #ffffff1a,inset 0 -2px 5px #00000059,0 2px 8px #00000059,0 0 20px var(--beat-glow, transparent)}.cell.label-q .inner{opacity:.6;font-style:italic;font-weight:300;filter:drop-shadow(0 0 2px rgba(255,255,255,.4))}.cell.downbeat{--beat-fill: var(--down-fill);--beat-glow: var(--down-glow);--play-glow: var(--down-glow)}.cell.upbeat{--beat-fill: var(--up-fill);--beat-glow: var(--up-glow);--play-glow: var(--up-glow)}.cell.has-label.downbeat .inner,.cell.has-label.upbeat .inner{color:#fff}.cell.selected:not(.has-label){background:var(--cell-on)}body.handSplit .cell.has-label{background:color-mix(in srgb,var(--beat-fill) var(--mix),var(--cell-bg))}body:not(.handSplit) .cell.has-label:not(.multi-mode){background:color-mix(in srgb,var(--beat-fill) var(--mix),var(--cell-bg))}.cell .ghost-dot{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:999px;transform:translate(-50%,-50%);pointer-events:none;background:var(--beat-fill);opacity:.75;box-shadow:0 0 0 4px #0000000f}.cell.has-label .ghost-dot{display:none}.cell.force-hand-r{--beat-fill: var(--down-fill) !important}.cell.force-hand-l{--beat-fill: var(--up-fill) !important}.cell[data-sticking=R]:after,.cell[data-sticking=L]:after{content:attr(data-sticking);position:absolute;bottom:4px;right:6px;font-size:11px;font-weight:800;opacity:.9;color:#fff;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.8)}body.handSplit .cell.force-hand-r,body.handSplit .cell.force-hand-l{background:color-mix(in srgb,var(--beat-fill) var(--mix),var(--cell-bg))}.cell.visual-ding .inner:before{content:"";position:absolute;top:49.5%;left:49.5%;transform:translate(-50%,-50%);width:40%;height:50%;border-radius:50%;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 5px color-mix(in srgb,var(--beat-fill) var(--mix),var(--cell-bg)),inset 0 0 0 7px #fff;z-index:-1;pointer-events:none}body.dark .cell.visual-ding .inner:before{background:transparent;box-shadow:inset 0 0 0 14px #fff}.cell.visual-ding .inner{color:transparent!important}body.handSplit .cell.label-ding:after,body.handSplit .cell.label-t:after,body.handSplit .cell.label-s:after,body.handSplit .cell.label-n:after{content:"";position:absolute;top:50%;width:34%;height:34%;transform:translateY(-50%);pointer-events:none;opacity:.95;background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}body.handSplit .cell.hand-l.label-ding:after,body.handSplit .cell.hand-l.label-t:after,body.handSplit .cell.hand-l.label-s:after,body.handSplit .cell.hand-l.label-n:after{left:6%;background-image:url(/assets/hand-left-DPlgU3z5.webp)}body.handSplit .cell.hand-r.label-ding:after,body.handSplit .cell.hand-r.label-t:after,body.handSplit .cell.hand-r.label-s:after,body.handSplit .cell.hand-r.label-n:after{right:6%;left:auto;background-image:url(/assets/hand-right-CcZJqd0W.webp)}.legend{margin:16px auto 0;max-width:1100px;padding:14px 16px;border-radius:16px;background:#f5f5f5b3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.4);box-shadow:0 20px 60px #0000004d,0 0 0 1px #fff3 inset}body.dark .legend{background:#16161fbf;border-color:#ffffff14;box-shadow:0 20px 60px #00000080}.legend-title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:8px}.legend-row{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:13px;opacity:.85;align-items:center}kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;padding:3px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-border);color:var(--text)}.secondary-controls{margin-top:20px;background:#ffffff0d;padding:10px;border-radius:8px;display:flex;align-items:center;gap:15px}.instance-label{font-weight:700;font-size:.9em;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.secondary-measures{margin-top:10px;border-top:1px dashed rgba(255,255,255,.1);padding-top:10px}.bpm-control{display:flex;align-items:center;gap:8px}.mute-btn{background:none;border:none;cursor:pointer;font-size:1.2em;opacity:.7;transition:opacity .2s}.mute-btn:hover{opacity:1}.mute-btn.muted{filter:grayscale(1);opacity:.3}#confirmModal{z-index:10100}.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:#00000073;z-index:10000;visibility:hidden;pointer-events:none;transition:visibility 0s linear .18s}.modal-overlay.dark-bg{background:#000000a6}.modal-overlay.open{visibility:visible;pointer-events:auto;transition:visibility 0s linear 0s}.modal-overlay .modal,.modal-overlay .modal-content,.modal-overlay .course-modal{opacity:0;transform:scale(.97) translateY(8px);transition:opacity .18s ease,transform .18s ease}.modal-overlay.open .modal,.modal-overlay.open .modal-content,.modal-overlay.open .course-modal{opacity:1;transform:scale(1) translateY(0)}.modal{width:min(520px,100%);background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;padding:16px;box-shadow:0 18px 60px #00000038}.modal-content{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;box-shadow:0 25px 50px #0000004d;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;position:relative;margin:10px auto}.hp-drawer-modal{max-width:400px;padding:0}#chordDrawer.modal-overlay{background:#0000000d}.hp-drawer-modal .drawer-content,.hp-drawer-modal #hpCustomizeControls{padding:16px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 24px;border-bottom:1px solid var(--panel-border);position:sticky;top:0;background:var(--panel);z-index:10;border-radius:16px 16px 0 0}.modal-title{margin:0;font-size:20px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px}.modal-subtitle{font-size:13px;opacity:.75;margin-bottom:12px}.modal-hint{font-size:12px;opacity:.75;margin:8px 2px 12px;font-weight:700}.close-modal-btn{background:transparent;border:none;font-size:28px;color:var(--text-secondary);cursor:pointer;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.close-modal-btn:hover{background:#ffffff1a;color:var(--text)}.modal-grid{display:grid;gap:10px;margin-bottom:10px}.modal-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--panel-border);background:color-mix(in srgb,var(--panel) 92%,var(--btn-bg))}.modal-row span{font-size:14px;font-weight:550}.modal-row input[type=number]{width:120px;padding:10px 12px;border-radius:999px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);text-align:center}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.modal-actions button{padding:10px 16px;border-radius:999px;border:none;font-weight:600;cursor:pointer;transition:transform .1s ease}.modal-actions button:hover{transform:translateY(-1px)}.welcome-modal{width:min(1000px,100%);background:#0d1728;border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:0;overflow:hidden;box-shadow:0 32px 80px #000000a6,0 0 0 1px #c8a9511a;position:relative;margin-bottom:100px}.welcome-modal-actions{position:absolute;top:14px;right:14px;z-index:20;display:flex;align-items:center;gap:8px}.welcome-mute-btn,.welcome-close-btn{background:#00000059;border:1px solid rgba(255,255,255,.14);color:#ffffffa6;width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;flex-shrink:0}.welcome-mute-btn{font-size:15px}.welcome-close-btn{font-size:18px}.welcome-mute-btn:hover,.welcome-close-btn:hover{background:#ffffff1f;color:#fff}.welcome-auth-btn{background:#00000059;border:1px solid rgba(255,255,255,.14);color:#ffffffa6;height:32px;padding:0 12px;border-radius:16px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;white-space:nowrap;transition:background .2s,color .2s;flex-shrink:0}.welcome-auth-btn:hover{background:#ffffff1f;color:#fff}.welcome-dashboard-footer{display:flex;justify-content:right;padding:14px 0 4px;border-top:1px solid rgba(255,255,255,.08);margin-top:12px}.welcome-nowelcome-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#ffffff80;cursor:pointer;-webkit-user-select:none;user-select:none}.welcome-nowelcome-label input[type=checkbox]{cursor:pointer;accent-color:var(--accent, #4a90e2);width:15px;height:15px}.welcome-video-preview{position:relative;width:100%;min-height:300px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:32px 24px;background:linear-gradient(135deg,#0d1728,#1a1040,#0d1728);background-size:300% 300%;animation:welcomeBgShift 10s ease-in-out infinite}@keyframes welcomeBgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.welcome-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;pointer-events:none}.welcome-preview-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0d172840,#0d1728a6);pointer-events:none}.welcome-title-block{position:relative;z-index:2;text-align:center}.welcome-heading{font-size:24px;font-weight:600;margin:0 0 6px;letter-spacing:-.2px;color:#f5efe8}.welcome-subheading{font-size:14px;color:#f5efe88c;margin:0}.welcome-video-player{position:relative;z-index:2;width:min(460px,calc(100% - 32px));aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:#00000073;border:1px solid rgba(200,169,81,.2);box-shadow:0 10px 40px #0000008c}.welcome-play-btn{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0d172873;border:none;cursor:pointer;transition:background .2s}.welcome-play-btn:hover{background:#0d172840}.welcome-play-btn:hover .welcome-play-icon{transform:scale(1.08);box-shadow:0 6px 28px #7b2240bf}.welcome-play-btn span{font-size:13px;font-weight:500;color:#f5efe8bf;letter-spacing:.4px}.welcome-play-icon{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#7b2240,#a83258);display:flex;align-items:center;justify-content:center;padding-left:4px;box-shadow:0 4px 20px #7b22408c;transition:transform .2s ease,box-shadow .2s ease;color:#fff}.welcome-video-player iframe{width:100%;height:100%;border:none;display:block}.welcome-options{display:flex;gap:10px;padding:18px 22px 22px;flex-wrap:wrap;background:#0d1728;border-top:1px solid rgba(255,255,255,.06)}.welcome-btn{flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;letter-spacing:.15px}.welcome-btn:hover{transform:translateY(-2px)}.welcome-btn:active{transform:translateY(0)}.welcome-btn--primary{background:linear-gradient(135deg,#7b2240,#a83258);color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 18px #7b224066}.welcome-btn--primary:hover{background:linear-gradient(135deg,#8c2849,#b83665);box-shadow:0 6px 26px #7b224099}.welcome-btn--ghost{background:#ffffff0a;color:#f5efe8cc;border:1px solid rgba(255,255,255,.1)}.welcome-btn--ghost:hover{background:#ffffff17;border-color:#c8a9514d;color:#f5efe8;box-shadow:0 4px 14px #00000040}.welcome-dashboard{padding:28px 28px 16px;background:#111f35}.welcome-dashboard-header{margin-bottom:22px}.welcome-dashboard-header .welcome-heading{font-size:22px;margin-bottom:4px}.welcome-dashboard-header .welcome-subheading{font-size:14px;color:#f5efe880}.welcome-dashboard-body{display:flex;gap:24px;align-items:flex-start}.welcome-hp-preview{flex:0 0 38%}.welcome-hp-wrap{position:relative;width:100%;padding:14px}.welcome-hp-img{width:100%;height:auto;display:block;border-radius:12px}.welcome-hp-overlay{position:absolute;inset:0;pointer-events:none}.welcome-dashboard-sections{flex:1;min-width:0;display:flex;flex-direction:column;gap:26px;margin-top:20px}.welcome-section-label{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#c8a951bf;margin-bottom:10px}.welcome-section-items{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.welcome-item-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 12px;cursor:pointer;text-align:left;width:100%;min-width:0;display:flex;flex-direction:row;align-items:center;gap:10px;transition:background .15s,border-color .15s,transform .15s}.welcome-item-card:hover{background:#ffffff14;border-color:#c8a95138;transform:translateY(-2px)}.welcome-item-card.active{background:#c8a9511a;border-color:#c8a95180;box-shadow:0 0 0 1px #c8a95133}.welcome-item-card.active:after{content:"Open";font-size:10px;color:#c8a951b3;white-space:nowrap;margin-left:auto;flex-shrink:0}.welcome-item-icon{font-size:16px;flex-shrink:0;line-height:1}.welcome-item-text{display:flex;flex-direction:column;gap:2px;min-width:0}.welcome-item-name{font-size:13px;font-weight:600;color:#f0e8e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.welcome-item-meta{font-size:11px;color:#f5efe861}.welcome-dash-empty{font-size:13px;color:#f5efe847;padding:2px 0;font-style:italic;grid-column:1 / -1}@media(max-width:768px){.modal,.modal-content,.course-modal{max-height:90dvh;overflow-y:auto}.welcome-options{flex-direction:column;padding:14px 16px 38px}.welcome-video-preview{min-height:260px;gap:16px;padding:28px 16px}.welcome-heading{font-size:20px;padding-top:25px}.welcome-section-items{grid-template-columns:1fr;width:100%}.welcome-item-card{width:100%}.welcome-dashboard{padding:20px 16px 12px}.welcome-hp-preview{display:none}.welcome-dashboard-sections{margin:10px 0}.welcome-modal{margin-bottom:0}}.song-library-modal{width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column}.song-list-container{flex:1;overflow-y:auto;margin-top:15px;border:1px solid var(--panel-border);border-radius:8px;background:#0000001a}.song-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--panel-border);transition:background .2s;cursor:pointer}.song-item:last-child{border-bottom:none}.song-item:hover{background:var(--panel-hover)}.song-info{display:flex;flex-direction:column;gap:4px}.song-title{font-weight:600;font-size:16px;color:var(--text)}.song-meta{font-size:12px;color:var(--text-secondary);display:flex;gap:10px;align-items:center}.compat-badge{font-size:11px;padding:2px 6px;border-radius:4px;font-weight:700;text-transform:uppercase}.compat-full{background:#2ecc7133;color:#2ecc71;border:1px solid rgba(46,204,113,.3)}.compat-partial{background:#f1c40f33;color:#f1c40f;border:1px solid rgba(241,196,15,.3)}.compat-none{background:#e74c3c33;color:#e74c3c;border:1px solid rgba(231,76,60,.3)}.song-actions{display:flex;gap:8px}.song-load-btn{padding:6px 12px;font-size:13px;background:var(--primary);color:#fff;border:none;border-radius:4px;cursor:pointer}.song-delete-btn{background:none;border:none;font-size:16px;cursor:pointer;opacity:.5;transition:opacity .2s}.song-delete-btn:hover{opacity:1}body.present{height:100dvh;height:var(--app-height, 100dvh);margin:0;overflow:hidden;--horizon: 20%;--measure-top: 144px}body.present{padding:0;display:flex;flex-direction:column}body.present #aiFab{display:none}body.present .container,body.present .main,body.present .left{height:100%;display:flex;flex-direction:column;width:100%;max-width:100%;padding:0;flex-grow:1}body.present.mode-gravity .container{position:relative;z-index:10}body.present h2,body.present .pattern-row,body.present .controls,body.present #controls-B,body.present .legend,body.present .footer{display:none!important}body.present .labels{max-width:1200px;font-size:32px;opacity:.85;margin-bottom:16px}body.present .grid{max-width:1200px;gap:16px}body.present .cell .inner{font-size:44px}.present-exit{position:fixed;top:14px;right:14px;z-index:50;display:none;padding:10px 14px;border-radius:999px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);cursor:pointer;font-weight:600;box-shadow:0 8px 30px #0000001f;z-index:10000}body.present .present-exit{display:inline-flex;align-items:center;gap:8px}@media(max-width:600px){body.present .labels{font-size:22px}body.present .cell .inner{font-size:36px}body.present .grid{gap:12px}}body.present #measures{position:relative!important;display:block!important;flex-grow:1;height:100%!important;min-height:0;overflow:hidden;margin:0 auto;min-width:900px}body.present .measure-row{position:fixed;left:50%;top:var(--measure-top);transform:translate(-50%) translateY(-60px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;display:block!important;width:600px}body.present .static-labels{position:fixed;top:calc(var(--measure-top) + 70px);left:50%;transform:translate(-50%);width:600px;display:grid!important;grid-template-columns:repeat(var(--cols, 16),1fr);gap:12px;text-align:center;font-size:24px;font-weight:600;color:var(--text);z-index:20;pointer-events:none}body.present .static-labels div{text-align:center}body.present .measure-row.current-measure{transform:translate(-50%) translateY(0);opacity:1;pointer-events:auto;z-index:10;width:600px;transition:opacity .3s ease,transform .3s ease}body.present .measure-row.next-measure{transform:translate(-50%) translateY(116px);opacity:.4;pointer-events:none;z-index:5;width:520px;transition:opacity .3s ease}body.present .measure-row.next-measure-2{opacity:0}body.present .handpan-panel{position:fixed;max-width:400px;left:50%;top:calc(var(--horizon) + 20vh);bottom:auto;transform:translate(-50%);z-index:100;background:transparent;box-shadow:none;border:none;display:flex!important;flex-direction:column;align-items:center;width:auto;pointer-events:none}body.present .left{width:100%;max-width:100%;float:none;margin:0}body.present .measure-tools{display:none!important}body.present .measure{grid-template-columns:repeat(var(--cols, 16),1fr)!important;width:100%;justify-content:center}body.present .add-measure{display:none!important}body.present .current-measure .sub-dot{width:30px;height:30px;font-size:24px}body.present .handpan-header,body.present .hp-settings-panel,body.present #ghostNoteSection,body.present .lesson-panel{display:none!important}body.present .handpan-wrap{margin:0}body.present .measure-header,body.present .labels{display:none!important}body.present .grid,body.present .grid.playback-mode{grid-template-columns:repeat(var(--cols, 16),1fr)!important;gap:12px}body.present .grid.playback-mode .hand-column.right{margin-bottom:0;margin-left:0}body.present #measures hr{display:none!important}body.present div.present-controls{display:flex!important;position:fixed;bottom:3vh;left:50%;transform:translate(-50%)}.presentation-mode-select{display:flex;flex-direction:row;align-items:center;gap:8px;background:var(--panel);padding:4px 12px;border-radius:999px;border:1px solid var(--panel-border);height:50px;box-sizing:border-box;margin-right:16px}.presentation-mode-select label{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}.presentation-mode-select select{background:transparent;border:none;color:var(--text);font-weight:500;font-size:14px;padding:0 4px;cursor:pointer;outline:none}.presentation-mode-select select:focus{color:#6366f1}@media(max-width:768px){body.present{padding:0;overflow-x:hidden}body.present #measures{min-width:unset;width:100%}body.present .handpan-wrap{transform:translate(0) scale(.8)!important;bottom:10vh;top:auto;width:90vw!important;max-width:90vw!important}body.stream .static-labels{display:none!important}body.present{--measure-top: 108px}body.present .static-labels{font-size:18px;width:90vw!important;max-width:90vw!important}body.present .measure-row.current-measure{width:90vw!important;max-width:90vw!important}body.present .measure-row.next-measure{width:78vw!important;max-width:78vw!important}body.present .grid{gap:10px!important}body.present .quad-container{width:70%}body.present .handpan-panel{top:55vh;width:100%!important;max-width:400px;transform:translate(-50%) scale(1.3)!important}body.present .handpan-img{width:100%;margin-top:20px}body.present div.present-controls{position:fixed;bottom:5vh}}.stream-view{position:absolute;top:0;left:0;width:100vw;height:100dvh;height:var(--app-height, 100dvh);overflow:hidden;background:var(--bg);display:none;z-index:0}body.present.mode-gravity .stream-view{z-index:20;pointer-events:none}#stream-canvas{width:100%;height:100%;display:block}body.present.mode-stream .measure-row,body.present.mode-gravity .measure-row,body.present.mode-stream .static-labels,body.present.mode-gravity .static-labels,body.present.mode-stream .handpan-panel,body.present.mode-stream .labels,body.present.mode-gravity .labels{display:none!important}body.present.mode-gravity .handpan-panel{display:flex!important;position:absolute;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;bottom:auto;background:transparent!important;border:none!important;box-shadow:none!important;width:auto;pointer-events:none;z-index:100;opacity:.9}body.present.mode-gravity .handpan-wrap{width:500px!important;height:500px!important;transform:scale(1);background:transparent}body.present.mode-stream .stream-view,body.present.mode-gravity .stream-view{display:block}body.present.mode-stream .stream-view{background:var(--btn-bg)}body.present.mode-gravity .stream-view{background:transparent}#presentationDashboard{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:10002;display:flex;align-items:center;justify-content:center;padding:20px}#presentationDashboard:before{content:"";position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}@keyframes rhythmicPulse{0%{transform:translateZ(0) scale(1);box-shadow:0 0 #4f8cff00}15%{transform:translateZ(0) scale(1.1);box-shadow:0 0 0 4px var(--play-glow)}to{transform:translateZ(0) scale(1);box-shadow:0 0 #4f8cff00}}body.present.mode-gravity .hp-dot.active:after{animation:rhythmicPulse 1s cubic-bezier(.22,1,.36,.1) forwards;animation-delay:var(--hp-pulse-delay, 0s);z-index:50}body.present .main{display:block!important;width:100%}body.present div.handpan-tabs{display:none!important}body.present .transport-container:not(#presentationControls){display:none!important}.dashboard-panel{position:relative;width:100%;max-width:600px;background:rgba(var(--panel-rgb),.85);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:32px;box-shadow:0 20px 50px #00000080;animation:dashPop .3s cubic-bezier(.34,1.56,.64,1)}.dashboard-panel:before{content:"";position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}@keyframes dashPop{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.dashboard-header h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--text)}.dashboard-grid{display:grid;grid-template-columns:1fr;gap:24px;max-height:80vh;overflow-y:auto;padding-right:8px}.dashboard-grid::-webkit-scrollbar{width:6px}.dashboard-grid::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.dashboard-section{display:flex;flex-direction:column;gap:10px}.dashboard-section label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.6;font-weight:700;color:var(--text)}.dash-row{display:flex;gap:12px}.dash-col{display:flex;flex-direction:column;gap:12px}.dash-pill{flex:1;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:var(--text);font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.dash-pill:hover{background:#ffffff1a;border-color:#ffffff4d}.dash-pill.active{background:#9671ecf8;color:#fff;border-color:transparent;box-shadow:0 4px 12px #6366f14d}.dash-pill.loading:after{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:dashSpin .8s linear infinite;margin-left:8px}@keyframes dashSpin{to{transform:rotate(360deg)}}.dash-select{width:100%;height:48px;border-radius:12px;background:rgba(var(--panel-rgb),.5);border:1px solid rgba(255,255,255,.1);color:var(--text);padding:0 16px;font-size:15px;cursor:pointer}.dash-aesthetic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}#presentationControls button.dashboard-toggle{background:#ffffff1a;margin-left:10px;font-size:18px;padding:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text)}#presentationControls button.dashboard-toggle:hover{background:#fff3;transform:rotate(45deg);transition:transform .3s ease,background .2s ease}#stream-view.css-sky-mode{overflow:hidden;background:linear-gradient(to bottom,#87ceeb,#e0f7fa)}#video-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-5;opacity:.8;pointer-events:none}#stream-view.css-sky-mode:after{content:"";position:absolute;inset:0;z-index:-4;background:radial-gradient(circle at center,transparent 30%,rgba(255,255,255,.2) 100%);pointer-events:none}#stream-view.css-beach-mode{overflow:hidden;background:linear-gradient(to bottom,#054a91,#3e92cc,#a0dce4)}#stream-view.css-beach-mode:before{content:"";position:absolute;top:-150%;left:-150%;width:400%;height:400%;opacity:.28;pointer-events:none;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg width='400' height='100' viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 C 100 20, 200 80, 400 50' stroke='white' stroke-width='2' fill='none' stroke-opacity='0.6' /%3E%3C/svg%3E");background-size:350px 175px;background-repeat:repeat;transform-origin:center;transform:perspective(600px) rotateX(60deg) rotate(0) translateZ(0);animation:natureFlowDirect 12s linear infinite;will-change:transform;backface-visibility:hidden}#stream-view.css-beach-mode .wave-layer-2,#stream-view.css-beach-mode .wave-layer-3{display:none}@keyframes natureFlowDirect{0%{background-position:0 0;transform:perspective(600px) rotateX(60deg) rotate(0) scaleY(1) translateZ(0)}50%{transform:perspective(600px) rotateX(60deg) rotate(0) scaleY(1.15) translateZ(0)}to{background-position:0 175px;transform:perspective(600px) rotateX(60deg) rotate(0) scaleY(1) translateZ(0)}}#stream-view.css-beach-mode:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(to bottom,#023e8a,#0096c7 40%,#48cae4 70%,#d4a373 95%);pointer-events:none}body.present div#exportAudioBtnContainer{display:none}.main{display:flex;gap:4px;align-items:stretch;flex:1;min-height:0;min-width:0;max-width:1500px;width:100%;margin:0 auto;box-sizing:border-box}.left{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}@media(max-width:768px){.left{flex:0 0 100%;max-width:100%}}@media(min-width:901px){body.sidebar-open:not(.present) .sidebar.open{width:25vw}body.sidebar-open:not(.present){padding-left:25vw}body.sidebar-open:not(.present) div.container{width:100%;margin:0}body.sidebar-open:not(.present) .main{max-width:none}body.sidebar-open:not(.present) .handpan-panel{flex:1 1 0;max-width:none;min-width:0;overflow:hidden}body.sidebar-open:not(.present) .left{flex:2 1 0;min-width:0}}.handpan-panel{flex:0 1 450px;max-width:450px;min-width:0;position:sticky;top:16px;align-self:flex-start;display:flex;flex-direction:column;z-index:1001}@keyframes handpanBreathe{0%{transform:scale(1);filter:drop-shadow(0 8px 24px rgba(0,0,0,.12))}to{transform:scale(1.02);filter:drop-shadow(0 14px 36px rgba(0,0,0,.2))}}.handpan-wrap{position:relative;width:100%;padding:14px;animation:handpanBreathe 5s ease-in-out infinite alternate;will-change:transform;transform-origin:center center}.handpan-img{width:100%;height:auto;display:block;border-radius:14px;opacity:1;transition:opacity .4s ease}.handpan-img.loading{opacity:0}.handpan-overlay{position:absolute;inset:14px;pointer-events:none;opacity:1;transition:opacity .4s ease}.handpan-overlay.loading{opacity:0}@media(max-width:900px){.main{flex-direction:column}.handpan-panel{position:relative;width:100%;flex:none;max-width:100%;transform:translateZ(0);backface-visibility:hidden}}.hp-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;pointer-events:none;text-shadow:4px 4px 4px black;z-index:10;transition:color .2s,text-shadow .2s;transform:translate(-50%,-50%) translateZ(0);will-change:transform,opacity;backface-visibility:hidden}[data-model=Sketch] .hp-label{color:#000;text-shadow:none}[data-model=Bronze] .hp-label{color:#fff;text-shadow:4px 4px 4px black}.hp-dot{position:absolute;transition:opacity .12s ease;border-radius:50%;pointer-events:auto;cursor:pointer;font-size:24px;will-change:transform,opacity;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.hp-visual{content:"";display:block;position:absolute;inset:0;border-radius:50%;background:#fff0;transition:transform .8s cubic-bezier(.22,1,.36,1),box-shadow .8s cubic-bezier(.22,1,.36,1),background-color .12s ease,border-color .12s ease;will-change:transform,opacity}.hp-dot.active .hp-visual{z-index:50}body:not(.dark) .hp-dot .hp-visual{border-color:#2f2f2f8c}.hp-dot[data-note=T] .hp-visual,.hp-dot[data-note=S] .hp-visual{border-color:#000000c4}body:not(.dark) .hp-dot[data-note=T] .hp-visual,body:not(.dark) .hp-dot[data-note=S] .hp-visual{border-style:dashed;border-color:#000;opacity:.65}.hp-dot.hp-down .hp-visual{border-color:color-mix(in srgb,var(--down-fill) 70%,transparent);background:color-mix(in srgb,var(--down-fill) 50%,transparent)}.hp-dot.hp-up .hp-visual{border-color:color-mix(in srgb,var(--up-fill) 70%,transparent);background:color-mix(in srgb,var(--up-fill) 50%,transparent)}.hp-dot.active.hp-down .hp-visual{box-shadow:0 0 0 10px color-mix(in srgb,var(--down-fill) 22%,transparent)}.hp-dot.active.hp-up .hp-visual{box-shadow:0 0 0 10px color-mix(in srgb,var(--up-fill) 22%,transparent)}body.no-sticking .hp-dot.hp-down .hp-visual,body.no-sticking .hp-dot.hp-up .hp-visual{border-color:#ffffffb3!important;background:#fff6!important}body.no-sticking .hp-dot.active.hp-down .hp-visual,body.no-sticking .hp-dot.active.hp-up .hp-visual{box-shadow:0 0 0 10px #ffffff38!important}span.note-label{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;font-weight:700;font-size:1.5em}span.note-label.light-text{color:#fff}.hp-dot.other-side{z-index:10}.hp-dot.other-side .hp-visual{border-style:dashed;border-color:#fff6;background:#0003;opacity:.6}body:not(.dark) .hp-dot.other-side .hp-visual{border-color:#0000004d;background:#fff3}.hp-dot.other-side.active .hp-visual{border-style:solid;opacity:1}body .handpan-overlay{pointer-events:auto}body.calibrating .hp-dot{opacity:1;pointer-events:auto;cursor:grab}body.calibrating .hp-dot .hp-visual{background:#ffffff40;border:2px solid rgba(255,255,255,.8);box-shadow:0 0 10px #0000001a}body.dark.calibrating .hp-dot .hp-visual{background:#ffffff26;border-color:#fff9}body.calibrating .hp-dot.selected{opacity:1;outline:3px solid rgba(255,209,102,.9);outline-offset:2px;box-shadow:0 0 0 10px #ffd1662e}body.dark.calibrating .hp-dot.selected{outline-color:#5b8cfff2;box-shadow:0 0 0 10px #5b8cff33}div.under-handpan{position:relative;height:48px;display:flex;justify-content:center;align-items:center;margin-top:5px;padding-bottom:10px;flex-shrink:0;z-index:10}div.under-handpan.pill-group button{height:100%;margin:0;border-radius:0;border-right:1px solid rgba(255,255,255,.1);width:auto;min-width:60px;max-width:100px;padding:0 20px;position:static;transform:none;font-size:20px;color:var(--text);display:flex;justify-content:center;align-items:center}div.under-handpan.pill-group button:last-child{border-right:none}div.under-handpan.pill-group button:first-child{border-top-left-radius:999px;border-bottom-left-radius:999px;padding-left:25px}div.under-handpan.pill-group button:last-child{border-top-right-radius:999px;border-bottom-right-radius:999px;padding-right:25px}div.under-handpan.pill-group button:disabled{opacity:.4;cursor:not-allowed}div.under-handpan button img{height:100%}div.lock-btn{display:none;position:absolute;top:10px;right:10px;z-index:100}.present-controls{margin-top:10px;justify-self:center}.present-controls .bpm-group{display:inline-flex;margin:0 10px}@media(max-width:768px){div.lock-btn{display:block;width:30px;height:30px;top:10px;right:10px;position:absolute;z-index:100}.handpan-wrap{max-width:260px;margin:0 auto;padding:0 8px;transform:translateZ(0);backface-visibility:hidden}}.handpan-header{display:flex;align-items:center;justify-content:space-between}.handpan-header h3{margin:0;font-size:16px;font-weight:600;opacity:.9}.icon-btn{background:transparent;border:none;font-size:32px;cursor:pointer;padding:8px;border-radius:50%;transition:background .2s;opacity:.6}.icon-btn:hover,.icon-btn.active{background:#0000000d;opacity:1}body.dark .icon-btn:hover,body.dark .icon-btn.active{background:#ffffff1a}.hp-settings-panel{background:var(--panel);border:1px solid var(--panel-border);padding:16px;border-radius:12px;margin-bottom:20px;animation:slideDown .2s ease-out}.setting-row{margin-bottom:12px;display:flex;flex-direction:column;gap:6px}.setting-row label{font-size:13px;opacity:.7;font-weight:500}.setting-row select{width:100%}.handpan-tabs{display:flex;justify-content:center;align-items:center;width:100%;padding:0 10px;gap:12px;margin-bottom:8px;margin-top:8px}.tab-btn-row{margin-top:5px}.tab-btn{background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:10px 14px;font-size:20px;cursor:pointer;transition:all .2s;color:var(--text);line-height:1;display:flex;align-items:center;justify-content:center}@media(max-width:768px){.handpan-tabs{justify-content:space-between;margin-top:5px;margin-bottom:5px}.tab-btn{font-size:16px;width:30px;height:30px}}.tab-btn:hover{background:var(--btn-bg);transform:translateY(-1px)}.tab-btn.active{background:var(--btn-active);border-color:var(--primary);color:#fff;box-shadow:0 4px 12px #6366f14d}.tab-pane{z-index:3000;position:fixed;top:50%;left:auto;right:50%;transform:translate(50%,-50%);width:380px;max-width:90%;display:none;background:var(--offwhite);border:1px solid var(--offwhite);border-radius:12px;padding:16px;box-shadow:0 25px 80px #00000080;animation:pureFadeIn .2s ease;overflow-y:auto;max-height:75vh}@media(max-width:1200px){.tab-pane{right:524px}}@media(max-width:768px){.tab-pane{top:30%;left:50%;transform:translate(-50%,-50%);width:92%;max-width:400px;height:auto;max-height:80vh;margin:0;box-shadow:0 15px 50px #0009;z-index:3000}}.drawer-backdrop{position:fixed;inset:0;background:#0000001a;z-index:2999;display:none;animation:pureFadeIn .2s ease}.drawer-backdrop.active{display:block}.tab-pane:before{content:"";position:absolute;background:#fffffff2;border:1px solid rgba(255,255,255,.5);position:relative;z-index:1}.course-progress-overlay:before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(var(--panel-rgb),.9);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}.tab-pane.active{display:block}@keyframes pureFadeIn{0%{opacity:0}to{opacity:1}}#chordList.drawer-content{display:flex;flex-wrap:wrap;gap:8px;max-height:220px;overflow-y:auto;padding:2px;justify-content:center}.empty-state{width:100%;text-align:center;padding:20px;opacity:.6;font-size:13px;font-style:italic}.chord-chip{display:flex;flex-direction:column;padding:6px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--panel-border);cursor:pointer;transition:all .2s;min-width:80px;text-align:center}.chord-chip:hover,.chord-chip.active{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a;border-color:var(--primary)}.chord-root{font-weight:700;font-size:14px}.chord-qual{font-size:10px;text-transform:uppercase;opacity:.7;letter-spacing:.5px}.chord-notes{font-size:9px;opacity:.5;margin-top:2px}.chord-chip.major{background:linear-gradient(135deg,#ffd7001a,#ffa5000d);border-color:#ffd7004d}.chord-chip.major .chord-root{color:#d97706}body.dark .chord-chip.major .chord-root{color:#fbbf24}.chord-chip.minor{background:linear-gradient(135deg,#6366f11a,#8b5cf60d);border-color:#6366f14d}.chord-chip.minor .chord-root{color:#4f46e5}body.dark .chord-chip.minor .chord-root{color:#818cf8}.chord-chip.diminished{background:#0000000d;border-style:dashed}.hp-dot.chord-highlight .hp-visual{background-color:var(--primary)!important;box-shadow:0 0 0 8px #6366f166!important;transform:scale(1.1);transition:all .1s}.hp-loading-overlay{position:absolute;inset:14px;background:#ffffff1a;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease;color:var(--text);font-weight:600}.hp-loading-overlay:before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(var(--panel-rgb),.9);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}.hp-loading-overlay.active{opacity:1;pointer-events:auto}.hp-loader{width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-left-color:var(--primary);border-radius:50%;animation:hp-spin 1s linear infinite;margin-bottom:12px}body.dark .hp-loader{border-color:#ffffff1a;border-left-color:#818cf8}@keyframes hp-spin{to{transform:rotate(360deg)}}.flip-btn{position:absolute;top:10px;left:10px;z-index:100;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:background .2s}.flip-btn:before{content:"";position:absolute;inset:0;border-radius:inherit;background:#ffffff80;z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}.flip-btn:hover{background:#fff6}#myScalesModal .modal{width:700px}#myScalesModal .modal-content{padding:20px}#handpanOverlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;display:flex;justify-content:center;align-items:center}.overlay-highlight{position:absolute;border-radius:50%;background:radial-gradient(circle,#fffc,#fff0 70%);opacity:0;transform:scale(.5);transition:opacity .1s,transform .1s}.overlay-highlight.active{opacity:1;transform:scale(1.2)}.v-hand-layer{position:absolute;inset:14px;pointer-events:none;z-index:20;overflow:hidden}.v-hand{position:absolute;width:40px;height:40px;border-radius:50%;background:#ffffff26;border:1px solid rgba(255,255,255,.4);box-shadow:0 4px 12px #0003,inset 0 0 10px #ffffff1a;transform:translate(-50%,-50%);will-change:transform,left,top;transition:top .15s cubic-bezier(.25,.46,.45,.94),left .15s cubic-bezier(.25,.46,.45,.94),transform .1s ease-out,opacity .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-main, sans-serif);font-weight:700;font-size:14px;opacity:0}.v-hand.h-left{background:#64c8ff33;border-color:#64c8ff80;box-shadow:0 0 15px #64c8ff4d}.v-hand.h-right{background:#ff646433;border-color:#ff646480;box-shadow:0 0 15px #ff64644d}.v-hand.active{opacity:1}.v-hand.striking{transform:translate(-50%,-50%) scale(1.3);background:#fff6;z-index:100!important}.shared-banner{max-width:900px;margin:0 0 14px;padding:12px 14px;border-radius:16px;background:var(--panel);border:1px solid var(--panel-border);display:flex;align-items:center;justify-content:space-between;gap:12px}.shared-title{font-weight:700;font-size:14px}.shared-sub{font-size:12px;opacity:.75;margin-top:2px}.shared-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}@keyframes shared-btn-shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes shared-btn-pulse{0%,to{box-shadow:0 0 #6366f180,0 0 6px 1px #6366f140}50%{box-shadow:0 0 0 4px #6366f100,0 0 12px 3px #6366f166}}#sharedCompAddBtn.sparkle{background-size:200% auto;background-image:linear-gradient(105deg,#4f46e5,#6366f1 35%,#c4b5fd,#6366f1 65%,#4f46e5);color:#fff;border:none;animation:shared-btn-shimmer 1.8s linear infinite,shared-btn-pulse 2s ease-in-out infinite}.cell.range{box-shadow:0 0 0 4px #6366f1;position:relative}.cell.range:before{content:"";position:absolute;inset:0;border-radius:50%;background:#6366f1;opacity:.3;pointer-events:none;z-index:0}body.dark .cell.range{box-shadow:0 0 0 6px #eaeaf029}.sel-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:2000;padding:10px 12px;border-radius:16px;background:var(--panel);border:1px solid var(--panel-border);box-shadow:0 18px 60px #00000038;display:flex;align-items:center;justify-content:space-between;gap:12px}.sel-bar-text{font-weight:650;font-size:13px;opacity:.85}.sel-bar-actions{display:flex;gap:10px;flex-wrap:wrap}@media(max-width:768px){.sel-bar-actions button{padding:8px 12px}}.measure-tools{align-self:flex-start;display:inline-flex;align-items:center;padding:6px;margin-bottom:15px;margin-left:10px;border-radius:20px;background:var(--panel);border:1px solid var(--panel-border);box-shadow:0 4px 12px #00000014;z-index:501}.measure-group{display:flex;align-items:center}.selection-group{display:flex;align-items:center;gap:8px;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .3s ease}.selection-group button{width:auto!important;min-width:fit-content;flex-shrink:0;height:40px;padding:0 16px}.selection-group.visible{max-width:800px;opacity:1}.separator{width:2px;height:20px;background:var(--panel-border);margin:0 5px;opacity:.8}.measure-tools-label{font-size:12px;font-weight:650;opacity:.75;margin:0 auto}.measure-row{margin-bottom:18px;pointer-events:none}.measure-header{font-size:12px;opacity:.65;margin:0 0 8px 2px}.mobile-only{display:none!important}@media(max-width:768px){.desktop-only{display:none!important}.mobile-only{display:flex!important}.measure-tools{width:85vw;z-index:2000}#measureTools:not(:has(.selection-group.visible)){display:none!important;padding:0!important;margin:0!important}#measureTools:has(.selection-group.visible){display:block!important}#selectionToolsWrapper{width:100%;margin:0;padding:0}.selection-group{padding:0 4px!important;flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:flex-start!important;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;width:100%}.selection-group::-webkit-scrollbar{display:none}.selection-group .sel-bar-text{flex-shrink:0;margin-right:8px;font-size:13px;font-weight:700}}.course-modal{width:min(800px,95vw);max-height:90vh;overflow:hidden;border-radius:20px;box-shadow:0 20px 50px #0000004d;background:#fffffff7;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);padding:0;border:1px solid rgba(255,255,255,.4);display:flex;flex-direction:column}body.dark .course-modal{background:#1a1a23fa;border:1px solid rgba(255,255,255,.1)}.course-modal .modal-header{padding:24px 32px;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:static;border-radius:0}body.dark .course-modal .modal-header{border-bottom:1px solid rgba(255,255,255,.06)}.close-btn{background:transparent;border:none;font-size:24px;color:var(--text);opacity:.5;cursor:pointer;transition:opacity .2s;padding:4px;border-radius:50%}.close-btn:hover{opacity:1;background:#0000000d}.course-form{padding:32px;overflow-y:auto;flex:1}input[type=text],textarea{background:#fff9;border:1px solid rgba(0,0,0,.1);color:var(--text);border-radius:999px;padding:14px 24px;font-size:15px;width:100%;margin-bottom:16px;font-family:inherit;box-shadow:inset 0 2px 4px #00000005}body.dark input[type=text],body.dark textarea{background:#0000004d;border:1px solid rgba(255,255,255,.1)}textarea{border-radius:20px;min-height:120px}input[type=text]:focus,textarea:focus{outline:none;border-color:var(--btn-active);background:var(--panel);box-shadow:0 0 0 4px var(--play-glow)}.full-width{width:100%}.section-builder{background:#ffffff80;border:1px solid rgba(0,0,0,.05);padding:0;border-radius:8px;margin-top:4px;box-shadow:none;position:relative}body.dark .section-builder{background:#ffffff08;border:1px solid rgba(255,255,255,.05)}.section-header{display:flex;gap:15px;margin-bottom:20px}.lesson-builder{background:var(--panel);margin-top:3px;padding:0;border-radius:6px;border:1px solid var(--panel-border);display:flex;flex-direction:column;position:relative}.lesson-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;opacity:.9}.lesson-actions{display:flex;gap:10px}.lesson-meta button.remove-btn{background:transparent;color:#e74c3c;border:1px solid rgba(231,76,60,.3);padding:6px 14px;border-radius:999px;font-size:11px}.lesson-meta button.remove-btn:hover{background:#e74c3c1a;border-color:#e74c3c}button{cursor:pointer;font-family:inherit;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1)}.secondary-btn{background:#ffffff80;border:2px dashed var(--panel-border);color:var(--text);padding:12px 24px;border-radius:999px;font-size:14px;opacity:.7;display:inline-flex;align-items:center;justify-content:center;gap:6px}.secondary-btn:hover{border-color:var(--text);background:#fffc;transform:translateY(-4px);box-shadow:0 4px 15px #fff6}.primary-btn{background:var(--primary-color);color:#3b3005;border:none;padding:8px 20px;border-radius:999px;font-size:16px;font-weight:600;box-shadow:0 4px 15px #f1c40f66;margin-top:0;display:inline-flex;align-items:center;justify-content:center;gap:6px}.primary-btn:hover{background:#f3ce38;transform:translateY(-2px);box-shadow:0 8px 25px #f1c40f80}body.dark .primary-btn{background:#f1c40f;color:#000}.add-lesson-btn{background:#e8ecf6;color:#34495e;border:none;padding:8px 16px;border-radius:999px;font-size:13px;white-space:nowrap;width:100%;margin-top:15px;border:1px dashed rgba(52,73,94,.2)}.add-lesson-btn:hover{background:#dce3f3;color:#1e2b37;border-style:solid}body.dark .add-lesson-btn{background:#2c3e5080;color:#ecf0f1;border-color:#ecf0f133}.section-header button{background:#e8ecf6;color:#34495e;border:none;padding:0 20px;border-radius:999px;font-size:13px;white-space:nowrap}.section-header button:hover{background:#dce3f3;color:#1e2b37}body.dark .section-header button{background:#2c3e50;color:#ecf0f1}.lesson-meta button.small-btn{background:#e8ecf6;color:#34495e;border:none;padding:6px 16px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.3px}.lesson-meta button.small-btn:hover{background:#f1c40f;box-shadow:0 2px 10px #f1c40f4d}.modal-footer{flex-shrink:0;padding:20px 32px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(0,0,0,.03)}.section-header-bar{display:flex;align-items:center;gap:8px;padding:5px 8px;margin-bottom:0}.section-title-input{flex:1}.section-title-input input{margin-bottom:0;font-weight:600;font-size:13px;letter-spacing:-.5px;background:transparent;border:none;border-radius:0;padding:0}.section-title-input input:focus{background:transparent;box-shadow:none;outline:none;border-bottom:1px solid var(--btn-active)}.toggle-btn{background:transparent;border:none;font-size:14px;color:var(--text);width:24px;height:24px;display:flex;align-items:center;justify-content:center;opacity:.6;border-radius:4px}.toggle-btn:hover{background:#0000000d;opacity:1}.drag-handle{cursor:grab;font-size:18px;opacity:.4;padding:4px}.drag-handle:hover{opacity:1}.lesson-drag-handle{position:absolute;left:6px;top:50%;transform:translateY(-50%);cursor:grab;font-size:14px;font-weight:700;opacity:.3;color:var(--text);padding:8px}.lesson-drag-handle:hover{opacity:.8}.lessons-container{display:none;padding-left:10px}.lessons-container.active{display:block;padding:8px 10px 10px;animation:slideDown .2s ease-out}.lesson-builder{padding-left:36px}.section-builder .add-lesson-btn{margin-left:10px;width:auto;padding:8px 20px}.dragging{opacity:.5;transform:scale(.99);box-shadow:0 10px 20px #0000001a}.lesson-builder{padding:0;overflow:hidden}.lesson-header-bar{display:flex;align-items:center;padding:4px 8px;cursor:pointer;background:#ffffff05}.lesson-header-bar:hover{background:#ffffff0d}.lesson-drag-handle{position:static;transform:none;margin-right:4px;padding:2px}.lesson-toggle-btn{margin-right:4px;font-size:12px}.lesson-title-input{flex:1;border:none;background:transparent;padding:0 4px;font-size:13px;font-weight:500;margin-bottom:0;box-shadow:none}.lesson-title-input:hover{background:#00000008}.lesson-title-input:focus{background:var(--bg);box-shadow:inset 0 0 0 1px var(--btn-active)}.lesson-content{display:none;padding:16px 24px 24px;border-top:1px solid rgba(0,0,0,.05);background:#00000005}.lesson-content.active{display:block}.remove-btn-small{color:#e74c3c;opacity:.5;font-size:16px;padding:4px 8px}.remove-btn-small:hover{opacity:1;background:#e74c3c1a}.input-with-icon{position:relative;display:flex;align-items:center;margin-bottom:12px}.input-with-icon span{position:absolute;left:12px;opacity:.5;font-size:14px}.input-with-icon input{padding-left:36px;margin-bottom:0}.lesson-meta-box .meta-label{font-size:11px;font-weight:700;opacity:.6;margin-bottom:6px;letter-spacing:.5px}.pattern-control-row{display:flex;gap:8px;width:100%}.small-capture-btn{background:transparent;border:1px solid var(--panel-border);border-radius:8px;padding:0 10px;cursor:pointer;font-size:16px;transition:all .2s}.small-capture-btn:hover{background:var(--btn-active);border-color:var(--btn-active);color:#000}.drop-target{border:2px dashed var(--btn-active)!important;background:#f1c40f0d!important}.course-structure-toolbar{display:flex;justify-content:flex-end;margin-bottom:6px}.compact-sections-btn{background:none;border:1px solid var(--panel-border);border-radius:8px;padding:3px 10px;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;opacity:.55;transition:opacity .15s,background .15s}.compact-sections-btn:hover{opacity:1;background:var(--btn-bg)}#courseCopierModal .course-modal{max-width:960px;width:95vw;max-height:90vh;display:flex;flex-direction:column;padding:0}#courseCopierModal .course-modal>div[style*="display:flex"]{flex:1;min-height:0;padding:0 32px}.copier-col{flex:1;display:flex;flex-direction:column;border:1px solid var(--panel-border);border-radius:14px;overflow:hidden;background:#ffffff08;min-width:0}body.dark .copier-col{background:#ffffff05}.copier-col-header{padding:16px;border-bottom:1px solid var(--panel-border);background:#0000000a;flex-shrink:0}body.dark .copier-col-header{background:#ffffff08}.copier-course-select{width:100%;padding:9px 14px;border-radius:8px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);font-size:14px;font-family:inherit;cursor:pointer}.copier-course-select:focus{outline:none;border-color:var(--btn-active);box-shadow:0 0 0 3px var(--play-glow)}.copier-search-input{width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease;margin-bottom:0!important}.copier-search-input::placeholder{opacity:.5}.copier-search-input:focus{outline:none;border-color:var(--btn-active);box-shadow:0 0 0 3px var(--play-glow)}.copier-col-body{flex:1;overflow-y:auto;padding:10px}.copier-section{background:#ffffff0a;border:1px solid var(--panel-border);border-radius:10px;margin-bottom:8px;cursor:grab;transition:box-shadow .15s ease,transform .15s ease;-webkit-user-select:none;user-select:none}.copier-section:hover{box-shadow:0 4px 12px #0000001f}.copier-section-header{display:flex;align-items:center;gap:8px;padding:11px 14px}.copier-drag-handle{font-size:15px;opacity:.35;cursor:grab;flex-shrink:0}.copier-drag-handle:hover{opacity:.8}.copier-section-title{flex:1;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.copier-draft-badge{font-size:10px;background:#f39c1233;color:#f39c12;border:1px solid rgba(243,156,18,.4);border-radius:4px;padding:2px 6px;font-weight:600;flex-shrink:0}.copier-toggle-btn{background:transparent;border:none;font-size:13px;color:var(--text);opacity:.5;cursor:pointer;padding:2px 6px;border-radius:4px;flex-shrink:0}.copier-toggle-btn:hover{opacity:1;background:#0000000f}.copier-lessons{border-top:1px solid var(--panel-border);background:#00000008;padding:6px 8px}.copier-lesson-item{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:13px;border-radius:6px;color:var(--text-secondary)}.copier-lesson-icon{opacity:.4;font-size:10px}.copier-lesson-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.copier-dragging{opacity:.45;transform:scale(.98);cursor:grabbing;box-shadow:0 8px 24px #0003}.copier-drop-target{border:2px dashed var(--btn-active)!important;background:#f1c40f0f!important;box-shadow:0 0 0 4px var(--play-glow)}#copierSectionsLeft p,#copierSectionsRight p{text-align:center;padding:20px 10px}.copier-search-results{max-height:280px;overflow-y:auto;border:1px solid var(--panel-border);border-radius:10px;background:var(--panel);margin-bottom:8px;padding:6px 0}.csr-empty{padding:14px 16px;font-size:13px;color:var(--text-secondary);opacity:.7;text-align:center}.csr-course{padding-bottom:6px;border-bottom:1px solid var(--panel-border);margin-bottom:2px}.csr-course:last-child{border-bottom:none;margin-bottom:0}.csr-course-title{padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;border-radius:6px;transition:background .15s ease;margin:2px 4px}.csr-course-title:hover{background:#f1c40f1f;color:var(--btn-active)}.csr-section{padding:2px 14px 2px 24px}.csr-section-title{font-size:12px;font-weight:600;color:var(--text-secondary);padding:3px 0}.csr-lesson{font-size:12px;color:var(--text-secondary);opacity:.75;padding:2px 0 2px 16px}.copier-hl{background:#f1c40f59;color:var(--text);border-radius:3px;padding:0 2px;font-weight:600;font-style:normal}.sidebar{position:fixed;top:0;left:0;width:360px;height:100%;z-index:2000;overflow-y:scroll;overscroll-behavior:contain;background:#ffffffd9;border-right:1px solid rgba(0,0,0,.05);box-shadow:10px 0 40px #0000001a;color:#2f2f2f;transform:translate(-100%);transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}.sidebar:before{content:"";position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}body.dark .sidebar{background:#141419;border-right:1px solid rgba(255,255,255,.08);box-shadow:10px 0 40px #0000004d;color:#eaeaf0}.sidebar.open{transform:translate(0)}.sidebar-header{padding:24px 28px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#f0ecffe6,#e0e7ffe6);border-bottom:1px solid rgba(99,102,241,.12)}body.dark .sidebar-header{background:linear-gradient(135deg,#1e1b4bb3,#2d0a3299);border-bottom-color:#6366f133}.sidebar-header h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#6366f1,#8e44ad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}body.dark .sidebar-header h3{background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.browse-icon-btn{background:#0000000d;border:1px solid rgba(0,0,0,.05);color:#666;border-radius:99px;cursor:pointer;padding:8px 14px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;transition:all .2s;text-transform:uppercase;letter-spacing:.5px}.browse-icon-btn:hover{background:#6366f126;border-color:#6366f1;color:#4f46e5;transform:translateY(-1px)}body.dark .browse-icon-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#c7d2fe}body.dark .browse-icon-btn:hover{background:#6366f133;border-color:#6366f1;color:#fff}.sidebar-search{padding:0 24px 20px;border-bottom:1px solid rgba(0,0,0,.05)}body.dark .sidebar-search{border-bottom:1px solid rgba(255,255,255,.05)}#courseSearchInput{width:100%;padding:12px 18px;border-radius:12px;font-size:14px;outline:none;transition:all .2s;border:1px solid rgba(0,0,0,.1);background:#ffffff80;color:#333}#courseSearchInput:focus{border-color:#6366f1;background:#fff;box-shadow:0 0 0 3px #6366f126}body.dark #courseSearchInput{border:1px solid rgba(255,255,255,.1);background:#0003;color:#fff}body.dark #courseSearchInput:focus{border-color:#6366f1;background:#0000004d;box-shadow:0 0 0 3px #6366f126}.sidebar-content{flex:1;overflow-y:auto;padding:24px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}body.dark .sidebar-content{scrollbar-color:rgba(255,255,255,.1) transparent}.empty-courses{text-align:center;margin-top:60px;padding:0 20px}.empty-courses h4{margin-bottom:8px;font-size:16px;color:#333}body.dark .empty-courses h4{color:#fff}.empty-courses p{color:#666;font-size:13px;margin-bottom:24px;line-height:1.5}body.dark .empty-courses p{color:#ffffff80}.browse-big-btn{background:linear-gradient(135deg,#6366f1,#8e44ad);color:#fff;border:none;padding:14px 28px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 10px 25px #6366f14d;transition:all .3s}.browse-big-btn:hover{transform:translateY(-2px);box-shadow:0 15px 35px #6366f166;filter:brightness(1.05)}body.dark .browse-big-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 10px 25px #6366f166}body.dark .browse-big-btn:hover{box-shadow:0 15px 35px #6366f180}.clickable-nav-title{cursor:pointer;transition:all .2s;font-size:14px;font-weight:600;opacity:1}.clickable-nav-title:hover{color:#6366f1;text-decoration:underline}body.dark .clickable-nav-title:hover{color:#a5b4fc}.course-item{background:transparent;margin-bottom:16px;border:1px solid rgba(0,0,0,.05);overflow:hidden;transition:all .3s ease}body.dark .course-item{border:1px solid rgba(255,255,255,.05)}.course-item.active{border-color:#6366f140;box-shadow:0 4px 20px #6366f12e}body.dark .course-item.active{border-color:#6366f14d;box-shadow:0 4px 20px #6366f126}.course-item.collapsed{cursor:pointer;background:#6366f105;border-color:transparent}.course-item.collapsed:hover{background:#6366f112;transform:translate(4px)}body.dark .course-item.collapsed{background:#6366f108}body.dark .course-item.collapsed:hover{background:#6366f11a}.course-header{padding:5px 20px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#6366f114,#8e44ad0f);border-bottom:1px solid rgba(99,102,241,.1);cursor:pointer;transition:background .2s}.course-header:hover{background:linear-gradient(135deg,#6366f124,#8e44ad1a)}body.dark .course-header{background:linear-gradient(135deg,#6366f11f,#8e44ad14);border-bottom-color:#6366f12e}body.dark .course-header:hover{background:linear-gradient(135deg,#6366f133,#8e44ad24)}.course-header h4{margin:0;font-size:18px;font-weight:600;color:#4338ca;letter-spacing:.2px}body.dark .course-header h4{color:#c7d2fe}.course-item.active .course-header h4{color:#3730a3;text-shadow:0 0 10px rgba(99,102,241,.2)}body.dark .course-item.active .course-header h4{color:#e0e7ff;text-shadow:0 0 10px rgba(99,102,241,.5)}.collapsed-hint{font-size:10px;text-transform:uppercase;color:#999;font-weight:700;letter-spacing:.5px;display:none}body.dark .collapsed-hint{color:#ffffff4d}.course-item.collapsed .collapsed-hint{display:block}.course-body{border-top:1px solid rgba(0,0,0,.05)}body.dark .course-body{border-top:1px solid rgba(99,102,241,.15)}.course-item.collapsed .course-body{display:none}.section-title{padding:12px 24px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#6366f1;font-weight:700;background-color:#6366f10a}body.dark .section-title{color:#818cf8;background-color:#6366f112}.lesson-link{padding:12px 24px;font-size:18px;color:#555;cursor:pointer;border-left:3px solid transparent;transition:all .2s;display:flex;align-items:center;position:relative}body.dark .lesson-link{color:#fffc}.lesson-link:hover{background:#6366f10f;color:#3730a3;padding-left:28px}body.dark .lesson-link:hover{background:#6366f11a;color:#e0e7ff}.lesson-link.active-lesson{background:#6366f11a;border-left-color:#6366f1;color:#3730a3;font-weight:600}body.dark .lesson-link.active-lesson{background:#6366f126;border-left-color:#6366f1;color:#fff}.lesson-link:after{content:"▶";font-size:10px;margin-left:auto;opacity:0;transform:translate(-5px);transition:all .2s ease}.lesson-link:hover:after,.lesson-link.active-lesson:after{opacity:1;transform:translate(0);color:#6366f1}body.dark .lesson-link:hover:after,body.dark .lesson-link.active-lesson:after{color:#6366f1}.lesson-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px 0;margin-bottom:20px;cursor:pointer;gap:8px}.lesson-header h2{margin:0 auto 0 0}.lesson-btn-group{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:5px}.practice-btn{background:transparent;border:1px solid var(--panel-border);padding:6px 14px;border-radius:99px;font-size:12px;cursor:pointer;font-weight:700;text-transform:uppercase;color:var(--text);opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}.practice-btn:hover{opacity:1;background:var(--bg);transform:translateY(-1px);box-shadow:0 2px 8px #0000000d}.lesson-sidebar{display:flex;flex-direction:column;overflow:hidden}.lesson-sidebar-body{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0}.lesson-content{flex:1;overflow-y:auto;padding:16px 24px;overscroll-behavior:contain}.lesson-sidebar-header{padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.07);flex-shrink:0}body.dark .lesson-sidebar-header{border-bottom-color:#ffffff12}.lesson-courses-btn{background:linear-gradient(135deg,#6366f1,#8e44ad);color:#fff;border:none;border-radius:8px;padding:6px 14px;margin-bottom:10px;font-size:13px;font-weight:600;cursor:pointer;transition:filter .2s,transform .2s;align-self:flex-start;box-shadow:0 2px 8px #6366f140}.lesson-courses-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.lesson-breadcrumb{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-nav-grid{display:grid;gap:10px;align-items:center}.lesson-nav-grid button{border-radius:100px;text-align:center;justify-content:center;align-items:center}.lesson-prev-btn{padding:10px;justify-content:center}.lesson-next-btn{justify-content:center}.lesson-controls{position:relative;z-index:1;flex-shrink:0;margin:0 16px 16px;padding:16px 20px;border-radius:16px;border:1px solid rgba(0,0,0,.07);background:#ffffffb3;box-shadow:0 4px 16px #00000012;display:flex;flex-direction:column;align-items:center}.lesson-controls:before{content:"";position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}body.dark .lesson-controls{background:#191923bf;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 16px #00000059}.video-wrapper{position:relative;padding-bottom:56.25%;height:0;margin-bottom:20px;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px #0000001a;background:#000}.lesson-pattern-preview{display:block;width:100%;height:auto;border-radius:12px;margin-top:16px;transition:opacity .2s,transform .2s}.lesson-pattern-hint{margin:6px 0 0;text-align:center;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;opacity:.4;color:var(--text);cursor:pointer}.lesson-pattern-preview:hover{opacity:.85;transform:translateY(-2px)}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}button#closeLessonBtn{width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:#0000000d;color:#666;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background .15s,color .15s}button#closeLessonBtn:hover{background:#0000001a;color:#111}body.dark button#closeLessonBtn{border-color:#ffffff1a;background:#ffffff12;color:#fff9}body.dark button#closeLessonBtn:hover{background:#ffffff26;color:#fff}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}#nextLessonBtn{transition:all .5s cubic-bezier(.34,1.56,.64,1)}#nextLessonBtn.faded{opacity:.5;filter:saturate(.6);transform:scale(.96);box-shadow:none}#nextLessonBtn:not(.faded){opacity:1;filter:saturate(1);transform:scale(1)}.practice-item{transition:transform .3s cubic-bezier(.2,0,.2,1),box-shadow .2s;border:1px solid transparent}.practice-item.squeezed{transform:scale(.9);background:#fff!important;box-shadow:0 10px 25px #00000026;z-index:100;cursor:grabbing!important}.text-area{padding:12px;background:#00000005;border-radius:8px;font-size:16px;line-height:1.5;color:inherit;white-space:pre-wrap;width:100%;min-height:120px;height:auto;border:1px solid transparent;outline:none;resize:vertical;font-family:inherit;transition:all .2s}.text-area:focus:not([readonly]){background:#ffffff80;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.text-area[readonly]{resize:none;cursor:default;background:transparent;padding-left:0;padding-right:0}body.dark .text-area:focus:not([readonly]){background:#0000004d}.chord-chip{position:relative;display:flex!important;flex-direction:row;align-items:center}.chord-info{display:flex;flex-direction:column;flex:1}.chord-fav-btn{background:none;border:none;font-size:20px;cursor:pointer;color:#0003;transition:all .2s ease;padding:0 8px 0 0;line-height:1;text-shadow:0 0 2px rgba(255,255,255,.5)}body.dark .chord-fav-btn{color:#fff3;text-shadow:0 0 2px rgba(0,0,0,.5)}.chord-chip:hover .chord-fav-btn,.chord-chip.favorited .chord-fav-btn{color:gold;text-shadow:0 1px 2px rgba(0,0,0,.3)}.chord-chip.favorited{border:1px solid #FFD700;box-shadow:0 0 8px #ffd7004d}.chord-chip.major.favorited .chord-fav-btn{color:gold;text-shadow:0 0 3px rgba(0,0,0,.8)}.small-capture-btn,.small-upload-btn{background:none;border:1px solid var(--panel-border);border-radius:4px;cursor:pointer;padding:2px 6px;font-size:14px;display:flex!important;align-items:center;justify-content:center;transition:all .2s;color:var(--text-secondary)}.small-capture-btn:hover,.small-upload-btn:hover{background:var(--btn-secondary-hover);color:var(--text);border-color:var(--text-secondary)}.updated-flash{background:#2ecc7133!important;transition:background .5s}@media(max-width:768px){.lesson-pattern-preview{cursor:pointer}}@media(max-width:600px){#nextLessonBtn .desktop-text{display:none}}#micBtn{font-size:20px}#micBtn.active{background:#ff4b4b;color:#fff;animation:pulse 2s infinite}.mic-meter{width:100px;height:8px;background:var(--panel-border);border-radius:4px;overflow:hidden;margin-left:10px}.mic-level-bar{height:100%;width:0%;background:var(--btn-active);transition:width .1s ease}.mic-controls{display:flex;align-items:center;background:var(--panel);border-radius:999px;border:1px solid var(--panel-border);font-size:13px;margin-top:10px}.mic-controls{flex-wrap:wrap;gap:10px 20px;padding:12px 20px}.mic-controls label{font-weight:600;color:var(--text);opacity:.8}.mic-controls span{min-width:35px;display:inline-block;font-family:monospace}.mic-controls input[type=range]{width:80px;cursor:pointer}.mic-main-controls{display:flex;align-items:center;gap:10px}.mic-settings{display:flex;gap:20px;flex-wrap:wrap;font-size:.8rem}.setting-group{display:flex;align-items:center;gap:8px}.calibration-overlay{background:#000000d9;color:#fff;padding:15px 25px;border-radius:12px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10000;box-shadow:0 0 30px #00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1)}.cal-progress-wrapper{display:flex;align-items:center;gap:20px}.cal-progress-svg{width:60px;height:60px;transform:rotate(-90deg)}.cal-circle-bg{fill:none;stroke:#ffffff1a;stroke-width:3}.cal-circle-progress{fill:none;stroke:var(--btn-active);stroke-width:3;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset .1s ease}.cal-info{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.cal-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;opacity:.7}.cal-note{font-size:24px;font-weight:900;color:var(--btn-active)}#micBtn.active{background:#ff4b4b;color:#fff}#calibrateBtn.active{border-color:#ff4b4b}@keyframes pulse{0%{opacity:1}50%{opacity:.6}to{opacity:1}}.countdown-overlay{position:fixed;top:0;left:0;width:100vw;height:100dvh;height:var(--app-height, 100dvh);background:#0009;display:flex;justify-content:center;align-items:center;z-index:9999;pointer-events:none}#countdownNumber{font-size:18rem;font-weight:900;color:var(--btn-active);text-shadow:0 0 40px rgba(0,0,0,.6);animation:countdownStrike .4s cubic-bezier(.12,0,.39,0) forwards}@keyframes countdownStrike{0%{transform:scale(1.6);opacity:0;filter:blur(10px)}5%{transform:scale(1);opacity:1;filter:blur(0)}to{transform:scale(.9);opacity:0}}#guidedCalModal{z-index:99999!important;background:transparent;align-items:flex-start;pointer-events:none}#guidedCalModal .modal-content{pointer-events:auto;background:var(--panel);padding:15px 30px;border-radius:0 0 20px 20px;text-align:center;max-width:600px;width:90%;border:1px solid var(--panel-border);border-top:none;box-shadow:0 10px 30px #00000080;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px}#guidedCalModal h2{font-size:1.2rem;margin:0;white-space:nowrap}#guidedCalModal p{display:block;font-size:.9rem;opacity:.8;margin:0}.calibration-guide{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;margin:20px 0}.guide-note-box{width:100px;height:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:2.2rem;font-weight:900;margin:0;color:#f1c40f;background:#000;box-shadow:0 0 20px #00000080,inset 0 0 10px #ffffff1a;transition:transform .1s ease,background .2s ease}.guide-note-box.strike{background:#2ecc71}.guide-note-box.pulse{animation:calPulse .3s ease-out}@keyframes calPulse{0%{transform:scale(1);box-shadow:0 0 #2ecc7100}50%{transform:scale(1.15);box-shadow:0 0 40px #2ecc7199}to{transform:scale(1);box-shadow:0 0 20px #2ecc7133}}.progress-bar-container{width:100%;height:10px;background:#333;border-radius:5px;overflow:hidden}.progress-bar{width:0%;height:100%;background:var(--btn-active)}#guidedCalModal .modal-actions{margin-top:30px;display:flex;justify-content:center;gap:15px}#aiFab{position:fixed;bottom:30px;right:30px;width:60px;height:60px;background:var(--btn-active, #f1c40f);border-radius:50%;box-shadow:0 4px 15px #0003;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9999;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,bottom .3s ease}#aiFabMobile{display:none}#aiFab:hover{transform:scale(1.1);box-shadow:0 8px 25px #f1c40f66}#aiFab svg{width:32px;height:32px;fill:#3b3005}body.dark #aiFab svg{fill:#000}#aiChatContainer{position:fixed;bottom:100px;right:30px;width:350px;height:500px;max-width:calc(100vw - 60px);max-height:calc(80vh - 100px);background:#ffffffe6;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:24px;box-shadow:0 10px 40px #0003;display:flex;flex-direction:column;z-index:9999;border:1px solid rgba(255,255,255,.5);opacity:0;pointer-events:none;transform:translateY(20px) scale(.95);transition:all .3s cubic-bezier(.16,1,.3,1);overflow:hidden}body.dark #aiChatContainer{background:#1e1e28e6;border:1px solid rgba(255,255,255,.1);color:#fff}#aiChatContainer.open:before{background:#00000080}#aiChatContainer.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.ai-header{padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.05);display:flex;justify-content:space-between;align-items:center;background:#ffffff80}body.dark .ai-header{border-bottom-color:#ffffff0d;background:#0003}.ai-header h3{margin:0;font-size:16px;font-weight:600}.close-ai-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text);opacity:.5;padding:4px}.close-ai-btn:hover{opacity:1}.ai-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}.message{max-width:85%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.4;word-wrap:break-word;animation:popIn .3s cubic-bezier(.16,1,.3,1);box-shadow:0 2px 10px #0000000d}@keyframes popIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.bot{align-self:flex-start;background:#e8eaf6;color:#283593;border:1px solid rgba(40,53,147,.2);border-bottom-left-radius:4px;margin-bottom:24px}.message.bot:first-child{opacity:0}#aiChatContainer.open .message.bot:first-child{animation:slideInLeft .5s cubic-bezier(.16,1,.3,1) forwards}body.dark .message.bot{background:#1a237e;color:#c5cae9;border-color:#c5cae933}.message.user{align-self:flex-end;background:var(--btn-active, #f1c40f);color:#3b3005;border-bottom-right-radius:4px;box-shadow:0 2px 10px #f1c40f33}@keyframes slideInLeft{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}.suggestion-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 10px;margin-top:-5px;justify-content:flex-end}.suggestion-chip{background:#0000000d;border:1px solid rgba(0,0,0,.1);border-radius:16px;padding:8px 14px;font-size:14px;line-height:1.4;color:var(--text);cursor:pointer;transition:all .2s;white-space:normal;max-width:100%;opacity:0}#aiChatContainer.open .suggestion-chip{animation:slideInRight .5s cubic-bezier(.16,1,.3,1) forwards}body.dark .suggestion-chip{background:#ffffff1a;border-color:#ffffff1a}.suggestion-chip:hover{background:var(--btn-active, #f1c40f);color:#3b3005;border-color:transparent}@keyframes slideInRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.message.loading{opacity:.7;font-style:italic;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.5}50%{opacity:.8}to{opacity:.5}}.ai-action-btn{display:inline-block;margin-top:10px;background:#fff;border:1px solid rgba(0,0,0,.1);padding:8px 16px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:600;color:#333;transition:all .2s;box-shadow:0 2px 5px #0000000d}body.dark .ai-action-btn{background:#2c3e50;border-color:#ffffff1a;color:#fff}.ai-action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px #0000001a}.ai-action-btn:disabled{opacity:.6;cursor:default;transform:none}.ai-input-area{padding:16px;border-top:1px solid rgba(0,0,0,.05);display:flex;gap:10px;align-items:center;background:#ffffff80}body.dark .ai-input-area{border-top-color:#ffffff0d;background:#0003}#aiInput{flex:1;background:#ffffff80;border:1px solid rgba(0,0,0,.1);padding:10px 16px;border-radius:999px;font-size:14px;outline:none;color:var(--text);transition:all .2s}body.dark #aiInput{background:#0000004d;border-color:#ffffff1a}#aiInput:focus{background:#fff;box-shadow:0 0 0 3px #f1c40f4d;border-color:#f1c40f}body.dark #aiInput:focus{background:#14141ecc}#sendAiBtn{background:transparent;border:none;cursor:pointer;padding:8px;border-radius:50%;color:var(--btn-active, #f1c40f);display:flex;align-items:center;justify-content:center;transition:all .2s}#sendAiBtn:hover{background:#f1c40f1a;transform:scale(1.1)}#sendAiBtn svg{width:24px;height:24px;fill:currentColor}@media(max-width:768px){#aiFab{display:none}#aiFabMobile{display:flex;position:absolute;right:0;top:50%;margin-right:10px;transform:translateY(-50%);width:36px;height:36px;background:var(--btn-active, #f1c40f);border-radius:50%;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0003}#aiFabMobile svg{width:20px;height:20px;fill:#3b3005}body.dark #aiFabMobile svg{fill:#000}#aiChatContainer{bottom:160px;width:300px;height:400px}}.profile-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.profile-form-group{margin-bottom:16px}.profile-form-group label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--text-secondary)}.profile-form-group input,.profile-form-group textarea{width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--panel-border);background:var(--bg);color:var(--text);font-family:inherit;font-size:14px;outline:none;transition:border-color .2s}.profile-form-group input:focus,.profile-form-group textarea:focus{border-color:var(--btn-active);background:var(--panel)}.profile-form-group textarea{min-height:80px;resize:vertical}.profile-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.profile-actions button{padding:10px 20px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .2s ease}button#closeProfileBtn{background:transparent;color:var(--text-secondary)}button#closeProfileBtn:hover{color:var(--text);background:#0000000d}button#saveProfileBtn{background:var(--btn-active);color:var(--btn-active-text);box-shadow:var(--shadow-sm)}button#saveProfileBtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);filter:brightness(1.05)}button#saveProfileBtn:disabled{opacity:.7;cursor:wait}.profile-error{background:#ff52521a;color:#ff5252;border:1px solid rgba(255,82,82,.2);padding:10px 14px;border-radius:12px;margin-bottom:16px;font-size:13px;display:flex;align-items:center;gap:8px;animation:shake .3s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.my-scales-list{max-height:350px;overflow-y:auto}.scale-list-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--panel-border);gap:12px}.scale-info{flex:1;min-width:0}.scale-name-row{display:flex;align-items:center;gap:8px;margin-bottom:2px}.scale-name-text{font-weight:600;color:var(--text);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-meta{font-size:12px;color:var(--text-secondary)}.scale-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.icon-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:16px;line-height:1}.icon-btn:hover:not(:disabled){background:#ffffff0d;color:var(--text)}.icon-btn:disabled{opacity:.3;cursor:default}.icon-btn.danger-text:hover{background:#ef44441a;color:#ef4444}.edit-map-btn{background:#6366f126;color:#818cf8;border:1px solid rgba(99,102,241,.3);padding:4px 10px;font-size:11px;border-radius:6px;cursor:pointer;white-space:nowrap;margin:0 4px}.edit-map-btn:hover{background:#6366f14d;color:#fff}.edit-mode-container{padding-right:8px}.rename-input{width:100%;padding:6px 10px;border-radius:6px;border:1px solid var(--panel-border);background:var(--bg);color:var(--text);font-size:14px;margin-bottom:6px}.rename-actions{display:flex;gap:6px}.small-action-btn{padding:4px 10px;font-size:11px;border-radius:4px;border:none;cursor:pointer}.save-btn-styles{background:var(--btn-active);color:var(--btn-active-text)}.cancel-btn-styles{background:var(--panel-border);color:var(--text)}.feed-modal{width:90%;max-width:900px;height:85vh;display:flex;flex-direction:column;padding:0;overflow:hidden;background:var(--bg);color:var(--text);box-shadow:0 20px 50px #00000080}.feed-main-header{padding:16px 24px;border-bottom:1px solid var(--panel-border);display:flex;justify-content:space-between;align-items:center;background:var(--panel)}.feed-nav-group{display:flex;gap:8px;background:#0000000d;padding:4px;border-radius:12px}.feed-main-tab{background:none;border:none;padding:8px 20px;border-radius:8px;color:var(--text);opacity:.7;font-weight:600;cursor:pointer;transition:all .2s}.feed-main-tab:hover{opacity:1;background:#0000000d}.feed-main-tab.active{background:#6366f1;color:#fff;opacity:1;box-shadow:0 2px 8px #6366f166}.feed-filters{display:flex;gap:16px;padding:12px 24px;border-bottom:1px solid var(--panel-border);background:var(--panel);justify-content:center}.feed-filter-tab{background:none;border:none;color:var(--text);opacity:.6;font-size:14px;font-weight:600;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all .2s ease}.feed-filter-tab:hover{opacity:1;background:#0000000d}.feed-filter-tab.active{color:#6366f1;opacity:1;background:#6366f11a}.feed-view{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--bg);overflow-y:auto}.feed-grid{flex:1;padding:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-content:start}@media(max-width:768px){.feed-grid{grid-template-columns:1fr;padding:16px}.feed-card{max-width:85vw}}.delete-pattern-btn{float:right}.feed-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:transform .2s ease,box-shadow .2s ease}.feed-card:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0000001a;border-color:#6366f1}.feed-card-header h3{margin:0;font-size:1.1rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed-card .author{font-size:.85rem;color:var(--text);opacity:.7}.feed-card-body p{font-size:.9rem;color:var(--text);opacity:.8;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.feed-stats{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.like-btn{background:#0000000d;border:none;border-radius:12px;padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--text);transition:all .2s}.like-btn:hover{background:#0000001a}.like-btn.liked{background:#ef44441a;color:#ef4444}.posts-feed{flex:1;overflow-y:scroll;min-height:0;padding:20px;display:flex;flex-direction:column;gap:24px;align-items:center;background:var(--bg)}.create-post-container{padding:20px 20px 0;display:flex;justify-content:center;background:var(--panel);border-bottom:1px solid var(--panel-border)}.create-post-card{width:100%;max-width:600px;background:var(--bg);border:1px solid var(--panel-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}.cp-header{display:flex;gap:12px}.cp-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0}.cp-input{flex:1;background:transparent;border:none;resize:none;color:var(--text);font-size:1rem;padding:12px;outline:none;min-height:40px}.cp-input::placeholder{color:var(--text);opacity:.5}.cp-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--panel-border);padding-top:12px}.cp-tools{display:flex;gap:8px}.cp-tool-btn{background:none;border:none;color:var(--text);opacity:.7;cursor:pointer;padding:6px 10px;border-radius:6px;font-size:.9rem;display:flex;align-items:center;gap:6px}.cp-tool-btn:hover{background:#0000000d;opacity:1}.cp-publish-btn{background:var(--btn-active, #f59e0b);color:#000;border:none;padding:8px 20px;border-radius:20px;font-weight:700;cursor:pointer}.cp-publish-btn:disabled{opacity:.5;cursor:not-allowed}.post-card{width:100%;max-width:600px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 2px 5px #0000000d}.post-header{display:flex;gap:12px;align-items:center}.post-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.post-meta{display:flex;flex-direction:column}.post-author{font-weight:600;color:var(--text)}.post-time{font-size:.8rem;color:var(--text);opacity:.6}@media screen and (max-width:768px){.feed-modal{width:95%;height:90vh}.feed-main-header{padding:12px 16px;gap:8px}.feed-nav-group{gap:4px;padding:3px}.feed-main-tab{padding:8px 12px;font-size:14px}.close-btn{flex-shrink:0;margin-left:4px}.feed-filters{padding:8px 16px;gap:8px;overflow-x:auto;justify-content:flex-start}.feed-filter-tab{padding:6px 10px;font-size:13px;white-space:nowrap}}.post-body{font-size:.95rem;line-height:1.5;color:var(--text)}.post-text{margin-bottom:12px;white-space:pre-wrap}.post-media-img{width:100%;border-radius:8px;margin-top:8px;max-height:400px;object-fit:cover;border:1px solid var(--panel-border)}.post-media-video{width:100%;border-radius:8px;margin-top:8px;max-height:400px}.post-media-audio{width:100%;margin-top:8px}.post-pattern-card{background:#6366f10d;border:1px solid rgba(99,102,241,.2);border-radius:8px;padding:10px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .2s;margin-top:8px}.post-pattern-card:hover{background:#6366f11a}.pp-icon{font-size:1.5rem}.pp-info{flex:1}.pp-name{font-weight:700;color:#6366f1}.pp-sub{font-size:.8rem;color:var(--text);opacity:.7}.pp-play-btn{background:#6366f1;color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:.8rem;cursor:pointer}.delete-post-btn{float:right}.cp-attachments{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.attachment-preview{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--panel-border)}.att-img-preview{height:80px;width:auto;display:block}.post-footer{border-top:1px solid var(--panel-border);padding-top:12px;margin-top:4px}.pf-stats{font-size:.85rem;color:var(--text);opacity:.6;margin-bottom:8px}.pf-actions{display:flex;gap:16px}.pf-btn{background:none;border:none;color:var(--text);opacity:.7;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px}.pf-btn:hover{background:#0000000d;opacity:1}.post-comments-section{background:#00000008;margin:0 -16px -16px;padding:12px 16px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-top:1px solid var(--panel-border)}.comments-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.comment-row{display:flex;gap:10px}.c-avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--panel-border);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--text);font-weight:700}.c-bubble{background:var(--bg);border:1px solid var(--panel-border);padding:8px 12px;border-radius:12px;flex:1}.c-author{font-weight:700;font-size:.85rem;margin-bottom:2px;color:var(--text)}.c-text{font-size:.9rem;color:var(--text)}.comment-input-area{display:flex;gap:8px}.comment-input{flex:1;background:var(--bg);border:1px solid var(--panel-border);border-radius:20px;padding:8px 12px;color:var(--text);resize:none;height:36px}.comment-actions{display:flex;gap:4px}.c-send-btn,.c-att-btn{background:none;border:none;color:var(--text);cursor:pointer;padding:0 8px;font-size:1.1rem;opacity:.7}.c-send-btn:hover{color:#6366f1;opacity:1}.loading-spinner{padding:20px;text-align:center;color:var(--text);opacity:.6;width:100%}.empty-state{padding:40px;text-align:center;color:var(--text);opacity:.6}.library-view{display:none;flex-direction:column;height:100%;overflow-y:auto;background:var(--bg);color:var(--text)}.library-view.active{display:flex}.library-header{display:flex;align-items:center;justify-content:space-between;padding:28px 32px 0;flex-shrink:0}.library-header h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0}.library-controls{display:flex;align-items:center;gap:10px}.library-new-folder-btn,.library-sort-order-btn{height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease}.library-new-folder-btn:hover,.library-sort-order-btn:hover{border-color:var(--text)}.library-tabs{display:flex;align-items:flex-end;gap:0;padding:20px 32px 0;border-bottom:1px solid var(--panel-border);flex-shrink:0;position:relative}.library-tab{background:none;border:none;padding:10px 18px;font-size:14px;font-weight:600;color:var(--text);opacity:.5;cursor:pointer;position:relative;transition:opacity .15s ease}.library-tab:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--text);border-radius:2px 2px 0 0;opacity:0;transition:opacity .15s ease}.library-tab:hover{opacity:.8}.library-tab.active{opacity:1;background:none}.library-tab.active:after{opacity:1}.library-search-row{position:absolute;left:50%;transform:translate(-50%);bottom:6px;pointer-events:none;transition:left .4s cubic-bezier(.16,1,.3,1)}body.sidebar-open .library-search-row{left:calc(50% + 180px)}.library-search-row input{pointer-events:all}.library-search-input{width:460px;height:30px;padding:0 10px 0 30px;border-radius:20px;border:1px solid var(--panel-border);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 9px center;color:var(--text);font-size:13px;outline:none;transition:border-color .15s ease,width .2s ease}.library-search-input:focus{border-color:var(--text)}.library-search-input::placeholder{opacity:.4}.library-search-input::-webkit-search-cancel-button{cursor:pointer}.library-breadcrumb{display:flex;align-items:center;gap:6px;padding:14px 32px 0;font-size:14px;flex-shrink:0}.library-breadcrumb[hidden]{display:none}.lib-crumb-root{background:none;border:none;padding:0;font-size:14px;font-weight:600;color:var(--text);opacity:.5;cursor:pointer;transition:opacity .15s ease}.lib-crumb-root:hover{opacity:1}.lib-crumb-sep{opacity:.35;font-size:16px}.lib-crumb-current{font-weight:600}.library-folders-section{padding:20px 32px 0;flex-shrink:0}.lib-folders-row{display:flex;flex-wrap:wrap;gap:12px}.lib-folder-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;border:1px solid var(--panel-border);background:var(--panel);cursor:pointer;min-width:160px;max-width:240px;position:relative;transition:box-shadow .15s ease,background .15s ease,border-color .15s ease;-webkit-user-select:none;user-select:none}.lib-folder-card:hover{box-shadow:0 4px 16px #0000001a;border-color:#00000026}body.dark .lib-folder-card:hover{box-shadow:0 4px 16px #0006;border-color:#ffffff1f}.lib-folder-card.drag-over{border-color:var(--btn-active);background:color-mix(in srgb,var(--btn-active) 10%,var(--panel));box-shadow:0 0 0 2px var(--btn-active)}.lib-folder-icon-wrap{width:36px;height:36px;border-radius:8px;background:color-mix(in srgb,var(--btn-active) 20%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--btn-active)}body.dark .lib-folder-icon-wrap{background:#5b8cff26;color:var(--btn-active)}.lib-folder-svg{width:20px;height:20px}.lib-folder-info{flex:1;min-width:0}.lib-folder-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-folder-count{font-size:11px;opacity:.5;margin-top:2px}.lib-menu-btn{background:none;border:none;padding:4px 6px;border-radius:6px;cursor:pointer;color:var(--text);opacity:0;font-size:15px;line-height:1;transition:opacity .15s ease,background .15s ease;flex-shrink:0}.lib-folder-card:hover .lib-menu-btn,.library-card:hover .lib-menu-btn{opacity:.5}.lib-menu-btn:hover{opacity:1!important;background:var(--btn-bg)}.library-thumb-wrap .lib-menu-btn{position:absolute;top:6px;right:6px;background:#00000073;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;border-radius:6px;padding:3px 7px}.library-card:hover .library-thumb-wrap .lib-menu-btn{opacity:1}.lib-context-menu{display:none;position:fixed;z-index:9000;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;box-shadow:0 8px 32px #0000002e;padding:6px;min-width:160px}body.dark .lib-context-menu{box-shadow:0 8px 32px #00000080}.lib-context-item{display:block;width:100%;padding:8px 12px;background:none;border:none;border-radius:7px;font-size:13px;font-weight:500;color:var(--text);text-align:left;cursor:pointer;transition:background .1s ease}.lib-context-item:hover{background:var(--btn-bg)}.lib-context-item.danger{color:#e53e3e;margin-top:4px;border-top:1px solid var(--panel-border);border-radius:0 0 7px 7px;padding-top:10px}body.dark .lib-context-item.danger{color:#fc8181}.lib-picker-backdrop{display:none;position:fixed;inset:0;z-index:8000;background:#00000073;align-items:center;justify-content:center}.lib-picker{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;width:320px;max-height:480px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px #00000040}body.dark .lib-picker{box-shadow:0 20px 60px #0009}.lib-picker-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:15px;font-weight:700;border-bottom:1px solid var(--panel-border);flex-shrink:0}.lib-picker-close{background:none;border:none;cursor:pointer;font-size:16px;opacity:.5;color:var(--text);padding:2px 6px;border-radius:6px;transition:opacity .15s ease}.lib-picker-close:hover{opacity:1}.lib-picker-list{overflow-y:auto;padding:8px}.lib-picker-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;border-radius:8px;font-size:14px;font-weight:500;color:var(--text);text-align:left;cursor:pointer;transition:background .1s ease}.lib-picker-item:hover{background:var(--btn-bg)}.lib-picker-item-icon{font-size:16px}.lib-picker-empty{text-align:center;padding:20px;opacity:.5;font-size:13px;margin:0}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;padding:20px 32px 40px;align-content:start}.library-empty{grid-column:1 / -1;text-align:center;padding:60px 20px;font-size:15px;display:flex;flex-direction:column;align-items:center;gap:16px}.library-empty p{margin:0;opacity:.5}.library-card{border-radius:12px;background:var(--panel);border:1px solid var(--panel-border);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.library-card:hover{box-shadow:0 8px 24px #0000001f;transform:translateY(-2px)}body.dark .library-card:hover{box-shadow:0 8px 24px #0006}.library-card.dragging{opacity:.5;transform:scale(.97)}.library-thumb-wrap{width:100%;aspect-ratio:16 / 9;background:var(--btn-bg);overflow:hidden;position:relative}.library-thumbnail{width:100%;height:100%;display:block}.library-card-body{padding:12px 14px}.library-card-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.library-card-meta{font-size:12px;opacity:.5}.clips-view{display:flex!important;flex-direction:column;gap:0}.clips-toolbar{display:flex;align-items:center;gap:12px;padding:4px 0 20px;flex-shrink:0}.clips-record-btn{height:36px;padding:0 18px;border-radius:20px;border:1px solid #f66;background:none;color:#f66;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}.clips-record-btn:hover{background:#ff50501a}.clips-record-btn.recording{background:#ff505026;border-color:#e55}.clips-record-timer{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-secondary);min-width:42px}.clips-record-timer.warn{color:#f59e0b;animation:recordWarnPulse 2s ease-in-out infinite}.clips-empty{flex-direction:column;gap:6px;padding-top:40px}.clips-empty span{font-size:13px;opacity:.5}.clips-list{display:flex;flex-direction:column;gap:8px}.clip-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--panel-border);transition:border-color .15s}.clip-row:hover{border-color:var(--text-secondary)}.clip-play-btn{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--panel-border);background:var(--cell-bg);color:var(--text);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.clip-play-btn:hover,.clip-play-btn.playing{background:var(--btn-active, rgba(99,102,241,.15));border-color:var(--text-secondary)}.clip-info{flex:1;min-width:0}.clip-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-meta{font-size:12px;opacity:.5;margin-top:2px}.clip-menu-btn{flex-shrink:0;opacity:.5!important}.clip-menu-btn:hover{opacity:1!important}@media(max-width:768px){.library-header{padding:20px 16px 0;flex-wrap:wrap;gap:12px}.library-tabs{padding:16px 16px 0;flex-wrap:wrap;align-items:center}.library-search-row{position:static;transform:none;width:100%;padding:10px 0 8px;pointer-events:auto}.library-search-input{width:100%;box-sizing:border-box}.library-search-input:focus{width:100%}.library-breadcrumb{padding:12px 16px 0}.library-folders-section{padding:14px 16px 0}.library-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;padding:16px 16px 32px}.lib-menu-btn{opacity:.5}.library-thumb-wrap .lib-menu-btn{opacity:.3;background:#00000073}.library-thumb-wrap .lib-menu-btn:active{opacity:1;background:#000000b3}}.camera-overlay,.processing-overlay{position:fixed;inset:0;background:#000;z-index:5000;display:none;flex-direction:column;align-items:center;justify-content:center;color:#fff}.camera-overlay.active,.processing-overlay.active{display:flex}.camera-viewfinder{position:relative;width:100%;height:100%;max-width:500px;max-height:80vh;background:#111;overflow:hidden;display:flex;align-items:center;justify-content:center}#cameraVideo{width:100%;height:100%;object-fit:cover}.camera-guide{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:280px;height:280px;border:2px dashed rgba(255,255,255,.5);border-radius:50%;pointer-events:none;box-shadow:0 0 0 9999px #0006}.camera-controls{padding:30px;display:flex;align-items:center;gap:40px;width:100%;justify-content:center;background:#000}.shutter-btn{width:70px;height:70px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.3);cursor:pointer;transition:transform .1s}.shutter-btn:active{transform:scale(.9)}.camera-action-btn{background:#ffffff1a;border:none;color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;cursor:pointer}.processing-overlay{background:#000000eb}.loader-container{display:flex;flex-direction:column;align-items:center;gap:20px}.ai-loader{width:50px;height:50px;border:3px solid rgba(255,255,255,.1);border-top-color:#6366f1;border-radius:50%;animation:spin 1s linear infinite}.processing-text{font-size:18px;font-weight:600;letter-spacing:.5px}@keyframes spin{to{transform:rotate(360deg)}}.camera-btn-wrapper{display:flex;gap:8px}.camera-indicator{display:none;padding:4px 10px;background:#2ecc7133;color:#2ecc71;border-radius:4px;font-size:11px;font-weight:600;margin-top:5px}.camera-indicator.active{display:inline-block}.marketplace-modal{width:90%;max-width:900px;height:85vh;padding:30px;display:flex;flex-direction:column}.market-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.market-title{margin:0;font-size:24px;font-weight:700;color:var(--text);background:linear-gradient(135deg,#6366f1,#8e44ad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.market-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:25px}.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;overflow-y:auto;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}.market-card{margin-top:30px;padding-top:20px;min-height:300px;background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;position:relative}.market-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #00000026;border-color:#c7d2fe}.market-card.premium{border:1px solid rgba(255,215,0,.3)}.market-card.premium:hover{border-color:gold;box-shadow:0 8px 25px #ffd70026}.card-thumb{width:100%;height:140px;background-color:#eee;background-size:cover;background-position:center;position:relative}.price-badge{position:absolute;top:10px;right:10px;background:#000000bf;color:#fff;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;z-index:1}.price-badge:before{content:"";position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}.price-badge.free{background:#2ecc71e6}.price-badge.paid{background:#f1c40fe6;color:#000}.card-content{padding:16px;flex:1;display:flex;flex-direction:column}.card-title{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--text);line-height:1.3}.card-desc{font-size:13px;color:var(--text-secondary);margin-bottom:16px;line-height:1.4;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.market-btn{width:100%;padding:10px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s}.market-btn.get{background:#6366f1;color:#fff}.market-btn.get:hover{background:#4f46e5;box-shadow:0 4px 12px #6366f14d}.market-btn.buy{background:linear-gradient(135deg,#f1c40f,#f39c12);color:#000}.market-btn.buy:hover{filter:brightness(1.1)}.market-btn.owned{background:var(--panel-border);color:var(--text-secondary);cursor:default}.market-btn:disabled{opacity:.6;cursor:not-allowed}@media(max-width:768px){.market-card{width:60vw}.card-thumb{height:100px}.card-content{height:200px}}.cal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#111;z-index:9999;display:flex;flex-direction:column;overflow:hidden;color:#fff;transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.cal-btn{padding:8px 16px;border-radius:20px;cursor:pointer;font-weight:600;font-size:13px;border:none;transition:background .2s}.cal-btn-primary{background:#f1c40f;color:#000}.cal-btn-primary:hover{background:#d4ac0d}.cal-btn-secondary{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.cal-btn-secondary:hover{background:#fff3}#autoDetectBtn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.2)}#autoDetectBtn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #6366f166}#autoDetectBtn:active{transform:translateY(0)}#autoDetectBtn:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);transform:rotate(45deg);animation:shimmer 3s infinite}@keyframes shimmer{0%{left:-150%}to{left:150%}}.cal-header{height:60px;background:#1e1e23f2;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 5px 20px #0000004d}.cal-title-group h2{margin:0;font-size:18px;font-weight:700;color:#fff}#calSaveStatus{position:absolute;top:80px;left:50%;transform:translate(-50%);background:#00c853e6;color:#fff;padding:8px 16px;border-radius:20px;font-weight:700;font-size:14px;box-shadow:0 4px 12px #0000004d;pointer-events:none;opacity:0;transition:opacity .3s,transform .3s;z-index:10000;transform:translate(-50%) translateY(-10px)}#calSaveStatus.saving{background:#f1c40f;color:#000;opacity:1;transform:translate(-50%) translateY(0)}.cal-actions{display:flex;gap:12px}.cal-workspace{flex:1;position:relative;background:#18181b;overflow:hidden;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}.cal-canvas-container{position:relative;width:90vw;max-width:1000px;max-height:85vh;margin:0 auto;background:#000;box-shadow:0 0 50px #00000080;overflow:visible}.cal-bg-img{width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:.8}.cal-layer{position:absolute;top:0;left:0;width:100%;height:100%}.tonefield{position:absolute;transform:translate(-50%,-50%);width:100px;height:100px;border-radius:50%;border:2px solid rgba(99,102,241,.6);background:#6366f126;cursor:grab;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color .2s,background .2s;user-select:none;-webkit-user-select:none;touch-action:none;will-change:transform,left,top;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-tap-highlight-color:transparent}.tonefield:hover{border-color:#8b5cf6;background:#8b5cf633}.tonefield.selected{border-color:#fff;background:#6366f166;box-shadow:0 0 15px #6366f180;z-index:10}.tonefield.dragging{cursor:grabbing;opacity:.8}.tf-label{font-weight:800;font-size:16px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none}.cal-properties{position:absolute;top:20px;right:20px;width:240px;background:#1e1e23fa;border:1px solid rgba(255,255,255,.1);padding:16px;border-radius:12px;box-shadow:0 10px 40px #00000080}.cal-properties h4{margin:0 0 15px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#aaa}.prop-row{margin-bottom:12px}.prop-row label{display:block;font-size:12px;margin-bottom:5px;color:#ccc}.cal-properties select{width:100%;background:#0000004d;border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px;border-radius:8px}.danger-btn{width:100%;background:#ef444433;border:1px solid #ef4444;color:#ef4444;padding:8px;border-radius:8px;cursor:pointer}.danger-btn:hover{background:#ef4444;color:#fff}.cal-instructions{position:absolute;bottom:20px;left:50%;transform:translate(-50%);color:#ffffff80;font-size:12px;pointer-events:none;transition:opacity .3s}.wizard-step{display:none}.wizard-step.active{display:block}.wizard-nav{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}.wizard-btn{padding:8px 20px;border-radius:8px;background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.2);cursor:pointer;font-weight:600;font-size:13px}.wizard-btn:disabled{opacity:.3;cursor:not-allowed}#wizardStepInfo{font-size:12px;color:#888;font-weight:600}@media(max-width:768px){.cal-header{padding:0 15px}.cal-actions{gap:5px}.cal-btn{padding:6px 10px;font-size:11px}.cal-workspace{align-items:flex-start;padding-top:20px;overflow:visible}.cal-canvas-container{transform:none;max-height:55vh;overflow:visible}.cal-bg-img{width:100%;height:100%;object-fit:contain}.cal-properties{position:fixed;inset:auto 0 0;width:100%;border-radius:20px 20px 0 0;padding:20px;box-shadow:0 -10px 40px #000c;min-height:240px}.cal-instructions{display:none}}.advanced-cal-modal{position:fixed;width:100%;height:90%;background:var(--bg);z-index:1000;align-items:center;justify-content:center;padding:20px;margin:20px;border-radius:12px}.advanced-cal-list{display:flex;flex-direction:column;gap:15px}.adv-cal-row{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:15px}.adv-cal-row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:700;font-size:16px;color:#000}.adv-cal-note-label{display:flex;align-items:center;gap:8px}.adv-cal-pill{font-size:11px;padding:2px 6px;border-radius:4px;background:#6366f133;color:#818cf8;text-transform:uppercase}.adv-cal-controls{display:grid;grid-template-columns:1fr;gap:12px}.adv-cal-control-group{display:flex;flex-direction:column;gap:4px}.adv-cal-control-group label{font-size:12px;color:var(--text-secondary);display:flex;justify-content:space-between}.adv-cal-input-row{display:flex;align-items:center;gap:10px}.adv-cal-input-row input[type=range]{flex:1}.adv-cal-val{font-family:monospace;font-size:12px;background:#0000004d;padding:2px 6px;border-radius:4px;width:45px;text-align:right}.danger-text{color:#ef4444!important}.danger-text:hover{text-decoration:underline}.guided-cal-overlay{position:fixed;inset:0;z-index:9000;background:#0a0a0a;display:flex;flex-direction:column;align-items:stretch}.guided-cal-body{display:flex;flex-direction:column;height:100%;width:100%;max-width:640px;margin:0 auto}.guided-cal-image-wrap{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.guided-cal-image-wrap img{max-width:100%;max-height:100%;object-fit:contain;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.guided-cal-image-wrap.gcal-tappable{cursor:crosshair}.guided-cal-image-wrap.gcal-tappable img{outline:3px solid rgba(255,255,255,.25);border-radius:4px}.guided-cal-dots-layer{position:absolute;inset:0;pointer-events:none}.gcal-dot{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#4a90e24d;border:2px solid #4a90e2;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;white-space:nowrap;animation:gcal-dot-pop .25s ease}.gcal-dot-ding{background:#610a4259;border-color:var(--down-fill, #610a42);width:48px;height:48px;font-size:11px}@keyframes gcal-dot-pop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.guided-cal-panel{flex:0 0 auto;background:#111;border-top:1px solid rgba(255,255,255,.08);padding:20px 24px 28px;display:flex;flex-direction:column;gap:12px;min-height:200px}.guided-cal-status h2{font-size:18px;font-weight:700;color:#fff;margin-bottom:6px}.guided-cal-status p{font-size:14px;color:#fff9;line-height:1.5}.guided-cal-status strong{color:#fff}.gcal-note-list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}.gcal-note-list li{font-size:13px;color:#ffffffbf;background:#ffffff0f;border-radius:20px;padding:3px 10px}.gcal-hint{font-size:12px;color:#ffffff59!important;margin-top:8px!important}.guided-cal-pitch-display{min-height:36px;display:flex;align-items:center}.gcal-listening{font-size:14px;color:#ffffff59;font-style:italic;animation:gcal-pulse 1.6s ease-in-out infinite}@keyframes gcal-pulse{0%,to{opacity:.35}50%{opacity:.8}}.gcal-note-live{font-size:28px;font-weight:700;color:#ffffff8c;letter-spacing:.02em;transition:color .15s}.gcal-note-confirmed{font-size:36px;font-weight:800;color:#fff;letter-spacing:.02em}.guided-cal-actions{display:flex;gap:10px;flex-wrap:wrap}.gcal-btn-primary,.gcal-btn-secondary{padding:10px 22px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:background .18s,opacity .18s}.gcal-btn-primary{background:var(--accent, #4a90e2);color:#fff}.gcal-btn-primary:hover{opacity:.88}.gcal-btn-secondary{background:#ffffff1a;color:#ffffffbf}.gcal-btn-secondary:hover{background:#ffffff29}#calOptimizationModal .modal{background:var(--panel);border:1px solid var(--accent-glow);box-shadow:0 0 30px #4f46e533;padding:40px;border-radius:24px;position:relative;z-index:1}#calOptimizationModal .modal:before{content:"";position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}#calOptimizationModal .primary-btn.active{background:linear-gradient(135deg,var(--accent-glow),#4f46e5);border:none;height:50px;font-weight:700;font-size:16px;box-shadow:0 10px 20px #4f46e54d;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}#calOptimizationModal .primary-btn.active:hover{transform:translateY(-2px);box-shadow:0 15px 25px #4f46e566}#calOptimizationModal .secondary-btn{height:40px;font-size:14px;color:var(--text-secondary)}#calOptimizationModal .secondary-btn:hover{color:var(--text);background:#ffffff0d}.coaching-sidebar .hud-accuracy{font-size:48px;font-weight:800;display:block;margin-bottom:8px;color:var(--primary)}.coaching-sidebar .hud-notes-container{font-size:18px;font-weight:600;margin-bottom:24px}.coaching-results-modal.sidebar-mode:before{content:"";position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}.sidebar-tabs{display:flex;margin-bottom:16px;background:#fff6;padding:4px;border-radius:10px;gap:4px}body.dark .sidebar-tabs{background:#0000004d}.sidebar-tab{flex:1;padding:8px 4px;border:none;background:transparent;color:var(--text-secondary);font-weight:600;font-size:13px;cursor:pointer;border-radius:8px;transition:all .2s ease;text-align:center}.sidebar-tab:hover{background:#ffffff80;color:var(--text-primary)}.sidebar-tab.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px #0000000d}body.dark .sidebar-tab.active{background:var(--panel);color:var(--primary-color);box-shadow:0 2px 8px #0003}.coaching-results-modal .sidebar-content{display:none}.coaching-results-modal .sidebar-content.active{display:block}.coaching-hud button,.coaching-hud span{font-size:16px}.hud-score{display:flex;flex-direction:column;align-items:center;margin-bottom:12px}.hud-label{font-size:12px;color:var(--text-secondary);margin-bottom:4px}.hud-value{font-size:32px;font-weight:700;color:var(--primary)}.hud-notes{text-align:center;margin-bottom:12px;font-size:14px}.hud-correct{color:#2ecc71;font-weight:700}.hud-total{color:var(--text-secondary)}.hud-stop{width:100%;padding:10px 16px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:999px;color:var(--text);cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.hud-stop:hover{background:var(--btn-hover)}.coach-correct{background-color:#2ecc714d!important;border:2px solid #2ecc71!important;animation:pulse-correct .3s ease}.coach-timing{background-color:#f1c40f4d!important;border:2px solid #f1c40f!important}.coach-wrong{background-color:#e74c3c4d!important;border:2px solid #e74c3c!important;animation:shake .3s ease}.coach-missed{opacity:.5!important;border:2px dashed #e74c3c!important;background-color:#e74c3c1a!important;filter:grayscale(.5)}@keyframes pulse-correct{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.coaching-results-modal{max-width:600px;max-height:90vh;overflow-y:auto;padding:32px;transition:all .4s cubic-bezier(.25,.8,.25,1);transform-origin:top right;background:#ffffffd9;border:1px solid rgba(255,255,255,.5);border-radius:20px;box-shadow:0 20px 50px #00000026;position:relative;z-index:1}.coaching-results-modal:before{content:"";position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}.coaching-results-modal.sidebar-mode{position:fixed;top:35vh;right:20px;bottom:20px;left:auto;transform:none;overflow-y:hidden;width:320px;max-width:90vw;height:auto;max-height:80vh;margin:0;border-radius:16px;padding:20px;box-shadow:-4px 0 24px #00000026;z-index:1005;background:#ffffffbf;border:1px solid rgba(255,255,255,.4)}.coaching-results-sidebar .score-circle{width:140px;height:140px;margin:10px auto 20px}.coaching-results-sidebar .score-circle .score-value{font-size:44px}.coaching-results-sidebar .score-circle .score-label{font-size:14px}.coaching-results-sidebar .score-breakdown{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:24px}.coaching-results-sidebar .score-item{background:#fff6;padding:12px 16px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,.3)}body.dark .coaching-results-sidebar .score-item{background:#0003;border-color:#ffffff1a}.coaching-results-sidebar .score-item .score-label{margin-bottom:0;font-size:14px;color:var(--text-secondary)}.coaching-results-sidebar .score-item .score-value{font-size:18px;font-weight:700;color:var(--primary)}.coaching-results-sidebar .problem-measure{background:rgba(var(--error-rgb, 231, 76, 60),.1);color:var(--error-color, #e74c3c);border:1px solid rgba(var(--error-rgb, 231, 76, 60),.2);padding:8px 12px;border-radius:8px;margin-bottom:8px;font-size:14px;font-weight:500}.results-header-actions{top:10px;right:10px;display:flex;gap:8px;justify-content:right}.sidebar-minimize-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary)}.results-summary.score-excellent{background:linear-gradient(0deg,#22c55ea6,#22c55e00)!important}.results-summary.score-good{background:linear-gradient(0deg,#c8ea088c,#c8ea0800)!important}.results-summary.score-decent{background:linear-gradient(0deg,#eab3088c,#eab30800)!important}.results-summary.score-needs-work{background:linear-gradient(0deg,#e869248c,#e8692400)!important}.results-summary{margin-bottom:32px;padding-top:2px;border-radius:8px}.score-circle{width:200px;height:200px;border-radius:50%;background:var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:40px auto 24px;box-shadow:0 4px 12px #0003}.score-circle .score-value{font-size:64px;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}.score-circle .score-label{font-size:24px;color:#fffffff2;margin-top:4px;text-shadow:0 1px 4px rgba(0,0,0,.4)}.score-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;padding:24px}.score-item{text-align:center;padding:16px;background:var(--panel);border-radius:8px;border:1px solid var(--panel-border)}.score-item .score-label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:8px}.score-item .score-value{display:block;font-size:24px;font-weight:700;color:var(--primary)}.celebration-container{text-align:center;margin-bottom:16px}.celebration-emoji,.thumbs-up-emoji,.encouragement-emoji,.try-again-emoji{font-size:64px;display:inline-block}.celebration-excellent .celebration-emoji{animation:celebration-bounce .6s ease-in-out}.celebration-good .thumbs-up-emoji{animation:thumbs-up-bounce .5s ease-in-out}.celebration-keep-trying .encouragement-emoji{animation:encouragement-pulse .8s ease-in-out}.celebration-try-again .try-again-emoji{animation:try-again-spin 1s ease-in-out}@keyframes celebration-bounce{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.3) rotate(-10deg)}50%{transform:scale(1.2) rotate(10deg)}75%{transform:scale(1.3) rotate(-5deg)}}@keyframes thumbs-up-bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.1)}}@keyframes encouragement-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.9}}@keyframes try-again-spin{0%{transform:rotate(0) scale(1);opacity:.7}50%{transform:rotate(180deg) scale(1.1);opacity:1}to{transform:rotate(360deg) scale(1);opacity:.7}}.problem-areas{margin-bottom:24px}.problem-areas h3{font-size:16px;margin-bottom:12px;color:var(--text)}#problemMeasuresList{display:flex;flex-wrap:wrap;gap:8px}.problem-measure{padding:8px 12px;background:#e74c3c1a;border:1px solid #e74c3c;border-radius:6px;font-size:13px;color:#e74c3c}.no-problems{padding:16px;text-align:center;background:#2ecc711a;border:1px solid #2ecc71;border-radius:6px;color:#2ecc71;font-size:14px}@media(max-width:768px){.coaching-hud{top:10px;right:10px;padding:12px;min-width:120px}.hud-value{font-size:24px}.score-circle{width:120px;height:120px}.score-circle .score-value{font-size:36px}.score-breakdown{grid-template-columns:1fr}}.hud-mix-controls{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.1)}.mix-slider{display:flex;align-items:center;gap:8px;margin-bottom:4px}.mix-icon{font-size:16px;width:20px;text-align:center;cursor:help}.mix-slider input[type=range]{flex:1;height:4px;border-radius:2px;accent-color:var(--primary);background:#0000001a;cursor:pointer}.hud-loop-toggle{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.1)}.hud-loop-btn{width:100%;padding:10px 16px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:999px;color:var(--text);cursor:pointer;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}.hud-loop-btn:hover{background:var(--btn-hover)}.hud-loop-btn.active{background:var(--btn-active);color:var(--text);border-color:var(--btn-active)}.loop-icon{font-size:16px}.loop-text{font-weight:500}.history-list{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto;padding:4px}.history-item{display:flex;align-items:center;gap:12px;padding:12px;background:#ffffff0d;border:1px solid var(--panel-border);border-radius:8px;cursor:pointer;transition:all .2s ease}.history-item:hover{background:#ffffff1a;transform:translate(2px)}.history-score{font-size:18px;font-weight:700;width:50px;text-align:center}.history-score.score-excellent{color:var(--success)}.history-score.score-good{color:var(--success);opacity:.8}.history-score.score-decent{color:var(--warning)}.history-score.score-needs-work{color:var(--error)}.history-details{flex:1}.history-pattern{font-weight:600;font-size:14px;margin-bottom:2px;color:var(--text)}.history-meta{font-size:12px;color:var(--text-secondary)}.history-load-btn{background:none;border:none;color:var(--primary);opacity:.5;cursor:pointer;font-size:16px;padding:4px}.history-item:hover .history-load-btn{opacity:1}.no-history{text-align:center;color:var(--text-secondary);font-style:italic;padding:20px}.loading-spinner{text-align:center;padding:20px;color:var(--text-secondary)}.coaching-feedback-tooltip{position:fixed;background-color:#000000e6;color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;font-family:Inter,sans-serif;pointer-events:none;z-index:10000;box-shadow:0 4px 12px #0000004d;opacity:1;transition:opacity .3s ease;border:1px solid rgba(255,255,255,.1);white-space:nowrap}.coaching-feedback-tooltip.fade-out{opacity:0}.coach-missed{outline:2px dashed rgba(255,255,255,.5)!important;outline-offset:-2px;background-color:#ff00001a!important}body.dark .coaching-results-modal{background:rgba(var(--panel-rgb),.95);border-color:#ffffff1a;box-shadow:0 20px 60px #00000080}body.dark .coaching-results-modal.sidebar-mode{background:rgba(var(--panel-rgb),.85);border-color:#ffffff1a}#errorModal{display:none;position:fixed;z-index:10000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);align-items:center;justify-content:center}#errorModal.show{display:flex!important}.error-modal-content{background-color:#fefefe;margin:auto;padding:30px;border:1px solid #ddd;border-radius:12px;width:90%;max-width:500px;box-shadow:0 4px 20px #00000026;font-family:system-ui,-apple-system,sans-serif;text-align:center;color:#333}.error-modal-content h2{margin-top:0;color:#d32f2f;margin-bottom:10px;font-weight:600}.error-modal-content p{color:#555;line-height:1.5;margin-bottom:20px}.error-details{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;text-align:left;margin-bottom:25px;font-size:.9rem}.error-details summary{padding:10px;cursor:pointer;color:#666;font-weight:500;-webkit-user-select:none;user-select:none}.error-details summary:hover{background:#f1f3f5}.error-details pre{margin:0;padding:10px;border-top:1px solid #e9ecef;white-space:pre-wrap;word-wrap:break-word;font-size:11px;color:#d32f2f;max-height:200px;overflow-y:auto;background:#fff}.error-actions{display:flex;justify-content:center;gap:15px}.error-btn{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .1s,opacity .2s}.error-btn:active{transform:scale(.96)}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0069d9}.btn-secondary{background-color:#e9ecef;color:#495057}.btn-secondary:hover{background-color:#dee2e6}.potw-modal{max-width:600px;width:90%;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;box-shadow:0 10px 40px #00000080;color:var(--text);padding:0;display:flex;flex-direction:column}.potw-modal .modal-header{padding:16px 20px;border-bottom:1px solid var(--panel-border);display:flex;justify-content:space-between;align-items:center}.potw-tabs{display:flex;border-bottom:1px solid var(--panel-border);background:#0003}.potw-tab{flex:1;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-muted, #aaa);padding:12px;font-size:.95rem;cursor:pointer;transition:all .2s}.potw-tab:hover{background:#ffffff0d;color:var(--text)}.potw-tab.active{color:var(--btn-active);border-bottom-color:var(--btn-active);background:#ffffff0d;font-weight:700}.potw-tab-content{display:none;animation:fadeIn .2s ease}.potw-tab-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.potw-modal .modal-body{padding:20px;overflow-y:auto;max-height:70vh}.potw-section{margin-bottom:24px}.potw-section h3{margin-top:0;margin-bottom:8px;font-size:1.1rem;color:var(--btn-active)}.potw-section .desc{margin-bottom:16px;opacity:.7;font-size:.9rem}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:.9rem;font-weight:500}.full-width{width:100%;box-sizing:border-box;padding:10px;border-radius:6px;border:1px solid var(--panel-border);background:#0003;color:var(--text);font-size:1rem;font-family:inherit;outline:none;transition:all .2s}.full-width:focus{border-color:var(--btn-active);background:#0000004d}select.full-width{appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 12px top 50%;background-size:12px auto;padding-right:30px}textarea.full-width{resize:vertical}.status-msg{margin-top:10px;font-size:.9rem;text-align:center;min-height:1.2em}.status-error{color:#ff6b6b}.status-success{color:#51cf66}.potw-list-item{background:#ffffff0d;border:1px solid var(--panel-border);padding:10px 14px;border-radius:6px;margin-bottom:8px;display:flex!important;justify-content:space-between;align-items:center;color:var(--text)}.potw-list-item h4{margin:0 0 4px;font-size:.95rem}.potw-list-item .meta{font-size:.8rem;opacity:.7}.potw-actions{display:flex;gap:8px}.icon-btn{background:transparent;border:none;cursor:pointer;font-size:1.1rem;padding:4px;border-radius:4px;transition:all .2s;opacity:.7}.icon-btn:hover{opacity:1;background:#ffffff1a;transform:scale(1.1)}.delete-btn:hover{background:#ff3c3c33}.glossary-link{color:var(--primary);text-decoration:underline;text-decoration-style:dashed;text-underline-offset:4px;font-weight:500;cursor:pointer;transition:all .2s ease}.glossary-link:hover{color:var(--accent-glow);text-decoration-style:solid;background:rgba(var(--primary-rgb),.1);border-radius:4px;padding:0 2px}.glossary-term-item{padding:10px 15px;border-radius:8px;cursor:pointer;margin-bottom:5px;transition:all .2s ease;border:1px solid transparent}.glossary-term-item:hover{background:#ffffff0d}.glossary-term-item.active{background:rgba(var(--primary-rgb),.15);border:1px solid var(--primary);font-weight:700}.glossary-course-checkbox{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background .2s ease}.glossary-course-checkbox:hover{background:#ffffff0d}.glossary-course-checkbox input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px;cursor:pointer}#gvDefinition p{margin-top:0;margin-bottom:1em}#gvDefinition strong{font-weight:700;color:var(--text)}#gvDefinition em{font-style:italic;color:var(--text-secondary)}#gvDefinition ul,#gvDefinition ol{margin-top:0;margin-bottom:1em;padding-left:20px}#gvDefinition li{margin-bottom:.5em}#gvDefinition blockquote{border-left:4px solid var(--primary);margin-left:0;margin-right:0;color:var(--text-secondary);font-style:italic;background:#ffffff05;padding:10px 15px;border-radius:0 8px 8px 0}.pro-bundle-header{margin-bottom:20px;padding:10px 16px;background:rgba(var(--panel-rgb),.3);border-radius:12px;border:1px dashed var(--panel-border);display:flex;align-items:center;gap:12px}.pro-bundle-header strong{font-size:14px;opacity:.9}.vibrant-badge{padding:4px 8px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-size:10px;font-weight:800;border-radius:6px;letter-spacing:.5px}.upgrade-modal{max-width:500px;background:rgba(var(--panel-rgb),.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--panel-border);box-shadow:0 25px 50px -12px #00000040;padding:40px;border-radius:24px;color:var(--text)}@media(max-width:768px){.upgrade-modal{max-width:95vw;max-height:90vh;overflow-y:scroll;padding:20px;border-radius:20px}}body.dark .upgrade-modal{background:#141419d9;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px #00000080;color:#fff}.upgrade-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.vibrant-text{background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:28px;font-weight:800}.upgrade-intro{font-size:16px;color:var(--text);opacity:.8;margin-bottom:30px}body.dark .upgrade-intro{color:#ffffffb3;opacity:1}.feature-list{display:flex;flex-direction:column;gap:20px;margin-bottom:40px}.feature-item{display:flex;gap:16px;align-items:flex-start;padding:12px;border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid transparent}.feature-item.highlight{background:#6366f11a;border:1px solid rgba(99,102,241,.3);box-shadow:0 0 20px #6366f11a;transform:scale(1.02);animation:highlight-pulse 2s infinite}body.dark .feature-item.highlight{background:#a855f726;border:1px solid rgba(168,85,247,.4);box-shadow:0 0 30px #a855f733}@keyframes highlight-pulse{0%{box-shadow:0 0 #6366f166}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}.feature-icon{font-size:24px;background:#0000000d;padding:12px;border-radius:12px}body.dark .feature-icon{background:#ffffff0d}.feature-details strong{display:block;font-size:16px;margin-bottom:4px}.feature-details span{font-size:14px;color:var(--text);opacity:.6;line-height:1.4}body.dark .feature-details span{color:#ffffff80;opacity:1}.upgrade-cta{display:flex;flex-direction:column;gap:12px;align-items:center}.pro-btn{width:100%;padding:16px;font-size:18px;font-weight:700;background:linear-gradient(135deg,#6366f1,#a855f7);border:none;border-radius:12px;color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.pro-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -5px #6366f180}.price-notice{font-size:12px;color:var(--text);opacity:.5}body.dark .price-notice{color:#fff6;opacity:1}.celebratory-border{position:relative;border:2px solid transparent;background-image:linear-gradient(var(--panel-bg),var(--panel-bg)),linear-gradient(135deg,#6366f1,#a855f7,#ec4899);background-origin:border-box;background-clip:content-box,border-box;animation:border-rotate 4s linear infinite}@keyframes border-rotate{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}.pulse-animation{animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #a855f766}70%{transform:scale(1.02);box-shadow:0 0 0 15px #a855f700}to{transform:scale(1);box-shadow:0 0 #a855f700}}.assignments-modal{width:min(900px,95vw);max-height:90vh;overflow:hidden;border-radius:20px;box-shadow:0 20px 50px #0000004d;background:#fffffff7;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);padding:0;border:1px solid rgba(255,255,255,.4);display:flex;flex-direction:column}body.dark .assignments-modal{background:#1a1a23fa;border:1px solid rgba(255,255,255,.08)}.asgn-tab-bar{display:flex;border-bottom:1px solid var(--panel-border);padding:10px 32px;flex-shrink:0;gap:4px}.asgn-tab-btn{background:transparent;border:none;border-bottom:2px solid transparent;padding:12px 20px;font-size:14px;font-weight:500;color:var(--text-secondary, rgba(0,0,0,.5));cursor:pointer;margin-bottom:-1px;transition:color .2s,border-color .2s;font-family:inherit}.asgn-tab-btn:hover{color:var(--text)}.asgn-tab-btn.active{color:var(--text);border-bottom-color:var(--primary-color, #f1c40f);font-weight:600}.asgn-tab-panel{flex:1;overflow-y:auto;padding:24px 32px 32px}.asgn-panel-toolbar{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-bottom:16px}.asgn-new-folder-btn{background:none;border:1px dashed var(--panel-border);border-radius:8px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--text);opacity:.65;cursor:pointer;transition:opacity .15s,border-color .15s}.asgn-new-folder-btn:hover{opacity:1;border-style:solid}.asgn-folder-group{display:flex;flex-direction:column;gap:0}.asgn-folder-header{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 4px;cursor:pointer;border-radius:8px;-webkit-user-select:none;user-select:none;transition:background .12s}.asgn-folder-header:hover{background:#0000000a}body.dark .asgn-folder-header:hover{background:#ffffff0d}.asgn-folder-toggle{font-size:11px;opacity:.5;width:14px;flex-shrink:0}.asgn-folder-name{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.6;flex:1}.asgn-folder-count{font-size:11px;opacity:.4;background:var(--panel-border);border-radius:99px;padding:1px 7px}.asgn-folder-action{background:none;border:none;font-size:12px;opacity:0;cursor:pointer;padding:2px 4px;border-radius:4px;transition:opacity .12s,background .12s}.asgn-folder-header:hover .asgn-folder-action{opacity:.5}.asgn-folder-action:hover{opacity:1!important;background:#0000000f}.asgn-folder-uncategorized .asgn-folder-name{font-style:italic}.asgn-folder-body{display:flex;flex-direction:column;gap:6px;padding:4px 0 8px 18px}.asgn-folder-body.collapsed{display:none}.asgn-folder-empty{font-size:12px;opacity:.4;padding:6px 4px;font-style:italic}.asgn-list{display:flex;flex-direction:column;gap:8px}.asgn-list-empty{text-align:center;padding:40px 20px;opacity:.5;font-size:14px}.asgn-list-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#ffffff80;border:1px solid var(--panel-border);border-radius:12px;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}.asgn-list-item:hover{background:#ffffffd9;transform:translateY(-1px);box-shadow:0 4px 12px #0000000f}body.dark .asgn-list-item{background:#ffffff0a}body.dark .asgn-list-item:hover{background:#ffffff14}.asgn-item-title{flex:1;font-weight:600;font-size:14px}.asgn-item-meta{font-size:12px;opacity:.5}.asgn-status-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}.asgn-status-pill.published{background:#2ecc7126;color:#27ae60}.asgn-status-pill.draft{background:#f39c1226;color:#e67e22}.asgn-status-pill.pending{background:#96969626;color:#888}.asgn-status-pill.in_progress{background:#3498db26;color:#2980b9}.asgn-status-pill.submitted{background:#f1c40f26;color:#c0a000}.asgn-status-pill.reviewed{background:#2ecc7126;color:#27ae60}.asgn-editor{border-top:1px solid var(--panel-border);padding-top:24px;margin-top:20px}.asgn-editor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.asgn-editor-header h3{font-size:18px;font-weight:600;margin:0}.asgn-field-group{margin-bottom:16px}.asgn-field-group input[type=text],.asgn-field-group textarea{background:#fff9;border:1px solid rgba(0,0,0,.1);color:var(--text);border-radius:14px;padding:12px 18px;font-size:14px;width:100%;font-family:inherit;box-sizing:border-box;transition:border-color .2s,box-shadow .2s;resize:vertical}.asgn-field-group input[type=text]:focus,.asgn-field-group textarea:focus{outline:none;border-color:var(--primary-color, #f1c40f);box-shadow:0 0 0 3px #f1c40f33}body.dark .asgn-field-group input[type=text],body.dark .asgn-field-group textarea{background:#ffffff0f;border-color:#ffffff1a}.asgn-field-row{display:flex;gap:16px}.asgn-field-row .asgn-field-group{flex:1}.asgn-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;opacity:.55;margin-bottom:6px}.asgn-select,.asgn-date-input{background:#fff9;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:10px 36px 10px 18px;font-size:14px;width:100%;font-family:inherit;color:var(--text);cursor:pointer;box-sizing:border-box;transition:border-color .2s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.asgn-date-input{background-image:none;padding-right:18px}.asgn-select:focus,.asgn-date-input:focus{outline:none;border-color:var(--primary-color, #f1c40f)}body.dark .asgn-select,body.dark .asgn-date-input{background-color:#ffffff0f;border-color:#ffffff1a}.asgn-toggle-row{display:flex;align-items:center;gap:10px}.asgn-toggle{width:18px;height:18px;accent-color:var(--primary-color, #f1c40f);cursor:pointer;flex-shrink:0}.asgn-toggle-hint{font-size:12px;opacity:.45}.asgn-section-heading{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;opacity:.45;margin:24px 0 10px}.asgn-editor-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:20px;border-top:1px solid var(--panel-border);margin-top:20px}.asgn-save-status{margin-right:auto;color:#27ae60;font-weight:600;font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none}.asgn-danger-btn{background:transparent;border:1px solid rgba(231,76,60,.4);color:#e74c3c;padding:10px 20px;border-radius:999px;font-size:13px;font-family:inherit;cursor:pointer;transition:background .2s}.asgn-danger-btn:hover{background:#e74c3c1a}.asgn-items-list{display:flex;flex-direction:column;gap:8px}.asgn-item-card{background:#ffffff80;border:1px solid var(--panel-border);border-radius:14px;overflow:hidden;transition:box-shadow .2s}body.dark .asgn-item-card{background:#ffffff0a}.asgn-item-card-header{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;-webkit-user-select:none;user-select:none}.asgn-item-type-icon{font-size:16px;width:26px;text-align:center;flex-shrink:0}.asgn-item-header-title{flex:1;font-size:14px;font-weight:500;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asgn-item-actions{display:flex;align-items:center;gap:4px}.asgn-item-actions button{background:transparent;border:none;cursor:pointer;padding:4px 6px;border-radius:6px;font-size:14px;color:var(--text);opacity:.4;transition:opacity .15s,background .15s;font-family:inherit}.asgn-item-actions button:hover{opacity:.9;background:#0000000f}.asgn-required-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:999px;background:#3498db26;color:#2980b9}.asgn-item-card-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}.asgn-item-card-body.collapsed{display:none}.asgn-item-card-body input[type=text],.asgn-item-card-body textarea{background:#fff9;border:1px solid rgba(0,0,0,.08);color:var(--text);border-radius:10px;padding:9px 14px;font-size:13px;width:100%;font-family:inherit;box-sizing:border-box;resize:vertical;transition:border-color .2s}.asgn-item-card-body input[type=text]:focus,.asgn-item-card-body textarea:focus{outline:none;border-color:var(--primary-color, #f1c40f)}body.dark .asgn-item-card-body input[type=text],body.dark .asgn-item-card-body textarea{background:#ffffff0f;border-color:#ffffff1a}.asgn-item-required-row{display:flex;align-items:center;gap:8px;font-size:13px}.asgn-add-item-row{display:flex;align-items:center;gap:10px;margin-top:10px}.asgn-add-type-select{flex:1;border-radius:999px}.asgn-quiz-builder{border-top:1px dashed var(--panel-border);padding-top:12px;margin-top:4px}.asgn-quiz-question{background:#ffffff80;border:1px solid var(--panel-border);border-radius:10px;padding:12px;margin-bottom:8px}body.dark .asgn-quiz-question{background:#ffffff0a}.asgn-quiz-question-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.asgn-quiz-question-num{font-size:11px;font-weight:700;text-transform:uppercase;opacity:.4;white-space:nowrap}.asgn-quiz-question-header input{flex:1;background:transparent;border:none;border-bottom:1px solid var(--panel-border);border-radius:0;padding:4px 6px;font-size:13px;font-family:inherit;color:var(--text)}.asgn-quiz-question-header input:focus{outline:none;border-bottom-color:var(--primary-color, #f1c40f)}.asgn-quiz-question-del{background:transparent;border:none;cursor:pointer;font-size:14px;opacity:.35;padding:2px 4px;border-radius:4px;transition:opacity .15s;font-family:inherit}.asgn-quiz-question-del:hover{opacity:.8}.asgn-quiz-options{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}.asgn-quiz-option{display:flex;align-items:center;gap:8px}.asgn-quiz-option input[type=radio]{accent-color:var(--primary-color, #f1c40f);width:14px;height:14px;flex-shrink:0;cursor:pointer}.asgn-quiz-option input[type=text]{flex:1;background:transparent;border:none;border-bottom:1px solid var(--panel-border);border-radius:0;padding:3px 6px;font-size:13px;font-family:inherit;color:var(--text)}.asgn-quiz-option input[type=text]:focus{outline:none;border-bottom-color:var(--primary-color, #f1c40f)}.asgn-quiz-option-del{background:transparent;border:none;cursor:pointer;font-size:12px;opacity:.3;padding:2px;border-radius:4px;transition:opacity .15s;font-family:inherit}.asgn-quiz-option-del:hover{opacity:.7}.asgn-comp-sections-preview{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.asgn-comp-section-chip{font-size:11px;padding:2px 8px;border-radius:12px;background:#6366f11f;color:var(--text);border:1px solid rgba(99,102,241,.25)}.si-composition-ref{display:flex;flex-direction:column;gap:8px}.si-comp-title{font-size:14px;font-weight:600;color:var(--text)}.si-comp-sections{display:flex;flex-direction:column;gap:4px;border:1px solid var(--panel-border, rgba(0,0,0,.1));border-radius:8px;overflow:hidden}.si-comp-section{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:13px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.06))}.si-comp-section:last-child{border-bottom:none}.si-comp-section-num{font-size:11px;font-weight:700;color:var(--text-muted, #999);min-width:16px}.si-comp-section-label{font-weight:500;color:var(--text);flex:1}.si-comp-section-phrase{font-size:11px;color:var(--text-muted, #aaa)}.si-comp-load-btn{align-self:flex-start;padding:6px 14px;border-radius:7px;border:1px solid rgba(99,102,241,.4);background:#6366f114;color:#818cf8;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}.si-comp-load-btn:hover{background:#6366f12e;border-color:#6366f1;color:#a5b4fc}.asgn-quiz-actions{display:flex;gap:8px}.asgn-quiz-add-btn{background:transparent;border:1px dashed var(--panel-border);border-radius:999px;padding:4px 14px;font-size:12px;cursor:pointer;font-family:inherit;color:var(--text);opacity:.6;transition:opacity .15s,background .15s}.asgn-quiz-add-btn:hover{opacity:1;background:#0000000a}.asgn-quiz-add-question-row{margin-top:8px}.asgn-student-section{margin-top:28px;border-top:1px solid var(--panel-border);padding-top:20px}.asgn-student-list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto;margin-bottom:12px}.asgn-student-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s;font-size:14px}.asgn-student-row:hover{background:#0000000a}body.dark .asgn-student-row:hover{background:#ffffff0f}.asgn-student-row input[type=checkbox]{accent-color:var(--primary-color, #f1c40f);width:16px;height:16px;flex-shrink:0;cursor:pointer}.asgn-student-name{flex:1}.asgn-already-badge{font-size:11px;padding:2px 8px;border-radius:999px;background:#00000012;opacity:.7}body.dark .asgn-already-badge{background:#ffffff1a}.asgn-student-footer{display:flex;justify-content:flex-end}.asgn-no-students{font-size:13px;opacity:.5;padding:12px 0;text-align:center}.asgn-submission-list{display:flex;flex-direction:column;gap:8px}.asgn-submission-empty{text-align:center;padding:40px 20px;opacity:.5;font-size:14px}.asgn-submission-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#ffffff80;border:1px solid var(--panel-border);border-radius:12px;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}.asgn-submission-row:hover{background:#ffffffd9;transform:translateY(-1px);box-shadow:0 4px 12px #0000000f}body.dark .asgn-submission-row{background:#ffffff0a}body.dark .asgn-submission-row:hover{background:#ffffff14}.asgn-sub-student{font-weight:600;font-size:14px;min-width:120px}.asgn-sub-assignment{flex:1;font-size:13px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asgn-sub-date{font-size:12px;opacity:.45;white-space:nowrap}.asgn-review-panel{border-top:1px solid var(--panel-border);padding-top:24px;margin-top:20px}.asgn-review-body{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}.asgn-review-item{background:#ffffff80;border:1px solid var(--panel-border);border-radius:12px;padding:14px 16px}body.dark .asgn-review-item{background:#ffffff0a}.asgn-review-item-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.asgn-review-item-type-icon{font-size:15px}.asgn-review-item-title{font-weight:600;font-size:14px}.asgn-review-response{font-size:13px;color:var(--text-secondary, rgba(0,0,0,.6));word-break:break-word}.asgn-review-response audio{width:100%;margin-top:4px}.asgn-review-response a{color:var(--primary-color, #f1c40f);text-decoration:none}.asgn-review-response a:hover{text-decoration:underline}.asgn-quiz-score{font-weight:600;margin-bottom:6px}.asgn-quiz-answers{display:flex;flex-direction:column;gap:4px;font-size:12px;opacity:.7}.asgn-quiz-answer-row{display:flex;gap:6px}.asgn-quiz-answer-correct{color:#27ae60}.asgn-quiz-answer-wrong{color:#e74c3c}.asgn-mark-complete-check{color:#27ae60;font-size:18px}.asgn-loading{text-align:center;padding:30px;opacity:.5;font-size:14px}.asgn-item-checkbox{width:16px;height:16px;accent-color:var(--primary-color, #f1c40f);cursor:pointer;flex-shrink:0;opacity:0;transition:opacity .15s}.asgn-list-item:hover .asgn-item-checkbox,.asgn-list-item.selected .asgn-item-checkbox{opacity:1}.asgn-list-item.selected{background:#f1c40f1a!important;border-color:#f1c40f73!important}body.dark .asgn-list-item.selected{background:#f1c40f1f!important;border-color:#f1c40f59!important}.asgn-folder-body.drag-over,.asgn-folder-uncategorized.drag-over{background:#f1c40f14;border-radius:10px;outline:2px dashed rgba(241,196,15,.5);outline-offset:2px}.asgn-bulk-bar{display:none;align-items:center;gap:8px;padding:8px 12px;background:#f1c40f1a;border:1px solid rgba(241,196,15,.3);border-radius:10px;margin-bottom:10px;flex-wrap:wrap}.asgn-bulk-bar.visible{display:flex}.asgn-bulk-count{font-size:12px;font-weight:700;opacity:.7;white-space:nowrap;margin-right:4px}.asgn-bulk-folder-select{flex:1;min-width:120px;max-width:180px;background:#fff9;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:5px 28px 5px 12px;font-size:12px;font-family:inherit;color:var(--text);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}body.dark .asgn-bulk-folder-select{background-color:#ffffff14;border-color:#ffffff1f}.asgn-bulk-action-btn{background:var(--primary-color, #f1c40f);border:none;border-radius:999px;padding:5px 14px;font-size:12px;font-weight:700;font-family:inherit;color:#000;cursor:pointer;white-space:nowrap;transition:opacity .15s}.asgn-bulk-action-btn:hover{opacity:.85}.asgn-bulk-archive-btn{background:transparent;border:1px solid rgba(0,0,0,.18);border-radius:999px;padding:5px 14px;font-size:12px;font-weight:600;font-family:inherit;color:var(--text);cursor:pointer;white-space:nowrap;transition:background .15s}.asgn-bulk-archive-btn:hover{background:#0000000f}body.dark .asgn-bulk-archive-btn{border-color:#ffffff2e}.asgn-bulk-clear-btn{background:transparent;border:none;cursor:pointer;font-size:16px;opacity:.4;padding:2px 4px;border-radius:4px;transition:opacity .15s;font-family:inherit;margin-left:auto}.asgn-bulk-clear-btn:hover{opacity:.8}.asgn-list-item-archived{opacity:.65}.asgn-unarchive-btn{background:transparent;border:1px solid rgba(0,0,0,.15);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;font-family:inherit;color:var(--text);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s,border-color .15s}.asgn-unarchive-btn:hover{background:#0000000f;border-color:#0000004d}body.dark .asgn-unarchive-btn{border-color:#ffffff2e}body.dark .asgn-unarchive-btn:hover{background:#ffffff14;border-color:#ffffff59}.student-inbox-modal{width:min(640px,95vw);max-height:90vh;overflow:hidden;border-radius:20px;box-shadow:0 20px 50px #0000004d;background:#fffffff7;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);padding:0;border:1px solid rgba(255,255,255,.4);display:flex;flex-direction:column}body.dark .student-inbox-modal{background:#1a1a23fa;border:1px solid rgba(255,255,255,.08)}.student-inbox-list-view{flex:1;overflow-y:auto;padding:16px 28px 28px}.student-inbox-list{display:flex;flex-direction:column;gap:8px}.student-inbox-empty{text-align:center;padding:48px 24px;opacity:.5;font-size:14px;line-height:1.6}.student-inbox-loading{text-align:center;padding:32px;opacity:.5;font-size:14px}.student-inbox-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;background:#00000008;border:1px solid var(--panel-border, rgba(0,0,0,.08));cursor:pointer;transition:background .15s,transform .1s}.student-inbox-item:hover{background:#0000000f;transform:translate(2px)}body.dark .student-inbox-item{background:#ffffff0a;border-color:#ffffff14}body.dark .student-inbox-item:hover{background:#ffffff14}.student-inbox-item-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.student-inbox-item-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-inbox-item-due{font-size:12px;opacity:.55}.student-inbox-item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.student-inbox-feedback-dot{font-size:14px}.student-inbox-arrow{font-size:18px;opacity:.35}.student-inbox-status-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}.student-inbox-status-pill.pending{background:rgba(var(--accent-rgb, 99,102,241),.12);color:var(--accent, #6366f1)}.student-inbox-status-pill.in_progress{background:#f59e0b1f;color:#d97706}.student-inbox-status-pill.submitted{background:#3b82f61f;color:#2563eb}.student-inbox-status-pill.reviewed{background:#22c55e1f;color:#16a34a}.student-inbox-detail-view{flex:1;display:flex;flex-direction:column;overflow:hidden}.student-inbox-detail-header{display:flex;align-items:center;gap:12px;padding:16px 28px 12px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.08));flex-shrink:0}.student-inbox-back-btn{background:transparent;border:none;cursor:pointer;font-size:14px;color:var(--accent, #6366f1);font-family:inherit;padding:4px 8px;border-radius:6px;white-space:nowrap;transition:background .15s}.student-inbox-back-btn:hover{background:#0000000f}.student-inbox-detail-header h3{font-size:16px;font-weight:700;margin:0;flex:1}.student-inbox-detail-desc,.si-ref-phrase{font-size:13px;line-height:1.6;opacity:.7;margin:0;padding:12px 28px 0;flex-shrink:0}.student-inbox-scroll-body{flex:1;overflow-y:auto;display:flex;flex-direction:column}.student-inbox-video-container{padding:12px 28px 0}.student-inbox-video-embed{width:100%;aspect-ratio:16 / 9;border-radius:8px;border:none}.student-inbox-items-list{flex:1;padding:16px 28px;display:flex;flex-direction:column;gap:16px}.student-inbox-item-block{border:1px solid var(--panel-border, rgba(0,0,0,.1));border-radius:12px;padding:16px;background:#00000005}body.dark .student-inbox-item-block{background:#ffffff08;border-color:#ffffff14}.student-inbox-item-block-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.student-inbox-item-type-icon{font-size:16px;flex-shrink:0}.student-inbox-item-block-title{font-size:14px;font-weight:600;flex:1}.student-inbox-required{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#e74c3c;background:#e74c3c1a;padding:2px 7px;border-radius:10px}.student-inbox-item-instructions{font-size:12px;line-height:1.5;opacity:.65;margin-bottom:10px}.student-inbox-item-response-area{margin-top:8px}.student-inbox-mark-complete-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:500}.student-inbox-mark-complete-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--accent, #6366f1)}.student-inbox-quiz-question{margin-bottom:14px}.student-inbox-quiz-q-text{font-size:13px;font-weight:600;margin-bottom:8px;line-height:1.4}.student-inbox-quiz-options{display:flex;flex-direction:column;gap:6px}.student-inbox-quiz-option{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:6px 10px;border-radius:8px;transition:background .12s}.student-inbox-quiz-option:hover{background:#0000000a}body.dark .student-inbox-quiz-option:hover{background:#ffffff0d}.student-inbox-quiz-option input[type=radio]{accent-color:var(--accent, #6366f1);width:15px;height:15px;flex-shrink:0}.student-inbox-file-input{font-size:13px;color:var(--text);width:100%}.student-inbox-file-hint{font-size:11px;opacity:.5;margin-top:4px}.student-inbox-existing-file{font-size:12px;opacity:.65;margin-bottom:8px}.student-inbox-url-input{width:100%;padding:9px 12px;border:1px solid var(--panel-border, rgba(0,0,0,.15));border-radius:8px;font-size:13px;font-family:inherit;background:var(--input-bg, rgba(255,255,255,.8));color:var(--text);box-sizing:border-box;transition:border-color .15s}.student-inbox-url-input:focus{outline:none;border-color:var(--accent, #6366f1)}body.dark .student-inbox-url-input{background:#ffffff0f;border-color:#ffffff1f}.student-inbox-empty-note{font-size:12px;opacity:.5}.student-inbox-feedback-section{margin:0 28px 12px;padding:14px 16px;border-radius:12px;background:#22c55e12;border:1px solid rgba(34,197,94,.2);flex-shrink:0}.student-inbox-feedback-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#16a34a;margin-bottom:6px}.student-inbox-feedback-text{font-size:13px;line-height:1.6;white-space:pre-wrap}.student-inbox-detail-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 28px;border-top:1px solid var(--panel-border, rgba(0,0,0,.08));flex-shrink:0}@media(max-width:600px){.student-inbox-modal{width:100vw;max-height:95dvh;border-radius:20px}.student-inbox-list-view,.student-inbox-items-list{padding:16px 20px 24px}.student-inbox-detail-header,.student-inbox-detail-desc,.student-inbox-feedback-section,.student-inbox-detail-footer{padding-left:20px;padding-right:20px}}.notif-bell-wrapper{position:relative;display:flex;align-items:center;z-index:4500}.notif-bell-btn{position:relative;background:transparent;border:none;cursor:pointer;padding:6px 8px;border-radius:8px;color:var(--text);opacity:.7;transition:opacity .15s,background .15s;display:flex;align-items:center;justify-content:center}.notif-bell-btn:hover{opacity:1;background:#0000000f}body.dark .notif-bell-btn:hover{background:#ffffff14}.notif-badge{position:absolute;top:2px;right:2px;background:#e74c3c;color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;padding:0 4px;display:flex;align-items:center;justify-content:center;line-height:1;pointer-events:none}#mobileNotifBadge{display:none}.notif-panel{position:absolute;top:calc(100% + 8px);right:0;max-height:400px;overflow-y:scroll;width:340px;background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;box-shadow:0 8px 24px #0003;z-index:5000;display:none;flex-direction:column;overflow:hidden}body.dark .notif-panel{box-shadow:0 8px 32px #00000080}.notif-panel.open{display:flex;animation:fadeIn .15s ease-out}.notif-panel-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;opacity:.45;padding:14px 16px 10px;flex-shrink:0;border-bottom:1px solid var(--panel-border)}.notif-empty{padding:32px 16px;text-align:center;font-size:13px;opacity:.45}.notif-items-list{overflow-y:auto;max-height:380px;display:flex;flex-direction:column}.notif-item{padding:12px 16px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--panel-border);position:relative}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:#00000008}body.dark .notif-item:hover{background:#ffffff0a}.notif-item.unread{background:rgba(var(--accent-rgb, 99,102,241),.05)}.notif-item.unread:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent, #6c63ff);border-radius:0 2px 2px 0}.notif-item.unread:hover{background:rgba(var(--accent-rgb, 99,102,241),.09)}.notif-item-title{font-size:13px;font-weight:600;margin-bottom:3px;line-height:1.35}.notif-item-body{font-size:12px;opacity:.6;line-height:1.45;margin-bottom:5px}.notif-item-time{font-size:11px;opacity:.38;font-variant-numeric:tabular-nums}.notif-item-actions{display:flex;gap:8px;margin-top:10px}.notif-accept-btn,.notif-decline-btn{padding:5px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;min-width:auto}.notif-accept-btn{background:var(--accent, #6c63ff);color:#fff}.notif-accept-btn:hover{opacity:.88}.notif-accept-btn:disabled,.notif-decline-btn:disabled{opacity:.5;cursor:default}.notif-decline-btn{background:transparent;border:1px solid var(--panel-border);color:var(--text);opacity:.7}.notif-decline-btn:hover{opacity:1;background:#0000000a}.notif-invite-result{font-size:12px;color:#22c55e;font-weight:600}.notif-invite-result--declined{color:var(--text-muted, #999)}@media(max-width:600px){.assignments-modal{width:100vw;max-height:100dvh;border-radius:20px 20px 0 0;align-self:flex-end}.asgn-tab-panel{padding:16px 20px 24px}.asgn-tab-bar{padding:0 20px}.asgn-field-row{flex-direction:column;gap:0}#mobileNotifBadge{display:block}}.acct-settings-backdrop{display:none;position:fixed;inset:0;background:#0000004d;z-index:2999;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.acct-settings-backdrop.open{display:block}.acct-settings-sidebar{position:fixed;top:0;right:0;width:360px;height:100%;z-index:3000;display:flex;flex-direction:column;background:#fffffff7;border-left:1px solid rgba(0,0,0,.08);box-shadow:-10px 0 40px #0000001f;color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;transform:translate(100%);transition:transform .35s cubic-bezier(.16,1,.3,1)}body.dark .acct-settings-sidebar{background:#14141cfc;border-left-color:#ffffff14;box-shadow:-10px 0 40px #0006}.acct-settings-sidebar.open{transform:translate(0)}.acct-settings-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 16px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.08));flex-shrink:0}.acct-settings-title{font-size:16px;font-weight:700;color:var(--text)}.acct-settings-body{flex:1;overflow-y:auto;padding:8px 0 32px}.acct-section{padding:16px 20px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.06))}.acct-section:last-child{border-bottom:none}.acct-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;opacity:.45;margin-bottom:12px}.acct-email-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.acct-email-label{font-size:13px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:10px}.acct-link-btn{background:transparent;border:none;color:#6366f1;font-size:13px;font-weight:600;cursor:pointer;padding:2px 0;white-space:nowrap;display:block;text-align:left;margin-bottom:8px}.acct-link-btn:hover{text-decoration:underline}.acct-section-footer{padding-top:20px}.acct-signout-btn{background:transparent;border:1px solid rgba(231,76,60,.4);color:#e74c3c;font-size:13px;font-weight:600;cursor:pointer;padding:8px 16px;border-radius:999px;transition:background .15s}.acct-signout-btn:hover{background:#e74c3c14}.acct-notif-header-row,.acct-notif-row{display:grid;grid-template-columns:1fr 52px 52px;align-items:center}.acct-notif-row{border-bottom:1px solid var(--panel-border, rgba(0,0,0,.07))}.acct-notif-row:last-child{border-bottom:none}.acct-notif-col-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.4;text-align:center;padding-bottom:8px}.acct-notif-row-label{font-size:13px;padding:9px 0}.acct-notif-toggle-cell{display:flex;align-items:center;justify-content:center;padding:9px 0}.notif-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}.notif-toggle input{position:absolute;opacity:0;width:0;height:0}.notif-toggle-track{display:block;width:32px;height:18px;border-radius:9px;background:#00000026;transition:background .2s;position:relative;flex-shrink:0}body.dark .notif-toggle-track{background:#fff3}.notif-toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .2s}.notif-toggle input:checked+.notif-toggle-track{background:#6366f1}.notif-toggle input:checked+.notif-toggle-track:after{transform:translate(14px)}@media(max-width:600px){.acct-settings-sidebar{width:100vw;border-left:none;border-top:1px solid var(--panel-border, rgba(0,0,0,.08));border-radius:16px 16px 0 0;top:auto;bottom:0;height:90dvh;transform:translateY(100%)}.acct-settings-sidebar.open{transform:translateY(0)}}.stmgmt-backdrop{display:none;position:fixed;inset:0;background:#0000004d;z-index:2999}.stmgmt-backdrop.open{display:block}.stmgmt-sidebar{position:fixed;top:0;right:0;width:480px;max-width:100vw;height:100%;z-index:3000;display:flex;flex-direction:column;background:#fffffff7;border-left:1px solid rgba(0,0,0,.08);box-shadow:-10px 0 40px #0000001f;color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;transform:translate(100%);transition:transform .35s cubic-bezier(.16,1,.3,1)}body.dark .stmgmt-sidebar{background:#14141cfc;border-left-color:#ffffff14;box-shadow:-10px 0 40px #0006}.stmgmt-sidebar.open{transform:translate(0)}.stmgmt-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 16px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.08));flex-shrink:0}.stmgmt-title{font-size:16px;font-weight:700;color:var(--text)}.stmgmt-body{flex:1;overflow-y:auto}.stmgmt-invite-bar{padding:12px 16px 0}.stmgmt-invite-toggle-btn{font-size:13px;font-weight:600;color:var(--accent, #6c63ff);background:none;border:none;cursor:pointer;padding:0}.stmgmt-invite-toggle-btn:hover{text-decoration:underline}body.dark .stmgmt-invite-toggle-btn{color:var(--accent-glow, #a78bfa)}.stmgmt-invite-form{padding:12px 16px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.06))}.stmgmt-invite-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:8px;border:1px solid var(--panel-border, rgba(0,0,0,.14));background:var(--input-bg, #fff);color:var(--text);font-size:14px;outline:none}.stmgmt-invite-input:focus{border-color:var(--accent, #6c63ff);box-shadow:0 0 0 2px #6c63ff26}body.dark .stmgmt-invite-input{background:#ffffff0f;border-color:#ffffff1f}.stmgmt-invite-actions{display:flex;gap:8px;margin-top:8px}.stmgmt-invite-send-btn{flex:1;padding:8px;border-radius:8px;border:none;background:var(--accent, #6c63ff);color:#fff;font-size:13px;font-weight:600;cursor:pointer}.stmgmt-invite-send-btn:hover{opacity:.9}.stmgmt-invite-send-btn:disabled{opacity:.5;cursor:default}.stmgmt-invite-cancel-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--panel-border, rgba(0,0,0,.14));background:transparent;color:var(--text-muted, #777);font-size:13px;cursor:pointer}.stmgmt-invite-cancel-btn:hover{background:#0000000a}.stmgmt-invite-status{margin-top:8px;font-size:13px;color:var(--text-muted, #888);min-height:18px}.stmgmt-invite-status--success{color:#22c55e}.stmgmt-invite-status--error{color:var(--error, #e53e3e)}.stmgmt-sort-bar{display:flex;align-items:center;gap:4px;padding:10px 16px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.06));flex-wrap:wrap}.stmgmt-sort-label{font-size:12px;color:var(--text-muted, #888);margin-right:4px;white-space:nowrap}.stmgmt-sort-btn{font-size:12px;padding:4px 10px;border-radius:20px;border:1px solid var(--panel-border, rgba(0,0,0,.14));background:transparent;color:var(--text-muted, #777);cursor:pointer;transition:all .15s}.stmgmt-sort-btn:hover{background:#0000000d;color:var(--text)}body.dark .stmgmt-sort-btn:hover{background:#ffffff0f}.stmgmt-sort-btn.active{background:var(--accent, #6c63ff);color:#fff;border-color:transparent}.stmgmt-student-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.05));cursor:pointer;transition:background .12s}.stmgmt-student-row:last-child{border-bottom:none}.stmgmt-student-row:hover{background:#00000008}body.dark .stmgmt-student-row:hover{background:#ffffff0a}.stmgmt-student-avatar{width:38px;height:38px;border-radius:50%;background:var(--accent, #6c63ff);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.stmgmt-student-info{flex:1;min-width:0}.stmgmt-student-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stmgmt-student-meta{font-size:11px;color:var(--text-muted, #888);margin-top:3px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}.stmgmt-dot{opacity:.4}.stmgmt-chevron{font-size:20px;color:var(--text-muted, #bbb);flex-shrink:0}.stmgmt-loading,.stmgmt-empty,.stmgmt-error{padding:40px 20px;text-align:center;font-size:14px;color:var(--text-muted, #888)}.stmgmt-error{color:var(--error, #e53e3e)}.stmgmt-detail-header{padding:14px 16px 12px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.08))}.stmgmt-back-btn{display:inline-flex;align-items:center;background:none;border:none;color:var(--accent, #6c63ff);font-size:13px;cursor:pointer;padding:0;margin-bottom:6px}.stmgmt-back-btn:hover{text-decoration:underline}body.dark .stmgmt-back-btn{color:var(--accent-glow, #a78bfa)}.stmgmt-detail-name-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.stmgmt-detail-name{font-size:20px;font-weight:700;color:var(--text)}.stmgmt-remove-btn{flex-shrink:0;background:none;border:1px solid rgba(220,38,38,.4);color:#dc2626;font-size:12px;font-weight:500;padding:4px 10px;border-radius:6px;cursor:pointer;transition:background .15s,border-color .15s}.stmgmt-remove-btn:hover{background:#dc26260f;border-color:#dc2626}.stmgmt-remove-btn--confirm{background:#dc2626;border-color:#dc2626;color:#fff}.stmgmt-remove-btn--confirm:hover{background:#b91c1c;border-color:#b91c1c}body.dark .stmgmt-remove-btn{border-color:#f8717166;color:#f87171}body.dark .stmgmt-remove-btn--confirm{background:#dc2626;border-color:#dc2626;color:#fff}.stmgmt-detail-content{padding-bottom:40px}.stmgmt-course-group{padding:16px 16px 8px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.06))}.stmgmt-course-group:last-child{border-bottom:none}.stmgmt-course-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px}.stmgmt-course-count{font-size:11px;color:var(--text-muted, #888);margin-bottom:12px}.stmgmt-section-group{margin-bottom:12px}.stmgmt-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted, #aaa);margin-bottom:4px}.stmgmt-lesson-item{display:flex;align-items:center;gap:8px;padding:5px 0}.stmgmt-lesson-check{color:#22c55e;font-size:12px;flex-shrink:0}.stmgmt-lesson-title{flex:1;font-size:13px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stmgmt-lesson-date{font-size:11px;color:var(--text-muted, #aaa);flex-shrink:0}.stmgmt-sessions-section{padding:14px 16px 12px;border-bottom:1px solid var(--panel-border, rgba(0,0,0,.08))}.stmgmt-sessions-header{margin-bottom:10px}.stmgmt-sessions-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted, #aaa)}.stmgmt-session-group{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.stmgmt-session-circle{width:32px;height:32px;min-width:0;aspect-ratio:1 / 1;box-sizing:border-box;flex-shrink:0;border-radius:50%;border:2px solid var(--panel-border, rgba(0,0,0,.2));background:transparent;color:transparent;font-size:15px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s,color .15s;padding:0}.stmgmt-session-circle--sm{width:16px;height:16px;font-size:9px;border-width:1.5px;cursor:default}.stmgmt-session-circle:hover{border-color:#22c55e;background:#22c55e1a}.stmgmt-session-circle--done{background:#22c55e;border-color:#22c55e;color:#fff}.stmgmt-session-circle--done:hover{background:#16a34a;border-color:#16a34a}body.dark .stmgmt-session-circle{border-color:#fff3}body.dark .stmgmt-session-circle:hover{border-color:#22c55e;background:#22c55e1f}.stmgmt-student-sessions{display:flex;flex-direction:column;gap:4px;margin-top:5px}.stmgmt-student-session-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.stmgmt-student-session-complete{font-size:10px;font-weight:600;color:#22c55e;margin-left:2px}.stmgmt-sessions-complete{align-self:center;font-size:11px;font-weight:600;color:#22c55e;margin-left:4px}.stmgmt-session-add{display:flex;align-items:center;gap:8px;margin-top:4px}.stmgmt-session-count-select{padding:5px 8px;border-radius:7px;border:1px solid var(--panel-border, rgba(0,0,0,.14));background:var(--input-bg, #fff);color:var(--text);font-size:13px;cursor:pointer;outline:none}body.dark .stmgmt-session-count-select{background:#ffffff0f;border-color:#ffffff1f}.stmgmt-session-add-btn{padding:5px 12px;border-radius:7px;border:1px solid var(--panel-border, rgba(0,0,0,.14));background:transparent;color:var(--accent, #6c63ff);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}.stmgmt-session-add-btn:hover{background:#6c63ff14;border-color:var(--accent, #6c63ff)}body.dark .stmgmt-session-add-btn{color:var(--accent-glow, #a78bfa)}body.dark .stmgmt-session-add-btn:hover{background:#a78bfa1a;border-color:var(--accent-glow, #a78bfa)}@media(max-width:600px){.stmgmt-sidebar{width:100%;top:auto;bottom:0;height:88vh;border-left:none;border-top:1px solid var(--panel-border, rgba(0,0,0,.08));border-radius:16px 16px 0 0;transform:translateY(100%)}.stmgmt-sidebar.open{transform:translateY(0)}}.transport-container{background:rgba(var(--panel-rgb),.72);display:flex;padding:10px 18px;margin-bottom:20px;border-radius:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 24px #00000026;position:relative;z-index:10;justify-content:center;justify-self:center}.transport-container:before{content:"";position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:-1;transform:translateZ(0);will-change:transform;pointer-events:none}.controls-transport{display:flex;flex-wrap:wrap;gap:24px;position:absolute;left:50%;transform:translate(-50%);align-items:center;justify-content:center;width:100%;pointer-events:all}@media(max-width:768px){body{padding-bottom:0!important}.transport-container{padding:8px 12px;margin-bottom:0;max-width:calc(100vw - 24px);box-sizing:border-box;overflow:hidden;border-radius:16px}.controls-transport{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;padding:6px 12px env(safe-area-inset-bottom,10px);background:rgba(var(--panel-rgb),.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--panel-border);z-index:1200;pointer-events:all;transform:none}}#lessonTransport,#virtualHandpanPlaybackControls{visibility:hidden;height:0;min-height:0;overflow:hidden;padding:0;margin:0;border:none;pointer-events:none}#presentationControls{display:none}body.present #presentationControls{display:flex!important;position:fixed;bottom:3vh;left:50%;transform:translate(-50%);z-index:1000}.t-metro-btn.metro-beeps{background:#fb923c2e!important;color:#fb923c!important;border-color:#fb923c80!important}.t-metro-btn.metro-shaker{background:#6366f12e!important;color:#818cf8!important;border-color:#6366f166!important}body:not(.dark) .t-metro-btn.metro-beeps{background:#ea580c1a!important;color:#c2410c!important;border-color:#ea580c66!important}body:not(.dark) .t-metro-btn.metro-shaker{background:#6366f11a!important;color:#4f46e5!important;border-color:#6366f14d!important}.game-hud{border-color:var(--accent-glow);box-shadow:0 0 20px #4f46e533}.game-hud .hud-value{color:var(--primary);text-shadow:0 0 10px rgba(79,70,229,.3)}.game-selection-modal{max-width:500px}.game-card{transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.game-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px #0000001a;background:#ffffff1a!important}.game-card[data-game=simon]{border-color:var(--accent-glow)}.simon-turn-indicator{position:fixed;top:15%;left:50%;transform:translate(-50%);z-index:10000;text-align:center;pointer-events:none}.simon-turn-indicator .turn-message{font-size:48px;font-weight:700;color:var(--primary);text-shadow:0 0 20px rgba(79,70,229,.5);margin-bottom:16px;animation:turnPulse 1s ease-in-out infinite}.simon-turn-indicator.user-turn .turn-message{color:var(--accent-glow);text-shadow:0 0 20px rgba(99,102,241,.6)}.simon-turn-indicator .turn-timer{font-size:32px;font-weight:600;color:var(--text);opacity:.8}.simon-turn-indicator .turn-timer.warning{color:#f59e0b;animation:timerWarning .5s ease-in-out infinite}.simon-turn-indicator .turn-timer.danger{color:#ef4444;animation:timerDanger .3s ease-in-out infinite}@keyframes turnPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes timerWarning{0%,to{opacity:1}50%{opacity:.7}}@keyframes timerDanger{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}body.present.simon-game #measures,body.present.simon-game .static-labels{display:none!important}#preview-grid-container{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:1000px;background:#0f172acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(79,70,229,.3);border-radius:12px;padding:20px;z-index:9000;box-shadow:0 20px 50px #00000080}#preview-grid{display:flex;flex-direction:column;gap:10px}body.present.simon-game #preview-grid-container{display:block!important}@media(max-width:768px){.simon-turn-indicator .turn-message{font-size:32px}.simon-turn-indicator .turn-timer{font-size:24px}#preview-grid-container{width:95%;padding:10px}}@keyframes riverFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.cw-studio-overlay button.secondary-btn{color:#fff}.cw-studio-overlay{position:relative;display:flex;flex-direction:column;justify-content:center;gap:15px;margin-left:-50px;margin-right:-50px;width:auto;box-sizing:border-box;margin-bottom:20px;padding:15px 30px;min-height:180px;color:#fff;background:linear-gradient(270deg,#203857,#5b9fee,#1c3c5e,#5b9fee);background-size:800% 800%;animation:riverFlow 20s ease infinite;box-shadow:0 8px 30px #0009,inset 0 2px 10px #ffffff0d}.cw-overlay-top{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:20px;margin-top:10px}.cw-studio-overlay:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at center,rgba(255,255,255,.02) 0%,transparent 60%);background-size:20px 20px;pointer-events:none}@media(max-width:768px){.cw-studio-overlay{margin-left:-5px;margin-right:-5px}}.cw-progress-tracker{display:flex;align-items:center;justify-content:space-between;gap:0;width:100%;margin-bottom:10px;background:#0000001a;border-radius:10px;padding:10px}.cw-step-title{font-size:28px;font-weight:500;color:var(--accent-glow);transition:color .3s ease}.cw-step-subtitle{font-size:22px;font-weight:500;color:var(--text-secondary);transition:color .3s ease}.cw-step-buttons{display:flex;gap:15px;justify-content:space-between;align-items:center}.cw-step-indicator{display:flex;align-items:center;gap:12px}.cw-step-label{font-size:24px;font-weight:500;color:#d2d2d2;transition:color .3s ease}.cw-step-dot{width:18px;height:18px;border-radius:50%;background:#d2d2d2;transition:all .3s ease;position:relative;z-index:2;display:flex;align-items:center;justify-content:center}.cw-step-label.completed{color:var(--primary-color)}.cw-step-dot.completed{background:var(--primary-color)}.cw-step-dot.completed:after{content:"✓";color:#000;font-size:11px;font-weight:800}.cw-step-label.active{color:#fff;font-weight:600;font-size:30px}.cw-step-dot.active{background:#fff;box-shadow:0 0 0 4px rgba(var(--primary-color-rgb),.2)}.cw-step-line{flex:1;height:2px;background:#e4e4e4;margin:0 20px;transition:background .3s ease}.cw-step-line.completed{background:var(--primary-color)}.cw-auto-record{transition:all .3s ease;margin-bottom:20px}.cw-auto-record.active{color:#fff;background:#ff4b4b;border-color:#ff4b4b;box-shadow:0 0 15px #ff4b4b99;animation:pulse 2s infinite}@media(max-width:600px){.cw-step-label{display:none}}.composer-sidebar{width:408px;display:flex;flex-direction:column;overflow:hidden}.composer-save-status{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;opacity:0;transition:opacity .3s ease;pointer-events:none;white-space:nowrap;flex-shrink:0}.composer-save-status.saving{background:#f1c40f33;color:#b7860b;opacity:1}body.dark .composer-save-status.saving{background:#f1c40f26;color:#f1c40f}.composer-save-status.saved{background:#00c85326;color:#00873a;opacity:1}body.dark .composer-save-status.saved{background:#00c8531f;color:#2ecc71}.composer-toolbar{padding:12px 16px;border-bottom:1px solid var(--panel-border);flex-shrink:0}.composer-new-btn{width:100%;font-size:13px;padding:8px 12px}.composition-list{flex:1;overflow-y:auto;padding:8px 0}.composition-item{border-bottom:1px solid var(--panel-border)}.composition-header{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s}.composition-header:hover{background:var(--cell-hover)}.composition-chevron{font-size:10px;color:var(--text-secondary);transition:transform .2s;flex-shrink:0;width:12px}.composition-item.expanded .composition-chevron{transform:rotate(90deg)}.composition-title{flex:1;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.composition-play-btn{background:none;border:none;color:var(--accent-glow);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:4px;flex-shrink:0;opacity:.7;transition:opacity .15s}.composition-play-btn:hover{opacity:1;background:var(--cell-hover)}.composition-play-btn.active{opacity:1;color:var(--primary)}.composition-stitch-btn{background:none;border:none;cursor:pointer;font-size:14px;padding:4px 6px;border-radius:4px;flex-shrink:0;opacity:.5;transition:opacity .15s}.composition-stitch-btn:hover{opacity:1;background:var(--cell-hover)}.composition-stitch-btn.active{opacity:1}.composition-menu-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;flex-shrink:0;line-height:1;transition:background .15s}.composition-menu-btn:hover{background:var(--cell-hover);color:var(--text-primary)}.composition-sections{display:none;padding:4px 0 12px;background:var(--panel-inset, rgba(0,0,0,.15))}.composition-item.expanded .composition-sections{display:block}.section-item{display:flex;align-items:center;gap:8px;padding:7px 16px 7px 20px;cursor:pointer;transition:background .1s;border-radius:0;position:relative;border-top:1px solid rgba(99,102,241,.12)}.section-item:hover{background:var(--cell-hover)}.section-item.dragging{opacity:.4}.section-item+.section-item{border-top:1px solid rgba(255,255,255,.13)}.section-item.playing:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--section-playing-color, var(--accent-glow));border-radius:0 2px 2px 0}.drag-handle{color:var(--text-secondary);font-size:14px;cursor:grab;flex-shrink:0;opacity:.5;letter-spacing:-2px}.drag-handle:active{cursor:grabbing}.section-icon{font-size:16px;flex-shrink:0;width:20px;text-align:center}.section-info{flex:1;min-width:0}.section-info.clickable{cursor:pointer}.section-info.clickable:hover .section-title{text-decoration:underline}.section-title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;cursor:text}.section-label-wrapper{display:block;width:100%}.section-label-input{font-size:13px;font-family:inherit;font-weight:inherit;color:var(--text);background:var(--input-bg, rgba(255,255,255,.08));border:1px solid var(--c-accent, #6366f1);border-radius:4px;padding:1px 5px;width:100%;box-sizing:border-box;outline:none;box-shadow:0 0 0 2px #6366f126;display:block}.section-label-dropdown{position:fixed;z-index:9999;background:var(--panel, #1e1e2e);border:1px solid var(--c-border, rgba(99,102,241,.3));border-radius:6px;box-shadow:0 4px 16px #0000004d;overflow-y:auto;max-height:200px}.section-label-option{padding:7px 10px;font-size:12px;color:var(--text);cursor:pointer;white-space:nowrap}.section-label-option:hover{background:#6366f126;color:#a5b4fc}.section-subtitle{font-size:11px;color:var(--text-secondary);display:block;word-break:break-word}.section-action-btn,.section-delete-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:12px;padding:3px 5px;border-radius:3px;flex-shrink:0;opacity:.6;transition:opacity .15s}.section-action-btn:hover{background:var(--cell-hover);color:var(--text-primary)}.section-menu-btn{letter-spacing:1px;font-size:14px;opacity:.5}.section-menu-btn:hover{opacity:1}.section-delete-btn:hover{background:#ff505026;color:#f66}.section-item.recording .section-icon{animation:pulse-record 1s infinite}@keyframes pulse-record{0%,to{opacity:1}50%{opacity:.3}}.add-section-rows{margin-top:10px;border-top:4px solid rgba(99,102,241,.22);padding:8px 16px 4px 20px;display:flex;flex-direction:column;gap:5px}.add-section-row{display:flex;gap:6px}.add-section-btn{flex:1;background:none;border:1px solid var(--panel-border);border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:11px;padding:5px 4px;text-align:center;transition:all .15s;white-space:nowrap}.add-section-btn:hover{border-color:var(--accent-glow);color:var(--accent-glow);background:rgba(var(--accent-glow-rgb, 255, 200, 50),.05)}.phrase-picker{margin:4px 16px 8px 20px;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;overflow:hidden}.phrase-picker-list{max-height:160px;overflow-y:auto}.phrase-picker-item{padding:8px 14px;font-size:13px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--panel-border)}.phrase-picker-item:last-child{border-bottom:none}.phrase-picker-item:hover{background:var(--cell-hover)}.phrase-picker-empty{padding:12px 14px;font-size:12px;color:var(--text-secondary);text-align:center}.composer-playbar{flex-shrink:0;border-top:1px solid var(--panel-border);padding:10px 16px;background:var(--panel-inset, rgba(0,0,0,.15))}.playbar-info{display:flex;flex-direction:column;margin-bottom:8px}.playbar-title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playbar-section{font-size:11px;color:var(--text-secondary)}.playbar-seek-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.playbar-time{font-size:11px;color:var(--text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:32px}.playbar-seek{flex:1;accent-color:var(--accent-glow);cursor:pointer;height:4px}.playbar-controls{display:flex;gap:8px;justify-content:center}.playbar-controls button{background:none;border:1px solid var(--panel-border);border-radius:6px;color:var(--text-primary);cursor:pointer;font-size:14px;padding:5px 14px;transition:all .15s}.playbar-controls button:hover{border-color:var(--accent-glow);color:var(--accent-glow)}.composer-trim-panel{display:flex;flex-direction:column;gap:8px}.trim-waveform{display:block;width:100%;height:80px;border-radius:6px;cursor:default;background:#12121e}.trim-times{display:flex;align-items:center;justify-content:space-between;font-size:11px}.trim-time{font-variant-numeric:tabular-nums;color:var(--text-primary);min-width:32px}.trim-hint{color:var(--text-secondary);font-size:10px}.trim-actions{display:flex;gap:8px;justify-content:center}.trim-btn{background:none;border:1px solid var(--panel-border);border-radius:6px;color:var(--text-primary);cursor:pointer;font-size:13px;padding:5px 14px;transition:all .15s}.trim-btn:hover{border-color:var(--accent-glow);color:var(--accent-glow)}.trim-btn-primary{border-color:var(--accent-glow);color:var(--accent-glow);font-weight:600}.trim-btn-primary:hover{background:var(--accent-glow);color:#fff}.composer-context-menu{position:fixed;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;box-shadow:0 4px 20px #0006;z-index:9999;min-width:140px;overflow:hidden}.composer-context-menu button{display:block;width:100%;background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:13px;padding:9px 14px;text-align:left;transition:background .1s}.composer-context-menu button:hover{background:var(--cell-hover)}.composer-context-menu button.danger{color:#f66}.note-editor{margin:4px 16px 8px 20px}.note-editor textarea{width:100%;background:var(--input-bg, var(--panel));border:1px solid var(--panel-border);border-radius:6px;color:var(--text-primary);font-size:13px;padding:8px;resize:vertical;min-height:60px;box-sizing:border-box;font-family:inherit}.note-editor textarea:focus{outline:none;border-color:var(--accent-glow)}.recording-controls{display:flex;align-items:center;gap:8px;margin:4px 16px 8px 20px}.record-btn{background:none;border:1px solid #f66;border-radius:6px;color:#f66;cursor:pointer;font-size:12px;padding:5px 10px;transition:all .15s}.record-btn:hover,.record-btn.recording{background:#ff505026}.record-timer{font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}.record-timer.warn{color:#f59e0b;animation:recordWarnPulse 2s ease-in-out infinite}@keyframes recordWarnPulse{0%,to{opacity:1}50%{opacity:.55}}.composer-empty{padding:32px 16px;text-align:center;color:var(--text-secondary);font-size:13px}.composer-empty p{margin:0 0 6px}.comp-breadcrumb{display:flex;align-items:center;gap:6px;padding:10px 16px 8px;font-size:12px;border-bottom:1px solid var(--panel-border)}.comp-crumb-root{background:none;border:none;padding:0;font-size:12px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:color .15s}.comp-crumb-root:hover{color:var(--text)}.comp-crumb-sep{opacity:.4;font-size:14px}.comp-crumb-current{font-weight:600;font-size:12px}.comp-folder-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s}.comp-folder-item:hover{background:var(--cell-hover)}.comp-folder-icon{width:28px;height:28px;border-radius:7px;background:color-mix(in srgb,var(--btn-active) 18%,transparent);color:var(--btn-active);display:flex;align-items:center;justify-content:center;flex-shrink:0}.comp-folder-icon svg{width:15px;height:15px}.comp-folder-name{flex:1;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comp-folder-count{font-size:11px;color:var(--text-secondary);flex-shrink:0}.comp-folder-chevron{font-size:16px;color:var(--text-secondary);flex-shrink:0;opacity:.5}.section-color-swatch{width:14px;height:14px;min-width:14px;max-width:14px;border-radius:50%;border:1px solid rgba(255,255,255,.25);flex-shrink:0;cursor:pointer;padding:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;transition:transform .15s,border-color .15s}.section-color-swatch:hover{transform:scale(1.25);border-color:#fff9}.cell.composer-section-tinted{border-bottom:3px solid var(--section-border, transparent)!important}.cell.composer-section-start{border-left:2px solid var(--section-border, transparent)!important}@media(max-width:767px){.composer-sidebar{width:100vw}}body:not(.dark) .composer-sidebar .sidebar-header h3{background:linear-gradient(135deg,#7b1e42,#4f46e5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}body:not(.dark) .composer-new-btn{background:linear-gradient(135deg,#7b1e42,#6366f1 60%,#3b82f6);border-color:transparent;color:#fff;font-weight:600}body:not(.dark) .composer-new-btn:hover{background:linear-gradient(135deg,#6b1535,#4f46e5 60%,#2563eb);opacity:1}body:not(.dark) .composer-toolbar{border-bottom-color:#6366f12e}body:not(.dark) .composition-item{border-bottom-color:#6366f126}body:not(.dark) .composition-header:hover{background:#6366f112}body:not(.dark) .composition-sections{background:#6366f10a;border-top:1px solid rgba(99,102,241,.12)}body:not(.dark) .section-item+.section-item{border-top-color:#6366f138}body:not(.dark) .section-item:hover{background:#6366f112}body:not(.dark) .add-section-btn{border-color:#6366f14d;color:#4f46e5}body:not(.dark) .add-section-btn:hover{border-color:#6366f1;color:#fff;background:#6366f1}body:not(.dark) .composer-playbar{background:linear-gradient(135deg,#fdf2f8,#eef2ff);border-top-color:#6366f133}body:not(.dark) .playbar-controls button{border-color:#6366f14d;color:#4f46e5}body:not(.dark) .playbar-controls button:hover{border-color:#6366f1;color:#fff;background:#6366f1}body:not(.dark) .playbar-seek{accent-color:#6366f1}body:not(.dark) .trim-btn{border-color:#6366f14d;color:#4f46e5}body:not(.dark) .trim-btn:hover{border-color:#6366f1;color:#fff;background:#6366f1}body:not(.dark) .trim-btn-primary{border-color:#6366f1;color:#6366f1;font-weight:600}body:not(.dark) .trim-btn-primary:hover{background:#6366f1;color:#fff}body:not(.dark) .note-editor textarea:focus{border-color:#6366f1;box-shadow:0 0 0 2px #6366f126}body:not(.dark) .phrase-picker-item:hover{background:#6366f112}body:not(.dark) .composer-context-menu button:hover{background:#6366f114}#patternOrgModal .modal-content,#gameConfigModal .modal-content{background:var(--panel);border:1px solid var(--panel-border);box-shadow:0 10px 40px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.admin-pattern-table{display:flex;flex-direction:column;gap:8px}.admin-pattern-row{display:flex;align-items:center;background:#ffffff08;border:1px solid var(--panel-border);padding:10px 16px;border-radius:8px;transition:background .2s}.admin-pattern-row:hover{background:#ffffff0f}.row-name{flex:1;font-weight:600;color:var(--text)}.row-tags{flex:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.tag-pill{background:#4f46e533;border:1px solid rgba(79,70,229,.4);color:#a5b4fc;font-size:11px;padding:2px 8px;border-radius:12px;display:flex;align-items:center;gap:6px}.tag-pill span{cursor:pointer;font-weight:700;opacity:.6}.tag-pill span:hover{opacity:1;color:#fff}.add-tag-btn{background:transparent;border:1px dashed var(--text-secondary);color:var(--text-secondary);font-size:11px;padding:2px 8px;border-radius:12px;cursor:pointer}.add-tag-btn:hover{border-color:var(--primary);color:var(--primary)}.row-actions{margin-left:16px}