/* ============================================================
   DMR PORTAL v1.0 — portal.css
   Dark tactical theme — Orbitron + Share Tech Mono
   Colors: #0a0f0a bg, #1aff6e green, #0d1f0d surface,
           #e8ffe8 text, #2a4a2a border
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@500;600;700&display=swap');

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

:root {
  --bg:        #070c07;
  --bg2:       #0d140d;
  --bg3:       #121a12;
  --bg4:       #182018;
  --grn:       #1aff6e;
  --grn2:      #12c450;
  --grn3:      #0a7a32;
  --grn-dim:   #0d4020;
  --grn-glow:  rgba(26,255,110,.12);
  --amber:     #ffb020;
  --red:       #ff3a3a;
  --blue:      #20c4ff;
  --txt:       #c8e8c8;
  --txt2:      #7aaa7a;
  --txt3:      #3a6a3a;
  --border:    #1a2e1a;
  --border2:   #243824;
  --radius:    4px;
  --ffh:       'Orbitron', monospace;
  --ffm:       'Share Tech Mono', monospace;
  --ffb:       'Rajdhani', sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--ffb);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  line-height: 1.5;
}

/* ── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--grn3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--grn2); }

/* ── SCANLINE OVERLAY ──────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.04) 0px, rgba(0,0,0,.04) 1px,
    transparent 1px, transparent 2px
  );
}

/* ── LAYOUT ────────────────────────────────────────────── */
.portal-wrap   { display: flex; min-height: 100vh; }
.portal-sidebar {
  width: 220px; flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.portal-main   { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.portal-topbar {
  height: 52px; flex-shrink: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem;
}
.portal-content { flex: 1; padding: 1.5rem 2rem; overflow-y: auto; }

/* ── SIDEBAR ───────────────────────────────────────────── */
.sb-logo {
  padding: 1.2rem 1rem .8rem;
  border-bottom: 1px solid var(--border);
}
.sb-logo-title {
  font-family: var(--ffh); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; color: var(--grn);
  text-decoration: none; display: block;
}
.sb-logo-sub { font-family: var(--ffm); font-size: .52rem; color: var(--txt3); letter-spacing: .12em; margin-top: .15rem; }
.sb-logo-badge {
  display: inline-block; margin-top: .4rem;
  padding: .1rem .4rem; border: 1px solid var(--grn3);
  font-family: var(--ffm); font-size: .44rem; color: var(--grn2);
  letter-spacing: .14em; border-radius: 2px;
}

.sb-section { padding: .6rem 0 .2rem; }
.sb-section-lbl {
  padding: .2rem 1rem; font-family: var(--ffm);
  font-size: .44rem; letter-spacing: .22em; color: var(--txt3);
}
.sb-link {
  display: flex; align-items: center; gap: .55rem;
  padding: .48rem 1rem; text-decoration: none;
  font-family: var(--ffm); font-size: .56rem; letter-spacing: .1em;
  color: var(--txt2); transition: all .15s;
  border-left: 2px solid transparent;
}
.sb-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }
.sb-link:hover { color: var(--txt); background: var(--grn-glow); border-left-color: var(--grn3); }
.sb-link.active { color: var(--grn); background: var(--grn-glow); border-left-color: var(--grn); }

.sb-status {
  margin-top: auto; padding: .8rem 1rem;
  border-top: 1px solid var(--border);
}
.sb-status-row { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.sb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sb-dot.green  { background: var(--grn); box-shadow: 0 0 4px var(--grn); }
.sb-dot.amber  { background: var(--amber); }
.sb-dot.red    { background: var(--red); }
.sb-status-txt { font-family: var(--ffm); font-size: .48rem; color: var(--txt3); letter-spacing: .1em; }

/* ── TOPBAR ────────────────────────────────────────────── */
.topbar-title { font-family: var(--ffh); font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: var(--txt); }
.topbar-path  { font-family: var(--ffm); font-size: .52rem; color: var(--txt3); letter-spacing: .08em; }
.topbar-spacer { flex: 1; }
.topbar-utc   { font-family: var(--ffm); font-size: .52rem; color: var(--txt2); letter-spacing: .1em; }
.topbar-btn   {
  display: flex; align-items: center; gap: .3rem;
  padding: .28rem .7rem; background: none;
  border: 1px solid var(--border2); border-radius: var(--radius);
  font-family: var(--ffm); font-size: .5rem; letter-spacing: .12em;
  color: var(--txt2); cursor: pointer; transition: all .15s; text-decoration: none;
}
.topbar-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.topbar-btn:hover { border-color: var(--grn3); color: var(--grn); }
.topbar-btn.danger:hover { border-color: var(--red); color: var(--red); }

/* ── PAGE HEADER ───────────────────────────────────────── */
.page-hdr { margin-bottom: 1.5rem; }
.page-hdr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.page-title { font-family: var(--ffh); font-size: 1.1rem; font-weight: 700; letter-spacing: .12em; color: var(--txt); }
.page-sub   { font-family: var(--ffm); font-size: .56rem; color: var(--txt3); letter-spacing: .1em; }
.page-actions { display: flex; gap: .5rem; }

/* ── STAT CARDS ────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--grn3);
}
.stat-card.amber::before { background: var(--amber); }
.stat-card.blue::before  { background: var(--blue); }
.stat-card.red::before   { background: var(--red); }
.stat-lbl   { font-family: var(--ffm); font-size: .48rem; letter-spacing: .18em; color: var(--txt3); margin-bottom: .4rem; }
.stat-val   { font-family: var(--ffh); font-size: 1.6rem; font-weight: 700; color: var(--grn); line-height: 1; }
.stat-card.amber .stat-val { color: var(--amber); }
.stat-card.blue  .stat-val { color: var(--blue); }
.stat-card.red   .stat-val { color: var(--red); }
.stat-sub   { font-family: var(--ffm); font-size: .48rem; color: var(--txt3); margin-top: .35rem; letter-spacing: .08em; }

/* ── PANELS ────────────────────────────────────────────── */
.panel {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 1.2rem;
}
.panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border);
}
.panel-title { font-family: var(--ffm); font-size: .58rem; letter-spacing: .16em; color: var(--txt2); }
.panel-body  { padding: 1rem; }
.panel-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── TABLES ────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-family: var(--ffm); font-size: .48rem; letter-spacing: .18em;
  color: var(--txt3); text-align: left; padding: .5rem .7rem;
  border-bottom: 1px solid var(--border2); white-space: nowrap;
}
.data-table td {
  font-family: var(--ffm); font-size: .54rem; letter-spacing: .06em;
  color: var(--txt2); padding: .5rem .7rem;
  border-bottom: 1px solid var(--border);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--grn-glow); color: var(--txt); }
