:root {
  --ecl-bg: #080d18;
  --ecl-panel: rgba(255, 255, 255, .07);
  --ecl-panel-strong: rgba(255, 255, 255, .11);
  --ecl-border: rgba(255, 255, 255, .16);
  --ecl-text: rgba(255, 255, 255, .94);
  --ecl-muted: rgba(255, 255, 255, .68);
  --ecl-yellow: #f5c400;
  --ecl-blue: #5865f2;
  --ecl-green: #35c46b;
  --ecl-red: #ed4245;
  --ecl-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ecl-text);
  background:
    linear-gradient(rgba(8, 13, 24, .82), rgba(8, 13, 24, .9)),
    url("/assets/img/ecl-banner.png") center top / cover fixed no-repeat,
    var(--ecl-bg);
}

a { text-decoration: none; }

.navbar-apply {
  background: rgba(3, 7, 15, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px);
}

.brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45));
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .22);
}

.page-shell { flex: 1 0 auto; padding: 6.5rem 0 3rem; }

.apply-footer { flex-shrink: 0; margin-top: auto; }

.access-denied { flex: 1 0 auto; }
.access-meme { max-width: 640px; background: #111; }
.access-meme img { display: block; width: 100%; height: auto; }
.access-meme-caption {
  padding: .75rem;
  color: #fff;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 1.5rem;
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hero-title span,
.brand-mark span { color: var(--ecl-yellow); }

.muted { color: var(--ecl-muted); }

.panel {
  background: var(--ecl-panel);
  border: 1px solid var(--ecl-border);
  border-radius: 8px;
  box-shadow: var(--ecl-shadow);
}

.panel-soft {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
}

.step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .9rem;
  align-items: start;
}

.step-icon,
.stat-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(245, 196, 0, .15);
  border: 1px solid rgba(245, 196, 0, .28);
  color: var(--ecl-yellow);
}

.btn-discord {
  background: var(--ecl-blue);
  border-color: var(--ecl-blue);
  color: #fff;
  font-weight: 700;
}

.btn-discord:hover {
  background: #4752c4;
  border-color: #4752c4;
  color: #fff;
}

.btn-ecl {
  background: var(--ecl-yellow);
  border-color: var(--ecl-yellow);
  color: #111;
  font-weight: 800;
}

.btn-ecl:hover {
  background: #ffd94f;
  border-color: #ffd94f;
  color: #111;
}

.form-control,
.form-select,
textarea.form-control {
  background: rgba(8, 13, 24, .9);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}

.form-control::placeholder,
textarea.form-control::placeholder {
  color: rgba(255, 255, 255, .45);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  background: rgba(13, 20, 36, .96);
  border-color: rgba(245, 196, 0, .6);
  box-shadow: 0 0 0 .2rem rgba(245, 196, 0, .16);
  color: #fff;
}

.form-select option {
  background: #111a2e;
  color: #fff;
}

.rule-list li { margin-bottom: .55rem; }

.status-pill {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  padding: .32rem .75rem;
  background: rgba(255, 255, 255, .08);
  font-weight: 700;
}

.message-list {
  display: grid;
  gap: .8rem;
}

.message {
  display: grid;
  gap: .35rem;
  padding: .9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .055);
}

.message-team {
  border-color: rgba(88, 101, 242, .38);
  background: rgba(88, 101, 242, .11);
}

.message-own {
  border-color: rgba(245, 196, 0, .34);
  background: rgba(245, 196, 0, .1);
}

.message-body {
  white-space: pre-wrap;
  word-break: break-word;
}

.table-darkish {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ecl-text);
  --bs-table-border-color: rgba(255, 255, 255, .12);
  --bs-table-hover-bg: rgba(255, 255, 255, .07);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (max-width: 767.98px) {
  .page-shell { padding-top: 5.5rem; }
  .hero-title { font-size: 2rem; }
}