/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --bg:       #07080f;
  --s1:       #0c0e1b;
  --s2:       #101323;
  --s3:       #161929;
  --sh:       #1a1d2e;

  --border:   #1b1e33;
  --border2:  #232640;

  --green:    #00d97e;
  --g-dim:    rgba(0,217,126,.07);
  --g-bdr:    rgba(0,217,126,.18);
  --g-glow:   rgba(0,217,126,.14);

  --amber:    #f59e0b;
  --a-dim:    rgba(245,158,11,.07);
  --a-bdr:    rgba(245,158,11,.2);

  --blue:     #3b82f6;
  --b-dim:    rgba(59,130,246,.07);
  --b-bdr:    rgba(59,130,246,.2);

  --red:      #ef4444;
  --r-dim:    rgba(239,68,68,.07);
  --r-bdr:    rgba(239,68,68,.2);

  --yellow:   #eab308;
  --y-dim:    rgba(234,179,8,.07);
  --y-bdr:    rgba(234,179,8,.2);

  --purple:   #8b5cf6;
  --p-dim:    rgba(139,92,246,.07);

  --text:     #eef0fa;
  --t2:       #8892a8;
  --t3:       #525b70;
  --t4:       #2a3148;

  --r-xs:     4px;
  --r-sm:     6px;
  --r:        10px;
  --r-lg:     14px;
  --r-xl:     20px;

  --sidebar:  228px;
  --topbar:   54px;
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,sans-serif;font-size:14px;line-height:1.5;min-height:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--t3)}

/* ═══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.4);opacity:0}}
@keyframes fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes slide-right{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ═══════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════ */
#login-page{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;background:var(--bg);
  position:relative;overflow:hidden;
}
#login-page::before{
  content:'';position:absolute;width:700px;height:700px;
  background:radial-gradient(circle,rgba(0,217,126,.05) 0%,transparent 70%);
  top:-250px;right:-250px;pointer-events:none;
}
#login-page::after{
  content:'';position:absolute;width:500px;height:500px;
  background:radial-gradient(circle,rgba(59,130,246,.04) 0%,transparent 70%);
  bottom:-150px;left:-150px;pointer-events:none;
}
.login-wrap{width:100%;max-width:384px;position:relative;z-index:1;animation:fade-up .4s ease}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;justify-content:center}
.login-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--green),#009a58);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;color:#000;
  box-shadow:0 0 24px var(--g-glow);
}
.login-brand-name{font-size:18px;font-weight:700;letter-spacing:-.3px}
.login-card{
  background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:36px;
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px var(--border);
}
.login-head{text-align:center;margin-bottom:28px}
.login-head h2{font-size:19px;font-weight:700;letter-spacing:-.3px;margin-bottom:5px}
.login-head p{font-size:12px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.lf{margin-bottom:14px}
.lf label{display:block;font-size:11px;font-weight:500;color:var(--t2);margin-bottom:6px;letter-spacing:.2px}
.lf input{
  width:100%;background:var(--s2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:10px 14px;color:var(--text);
  font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;
  font-family:inherit;
}
.lf input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--g-glow)}
.lf .pw-wrap{position:relative}
.lf .pw-wrap input{padding-right:42px}
.lf .eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:17px;display:flex;align-items:center;cursor:pointer;transition:color .15s}
.lf .eye:hover{color:var(--t2)}
.login-submit{
  width:100%;padding:12px;background:var(--green);color:#000;
  border-radius:var(--r-sm);font-size:14px;font-weight:700;
  transition:opacity .15s,transform .1s;margin-top:4px;letter-spacing:.1px;
}
.login-submit:hover{opacity:.9}
.login-submit:active{transform:scale(.99)}
.login-error{
  display:none;margin-top:12px;padding:9px 13px;
  background:var(--r-dim);border:1px solid var(--r-bdr);
  border-radius:var(--r-sm);font-size:12px;color:var(--red);
  text-align:center;font-family:'JetBrains Mono',monospace;
}

