/* shared.css — common styles for all pages */
:root {
  --bg:     #06080f;
  --bg1:    #0a0e1a;
  --bg2:    #0f1528;
  --bg3:    #141c32;
  --border: rgba(0,220,200,0.12);
  --border2:rgba(0,220,200,0.25);
  --cyan:   #00dcc8;
  --purple: #9b6dff;
  --lilac:  #c89bff;
  --blue:   #4ea4ff;
  --green:  #00e676;
  --orange: #ff9100;
  --red:    #ff5252;
  --yellow: #ffd740;
  --t0:     #ffffff;
  --t1:     #e8eaf6;
  --t2:     rgba(200,210,240,0.65);
  --t3:     rgba(160,170,200,0.38);
  --F:      'Orbitron', monospace;
  --FS:     'Segoe UI', sans-serif;
  --mono:   'Cascadia Code', 'Consolas', monospace;
  --bgCard: rgba(12,16,28,0.85);
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--F);
  overflow: hidden;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,220,200,0.2); border-radius: 3px; }

button, input, select, textarea { cursor: pointer; font-family: var(--F); }
a { color: var(--cyan); text-decoration: none; }

/* Card */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.card:hover { border-color: var(--border2); }

/* Section header */
.sec-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--F);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Status dot */
.dot-online  { color: var(--green); }
.dot-offline { color: var(--orange); }

/* Badge */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
.badge-cyan   { background: rgba(0,220,200,0.12); color: var(--cyan); border: 1px solid rgba(0,220,200,0.3); }
.badge-purple { background: rgba(155,109,255,0.12); color: var(--purple); border: 1px solid rgba(155,109,255,0.3); }
.badge-green  { background: rgba(0,230,118,0.12); color: var(--green); border: 1px solid rgba(0,230,118,0.3); }
.badge-orange { background: rgba(255,145,0,0.12); color: var(--orange); border: 1px solid rgba(255,145,0,0.3); }

/* Page layout */
.page { padding: 20px 24px; overflow-y: auto; height: 100%; }

/* Loading */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--t3);
  font-family: var(--F);
  font-size: 11px;
  letter-spacing: .1em;
}

/* Empty state */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--t3);
  font-size: 13px;
}
.empty-icon { font-size: 36px; }