:root {
  --bg: #040915;
  --panel: rgba(8, 28, 48, .82);
  --panel2: rgba(5, 14, 31, .92);
  --line: rgba(66, 234, 255, .36);
  --glow: #3df0ff;
  --lime: #b7ff3d;
  --orange: #ff9b2f;
  --pink: #ff4fd8;
  --text: #e6fbff;
  --muted: #94b9c6;
  --bad: #ff5871;
  --ok: #6affb3;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at top, #102b55 0%, var(--bg) 45%, #02050c 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .01em;
}

/* === I-Grid Background: animated aurora + drifting particles === */
.grid-bg {
  position: fixed; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(61, 240, 255, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 240, 255, .13) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px;
  transform: perspective(700px) rotateX(55deg) translateY(18%);
  transform-origin: top;
  animation: aurora 12s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { opacity: .45; background-position: 0 0, 0 0; }
  50% { opacity: .65; background-position: 10px 8px, -6px -4px; }
  100% { opacity: .5; background-position: -8px 14px, 12px -10px; }
}
.grid-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,79,216,.1), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(183,255,61,.08), transparent 40%);
  animation: auroraGlow 8s ease-in-out infinite alternate;
}
@keyframes auroraGlow {
  0% { opacity: .6; }
  100% { opacity: 1; }
}

/* === Floating data particles === */
.particles {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.particle {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 6px var(--glow);
  animation: float linear infinite;
  opacity: 0;
}
.particle:nth-child(1) { left: 8%; top: -10%; animation-duration: 14s; animation-delay: 0s; width: 2px; height: 2px; }
.particle:nth-child(2) { left: 22%; top: -10%; animation-duration: 18s; animation-delay: 2s; background: var(--pink); box-shadow: 0 0 6px var(--pink); }
.particle:nth-child(3) { left: 35%; top: -10%; animation-duration: 12s; animation-delay: 4s; width: 4px; height: 4px; }
.particle:nth-child(4) { left: 48%; top: -10%; animation-duration: 16s; animation-delay: 1s; background: var(--lime); box-shadow: 0 0 6px var(--lime); }
.particle:nth-child(5) { left: 60%; top: -10%; animation-duration: 20s; animation-delay: 3s; }
.particle:nth-child(6) { left: 72%; top: -10%; animation-duration: 13s; animation-delay: 5s; width: 2px; height: 2px; background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.particle:nth-child(7) { left: 85%; top: -10%; animation-duration: 17s; animation-delay: 0s; }
.particle:nth-child(8) { left: 95%; top: -10%; animation-duration: 15s; animation-delay: 6s; background: var(--pink); box-shadow: 0 0 6px var(--pink); width: 2px; height: 2px; }
@keyframes float {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  5% { opacity: .8; transform: scale(1); }
  90% { opacity: .6; }
  100% { transform: translateY(110vh) scale(.3); opacity: 0; }
}

.scanlines {
  position: fixed; inset: 0; pointer-events: none; opacity: .08;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, #fff 4px 5px);
  mix-blend-mode: overlay;
}
a { color: var(--glow); text-decoration: none; }

/* === Animated topbar === */
.topbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 24px;
  background: rgba(1, 7, 18, .82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  animation: topbarPulse 4s ease-in-out infinite;
}
@keyframes topbarPulse {
  0%, 100% { box-shadow: 0 0 28px rgba(61,240,255,.18); }
  50% { box-shadow: 0 0 48px rgba(61,240,255,.3), 0 0 12px rgba(183,255,61,.12); }
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }

/* === Breathing orb === */
.orb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--glow);
  animation: orbBreath 3s ease-in-out infinite;
}
@keyframes orbBreath {
  0%, 100% { box-shadow: 0 0 18px var(--glow), inset 0 0 8px white; transform: scale(1); }
  50% { box-shadow: 0 0 36px var(--glow), 0 0 12px rgba(183,255,61,.3), inset 0 0 12px white; transform: scale(1.15); }
}

