:root {
  color-scheme: dark;
  --bg: #020504;
  --panel: rgba(3, 18, 14, .88);
  --line: rgba(73, 255, 165, .22);
  --green: #41ff9f;
  --cyan: #49c7ff;
  --text: #e8fff5;
  --muted: #9fb9b0;
  --danger: #ff5c7a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 70% 20%, rgba(28, 116, 255, .15), transparent 30%), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Arial, sans-serif;
  overflow-x: hidden;
}

#matrix {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .56;
  z-index: 0;
}

.shell, .admin-shell { position: relative; z-index: 1; min-height: 100vh; }
.landing {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.lock-stage {
  width: min(720px, 100%);
  text-align: center;
  animation: rise .9s ease both;
}
.brand-chatter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, .36);
}
.brand-chatter img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
.brand-chatter span {
  position: relative;
  display: inline-block;
  padding: 8px 13px;
  border-radius: 18px;
  background: var(--green);
  color: #00130c;
  font-weight: 900;
  text-transform: lowercase;
}
.brand-chatter span:before {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 7px;
  width: 12px;
  height: 12px;
  background: var(--green);
  transform: rotate(45deg);
}
.secure-folder {
  position: relative;
  width: 220px;
  height: 150px;
  margin: 0 auto 28px;
  border: 2px solid var(--green);
  border-radius: 8px;
  box-shadow: 0 0 28px rgba(65, 255, 159, .42), inset 0 0 30px rgba(65, 255, 159, .08);
  animation: pulse 2.4s infinite;
}
.folder-tab {
  position: absolute;
  left: 18px;
  top: -32px;
  width: 96px;
  height: 32px;
  border: 2px solid var(--green);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.folder-lock {
  position: absolute;
  inset: 48px 82px 36px;
  border: 2px solid var(--cyan);
  border-radius: 8px;
}
.folder-lock:before {
  content: "";
  position: absolute;
  left: 12px;
  top: -30px;
  width: 32px;
  height: 32px;
  border: 2px solid var(--cyan);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
}
.signal { color: var(--green); text-transform: uppercase; letter-spacing: 3px; }
h1 { font-size: clamp(40px, 8vw, 82px); margin: 10px 0 28px; letter-spacing: 0; }
h2 { margin: 8px 0 16px; }
button, input, select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(2, 10, 8, .86);
  color: var(--text);
  padding: 10px 14px;
}
textarea {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(2, 10, 8, .86);
  color: var(--text);
  padding: 10px 14px;
  resize: vertical;
}
button { cursor: pointer; font-weight: 800; }
.primary {
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #00130c;
  border: 0;
  box-shadow: 0 10px 34px rgba(65, 255, 159, .25);
}
.ghost { background: transparent; color: var(--green); }
.hidden { display: none !important; }
dialog {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  width: min(480px, calc(100% - 24px));
  box-shadow: 0 0 80px rgba(65, 255, 159, .18);
}
dialog::backdrop { background: rgba(0, 0, 0, .72); }
.modal { display: grid; gap: 12px; }
.check { display: flex; gap: 10px; text-align: left; color: var(--muted); font-size: 14px; }
.check input { min-height: auto; }
.join-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.join-choice label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.join-choice input { min-height: auto; }
.identity-fields { display: grid; gap: 10px; }
.padlock, .shield {
  width: 74px;
  height: 74px;
  margin: 0 auto 8px;
  border: 2px solid var(--green);
  border-radius: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 24px rgba(65,255,159,.3);
}
.padlock:before { content: "⌁"; color: var(--cyan); font-size: 34px; }
.shield { border-radius: 50%; color: var(--green); font-size: 38px; }
.success { text-align: center; }
.hub, .admin-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar {
  border-right: 1px solid var(--line);
  background: rgba(1, 8, 7, .84);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar strong { color: var(--green); margin-bottom: 14px; }
.sidebar span, .nav { text-align: left; color: var(--muted); }
.nav.active { color: var(--green); border-color: var(--green); }
.workspace { padding: 20px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.online { color: var(--green); border: 1px solid var(--line); padding: 6px 10px; border-radius: 999px; }
.panel, .stats article, .table, .admin-login {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}
#chatView {
  height: calc(100vh - 92px);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.conversation-box {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(73, 255, 165, .18);
  border-radius: 8px;
  background: rgba(0,0,0,.16);
}
.messages {
  flex: 1;
  min-height: 220px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.chat-open-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, .28);
}
.chat-open-header strong { color: var(--green); }
.chat-open-header span { color: var(--muted); font-size: 13px; }
.message { max-width: 820px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.22); }
.message small, .muted { color: var(--muted); }
.composer, .upload { display: grid; grid-template-columns: minmax(160px, 220px) 1fr auto; gap: 10px; margin-top: 12px; }
#messageForm {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 10px;
  border-top: 1px solid var(--line);
  background: rgba(1, 10, 8, .96);
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
}
#messageText {
  grid-column: 1;
  grid-row: 1;
  min-height: 48px;
  font-size: 15px;
}
#messageForm > button {
  grid-column: 2;
  grid-row: 1;
  min-width: 86px;
  min-height: 48px;
}
#messageLink,
#gifUrl,
#memeText,
#emojiCode,
#stickerCode,
#messageForm .compact {
  min-height: 38px;
}
#messageLink,
#gifUrl,
#memeText {
  grid-column: span 1;
}
.chat-tools {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 220px);
  gap: 10px;
  margin-bottom: 12px;
}
.chat-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.chat-card {
  display: grid;
  gap: 4px;
  min-height: 82px;
  text-align: left;
  background: rgba(0, 0, 0, .28);
}
.chat-card.active {
  border-color: var(--green);
  box-shadow: 0 0 24px rgba(65, 255, 159, .2);
}
.chat-card span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.chat-card small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact {
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 44px;
}
.compact span { color: var(--green); font-weight: 800; }
.message-media {
  display: block;
  width: min(420px, 100%);
  max-height: 320px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 8px;
  background: #000;
}
.message-audio { width: min(420px, 100%); margin-top: 8px; }
.message-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--cyan);
  overflow-wrap: anywhere;
}
.timer { display: inline-block; margin-left: 8px; color: var(--danger); }
.sticker {
  display: inline-grid;
  place-items: center;
  min-width: 92px;
  min-height: 54px;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(135deg, rgba(65,255,159,.24), rgba(73,199,255,.18));
  color: #fff;
  font-weight: 950;
  box-shadow: 0 0 24px rgba(65,255,159,.18);
}
.meme {
  display: block;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-transform: uppercase;
  background: rgba(255,255,255,.08);
}
.encrypted-card {
  display: grid;
  gap: 4px;
  width: min(360px, 100%);
  min-height: 92px;
  text-align: left;
  border-color: var(--danger);
  background:
    linear-gradient(135deg, rgba(255,92,122,.2), rgba(0,0,0,.5)),
    repeating-linear-gradient(45deg, rgba(255,92,122,.12) 0 8px, transparent 8px 16px);
  box-shadow: 0 0 28px rgba(255,92,122,.2);
  animation: redPulse 1.2s ease-in-out infinite;
}
.encrypted-card span { color: var(--danger); font-size: 12px; }
.encrypted-card strong { color: #fff; font-size: 18px; }
.encrypted-card small { color: #ffd7df; }
.stacked { display: grid; gap: 10px; }
.safety-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.danger { background: var(--danger); color: #fff; border-color: transparent; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.person, .row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, .24);
}
.friend-card { cursor: pointer; }
.friend-card:hover {
  border-color: var(--green);
  box-shadow: 0 0 18px rgba(65,255,159,.16);
}
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.actions button { min-height: 34px; padding: 6px 9px; }
.invite-grid, .profile-grid, .fiber-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.invite-card, .profile-card, .router-stage, .package-stage {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, .24);
}
.copy-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.avatar-wrap {
  width: 158px;
  height: 158px;
  margin: 0 auto 14px;
  border: 2px solid var(--green);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(65,255,159,.24);
}
.avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.router-stage {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  perspective: 1000px;
}
.router-3d {
  position: relative;
  width: min(560px, 100%);
  min-height: 260px;
  margin: 34px auto 28px;
  transform: rotateX(8deg);
  transform-style: preserve-3d;
  border: 1px solid rgba(73,199,255,.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(65,255,159,.2), rgba(73,199,255,.1)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 32px);
  box-shadow: 0 28px 65px rgba(0,0,0,.48), inset 0 0 44px rgba(65,255,159,.08);
  animation: routerFloat 3.6s ease-in-out infinite;
}
.router-3d:before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: -28px;
  height: 28px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(135deg, rgba(65,255,159,.3), rgba(73,199,255,.16));
  transform: translateZ(26px);
}
.router-face {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 18%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  transform: translateZ(34px);
}
.router-port {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 88px;
  padding: 10px 8px;
  font-size: 13px;
  line-height: 1.12;
  background: #020706;
  border-color: rgba(73,199,255,.55);
  box-shadow: inset 0 0 18px rgba(0,0,0,.75);
}
.router-port:before {
  content: "";
  width: 34px;
  height: 34px;
  border: 1px solid rgba(65,255,159,.75);
  border-radius: 5px 5px 3px 3px;
  background:
    linear-gradient(90deg, transparent 0 8px, rgba(65,255,159,.55) 8px 10px, transparent 10px 22px, rgba(65,255,159,.55) 22px 24px, transparent 24px),
    linear-gradient(transparent 0 8px, rgba(73,199,255,.48) 8px 10px, transparent 10px 20px, rgba(73,199,255,.48) 20px 22px, transparent 22px),
    linear-gradient(180deg, rgba(65,255,159,.22), rgba(73,199,255,.08));
  box-shadow: 0 0 16px rgba(65,255,159,.22);
}
.router-port.active {
  color: #00130c;
  background: var(--green);
  border-color: #fff;
  box-shadow: 0 0 28px rgba(65,255,159,.72);
}
.router-port.active:before {
  border-color: #00130c;
  background:
    linear-gradient(90deg, transparent 0 8px, rgba(0,19,12,.58) 8px 10px, transparent 10px 22px, rgba(0,19,12,.58) 22px 24px, transparent 24px),
    linear-gradient(transparent 0 8px, rgba(0,19,12,.5) 8px 10px, transparent 10px 20px, rgba(0,19,12,.5) 20px 22px, transparent 22px),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.22));
}
.router-lights {
  position: absolute;
  left: 9%;
  top: 18%;
  display: flex;
  gap: 12px;
  transform: translateZ(38px);
}
.router-lights span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(73,199,255,.38);
  box-shadow: 0 0 16px rgba(73,199,255,.3);
}
.router-live .router-lights span {
  background: var(--green);
  animation: lightBlink 1s ease-in-out infinite;
}
.router-lights span:nth-child(2) { animation-delay: .15s; }
.router-lights span:nth-child(3) { animation-delay: .3s; }
.router-lights span:nth-child(4) { animation-delay: .45s; }
.fiber-cable {
  position: relative;
  width: min(520px, 92%);
  height: 18px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.44);
  border: 1px solid var(--line);
  overflow: hidden;
}
.fiber-cable span {
  position: absolute;
  inset: 3px auto 3px 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), #fff, var(--cyan));
  box-shadow: 0 0 24px rgba(65,255,159,.62);
}
.fiber-cable.plugged span { animation: cableRun 1.25s ease-out both; }
.package-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.package-card {
  display: grid;
  gap: 7px;
  min-height: 172px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0,0,0,.28);
  animation: rise .35s ease both;
}
.package-card span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(73,199,255,.16);
  color: var(--cyan);
  font-weight: 900;
}
.package-card p {
  margin: 0;
  color: var(--green);
  font-size: 24px;
  font-weight: 950;
}
.package-card small { color: var(--muted); }
.package-card button { min-height: 38px; }
.fiber-checkout-modal {
  max-height: min(760px, 86vh);
  overflow: auto;
}
.checkout-summary {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(65,255,159,.08);
}
.checkout-summary strong { color: var(--green); }
.checkout-summary span { color: var(--muted); }
.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #041d14;
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 14px;
  z-index: 4;
}
.portal-orb {
  width: 108px;
  height: 108px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: conic-gradient(from 90deg, var(--green), var(--cyan), transparent, var(--green));
  box-shadow: 0 0 42px rgba(65, 255, 159, .42);
  animation: spinPortal 1.2s linear infinite;
}
.encryption-modal { text-align: center; }
.encrypt-orb {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 2px solid var(--green);
  box-shadow: 0 0 34px rgba(65,255,159,.35), inset 0 0 30px rgba(73,199,255,.12);
}
.encrypt-orb span {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed rgba(73,199,255,.72);
  animation: spinPortal 3s linear infinite;
}
.encrypt-orb span:nth-child(2) {
  inset: 24px;
  animation-direction: reverse;
  animation-duration: 2s;
  border-color: rgba(65,255,159,.8);
}
.encrypt-orb span:nth-child(3) {
  inset: 38px;
  border-style: solid;
  animation-duration: 1.2s;
}
.encrypt-orb.encrypting { animation: sealFlash 1.1s ease-in-out both; }
.red-alert {
  width: 112px;
  height: 112px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 2px solid var(--danger);
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,92,122,.35) 32%, rgba(0,0,0,.35) 60%);
  box-shadow: 0 0 38px rgba(255,92,122,.48);
  animation: redPulse 1s ease-in-out infinite;
}
.red-alert.unlocking { animation: sealFlash 1s ease-in-out infinite; }
.security-scan {
  text-align: center;
  overflow: hidden;
  padding: 6px;
}
.scan-world {
  position: relative;
  width: min(290px, 76vw);
  aspect-ratio: 1;
  margin: 0 auto 12px;
  perspective: 900px;
  display: grid;
  place-items: center;
}
.scan-grid {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(73, 199, 255, .28);
  border-radius: 50%;
  background:
    linear-gradient(rgba(65, 255, 159, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 199, 255, .1) 1px, transparent 1px);
  background-size: 22px 22px;
  transform: rotateX(64deg);
  animation: gridFloat 2.8s ease-in-out infinite;
}
.scan-core {
  position: absolute;
  width: 74%;
  height: 74%;
  border-radius: 50%;
  border: 1px solid rgba(65, 255, 159, .42);
  box-shadow: inset 0 0 32px rgba(73, 199, 255, .12), 0 0 52px rgba(65, 255, 159, .18);
  animation: coreGlow 2.2s ease-in-out infinite;
}
.scan-core span {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(65, 255, 159, .5);
  animation: spinPortal 7s linear infinite;
}
.scan-core span:nth-child(2) {
  inset: 24%;
  border-color: rgba(73, 199, 255, .55);
  animation-duration: 5.2s;
  animation-direction: reverse;
}
.scan-core span:nth-child(3) {
  inset: 36%;
  border-style: solid;
  border-color: rgba(255, 255, 255, .28);
  animation-duration: 3.8s;
}
.scan-ring {
  position: absolute;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  border: 2px solid transparent;
}
.ring-one {
  border-top-color: var(--green);
  border-bottom-color: rgba(73, 199, 255, .62);
  transform: rotateX(68deg);
  animation: spinPortal 1.8s linear infinite;
}
.ring-two {
  width: 68%;
  height: 68%;
  border-left-color: rgba(65, 255, 159, .75);
  border-right-color: rgba(255, 255, 255, .38);
  transform: rotateY(70deg);
  animation: spinPortal 2.4s linear infinite reverse;
}
.scan-cube {
  position: relative;
  width: 74px;
  height: 74px;
  transform-style: preserve-3d;
  animation: cubeTurn 3s linear infinite;
}
.face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(65, 255, 159, .72);
  background: linear-gradient(135deg, rgba(65, 255, 159, .18), rgba(73, 199, 255, .16));
  box-shadow: inset 0 0 18px rgba(65, 255, 159, .22);
}
.front { transform: translateZ(37px); }
.back { transform: rotateY(180deg) translateZ(37px); }
.right { transform: rotateY(90deg) translateZ(37px); }
.left { transform: rotateY(-90deg) translateZ(37px); }
.top { transform: rotateX(90deg) translateZ(37px); }
.bottom { transform: rotateX(-90deg) translateZ(37px); }
.scan-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 4px;
}
.scan-steps span {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 9px 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.scan-steps span.complete {
  color: #00130c;
  background: var(--green);
  box-shadow: 0 0 22px rgba(65, 255, 159, .28);
}
.scan-steps span.danger {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
  box-shadow: 0 0 22px rgba(255, 92, 122, .36);
}
.scan-success .scan-cube .face {
  border-color: #fff;
  background: linear-gradient(135deg, rgba(65, 255, 159, .44), rgba(255, 255, 255, .2));
}
.scan-success .scan-world {
  filter: drop-shadow(0 0 28px rgba(65, 255, 159, .45));
}
.scan-danger .scan-core,
.scan-danger .scan-cube .face {
  border-color: var(--danger);
  box-shadow: 0 0 32px rgba(255, 92, 122, .36);
}
.scan-danger .ring-one {
  border-top-color: var(--danger);
}
.install-prompt {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 5;
  background: var(--green);
  color: #00130c;
  border: 0;
}
.install-modal { text-align: center; }
.install-brand { margin: 0 auto 6px; }
.install-steps {
  display: grid;
  gap: 8px;
  text-align: left;
}
.install-steps div {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0,0,0,.22);
}
.install-steps strong { color: var(--green); }
.install-steps span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.stats strong { display: block; color: var(--green); font-size: 34px; }
.table { display: grid; gap: 8px; margin-bottom: 22px; overflow: auto; }
.row { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 8px; align-items: center; }
.row button { min-height: 34px; }

