/*
 * iOS glass theme for the competition system.
 * Pages are plain Tailwind (CDN) with per-page inline styles, so every rule is scoped under
 * html.ios-theme to outrank both without touching page markup.
 */

:root {
    --ios-blue: #007aff;
    --ios-green: #34c759;
    --ios-orange: #ff9500;
    --ios-red: #ff3b30;
    --ios-teal: #5ac8fa;
    --ios-indigo: #5856d6;
    --ios-purple: #af52de;
    --ios-pink: #ff2d55;
    --ios-label: #1c1c1e;
    --ios-secondary: #8e8e93;
    --ios-separator: rgba(60, 60, 67, .12);
    --ios-glass: rgba(255, 255, 255, .62);
    --ios-glass-strong: rgba(255, 255, 255, .86);
    --ios-glass-border: rgba(255, 255, 255, .6);
    --ios-glass-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 8px 28px rgba(15, 23, 42, .08);
    --ios-blur: saturate(180%) blur(18px);
}

/* ---------- Wallpaper + font ---------- */

html.ios-theme body {
    font-family: 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    color: var(--ios-label);
    background-color: #c8d4e4 !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)),
        url('../images/bgios.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    -webkit-font-smoothing: antialiased;
}

html.ios-theme .thai-font,
html.ios-theme .thai-font-bold {
    font-family: 'Prompt', system-ui, sans-serif !important;
}

html.ios-theme h1,
html.ios-theme h2,
html.ios-theme h3 {
    letter-spacing: -.015em;
}

/* Decorative gradient underlines under headings are not part of the iOS look */
html.ios-theme [class~="h-0.5"][class*="bg-gradient"],
html.ios-theme [class~="h-1"][class*="bg-gradient"][class*="rounded-full"][class*="mt-"] {
    display: none !important;
}

/* ---------- Sidebar (admin) ---------- */

html.ios-theme #sidebar,
html.ios-theme .sidebar {
    background: rgba(255, 255, 255, .42) !important;
    background-image: none !important;
    color: var(--ios-label);
    border-right: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 1px 0 0 rgba(15, 23, 42, .04) !important;
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    overflow-y: auto;
}

html.ios-theme #sidebar [class*="text-white"] {
    color: var(--ios-label) !important;
}

html.ios-theme #sidebar h3[class*="text-white"],
html.ios-theme #sidebar p[class*="text-white"] {
    color: rgba(60, 60, 67, .6) !important;
}

html.ios-theme #sidebar [class*="border-white"] {
    border-color: rgba(60, 60, 67, .1) !important;
}

html.ios-theme #sidebar .w-10.h-10 {
    background: linear-gradient(180deg, #3b82f6, var(--ios-blue)) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, .3);
}

html.ios-theme #sidebar .w-10.h-10 i {
    color: #fff !important;
}

html.ios-theme .sidebar-item {
    border-radius: 999px !important;
    margin: 2px 4px !important;
    padding: .6rem .9rem !important;
    font-size: .9rem;
    color: var(--ios-label) !important;
    transform: none !important;
    transition: background .15s, box-shadow .15s !important;
}

html.ios-theme .sidebar-item i {
    color: #3a3a3c !important;
    opacity: .85;
}

html.ios-theme .sidebar-item:hover {
    background: rgba(255, 255, 255, .6) !important;
}

html.ios-theme .sidebar-item.active {
    background: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .1) !important;
}

html.ios-theme .sidebar-item.active i {
    color: var(--ios-blue) !important;
    opacity: 1;
}

html.ios-theme .mobile-menu button {
    background: rgba(255, 255, 255, .8) !important;
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12) !important;
}

/* ---------- Top bar ---------- */

/* :is(div, header) + :not(.rounded-full) keep this above the glass-card rule's specificity */
html.ios-theme .main-content > :is(div, header).bg-white:first-child:not(.rounded-full) {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 !important;
    background: rgba(255, 255, 255, .42) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(60, 60, 67, .1) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
}

html.ios-theme .main-content > .bg-white:first-child h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ---------- Glass cards ---------- */

html.ios-theme :is(.card-gradient, .stat-card),
html.ios-theme :is(div, section, form, article, aside, main).bg-white,
html.ios-theme :is([class~="bg-white/70"], [class~="bg-white/80"], [class~="bg-white/90"], [class~="bg-white/95"]):not(button):not(a) {
    background: var(--ios-glass) !important;
    background-image: none !important;
    border-color: var(--ios-glass-border) !important;
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
}