nav { display: flex; flex-wrap: wrap; gap: 12px; }
nav a { color: var(--text); opacity: .86; font-size: 14px; position: relative; transition: all .3s; }
nav a::after {
  content: ""; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px;
  background: var(--lime); transition: width .3s; box-shadow: 0 0 8px var(--lime);
}
nav a:hover { color: var(--lime); opacity: 1; }
nav a:hover::after { width: 100%; }

.shell { position: relative; z-index: 1; width: min(1240px, calc(100% - 32px)); margin: 26px auto 40px; }

/* === Breathing panel borders === */
.panel, .card {
  background: linear-gradient(135deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 20px 70px rgba(0,0,0,.35), 0 0 34px rgba(61,240,255,.12);
  transition: border-color .5s, box-shadow .5s;
}
.panel:hover, .card:hover {
  border-color: rgba(61,240,255,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 20px 70px rgba(0,0,0,.35), 0 0 46px rgba(61,240,255,.22);
}
.panel { padding: 22px; margin-bottom: 18px; }

/* === Shimmer hero === */
.holo { position: relative; overflow: hidden; }
.holo::after {
  content: ""; position: absolute; inset: -100% -40%; pointer-events: none;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.11), transparent 60%);
  transform: rotate(12deg); animation: shimmer 7s linear infinite;
}
@keyframes shimmer { from { translate: -30% 0; } to { translate: 30% 0; } }

.hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
h1, h2 { margin: 0 0 10px; line-height: 1.05; }
h1 {
  font-size: clamp(34px, 5vw, 64px);
  text-shadow: 0 0 22px rgba(61,240,255,.45);
  animation: titleGlow 4s ease-in-out infinite alternate;
}
@keyframes titleGlow {
  0% { text-shadow: 0 0 22px rgba(61,240,255,.45); }
  100% { text-shadow: 0 0 40px rgba(61,240,255,.7), 0 0 12px rgba(183,255,61,.15); }
}
h2 { color: var(--lime); }
.eyebrow { color: var(--orange); text-transform: uppercase; letter-spacing: .17em; font-weight: 800; font-size: 12px; margin: 0 0 10px; }
.muted { color: var(--muted); margin-top: 0; }

/* === Animated tower === */
.tower {
  width: 130px; height: 130px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--glow);
  animation: towerPulse 4s ease-in-out infinite;
  position: relative;
}
@keyframes towerPulse {
  0%, 100% { box-shadow: 0 0 50px rgba(61,240,255,.26); }
  50% { box-shadow: 0 0 80px rgba(61,240,255,.45), 0 0 20px rgba(255,79,216,.15); }
}
.tower::before { content: ""; width: 44px; height: 90px; border-radius: 50% 50% 20% 20%; border: 2px solid var(--lime); box-shadow: 0 0 18px var(--lime); }
.tower span { position: absolute; inset: 10px; border: 1px dashed rgba(61,240,255,.46); border-radius: 50%; animation: spin 10s linear infinite; }
.tower span:nth-child(2) { inset: 24px; animation-duration: 6s; animation-direction: reverse; border-color: rgba(255,79,216,.5); }
.tower span:nth-child(3) { inset: 40px; animation-duration: 4s; border-color: rgba(255,155,47,.5); }
@keyframes spin { to { rotate: 360deg; } }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.card { padding: 18px; display: flex; flex-direction: column; gap: 8px; transition: all .4s; }
.card:hover { transform: translateY(-2px); }
.card span { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }

/* === Glowing card numbers === */
.card strong {
  font-size: 30px; color: var(--glow);
  animation: numGlow 3s ease-in-out infinite alternate;
}
@keyframes numGlow {
  0% { text-shadow: 0 0 12px rgba(61,240,255,.3); }
  100% { text-shadow: 0 0 28px rgba(61,240,255,.6), 0 0 8px rgba(183,255,61,.1); }
}

.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; }

/* === Animated terminal === */
.terminal {
  white-space: pre-wrap; overflow: auto; max-height: 260px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(183,255,61,.3); border-radius: 12px;
  padding: 14px; color: #cbffd6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 0 12px rgba(106,255,179,.4);
  animation: terminalHum 6s ease-in-out infinite;
}
@keyframes terminalHum {
  0%, 100% { border-color: rgba(183,255,61,.3); box-shadow: inset 0 0 20px rgba(106,255,179,.05); }
  50% { border-color: rgba(183,255,61,.5); box-shadow: inset 0 0 30px rgba(106,255,179,.1); }
}
.terminal.tall { max-height: 520px; }

