/*
 * TikTox 第三组：午夜黑金玻璃风
 * 红蓝只用于投注双方，其余界面统一使用曜石黑与香槟金。
 */
:root {
    --bg: #050403;
    --panel: rgba(20, 16, 11, .76);
    --panel-2: rgba(28, 22, 14, .72);
    --line: rgba(224, 188, 112, .18);
    --text: #f8f2e8;
    --muted: #a69a88;
    --red: #a72736;
    --red-2: #d24a59;
    --blue: #315f89;
    --cyan: #d6b16a;
    --gold: #d8b56d;
    --green: #8cab82;
    --shadow: 0 30px 90px rgba(0, 0, 0, .58);
    --radius: 22px;
}

body {
    background:
        radial-gradient(circle at 50% -15%, rgba(214, 177, 106, .13), transparent 34%),
        radial-gradient(circle at 8% 36%, rgba(126, 89, 39, .08), transparent 25%),
        radial-gradient(circle at 94% 68%, rgba(214, 177, 106, .06), transparent 30%),
        linear-gradient(145deg, #030302 0%, #090704 48%, #030302 100%);
    color: var(--text);
}

body::before {
    background-image:
        linear-gradient(rgba(216, 181, 109, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 181, 109, .022) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}

body::after {
    position: fixed;
    inset: 0;
    z-index: -2;
    content: "";
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 233, 183, .025) 50%, transparent 65%);
}

