/* NetShield-E live demo: one dark "control room" theme, same design language as m-ashraf.com */
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/barlow-sc-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("fonts/redhat-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("fonts/redhat-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0e1216;
  --surface: #141a1f;
  --surface-2: #1a2128;
  --ink: #e9edf0;
  --ink-2: #b5bec7;
  --ink-3: #8b959f;
  --line: #252d35;
  --line-2: #3a454f;
  --accent: #ffc400;          /* single-mode fibre jacket yellow, as on m-ashraf.com */
  --accent-ink: #12161b;
  --good: #3ccf6e;
  --warning: #f0a92b;
  --serious: #f08a5d;
  --critical: #ff6b5e;
  --idle: #6b7681;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; }
p { margin: 0; }

.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 12px max(16px, calc((100vw - 1180px) / 2 + 24px)); background: rgba(10, 14, 19, 0.82); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; color: var(--ink); text-decoration: none; font-family: var(--font-mono); font-weight: 500; }
.brand svg { width: 26px; height: 26px; }
.mark-bg { fill: #12161b; stroke: var(--line-2); stroke-width: 1; }
.mark-trace { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.top-link { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.top-link:hover { color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 2px; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--idle); }
.chip[data-on="live"] { color: var(--ink); }
.chip[data-on="live"]::before { background: var(--good); animation: pulse 2s ease-in-out infinite; }
.chip[data-on="off"]::before { background: var(--critical); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.55); } 50% { box-shadow: 0 0 0 5px rgba(12, 163, 12, 0); } }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px 56px; }
@media (min-width: 640px) { .wrap { padding: 0 24px 64px; } }
.intro { padding: 36px 0 26px; max-width: 46rem; }
.eyebrow { font: 500 0.78rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.intro h1 { margin-top: 10px; font-size: clamp(2rem, 4vw + 0.8rem, 3.2rem); font-weight: 700; line-height: 1.06; }
.lede { margin-top: 14px; font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.18rem); color: var(--ink-2); }

.grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; } }
.side { display: grid; gap: 16px; }
.panel { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.panel-title { margin-bottom: 10px; font: 500 0.78rem/1.4 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }

/* status banner */
.status { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface-2); transition: border-color 0.3s ease, background-color 0.3s ease; }
.status h2 { font-size: 1.3rem; font-weight: 600; }
.status p { margin-top: 2px; color: var(--ink-2); font-size: 0.95rem; }
.status-dot { flex: none; width: 14px; height: 14px; margin-top: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 5px rgba(60, 207, 110, 0.18); }
.status[data-tone="warning"] { border-color: var(--warning); }
.status[data-tone="warning"] .status-dot { background: var(--warning); box-shadow: 0 0 0 5px rgba(250, 178, 25, 0.2); animation: blink 1s steps(2) infinite; }
.status[data-tone="serious"] { border-color: var(--serious); }
.status[data-tone="serious"] .status-dot { background: var(--serious); box-shadow: 0 0 0 5px rgba(236, 131, 90, 0.2); }
.status[data-tone="critical"] { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, var(--surface-2)); }
.status[data-tone="critical"] .status-dot { background: var(--critical); box-shadow: 0 0 0 5px rgba(208, 59, 59, 0.22); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* topology (same drawing as the home page) */
.topo { display: block; width: 100%; max-width: 560px; height: auto; margin: 14px auto 6px; font-family: var(--font-mono); }
.topo .t-link { stroke: var(--line-2); stroke-width: 1.5; transition: stroke 0.3s ease; }
.topo .t-probe { stroke: var(--line-2); stroke-width: 1.25; stroke-dasharray: 3 4; }
.topo[data-route="vm1"] .l-vm1 { stroke: var(--accent); stroke-width: 2; }
.topo[data-route="dead"] .l-vm1 { stroke: var(--critical); stroke-dasharray: 4 4; }
.topo[data-route="pi4"] .l-pi4 { stroke: var(--good); stroke-width: 2; }
.topo .p-pi4.ssh { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: none; }
.topo .t-hub { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 1.25; }
.topo .t-hub-dot { fill: var(--ink-3); }
.topo .t-node rect { rx: 2px; fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.25; transition: stroke 0.3s ease, fill 0.3s ease; }
.topo .t-dot { fill: var(--idle); }
.topo .t-label { fill: var(--ink); font-size: 12px; font-weight: 500; }
.topo .t-status { fill: var(--ink-3); font-size: 10px; }
.topo[data-vm1="good"] .n-vm1 .t-dot, .topo[data-pi4="good"] .n-pi4 .t-dot, .topo[data-ctl="good"] .n-ctl .t-dot { fill: var(--good); }
.topo[data-vm1="critical"] .n-vm1 .t-dot { fill: var(--critical); }
.topo[data-vm1="critical"] .n-vm1 rect { stroke: var(--critical); fill: color-mix(in srgb, var(--critical) 10%, var(--surface-2)); }
.topo[data-pi4="warning"] .n-pi4 .t-dot, .topo[data-ctl="warning"] .n-ctl .t-dot { fill: var(--warning); }
.topo[data-pi4="warning"] .n-pi4 rect, .topo[data-ctl="warning"] .n-ctl rect { stroke: var(--warning); }
.topo[data-ctl="serious"] .n-ctl .t-dot { fill: var(--serious); }
.topo[data-ctl="serious"] .n-ctl rect { stroke: var(--serious); }
.topo[data-pi4="good"] .n-pi4 rect { stroke: var(--good); fill: color-mix(in srgb, var(--good) 9%, var(--surface-2)); }
.topo .pk { fill: var(--accent); }
.topo .pk.ok { fill: var(--good); }
.topo .pk.bad, .topo .pk.probe.bad { fill: var(--critical); }
.topo .pk.probe { fill: var(--ink-3); }

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 20px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--surface-2); color: var(--ink); font: 600 1rem/1.2 var(--font-sans); text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--ink-3); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-danger { background: #c8312b; border-color: #c8312b; color: #ffffff; }
.btn-danger:hover:not(:disabled) { background: #b02a25; border-color: #b02a25; }
.btn-ghost { margin-top: 14px; min-height: 40px; padding: 8px 14px; font-size: 0.92rem; }
.msg { min-height: 1.5em; margin-top: 10px; font-size: 0.92rem; color: var(--ink-2); }

/* timer */
.big { font-family: var(--font-mono); font-size: clamp(2.4rem, 3vw + 1.6rem, 3.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sub { margin-top: 6px; font-size: 0.9rem; color: var(--ink-3); }
.segbar { display: flex; gap: 2px; height: 12px; margin-top: 16px; overflow: hidden; border-radius: 1px; background: var(--surface-2); }
.seg { display: block; width: 0; height: 100%; transition: width 0.5s ease; }
.s1 { background: var(--s1); }
.s2 { background: var(--s2); }
.s3 { background: var(--s3); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 1px; }
.legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.k1 { background: var(--s1); }
.k2 { background: var(--s2); }
.k3 { background: var(--s3); }
.history { margin-top: 12px; font: 0.82rem/1.5 var(--font-mono); color: var(--ink-3); }

/* site panel */
.site { display: flex; align-items: center; gap: 14px; }
.code { display: inline-grid; place-items: center; min-width: 64px; height: 44px; padding: 0 10px; border-radius: 2px; background: color-mix(in srgb, var(--good) 18%, var(--surface-2)); color: var(--ink); font: 600 1.15rem/1 var(--font-mono); }
.site[data-tone="critical"] .code { background: color-mix(in srgb, var(--critical) 26%, var(--surface-2)); }
.site-main { font-weight: 600; }

/* log */
.log { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; max-height: 300px; overflow: auto; font: 0.8rem/1.45 var(--font-mono); }
.log li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 10px; color: var(--ink-2); }
.log time { color: var(--ink-3); }
.log li:first-child { color: var(--ink); }

.note { margin-top: 22px; max-width: 52rem; font-size: 0.9rem; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}