:root{--color-bg:#0f0f0f;--color-bg-surface:#1a1a1a;--color-bg-elevated:#242424;--color-text:#f5f5f5;--color-text-muted:#a3a3a3;--color-primary:#e5a00d;--color-primary-hover:#cc8c00;--color-success:#22c55e;--color-success-hover:#16a34a;--color-danger:#ef4444;--color-danger-hover:#dc2626;--color-border:#2e2e2e;--color-border-subtle:#1f1f1f;--color-focus:#e5a00d;--color-text-inverse:#0f0f0f;--color-primary-alpha-10:rgba(229, 160, 13, 0.1);--color-primary-alpha-20:rgba(229, 160, 13, 0.2);--color-primary-alpha-30:rgba(229, 160, 13, 0.3);--color-success-alpha-15:rgba(34, 197, 94, 0.15);--color-danger-alpha-20:rgba(239, 68, 68, 0.2);--header-height:144px;--font-family-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-family-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-family-mono:'SF Mono',SFMono-Regular,ui-monospace,Menlo,Monaco,Consolas,monospace;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.4);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.5);--shadow-lg:0 12px 24px rgba(0, 0, 0, 0.6);--shadow-glow:0 0 20px rgba(229, 160, 13, 0.15);--transition-fast:150ms cubic-bezier(0.4, 0, 0.2, 1);--transition-normal:250ms cubic-bezier(0.4, 0, 0.2, 1);--transition-slow:400ms cubic-bezier(0.4, 0, 0.2, 1)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-family-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;background-color:var(--color-bg);color:var(--color-text);line-height:1.5;min-height:100vh;min-height:100dvh}.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background-color:var(--color-primary);color:var(--color-bg);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-weight:600;text-decoration:none;z-index:1000;transition:top var(--transition-fast)}.skip-link:focus{top:var(--space-md);outline:2px solid var(--color-text);outline-offset:2px}.header{background-color:rgba(15,15,15,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border-subtle);position:sticky;top:0;z-index:10}.header__top{margin-bottom:var(--space-md)}.header__title{display:flex;align-items:center;gap:var(--space-sm);font-size:1.5rem;font-weight:var(--font-weight-bold);color:var(--color-text);letter-spacing:-.04em;line-height:1.2}.header__logo{flex-shrink:0;border-radius:var(--radius-sm)}.header__nav{display:flex;gap:var(--space-xs);background-color:var(--color-bg-elevated);padding:4px;border-radius:var(--radius-md);border:1px solid var(--color-border-subtle)}.nav-btn{flex:1;padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-sm);background:0 0;color:var(--color-text-muted);font-size:.875rem;font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.nav-btn:hover{color:var(--color-text);background-color:rgba(255,255,255,.05)}.nav-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}.nav-btn--active{background-color:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-sm)}.nav-btn--active:hover{background-color:var(--color-primary-hover);color:var(--color-text-inverse)}.main{padding:var(--space-lg);max-width:1200px;margin:0 auto;display:grid;gap:var(--space-xl);width:100%}.main[hidden]{display:none}@media (min-width:768px){.main{grid-template-columns:1fr 1fr;align-items:start}.main>.chart-section{position:sticky;top:var(--header-height)}}.setlist{background-color:var(--color-bg-surface);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-border-subtle);min-width:0;overflow:hidden}.setlist__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.setlist__actions{display:flex;gap:var(--space-sm);align-items:center}.setlist__title{font-size:1.125rem;font-weight:var(--font-weight-semibold);letter-spacing:-.02em;color:var(--color-text)}.setlist__instructions{font-size:.8125rem;color:var(--color-text-muted);margin-bottom:var(--space-sm)}.setlist__empty{text-align:center;color:var(--color-text-muted);padding:var(--space-xl);font-style:italic}.setlist__empty--hidden{display:none}.song-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-sm)}.song-item{background-color:var(--color-bg-elevated);border-radius:var(--radius-md);padding:var(--space-md);display:flex;align-items:center;gap:var(--space-md);cursor:grab;transition:all var(--transition-fast);border:1px solid var(--color-border-subtle)}.song-item:hover{border-color:var(--color-border);background-color:rgba(255,255,255,.03)}.song-item:focus{outline:0;border-color:var(--color-primary);box-shadow:var(--shadow-glow)}.song-item:active{cursor:grabbing}.song-item--dragging{opacity:.5;transform:scale(.98);box-shadow:inset 0 0 0 2px var(--color-primary);background-color:var(--color-bg-surface)}.song-item--drag-over-top{position:relative}.song-item--drag-over-top::before{content:'';position:absolute;top:-2px;left:0;right:0;height:3px;background-color:var(--color-primary);border-radius:2px;box-shadow:0 0 8px var(--color-primary)}.song-item--drag-over-bottom{position:relative}.song-item--drag-over-bottom::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background-color:var(--color-primary);border-radius:2px;box-shadow:0 0 8px var(--color-primary)}.song-item--keyboard-dragging{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:var(--shadow-glow)}.song-item--animating{transition:transform .2s ease-out}.song-item--clone{position:fixed;pointer-events:none;z-index:1000;opacity:.95;transform:scale(1.02) rotate(1deg);box-shadow:0 20px 40px rgba(0,0,0,.4);width:var(--drag-clone-width,300px)}.song-item__handle{color:var(--color-text-muted);font-size:1.25rem;flex-shrink:0;touch-action:none;cursor:grab;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;margin:calc(var(--space-sm) * -1);border-radius:var(--radius-sm);transition:background-color var(--transition-fast)}.song-item__handle:hover{background-color:var(--color-primary-alpha-10)}.song-item__handle:active{cursor:grabbing;background-color:var(--color-primary-alpha-20)}.song-item__info{flex:1;min-width:0}.song-item__name{font-weight:var(--font-weight-medium);font-size:.9375rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text)}.song-item__bpm{font-size:.8125rem;font-weight:var(--font-weight-normal);color:var(--color-text-muted);font-variant-numeric:tabular-nums}.song-item__actions{display:flex;gap:var(--space-xs);flex-shrink:0}@media (max-width:480px){.song-item{flex-wrap:wrap}.song-item__info{order:-1;flex-basis:100%;margin-bottom:var(--space-xs)}.song-item__name{white-space:normal;word-break:break-word}.song-item__actions{margin-left:auto}}.song-item--segue-start{margin-bottom:2px;border-bottom-left-radius:0;border-bottom-right-radius:0;position:relative}.song-item--segue-start::after{content:'';position:absolute;left:-4px;top:50%;bottom:-6px;width:3px;background-color:var(--color-primary);border-radius:2px 2px 0 0}.song-item--segue-middle{margin-top:2px;margin-bottom:2px;border-radius:0;position:relative}.song-item--segue-middle::after{content:'';position:absolute;left:-4px;top:-6px;bottom:-6px;width:3px;background-color:var(--color-primary)}.song-item--segue-end{margin-top:2px;border-top-left-radius:0;border-top-right-radius:0;position:relative}.song-item--segue-end::after{content:'';position:absolute;left:-4px;top:-6px;bottom:50%;width:3px;background-color:var(--color-primary);border-radius:0 0 2px 2px}.song-item__link-btn{color:var(--color-text-muted);font-size:1rem;opacity:.6;transition:opacity var(--transition-fast),color var(--transition-fast)}.song-item__link-btn:hover{opacity:1}.song-item__link-btn--active{color:var(--color-primary);opacity:1}.btn{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);border:none;font-size:.875rem;font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background-color:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-sm)}.btn--primary:hover{background-color:var(--color-primary-hover);box-shadow:var(--shadow-md)}.btn--secondary{background-color:transparent;color:var(--color-text);border:1px solid var(--color-border)}.btn--secondary:hover{background-color:var(--color-bg-elevated);border-color:var(--color-text-muted)}.btn--danger{background-color:var(--color-danger);color:var(--color-text-inverse);box-shadow:var(--shadow-sm)}.btn--danger:hover{background-color:var(--color-danger-hover);box-shadow:var(--shadow-md)}.btn--icon{padding:var(--space-sm);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:0 0;color:var(--color-text-muted);font-size:1.125rem;line-height:1}.btn--icon:hover{color:var(--color-text);background-color:var(--color-bg-surface)}.btn--icon:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}.chart-section{background-color:var(--color-bg-surface);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-border-subtle);min-width:0;overflow:hidden}.chart-section__title{font-size:1.125rem;font-weight:var(--font-weight-semibold);letter-spacing:-.02em;margin-bottom:var(--space-lg);color:var(--color-text)}.chart-container{position:relative;height:300px;width:100%;max-width:100%}@media (min-width:768px){.chart-container{height:400px}}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);width:calc(100% - var(--space-xl) * 2);max-width:400px;box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}.modal::backdrop{background-color:rgba(0,0,0,.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.modal__title{font-size:1.25rem;font-weight:var(--font-weight-semibold);margin-bottom:var(--space-lg);color:var(--color-text);letter-spacing:-.03em;line-height:1.3}.modal__message{font-size:1rem;margin-bottom:var(--space-lg);text-align:center;color:var(--color-text)}.modal__actions{display:flex;gap:var(--space-md);justify-content:flex-end;margin-top:var(--space-lg)}@media (max-width:360px){.modal{width:calc(100% - var(--space-md) * 2);padding:var(--space-md)}}.form-group{margin-bottom:var(--space-md)}.form-label{display:block;font-size:.875rem;font-weight:var(--font-weight-medium);margin-bottom:var(--space-xs);color:var(--color-text-muted)}.form-input{width:100%;padding:var(--space-sm) var(--space-md);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:1rem;transition:all var(--transition-fast)}.form-input:focus{outline:0;border-color:var(--color-primary);box-shadow:var(--shadow-glow);background-color:var(--color-bg-surface)}.form-input::placeholder{color:var(--color-text-muted);opacity:.6}.form-checkbox{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer}.form-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}.form-checkbox input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.form-checkbox__label{font-size:.875rem;color:var(--color-text)}.form-checkbox input[type=checkbox]:disabled+.form-checkbox__label{opacity:.5}.form-checkbox-group{margin-top:var(--space-md)}.form-hint{display:block;font-size:.75rem;color:var(--color-text-muted);margin-top:var(--space-xs)}.catalog-search-wrapper{position:relative}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.install-banner{display:none;position:fixed;bottom:var(--space-lg);left:var(--space-lg);right:var(--space-lg);background-color:var(--color-bg-elevated);border:1px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--space-md);text-align:center;box-shadow:var(--shadow-lg);z-index:100}.install-banner--visible{display:block}.share-url-container{display:flex;gap:var(--space-sm);align-items:stretch}.share-url-input{flex:1;font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.8125rem;min-width:0;cursor:text}.share-url-input:read-only{background-color:var(--color-bg)}.share-warning{font-size:.875rem;color:var(--color-danger);margin-top:var(--space-sm)}.share-warning--hidden{display:none}.share-success{font-size:.875rem;color:var(--color-success);margin-top:var(--space-sm)}.share-native--hidden,.share-success--hidden{display:none}.catalog-view{padding:var(--space-lg);max-width:800px;margin:0 auto}.catalog-view[hidden]{display:none}.catalog-view__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.catalog-view__title{font-size:1.25rem;font-weight:600}.catalog-view__count{font-size:.875rem;color:var(--color-text-muted)}.catalog-view__filters{display:flex;gap:var(--space-md);margin-bottom:var(--space-lg)}.catalog-view__filters .catalog-search-wrapper{flex:1}.catalog-view__filters .catalog-sort-wrapper{flex-shrink:0}.catalog-sort{min-width:140px}.catalog-view__add-btn{margin-bottom:var(--space-lg)}.catalog-view__empty{text-align:center;color:var(--color-text-muted);padding:var(--space-xl);font-style:italic}.catalog-view__empty--hidden{display:none}.catalog-list{display:flex;flex-direction:column;gap:var(--space-sm)}.catalog-list__divider{font-size:.75rem;font-weight:600;color:var(--color-primary);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-md) 0 var(--space-xs);border-bottom:1px solid var(--color-border);margin-top:var(--space-md)}.catalog-list__divider:first-child{margin-top:0}.catalog-item{background-color:var(--color-bg-surface);border-radius:var(--radius-md);padding:var(--space-md);display:flex;align-items:center;gap:var(--space-md);border:2px solid transparent;transition:border-color var(--transition-fast)}.catalog-item:hover{border-color:var(--color-border)}.catalog-item:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.catalog-item__info{flex:1;min-width:0}.catalog-item__name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.catalog-item__bpm{font-size:.875rem;color:var(--color-text-muted)}.catalog-item__actions{display:flex;gap:var(--space-xs);flex-shrink:0}@media (max-width:480px){.catalog-item{flex-wrap:wrap}.catalog-item__info{order:-1;flex-basis:100%;margin-bottom:var(--space-xs)}.catalog-item__name{white-space:normal;word-break:break-word}.catalog-item__actions{margin-left:auto}}.catalog-item--added{background-color:var(--color-success-alpha-15);border-color:var(--color-success)}.btn--add-to-set{padding:var(--space-sm) var(--space-md);min-height:44px;font-size:.75rem;background-color:var(--color-bg-elevated);color:var(--color-primary);border:1px solid var(--color-primary);white-space:nowrap}.btn--add-to-set:hover{background-color:var(--color-primary);color:var(--color-bg)}.btn--add-to-set:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.song-badges{display:flex;gap:var(--space-xs);margin-left:auto;margin-right:var(--space-sm)}.song-badge{font-size:.75rem;padding:2px var(--space-xs);border-radius:var(--radius-sm);background-color:var(--color-bg-surface);color:var(--color-text-muted);white-space:nowrap}.song-badge--warning{background-color:var(--color-danger-alpha-20);color:var(--color-danger)}.song-badge--info{background-color:var(--color-primary-alpha-20);color:var(--color-primary)}.form-error{display:block;font-size:.75rem;color:var(--color-danger);margin-top:var(--space-xs)}.form-error--hidden{display:none}.chart-skeleton{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:var(--space-md);padding:var(--space-xl)}.chart-skeleton--hidden{display:none}.chart-skeleton__line{height:8px;background:linear-gradient(90deg,var(--color-bg-elevated) 25%,var(--color-border) 50%,var(--color-bg-elevated) 75%);background-size:200% 100%;animation:1.5s infinite skeleton-shimmer;border-radius:var(--radius-sm)}.chart-skeleton__line--short{width:60%}.chart-skeleton__line--medium{width:80%}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.undo-toast{position:fixed;bottom:var(--space-lg);left:50%;transform:translateX(-50%);background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);display:flex;align-items:center;gap:var(--space-md);box-shadow:var(--shadow-lg);z-index:200;animation:.3s toast-slide-up}.undo-toast--hidden{display:none}.undo-toast__message{font-size:.875rem;color:var(--color-text)}.btn--undo{padding:var(--space-xs) var(--space-sm);background-color:var(--color-primary);color:var(--color-bg);font-size:.75rem;font-weight:600}.btn--undo:hover{background-color:var(--color-primary-hover)}@keyframes toast-slide-up{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.offline-banner{position:fixed;top:0;left:0;right:0;background-color:var(--color-danger);color:#fff;padding:var(--space-sm) var(--space-md);display:flex;align-items:center;justify-content:center;gap:var(--space-sm);font-size:.875rem;z-index:1000}.offline-banner--hidden{display:none}.offline-banner__icon{font-size:1rem}.install-prompt{position:fixed;bottom:var(--space-lg);left:var(--space-lg);right:var(--space-lg);background-color:var(--color-bg-surface);border:1px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--space-md);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);box-shadow:var(--shadow-lg);z-index:100;animation:.3s toast-slide-up}.install-prompt--hidden{display:none}.install-prompt__text{font-size:.875rem;color:var(--color-text);flex:1}.install-prompt__actions{display:flex;gap:var(--space-sm);flex-shrink:0}.btn--small{padding:var(--space-xs) var(--space-sm);font-size:.75rem}@media (max-width:480px){.install-prompt{flex-direction:column;align-items:stretch;text-align:center}.install-prompt__actions{justify-content:center}}.modal--settings{max-width:480px}.modal--settings .modal__content{padding:0}.modal--settings .modal__header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);border-bottom:1px solid var(--color-border-subtle)}.modal--settings .modal__title{margin-bottom:0}.modal--settings .modal__close{background:0 0;border:none;color:var(--color-text-muted)}.modal--settings .modal__close:hover{color:var(--color-text)}.header__top{display:flex;justify-content:space-between;align-items:center}.header__settings{background:0 0;color:var(--color-text-muted);padding:var(--space-sm);min-width:auto;min-height:auto}.header__settings:hover{color:var(--color-text);background:rgba(255,255,255,.05)}.settings-section{padding:var(--space-lg);border-bottom:1px solid var(--color-border-subtle)}.settings-section:last-child{border-bottom:none}.settings-section__title{font-size:.75rem;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--space-md)}.settings-options{display:flex;gap:var(--space-sm)}.settings-option{flex:1;cursor:pointer}.settings-option input{position:absolute;opacity:0;pointer-events:none}.settings-option__card{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-md);background-color:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast)}.settings-option input:checked+.settings-option__card{border-color:var(--color-primary);background-color:var(--color-primary-alpha-10)}.settings-option input:focus-visible+.settings-option__card{outline:2px solid var(--color-focus);outline-offset:2px}.settings-option__card:hover{border-color:var(--color-text-muted)}.settings-option input:checked+.settings-option__card:hover{border-color:var(--color-primary)}.settings-option__preview{width:48px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--color-border)}.settings-option__preview--dark{background:linear-gradient(135deg,#0f0f0f 50%,#242424 50%)}.settings-option__preview--light{background:linear-gradient(135deg,#fff 50%,#f5f5f5 50%)}.settings-option__preview--system{background:linear-gradient(135deg,#0f0f0f 25%,#242424 25%,#242424 50%,#fff 50%,#fff 75%,#f5f5f5 75%)}.settings-option__label{font-size:.8125rem;font-weight:var(--font-weight-medium);color:var(--color-text)}.settings-option__card--lang{flex-direction:row;justify-content:center}.settings-option__flag{font-size:1.25rem}[data-theme=light]{--color-bg:#ffffff;--color-bg-surface:#f8f8f8;--color-bg-elevated:#ffffff;--color-text:#1a1a1a;--color-text-muted:#6b7280;--color-border:#e5e5e5;--color-border-subtle:#f0f0f0;--color-text-inverse:#ffffff;--color-primary-alpha-10:rgba(229, 160, 13, 0.1);--color-primary-alpha-20:rgba(229, 160, 13, 0.15);--color-primary-alpha-30:rgba(229, 160, 13, 0.2);--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.08);--shadow-lg:0 12px 24px rgba(0, 0, 0, 0.12);--shadow-glow:0 0 20px rgba(229, 160, 13, 0.2)}[data-theme=light] .header{background-color:rgba(255,255,255,.9)}[data-theme=light] .btn--primary,[data-theme=light] .nav-btn--active{color:var(--color-text-inverse)}[data-theme=light] .modal::backdrop{background-color:rgba(0,0,0,.5)}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}