.ambient { opacity: .05; filter: blur(150px); }
.ambient-red, .ambient-blue { background: #c79543; }

.site-header {
    min-height: 78px;
}

.site-header::before {
    background: linear-gradient(180deg, rgba(5, 4, 3, .97), rgba(5, 4, 3, .72));
    border-bottom-color: rgba(216, 181, 109, .11);
}

.brand {
    color: #fbf5e8;
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
    letter-spacing: .2px;
}

.brand-note {
    position: relative;
    width: 38px;
    height: 38px;
    color: #21170a;
    border: 1px solid #f0d38c;
    border-radius: 50%;
    background: linear-gradient(145deg, #f7dda0, #b77c2e);
    box-shadow: 0 0 28px rgba(216, 181, 109, .18), inset 0 1px rgba(255,255,255,.6);
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 900;
    text-shadow: none;
}

.brand-note::after {
    position: absolute;
    inset: 4px;
    content: "";
    border: 1px solid rgba(50, 31, 8, .35);
    border-radius: 50%;
}

.brand-note.large { width: 56px; height: 56px; color: #241707; font-size: 29px; text-shadow: none; }
.brand small { color: var(--gold); font-family: inherit; font-size: 11px; letter-spacing: 1.5px; }

.desktop-nav a { color: #8d8375; letter-spacing: .6px; }
.desktop-nav a::after { background: linear-gradient(90deg, transparent, #e7c47b, transparent); }
.desktop-nav a:hover, .desktop-nav a.active { color: #f4dfaf; }

.balance-pill, .login-pill {
    border-color: rgba(216, 181, 109, .32);
    background: linear-gradient(145deg, rgba(28, 21, 12, .82), rgba(7, 6, 4, .88));
    box-shadow: inset 0 0 24px rgba(216, 181, 109, .045), 0 10px 30px rgba(0,0,0,.25);
}

.header-register { color: #b7a47f; }
.login-pill { color: #ead19a; }
.coin { color: #2b1c08; background: linear-gradient(145deg, #f5daa0, #a96e24); }

.site-main { padding-top: 22px; }
.eyebrow { color: #c79e50; letter-spacing: 3.2px; }

.site-announcement {
    border-color: rgba(216, 181, 109, .2);
    background: linear-gradient(90deg, rgba(216, 181, 109, .07), rgba(17, 13, 8, .46), rgba(216, 181, 109, .035));
    box-shadow: inset 0 1px rgba(255,255,255,.02);
}
.site-announcement span, .site-announcement a { color: #d8b56d; }
.site-announcement b { color: #241708; background: linear-gradient(145deg, #f0d084, #a97229); }

.tiktok-carousel {
    position: relative;
    overflow: hidden;
    height: 420px;
    margin-bottom: 26px;
    border: 1px solid rgba(216,181,109,.23);
    border-radius: 30px;
    background: #080603;
    box-shadow: 0 32px 100px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.04);
}
.carousel-track, .carousel-slide { position: absolute; inset: 0; }
.carousel-slide {
    overflow: hidden;
    background-position: center 28%;
    background-size: cover;
    opacity: 0;
    transform: scale(1.035);
    visibility: hidden;
    transition: opacity .8s ease, transform 6.5s linear, visibility .8s;
}
.carousel-slide.active { opacity: 1; transform: scale(1); visibility: visible; }
.carousel-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4,3,2,.94) 0%, rgba(4,3,2,.72) 38%, rgba(4,3,2,.12) 72%),
        linear-gradient(180deg, rgba(4,3,2,.12), rgba(4,3,2,.67));
}
.carousel-content {
    position: absolute;
    top: 50%;
    left: clamp(28px, 5vw, 68px);
    z-index: 2;
    width: min(560px, 62%);
    transform: translateY(-50%);
}
.carousel-content > span {
    display: inline-flex;
    padding: 6px 10px;
    color: #2a1b08;
    border: 1px solid #f0d28b;
    border-radius: 999px;
    background: linear-gradient(145deg,#eed18a,#aa7028);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.carousel-content h2 {
    margin: 14px 0 9px;
    color: #f8edda;
    font-family: "Songti SC","Noto Serif SC",Georgia,serif;
    font-size: clamp(31px,4vw,53px);
    font-weight: 500;
    line-height: 1.13;
    letter-spacing: -1.8px;
}
.carousel-content p { margin: 0 0 23px; color: #b4a893; font-size: 14px; }
.carousel-content a {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    gap: 18px;
    padding: 0 16px;
    color: #e6cd98;
    border: 1px solid rgba(216,181,109,.27);
    border-radius: 11px;
    background: rgba(7,5,3,.58);
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(12px);
}
.carousel-content a:hover { color: #241708; background: linear-gradient(145deg,#efd18a,#ad742a); }
.carousel-index {
    position: absolute;
    right: 30px;
    bottom: 24px;
    z-index: 2;
    color: #e0bd76;
    font-family: Georgia,serif;
    font-size: 17px;
    letter-spacing: 2px;
}
.carousel-index i { color: #746958; font-style: normal; }
.carousel-controls {
    position: absolute;
    bottom: 21px;
    left: clamp(28px,5vw,68px);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
}
.carousel-controls > button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #c5ad7c;
    border: 1px solid rgba(216,181,109,.18);
    border-radius: 50%;
    background: rgba(7,5,3,.66);
    cursor: pointer;
}
.carousel-dots { display: flex; gap: 6px; }
.carousel-dots button {
    width: 24px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255,255,255,.22);
    cursor: pointer;
    transition: .2s ease;
}
.carousel-dots button.active { width: 42px; background: #d8b56d; }

.hero {
    grid-template-columns: .9fr 1.1fr;
    gap: 44px;
    min-height: 540px;
}

.hero-copy { padding-left: 8px; }
.hero h1, .page-hero h1, .profile-heading h1 {
    color: #f8f0e3;
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-weight: 600;
}
.hero h1 { font-size: clamp(46px, 5.4vw, 76px); line-height: 1.13; letter-spacing: -3px; }
.hero h1 em {
    color: transparent;
    background: linear-gradient(110deg, #fff0c5 0%, #c89645 44%, #f7daa0 80%);
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: none;
}
.hero-copy > p { color: #9c9181; line-height: 1.85; }

.primary-button {
    color: #241708;
    border: 1px solid #efd38d;
    background: linear-gradient(115deg, #f3d691 0%, #c18b39 48%, #f0cf82 100%);
    box-shadow: 0 14px 38px rgba(190, 137, 54, .18), inset 0 1px rgba(255,255,255,.55);
}

.ghost-button {
    color: #c8b897;
    border-color: rgba(216, 181, 109, .22);
    background: rgba(216, 181, 109, .035);
}
.ghost-button:hover { color: #f0d8a1; border-color: rgba(216, 181, 109, .46); }

.hero-arena {
    min-height: 490px;
    border-color: rgba(231, 196, 123, .25);
    border-radius: 38px;
    background:
        linear-gradient(180deg, rgba(5,4,3,.16), rgba(5,4,3,.76)),
        radial-gradient(circle at 50% 32%, rgba(228, 191, 113, .23), transparent 21%),
        linear-gradient(110deg, rgba(99,24,32,.13), transparent 43%, rgba(35,63,86,.14)),
        url("../images/kris.jpg") center 28% / cover;
    box-shadow: 0 34px 110px rgba(0,0,0,.66), inset 0 1px rgba(255,238,198,.12);
}

.hero-arena::before, .hero-arena::after {
    top: auto;
    bottom: 112px;
    width: 43%;
    color: var(--gold);
    background: linear-gradient(90deg, transparent, rgba(216,181,109,.7));
}
.hero-arena::after { background: linear-gradient(90deg, rgba(216,181,109,.7), transparent); }

.hero-arena > .wave {
    top: 24px;
    color: rgba(245, 218, 155, .66);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 4px;
}

.arena-seal {
    position: absolute;
    top: 74px;
    left: 50%;
    display: grid;
    width: 122px;
    height: 122px;
    place-items: center;
    align-content: center;
    border: 1px solid rgba(239, 208, 138, .42);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15,11,6,.9), rgba(4,3,2,.58));
    box-shadow: 0 0 0 8px rgba(216,181,109,.035), 0 0 50px rgba(216,181,109,.14);
    transform: translateX(-50%);
}
.arena-seal::before, .arena-seal::after { position: absolute; content: "✦"; color: #c79b4d; font-size: 10px; }
.arena-seal::before { left: -6px; }
.arena-seal::after { right: -6px; }
.arena-seal small { color: #8e7a57; font-size: 7px; letter-spacing: 1.5px; }
.arena-seal strong { color: #f2d58e; font-family: Georgia, serif; font-size: 39px; line-height: 1; }
.arena-seal span { margin-top: 4px; color: #b8a075; font-size: 8px; }

.versus { z-index: 1; margin-top: 150px; gap: 28px; }
.versus span {
    color: #d3cabd;
    font-family: Georgia, serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    letter-spacing: 5px;
    text-shadow: 0 10px 40px rgba(0,0,0,.75);
}
.versus span:first-child { color: #c97d82; }
.versus span:last-child { color: #7899af; }
.versus b {
    width: 52px;
    height: 52px;
    color: #2b1c08;
    border: 1px solid #f4dc9e;
    background: linear-gradient(145deg, #f0d48c, #ad7329);
    box-shadow: 0 0 38px rgba(216,181,109,.25);
    font-family: Georgia, serif;
}

.round-chip {
    color: #d8c7a2;
    border-color: rgba(216,181,109,.28);
    background: rgba(6,5,3,.68);
    backdrop-filter: blur(12px);
}

.countdown {
    border-color: rgba(216,181,109,.16);
    background: rgba(5,4,3,.74);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.countdown span { color: #8f8371; }
.countdown strong { color: #edcf89; font-family: Georgia, serif; font-weight: 500; }
.countdown i { color: #b98b42; }
.countdown strong.urgent { color: #f0c56b; }

.quick-grid { margin-top: 28px; }
.quick-grid a {
    border-color: rgba(216,181,109,.15);
    background: linear-gradient(145deg, rgba(27,21,13,.72), rgba(9,7,4,.78));
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.quick-grid a:hover { border-color: rgba(216,181,109,.42); box-shadow: 0 17px 42px rgba(0,0,0,.32); }
.quick-grid a > b {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #d9b56c;
    border: 1px solid rgba(216,181,109,.22);
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: 13px;
}
.quick-grid small, .quick-grid i { color: #837869; }

.section-heading h2 { font-family: "Songti SC", "Noto Serif SC", Georgia, serif; font-size: 31px; font-weight: 500; }
.section-heading > a { color: #c9a357; }

.event-card {
    border-color: rgba(216,181,109,.14);
    background: linear-gradient(145deg, rgba(24,19,12,.82), rgba(7,6,4,.9));
    box-shadow: 0 22px 60px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.025);
}
.event-card:hover { border-color: rgba(216,181,109,.38); transform: translateY(-3px); }
.vip-line {
    color: #a69882;
    border-bottom-color: rgba(216,181,109,.11);
    background: rgba(216,181,109,.025);
}
.vip { color: #e0bd73; font-family: Georgia, serif; }
.heat { color: #b7a174; }
.poster { border-color: rgba(216,181,109,.13); }
.poster::after { background: linear-gradient(180deg, transparent 48%, rgba(5,4,3,.88)); }
.play {
    color: #2c1d08;
    border-color: rgba(255,240,201,.42);
    background: linear-gradient(145deg, #f1d58d, #ae742b);
    box-shadow: 0 12px 34px rgba(0,0,0,.5);
}
.creator strong { color: #eee4d4; }
.creator small, .event-info > p, .social-row { color: #84796a; }
.creator-link, .tiktok-source { color: #cba65e; transition: color .2s ease; }
.creator-link:hover, .tiktok-source:hover { color: #f2d993; }
.tiktok-source { margin-left: auto; font-weight: 800; }
.avatar { border-color: #d5ae62; }
.music-note { color: #d0a75b; text-shadow: none; }
.event-info h3 { color: #f1e8db; font-family: "Songti SC", "Noto Serif SC", Georgia, serif; font-weight: 600; }

.odds {
    border-color: rgba(216,181,109,.14);
    background: rgba(4,3,2,.52);
}
.odds b { color: #b18a45; }
.odds div:first-child { background: linear-gradient(90deg, rgba(121,25,35,.13), transparent); }
.odds div:last-child { background: linear-gradient(90deg, transparent, rgba(34,62,83,.16)); }
.odds span { color: #8f8474; }

.bet-button {
    border-color: rgba(255,255,255,.09);
    box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.bet-button.red { color: #f1d9da; background: linear-gradient(145deg, #9d2836, #5f1720); }
.bet-button.blue { color: #dce6ec; background: linear-gradient(145deg, #36678e, #203b53); }

.page-hero {
    border-color: rgba(216,181,109,.18);
    background:
        radial-gradient(circle at 80% 0%, rgba(216,181,109,.11), transparent 25%),
        linear-gradient(135deg, rgba(27,21,13,.8), rgba(7,6,4,.9));
    box-shadow: 0 25px 70px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.03);
}
.page-hero h1 { letter-spacing: -2px; }
.mini-countdown, .stats-card {
    border-color: rgba(216,181,109,.16);
    background: rgba(4,3,2,.55);
}
.mini-countdown b, .stats-card strong, .blue-text { color: #e3c27d; }
.filter-bar button, .tabs button {
    color: #8e8373;
    border-color: rgba(216,181,109,.12);
    background: rgba(216,181,109,.025);
}
.filter-bar button.active, .tabs button.active {
    color: #2a1b08;
    border-color: #e6c675;
    background: linear-gradient(145deg, #efd28b, #b27a2e);
}
.filter-bar > span { color: #7f7465; }

.order-card, .profile-card, .wallet-card, .feature-grid button, .level-card, .profile-actions > * {
    border-color: rgba(216,181,109,.15);
    background: linear-gradient(145deg, rgba(25,19,12,.78), rgba(8,6,4,.88));
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.order-card:hover, .feature-grid button:hover { border-color: rgba(216,181,109,.35); }
.order-status { color: #d9bb7b; background: rgba(216,181,109,.09); }
.order-data span { border-color: rgba(216,181,109,.09); background: rgba(216,181,109,.025); }
.order-main h3, .profile-copy h2 { font-family: "Songti SC", "Noto Serif SC", Georgia, serif; }

.profile-card {
    background:
        radial-gradient(circle at 10% 20%, rgba(216,181,109,.12), transparent 28%),
        linear-gradient(145deg, rgba(28,21,12,.85), rgba(7,6,4,.92));
}
.profile-avatar { border-color: #d6b16a; box-shadow: 0 0 0 7px rgba(216,181,109,.05), 0 20px 55px rgba(0,0,0,.42); }
.profile-avatar span { color: #251708; border-color: #f1d58b; background: linear-gradient(145deg, #f0d28a, #ad742b); text-shadow: none; }
.profile-copy h2 i { color: #d7b268; }
.vip-badge { color: #e0c185; border-color: rgba(216,181,109,.28); background: rgba(216,181,109,.075); }
.wallet-card { border-color: rgba(216,181,109,.25); }
.wallet-card strong { color: #e8ca88; font-family: Georgia, serif; font-weight: 500; }
.wallet-actions button { color: #d4bd8c; border-color: rgba(216,181,109,.18); background: rgba(216,181,109,.04); }
.feature-grid i { color: #d7b46b; }
.progress { background: rgba(216,181,109,.1); }
.progress i { background: linear-gradient(90deg, #9c6727, #f0d28a); box-shadow: 0 0 20px rgba(216,181,109,.2); }

.modal-panel {
    border-color: rgba(216,181,109,.28);
    background: linear-gradient(145deg, rgba(29,22,13,.98), rgba(6,5,3,.98));
    box-shadow: 0 35px 110px rgba(0,0,0,.7);
}
.modal-panel input, .auth-card input, .install-card input {
    border-color: rgba(216,181,109,.16);
    background: rgba(216,181,109,.03);
}
.modal-panel input:focus, .auth-card input:focus, .install-card input:focus { border-color: #d4aa5d; }
.amount-chips button { color: #b8a98d; border-color: rgba(216,181,109,.15); background: rgba(216,181,109,.035); }

.auth-shell {
    border-color: rgba(216,181,109,.22);
    background: rgba(7,5,3,.8);
    box-shadow: 0 38px 120px rgba(0,0,0,.62);
}
.auth-showcase {
    background:
        linear-gradient(180deg, rgba(5,4,3,.08), rgba(5,4,3,.38) 38%, rgba(5,4,3,.96)),
        radial-gradient(circle at 50% 28%, rgba(216,181,109,.2), transparent 32%),
        url("../images/dance.jpg") center 28% / cover;
    filter: saturate(.72);
}
.register-showcase {
    background:
        linear-gradient(180deg, rgba(5,4,3,.05), rgba(5,4,3,.91)),
        radial-gradient(circle at 50% 30%, rgba(216,181,109,.19), transparent 33%),
        url("../images/mook.jpg") center / cover;
}
.auth-showcase::before { background: linear-gradient(115deg, rgba(216,181,109,.06), transparent 46%, rgba(216,181,109,.05)); }
.live-dot { color: #241708; background: linear-gradient(145deg, #f0d28a, #aa7028); box-shadow: 0 0 28px rgba(216,181,109,.22); }
.auth-vs span { border-color: rgba(216,181,109,.2); background: rgba(5,4,3,.7); }
.auth-vs b { color: #d9b66d; }
.auth-showcase h2, .auth-panel h1 { font-family: "Songti SC", "Noto Serif SC", Georgia, serif; font-weight: 500; }
.auth-mini-stats div { border-color: rgba(216,181,109,.13); background: rgba(5,4,3,.58); }
.auth-mini-stats strong { color: #e7c982; }
.auth-panel { background: linear-gradient(145deg, rgba(25,19,11,.95), rgba(6,5,3,.98)); }
.input-wrap input {
    border-color: rgba(216,181,109,.16);
    background: rgba(216,181,109,.03);
}
.input-wrap input:focus { border-color: rgba(216,181,109,.65); box-shadow: 0 0 0 3px rgba(216,181,109,.07); }
.input-wrap > i, .password-toggle { color: #81725d; }
.password-toggle.active, .auth-switch a { color: #d9b66d; }
.demo-account { border-color: rgba(216,181,109,.22); color: #9d907d; }
.install-now { display: block; margin-top: 8px; color: #f0cf86; font-weight: 800; }
.thai-orbit { border-color: rgba(216,181,109,.3); }
.thai-orbit::before { border-color: rgba(216,181,109,.32); }
.thai-orbit b { border: 1px solid rgba(216,181,109,.3); background: #080603; color: #e6c57b; text-shadow: none; }
.auth-benefits li::before { color: #d7b46b; }

.installer {
    background:
        radial-gradient(circle at 50% 10%, rgba(216,181,109,.14), transparent 31%),
        linear-gradient(145deg, #030302, #0a0703 52%, #030302);
}
.install-card {
    border-color: rgba(216,181,109,.24);
    background: linear-gradient(145deg, rgba(28,21,12,.94), rgba(6,5,3,.98));
    box-shadow: 0 34px 110px rgba(0,0,0,.65);
}
.install-card h1 { color: #f3e5ca; font-family: "Songti SC", Georgia, serif; font-weight: 500; }

.responsible { color: #746b5e; }
.responsible span { color: #b9904b; }
.responsible a { color: #c6a35f; }
.mobile-nav {
    border-top-color: rgba(216,181,109,.16);
    background: rgba(6,5,3,.96);
}
.mobile-nav a { color: #776e61; }
.mobile-nav a.active { color: #e4c47e; text-shadow: none; }
.mobile-nav a.active::after { background: linear-gradient(90deg, transparent, #dfbd70, transparent); }

@media (max-width: 940px) {
    .hero { gap: 20px; }
    .hero-copy { padding-bottom: 22px; }
}

@media (max-width: 680px) {
    .site-header { min-height: 64px; }
    .brand-note { width: 32px; height: 32px; font-size: 16px; }
    .site-main { padding-top: 7px; }
    .site-announcement { border-radius: 10px; }
    .tiktok-carousel { height: 300px; margin-bottom: 13px; border-radius: 21px; }
    .carousel-shade { background: linear-gradient(180deg, rgba(4,3,2,.15), rgba(4,3,2,.91)); }
    .carousel-content { top: auto; right: 20px; bottom: 55px; left: 20px; width: auto; transform: none; }
    .carousel-content h2 { margin: 10px 0 5px; font-size: 27px; letter-spacing: -1px; }
    .carousel-content p { overflow: hidden; margin-bottom: 12px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .carousel-content a { min-height: 36px; padding: 0 12px; font-size: 9px; }
    .carousel-controls { bottom: 16px; left: 20px; }
    .carousel-controls > button { display: none; }
    .carousel-index { right: 18px; bottom: 14px; font-size: 12px; }
    .hero-copy { padding-top: 28px; }
    .hero h1 { font-size: 39px; line-height: 1.16; letter-spacing: -2px; }
    .hero-copy > p { line-height: 1.7; }
    .hero-arena { min-height: 355px; border-radius: 25px; }
    .hero-arena > .wave { top: 15px; font-size: 7px; letter-spacing: 2.6px; }
    .arena-seal { top: 49px; width: 94px; height: 94px; }
    .arena-seal strong { font-size: 31px; }
    .versus { margin-top: 123px; gap: 13px; }
    .versus span { font-size: 38px; letter-spacing: 1px; }
    .versus b { width: 43px; height: 43px; font-size: 15px; }
    .round-chip { margin-top: 18px; }
    .countdown strong { font-size: 25px; }
    .quick-grid { gap: 8px; }
    .quick-grid a { min-height: 92px; padding: 10px 4px; }
    .quick-grid a > b { width: 35px; height: 35px; font-size: 10px; }
    .quick-grid strong { font-size: 11px; }
    .section-heading h2 { font-size: 25px; }
    .page-hero h1 { font-size: 36px; }
    .event-card.compact .poster { min-height: 350px; }
    .event-body { grid-template-columns: 108px 1fr; }
    .auth-showcase { min-height: 300px; }
}