:root {
  --bg: #08090d;
  --bg-soft: #0c0d13;
  --panel: #11121a;
  --panel-2: #151622;
  --panel-3: #1e1d2d;
  --line: rgba(255,255,255,.085);
  --line-strong: rgba(94,239,202,.26);
  --text: #ffffff;
  --muted: #9296a8;
  --muted-2: #6e7284;
  --accent: #5EEFCA;
  --accent-2: #61C3AA;
  --navy: #0B2E5A;
  --success: #5EEFCA;
  --danger: #ff6f7d;
  --warning: #f7c86b;
  --info: #78aee8;
  --green: #5EEFCA;
  --blue: #61C3AA;
  --red: #ff6f7d;
  --amber: #f7c86b;
  --cyan: #5EEFCA;
  --shadow: 0 24px 70px rgba(0,0,0,.30);
  --radius: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 8% -8%, rgba(94,239,202,.09), transparent 27%),
    radial-gradient(circle at 98% 0%, rgba(11,46,90,.22), transparent 32%),
    linear-gradient(180deg, #090a0f 0%, #08090d 100%);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.005em;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }
svg.spin-icon { width: 17px; height: 17px; flex: 0 0 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Shared app chrome */
.app-header,
.topbar,
body > header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8,9,13,.91);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.app-header-inner,
.topbar-inner,
body > header .inner {
  max-width: 1540px;
  margin: 0 auto;
  min-height: 72px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  min-width: max-content;
}
.brandmark {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: #07100e;
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 10px 34px rgba(94,239,202,.17);
}
.brand-title,
.brand strong { display: block; color: #fff; font-size: 15px; font-weight: 900; letter-spacing: -.02em; }
.brand-sub,
.brand span:not(.brandmark) { display: block; margin-top: 1px; color: var(--muted); font-size: 10.5px; font-weight: 560; }

.app-nav,
.nav,
.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: nowrap;
}
.app-nav-link,
.nav a,
.top-actions a {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #bfc2ce;
  background: rgba(255,255,255,.025);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 760;
  white-space: nowrap;
  transition: .18s ease;
}
.app-nav-link:hover,
.nav a:hover,
.top-actions a:hover {
  color: #fff;
  border-color: rgba(94,239,202,.23);
  background: rgba(94,239,202,.055);
  transform: translateY(-1px);
}
.app-nav-link.active,
.nav a.active,
.top-actions a.active {
  color: #07110e;
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 9px 26px rgba(94,239,202,.12);
}
.app-nav-link.external::after,
.nav a.external::after,
.top-actions a.external::after { content: "↗"; font-size: 10px; opacity: .75; }

.app-shell,
.shell,
.wrap,
main {
  width: min(1540px, 100%);
  margin: 0 auto;
  padding: 28px 24px 64px;
}

.page-hero,
.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 0 22px;
  margin: 0;
}
.page-hero.compact { padding-bottom: 17px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 880;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.page-hero h1,
.hero h1 {
  margin: 7px 0 7px;
  color: #fff;
  font-size: clamp(27px, 3.2vw, 43px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 860;
}
.page-hero p,
.hero p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}
.mode-pill,
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(94,239,202,.22);
  border-radius: 999px;
  background: rgba(94,239,202,.07);
  color: #bffaea;
  font-size: 10.5px;
  font-weight: 820;
}

/* cards / dashboard */
.card,
.panel,
.chart-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20,21,31,.97), rgba(15,16,24,.98));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card,
.panel { padding: 18px; margin: 0 0 15px; }
.panel { margin-top: 15px; }
.card::before,
.panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(94,239,202,.28), transparent);
  opacity: .55;
}
.card.featured,
.panel.featured { background: linear-gradient(135deg, rgba(30,29,45,.98), rgba(17,18,26,.98)); border-color: rgba(94,239,202,.15); }

.toolbar,
.section-head,
.range-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.toolbar > div:first-child,
.section-head > div:first-child { min-width: 0; }
.toolbar h2,
.section-head h2,
.range-title h2,
.card h2,
.panel h2 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 16.5px;
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 830;
}
.section-title-line { display: flex; align-items: center; gap: 9px; }
.title-icon {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(94,239,202,.07);
  border: 1px solid rgba(94,239,202,.13);
  color: var(--accent);
}
.muted { color: var(--muted); font-size: 11.5px; }
.ok { color: var(--success); }
.bad { color: var(--danger); }

