:root{
  --bg:#070b12;
  --bg-soft:#0a101b;
  --panel:rgba(16,24,38,.82);
  --panel-strong:rgba(18,28,44,.94);
  --panel-soft:rgba(11,18,31,.72);
  --border:rgba(148,163,184,.16);
  --border-strong:rgba(148,163,184,.26);
  --text:#e6edf7;
  --muted:#8ea0b8;
  --muted-2:#64748b;
  --accent:#38bdf8;
  --accent-2:#34d399;
  --violet:#8b5cf6;
  --danger:#fb7185;
  --warning:#fbbf24;
  --ok:#34d399;
  --radius:16px;
  --shadow:0 18px 60px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 18% 0%,rgba(56,189,248,.16),transparent 30%),
    radial-gradient(circle at 88% 12%,rgba(139,92,246,.12),transparent 28%),
    linear-gradient(180deg,#070b12 0%,#0a0f1a 100%);
  color:var(--text);
}
button,input,select,textarea{font:inherit}
.hidden{display:none!important}
.mobile-only{display:none}
.panel{
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel),rgba(12,19,32,.84));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.muted{color:var(--muted)}
.eyebrow{
  margin:0 0 8px;
  color:#8bdcff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
h1,h2,h3,h4{margin:0;color:var(--text);letter-spacing:0}
h1{font-size:32px;line-height:1.05}
h2{font-size:28px;line-height:1.1}
h3{font-size:18px;line-height:1.2}
h4{font-size:15px}
p{line-height:1.5}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:min(100%,420px);padding:28px;display:grid;gap:22px}
.login-brand{display:grid;justify-items:center;gap:14px;text-align:center}
.login-brand .brand-mark{width:72px;height:72px;border-radius:22px}
.login-brand h1{font-size:20px;line-height:1.15;letter-spacing:.08em}
.brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(56,189,248,.22),rgba(52,211,153,.16));
  border:1px solid rgba(56,189,248,.24);
  color:#dff8ff;
  font-weight:900;
}
.login-form{display:grid;gap:14px}
.password-field{position:relative}
.password-field input{padding-right:52px}
.password-toggle{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#dbeafe;
  cursor:pointer;
  font-size:16px;
}
.password-toggle:hover{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.22)}
.login-form.is-loading input,.login-form.is-loading .password-toggle{opacity:.72}
label{display:grid;gap:8px;color:var(--muted);font-size:13px}
input,textarea,select{
  width:100%;
  min-height:44px;
  padding:11px 13px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(7,13,24,.82);
  color:var(--text);
  outline:none;
}
textarea{min-height:126px;resize:vertical}
input[type="checkbox"]{
  width:18px;
  height:18px;
  min-width:18px;
  min-height:18px;
  margin:0;
  padding:0;
  border-radius:6px;
  accent-color:#38bdf8;
}
.check-row{
  display:flex;
  grid-template-columns:none;
  flex-direction:row;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  min-height:34px;
  padding:6px 0;
  color:#cbd5e1;
  font-size:13px;
  cursor:pointer;
}
.check-row span{line-height:1.35}
.check-row.is-disabled{opacity:.58;cursor:not-allowed}
.check-row input:disabled{cursor:not-allowed}
input:focus,textarea:focus,select:focus{border-color:rgba(56,189,248,.58);box-shadow:0 0 0 3px rgba(56,189,248,.12)}
.btn,.icon-btn{
  min-height:42px;
  border-radius:14px;
  border:1px solid transparent;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,opacity .14s ease;
}
.btn:hover,.icon-btn:hover{transform:translateY(-1px)}
.btn:disabled,.icon-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(135deg,#38bdf8,#34d399);color:#04131a}
.btn-secondary{background:rgba(15,23,42,.56);color:var(--text);border-color:var(--border)}
.btn-danger{background:rgba(251,113,133,.12);color:#fecdd3;border-color:rgba(251,113,133,.26)}
.btn-success{background:rgba(52,211,153,.12);color:#a7f3d0;border-color:rgba(52,211,153,.26)}
.btn-xs{min-height:34px;padding:8px 10px;font-size:12px;border-radius:12px}
.icon-btn{width:42px;padding:0;background:rgba(15,23,42,.72);color:var(--text);border-color:var(--border)}
.full{width:100%}
.error{min-height:20px;color:#fda4af;font-size:14px}
.app-shell{min-height:100vh;display:grid;grid-template-columns:292px minmax(0,1fr)}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:22px;
  border-right:1px solid var(--border);
  background:rgba(5,10,19,.74);
  backdrop-filter:blur(18px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  z-index:20;
}
.sidebar-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.brand{font-size:22px;font-weight:900}
.brand-subtitle{color:var(--muted);font-size:12px;margin-top:2px}
.nav{display:grid;gap:8px}
.nav-group{margin:16px 8px 4px;color:var(--muted-2);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.nav-link{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:#dbe7f5;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
}
.nav-link:hover{background:rgba(148,163,184,.08);border-color:var(--border)}
.nav-link.is-active{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.32)}
.nav-dot{width:7px;height:7px;border-radius:99px;background:var(--muted-2)}
.nav-link.is-active .nav-dot{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.nav-icon{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(148,163,184,.16);
  border-radius:7px;
  background:rgba(15,23,42,.44);
  color:#8ea0b8;
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.nav-link.is-active .nav-icon{
  color:#67e8f9;
  border-color:rgba(56,189,248,.32);
  background:rgba(56,189,248,.12);
  box-shadow:0 0 0 3px rgba(56,189,248,.06);
}
.sidebar-footer{display:grid;gap:12px}
.admin-meta{padding:12px;border:1px solid var(--border);border-radius:14px;background:rgba(15,23,42,.48);color:var(--muted);font-size:13px}
.main-shell{min-width:0}
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:24px 30px 18px;
  background:linear-gradient(180deg,rgba(7,11,18,.95),rgba(7,11,18,.72));
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(148,163,184,.08);
}
.view-heading{min-width:0}
.view-heading .muted{margin:8px 0 0}
.topbar-actions{display:flex;align-items:center;gap:12px;min-height:42px}
.toast{max-width:420px;color:#93c5fd;font-size:13px;text-align:right}
.content-container{width:min(100%,1480px);margin:0 auto;padding:24px 30px 42px}
.view{display:none}
.view.is-active{display:block}
.state-banner{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.7);
  margin-bottom:16px;
  color:var(--muted);
}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.summary-card{padding:16px;display:grid;gap:8px;min-height:128px}
.summary-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.summary-card small{color:var(--muted);font-weight:800}
.summary-card strong{font-size:30px;line-height:1}
.summary-card .secondary{color:var(--muted);font-size:13px;min-height:18px}
.summary-card.ok{border-color:rgba(52,211,153,.22)}
.summary-card.warn{border-color:rgba(251,191,36,.24)}
.summary-card.danger{border-color:rgba(251,113,133,.24)}
.status-dot{width:9px;height:9px;border-radius:99px;background:var(--accent)}
.status-dot.ok{background:var(--ok)}
.status-dot.warn{background:var(--warning)}
.status-dot.danger{background:var(--danger)}
.dashboard-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
.span-2{grid-column:span 2}
.panel-card,.form-card,.table-panel,.chart-card{padding:18px}
.panel-head,.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.stack-list,.event-list,.compact-list{display:grid;gap:10px}
.stack-item,.event-item,.compact-item{
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(7,13,24,.64);
}
.event-item{display:grid;grid-template-columns:9px minmax(0,1fr);gap:12px}
.event-item .event-copy{min-width:0}
.item-title{font-weight:800}
.meta{color:var(--muted);font-size:13px;margin-top:4px}
.chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
.chart-placeholder{
  min-height:150px;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
  border:1px dashed rgba(148,163,184,.2);
  border-radius:14px;
  background:rgba(7,13,24,.38);
}
.activity-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}
.health-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.infra-panel{margin-bottom:18px}
.infra-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.infra-card{
  display:grid;
  gap:8px;
  min-height:96px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(7,13,24,.55);
}
.infra-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.infra-card small{color:var(--muted);font-size:12px;font-weight:800}
.infra-card strong{font-size:20px;line-height:1.1;word-break:break-word}
.infra-card .secondary{color:var(--muted);font-size:12px;line-height:1.35}
.infra-card.ok{border-color:rgba(52,211,153,.22)}
.infra-card.warn{border-color:rgba(251,191,36,.24)}
.infra-card.danger{border-color:rgba(251,113,133,.24)}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:5px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(15,23,42,.62);
  color:#dbeafe;
  font-size:12px;
  font-weight:800;
}
.muted-badge{color:var(--muted)}
.warning-badge{border-color:rgba(251,191,36,.28);color:#fde68a;background:rgba(251,191,36,.1)}
.success-badge{border-color:rgba(52,211,153,.28);color:#a7f3d0;background:rgba(52,211,153,.1)}
.danger-badge{border-color:rgba(251,113,133,.3);color:#fecdd3;background:rgba(251,113,133,.1)}
.provider-badge{color:#bfdbfe;background:rgba(59,130,246,.1);border-color:rgba(96,165,250,.22)}
.link-button{
  border:0;
  padding:0;
  background:transparent;
  color:#7dd3fc;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.link-button:hover{color:#bae6fd;text-decoration:underline}
.danger-panel{border-color:rgba(251,113,133,.2)}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.toolbar.wrap{flex-wrap:wrap}
.toolbar.compact{margin-top:16px;margin-bottom:0}
.compact-bottom{margin-bottom:14px}
.toolbar input,.toolbar select{width:auto;min-width:180px}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:rgba(7,13,24,.52)}
table{width:100%;border-collapse:collapse;min-width:820px}
th,td{padding:13px 12px;border-bottom:1px solid rgba(148,163,184,.09);text-align:left;vertical-align:top}
th{color:#b9c7d8;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
tbody tr:hover{background:rgba(148,163,184,.04)}
td .actions,.actions{display:flex;gap:8px;flex-wrap:wrap}
.row-actions{position:relative;display:inline-flex;justify-content:flex-end}
.action-menu-trigger{min-width:74px}
.action-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:18;
  width:178px;
  display:grid;
  gap:4px;
  padding:7px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  background:rgba(9,15,28,.98);
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}
.action-menu-item{
  width:100%;
  min-height:32px;
  border:0;
  border-radius:10px;
  padding:7px 9px;
  background:transparent;
  color:#dbeafe;
  text-align:left;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.action-menu-item:hover{background:rgba(56,189,248,.1);color:#f8fafc}
.action-menu-item.danger{color:#fecdd3}
.action-menu-item.danger:hover{background:rgba(251,113,133,.12)}
.action-menu-note{
  padding:7px 9px;
  color:#7f90a9;
  font-size:11px;
  line-height:1.35;
}
.table-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.pager{display:flex;gap:8px}
.form-grid{display:grid;gap:14px}
.subscriptions-form-grid{grid-template-columns:2fr 1fr 1fr}
.nodes-form-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.vpn-form-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.branding-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.compact-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.endpoint-display-grid{gap:12px}
.endpoint-runtime-box{
  padding:12px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:13px;
  background:rgba(7,13,24,.5);
}
.endpoint-runtime-title{
  margin-bottom:8px;
  color:#dbeafe;
  font-size:13px;
  font-weight:900;
}
.stack-label{display:grid;gap:8px;margin-top:14px}
.code-box,.status-box{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:360px;
  overflow:auto;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(7,13,24,.78);
  color:#cbd5e1;
}
.status-box{margin:12px 0}
.config-editor{min-height:340px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.vpn-control-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;margin-top:18px}
.happ-summary-card{
  min-height:94px;
  box-shadow:none;
}
#view-vpn .summary-grid{
  grid-template-columns:repeat(5,minmax(160px,1fr));
  align-items:stretch;
  gap:10px;
}
#view-vpn .table-panel{
  margin-top:10px;
}
#view-vpn .vpn-control-grid{
  grid-template-columns:minmax(0,1fr) minmax(360px,.78fr);
  gap:14px;
}
#view-vpn .code-box{
  max-height:430px;
  font-size:12px;
  line-height:1.45;
}
#view-vpn .form-card{
  box-shadow:none;
}
#view-vpn .branding-form-grid{
  gap:12px;
}
.support-layout{display:grid;grid-template-columns:minmax(360px,40%) minmax(560px,60%);gap:18px;align-items:start}
.support-inbox-card,.thread-card{min-height:680px;padding:18px}
.support-list{display:grid;gap:10px;max-height:650px;overflow:auto}
.support-ticket{padding:14px 15px;border:1px solid var(--border);border-radius:14px;background:rgba(7,13,24,.68);cursor:pointer;display:grid;gap:8px}
.support-ticket:hover,.support-ticket.is-active{border-color:rgba(56,189,248,.36);box-shadow:0 0 0 1px rgba(56,189,248,.12) inset}
.support-ticket-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.support-ticket-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.support-ticket-subject{font-weight:800}
.support-ticket-preview{color:#cbd5e1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-summary{padding:14px 15px;border:1px solid var(--border);border-radius:14px;background:rgba(7,13,24,.68);margin-bottom:14px}
.ticket-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;color:#cbd5e1}
.thread{display:flex;flex-direction:column;gap:12px;max-height:500px;overflow:auto;padding-right:4px;margin-bottom:14px}
.bubble{max-width:78%;display:grid;gap:8px;padding:12px 14px;border-radius:14px}
.bubble.user{align-self:flex-start;background:rgba(7,13,24,.72);border:1px solid var(--border)}
.bubble.admin{align-self:flex-end;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.24)}
.bubble-role{text-transform:uppercase;font-size:12px;font-weight:800;color:#e2e8f0;letter-spacing:.05em}
.bubble-text{white-space:pre-wrap;word-break:break-word;line-height:1.45}
#ticket-reply{min-height:132px}
.user-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.info-card{border:1px solid var(--border);background:rgba(7,13,24,.62);border-radius:14px;padding:15px}
.line{margin-bottom:7px;color:#cbd5e1}
.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.setting-card{padding:14px;border:1px solid var(--border);border-radius:14px;background:rgba(7,13,24,.62)}
.setting-card small{display:block;color:var(--muted);font-weight:800;margin-bottom:6px}
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:18px}
.modal-backdrop{position:absolute;inset:0;background:rgba(1,5,12,.76);backdrop-filter:blur(8px)}
.modal-card,.confirm-card{position:relative;z-index:1;width:min(920px,calc(100vw - 32px));padding:20px}
.detail-modal{place-items:stretch end;padding:0}
.detail-modal .modal-backdrop{background:rgba(1,5,12,.58)}
.detail-modal .modal-card{
  width:min(1040px,100vw);
  height:100vh;
  max-height:none;
  overflow:auto;
  border-radius:18px 0 0 18px;
  border-right:0;
  animation:detailSlideIn .16s ease-out;
}
@keyframes detailSlideIn{
  from{transform:translateX(22px);opacity:.82}
  to{transform:translateX(0);opacity:1}
}
.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}
.modal-body{display:grid;gap:14px}
.confirm-card{width:min(460px,calc(100vw - 32px));display:grid;gap:18px}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px}
.drawer-backdrop{position:fixed;inset:0;background:rgba(1,5,12,.62);z-index:19}
@media (max-width:1280px){
  .summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chart-grid,.health-grid{grid-template-columns:1fr}
  .infra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-layout{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .nodes-form-grid,.vpn-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vpn-control-grid,.support-layout{grid-template-columns:1fr}
}
@media (max-width:920px){
  .mobile-only{display:grid}
  .app-shell{display:block}
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    width:min(86vw,312px);
    transform:translateX(-105%);
    transition:transform .18s ease;
  }
  .sidebar.is-open{transform:translateX(0)}
  .topbar{padding:18px 16px;align-items:center}
  .view-heading h2{font-size:22px}
  .view-heading .muted,.view-heading .eyebrow{display:none}
  .topbar-actions{margin-left:auto}
  #refresh-view{display:none}
  .content-container{padding:18px 14px 34px}
  .summary-grid,.activity-grid,.settings-grid{grid-template-columns:1fr}
  .infra-grid{grid-template-columns:1fr}
  .subscriptions-form-grid,.nodes-form-grid,.branding-form-grid,.user-grid{grid-template-columns:1fr}
  .toolbar{align-items:stretch}
  .toolbar input,.toolbar select,.toolbar .btn{width:100%;min-width:0}
  .table-wrap{border:0;background:transparent;overflow:visible}
  table{min-width:0}
  thead{display:none}
  tbody{display:grid;gap:10px}
  tr{display:grid;border:1px solid var(--border);border-radius:14px;background:rgba(7,13,24,.64);padding:8px}
  td{display:grid;grid-template-columns:minmax(110px,36%) minmax(0,1fr);gap:10px;border-bottom:0;padding:8px}
  td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}
  td[colspan]::before{display:none}
  .support-ticket-top,.table-footer,.confirm-actions{align-items:stretch;flex-direction:column}
  .bubble{max-width:94%}
  #node-modal .modal-card{
    width:100vw;
    border-radius:0;
  }
  .node-action-dock{
    grid-template-columns:1fr;
  }
  .node-action-buttons{
    justify-content:flex-start;
  }
  .node-action-group{
    width:100%;
    flex-wrap:wrap;
    border-right:0;
    padding-right:0;
    margin-right:0;
  }
  .node-quick-actions-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:560px){
  .topbar-actions{display:none}
  .summary-card strong{font-size:26px}
  .panel-card,.form-card,.table-panel,.chart-card,.support-inbox-card,.thread-card{padding:14px}
}

/* Admin v2 compact cockpit polish */
body{
  background:linear-gradient(180deg,#060a12 0%,#08111d 56%,#070b12 100%);
}
.app-shell{grid-template-columns:268px minmax(0,1fr)}
.sidebar{padding:18px;background:rgba(5,10,19,.88)}
.sidebar-brand{margin-bottom:22px}
.brand-mark{width:38px;height:38px;border-radius:13px}
.logo-mark{
  overflow:hidden;
  padding:3px;
  background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(52,211,153,.12));
}
.brand-logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:10px;
}
.nav{gap:7px}
.nav-link{min-height:40px;border-radius:13px;padding:9px 11px;font-size:13px}
.sidebar-footer .btn{min-height:40px}
.topbar{padding:18px 24px 14px;align-items:center}
.view-heading .muted{margin-top:6px;font-size:13px}
.content-container{width:min(100%,1460px);padding:18px 24px 36px}
.panel{
  border-color:rgba(148,163,184,.14);
  background:linear-gradient(180deg,rgba(17,25,40,.88),rgba(10,17,29,.86));
  box-shadow:0 14px 44px rgba(0,0,0,.26);
}
.btn,.icon-btn{
  min-height:38px;
  border-radius:12px;
  padding:8px 12px;
  font-size:13px;
}
.btn-xs{min-height:30px;padding:6px 9px;border-radius:10px;font-size:12px}
.btn-primary{box-shadow:0 10px 26px rgba(56,189,248,.14)}
.btn-secondary{background:rgba(15,23,42,.46)}
.summary-grid,.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
  gap:12px;
  align-items:stretch;
  margin-bottom:16px;
}
.card{
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg,rgba(17,25,40,.88),rgba(10,17,29,.86));
  box-shadow:0 14px 44px rgba(0,0,0,.24);
  border-radius:var(--radius);
}
.summary-card,.card.stat{
  min-height:104px;
  height:100%;
  padding:13px 14px;
  display:grid;
  grid-template-rows:auto minmax(28px,1fr) auto;
  align-content:stretch;
  gap:9px;
  border-radius:12px;
}
.summary-card .top,.card.stat .top{align-items:center}
.summary-card small,.card.stat small,.card.stat .label{
  color:#a5b4c8;
  font-size:12px;
  font-weight:800;
  line-height:1.25;
}
.summary-card strong,.card.stat strong,.card.stat .value{
  font-size:27px;
  line-height:1;
  letter-spacing:0;
}
.summary-card .secondary,.card.stat .secondary{
  min-height:0;
  color:#7f90a9;
  font-size:12px;
  line-height:1.3;
}
.metric-card.ok{background:linear-gradient(180deg,rgba(18,34,42,.9),rgba(10,20,30,.9))}
.metric-card.warn{background:linear-gradient(180deg,rgba(42,34,18,.72),rgba(17,22,31,.9))}
.metric-card.danger{background:linear-gradient(180deg,rgba(45,20,30,.72),rgba(17,20,30,.9))}
.dashboard-layout,.chart-grid,.activity-grid,.health-grid{gap:14px;margin-bottom:14px}
.panel-card,.form-card,.table-panel,.chart-card{padding:16px}
.panel-head,.section-head{margin-bottom:12px;align-items:center}
.chart-placeholder{min-height:96px;font-size:13px}
.stack-list,.event-list,.compact-list{gap:8px}
.stack-item,.event-item,.compact-item{padding:10px 11px;border-radius:12px}
.item-title{font-size:13px;line-height:1.25}
.meta{font-size:12px;line-height:1.35}
.job-progress{
  width:100%;
  height:5px;
  margin:8px 0 6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(148,163,184,.14);
}
.job-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#38bdf8,#34d399);
}
.badge{
  min-height:23px;
  padding:4px 8px;
  font-size:11px;
  border-radius:999px;
}
.success-badge{border-color:rgba(52,211,153,.28);color:#a7f3d0;background:rgba(52,211,153,.1)}
.danger-badge{border-color:rgba(251,113,133,.3);color:#fecdd3;background:rgba(251,113,133,.1)}
.toolbar{gap:8px;margin-bottom:12px}
.toolbar input,.toolbar select{min-height:38px;min-width:168px;border-radius:12px;padding:8px 11px}
.table-wrap{border-radius:13px}
table{min-width:780px}
th,td{padding:10px 11px}
th{font-size:11px;letter-spacing:.06em}
tbody tr{transition:background .12s ease}
td .actions,.actions,.action-cluster{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.action-cluster .btn,td .actions .btn{white-space:nowrap}
.table-footer{margin-top:12px}
#user-modal .modal-card{
  width:min(1040px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
  padding:18px;
}
#node-modal .modal-card{
  width:min(1180px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
  padding:18px;
}
#node-xray-action-modal .confirm-card{
  width:min(720px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
}
.executor-state{
  display:none;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(15,23,42,.6);
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.executor-state.is-visible{display:block}
.executor-state.is-off{
  border-color:rgba(251,191,36,.32);
  background:rgba(251,191,36,.08);
  color:#fde68a;
}
.executor-state.is-on{
  border-color:rgba(52,211,153,.24);
  background:rgba(52,211,153,.08);
  color:#a7f3d0;
}
.detail-modal#user-modal .modal-card{
  width:min(1040px,100vw);
  height:100vh;
  max-height:none;
  border-radius:18px 0 0 18px;
}
.modal-head{margin-bottom:12px}
.modal-body{gap:12px}
.user-hero{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(56,189,248,.16);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(56,189,248,.12),rgba(52,211,153,.06));
}
.avatar-token{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(56,189,248,.24);
  background:rgba(7,13,24,.72);
  font-weight:900;
  color:#e0f2fe;
}
.user-title{font-size:20px;font-weight:900;line-height:1.1}
.user-hero-copy{min-width:0}
.user-profile-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.bot-message-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  gap:14px;
  align-items:start;
}
.bot-message-grid{
  grid-template-columns:minmax(220px,1fr) minmax(160px,.65fr) minmax(120px,.45fr);
}
.detail-card{padding:14px;border-radius:14px}
.detail-card h4{margin-bottom:10px}
.detail-list{display:grid;gap:8px}
.detail-list div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(148,163,184,.08);
}
.detail-list div:last-child{border-bottom:0;padding-bottom:0}
.detail-list span{color:var(--muted);font-size:12px}
.detail-list strong{font-size:13px;text-align:right;word-break:break-word;min-width:0}
.detail-list strong.full-public-key{overflow-wrap:anywhere;word-break:break-all}
.logs-tail{
  max-height:260px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  padding:12px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  background:rgba(2,6,23,.54);
  color:#cbd5e1;
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.referral-adjust-btn{margin-top:12px;width:100%;justify-content:center}
.inline-head{margin-bottom:10px}
.device-list{display:grid;gap:8px}
.device-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 11px;
  border:1px solid rgba(148,163,184,.12);
  border-radius:12px;
  background:rgba(7,13,24,.42);
}
.empty-panel{
  padding:12px;
  border:1px dashed rgba(148,163,184,.18);
  border-radius:12px;
  color:var(--muted);
}
.user-action-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border:1px solid rgba(148,163,184,.12);
  border-radius:14px;
  background:rgba(7,13,24,.5);
}
.danger-zone{
  border-color:rgba(251,113,133,.22);
  background:rgba(45,20,30,.18);
}