html.ios-theme :is(.card-gradient, .stat-card),
html.ios-theme :is(div, section, form, article, aside, main).bg-white:is([class*="shadow"], [class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"], [class*="rounded-4xl"]):not(.rounded-full) {
    border-radius: 18px !important;
    border: 1px solid var(--ios-glass-border) !important;
    box-shadow: var(--ios-glass-shadow) !important;
}

html.ios-theme .stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 32px rgba(15, 23, 42, .12) !important;
}

/* Pastel gradient panels become plain glass */
html.ios-theme :is(div, section, form)[class*="bg-gradient-to-"]:is(
    [class~="from-white"], [class~="from-agi-light"], [class~="from-gray-50"], [class~="from-slate-50"],
    [class~="from-blue-50"], [class~="from-blue-100"], [class~="from-sky-50"], [class~="from-indigo-50"], [class~="from-indigo-100"],
    [class~="from-green-50"], [class~="from-green-100"], [class~="from-emerald-50"], [class~="from-teal-50"], [class~="from-cyan-50"],
    [class~="from-yellow-50"], [class~="from-yellow-100"], [class~="from-amber-50"], [class~="from-orange-50"],
    [class~="from-red-50"], [class~="from-pink-50"], [class~="from-rose-50"], [class~="from-purple-50"], [class~="from-purple-100"], [class~="from-violet-50"]
) {
    background: rgba(255, 255, 255, .5) !important;
    background-image: none !important;
    border-color: var(--ios-glass-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--ios-glass-shadow) !important;
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
}

/* Strong brand gradient panels (welcome panels, banners) use the iOS blue gradient */
html.ios-theme :is(div, section)[class*="bg-gradient-to-"]:is([class~="from-agi-blue"], [class~="from-blue-600"], [class~="from-blue-700"], [class~="from-indigo-600"]):not(.w-10):not(.w-12):not(.w-8):not(.w-14):not(.w-16) {
    background-image: linear-gradient(160deg, rgba(0, 122, 255, .9), rgba(88, 86, 214, .88)) !important;
}

/* Small coloured icon tiles look like iOS app icons */
html.ios-theme :is(.w-8.h-8, .w-10.h-10, .w-12.h-12, .w-14.h-14, .w-16.h-16)[class*="bg-gradient"]:not(.rounded-full) {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12) !important;
}

/* ---------- Buttons ---------- */

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):is([class*="rounded"], .btn-gradient):not(.rounded-none):not(.sidebar-item):not(.action-btn) {
    border-radius: 999px !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease !important;
}

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):is([class*="bg-"], .btn-gradient):not(:disabled):not(.sidebar-item):not(.action-btn):hover {
    transform: translateY(-1px);
}

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):not(.sidebar-item):active {
    transform: scale(.97);
}

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):is(
    .btn-gradient, [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-agi-blue"],
    [class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-sky-500"], [class~="bg-sky-600"],
    [class~="from-agi-blue"], [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-indigo-500"], [class~="from-indigo-600"]
) {
    background: var(--ios-blue) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 122, 255, .28) !important;
}

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):is(
    [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-700"], [class~="bg-emerald-500"], [class~="bg-emerald-600"],
    [class~="bg-agi-green"], [class~="from-green-500"], [class~="from-green-600"], [class~="from-emerald-500"]
) {
    background: var(--ios-green) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(52, 199, 89, .28) !important;
}

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):is(
    [class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-red-700"], [class~="bg-rose-500"], [class~="bg-rose-600"],
    [class~="from-red-500"], [class~="from-red-600"]
) {
    background: var(--ios-red) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(255, 59, 48, .26) !important;
}

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):is(
    [class~="bg-yellow-400"], [class~="bg-yellow-500"], [class~="bg-yellow-600"], [class~="bg-amber-500"], [class~="bg-orange-500"], [class~="bg-orange-600"],
    [class~="from-yellow-400"], [class~="from-yellow-500"], [class~="from-orange-500"]
) {
    background: var(--ios-orange) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(255, 149, 0, .28) !important;
}

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):is(
    [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="from-purple-500"], [class~="from-purple-600"]
) {
    background: var(--ios-purple) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(175, 82, 222, .28) !important;
}

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):is(
    [class~="bg-pink-500"], [class~="bg-pink-600"], [class~="from-pink-500"]
) {
    background: var(--ios-pink) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 600;
}

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):is(
    [class~="bg-gray-100"], [class~="bg-gray-200"], [class~="bg-gray-300"], [class~="bg-white"], [class~="bg-slate-100"], [class~="bg-slate-200"]
):not(.rounded-full.p-2) {
    background: rgba(255, 255, 255, .78) !important;
    background-image: none !important;
    color: var(--ios-label) !important;
    border: 1px solid rgba(60, 60, 67, .14) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px rgba(15, 23, 42, .05) !important;
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
}

