/* ICN theme for CTFd, layered over core's compiled Bootstrap (main.scss).
   Design reference: mockup/home.html. Dark and light, switched by core's
   color_mode_switcher.js through data-bs-theme on <html>.
   The sky band (navbar, hero, page headers) is the same blue in both modes,
   so everything drawn on it stays white. */

/* Tokens ------------------------------------------------------------------ */
:root,
[data-bs-theme="dark"] {
    --icn-blue: #1090CA;
    --icn-blue-text: #4DB2E2;
    --icn-fg: 254,254,254;               /* rgb of the text colour, for alpha lines and fills */
    --icn-text: #FEFEFE;
    --icn-text-2: rgba(254,254,254,.68);
    --icn-text-3: rgba(254,254,254,.44);
    --icn-line: rgba(254,254,254,.09);
    --icn-line-2: rgba(254,254,254,.16);
    --icn-ink: #121820;
    --icn-page: #111C2C;
    --icn-page-top: #1B2B42;
    --icn-page-glow: rgba(16,144,202,.22);
    --icn-surface: linear-gradient(160deg, rgba(254,254,254,.09), rgba(254,254,254,.03)), rgba(30,44,64,.62);
    --icn-surface-solid: linear-gradient(160deg, rgba(254,254,254,.07), rgba(254,254,254,.02)), #18263A;
    --icn-surface-border: rgba(254,254,254,.13);
    --icn-surface-shadow: 0 20px 50px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(254,254,254,.09);
    --icn-menu-bg: rgba(30,44,64,.78);
    --icn-code-bg: #0F1929;
    --icn-cta-bg: rgba(254,254,254,.92);
    --icn-cta-bg-hover: #FEFEFE;
    --icn-cta-fg: #121820;
    --icn-green: #6FDCB0;
    --icn-amber: #FFC875;
    --icn-red: #FF8A8A;
    --icn-cat-crypto: #5CB8E6;
    --icn-cat-pwn: #FF9EC4;
    --icn-close-filter: invert(1) grayscale(1);
    --icn-sans: "Inter Tight", system-ui, sans-serif;
    --icn-mono: "JetBrains Mono", ui-monospace, monospace;

    --bs-body-font-family: var(--icn-sans);
    --bs-body-bg: var(--icn-page);
    --bs-body-color: var(--icn-text);
    --bs-secondary-color: var(--icn-text-2);
    --bs-tertiary-color: var(--icn-text-3);
    --bs-emphasis-color: var(--icn-text);
    --bs-heading-color: var(--icn-text);
    --bs-primary: var(--icn-blue);
    --bs-primary-rgb: 16,144,202;
    --bs-link-color: var(--icn-blue-text);
    --bs-link-color-rgb: 77,178,226;
    --bs-link-hover-color: var(--icn-text);
    --bs-link-hover-color-rgb: 254,254,254;
    --bs-border-color: var(--icn-line-2);
    --bs-border-color-translucent: var(--icn-line);
    --bs-secondary-bg: #1B2B42;
    --bs-tertiary-bg: #16243A;
    --bs-code-color: var(--icn-blue-text);
    --bs-border-radius: 12px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-sm: 8px;
    --bs-focus-ring-color: rgba(16,144,202,.35);
}

