/* اتصال پایا — customer status page.
   A pale-green system: the page stays calm so the only strong colour on screen
   is a server that needs attention. */

:root{
  --bg:#f2f8f4;
  --panel:#ffffff;
  --panel-2:#fbfefc;
  --ink:#0f211a;
  --ink-soft:#62786c;
  --ink-faint:#93aa9d;
  --line:#e3efe8;
  --line-soft:#f0f7f3;
  --up:#12a150;
  --up-wash:#e8f8ef;
  --warn:#b06f0a;
  --warn-wash:#fdf4e5;
  --down:#d33c3c;
  --down-wash:#fdeeee;
  --sh-1:0 1px 1px rgba(15,33,26,.04);
  --sh-2:0 10px 30px -18px rgba(15,33,26,.28);
  --r:14px;
  /* Measurements use the same stack the monitor uses, so a number reads
     identically in both places and columns of them line up. */
  --ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0a1210; --panel:#111b17; --panel-2:#0f1815; --ink:#e6f1ea;
    --ink-soft:#9ab2a6; --ink-faint:#6b8377; --line:#1c2b24; --line-soft:#16221d;
    --up:#3ddc84; --up-wash:#0f2519; --warn:#f0b429; --warn-wash:#2a2110;
    --down:#f26d6d; --down-wash:#2a1414;
    --sh-1:0 1px 1px rgba(0,0,0,.3);
    --sh-2:0 14px 36px -20px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;line-height:1.65;font-size:14px}
.wrap{max-width:62rem;margin:0 auto;padding:clamp(1rem,3.5vw,2.2rem) clamp(.9rem,3.5vw,1.8rem) 2.6rem}

/* header */
.head{display:flex;align-items:center;justify-content:space-between;gap:.9rem;
  flex-wrap:wrap;margin-bottom:1.15rem}
.brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.mark{width:3rem;height:3rem;flex:none;border-radius:13px;object-fit:cover;
  border:1px solid var(--line);background:#fff;padding:2px;box-shadow:var(--sh-1)}
.titles h1{margin:0;font-size:clamp(1.3rem,4vw,1.62rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.25}
.titles p{margin:.1rem 0 0;color:var(--ink-soft);font-size:.82rem}

.pulse{display:inline-flex;align-items:center;gap:.42rem;padding:.3rem .68rem;
  border-radius:999px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink-soft);font-size:.72rem;box-shadow:var(--sh-1)}
.pulse-dot{width:.42rem;height:.42rem;border-radius:50%;background:var(--up);flex:none;
  animation:beat 2.6s ease-out infinite}
@keyframes beat{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 45%,transparent)}
  70%{box-shadow:0 0 0 .48rem transparent}
  100%{box-shadow:0 0 0 0 transparent}}
.pulse.stale .pulse-dot{background:var(--ink-faint);animation:none}

/* the two connection kinds */
/* A pair of equal tabs above the list. VIP is the one that goes through an
   Iranian relay, so it leads and carries the green; unlimited sits beside it in
   plain white until chosen. */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:1.05rem}
.btn{font:inherit;display:flex;align-items:center;justify-content:center;
  padding:.7rem .9rem;border-radius:12px;cursor:pointer;
  font-size:.9rem;font-weight:600;text-align:center;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);
  box-shadow:var(--sh-1);
  transition:transform .18s cubic-bezier(.4,0,.2,1),border-color .18s,
    background .18s,color .18s}
.btn:hover{transform:translateY(-1px)}

.btn-vip[aria-selected=true]{background:var(--up);border-color:var(--up);color:#fff;
  box-shadow:var(--sh-1),0 8px 20px -10px color-mix(in srgb,var(--up) 70%,transparent)}
.btn-vip[aria-selected=false]{color:var(--up);
  border-color:color-mix(in srgb,var(--up) 34%,var(--line))}

.btn-plain[aria-selected=true]{background:var(--panel);color:var(--ink);
  border-color:color-mix(in srgb,var(--ink-soft) 42%,var(--line));
  box-shadow:var(--sh-1),var(--sh-2)}

@media (max-width:26rem){.actions{grid-template-columns:1fr 1fr}}

/* summary */
.summary{display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);
  padding:.8rem 1.05rem;margin-bottom:1.05rem;
  box-shadow:var(--sh-1),var(--sh-2)}
.stat{display:flex;align-items:baseline;gap:.38rem}
.stat-n{font-size:1.24rem;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums}
.stat-up .stat-n{color:var(--up)}
.stat-warn .stat-n{color:var(--warn)}
.stat-down .stat-n{color:var(--down)}
.stat-l{color:var(--ink-soft);font-size:.76rem}
.bar{flex:1 1 8rem;height:.32rem;border-radius:999px;background:var(--down-wash);
  overflow:hidden;min-width:6rem}
.bar-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--up);
  transition:width .6s cubic-bezier(.4,0,.2,1)}

/* cards */
.grid{display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
.card{background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);
  padding:.72rem .85rem .62rem;
  box-shadow:var(--sh-1),var(--sh-2);
  display:flex;flex-direction:column;gap:.45rem;position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.4,0,.2,1),border-color .2s}
/* A hairline of status colour along the inline edge - present on every card, so
   a healthy grid reads as one calm rhythm and a broken one breaks it. */
.card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;
  width:2px;background:var(--up)}
.card.high_latency::before{background:var(--warn)}
.card.offline::before,.card.unknown::before{background:var(--down)}
.card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--up) 32%,var(--line))}

.card-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.name{font-weight:600;font-size:.86rem;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em;
  direction:ltr;text-align:left;unicode-bidi:isolate}
.pill{flex:none;display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;
  padding:.16rem .48rem;border-radius:999px;background:var(--up-wash);color:var(--up);
  font-weight:600;white-space:nowrap}
.card.high_latency .pill{background:var(--warn-wash);color:var(--warn)}
.card.offline .pill,.card.unknown .pill{background:var(--down-wash);color:var(--down)}
.pill i{width:.33rem;height:.33rem;border-radius:50%;background:currentColor;display:block}

.sub{color:var(--ink-soft);font-size:.72rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-top:-.18rem}

/* Latency and loss are the two numbers people came to read, so they get their
   own labelled pair rather than being folded into a line of prose. */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;
  padding:.46rem .58rem;border-radius:10px;
  background:var(--line-soft);border:1px solid var(--line)}
.metric{display:flex;align-items:baseline;min-width:0}
/* Both readings carry their own unit, so no separate label is needed: "82 ms"
   and "0.0% loss" say what they are in the same breath, and in one typeface the
   eye can scan straight down a column of cards. */
.m-v{font-family:var(--mono);font-size:.87rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--up);
  direction:ltr;text-align:start;unicode-bidi:isolate;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-u{font-weight:400;font-size:.74rem;opacity:.62;letter-spacing:.01em}
.m-v.warn{color:var(--warn)}
.m-v.bad{color:var(--down)}

.checked{color:var(--ink-faint);font-size:.67rem}

.empty{text-align:center;color:var(--ink-soft);padding:2.2rem 1rem}

/* footer */
.foot{margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--line);
  text-align:center;color:var(--ink-soft);font-size:.78rem}
.foot p{margin:.22rem 0}
.links a{color:var(--up);text-decoration:none;font-weight:600}
.links a:hover{text-decoration:underline}
.stamp{color:var(--ink-faint);font-size:.72rem}

:focus-visible{outline:2px solid var(--up);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}