/* ParallelOS — Control Plane (real-product dashboard) */
:root{
  --app-bg:#080b10;
  --app-panel:#0e131b;
  --app-panel-2:#11171f;
  --app-elev:#151c26;
  --app-border:#1d2632;
  --app-border-2:#283342;
  --app-text:#e6edf3;
  --app-dim:#8b97a6;
  --app-faint:#5b6675;
  --accent:#00d0f5;
  --accent-dim:#0a7ea8;
  --ok:#3fb950;--warn:#d6a531;--err:#f85149;--info:#58a6ff;--purple:#a779f0;
  --r:9px;
}
body.app{background:var(--app-bg);color:var(--app-text);overflow:hidden;font-family:var(--f-body)}
#root{height:100vh}
.mono{font-family:var(--f-mono)}

/* ============ LOGIN ============ */
.login{position:fixed;inset:0;display:grid;place-items:center;z-index:50;overflow:hidden;background:var(--app-bg)}
.login canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.login-3d{position:absolute;inset:0;z-index:0;opacity:.55}
.login-card{position:relative;z-index:3;width:min(430px,92vw);background:linear-gradient(180deg,rgba(16,22,30,.94),rgba(8,11,16,.97));
  border:1px solid var(--app-border-2);border-radius:18px;padding:40px;backdrop-filter:blur(16px);box-shadow:0 40px 120px -50px rgba(0,200,255,.5)}
.login-card .lmark{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.login-card .lmark img{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(0,200,255,.5))}
.login-card .lmark b{font-family:var(--f-display);font-weight:700;font-size:18px}.login-card .lmark b span{color:var(--accent)}
.login-card h1{font-size:23px;margin-bottom:9px;letter-spacing:-.02em}
.login-card p{color:var(--app-dim);font-size:14.5px;margin-bottom:26px;line-height:1.6}
.phantom-btn{width:100%;justify-content:center;gap:11px;font-size:15px;padding:14px;background:#ab9ff2;color:#1a1336;border:none;border-radius:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;transition:transform .2s,box-shadow .2s;font-family:var(--f-body)}
.phantom-btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(171,159,242,.4)}
.phantom-btn .pi{width:22px;height:22px}
.login-steps{margin-top:24px;border-top:1px solid var(--app-border);padding-top:20px;display:grid;gap:13px}
.login-step{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--app-dim)}
.login-step .n{flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:var(--app-elev);border:1px solid var(--app-border-2);display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;color:var(--accent)}
.login-foot{position:absolute;bottom:24px;left:0;right:0;text-align:center;z-index:3;color:var(--app-faint);font-size:12px;font-family:var(--f-mono)}
.login-foot a{color:var(--app-dim)}
.connecting{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--accent);font-family:var(--f-mono);font-size:14px;padding:14px}
.spinner{width:15px;height:15px;border:2px solid rgba(0,208,245,.25);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ SHELL ============ */
.shell{display:grid;grid-template-columns:230px 1fr;height:100vh}
.side{background:var(--app-panel);border-right:1px solid var(--app-border);display:flex;flex-direction:column;padding:16px 12px}
.side-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;font-family:var(--f-display);font-weight:700;font-size:16px}
.side-brand img{width:25px;height:25px;filter:drop-shadow(0 0 6px rgba(0,200,255,.5))}
.side-brand b span{color:var(--accent)}
.side-net{display:flex;align-items:center;gap:7px;margin:0 8px 14px;padding:7px 10px;background:var(--app-panel-2);border:1px solid var(--app-border);border-radius:8px;font-family:var(--f-mono);font-size:11px;color:var(--app-dim)}
.side-net .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.side-nav{display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto}
.side-nav .sg{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--app-faint);padding:16px 10px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:7px;color:var(--app-dim);cursor:pointer;font-size:13.5px;font-weight:500;
  transition:background .15s,color .15s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.nav-item svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.nav-item:hover{color:var(--app-text);background:var(--app-panel-2)}