/* Compact operator cockpit refresh */
.nodes-kpi-strip{
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:10px;
  margin-bottom:12px;
}
.nodes-kpi-strip .summary-card{
  min-height:88px;
  padding:12px 13px;
}
.nodes-kpi-strip .summary-card strong{
  font-size:23px;
}
.nodes-create-panel{
  transition:border-color .16s ease,background .16s ease;
}
.nodes-create-panel.is-collapsed{
  padding-bottom:14px;
}
#nodes-create-panel.is-collapsed{
  display:none;
}
.nodes-create-panel.is-collapsed .nodes-form-grid,
.nodes-create-panel.is-collapsed .vpn-form-grid,
.nodes-create-panel.is-collapsed > .toolbar.wrap{
  display:none;
}
.nodes-create-panel.is-collapsed .section-head{
  margin-bottom:0;
}
.node-row-actions{
  justify-content:flex-end;
  gap:5px;
}
.node-row-actions .action-menu{
  width:234px;
}
.node-action-dock{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto;
  gap:12px 16px;
  align-items:center;
  padding:12px 14px;
  border:1px solid rgba(56,189,248,.18);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(56,189,248,.09),rgba(15,23,42,.64));
}
.node-action-copy h4{margin:0}
.node-action-copy .meta{margin-top:3px}
.node-action-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:7px;
}
.node-action-buttons .row-actions{align-self:stretch}
.node-action-buttons .action-menu{
  width:252px;
}
.node-action-dock .executor-state{
  grid-column:1 / -1;
  margin-top:0;
}
.node-tab-bar{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  gap:7px;
  padding:8px;
  overflow:auto;
  border:1px solid rgba(148,163,184,.14);
  border-radius:14px;
  background:rgba(7,13,24,.88);
  backdrop-filter:blur(14px);
}
.node-tab{
  min-height:32px;
  padding:7px 10px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:11px;
  background:rgba(15,23,42,.46);
  color:#b9c7d8;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
}
.node-tab.is-active{
  border-color:rgba(56,189,248,.34);
  background:rgba(56,189,248,.14);
  color:#e0f2fe;
}
.node-tab-panels{display:grid;gap:12px}
.node-tab-panel{display:none}
.node-tab-panel.is-active{display:grid;gap:12px}
#node-modal{
  place-items:stretch end;
  padding:0;
}
#node-modal .modal-backdrop{
  background:rgba(1,5,12,.44);
  backdrop-filter:blur(3px);
}
#node-modal .modal-card{
  width:min(650px,100vw);
  height:100vh;
  max-height:none;
  overflow:auto;
  border-radius:18px 0 0 18px;
  border-right:0;
  box-shadow:-24px 0 56px rgba(0,0,0,.36);
  animation:detailSlideIn .16s ease-out;
}
#node-modal .modal-head{
  position:sticky;
  top:0;
  z-index:8;
  padding-bottom:10px;
  background:linear-gradient(180deg,rgba(13,20,34,.96),rgba(13,20,34,.84));
  backdrop-filter:blur(14px);
}
.node-table-row{
  cursor:pointer;
}
.node-table-row:hover{
  background:rgba(56,189,248,.055);
}
.node-table-row.is-selected{
  background:linear-gradient(90deg,rgba(56,189,248,.12),rgba(52,211,153,.055));
  box-shadow:inset 2px 0 0 rgba(56,189,248,.7);
}
.node-name-cell,
.node-location-cell,
.node-compact-cell,
.node-job-cell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.node-name-cell strong,
.node-location-cell strong,
.node-compact-cell strong,
.node-job-cell strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.node-name-cell span:not(.status-dot),
.node-location-cell span:not(.node-flag),
.node-compact-cell span,
.node-job-cell span{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.node-flag{
  width:24px;
  text-align:center;
  font-size:18px;
  line-height:1;
}
.node-job-cell{
  display:grid;
  gap:2px;
}
.ping-good{color:#86efac;font-weight:900}
.ping-warn{color:#fbbf24;font-weight:900}
.ping-bad{color:#fecdd3;font-weight:900}
.icon-only{
  width:32px;
  min-width:32px;
  padding:0;
  justify-content:center;
}
.node-action-group{
  display:flex;
  align-items:center;
  gap:7px;
  padding-right:8px;
  margin-right:2px;
  border-right:1px solid rgba(148,163,184,.13);
}
.node-action-group:last-child{
  border-right:0;
  padding-right:0;
}
.node-quick-actions-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.node-quick-action{
  display:grid;
  gap:6px;
  min-height:76px;
  padding:12px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  background:rgba(15,23,42,.5);
  color:#e5eefb;
  text-align:left;
  cursor:pointer;
}
.node-quick-action:hover{
  border-color:rgba(56,189,248,.34);
  background:rgba(56,189,248,.09);
}
.node-quick-action:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.node-quick-action span{
  width:100%;
  color:var(--muted);
  font-size:12px;
}
.node-quick-action strong{
  width:100%;
}
.node-summary-disclosure .detail-list,
.node-quick-actions-card{
  margin-top:0;
}
.compact-disclosure{
  padding:0;
  overflow:hidden;
}
.compact-disclosure > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  cursor:pointer;
  list-style:none;
}
.compact-disclosure > summary::-webkit-details-marker{display:none}
.compact-disclosure > summary::after{
  content:"+";
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:999px;
  color:#93c5fd;
  font-weight:900;
}
.compact-disclosure[open] > summary::after{content:"-"}
.compact-disclosure > summary h4{
  margin:0;
}
.compact-disclosure > .stack-list,
.compact-disclosure > .device-list,
.compact-disclosure > .empty-panel,
.compact-disclosure > .detail-list,
.compact-disclosure > .nodes-maintenance-body{
  margin:0 14px 14px;
}
.compact-disclosure > .toolbar.compact{
  margin:0 14px 14px;
}
.compact-disclosure > .meta,
.compact-disclosure > .error{
  margin:0 14px 14px;
}
.node-meta-card,
.node-env-card{
  min-height:0;
}
.node-env-card .env-action-row{
  flex-wrap:wrap;
}
.node-error-card{
  grid-column:1 / -1;
  border-color:rgba(251,113,133,.22);
  background:rgba(45,20,30,.16);
}
.node-summary-disclosure > summary{
  min-height:56px;
}
.summary-main{
  display:grid;
  gap:3px;
  min-width:0;
}
.summary-main strong{
  color:#e6edf7;
  font-size:14px;
}
.summary-main small{
  color:#8ea0b8;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:min(68vw,620px);
}
.node-summary-disclosure .badge{
  flex:0 0 auto;
}
.compact-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
}
.compact-row span:first-child{
  min-width:0;
  color:#9fb0c8;
  font-size:12px;
}
.compact-row strong{
  color:#e5edf7;
  font-size:13px;
}
.is-updating{
  position:relative;
}
.is-updating::after{
  content:"обновление";
  position:absolute;
  right:12px;
  top:10px;
  padding:3px 8px;
  border:1px solid rgba(56,189,248,.22);
  border-radius:999px;
  background:rgba(7,13,24,.9);
  color:#7dd3fc;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.guide-card{
  width:min(860px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
}
.guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.guide-item{
  display:grid;
  gap:9px;
  padding:13px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:14px;
  background:rgba(7,13,24,.55);
}
.guide-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.phrase-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:8px 9px;
  border:1px solid rgba(56,189,248,.14);
  border-radius:11px;
  background:rgba(2,6,23,.52);
}
.phrase-line code{
  min-width:0;
  overflow-wrap:anywhere;
  color:#e0f2fe;
  font:12px/1.35 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.dashboard-layout .panel-card,
.dashboard-layout .chart-card,
.activity-grid .panel-card{
  min-height:0;
}
.chart-grid{
  display:none;
}
.health-grid .metric-card{
  min-height:88px;
}
.health-grid .metric-card strong{
  font-size:22px;
}
@media (max-width:1280px){
  .summary-grid,.stats-grid{grid-template-columns:repeat(auto-fit,minmax(164px,1fr))}
  .nodes-kpi-strip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  #view-vpn .summary-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  #view-vpn .vpn-control-grid{grid-template-columns:1fr}
}
@media (max-width:920px){
  .app-shell{display:block}
  .topbar{padding:14px 14px 12px}
  .content-container{padding:14px 12px 32px}
  .summary-grid,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-grid{grid-template-columns:1fr}
  .summary-card,.card.stat{min-height:96px;padding:12px}
  .summary-card strong,.card.stat strong,.card.stat .value{font-size:24px}
  .user-profile-grid,.bot-message-layout,.bot-message-grid{grid-template-columns:1fr}
  .user-action-panel{align-items:stretch;flex-direction:column}
  .node-action-dock{grid-template-columns:1fr}
  .node-action-buttons{justify-content:flex-start}
  #node-modal .modal-card{width:100vw;border-radius:0}
  .node-action-group{width:100%;flex-wrap:wrap;border-right:0;padding-right:0;margin-right:0}
  .node-quick-actions-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .summary-grid,.stats-grid{grid-template-columns:1fr}
  .detail-modal .modal-card,.detail-modal#user-modal .modal-card{width:100vw;border-radius:0}
  .user-hero{grid-template-columns:auto minmax(0,1fr)}
  .user-hero .badge{grid-column:1 / -1;justify-self:start}
}

/* DSharff graphite cockpit polish - 2026-05-20 */
:root{
  --bg:#0f1117;
  --bg-soft:#141720;
  --panel:rgba(25,28,37,.90);
  --panel-strong:rgba(30,34,44,.96);
  --panel-soft:rgba(21,24,32,.78);
  --border:rgba(230,235,245,.09);
  --border-strong:rgba(230,235,245,.16);
  --text:#f2f4f8;
  --muted:#a5adba;
  --muted-2:#727b8b;
  --accent:#38bdf8;
  --accent-2:#34d399;
  --shadow:0 18px 52px rgba(0,0,0,.28);
}
body{
  background:
    radial-gradient(circle at 8% 0%,rgba(56,189,248,.08),transparent 24%),
    radial-gradient(circle at 96% 10%,rgba(52,211,153,.045),transparent 28%),
    linear-gradient(180deg,#101219 0%,#0d0f14 100%);
}
.panel,
.table-panel,
.panel-card,
.form-card,
.chart-card,
.info-card,
.infra-card,
.stack-item,
.event-item,
.compact-item{
  background:linear-gradient(180deg,rgba(28,31,40,.92),rgba(22,25,34,.90));
  border-color:var(--border);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}
.panel-card,
.form-card,
.table-panel,
.chart-card{padding:18px}
.btn-primary{
  background:linear-gradient(135deg,#38bdf8 0%,#22d3ee 42%,#34d399 100%);
  color:#03151b;
  box-shadow:0 10px 24px rgba(34,211,238,.12);
}
.btn-secondary,
.icon-btn{
  background:rgba(35,39,50,.78);
  border-color:rgba(230,235,245,.11);
}
input,textarea,select,
.table-wrap{
  background:rgba(16,18,25,.76);
  border-color:rgba(230,235,245,.10);
}
th,td{padding:14px 13px}
thead th{color:#b8c1cf}
tbody tr{background:rgba(18,20,28,.35)}
tbody tr:hover{background:rgba(56,189,248,.045)}
.nodes-kpi-strip{gap:12px;margin-bottom:16px}
.nodes-kpi-strip .summary-card{
  min-height:94px;
  background:linear-gradient(180deg,rgba(27,31,40,.95),rgba(20,24,32,.94));
}
#view-nodes .table-panel{margin-top:14px}
#view-nodes .toolbar.wrap{
  display:grid;
  grid-template-columns:minmax(320px,1fr) 180px 160px 160px auto;
  align-items:center;
  gap:10px;
}
#view-nodes .toolbar.wrap input,
#view-nodes .toolbar.wrap select,
#view-nodes .toolbar.wrap button{width:100%;min-width:0}
.node-table-row td{vertical-align:middle}
.node-table-row.is-selected{
  background:linear-gradient(90deg,rgba(56,189,248,.105),rgba(52,211,153,.045));
  box-shadow:inset 3px 0 0 rgba(56,189,248,.86);
}
.node-name-cell,.node-location-cell,.node-compact-cell,.node-job-cell{gap:12px}
.node-job-cell strong{max-width:170px}
.node-job-cell span{white-space:nowrap}
.node-row-actions{gap:7px;white-space:nowrap}.node-row-actions .btn{white-space:nowrap}
.node-action-dock{
  grid-template-columns:minmax(260px,1fr) minmax(0,auto);
  background:linear-gradient(180deg,rgba(26,30,40,.95),rgba(22,25,34,.94));
  border-color:rgba(56,189,248,.16);
  padding:14px 16px;
}
.node-action-buttons{gap:8px}
.node-action-group{padding-right:10px;margin-right:4px}
.node-tab-bar{
  position:sticky;
  top:0;
  background:rgba(18,21,29,.94);
  border-color:rgba(230,235,245,.10);
  border-radius:16px;
}
.node-tab{background:rgba(31,35,46,.72);border-color:rgba(230,235,245,.10);color:#b7c0cd}
.node-tab.is-active{background:rgba(56,189,248,.13);border-color:rgba(56,189,248,.38);color:#effcff}
#node-modal .modal-card{
  width:min(920px,calc(100vw - 28px));
  background:linear-gradient(180deg,rgba(25,28,37,.98),rgba(17,20,28,.98));
  border-left:1px solid rgba(230,235,245,.12);
}
#node-modal .modal-head{
  background:linear-gradient(180deg,rgba(25,28,37,.98),rgba(25,28,37,.88));
}
.user-hero{
  background:linear-gradient(135deg,rgba(56,189,248,.105),rgba(52,211,153,.045));
  border-color:rgba(56,189,248,.20);
}
.user-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.detail-card{background:rgba(21,24,32,.82);border-color:rgba(230,235,245,.10)}
.detail-list div{border-bottom-color:rgba(230,235,245,.075)}
.node-quick-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.node-quick-action{background:rgba(27,31,41,.86);border-color:rgba(230,235,245,.10);text-align:center;align-content:center}
.node-quick-action:hover{background:rgba(56,189,248,.075);border-color:rgba(56,189,248,.30)}
.billing-card .detail-list div strong a,
.detail-list div strong a{color:#8bdcff;text-decoration:none}.billing-card .detail-list div strong a:hover{text-decoration:underline}
.billing-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.billing-note{margin-top:12px;padding-top:12px;border-top:1px solid rgba(230,235,245,.08)}
.empty-state.compact{padding:12px;border:1px dashed rgba(230,235,245,.14);border-radius:12px;color:var(--muted);background:rgba(12,14,20,.35);margin-bottom:12px}
@media (max-width:1180px){
  #view-nodes .toolbar.wrap{grid-template-columns:1fr 1fr;}
  .user-profile-grid{grid-template-columns:1fr}
}
@media (max-width:920px){
  #view-nodes .toolbar.wrap{grid-template-columns:1fr}
  #node-modal .modal-card{width:100vw;border-radius:0}
}

/* Nodes second polish: calmer detail overlay, stable cards, no card collapse controls in node detail */
#node-modal .modal-backdrop{
  background:rgba(3,7,14,.72) !important;
  backdrop-filter:blur(1.5px) !important;
}
#node-modal .modal-card{
  width:min(1020px,calc(100vw - 34px)) !important;
  background:linear-gradient(180deg,rgba(24,27,35,.99),rgba(17,20,28,.99)) !important;
  box-shadow:-18px 0 48px rgba(0,0,0,.32) !important;
}
#node-modal .modal-head{
  background:linear-gradient(180deg,rgba(24,27,35,.98),rgba(24,27,35,.90)) !important;
  backdrop-filter:blur(8px) !important;
}
.node-static-card{
  display:grid;
  gap:12px;
}
.node-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:0;
}
.node-card-head h4{
  margin:0 0 4px;
}
.node-action-buttons{
  align-items:center;
  gap:10px;
}
.node-action-group{
  position:relative;
  align-items:center;
  gap:8px;
  padding-left:38px;
  min-height:34px;
}
.node-action-group .node-action-label{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  color:#7f8ca3;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}
.node-action-group-provision{
  padding-left:82px;
}
.node-action-more{
  padding-left:0;
}
.node-action-more .node-action-label{display:none}
.node-meta-card .detail-list strong,
.node-static-card .detail-list strong{
  word-break:break-word;
}
.node-quick-actions-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
.node-quick-action{
  min-height:82px !important;
  align-content:center;
  justify-items:center;
  text-align:center !important;
}
.node-quick-action strong,
.node-quick-action span{
  text-align:center;
}
@media (max-width:1180px){
  .node-quick-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:920px){
  #node-modal .modal-card{width:100vw !important;border-radius:0 !important;}
  .node-action-buttons{align-items:flex-start;}
  .node-action-group{padding-left:0;padding-top:18px;}
  .node-action-group .node-action-label{top:0;transform:none;}
}

/* Nodes reference-exact polish v34.3: match provided reference while preserving existing logic/sidebar */
:root{
  --bg:#070a11;
  --bg-soft:#0b0f17;
  --panel:rgba(17,22,32,.92);
  --panel-strong:rgba(20,26,38,.98);
  --panel-soft:rgba(13,18,28,.88);
  --border:rgba(148,163,184,.13);
  --border-strong:rgba(125,145,175,.22);
  --text:#eef4ff;
  --muted:#8f9bad;
  --muted-2:#596679;
  --accent:#38bdf8;
  --accent-2:#2ee6a6;
  --violet:#6554f2;
  --shadow:0 20px 70px rgba(0,0,0,.34);
}
body{
  background:
    radial-gradient(circle at 10% 0%,rgba(56,189,248,.10),transparent 28%),
    radial-gradient(circle at 95% 2%,rgba(101,84,242,.08),transparent 30%),
    linear-gradient(180deg,#070a11 0%,#080b12 100%) !important;
}
.panel,
.panel-card,
.form-card,
.table-panel,
.chart-card,
.info-card,
.setting-card{
  background:linear-gradient(180deg,rgba(17,22,32,.94),rgba(12,17,26,.94)) !important;
  border-color:rgba(148,163,184,.13) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.26) !important;
}
.btn-primary{
  background:linear-gradient(135deg,#5e55ff 0%,#6f62ff 42%,#35d7be 100%) !important;
  color:#f8fbff !important;
  border-color:rgba(138,127,255,.34) !important;
  box-shadow:0 12px 30px rgba(83,75,238,.20) !important;
}
.btn-secondary{
  background:rgba(24,29,41,.82) !important;
  border-color:rgba(184,198,220,.12) !important;
  color:#e9f0fb !important;
}
.btn-secondary:hover{
  border-color:rgba(56,189,248,.32) !important;
  background:rgba(29,36,51,.92) !important;
}
#view-nodes .content-container,
#view-nodes{
  background:transparent !important;
}
#view-nodes .topbar,
#view-nodes .view-heading{
  background:transparent !important;
}
.nodes-kpi-strip{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
  margin:26px 0 20px !important;
}
.nodes-kpi-strip .summary-card{
  min-height:112px !important;
  padding:18px 18px !important;
  background:linear-gradient(180deg,rgba(19,25,37,.95),rgba(13,19,30,.94)) !important;
  border:1px solid rgba(125,145,175,.16) !important;
  border-radius:14px !important;
  box-shadow:0 12px 34px rgba(0,0,0,.18) !important;
}
.nodes-kpi-strip .summary-card strong{
  font-size:30px !important;
  line-height:1.05 !important;
}
#view-nodes .table-panel{
  padding:18px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(15,21,32,.95),rgba(10,15,24,.96)) !important;
  border-color:rgba(125,145,175,.15) !important;
}
#view-nodes .toolbar.wrap{
  display:grid !important;
  grid-template-columns:minmax(320px,1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
  margin-bottom:18px !important;
}
#view-nodes .toolbar.wrap select,
#view-nodes .toolbar.wrap .btn:not(:last-child){
  display:none !important;
}
#view-nodes .toolbar.wrap input{
  min-height:46px !important;
  max-width:520px !important;
  border-radius:13px !important;
  background:rgba(9,14,23,.78) !important;
  border-color:rgba(148,163,184,.16) !important;
}
#view-nodes .toolbar.wrap .btn:last-child{
  width:auto !important;
  min-width:116px !important;
  min-height:42px !important;
  border-radius:12px !important;
}
#view-nodes .table-wrap{
  border-radius:14px !important;
  background:rgba(9,14,23,.42) !important;
  border:1px solid rgba(125,145,175,.14) !important;
  overflow:hidden !important;
}
#view-nodes table{
  min-width:920px !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}
