:root {
  --ink: #0D1F1B;
  --panel: #122A24;
  --panel-light: #1B3B33;
  --gold: #F2B705;
  --gold-dim: #B98A0A;
  --leaf: #5FA37A;
  --leaf-bright: #7FC79A;
  --paper: #F7F4EC;
  --ink-text: #0D1F1B;
  --muted: #8FA69E;
  --danger: #D6552F;
  --line: rgba(255,255,255,0.09);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--ink);
  color: #EAF3EF;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(242,183,5,0.06), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(95,163,122,0.08), transparent 45%);
}

h1, h2, h3, .mono-label, .gauge-value, .card-value, .section-eyebrow {
  font-family: 'Rajdhani', sans-serif;
}

.mono { font-family: 'JetBrains Mono', monospace; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 24px 70px; }

.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(145deg, var(--gold), var(--gold-dim));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset, 0 6px 14px rgba(242,183,5,0.25);
}
.brand-name { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; }
.brand-sub { font-size: 11px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }

.nav-links { display: flex; align-items: center; gap: 16px; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--muted); padding: 6px 10px; border-radius: 6px; }
.nav-links a:hover { color: #EAF3EF; background: rgba(255,255,255,0.05); }
.nav-links a.active { color: var(--gold); background: rgba(242,183,5,0.1); }
.nav-user { font-size: 12px; color: var(--muted); margin-right: 8px; }
.btn-nav {
  background: var(--gold); color: #241C02; padding: 7px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
}

.content { min-height: calc(100vh - 200px); }

.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-light) 160%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 20px;
}

.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}

.panel-eyebrow {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

h1 { font-size: 28px; font-weight: 700; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 17px;
}
.stat-tag {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px;
  color: var(--gold); background: rgba(242,183,5,0.1); border: 1px solid rgba(242,183,5,0.25);
  padding: 2px 7px; border-radius: 5px; margin-bottom: 10px;
}
.stat-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.card-value { font-size: 26px; font-weight: 700; }
.card-value span { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 3px; font-family: 'Inter', sans-serif; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 0 10px 10px 0; border-bottom: 1px solid var(--line);
}
tbody td { padding: 11px 10px 11px 0; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
.empty-row td { color: var(--muted); font-style: italic; padding: 20px 10px; }

.muted-cell { color: var(--muted); }
.amt { font-family: 'JetBrains Mono', monospace; color: var(--leaf-bright); font-weight: 600; }

.pill {
  display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px;
}
.pill-online { background: rgba(95,163,122,0.14); border: 1px solid rgba(95,163,122,0.35); color: var(--leaf-bright); }
.pill-offline { background: rgba(214,85,47,0.14); border: 1px solid rgba(214,85,47,0.35); color: var(--danger); }
.pill-maintenance { background: rgba(242,183,5,0.14); border: 1px solid rgba(242,183,5,0.35); color: var(--gold); }
.pill-warning { background: rgba(242,183,5,0.14); border: 1px solid rgba(242,183,5,0.35); color: var(--gold); }
.pill-medium { background: rgba(242,183,5,0.14); border: 1px solid rgba(242,183,5,0.35); color: var(--gold); }
.pill-high { background: rgba(214,85,47,0.14); border: 1px solid rgba(214,85,47,0.35); color: var(--danger); }
.pill-critical { background: rgba(214,85,47,0.2); border: 1px solid rgba(214,85,47,0.5); color: var(--danger); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.pill-online .dot { background: var(--leaf-bright); box-shadow: 0 0 8px var(--leaf-bright); animation: pulse 1.8s infinite; }
.pill-offline .dot { background: var(--danger); }
.pill-maintenance .dot { background: var(--gold); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
input, select {
  background: rgba(0,0,0,0.28); border: 1px solid var(--line); color: #EAF3EF;
  padding: 9px 12px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px;
  min-width: 190px;
}
input:focus, select:focus { outline: none; border-color: var(--gold); }

.btn {
  border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: 8px; transition: transform .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gold); color: #241C02; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: #EAF3EF; }
.btn-ghost:hover { border-color: var(--gold); }

.form-panel { max-width: 600px; }
.inline-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { flex: 1; min-width: 140px; }

.alert-success {
  background: rgba(95,163,122,0.14); border: 1px solid rgba(95,163,122,0.35);
  color: var(--leaf-bright); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
}
.alert-error {
  background: rgba(214,85,47,0.14); border: 1px solid rgba(214,85,47,0.35);
  color: var(--danger); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
}
.alert-error p { margin: 4px 0; }

.tab-links { display: flex; gap: 8px; margin-bottom: 16px; }
.tab-links a {
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
  background: rgba(0,0,0,0.25); color: var(--muted);
}
.tab-links a.active { background: var(--gold); color: #241C02; }

.site-footer { text-align: center; color: var(--muted); font-size: 11.5px; margin-top: 34px; }

.form-footnote { font-size: 12px; color: var(--muted); margin-top: 16px; }
.form-footnote a { color: var(--gold); }

@media (max-width: 880px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .topnav { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nav-links { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form .field { min-width: auto; }
}
/* ===== Responsive layer: phones, tablets, laptops, large screens ===== */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{overflow-x:hidden; overflow-wrap:break-word;}
img,video{max-width:100%; height:auto;}
.wrap{width:100%; padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right));}
.panel,.stat-card,.relay-card{min-width:0;}
.table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tab-links{flex-wrap:wrap;}
.form-panel{max-width:100%;}
@media (min-width:1500px){ .wrap{max-width:1360px;} }
@media (max-width:880px){
  .nav,.topnav{flex-wrap:wrap; gap:12px;}
  .nav-right{width:100%;}
  .nav-links{flex-wrap:wrap; gap:6px;}
  .panel-head{flex-wrap:wrap; gap:10px;}
  .link-row,.hero{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .wrap{padding-top:16px; padding-bottom:56px; padding-left:max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right));}
  .panel{padding:16px 14px;}
  h1{font-size:22px;}
  .table-scroll > table{min-width:560px;}
  input,select,textarea{font-size:16px;}
  .btn,.btn-nav{min-height:40px;}
  .coin-time{font-size:clamp(34px,12vw,54px);}
  .coin-msg{min-width:0; flex-basis:100%;}
  .clock-big{font-size:clamp(26px,8vw,42px);}
  .evidence,.evidence *{overflow-wrap:anywhere;}
}
@media (max-width:520px){
  .stat-row{grid-template-columns:1fr 1fr; gap:10px;}
  .relay-row{grid-template-columns:1fr;}
  .toast{left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); max-width:none;}
  .brand-name{font-size:19px;}
  .brand-sub{letter-spacing:1px;}
}
@media (max-width:360px){
  .stat-row{grid-template-columns:1fr;}
}