: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}.song-card,.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;justify-content:space-between;align-items:center;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.song-card-vertical{flex-direction:column;align-items:stretch;gap:12px}.song-meta{min-width:0}.song-meta strong{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}.package-card{flex-direction:column;align-items:stretch;gap:8px}.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}.actions button{background:transparent;border:none;font-size:1.2rem;cursor:pointer;margin-left:4px}.actions-row{display:flex;justify-content:center;align-items:center;gap:12px}.actions-row button{margin-left:0;font-size:1.25rem;line-height:1;width:44px;height:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:0 3px 10px #5a3c6414;opacity:1;transition:transform .16s var(--ease),opacity .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease);-webkit-tap-highlight-color:transparent}.actions-row button:active:not(:disabled){transform:scale(.9);opacity:.88}.actions-row button.play-btn{width:52px;height:52px;font-size:1.4rem;background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 6px 16px #b7a0d959}.actions-row button.play-btn:active:not(:disabled){background:var(--accent-press)}.actions-row button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.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}