.nav-item.active{color:var(--app-text);background:var(--app-elev)}
.nav-item.active svg{color:var(--accent);opacity:1}
.nav-item .ct{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--app-faint);background:var(--app-panel-2);border-radius:5px;padding:1px 7px}
.nav-item.active .ct{color:var(--accent)}
.side-wallet{border:1px solid var(--app-border);border-radius:10px;padding:12px;background:var(--app-panel-2);margin-top:8px}
.side-wallet .addr{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12.5px;color:var(--app-text);margin-bottom:9px}
.side-wallet .addr .pi{width:16px;height:16px;border-radius:5px;background:#ab9ff2;flex:0 0 auto}
.side-wallet .addr .cp{margin-left:auto;cursor:pointer;color:var(--app-faint)}
.side-wallet .addr .cp:hover{color:var(--accent)}
.side-wallet .bal{display:flex;align-items:baseline;justify-content:space-between}
.side-wallet .bal .n{font-family:var(--f-display);font-weight:700;font-size:18px}
.side-wallet .bal .t{font-family:var(--f-mono);font-size:10.5px;color:var(--accent)}
.side-wallet .disc{margin-top:9px;font-size:11.5px;color:var(--app-faint);cursor:pointer;background:none;border:none;font-family:inherit;padding:0}
.side-wallet .disc:hover{color:var(--err)}

.main{overflow-y:auto;height:100vh;position:relative}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:60px;background:rgba(8,11,16,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--app-border)}
.topbar .crumb{display:flex;align-items:center;gap:9px;font-size:14px}
.topbar .crumb .bc{color:var(--app-faint);cursor:pointer}
.topbar .crumb .bc:hover{color:var(--app-dim)}
.topbar .crumb h2{font-size:17px;font-family:var(--f-display);font-weight:600}
.topbar .tact{display:flex;align-items:center;gap:12px}
.view{padding:26px 28px 70px;max-width:1240px}
@media(max-width:840px){.shell{grid-template-columns:1fr}.side{display:none}.view{padding:18px}}

/* ============ buttons / chips ============ */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-body);font-weight:600;font-size:13.5px;
  padding:9px 15px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:.18s;white-space:nowrap}