[data-bs-theme="light"] {
    --icn-blue-text: #0B76A8;
    --icn-fg: 18,24,32;
    --icn-text: #121820;
    --icn-text-2: rgba(18,24,32,.68);
    --icn-text-3: rgba(18,24,32,.50);
    --icn-line: rgba(18,24,32,.09);
    --icn-line-2: rgba(18,24,32,.16);
    --icn-page: #F3F6F9;
    --icn-page-top: #E9F1F7;
    --icn-page-glow: rgba(16,144,202,.10);
    --icn-surface: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,255,255,.82)), rgba(255,255,255,.7);
    --icn-surface-solid: #FFFFFF;
    --icn-surface-border: rgba(18,24,32,.08);
    --icn-surface-shadow: 0 18px 40px -28px rgba(15,40,70,.35), inset 0 1px 0 rgba(255,255,255,.9);
    --icn-menu-bg: rgba(255,255,255,.82);
    --icn-code-bg: #EEF3F7;
    --icn-cta-bg: #121820;
    --icn-cta-bg-hover: #222B36;
    --icn-cta-fg: #FEFEFE;
    --icn-green: #13865A;
    --icn-amber: #A86A12;
    --icn-red: #C93C3C;
    --icn-cat-crypto: #0B76A8;
    --icn-cat-pwn: #C2457F;
    --icn-close-filter: none;

    --bs-body-bg: var(--icn-page);
    --bs-body-color: var(--icn-text);
    --bs-secondary-color: var(--icn-text-2);
    --bs-tertiary-color: var(--icn-text-3);
    --bs-emphasis-color: var(--icn-text);
    --bs-heading-color: var(--icn-text);
    --bs-link-color: var(--icn-blue-text);
    --bs-link-color-rgb: 11,118,168;
    --bs-link-hover-color: var(--icn-text);
    --bs-link-hover-color-rgb: 18,24,32;
    --bs-border-color: var(--icn-line-2);
    --bs-border-color-translucent: var(--icn-line);
    --bs-secondary-bg: #E8EEF3;
    --bs-tertiary-bg: #F3F6F9;
    --bs-code-color: var(--icn-blue-text);
}

/* Base -------------------------------------------------------------------- */
html { background: var(--icn-page); }
body {
    font: 400 15.5px/1.5 var(--icn-sans);
    letter-spacing: -.01em;
    color: var(--icn-text);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(90% 50% at 80% 0%, var(--icn-page-glow), transparent 60%),
        linear-gradient(180deg, var(--icn-page-top) 0%, var(--icn-page) 60%);
    background-color: var(--icn-page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; padding-top: 0 !important; margin-bottom: 0 !important; }
/* core sets Lato/Raleway on html, body, .container and the jumbotron */
html, body, .container, .jumbotron .container, h1, h2, h3, h4, h5, h6, .btn, .form-control, .nav-link { font-family: var(--icn-sans); }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.025em; }
code, kbd, pre { font-family: var(--icn-mono); }
a { text-decoration: none; }
::selection { background: rgba(16,144,202,.45); color: var(--icn-text); }

/* Pages that do not open with a sky band still clear the navbar */
main > .container:first-child { padding-top: 104px; }