form { margin: 0; }
.stack { display: grid; gap: 14px; }
label { color: var(--muted); display: grid; gap: 6px; }
input {
  width: 100%; border-radius: 12px; border: 1px solid rgba(61,240,255,.32); padding: 12px 14px;
  background: rgba(0,0,0,.42); color: var(--text); outline: none; transition: border-color .3s, box-shadow .3s;
}
input:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(183,255,61,.13); }

/* === Animated buttons === */
button {
  border: 1px solid rgba(61,240,255,.48); border-radius: 999px; padding: 10px 14px;
  color: var(--text); background: rgba(61,240,255,.08); cursor: pointer; font-weight: 800;
  transition: all .3s; position: relative; overflow: hidden;
}
button::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.1), transparent 70%);
  transform: translateX(-100%); transition: transform .6s;
}
button:hover::after { transform: translateX(100%); }
button:hover { border-color: var(--lime); box-shadow: 0 0 18px rgba(183,255,61,.25); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.primary { background: linear-gradient(90deg, rgba(61,240,255,.32), rgba(183,255,61,.2)); color: white; }
button.danger { border-color: rgba(255,88,113,.6); background: rgba(255,88,113,.12); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inline-form { display: inline-block; }
.entry-form, .feed-form { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 12px; align-items: center; }
.feed-form { grid-template-columns: .8fr 1.4fr 1fr auto auto; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; }

/* === Animated table rows === */
table { width: 100%; border-collapse: collapse; overflow: hidden; }
th, td { padding: 11px 10px; border-bottom: 1px solid rgba(61,240,255,.12); vertical-align: top; text-align: left; }
th { color: var(--orange); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
td { color: #d7f7ff; transition: background .3s; }
tr { transition: background .3s; }
tr:hover td { background: rgba(61,240,255,.08); }
tr { animation: rowFade .6s ease-out both; }
tr:nth-child(1) { animation-delay: .02s; }
tr:nth-child(2) { animation-delay: .04s; }
tr:nth-child(3) { animation-delay: .06s; }
tr:nth-child(4) { animation-delay: .08s; }
tr:nth-child(5) { animation-delay: .1s; }
tr:nth-child(6) { animation-delay: .12s; }
tr:nth-child(7) { animation-delay: .14s; }
tr:nth-child(8) { animation-delay: .16s; }
tr:nth-child(9) { animation-delay: .18s; }
tr:nth-child(10) { animation-delay: .2s; }
@keyframes rowFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

code { color: var(--lime); }
.pill { display: inline-flex; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 900; }
.pill.on { color: #062; background: var(--ok); }
.pill.off { color: #231; background: var(--orange); }
.url-cell { max-width: 360px; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; }
.buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* === Fade-in messages === */
.messages { margin-bottom: 14px; }
.flash {
  padding: 12px 14px; border-radius: 12px; margin-bottom: 8px; border: 1px solid;
  animation: flashSlide .4s ease-out;
}
@keyframes flashSlide {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.flash.ok { border-color: rgba(106,255,179,.5); background: rgba(106,255,179,.11); }
.flash.bad { border-color: rgba(255,88,113,.55); background: rgba(255,88,113,.12); }
.login-panel, .settings-panel { width: min(520px, 100%); margin: 8vh auto; }
.sector-ring {
  width: 90px; height: 90px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--orange); color: var(--orange); font-size: 42px; font-weight: 900;
  animation: ringPulse 3s ease-in-out infinite;
  margin-bottom: 18px;
}
@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 28px rgba(255,155,47,.4); }
  50% { box-shadow: 0 0 50px rgba(255,155,47,.6), 0 0 12px rgba(255,79,216,.15); }
}
.footer { position: relative; z-index: 1; color: var(--muted); text-align: center; padding: 0 0 30px; font-size: 12px; }
@media (max-width: 900px) {
  .cards, .split { grid-template-columns: 1fr; }
  .entry-form, .feed-form { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .hero { align-items: flex-start; }
  .tower { display: none; }
}