:root{--bg-peach: #ffe8d6;--bg-lilac: #e8dff5;--bg: linear-gradient(165deg, var(--bg-peach) 0%, #fff5ee 42%, var(--bg-lilac) 100%);--glass: rgba(255, 255, 255, .55);--glass-strong: rgba(255, 255, 255, .72);--glass-border: rgba(255, 255, 255, .65);--glass-shadow: 0 8px 28px rgba(90, 60, 100, .1);--text: #3a2f3f;--muted: #8a7a8e;--accent: #b7a0d9;--accent-soft: rgba(183, 160, 217, .28);--accent-press: #9b82c4;--danger: #d96b7a;--radius: 20px;--radius-sm: 14px;--header-h: 56px;--nav-h: 64px;--blur: 18px;--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:SF Pro Display,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-peach);background-image:var(--bg);background-attachment:fixed;color:var(--text);-webkit-font-smoothing:antialiased}.app{width:100%;min-height:100%;min-height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;background-image:var(--bg)}.header{flex-shrink:0;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-bottom:1px solid var(--glass-border);box-shadow:0 1px #fff6;z-index:20}.header h1{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}.balance{background:var(--glass-strong);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:6px 14px;border-radius:999px;font-size:.88rem;font-weight:600;border:1px solid var(--glass-border);box-shadow:0 2px 10px #5a3c640f;color:var(--text)}.content{flex:1 1 auto;min-height:0;padding:16px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.page h2{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}.home p{margin-bottom:8px}.nav{flex-shrink:0;display:flex;gap:6px;padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px));background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-top:1px solid var(--glass-border);box-shadow:0 -6px 24px #5a3c640f;z-index:20;position:sticky;bottom:0}.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:none;font-size:1.25rem;padding:8px 4px;border-radius:14px;cursor:pointer;color:var(--muted);transition:transform .18s var(--ease),background .18s var(--ease),opacity .18s var(--ease),color .18s var(--ease);-webkit-tap-highlight-color:transparent}.nav button:active{transform:scale(.92);opacity:.85}.nav button.active{background:var(--accent-soft);color:var(--accent)}.nav-icon{line-height:1}.nav-label{font-size:.65rem;font-weight:600;letter-spacing:.01em;color:inherit}.btn{display:block;width:100%;padding:14px 16px;margin-top:10px;border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;background:var(--glass-strong);color:var(--text);border:1px solid var(--glass-border);box-shadow:0 4px 14px #5a3c6414;transition:transform .18s var(--ease),opacity .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);-webkit-tap-highlight-color:transparent}.btn:active:not(:disabled){transform:scale(.97);opacity:.9}.btn.primary{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 6px 18px #b7a0d959}.btn.primary:active:not(:disabled){background:var(--accent-press)}.btn.small{padding:8px 12px;font-size:.85rem}.btn.tiny{padding:4px 10px;font-size:.75rem;width:auto;margin-top:0}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.page label{display:block;margin-top:12px;font-size:.85rem;color:var(--muted);font-weight:500}.page textarea,.page input:not([type=checkbox]):not([type=radio]):not([type=range]),.page select{display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.7);background:var(--glass-strong);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);font-size:1rem;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 2px 10px #5a3c640d;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}.page textarea:focus,.page input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,.page select:focus{outline:none;border-color:#b7a0d973;box-shadow:0 0 0 3px var(--accent-soft)}.page textarea{resize:vertical;min-height:80px}.page select{cursor:pointer}.small-hint{display:block;margin-top:4px;font-size:.75rem}.field-label{font-size:.85rem;color:var(--muted);margin-right:8px}.checkbox{display:flex!important;align-items:center;gap:8px;color:var(--text)!important}.checkbox.inline{display:inline-flex!important;margin-right:12px;margin-top:0}.checkbox input[type=checkbox]{width:18px!important;height:18px;min-width:18px;margin:0;padding:0;border-radius:5px;border:1px solid #cbb8d4;background:#fff;accent-color:var(--accent);-webkit-appearance:checkbox;-moz-appearance:auto;appearance:auto;cursor:pointer;flex-shrink:0}.vocal-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:12px}.band-picker{margin-top:8px;display:flex;flex-direction:column;gap:10px}.band-picker label{margin-top:0}.band-selected{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:.9rem;color:var(--text)}.band-results{margin-top:8px;max-height:220px;overflow-y:auto;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--glass-strong);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--glass-shadow)}.band-group-title{padding:8px 10px 4px;font-size:.75rem;color:var(--muted);position:sticky;top:0;background:#ffffffe6}.band-option{display:block;width:100%;text-align:left;padding:8px 12px;border:none;border-radius:0;background:transparent;color:var(--text);font-size:.9rem;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease)}.band-option:hover{background:#b7a0d914}.band-option:active{transform:scale(.99)}.band-option.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.band-empty{padding:12px;text-align:center}.style-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px;max-height:160px;overflow-y:auto;padding:4px 0}.chip{background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--text);border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:500;cursor:pointer;box-shadow:0 2px 8px #5a3c640d;transition:transform .16s var(--ease),opacity .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease);-webkit-tap-highlight-color:transparent}.chip:hover{border-color:#b7a0d973;background:var(--accent-soft)}.chip:active{transform:scale(.94);opacity:.88}.error{background:#b7a0d91f;color:var(--danger);padding:10px 12px;border-radius:var(--radius-sm);margin:10px 0;font-size:.9rem;border:1px solid rgba(183,160,217,.22)}.app-error{flex-shrink:0;margin:0;border-radius:0;border-bottom:1px solid rgba(183,160,217,.25)}.muted{color:var(--muted);font-size:.9rem}.gen-banner{margin-bottom:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--accent-soft);border:1px solid rgba(183,160,217,.2);color:var(--accent-press);font-weight:500}.package-card{background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));padding:14px 16px;border-radius:var(--radius);margin-bottom:12px;display:flex;flex-direction:column;align-items:stretch;gap:8px;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.library-page{display:flex;flex-direction:column;min-height:100%;gap:0}.library-scroll{flex:1 1 auto;min-height:0;padding-bottom:12px}.track-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;padding-bottom:8px}.track-card{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--radius);background:linear-gradient(145deg,#5a466e2e,#ffffff6b);border:1px solid rgba(120,95,140,.22);box-shadow:0 6px 18px #462d551f;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease);-webkit-tap-highlight-color:transparent}.track-card:active{transform:scale(.985)}.track-card.is-playing{border-color:#b7a0d98c;background:linear-gradient(145deg,#9b82c447,#ffffff80);box-shadow:0 8px 22px #9b82c438}.track-cover{width:56px;height:56px;border-radius:14px;overflow:hidden;background:#5a466e2e;border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}.track-eq{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:10px 8px 8px;background:linear-gradient(180deg,#281c3726,#281c379e)}.track-eq span{display:block;width:4px;border-radius:999px;background:#f4ecff;box-shadow:0 0 8px #f4ecff8c;animation:track-eq-bar .9s ease-in-out infinite;transform-origin:bottom}.track-eq span:nth-child(1){height:35%;animation-delay:0s}.track-eq span:nth-child(2){height:70%;animation-delay:.15s}.track-eq span:nth-child(3){height:50%;animation-delay:.3s}.track-eq span:nth-child(4){height:85%;animation-delay:.45s}@keyframes track-eq-bar{0%,to{transform:scaleY(.45)}50%{transform:scaleY(1)}}.track-playing-label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7a5ea8;margin-bottom:2px}.track-card.is-playing .track-title{color:#4a3568}.track-cover img{width:100%;height:100%;object-fit:cover;display:block}.track-cover-fallback{font-size:1.35rem;opacity:.75}.track-meta{min-width:0;display:flex;flex-direction:column;gap:4px}.track-title{font-size:.98rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-sub{display:flex;gap:6px;align-items:center;font-size:.78rem;font-variant-numeric:tabular-nums}.track-actions{display:flex;gap:6px;flex-shrink:0}.track-icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(120,95,140,.2);background:#ffffff73;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;cursor:pointer;box-shadow:0 2px 8px #462d5514;-webkit-tap-highlight-color:transparent}.track-icon-btn:disabled{opacity:.35;cursor:not-allowed}.track-icon-btn.danger:active:not(:disabled){background:#d96b7a2e}.mini-player{position:sticky;bottom:0;z-index:18;margin:8px -4px 0;padding:12px 12px 10px;border-radius:18px 18px 14px 14px;background:linear-gradient(180deg,#463458e0,#3a2a4af0);border:1px solid rgba(255,255,255,.14);box-shadow:0 -8px 28px #321e4647;color:#f6f1fa;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.mini-player-now{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;margin-bottom:8px}.mini-player-cover{width:44px;height:44px;border-radius:12px;overflow:hidden;background:#ffffff1f;display:flex;align-items:center;justify-content:center;font-size:1.1rem}.mini-player-cover img{width:100%;height:100%;object-fit:cover;display:block}.mini-player-meta{min-width:0;display:flex;flex-direction:column;gap:2px}.mini-player-meta strong{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-player-meta .muted{color:#f6f1fab8;font-size:.74rem;font-variant-numeric:tabular-nums}.mini-player .player-progress{margin-bottom:6px}.mini-player .scrubber-wave{background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 3px,transparent 3px 6px),#ffffff1f}.mini-player .scrubber-fill{background:repeating-linear-gradient(90deg,#d4c2f0 0,#d4c2f0 3px,#b7a0d9b3 3px,#b7a0d9b3 6px)}.mini-player .scrubber-input::-webkit-slider-thumb{border-color:#d4c2f0}.mini-player .scrubber-input::-moz-range-thumb{border-color:#d4c2f0}.mini-player-controls{display:flex;align-items:center;justify-content:space-between;gap:6px}.mini-ctrl{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:#ffffff1a;color:#fff;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease)}.mini-ctrl:active{transform:scale(.92)}.mini-ctrl.play{width:52px;height:52px;font-size:1.25rem;background:var(--accent);border-color:transparent;box-shadow:0 6px 16px #b7a0d966}.mini-ctrl.edge{opacity:.85}.mini-ctrl.is-on{background:#b7a0d973;border-color:#d4c2f08c;box-shadow:0 0 0 2px #b7a0d940;opacity:1}.player-progress{width:100%}.player-progress.inactive{opacity:.45;pointer-events:none}.scrubber{position:relative;height:36px;display:flex;align-items:center;touch-action:none}.scrubber-wave{position:absolute;left:8px;right:8px;top:8px;bottom:8px;border-radius:10px;overflow:hidden;background:repeating-linear-gradient(90deg,rgba(138,122,142,.28) 0 3px,transparent 3px 6px),#ffffff59;box-shadow:inset 0 1px 2px #5a3c640f}.scrubber-fill{height:100%;width:0%;border-radius:10px;background:repeating-linear-gradient(90deg,var(--accent) 0 3px,rgba(183,160,217,.55) 3px 6px);transition:width .08s linear;pointer-events:none}.player-progress.is-scrubbing .scrubber-fill{transition:none}.scrubber-input{position:relative;z-index:2;width:100%;height:36px;margin:0;padding:0;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none}.scrubber-input:disabled{cursor:default}.scrubber-input::-webkit-slider-runnable-track{height:20px;background:transparent;border:none}.scrubber-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 8px #9b82c459;margin-top:2px;transition:transform .15s var(--ease)}.player-progress.active .scrubber-input::-webkit-slider-thumb:active{transform:scale(1.15)}.scrubber-input::-moz-range-track{height:20px;background:transparent;border:none}.scrubber-input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 8px #9b82c459}.player-progress.inactive .scrubber-input::-webkit-slider-thumb,.player-progress.inactive .scrubber-input::-moz-range-thumb{opacity:0;pointer-events:none}.player-time{display:flex;justify-content:space-between;font-size:.72rem;margin-top:4px;font-variant-numeric:tabular-nums}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#3a2f3f59;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:16px}.modal-sheet{background:var(--glass-strong);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:22px 22px 16px 16px;width:min(520px,100%);max-height:75vh;display:flex;flex-direction:column;padding:16px;gap:10px;border:1px solid var(--glass-border);box-shadow:0 16px 40px #5a3c642e}.modal-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.lyrics-view{margin:0;white-space:pre-wrap;word-break:break-word;overflow:auto;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.45;color:var(--text);padding:8px;border-radius:var(--radius-sm);background:#fff6}