.data-table .td-green  { color: var(--grn); }
.data-table .td-amber  { color: var(--amber); }
.data-table .td-red    { color: var(--red); }
.data-table .td-blue   { color: var(--blue); }
.data-table .td-mono   { font-family: var(--ffm); }
.data-table .td-dim    { color: var(--txt3); }

/* ── BADGES ────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .4rem; border-radius: 2px;
  font-family: var(--ffm); font-size: .44rem; letter-spacing: .12em;
  background: var(--bg3); color: var(--txt3); border: 1px solid var(--border2);
}
.badge.green { background: rgba(26,255,110,.1); color: var(--grn); border-color: var(--grn3); }
.badge.amber { background: rgba(255,176,32,.1); color: var(--amber); border-color: rgba(255,176,32,.3); }
.badge.red   { background: rgba(255,58,58,.1);  color: var(--red);   border-color: rgba(255,58,58,.3); }
.badge.blue  { background: rgba(32,196,255,.1); color: var(--blue);  border-color: rgba(32,196,255,.3); }
.badge.dot::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; vertical-align: middle; }

/* ── BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .9rem; border-radius: var(--radius);
  font-family: var(--ffm); font-size: .52rem; letter-spacing: .12em;
  cursor: pointer; transition: all .15s; text-decoration: none;
  border: 1px solid transparent;
}
.btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-primary { background: var(--grn3); border-color: var(--grn2); color: var(--grn); }
.btn-primary:hover { background: rgba(26,255,110,.2); border-color: var(--grn); }
.btn-ghost   { background: none; border-color: var(--border2); color: var(--txt2); }
.btn-ghost:hover { border-color: var(--grn3); color: var(--grn); }
.btn-danger  { background: none; border-color: rgba(255,58,58,.3); color: var(--red); }
.btn-danger:hover { background: rgba(255,58,58,.1); }
.btn-sm { padding: .22rem .6rem; font-size: .46rem; }

/* ── FORMS ─────────────────────────────────────────────── */
.form-row { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.form-label { font-family: var(--ffm); font-size: .5rem; letter-spacing: .14em; color: var(--txt3); }
.form-input, .form-select, .form-textarea {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: .45rem .7rem;
  font-family: var(--ffm); font-size: .58rem; color: var(--txt);
  letter-spacing: .06em; width: 100%;
  transition: border-color .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--grn3);
  box-shadow: 0 0 0 2px rgba(26,255,110,.08);
}
.form-hint { font-family: var(--ffm); font-size: .46rem; color: var(--txt3); letter-spacing: .08em; }
.form-actions { display: flex; gap: .5rem; margin-top: 1rem; }

/* ── ALERTS ────────────────────────────────────────────── */
.alert {
  padding: .7rem 1rem; border-radius: var(--radius);
  font-family: var(--ffm); font-size: .54rem; letter-spacing: .06em;
  margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.alert svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.alert-error   { background: rgba(255,58,58,.08); border: 1px solid rgba(255,58,58,.25); color: var(--red); }
.alert-success { background: rgba(26,255,110,.08); border: 1px solid var(--grn3); color: var(--grn); }
.alert-info    { background: rgba(32,196,255,.08); border: 1px solid rgba(32,196,255,.25); color: var(--blue); }
.alert-warn    { background: rgba(255,176,32,.08); border: 1px solid rgba(255,176,32,.25); color: var(--amber); }

/* ── LIVE INDICATOR ────────────────────────────────────── */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grn); box-shadow: 0 0 6px var(--grn);
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.8); }
}

/* ── LOGIN PAGE ────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; background: var(--bg);
}
.login-box {
  width: 360px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem;
}
.login-logo { text-align: center; margin-bottom: 1.8rem; }
.login-logo-title { font-family: var(--ffh); font-size: 1rem; font-weight: 900; letter-spacing: .2em; color: var(--grn); }
.login-logo-sub   { font-family: var(--ffm); font-size: .5rem; color: var(--txt3); letter-spacing: .14em; margin-top: .3rem; }
.login-box h2 { font-family: var(--ffm); font-size: .6rem; letter-spacing: .18em; color: var(--txt2); margin-bottom: 1.2rem; }

/* ── LIVE QSO TABLE ────────────────────────────────────── */
.qso-row-new { animation: row-flash .6s ease-out; }
@keyframes row-flash { from { background: rgba(26,255,110,.18); } to { background: transparent; } }

