@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@400;500;600;700&display=swap');

:root{--bg:#060d1a;--panel:#0b1424;--panel-2:#0e1a2c;--line:#20334f;--line-bright:#2e4d78;--text:#edf4ff;--muted:#8ea4c4;--muted-2:#5f7595;--blue:#4f82e8;--blue-deep:#183671;--blue-soft:#214486;--green:#38d996;--amber:#f1b74c;--red:#fb536b;--focus:#7cadff;--mono:'Fira Code',monospace;--sans:'Fira Sans','Microsoft YaHei',sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;background:radial-gradient(circle at 72% -15%,#142a51 0,#081326 32%,var(--bg) 70%);color:var(--text);font-family:var(--sans);font-size:14px}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.app-shell{min-height:100vh}.topbar{height:68px;display:flex;align-items:center;padding:0 38px;border-bottom:1px solid #182a46;background:rgba(5,13,26,.88);backdrop-filter:blur(18px);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);letter-spacing:.02em;font-weight:600;white-space:nowrap}.brand small{font-family:var(--sans);font-size:10px;font-weight:500;color:var(--muted-2);letter-spacing:.12em;margin-left:2px}.brand-mark{display:flex;align-items:flex-end;gap:3px;height:20px}.brand-mark i{display:block;width:4px;background:var(--blue);border-radius:2px}.brand-mark i:nth-child(1){height:10px}.brand-mark i:nth-child(2){height:18px;background:#70a3ff}.brand-mark i:nth-child(3){height:14px;background:var(--green)}.topnav{display:flex;gap:5px;margin-left:70px;height:100%;align-items:center}.nav-item{border:0;background:transparent;color:var(--muted);padding:23px 16px;height:100%;border-bottom:2px solid transparent}.nav-item:hover,.nav-item.active{color:var(--text)}.nav-item.active{border-bottom-color:var(--blue)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.mode-chip{border:1px solid #315078;border-radius:20px;padding:7px 11px;color:#a9c4ec;font-size:12px;display:flex;gap:7px;align-items:center}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(56,217,150,.12)}.icon-button{width:34px;height:34px;border:1px solid var(--line-bright);background:#101e34;color:#a5bade;border-radius:4px}.page{max-width:1500px;margin:0 auto;padding:34px 38px 56px}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}.eyebrow,.panel-kicker{font:500 10px var(--mono);letter-spacing:.17em;color:#6e91c6;margin:0 0 8px}.page-heading h1{margin:0;font-size:30px;letter-spacing:-.02em}.subheading{margin:8px 0 0;color:var(--muted);font-size:14px}.heading-status{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.quiet-button,.outline-button,.filter-button{background:transparent;border:1px solid var(--line-bright);color:#a9c4e9;border-radius:3px;padding:9px 13px}.quiet-button{padding:7px 10px}.quiet-button:hover,.outline-button:hover,.filter-button:hover{border-color:#6b98e6;color:var(--text);background:#122746}.stepper{display:flex;border:1px solid var(--line);background:rgba(10,21,38,.7);margin-bottom:18px}.step{display:flex;align-items:center;gap:8px;padding:14px 18px;color:var(--muted-2);border-right:1px solid var(--line);min-width:130px}.step b{font:500 11px var(--mono)}.step.active{color:var(--text);background:#112b5a;box-shadow:inset 3px 0 var(--blue)}.step.active b{color:#72a6ff}.workspace-grid{display:grid;grid-template-columns:270px minmax(420px,1fr) 300px;gap:14px;align-items:start}.panel{border:1px solid var(--line);background:linear-gradient(145deg,rgba(13,27,47,.97),rgba(8,17,31,.96));box-shadow:0 12px 30px rgba(0,0,0,.16)}.panel h2{font-size:17px;margin:0 0 6px}.panel-help{line-height:1.6;color:var(--muted);font-size:12px;margin:0 0 18px}.source-panel,.playlist-panel,.details-panel{padding:20px}.source-switch{display:grid;gap:8px}.source-card{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line);background:#091426;padding:11px;border-radius:3px;position:relative}.source-card.selected{border-color:#4a77c5;background:#132c58}.source-card strong,.source-card small{display:block}.source-card strong{font-size:13px}.source-card small{color:var(--muted-2);font-size:11px;margin-top:4px}.source-logo{width:29px;height:29px;display:grid;place-items:center;font:600 16px var(--mono);border-radius:3px}.source-logo.rb,.target-dot.rb{background:#315fca}.source-logo.sr,.target-dot.sr{background:#6a42b4}.check{margin-left:auto;color:var(--green);opacity:0}.source-card.selected .check{opacity:1}.drop-zone{margin-top:18px;min-height:126px;border:1px dashed #3a5a82;background:#081323;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--muted);padding:14px;position:relative}.drop-zone.dragging{border-color:var(--green);background:#0a2430}.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop-zone strong{color:#cbdcff;font-size:12px}.drop-zone span{font-size:11px}.drop-zone small{color:var(--green);font-size:10px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drop-icon{font-size:21px;color:#7fa9f4}.switch-row{display:flex;gap:9px;align-items:flex-start;margin-top:18px;color:#bcd0ed;cursor:pointer}.switch-row input{position:absolute;opacity:0}.switch-ui{width:30px;height:17px;border:1px solid #415b80;border-radius:12px;position:relative;flex:none}.switch-ui:after{content:"";position:absolute;width:11px;height:11px;left:2px;top:2px;background:#6e82a0;border-radius:50%;transition:transform .18s}.switch-row input:checked+.switch-ui{background:#18477b;border-color:#5e9bff}.switch-row input:checked+.switch-ui:after{transform:translateX(13px);background:#8fc2ff}.switch-row strong,.switch-row small{display:block}.switch-row strong{font-size:12px;font-weight:500}.switch-row small{font-size:10px;color:var(--muted-2);margin-top:3px}.panel-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.playlist-panel{min-height:518px}.playlist-panel h2{margin-bottom:3px}.playlist-panel p{color:var(--muted);margin:0;font-size:11px}.filter-row{display:flex;gap:6px;margin:18px 0 12px}.search-box{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#071120;flex:1;padding:0 10px}.search-box span{color:#6e91c6;font-size:18px}.search-box input{border:0;outline:0;background:transparent;width:100%;height:35px;font-size:12px}.filter-button{padding:7px 10px;border-color:var(--line);color:var(--muted);font-size:11px}.filter-button.active{background:#17376c;border-color:#4f82e8;color:#e9f2ff}.playlist-tree{height:356px;overflow:auto;border:1px solid var(--line);background:#07111f}.folder-row{border-bottom:1px solid #1b2b44}.folder-head{height:48px;display:flex;align-items:center;gap:8px;padding:0 12px;color:#dce9ff}.folder-head:hover{background:#0c1d35}.folder-head.selected{background:#183979;box-shadow:inset 3px 0 var(--red)}.folder-caret{color:#75a2e9;font-size:11px;width:12px}.folder-icon{color:#6698e9}.folder-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px}.folder-meta{font-size:11px;color:var(--muted);white-space:nowrap}.health-ok{color:var(--green);font-size:11px}.health-missing{color:var(--amber);font-size:11px}.expand-button{margin-left:8px;background:#0b1c34;border:1px solid #42679e;color:#b9d3f9;border-radius:2px;padding:7px 12px;font-size:11px;min-width:55px}.track-row{display:flex;align-items:center;gap:8px;min-height:35px;padding:5px 12px 5px 45px;background:#081526;border-top:1px solid #14243b;color:#c7d7ed}.track-row:hover{background:#0d2039}.track-mark{width:17px;height:17px;display:grid;place-items:center;border-radius:3px;background:#18416e;color:#8ac1ff;font:500 11px var(--mono);flex:none}.track-mark.missing{background:#5b2634;color:#ffab9c}.track-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px}.track-data{font:10px var(--mono);color:#7692b7;white-space:nowrap}.tree-empty{padding:35px 20px;text-align:center;color:var(--muted-2)}.tree-footer{display:flex;justify-content:space-between;padding:11px 0 0;color:var(--muted);font-size:11px}.legend{display:flex;align-items:center;gap:5px}.legend-ok{width:7px;height:7px;border-radius:50%;background:var(--green)}.legend-missing,.summary-icon{width:17px;height:17px;border-radius:3px;display:inline-grid;place-items:center;background:#5b2634;color:#ffb29e;font:600 11px var(--mono)}.details-panel .field-label,.target-label{display:block;color:#98afd0;font-size:11px;margin:14px 0 6px}.field{width:100%;height:36px;border:1px solid var(--line-bright);border-radius:3px;background:#071222;padding:0 10px;font-size:12px}.textarea{height:68px;resize:vertical;padding-top:9px}.target-row{display:flex;gap:7px}.target-chip{flex:1;border:1px solid var(--line-bright);background:#0a1729;padding:9px 7px;font-size:11px;color:var(--muted);border-radius:3px}.target-chip.active{background:#17356b;border-color:#5d8ff0;color:var(--text)}.target-dot{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px}.selected-summary{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.summary-icon{background:#183660;color:#8fbaff}.selected-summary strong,.selected-summary small{display:block}.selected-summary strong{font-size:12px;font-weight:500}.selected-summary small{font-size:10px;color:var(--muted-2);margin-top:3px}.preflight{margin-top:14px;padding:17px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px}.preflight h2{margin-bottom:4px}.preflight p{font-size:12px;color:var(--muted);margin:0}.preflight-copy{flex:1}.progress-track{height:3px;background:#172942;margin-top:14px;max-width:500px}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .25s}.preflight-actions{display:flex;gap:8px}.primary-button{border:1px solid #78a6fa;background:#2756a4;color:white;border-radius:3px;padding:10px 16px;font-weight:600}.primary-button:hover{background:#356bc2}.primary-button:disabled,.outline-button:disabled{opacity:.45;cursor:not-allowed}.notice{display:none;border:1px solid #31537d;margin-top:12px;padding:12px 15px;color:#c5d9f4;background:#0b1b30;font-size:12px}.notice.show{display:block}.notice.ok{border-color:#277d61;background:#0b2927;color:#a6f0d4}.notice.warn{border-color:#94702f;background:#302610;color:#f5d28a}.notice.error{border-color:#8f3c4b;background:#311923;color:#ffb3bf}.view{display:none}.view.active-view{display:block}.empty-state{min-height:400px;display:grid;place-items:center;align-content:center;text-align:center;gap:7px}.empty-state p{max-width:400px;color:var(--muted);line-height:1.7}.empty-glyph{font-size:38px;color:#5689e8}.footer{border-top:1px solid #172944;color:#5f7595;display:flex;justify-content:space-between;padding:17px 38px;font-size:11px}.toast{position:fixed;right:26px;bottom:25px;background:#153368;border:1px solid #5f8fe4;padding:11px 15px;color:#e5efff;box-shadow:0 12px 30px #0008;transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s;z-index:10}.toast.show{transform:translateY(0);opacity:1}@media(max-width:1120px){.workspace-grid{grid-template-columns:245px minmax(350px,1fr)}.details-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:0 15px}.details-panel .panel-kicker,.details-panel h2,.details-panel .panel-help{grid-column:1/-1}.selected-summary{margin-top:14px}}@media(max-width:760px){.topbar{padding:0 16px;height:auto;min-height:60px;flex-wrap:wrap}.brand small,.mode-chip{display:none}.topnav{order:3;margin:0;width:100%;height:42px}.nav-item{padding:9px 12px}.page{padding:24px 14px 40px}.page-heading{display:block}.heading-status{margin-top:17px}.stepper{overflow:auto}.step{min-width:110px;padding:12px}.workspace-grid{display:block}.source-panel,.playlist-panel,.details-panel{margin-bottom:12px}.details-panel{display:block}.preflight{display:block}.preflight-actions{margin-top:15px}.preflight-actions button{flex:1}.footer{padding:14px;display:block}.footer span{display:block;margin:3px 0}}