.b svg{width:15px;height:15px}
.b-pri{background:var(--accent);color:#04181f;border-color:var(--accent)}
.b-pri:hover{background:#3ddcff;box-shadow:0 4px 16px rgba(0,208,245,.3)}
.b-pri:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.b-sec{background:var(--app-elev);color:var(--app-text);border-color:var(--app-border-2)}
.b-sec:hover{border-color:var(--app-faint);background:var(--app-panel-2)}
.b-ghost{background:none;color:var(--app-dim);border-color:transparent}
.b-ghost:hover{color:var(--app-text);background:var(--app-panel-2)}
.b-sm{padding:6px 11px;font-size:12.5px;border-radius:7px}
.b-danger{color:var(--err);border-color:transparent;background:none}
.b-danger:hover{background:rgba(248,81,73,.1)}

/* status pill */
.s{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:6px;border:1px solid transparent;white-space:nowrap}
.s .d{width:6px;height:6px;border-radius:50%}
.s-run{color:var(--accent);background:rgba(0,208,245,.08);border-color:rgba(0,208,245,.22)}.s-run .d{background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 1.3s infinite}
.s-ok{color:var(--ok);background:rgba(63,185,80,.08);border-color:rgba(63,185,80,.22)}.s-ok .d{background:var(--ok)}
.s-warn{color:var(--warn);background:rgba(214,165,49,.08);border-color:rgba(214,165,49,.22)}.s-warn .d{background:var(--warn);animation:pulse 1.6s infinite}
.s-err{color:var(--err);background:rgba(248,81,73,.08);border-color:rgba(248,81,73,.22)}.s-err .d{background:var(--err)}
.s-off{color:var(--app-faint);background:var(--app-panel-2);border-color:var(--app-border)}.s-off .d{background:var(--app-faint)}
.s-hired{color:var(--purple);background:rgba(167,121,240,.08);border-color:rgba(167,121,240,.22)}.s-hired .d{background:var(--purple);box-shadow:0 0 6px var(--purple)}

/* ============ panels / cards ============ */
.panel{border:1px solid var(--app-border);border-radius:12px;background:var(--app-panel);overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--app-border)}
.panel-h h3{font-size:15px;font-family:var(--f-display);font-weight:600}
.panel-h .sub{font-size:12px;color:var(--app-faint);font-family:var(--f-mono)}
.panel-b{padding:18px}

.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr 1fr}
.cols{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
@media(max-width:1000px){.g4{grid-template-columns:1fr 1fr}.cols{grid-template-columns:1fr}}
@media(max-width:600px){.g4,.g3,.g2{grid-template-columns:1fr}}

/* metric tile */
.metric{border:1px solid var(--app-border);border-radius:11px;padding:16px 17px;background:var(--app-panel);position:relative}
.metric .ml{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--app-dim);margin-bottom:11px}
.metric .ml svg{width:14px;height:14px;color:var(--app-faint)}
.metric .mv{font-family:var(--f-display);font-weight:700;font-size:25px;letter-spacing:-.02em;line-height:1}
.metric .mv .u{font-size:13px;color:var(--app-dim);font-weight:500;margin-left:3px}
.metric .mt{font-size:11.5px;margin-top:8px;font-family:var(--f-mono);color:var(--app-faint)}
.metric .mt.up{color:var(--ok)}.metric .mt.down{color:var(--err)}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--app-faint);padding:11px 16px;border-bottom:1px solid var(--app-border);font-weight:600}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--app-border);color:var(--app-dim);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:pointer;transition:background .12s}
.tbl tbody tr:hover td{background:var(--app-panel-2)}
.tbl .nm{color:var(--app-text);font-weight:600}
.tbl .id{font-family:var(--f-mono);font-size:11.5px;color:var(--app-faint)}
.tbl .mc{font-family:var(--f-mono);font-size:12.5px;color:var(--app-text)}

/* progress */
.pbar{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;min-width:80px}
.pbar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .4s}
.pbar.ok i{background:var(--ok)}

