/* ============================================================================
   Merdeka CTF — premium theme (Merdeka Siber). Dark cyber + BRAND RED.
   Injected over CTFd core-beta (Bootstrap 5) via nginx sub_filter.
   Accent = Merdeka Siber red. Legible red text uses a brighter tone on dark.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
  /* Surfaces */
  --bs-body-bg: #0a0d13;
  --bs-body-bg-rgb: 10, 13, 19;
  --bs-secondary-bg: #12151d;
  --bs-secondary-bg-rgb: 18, 21, 29;
  --bs-tertiary-bg: #171b25;
  --bs-tertiary-bg-rgb: 23, 27, 37;
  --bs-dark: #0d1017;
  --bs-dark-rgb: 13, 16, 23;
  --theme-color: #12060a; /* CTFd page-header band -> deep on-brand */

  /* Text */
  --bs-body-color: #c6cdd8;
  --bs-body-color-rgb: 198, 205, 216;
  --bs-emphasis-color: #eef2f8;
  --bs-emphasis-color-rgb: 238, 242, 248;
  --bs-heading-color: #f2f5fa;
  --bs-secondary-color: rgba(198, 205, 216, 0.64);
  --bs-tertiary-color: rgba(198, 205, 216, 0.4);

  /* Borders / radius */
  --bs-border-color: #272b36;
  --bs-border-color-translucent: rgba(225, 29, 43, 0.1);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;

  /* Accent = Merdeka Siber red */
  --bs-primary: #e11d2b;
  --bs-primary-rgb: 225, 29, 43;
  --bs-primary-text-emphasis: #ff8593;
  --bs-primary-bg-subtle: rgba(225, 29, 43, 0.12);
  --bs-primary-border-subtle: rgba(225, 29, 43, 0.34);
  --bs-link-color: #ff5c6e;
  --bs-link-color-rgb: 255, 92, 110;
  --bs-link-hover-color: #ff8593;
  --bs-code-color: #ff7a89;

  /* Semantic */
  --bs-success: #2ee68a; --bs-success-rgb: 46, 230, 138;
  --bs-info: #37b6ff;    --bs-info-rgb: 55, 182, 255;
  --bs-warning: #ffb020; --bs-warning-rgb: 255, 176, 32;
  --bs-danger: #ff3e5f;  --bs-danger-rgb: 255, 62, 95;

  /* Fonts */
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-font-monospace: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;

  /* Local tokens */
  --ms-red: #e11d2b;         /* solid fills / active */
  --ms-red-bright: #ff2d4f;  /* hover / focus / glow */
  --ms-red-text: #ff5c6e;    /* legible red text on dark */
  --pui-border: #272b36;
  --pui-glow: 0 0 0 1px rgba(225, 29, 43, 0.4), 0 8px 30px -8px rgba(225, 29, 43, 0.32);

  color-scheme: dark;
}

/* ---------------------------------------------------------------- base ---- */
html { color-scheme: dark; }
body {
  background-color: #0a0d13 !important;
  color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  min-height: 100vh;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 720px at 82% -8%, rgba(225, 29, 43, 0.14), transparent 60%),
    radial-gradient(820px 560px at 6% 2%, rgba(225, 29, 43, 0.07), transparent 55%),
    linear-gradient(180deg, #0c0e16 0%, #0a0d13 42%, #07090e 100%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(225, 29, 43, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(225, 29, 43, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 28%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 28%, transparent 78%);
}