html.ios-theme :is(button, input[type="submit"], input[type="button"], a[class*="py-"]):is(
    [class~="bg-gray-100"], [class~="bg-gray-200"], [class~="bg-gray-300"], [class~="bg-white"], [class~="bg-slate-100"], [class~="bg-slate-200"]
):hover {
    background: rgba(255, 255, 255, .95) !important;
}

html.ios-theme :is(button, input[type="submit"]):disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
}

/* ---------- Form controls ---------- */

html.ios-theme :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="image"]),
    select,
    textarea
) {
    background-color: rgba(255, 255, 255, .78) !important;
    border: 1px solid rgba(60, 60, 67, .14) !important;
    border-radius: 12px !important;
    color: var(--ios-label);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03) inset;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

html.ios-theme :is(input, select, textarea):focus {
    outline: none !important;
    background-color: #fff !important;
    border-color: var(--ios-blue) !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, .18) !important;
}

html.ios-theme :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--ios-blue);
}

html.ios-theme input[type="file"] {
    font-size: .85rem;
}

html.ios-theme input[type="file"]::file-selector-button {
    margin-right: .75rem;
    padding: .45rem .95rem;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 122, 255, .12);
    color: #0060df;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

html.ios-theme label {
    color: #3a3a3c;
}

/* ---------- Tables ---------- */

html.ios-theme table {
    border-color: rgba(60, 60, 67, .1) !important;
}

html.ios-theme table thead,
html.ios-theme table thead tr {
    background: transparent !important;
    background-image: none !important;
}

html.ios-theme table thead th {
    background: rgba(242, 242, 247, .72) !important;
    color: var(--ios-secondary) !important;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--ios-separator) !important;
    white-space: nowrap;
}

html.ios-theme table tbody tr {
    background: transparent;
}

html.ios-theme table tbody tr:hover {
    background: rgba(0, 122, 255, .04) !important;
}

html.ios-theme table :is(td, th) {
    border-color: rgba(60, 60, 67, .08) !important;
}

/* ---------- Banners + tone pills ---------- */

html.ios-theme :is(.bg-red-50, .bg-red-100) {
    background-color: rgba(255, 59, 48, .12) !important;
    border-color: rgba(255, 59, 48, .22) !important;
}
html.ios-theme :is(.bg-red-50, .bg-red-100) :is(.text-red-600, .text-red-700, .text-red-800),
html.ios-theme :is(.bg-red-50, .bg-red-100):is(.text-red-600, .text-red-700, .text-red-800) {
    color: #d70015 !important;
}

html.ios-theme :is(.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100) {
    background-color: rgba(52, 199, 89, .14) !important;
    border-color: rgba(52, 199, 89, .24) !important;
}
html.ios-theme :is(.bg-green-50, .bg-green-100):is(.text-green-600, .text-green-700, .text-green-800) {
    color: #248a3d !important;
}

html.ios-theme :is(.bg-yellow-50, .bg-yellow-100, .bg-amber-50, .bg-amber-100, .bg-orange-50, .bg-orange-100) {
    background-color: rgba(255, 149, 0, .14) !important;
    border-color: rgba(255, 149, 0, .26) !important;
}
html.ios-theme :is(.bg-yellow-50, .bg-yellow-100, .bg-orange-100):is(.text-yellow-600, .text-yellow-700, .text-yellow-800, .text-orange-700) {
    color: #c93400 !important;
}

html.ios-theme :is(.bg-blue-50, .bg-blue-100, .bg-sky-50, .bg-sky-100, .bg-indigo-50, .bg-indigo-100) {
    background-color: rgba(0, 122, 255, .1) !important;
    border-color: rgba(0, 122, 255, .2) !important;
}
html.ios-theme :is(.bg-blue-50, .bg-blue-100):is(.text-blue-600, .text-blue-700, .text-blue-800) {
    color: #0060df !important;
}

html.ios-theme :is(.bg-purple-50, .bg-purple-100) {
    background-color: rgba(175, 82, 222, .12) !important;
    border-color: rgba(175, 82, 222, .22) !important;
}

html.ios-theme :is(.bg-gray-50, .bg-gray-100):not(body):not(button):not(a) {
    background-color: rgba(242, 242, 247, .7) !important;
}

/* Bordered tinted boxes are alert banners */
html.ios-theme :is(.bg-red-50, .bg-red-100, .bg-green-50, .bg-green-100, .bg-yellow-50, .bg-yellow-100, .bg-blue-50, .bg-blue-100, .bg-orange-50, .bg-orange-100)[class*="border"]:not(.rounded-full):not(td):not(tr) {
    border-radius: 14px !important;
}

html.ios-theme :is(.bg-red-600, .bg-red-500):is(div, p):not(.rounded-full) {
    border-radius: 14px !important;
    background-color: var(--ios-red) !important;
}