@keyframes pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.04); filter: brightness(1.28); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spinPortal {
  to { transform: rotate(360deg) scale(1.04); }
}
@keyframes redPulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.35); transform: scale(1.02); }
}
@keyframes sealFlash {
  0% { transform: scale(.9) rotate(0deg); filter: brightness(1); }
  50% { transform: scale(1.12) rotate(180deg); filter: brightness(1.6); }
  100% { transform: scale(1) rotate(360deg); filter: brightness(1.1); }
}
@keyframes cubeTurn {
  from { transform: rotateX(-18deg) rotateY(0deg) rotateZ(8deg); }
  to { transform: rotateX(342deg) rotateY(360deg) rotateZ(8deg); }
}
@keyframes gridFloat {
  0%, 100% { transform: rotateX(64deg) translateY(0); opacity: .72; }
  50% { transform: rotateX(64deg) translateY(-8px); opacity: 1; }
}
@keyframes coreGlow {
  0%, 100% { transform: scale(.96); opacity: .86; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes routerFloat {
  0%, 100% { transform: rotateX(8deg) translateY(0); }
  50% { transform: rotateX(8deg) translateY(-8px); }
}
@keyframes lightBlink {
  0%, 100% { filter: brightness(.8); transform: scale(.9); }
  50% { filter: brightness(1.65); transform: scale(1.2); }
}
@keyframes cableRun {
  from { width: 0; }
  to { width: 100%; }
}

@media (max-width: 780px) {
  .hub, .admin-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; border-right: 0; border-bottom: 1px solid var(--line); }
  .composer, .upload, .chat-tools { grid-template-columns: 1fr; }
  .safety-grid { grid-template-columns: 1fr; }
  .invite-grid, .profile-grid, .fiber-layout { grid-template-columns: 1fr; }
  .copy-row { grid-template-columns: 1fr; }
  .router-face { grid-template-columns: 1fr; top: 26%; bottom: auto; }
  .router-3d { min-height: 430px; transform: none; }
  #chatView { height: auto; min-height: 70vh; overflow: visible; }
  .messages { min-height: 45vh; }
  #messageForm { grid-template-columns: 1fr; }
  #messageText, #messageForm > button { grid-column: 1; grid-row: auto; }
  .stats { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .scan-steps { grid-template-columns: 1fr; }
}
.friend-contact {
  color: #51f5a8;
  font-size: .82rem;
  margin: .3rem 0;
}