/* Sentinel — theme hacker / CRT */
:root { --bg:#050505; --panel:#0a0a0a; --accent:#ff6a00; --accent2:#ff8c00; --text:#d8d8d8; --muted:#666; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--bg); color:var(--text); font-family:'JetBrains Mono', monospace; }
a { color:var(--accent); text-decoration:none; }
body { min-height:100vh; position:relative;
  background-image:
    linear-gradient(rgba(255,106,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,106,0,0.03) 1px, transparent 1px);
  background-size:36px 36px; }

/* Matrix canvas + CRT overlay */
#matrix { position:fixed; inset:0; z-index:0; opacity:.25; pointer-events:none; }
.crt-overlay { position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.14) 0 1px, transparent 1px 3px);
  animation:crt-flicker 6s infinite; }
@keyframes crt-flicker { 0%,100%{opacity:.9} 50%{opacity:.75} }

/* Layout */
.container { max-width:1200px; margin:0 auto; padding:1.2rem; position:relative; z-index:2; }
.topnav { display:flex; align-items:center; gap:1rem; padding:.7rem 1.2rem; background:#0a0a0acc; border-bottom:1px solid #ff6a0033;
  position:sticky; top:0; z-index:10; backdrop-filter:blur(6px); flex-wrap:wrap; }
.nav-brand { color:var(--accent2); font-weight:700; letter-spacing:.15em; }
.nav-brand i { margin-right:.35rem; animation:pulse-icon 2s infinite; }
@keyframes pulse-icon { 0%,100%{opacity:1} 50%{opacity:.5} }
.nav-links { display:flex; gap:.3rem; flex-wrap:wrap; }
.nav-links a { color:#888; padding:.35rem .7rem; border-radius:4px; font-size:.85rem; transition:all .2s; }
.nav-links a:hover { color:var(--accent2); background:#ff6a0014; }
.nav-links a.active { color:#000; background:var(--accent); font-weight:700; }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:.6rem; }
.nav-user { color:#888; font-size:.8rem; }
.nav-logout { color:#a33; font-size:1rem; }
.nav-logout:hover { color:#ff4d4d; text-shadow:0 0 8px #ff4d4d; }
.live-dot { width:9px; height:9px; border-radius:50%; background:#28c840; display:inline-block; animation:blink 1.4s infinite; box-shadow:0 0 8px #28c840; }
@keyframes blink { 50% { opacity:.15 } }

/* Page title typing effect */
.page-title { color:var(--accent2); font-size:1.35rem; margin:.5rem 0 1rem; letter-spacing:.06em; }
.page-title::after { content:'▌'; animation:blink 1s steps(1) infinite; color:var(--accent); }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-bottom:1rem; }
.card { background:var(--panel); border:1px solid #1e1e1e; border-radius:8px; padding:1rem 1.1rem; position:relative; z-index:2;
  transition:border-color .25s, box-shadow .25s; }
.card.glow { animation:glow 3.5s ease-in-out infinite; }
@keyframes glow {
  0%,100% { border-color:#ff6a0033; box-shadow:0 0 10px #ff6a0011, inset 0 0 20px #ff6a0008; }
  50% { border-color:#ff6a0077; box-shadow:0 0 22px #ff6a0044, inset 0 0 30px #ff6a0011; }
}
.card-icon { font-size:1.4rem; color:var(--accent); margin-right:.9rem; float:left; }
.card-icon.red { color:#ff4d4d; } .card-icon.green { color:#28c840; }
.card-label { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }
.card-value { font-size:1.8rem; font-weight:700; color:var(--accent2); }
.card-value-sm { font-size:1.1rem; font-weight:700; color:var(--accent2); margin-top:.2rem; }
.chart-card { margin-bottom:1rem; }
.card h2 { color:#aaa; font-size:.9rem; margin-bottom:.7rem; letter-spacing:.08em; }
.card h2 i { color:var(--accent); margin-right:.4rem; }

/* Tables */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.82rem; }
th { color:var(--accent); text-align:left; padding:.55rem .7rem; border-bottom:1px solid #ff6a0033; text-transform:uppercase; font-size:.68rem; letter-spacing:.1em; white-space:nowrap; }
td { padding:.5rem .7rem; border-bottom:1px solid #141414; white-space:nowrap; }
tbody tr { transition:background .15s, transform .15s; animation:fadein .5s ease both; }
tbody tr:hover { background:#ff6a000f; }
@keyframes fadein { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }
.muted { color:var(--muted); }
.small { font-size:.75rem; margin-bottom:.9rem; }
code { color:var(--accent2); }

/* Badges */
.badge { padding:.15rem .5rem; border-radius:3px; font-size:.68rem; font-weight:700; letter-spacing:.06em; }
.badge-banned { background:#2a0808; color:#ff4d4d; border:1px solid #ff4d4d55; animation:blink 1.6s infinite; }
.badge-ok { background:#07220c; color:#28c840; border:1px solid #28c84044; }

.footer { text-align:center; color:#444; font-size:.68rem; padding:1.5rem 0; }
@media (max-width:700px){ .nav-txt{display:none} .page-title{font-size:1.05rem} .card-value{font-size:1.4rem} }

/* Defense stack panel */
.def-row { display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border:1px solid #1c1c1c; border-radius:6px; margin-bottom:.45rem; background:#0c0c0c; transition: border-color .3s, background .3s; font-size:.85rem; }
.def-row:hover { border-color:#ff6a00; background:#131008; }
.def-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.def-on .def-dot { background:#22c55e; box-shadow:0 0 8px #22c55e; animation:pulse-dot 1.6s infinite; }
.def-off .def-dot { background:#ef4444; box-shadow:0 0 8px #ef4444; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }
.def-row i { color:#ff8c00; width:18px; text-align:center; }
.def-name { color:#eee; font-weight:600; white-space:nowrap; }
.def-detail { color:#666; font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
@media (max-width:640px){ .def-detail{display:none} }