:root{
  /* EntBox.AI palette — blue #3446FF on deep navy #0D1232 (brand tokens) */
  --bg:#0D1232; --bg2:#10153A; --panel:#141A42; --panel2:#1C2255;
  --line:#252B5F; --line2:#343C80;
  --txt:#E8EAFF; --mut:#A5ACDB; --dim:#6C7396;
  --acc:#3446FF; --acc2:#7B8FFF; --grn:#3fb950; --red:#ef4444; --amb:#d29922;
  --rad:2px; --rad-sm:2px;
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --font-head:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
  font-synthesis:none;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none}
body{
  font-family:var(--font-body);
  background:var(--bg); color:var(--txt); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* EntBox headers — DM Sans */
h1,h2,h3,h4,.brand-name,.panel-title,.section-title,.it-title,.modal h2,.modal h3,.stat-num,.card-title{font-family:var(--font-head)}
code,pre,.mono,.key,.rental-id code,.insp-eta code{font-family:var(--font-mono)}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}

/* ============ Auth ============ */
.auth-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.auth-bg{position:absolute;inset:-30%;
  background:radial-gradient(circle at 25% 30%,rgba(52,70,255,.30),transparent 40%),
             radial-gradient(circle at 75% 70%,rgba(123,143,255,.16),transparent 42%),
             radial-gradient(circle at 60% 20%,rgba(39,53,191,.16),transparent 38%);
  filter:blur(20px);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-4%,3%) scale(1.08)}}
.auth-card{position:relative;width:400px;max-width:92vw;background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:2px;padding:38px 34px;box-shadow:var(--shadow);
  animation:rise .6s cubic-bezier(.2,.8,.2,1)}
/* EntBox logo — auth (full lockup + page-load entrance) & topbar */
.auth-logo{height:44px;width:auto;color:var(--txt);display:block;overflow:visible}
.topbar-logo{height:26px;width:auto;color:var(--txt);display:block;overflow:visible}
.hlogo .logo-text{transform:translateX(-383px)}
.hlogo .icon-frame{transform-origin:41.93px 41.93px;opacity:0}
.hlogo .icon-inner{transform-origin:41.93px 41.93px;opacity:0}
.hlogo.anim .logo-text{animation:eb-logoPan 1.4s cubic-bezier(.15,.8,.3,1) .3s forwards}
.hlogo.anim .icon-frame{animation:eb-iconSpin 1.4s cubic-bezier(.55,.05,.3,1) .3s both,eb-iconFade .55s ease-out .3s forwards}
.hlogo.anim .icon-inner{animation:eb-iconSpinR 1.4s cubic-bezier(.55,.05,.3,1) .3s both,eb-iconFade .55s ease-out .3s forwards}
@keyframes eb-logoPan{to{transform:translateX(0)}}
@keyframes eb-iconSpin{from{transform:rotate(180deg)}to{transform:rotate(0)}}
@keyframes eb-iconSpinR{from{transform:rotate(-180deg)}to{transform:rotate(0)}}
@keyframes eb-iconFade{to{opacity:1}}
.entbox-logo-spin .icon-frame,.entbox-logo-spin .icon-inner{transform-origin:41.93px 41.93px}
.entbox-logo-spin:hover .icon-frame{animation:eb-iconSpin .6s cubic-bezier(0,0,.3,1)}
.entbox-logo-spin:hover .icon-inner{animation:eb-iconSpinR .6s cubic-bezier(0,0,.3,1)}
@media (prefers-reduced-motion:reduce){
  .hlogo .logo-text{transform:none}
  .hlogo .icon-frame,.hlogo .icon-inner{opacity:1}
  .hlogo.anim .logo-text,.hlogo.anim .icon-frame,.hlogo.anim .icon-inner,
  .entbox-logo-spin:hover .icon-frame,.entbox-logo-spin:hover .icon-inner{animation:none}
}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:2px;font-size:21px;
  background:linear-gradient(135deg,var(--acc),var(--grn));color:#fff;box-shadow:0 6px 18px rgba(52,70,255,.5);
  animation:pulseMark 3s ease-in-out infinite}
