/* TTN Live Ops - dark radar theme */
:root{
  --bg:#0b0f17;
  --panel:#0f1625;
  --accent:#ff7a18;
  --green:#00ff9c;
  --green-dim:#00c97b;
  --red:#ff4d4d;
  --blue:#4db3ff;
  --text:#d7e1ec;
  --muted:#8aa0b8;
  --grid:#1b2538;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% -10%, #0d1424 0%, #0b0f17 55%, #070b12 100%);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
  overflow-x:hidden;
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px;
  background:linear-gradient(180deg, rgba(15,22,37,0.95), rgba(15,22,37,0.60));
  border-bottom:1px solid #152238;
  backdrop-filter: blur(6px);
}

.brand{ display:flex; align-items:center; gap:10px; }
.logo{ font-size:20px; color:var(--accent); filter: drop-shadow(0 0 6px rgba(255,122,24,.5)); }
h1{ font-size:18px; margin:0; letter-spacing:0.5px; color:#eaf3ff; }

.status{ display:flex; align-items:center; gap:14px; color:var(--muted); }
.live-badge{
  font-weight:800; letter-spacing:1px; font-size:12px;
  color:#08120e; background:var(--green);
  padding:6px 10px; border-radius:999px;
  box-shadow: 0 0 12px rgba(0,255,156,.45), inset 0 -2px 0 rgba(0,0,0,.2);
  position:relative;
}
.live-badge::after{
  content:""; position:absolute; inset:-3px; border-radius:999px;
  border:1px solid rgba(0,255,156,.4);
  animation:pulse 2.4s infinite ease-in-out;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:1; }
  70%{ transform:scale(1.25); opacity:0; }
  100%{ transform:scale(1.25); opacity:0; }
}

main{ max-width:1100px; margin:20px auto; padding:0 16px; position:relative; }

.controls{ display:flex; gap:10px; margin: 8px 0 12px; flex-wrap:wrap; }
.btn{
  border:0; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700;
  color:#08120e; text-transform:uppercase; letter-spacing:.5px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.25);
}
.btn-green{ background: linear-gradient(180deg, var(--green), var(--green-dim)); }
.btn-red{ background: linear-gradient(180deg, #ff867d, var(--red)); color:#fff; }
.btn-blue{ background: linear-gradient(180deg, #8ad0ff, var(--blue)); }

.grid{
  width:100%; border-collapse:collapse; overflow:hidden;
  background:linear-gradient(180deg, rgba(17,26,43,0.66), rgba(17,26,43,0.9));
  border:1px solid #162338; border-radius:12px; backdrop-filter: blur(3px);
}
th,td{ padding:12px 10px; border-bottom:1px solid var(--grid); }
th{
  position:sticky; top:54px; z-index:5;
  text-align:left; font-size:12px; letter-spacing:.7px;
  background:linear-gradient(180deg, rgba(26,38,61,0.98), rgba(26,38,61,0.8));
  color:var(--accent);
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
td{ color:#bfe9d7; }
tbody tr:nth-child(even){ background: rgba(16,23,35,0.35); }

/* new row glow */
tr.new{ animation: glow 1.8s ease-out; }
@keyframes glow{
  0%{ background: rgba(0,255,156,.15); box-shadow: inset 0 0 0 0 rgba(0,255,156,.35); }
  100%{ background: transparent; box-shadow: inset 0 0 0 0 rgba(0,255,156,0); }
}

/* radar sweep overlay */
.radar-sweep{
  pointer-events:none;
  position:absolute; inset:0; border-radius:16px;
  background: radial-gradient(600px 300px at -10% 0%, rgba(0,255,156,.07), transparent 55%),
              radial-gradient(900px 600px at 120% 120%, rgba(255,122,24,.05), transparent 60%);
  mix-blend-mode: screen;
  animation: sweep 8s linear infinite;
}
@keyframes sweep{
  from{ transform: translateX(-2%) rotate(0deg); opacity:.9; }
  40%{ opacity:.6; }
  to{ transform: translateX(2%) rotate(0deg); opacity:.9; }
}

footer{ text-align:center; color:var(--muted); padding:18px; }