/* ═══════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════ */
#app{display:none;height:100vh;overflow:hidden}
.layout{display:flex;height:100vh}

/* ═══════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════ */
.sidebar{
  width:var(--sidebar);background:var(--s1);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;z-index:100;
}
.sb-brand{padding:18px 14px 14px;border-bottom:1px solid var(--border)}
.sb-brand-inner{display:flex;align-items:center;gap:10px}
.sb-mark{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--green),#008f4e);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#000;flex-shrink:0;
  box-shadow:0 0 14px rgba(0,217,126,.2);
}
.sb-brand-text{flex:1;min-width:0}
.sb-brand-text h2{font-size:13px;font-weight:700;letter-spacing:-.2px;line-height:1.2}
.sb-brand-text span{font-size:9px;color:var(--t3);font-family:'JetBrains Mono',monospace;letter-spacing:.3px}

.sb-live{
  margin:10px 10px 0;display:flex;align-items:center;gap:8px;
  padding:7px 10px;background:var(--g-dim);border:1px solid var(--g-bdr);
  border-radius:var(--r-sm);
}
.live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  position:relative;flex-shrink:0;animation:pulse-dot 2s infinite;
}
.live-dot::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:1px solid var(--green);animation:pulse-ring 2s infinite;
}
.live-txt{font-size:11px;font-weight:600;color:var(--green);letter-spacing:.4px;font-family:'JetBrains Mono',monospace}

.nav{flex:1;padding:8px;overflow-y:auto}
.nav-label{
  font-size:9px;font-weight:700;color:var(--t4);
  text-transform:uppercase;letter-spacing:1.5px;
  padding:10px 10px 4px;font-family:'JetBrains Mono',monospace;
}
.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--t3);font-size:13px;font-weight:500;
  transition:all .12s;margin-bottom:1px;position:relative;user-select:none;
}
.nav-item i{font-size:17px;flex-shrink:0}
.nav-item:hover{color:var(--t2);background:var(--s2)}
.nav-item.active{color:var(--text);background:var(--s3)}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:16px;background:var(--green);border-radius:0 3px 3px 0;
}
.nav-badge{
  margin-left:auto;background:var(--r-dim);color:var(--red);
  border:1px solid var(--r-bdr);font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:10px;font-family:'JetBrains Mono',monospace;
}

.sb-bottom{padding:10px 8px;border-top:1px solid var(--border)}
.sb-time{
  text-align:center;font-size:10px;color:var(--t3);
  font-family:'JetBrains Mono',monospace;padding:4px 0 8px;
}
.logout-row{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--red);font-size:13px;font-weight:500;
  transition:background .12s;width:100%;
}
.logout-row i{font-size:17px}
.logout-row:hover{background:var(--r-dim)}

/* ═══════════════════════════════════════════
   MAIN
═══════════════════════════════════════════ */
.main{flex:1;overflow:hidden;display:flex;flex-direction:column}