@keyframes pulseMark{50%{box-shadow:0 6px 28px rgba(52,70,255,.85)}}
.brand-name{font-size:25px;font-weight:800;letter-spacing:-.5px}
.brand-name span{background:linear-gradient(90deg,var(--acc2),var(--grn));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand.small .brand-mark{width:30px;height:30px;font-size:16px;border-radius:2px}
.brand.small .brand-name{font-size:19px}
.brand-tag{color:var(--mut);margin:14px 0 22px;font-size:14px}
.auth-tabs{display:flex;background:var(--bg);border-radius:2px;padding:4px;margin-bottom:20px;border:1px solid var(--line)}
.auth-tab{flex:1;padding:9px;border-radius:2px;color:var(--mut);font-weight:600;font-size:13.5px;transition:.25s}
.auth-tab.active{background:var(--panel2);color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.field{margin-bottom:14px;transition:.3s}
.field label{display:block;font-size:12px;color:var(--mut);margin-bottom:6px;font-weight:600}
.field input{width:100%;padding:11px 13px;background:var(--bg);border:1px solid var(--line);border-radius:2px;
  color:var(--txt);font-size:14px;transition:.2s}
.field input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(52,70,255,.18)}
.signup-only{max-height:0;overflow:hidden;margin:0;opacity:0}
.mode-signup .signup-only{max-height:80px;margin-bottom:14px;opacity:1}
.btn-primary{width:100%;padding:12px;border-radius:2px;font-weight:700;font-size:14.5px;color:#fff;
  background:linear-gradient(135deg,var(--acc),#2735BF);box-shadow:0 8px 22px rgba(52,70,255,.4);transition:.2s;margin-top:4px}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(52,70,255,.55)}
.btn-primary:active{transform:translateY(2px);transition:all .08s}
.auth-error{color:var(--red);font-size:13px;margin-top:10px;min-height:18px;text-align:center}
.auth-hint{color:var(--dim);font-size:12.5px;text-align:center;margin-top:18px}
.auth-hint strong{color:var(--grn)}

/* ============ App shell ============ */
.app{height:100%;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:58px;display:flex;align-items:center;gap:20px;padding:0 18px;background:var(--bg2);border-bottom:1px solid var(--line);z-index:30}
.tabs{display:flex;gap:6px;margin-left:8px}
.tab{padding:8px 15px;border-radius:2px;color:var(--mut);font-weight:600;font-size:13.5px;transition:.2s}
.tab:hover{color:var(--txt);background:var(--panel)}
.tab.active{color:var(--txt);background:var(--panel2)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.balance{font-weight:800;font-size:15px;color:var(--grn);background:rgba(34,197,94,.1);padding:7px 13px;border-radius:2px;border:1px solid rgba(34,197,94,.25)}
.user-chip{display:flex;align-items:center;gap:9px}
.avatar{width:32px;height:32px;border-radius:var(--rad-sm);display:grid;place-items:center;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--acc),var(--acc2))}
.user-meta{line-height:1.2}
.user-name{font-size:13px;font-weight:600}
.user-tenant{font-size:11px;color:var(--mut)}
/* tenant inbox / notifications */
.notif-wrap{position:relative}
#notif-bell{position:relative}
.notif-badge{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;border-radius:2px;
  font-size:10px;font-weight:700;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 4px}
.notif-badge.hidden{display:none}
.notif-panel{position:absolute;top:44px;right:0;width:330px;max-height:66vh;overflow:auto;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--rad-sm);box-shadow:var(--shadow)}
.notif-panel.hidden{display:none}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.notif-item{padding:11px 13px;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.notif-item.unread{background:var(--panel2);border-left-color:var(--acc);cursor:pointer}
.notif-item.lvl-warning.unread{border-left-color:var(--amb)}
.notif-item.lvl-success.unread{border-left-color:var(--grn)}
.notif-title{font-weight:600;font-size:13px;color:var(--txt)}
.notif-body{font-size:12px;color:var(--mut);margin-top:3px;white-space:pre-wrap}
.notif-time{font-size:11px;color:var(--dim);margin-top:5px}
.notif-empty{padding:26px 13px;text-align:center;color:var(--mut);font-size:13px}
.icon-btn{width:34px;height:34px;border-radius:2px;color:var(--mut);font-size:16px;transition:.2s}
.icon-btn:hover{background:var(--panel);color:var(--txt)}
.icon-btn.sm{width:26px;height:26px;font-size:13px}

.view{flex:1;display:none;overflow:hidden}
.view.active{display:flex}

/* ============ Palette ============ */
.palette{width:252px;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column}
.palette-head{padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.wf-name-wrap{display:flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad-sm);padding:0 10px;transition:.15s;cursor:text}
.wf-name-wrap:hover{border-color:var(--line2);background:var(--panel)}
.wf-name-wrap:focus-within{border-color:var(--acc);background:var(--panel);box-shadow:0 0 0 3px rgba(52,70,255,.18)}
.wf-name-pencil{font-size:12px;opacity:.5;flex:none;transition:.15s}
.wf-name-wrap:hover .wf-name-pencil,.wf-name-wrap:focus-within .wf-name-pencil{opacity:.9}
.wf-name{flex:1;min-width:0;background:transparent;border:none;color:var(--txt);font-size:15px;font-weight:700;padding:8px 0;transition:.2s}
.wf-name:focus{outline:none}
.wf-name::placeholder{color:var(--dim);font-weight:500}
.palette-sub{color:var(--dim);font-size:11.5px;margin-top:4px}
.palette-list{flex:1;overflow-y:auto;padding:12px}
.pal-cat{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);margin:14px 4px 7px;font-weight:700}
.pal-cat:first-child{margin-top:2px}
.pal-node{display:flex;align-items:center;gap:11px;padding:10px 11px;background:transparent;border:1px solid rgba(52,70,255,.22);
  border-radius:2px;margin-bottom:8px;cursor:grab;transition:border-color .25s,box-shadow .25s,transform .18s,background .25s;position:relative;overflow:hidden}
.pal-node:hover{border-color:var(--acc);transform:translateX(3px);background:rgba(52,70,255,.06);
  box-shadow:0 0 0 1px rgba(52,70,255,.3),0 0 18px rgba(52,70,255,.14)}
.pal-node:active{cursor:grabbing}
.pal-ico{width:30px;height:30px;border-radius:2px;display:grid;place-items:center;font-size:15px;color:#fff;flex-shrink:0}
.pal-info{min-width:0}
.pal-title{font-size:13px;font-weight:600}
.pal-desc{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette-foot{padding:12px;border-top:1px solid var(--line)}
.wf-load{width:100%;padding:9px;background:var(--panel);border:1px solid var(--line);border-radius:2px;color:var(--txt);font-size:12.5px;margin-bottom:9px}
.palette-actions{display:flex;gap:8px}
.btn-ghost{flex:1;padding:9px;background:var(--panel);border:1px solid var(--line);border-radius:2px;color:var(--mut);font-weight:600;font-size:12.5px;transition:.2s}
.btn-ghost:hover{color:var(--txt);border-color:var(--line2);background:var(--panel2)}

/* ============ Canvas ============ */
.canvas-wrap{flex:1;position:relative;overflow:hidden;cursor:grab;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'><path d='M30 0 L60 17 L60 52 L30 69 L0 52 L0 17 Z M30 0 L30 35 M30 35 L60 52 M30 35 L0 52 M30 69 L30 104 M60 87 L60 52 M60 87 L30 104 M0 87 L0 52 M0 87 L30 104' fill='none' stroke='%233446FF' stroke-opacity='0.06' stroke-width='1'/></svg>") 0 0/60px 104px,
    var(--bg)}
.canvas-wrap.panning{cursor:grabbing}
.canvas-wrap.panning .nodes,.canvas-wrap.panning .wires{transition:none}
.zoom-ctrl{position:absolute;right:18px;bottom:18px;z-index:7;display:flex;align-items:center;gap:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.zoom-ctrl button{width:32px;height:32px;border-radius:2px;color:var(--txt);font-size:17px;font-weight:600;transition:.14s;display:grid;place-items:center}
.zoom-ctrl button:hover{background:var(--panel2)}
.zoom-ctrl .zoom-level-btn{width:auto;padding:0 9px;font-size:12px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.zoom-ctrl .zoom-fit{width:auto;padding:0 12px;font-size:12px;font-weight:700;color:var(--acc2);border-left:1px solid var(--line);margin-left:2px;border-radius:0 8px 8px 0}
.canvas-tools{position:absolute;left:18px;bottom:18px;z-index:7;display:flex;gap:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.canvas-tools .ctool{height:32px;padding:0 12px;border-radius:2px;color:var(--mut);font-size:12px;font-weight:700;transition:.14s}
.canvas-tools .ctool:hover{background:var(--panel2);color:var(--txt)}
.canvas-tools .ctool.active{background:rgba(52,70,255,.18);color:var(--acc2)}
.canvas-hint{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--dim);font-size:18px;font-weight:600;text-align:center;pointer-events:none;transition:.4s}
.canvas-hint span{font-size:13px;color:#3a3f60;font-weight:500}
.canvas-hint.gone{opacity:0;pointer-events:none}
.canvas-hint.gone .template-cards,.canvas-hint.gone .ai-build,.canvas-hint.gone .ai-chip{pointer-events:none}
.ch-title{font-size:26px;font-weight:800;color:var(--txt);letter-spacing:-.5px}
.ch-sub{font-size:14px;color:var(--mut);font-weight:500;margin:8px 0 26px}
.template-cards{display:flex;gap:16px;pointer-events:auto}
.tcard{width:230px;text-align:left;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:2px;padding:18px;cursor:pointer;transition:.2s;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.tcard:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.tcard-ico{width:40px;height:40px;border-radius:2px;display:grid;place-items:center;font-size:20px;color:#fff;margin-bottom:14px}
.tcard-name{font-size:15px;font-weight:700;margin-bottom:7px;color:var(--txt)}
.tcard-desc{font-size:12px;color:var(--mut);line-height:1.5;font-weight:400}
.tcard-go{margin-top:14px;font-size:12px;font-weight:700;color:var(--acc2)}

/* ============ AI workflow builder ============ */
.ai-build{pointer-events:auto;width:660px;max-width:88vw;margin:0 auto 30px;
  background:linear-gradient(180deg,rgba(52,70,255,.12),rgba(52,70,255,.03));
  border:1px solid rgba(52,70,255,.4);border-radius:2px;padding:18px;box-shadow:0 10px 34px rgba(52,70,255,.14)}
.ai-build-row{display:flex;gap:10px}
.ai-input{flex:1;padding:13px 16px;background:var(--bg);border:1px solid var(--line2);border-radius:2px;color:var(--txt);font-size:14px;font-weight:500}
.ai-input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(52,70,255,.18)}
.ai-go{padding:0 22px;border-radius:2px;background:linear-gradient(135deg,var(--acc),#8b5cf6);color:#fff;font-weight:700;font-size:14px;white-space:nowrap;transition:.18s}
.ai-go:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(52,70,255,.45)}
.ai-go:disabled{opacity:.7;cursor:wait;transform:none}
.ai-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;justify-content:center}
.ai-chip{font-size:11.5px;color:var(--mut);background:var(--panel2);border:1px solid var(--line);border-radius:2px;padding:6px 13px;transition:.15s;text-align:left}
.ai-chip:hover{color:var(--txt);border-color:var(--acc);background:var(--panel)}
.ai-actions{display:flex;gap:8px;margin-top:12px}
.ai-build-btn{flex:1;padding:11px;border-radius:2px;font-weight:700;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--acc),#8b5cf6);transition:.18s;box-shadow:0 6px 18px rgba(52,70,255,.3)}
.ai-build-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(52,70,255,.5)}
.ai-explain-btn{padding:11px 14px;border-radius:2px;font-weight:700;font-size:13px;color:var(--txt);
  background:var(--panel2);border:1px solid var(--line2);transition:.18s;white-space:nowrap}
.ai-explain-btn:hover{border-color:var(--acc);color:var(--acc2)}
.explain-body{font-size:14px;line-height:1.75;color:var(--txt);max-height:52vh;overflow-y:auto;margin:8px 0 20px}
.explain-loading{display:flex;align-items:center;gap:11px;color:var(--mut);font-size:13.5px}
.ai-spinner.sm{width:18px;height:18px;border-width:2px}
.ai-modal-input{width:100%;padding:13px 15px;background:var(--bg);border:1px solid var(--line);border-radius:2px;color:var(--txt);font-size:14px;line-height:1.5;font-family:inherit;resize:vertical;min-height:88px;margin-bottom:14px}
.ai-modal-input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(52,70,255,.18)}
#ai-modal-examples{justify-content:flex-start;margin:0 0 20px}
.ai-overlay{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(10,11,20,.72);backdrop-filter:blur(3px);animation:fadeIn .2s}
.ai-spinner{width:46px;height:46px;border-radius:50%;border:3px solid rgba(52,70,255,.25);border-top-color:var(--acc);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-over-text{font-size:17px;font-weight:700;color:var(--txt)}
.ai-over-sub{font-size:13px;color:var(--mut)}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;transform-origin:0 0;overflow:visible}
.wires path{fill:none;stroke:url(#wireGrad);stroke-width:2.5;opacity:.85;filter:drop-shadow(0 1px 3px rgba(52,70,255,.4))}
.wires path.tmp{stroke-dasharray:6 5;opacity:.6;animation:dash .5s linear infinite}
/* clickable + deletable connection wires */
.wires path.wire-hit{stroke:transparent;stroke-width:18;opacity:1;filter:none;pointer-events:stroke;cursor:pointer}
.wires path.wire.sel{stroke:#f43f5e;stroke-width:3.4;opacity:1;filter:drop-shadow(0 1px 5px rgba(244,63,94,.55))}
.wire-del{pointer-events:auto;cursor:pointer}
.wire-del .wd-bg{fill:#f43f5e;stroke:#fff;stroke-width:1.5}
.wire-del:hover .wd-bg{fill:#e11d48}
.wire-del .wd-x{stroke:#fff;stroke-width:2;stroke-linecap:round;fill:none}
@keyframes dash{to{stroke-dashoffset:-11}}
.nodes{position:absolute;inset:0;z-index:2;transform-origin:0 0;pointer-events:none}   /* container click-through; nodes opt back in below → lets wire clicks reach .wires */

.node{position:absolute;width:210px;pointer-events:auto;touch-action:none;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.45);
  user-select:none;transition:box-shadow .2s,border-color .2s,transform .08s;animation:nodeIn .3s cubic-bezier(.2,.9,.3,1)}
@keyframes nodeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.node.selected{border-color:var(--acc);box-shadow:0 0 0 2px rgba(52,70,255,.4),0 14px 38px rgba(0,0,0,.55)}
.node-head{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:grab;border-bottom:1px solid var(--line);border-radius:2px 2px 0 0}
.node-head:active{cursor:grabbing}
.node-ico{width:26px;height:26px;border-radius:2px;display:grid;place-items:center;font-size:14px;color:#fff;flex-shrink:0}
.node-title{font-size:13px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-del{opacity:0;color:var(--dim);font-size:13px;width:20px;height:20px;border-radius:2px;transition:.15s}
.node:hover .node-del{opacity:1}
.node-del:hover{background:rgba(239,68,68,.18);color:var(--red)}
.node-body{padding:9px 12px 11px;font-size:11.5px;color:var(--mut);min-height:14px}
.node-state{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--dim);transition:.3s}
.node-state.running{background:var(--amb);box-shadow:0 0 0 0 rgba(245,158,11,.6);animation:ping 1s infinite}
.node-state.done{background:var(--grn)}
.node-state.error{background:var(--red)}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(245,158,11,0)}100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}}
.node.running{border-color:var(--amb);box-shadow:0 0 0 2px rgba(245,158,11,.3),0 14px 38px rgba(0,0,0,.5)}
.node.done{border-color:rgba(34,197,94,.5)}

.port{position:absolute;width:14px;height:14px;border-radius:50%;touch-action:none;background:var(--panel);border:2px solid var(--line2);
  cursor:crosshair;transition:.15s;z-index:3}
.port:hover{border-color:var(--acc2);background:var(--acc);transform:scale(1.3)}
.port.in{left:-8px}
.port.out{right:-8px}
.port.connected{background:var(--acc);border-color:var(--acc2)}
.port-label{position:absolute;right:14px;font-size:9px;font-weight:700;color:var(--mut);pointer-events:none;text-transform:uppercase;letter-spacing:.3px}
.node-state.skipped{background:var(--dim)}
.node.skipped{opacity:.45}
.node-state.awaiting{background:#f43f5e;box-shadow:0 0 9px #f43f5e;animation:livePulse 1s infinite}
.node.awaiting{border-color:#f43f5e;box-shadow:0 0 0 1px #f43f5e,0 8px 26px rgba(244,63,94,.3)}
.ap-hint{font-size:12px;color:var(--mut);margin:-6px 0 18px}
#hook-url{cursor:pointer;margin-bottom:12px}
.hook-curl{background:#070811;border:1px solid var(--line);border-radius:2px;padding:13px 15px;font-family:'SF Mono',ui-monospace,monospace;font-size:12px;color:#d7dcf5;white-space:pre-wrap;margin-bottom:18px;line-height:1.6}
.run-badge.skipped{background:rgba(139,144,181,.2);color:var(--mut)}

/* ============ Run bar ============ */
.runbar{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:10;
  display:flex;align-items:center;gap:14px;background:rgba(20,23,41,.92);backdrop-filter:blur(12px);
  border:1px solid var(--line2);border-radius:2px;padding:10px 14px;box-shadow:var(--shadow)}
.btn-run{display:flex;align-items:center;gap:8px;padding:11px 22px;border-radius:2px;font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--grn),#16a34a);box-shadow:0 8px 22px rgba(34,197,94,.4);transition:.2s}
.btn-run:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(34,197,94,.55)}
.btn-run:disabled{opacity:.6;cursor:wait;transform:none}
.btn-run.stopping{background:linear-gradient(135deg,var(--red),#b91c1c);box-shadow:0 8px 22px rgba(239,68,68,.4)}
.btn-run.stopping:hover{box-shadow:0 12px 28px rgba(239,68,68,.55)}
.run-badge.cancelled{background:rgba(139,144,181,.2);color:var(--mut)}
.run-ico{font-size:11px}
.run-status{font-size:13px;color:var(--mut);min-width:0;white-space:nowrap;cursor:pointer}
.run-status:hover{color:var(--txt);text-decoration:underline}
.run-cost{font-size:14px;font-weight:700;color:var(--grn)}
.run-est{font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap}
.run-est.over{color:var(--red)}
.budget-panel{max-width:900px;margin-top:18px}
.budget-status{margin-bottom:16px}
.bud-line{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:8px}
.bud-line.alert{color:var(--amber,#f59e0b)}.bud-line.blocked{color:var(--red)}
.bud-track{height:9px;background:var(--bg);border-radius:2px;overflow:hidden}
.bud-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--grn));border-radius:2px;transition:width .5s}
.bud-fill.alert{background:linear-gradient(90deg,var(--acc),#f59e0b)}
.bud-fill.blocked{background:linear-gradient(90deg,#f59e0b,var(--red))}
/* Plan & usage panel */
.quota-head{margin-bottom:14px}
.plan-badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 12px;border-radius:2px;text-transform:capitalize;letter-spacing:.3px;background:var(--bg);color:var(--txt);border:1px solid var(--bord,#2a2a3a)}
.plan-badge.pro{background:linear-gradient(90deg,var(--acc),var(--grn));color:#fff;border:none}
.plan-badge.scale{background:linear-gradient(90deg,#8b5cf6,var(--acc));color:#fff;border:none}
.quota-metrics{display:flex;gap:14px;margin-bottom:16px}
.qm{flex:1;background:var(--bg);border-radius:2px;padding:12px 10px;text-align:center}
.qm b{display:block;font-size:22px;font-weight:700;color:var(--txt);line-height:1.1}
.qm span{font-size:11px;color:var(--mut)}
.quota-rate{margin-bottom:14px}
.qr-label{font-size:12.5px;color:var(--mut);margin-bottom:8px}.qr-label b{color:var(--txt)}
.plan-tiers{display:flex;gap:8px;flex-wrap:wrap}
.plan-chip{font-size:11px;color:var(--mut);background:var(--bg);border:1px solid var(--bord,#2a2a3a);border-radius:2px;padding:4px 10px}
.plan-chip.active{color:var(--txt);border-color:var(--acc);font-weight:600}
.budget-form{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.bf-field{flex:1;min-width:150px}
.bf-field label{display:block;font-size:11.5px;font-weight:600;color:var(--mut);margin-bottom:8px}
.bf-field label b{color:var(--acc2)}
.bf-field input[type=number]{width:100%;padding:9px 11px;background:var(--bg);border:1px solid var(--line);border-radius:2px;color:var(--txt);font-size:13px}
.bf-field input[type=range]{width:100%;accent-color:var(--acc)}
.budget-form #bud-save{padding:9px 16px;border-radius:2px;font-size:12.5px;font-weight:700}

/* ============ Inspector ============ */
.inspector{width:312px;background:var(--bg2);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.insp-tabs{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--line);flex:0 0 auto}
.itab{flex:1;padding:7px 6px;border-radius:2px;font-size:12px;font-weight:600;cursor:pointer;background:transparent;border:1px solid transparent;color:var(--mut);transition:background .12s,color .12s}
.itab:hover{color:var(--txt)}
.itab.active{background:var(--bg);border-color:var(--line);color:var(--txt)}
.inspector-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--dim);text-align:center;padding:30px}
.insp-ico{font-size:40px;margin-bottom:14px;opacity:.4}
.inspector-empty p{font-size:13px;line-height:1.6}
.inspector-body{flex:1;overflow-y:auto;padding:18px}
.insp-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.insp-head .node-ico{width:34px;height:34px;font-size:17px;border-radius:2px}
.insp-titles .it-title{font-size:15px;font-weight:700}
.insp-titles .it-type{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.insp-desc{font-size:12.5px;color:var(--mut);line-height:1.5;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.insp-field{margin-bottom:16px}
.insp-field label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin-bottom:7px}
.insp-field input,.insp-field select,.insp-field textarea{width:100%;padding:9px 11px;background:var(--bg);border:1px solid var(--line);
  border-radius:2px;color:var(--txt);font-size:13px;transition:.2s}
.insp-field textarea{resize:vertical;min-height:80px;line-height:1.5;font-family:inherit}
.insp-field input:focus,.insp-field select:focus,.insp-field textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(52,70,255,.15)}
.insp-cost{margin-top:6px;font-size:11.5px;color:var(--dim)}
.insp-policy{margin-top:8px;padding-top:16px;border-top:1px dashed var(--line2)}
.insp-policy-h{font-size:11.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px}
.node-policy{font-size:10px;font-weight:700;color:var(--amber,#f59e0b);background:rgba(245,158,11,.15);padding:2px 6px;border-radius:2px;margin-right:4px;white-space:nowrap}

.run-output{flex:1;display:flex;flex-direction:column;border-top:1px solid var(--line);min-height:0}
.ro-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-weight:700;font-size:13px;border-bottom:1px solid var(--line)}
.ro-logs{padding:10px 16px;font-family:'SF Mono',ui-monospace,monospace;font-size:11px;color:var(--mut);max-height:180px;overflow-y:auto;border-bottom:1px solid var(--line)}
.ro-logs .log{padding:2px 0;animation:logIn .25s}
@keyframes logIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1}}
.ro-logs .log b{color:var(--acc2)}
.ro-result{flex:1;overflow-y:auto;padding:14px 16px}
.ro-card{background:transparent;border:1px solid rgba(52,70,255,.28);border-radius:2px;padding:11px;margin-bottom:10px;transition:border-color .3s,box-shadow .3s}
.ro-card:hover{border-color:var(--acc);box-shadow:0 0 0 1px rgba(52,70,255,.3),0 0 22px rgba(52,70,255,.15)}
.ro-card .roc-h{font-size:11px;color:var(--mut);margin-bottom:6px;font-weight:600}
.ro-card.streaming{border-color:rgba(52,70,255,.5)}
.stream-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc2);box-shadow:0 0 7px var(--acc2);animation:livePulse 1s infinite;margin-left:5px;vertical-align:middle}
.caret{display:inline-block;width:7px;height:13px;background:var(--acc2);margin-left:1px;vertical-align:text-bottom;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.ro-card pre{font-family:'SF Mono',ui-monospace,monospace;font-size:11.5px;color:var(--txt);white-space:pre-wrap;word-break:break-word;line-height:1.5;max-height:200px;overflow:auto}

/* ============ Billing ============ */
.billing{padding:28px;overflow-y:auto;flex-direction:column}
.billing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px;max-width:900px}
.stat-card{background:transparent;border:1px solid rgba(52,70,255,.28);border-radius:var(--rad);padding:22px;transition:border-color .3s,box-shadow .3s}
.stat-card:hover{border-color:var(--acc);box-shadow:0 0 0 1px rgba(52,70,255,.3),0 0 24px rgba(52,70,255,.15)}
.stat-card.glow{border-color:rgba(52,70,255,.5);box-shadow:0 0 30px rgba(52,70,255,.14)}
.stat-label{font-size:12.5px;color:var(--mut);margin-bottom:10px}
.stat-val{font-size:30px;font-weight:800;letter-spacing:-1px}
.stat-card.glow .stat-val{color:var(--grn)}
.billing-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:20px}
.panel h3{font-size:14px;margin-bottom:16px}
.bars .bar-row{margin-bottom:14px}
.bar-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
.bar-top .amt{font-weight:700;color:var(--grn)}
.bar-track{height:8px;background:var(--bg);border-radius:2px;overflow:hidden}
.bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--acc),var(--grn));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.run-list .run-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.run-list .run-row:last-child{border:none}
.rate-panel{max-width:900px;margin-top:18px}
.quota-panel{max-width:900px;margin-top:18px}   /* Plan & usage — match the other billing panels' width (was full-width) */
.rate-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.rate-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}
.rate-row.storage{grid-column:1/-1;border-top:1px solid var(--line2);margin-top:4px}
.rate-name{font-size:13px;color:var(--txt)}
.rate-price{font-size:15px;font-weight:700;color:var(--grn);font-family:'SF Mono',ui-monospace,monospace}
.rate-price small{color:var(--mut);font-weight:500;font-size:11px}
.run-badge{font-size:10.5px;padding:3px 8px;border-radius:2px;font-weight:700}
.run-badge.completed{background:rgba(34,197,94,.15);color:var(--grn)}
.run-badge.running,.run-badge.queued{background:rgba(245,158,11,.15);color:var(--amb)}
.empty-note{color:var(--dim);font-size:13px;text-align:center;padding:20px}

/* ============ Toast ============ */
/* ============ Team view ============ */
.team{padding:28px;overflow-y:auto;flex-direction:column}
.team-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:980px}
.panel-sub{font-size:12px;color:var(--mut);margin:-8px 0 16px}
.panel-sub code{background:var(--bg);padding:2px 6px;border-radius:2px;font-size:11px;color:var(--acc2)}
.members-list .member{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.members-list .member:last-child{border:none}
.m-avatar{width:34px;height:34px;border-radius:2px;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--acc),var(--grn))}
.m-meta{flex:1;min-width:0}.m-name{font-size:13.5px;font-weight:600}.m-email{font-size:11.5px;color:var(--mut)}
.m-role{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:2px;background:var(--panel2);color:var(--mut)}
.m-role.Owner{background:rgba(52,70,255,.18);color:var(--acc2)}
.invite-form,.key-form{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.invite-form input,.key-form input{flex:1;min-width:120px;padding:9px 11px;background:var(--bg);border:1px solid var(--line);border-radius:2px;color:var(--txt);font-size:12.5px}
.invite-form input:focus,.key-form input:focus{outline:none;border-color:var(--acc)}
.keys-list .key-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.keys-list .key-row:last-child{border:none}
.key-mask{font-family:'SF Mono',ui-monospace,monospace;font-size:12px;color:var(--txt);background:var(--bg);padding:5px 9px;border-radius:2px}
.key-info{flex:1;min-width:0}.key-name{font-size:13px;font-weight:600}.key-sub{font-size:11px;color:var(--mut)}
.key-revoke{color:var(--dim);font-size:12px;padding:5px 10px;border-radius:2px;border:1px solid var(--line);transition:.15s}
.key-revoke:hover{color:var(--red);border-color:var(--red)}
.new-key{margin-top:14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.4);border-radius:2px;padding:13px;animation:rise .3s}
.nk-label{font-size:11.5px;color:var(--grn);margin-bottom:7px;font-weight:600}
.nk-val{font-family:'SF Mono',ui-monospace,monospace;font-size:12.5px;color:var(--txt);word-break:break-all;background:var(--bg);padding:9px 11px;border-radius:2px;cursor:pointer}
.btn-topup{margin-top:14px;padding:8px 14px;border-radius:2px;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4);color:var(--grn);font-weight:700;font-size:12.5px;transition:.18s}
.btn-topup:hover{background:rgba(34,197,94,.25);transform:translateY(-1px)}
.docs-link{display:inline-block;margin-top:18px;color:var(--acc2);font-size:13px;font-weight:600;text-decoration:none}
.docs-link:hover{text-decoration:underline}
.sched-panel{max-width:1000px;margin-top:18px}
.sched-list .sched-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.sched-list .sched-row:last-child{border:none}
.sched-ico{width:32px;height:32px;border-radius:2px;display:grid;place-items:center;background:rgba(52,70,255,.15);color:var(--acc2);font-size:15px}
.sched-meta{flex:1;min-width:0}.sched-name{font-size:13.5px;font-weight:600}.sched-sub{font-size:11.5px;color:var(--mut)}
.sched-del{color:var(--dim);font-size:12px;padding:5px 10px;border-radius:2px;border:1px solid var(--line);transition:.15s}
.sched-del:hover{color:var(--red);border-color:var(--red)}
.sched-form{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.sched-form select{flex:1;min-width:150px;padding:9px 11px;background:var(--bg);border:1px solid var(--line);border-radius:2px;color:var(--txt);font-size:12.5px}
.sched-form select:focus{outline:none;border-color:var(--acc)}

/* ============ Analytics ============ */
.analytics{padding:28px;overflow-y:auto;flex-direction:column}
.an-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin-bottom:18px}
.analytics .panel{max-width:1000px;margin-bottom:18px}
.an-chart{display:flex;align-items:flex-end;gap:8px;height:200px;padding:10px 0 0}
.an-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}
.an-bars{flex:1;display:flex;align-items:flex-end;gap:3px;width:100%;justify-content:center}
.an-bar{width:30%;min-height:2px;border-radius:2px 2px 0 0;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.an-bar.runs{background:linear-gradient(180deg,var(--acc2),var(--acc))}
.an-bar.cost{background:linear-gradient(180deg,#34d399,var(--grn))}
.an-col:hover .an-bar{filter:brightness(1.2)}
.an-x{font-size:10px;color:var(--dim);white-space:nowrap}
.an-legend{display:flex;gap:18px;margin-top:14px;font-size:12px;color:var(--mut)}
.lg-runs{color:var(--acc2)}.lg-cost{color:var(--grn)}
.an-bytype .bt-row{display:flex;align-items:center;gap:14px;padding:9px 0}
.bt-name{width:110px;font-size:13px;font-weight:600;text-transform:capitalize}
.bt-track{flex:1;height:9px;background:var(--bg);border-radius:2px;overflow:hidden}
.bt-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--grn));border-radius:2px;transition:width .6s}
.bt-val{font-size:11.5px;color:var(--mut);font-family:'SF Mono',ui-monospace,monospace;white-space:nowrap}

/* ============ Data buckets ============ */
.data{padding:28px;overflow-y:auto;flex-direction:column}
.data .an-cards{margin-bottom:18px;max-width:1040px}   /* match .data-layout width so the top cards align with the columns below */
.data-layout{display:grid;grid-template-columns:340px 1fr;gap:18px;max-width:1040px}
.buckets-list .bucket-row{display:flex;align-items:center;gap:11px;padding:11px;border:1px solid transparent;border-radius:2px;cursor:pointer;transition:.14s}
.buckets-list .bucket-row:hover{background:var(--panel2)}
.buckets-list .bucket-row.sel{background:var(--panel2);border-color:var(--acc)}
.bucket-ico{width:34px;height:34px;border-radius:2px;display:grid;place-items:center;font-size:16px;color:#fff;background:linear-gradient(135deg,#0ea5e9,#0891b2)}
.bucket-meta{flex:1;min-width:0}.bucket-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bucket-sub{font-size:11.5px;color:var(--mut)}
.bucket-del{opacity:0;color:var(--dim);width:24px;height:24px;border-radius:2px;transition:.14s}
.bucket-row:hover .bucket-del{opacity:1}.bucket-del:hover{color:var(--red);background:var(--bg)}
.bucket-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bucket-form input{flex:1 1 100%;min-width:0;padding:9px 11px;background:var(--bg);border:1px solid var(--line);border-radius:2px;color:var(--txt);font-size:12.5px}
.bucket-form select{flex:1;min-width:0}     /* dropdown + Create share row 2; min-width:0 lets them fit the narrow column */
.bucket-form #btn-create-bucket{flex:0 0 auto;white-space:nowrap}
.bucket-form input:focus{outline:none;border-color:var(--acc)}
.dropzone{border:2px dashed var(--line2);border-radius:2px;padding:26px;text-align:center;transition:.18s;margin-bottom:16px}
.dropzone.drag{border-color:var(--acc);background:rgba(52,70,255,.08)}
.dz-icon{font-size:26px;color:var(--mut);margin-bottom:8px}
.dz-text{font-size:14px;font-weight:600;color:var(--txt)}
.dz-browse{color:var(--acc2);font-weight:700;text-decoration:underline}
.dz-hint{font-size:11.5px;color:var(--mut);margin-top:8px}
.files-list .file-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.files-list .file-row:last-child{border:none}
.file-ico{font-size:18px}
.file-meta{flex:1;min-width:0}.file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-sub{font-size:11px;color:var(--mut)}
.file-del,.file-prev{color:var(--dim);font-size:12px;padding:5px 10px;border-radius:2px;border:1px solid var(--line);transition:.14s}
.file-del:hover{color:var(--red);border-color:var(--red)}
.file-prev:hover{color:var(--acc2);border-color:var(--acc)}
.chunk-body{max-height:55vh;overflow-y:auto;margin:8px 0 18px}
.chunk{margin-bottom:12px}
.chunk-n{font-size:10.5px;font-weight:700;color:var(--acc2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.chunk pre{background:#070811;border:1px solid var(--line);border-radius:2px;padding:11px 13px;font-size:12px;line-height:1.55;color:#d7dcf5;white-space:pre-wrap;word-break:break-word}
.bucket-settings{background:var(--panel2);border:1px solid var(--line);border-radius:2px;padding:14px 16px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:16px 22px;align-items:flex-end}
.bs-row{flex:1;min-width:170px}
.bs-row label{display:block;font-size:11.5px;font-weight:600;color:var(--mut);margin-bottom:8px}
.bs-row label b{color:var(--acc2)}
.bs-row input[type=range]{width:100%;accent-color:var(--acc)}
.bucket-settings #bs-save{padding:8px 14px;border-radius:2px;font-size:12px;font-weight:700}

/* ============ Version history ============ */
.history-list{max-height:340px;overflow-y:auto;margin:14px 0}
.hist-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.hist-row:last-child{border:none}
.hist-v{font-family:'SF Mono',ui-monospace,monospace;font-size:12px;font-weight:700;color:var(--acc2);background:var(--bg);padding:4px 9px;border-radius:2px}
.hist-meta{flex:1;min-width:0}.hist-name{font-size:13.5px;font-weight:600}.hist-sub{font-size:11.5px;color:var(--mut)}
.hist-restore{padding:6px 13px;border-radius:2px;background:var(--panel2);border:1px solid var(--line2);color:var(--txt);font-size:12px;font-weight:600;transition:.15s}
.hist-restore:hover{background:var(--acc);border-color:var(--acc)}

/* ============ Modal ============ */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:420px;max-width:92vw;background:linear-gradient(180deg,var(--bg2),var(--bg));border:1px solid rgba(52,70,255,.4);border-radius:2px;padding:26px;box-shadow:var(--shadow);animation:rise .3s}
.modal h3{font-size:18px;margin-bottom:6px}
.topup-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.topup-opt{padding:14px;border:1px solid var(--line);border-radius:2px;text-align:center;font-weight:700;font-size:16px;cursor:pointer;transition:.18s}
.topup-opt:hover{border-color:var(--line2);background:var(--panel2)}
.topup-opt.sel{border-color:var(--grn);background:rgba(34,197,94,.12);color:var(--grn)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
/* ============ Hover tooltips ============ */
.tip{position:fixed;z-index:300;max-width:290px;background:#0e1020;border:1px solid var(--line2);
  color:var(--txt);font-size:12.5px;line-height:1.55;padding:9px 13px;border-radius:2px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);opacity:0;pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;transform:translateY(5px)}
.tip.show{opacity:1;transform:translateY(0)}
.tip b{color:var(--acc2);font-weight:700}
.help-dot{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--line2);color:var(--mut);font-size:10px;font-weight:700;margin-left:7px;cursor:help;vertical-align:middle;transition:.15s}
.help-dot:hover{border-color:var(--acc);color:var(--acc2)}
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:var(--panel2);border:1px solid var(--line2);
  border-radius:2px;padding:12px 20px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);z-index:100;opacity:0;pointer-events:none;transition:.3s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{border-color:rgba(34,197,94,.5)} .toast.err{border-color:rgba(239,68,68,.5)}
/* ============ GPU widget ============ */
.gpu-widget{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:6px 11px}
.gpu-dot{width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px var(--grn);animation:livePulse 2s infinite}
@keyframes livePulse{50%{opacity:.45}}
.gpu-meta{line-height:1.3}
.gpu-line{font-size:11.5px;font-weight:600;color:var(--txt);white-space:nowrap}
.gpu-bar{width:96px;height:4px;background:var(--bg);border-radius:2px;margin-top:3px;overflow:hidden}
.gpu-fill{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--grn));border-radius:2px;transition:width .8s ease}

/* ============ Runs view ============ */
.runs{padding:28px;overflow-y:auto;flex-direction:column}
.runs-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;max-width:1000px}
.runs-table .run-tr{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer;transition:.15s;border-radius:2px}
.runs-table .run-tr:hover{background:var(--panel2);padding-left:8px}
.runs-table .run-tr:last-child{border:none}
.run-id{font-weight:700;color:var(--mut)}
.run-dur{color:var(--dim);font-size:12px}
.artifacts-list .artifact-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.artifacts-list .artifact-row:last-child{border:none}
.art-hash{font-family:'SF Mono',ui-monospace,monospace;font-size:11px;color:var(--acc2);background:var(--bg);padding:3px 7px;border-radius:2px}
.art-meta{flex:1;min-width:0}
.art-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-sub{font-size:11px;color:var(--mut)}
.art-dl{padding:6px 12px;border-radius:2px;background:var(--panel2);border:1px solid var(--line2);color:var(--txt);font-size:12px;font-weight:600;transition:.15s}
.art-dl:hover{background:var(--acc);border-color:var(--acc)}
.run-detail{max-width:1000px;margin-top:18px;animation:rise .3s}
.rd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rd-node{background:var(--panel2);border:1px solid var(--line);border-radius:2px;padding:11px;margin-bottom:10px}
.rd-node .rdn-h{font-size:12px;color:var(--mut);margin-bottom:6px;font-weight:600;display:flex;justify-content:space-between}
.rd-node pre{font-family:'SF Mono',ui-monospace,monospace;font-size:11.5px;white-space:pre-wrap;word-break:break-word;color:var(--txt);max-height:220px;overflow:auto;line-height:1.5}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Dedicated GPUs view ---------- */
.view.gpus.active{display:block}          /* override .view.active flex-row for this scrolling view */
.view.gpus{padding:24px 30px;overflow-y:auto}
.gpu-intro h2{font-size:20px;margin:0 0 4px}
.gpu-intro p{color:var(--mut);font-size:13px;margin:0 0 18px;max-width:720px}
.gpu-pool{display:flex;gap:14px;margin-bottom:18px}
.gpu-pool .stat-card{flex:1}
.gpu-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.rent-form{display:flex;gap:10px;align-items:center}
.rent-form select{flex:1;min-width:0}
.byo-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.upload-btn{display:inline-block;align-self:flex-start;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:2px;
  background:var(--bg);border:1px dashed var(--bord,#2a2a3a);color:var(--txt);cursor:pointer}
.upload-btn:hover{border-color:var(--acc)}
/* BYO model: drag & drop zone + browse + upload progress */
.byo-drop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:22px 16px;border:2px dashed var(--line);border-radius:2px;background:var(--bg);
  transition:border-color .12s,background .12s,transform .06s}
.byo-drop.drag{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,var(--bg));transform:scale(1.01)}
.byo-drop-ico{font-size:22px;opacity:.7}
.byo-drop-main{font-size:13px;color:var(--txt)}
.byo-drop-main b{color:var(--acc)}
.byo-drop-sub{font-size:12px;color:var(--mut)}
.byo-browse{color:var(--acc);font-weight:600;cursor:pointer;text-decoration:underline}
.byo-progress{display:flex;flex-direction:column;gap:5px}
.byo-progress-track{height:8px;border-radius:2px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.byo-progress-bar{height:100%;width:0;background:var(--acc);border-radius:2px;transition:width .2s}
.byo-progress-bar.err{background:#ef4444}
.byo-progress-txt{font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.byo-note{font-size:11px;color:var(--mut);line-height:1.45;margin:2px 0 8px}
.byo-note b{color:var(--txt)}
.hf-form{display:flex;gap:8px}
.hf-form input{flex:1;min-width:0}
.hf-form input:first-child{flex:2}
.byo-list,.rentals-list{display:flex;flex-direction:column;gap:8px}
.byo-row{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:2px;padding:10px 12px}
.byo-ico{font-size:16px}
.byo-meta{flex:1;min-width:0}
.byo-name{font-size:13px;font-weight:600;color:var(--txt)}
.byo-sub{font-size:11px;color:var(--mut);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.byo-del,.rental-btns .sm{font-size:11px;padding:4px 10px;border-radius:2px;background:transparent;border:1px solid var(--bord,#2a2a3a);color:var(--mut);cursor:pointer}
.byo-del:hover,.rental-btns .sm.danger:hover{border-color:var(--red);color:var(--red)}
.rental-btns{display:flex;gap:6px}
.rental-card{background:transparent;border:1px solid rgba(52,70,255,.28);border-left:3px solid var(--mut);border-radius:2px;padding:14px 16px;transition:border-color .3s,box-shadow .3s}
.rental-card:hover{box-shadow:0 0 0 1px rgba(52,70,255,.28),0 0 22px rgba(52,70,255,.14)}
/* inline loading spinner for transitional rental states (reserving, loading model, booting…) */
.rc-spin{display:inline-block;width:9px;height:9px;margin-left:5px;vertical-align:-1px;border:2px solid color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor;border-radius:50%;animation:rc-spin .7s linear infinite}
@keyframes rc-spin{to{transform:rotate(360deg)}}
/* collapsible "GPU rental history" (released rentals) pinned below the active ones */
.rental-history{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.rental-history > summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--mut);list-style:none;display:flex;align-items:center;gap:7px;user-select:none;padding:2px 0}
.rental-history > summary::-webkit-details-marker{display:none}
.rental-history > summary::before{content:'▸';font-size:10px;transition:transform .15s}
.rental-history[open] > summary::before{transform:rotate(90deg)}
.rental-history > summary:hover{color:var(--txt)}
.rh-list{margin-top:10px;gap:6px}
.rental-card.st-active{border-left-color:var(--grn)}
.rental-card.st-reserved{border-left-color:#f59e0b}
.rental-card.st-queued,.rental-card.st-activating{border-left-color:var(--acc)}
.rental-card.st-released{border-left-color:var(--bord,#2a2a3a);opacity:.6}
.rental-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rental-id{font-weight:700;font-size:14px;color:var(--txt)}
.rental-kv{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);padding:2px 0}
.rental-kv span{min-width:110px}
.rental-kv b{color:var(--txt);font-weight:600}
.rental-kv code{background:var(--panel);padding:2px 7px;border-radius:2px;font-size:11px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;max-width:340px}
.rental-kv code.key{color:var(--grn);letter-spacing:.3px}
.rental-endpoint{margin-top:10px;padding-top:10px;border-top:1px solid var(--bord,#2a2a3a)}
.rental-note{font-size:11.5px;color:#f59e0b;margin:4px 0}
.rental-down{font-size:11.5px;color:#fca5a5;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);border-radius:2px;padding:6px 9px;margin:6px 0;line-height:1.4}
.rc-off{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fca5a5;background:rgba(239,68,68,.2);border-radius:2px;padding:1px 5px;margin-left:5px;vertical-align:1px}
.mini{font-size:10px;padding:2px 7px;border-radius:2px;background:transparent;border:1px solid var(--bord,#2a2a3a);color:var(--mut);cursor:pointer}
.mini:hover{border-color:var(--acc);color:var(--acc)}
.st{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:2px;background:var(--panel);color:var(--mut)}
.st.st-active,.st.st-ready{background:rgba(34,197,94,.16);color:var(--grn)}
.st.st-reserved{background:rgba(245,158,11,.16);color:#f59e0b}
.st.st-queued,.st.st-activating,.st.st-pulling,.st.st-uploading{background:rgba(52,70,255,.16);color:var(--acc)}
.st.st-failed{background:rgba(239,68,68,.16);color:var(--red)}
@media(max-width:900px){.gpu-grid{grid-template-columns:1fr}}
/* rental shapes */
.rent-form #rent-shape{flex:0 0 auto;max-width:230px}
.shape-avail{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.shape-chip{font-size:11px;color:var(--mut);background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:4px 11px}
.shape-chip b{color:var(--txt)}
.shape-chip.ok{border-color:rgba(34,197,94,.4)}
.shape-chip.none{opacity:.55}
/* cascading rental picker: vendor buttons → per-vendor "Rent now" rows */
.rent-vendors{display:flex;gap:10px}
.vbtn{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 14px;border-radius:2px;
  background:var(--bg);border:1.5px solid var(--line);color:var(--txt);cursor:pointer;transition:border-color .12s,background .12s}
.vbtn:hover{border-color:var(--mut)}
.vbtn.active{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,var(--bg))}
.vbtn-name{font-size:14px;font-weight:600}
.vbtn-sub{font-size:11px;color:var(--mut)}
.vbtn-nvidia.active{border-color:#76b900;background:color-mix(in srgb,#76b900 14%,var(--bg))}
.vbtn-amd.active{border-color:#ed1c24;background:color-mix(in srgb,#ed1c24 12%,var(--bg))}
.shape-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.shape-row{display:flex;align-items:center;gap:12px;justify-content:space-between;
  background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:10px 13px}
.shape-row.soldout{opacity:.55}
.shape-info{min-width:0}
.shape-name{font-size:13px;font-weight:600;color:var(--txt)}
.shape-meta{font-size:11px;color:var(--mut);margin-top:2px}
.shape-meta b{color:var(--txt)}
.shape-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.shape-qty{width:52px;flex:0 0 auto;text-align:center;padding:7px 6px;font-size:13px;
  background:var(--bg);border:1px solid var(--line);border-radius:2px;color:var(--txt)}
.shape-qty.combine-qty{width:56px}
.shape-rent{width:auto;flex:0 0 auto;white-space:nowrap;padding:8px 14px;font-size:12.5px}
.shape-rent:disabled{opacity:.5;cursor:not-allowed}
.combine-row{border-style:dashed;border-color:var(--acc);background:color-mix(in srgb,var(--acc) 6%,var(--bg))}
/* rent engine selector (AMD: text llama.cpp vs image/video ComfyUI) */
.rent-engines{display:flex;gap:6px;margin-bottom:8px}
.ebtn{flex:1;padding:7px 10px;border-radius:2px;font-size:12px;font-weight:600;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);color:var(--mut);transition:border-color .12s,color .12s}
.ebtn:hover{border-color:var(--mut)}
.ebtn.active{border-color:var(--acc);color:var(--txt);background:color-mix(in srgb,var(--acc) 12%,var(--bg))}
.rent-engine-note{font-size:11px;color:var(--mut);margin-bottom:10px;line-height:1.4}
.rental-eng{font-size:11px;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);border-radius:2px;padding:1px 7px;margin-left:4px}
.rental-eta{font-size:11.5px;color:#f59e0b;background:color-mix(in srgb,#f59e0b 10%,var(--bg));border:1px solid color-mix(in srgb,#f59e0b 28%,transparent);border-radius:2px;padding:5px 9px;margin-top:8px;line-height:1.4}
.insp-eta{font-size:11px;color:var(--mut);background:var(--bg);border-left:2px solid var(--acc);border-radius:2px;padding:6px 9px;margin:4px 0 2px;line-height:1.4}
.insp-warn{font-size:11px;color:#f59e0b;background:color-mix(in srgb,#f59e0b 10%,var(--bg));border:1px solid color-mix(in srgb,#f59e0b 30%,transparent);border-radius:2px;padding:6px 9px;margin:5px 0 2px;line-height:1.4}

/* generative-activity pill (image/video gen running) — pink→orange to match the Generate nodes */
.gen-status{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:linear-gradient(90deg,#ec4899,#f97316);color:#fff;font-size:12px;font-weight:700;
  white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2px 10px rgba(236,72,153,.35);
  animation:gen-pulse 1.5s ease-in-out infinite}
.gen-status.hidden{display:none}
.gen-spin{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;animation:gen-rot .8s linear infinite}
@keyframes gen-pulse{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes gen-rot{to{transform:rotate(360deg)}}

/* run-list thumbnail (image/video generations) */
.run-idwrap{display:flex;align-items:center;gap:10px;min-width:0}
.run-thumb{width:44px;height:44px;border-radius:2px;object-fit:cover;border:1px solid var(--line);background:#000;flex:0 0 auto}
.run-thumb.gen-media{cursor:zoom-in;transition:transform .12s}
.run-thumb.gen-media:hover{transform:scale(1.06);border-color:#ec4899}

/* lightbox — click a generated image to expand it centered/full-size */
.lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);backdrop-filter:blur(4px);cursor:zoom-out;animation:lb-in .12s ease-out}
.lightbox.hidden{display:none}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:2px;box-shadow:0 12px 60px rgba(0,0,0,.6);cursor:default}
.lightbox-close{position:absolute;top:16px;right:24px;font-size:26px;line-height:1;color:#fff;cursor:pointer;
  opacity:.82;user-select:none;padding:6px 11px;border-radius:2px}
.lightbox-close:hover{opacity:1;background:rgba(255,255,255,.12)}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
/* text output — hover reveals an expand button; click opens a full-size scrollable overlay */
.ro-text{position:relative}
.ro-expand{position:absolute;top:6px;right:6px;z-index:2;border:none;cursor:pointer;
  width:26px;height:26px;border-radius:2px;font-size:15px;line-height:1;
  background:rgba(30,30,40,.72);color:#fff;opacity:0;transition:opacity .12s}
.ro-text:hover .ro-expand{opacity:.9}
.ro-expand:hover{opacity:1;background:#ec4899}
.textbox{flex-direction:column;cursor:default;padding:44px 4vw 4vw}
.textbox .textbox-bar{position:absolute;top:14px;right:20px;display:flex;align-items:center;gap:10px}
.textbox-title{position:absolute;top:17px;left:4vw;color:var(--acc2);font-weight:700;font-size:13px;max-width:64vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Menlo,monospace}
.textbox-btn{border:none;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;
  font-size:13px;padding:7px 13px;border-radius:2px;opacity:.85}
.textbox-btn:hover{opacity:1;background:#ec4899}
.textbox .lightbox-close{position:static}
.textbox pre{max-width:92vw;max-height:88vh;overflow:auto;margin:0;
  background:#12121a;border:1px solid #2a2a38;border-radius:2px;padding:22px 26px;
  color:#e8e8ef;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  box-shadow:0 12px 60px rgba(0,0,0,.6);cursor:text}

/* drag-to-empty quick-add node search */
.node-search{position:fixed;z-index:200;width:300px;max-height:342px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line2);border-radius:2px;
  box-shadow:0 14px 44px rgba(0,0,0,.55);overflow:hidden;animation:ns-in .12s ease}
@keyframes ns-in{from{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:none}}
.ns-input{padding:11px 13px;background:var(--bg);border:none;border-bottom:1px solid var(--line);
  color:var(--txt);font-size:13px;outline:none;font-family:inherit}
.ns-input::placeholder{color:var(--dim)}
.ns-list{overflow-y:auto;padding:5px}
.ns-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:2px;cursor:pointer}
.ns-item:hover,.ns-item.active{background:var(--panel2)}
.ns-ico{width:26px;height:26px;border-radius:2px;display:grid;place-items:center;font-size:14px;color:#fff;flex-shrink:0}
.ns-meta{flex:1;min-width:0}
.ns-title{font-size:12.5px;color:var(--txt);font-weight:600}
.ns-desc{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ns-cat{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);flex-shrink:0}
.ns-empty{padding:16px;text-align:center;color:var(--dim);font-size:12px}

/* raw/RAG bucket types + folder navigation */
.bucket-badge{font-size:9px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;padding:1px 6px;border-radius:2px;vertical-align:middle;margin-left:4px}
.bucket-badge.raw{background:rgba(139,144,181,.16);color:var(--mut)}
.bucket-badge.rag{background:rgba(52,70,255,.22);color:#a5b4fc}
#bucket-type{background:var(--bg);border:1px solid var(--line);border-radius:2px;color:var(--txt);padding:0 8px;font-size:12.5px;flex-shrink:0}
.folder-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px 10px;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.crumb{cursor:pointer;padding:2px 7px;border-radius:2px;color:var(--txt);transition:.15s}
.crumb:hover{background:var(--panel2)}
.crumb-sep{color:var(--dim)}
.fn-actions{display:flex;gap:6px;flex-shrink:0}
.folder-row{cursor:pointer}
.folder-row:hover{border-color:var(--line2);background:var(--panel2)}

/* scheduler: modes, pause/run, hint */
.sched-hint{font-size:9.5px;color:var(--dim);margin:6px 2px 0;min-height:13px}
.sched-tag{font-size:8px;background:rgba(217,119,6,.18);color:#f59e0b;padding:1px 6px;border-radius:2px;margin-left:5px;font-weight:700;text-transform:uppercase;vertical-align:middle}
.sched-row.paused{opacity:.62}
.sched-run-badge{font-size:8px;background:rgba(34,197,94,.18);color:var(--grn);padding:1px 6px;border-radius:2px;margin-left:6px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;vertical-align:middle;border:1px solid rgba(34,197,94,.4);animation:livePulse 1.3s infinite}
.sched-row.running .sched-ico{background:rgba(34,197,94,.18);color:var(--grn)}
.sched-wait-badge{font-size:8px;background:rgba(217,119,6,.18);color:#f59e0b;padding:1px 6px;border-radius:2px;margin-left:6px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;vertical-align:middle;border:1px solid rgba(217,119,6,.4);animation:livePulse 1.6s infinite}
.sched-row.waiting .sched-ico{background:rgba(217,119,6,.18);color:#f59e0b}
.sched-btn{padding:4px 9px;background:var(--panel);border:1px solid var(--line);border-radius:2px;color:var(--mut);font-size:11px;font-weight:600;transition:.15s;flex-shrink:0}
.sched-btn:hover{border-color:var(--line2);color:var(--txt);background:var(--panel2)}
.sched-sublabel{font-size:10px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin:2px 2px 6px}
#reflow-wrap{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
.rf-card{align-items:flex-start}
.rf-card.done{opacity:.82}
.rf-body{flex:1;min-width:0}
.rf-runs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.rf-run{font-size:10px;font-weight:600;padding:2px 7px;border-radius:2px;cursor:pointer;background:var(--panel2);border:1px solid var(--line);color:var(--mut);transition:.15s}
.rf-run:hover{border-color:var(--line2);color:var(--txt)}
.rf-run.rf-completed{border-color:rgba(16,185,129,.45);color:#34d399}
.rf-run.rf-error,.rf-run.rf-cancelled{border-color:rgba(239,68,68,.45);color:#f87171}
.rf-run.rf-running,.rf-run.rf-queued{border-color:rgba(59,130,246,.45);color:#60a5fa}
.rf-badge{font-size:10px;vertical-align:middle;margin-left:2px}
.rd-reflow{background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.35);color:#7dd3fc;border-radius:2px;padding:8px 12px;font-size:12px;margin-bottom:10px}
.rd-reflow b{color:#bae6fd}
.rd-power{background:rgba(250,204,21,.10);border:1px solid rgba(250,204,21,.32);color:#fde68a;border-radius:2px;padding:8px 12px;font-size:12px;margin-bottom:10px}
.rd-power b{color:#fef9c3}
.rd-power-rate{color:#a16207;font-size:11px}

/* ================= mobile / responsive ================= */
.mobile-fab,.mobile-backdrop,.mobile-insp-close{display:none}
@media (max-width:820px){
  /* topbar → compact, tabs on a scrollable second row */
  .topbar{height:auto;flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
  .brand-name{font-size:18px}
  .topbar-logo{height:22px}
  .brand-mark{width:30px;height:30px;font-size:16px;border-radius:2px}
  .brand-tag{display:none}
  .tabs{order:3;width:100%;margin-left:0;gap:5px;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{height:0;display:none}
  .tab{flex-shrink:0;padding:7px 12px;font-size:12.5px}
  .topbar-right{gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
  .user-meta{display:none}                     /* avatar is enough on mobile — the name/tenant text overflowed */
  .balance{font-size:13px;padding:5px 10px}
  /* content views → tighter padding + single-column grids */
  .billing,.team,.analytics,.data,.runs{padding:14px}
  .view.gpus{padding:14px}
  .an-cards{grid-template-columns:1fr 1fr;gap:10px;max-width:none}
  .data-layout{grid-template-columns:1fr;max-width:none}
  .gpu-grid{grid-template-columns:1fr}
  .modal-bg>div{max-width:94vw}
  /* Runs: stack the history/commits split; wrap run rows so id+status+thumbs+cost don't collide */
  .runs-layout{grid-template-columns:1fr}
  .runs-table .run-tr{display:flex;flex-wrap:wrap;gap:5px 9px;align-items:center;padding:10px 4px}
  .run-idwrap{flex-wrap:wrap;gap:6px}
  .run-thumb{width:34px;height:34px}
  .run-tr .amt{margin-left:auto}
  /* GPU rent picker: the panels are grid items in .gpu-grid — min-width:0 lets them shrink so
     their content wraps instead of forcing the grid wider than the viewport (the real overflow cause) */
  .gpu-grid>*{min-width:0}
  .rent-vendors{flex-wrap:wrap}
  .vbtn{flex:1 1 45%;min-width:0}
  .shape-row{flex-wrap:wrap;gap:8px 10px}
  .shape-info{flex:1 1 100%;min-width:0}
  .shape-actions{margin-left:auto}
  /* Billing + Team: collapse their 2/3-column splits to a single column */
  .billing-cols,.team-layout,.rate-rows{grid-template-columns:1fr}
  .billing-grid{grid-template-columns:1fr 1fr}
  .billing-cols>*,.team-layout>*,.billing-grid>*{min-width:0}
  /* Data: create-bucket form wraps (name full-width, type+create below); panels can shrink */
  .bucket-form{flex-wrap:wrap}
  .bucket-form input{flex:1 1 100%}
  .data-layout>*{min-width:0}
  /* Builder empty-state: stack the template cards instead of overflowing side-by-side */
  .template-cards{flex-direction:column}
  /* builder → palette + inspector become slide-in drawers over a full-width canvas */
  .view.builder{position:relative}
  .canvas-wrap{width:100%}
  .palette,.inspector{position:absolute;top:0;bottom:0;z-index:45;transition:transform .25s ease;
    box-shadow:0 0 30px rgba(0,0,0,.55)}
  .palette{left:0;width:84%;max-width:300px;transform:translateX(-101%)}
  .palette.open{transform:none}
  .inspector{right:0;width:90%;max-width:340px;transform:translateX(101%)}
  .inspector.open{transform:none}
  .mobile-insp-close{display:block;position:absolute;top:10px;right:12px;z-index:3;background:var(--panel2);
    border:1px solid var(--line);color:var(--txt);width:30px;height:30px;border-radius:2px;font-size:14px}
  .mobile-fab{display:flex;align-items:center;gap:6px;position:absolute;left:14px;bottom:70px;z-index:44;
    background:linear-gradient(180deg,var(--acc),#2735BF);color:#fff;border:none;padding:11px 16px;
    border-radius:2px;font-weight:700;font-size:13px;box-shadow:0 6px 20px rgba(52,70,255,.5)}
  .mobile-backdrop.show{display:block;position:absolute;inset:0;z-index:42;background:rgba(0,0,0,.5)}
  /* Builder controls: Run bar pinned full-width at the bottom; Nodes above-left; zoom/fit + tools above-right */
  .runbar{left:0;right:0;bottom:0;transform:none;width:100%;justify-content:center;gap:10px;
    border-radius:0;border-left:none;border-right:none;border-bottom:none;padding:9px 12px}
  .runbar .btn-run{flex:1;max-width:300px;justify-content:center}
  .zoom-ctrl{bottom:70px;right:14px}
  .canvas-tools{bottom:120px;right:14px}
}
@media (max-width:480px){
  .an-cards{grid-template-columns:1fr}
  .brand-name{font-size:16px}
  .topbar-logo{height:20px}
  .tab{padding:6px 10px;font-size:12px}
  .billing,.team,.analytics,.data,.runs,.view.gpus{padding:11px}
}

/* ---------- Model Arena (dedicated tab) ---------- */
.view.arena{display:none;flex-direction:column;height:100%;min-height:0;padding:16px 20px;gap:12px;overflow:hidden}
.view.arena.active{display:flex}
.arena-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.arena-bar-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.arena-h{margin:0;font-size:16px;font-weight:700}
.arena-sub{font-size:11px;opacity:.55}
.arena-bar-r{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:1 1 320px}
.arena-lbl{font-size:11px;opacity:.8;display:inline-flex;align-items:center;white-space:nowrap}
.arena-lbl input{width:50px;margin-left:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:2px;color:inherit;padding:3px 5px;font-size:11px}
/* compact bar controls — the base .btn-primary is width:100% and .btn-ghost is flex:1, which blow up here */
.arena-bar-r .btn-primary,.arena-bar-r .btn-ghost{width:auto;flex:0 0 auto;padding:5px 10px;font-size:11.5px;font-weight:600;border-radius:2px}
.arena-bar-r .btn-primary:hover{transform:none;box-shadow:none;filter:brightness(1.1)}
.arena-break{flex-basis:100%;height:0;margin:0}  /* forces the action buttons onto a second row */
/* run synopsis banner */
.arena-summary{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 12px;border:1px solid rgba(255,255,255,.13);border-left:3px solid #14b8a6;border-radius:2px;background:rgba(20,184,166,.06);font-size:12.5px;line-height:1.5}
.arena-summary.hidden{display:none}
.arena-summary .as-title{font-weight:700;white-space:nowrap}
.arena-summary .as-rank{display:inline-flex;flex-wrap:wrap;gap:5px}
.arena-summary .as-item{padding:2px 8px;border-radius:2px;background:rgba(255,255,255,.06);white-space:nowrap;font-variant-numeric:tabular-nums}
.arena-summary .as-item.as-win{background:rgba(34,197,94,.2);color:#86efac;font-weight:700}
.arena-summary .as-item.as-fail{opacity:.6}
.arena-summary .as-note{opacity:.82;white-space:nowrap}
.arena-summary .jn-link{margin-left:auto}
.arena-summary .as-close{cursor:pointer;opacity:.45;padding:0 2px}
.arena-summary .as-close:hover{opacity:1}
.arena-prompt-wrap{flex:0 0 auto}
.arena-prompt{width:100%;box-sizing:border-box;min-height:58px;max-height:150px;resize:vertical;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:2px;color:inherit;padding:10px 12px;font-size:13px;line-height:1.5}
.arena-prompt:focus{outline:none;border-color:rgba(20,184,166,.6)}
.arena-grid{flex:1;min-height:0;display:grid;gap:12px;overflow-y:auto;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-auto-rows:minmax(240px,1fr)}
.aw{display:flex;flex-direction:column;border:1px solid rgba(52,70,255,.26);border-radius:2px;overflow:hidden;min-height:0;background:transparent;transition:border-color .25s,box-shadow .25s}
.aw.aw-run{border-color:rgba(20,184,166,.5);box-shadow:0 0 0 1px rgba(20,184,166,.25) inset}
.aw.aw-fin{border-color:rgba(20,184,166,.4)}
.aw.aw-err{border-color:rgba(239,68,68,.55)}
.aw.aw-best{border-color:#14b8a6;box-shadow:0 0 0 2px rgba(20,184,166,.4)}
.aw-head{display:flex;align-items:center;gap:8px;padding:8px 9px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.aw-model{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:2px;color:inherit;padding:5px 7px;font-size:12px}
.aw-x{flex:0 0 auto;background:none;border:none;color:inherit;opacity:.5;cursor:pointer;font-size:14px;padding:2px 5px;border-radius:2px}
.aw-x:hover{opacity:1;background:rgba(239,68,68,.2);color:#fca5a5}
.aw-metrics{display:flex;flex-wrap:wrap;gap:5px;padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.07);min-height:14px}
.aw-metrics .aw-m{font-size:11px;padding:2px 7px;border-radius:2px;background:rgba(20,184,166,.15);color:#5eead4;white-space:nowrap;display:inline-flex;align-items:baseline;gap:3px;font-variant-numeric:tabular-nums}
.aw-metrics .aw-m i{font-style:normal;opacity:.65;font-size:9.5px}
.aw-metrics .aw-final{background:rgba(20,184,166,.34);font-weight:700}
.aw.aw-best .aw-final::after{content:' \2605';color:#fde68a}
.aw-metrics .aw-idle{font-size:11px;opacity:.4}
.aw-metrics .aw-wait{font-size:11px;color:#5eead4;opacity:.8}
.aw-metrics .aw-errm{font-size:11px;padding:2px 7px;border-radius:2px;background:rgba(239,68,68,.25);color:#fca5a5}
.aw-text{flex:1;overflow-y:auto;padding:10px 11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;min-height:0}
.aw-turn{margin-bottom:10px}
.aw-role{font-family:system-ui,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
/* user turn — a distinct tinted bubble */
.aw-uturn{display:flex;gap:8px;align-items:flex-start;background:rgba(20,184,166,.10);border:1px solid rgba(20,184,166,.22);border-radius:2px;padding:7px 9px;margin-bottom:9px}
.aw-uturn:not(:first-child){margin-top:14px}
.aw-urole{flex:0 0 auto;color:#5eead4;opacity:.85;padding-top:2px}
.aw-ttext{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word;font-family:system-ui,sans-serif;font-size:12px;line-height:1.45}
/* assistant turn — model chip above the streamed reply */
.aw-aturn{padding:0 2px}
.aw-arole{display:block;opacity:.45;margin-bottom:3px}
.aw-atext{white-space:pre-wrap;word-break:break-word}
.aw-atext.aw-aerr{color:#fca5a5}
/* reasoning-model <think> stream — muted block above the answer */
.aw-think{margin-bottom:6px;padding:5px 8px;border-left:2px solid rgba(148,163,184,.35);background:rgba(148,163,184,.06);border-radius:0 6px 6px 0}
.aw-think-lb{display:block;font-size:10px;letter-spacing:.03em;opacity:.55;margin-bottom:2px}
.aw-think-tx{white-space:pre-wrap;word-break:break-word;font-size:12px;color:#94a3b8;opacity:.85}
.arena-ragnote{font-size:11px;color:#5eead4;opacity:.9;min-height:13px}
.arena-judgenote{font-size:11px;color:#fde68a;opacity:.95;min-height:13px}
.arena-lbl select{margin-left:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:2px;color:inherit;padding:3px 5px;font-size:11px;max-width:150px}
/* frontier-judge: winner badge + per-window accuracy */
.aw.aw-winner{border-color:#fbbf24;box-shadow:0 0 0 2px rgba(251,191,36,.5)}
.aw-badge{flex:0 0 auto;font-family:system-ui,sans-serif;font-size:10px;font-weight:700;padding:2px 8px;border-radius:2px;
  background:linear-gradient(90deg,#fbbf24,#f59e0b);color:#1a1205;white-space:nowrap}
.aw-metrics .aw-acc{background:rgba(251,191,36,.2);color:#fde68a;font-weight:700}
.aw-metrics .aw-cost{background:rgba(96,165,250,.16);color:#93c5fd}
.aw-metrics .aw-energy{background:rgba(52,211,153,.16);color:#6ee7b7}
.aw-metrics .aw-effcost{background:rgba(251,191,36,.14);color:#fcd34d;font-weight:700}
.aw-metrics .aw-test{font-weight:700}
.aw-metrics .aw-testpass{background:rgba(34,197,94,.22);color:#86efac}
.aw-metrics .aw-testfail{background:rgba(239,68,68,.2);color:#fca5a5}
.aw-metrics .aw-testerr{background:rgba(148,163,184,.2);color:#cbd5e1}
.aw-metrics .aw-testwin{box-shadow:0 0 0 1.5px rgba(34,197,94,.7)}
.aw-metrics .aw-costpass{background:rgba(34,197,94,.13);color:#86efac;font-weight:700}
.aw-metrics .aw-energypass{background:rgba(52,211,153,.13);color:#6ee7b7;font-weight:700}
.test-btn{background:linear-gradient(90deg,#22c55e,#16a34a)!important;border-color:transparent!important}
.jn-link{color:#86efac;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.jn-link:hover{color:#bbf7d0}
.tests-body{flex:1;overflow:auto;min-height:0;padding:12px 16px}
.tests-body pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.55;white-space:pre;color:#d1fae5}
/* readable test-suite viewer */
.ts-checks{margin:0 0 14px;padding:11px 13px;border:1px solid rgba(20,184,166,.25);border-radius:2px;background:rgba(20,184,166,.06)}
.ts-checks-h{font-family:system-ui,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.7;margin-bottom:8px}
.ts-check{display:flex;gap:8px;font-family:system-ui,sans-serif;font-size:13px;line-height:1.7;align-items:baseline}
.ts-check .ts-dot{color:#5eead4;flex:0 0 auto;font-weight:700}
.ts-codewrap{border:1px solid rgba(255,255,255,.1);border-radius:2px;overflow:hidden;background:rgba(0,0,0,.28);padding:8px 0}
.ts-line{display:flex;align-items:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.6}
.ts-line:hover{background:rgba(255,255,255,.03)}
.ts-ln{flex:0 0 40px;text-align:right;padding:0 12px 0 0;opacity:.28;user-select:none}
.ts-code{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word;padding-right:12px}
.tk-kw{color:#c792ea}.tk-str{color:#86efac}.tk-com{color:#7d8590;font-style:italic}.tk-num{color:#f6c177}.tk-con{color:#5cc8ff}
#tests-ref code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:2px;font-size:11px}
/* private leaderboard */
.lb-box{width:min(94vw,860px);height:min(84vh,660px);display:flex;flex-direction:column;padding:0;overflow:hidden}
.lb-head-actions{display:flex;align-items:center;gap:8px}
.lb-body{flex:1;overflow:auto;min-height:0;padding:8px 12px}
.lb-empty{opacity:.55;font-size:13px;padding:24px 6px;text-align:center}
.lb-table{width:100%;border-collapse:collapse;font-size:12.5px}
.lb-table th,.lb-table td{padding:7px 9px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
.lb-table th.lb-th{cursor:pointer;user-select:none;white-space:nowrap;position:sticky;top:0;background:#14141c;font-size:11px;text-transform:uppercase;letter-spacing:.03em;opacity:.75}
.lb-table th.lb-th:hover{opacity:1}
.lb-table th.lb-sorted{color:#5eead4;opacity:1}
.lb-table td.lb-num,.lb-table th:not(.lb-rank):not(:nth-child(2)){text-align:right;font-variant-numeric:tabular-nums}
.lb-table .lb-rank{text-align:center;width:34px}
.lb-table .lb-model{font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-table tr.lb-top td{background:rgba(251,191,36,.09)}
.lb-table tbody tr:hover td,.lb-table tr:hover td{background:rgba(255,255,255,.03)}
.judge-btn{background:linear-gradient(90deg,#f59e0b,#d97706)!important;border-color:transparent!important}
.judge-status{font-size:12px;margin:2px 0 12px;padding:8px 10px;border-radius:2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.judge-status .js-ok{color:#5eead4}
.judge-status .js-none{opacity:.65}
/* ask-the-judge chat modal */
.jchat-box{width:min(92vw,680px);height:min(84vh,720px);display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.jchat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.jchat-head h3{margin:0;font-size:16px}
.jchat-model{font-size:11px;opacity:.5;font-weight:400;margin-left:4px}
.jchat-ref{padding:8px 16px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.jchat-refline{font-size:11px;opacity:.7;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jchat-log{flex:1;overflow-y:auto;padding:14px 16px;min-height:0}
.jchat-empty{font-size:12px;opacity:.5;line-height:1.5;max-width:440px}
.jc-turn{margin-bottom:14px}
.jc-turn .aw-role{display:block;margin-bottom:4px}
.jc-user{background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.22);border-radius:2px;padding:8px 10px}
.jc-user .aw-role{color:#5eead4;opacity:.85}
.jc-assistant .aw-role{opacity:.5}
.jc-text{white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.55}
.jc-user .jc-text{font-family:system-ui,sans-serif}
.jc-assistant .jc-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.jc-think{opacity:.55;animation:jcpulse 1.1s ease-in-out infinite}
@keyframes jcpulse{50%{opacity:.25}}
.jchat-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.1)}
.jchat-input textarea{flex:1;min-height:44px;max-height:140px;resize:vertical;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:2px;color:inherit;padding:9px 11px;font-size:13px;line-height:1.4}
.jchat-input textarea:focus{outline:none;border-color:rgba(20,184,166,.55)}
.jchat-input .btn-primary{width:auto;flex:0 0 auto;align-self:flex-end;padding:9px 18px;font-size:13px;font-weight:600;border-radius:2px}
.jchat-input .btn-primary:hover{transform:none;box-shadow:none;filter:brightness(1.08)}

/* ---------- Report a fault ---------- */
.fault-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.fault-tab{padding:9px 14px;color:var(--mut);font-weight:600;font-size:13px;border-bottom:2px solid transparent;margin-bottom:-1px}
.fault-tab:hover{color:var(--txt)}
.fault-tab.on{color:var(--txt);border-bottom-color:var(--acc)}
.fault-count{background:var(--red);color:#fff;border-radius:2px;font-size:10px;font-weight:700;padding:1px 6px;margin-left:3px}
#fault-modal .field select,#fault-modal .field textarea,#fault-modal .field input{width:100%;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:2px;color:var(--txt);font-size:13.5px;font-family:inherit}
#fault-modal .field textarea{resize:vertical;line-height:1.45}
#fault-modal .field select:focus,#fault-modal .field textarea:focus,#fault-modal .field input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(52,70,255,.18)}
.fault-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt);margin:4px 0 10px;cursor:pointer}
.fault-check input{width:auto}
.fault-preview{background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:10px 12px;font-size:12px;color:var(--mut);min-height:20px}
.fault-preview-hd{font-weight:700;color:var(--txt);margin-bottom:5px;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.fault-preview ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.fault-preview b{color:var(--txt)}
.fault-list{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:7px}
.fault-item{background:var(--bg);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.fault-item-hd{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;font-size:13px}
.fault-item-hd:hover{background:var(--panel2)}
.fault-item-hd b{color:var(--txt)}
.fault-item-hd>span:nth-child(3){color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.fault-item-when{color:var(--dim);font-size:11px;white-space:nowrap}
.fault-item-body{padding:0 11px 11px}
.fault-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:2px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.fault-badge.s-open{background:rgba(245,158,11,.16);color:var(--amb)}
.fault-badge.s-in_progress{background:rgba(52,70,255,.16);color:var(--acc2)}
.fault-badge.s-resolved{background:rgba(34,197,94,.16);color:var(--grn)}
.fault-badge.s-closed{background:rgba(139,144,181,.16);color:var(--mut)}
.fault-desc-txt{color:var(--txt);font-size:13px;white-space:pre-wrap;margin-bottom:6px}
.fault-meta{color:var(--dim);font-size:11px}
.fault-replies{margin-top:9px;border-top:1px solid var(--line);padding-top:8px}
.fault-replies-hd{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);margin-bottom:6px}
.fault-reply{background:var(--panel2);border-radius:2px;padding:7px 10px;margin-bottom:6px;font-size:13px}
.fault-reply>div{color:var(--txt);margin-top:2px;white-space:pre-wrap}

/* ---------- toggle switch (node inspector param) ---------- */
.insp-toggle{display:inline-flex;align-items:center;cursor:pointer;height:24px}
.insp-field .insp-toggle input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0}
.insp-toggle-track{width:42px;height:23px;border-radius:2px;background:var(--line);position:relative;transition:.2s;display:inline-block;flex:0 0 auto}
.insp-toggle-track::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:2px;background:var(--mut);transition:.2s}
.insp-fkey{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.insp-fkey-status{font-size:12px;color:var(--mut)}
.insp-fkey .btn-ghost{width:auto;flex:0 0 auto;padding:6px 12px;font-size:12px}
.insp-toggle input:checked + .insp-toggle-track{background:var(--acc)}
.insp-toggle input:checked + .insp-toggle-track::after{transform:translateX(19px);background:#fff}
/* arena bar: keep the think checkbox a normal checkbox, not a 50px number field */
.arena-lbl input[type=checkbox]{width:auto;margin-left:6px;vertical-align:middle;accent-color:var(--acc);cursor:pointer}

/* ---------- support: unread badge + two-way conversation thread ---------- */
#fault-btn{position:relative}
.fault-unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);vertical-align:middle;margin-left:2px}
.fault-thread{display:flex;flex-direction:column;gap:7px;margin:10px 0}
.fault-msg{max-width:85%;padding:7px 10px;border-radius:2px;font-size:13px}
.fault-msg-hd{font-size:10.5px;color:var(--mut);margin-bottom:3px;font-weight:600}
.fault-msg>div:last-child{color:var(--txt);white-space:pre-wrap}
.fault-msg-support{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:3px}
.fault-msg-me{align-self:flex-end;background:rgba(52,70,255,.16);border:1px solid rgba(52,70,255,.35);border-bottom-right-radius:3px}
.fault-replybox{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.fault-replybox textarea{flex:1;resize:vertical;min-height:38px;background:var(--bg);border:1px solid var(--line);border-radius:2px;color:var(--txt);padding:8px 10px;font-size:13px;font-family:inherit;line-height:1.4}
.fault-replybox textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(52,70,255,.18)}
.fault-replybox .btn-primary{width:auto;flex:0 0 auto;align-self:flex-end;padding:9px 18px;font-size:13px;font-weight:600;border-radius:2px}
.fault-replybox .btn-primary:hover{transform:none;box-shadow:none;filter:brightness(1.08)}

/* ══════════ Phase 2 · Stage 2 — EntBox signature motion ══════════ */
/* Ambient glow field behind the builder canvas (below wires z1 / nodes z2) */
.canvas-wrap>.wires{z-index:1}
.cv-amb{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cv-glow{position:absolute;border-radius:50%;filter:blur(70px);animation:cv-glow 18s ease-in-out infinite}
.cv-glow.g1{width:460px;height:460px;top:-120px;left:-90px;background:rgba(52,70,255,.20)}
.cv-glow.g2{width:380px;height:380px;bottom:-90px;right:-70px;background:rgba(123,143,255,.14);animation-delay:-6s}
.cv-glow.g3{width:320px;height:320px;top:42%;left:56%;background:rgba(80,110,255,.12);animation-delay:-12s}
@keyframes cv-glow{0%,100%{opacity:.38;transform:scale(.95)}50%{opacity:.66;transform:scale(1.06)}}
/* Marching-ants border on the selected node — signature featured-element motion */
.node.selected::after{content:"";position:absolute;inset:-4px;border-radius:3px;pointer-events:none;z-index:6;
  background:
    linear-gradient(90deg,var(--acc) 50%,transparent 50%) repeat-x,
    linear-gradient(90deg,var(--acc) 50%,transparent 50%) repeat-x,
    linear-gradient(0deg,var(--acc) 50%,transparent 50%) repeat-y,
    linear-gradient(0deg,var(--acc) 50%,transparent 50%) repeat-y;
  background-size:12px 2px,12px 2px,2px 12px,2px 12px;
  background-position:0 0,0 100%,0 0,100% 0;
  filter:drop-shadow(0 0 3px rgba(52,70,255,.6));
  animation:eb-march 1s linear infinite}
@keyframes eb-march{100%{background-position:12px 0,-12px 100%,0 -12px,100% 12px}}
/* Sparkle pulse on AI / brain icons */
.eb-sparkle{display:inline-block;animation:eb-sparkle 2.4s ease-in-out infinite}
@keyframes eb-sparkle{0%,100%{opacity:.72;transform:scale(.92)}50%{opacity:1;transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){
  .cv-glow,.node.selected::after,.eb-sparkle{animation:none}
}

/* ============================ Chat tab ============================ */
.view.chat{display:none;flex-direction:column;height:100%;min-height:0;padding:14px 20px 16px;gap:12px;overflow:hidden}
.view.chat.active{display:flex}
.chat-bar{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.chat-bar-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chat-bar-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chat-h{font-family:var(--font-head);font-size:18px;margin:0;color:var(--txt);letter-spacing:-.2px}
.chat-model{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--rad);color:var(--txt);
  font:inherit;font-size:13px;padding:7px 10px;min-width:230px;max-width:360px}
.chat-model:focus{outline:none;border-color:var(--acc)}
.chat-refresh{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--rad);color:var(--mut);
  cursor:pointer;width:32px;height:32px;font-size:15px;line-height:1;transition:.15s}
.chat-refresh:hover{color:var(--txt);border-color:var(--acc)}
.chat-refresh.spin{animation:chat-spin .7s linear infinite}
@keyframes chat-spin{to{transform:rotate(360deg)}}
.chat-model-note{font-size:11.5px;color:var(--amb);opacity:.95}
.chat-lbl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.chat-lbl input[type=number]{width:60px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--rad);
  color:var(--txt);font:inherit;font-size:12px;padding:5px 7px}
.chat-lbl input[type=checkbox]{accent-color:var(--acc);width:15px;height:15px}

/* transcript — centered conversation column */
.chat-transcript{flex:1;min-height:0;overflow-y:auto;padding:6px 2px 4px;scroll-behavior:smooth}
.chat-transcript>*{max-width:860px;margin-left:auto;margin-right:auto}
.chat-msg{display:flex;gap:12px;padding:14px 6px;align-items:flex-start}
.chat-msg+.chat-msg{border-top:1px solid rgba(255,255,255,.05)}
.chat-av{flex:0 0 auto;width:30px;height:30px;border-radius:var(--rad);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:11px;font-weight:600;letter-spacing:.3px;color:#fff;user-select:none;margin-top:2px}
.chat-av-user{background:linear-gradient(135deg,var(--acc),var(--acc2))}
.chat-av-assistant{background:linear-gradient(135deg,#d29922,#e0a63c);color:#1a1200}
.chat-col{flex:1;min-width:0}
.chat-body{font-size:14.5px;line-height:1.62;color:var(--txt);word-wrap:break-word;overflow-wrap:anywhere}
.chat-user .chat-body{color:var(--txt);white-space:pre-wrap}
.chat-body p{margin:0 0 10px}
.chat-body p:last-child{margin-bottom:0}
.chat-body>*:first-child{margin-top:0}
.chat-list{margin:4px 0 12px;padding-left:22px}
.chat-list li{margin:3px 0}
.chat-body h1.chat-mdh,.chat-body h2.chat-mdh,.chat-body h3.chat-mdh,.chat-body h4.chat-mdh{
  font-family:var(--font-head);margin:16px 0 8px;line-height:1.3;color:var(--txt)}
.chat-body h1.chat-mdh{font-size:20px}.chat-body h2.chat-mdh{font-size:17px}
.chat-body h3.chat-mdh{font-size:15px}.chat-body h4.chat-mdh{font-size:14px;color:var(--mut)}
.chat-body blockquote{margin:8px 0;padding:6px 12px;border-left:3px solid var(--acc);
  background:rgba(52,70,255,.07);color:var(--mut);border-radius:0 var(--rad) var(--rad) 0}
.chat-body a{color:var(--acc2);text-decoration:none;border-bottom:1px solid rgba(123,143,255,.4)}
.chat-body a:hover{border-bottom-color:var(--acc2)}
.chat-body strong{color:#fff;font-weight:600}
.chat-body hr{border:0;border-top:1px solid var(--line2);margin:14px 0}
.chat-ic{background:rgba(255,255,255,.09);border:1px solid var(--line2);border-radius:var(--rad);
  padding:1px 5px;font-family:var(--font-mono);font-size:12.5px;color:#c9cffb}
.chat-table{border-collapse:collapse;width:100%;margin:8px 0 12px;font-size:13px}
.chat-table th{background:var(--panel2);text-align:left;padding:6px 10px;border:1px solid var(--line2);font-weight:600}
.chat-table td{padding:6px 10px;border:1px solid var(--line);vertical-align:top}

/* structured code block with copy */
.chat-code{margin:10px 0;border:1px solid var(--line2);border-radius:var(--rad);overflow:hidden;background:#0A0E28}
.chat-code-h{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;
  background:var(--panel2);border-bottom:1px solid var(--line2)}
.chat-code-lang{font-family:var(--font-mono);font-size:11px;color:var(--mut);text-transform:lowercase;letter-spacing:.4px}
.chat-code-copy{background:transparent;border:1px solid var(--line2);border-radius:var(--rad);color:var(--mut);
  font:inherit;font-size:11.5px;padding:3px 9px;cursor:pointer;transition:.15s}
.chat-code-copy:hover{color:var(--txt);border-color:var(--acc);background:rgba(52,70,255,.12)}
.chat-code-copy.ok{color:var(--grn);border-color:var(--grn)}
.chat-code-pre{margin:0;padding:12px 14px;overflow-x:auto;max-width:100%}
.chat-code-pre code{font-family:var(--font-mono);font-size:12.8px;line-height:1.55;color:#dfe3ff;white-space:pre;background:none;border:0;padding:0}

/* reasoning + streaming caret */
.chat-think{margin:0 0 10px;padding:8px 12px;border-left:2px solid var(--dim);background:rgba(255,255,255,.03);border-radius:0 var(--rad) var(--rad) 0}
.chat-think-lb{font-size:11px;color:var(--dim);margin-bottom:3px;font-weight:600}
.chat-think-tx{font-size:12.5px;color:var(--mut);white-space:pre-wrap;line-height:1.5;opacity:.9}
.chat-caret{display:inline-block;width:7px;height:15px;background:var(--acc2);margin-left:2px;vertical-align:text-bottom;
  border-radius:1px;animation:chat-blink 1s steps(1) infinite}
@keyframes chat-blink{50%{opacity:0}}
.chat-aerr{color:var(--red);font-size:13.5px}

/* per-answer metrics */
.chat-meta{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:9px;align-items:center}
.chat-m{display:inline-flex;align-items:baseline;gap:3px;font-family:var(--font-mono);font-size:12px;color:var(--mut);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--rad);padding:2px 7px}
.chat-m i{font-style:normal;font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.3px}
.chat-m.chat-final{color:var(--acc2);border-color:var(--line2)}
.chat-m.chat-cost{color:var(--amb)}
.chat-m.chat-energy{color:#5eead4}
.chat-wait{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--mut)}
.chat-errm{font-size:12px;color:var(--red)}

/* empty state */
.chat-empty{text-align:center;color:var(--dim);padding:60px 20px;max-width:460px}
.chat-empty-ico{font-size:40px;opacity:.5;margin-bottom:12px}
.chat-empty-t{font-family:var(--font-head);font-size:18px;color:var(--mut);margin-bottom:6px}
.chat-empty-s{font-size:13px;line-height:1.6}

/* composer */
.chat-composer{flex:0 0 auto;display:flex;gap:10px;align-items:flex-end;max-width:860px;width:100%;margin:0 auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--rad);padding:8px 8px 8px 14px}
.chat-composer:focus-within{border-color:var(--acc)}
.chat-input{flex:1;background:transparent;border:0;resize:none;color:var(--txt);font:inherit;font-size:14.5px;
  line-height:1.5;padding:6px 0;max-height:180px;overflow-y:auto}
.chat-input:focus{outline:none}
.chat-input::placeholder{color:var(--dim)}
.chat-send{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:var(--rad);background:var(--acc);color:#fff;
  font-size:16px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.chat-send:hover:not(:disabled){background:var(--acc2)}
.chat-send:disabled{opacity:.45;cursor:default}
.chat-send.busy{animation:chat-pulse 1s ease-in-out infinite}
@keyframes chat-pulse{50%{opacity:.55}}
@media (max-width:820px){
  .view.chat{padding:10px 12px 12px}
  .chat-bar-r{gap:8px}
  .chat-model{min-width:150px}
  .chat-transcript>*,.chat-composer{max-width:100%}
}

/* -------- Chat history sidebar (two-column layout) -------- */
.view.chat{flex-direction:row;padding:0;gap:0;position:relative}
.chat-sidebar{position:absolute;z-index:44;top:0;bottom:0;left:0;width:min(300px,82vw);display:flex;flex-direction:column;gap:8px;padding:14px 12px;
  border-right:1px solid var(--line);background:var(--bg2);min-height:0;transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow)}
.chat-sidebar.open{transform:translateX(0)}
.chat-sidebar.open ~ .chat-backdrop{display:block;position:absolute;inset:0;z-index:43;background:rgba(0,0,0,.5)}
.chat-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:14px 20px 16px;min-height:0}
.chat-newbtn{flex:0 0 auto;background:var(--acc);color:#fff;border:0;border-radius:var(--rad);
  font:inherit;font-size:13px;font-weight:600;padding:9px 12px;cursor:pointer;transition:.15s}
.chat-newbtn:hover{background:var(--acc2)}
.chat-search-wrap{flex:0 0 auto}
.chat-search{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line2);border-radius:var(--rad);
  color:var(--txt);font:inherit;font-size:12.5px;padding:7px 9px}
.chat-search:focus{outline:none;border-color:var(--acc)}
.chat-search::placeholder{color:var(--dim)}
.chat-convo-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin:2px -4px 0;padding:0 4px}
.chat-convo-empty{color:var(--dim);font-size:12px;text-align:center;padding:24px 8px}
.chat-convo{display:flex;align-items:center;gap:6px;padding:8px 9px;border-radius:var(--rad);cursor:pointer;
  border:1px solid transparent;transition:background .12s}
.chat-convo:hover{background:var(--panel)}
.chat-convo.active{background:var(--panel2);border-color:var(--line2)}
.cc-main{flex:1;min-width:0}
.cc-title{font-size:13px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-sub{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.cc-actions{display:flex;gap:1px;opacity:0;flex:0 0 auto;transition:opacity .12s}
.chat-convo:hover .cc-actions,.chat-convo.active .cc-actions{opacity:1}
.cc-ren,.cc-del{background:transparent;border:0;color:var(--dim);cursor:pointer;font-size:12px;padding:3px 4px;border-radius:var(--rad);line-height:1}
.cc-ren:hover{color:var(--acc2);background:rgba(52,70,255,.14)}
.cc-del:hover{color:var(--red);background:rgba(239,68,68,.14)}
.chat-side-toggle{display:inline-block;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--rad);
  color:var(--mut);cursor:pointer;width:32px;height:32px;font-size:14px;line-height:1}
.chat-side-toggle:hover{color:var(--txt);border-color:var(--acc)}
.chat-backdrop{display:none}                            /* only used on mobile when the drawer is open */
@media (max-width:820px){
  .chat-side-toggle{display:inline-block}
  /* history drawer: fixed-width slide-in with an explicit width (position:absolute ignores flex-basis) */
  .chat-sidebar{position:absolute;z-index:44;top:0;bottom:0;left:0;width:min(280px,80vw);
    transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow)}
  .chat-sidebar.open{transform:translateX(0)}
  .chat-sidebar.open ~ .chat-backdrop{display:block;position:absolute;inset:0;z-index:43;background:rgba(0,0,0,.5)}
  .chat-main{padding:10px 12px 12px}
}

/* -------- Chat: stop / regenerate / compaction -------- */
.chat-send.stop{background:var(--red)}
.chat-send.stop:hover{background:#dc2626}
.chat-actions{display:flex;gap:8px;margin-top:10px}
.chat-abtn{background:var(--panel);border:1px solid var(--line2);border-radius:var(--rad);color:var(--mut);
  font:inherit;font-size:12px;padding:5px 11px;cursor:pointer;transition:.15s}
.chat-abtn:hover{color:var(--txt);border-color:var(--acc);background:rgba(52,70,255,.1)}
.chat-compact-note{max-width:860px;margin:2px auto 8px;text-align:center;font-size:11.5px;color:var(--dim);
  padding:5px 10px;border:1px dashed var(--line2);border-radius:var(--rad);background:rgba(255,255,255,.02)}
.chat-stopnote{font-size:12px;color:var(--amb);font-weight:600}

/* -------- Chat: right-aligned user bubbles + code syntax colors -------- */
.chat-msg + .chat-msg{border-top:none}
.chat-msg{padding:9px 6px}
.chat-msg.chat-user{flex-direction:row-reverse}       /* user turns hug the right for clear back-and-forth */
.chat-user .chat-col{flex:0 1 auto;max-width:78%;display:flex;flex-direction:column;align-items:flex-end}
.chat-user .chat-body{background:rgba(52,70,255,.15);border:1px solid var(--line2);
  border-radius:12px 12px 3px 12px;padding:9px 13px;white-space:pre-wrap;text-align:left}
.chat-assistant .chat-body{max-width:100%}
/* One-Dark-ish syntax palette (scoped to code blocks) */
.chat-code-pre .tok-c{color:#6b7394;font-style:italic}
.chat-code-pre .tok-s{color:#98c379}
.chat-code-pre .tok-n{color:#d19a66}
.chat-code-pre .tok-k{color:#c678dd}
.chat-code-pre .tok-f{color:#61afef}

/* align the chat toolbar with the centered conversation column (transcript/composer = 860px) */
.chat-bar{max-width:860px;width:100%;margin:0 auto}

/* -------- Builder onboarding overlay: fit + scroll on mobile (was center-clipped) -------- */
@media (max-width:820px){
  .canvas-hint{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 14px 172px}
  .ai-build{width:100%;max-width:440px;margin:6px auto 18px}
  .ai-build-row{flex-direction:column}
  .ai-go{width:100%}
  .ch-sub{margin:4px 0 14px}
  .template-cards{width:100%;max-width:440px;gap:12px}
  .tcard{width:100%;padding:14px 16px}
  .tcard-ico{width:32px;height:32px;font-size:16px;margin-bottom:8px}
  .tcard-name{font-size:14px;margin-bottom:4px}
  .tcard-go{margin-top:8px}
}

/* -------- Mobile: top nav collapses into a hamburger dropdown -------- */
.nav-burger{display:none}
@media (max-width:820px){
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:38px;height:38px;background:var(--panel2);border:1px solid var(--line2);border-radius:2px;
    color:var(--txt);font-size:18px;line-height:1;cursor:pointer;margin-right:2px}
  .nav-burger:hover{border-color:var(--acc)}
  .topbar{position:relative}
  /* the tab row becomes a dropdown panel anchored under the header, toggled by the burger */
  .tabs{order:0;position:absolute;top:100%;left:0;right:0;width:auto;margin:0;flex-direction:column;
    gap:2px;background:var(--panel);border-bottom:1px solid var(--line2);box-shadow:var(--shadow);
    padding:6px;z-index:60;display:none;overflow:visible}
  .tabs.open{display:flex}
  .tabs .tab{width:100%;text-align:left;justify-content:flex-start;border-radius:2px;padding:12px 14px;font-size:15px}
}

/* -------- Profile dropdown (avatar → account + Sign out) -------- */
.user-wrap{position:relative}
.user-chip{cursor:pointer;user-select:none}
.user-chip:hover .avatar{box-shadow:0 0 0 2px var(--line2)}
.user-caret{color:var(--dim);font-size:10px;margin-left:1px}
.user-menu{position:absolute;top:46px;right:0;min-width:210px;z-index:60;background:var(--panel);
  border:1px solid var(--line2);border-radius:2px;box-shadow:var(--shadow);padding:6px}
.user-menu.hidden{display:none}
.um-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.um-name{font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-tenant{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.um-item{width:100%;text-align:left;background:transparent;border:0;color:var(--txt);font:inherit;font-size:13px;
  padding:9px 10px;border-radius:2px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:.15s}
.um-item:hover{background:var(--panel2);color:var(--red)}

/* -------- Analytics: fit the 14-day chart on mobile (was overflowing the right edge) -------- */
@media (max-width:820px){
  .an-col{min-width:0}                                  /* let columns shrink so all 14 days fit */
  .an-chart{gap:4px}
  .an-x{font-size:9px}
  .an-col:nth-child(even) .an-x{visibility:hidden}      /* thin labels so they don't force overflow / overlap */
}

/* -------- Chat toolbar: model + refresh on row 1, params below; think as a slide toggle -------- */
.chat-bar{flex-direction:column;align-items:stretch;gap:9px}
.chat-bar-r{justify-content:flex-start}
.chat-model{min-width:150px;max-width:260px}
.insp-toggle input{position:absolute;opacity:0;width:0;height:0}   /* let the slide toggle work outside the inspector */

/* -------- Arena: collapsible options bar -------- */
.arena-opts-btn{align-self:flex-start;margin-top:7px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:2px;color:var(--txt);font:inherit;font-size:12px;font-weight:600;padding:6px 12px;cursor:pointer;transition:.15s}
.arena-opts-btn:hover{border-color:var(--acc)}
.arena-bar.collapsed .arena-bar-r{display:none}

/* ---- consistent EntBox styling for every form control (kills native-white inputs/selects) ---- */
:root{color-scheme:dark}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea{
  background-color:var(--panel2); color:var(--txt); border:1px solid var(--line2); border-radius:var(--rad);
}
select option{background:var(--panel);color:var(--txt)}
input::placeholder,textarea::placeholder{color:var(--dim)}
/* controls that used faint transparent fills (native white showed through) → solid EntBox fill */
.arena-lbl input,.arena-lbl select,.jchat-input textarea{background:var(--panel2);border:1px solid var(--line2)}

/* -------- Account modal + avatar image -------- */
.avatar.has-img{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent}
.acct-modal{max-height:90vh;overflow-y:auto}
.acct-avatar-row{display:flex;align-items:center;gap:16px;margin:6px 0 14px}
.acct-avatar{width:72px;height:72px;flex:0 0 auto;border-radius:var(--rad);display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:28px;color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));
  background-size:cover;background-position:center;border:1px solid var(--line2)}
.acct-avatar.has-img{color:transparent}
.acct-avatar-ctl{min-width:0}
.acct-avatar-btns{display:flex;gap:8px;flex-wrap:wrap}
.acct-hint{font-size:11px;color:var(--dim);margin-top:6px}
.acct-section{font-family:var(--font-head);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  color:var(--acc2);margin:16px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.acct-opt{color:var(--dim);font-weight:400;text-transform:none;letter-spacing:0}
.acct-meta{font-size:12px;color:var(--mut);margin:6px 0 2px}
.acct-meta b{color:var(--txt);text-transform:capitalize}
.acct-err,.acct-pwerr{font-size:12.5px;color:var(--red);min-height:16px;margin:6px 0 2px}
.acct-sep{height:1px;background:var(--line);margin:20px 0 4px}
.acct-modal .modal-actions{margin-top:6px}
@media (max-width:820px){ .acct-grid{grid-template-columns:1fr} .acct-modal{width:94vw} }