/* ---------- Status badges + action buttons (applicant / staff dashboards) ---------- */

html.ios-theme :is(.status-draft, .status-pending, .status-need_more_doc, .status-edit_requested, .status-approved, .status-cancelled, .status-issued) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .35rem;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: .3rem .75rem !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    white-space: nowrap;
    box-shadow: none !important;
}

html.ios-theme :is(.status-draft, .status-pending, .status-need_more_doc, .status-edit_requested, .status-approved, .status-cancelled, .status-issued) svg {
    width: 1em !important;
    height: 1em !important;
    margin: 0 !important;
}

html.ios-theme .status-draft { background: rgba(142, 142, 147, .16) !important; color: #636366 !important; }
html.ios-theme .status-pending { background: rgba(255, 149, 0, .16) !important; color: #c93400 !important; }
html.ios-theme .status-need_more_doc { background: rgba(255, 59, 48, .14) !important; color: #d70015 !important; }
html.ios-theme .status-edit_requested { background: rgba(0, 122, 255, .12) !important; color: #0060df !important; }
html.ios-theme .status-approved { background: rgba(52, 199, 89, .16) !important; color: #248a3d !important; }
html.ios-theme .status-cancelled { background: rgba(255, 59, 48, .14) !important; color: #d70015 !important; }
html.ios-theme .status-issued { background: rgba(255, 45, 85, .12) !important; color: #c9184a !important; }

html.ios-theme .action-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    gap: .35rem;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .5rem .9rem !important;
    border-radius: 999px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
    text-decoration: none;
}

html.ios-theme .action-btn svg {
    width: 1.1em !important;
    height: 1.1em !important;
    margin: 0 !important;
}

html.ios-theme .action-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .1) !important;
}

html.ios-theme .action-view { background: rgba(0, 122, 255, .12) !important; color: #0060df !important; }
html.ios-theme .action-edit { background: rgba(255, 149, 0, .16) !important; color: #c93400 !important; }
html.ios-theme .action-submit { background: rgba(52, 199, 89, .16) !important; color: #248a3d !important; }
html.ios-theme :is(.action-delete, .action-cancel) { background: rgba(255, 59, 48, .12) !important; color: #d70015 !important; }
html.ios-theme .action-download { background: rgba(255, 45, 85, .12) !important; color: #c9184a !important; }

/* ---------- Page modals ---------- */

html.ios-theme .fixed.inset-0:is([class~="bg-black/40"], [class~="bg-black/50"], [class~="bg-opacity-50"]) {
    background-color: rgba(0, 0, 0, .32) !important;
}

html.ios-theme .fixed.inset-0[class*="bg-black"] {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

html.ios-theme .fixed.inset-0[class*="bg-black"] > .bg-white,
html.ios-theme .fixed.inset-0[class*="bg-black"] > div > .bg-white {
    background: rgba(255, 255, 255, .95) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .28) !important;
    animation: iosThemePop .28s cubic-bezier(.2, .9, .2, 1);
}

/* ---------- Motion ---------- */

html.ios-theme .card-gradient,
html.ios-theme .main-content > .p-6 > .bg-white {
    animation: iosThemeFadeUp .45s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes iosThemeFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes iosThemePop {
    from { opacity: 0; transform: scale(.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 991.98px) {
    html.ios-theme body {
        background-attachment: scroll !important;
    }
}

html.ios-theme .ql-toolbar.ql-snow {
    background: rgba(255, 255, 255, .85);
    border-color: var(--ios-separator, rgba(60, 60, 67, .18)) !important;
    border-radius: 12px 12px 0 0;
}

html.ios-theme .ql-container.ql-snow {
    background: rgba(255, 255, 255, .92);
    border-color: var(--ios-separator, rgba(60, 60, 67, .18)) !important;
    border-radius: 0 0 12px 12px;
}

/* ---------- Event branding + links back to the public contest pages (/contest/) ---------- */

.brand-logo {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    transition: transform .25s ease, box-shadow .25s ease;
}

.brand-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .2);
}

.brand-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 52px;
}

.contest-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: #0e8f8a;
    text-decoration: none;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
}

.contest-link:hover {
    color: #0b6f6b;
    text-decoration: underline;
}

.contest-link--light {
    padding: 8px 16px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .45);
}

.contest-link--light:hover {
    color: #fff;
    background: rgba(255, 255, 255, .3);
    text-decoration: none;
}

.contest-link--sm {
    display: flex;
    width: fit-content;
    margin-top: 2px;
    font-size: .75rem;
}

@media (prefers-reduced-motion: reduce) {
    html.ios-theme * {
        animation: none !important;
        transition: none !important;
    }
}