::selection { background: rgba(225, 29, 43, 0.34); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0a0d13; }
::-webkit-scrollbar-thumb { background: #2a303d; border-radius: 8px; border: 2px solid #0a0d13; }
::-webkit-scrollbar-thumb:hover { background: #3a4150; }

/* --------------------------------------------------------- typography ---- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
  color: var(--bs-heading-color); font-weight: 700; letter-spacing: -0.015em;
}
h1, .h1 { letter-spacing: -0.025em; }
code, kbd, pre, samp, .font-monospace { font-family: var(--bs-font-monospace); }
a { text-decoration: none; transition: color 0.14s ease; }
a:hover { color: var(--bs-link-hover-color); }
hr { border-color: var(--pui-border); opacity: 1; }
.text-muted, small.text-muted { color: var(--bs-secondary-color) !important; }
.text-uppercase, thead th, .table thead th {
  font-family: var(--bs-font-monospace); letter-spacing: 0.08em;
}

/* -------------------------------------------------------------- navbar ---- */
.navbar {
  background: rgba(9, 11, 17, 0.82) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--pui-border);
  box-shadow: 0 1px 0 rgba(225, 29, 43, 0.08), 0 12px 30px -20px rgba(0, 0, 0, 0.9);
  padding-top: 0.55rem; padding-bottom: 0.55rem;
}
.navbar-brand {
  font-family: var(--bs-font-monospace); font-weight: 700; letter-spacing: 0.02em;
  color: #f2f5fa !important;
}
.navbar .ctf_logo, .navbar-brand img { filter: drop-shadow(0 0 10px rgba(225, 29, 43, 0.5)); }
.navbar .navbar-nav .nav-link {
  color: rgba(230, 234, 242, 0.7) !important;
  font-size: 0.9rem; font-weight: 600; padding: 0.5rem 0.9rem;
  border-radius: 7px; position: relative;
  transition: color 0.14s ease, background 0.14s ease;
}
.navbar .navbar-nav .nav-link:hover { color: #fff !important; background: rgba(225, 29, 43, 0.09); }
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-item.active > .nav-link {
  color: var(--ms-red-text) !important; background: rgba(225, 29, 43, 0.12);
}
.navbar-toggler { border-color: var(--pui-border); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(225, 29, 43, 0.3); }

/* -------------------------------------------------------------- buttons ---- */
.btn {
  --bs-btn-border-radius: 0.375rem;
  font-weight: 600; letter-spacing: 0.01em;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  --bs-btn-bg: #e11d2b; --bs-btn-border-color: #e11d2b; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #ff2d4f; --bs-btn-hover-border-color: #ff2d4f; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #c41321; --bs-btn-active-border-color: #c41321; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #4d1219; --bs-btn-disabled-border-color: #4d1219; --bs-btn-disabled-color: rgba(255,255,255,.55);
  font-weight: 700; box-shadow: 0 6px 22px -8px rgba(225, 29, 43, 0.7);
}
.btn-primary:hover { box-shadow: 0 10px 32px -6px rgba(255, 45, 79, 0.75); transform: translateY(-1px); }
.btn-danger { --bs-btn-bg: #ff3e5f; --bs-btn-border-color:#ff3e5f; --bs-btn-color:#fff; }
.btn-success { --bs-btn-bg: #2ee68a; --bs-btn-border-color:#2ee68a; --bs-btn-color:#04140b; }
.btn-outline-primary {
  --bs-btn-color: #ff5c6e; --bs-btn-border-color: rgba(225, 29, 43, 0.55);
  --bs-btn-hover-bg: rgba(225, 29, 43, 0.14); --bs-btn-hover-border-color: #ff2d4f; --bs-btn-hover-color: #ff8593;
  --bs-btn-active-bg: rgba(225,29,43,.2); --bs-btn-active-color: #ff8593;
}
.btn-secondary, .btn-outline-secondary {
  --bs-btn-bg: #1b1f2a; --bs-btn-border-color: #2c313d; --bs-btn-color: #d6dbe6;
  --bs-btn-hover-bg: #232836; --bs-btn-hover-border-color: #3a4150; --bs-btn-hover-color: #fff;
}
.btn-link { --bs-btn-color: #ff5c6e; --bs-btn-hover-color: #ff8593; text-decoration: none; }

/* --------------------------------------------------------------- cards ---- */
.card, .modal-content, .list-group {
  background: linear-gradient(180deg, rgba(24, 28, 39, 0.9), rgba(18, 21, 29, 0.9));
  border: 1px solid var(--pui-border); border-radius: var(--bs-border-radius-lg);
  color: var(--bs-body-color);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 22px 40px -24px rgba(0, 0, 0, 0.8);
}
.card { transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease; }
.card:hover { border-color: rgba(225, 29, 43, 0.42); box-shadow: var(--pui-glow), 0 26px 50px -24px rgba(0, 0, 0, 0.9); }
.card-header, .card-footer { background: rgba(10, 13, 19, 0.5); border-color: var(--pui-border); }
.card-title { color: var(--bs-heading-color); }

/* --------------------------------------------------------------- forms ---- */
.form-control, .form-select, .input-group-text {
  background-color: #0e1219; border: 1px solid var(--pui-border); color: #eef2f8;
  border-radius: 0.5rem; padding: 0.6rem 0.8rem;
}
.form-control::placeholder { color: rgba(198, 205, 216, 0.4); }
.form-control:focus, .form-select:focus {
  background-color: #0e1219; border-color: rgba(255, 45, 79, 0.7); color: #fff;
  box-shadow: 0 0 0 3px rgba(225, 29, 43, 0.2);
}
.form-label, label { color: #bcc5d3; font-weight: 600; font-size: 0.86rem; }
.form-check-input:checked { background-color: var(--ms-red); border-color: var(--ms-red); }
.form-check-input:focus { border-color: rgba(255,45,79,.6); box-shadow: 0 0 0 3px rgba(225,29,43,.2); }
.form-control:-webkit-autofill { -webkit-text-fill-color: #eef2f8; -webkit-box-shadow: 0 0 0 40px #0e1219 inset; }

/* ------------------------------------------------------- tables/board ---- */
.table {
  --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--pui-border);
  --bs-table-hover-bg: rgba(225, 29, 43, 0.07); --bs-table-hover-color: #fff;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
}
.table thead th {
  color: var(--bs-secondary-color); text-transform: uppercase; font-size: 0.72rem; font-weight: 700;
  border-bottom: 1px solid var(--pui-border) !important; background: transparent;
}
.table td, .table th { border-color: rgba(255, 255, 255, 0.05); vertical-align: middle; }
.table td { font-variant-numeric: tabular-nums; }
.table tbody tr:first-child td { color: #fff; }
.table tbody tr:first-child td:first-child { color: var(--ms-red-text); font-weight: 700; }

/* --------------------------------------------------------- challenges ---- */
.challenge-button, button.challenge-button, .challenge-button.btn {
  background: linear-gradient(180deg, rgba(25, 29, 41, 0.95), rgba(17, 20, 28, 0.95)) !important;
  border: 1px solid var(--pui-border) !important; border-radius: 0.75rem !important; color: #eef2f8 !important;
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.9) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease !important;
  position: relative; overflow: hidden;
}
.challenge-button:hover, button.challenge-button:hover {
  transform: translateY(-4px) !important; border-color: rgba(225, 29, 43, 0.55) !important; box-shadow: var(--pui-glow) !important;
}
.challenge-button.solved-challenge, .challenge-button.solved { border-color: rgba(46, 230, 138, 0.5) !important; }
.challenge-button .challenge-name { font-weight: 700; color: #f2f5fa; }
.challenge-button .challenge-value { font-family: var(--bs-font-monospace); color: var(--ms-red-text); }
#challenges h1, #challenges h2, #challenges h3, .category-header { font-family: var(--bs-font-monospace); letter-spacing: 0.04em; }

/* --------------------------------------------------------------- misc ---- */
.badge { font-family: var(--bs-font-monospace); font-weight: 600; letter-spacing: 0.03em; }
.badge.bg-primary, .badge.text-bg-primary { background: rgba(225, 29, 43, 0.16) !important; color: #ff8593 !important; border: 1px solid rgba(225, 29, 43, 0.34); }
.progress { background: #0e1219; border: 1px solid var(--pui-border); border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, #e11d2b, #ff5c6e); }
.alert { border-radius: 0.65rem; border: 1px solid var(--pui-border); background: rgba(18, 21, 29, 0.8); }
.alert-success { border-color: rgba(46, 230, 138, 0.4); }
.alert-danger { border-color: rgba(255, 62, 95, 0.45); }
.modal-content { border-radius: var(--bs-border-radius-xl); }
.modal-header, .modal-footer { border-color: var(--pui-border); }
.dropdown-menu { background: #10141d; border: 1px solid var(--pui-border); border-radius: 0.65rem; box-shadow: 0 24px 50px -20px rgba(0,0,0,.85); }
.dropdown-item { color: #ccd4e1; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(225, 29, 43, 0.12); color: #fff; }
.pagination .page-link { background: #10141d; border-color: var(--pui-border); color: #ccd4e1; }
.pagination .page-item.active .page-link { background: rgba(225,29,43,.18); border-color: rgba(225,29,43,.42); color: #ff8593; }
.nav-tabs { border-bottom-color: var(--pui-border); }
.nav-tabs .nav-link { color: rgba(230,234,242,.6); border: none; }
.nav-tabs .nav-link.active { color: var(--ms-red-text); background: transparent; border-bottom: 2px solid var(--ms-red); }
footer, .footer { border-top: 1px solid var(--pui-border); color: var(--bs-secondary-color); }
footer a:not(.btn), .footer a:not(.btn) { color: var(--ms-red-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 92, 110, 0.5); }

/* ------------------------------------------------- page header band ---- */
.jumbotron, .jumbotron-fluid, [class*='jumbotron'], #page-header, .page-header {
  background: linear-gradient(180deg, #180a0f 0%, #0b0d13 100%) !important;
  border-bottom: 1px solid var(--pui-border) !important; color: var(--bs-heading-color); position: relative;
}
.jumbotron h1, .jumbotron h2, [class*='jumbotron'] h1 { color: var(--bs-heading-color); }

/* Inline content links distinguishable without color (a11y). */
main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.page-link):not(.dropdown-item):not(.badge):not(.ms-cta-link),
.card-body a:not(.btn):not(.badge) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 92, 110, 0.55);
}

/* ============================================================ MS HERO ==== */
.ms-hero {
  max-width: 820px; margin: 0 auto; padding: clamp(48px, 9vw, 104px) 20px 72px; text-align: center;
}
.ms-hero-badge {
  display: inline-block; font-family: var(--bs-font-monospace); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #ff8593;
  padding: 7px 14px; border: 1px solid rgba(225, 29, 43, 0.4); border-radius: 999px;
  background: rgba(225, 29, 43, 0.08); box-shadow: 0 0 30px -8px rgba(225, 29, 43, 0.5);
  margin-bottom: 26px;
}
.ms-hero-title {
  font-size: clamp(2.3rem, 6.4vw, 4.2rem); line-height: 1.04; font-weight: 700;
  letter-spacing: -0.03em; color: #f6f8fc; margin: 0 0 20px;
}
.ms-hero-title span {
  background: linear-gradient(180deg, #ff5c6e, #e11d2b); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 0 40px rgba(225, 29, 43, 0.35);
}
.ms-hero-sub {
  font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.65; color: #aab3c1;
  max-width: 62ch; margin: 0 auto 34px;
}
.ms-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ms-hero-cta .btn { padding: 0.75rem 1.6rem; font-size: 1rem; }
.ms-hero-foot { margin-top: 34px; font-size: 0.86rem; color: var(--bs-tertiary-color); }
.ms-hero-foot a { color: #ff8593; }
.ms-stats {
  display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-top: 52px;
  padding-top: 30px; border-top: 1px solid var(--pui-border);
}
.ms-stat { text-align: center; }
.ms-stat b { display: block; font-family: var(--bs-font-monospace); font-size: 1.5rem; color: #f6f8fc; font-weight: 700; }
.ms-stat span { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bs-tertiary-color); }

/* ------------------------------------------------------- accessibility ---- */
:focus-visible { outline: 2px solid var(--ms-red-bright); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--ms-red-bright); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .card:hover, .challenge-button:hover, .btn-primary:hover { transform: none !important; }
}