.form-grid,
.runtime-grid,
.grid,
.kpis,
.reader-grid,
.devices,
.relay-grid {
  display: grid;
  gap: 11px;
}
.grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.form-grid, .runtime-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kpis { grid-template-columns: repeat(6, minmax(0,1fr)); }
.reader-grid, .relay-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.devices { grid-template-columns: repeat(3, minmax(0,1fr)); }

.stat,
.kpi,
.reader-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 112px;
  padding: 15px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #12131c, #101118);
}
.stat::after,
.kpi::after,
.reader-card::after {
  content: "";
  position: absolute;
  width: 105px;
  height: 105px;
  top: -66px;
  right: -58px;
  border-radius: 50%;
  background: rgba(94,239,202,.055);
  pointer-events: none;
}
.stat.highlight,
.kpi.highlight { background: linear-gradient(140deg, rgba(30,29,45,.98), rgba(13,34,37,.72)); border-color: rgba(94,239,202,.18); }
.stat strong { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 790; color: #e9ebf1; }
.stat .stat-icon { margin-bottom: 14px; color: var(--accent); }
.kpi .label { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.kpi .value { margin-top: 10px; font-size: 27px; line-height: 1; font-weight: 890; letter-spacing: -.045em; }
.kpi .sub { margin-top: 8px; color: var(--muted-2); font-size: 10.5px; }
.kpi.in .value { color: var(--accent); }
.kpi.out .value { color: #84d7c2; }
.kpi.warn .value { color: var(--warning); }
.reader-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.reader-name { font-size: 16px; font-weight: 850; }
.reader-count { margin: 14px 0 4px; font-size: 27px; font-weight: 900; letter-spacing:-.04em; }
.reader-meta { color: var(--muted); font-size: 10.5px; }

.badge,
.direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #d7d9e1;
  font-size: 9.5px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.badge.ok, .badge.green, .direction.in { background: rgba(94,239,202,.10); color: var(--accent); border: 1px solid rgba(94,239,202,.12); }
.badge.bad, .badge.red { background: rgba(255,111,125,.10); color: #ff99a3; border: 1px solid rgba(255,111,125,.12); }
.badge.warn, .badge.yellow, .direction.unknown, .direction.mixed { background: rgba(247,200,107,.10); color: var(--warning); border: 1px solid rgba(247,200,107,.12); }
.badge.blue, .direction.out { background: rgba(97,195,170,.10); color: #9be2d0; border: 1px solid rgba(97,195,170,.12); }

/* Buttons */
a.btn,
a.button,
button,
input[type="submit"] {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #07110e;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 830;
  cursor: pointer;
  transition: .17s ease;
}
a.btn:hover,
a.button:hover,
button:hover,
input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(94,239,202,.09); }
a.btn.secondary,
a.button.secondary,
button.secondary,
input.secondary,
.page-link {
  background: #181925;
  color: #d3d5df;
  border-color: var(--line);
  box-shadow: none;
}
a.btn.secondary:hover,
a.button.secondary:hover,
button.secondary:hover,
.page-link:hover { color:#fff; border-color:rgba(94,239,202,.22); background:#1b1d2a; }
button.danger,
input.danger,
a.button.danger { background: rgba(255,111,125,.09); color:#ff9ca6; border-color:rgba(255,111,125,.18); }
button:disabled, input[type="submit"]:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.top-links, .actions, .filter-actions, .refresh-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.inline-form { display:inline; margin:0; }

/* Forms */
label { display:block; margin: 0 0 6px; color:#b9bbc8; font-size:10.5px; font-weight:760; }
input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select,
.input {
  width:100%;
  min-height:39px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  background:#0c0d14;
  color:#f5f6f8;
  font-size:11.5px;
  transition:.16s ease;
}
textarea { min-height:105px; resize:vertical; }
input::placeholder, textarea::placeholder { color:#646879; }
input:focus, textarea:focus, select:focus, .input:focus { border-color:rgba(94,239,202,.38); box-shadow:0 0 0 3px rgba(94,239,202,.055); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.checkbox-row { display:flex; align-items:center; gap:8px; margin:10px 0; }
.checkbox-row label { margin:0; }
.filter-grid,
.filters,
.filter-panel {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-items:end;
  margin:12px 0 16px;
}
.filter-grid .wide, .filters .wide { grid-column:span 2; }
.filter-panel { grid-template-columns: 1fr 1.25fr auto; }
.filter-group label { margin-bottom:7px; }
.row { display:flex; align-items:center; gap:7px; }

/* Tables */
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:13px; background:#0d0e15; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th, td { padding:10px 11px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(255,255,255,.055); font-size:11px; }
th { position:sticky; top:0; z-index:2; background:#12131c; color:#777c90; text-transform:uppercase; letter-spacing:.07em; font-size:8.8px; font-weight:850; }
tbody tr { transition:background .15s ease; }
tbody tr:hover { background:rgba(94,239,202,.022); }
tbody tr:last-child td { border-bottom:0; }
td strong { color:#f3f4f7; }
.log-info { max-width:590px; white-space:pre-wrap; word-break:break-word; color:#9fa3b4; font:10px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Pagination */
.pagination, .pager { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:13px; }
.pagination-links, .pager-links { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.page-link, .page-current, .page { min-width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; border:1px solid var(--line); border-radius:9px; color:#bcc0ce; text-decoration:none; background:#12131b; font-size:10.5px; font-weight:800; }
.page-current, .page.current { color:#07110e; background:var(--accent); border-color:var(--accent); }
.pagination-summary { margin-top:13px; }

/* Dashboard-specific */
.tabs { display:flex; gap:7px; margin-bottom:15px; }
.tab-btn { min-height:36px; background:#13141d; color:#9ca0af; border:1px solid var(--line); }
.tab-btn.active { color:#07110e; background:var(--accent); border-color:var(--accent); }
.hidden { display:none !important; }
.relay-btn { min-height:54px !important; background:linear-gradient(145deg,#171925,#12141d) !important; color:#e7e9ef !important; border:1px solid var(--line) !important; }
.relay-btn::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(94,239,202,.06); }
.relay-btn:hover { border-color:rgba(94,239,202,.25) !important; background:linear-gradient(145deg,#1b1d2a,#151721) !important; }
.relay-message { min-height:18px; margin-top:10px; }
.relay-message.ok { color:var(--success); font-weight:700; }
.relay-message.bad { color:var(--danger); font-weight:700; }
.runtime { white-space:pre-wrap; word-break:break-word; color:#9da1b1; font:9.6px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.flash, .notice { padding:12px 13px; border-radius:11px; margin-bottom:14px; border:1px solid var(--line); font-size:11.5px; }
.flash.ok { background:rgba(94,239,202,.06); border-color:rgba(94,239,202,.16); color:#baf5e6; }
.flash.bad { background:rgba(255,111,125,.07); border-color:rgba(255,111,125,.17); color:#ffadb5; }
.notice { background:rgba(247,200,107,.07); border-color:rgba(247,200,107,.17); color:#f4d998; }
.direction-settings { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:10px; }
.direction-option { position:relative; display:block; padding:15px; border:1px solid var(--line); border-radius:14px; background:#101118; cursor:pointer; }
.direction-option input { position:absolute; opacity:0; pointer-events:none; }
.direction-option:has(input:checked) { border-color:rgba(94,239,202,.35); background:linear-gradient(145deg,rgba(30,29,45,.88),rgba(15,34,34,.66)); box-shadow:inset 0 0 0 1px rgba(94,239,202,.06); }
.direction-option strong { display:block; margin-bottom:8px; }
.mapping { display:flex; gap:6px; flex-wrap:wrap; }
.mapping span { padding:5px 7px; border-radius:8px; background:rgba(255,255,255,.045); color:#a8acba; font-size:9.5px; }
.mapping b.in { color:var(--accent); }
.mapping b.out { color:#9ddacb; }
.settings-note, .footer-note { margin-top:10px; color:var(--muted-2); font-size:10.5px; line-height:1.6; }
.settings-table input[type="text"] { min-width:210px; }

/* Statistics */
.range-title { margin:20px 0 10px; align-items:flex-end; }
.charts { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.chart-card { padding:14px; background:#101118; box-shadow:none; }
.chart-card.wide { grid-column:1/-1; }
.chart-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.legend { display:flex; gap:12px; color:var(--muted); font-size:10.5px; }
.dot { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; }
.dot.in { background:var(--accent); }
.dot.out { background:var(--accent-2); }
canvas { width:100%; height:225px; display:block; }
.two-col { display:grid; grid-template-columns:1.15fr .85fr; gap:12px; }
.duration-list { display:grid; gap:9px; }
.duration-row { display:grid; grid-template-columns:84px 1fr 44px; align-items:center; gap:9px; font-size:10.5px; }
.bar { height:7px; overflow:hidden; border-radius:99px; background:#090a0f; }
.bar span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.days-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; }
.day-card { display:block; padding:13px; border:1px solid var(--line); border-radius:13px; background:#101118; color:inherit; text-decoration:none; transition:.18s ease; }
.day-card:hover { transform:translateY(-2px); border-color:rgba(94,239,202,.22); }
.day-card.today { background:linear-gradient(150deg,rgba(30,29,45,.95),rgba(13,43,39,.60)); border-color:rgba(94,239,202,.34); box-shadow:inset 0 0 0 1px rgba(94,239,202,.05); }
.day-date { display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:800; font-size:10.5px; }
.day-date small { color:var(--accent); font-size:8.5px; }
.day-total { margin:12px 0 7px; font-size:23px; font-weight:900; letter-spacing:-.04em; }
.day-split { display:flex; gap:6px 9px; flex-wrap:wrap; color:var(--muted); font-size:9px; }
.day-split b { color:#e8e9ed; }
.empty { padding:28px; text-align:center; color:var(--muted); }

/* QR modal */
.qr-modal { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.86); backdrop-filter:blur(6px); }
.qr-modal.active { display:flex; }
.qr-box { position:relative; width:min(560px,92vw); max-height:92vh; padding:25px; border:1px solid var(--line); border-radius:18px; background:#fff; color:#0b0c11; text-align:center; box-shadow:0 30px 100px rgba(0,0,0,.55); }
.qr-box img { width:min(72vw,500px); height:auto; display:block; margin:0 auto 16px; }
.qr-code-text { font-size:17px; font-weight:900; word-break:break-all; }
.close-modal { position:absolute; right:-11px; top:-11px; width:38px; height:38px; min-height:38px; padding:0; border-radius:50%; background:#15161e; color:#fff; border:1px solid rgba(255,255,255,.12); font-size:20px; }

/* Helpful admin page section */
.admin-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.admin-card-header h2 { margin:0 0 4px; }
.admin-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.admin-summary .mini { padding:12px; border:1px solid var(--line); border-radius:12px; background:#101118; }
.admin-summary .mini span { display:block; color:var(--muted); font-size:9.5px; }
.admin-summary .mini strong { display:block; margin-top:4px; font-size:17px; }

@media (max-width: 1180px) {
  .app-header-inner, .topbar-inner, body > header .inner { align-items:flex-start; flex-direction:column; gap:9px; }
  .app-nav, .nav, .top-actions { width:100%; justify-content:flex-start; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
  .kpis { grid-template-columns:repeat(3,1fr); }
  .days-grid { grid-template-columns:repeat(4,1fr); }
  .grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 860px) {
  .app-shell,.shell,.wrap,main { padding:22px 14px 48px; }
  .app-header-inner,.topbar-inner,body > header .inner { padding-left:14px; padding-right:14px; }
  .grid,.devices { grid-template-columns:repeat(2,1fr); }
  .reader-grid,.relay-grid { grid-template-columns:repeat(2,1fr); }
  .filter-grid,.filters,.filter-panel { grid-template-columns:1fr 1fr; }
  .filter-grid .wide,.filters .wide { grid-column:span 2; }
  .charts,.two-col,.form-grid,.runtime-grid { grid-template-columns:1fr; }
  .chart-card.wide { grid-column:auto; }
  .days-grid { grid-template-columns:repeat(2,1fr); }
  .direction-settings { grid-template-columns:1fr; }
  .admin-summary { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  body { font-size:13px; }
  .brand-sub,.brand span:not(.brandmark) { display:none; }
  .brandmark { width:36px; height:36px; }
  .app-nav-link,.nav a,.top-actions a { min-height:36px; padding:7px 9px; font-size:10.5px; }
  .page-hero,.hero { padding-top:5px; }
  .page-hero h1,.hero h1 { font-size:27px; }
  .grid,.devices,.kpis,.reader-grid,.relay-grid,.filter-grid,.filters,.filter-panel,.days-grid { grid-template-columns:1fr; }
  .filter-grid .wide,.filters .wide { grid-column:span 1; }
  .row { flex-wrap:wrap; }
  .card,.panel { padding:14px; border-radius:15px; }
  .kpi,.stat,.reader-card { min-height:102px; }
  .kpi .value,.reader-count { font-size:24px; }
  .toolbar,.section-head { align-items:flex-start; }
  .top-links,.actions,.filter-actions { width:100%; }
  .actions > *, .top-links > * { flex:1 1 auto; }
}