:root{
  --bg:#0B0C0F; --surface:#121418; --surface-2:#171A1F; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --text:#E9EBEF; --text-2:#9AA3AE; --text-3:#69727E;
  --accent:#7C9CFF; --accent-2:#5B7CFA; --accent-soft:rgba(124,156,255,.12);
  --ok:#46D39A; --ok-soft:rgba(70,211,154,.12);
  --warn:#F5B544; --warn-soft:rgba(245,181,68,.12);
  --danger:#FF6B6B; --danger-soft:rgba(255,107,107,.12);
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --r:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(900px 500px at 8% -10%, rgba(124,156,255,.10), transparent 60%);
}
button,input,textarea,select{font:inherit; color:inherit}
button{cursor:pointer}
.hidden{display:none !important}
.grow{flex:1; min-width:0}
.muted{color:var(--text-3)}
.mono{font-family:var(--mono); font-size:12px}
.err{color:var(--danger); font-size:12px; min-height:16px}
.count{color:var(--text-3); font-weight:400}

/* login */
.login{position:fixed; inset:0; display:grid; place-items:center; z-index:20}
.login-card{
  width:340px; max-width:92vw; background:linear-gradient(180deg,#14171C,#101216);
  border:1px solid var(--line-2); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.login-card p{margin:0}
.login-card input{
  background:#0E1014; border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; outline:0;
}
.login-card input:focus{border-color:rgba(124,156,255,.5)}

/* shell */
.app{height:100%; display:flex; flex-direction:column; position:relative}
.topbar{
  height:56px; flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:0 20px;
  border-bottom:1px solid var(--line); background:rgba(11,12,15,.85); backdrop-filter:blur(12px); z-index:5;
}
.brand{display:flex; align-items:center; gap:10px}
.brand .orb{width:24px; height:24px; border-radius:50%; background:conic-gradient(from 210deg,#7C9CFF,#B79CFF,#46D39A,#7C9CFF); box-shadow:0 0 16px rgba(124,156,255,.5)}
.brand b{display:block; font-size:14px; letter-spacing:.2px}
.brand span{display:block; font-size:10.5px; color:var(--text-3); letter-spacing:.6px; margin-top:-1px}
.conn{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--text-3); display:inline-block}
.dot.ok{background:var(--ok); box-shadow:0 0 8px rgba(70,211,154,.7)}
.dot.bad{background:var(--danger)}
.dot.live{background:var(--accent); box-shadow:0 0 8px rgba(124,156,255,.8)}
.dot.warn{background:var(--warn)}

.layout{flex:1; min-height:0; display:grid; grid-template-columns:260px minmax(0,1fr) 430px; gap:16px; padding:16px 20px 20px; max-width:1600px; width:100%; margin:0 auto}
.side{display:flex; flex-direction:column; gap:10px; min-height:0; overflow:auto}
.center{display:flex; flex-direction:column; gap:10px; min-height:0; overflow:auto}
.sec-head{font-size:11.5px; color:var(--text-3); letter-spacing:.5px; text-transform:uppercase; padding:4px 2px}
.card{background:linear-gradient(180deg,#14171C,#101216); border:1px solid var(--line); border-radius:var(--r)}

/* composer */
.composer{padding:12px; display:flex; flex-direction:column; gap:10px}
.composer textarea{
  width:100%; resize:vertical; min-height:74px; background:#0E1014; border:1px solid var(--line-2);
  border-radius:10px; padding:10px 12px; outline:0; line-height:1.6;
}
.composer textarea:focus{border-color:rgba(124,156,255,.45); box-shadow:0 0 0 3px rgba(124,156,255,.08)}
.composer-row{display:flex; gap:8px; align-items:center}
.field{
  background:#0E1014; border:1px solid var(--line-2); border-radius:9px; padding:8px 10px; outline:0;
  min-width:0; font-size:13px;
}
.field:focus{border-color:rgba(124,156,255,.45)}
#device-select{max-width:200px}
#workspace{flex:1}
.btn{border:0; border-radius:9px; padding:8px 14px; font-size:13px; font-weight:600; background:var(--surface-2); color:var(--text)}
.btn.primary{background:var(--accent-2); color:#fff}
.btn.primary:hover{background:#6D8CFF}
.btn.primary:disabled{opacity:.5; cursor:not-allowed}
.btn.ghost{background:transparent; border:1px solid var(--line-2); color:var(--text-2); font-weight:500}
.btn.ghost:hover{color:var(--text); border-color:rgba(255,255,255,.24)}
.btn.sm{padding:5px 10px; font-size:12px; border-radius:8px}

/* device */
.device-list{display:flex; flex-direction:column; gap:8px}
.device{border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:rgba(255,255,255,.015)}
.device.off{opacity:.55}
.device .d-name{display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600}
.device .d-host{font-size:11.5px; color:var(--text-3); margin-top:2px}
.device .d-tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:7px}
.tag{font-size:10.5px; color:var(--text-2); border:1px solid var(--line-2); border-radius:99px; padding:1px 7px}
.hint{margin-top:auto; font-size:11.5px; color:var(--text-3); line-height:1.7; border-top:1px solid var(--line); padding-top:12px}
.hint code{display:block; font-family:var(--mono); font-size:10.5px; color:#9FB0C7; background:#0C0E12; border:1px solid var(--line); border-radius:7px; padding:7px 8px; margin-top:6px; word-break:break-all}

/* task list */
.list{overflow:hidden; display:flex; flex-direction:column}
.task{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); cursor:pointer}
.task:last-child{border-bottom:0}
.task:hover{background:rgba(255,255,255,.03)}
.task.sel{background:var(--accent-soft)}
.task .t-main{flex:1; min-width:0}
.task .t-title{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.task .t-meta{font-size:11.5px; color:var(--text-3); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap}
.task .t-right{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:0 0 auto}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:2px 8px; border-radius:99px; border:1px solid var(--line-2); color:var(--text-2); white-space:nowrap}
.pill.succeeded{color:var(--ok); border-color:rgba(70,211,154,.3); background:var(--ok-soft)}
.pill.failed{color:var(--danger); border-color:rgba(255,107,107,.3); background:var(--danger-soft)}
.pill.running,.pill.dispatched{color:#C3D0FF; border-color:rgba(124,156,255,.35); background:rgba(124,156,255,.09)}
.pill.cancelling{color:var(--warn); border-color:rgba(245,181,68,.3); background:var(--warn-soft)}
.pill.cancelled,.pill.queued{color:var(--text-3)}

/* detail */
.detail{padding:16px; display:flex; flex-direction:column; min-height:0; overflow:hidden}
.empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-3); gap:6px; font-size:12.5px}
.empty .big{font-size:14px; color:var(--text-2)}
.detail-body{display:flex; flex-direction:column; gap:10px; min-height:0; height:100%}
.d-head{display:flex; gap:10px; align-items:flex-start}
.d-title{font-size:15px; font-weight:600; line-height:1.4}
.d-sub{font-size:11.5px; color:var(--text-3); margin-top:3px}
.d-goal{font-size:12.5px; color:var(--text-2); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:9px; padding:9px 11px; white-space:pre-wrap; max-height:120px; overflow:auto}
.close-detail{display:none}
.d-meta{display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--text-3)}
.d-actions{display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 0}
.d-log{flex:1; min-height:0; overflow:auto; font-family:var(--mono); font-size:11.5px; line-height:1.65; display:flex; flex-direction:column; gap:4px; padding-right:4px}
.ev{white-space:pre-wrap; word-break:break-word}
.ev.dim{color:var(--text-3)}
.ev.text{color:#D6DBE3; border-left:2px solid rgba(124,156,255,.35); padding-left:8px}
.ev.final{color:var(--ok)}
.ev.err{color:var(--danger); background:var(--danger-soft); border-radius:6px; padding:4px 7px}
.ev.thinking{color:#A99BD6; font-style:italic}

/* pair modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; place-items:center; z-index:20}
.modal-backdrop.on{display:grid}
.modal{width:360px; max-width:92vw; background:linear-gradient(180deg,#14171C,#101216); border:1px solid var(--line-2); border-radius:16px; padding:18px; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal-title{font-size:15px; font-weight:600}
.pair-code{font-family:var(--mono); font-size:38px; letter-spacing:10px; text-align:center; padding:22px 0 14px; color:var(--accent); text-shadow:0 0 22px rgba(124,156,255,.35)}
.pair-server{margin-top:14px; border-top:1px solid var(--line); padding-top:12px; font-size:11.5px; color:var(--text-3)}
.pair-server code{color:var(--text-2)}

/* toast */
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,14px); opacity:0; pointer-events:none;
  background:#1B1F27; border:1px solid var(--line-2); border-radius:10px; padding:8px 14px; font-size:12.5px;
  transition:.2s; z-index:30; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.on{opacity:1; transform:translate(-50%,0)}

@media (max-width:1200px){
  .layout{grid-template-columns:220px minmax(0,1fr)}
  .detail{position:fixed; top:56px; right:0; bottom:0; width:min(480px,94vw); z-index:10; transform:translateX(101%);
    transition:transform .22s ease; border-radius:0; border-right:0; box-shadow:-20px 0 50px rgba(0,0,0,.45)}
  .detail.open{transform:none}
  .close-detail{display:inline-block}
}
@media (max-width:820px){
  .layout{grid-template-columns:1fr; padding:12px}
  .side{order:2}
  .center{order:1}
  .device-list{flex-direction:row; overflow-x:auto}
  .device{flex:0 0 220px}
  .composer-row{flex-wrap:wrap}
  .detail{width:100vw; top:56px}
}