/* ── TG GRID ───────────────────────────────────────────── */
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: .7rem; }
.tg-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .7rem .8rem;
  cursor: pointer; transition: all .2s;
}
.tg-card:hover  { border-color: var(--grn3); background: var(--grn-glow); }
.tg-card.active { border-color: var(--grn2); box-shadow: 0 0 10px var(--grn-glow); }
.tg-card-id     { font-family: var(--ffh); font-size: .9rem; font-weight: 700; color: var(--grn); }
.tg-card-name   { font-family: var(--ffm); font-size: .5rem; color: var(--txt2); margin-top: .2rem; letter-spacing: .1em; }
.tg-card-region { font-family: var(--ffm); font-size: .44rem; color: var(--txt3); margin-top: .1rem; }
.tg-card-stat   { margin-top: .5rem; display: flex; align-items: center; gap: .3rem; }

/* ── CHART BARS ─────────────────────────────────────���──── */
.mini-chart { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.mc-bar { flex: 1; background: var(--grn3); border-radius: 1px 1px 0 0; transition: height .3s; min-height: 2px; }
.mc-bar:hover { background: var(--grn2); }

/* ══════════════════════════════════════════════════════════
   SITE HEADER
   ══════════════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; gap: 1.2rem;
  height: 54px; padding: 0 1.5rem;
  background: var(--bg2);
  border-bottom: 2px solid var(--grn3);
  box-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* Logo */
.sh-left { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.sh-logo  { display: flex; align-items: center; gap: .45rem; text-decoration: none; }
.sh-logo-icon {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--grn3);
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,255,110,.07);
}
.sh-logo-icon svg { width: 14px; height: 14px; stroke: var(--grn); fill: none; stroke-width: 1.8; }
.sh-logo-text {
  font-family: var(--ffh); font-size: .78rem; font-weight: 900;
  letter-spacing: .22em; color: var(--txt);
}
.sh-logo-text span { color: var(--grn); }
.sh-logo:hover .sh-logo-text { color: var(--grn); }

.sh-ver     { font-family: var(--ffm); font-size: .44rem; color: var(--txt3); letter-spacing: .14em; border: 1px solid var(--border2); padding: .08rem .35rem; border-radius: 2px; }
.sh-divider { width: 1px; height: 20px; background: var(--border2); }
.sh-op      { font-family: var(--ffm); font-size: .5rem; color: var(--txt3); letter-spacing: .12em; }

/* Nav */
.sh-nav { display: flex; align-items: center; gap: 0; flex: 1; }
.sh-nav-lnk {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .32rem .7rem; font-family: var(--ffm);
  font-size: .52rem; letter-spacing: .12em;
  color: var(--txt3); text-decoration: none;
  transition: color .15s, background .15s;
  border-radius: 3px; white-space: nowrap;
}
.sh-nav-lnk svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.sh-nav-lnk:hover  { color: var(--txt); background: rgba(26,255,110,.07); }
.sh-nav-lnk.active { color: var(--grn); }
.sh-nav-lnk.accent { color: var(--grn2); border: 1px solid var(--grn3); margin-left: .4rem; }
.sh-nav-lnk.accent:hover { border-color: var(--grn); color: var(--grn); background: rgba(26,255,110,.1); }
.sh-nav-lnk.amber       { color: var(--amber); }
.sh-nav-lnk.active.amber { color: var(--amber) !important; background: rgba(255,176,32,.07); }
.sh-nav-lnk.dim         { color: var(--txt3); }
.sh-nav-lnk.danger      { color: var(--red); }
.sh-nav-lnk.danger:hover{ color: var(--red); background: rgba(255,58,58,.07); }
.sh-ver.admin { color: var(--amber); border-color: rgba(255,176,32,.35); }
.btn-ghost.danger { color: var(--red); }
.btn-ghost.danger:hover { border-color: rgba(255,58,58,.4); background: rgba(255,58,58,.07); }

/* Right status */
.sh-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-shrink: 0; }
.sh-bm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grn3); transition: all .3s; }
.sh-bm-txt { font-family: var(--ffm); font-size: .5rem; color: var(--txt2); letter-spacing: .1em; }
.sh-utc    { font-family: var(--ffm); font-size: .5rem; color: var(--txt3); letter-spacing: .1em; padding-left: .5rem; border-left: 1px solid var(--border2); }

/* ══════════════════════════════════════════════════════════
   HERO BANNER
   ══════════════════════════════════════════════════════════ */
.hero-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 1.8rem 2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  gap: 0 2rem;
  position: relative; overflow: hidden;
}
.hero-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0, transparent 80px,
    rgba(26,255,110,.012) 80px, rgba(26,255,110,.012) 81px);
  pointer-events: none;
}

.hb-left  { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
.hb-right { grid-column: 2; grid-row: 1; position: relative; z-index: 1; }
.hb-tags  { grid-column: 1 / -1; grid-row: 2; display: flex; gap: .4rem; flex-wrap: wrap; padding-top: 1rem; position: relative; z-index: 1; }

.hb-label { font-family: var(--ffm); font-size: .5rem; letter-spacing: .24em; color: var(--grn2); margin-bottom: .5rem; }
.hb-title {
  font-family: var(--ffh); font-weight: 900;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  letter-spacing: .08em; line-height: 1.05;
  color: var(--txt); margin-bottom: .7rem;
}
.hb-title span { color: var(--grn); display: block; }
.hb-desc  { font-family: var(--ffb); font-size: .92rem; color: var(--txt2); line-height: 1.55; margin-bottom: 1.1rem; max-width: 560px; }

.hb-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.hb-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: var(--radius);
  font-family: var(--ffm); font-size: .54rem; letter-spacing: .14em;
  text-decoration: none; cursor: pointer; transition: all .18s;
  border: 1px solid transparent;
}
.hb-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.hb-btn.primary { background: rgba(26,255,110,.12); border-color: var(--grn3); color: var(--grn); }
.hb-btn.primary:hover { background: rgba(26,255,110,.22); border-color: var(--grn); box-shadow: 0 0 14px rgba(26,255,110,.2); }
.hb-btn.ghost   { background: none; border-color: var(--border2); color: var(--txt2); }
.hb-btn.ghost:hover { border-color: var(--grn3); color: var(--txt); }

