:root{color-scheme:dark;--bg:#090b14;--bg2:#101321;--panel:rgba(18,21,35,.82);--panel2:#111626;--line:#262b42;--line2:#343955;--text:#f4f4fb;--muted:#8b90aa;--muted2:#666c85;--purple:#7b4dff;--purple2:#985fff;--purpleGlow:rgba(123,77,255,.28);--ok:#2ad97d;--weak:#f2b642;--down:#ff5b6b;--unknown:#3e455e;--shadow:0 24px 70px rgba(0,0,0,.34)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}html{scroll-behavior:smooth}body{background:linear-gradient(180deg,#090b14,#070910 55%,#080a12);color:var(--text);font-family:'Estedad',Tahoma,Arial,system-ui,-apple-system,sans-serif;font-weight:500;overflow-x:hidden}.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:-3;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 82%)}.orb{position:fixed;border-radius:50%;pointer-events:none;filter:blur(90px);z-index:-2;opacity:.22}.orb-a{width:360px;height:360px;right:-100px;top:40px;background:#7646ff;animation:floatA 10s ease-in-out infinite}.orb-b{width:300px;height:300px;left:-120px;bottom:5%;background:#2937a8;animation:floatB 13s ease-in-out infinite}@keyframes floatA{50%{transform:translate(-35px,45px) scale(1.08)}}@keyframes floatB{50%{transform:translate(45px,-35px) scale(.93)}}
.page-shell{width:min(1580px,calc(100% - 30px));margin:0 auto;padding:24px 0 34px}.top-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:18px 20px;border:1px solid rgba(130,102,255,.16);border-radius:20px;background:linear-gradient(135deg,rgba(29,31,50,.88),rgba(14,17,29,.82));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(16px)}.brand-side{display:flex;align-items:center;gap:15px}.logo-shell{position:relative;width:58px;height:58px;flex:0 0 58px}.brand-logo{position:relative;width:58px;height:58px;border-radius:17px;display:block;z-index:2;filter:drop-shadow(0 8px 18px rgba(91,52,255,.28));animation:logoFloat 5s ease-in-out infinite}.logo-glow{position:absolute;inset:5px;border-radius:18px;background:#8252ff;filter:blur(17px);opacity:.36;animation:logoPulse 3.3s ease-in-out infinite}@keyframes logoPulse{50%{opacity:.62;transform:scale(1.08)}}@keyframes logoFloat{50%{transform:translateY(-2px)}}.brand-kicker,.section-eyebrow{direction:ltr;text-align:right;color:#7d82a2;font-size:9px;letter-spacing:1.6px;font-weight:700}.brand-copy h1{margin:4px 0 0;font-size:21px;letter-spacing:-.45px;font-weight:800;line-height:1.45}.brand-subline{display:flex;align-items:center;gap:7px;margin-top:7px;color:var(--muted);font-size:10.5px;flex-wrap:wrap}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(42,217,125,.35);animation:livePulse 2s infinite}.live-dot.stale{background:var(--weak);animation:none;box-shadow:0 0 12px var(--weak)}@keyframes livePulse{70%{box-shadow:0 0 0 8px rgba(42,217,125,0)}100%{box-shadow:0 0 0 0 rgba(42,217,125,0)}}.hero-actions{display:flex;gap:9px;align-items:center}.connection-badge,.refresh-btn{height:38px;border:1px solid var(--line2);border-radius:12px;background:rgba(20,23,38,.82);color:#cdd0df}.connection-badge{display:flex;align-items:center;gap:8px;padding:0 13px;font-size:10px;direction:ltr}.connection-pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}.connection-badge.offline .connection-pulse{background:var(--down);box-shadow:0 0 12px var(--down)}.connection-badge.syncing .connection-pulse{background:var(--weak);box-shadow:0 0 12px var(--weak)}.refresh-btn{width:40px;display:grid;place-items:center;cursor:pointer;transition:.18s ease}.refresh-btn:hover{border-color:#6549ba;background:#18192b;color:#fff;transform:translateY(-1px)}.refresh-btn.spinning svg{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.banner{margin-bottom:14px;padding:11px 14px;border:1px solid var(--line2);border-radius:13px;background:#141827;color:#cfd2e0;font-size:11px}.banner-danger{border-color:rgba(255,91,107,.4);background:rgba(255,91,107,.08);color:#ff9ba5}.banner-warn{border-color:rgba(242,182,66,.35);background:rgba(242,182,66,.08);color:#ffd27c}
.network-overview{position:relative;overflow:hidden;margin-bottom:13px;padding:17px 18px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(130deg,rgba(27,29,46,.93),rgba(16,18,31,.94));box-shadow:var(--shadow)}.network-overview:after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;left:-80px;top:-130px;background:radial-gradient(circle,rgba(125,78,255,.17),transparent 67%)}.overview-main{display:flex;align-items:center;justify-content:space-between;gap:18px}.overview-main h2,.panel-head h2{margin:3px 0 4px;font-size:14px;font-weight:800;line-height:1.55}.overview-main p{margin:0;color:var(--muted2);font-size:9.5px}.score-block{text-align:left;direction:ltr}.score-block strong{display:block;font-size:28px;line-height:1;font-weight:900;background:linear-gradient(135deg,#fff,#bba7ff);-webkit-background-clip:text;background-clip:text;color:transparent}.score-block span{display:block;color:var(--muted2);font-size:8px;margin-top:5px}.health-track{height:6px;margin-top:14px;border-radius:999px;background:#202439;overflow:hidden}.health-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#6041e8,#9565ff,#2ed983);box-shadow:0 0 20px rgba(127,86,255,.5);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:13px}.summary-card{min-height:88px;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,rgba(23,26,43,.94),rgba(14,17,28,.94));box-shadow:0 16px 38px rgba(0,0,0,.18);transition:.18s ease;overflow:hidden;position:relative}.summary-card:hover{transform:translateY(-2px);border-color:#383c58}.summary-card:before{content:"";position:absolute;inset:auto -30px -55px auto;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.015)}.summary-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#1b1f33;border:1px solid #2d324a;color:#9a8aff;font-size:15px}.summary-card.ok .summary-icon{color:var(--ok)}.summary-card.weak .summary-icon{color:var(--weak)}.summary-card.down .summary-icon{color:var(--down)}.summary-label{display:block;color:var(--muted);font-size:9.5px;font-weight:500}.summary-card strong{display:block;margin-top:2px;font-size:22px;line-height:1;font-weight:900}.summary-sub{display:block;color:var(--muted2);font-size:8px;margin-top:5px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.search-wrap{position:relative;width:min(360px,100%)}.search-wrap svg{position:absolute;right:13px;top:12px;color:#747b98}.search-wrap input{width:100%;height:40px;border:1px solid var(--line);border-radius:12px;background:#101421;color:#eeeefa;outline:0;padding:0 38px 0 13px;font-family:inherit;font-size:10px;font-weight:500;transition:.18s ease}.search-wrap input:focus{border-color:#6550ad;box-shadow:0 0 0 3px rgba(123,77,255,.1)}.search-wrap input::placeholder{color:#5d637b}.filter-group{display:flex;gap:5px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#0f121e}.filter-btn{border:0;border-radius:8px;background:transparent;color:#767c97;padding:7px 12px;font-family:inherit;font-size:9px;font-weight:600;cursor:pointer;transition:.15s ease}.filter-btn:hover{color:#c9cbda}.filter-btn.active{background:linear-gradient(135deg,#28233f,#1a1d30);color:#fff;box-shadow:inset 0 0 0 1px rgba(139,106,255,.24)}
.status-panel{border:1px solid var(--line);border-radius:18px;background:rgba(13,16,27,.94);overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}.legend{display:flex;gap:12px;align-items:center;color:#767d99;font-size:8.5px}.legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:6px;height:6px;border-radius:50%;background:var(--unknown)}.legend-dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}.legend-dot.weak{background:var(--weak);box-shadow:0 0 8px var(--weak)}.legend-dot.down{background:var(--down);box-shadow:0 0 8px var(--down)}.table-wrap{overflow:auto;max-height:calc(100vh - 315px);min-height:390px;scrollbar-color:#393e59 #10131f;scrollbar-width:thin}table{width:100%;min-width:1130px;border-collapse:collapse;direction:ltr}thead th{position:sticky;top:0;z-index:10;padding:11px 13px;background:rgba(14,17,29,.97);backdrop-filter:blur(11px);border-bottom:1px solid var(--line);color:#8d93ac;text-align:left;font-size:8.5px;letter-spacing:.55px;white-space:nowrap}tbody td{padding:11px 13px;border-bottom:1px solid #1b2031;vertical-align:middle;transition:background .18s ease}tbody tr:last-child td{border-bottom:0}tbody tr:hover td{background:rgba(126,83,255,.022)}.server-row.filtered-out{display:none}.config-col,.config-cell{width:260px;min-width:260px}.config-cell{direction:ltr}.server-name{max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f0f1f8;font-size:11px;font-weight:700}.server-meta{display:flex;align-items:center;gap:5px;margin-top:5px;color:#686f89;font-size:8px}.row-status{width:5px;height:5px;border-radius:50%;background:var(--unknown)}.row-status.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}.row-status.weak{background:var(--weak);box-shadow:0 0 8px var(--weak)}.row-status.down{background:var(--down);box-shadow:0 0 8px var(--down)}.worker-cell{min-width:185px}.cell-head,.metrics{display:flex;align-items:center;justify-content:space-between;gap:8px}.cell-head{margin-bottom:6px}.cell-head strong{font-size:9.5px;color:#b8bbca}.state-pill{display:inline-flex;align-items:center;gap:5px;font-size:8px;font-weight:800}.state-dot{width:6px;height:6px;border-radius:50%;background:var(--unknown)}.state-pill.ok{color:var(--ok)}.state-pill.ok .state-dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}.state-pill.weak{color:var(--weak)}.state-pill.weak .state-dot{background:var(--weak);box-shadow:0 0 8px var(--weak)}.state-pill.down{color:var(--down)}.state-pill.down .state-dot{background:var(--down);box-shadow:0 0 8px var(--down)}.state-pill.unknown{color:#747b94}.timeline{width:100%;height:17px;display:flex;gap:1px;align-items:stretch;padding:3px;border:1px solid #232a3f;border-radius:6px;background:#0b0e18;overflow:hidden;position:relative}.timeline:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.045) 50%,transparent 100%);transform:translateX(-120%);animation:scan 7s ease-in-out infinite;pointer-events:none}@keyframes scan{0%,75%{transform:translateX(-120%)}100%{transform:translateX(120%)}}.timeline.empty{opacity:.32}.bar{flex:1 1 0;min-width:1px;border-radius:1px;background:var(--unknown);transition:transform .12s ease,filter .12s ease}.bar:hover{transform:scaleY(1.35);filter:brightness(1.25);z-index:2}.bar.ok{background:var(--ok)}.bar.weak{background:var(--weak)}.bar.down{background:var(--down)}.metrics{margin-top:5px;color:#6c7289;font-size:8px;direction:ltr;white-space:nowrap}.no-results,.empty-row td{padding:44px 20px!important;text-align:center;direction:rtl;color:#737991;font-size:11px}.no-results{border-top:1px solid var(--line)}.flash-update{animation:flash .55s ease}@keyframes flash{0%{filter:brightness(1.14)}100%{filter:brightness(1)}}.footer{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 0 0;color:#555b72;font-size:8.5px;direction:ltr}.footer img{width:20px;height:20px;border-radius:6px;opacity:.78}.footer i{width:3px;height:3px;border-radius:50%;background:#43495d}
@media(max-width:980px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar{flex-direction:column;align-items:stretch}.search-wrap{width:100%;max-width:none}.filter-group{align-self:flex-start}.table-wrap{max-height:none}}@media(max-width:640px){.page-shell{width:100%;padding:10px 0 22px}.top-hero{margin:0 10px 12px;padding:14px;border-radius:16px}.logo-shell,.brand-logo{width:48px;height:48px}.logo-shell{flex-basis:48px}.brand-logo{border-radius:14px}.brand-copy h1{font-size:17px}.brand-kicker{font-size:7.5px}.connection-badge{display:none}.network-overview{margin:0 10px 10px}.summary-grid{padding:0 10px;gap:7px}.summary-card{min-height:78px;padding:11px;gap:9px}.summary-icon{width:31px;height:31px}.summary-card strong{font-size:19px}.toolbar{padding:0 10px}.filter-group{width:100%;justify-content:space-between}.filter-btn{flex:1}.status-panel{border-radius:0;border-left:0;border-right:0}.panel-head{padding:12px 11px}.legend{gap:7px}.banner{margin:0 10px 10px}.overview-main p{display:none}}


/* =========================================================
   v6.3 — Telegram/WebView responsive matrix
   No internal horizontal/vertical table scrollbars.
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
.mobile-worker-label{display:none}

/* Desktop/tablet: always fit all 5 columns inside the viewport. */
.table-wrap{
  overflow:visible!important;
  max-height:none!important;
  min-height:0!important;
}
#statusTable{
  width:100%;
  min-width:0!important;
  table-layout:fixed;
}
#statusTable .config-col,
#statusTable .config-cell{
  width:17%;
  min-width:0!important;
}
#statusTable th:not(.config-col),
#statusTable td:not(.config-cell){
  width:20.75%;
  min-width:0;
}
#statusTable .worker-cell{
  width:100%;
  min-width:0!important;
}
#statusTable .timeline{min-width:0}
#statusTable .server-name{max-width:100%}