/* Pills (drawn on the sky band, so fixed colours) ------------------------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px; font: 500 15.5px/1 var(--icn-sans); border: 1px solid transparent; transition: transform .14s, background-color .14s, border-color .14s; white-space: nowrap; cursor: pointer; }
.pill:hover { transform: translateY(-1px); }
.pill-dark { background: #121820; color: #FEFEFE; }
.pill-dark:hover { background: #1C2430; color: #FEFEFE; }
.pill-light { background: rgba(254,254,254,.92); color: #121820; }
.pill-light:hover { background: #FEFEFE; color: #121820; }
.pill-sm { height: 40px; padding: 0 20px; font-size: 15px; }

/* Navbar: transparent, sits on the sky band ------------------------------- */
.icn-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 1030; padding: 18px 0; background: transparent; }
.icn-nav .navbar-brand { font: 700 22px/1 var(--icn-sans); letter-spacing: -.03em; color: #FEFEFE; margin-right: 28px; }
.icn-nav .navbar-brand:hover { color: #FEFEFE; }
/* Links: a frosted pill on hover and on the current page, like Revolut's */
.icn-nav .nav-link { color: rgba(254,254,254,.86); font-weight: 500; font-size: 15.5px; padding: 8px 14px !important; border-radius: 999px; transition: color .15s, background-color .15s; }
.icn-nav .nav-link:hover, .icn-nav .nav-link:focus-visible, .icn-nav .show > .nav-link { color: #FEFEFE; background: rgba(254,254,254,.16); }
.icn-nav .nav-link[aria-current="page"] { color: #FEFEFE; background: rgba(254,254,254,.20); }
.icn-nav .navbar-nav { gap: 8px; }
.icn-nav .theme-switch { border: 0; }
/* Nav icons (theme setting nav_icons) */
.icn-nav .nav-icon { font-size: 14px; width: 1.1em; text-align: center; }
.icn-nav .nav-style-icon_text .nav-icon { margin-right: 7px; }
@media (min-width: 992px) {
    /* icon mode: the label stays for screen readers and the collapsed menu */
    .icn-nav .nav-style-icon .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .icn-nav .nav-style-icon .nav-link:has(.nav-label) { padding-left: 11px !important; padding-right: 11px !important; }
}
@media (max-width: 991.98px) {
    .icn-nav .nav-style-icon .nav-label { margin-left: 8px; }
}
.icn-nav .nav-pill { margin-left: 8px; }
.icn-nav .badge-notification { background: #FEFEFE; color: #121820; font-size: 11px; margin-left: 4px; vertical-align: 1px; }
.icn-nav .navbar-toggler { border: 1px solid rgba(254,254,254,.4); border-radius: 10px; padding: 6px 10px; }
.icn-nav .navbar-toggler:focus { box-shadow: none; }
.icn-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28254,254,254,.95%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
@media (max-width: 991.98px) {
    /* The collapsed menu is a themed panel, so its links follow the theme */
    .icn-nav .navbar-collapse { margin-top: 14px; padding: 10px; background: var(--icn-menu-bg); border: 1px solid var(--icn-surface-border); border-radius: 18px; backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
    .icn-nav .navbar-collapse .nav-link { color: var(--icn-text-2); }
    .icn-nav .navbar-collapse .nav-link:hover, .icn-nav .navbar-collapse .nav-link[aria-current="page"] { color: var(--icn-text); background: rgba(var(--icn-fg),.07); }
    .icn-nav .navbar-nav + .navbar-nav { border-top: 1px solid var(--icn-line); margin-top: 6px; padding-top: 6px; }
    .icn-nav .nav-pill { margin: 8px 14px 6px; }
}

/* Dropdowns: frosted panel */
.dropdown-menu {
    --bs-dropdown-bg: var(--icn-menu-bg);
    --bs-dropdown-border-color: var(--icn-surface-border);
    --bs-dropdown-link-hover-bg: rgba(var(--icn-fg),.08);
    --bs-dropdown-link-active-bg: rgba(var(--icn-fg),.14);
    --bs-dropdown-link-active-color: var(--icn-text);
    --bs-dropdown-link-color: var(--icn-text-2);
    --bs-dropdown-link-hover-color: var(--icn-text);
    border-radius: 22px; padding: 10px; min-width: 200px; margin-top: 10px !important;
    backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.5), inset 0 1px 0 rgba(254,254,254,.08);
}
.dropdown-item { border-radius: 12px; padding: 8px 14px; font-weight: 500; cursor: pointer; }

/* Sky band: home hero and every page header -------------------------------- */
.sky, .jumbotron {
    position: relative;
    overflow: hidden;
    color: #FEFEFE;
    background:
        radial-gradient(38% 26% at 18% 28%, rgba(255,255,255,.30), transparent 70%),
        radial-gradient(30% 20% at 70% 12%, rgba(255,255,255,.22), transparent 70%),
        radial-gradient(45% 28% at 88% 62%, rgba(255,255,255,.16), transparent 70%),
        radial-gradient(50% 30% at 35% 85%, rgba(255,255,255,.14), transparent 70%),
        linear-gradient(180deg, #3FA2D8 0%, #1090CA 52%, #0B76A8 100%) !important;
}
.jumbotron { padding: 132px 0 48px !important; margin-bottom: 40px; text-align: left; }
.jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4 { color: #FEFEFE; }
.jumbotron h1 { margin: 0; font-weight: 500; font-size: clamp(40px, 5.6vw, 68px); line-height: 1; letter-spacing: -.045em; }
.jumbotron .text-muted { color: rgba(254,254,254,.8) !important; }
.jumbotron a:not(.btn) { color: #FEFEFE; }
.jumbotron + .container { padding-top: 0; }

.sky-home { padding-top: 84px; }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: end; padding: 48px 0 72px; }
.hero h1 { margin: 0; color: #FEFEFE; font-weight: 500; font-size: clamp(48px, 7.6vw, 96px); line-height: .98; letter-spacing: -.045em; }
.hero p { margin: 26px 0 32px; max-width: 36ch; font-size: 18px; font-weight: 500; line-height: 1.45; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.frame { position: relative; height: 440px; border: 1.5px solid rgba(254,254,254,.6); border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 20px 120px; }
.frame .lbl { font-size: 18px; font-weight: 500; }
.frame .big { margin: 6px 0 14px; font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.frame .when { margin: -4px 0 16px; font-size: 14.5px; font-weight: 500; color: rgba(254,254,254,.85); }
.frame .bar { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; background: rgba(254,254,254,.9); color: #121820; border-radius: 20px; padding: 16px 8px; }
.frame .bar div + div { border-left: 1px solid rgba(18,24,32,.14); }
.frame .bar b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.frame .bar span { font-size: 13px; color: rgba(18,24,32,.6); font-weight: 500; }

/* Panels ------------------------------------------------------------------- */
.panel, .modal-content, .card {
    background: var(--icn-surface) !important;
    border: 1px solid var(--icn-surface-border) !important;
    border-radius: 22px !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--icn-surface-shadow);
    color: var(--icn-text);
}

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 56px 0 16px; }
.section-head h2, .section-head h3 { margin: 0; font-weight: 600; font-size: 26px; letter-spacing: -.03em; }
.section-head .sub { color: var(--icn-text-2); font-size: 14.5px; }
.section-head .sub a { color: var(--icn-blue-text); font-weight: 500; }
.section-head .sub a:hover { color: var(--icn-text); }
.empty { padding: 22px 20px; color: var(--icn-text-2); font-size: 14.5px; }

/* List rows (home categories) */
.list { padding: 6px; }
.list .row { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin: 0; padding: 16px 18px; border-radius: 16px; color: var(--icn-text); transition: background-color .12s; position: relative; }
.list .row > * { width: auto; max-width: none; padding: 0; margin: 0; }
.list .row > .r-ic { width: 46px; }
.list .row:hover { background: rgba(var(--icn-fg),.04); color: var(--icn-text); }
.list .row + .row::before { content: ""; position: absolute; left: 80px; right: 18px; top: 0; height: 1px; background: var(--icn-line); }
.list .row:hover::before, .list .row:hover + .row::before { background: transparent; }
.r-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--icn-fg),.07); }
.r-ic svg { width: 20px; height: 20px; }
.c-crypto { color: var(--icn-cat-crypto); } .c-web { color: var(--icn-green); } .c-foren { color: var(--icn-amber); } .c-pwn { color: var(--icn-cat-pwn); } .c-other { color: var(--icn-text-2); }
.r-main { flex: 1 !important; min-width: 0; text-align: left; }
.r-name { display: block; font-weight: 600; font-size: 16.5px; letter-spacing: -.015em; }
.r-sub { color: var(--icn-text-2); font-size: 14px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-right { display: flex; align-items: center; gap: 20px; flex: none; }
.r-count { text-align: right; }
.r-count .n { font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
.r-count .n small { color: var(--icn-text-3); font-weight: 500; font-size: 13px; margin-left: 4px; }
.r-count .p { color: var(--icn-text-3); font-size: 13px; }
.chev { width: 18px; height: 18px; color: var(--icn-text-3); }

.duo { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.duo > :only-child { grid-column: 1 / -1; }

/* "Sebelum mulai": the admin's index page content */
.rules { padding: 8px 24px; color: var(--icn-text-2); font-size: 14.5px; }
.rules > :first-child { margin-top: 12px; }
.rules h3, .rules h4, .rules strong { color: var(--icn-text); }
.rules h3, .rules h4 { font-size: 16px; font-weight: 600; margin: 16px 0 3px; }
.rules ul, .rules ol { padding-left: 20px; margin: 12px 0; }
.rules li { padding: 6px 0; }
.rules li + li { border-top: 1px solid var(--icn-line); }
.rules code, .page-content code { color: var(--icn-text); background: rgba(16,144,202,.14); border: 1px solid rgba(16,144,202,.36); padding: 1px 7px; border-radius: 6px; font-size: .88em; white-space: nowrap; }

.top { padding: 8px 8px 12px; }
.rank { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; color: var(--icn-text); }
.rank:hover { background: rgba(var(--icn-fg),.04); color: var(--icn-text); }
.rank.me { background: rgba(16,144,202,.14); }
.rank .pos { color: var(--icn-text-3); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.rank .who { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .pts { font-weight: 600; font-variant-numeric: tabular-nums; }
.rank .pts small { color: var(--icn-text-3); font-weight: 500; font-size: 12px; margin-left: 3px; }
.top .all { display: block; padding: 10px 16px 2px; color: var(--icn-blue-text); font-size: 14px; font-weight: 500; }

.home { padding-bottom: 24px; }

/* Challenge board ----------------------------------------------------------- */
.category-block + .category-block .section-head { margin-top: 40px; }
.category-block:first-child .section-head { margin-top: 8px; }
/* Cards, same grid as core (col-sm-6 col-md-4 col-lg-3). The attribute
   prefix outranks core's [data-bs-theme="light|dark"] .challenge-button. */
[data-bs-theme] .challenge-card,
[data-bs-theme] .challenge-card.challenge-solved {
    position: relative;
    display: flex; align-items: flex-end;
    min-height: 132px; padding: 18px 20px; text-align: left;
    color: var(--icn-text); font: inherit; cursor: pointer;
    background: var(--icn-surface);
    border: 1px solid var(--icn-surface-border);
    border-radius: 18px;
    box-shadow: var(--icn-surface-shadow);
    transition: transform .14s, border-color .14s;
}
[data-bs-theme] .challenge-card:hover { transform: translateY(-2px); border-color: rgba(var(--icn-fg),.24); background: var(--icn-surface); }
.challenge-card:focus-visible { outline: 2px solid var(--icn-blue); outline-offset: 2px; }
[data-bs-theme] .challenge-card.challenge-solved { border-color: rgba(16,144,202,.55); background: linear-gradient(160deg, rgba(16,144,202,.18), rgba(16,144,202,.05)), var(--icn-surface); }
[data-bs-theme] .challenge-card.challenge-solved:hover { border-color: var(--icn-blue); background: linear-gradient(160deg, rgba(16,144,202,.18), rgba(16,144,202,.05)), var(--icn-surface); }
.challenge-card .challenge-inner { width: 100%; margin: 0 !important; }
.challenge-card .challenge-inner p { margin: 0 32px 6px 0; font-weight: 600; font-size: 16.5px; line-height: 1.3; letter-spacing: -.015em; }
.challenge-card .ch-value { font-weight: 600; font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.challenge-card .ch-solves { margin-left: 8px; color: var(--icn-text-3); font-size: 13px; }
.challenge-card .ch-mark { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--icn-line-2); display: grid; place-items: center; color: transparent; }
.challenge-card .ch-mark svg { width: 12px; height: 12px; }
.challenge-card.challenge-solved .ch-mark { border-color: var(--icn-blue); background: var(--icn-blue); color: #FEFEFE; }

/* Challenge modal */
.modal-backdrop.show { opacity: .6; background: #04080E; }
.modal .modal-content { background: var(--icn-surface-solid) !important; }
.modal .btn-close { filter: var(--icn-close-filter); opacity: .6; }
.nav-tabs { --bs-nav-tabs-border-color: var(--icn-line); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-color: var(--icn-text); --bs-nav-tabs-link-active-border-color: transparent; --bs-nav-link-color: var(--icn-text-2); --bs-nav-link-hover-color: var(--icn-text); --bs-nav-tabs-link-hover-border-color: transparent; gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; font-weight: 500; padding: 8px 4px; margin-right: 14px; }
.nav-tabs .nav-link.active { border-bottom-color: var(--icn-blue); }
.challenge-name { font-weight: 600; font-size: 30px; letter-spacing: -.03em; text-align: left !important; padding-top: 22px !important; margin-bottom: 2px; }
.challenge-value { font-weight: 500; font-size: 17px; color: var(--icn-blue-text); text-align: left !important; letter-spacing: 0; margin-bottom: 6px; }
.challenge-value::after { content: " poin"; color: var(--icn-text-3); }
.challenge-tags { text-align: left !important; }
.challenge-tag { background: rgba(16,144,202,.14) !important; border: 1px solid rgba(16,144,202,.36); color: var(--icn-blue-text); font-weight: 500; border-radius: 999px; }
.challenge-attribution { display: block; text-align: left !important; color: var(--icn-text-3) !important; }
.challenge-desc { display: block; margin: 18px 0; color: var(--icn-text-2); font-size: 15.5px; }
.challenge-desc pre { background: var(--icn-code-bg); border: 1px solid var(--icn-line); border-radius: 12px; padding: 14px 16px; color: var(--icn-text); overflow-x: auto; max-width: 100%; }
.challenge-desc code { color: var(--icn-text); }
.challenge-desc pre code { color: inherit; }
.challenge-connection-info code { display: inline-block; padding: 8px 12px; background: var(--icn-code-bg); border: 1px solid var(--icn-line); border-radius: 10px; color: var(--icn-text); }
.challenge-hints details { border: 1px solid var(--icn-line); border-radius: 14px; padding: 0; margin-bottom: 8px; background: rgba(var(--icn-fg),.03); }
.challenge-hints summary { padding: 11px 16px; font-weight: 500; color: var(--icn-text); cursor: pointer; }
.challenge-hints details > div { padding: 0 16px 12px; color: var(--icn-text-2); }
.challenge-files { text-align: left !important; }
.submit-row { --bs-gutter-x: 10px; margin-top: 8px; }
.challenge-input { height: 50px; border-radius: 999px !important; padding: 0 22px; font-family: var(--icn-mono); font-size: 15px; }
.challenge-submit { height: 50px !important; border-radius: 999px !important; background: var(--icn-cta-bg) !important; color: var(--icn-cta-fg) !important; border: 0 !important; font-weight: 500; }
.challenge-submit:hover { background: var(--icn-cta-bg-hover) !important; }

/* Forms -------------------------------------------------------------------- */
.form-control, .form-select, .custom-select {
    background-color: rgba(var(--icn-fg),.05);
    border: 1px solid var(--icn-line-2);
    color: var(--icn-text);
    border-radius: 12px;
    min-height: 46px;
}
[data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select { background-color: #FFFFFF; }
textarea.form-control { min-height: 96px; }
.form-control::placeholder { color: var(--icn-text-3); }
.form-control:focus, .form-select:focus { background-color: rgba(var(--icn-fg),.08); border-color: var(--icn-blue); color: var(--icn-text); box-shadow: 0 0 0 3px rgba(16,144,202,.25); }
[data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus { background-color: #FFFFFF; }
.form-label, label { color: var(--icn-text-2); font-weight: 500; }
.form-text, .text-muted { color: var(--icn-text-3) !important; }
.form-check-input { background-color: rgba(var(--icn-fg),.06); border-color: var(--icn-line-2); }
.form-check-input:checked { background-color: var(--icn-blue); border-color: var(--icn-blue); }

/* Buttons: Bootstrap classes used by core templates mapped to pills */
.btn { border-radius: 999px; font-weight: 500; padding: 10px 22px; transition: transform .14s, background-color .14s, border-color .14s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn-success { background: var(--icn-cta-bg); border-color: transparent; color: var(--icn-cta-fg); }
.btn-primary:hover, .btn-primary:focus, .btn-success:hover { background: var(--icn-cta-bg-hover); border-color: transparent; color: var(--icn-cta-fg); }
.btn-secondary, .btn-dark, .btn-info { background: rgba(var(--icn-fg),.07); border: 1px solid var(--icn-line-2); color: var(--icn-text); }
.btn-secondary:hover, .btn-dark:hover, .btn-info:hover { background: rgba(var(--icn-fg),.11); border-color: rgba(var(--icn-fg),.26); color: var(--icn-text); }
.btn-outline-secondary, .btn-outline-info, .btn-outline-primary { border-color: var(--icn-line-2); color: var(--icn-text); }
.btn-outline-secondary:hover, .btn-outline-info:hover, .btn-outline-primary:hover { background: rgba(var(--icn-fg),.08); border-color: rgba(var(--icn-fg),.26); color: var(--icn-text); }
.btn-danger { background: rgba(255,138,138,.14); border: 1px solid rgba(255,138,138,.4); color: var(--icn-red); }
.btn-link { color: var(--icn-blue-text); }
.btn-file { border-radius: 12px; }

/* Alerts */
.alert { border-radius: 14px; border: 1px solid; }
.alert-success { background: rgba(111,220,176,.14); border-color: rgba(111,220,176,.4); color: var(--icn-green); }
.alert-info { background: rgba(16,144,202,.12); border-color: rgba(16,144,202,.4); color: var(--icn-blue-text); }
.alert-danger { background: rgba(255,138,138,.14); border-color: rgba(255,138,138,.4); color: var(--icn-red); }
.alert-warning { background: rgba(255,200,117,.16); border-color: rgba(255,200,117,.45); color: var(--icn-amber); }

/* Tables (scoreboard, users, teams, submissions) */
.table { --bs-table-bg: transparent; --bs-table-color: var(--icn-text); --bs-table-border-color: var(--icn-line); --bs-table-striped-bg: rgba(var(--icn-fg),.025); --bs-table-striped-color: var(--icn-text); --bs-table-hover-bg: rgba(var(--icn-fg),.04); --bs-table-hover-color: var(--icn-text); }
.table > thead th { color: var(--icn-text-3); font-weight: 500; font-size: 13.5px; border-bottom-color: var(--icn-line-2); }
.table td, .table th { padding-top: 12px; padding-bottom: 12px; }
.table a { color: var(--icn-text); font-weight: 500; }
.table a:hover { color: var(--icn-blue-text); }

/* Pills nav (brackets), pagination, badges */
.nav-pills { --bs-nav-pills-border-radius: 999px; --bs-nav-pills-link-active-bg: var(--icn-cta-bg); --bs-nav-pills-link-active-color: var(--icn-cta-fg); --bs-nav-link-color: var(--icn-text-2); --bs-nav-link-hover-color: var(--icn-text); gap: 6px; }
.pagination { --bs-pagination-bg: transparent; --bs-pagination-border-color: var(--icn-line-2); --bs-pagination-color: var(--icn-text-2); --bs-pagination-hover-bg: rgba(var(--icn-fg),.06); --bs-pagination-hover-color: var(--icn-text); --bs-pagination-hover-border-color: var(--icn-line-2); --bs-pagination-active-bg: var(--icn-blue); --bs-pagination-active-border-color: var(--icn-blue); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: var(--icn-line); --bs-pagination-disabled-color: var(--icn-text-3); }
.badge.bg-info, .badge.bg-primary { background: rgba(16,144,202,.16) !important; color: var(--icn-blue-text); border: 1px solid rgba(16,144,202,.38); }
.badge.bg-secondary { background: rgba(var(--icn-fg),.08) !important; color: var(--icn-text-2); }
hr { border-color: var(--icn-line-2); opacity: 1; }

/* Footer */
.footer { position: static !important; height: auto !important; line-height: 1.5 !important; margin-top: 64px; border-top: 1px solid var(--icn-line); padding: 24px 0 36px; color: var(--icn-text-3); font-size: 13px; }
.footer .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; text-align: left; }
.footer a { color: var(--icn-text-3); }
.footer a:hover { color: var(--icn-text-2); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hero { grid-template-columns: 1fr; gap: 36px; }
    .frame { height: 380px; max-width: 460px; width: 100%; justify-self: center; }
    .duo { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .hero { padding: 28px 0 40px; }
    .frame .big { font-size: 52px; }
    .jumbotron { padding: 112px 0 36px !important; }
    .list .row { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; }
    .list .row .r-ic { grid-row: span 2; align-self: start; }
    .list .row .r-sub { white-space: normal; }
    .list .row .r-right { grid-column: 2; justify-content: space-between; width: 100%; }
    .list .row .r-count { text-align: left; display: flex; align-items: baseline; gap: 8px; }
    .list .row + .row::before { left: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }