:root,[data-theme=dark]{--bg-primary:#0f0f13;--bg-elevated:#16161d;--bg-card:#1e1e27;--bg-overlay:#252531;--text-primary:#f0eff4;--text-secondary:#a09fb8;--text-muted:#8a89a0;--text-disabled:#5e5d73;--text-inverse:#0f0f13;--border:#3a3950;--border-subtle:#2e2d3d;--border-strong:#3d3c52;--accent:#c9a84c;--accent-hover:#dab85c;--accent-active:#b8962e;--accent-subtle:#c9a84c1f;--accent-glow:#c9a84c40;--accent-border:#c9a84c33;--success:#4caf7a;--success-subtle:#4caf7a1f;--warning:#e8a73c;--warning-subtle:#e8a73c1f;--error:#e05c5c;--error-subtle:#e05c5c1f;--info:#5ca8e0;--info-subtle:#5ca8e01f;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 12px #00000080;--shadow-lg:0 8px 24px #0009;--shadow-xl:0 16px 48px #000000b3}[data-theme=light]{--bg-primary:#f5f4f8;--bg-elevated:#fff;--bg-card:#fff;--bg-overlay:#f0eff4;--text-primary:#1a1928;--text-secondary:#5a5875;--text-muted:#8a89a0;--text-disabled:#c0bfd0;--text-inverse:#f0eff4;--border:#e2e1ee;--border-subtle:#eeedf6;--border-strong:#c8c7da;--accent:#b8862a;--accent-hover:#c9973b;--accent-active:#a07520;--accent-subtle:#b8862a1a;--accent-glow:#b8862a33;--success:#2d8c55;--success-subtle:#2d8c551a;--warning:#c47a14;--warning-subtle:#c47a141a;--error:#c93030;--error-subtle:#c930301a;--info:#2675b5;--info-subtle:#2675b51a;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 12px #0000001f;--shadow-lg:0 8px 24px #00000029;--shadow-xl:0 16px 48px #0003}:root{--nav-height:48px;--overlay-bg:#0009;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-display:"Cinzel", "Georgia", serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--radius-full:9999px;--z-below:-1;--z-base:0;--z-raised:10;--z-dropdown:50;--z-sticky:100;--z-overlay:200;--z-modal:300;--z-popover:400;--z-toast:1100;--z-tooltip:1200;--duration-micro:.15s;--duration-standard:.2s;--duration-emphasis:.3s;--duration-entrance:.4s;--ease-standard:cubic-bezier(.4, 0, .2, 1);--ease-decelerate:cubic-bezier(0, 0, .2, 1);--ease-accelerate:cubic-bezier(.4, 0, 1, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--font-normal);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ul[role=list],ol[role=list]{list-style:none}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}[data-theme=dark]{scrollbar-width:thin;scrollbar-color:var(--border-strong) var(--bg-elevated)}[data-theme=dark] ::-webkit-scrollbar{width:6px;height:6px}[data-theme=dark] ::-webkit-scrollbar-track{background:var(--bg-elevated)}[data-theme=dark] ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full)}[data-theme=light]{scrollbar-width:thin;scrollbar-color:var(--border-strong) var(--bg-elevated)}[data-theme=light] ::-webkit-scrollbar{width:6px;height:6px}[data-theme=light] ::-webkit-scrollbar-track{background:var(--bg-elevated)}[data-theme=light] ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-accent{0%,to{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 6px #0000}}.animate-fade-in{animation:fade-in var(--duration-standard) var(--ease-standard) both}.animate-fade-in-up{animation:fade-in-up var(--duration-emphasis) var(--ease-decelerate) both}.animate-fade-in-down{animation:fade-in-down var(--duration-emphasis) var(--ease-decelerate) both}.animate-slide-in{animation:slide-in-right var(--duration-emphasis) var(--ease-decelerate) both}.animate-scale-in{animation:scale-in var(--duration-standard) var(--ease-spring) both}.animate-spin{animation:1s linear infinite spin}.animate-pulse-accent{animation:pulse-accent 2s var(--ease-standard) infinite}.page-container{max-width:1024px;margin:0 auto;padding:32px 16px}.page-container-sm{max-width:768px;margin:0 auto;padding:32px 16px}.page-container-lg{max-width:1280px;margin:0 auto;padding:32px 16px}.flex-center{justify-content:center;align-items:center;display:flex}.flex-col{flex-direction:column;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-row{align-items:center;display:flex}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}.shrink-0{flex-shrink:0}.min-w-0{min-width:0}.w-full{width:100%}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-auto{overflow-x:auto}.relative{position:relative}.grid-2{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.grid-auto-fill{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;display:grid}.btn{border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--duration-standard) var(--ease-standard);border:none;justify-content:center;align-items:center;gap:4px;padding:8px 16px;line-height:1;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-accent{background-color:var(--accent);color:var(--text-inverse)}.btn-accent:hover:not(:disabled){background-color:var(--accent-hover)}.btn-ghost{border:1px solid var(--border);color:var(--text-primary);background:0 0}.btn-ghost:hover:not(:disabled){border-color:var(--accent-border);background-color:var(--bg-card);color:var(--text-primary)}.btn-danger{background-color:var(--error);color:var(--text-inverse)}.btn-danger:hover:not(:disabled){background-color:var(--error);filter:brightness(1.1)}.btn-success{background-color:var(--success);color:var(--text-inverse)}.btn-success:hover:not(:disabled){background-color:var(--success);filter:brightness(1.1)}.btn-warning{background-color:var(--warning);color:var(--text-inverse)}.btn-warning:hover:not(:disabled){background-color:var(--warning);filter:brightness(1.1)}.btn-sm{font-size:var(--text-xs);padding:4px 8px}.btn-lg{font-size:var(--text-base);padding:12px 24px}.card{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px}.card-highlighted{border-color:var(--accent);box-shadow:var(--shadow-lg)}.card-lg{padding:var(--space-xl)}.card-hoverable{cursor:pointer;transition:border-color var(--duration-standard) var(--ease-standard)}.card-hoverable:hover{border-color:var(--accent)}.input{background-color:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;font-size:var(--text-sm);color:var(--text-primary);transition:border-color var(--duration-micro) var(--ease-standard);padding:10px 14px}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--accent);outline:none}.label{font-size:.8125rem;font-weight:var(--font-medium);color:var(--text-secondary)}.form-group{flex-direction:column;gap:6px;display:flex}.form-error{color:var(--error);font-size:var(--text-xs)}.form-alert{background-color:var(--error-subtle);border:1px solid var(--error);border-radius:var(--radius-md);color:var(--error);padding:10px 14px;font-size:.8125rem}.heading-display{font-family:var(--font-display);font-weight:var(--font-bold);color:var(--text-primary)}.heading-1{font-family:var(--font-sans);font-size:var(--text-4xl);font-weight:var(--font-bold);line-height:var(--leading-tight);color:var(--text-primary)}.heading-2{font-family:var(--font-sans);font-size:var(--text-2xl);font-weight:var(--font-bold);line-height:var(--leading-tight);color:var(--text-primary)}.heading-3{font-family:var(--font-sans);font-size:var(--text-xl);font-weight:var(--font-semibold);line-height:var(--leading-snug);color:var(--text-primary)}.heading-4{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-snug);color:var(--text-primary)}.text-body{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary)}.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-disabled)}.text-accent{color:var(--accent)}.text-error{color:var(--error)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-info{color:var(--info)}.text-primary-color{color:var(--text-primary)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-bold{font-weight:var(--font-bold)}.font-semibold{font-weight:var(--font-semibold)}.font-medium{font-weight:var(--font-medium)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.05em}.leading-snug{line-height:var(--leading-snug)}.leading-relaxed{line-height:var(--leading-relaxed)}.hidden{display:none}.opacity-50{opacity:.5}.pointer-events-none{pointer-events:none}.select-none{-webkit-user-select:none;user-select:none}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.nav-fixed{height:var(--nav-height);z-index:var(--z-sticky);background-color:var(--bg-card);border-bottom:1px solid var(--accent-border);position:fixed;top:0;left:0;right:0}.nav-link{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);border-radius:var(--radius-sm);transition:color var(--duration-standard) var(--ease-standard);border-bottom:2px solid #0000;align-items:center;gap:4px;padding:4px 8px;display:flex}.nav-link:hover{color:var(--accent);background-color:var(--accent-subtle)}.nav-link-active{color:var(--accent);border-bottom-color:var(--accent)}.overlay{z-index:var(--z-modal);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.overlay-backdrop{background-color:var(--overlay-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:absolute;inset:0}.modal{z-index:var(--z-raised);background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-width:448px;box-shadow:var(--shadow-xl);position:relative}.toast-container{z-index:var(--z-toast);pointer-events:none;flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:fixed;bottom:16px;right:16px}.toast{background-color:var(--bg-card);border-radius:var(--radius-lg);width:100%;min-width:280px;max-width:384px;box-shadow:var(--shadow-lg);pointer-events:auto;border:1px solid;align-items:flex-start;gap:8px;padding:16px;display:flex}.toast-success{border-color:var(--success)}.toast-error{border-color:var(--error)}.toast-warning{border-color:var(--warning)}.toast-info{border-color:var(--info)}.group:hover .group-hover-show{opacity:1}.group-hover-show{opacity:0;transition:opacity var(--duration-micro) var(--ease-standard)}.progress-track{border-radius:var(--radius-full);background-color:var(--bg-elevated);width:100%;height:8px;overflow:hidden}.progress-fill{border-radius:var(--radius-full);background-color:var(--accent);height:100%;transition:width .3s var(--ease-standard)}input[type=range]{appearance:none;background:var(--border);border-radius:var(--radius-full);cursor:pointer;outline:none;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}.dropzone{border:2px dashed var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-standard) var(--ease-standard);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:32px;display:flex}.dropzone:hover,.dropzone-active{border-color:var(--accent);background-color:var(--accent-subtle)}.dropzone-disabled{opacity:.5;cursor:not-allowed}.shimmer{background:linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-overlay) 50%, var(--bg-elevated) 75%);background-size:200% 100%;animation:1.5s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (width<=768px){.hide-mobile{display:none!important}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}@media (width>=769px){.show-mobile{display:none!important}}@media (width>=640px) and (width<=1023px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media (width>=640px){.sm-grid-2{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.lg-grid-3{grid-template-columns:repeat(3,1fr)}.lg-grid-4{grid-template-columns:repeat(4,1fr)}}.grid-responsive-3{grid-template-columns:1fr;gap:24px;display:grid}@media (width>=640px){.grid-responsive-3{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.grid-responsive-3{grid-template-columns:repeat(3,1fr)}}.grid-responsive-4{grid-template-columns:1fr;gap:16px;display:grid}@media (width>=640px){.grid-responsive-4{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.grid-responsive-4{grid-template-columns:repeat(4,1fr)}}.border-top{border-top:1px solid var(--border)}.border-bottom{border-bottom:1px solid var(--border)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.link-accent{color:var(--accent);transition:color var(--duration-micro) var(--ease-standard)}.link-accent:hover{color:var(--accent-hover)}.icon-btn{border-radius:var(--radius-sm);color:var(--text-secondary);transition:all var(--duration-micro) var(--ease-standard);justify-content:center;align-items:center;padding:4px;display:flex}.icon-btn:hover{color:var(--text-primary);background-color:var(--bg-card)}.ctrl-play{color:var(--success)}.ctrl-play:hover{background-color:var(--success-subtle)}.ctrl-pause{color:var(--warning)}.ctrl-pause:hover{background-color:var(--warning-subtle)}.ctrl-stop{color:var(--error)}.ctrl-stop:hover{background-color:var(--error-subtle)}.master-btn{border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);transition:all var(--duration-standard) var(--ease-standard);align-items:center;gap:4px;padding:4px 8px;display:flex}.master-btn-play{color:var(--success);background-color:var(--success-subtle)}.master-btn-play:hover{background-color:var(--success);color:var(--text-inverse)}.master-btn-pause{color:var(--warning);background-color:var(--warning-subtle)}.master-btn-pause:hover{background-color:var(--warning);color:var(--text-inverse)}.master-btn-stop{color:var(--error);background-color:var(--error-subtle)}.master-btn-stop:hover{background-color:var(--error);color:var(--text-inverse)}.tab{border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--duration-standard) var(--ease-standard);color:var(--text-secondary);border:1px solid #0000;flex-shrink:0;align-items:center;gap:4px;padding:4px 8px;display:flex}.tab:hover{color:var(--text-primary);background-color:var(--bg-elevated)}.tab-active{border-color:var(--accent);background-color:var(--accent-subtle);color:var(--accent)}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:var(--radius-full);width:32px;height:32px;animation:.6s linear infinite spin}.spinner-sm{width:16px;height:16px}.icon-badge{border-radius:var(--radius-md);background-color:var(--accent-subtle);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.icon-badge-sm{width:32px;height:32px}.icon-btn-accent:hover{color:var(--accent);background-color:var(--accent-subtle)}.icon-btn-error:hover{color:var(--error);background-color:var(--error-subtle)}.icon-btn[aria-pressed=true]{color:var(--info);background-color:var(--info-subtle)}.modal-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.modal-body{padding:var(--space-lg)}.modal-lg{max-width:560px}.auth-page{min-height:calc(100vh - var(--nav-height));padding:var(--space-2xl) var(--space-lg);justify-content:center;align-items:center;display:flex}.card-auth{max-width:420px;padding:40px var(--space-xl)}.page-header{justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl);flex-wrap:wrap;display:flex}.section-gap{gap:var(--space-xl);flex-direction:column;display:flex}.banner-accent{background-color:var(--accent-subtle);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:var(--space-lg)}.empty-state{justify-content:center;align-items:center;gap:var(--space-md);padding:var(--space-4xl) var(--space-md);color:var(--text-muted);flex-direction:column;display:flex}.sound-card{gap:var(--space-sm);padding:var(--space-md);background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:border-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard);flex-direction:column;display:flex}.sound-card-playing{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.sound-row{align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);transition:background-color var(--duration-micro) var(--ease-standard);display:flex}.sound-row:hover{background-color:var(--bg-card);border-left:3px solid var(--accent-border)}.master-controls{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background-color:var(--bg-elevated);border-bottom:1px solid var(--border);display:flex}.board-tabs{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background-color:var(--bg-card);border-bottom:1px solid var(--border);display:flex;overflow-x:auto}.tab-input{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm);background-color:var(--bg-elevated);border:1px solid var(--accent);border-radius:var(--radius-md);color:var(--text-primary);outline:none}.brand-logo{font-family:var(--font-display);font-weight:var(--font-bold);color:var(--accent);font-size:var(--text-lg);letter-spacing:.02em}.nav-mobile-menu{background-color:var(--bg-card);border-bottom:1px solid var(--border)}.nav-link-mobile{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);border-radius:var(--radius-md);color:var(--text-secondary);transition:all var(--duration-standard) var(--ease-standard);display:flex}.nav-link-mobile:hover,.nav-link-mobile-active{color:var(--accent);background-color:var(--accent-subtle)}.progress-track-sm{height:4px}.skip-to-content{top:-100%;left:var(--space-md);padding:var(--space-sm) var(--space-md);background-color:var(--accent);color:var(--text-inverse);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);z-index:var(--z-tooltip);transition:top var(--duration-micro) var(--ease-standard);position:absolute}.skip-to-content:focus{top:var(--space-sm)}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.gap-2xl{gap:var(--space-2xl)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mb-2xl{margin-bottom:var(--space-2xl)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}.capitalize{text-transform:capitalize}.sidebar{width:var(--sidebar-width);background-color:var(--bg-card);border-right:1px solid var(--border);z-index:var(--z-sticky);transition:width var(--duration-standard) var(--ease-standard);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;overflow:hidden}.sidebar-collapsed{width:var(--sidebar-collapsed-width)}.sidebar-brand{padding:var(--space-md);flex-shrink:0;justify-content:space-between;align-items:center;height:56px;display:flex}.sidebar-brand-text{font-family:var(--font-display);font-weight:var(--font-bold);color:var(--accent);font-size:var(--text-base);letter-spacing:.02em;white-space:nowrap;overflow:hidden}.sidebar-nav{gap:var(--space-xs);padding:0 var(--space-sm);flex-direction:column;flex:1;display:flex}.sidebar-link{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-sm);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--font-medium);white-space:nowrap;transition:all var(--duration-micro) var(--ease-standard);border-left:3px solid #0000;text-decoration:none;display:flex;overflow:hidden}.sidebar-link:hover{color:var(--text-primary);background-color:var(--bg-elevated)}.sidebar-link-active{color:var(--accent);background-color:var(--accent-subtle);border-left-color:var(--accent)}.sidebar-link-icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;display:flex}.sidebar-collapsed .sidebar-link{padding:var(--space-sm);border-left:none;justify-content:center}.sidebar-collapsed .sidebar-link-label,.sidebar-collapsed .sidebar-brand-text{display:none}.sidebar-footer{border-top:1px solid var(--border);padding:var(--space-sm);flex-shrink:0}.app-content{margin-left:var(--sidebar-width);min-height:100vh;transition:margin-left var(--duration-standard) var(--ease-standard)}.app-content-collapsed{margin-left:var(--sidebar-collapsed-width)}.mobile-header{height:var(--mobile-header-height);background-color:var(--bg-card);border-bottom:1px solid var(--border);z-index:var(--z-sticky);padding:0 var(--space-md);justify-content:space-between;align-items:center;display:none;position:fixed;top:0;left:0;right:0}.sidebar-overlay{background-color:var(--overlay-bg);z-index:calc(var(--z-sticky) - 1);display:none;position:fixed;inset:0}@media (width<=768px){.sidebar{z-index:var(--z-overlay);width:var(--sidebar-width);transform:translate(-100%)}.sidebar-mobile-open{transform:translate(0)}.sidebar-collapsed{width:var(--sidebar-width)}.mobile-header{display:flex}.sidebar-overlay-visible{display:block}.app-content,.app-content-collapsed{padding-top:var(--mobile-header-height);margin-left:0}}.board-card-v2{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:border-color var(--duration-standard) var(--ease-standard);overflow:hidden}.board-card-v2:hover{border-color:var(--accent)}.board-card-accent{height:4px}.board-card-body{padding:var(--space-md);gap:var(--space-sm);flex-direction:column;display:flex}.board-card-meta{gap:var(--space-md);font-size:var(--text-xs);color:var(--text-muted);display:flex}.sound-tile{gap:var(--space-sm);background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:border-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard);flex-direction:column;padding:12px 28px 12px 12px;display:flex}.sound-tile-remove{opacity:.4;transition:opacity var(--duration-micro) var(--ease-standard)}.sound-tile-remove:hover,.sound-tile:hover .sound-tile-remove{opacity:1}.sound-tile-playing{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.sound-tile-looping{border-color:var(--info);box-shadow:0 0 10px #5ca8e026}.sound-tile-paused{border-color:var(--accent);opacity:.8}.sound-tile .progress-track{background-color:var(--border-subtle);height:3px}.sound-tile-header{justify-content:space-between;align-items:center;gap:var(--space-sm);display:flex}.sound-tile-title{font-size:.8rem;font-weight:var(--font-semibold);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.sound-tile-duration{color:var(--text-muted);flex-shrink:0;font-size:.65rem}.sound-tile-duration-loop{color:var(--info)}.sound-tile-controls{align-items:center;gap:4px;display:flex}.grid-sound-tiles{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;display:grid}.ctrl-round{width:28px;height:28px;transition:all var(--duration-micro) var(--ease-standard);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.ctrl-round-play{color:var(--success);background-color:var(--success-subtle)}.ctrl-round-play:hover{background-color:var(--success);color:var(--text-inverse)}.ctrl-round-stop{color:var(--error);background-color:var(--error-subtle)}.ctrl-round-stop:hover{background-color:var(--error);color:var(--text-inverse)}.ctrl-round-loop{color:var(--text-muted)}.ctrl-round-loop:hover,.ctrl-round-loop[aria-pressed=true]{color:var(--info);background-color:var(--info-subtle)}.master-toolbar{padding:var(--space-sm) var(--space-md);background-color:var(--bg-elevated);border-bottom:1px solid var(--border);justify-content:flex-end;align-items:center;gap:var(--space-md);display:flex}.master-toolbar-center{flex-shrink:0;align-items:center;gap:6px;display:flex}.master-toolbar-right{align-items:center;gap:var(--space-sm);flex-shrink:0;display:flex}.master-volume-slider{width:100px}.btn-add-sound{align-items:center;gap:var(--space-xs);padding:6px var(--space-md);background-color:var(--accent-subtle);border-radius:var(--radius-full);color:var(--accent);font-size:var(--text-sm);font-weight:var(--font-medium);transition:all var(--duration-standard) var(--ease-standard);border:1px solid #c9a84c4d;flex-shrink:0;display:flex}.btn-add-sound:hover{background-color:var(--accent);color:var(--text-inverse);border-color:var(--accent)}.upload-progress-list{gap:var(--space-xs);margin-top:var(--space-md);flex-direction:column;display:flex}.upload-progress-row{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background-color:var(--bg-elevated);border-radius:var(--radius-md);font-size:var(--text-sm);display:flex}.upload-progress-row-error{border:1px solid var(--error)}.upload-progress-name{white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--text-primary);flex:1;overflow:hidden}.upload-progress-size{color:var(--text-muted);font-size:var(--text-xs);flex-shrink:0}.upload-progress-bar{flex-shrink:0;width:80px}.upload-progress-summary{padding:var(--space-sm) 0;font-size:var(--text-sm);color:var(--text-secondary)}.ctrl-round-pause{color:var(--warning);background-color:var(--warning-subtle)}.ctrl-round-pause:hover{background-color:var(--warning);color:var(--text-inverse)}.collection-chips{gap:var(--space-sm);flex-wrap:wrap;align-items:center;display:flex}.collection-chip{align-items:center;gap:var(--space-xs);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all var(--duration-micro) var(--ease-standard);white-space:nowrap;border:1px solid;padding:5px 12px;display:flex}.collection-chip:hover{filter:brightness(1.1)}.collection-chip-active{filter:brightness()}.collection-chip-new{border-style:dashed;border-color:var(--border);color:var(--text-muted);background:0 0}.collection-chip-new:hover{border-color:var(--accent);color:var(--accent)}.collection-chip-input{padding:var(--space-xs) var(--space-sm);font-size:var(--text-xs);background:var(--bg-elevated);border:1px solid var(--accent);border-radius:var(--radius-full);color:var(--text-primary);outline:none;width:140px}.collection-tag{border-radius:var(--radius-full);white-space:nowrap;border:1px solid;align-items:center;gap:2px;padding:1px 6px;font-size:.65rem;display:inline-flex}.tagger-dropdown{z-index:var(--z-dropdown);background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);min-width:200px;box-shadow:var(--shadow-lg);padding:var(--space-xs) 0;margin-top:var(--space-xs);position:absolute;top:100%;left:0}.tagger-option{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;transition:background-color var(--duration-micro) var(--ease-standard);display:flex}.tagger-option:hover{background-color:var(--bg-elevated)}.tagger-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.tagger-checkbox{border-radius:var(--radius-sm);border:1px solid var(--border);width:14px;height:14px;transition:all var(--duration-micro) var(--ease-standard);flex-shrink:0;justify-content:center;align-items:center;display:flex}.tagger-checkbox-checked{background-color:var(--accent);border-color:var(--accent)}.collection-filter{align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;display:flex}.collection-filter-select{padding:var(--space-xs) var(--space-sm);background-color:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-sm);cursor:pointer;outline:none}.collection-filter-select:focus{border-color:var(--accent)}.soundboard-workspace{height:100vh;display:flex}.soundboard-board{flex-direction:column;flex:1;min-width:0;display:flex}.sound-browser{background-color:var(--bg-elevated);border-right:1px solid var(--border);width:300px;transition:width var(--duration-standard) var(--ease-standard);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.sound-browser-collapsed{width:0}.sound-browser-strip{width:40px;padding-top:var(--space-md);background-color:var(--bg-elevated);border-right:1px solid var(--border);flex-shrink:0;justify-content:center;align-items:flex-start;display:flex}.sound-browser-header{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.sound-browser-search{padding:var(--space-sm) var(--space-md);flex-shrink:0}.sound-browser-search input{width:100%;padding:6px var(--space-sm);background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-sm);outline:none}.sound-browser-search input:focus{border-color:var(--accent)}.sound-browser-chips{padding:var(--space-xs) var(--space-md);border-bottom:1px solid var(--border);flex-shrink:0}.sound-browser-list{padding:var(--space-xs) 0;flex:1;overflow-y:auto}.sound-browser-row{align-items:center;gap:var(--space-sm);padding:6px var(--space-md);cursor:pointer;transition:background-color var(--duration-micro) var(--ease-standard);display:flex}.sound-browser-row:hover{background-color:var(--bg-card)}.sound-browser-footer{border-top:1px solid var(--border);padding:var(--space-sm) var(--space-md);flex-shrink:0}.sound-browser-dropzone{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm);border:1px dashed var(--border);border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--text-muted);cursor:pointer;transition:all var(--duration-micro) var(--ease-standard);display:flex}.sound-browser-dropzone:hover{border-color:var(--accent);color:var(--accent)}.sound-browser-dropzone-active{border-color:var(--accent);background-color:var(--accent-subtle)}.btn-browse-mobile,.sound-browser-overlay{display:none}@media (width<=768px){.sound-browser{top:0;left:var(--sidebar-collapsed-width);z-index:var(--z-overlay);width:300px;transition:transform var(--duration-standard) var(--ease-standard);position:fixed;bottom:0;transform:translate(-100%)}.sound-browser-mobile-open{transform:translate(0)}.sound-browser-collapsed{width:300px;transform:translate(-100%)}.sound-browser-strip{display:none}.sound-browser-overlay-visible{background-color:var(--overlay-bg);z-index:calc(var(--z-overlay) - 1);display:block;position:fixed;inset:0}.btn-browse-mobile{display:flex}}.collection-card{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--duration-micro) var(--ease-standard);display:flex}.collection-card:hover{background-color:var(--bg-overlay)}.collection-card-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.collection-card-info{flex:1;min-width:0}.collection-card-name{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.collection-card-count{color:var(--text-muted);font-size:.65rem}.collection-grid-card{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:border-color var(--duration-standard) var(--ease-standard);overflow:hidden}.collection-grid-card:hover{border-color:var(--accent)}.collection-grid-card-accent{height:4px}.collection-grid-card-body{gap:var(--space-sm);flex-direction:column;padding:14px;display:flex}.icon-picker-grid{gap:var(--space-xs);grid-template-columns:repeat(5,1fr);display:grid}.icon-picker-item{border-radius:var(--radius-md);width:36px;height:36px;color:var(--text-muted);transition:all var(--duration-micro) var(--ease-standard);justify-content:center;align-items:center;display:flex}.icon-picker-item:hover{color:var(--text-primary);background-color:var(--bg-elevated)}.icon-picker-item-active{color:var(--accent);background-color:var(--accent-subtle)}.collection-detail-header{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border);flex-shrink:0;display:flex}.soundboard-layout{height:calc(100vh - var(--nav-height));display:flex}.section-label{font-size:var(--text-sm);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--accent);opacity:.75}.empty-state .icon-badge{background-color:var(--accent-subtle)}.dropzone svg,.sound-browser-dropzone svg{color:var(--accent)}.collection-grid-card:hover,.board-card-v2:hover{border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.btn:active:not(:disabled),.btn-ghost:active:not(:disabled),.btn-add-sound:active,.collection-grid-card:active,.board-card-v2:active,.collection-card:active{transform:scale(.97)}.library-layout{height:calc(100vh - var(--nav-height));display:flex;overflow:hidden}.library-sidebar{background-color:var(--bg-elevated);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:300px;height:100%;display:flex;overflow:hidden}.library-sidebar-header{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.library-sidebar-list{flex:1;overflow-y:auto}.library-sidebar-item{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);cursor:pointer;transition:background-color var(--duration-micro) var(--ease-standard);width:100%;color:var(--text-primary);font-size:var(--text-sm);font-family:var(--font-sans);text-align:left;background:0 0;border:none;border-left:3px solid #0000;display:flex}.library-sidebar-item:hover{background-color:var(--bg-card)}.library-sidebar-item-active{font-weight:var(--font-medium)}.library-sidebar-divider{background:var(--border);height:1px;margin:var(--space-xs) var(--space-md)}.library-sidebar-footer{padding:var(--space-sm) var(--space-md);border-top:1px solid var(--border)}.library-sidebar-storage-bar{background:var(--border-subtle);border-radius:var(--radius-full);height:4px;margin-top:var(--space-xs);overflow:hidden}.library-sidebar-storage-fill{background:var(--accent);border-radius:var(--radius-full);height:100%}.library-main{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.library-toolbar{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border);display:flex}.library-toolbar-title{align-items:center;gap:var(--space-xs);font-weight:var(--font-semibold);font-size:var(--text-base);white-space:nowrap;display:flex}.library-toolbar-count{color:var(--text-muted);font-size:var(--text-sm);font-weight:400}.library-search{align-items:center;gap:var(--space-xs);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);width:200px;padding:6px 10px;display:flex}.library-search input{color:var(--text-primary);font-size:var(--text-sm);width:100%;font-family:var(--font-sans);background:0 0;border:none;outline:none}.library-search input::placeholder{color:var(--text-muted)}.library-col-headers{gap:var(--space-xs);padding:6px var(--space-md);border-bottom:1px solid var(--border);font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;grid-template-columns:36px 1fr 140px 65px 90px;align-items:center;display:grid}.library-col-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.library-col-sortable:hover{color:var(--text-secondary)}.library-sound-list{flex:1;overflow-y:auto}.library-sound-row{gap:var(--space-xs);padding:8px var(--space-md);border-bottom:1px solid var(--border-subtle);transition:background-color var(--duration-micro) var(--ease-standard);grid-template-columns:36px 1fr 140px 65px 90px;align-items:center;display:grid}.library-sound-row:hover{background-color:var(--bg-card)}.library-collection-pill{border-radius:var(--radius-full);white-space:nowrap;align-items:center;padding:2px 8px;font-size:10px;display:inline-flex}.library-main-dragover{outline:2px dashed var(--accent);outline-offset:-4px;background-color:var(--accent-subtle)}.library-sound-row-mobile{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border-subtle);display:flex}.library-sound-row-mobile:hover{background-color:var(--bg-card)}.library-context-menu{right:var(--space-sm);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);min-width:140px;padding:var(--space-xs) 0;position:absolute;top:100%}.library-context-menu button{align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-xs) var(--space-md);color:var(--text-primary);font-size:var(--text-sm);font-family:var(--font-sans);cursor:pointer;text-align:left;background:0 0;border:none;display:flex}.library-context-menu button:hover{background-color:var(--bg-card)}.library-sidebar-chevron{color:var(--text-muted);flex-shrink:0}.library-new-collection{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border-subtle)}@media (width<=768px){.library-layout{flex-direction:column}.library-sidebar{border-right:none;width:100%}.library-col-headers,.library-sound-row{display:none}.library-search{width:100%}}@media (width>=769px){.library-sound-row-mobile,.library-sidebar-chevron{display:none}}.playlist-tile{background:linear-gradient(135deg, var(--bg-card) 0%, #23221e 100%);border-color:#c9a84c33}.playlist-tile-playing{border-color:#c9a84c4d;box-shadow:0 0 12px #c9a84c26}.playlist-tile-header{align-items:center;gap:var(--space-sm);display:flex}.playlist-tile-icon{border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.playlist-tile-title-block{flex:1;min-width:0}.playlist-tile-name{font-size:.8rem;font-weight:var(--font-semibold);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.playlist-tile-now-playing{font-size:var(--text-xs);color:var(--accent);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:4px;display:flex;overflow:hidden}.playlist-tile-track-count{color:var(--text-muted);font-size:10px}.playlist-tile-subtitle{color:var(--text-muted);font-size:.7rem}.ctrl-round-skip{color:var(--text-muted)}.ctrl-round-skip:hover{color:var(--text-primary);background-color:var(--border-subtle)}.ctrl-round-shuffle{color:var(--text-muted)}.ctrl-round-shuffle:hover,.ctrl-round-shuffle[aria-pressed=true]{color:var(--accent);background:var(--accent-subtle)}.ctrl-round-crossfade{color:var(--text-muted);font-size:9px;font-weight:700}.ctrl-round-crossfade:hover,.ctrl-round-crossfade[aria-pressed=true]{color:#a78bfa;background:#a78bfa1a}.btn-error-outline{color:var(--error);border:1px solid var(--error);background:0 0}.btn-error-outline:hover{background:var(--error-subtle)}.board-card-transport{padding-top:var(--space-xs);align-items:center;gap:4px;display:flex}.board-card-playing{border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}