/* meter (telemetry) */
.meter{display:flex;align-items:center;gap:10px}
.meter .bar{flex:1;height:6px;border-radius:3px;background:var(--app-elev);overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:3px;transition:width .5s}
.meter .v{font-family:var(--f-mono);font-size:12px;color:var(--app-text);min-width:48px;text-align:right}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--app-border);padding:0 18px}
.tab{padding:13px 14px;font-size:13.5px;color:var(--app-dim);cursor:pointer;border:none;background:none;font-family:inherit;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.tab:hover{color:var(--app-text)}
.tab.on{color:var(--app-text);border-bottom-color:var(--accent)}

/* code / manifest */
.codeblk{font-family:var(--f-mono);font-size:12.5px;line-height:1.7;background:#06090d;border:1px solid var(--app-border);border-radius:10px;padding:16px 18px;overflow-x:auto;color:#c9d4e0}
.codeblk .k{color:var(--accent)}.codeblk .s{color:#7fd88f}.codeblk .n{color:#e3a663}.codeblk .c{color:var(--app-faint)}.codeblk .p{color:#a779f0}
.codeblk .cp{position:absolute;top:12px;right:12px}
.codewrap{position:relative}

/* terminal logs */
.term{font-family:var(--f-mono);font-size:12px;line-height:1.65;background:#06090d;border:1px solid var(--app-border);border-radius:10px;padding:14px 16px;max-height:340px;overflow-y:auto;color:#aeb9c7}
.term .ln{display:flex;gap:10px;white-space:pre-wrap}
.term .tt{color:var(--app-faint);flex:0 0 auto}
.term .lv{flex:0 0 auto;width:42px}
.term .lv.info{color:var(--info)}.term .lv.ok{color:var(--ok)}.term .lv.warn{color:var(--warn)}.term .lv.err{color:var(--err)}
.term .msg{color:#aeb9c7}
.term .cur{display:inline-block;width:7px;height:13px;background:var(--accent);animation:blink 1s steps(2) infinite;vertical-align:middle}
@keyframes blink{50%{opacity:0}}

/* result file row */
.file{display:flex;align-items:center;gap:13px;padding:13px 16px;border:1px solid var(--app-border);border-radius:9px;background:var(--app-panel-2);margin-bottom:8px}
.file .fic{width:34px;height:34px;border-radius:8px;background:var(--app-elev);display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
.file .fic svg{width:17px;height:17px}
.file .fm{flex:1;min-width:0}
.file .fm .fn{font-size:13.5px;color:var(--app-text);font-weight:500}
.file .fm .fs{font-family:var(--f-mono);font-size:11.5px;color:var(--app-faint)}

/* key-value spec */
.kv{display:grid;grid-template-columns:140px 1fr;gap:1px;background:var(--app-border);border:1px solid var(--app-border);border-radius:10px;overflow:hidden}
.kv .k,.kv .v{background:var(--app-panel);padding:11px 15px}
.kv .k{color:var(--app-dim);font-size:13px}
.kv .v{font-family:var(--f-mono);font-size:12.5px;color:var(--app-text)}
@media(max-width:560px){.kv{grid-template-columns:1fr}.kv .k{padding-bottom:2px}.kv .v{padding-top:2px}}

/* form */
.field{margin-bottom:18px}
.field label{display:block;font-size:12.5px;color:var(--app-dim);margin-bottom:8px;font-weight:500}
.field .hint{font-weight:400;color:var(--app-faint);font-size:11.5px}
.inp,.sel,.ta{width:100%;background:var(--app-bg);border:1px solid var(--app-border-2);border-radius:8px;padding:11px 13px;color:var(--app-text);font-family:var(--f-mono);font-size:13px;transition:.15s}
.inp:focus,.sel:focus,.ta:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,208,245,.1)}
.ta{resize:vertical;min-height:78px}
.choice{display:grid;gap:9px}
.choice-c{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--app-border-2);border-radius:10px;cursor:pointer;transition:.15s;background:var(--app-panel)}
.choice-c:hover{border-color:var(--app-faint)}
.choice-c.on{border-color:var(--accent);background:rgba(0,208,245,.05);box-shadow:0 0 0 1px rgba(0,208,245,.2)}
.choice-c .ci{width:38px;height:38px;border-radius:9px;background:var(--app-elev);display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
.choice-c .ci svg{width:19px;height:19px}
.choice-c .cm{flex:1}.choice-c .cm h5{font-family:var(--f-display);font-size:14.5px;margin-bottom:3px}.choice-c .cm p{font-size:12px;color:var(--app-dim);margin:0}
.choice-c .cr{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.seg{display:flex;gap:7px;flex-wrap:wrap}
.seg button{background:var(--app-bg);border:1px solid var(--app-border-2);border-radius:8px;padding:9px 14px;color:var(--app-dim);cursor:pointer;font-family:var(--f-mono);font-size:12.5px;transition:.15s}
.seg button.on{border-color:var(--accent);color:var(--app-text);background:rgba(0,208,245,.06)}
.gauge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

/* device card */
.dev-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.dev{border:1px solid var(--app-border);border-radius:12px;background:var(--app-panel);overflow:hidden;transition:border-color .2s;cursor:pointer}
.dev:hover{border-color:var(--app-border-2)}
.dev-h{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid var(--app-border)}
.dev-h .gi{width:40px;height:40px;border-radius:9px;background:var(--app-elev);display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
.dev-h .gi svg{width:20px;height:20px}
.dev-h .dm{flex:1;min-width:0}
.dev-h .dm h4{font-size:15px;font-family:var(--f-display);font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-h .dm .dsub{font-family:var(--f-mono);font-size:11.5px;color:var(--app-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-h .s{flex:0 0 auto}
.dev-b{padding:16px 18px;display:grid;gap:12px}
.dev-b .row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px}
.dev-b .row .l{color:var(--app-dim)}

/* pairing */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.pair{grid-template-columns:1fr}}
.pair-step{display:flex;gap:14px;margin-bottom:22px}
.pair-step .pn{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--app-elev);border:1px solid var(--app-border-2);display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.pair-step .pb h4{font-family:var(--f-display);font-size:15px;margin-bottom:7px}
.pair-step .pb p{font-size:13px;color:var(--app-dim);margin-bottom:10px;line-height:1.6}
.token-box{display:flex;align-items:center;gap:10px;background:var(--app-bg);border:1px dashed var(--app-border-2);border-radius:9px;padding:11px 14px;font-family:var(--f-mono);font-size:13px}
.token-box .tk{flex:1;color:var(--accent);overflow:hidden;text-overflow:ellipsis}
.waiting{border:1px solid var(--app-border);border-radius:12px;padding:30px;text-align:center;background:var(--app-panel)}
.waiting .radar{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;border:2px solid var(--app-border-2);position:relative}
.waiting .radar::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);animation:spin 1.2s linear infinite}
.waiting .radar::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulse 1.5s infinite}

/* toast */
.toasts{position:fixed;bottom:22px;right:22px;z-index:100;display:flex;flex-direction:column;gap:9px}
.toast{background:var(--app-elev);border:1px solid var(--app-border-2);border-radius:10px;padding:12px 15px;display:flex;align-items:center;gap:11px;font-size:13.5px;box-shadow:0 14px 44px rgba(0,0,0,.55);min-width:250px;animation:tin .35s cubic-bezier(.2,.8,.2,1)}
.toast .ti{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto}
.toast .ti svg{width:13px;height:13px}
.toast.ok .ti{background:rgba(63,185,80,.16);color:var(--ok)}
.toast.info .ti{background:rgba(0,208,245,.16);color:var(--accent)}
.toast small{display:block;color:var(--app-dim);font-size:11.5px;font-family:var(--f-mono);margin-top:1px}
@keyframes tin{from{opacity:0;transform:translateX(24px)}}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(4,7,11,.7);backdrop-filter:blur(4px);z-index:60;display:grid;place-items:center;padding:20px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{width:min(720px,96vw);max-height:90vh;overflow-y:auto;background:var(--app-panel);border:1px solid var(--app-border-2);border-radius:14px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--app-border);position:sticky;top:0;background:var(--app-panel);z-index:2}
.modal-h h3{font-family:var(--f-display);font-size:17px}
.modal-x{background:none;border:none;color:var(--app-faint);cursor:pointer;font-size:20px;line-height:1;padding:4px}
.modal-x:hover{color:var(--app-text)}
.modal-b{padding:22px}
.modal-f{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--app-border);position:sticky;bottom:0;background:var(--app-panel)}

.empty{text-align:center;padding:54px 20px;color:var(--app-faint)}
.empty svg{width:40px;height:40px;margin-bottom:14px;opacity:.5}
.sectitle{font-family:var(--f-display);font-size:13px;color:var(--app-dim);margin:24px 0 12px;font-weight:600;letter-spacing:.01em}
.activity{display:grid;gap:0}
.act{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--app-border);font-size:13px}
.act:last-child{border-bottom:none}
.act .ai{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;background:var(--app-panel-2)}
.act .ai svg{width:14px;height:14px}
.act .at{flex:1;color:var(--app-dim)}.act .at b{color:var(--app-text);font-weight:600}
.act .aw{font-family:var(--f-mono);font-size:11px;color:var(--app-faint)}
.hr{height:1px;background:var(--app-border);margin:22px 0}