#heroCanvas { display: block; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg3); }

.hb-tag {
  padding: .16rem .52rem; border-radius: 2px;
  font-family: var(--ffm); font-size: .44rem; letter-spacing: .14em;
  background: var(--bg3); border: 1px solid var(--border2); color: var(--txt3);
  display: flex; align-items: center; gap: .3rem;
}
.hb-tag.green { color: var(--grn);  border-color: var(--grn3); background: rgba(26,255,110,.07); }
.hb-tag.amber { color: var(--amber); border-color: rgba(255,176,32,.3); background: rgba(255,176,32,.06); }
.hb-tag.blue  { color: var(--blue);  border-color: rgba(32,196,255,.3); background: rgba(32,196,255,.06); }

.live-dot-sm {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grn); box-shadow: 0 0 5px var(--grn);
  animation: pulse-dot 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   STAT STRIP
   ══════════════════════════════════════════════════════════ */
.stat-strip {
  display: flex; align-items: center;
  background: var(--bg3); border-bottom: 1px solid var(--border);
  padding: 0 2rem; overflow-x: auto;
}
.ss-item {
  display: flex; flex-direction: column; align-items: center;
  gap: .12rem; padding: .65rem 1.4rem; min-width: fit-content;
}
.ss-sep    { width: 1px; height: 28px; background: var(--border2); flex-shrink: 0; }
.ss-lbl    { font-family: var(--ffm); font-size: .42rem; letter-spacing: .2em; color: var(--txt3); white-space: nowrap; }
.ss-val    { font-family: var(--ffh); font-size: 1.1rem; font-weight: 700; color: var(--grn); line-height: 1; }
.ss-val.sm { font-size: .7rem; letter-spacing: .08em; }
.ss-item.amber .ss-val { color: var(--amber); }
.ss-item.blue  .ss-val { color: var(--blue); }
.ss-item.green .ss-val { color: var(--grn); text-shadow: 0 0 8px rgba(26,255,110,.3); }

/* ══════════════════════════════════════════════════════════
   MAIN 3-COL LAYOUT
   ══════════════════════════════════════════════════════════ */
.main-layout {
  display: grid;
  grid-template-columns: 230px 1fr 260px;
  grid-template-rows: auto;
  min-height: calc(100vh - 54px - 220px);
  background: var(--border);
  gap: 1px;
}

/* ── LEFT SIDEBAR ──────────────────────────────────────── */
.left-sidebar {
  grid-column: 1;
  background: var(--bg2);
  display: flex; flex-direction: column; gap: 1px;
  position: sticky; top: 54px;
  height: calc(100vh - 54px);
  overflow-y: auto;
}
.ls-card {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: .8rem;
}
.ls-hdr {
  font-family: var(--ffm); font-size: .44rem;
  letter-spacing: .22em; color: var(--txt3);
  margin-bottom: .5rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.ls-sep { height: 1px; background: var(--border); margin: .3rem 0; }

/* Operator card */
.op-card   { display: flex; align-items: center; gap: .6rem; }
.op-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--grn3); background: rgba(26,255,110,.06);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.op-avatar svg { width: 18px; height: 18px; stroke: var(--grn2); fill: none; stroke-width: 1.5; }
.op-info   { flex: 1; min-width: 0; }
.op-call   { font-family: var(--ffh); font-size: .68rem; font-weight: 700; color: var(--grn); letter-spacing: .1em; }
.op-id     { font-family: var(--ffm); font-size: .48rem; color: var(--txt3); letter-spacing: .08em; }
.op-qth    { font-family: var(--ffm); font-size: .46rem; color: var(--txt3); }
.op-status { flex-shrink: 0; }

/* Left nav */
.ls-nav { display: flex; flex-direction: column; gap: 0; }
.ls-lnk {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .4rem; text-decoration: none;
  font-family: var(--ffm); font-size: .52rem; letter-spacing: .1em;
  color: var(--txt2); border-left: 2px solid transparent;
  border-radius: 2px; transition: all .15s;
}
.ls-lnk svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }
.ls-lnk:hover  { color: var(--txt); background: var(--grn-glow); border-left-color: var(--grn3); }
.ls-lnk.active { color: var(--grn); background: var(--grn-glow); border-left-color: var(--grn); }
.ls-lnk.amber  { color: var(--amber); }
.ls-lnk.dim    { color: var(--txt3); }

/* Connection rows */
.conn-rows { display: flex; flex-direction: column; gap: .4rem; }
.conn-row  { display: flex; align-items: center; gap: .4rem; }
.conn-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); flex-shrink: 0; transition: all .3s; }
.conn-dot.blue  { background: var(--blue); }
.conn-dot.amber { background: var(--amber); }
.conn-lbl  { font-family: var(--ffm); font-size: .48rem; color: var(--txt3); flex: 1; letter-spacing: .06em; }
.conn-val  { font-family: var(--ffm); font-size: .5rem; color: var(--grn); letter-spacing: .06em; }
.conn-val.blue { color: var(--blue); }

