:root {
  --bg: #050807;
  --panel: rgba(10, 22, 16, .88);
  --panel-2: rgba(16, 35, 25, .92);
  --panel-3: rgba(20, 45, 30, .78);
  --line: rgba(133, 255, 157, .18);
  --line-strong: rgba(161, 255, 110, .38);
  --text: #f3fff5;
  --muted: #a9b9aa;
  --acid: #a7ff3f;
  --acid-2: #53ff70;
  --blood: #ff3b3b;
  --rust: #d17f32;
  --bone: #f2e8c9;
  --input: #fff8ca;
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --glow: 0 0 28px rgba(83,255,112,.22), 0 0 80px rgba(167,255,63,.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -10%, rgba(167,255,63,.18), transparent 32%),
    radial-gradient(circle at 92% 6%, rgba(255,59,59,.12), transparent 30%),
    linear-gradient(180deg, #041008 0%, #07140d 38%, #030605 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(rgba(255,255,255,.025) 50%, rgba(0,0,0,.06) 50%);
  background-size: 100% 4px;
  opacity: .16;
  animation: scanline 5s linear infinite;
}

.apocalypse-bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.moon {
  position: absolute;
  width: 170px;
  height: 170px;
  right: 8vw;
  top: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8ffd6, #b9ef91 45%, rgba(100,255,105,.18) 70%);
  filter: blur(.2px);
  box-shadow: 0 0 80px rgba(167,255,63,.24);
  opacity: .4;
  animation: pulseMoon 8s ease-in-out infinite;
}
.fog {
  position: absolute;
  left: -20vw;
  right: -20vw;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(196,255,204,.11), transparent 70%);
  filter: blur(16px);
  opacity: .7;
}
.fog-1 { bottom: 3vh; animation: driftFog 34s linear infinite; }
.fog-2 { bottom: 18vh; animation: driftFog 46s linear infinite reverse; opacity: .42; }
.ember {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 18px rgba(167,255,63,.65);
  opacity: .75;
}
.e1 { left: 16vw; top: 22vh; animation: floatEmber 8s ease-in-out infinite; }
.e2 { left: 74vw; top: 38vh; animation: floatEmber 11s ease-in-out infinite .6s; }
.e3 { left: 48vw; top: 76vh; animation: floatEmber 13s ease-in-out infinite 1.1s; }
.walker {
  position: absolute;
  bottom: 18px;
  font-size: 34px;
  opacity: .18;
  filter: grayscale(1) drop-shadow(0 0 12px rgba(167,255,63,.35));
}
.w1 { left: -70px; animation: zombieWalk 55s linear infinite; }
.w2 { left: -110px; animation: zombieWalk 70s linear infinite 12s; font-size: 42px; opacity: .13; }