#view-nodes thead th{
  height:44px !important;
  padding:12px 18px !important;
  color:#aeb8c9 !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
  border-bottom:1px solid rgba(125,145,175,.14) !important;
  background:rgba(10,15,24,.72) !important;
}
#view-nodes tbody tr{
  background:rgba(11,16,25,.18) !important;
}
#view-nodes tbody td{
  padding:16px 18px !important;
  border-bottom:1px solid rgba(125,145,175,.10) !important;
}
#view-nodes .node-table-row:hover{
  background:rgba(56,189,248,.055) !important;
}
#view-nodes .node-table-row.is-selected{
  background:linear-gradient(90deg,rgba(31,194,225,.14),rgba(52,211,153,.045)) !important;
  box-shadow:inset 3px 0 0 rgba(31,194,225,.86), inset 0 0 0 1px rgba(31,194,225,.16) !important;
}
.node-name-cell strong,
.node-location-cell strong,
.node-compact-cell strong,
.node-job-cell strong{
  color:#f4f8ff !important;
  font-weight:800 !important;
}
.node-name-cell span:not(.status-dot),
.node-location-cell span:not(.node-flag),
.node-compact-cell span,
.node-job-cell span{
  color:#8d99aa !important;
}
.node-row-actions .icon-only{
  width:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  border-radius:11px !important;
  background:rgba(19,25,36,.88) !important;
  border-color:rgba(148,163,184,.14) !important;
}
.node-row-actions .action-menu-trigger{
  width:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  font-size:0 !important;
}
.node-row-actions .action-menu-trigger::before{
  content:'⋯';
  font-size:18px;
  line-height:1;
}
#node-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:45 !important;
  display:block !important;
  place-items:initial !important;
  pointer-events:none !important;
  padding:0 !important;
}
#node-modal.hidden{display:none !important;}
#node-modal .modal-backdrop{
  display:none !important;
  background:transparent !important;
  backdrop-filter:none !important;
}
#node-modal .modal-card{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:clamp(540px,34vw,650px) !important;
  height:100vh !important;
  max-height:none !important;
  padding:26px 28px 28px !important;
  pointer-events:auto !important;
  border-radius:0 !important;
  border:0 !important;
  border-left:1px solid rgba(148,163,184,.16) !important;
  background:linear-gradient(180deg,rgba(17,22,32,.99),rgba(10,15,24,.995)) !important;
  box-shadow:-22px 0 70px rgba(0,0,0,.38) !important;
  animation:detailSlideIn .16s ease-out !important;
}
#node-modal .modal-head{
  position:sticky !important;
  top:0 !important;
  z-index:8 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  min-height:42px !important;
  margin:0 0 4px !important;
  padding:0 0 4px !important;
  background:linear-gradient(180deg,rgba(17,22,32,.99),rgba(17,22,32,.88)) !important;
  backdrop-filter:blur(10px) !important;
}
#node-modal-title{
  font-size:22px !important;
  line-height:1.1 !important;
  letter-spacing:.01em !important;
  color:#f6f8fc !important;
}
#close-node-modal{
  width:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border-radius:11px !important;
  font-size:0 !important;
  background:transparent !important;
  color:#aeb8c9 !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