/* TG quick list */
.tg-quick-list { display: flex; flex-direction: column; gap: 0; }
.tq-row {
  display: flex; align-items: center; gap: .4rem;
  padding: .36rem .3rem; text-decoration: none;
  border-bottom: 1px solid var(--border); transition: background .15s;
}
.tq-row:last-child { border-bottom: none; }
.tq-row:hover { background: var(--grn-glow); }
.tq-dot  { width: 5px; height: 5px; border-radius: 50%; background: var(--border2); flex-shrink: 0; transition: all .3s; }
.tq-id   { font-family: var(--ffm); font-size: .52rem; color: var(--grn); min-width: 2.8rem; letter-spacing: .06em; }
.tq-name { font-family: var(--ffm); font-size: .48rem; color: var(--txt3); flex: 1; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-arr  { width: 11px; height: 11px; stroke: var(--txt3); fill: none; stroke-width: 2; flex-shrink: 0; }
.tq-row:hover .tq-arr { stroke: var(--grn); }

/* ── CENTER CONTENT ────────────────────────────────────── */
.center-content {
  grid-column: 2;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.cc-card {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cc-hdr {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.cc-ttl  { font-family: var(--ffm); font-size: .56rem; letter-spacing: .16em; color: var(--txt2); }
.cc-sub  { font-family: var(--ffm); font-size: .46rem; color: var(--txt3); letter-spacing: .08em; flex: 1; }
.cc-more-hdr { font-family: var(--ffm); font-size: .48rem; color: var(--txt3); text-decoration: none; margin-left: auto; letter-spacing: .1em; }
.cc-more-hdr:hover { color: var(--grn); }

.table-wrap { overflow-x: auto; }

.cc-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1.2rem;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.cc-more  { font-family: var(--ffm); font-size: .48rem; color: var(--txt3); text-decoration: none; letter-spacing: .1em; }
.cc-more:hover { color: var(--grn); }
.cc-count { font-family: var(--ffm); font-size: .46rem; color: var(--txt3); letter-spacing: .08em; }

/* TG launch grid */
.tg-launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px; background: var(--border);
  margin: 1px;
}
.tlc {
  background: var(--bg2); padding: .8rem .9rem;
  text-decoration: none; transition: all .18s; display: block;
}
.tlc:hover { background: var(--bg3); }
.tlc-top   { display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; }
.tlc-dot   { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); flex-shrink: 0; transition: all .3s; }
.tlc-id    { font-family: var(--ffh); font-size: .9rem; font-weight: 700; color: var(--grn); line-height: 1; }
.tlc-name  { font-family: var(--ffm); font-size: .5rem; color: var(--txt2); letter-spacing: .08em; }
.tlc-region { font-family: var(--ffm); font-size: .44rem; color: var(--txt3); margin-top: .06rem; }
.tlc-action { font-family: var(--ffm); font-size: .44rem; color: var(--txt3); margin-top: .45rem; letter-spacing: .08em; }
.tlc:hover .tlc-action { color: var(--grn); }

/* ── RIGHT SIDEBAR ─────────────────────────────────────── */
.right-sidebar {
  grid-column: 3;
  background: var(--bg2);
  display: flex; flex-direction: column; gap: 1px;
  position: sticky; top: 54px;
  height: calc(100vh - 54px);
  overflow-y: auto;
}
.rs-card {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rs-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--ffm); font-size: .48rem; letter-spacing: .18em; color: var(--txt3);
  background: var(--bg3);
}
.rs-hdr-badge { font-family: var(--ffm); font-size: .44rem; color: var(--grn); letter-spacing: .1em; }
.rs-more { font-family: var(--ffm); font-size: .44rem; color: var(--txt3); text-decoration: none; letter-spacing: .08em; }
.rs-more:hover { color: var(--grn); }

/* TG Monitor list */
.tgmon-list { display: flex; flex-direction: column; }
.tgmon-row  {
  display: flex; align-items: center; gap: .45rem;
  padding: .42rem .9rem;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.tgmon-row:last-child { border-bottom: none; }
.tgmon-row.tgmon-active { background: rgba(26,255,110,.05); }
.tgmon-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); flex-shrink: 0; transition: all .3s; }
.tgmon-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.tgmon-id   { font-family: var(--ffm); font-size: .5rem; color: var(--grn); letter-spacing: .06em; }
.tgmon-name { font-family: var(--ffm); font-size: .44rem; color: var(--txt3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgmon-right { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; flex-shrink: 0; }
.tgmon-cs   { font-family: var(--ffm); font-size: .5rem; color: var(--grn); letter-spacing: .06em; }
.tgmon-stat { font-family: var(--ffm); font-size: .42rem; color: var(--txt3); letter-spacing: .1em; }

/* Last Heard list */
.lh-list { display: flex; flex-direction: column; }
.lh-row  {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem; border-bottom: 1px solid var(--border);
}
.lh-row:last-child { border-bottom: none; }
.lh-cs   { font-family: var(--ffm); font-size: .54rem; color: var(--grn); flex: 1; letter-spacing: .06em; }
.lh-tg   { font-family: var(--ffm); font-size: .46rem; color: var(--txt3); letter-spacing: .06em; }
.lh-time { font-family: var(--ffm); font-size: .44rem; color: var(--txt3); white-space: nowrap; }

/* Session stats */
.sess-rows { display: flex; flex-direction: column; }
.sess-row  {
  display: flex; align-items: center; justify-content: space-between;
  padding: .42rem .9rem; border-bottom: 1px solid var(--border);
}
.sess-row:last-child { border-bottom: none; }
.sess-lbl  { font-family: var(--ffm); font-size: .46rem; color: var(--txt3); letter-spacing: .1em; }
.sess-val  { font-family: var(--ffm); font-size: .54rem; color: var(--txt2); letter-spacing: .06em; }
.sess-val.green { color: var(--grn); }
.sess-val.amber { color: var(--amber); }

/* Network info */
.net-info  { display: flex; flex-direction: column; }
.ni-row    {
  display: flex; align-items: center; justify-content: space-between;
  padding: .38rem .9rem; border-bottom: 1px solid var(--border);
  font-family: var(--ffm); font-size: .48rem; letter-spacing: .06em;
}
.ni-row:last-child { border-bottom: none; }
.ni-row span:first-child { color: var(--txt3); }
.ni-row span:last-child  { color: var(--txt2); }
.ni-row .green { color: var(--grn); }

/* ══════════════════════════════════════════════════════════
   SITE FOOTER
   ══════════════════════════════════════════════════════════ */
.site-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem;
  padding: .8rem 2rem;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  font-family: var(--ffm); font-size: .48rem; letter-spacing: .1em; color: var(--txt3);
}
.sf-left  { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.sf-right { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.sf-brand { color: var(--txt2); font-weight: 700; letter-spacing: .16em; }
.sf-sep   { color: var(--border2); }
.sf-utc   { color: var(--grn2); }
.site-footer a { color: var(--txt3); text-decoration: none; }
.site-footer a:hover { color: var(--grn); }

/* ══════════════════════════════════════════════════════════
   INNER PAGES — SHARED COMPONENTS
   ══════════════════════════════════════════════════════════ */
.inner-wrap  { max-width: 1340px; margin: 0 auto; padding: 1.6rem 2rem 3rem; }
.page-hdr    { margin-bottom: 1.4rem; }
.page-hdr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; gap: 1rem; flex-wrap: wrap; }
.page-title  { font-family: var(--ffh); font-size: 1.1rem; font-weight: 700; letter-spacing: .12em; color: var(--txt); }
.page-sub    { font-family: var(--ffm); font-size: .54rem; color: var(--txt3); letter-spacing: .1em; }
.page-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Admin sidebar layout */
.admin-wrap { display: flex; min-height: calc(100vh - 54px); }
.admin-sidebar {
  width: 220px; flex-shrink: 0; background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 54px; height: calc(100vh - 54px); overflow-y: auto;
}
.admin-content { flex: 1; padding: 1.5rem 2rem; min-width: 0; background: var(--bg); }

/* Stat grid */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; position: relative; overflow: hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grn3); }
.stat-card.amber::before { background: var(--amber); }
.stat-card.blue::before  { background: var(--blue); }
.stat-card.red::before   { background: var(--red); }
.stat-lbl { font-family: var(--ffm); font-size: .48rem; letter-spacing: .18em; color: var(--txt3); margin-bottom: .4rem; }
.stat-val { font-family: var(--ffh); font-size: 1.6rem; font-weight: 700; color: var(--grn); line-height: 1; }
.stat-card.amber .stat-val { color: var(--amber); }
.stat-card.blue  .stat-val { color: var(--blue); }
.stat-card.red   .stat-val { color: var(--red); }
.stat-sub { font-family: var(--ffm); font-size: .48rem; color: var(--txt3); margin-top: .35rem; letter-spacing: .08em; }