/* Telegram Desktop / compact WebView */
@media(max-width:1180px){
  .page-shell{width:calc(100% - 14px)}
  thead th{padding:10px 7px;font-size:7.6px;letter-spacing:.15px}
  tbody td{padding:10px 7px}
  #statusTable .config-col,#statusTable .config-cell{width:16%}
  #statusTable th:not(.config-col),#statusTable td:not(.config-cell){width:21%}
  .server-name{font-size:9.8px}
  .server-meta{font-size:7.3px}
  .cell-head{gap:4px}
  .cell-head strong{font-size:8.4px}
  .state-pill{font-size:7.4px;gap:4px}
  .state-dot{width:5px;height:5px}
  .timeline{height:15px;padding:2px;gap:1px}
  .metrics{font-size:7px}
}

/* Mobile / narrow Telegram WebView:
   convert each server row into a self-contained 2x2 card. */
@media(max-width:720px){
  .page-shell{width:100%}
  .status-panel{overflow:visible;border-left:0;border-right:0;border-radius:0}
  .panel-head{position:relative}
  .table-wrap{overflow:visible!important;padding:0 9px 10px}

  #statusTable,
  #statusTable tbody{
    display:block;
    width:100%;
  }

  #statusTable thead{display:none}

  #statusTable .server-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
    width:100%;
    margin:10px 0;
    padding:10px;
    border:1px solid #20263a;
    border-radius:14px;
    background:linear-gradient(155deg,rgba(19,22,36,.98),rgba(11,14,24,.98));
  }

  #statusTable .server-row.filtered-out{display:none!important}

  #statusTable .server-row > td{
    display:block;
    width:auto!important;
    min-width:0!important;
    padding:9px!important;
    border:1px solid #20263a;
    border-radius:10px;
    background:rgba(13,16,27,.72);
  }

  #statusTable .server-row > .config-cell{
    grid-column:1 / -1;
    padding:4px 2px 8px!important;
    border:0;
    border-bottom:1px solid #20263a;
    border-radius:0;
    background:transparent;
  }

  .config-cell .server-name{
    max-width:none;
    font-size:11px;
  }

  .mobile-worker-label{
    display:block;
    margin-bottom:6px;
    color:#757c99;
    font-size:7px;
    font-weight:700;
    letter-spacing:.25px;
    direction:ltr;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .worker-cell{min-width:0!important}
  .timeline{height:16px}
  .metrics{font-size:7.4px}
  .cell-head strong{font-size:8.8px}
  .state-pill{font-size:7.6px}

  .no-results,.empty-row td{
    display:block!important;
    width:100%!important;
    border:0!important;
  }

  .footer{padding-bottom:8px}
}

/* Very small phones: retain 2 columns, but tighten spacing so no horizontal scroll. */
@media(max-width:420px){
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #statusTable .server-row{gap:6px;padding:7px;margin:8px 0}
  #statusTable .server-row > td{padding:7px!important}
  .mobile-worker-label{font-size:6.5px}
  .timeline{height:14px;padding:2px}
  .cell-head strong{font-size:8px}
  .state-pill{font-size:7px}
  .metrics{font-size:6.7px}
  .panel-head .legend{display:none}
}