:root{
  --ink:#263036;
  --muted:#5f6b72;
  --line:rgba(80,90,95,.22);
  --font:"Trebuchet MS","Gill Sans","Aptos","Segoe UI",sans-serif;
  --mono:"Consolas","Lucida Console",monospace;
  --radius:14px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.35), transparent 22rem),
    linear-gradient(145deg, #b8bec1 0%, #d7dcde 45%, #b2b9bd 100%);
  color:var(--ink);
  font-family:var(--font);
  font-size:13px;
  letter-spacing:.01em;
}

.shell{
  max-width:1120px;
  margin:0 auto;
  padding:18px;
}

header,
.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:transparent;
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:12px 14px;
}

h1{
  margin:0;
  font-size:18px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#2b3338;
}

.subtitle{
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-family:var(--mono);
  font-size:11px;
}

.nav a{
  color:#25373f;
  text-decoration:none;
  border-bottom:1px solid rgba(37,55,63,.35);
}

.panel{
  padding:13px;
  margin-bottom:12px;
}

.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding-bottom:7px;
  border-bottom:1px solid var(--line);
  font-size:12px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#30393e;
}

.tech-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.tech-card{
  border:1px solid rgba(80,90,95,.18);
  border-radius:12px;
  padding:13px;
  background:rgba(255,255,255,.06);
}

.tech-card strong{
  display:block;
  margin-bottom:7px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#17232a;
}

.tech-card p,
.tech-card code{
  margin:0;
  color:#3d4d55;
  font-family:var(--mono);
  font-size:10px;
  line-height:1.45;
}

.flow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-family:var(--mono);
  font-size:10px;
  color:#24343c;
  line-height:1.5;
}

.flow span{
  display:inline-block;
  padding:6px 8px;
  border:1px solid rgba(80,90,95,.20);
  border-radius:9px;
  background:rgba(255,255,255,.08);
}

.flow b{
  color:#667279;
}

.note{
  color:#4c5b62;
  font-family:var(--mono);
  font-size:10px;
  line-height:1.45;
}

@media (max-width:760px){
  header{ flex-direction:column; align-items:flex-start; }
  .tech-grid{ grid-template-columns:1fr; }
}


.top-status-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid rgba(25,120,70,.42);
  background:#8fd9aa;
  color:#102028;
  font-family:var(--mono);
  font-size:10px;
  line-height:1.35;
  font-weight:700;
  box-shadow:
    0 0 10px rgba(47,168,99,.38),
    0 0 24px rgba(47,168,99,.18),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(20,90,50,.16);
}

.top-status-line.attention{
  background:#d77f7a;
  border-color:rgba(128,42,36,.45);
  box-shadow:
    0 0 10px rgba(173,64,56,.30),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(100,30,28,.18);
}

.top-status-line.checking{
  background:#d9bd66;
  border-color:rgba(145,96,18,.42);
  box-shadow:
    0 0 10px rgba(194,138,24,.25),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(110,76,18,.16);
}

.top-status-line span:not(:last-child)::after{
  content:" ·";
  margin-left:8px;
  color:#315845;
}