.topbar{
  height:var(--topbar);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;flex-shrink:0;background:var(--s1);
}
.tb-left{display:flex;flex-direction:column;gap:1px}
.tb-title{font-size:15px;font-weight:600;letter-spacing:-.2px}
.tb-sub{font-size:10px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-btn{
  display:flex;align-items:center;gap:5px;
  padding:6px 11px;background:var(--s2);border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:12px;color:var(--t2);font-weight:500;
  transition:all .12s;
}
.tb-btn:hover{background:var(--s3);color:var(--text);border-color:var(--border2)}
.tb-btn i{font-size:14px}

.content{flex:1;overflow-y:auto;padding:24px 28px}
.page{display:none}
.page.active{display:block;animation:fade-up .18s ease}

/* ═══════════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════════ */
.ph{margin-bottom:22px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ph-left h2{font-size:21px;font-weight:700;letter-spacing:-.4px;margin-bottom:3px}
.ph-left p{font-size:11px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.ph-right{display:flex;gap:8px;flex-shrink:0}

/* ═══════════════════════════════════════════
   CARDS
═══════════════════════════════════════════ */
.card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:14px;overflow:hidden}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid var(--border);
}
.card-title{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:1.6px;color:var(--t3);
  display:flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;
}
.card-title i{font-size:14px}
.card-body{padding:18px}

/* ═══════════════════════════════════════════
   KPI GRID
═══════════════════════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.kpi-grid-4{grid-template-columns:repeat(4,1fr)}
.kpi{
  background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;
  transition:border-color .15s,transform .15s;cursor:default;
}
.kpi:hover{border-color:var(--border2);transform:translateY(-1px)}
.kpi-lbl{
  font-size:9px;color:var(--t3);text-transform:uppercase;
  letter-spacing:1.3px;font-family:'JetBrains Mono',monospace;
  font-weight:700;margin-bottom:10px;
  display:flex;align-items:center;gap:5px;
}
.kpi-lbl i{font-size:12px}
.kpi-val{
  font-size:26px;font-weight:700;font-family:'JetBrains Mono',monospace;
  line-height:1;letter-spacing:-1px;color:var(--text);
}
.kpi-green .kpi-val{color:var(--green)}
.kpi-red .kpi-val{color:var(--red)}
.kpi-amber .kpi-val{color:var(--amber)}
.kpi-blue .kpi-val{color:var(--blue)}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;transition:all .12s;
  border:1px solid transparent;line-height:1;letter-spacing:.1px;
  font-family:inherit;cursor:pointer;user-select:none;
}
.btn i{font-size:15px}
.btn:active{transform:scale(.98)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-sm i{font-size:13px}
.btn-xs{padding:3px 8px;font-size:11px}
.btn-primary{background:var(--green);color:#000;border-color:transparent}
.btn-primary:hover{opacity:.9}
.btn-amber{background:var(--amber);color:#000;font-weight:700;border-color:transparent}
.btn-amber:hover{opacity:.9}
.btn-blue{background:var(--blue);color:#fff;border-color:transparent}
.btn-blue:hover{opacity:.9}
.btn-purple{background:linear-gradient(135deg,var(--purple),#5b21b6);color:#fff;border-color:transparent}
.btn-purple:hover{opacity:.9}
.btn-ghost{background:transparent;color:var(--t2);border-color:var(--border)}
.btn-ghost:hover{background:var(--s2);color:var(--text);border-color:var(--border2)}
.btn-danger{background:transparent;color:var(--red);border-color:var(--r-bdr)}
.btn-danger:hover{background:var(--r-dim)}
.btn-surface{background:var(--s2);color:var(--t2);border-color:var(--border)}
.btn-surface:hover{background:var(--s3);color:var(--text)}

/* ═══════════════════════════════════════════
   BADGES
═══════════════════════════════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:var(--r-xs);
  font-size:9px;font-weight:700;letter-spacing:.6px;
  font-family:'JetBrains Mono',monospace;border:1px solid transparent;
}
.b-master{background:var(--a-dim);color:var(--amber);border-color:var(--a-bdr)}
.b-agent{background:var(--b-dim);color:var(--blue);border-color:var(--b-bdr)}
.b-online{background:var(--g-dim);color:var(--green);border-color:var(--g-bdr)}
.b-offline{background:var(--r-dim);color:var(--red);border-color:var(--r-bdr)}
.b-paused{background:var(--y-dim);color:var(--yellow);border-color:var(--y-bdr)}
.b-none{background:var(--s2);color:var(--t3);border-color:var(--border)}

/* ═══════════════════════════════════════════
   STATUS DOT
═══════════════════════════════════════════ */
.sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sdot-green{background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse-dot 2s infinite}
.sdot-red{background:var(--red)}
.sdot-yellow{background:var(--yellow)}

/* ═══════════════════════════════════════════
   FORMS
═══════════════════════════════════════════ */
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:11px;font-weight:500;color:var(--t2);letter-spacing:.2px}
.fg input,.fg select{
  background:var(--s2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:9px 12px;color:var(--text);
  font-size:13px;outline:none;width:100%;
  transition:border-color .15s,box-shadow .15s;font-family:inherit;
}
.fg input[type="number"]{font-family:'JetBrains Mono',monospace}
.fg input:focus,.fg select:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--g-glow)}
.fg input::placeholder{color:var(--t4)}
.fg select{cursor:pointer}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.span2{grid-column:span 2}
.iw{position:relative}
.iw input{padding-right:40px}
.eye-btn{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--t3);font-size:17px;
  display:flex;align-items:center;cursor:pointer;transition:color .15s;
}
.eye-btn:hover{color:var(--t2)}
.note{font-size:12px;color:var(--t3);line-height:1.55;display:flex;align-items:flex-start;gap:6px}
.note i{font-size:14px;flex-shrink:0;margin-top:1px;color:var(--blue)}
.mono{font-family:'JetBrains Mono',monospace!important}