/* Panels */
.panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.2rem; }
.panel-hdr { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.panel-title { font-family: var(--ffm); font-size: .58rem; letter-spacing: .16em; color: var(--txt2); }
.panel-body  { padding: 1rem; }
.panel-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { font-family: var(--ffm); font-size: .48rem; letter-spacing: .18em; color: var(--txt3); text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--border2); white-space: nowrap; background: var(--bg3); }
.data-table td { font-family: var(--ffm); font-size: .54rem; letter-spacing: .06em; color: var(--txt2); padding: .5rem .7rem; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--grn-glow); color: var(--txt); }
.td-green { color: var(--grn); }
.td-amber { color: var(--amber); }
.td-red   { color: var(--red); }
.td-blue  { color: var(--blue); }
.td-mono  { font-family: var(--ffm); }
.td-dim   { color: var(--txt3); }

/* Badges — see primary definition above; these extend it for shared pages */
.badge.dot::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.pbadge { display:inline-flex; align-items:center; gap:.25rem; padding:.1rem .4rem; border-radius:2px; font-family:var(--ffm); font-size:.44rem; letter-spacing:.12em; background:var(--bg3); color:var(--txt3); border:1px solid var(--border2); }
.pbadge.green { background:rgba(26,255,110,.1); color:var(--grn); border-color:var(--grn3); }
.pbadge.amber { background:rgba(255,176,32,.1); color:var(--amber); border-color:rgba(255,176,32,.3); }
.pbadge.red   { background:rgba(255,58,58,.1);  color:var(--red);  border-color:rgba(255,58,58,.3); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .9rem; border-radius:var(--radius); font-family:var(--ffm); font-size:.52rem; letter-spacing:.12em; cursor:pointer; transition:all .15s; text-decoration:none; border:1px solid transparent; }
.btn svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
.btn-primary { background:var(--grn3); border-color:var(--grn2); color:var(--grn); }
.btn-primary:hover { background:rgba(26,255,110,.2); border-color:var(--grn); }
.btn-ghost { background:none; border-color:var(--border2); color:var(--txt2); }
.btn-ghost:hover { border-color:var(--grn3); color:var(--grn); }
.btn-danger { background:none; border-color:rgba(255,58,58,.3); color:var(--red); }
.btn-danger:hover { background:rgba(255,58,58,.1); }
.btn-sm { padding:.22rem .6rem; font-size:.46rem; }

