/* Probe Panel operations-monitoring theme. Keeps all effects local and non-blocking. */
:root{
  --bg-deep:#070b16;
  --bg-panel:#0d1424;
  --bg-panel-2:#101a2d;
  --border-soft:rgba(126,211,255,.14);
  --border-hot:rgba(80,220,255,.38);
  --cyan:#58d7ff;
  --blue:#5c9cff;
  --violet:#8f7aff;
  --grid-line:rgba(88,215,255,.055);
  --glass:rgba(8,15,29,.72);
}

html{background:var(--bg-deep);}
body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(900px 460px at 10% -10%,rgba(43,128,255,.18),transparent 62%),
    radial-gradient(760px 420px at 88% 18%,rgba(32,201,151,.10),transparent 58%),
    radial-gradient(900px 540px at 60% 110%,rgba(124,92,255,.12),transparent 64%),
    linear-gradient(180deg,#070b16 0%,#0b1120 44%,#08101d 100%) !important;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
body::before{
  opacity:.82;
  background:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),
    radial-gradient(circle at 18% 24%,rgba(88,215,255,.14) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 38%,rgba(32,201,151,.11) 0 1px,transparent 2px),
    radial-gradient(circle at 40% 76%,rgba(143,122,255,.12) 0 1px,transparent 2px);
  background-size:42px 42px,42px 42px,96px 96px,132px 132px,118px 118px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.58) 58%,rgba(0,0,0,.18));
}
body::after{
  opacity:.42;
  background:
    linear-gradient(115deg,transparent 0 36%,rgba(88,215,255,.08) 42%,transparent 48% 100%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px);
  animation:probe-scan 14s linear infinite;
}
.topbar{
  background:linear-gradient(180deg,rgba(7,11,22,.92),rgba(9,15,29,.78)) !important;
  border-bottom:1px solid rgba(88,215,255,.16) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.28), inset 0 -1px rgba(255,255,255,.02);
}
.brand,.topbar-left,.topbar .brand{
  letter-spacing:.02em;
  text-shadow:0 0 18px rgba(88,215,255,.18);
}
.topbar nav a,.topbar-nav a,.topbar .back,.topbar .node-link,.topbar .logout,.topbar-right a{
  position:relative;
  overflow:hidden;
}
.topbar nav a::after,.topbar-nav a::after,.topbar .back::after,.topbar .node-link::after,.topbar .logout::after,.topbar-right a::after{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:3px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0;
  transform:scaleX(.2);
  transition:opacity .22s ease,transform .22s ease;
}
.topbar nav a:hover::after,.topbar nav a.active::after,.topbar-nav a:hover::after,.topbar-nav a.active::after,.topbar .back:hover::after,.topbar .node-link:hover::after,.topbar .logout:hover::after,.topbar-right a:hover::after{
  opacity:.85;
  transform:scaleX(1);
}
.wrap,.main{position:relative;z-index:1;}
.wrap::before,.main::before{
  content:"";
  position:absolute;
  inset:14px 6px auto;
  height:210px;
  pointer-events:none;
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(88,215,255,.16),transparent 28%,transparent 72%,rgba(32,201,151,.10)),
    url("data:image/svg+xml,%3Csvg width='720' height='220' viewBox='0 0 720 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2358d7ff' stroke-opacity='.18' stroke-width='1'%3E%3Cpath d='M8 150h90l26-40h90l20 28h86l36-64h82l28 42h104l28-32h112'/%3E%3Cpath d='M54 52h108l18 22h84l24-24h118l20 34h70l26-22h144'/%3E%3Ccircle cx='98' cy='150' r='4'/%3E%3Ccircle cx='214' cy='110' r='4'/%3E%3Ccircle cx='438' cy='74' r='4'/%3E%3Ccircle cx='570' cy='116' r='4'/%3E%3C/g%3E%3C/svg%3E") center top/720px 220px no-repeat;
  opacity:.45;
  mix-blend-mode:screen;
}
.stat-row,.stats-row{perspective:1000px;}
.stat-card,.panel,.submit-panel,.cmd-submit,.table-wrap,.box,.modal,.node-head,.add-form,.deploy-hint{
  position:relative;
  border-color:var(--border-soft) !important;
  background:
    linear-gradient(180deg,rgba(18,30,52,.78),rgba(9,16,30,.64)) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045);
}
.stat-card::before,.panel::before,.submit-panel::before,.cmd-submit::before,.table-wrap::before,.box::after,.node-head::before,.add-form::before,.deploy-hint::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(88,215,255,.16),transparent 24%,transparent 76%,rgba(32,201,151,.08)),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 32%);
  opacity:.55;
}
.stat-card .val,.stat-card .num,.metric .val{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;
}
.stat-card.warn,.stat-card.down,.stat-card.failed,.stat-card.type-offline,.stat-card.type-resource,
.card.warn,.card.down{animation:probe-alert-breathe 3.4s ease-in-out infinite;}
.grid{align-items:stretch;}
.card{
  isolation:isolate;
  border-color:rgba(126,211,255,.16) !important;
  background:
    linear-gradient(145deg,rgba(18,30,52,.82),rgba(8,14,27,.72) 62%,rgba(13,23,41,.84)) !important;
  box-shadow:0 14px 44px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.045);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,filter .22s ease !important;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(120deg,transparent 0 34%,rgba(88,215,255,.18) 45%,transparent 56% 100%),
    radial-gradient(circle at var(--mx, 50%) var(--my, 0%),rgba(88,215,255,.16),transparent 36%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:220% 100%,100% 100%,18px 18px,18px 18px;
  background-position:180% 0,0 0,0 0,0 0;
  opacity:.55;
  transition:background-position .55s ease,opacity .22s ease;
}
.card:hover{
  transform:translateY(-4px) !important;
  border-color:var(--border-hot) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.32),0 0 0 1px rgba(88,215,255,.08), inset 0 1px rgba(255,255,255,.08);
}
.card:hover::before{background-position:-15% 0,0 0,0 0,0 0;opacity:.88;}
.card::after{box-shadow:0 0 18px currentColor;}
.card.ok{color:var(--ok);}
.card.warn{color:var(--warn);}
.card.down{color:var(--down);}
.badge,.auth-badge,.type-badge,.proc-tag{
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.badge.ok,.status-dot.ok{box-shadow:0 0 18px rgba(32,201,151,.34);}
.badge.warn,.status-dot.warn{box-shadow:0 0 20px rgba(255,176,32,.38);}
.badge.down,.status-dot.down{box-shadow:0 0 22px rgba(255,77,79,.42);}
.status-dot{position:relative;}
.status-dot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:.18;
  animation:probe-heartbeat 2.6s ease-out infinite;
}
.bar-wrap{
  position:relative;
  background:rgba(3,8,18,.78) !important;
  border:1px solid rgba(126,211,255,.09);
}
.bar-fill{
  position:relative;
  transform-origin:left center;
  will-change:transform,width;
  box-shadow:0 0 14px rgba(88,215,255,.22);
}
.bar-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-100%);
  animation:probe-bar-sheen 2.8s ease-in-out infinite;
}
table tbody tr, .dev-table tr, .cmd-table tr{
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
table tbody tr:hover,.dev-table tr:hover,.cmd-table tr:hover,.tunnel-table tr:hover{
  background:rgba(88,215,255,.055) !important;
  box-shadow:inset 3px 0 rgba(88,215,255,.42);
}
.btn,.btn-submit,.btn-login,.btn-add,.btn-form,.preset-btn,.filter-btn,.deploy-btn,.toggle-btn,.del-btn{
  position:relative;
  overflow:hidden;
  transition:transform .16s ease,border-color .18s ease,background .18s ease,opacity .18s ease,box-shadow .18s ease !important;
}
.btn:hover,.btn-submit:hover,.btn-login:hover,.btn-add:hover,.btn-form:hover,.preset-btn:hover,.filter-btn:hover,.deploy-btn:hover,.toggle-btn:hover,.del-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(0,0,0,.24),0 0 0 1px rgba(88,215,255,.10);
}
.btn:active,.btn-submit:active,.btn-login:active,.btn-add:active,.btn-form:active,.preset-btn:active,.filter-btn:active,.deploy-btn:active,.toggle-btn:active,.del-btn:active{transform:translateY(0) scale(.985);}
.btn-submit::after,.btn-login::after,.btn-add::after,.btn-form::after,.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0 28%,rgba(255,255,255,.36) 46%,transparent 64% 100%);
  transform:translateX(-120%);
  transition:transform .65s ease;
}
.btn-submit:hover::after,.btn-login:hover::after,.btn-add:hover::after,.btn-form:hover::after,.btn-primary:hover::after{transform:translateX(120%);}
.btn-submit.is-loading,.btn-form.is-loading,.btn-login.is-loading{cursor:progress;opacity:.82;}
.btn-submit.is-loading::before,.btn-form.is-loading::before,.btn-login.is-loading::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:probe-loading-line 1.15s linear infinite;
}
input,select,textarea,code,.access-tip{
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
input:focus,select:focus,textarea:focus{
  box-shadow:0 0 0 3px rgba(88,215,255,.10),0 0 28px rgba(88,215,255,.08);
}
.modal-overlay.active .modal{animation:probe-modal-in .22s ease both;}
.refresh-hint,.copy-toast{box-shadow:0 12px 34px rgba(0,0,0,.28),0 0 0 1px rgba(88,215,255,.12);}

@keyframes probe-scan{0%{background-position:-120vw 0,0 0;}100%{background-position:120vw 0,0 0;}}
@keyframes probe-alert-breathe{0%,100%{filter:drop-shadow(0 0 0 rgba(255,176,32,0));}50%{filter:drop-shadow(0 0 10px rgba(255,176,32,.16));}}
@keyframes probe-heartbeat{0%{transform:scale(.75);opacity:.28;}70%,100%{transform:scale(1.75);opacity:0;}}
@keyframes probe-bar-sheen{0%,46%{transform:translateX(-110%);}76%,100%{transform:translateX(110%);}}
@keyframes probe-loading-line{0%{transform:translateX(-65%);}100%{transform:translateX(65%);}}
@keyframes probe-modal-in{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}

@media(max-width:760px){
  .topbar{height:auto;min-height:56px;padding:10px 14px !important;gap:10px;flex-wrap:wrap;}
  .topbar nav,.topbar-nav,.topbar-right{gap:4px;flex-wrap:wrap;}
  .topbar nav a,.topbar-nav a,.topbar .back,.topbar .node-link,.topbar .logout,.topbar-right a{padding:6px 10px !important;}
  .wrap,.main{padding-left:14px !important;padding-right:14px !important;}
  .grid{grid-template-columns:1fr !important;}
  .stat-row,.stats-row{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .table-wrap{overflow-x:auto;}
  table{min-width:680px;}
}
@media(max-width:460px){.stat-row,.stats-row{grid-template-columns:1fr !important;}.page-head,.page-header{align-items:flex-start !important;}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.001ms !important;}
  body::after{animation:none !important;opacity:.18;}
  .bar-fill::after,.status-dot::after{display:none !important;}
}