.app-header,
.tabs,
main,
.app-footer { position: relative; z-index: 1; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px clamp(18px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(4, 14, 8, .9), rgba(12, 30, 20, .84));
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.brand-block { max-width: 850px; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 8px;
  font-size: clamp(30px, 4vw, 54px);
  letter-spacing: -.05em;
  line-height: 1;
  text-shadow: 0 0 20px rgba(167,255,63,.2);
}
h2 { margin-bottom: 0; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.03em; }
h3 { margin-bottom: 10px; }
.subhead { margin-bottom: 0; color: #c2cfbd; max-width: 820px; }
.biohazard { color: var(--acid); filter: drop-shadow(0 0 12px rgba(167,255,63,.7)); animation: bioPulse 2.8s ease-in-out infinite; }
.eyebrow { color: var(--acid); font-weight: 950; letter-spacing: .15em; text-transform: uppercase; font-size: 12px; margin-bottom: 8px; }
.muted { color: var(--muted); margin: 8px 0 0; }

.header-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.btn {
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(28,55,38,.95), rgba(10,25,16,.95));
  color: var(--text);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}
.btn:hover { transform: translateY(-2px); border-color: var(--acid); box-shadow: var(--glow); }
.btn.primary { background: linear-gradient(135deg, #9dff2f, #38ff69); color: #071007; border-color: transparent; }
.btn.danger { background: linear-gradient(135deg, rgba(120,13,18,.9), rgba(55,7,8,.9)); border-color: rgba(255,59,59,.52); }
.file-label { display: inline-flex; align-items: center; }

.tabs {
  display: flex;
  gap: 9px;
  padding: 14px clamp(18px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  background: rgba(3, 8, 5, .78);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 116px;
  z-index: 40;
}
.tab {
  border: 1px solid var(--line);
  background: rgba(9, 23, 15, .86);
  color: #d8ead3;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition: .18s ease;
}
.tab:hover { color: #fff; border-color: var(--acid); box-shadow: 0 0 18px rgba(167,255,63,.13); }
.tab.active { background: linear-gradient(135deg, rgba(167,255,63,.24), rgba(83,255,112,.1)); border-color: rgba(167,255,63,.72); color: #fff; }

main {
  width: min(1560px, 100%);
  margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 46px) 42px;
}
.tab-panel { display: none; animation: riseIn .28s ease both; }
.tab-panel.active { display: block; }
.grid { display: grid; gap: 20px; margin-bottom: 20px; }
.grid.two { grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); }

.card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--panel), rgba(6, 17, 11, .86));
  border-radius: 24px;
  padding: clamp(16px, 2.2vw, 24px);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 10% 0%, rgba(167,255,63,.1), transparent 34%), radial-gradient(circle at 105% 20%, rgba(255,59,59,.06), transparent 32%);
  pointer-events: none;
}
.card > * { position: relative; z-index: 1; }
.card:hover { border-color: rgba(167,255,63,.32); box-shadow: var(--shadow), var(--glow); }
.command-card { background: linear-gradient(145deg, rgba(15, 36, 22, .95), rgba(5, 13, 8, .92)); }
.toxic-card { background: linear-gradient(145deg, rgba(29, 50, 14, .88), rgba(6, 14, 8, .94)); }