/* Forms */
.form-row { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.9rem; }
.form-label { font-family:var(--ffm); font-size:.5rem; letter-spacing:.14em; color:var(--txt3); }
.form-input,.form-select,.form-textarea { background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); padding:.45rem .7rem; font-family:var(--ffm); font-size:.58rem; color:var(--txt); letter-spacing:.06em; width:100%; transition:border-color .15s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none; border-color:var(--grn3); box-shadow:0 0 0 2px rgba(26,255,110,.08); }
.form-hint { font-family:var(--ffm); font-size:.46rem; color:var(--txt3); }
.form-actions { display:flex; gap:.5rem; margin-top:1rem; }
.filter-bar   { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.filter-inp   { background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); padding:.36rem .65rem; font-family:var(--ffm); font-size:.56rem; color:var(--txt); width:200px; }
.filter-inp:focus { outline:none; border-color:var(--grn3); }
.filter-sel   { background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); padding:.36rem .65rem; font-family:var(--ffm); font-size:.54rem; color:var(--txt); }

/* Alerts */
.alert { padding:.7rem 1rem; border-radius:var(--radius); font-family:var(--ffm); font-size:.54rem; letter-spacing:.06em; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.alert svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.alert-error   { background:rgba(255,58,58,.08); border:1px solid rgba(255,58,58,.25); color:var(--red); }
.alert-success { background:rgba(26,255,110,.08); border:1px solid var(--grn3); color:var(--grn); }
.alert-info    { background:rgba(32,196,255,.08); border:1px solid rgba(32,196,255,.25); color:var(--blue); }
.alert-warn    { background:rgba(255,176,32,.08); border:1px solid rgba(255,176,32,.25); color:var(--amber); }

/* Pagination */
.pagination { display:flex; align-items:center; gap:.3rem; padding:.8rem 1rem; flex-wrap:wrap; }
.pg-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--radius); font-family:var(--ffm); font-size:.5rem; color:var(--txt3); text-decoration:none; border:1px solid var(--border2); transition:all .15s; }
.pg-btn:hover  { border-color:var(--grn3); color:var(--grn); }
.pg-btn.active { background:var(--grn3); border-color:var(--grn2); color:var(--grn); }

/* Admin topbar */
.topbar-title { font-family:var(--ffh); font-size:.68rem; font-weight:700; letter-spacing:.16em; color:var(--txt); }
.topbar-path  { font-family:var(--ffm); font-size:.52rem; color:var(--txt3); letter-spacing:.08em; }
.topbar-spacer { flex:1; }
.topbar-utc   { font-family:var(--ffm); font-size:.52rem; color:var(--txt2); letter-spacing:.1em; }
.topbar-btn { display:flex; align-items:center; gap:.3rem; padding:.28rem .7rem; background:none; border:1px solid var(--border2); border-radius:var(--radius); font-family:var(--ffm); font-size:.5rem; letter-spacing:.12em; color:var(--txt2); cursor:pointer; transition:all .15s; text-decoration:none; }
.topbar-btn svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; }
.topbar-btn:hover { border-color:var(--grn3); color:var(--grn); }
.topbar-btn.danger:hover { border-color:var(--red); color:var(--red); }

/* Live dot */
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--grn); box-shadow:0 0 6px var(--grn); animation:pulse-dot 1.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(.8); } }

/* TG cards */
.tg-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem; }
.tg-full-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; transition:all .2s; display:flex; flex-direction:column; gap:.3rem; }
.tg-full-card:hover { border-color:var(--grn3); background:var(--grn-glow); }
.tfc-id { font-family:var(--ffh); font-size:1.4rem; font-weight:700; color:var(--grn); line-height:1; }
.tfc-name   { font-family:var(--ffm); font-size:.58rem; color:var(--txt2); letter-spacing:.08em; }
.tfc-region { font-family:var(--ffm); font-size:.46rem; color:var(--txt3); }
.tfc-actions { display:flex; gap:.4rem; margin-top:.5rem; }

/* Mini chart */
.mini-chart { display:flex; align-items:flex-end; gap:2px; height:40px; }
.mc-bar { flex:1; background:var(--grn3); border-radius:1px 1px 0 0; transition:height .3s; min-height:2px; }
.mc-bar:hover { background:var(--grn2); }

