/* ACSEC XI shared visual system — 2026 */
:root {
  --bg: #2A0B10 !important;
  --bg-2: #3A1117 !important;
  --bg-3: #25090E !important;
  --bg-dark: #170609 !important;
  --ink: #F8EFE7 !important;
  --muted: #D5BFC0 !important;
  --brand: #E8C77A !important;
  --brand-2: #F5DFA3 !important;
  --ink-dark: #241006 !important;
  --shadow: 0 16px 38px rgba(0, 0, 0, .42) !important;
  --radius: 18px !important;
}

html { background: var(--bg-dark); }
body {
  background:
    radial-gradient(circle at 86% 12%, rgba(232, 199, 122, .08), transparent 30rem),
    radial-gradient(circle at 10% 72%, rgba(118, 28, 43, .24), transparent 34rem),
    linear-gradient(180deg, var(--bg) 0%, #26090e 58%, var(--bg-dark) 100%) !important;
  color: var(--ink) !important;
  min-height: 100vh;
}

::selection { background: var(--brand); color: var(--ink-dark); }

.nav {
  background: rgba(48, 13, 19, .88) !important;
  border-color: rgba(232, 199, 122, .22) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .44) !important;
}
.nav .brand span, .nav a { color: var(--ink) !important; }
.nav a:hover, .nav a:focus-visible { color: var(--brand-2) !important; }
.submenu, .nav ul.show {
  background: rgba(48, 13, 19, .98) !important;
  border-color: rgba(232, 199, 122, .2) !important;
}
.submenu .menu-btn, .submenu-mobile a {
  border-color: var(--brand) !important;
  color: var(--brand-2) !important;
}

.card, .about-card, .cat, .unit, .highlight-card, .container,
.page-about .ec-card, .page-coming-soon .cs-wrap {
  background: linear-gradient(145deg, rgba(66, 18, 27, .96), rgba(35, 8, 13, .96)) !important;
  border-color: rgba(232, 199, 122, .15) !important;
  box-shadow: var(--shadow) !important;
}

.cat {
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cat::after {
  content: "";
  position: absolute;
  inset: auto -35% -65% 35%;
  height: 190px;
  background: radial-gradient(circle, rgba(232, 199, 122, .13), transparent 68%);
  pointer-events: none;
}
.cat:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 199, 122, .42) !important;
  box-shadow: 0 20px 42px rgba(0, 0, 0, .5) !important;
}

.btn, .cta, .button, .btn-outline, .study {
  border-color: var(--brand) !important;
}
.cta, .button {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: var(--ink-dark) !important;
  box-shadow: 0 10px 24px rgba(232, 199, 122, .16) !important;
}
.btn-outline, .btn, .study { color: var(--brand-2) !important; }
.btn:hover, .btn-outline:hover, .study:hover {
  background: rgba(232, 199, 122, .1) !important;
  color: var(--brand-2) !important;
}

.registration-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: not-allowed;
  opacity: 1;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.btn.registration-disabled {
  color: var(--brand-2) !important;
}

.cta.registration-disabled,
.btn.cta.registration-disabled,
.nav .cta.registration-disabled {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: var(--ink-dark) !important;
  font-weight: 800;
  opacity: 1 !important;
  box-shadow: 0 10px 24px rgba(232, 199, 122, .22) !important;
}
.nav .registration-disabled { padding: 9px 15px; line-height: 1; }
.registration-note, .event-line {
  color: var(--brand-2) !important;
  font-weight: 700;
  letter-spacing: .02em;
}
.registration-note {
  margin: 14px 0 0 !important;
  font-size: .92rem;
}
.event-line {
  margin: 16px 0 0;
  font-size: clamp(.9rem, 1.8vw, 1rem);
}
.event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
}
.event-facts span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(232, 199, 122, .28);
  border-radius: 999px;
  background: rgba(23, 6, 9, .5);
  color: var(--brand-2);
  font-size: .9rem;
  font-weight: 700;
}

.page-about .ec { padding-top: 42px; }
.page-about .ec-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 24px !important;
  max-width: 1240px !important;
  align-items: stretch;
}
.page-about .ec-card {
  width: 100%;
  max-width: 250px;
  padding: 14px 14px 19px;
  border: 1px solid rgba(232, 199, 122, .15);
  border-radius: 18px;
  justify-self: center;
}
.page-about .ec-card.leadership {
  border-color: rgba(232, 199, 122, .34) !important;
}
.page-about .ec-photo {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  border-radius: 14px !important;
  border-color: rgba(232, 199, 122, .22) !important;
  background: var(--bg-dark) !important;
}
.page-about .ec-photo img { object-fit: cover; width: 100%; height: 100%; }
.page-about .ec-name { color: var(--ink); font-size: 1.08rem !important; }
.page-about .ec-role { color: var(--brand-2) !important; }

footer {
  background: var(--bg-dark) !important;
  border-top-color: rgba(232, 199, 122, .12) !important;
  color: var(--muted) !important;
}
footer a, footer small, footer .address { color: var(--muted) !important; }
footer a:hover { color: var(--brand-2) !important; }

.site-loader, #preloader { background: rgba(23, 6, 9, .94) !important; }
.help-main { background: #351017 !important; border: 1px solid rgba(232, 199, 122, .24) !important; }
.help-icon { background: #351017 !important; color: var(--brand-2) !important; }

.page-mopa .puzzle { background: rgba(58, 17, 23, .95) !important; color: var(--ink) !important; }
.page-mopa .input-container input {
  border-color: rgba(232, 199, 122, .35) !important;
  background: var(--bg-dark) !important;
}
.page-mopa .back-button { background: var(--brand) !important; color: var(--ink-dark) !important; }

:focus-visible {
  outline: 3px solid var(--brand-2) !important;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .nav .registration-disabled { width: 100%; min-height: 46px; }
  .event-facts { justify-content: center; }
  .page-about .ec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .page-about .ec-card { padding: 9px 9px 15px; }
}
@media (max-width: 440px) {
  .page-about .ec-grid { grid-template-columns: 1fr !important; }
}