:root{color-scheme:dark;--bg:#090a0f;--panel:#151720;--panel2:#1b1d28;--line:#2a2d3b;--text:#f7f8fb;--muted:#989daf;--accent:#b58cff;--accent2:#6ee7ff;--pink:#ff79bd;--green:#68e6a0;--danger:#ff6e80;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang HK","Noto Sans HK",Segoe UI,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none;background:var(--bg);touch-action:manipulation}body{overflow:hidden;color:var(--text);user-select:none;-webkit-user-select:none}input,textarea,select{user-select:text;-webkit-user-select:text}.app-shell{height:100dvh;max-width:720px;margin:auto;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(circle at 10% -10%,#392363 0,transparent 32%),radial-gradient(circle at 100% 4%,#123c4e 0,transparent 28%),var(--bg)}
.topbar{padding:calc(12px + var(--safe-top)) 16px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #ffffff0c;background:#090a0fd9;backdrop-filter:blur(18px);z-index:5}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:23px;background:linear-gradient(145deg,var(--accent),var(--accent2));box-shadow:0 8px 28px #9a7cff42}.brand-copy{min-width:0;flex:1}.brand-copy small,.eyebrow{font-size:10px;letter-spacing:.13em;color:#aeb4c7;font-weight:800}.brand-copy h1{font-size:18px;margin:2px 0 0}.health-dot{width:10px;height:10px;border-radius:99px;background:var(--green);box-shadow:0 0 0 5px #68e6a016}.health-dot.loading{background:#f3c96b}.health-dot.off{background:var(--danger)}
.view{min-height:0;overflow-y:auto;display:none;padding:14px 14px 24px;scrollbar-width:none}.view::-webkit-scrollbar{display:none}.view.active{display:block}.card,.hero-card{border:1px solid #ffffff0e;background:linear-gradient(180deg,#191b26f2,#12141cf2);border-radius:22px;padding:16px;margin-bottom:12px;box-shadow:0 12px 34px #0004}.hero-card{background:linear-gradient(150deg,#211a37,#121b25 65%,#101218)}.card h2,.hero-card h2{font-size:20px;margin:3px 0 7px}.card h3{font-size:15px;margin:0 0 12px}.card p,.hero-card p{font-size:13px;line-height:1.55;color:var(--muted);margin:6px 0 13px}.accent-card{border-color:#ad82ff33;background:linear-gradient(145deg,#241a39,#12151d)}
.upload-zone{min-height:128px;border:1.5px dashed #7865a5;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;background:#b58cff0b;cursor:pointer}.upload-zone input,.mini-upload input{display:none}.upload-icon{font-size:28px;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#b58cff18;color:#ccb4ff}.upload-zone strong{font-size:16px}.upload-zone small{color:var(--muted);font-size:11px}.source-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:12px;padding:11px;border-radius:16px;background:#0b0d13;border:1px solid var(--line)}.source-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#6ee7ff14;color:var(--accent2)}.source-meta{min-width:0}.source-meta strong,.source-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.source-meta span{font-size:11px;color:var(--muted);margin-top:3px}.source-analysis{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}.analysis-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#191c27;border:1px solid #2c3040;color:#9fa5b8;font-size:10px}.analysis-pill b{color:#f3f5fb}.source-audio{grid-column:1/-1;width:100%;height:40px}.hidden{display:none!important}
button{font:inherit;color:inherit;border:0;cursor:pointer}.primary,.secondary{border-radius:15px;padding:13px 15px;font-weight:800}.primary{background:linear-gradient(135deg,#a97dff,#7658ef);box-shadow:0 9px 24px #8764f633}.secondary{background:#222532;border:1px solid #353949}.wide{width:100%;margin-top:10px}.big{padding:16px;font-size:15px}.icon-btn,.small-btn,.text-btn{background:#232633;border:1px solid #343847;border-radius:11px;padding:8px 10px}.icon-btn{width:38px;height:38px;padding:0}.small-btn{font-size:11px}.small-btn.danger{color:#ff9eaa}.text-btn{border:0;background:transparent;color:#cdb7ff;padding:7px 0}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title h2{margin:2px 0}.badge{min-width:28px;text-align:center;padding:5px 8px;border-radius:999px;background:#262938;color:#c8ccda;font-size:11px}
.singer-chooser,.singer-list,.job-list{display:grid;gap:9px}.singer-choice,.singer-row,.job-row{border:1px solid var(--line);border-radius:16px;padding:11px;background:#0d0f15}.singer-choice{display:flex;align-items:center;gap:10px;text-align:left;width:100%}.singer-choice.selected{border-color:#a785ff;background:#a785ff11;box-shadow:inset 0 0 0 1px #a785ff55}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#6ee7ff33,#b58cff33)}.singer-copy{flex:1;min-width:0}.singer-copy strong,.singer-copy span{display:block}.singer-copy span{font-size:11px;color:var(--muted);margin-top:3px}.empty-copy{color:var(--muted);font-size:12px!important;text-align:center;padding:14px;margin:0!important}.singer-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.singer-actions{display:flex;gap:6px}.singer-row audio{grid-column:1/-1;width:100%;height:38px}
.preset-singer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset-singer{border:1px solid #2c3040;border-radius:15px;background:#0d1017;padding:10px;text-align:left;min-width:0}.preset-singer.selected{border-color:#a884ff;background:#a884ff10;box-shadow:inset 0 0 0 1px #a884ff3d}.preset-singer-top{display:flex;gap:8px;align-items:center}.preset-singer-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#6ee7ff22,#b58cff33);flex:0 0 auto}.preset-singer-copy{min-width:0;flex:1}.preset-singer-copy strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-singer-copy small{display:block;font-size:9px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-singer-actions{display:flex;gap:6px;margin-top:8px}.preset-singer-actions button{flex:1;padding:7px 5px;border-radius:9px;background:#202431;border:1px solid #303545;font-size:9px;font-weight:800}.preset-singer-actions button.use{background:#7255d7;border-color:#8064e4}.voice-preview-player{position:fixed;left:50%;bottom:calc(75px + var(--safe-bottom));transform:translateX(-50%);width:min(92vw,560px);padding:9px 11px;border-radius:15px;background:#11141de8;border:1px solid #383d50;backdrop-filter:blur(18px);z-index:30;box-shadow:0 12px 30px #0008}.voice-preview-player audio{width:100%;height:36px}.voice-preview-player span{font-size:10px;color:#c8ccdb;display:block;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}.preset{padding:10px 4px;border:1px solid #303442;background:#1b1e29;border-radius:12px;font-size:11px;font-weight:800}.preset.active{border-color:#b58cff;background:#b58cff1c;color:#e1d3ff}.field{display:flex;flex-direction:column;gap:6px;margin-top:10px}.field span{font-size:11px;color:#bcc0cf}.field b{float:right;color:#e3d8ff}.field input,.field select,.field textarea{width:100%;border:1px solid #303443;background:#0e1017;color:var(--text);border-radius:12px;padding:11px 12px;font:inherit;font-size:13px;outline:none}.field textarea{resize:vertical;min-height:72px}.field input:focus,.field select:focus,.field textarea:focus{border-color:#896cff}.field input[type=range]{padding:3px 0;border:0;background:transparent;accent-color:#a781ff}.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.full{grid-column:1/-1}.advanced{margin-top:12px;border-top:1px solid #282b38;padding-top:9px}.advanced summary{color:#bec3d3;font-size:12px;cursor:pointer}.microcopy{font-size:10px!important;margin:10px 2px 0!important}.mini-upload{height:70px;border:1px dashed #555b70;border-radius:14px;display:grid;place-items:center;color:#c8ccd8;font-size:12px;background:#ffffff05}
.mode-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}.mode-btn{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;text-align:left;column-gap:9px;padding:11px;border:1px solid #303442;background:#11141c;border-radius:14px}.mode-btn>span{grid-row:1/3;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#ffffff08}.mode-btn strong{font-size:12px}.mode-btn small{font-size:9px;color:var(--muted);margin-top:2px}.mode-btn.active{border-color:#a884ff;background:#a884ff10;box-shadow:inset 0 0 0 1px #a884ff38}
.arrange-block{margin-top:13px;padding-top:12px;border-top:1px solid #282b38}.arrange-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.arrange-title strong{font-size:12px}.arrange-title small{font-size:10px;color:var(--muted)}.instrument-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.instrument-chip,.tempo-btn{padding:9px 5px;border:1px solid #303442;background:#191c27;border-radius:11px;font-size:10px;font-weight:800}.instrument-chip.selected,.tempo-btn.active{border-color:#6ee7ff;background:#6ee7ff14;color:#c9f8ff;box-shadow:inset 0 0 0 1px #6ee7ff33}.tempo-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.tempo-slider{width:100%;margin-top:10px;accent-color:#a781ff}
.progress-wrap{margin-top:10px}.progress{height:7px;border-radius:99px;background:#222532;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s}.progress-wrap span{display:block;font-size:10px;color:var(--muted);margin-top:5px}.transfer-box{margin-top:10px;padding:12px;border-radius:14px;background:#0c0e14;border:1px solid #2d3140;text-align:center}.transfer-box span,.transfer-box small{display:block;color:var(--muted);font-size:11px}.transfer-box strong{display:block;font-size:30px;letter-spacing:.18em;margin:6px 0;color:#ded3ff}.health-panel{font-size:12px;color:#bfc4d4;line-height:1.65;padding:12px;border-radius:14px;background:#0c0e14;border:1px solid #2a2e3a}.health-panel strong.ok{color:var(--green)}.health-panel strong.bad{color:var(--danger)}
.desktop-transfer{margin-top:12px;padding:13px;border-radius:17px;background:linear-gradient(145deg,#111724,#111119);border:1px solid #4d4a704d}.desktop-transfer-title{display:flex;align-items:center;gap:10px;margin-bottom:3px}.desktop-transfer-title>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#6ee7ff12}.desktop-transfer-title div{display:flex;flex-direction:column}.desktop-transfer-title strong{font-size:14px}.desktop-transfer-title small{font-size:10px;color:var(--muted);margin-top:2px}.desktop-upload{margin-top:10px}.desktop-transfer input#desktopTransferCode{font-size:22px;letter-spacing:.2em;text-align:center;font-weight:800}.desktop-only-note{font-size:10px;color:var(--muted)}
.job-row{padding:13px}.job-top{display:flex;gap:8px;align-items:center}.job-top strong{font-size:13px;flex:1}.job-status{font-size:10px;padding:4px 7px;border-radius:99px;background:#252937;color:#c8ccda}.job-stage{font-size:11px;color:var(--muted);margin:7px 0}.job-progress{height:6px;border-radius:99px;background:#242733;overflow:hidden}.job-progress i{height:100%;display:block;background:linear-gradient(90deg,#9673ff,#6ee7ff)}.job-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.job-actions a,.job-actions button{font-size:11px;padding:7px 10px;border-radius:9px;background:#232634;color:#fff;text-decoration:none}.job-actions a{background:#7155dd}.job-error{font-size:10px;color:#ff95a2;margin-top:7px;word-break:break-word}.result-audio{width:100%;height:40px;margin-top:10px}
.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);padding:7px 10px calc(7px + var(--safe-bottom));border-top:1px solid #ffffff10;background:#0b0d12ed;backdrop-filter:blur(18px);z-index:6}.nav-btn{background:transparent;color:#7f8496;padding:6px 2px 3px;display:flex;flex-direction:column;align-items:center;gap:2px}.nav-btn span{font-size:18px}.nav-btn b{font-size:9px}.nav-btn.active{color:#cfbaff}.toast{position:fixed;left:50%;bottom:calc(74px + var(--safe-bottom));transform:translate(-50%,20px);padding:10px 14px;border-radius:12px;background:#f4f4f6;color:#15161b;font-weight:700;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:min(90vw,520px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
.landscape-guard{display:none;position:fixed;inset:0;z-index:999;background:#090a0f;align-items:center;justify-content:center;flex-direction:column;gap:8px}.landscape-guard .rotate-icon{font-size:42px;color:#bd9cff}.landscape-guard span{color:var(--muted);font-size:12px}@media (orientation:landscape) and (max-height:600px){.landscape-guard{display:flex}.app-shell{visibility:hidden}}@media(min-width:620px){.app-shell{border-left:1px solid #1f2230;border-right:1px solid #1f2230}.view{padding:18px 22px 28px}.preset-grid{grid-template-columns:repeat(8,1fr)}}