/* ═══════════════════════════════════════════
   TOGGLE
═══════════════════════════════════════════ */
.toggle-wrap{display:flex;align-items:center;gap:8px}
.toggle{position:relative;width:36px;height:20px;cursor:pointer;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.tslider{
  position:absolute;inset:0;background:var(--s3);
  border-radius:20px;border:1px solid var(--border);transition:.18s;
}
.tslider::before{
  content:'';position:absolute;width:14px;height:14px;
  left:2px;top:2px;background:var(--t3);border-radius:50%;transition:.18s;
}
.toggle input:checked+.tslider{background:var(--green);border-color:var(--green)}
.toggle input:checked+.tslider::before{transform:translateX(16px);background:#000}
.tlabel{font-size:11px;font-family:'JetBrains Mono',monospace;font-weight:600;min-width:24px}

/* ═══════════════════════════════════════════
   TABS
═══════════════════════════════════════════ */
.tabs{
  display:flex;gap:2px;background:var(--s2);
  border-radius:var(--r);padding:3px;margin-bottom:18px;
  border:1px solid var(--border);
}
.tab{
  flex:1;padding:7px 12px;border-radius:8px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--t3);background:transparent;
  border:1px solid transparent;transition:all .12s;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.tab i{font-size:14px}
.tab.active{background:var(--s1);color:var(--text);border-color:var(--border);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.tab:not(.active):hover{color:var(--t2);background:var(--sh)}

/* ═══════════════════════════════════════════
   LIST TOOLBAR
═══════════════════════════════════════════ */
.list-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.search-box{position:relative;flex:1;min-width:180px;max-width:280px}
.search-box i{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--t3);pointer-events:none;
}
.search-box input{
  width:100%;background:var(--s2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:7px 12px 7px 33px;
  color:var(--text);font-size:13px;outline:none;transition:border-color .15s;
}
.search-box input:focus{border-color:var(--green)}
.search-box input::placeholder{color:var(--t4)}
.fpills{display:flex;gap:4px;flex-wrap:wrap}
.fpill{
  padding:4px 11px;border-radius:20px;border:1px solid var(--border);
  background:transparent;color:var(--t3);font-size:11px;font-weight:500;
  cursor:pointer;transition:all .12s;font-family:inherit;
}
.fpill:hover{border-color:var(--border2);color:var(--t2)}
.fpill.on{background:var(--s3);border-color:var(--green);color:var(--green)}
.fpill .fc{font-family:'JetBrains Mono',monospace;font-size:10px;opacity:.7;margin-left:2px}

/* ═══════════════════════════════════════════
   NODE CARDS
═══════════════════════════════════════════ */
.nodes-list{display:flex;flex-direction:column;gap:7px}
.node-card{
  background:var(--s2);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;transition:border-color .12s;
}
.node-card:hover{border-color:var(--border2)}
.node-card.is-master{border-color:var(--a-bdr);background:rgba(245,158,11,.02)}
.node-main{display:flex;align-items:center;gap:12px;padding:11px 13px}
.nav-av{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:var(--s3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:var(--t2);flex-shrink:0;
}
.nav-av.av-master{background:var(--a-dim);border-color:var(--a-bdr);color:var(--amber)}
.node-info{flex:1;min-width:0}
.node-name{font-weight:600;font-size:13px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:3px}
.node-url{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-actions{display:flex;gap:5px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.node-edit{display:none;padding:14px;border-top:1px solid var(--border);background:var(--s1)}
.node-edit.open{display:block;animation:fade-up .14s ease}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.mul-input{
  width:58px;text-align:center;padding:5px 8px;font-size:12px;
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);font-family:'JetBrains Mono',monospace;outline:none;
  transition:border-color .15s;
}
.mul-input:focus{border-color:var(--green)}

/* ═══════════════════════════════════════════
   MASTER HIERARCHY
═══════════════════════════════════════════ */
.master-group{
  border:1px solid var(--a-bdr);border-radius:var(--r-lg);
  margin-bottom:12px;overflow:hidden;background:rgba(245,158,11,.02);
}
.mg-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;background:rgba(245,158,11,.04);
  border-bottom:1px solid var(--a-bdr);
}
.mg-head-left{display:flex;align-items:center;gap:11px}
.mg-av{
  width:38px;height:38px;border-radius:var(--r-sm);
  background:var(--a-dim);border:1px solid var(--a-bdr);
  display:flex;align-items:center;justify-content:center;
  color:var(--amber);font-size:18px;flex-shrink:0;
}
.mg-info h3{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:2px}
.mg-info p{font-size:10px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.mg-head-right{display:flex;align-items:center;gap:8px}
.fcount{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--amber);background:var(--a-dim);border:1px solid var(--a-bdr);
  padding:3px 8px;border-radius:var(--r-xs);font-weight:600;
}
.mg-clients{background:var(--bg)}
.follower-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 46px;border-top:1px solid var(--border);
  position:relative;transition:background .12s;
}
.follower-row::before{content:'';position:absolute;left:28px;top:0;bottom:0;width:1px;background:var(--border)}
.follower-row::after{content:'';position:absolute;left:28px;top:50%;width:12px;height:1px;background:var(--border)}
.follower-row:hover{background:var(--s2)}
.f-av{
  width:28px;height:28px;border-radius:5px;background:var(--s3);
  border:1px solid var(--border);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:11px;color:var(--t2);flex-shrink:0;
}
.f-info{flex:1;min-width:0}
.f-name{font-size:12px;font-weight:600;display:flex;align-items:center;gap:5px}
.f-url{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3)}
.follower-empty{
  padding:12px 14px 12px 46px;font-size:11px;color:var(--t3);
  font-family:'JetBrains Mono',monospace;border-top:1px solid var(--border);
}
.master-select{
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:5px 9px;color:var(--text);font-size:12px;cursor:pointer;
  outline:none;font-family:inherit;transition:border-color .15s;
}
.master-select:focus{border-color:var(--green)}

/* ═══════════════════════════════════════════
   MASTER DISPLAY (dashboard)
═══════════════════════════════════════════ */
.master-display-row{display:flex;align-items:center;gap:14px;padding:4px 0}
.master-icon-lg{
  width:46px;height:46px;border-radius:12px;background:var(--a-dim);
  border:1px solid var(--a-bdr);display:flex;align-items:center;
  justify-content:center;font-size:22px;color:var(--amber);flex-shrink:0;
}
.master-nm{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:3px}
.master-url-sm{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3)}

/* ═══════════════════════════════════════════
   NODES TABLE
═══════════════════════════════════════════ */
.nodes-table{width:100%;border-collapse:collapse}
.nodes-table th{
  text-align:left;font-size:9px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:1.2px;
  font-family:'JetBrains Mono',monospace;
  padding:0 14px 10px;border-bottom:1px solid var(--border);
}
.nodes-table td{padding:9px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.nodes-table tr:last-child td{border-bottom:none}
.nodes-table tr:hover td{background:var(--s2)}

/* ═══════════════════════════════════════════
   PROGRESS
═══════════════════════════════════════════ */
.prog-wrap{
  display:none;padding:13px;background:var(--s2);
  border:1px solid var(--g-bdr);border-radius:var(--r);margin-bottom:14px;
}
.prog-bar{height:4px;background:var(--s3);border-radius:4px;margin:8px 0;overflow:hidden}
.prog-fill{
  height:100%;background:linear-gradient(90deg,var(--green),#009a58);
  border-radius:4px;transition:width .5s ease;
}
.prog-msg{font-size:12px;color:var(--t2);font-family:'JetBrains Mono',monospace}
.prog-pct{font-size:10px;color:var(--t3);font-family:'JetBrains Mono',monospace;float:right}

/* ═══════════════════════════════════════════
   INLINE ALERT
═══════════════════════════════════════════ */
.alert{
  padding:9px 13px;border-radius:var(--r-sm);font-size:12px;
  font-family:'JetBrains Mono',monospace;margin-bottom:12px;
  display:none;border:1px solid;
}
.alert-ok{background:var(--g-dim);color:var(--green);border-color:var(--g-bdr)}
.alert-err{background:var(--r-dim);color:var(--red);border-color:var(--r-bdr)}

/* ═══════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════ */
.empty{text-align:center;padding:48px 24px;color:var(--t3)}
.empty i{font-size:38px;margin-bottom:12px;display:block;opacity:.35}
.empty-title{font-size:14px;font-weight:600;color:var(--t2);margin-bottom:6px}
.empty-desc{font-size:12px;line-height:1.6;max-width:260px;margin:0 auto 16px}
.empty-sm{text-align:center;padding:20px;color:var(--t3);font-size:11px;font-family:'JetBrains Mono',monospace}

/* ═══════════════════════════════════════════
   SKELETON
═══════════════════════════════════════════ */
.skel{
  background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:4px;
}
.sk-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}
.sk-av{width:36px;height:36px;border-radius:var(--r-sm);flex-shrink:0}
.sk-block{display:flex;flex-direction:column;gap:6px;flex:1}

/* ═══════════════════════════════════════════
   BILLING
═══════════════════════════════════════════ */
.rev-banner{
  background:linear-gradient(135deg,rgba(0,217,126,.04),rgba(59,130,246,.04));
  border:1px solid var(--g-bdr);border-radius:var(--r-lg);
  padding:20px 22px;margin-bottom:14px;
}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:14px}
.rev-item{text-align:center;padding:0 16px;border-right:1px solid var(--border)}
.rev-item:last-child{border-right:none}
.rev-val{font-size:20px;font-weight:700;font-family:'JetBrains Mono',monospace;margin-bottom:3px}
.rev-lbl{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;font-family:'JetBrains Mono',monospace}

.sub-card{
  background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r-lg);margin-bottom:9px;overflow:hidden;transition:border-color .12s;
}
.sub-card:hover{border-color:var(--border2)}
.sub-card-exp{border-color:var(--r-bdr)!important;background:rgba(239,68,68,.02)}
.sub-card-warn{border-color:var(--y-bdr)!important}
.sub-head{display:flex;align-items:center;gap:12px;padding:13px 15px}
.sub-av{
  width:38px;height:38px;border-radius:var(--r-sm);background:var(--s2);
  border:1px solid var(--border);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:16px;color:var(--t2);flex-shrink:0;
}
.sub-info{flex:1;min-width:0}
.sub-nm{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.sub-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--t2);font-family:'JetBrains Mono',monospace;flex-wrap:wrap}
.sub-meta span{display:flex;align-items:center;gap:3px}
.sub-meta i{font-size:11px;color:var(--t3)}
.sub-acts{display:flex;gap:5px;flex-shrink:0;align-items:center}
.days-ok{color:var(--green)!important;font-weight:700}
.days-warn{color:var(--yellow)!important;font-weight:700}
.days-exp{color:var(--red)!important;font-weight:700}
.sub-panel{display:none;border-top:1px solid var(--border);background:var(--s2)}
.sub-panel.open{display:block;animation:fade-up .14s ease}
.sub-panel-inner{padding:15px}
.quick-dates{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.qd-btn{
  padding:4px 10px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--s1);color:var(--t2);font-size:11px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-weight:600;transition:all .12s;
}
.qd-btn:hover{border-color:var(--green);color:var(--green)}
.status-pills{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.spill{
  padding:6px 13px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:transparent;color:var(--t2);font-size:11px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-weight:600;transition:all .12s;
}
.spill-paid.spill-active{background:var(--g-dim);color:var(--green);border-color:var(--g-bdr)}
.spill-unpaid.spill-active{background:var(--r-dim);color:var(--red);border-color:var(--r-bdr)}
.spill-trial.spill-active{background:var(--y-dim);color:var(--yellow);border-color:var(--y-bdr)}
.sub-pfooter{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}

/* ═══════════════════════════════════════════
   SETTINGS
═══════════════════════════════════════════ */
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)}
.setting-row:last-child{border-bottom:none}
.setting-lbl{font-size:13px;font-weight:500;margin-bottom:2px}
.setting-desc{font-size:11px;color:var(--t3)}
.setting-val{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t2);text-align:right}

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */
.toast{
  position:fixed;bottom:22px;right:22px;padding:11px 15px;
  border-radius:var(--r);font-size:13px;font-weight:500;
  z-index:9999;max-width:300px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);border:1px solid;
  display:none;align-items:center;gap:9px;
}
.toast.show{display:flex;animation:slide-right .22s ease}
.toast i{font-size:17px;flex-shrink:0}
.toast-ok{background:var(--s2);color:var(--green);border-color:var(--g-bdr)}
.toast-err{background:var(--s2);color:var(--red);border-color:var(--r-bdr)}