/* Login */
.login-wrap,.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login-box  { width:380px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; }
.login-logo { text-align:center; margin-bottom:1.8rem; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.login-logo-icon { width:46px; height:46px; border-radius:50%; border:1.5px solid var(--grn3); background:rgba(26,255,110,.07); display:flex; align-items:center; justify-content:center; }
.login-logo-icon svg { width:22px; height:22px; stroke:var(--grn); fill:none; stroke-width:1.8; }
.login-logo-title { font-family:var(--ffh); font-size:1rem; font-weight:900; letter-spacing:.2em; color:var(--grn); }
.login-logo-op    { font-family:var(--ffm); font-size:.52rem; color:var(--txt2); letter-spacing:.12em; }
.login-logo-sub   { font-family:var(--ffm); font-size:.5rem; color:var(--txt3); letter-spacing:.14em; }
.login-back { margin-top:1.2rem; text-align:center; }
.login-back a { font-family:var(--ffm); font-size:.5rem; color:var(--txt3); text-decoration:none; letter-spacing:.1em; display:inline-flex; align-items:center; gap:.3rem; }
.login-back a:hover { color:var(--grn); }
.login-hint { margin-top:.8rem; text-align:center; font-family:var(--ffm); font-size:.44rem; color:var(--txt3); letter-spacing:.08em; opacity:.6; }
.login-box h2 { font-family:var(--ffm); font-size:.6rem; letter-spacing:.18em; color:var(--txt2); margin-bottom:1.2rem; }
.ss-item.red .ss-val { color:var(--red); }

/* Info rows */
.info-rows { display:flex; flex-direction:column; gap:.5rem; }
.info-row  { display:flex; align-items:baseline; gap:.8rem; padding:.4rem 0; border-bottom:1px solid var(--border); }
.info-row:last-child { border-bottom:none; }
.info-lbl  { font-family:var(--ffm); font-size:.46rem; letter-spacing:.16em; color:var(--txt3); min-width:90px; flex-shrink:0; }
.info-val  { font-family:var(--ffm); font-size:.56rem; color:var(--txt2); letter-spacing:.06em; }

/* QSO animation */
.qso-row-new { animation:row-flash .6s ease-out; }
@keyframes row-flash { from{ background:rgba(26,255,110,.18); } to{ background:transparent; } }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width:1200px) {
  .main-layout { grid-template-columns: 200px 1fr 240px; }
}
@media (max-width:1000px) {
  .main-layout { grid-template-columns: 200px 1fr; }
  .right-sidebar { display:none; }
}
@media (max-width:760px) {
  .main-layout { grid-template-columns: 1fr; }
  .left-sidebar { display:none; }
  .hero-banner  { grid-template-columns: 1fr; }
  .hb-right     { display:none; }
  .stat-strip   { padding:0 1rem; }
  .ss-item      { padding:.55rem .8rem; }
  .panel-grid   { grid-template-columns:1fr; }
  .sh-nav       { display:none; }
  .sh-op        { display:none; }
  .admin-sidebar { display:none; }
  .admin-content { padding:1rem; }
}
@media (max-width:480px) {
  .hb-title    { font-size:1.3rem; }
  .hb-actions  { flex-direction:column; }
  .sf-left     { flex-direction:column; gap:.3rem; }
}

/* ══════════════════════════════════════════════════════════
   INNER PAGE SHARED HEADER / SUBHEADER
   ══════════════════════════════════════════════════════════ */
.page-subhdr {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 2rem .9rem;
}
.page-subhdr-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .25rem; }
.page-subhdr-title { font-family: var(--ffh); font-size: 1rem; font-weight: 700; letter-spacing: .14em; color: var(--txt); }
.page-subhdr-sub   { font-family: var(--ffm); font-size: .5rem; color: var(--txt3); letter-spacing: .12em; }
.page-subhdr-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ── FILTER BAR (page-level) ───────────────────────────── */
.page-filter-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 2rem;
  background: var(--bg3); border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ── CONTENT WRAP for inner pages ─────────────────────── */
.page-body { padding: 1.4rem 2rem 3rem; }
.page-body-full { padding: 0 0 3rem; }

/* ── CHART BARS ────────────────────────────────────────── */
.chart-bar-wrap {
  display: flex; align-items: flex-end; gap: 2px;
  height: 110px; padding-bottom: 1.6rem;
  position: relative;
}
.chart-col  { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; position: relative; }
.chart-bar  {
  width: 100%; background: var(--grn3);
  border-radius: 2px 2px 0 0; transition: height .3s ease; min-height: 2px; cursor: default;
}
.chart-bar:hover { background: var(--grn2); }
.chart-bar.amber { background: rgba(255,176,32,.4); }
.chart-bar.amber:hover { background: var(--amber); }
.chart-lbl {
  position: absolute; bottom: -1.4rem;
  font-family: var(--ffm); font-size: .38rem;
  color: var(--txt3); letter-spacing: .04em; white-space: nowrap;
}

/* ── REGION FILTER BUTTONS ─────────────────────────────── */
.region-btn { border-radius: 2px !important; }
.region-btn.active {
  background: rgba(26,255,110,.12) !important;
  border-color: var(--grn3) !important;
  color: var(--grn) !important;
}

/* ── STAT ROW (alias for inner pages) ──────────────────── */
.srow-card {
  flex: 1; padding: .9rem 1.2rem;
  background: var(--bg2); border-right: 1px solid var(--border);
  position: relative;
}
.srow-card:last-child { border-right: none; }
.srow-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grn3); }
.srow-card.amber::before { background: var(--amber); }
.srow-card.blue::before  { background: var(--blue); }
.srow-card.red::before   { background: var(--red); }
.srow-lbl { font-family: var(--ffm); font-size: .46rem; letter-spacing: .2em; color: var(--txt3); margin-bottom: .4rem; }
.srow-val { font-family: var(--ffh); font-size: 1.4rem; font-weight: 700; color: var(--grn); line-height: 1; }
.srow-card.amber .srow-val { color: var(--amber); }
.srow-card.blue  .srow-val { color: var(--blue); }

/* ── TG ACTIVE ROW HIGHLIGHT ───────────────────────────── */
.tfc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .2rem; }

/* ── EMPTY STATE ───────────────────────────────────────── */
.empty-state {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .5rem;
  padding: 3rem 2rem; color: var(--txt3);
}
.empty-state svg { width: 32px; height: 32px; stroke: var(--txt3); fill: none; stroke-width: 1.2; opacity: .4; }
.empty-state-txt { font-family: var(--ffm); font-size: .56rem; letter-spacing: .14em; }