:root{
  --bg:#0b0b0c; --panel:#111113; --raised:#17171a; --line:#232327; --line2:#2e2e33;
  --text:#ededef; --muted:#8b8b93; --dim:#5d5d64;
  --accent:#f1f0ec; --ok:#3ecf8e; --warn:#f5a524; --err:#e5484d;
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:14px/1.45 Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased;display:flex;overflow:hidden}
.mono{font-family:'Geist Mono',monospace}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:var(--text);background:var(--raised);border:1px solid var(--line2);border-radius:8px;padding:9px 11px;outline:none;width:100%}
input:focus,textarea:focus,select:focus{border-color:#55555c}
textarea{resize:vertical;min-height:96px}

/* sidebar */
aside{width:236px;flex:none;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 10px}
.brand{display:flex;align-items:center;gap:9px;padding:4px 8px 16px;font-weight:600;letter-spacing:-.01em}
.brand i{width:18px;height:18px;border-radius:5px;background:var(--accent);display:block}
.model-sw{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line2);border-radius:var(--r);margin-bottom:14px;cursor:pointer;position:relative}
.model-sw img{width:30px;height:30px;border-radius:7px;object-fit:cover}
.model-sw b{font-weight:500;display:block}
.model-sw small{color:var(--muted);font-size:12px}
.model-sw .chev{margin-left:auto;color:var(--dim)}
.menu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--raised);border:1px solid var(--line2);border-radius:var(--r);padding:5px;display:none;z-index:5}
.menu.open{display:block}
.menu div{display:flex;gap:9px;align-items:center;padding:7px;border-radius:7px}
.menu div:hover{background:#202024}
.menu .ph{width:26px;height:26px;border-radius:6px;background:#222226;display:grid;place-items:center;color:var(--dim);font-size:11px}
.grp{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:12px 8px 6px}
nav a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;color:var(--muted);cursor:pointer;text-decoration:none}
nav a:hover{background:#18181b;color:var(--text)}
nav a.on{background:#1d1d21;color:var(--text)}
nav a svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
nav a .k{margin-left:auto;font-size:11px;color:var(--dim)}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding:12px 8px 2px;font-size:12px;color:var(--muted)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}

/* main */
main{flex:1;display:flex;flex-direction:column;min-width:0}
header{height:52px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:14px}
header h1{font-size:14px;font-weight:500}
header .crumb{color:var(--dim)}
header .sp{flex:1}
.pill{display:flex;align-items:center;font-size:12px;color:var(--muted);border:1px solid var(--line2);border-radius:99px;padding:4px 10px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:8px 14px;font-weight:500;border:1px solid var(--line2);background:var(--raised)}
.btn:hover{border-color:#47474d}
.btn.pri{background:var(--accent);color:#0b0b0c;border-color:var(--accent)}
.btn.pri:hover{background:#fff}
.btn.sm{padding:5px 10px;font-size:12px}
.wrap{flex:1;overflow:auto}
.screen{display:none;padding:22px;gap:22px}
.screen.on{display:flex}

.col-form{width:360px;flex:none;display:flex;flex-direction:column;gap:16px}
.col-out{flex:1;min-width:0}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.seg{display:flex;background:var(--raised);border:1px solid var(--line2);border-radius:8px;padding:3px;gap:3px}
.seg button{flex:1;padding:6px 0;border-radius:6px;color:var(--muted);font-size:13px}
.seg button.on{background:#26262b;color:var(--text)}
.row{display:flex;gap:10px}
.toggle{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.toggle small{display:block;color:var(--dim);font-size:12px}
.sw{width:32px;height:18px;border-radius:99px;background:#2b2b30;position:relative;flex:none;cursor:pointer}
.sw::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#77777e;top:2px;left:2px;transition:.15s}
.sw.on{background:var(--accent)}
.sw.on::after{left:16px;background:#0b0b0c}
.drop{border:1px dashed #3a3a40;border-radius:var(--r);padding:26px 14px;text-align:center;color:var(--muted);font-size:13px;cursor:pointer}
.drop:hover{border-color:#5a5a62;color:var(--text)}
.drop b{display:block;color:var(--text);font-weight:500;margin-bottom:2px}
.hint{font-size:12px;color:var(--dim)}
.cost{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding-top:2px}

.out-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.out-head h2{font-size:13px;font-weight:500;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.tile{position:relative;border-radius:var(--r);overflow:hidden;background:var(--raised);aspect-ratio:9/16}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile .tag{position:absolute;left:8px;top:8px;font-size:11px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:2px 7px;border-radius:5px}
.tile .act{position:absolute;inset:auto 8px 8px 8px;display:none;gap:6px}
.tile:hover .act{display:flex}
.tile .act button{flex:1;background:rgba(15,15,16,.8);backdrop-filter:blur(6px);border-radius:6px;padding:5px;font-size:12px}
.tile.ghost{display:grid;place-items:center;color:var(--dim);font-size:12px;border:1px dashed var(--line2);background:transparent}
.bar{height:3px;background:#222;border-radius:3px;overflow:hidden;margin-top:8px;width:60%}
.bar i{display:block;height:100%;width:40%;background:var(--accent)}

.queue{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.qrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.qrow:last-child{border-bottom:0}
.qrow .n{color:var(--dim);width:22px}
.qrow .t{flex:1;color:var(--text)}
.qrow .s{font-size:12px;color:var(--muted);width:90px;text-align:right}
.qrow img{width:28px;height:44px;object-fit:cover;border-radius:4px}

.player{border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:9/16;max-height:620px;position:relative;margin:0 auto}
.player img{width:100%;height:100%;object-fit:cover;opacity:.92}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.play::after{content:"";border-left:15px solid #000;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.timeline{display:flex;gap:3px;margin-top:10px}
.timeline span{flex:1;height:34px;border-radius:4px;background:#1c1c20;overflow:hidden}
.timeline span img{width:100%;height:100%;object-fit:cover;opacity:.6}

.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:680px}
.split .player{max-height:none}
.split figcaption{font-size:12px;color:var(--muted);margin-top:7px}
.mock-src{filter:grayscale(1) brightness(.75)}

.circle{width:320px;height:320px;border-radius:50%;overflow:hidden;margin:20px auto;border:1px solid var(--line2)}
.circle img{width:100%;height:100%;object-fit:cover}

.wave{display:flex;align-items:center;gap:3px;height:56px;padding:0 16px;background:var(--raised);border:1px solid var(--line2);border-radius:var(--r)}
.wave .pb{width:30px;height:30px;border-radius:50%;background:var(--accent);flex:none;display:grid;place-items:center;margin-right:10px}
.wave .pb::after{content:"";border-left:9px solid #000;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.wave i{width:3px;border-radius:2px;background:#4a4a50}
.voice-list{display:flex;flex-direction:column;gap:10px;max-width:640px}
.voice-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:2px 2px 0}

.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;width:100%}
.mcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.mcard .ph{aspect-ratio:4/3;background:#151518;display:grid;place-items:center;color:var(--dim);font-size:12px}
.mcard .ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.mcard .bd{padding:14px}
.mcard h3{font-size:15px;font-weight:500}
.mcard p{color:var(--muted);font-size:12px;margin:2px 0 12px}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-top:1px solid var(--line)}
.kv span:first-child{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.chips span{font-size:11px;border:1px solid var(--line2);border-radius:5px;padding:2px 7px;color:var(--muted)}
.ok{color:var(--ok)} .warn{color:var(--warn)} .muted{color:var(--muted)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center}
.filters .seg{width:auto}
.filters .seg button{padding:5px 12px;flex:none}
.masonry{columns:5 190px;column-gap:10px}
.masonry .tile{aspect-ratio:auto;margin-bottom:10px;break-inside:avoid}

.srv{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;width:100%;max-width:980px}
.card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px}
.card h4{font-size:12px;color:var(--muted);font-weight:500;margin-bottom:8px}
.card .big{font-size:26px;font-weight:500;letter-spacing:-.02em}
.gpu{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.gpu label{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:9px;padding:10px 12px;cursor:pointer}
.gpu label.on{border-color:var(--accent)}
.gpu label b{font-weight:500}
.gpu label span{margin-left:auto;color:var(--muted);font-size:12px}
.log{font-size:12px;color:var(--muted);line-height:1.9}
.span2{grid-column:span 2}
.span3{grid-column:span 3}

.models{grid-template-columns:repeat(auto-fill,minmax(240px,320px))}
.split{grid-template-columns:repeat(2,minmax(150px,300px))}
@media (max-width:1100px){
  .screen.on{flex-wrap:wrap}
  .col-form{width:100%}
  .srv{grid-template-columns:1fr 1fr}
  .srv .span2{grid-column:span 2}
}
.toast{position:fixed;right:20px;bottom:20px;background:var(--raised);border:1px solid var(--line2);border-radius:10px;padding:10px 14px;font-size:13px;display:none}
.toast.on{display:block}