/* ═══════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════ */
@media(max-width:900px){
  .kpi-grid{grid-template-columns:repeat(3,1fr)}
  .kpi-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .layout{flex-direction:column}
  .sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--border)}
  .sb-brand{padding:12px 12px 10px}
  .sb-live{display:none}
  .nav{display:flex;flex-direction:row;padding:5px;overflow-x:auto;gap:2px}
  .nav-label{display:none}
  .nav-item{flex-direction:column;gap:2px;padding:6px 10px;font-size:10px;min-width:56px;text-align:center}
  .nav-item::before{display:none}
  .nav-item i{font-size:20px}
  .sb-bottom{display:none}
  .topbar{padding:0 14px}
  .content{padding:14px}
  .kpi-grid{grid-template-columns:repeat(3,1fr)}
  .kpi-val{font-size:20px}
  .form-grid{grid-template-columns:1fr}
  .span2{grid-column:span 1}
  .edit-grid{grid-template-columns:1fr}
  .rev-grid{grid-template-columns:1fr}
  .rev-item{border-right:none;border-bottom:1px solid var(--border);padding:10px 0;text-align:left}
  .rev-item:last-child{border-bottom:none}
  .mg-head{flex-wrap:wrap;gap:8px}
  .sub-head{flex-wrap:wrap}
  .sub-acts{flex-basis:100%;margin-top:4px}
  .list-bar{flex-wrap:wrap}
  .search-box{max-width:100%}
  .node-actions{flex-wrap:wrap}
  .ph{flex-direction:column}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-grid-4{grid-template-columns:repeat(2,1fr)}
}

/* ── WebSocket status bar ─────────────────────────────────────────────────── */
.ws-bar{display:flex;align-items:center;gap:8px;padding:10px 18px;font-size:12px;font-family:'JetBrains Mono',monospace;border-top:1px solid var(--border);color:var(--t2)}
.ws-bar b{color:var(--t1)}
.ws-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ws-bar-live{background:rgba(0,217,126,.04)}
.ws-dot-live{background:var(--green);box-shadow:0 0 6px var(--green)}
.ws-bar-off{background:rgba(239,68,68,.04)}
.ws-dot-off{background:var(--red);box-shadow:0 0 6px var(--red)}
.ws-bar-warn{background:rgba(245,158,11,.04)}
.ws-dot-warn{background:var(--amber);box-shadow:0 0 6px var(--amber)}