#close-node-modal::before{
  content:'×';
  font-size:25px;
  font-weight:400;
  line-height:1;
}
#close-node-modal:hover{
  background:rgba(148,163,184,.08) !important;
  border-color:rgba(148,163,184,.12) !important;
}
.node-detail-subhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin:0 0 22px;
  padding-bottom:4px;
}
.node-detail-subhead .meta{
  color:#abb5c6;
  font-size:13px;
}
.node-detail-id{
  margin-top:6px;
  color:#7c8799;
  font-size:12px;
}
.node-action-dock-reference{
  display:block !important;
  padding:0 0 18px !important;
  margin:0 0 18px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.node-action-buttons-reference{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.node-top-action,
#node-modal .action-menu-trigger{
  min-height:38px !important;
  padding:9px 14px !important;
  border-radius:11px !important;
  background:rgba(22,28,40,.84) !important;
  border-color:rgba(148,163,184,.14) !important;
  color:#edf4ff !important;
  font-size:12px !important;
  font-weight:800 !important;
}
#node-modal .action-menu-trigger{
  background:linear-gradient(135deg,#6258f4,#754ff0) !important;
  border-color:rgba(129,116,255,.36) !important;
  color:#fff !important;
  box-shadow:0 10px 28px rgba(91,78,235,.18) !important;
}
#node-modal .action-menu{
  right:0 !important;
  left:auto !important;
  width:260px !important;
  border-radius:14px !important;
  background:#151b26 !important;
  border-color:rgba(148,163,184,.16) !important;
}
#node-modal .node-tab-bar{
  position:sticky !important;
  top:42px !important;
  z-index:7 !important;
  display:flex !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 -28px 18px !important;
  overflow:auto !important;
  border:0 !important;
  border-top:1px solid rgba(148,163,184,.12) !important;
  border-bottom:1px solid rgba(148,163,184,.12) !important;
  border-radius:0 !important;
  background:rgba(12,17,26,.94) !important;
  backdrop-filter:blur(10px) !important;
}
#node-modal .node-tab{
  min-height:50px !important;
  padding:0 16px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#a9b3c4 !important;
  font-size:12px !important;
  font-weight:800 !important;
  position:relative !important;
}
#node-modal .node-tab.is-active{
  color:#f1f8ff !important;
  background:transparent !important;
}
#node-modal .node-tab.is-active::after{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#38bdf8,#6d5dfc);
}
#node-modal .user-profile-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}
#node-modal .node-tab-panel[data-node-tab-panel="overview"].is-active .user-profile-grid{
  grid-template-columns:1fr !important;
}
#node-modal .detail-card{
  padding:18px !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,rgba(20,25,36,.88),rgba(14,19,29,.9)) !important;
  border:1px solid rgba(148,163,184,.13) !important;
  box-shadow:none !important;
}
#node-modal .detail-card h4{
  color:#f4f8ff !important;
  font-size:15px !important;
  margin-bottom:14px !important;
}
#node-modal .detail-list{
  display:grid !important;
  gap:0 !important;
}
#node-modal .detail-list div{
  min-height:36px !important;
  display:grid !important;
  grid-template-columns:minmax(130px,42%) minmax(0,1fr) !important;
  align-items:center !important;
  gap:14px !important;
  border-bottom:1px solid rgba(148,163,184,.10) !important;
}
#node-modal .detail-list div:last-child{border-bottom:0 !important;}
#node-modal .detail-list span{
  color:#8f9bad !important;
  font-size:12px !important;
}
#node-modal .detail-list strong{
  color:#f3f7ff !important;
  font-size:12px !important;
  text-align:right !important;
}
#node-modal .node-quick-actions-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
#node-modal .node-quick-action{
  min-height:88px !important;
  padding:12px 8px !important;
  border-radius:13px !important;
  background:rgba(20,26,38,.86) !important;
  border:1px solid rgba(148,163,184,.13) !important;
  display:grid !important;
  align-content:center !important;
  justify-items:center !important;
  gap:7px !important;
  text-align:center !important;
}
#node-modal .node-quick-action:hover{
  background:rgba(56,189,248,.08) !important;
  border-color:rgba(56,189,248,.28) !important;
}
#node-modal .node-quick-action strong{
  color:#f5f8ff !important;
  font-size:12px !important;
}
#node-modal .node-quick-action span{
  color:#8f9bad !important;
  font-size:11px !important;
}
#node-modal .success-badge{
  color:#67f0bd !important;
  background:rgba(16,185,129,.12) !important;
  border-color:rgba(16,185,129,.28) !important;
}
#node-modal .danger-badge,
#view-nodes .danger-badge{
  color:#ff8da1 !important;
  background:rgba(244,63,94,.13) !important;
  border-color:rgba(244,63,94,.30) !important;
}
#node-modal .warning-badge,
#view-nodes .warning-badge{
  color:#fbd67a !important;
  background:rgba(251,191,36,.12) !important;
  border-color:rgba(251,191,36,.28) !important;
}
#node-modal .avatar-token,
#node-modal .user-hero{display:none !important;}
#node-modal .btn-danger,
#node-modal [data-node-delete],
#view-nodes [data-node-delete]{display:none !important;}
@media (max-width:1280px){
  #node-modal .modal-card{width:min(620px,46vw) !important;}
  .nodes-kpi-strip{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media (max-width:920px){
  #node-modal{pointer-events:auto !important;}
  #node-modal .modal-card{width:100vw !important;border-radius:0 !important;}
  #node-modal .node-quick-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}


/* v34.4 reference refinement */
.nav-icon{padding:0;overflow:hidden}
.nav-icon svg,.ui-icon svg{width:14px;height:14px;display:block}
#sidebar-toggle svg{width:18px;height:18px;display:block}
.btn-icon-left,.action-menu-trigger{display:inline-flex;align-items:center;gap:8px}
.ui-icon{width:14px;height:14px;display:inline-grid;place-items:center;flex:0 0 auto;color:currentColor}
#node-modal .node-action-buttons-reference{gap:12px !important}
#node-modal .node-top-action,#node-modal .action-menu-trigger{display:inline-flex !important;align-items:center !important;gap:8px !important}
#node-modal .user-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;align-items:start !important}
#node-modal .node-tab-panel[data-node-tab-panel="overview"].is-active .user-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
#node-modal .node-overview-card,#node-modal .node-network-card,#node-modal .node-meta-card,#node-modal .node-quick-actions-card{min-height:100%}
#node-modal .node-meta-card .detail-list div{grid-template-columns:minmax(130px,40%) minmax(0,1fr) !important}
#node-modal .node-quick-actions-card{display:grid;align-content:start}
#node-modal .node-quick-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
#node-modal .node-quick-action{min-height:108px !important;padding:14px 10px !important}
#node-modal .node-quick-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:rgba(98,88,244,.12);border:1px solid rgba(129,116,255,.22);color:#8bdcff;margin:0 auto 2px}
#node-modal .node-quick-icon .ui-icon{width:16px;height:16px}
#node-modal .node-quick-icon svg{width:16px;height:16px}
#node-modal .detail-card{overflow:hidden}
#node-modal .detail-card h4{margin-bottom:12px !important}
#node-modal .detail-list div{padding:7px 0 !important}
#node-modal .node-card-head{margin-bottom:12px}
#node-modal .node-card-head .meta{margin-top:4px}
#node-modal .node-tab-bar{top:40px !important}
#node-modal .modal-card{width:min(720px,100vw) !important}
@media (max-width:1280px){#node-modal .modal-card{width:min(700px,52vw) !important}}
@media (max-width:920px){#node-modal .user-profile-grid,#node-modal .node-tab-panel[data-node-tab-panel="overview"].is-active .user-profile-grid{grid-template-columns:1fr !important} #node-modal .node-quick-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}


/* dashboard v35 */
#sidebar-toggle{background:linear-gradient(180deg,rgba(43,55,79,.95),rgba(20,27,41,.95));border-color:rgba(96,165,250,.18);color:#dbeafe}
.sidebar nav .nav-icon{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(148,163,184,.10);color:#dbeafe}
.dashboard-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px;padding:18px 20px}
.dashboard-hero-copy h1{font-size:30px;line-height:1.05;margin:2px 0 6px}
.dashboard-v2-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,.9fr);gap:16px}
.dashboard-v2-main,.dashboard-v2-side{display:grid;gap:16px;align-content:start}
.dashboard-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0}
.dashboard-kpi-card{min-height:136px}
.dashboard-kpi-card .trend{font-size:12px;color:#7ee7b7;font-weight:700}
.infra-v2-panel{margin-bottom:0}
.infra-v2-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:stretch}
.infra-ring-card{border:1px solid var(--border);border-radius:18px;background:rgba(7,13,24,.55);display:grid;place-items:center;min-height:280px;padding:12px}
.infra-ring-wrap{position:relative;width:196px;height:196px;display:grid;place-items:center}
.infra-ring-svg{width:196px;height:196px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(148,163,184,.14);stroke-width:10}
.ring-fill{fill:none;stroke-width:10;stroke-linecap:round}
.ring-fill.ok{stroke:#34d399}.ring-fill.warn{stroke:#fbbf24}.ring-fill.danger{stroke:#fb7185}
.infra-ring-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.infra-ring-center strong{font-size:26px;line-height:1}.infra-ring-center span{font-size:13px;color:var(--muted)}
.infra-grid-v2{grid-template-columns:repeat(4,minmax(0,1fr));align-self:stretch}
.activity-chart{display:grid;gap:10px}
.activity-legend{display:flex;gap:18px;justify-content:flex-end;font-size:12px;color:var(--muted)}
.legend-item{display:inline-flex;align-items:center;gap:8px}.legend-item i{width:10px;height:10px;border-radius:50%}.legend-item.users i{background:#60a5fa}.legend-item.payments i{background:#34d399}
.activity-chart-svg{width:100%;height:240px;display:block;border-radius:14px;background:linear-gradient(180deg,rgba(11,18,30,.4),rgba(7,13,24,.18));overflow:visible}
.activity-chart-svg .grid-line{stroke:rgba(148,163,184,.12);stroke-width:1}.activity-chart-svg .series{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.activity-chart-svg .series.users{stroke:#60a5fa}.activity-chart-svg .series.payments{stroke:#34d399}.activity-chart-svg .axis-label{fill:#7f90a9;font-size:10px}
.dashboard-side-item{padding:12px 13px}
.quick-links-list{gap:10px}.dashboard-quick-link{width:100%;display:flex;justify-content:space-between;align-items:center;padding:12px 13px;border:1px solid var(--border);border-radius:14px;background:rgba(7,13,24,.64);color:#e5eefc;font:inherit;cursor:pointer}.dashboard-quick-link:hover{border-color:rgba(96,165,250,.22);background:rgba(11,18,32,.85)}.dashboard-quick-link .arrow{color:#94a3b8;font-size:18px;line-height:1}
#control-plane-billing .billing-card{background:linear-gradient(180deg,rgba(13,22,38,.9),rgba(8,14,27,.92))}
@media (max-width:1280px){.dashboard-v2-layout{grid-template-columns:1fr}.dashboard-v2-side{grid-template-columns:repeat(3,minmax(0,1fr))}.infra-v2-grid{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:920px){.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-v2-side{grid-template-columns:1fr}.infra-v2-grid{grid-template-columns:1fr}.infra-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-hero{flex-direction:column}.dashboard-hero-copy h1{font-size:26px}}
@media (max-width:640px){.dashboard-kpi-grid,.infra-grid-v2{grid-template-columns:1fr}.activity-chart-svg{height:220px}}


/* cloud-console redesign v36 */
:root{
  --bg-app:#101923;
  --bg-sidebar:#1b2633;
  --bg-topbar:#202b38;
  --bg-card:#202c3a;
  --bg-card-soft:#243142;
  --bg-input:#131d28;
  --border-subtle:#2f3d4d;
  --border-strong:#3b4a5c;
  --text-primary:#f5f7fb;
  --text-secondary:#a9b5c3;
  --text-muted:#6f7f90;
  --accent-primary:#7478ff;
  --accent-primary-hover:#8589ff;
  --accent-primary-soft:rgba(116,120,255,.16);
  --success:#65d48f;
  --success-soft:rgba(101,212,143,.14);
  --warning:#f0b85a;
  --warning-soft:rgba(240,184,90,.14);
  --danger:#ff6b6b;
  --danger-soft:rgba(255,107,107,.14);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow-card:none;
  --shadow-popover:0 18px 40px rgba(0,0,0,.35);
  --font-ui:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:var(--bg-app);
  --bg-soft:var(--bg-input);
  --panel:var(--bg-card);
  --panel-strong:var(--bg-card);
  --panel-soft:var(--bg-card-soft);
  --border:var(--border-subtle);
  --text:var(--text-primary);
  --muted:var(--text-secondary);
  --muted-2:var(--text-muted);
  --accent:var(--accent-primary);
  --accent-2:var(--accent-primary-hover);
  --ok:var(--success);
  --radius:var(--radius-md);
  --shadow:none;
}
html,
body{
  background:var(--bg-app) !important;
  color:var(--text-primary) !important;
  font-family:var(--font-ui) !important;
}
body::before,
body::after{display:none !important;}
.app-shell{
  grid-template-columns:272px minmax(0,1fr) !important;
  background:var(--bg-app) !important;
}
.sidebar{
  width:272px !important;
  padding:18px 16px !important;
  background:var(--bg-sidebar) !important;
  border-right:1px solid var(--border-subtle) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.sidebar-brand{
  min-height:54px !important;
  margin-bottom:18px !important;
  padding:0 8px 16px !important;
  border-bottom:1px solid var(--border-subtle) !important;
}
.brand{font-size:20px !important;color:var(--text-primary) !important;}
.brand-subtitle{color:var(--text-muted) !important;}
.brand-mark{
  background:var(--bg-card-soft) !important;
  border:1px solid var(--border-subtle) !important;
  box-shadow:none !important;
}
.nav{gap:4px !important;}
.nav-group{
  margin:18px 10px 8px !important;
  color:var(--text-muted) !important;
  letter-spacing:.08em !important;
}
.nav-link{
  min-height:42px !important;
  border-radius:10px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--text-secondary) !important;
  font-weight:700 !important;
  padding:9px 10px !important;
}
.nav-link:hover{
  background:var(--bg-card-soft) !important;
  border-color:var(--border-subtle) !important;
  color:var(--text-primary) !important;
}
.nav-link.is-active{
  background:var(--accent-primary-soft) !important;
  border-color:rgba(116,120,255,.34) !important;
  color:var(--text-primary) !important;
  box-shadow:none !important;
}
.nav-icon,
.sidebar nav .nav-icon{
  width:20px !important;
  height:20px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:currentColor !important;
  box-shadow:none !important;
}
.nav-icon svg,
.ui-icon svg{width:16px !important;height:16px !important;}
.sidebar-footer{
  padding-top:14px !important;
  border-top:1px solid var(--border-subtle) !important;
}
.admin-meta{
  background:var(--bg-card) !important;
  border-color:var(--border-subtle) !important;
  border-radius:var(--radius-md) !important;
  color:var(--text-secondary) !important;
}
.main-shell{background:var(--bg-app) !important;}
.topbar{
  min-height:82px !important;
  align-items:center !important;
  padding:18px 28px !important;
  background:var(--bg-topbar) !important;
  border-bottom:1px solid var(--border-subtle) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.view-heading{min-width:230px !important;}
.view-heading h2{
  font-size:22px !important;
  color:var(--text-primary) !important;
}
.view-heading .muted{display:none !important;}
.topbar-search{
  flex:1 1 420px;
  max-width:560px;
  min-width:220px;
}
.topbar-search input{
  min-height:40px !important;
  border-radius:10px !important;
  background:var(--bg-input) !important;
  border-color:var(--border-subtle) !important;
}
.topbar-actions{align-items:center !important;gap:10px !important;}
.topbar-status{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:var(--bg-card);
  color:var(--text-secondary);
  font-size:12px;
  white-space:nowrap;
}
.status-separator{color:var(--text-muted);}
.toast{color:var(--text-secondary) !important;}
.content-container{
  width:min(100%,1480px) !important;
  padding:26px 30px 44px !important;
}
.panel,
.panel-card,
.form-card,
.table-panel,
.chart-card,
.support-inbox-card,
.thread-card,
.card,
.info-card,
.detail-card,
#node-modal .detail-card,
#node-modal .modal-card,
.confirm-card{
  background:var(--bg-card) !important;
  border:1px solid var(--border-subtle) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.panel-card,
.form-card,
.table-panel,
.chart-card,
.support-inbox-card,
.thread-card{padding:18px !important;}
.dashboard-hero{
  background:var(--bg-card) !important;
  border-color:var(--border-subtle) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:none !important;
}
.dashboard-hero-copy h1{
  font-size:24px !important;
  color:var(--text-primary) !important;
}
.dashboard-hero-copy .muted{color:var(--text-secondary) !important;}
.summary-grid{gap:16px !important;}
.summary-card,
.card.stat,
.metric-card,
.infra-card{
  min-height:118px !important;
  background:var(--bg-card) !important;
  border:1px solid var(--border-subtle) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:none !important;
}
.summary-card small,
.card.stat small,
.card.stat .label,
.eyebrow{
  color:var(--text-muted) !important;
  letter-spacing:.08em !important;
}
.summary-card strong,
.card.stat strong,
.card.stat .value{color:var(--text-primary) !important;}
.summary-card .secondary,
.card.stat .secondary,
.meta,
.muted{color:var(--text-secondary) !important;}
.trend{color:var(--text-muted) !important;}
.infra-ring-card,
.activity-chart-svg,
#control-plane-billing .billing-card{
  background:var(--bg-card-soft) !important;
  border-color:var(--border-subtle) !important;
  box-shadow:none !important;
}
.activity-chart-svg .grid-line{stroke:rgba(169,181,195,.18) !important;}
.activity-chart-svg .series.users{stroke:var(--accent-primary) !important;}
.activity-chart-svg .series.payments{stroke:var(--success) !important;}
input,
textarea,
select,
.config-editor{
  min-height:40px !important;
  border-radius:10px !important;
  background:var(--bg-input) !important;
  border:1px solid var(--border-subtle) !important;
  color:var(--text-primary) !important;
  box-shadow:none !important;
}
input:focus,
textarea:focus,
select:focus{
  border-color:var(--accent-primary) !important;
  box-shadow:0 0 0 3px var(--accent-primary-soft) !important;
}
.btn,
.icon-btn,
.node-top-action,
#node-modal .action-menu-trigger{
  min-height:40px !important;
  border-radius:10px !important;
  box-shadow:none !important;
  transform:none !important;
  font-weight:750 !important;
}
.btn:hover,
.icon-btn:hover{transform:none !important;}
.btn-primary{
  background:var(--accent-primary) !important;
  border-color:var(--accent-primary) !important;
  color:#fff !important;
}
.btn-primary:hover{background:var(--accent-primary-hover) !important;}
.btn-secondary,
.icon-btn,
.node-top-action{
  background:var(--bg-card-soft) !important;
  border-color:var(--border-subtle) !important;
  color:var(--text-primary) !important;
}
.btn-danger,
#node-modal .btn-danger{
  background:var(--danger-soft) !important;
  border-color:rgba(255,107,107,.32) !important;
  color:var(--danger) !important;
}
.btn-success{
  background:var(--success-soft) !important;
  border-color:rgba(101,212,143,.28) !important;
  color:var(--success) !important;
}
.badge{
  min-height:24px !important;
  border-radius:999px !important;
  border:1px solid var(--border-subtle) !important;
  background:var(--bg-card-soft) !important;
  color:var(--text-secondary) !important;
  box-shadow:none !important;
}
.success-badge,
.badge-success{
  background:var(--success-soft) !important;
  border-color:rgba(101,212,143,.24) !important;
  color:var(--success) !important;
}
.warning-badge,
.badge-warning{
  background:var(--warning-soft) !important;
  border-color:rgba(240,184,90,.28) !important;
  color:var(--warning) !important;
}
.danger-badge,
.badge-danger{
  background:var(--danger-soft) !important;
  border-color:rgba(255,107,107,.30) !important;
  color:var(--danger) !important;
}
.provider-badge,
.badge-info{
  background:var(--accent-primary-soft) !important;
  border-color:rgba(116,120,255,.30) !important;
  color:var(--accent-primary-hover) !important;
}
.status-dot.ok{background:var(--success) !important;}
.status-dot.warn{background:var(--warning) !important;}
.status-dot.danger{background:var(--danger) !important;}
.table-wrap{
  border:1px solid var(--border-subtle) !important;
  border-radius:var(--radius-md) !important;
  background:var(--bg-card) !important;
}
table{border-collapse:separate !important;border-spacing:0 !important;}
th{
  color:var(--text-muted) !important;
  background:var(--bg-card-soft) !important;
  border-bottom:1px solid var(--border-subtle) !important;
  font-size:12px !important;
}
td{
  color:var(--text-secondary) !important;
  border-bottom:1px solid rgba(47,61,77,.68) !important;
}
tr:hover td{background:rgba(36,49,66,.62) !important;}
.action-menu{
  background:var(--bg-card) !important;
  border-color:var(--border-strong) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:var(--shadow-popover) !important;
}
.action-menu-item:hover{background:var(--bg-card-soft) !important;}
.action-menu-item.danger{color:var(--danger) !important;}
.support-ticket,
.stack-item,
.event-item,
.compact-item,
.dashboard-quick-link,
.setting-card{
  background:var(--bg-card-soft) !important;
  border:1px solid var(--border-subtle) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:none !important;
}
.support-ticket:hover,
.support-ticket.is-active,
.dashboard-quick-link:hover{
  border-color:var(--border-strong) !important;
  background:#28374a !important;
}
.modal-card,
#node-modal .modal-card{
  background:var(--bg-card) !important;
  border-left:1px solid var(--border-subtle) !important;
  box-shadow:var(--shadow-popover) !important;
}
#node-modal .node-tab-bar{
  background:var(--bg-topbar) !important;
  border-color:var(--border-subtle) !important;
  backdrop-filter:none !important;
}
#node-modal .node-tab.is-active::after{background:var(--accent-primary) !important;}
#node-modal .node-quick-action{
  background:var(--bg-card-soft) !important;
  border-color:var(--border-subtle) !important;
}
#node-modal .node-quick-icon{
  background:var(--accent-primary-soft) !important;
  border-color:rgba(116,120,255,.24) !important;
  color:var(--accent-primary-hover) !important;
}
.code-box,
pre{
  background:var(--bg-input) !important;
  border:1px solid var(--border-subtle) !important;
  color:var(--text-secondary) !important;
  box-shadow:none !important;
}
.login-shell{background:var(--bg-app) !important;}
.login-card{
  background:var(--bg-card) !important;
  border-color:var(--border-subtle) !important;
  box-shadow:var(--shadow-popover) !important;
}
@media (max-width:1100px){
  .app-shell{grid-template-columns:1fr !important;}
  .sidebar{
    width:288px !important;
    transform:translateX(-102%);
  }
  .sidebar.is-open{transform:translateX(0) !important;}
  .mobile-only{display:grid !important;}
  .topbar{padding:14px 16px !important;}
  .topbar-search{max-width:none;min-width:0;}
}
@media (max-width:900px){
  .dashboard-v2-layout,
  .dashboard-v2-side,
  .support-layout,
  .vpn-control-grid,
  .user-profile-grid{grid-template-columns:1fr !important;}
  .summary-grid,
  .dashboard-kpi-grid,
  .infra-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:640px){
  .topbar{align-items:stretch !important;flex-wrap:wrap !important;}
  .view-heading,
  .topbar-search,
  .topbar-actions{width:100% !important;flex-basis:100% !important;}
  .topbar-actions{display:flex !important;}
  .summary-grid,
  .dashboard-kpi-grid,
  .infra-grid-v2{grid-template-columns:1fr !important;}
  .content-container{padding:18px 14px 32px !important;}
}