.section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.mini-title { margin-bottom: 10px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(167,255,63,.45);
  color: #071007;
  background: linear-gradient(135deg, #a7ff3f, #53ff70);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: 0 0 24px rgba(167,255,63,.22);
}
.status-pill.warn { background: rgba(209,127,50,.2); color: #ffe3ae; border-color: rgba(209,127,50,.55); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi-grid.small { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kpi {
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(23, 46, 31, .78), rgba(6, 15, 9, .72));
  box-shadow: inset 0 0 18px rgba(167,255,63,.035);
}
.kpi .label { color: #a6b7a8; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 950; margin-bottom: 8px; }
.kpi .value { color: #fff; font-size: clamp(22px, 2.7vw, 34px); font-weight: 1000; letter-spacing: -.045em; }
.kpi .hint { margin-top: 6px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.form-grid, .resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.speedup-box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label { display: grid; gap: 7px; color: #cbdac8; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 950; }
input, select {
  width: 100%;
  border: 1px solid rgba(167,255,63,.28);
  border-radius: 13px;
  background: var(--input);
  color: #101409;
  padding: 11px 12px;
  font: inherit;
  font-weight: 850;
  outline: none;
  transition: .14s ease;
}
select { background: linear-gradient(180deg, #fff8ca, #f5e9a9); }
input:focus, select:focus { border-color: #81ff4f; box-shadow: 0 0 0 3px rgba(167,255,63,.14), 0 0 24px rgba(167,255,63,.2); }
input[readonly] { background: #ccffd6; color: #073d13; }

.detail-list { display: grid; gap: 8px; }
.detail-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) 1fr;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}
.detail-row span:first-child { color: #b3c1b0; font-weight: 900; }
.detail-row span:last-child { font-weight: 1000; text-align: right; color: #fff; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(0,0,0,.14);
}
table { width: 100%; border-collapse: collapse; min-width: 1120px; }
th, td { border-bottom: 1px solid var(--line); padding: 10px 10px; text-align: left; vertical-align: middle; }
th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, #183320, #0d1d12);
  color: #dcffd6;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
td { color: #eaffeb; }
td.num, th.num { text-align: right; }
td.center, th.center { text-align: center; }
tr:nth-child(even) td { background: rgba(167,255,63,.026); }
tr:hover td { background: rgba(167,255,63,.055); }
td input, td select { padding: 8px 9px; min-width: 94px; }

.badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 1000;
  border: 1px solid var(--line);
}
.badge.ok { background: rgba(83,255,112,.14); color: #cfffce; border-color: rgba(83,255,112,.38); }
.badge.warn { background: rgba(209,127,50,.16); color: #ffdda2; border-color: rgba(209,127,50,.42); }
.badge.danger { background: rgba(255,59,59,.13); color: #ffc9c9; border-color: rgba(255,59,59,.4); }

.box-plan { display: grid; gap: 10px; }
.box-line {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(167,255,63,.045);
}
.box-line.final { border-color: rgba(167,255,63,.36); background: rgba(167,255,63,.08); }
.box-line strong { color: #fff; }
.box-line span:not(:first-child) { text-align: right; font-weight: 950; }

.filters { min-width: 180px; }
.prose { line-height: 1.65; }
.prose code { background: rgba(167,255,63,.1); padding: 2px 6px; border-radius: 8px; color: #dfff9c; }
.prose li { margin-bottom: 8px; }
.settings-grid { display: grid; gap: 16px; }
.mini-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgba(2, 8, 5, .32);
}
.mini-card h3 { color: var(--bone); }

.app-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(18px, 4vw, 46px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: rgba(2,6,3,.88);
}

@keyframes scanline { from { background-position: 0 0; } to { background-position: 0 80px; } }
@keyframes pulseMoon { 0%,100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.04); opacity: .48; } }
@keyframes driftFog { 0% { transform: translateX(-12vw); } 100% { transform: translateX(12vw); } }
@keyframes floatEmber { 0%,100% { transform: translateY(0) scale(1); opacity: .42; } 50% { transform: translateY(-38px) scale(1.35); opacity: .9; } }
@keyframes zombieWalk { 0% { transform: translateX(0) rotate(-3deg); } 100% { transform: translateX(calc(100vw + 170px)) rotate(4deg); } }
@keyframes bioPulse { 0%,100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1150px) {
  .grid.two { grid-template-columns: 1fr; }
  .kpi-grid, .kpi-grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs { top: 140px; }
}
@media (max-width: 760px) {
  .app-header { position: static; align-items: flex-start; flex-direction: column; }
  .tabs { position: static; }
  .header-actions { justify-content: flex-start; }
  .kpi-grid, .kpi-grid.small, .form-grid.compact, .form-grid, .resource-grid, .speedup-box-grid { grid-template-columns: 1fr; }
  .detail-row { grid-template-columns: 1fr; }
  .detail-row span:last-child { text-align: left; }
  .box-line { grid-template-columns: 1fr; }
  .box-line span:not(:first-child) { text-align: left; }
}


/* Cloud app additions */
.cloud-status, .admin-panel, .profile-list {
  display: grid;
  gap: 0.75rem;
}
.cloud-row, .profile-card {
  border: 1px solid rgba(110, 255, 154, 0.18);
  background: rgba(6, 20, 12, 0.58);
  border-radius: 16px;
  padding: 0.85rem;
  box-shadow: inset 0 0 18px rgba(40, 255, 110, 0.04);
}
.cloud-row strong, .profile-card strong { color: #d7ffe3; }
.cloud-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.9rem;
}
.cloud-message { min-height: 1.25rem; }
.profile-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
}
.profile-card .profile-meta {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.profile-actions .btn { padding: 0.45rem 0.6rem; font-size: 0.8rem; }
.admin-note {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.copy-code {
  user-select: all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  background: rgba(0,0,0,.35);
  border: 1px dashed rgba(110,255,154,.25);
  padding: .45rem .55rem;
  border-radius: 10px;
  word-break: break-all;
}
.status-pill.offline { background: rgba(255,255,255,.08); color: var(--muted); border-color: rgba(255,255,255,.15); }
.status-pill.good { background: rgba(40,255,110,.12); color: #b8ffd1; border-color: rgba(40,255,110,.35); }
@media (max-width: 820px) {
  .profile-card { grid-template-columns: 1fr; }
  .profile-actions { justify-content: flex-start; }
}

.owner-card {
  border-color: rgba(165, 255, 89, 0.22);
}
.active-alliance-info {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
button:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.discord-btn {
  background: linear-gradient(135deg, #5865f2, #3542cc) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(88, 101, 242, 0.35);
}
.discord-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted, #9aa);
  margin: 12px 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.or-divider::before, .or-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,0.14);
}
.tiny-note {
  font-size: 0.82rem;
  line-height: 1.35;
}