:root {
    --primary: #0844a4;
    --primary-dark: #062d73;
    --blue: #008ed6;
    --pink: #ed0068;
    --orange: #ef6c00;
    --yellow: #f7b900;
    --green: #00834d;
    --lime: #83b916;
    --purple: #98008d;
    --secondary: #f7b900;
    --accent: #ed0068;
    --sky: #eaf6ff;
    --ink: #162342;
    --muted: #67738d;
    --surface: #ffffff;
    --border: #e5eaf2;
    --shadow: 0 14px 36px rgba(9, 51, 111, .12);
    --radius: 22px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    background: #f5f8fc;
    color: var(--ink);
    min-height: 100vh;
}

a { text-decoration: none; }

.app-shell { min-height: 100vh; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 12px 0;
    color: #fff;
    background:
        radial-gradient(circle at 14% 0%, rgba(0,142,214,.35), transparent 26%),
        radial-gradient(circle at 86% 0%, rgba(237,0,104,.28), transparent 24%),
        linear-gradient(135deg, var(--primary-dark), var(--primary));
    box-shadow: 0 8px 26px rgba(5, 35, 84, .22);
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.brand-mark {
    width: 60px;
}

.brand-logo img {
    width: 100%;
}

.brand-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 13px;
    line-height: 1.1;
    letter-spacing: .5px;
}

.brand-subtitle {
    font-weight: 800;
    color: var(--secondary);
    font-size: 12px;
}

.menu-button {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    color: #fff;
}

.desktop-nav {
    align-items: center;
    gap: 5px;
}

.desktop-nav a {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 13px;
    border-radius: 999px;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    background: rgba(255,255,255,.14);
    color: #fff;
}

.mobile-menu {
    color: #fff;
    background: linear-gradient(180deg, var(--primary-dark), #0b3d91);
}

.mobile-nav {
    display: grid;
    gap: 10px;
}

.mobile-nav a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    color: #fff;
    border-radius: 15px;
    background: rgba(255,255,255,.08);
}

.mobile-nav a i { width: 22px; text-align: center; color: var(--secondary); }

.main-content { padding-bottom: 84px; }

.hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 34px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 12%, rgba(247,185,0,.34), transparent 25%),
        radial-gradient(circle at 8% 88%, rgba(237,0,104,.30), transparent 28%),
        radial-gradient(circle at 75% 82%, rgba(0,131,77,.24), transparent 25%),
        linear-gradient(135deg, #052765, #0750b6 62%, #008ed6);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(45deg, transparent 46%, #fff 47%, #fff 53%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, #fff 47%, #fff 53%, transparent 54%);
    background-size: 42px 42px;
    mask-image: linear-gradient(to right, rgba(0,0,0,.45), transparent 58%);
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto -15% -80px;
    height: 150px;
    background: #f5f8fc;
    border-radius: 50% 50% 0 0;
}

.hero-content { position: relative; z-index: 2; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.hero h1 {
    margin: 16px 0 12px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(2.2rem, 8vw, 4.8rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -2px;
}

.hero h1 span { color: var(--secondary); }

.hero p {
    max-width: 640px;
    color: rgba(255,255,255,.84);
    font-size: 15px;
    line-height: 1.7;
}

.hero-card {
    margin-top: 24px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
}

.hero-card .meta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.hero-card .meta:last-child { margin-bottom: 0; }

.hero-card i {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--secondary);
    color: var(--primary-dark);
}

.hero-card strong { display: block; font-size: 13px; }
.hero-card small { color: rgba(255,255,255,.72); }

.section { padding: 28px 0; }

.section-heading {
    margin-bottom: 18px;
}

.section-heading .kicker {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
}

.section-heading h2 {
    margin: 6px 0 8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 25px;
}

.section-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
    font-size: 14px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.quick-card {
    min-height: 150px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.quick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(17,37,74,.15);
}

.quick-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    font-size: 20px;
}

.quick-card h3 {
    margin: 18px 0 4px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
}

.quick-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.quick-card .arrow {
    margin-top: 14px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

.bg-blue { background: linear-gradient(135deg, #0b3d91, #2071e7); }
.bg-pink { background: linear-gradient(135deg, #d82475, #f05f9b); }
.bg-gold { background: linear-gradient(135deg, #db9b08, #f4c542); }
.bg-green { background: linear-gradient(135deg, #23863d, #43c465); }
.bg-purple { background: linear-gradient(135deg, #6b3fb5, #9a68e4); }
.bg-cyan { background: linear-gradient(135deg, #0587a6, #19bddb); }

.page-hero {
    padding: 34px 0 28px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

.page-hero h1 {
    margin: 8px 0 6px;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 30px;
}

.page-hero p { margin: 0; color: rgba(255,255,255,.78); }

.content-card {
    padding: 20px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.logo-placeholder {
    min-height: 230px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(244,197,66,.6), transparent 23%),
        radial-gradient(circle at 80% 80%, rgba(232,62,140,.4), transparent 25%),
        linear-gradient(135deg, #0a2f72, #0c57c5);
    color: #fff;
}

.logo-placeholder i {
    font-size: 52px;
    color: var(--secondary);
}

.logo-placeholder h3 {
    margin-top: 14px;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
}

.feature-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.feature-item i {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 11px;
    background: var(--sky);
    color: var(--primary);
}

.pdf-frame {
    width: 100%;
    min-height: 72vh;
    border: 0;
    border-radius: 18px;
    background: #e9eef6;
}

.btn-primary-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 17px;
    border: none;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #2071e7);
    font-weight: 800;
}

.search-box {
    position: relative;
}

.search-box i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--muted);
}

.search-box input {
    width: 100%;
    padding: 14px 15px 14px 44px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
    outline: none;
}

.winner-list {
    display: grid;
    gap: 13px;
}

.winner-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 8px 22px rgba(17,37,74,.07);
}

.winner-rank {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, #ffe083, var(--secondary));
    font-size: 19px;
    font-weight: 900;
}

.winner-info { min-width: 0; }
.winner-info h3 { margin: 0 0 3px; font-size: 15px; font-weight: 800; }
.winner-info p { margin: 0; color: var(--muted); font-size: 12px; }
.prize-tag {
    margin-left: auto;
    max-width: 100px;
    text-align: right;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
}

.guest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.guest-card {
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.guest-photo {
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #dceaff, #f2f6fc);
    color: var(--primary);
    font-size: 54px;
}

.guest-body { padding: 14px; }
.guest-body h3 { margin: 0 0 5px; font-size: 14px; font-weight: 800; }
.guest-body p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.contest-stack {
    display: grid;
    gap: 16px;
}

.contest-card {
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.contest-banner {
    padding: 22px;
    color: #fff;
}

.contest-banner .contest-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: rgba(255,255,255,.18);
    font-size: 23px;
}

.contest-banner h2 {
    margin: 15px 0 4px;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 900;
}

.contest-body { padding: 18px; }

.mechanics {
    margin: 0;
    padding-left: 20px;
}

.mechanics li {
    margin-bottom: 10px;
    color: var(--muted);
    line-height: 1.55;
    font-size: 13px;
}

.update-list {
    display: grid;
    gap: 13px;
}

.update-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 19px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--ink);
}

.update-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #1877f2;
    color: #fff;
    font-size: 20px;
}

.update-card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 800; }
.update-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.update-card .visit { margin-top: 8px; color: #1877f2; font-size: 12px; font-weight: 800; }

.site-footer {
    padding: 35px 20px 100px;
    text-align: center;
    color: rgba(255,255,255,.76);
    background: #071f49;
}

.site-footer h6 { margin: 12px 0 6px; color: #fff; font-weight: 800; }
.site-footer p { max-width: 520px; margin: 0 auto; font-size: 12px; line-height: 1.6; }
.footer-logo { color: var(--secondary); font-size: 28px; }
.footer-divider { width: 50px; height: 3px; margin: 18px auto; border-radius: 99px; background: var(--secondary); }

.bottom-nav {
    position: fixed;
    z-index: 1040;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 66px;
    padding: 7px;
    border-radius: 22px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(230,235,243,.9);
    box-shadow: 0 16px 40px rgba(12,35,75,.22);
    backdrop-filter: blur(16px);
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--muted);
    border-radius: 15px;
    font-size: 10px;
    font-weight: 700;
}

.bottom-nav a i { font-size: 17px; }
.bottom-nav a.active { color: var(--primary); background: var(--sky); }

.empty-state {
    padding: 34px 20px;
    text-align: center;
    border-radius: 20px;
    background: #fff;
    border: 1px dashed #cdd7e7;
}

.empty-state i { font-size: 38px; color: var(--primary); }
.empty-state h3 { margin: 14px 0 6px; font-size: 17px; font-weight: 800; }
.empty-state p { margin: 0; color: var(--muted); font-size: 13px; }

@media (min-width: 768px) {
    .quick-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .guest-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .hero { padding: 70px 0 55px; }
}

@media (min-width: 992px) {
    .main-content { padding-bottom: 0; }
    .site-footer { padding-bottom: 35px; }
    .quick-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
    .guest-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .container { max-width: 1180px; }
    .hero-card { max-width: 420px; margin-left: auto; }
}


.festival-stripe {
    height: 7px;
    background: linear-gradient(
        90deg,
        var(--blue) 0 14%,
        var(--green) 14% 28%,
        var(--pink) 28% 42%,
        var(--yellow) 42% 56%,
        var(--orange) 56% 70%,
        var(--purple) 70% 84%,
        var(--blue) 84% 100%
    );
}

.hero-logo-wrap {
    position: relative;
    max-width: 360px;
    margin: 0 auto 18px;
    padding: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    box-shadow: 0 24px 54px rgba(0,0,0,.22);
}

.hero-logo-wrap::before,
.hero-logo-wrap::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    transform: rotate(45deg);
}

.hero-logo-wrap::before {
    left: -18px;
    top: 24px;
    background: linear-gradient(135deg, var(--pink), var(--orange));
}

.hero-logo-wrap::after {
    right: -18px;
    bottom: 28px;
    background: linear-gradient(135deg, var(--green), var(--blue));
}

.hero-logo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.btn-outline-festival {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 17px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.38);
    color: #fff;
    background: rgba(255,255,255,.10);
    font-weight: 800;
    backdrop-filter: blur(10px);
}

.btn-outline-festival:hover {
    color: var(--primary-dark);
    background: #fff;
}

.official-logo-card {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 280px;
    padding: 18px;
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(circle at 15% 15%, rgba(237,0,104,.13), transparent 26%),
        radial-gradient(circle at 85% 18%, rgba(247,185,0,.18), transparent 25%),
        radial-gradient(circle at 18% 85%, rgba(0,131,77,.14), transparent 24%),
        radial-gradient(circle at 84% 84%, rgba(0,142,214,.14), transparent 26%),
        #fff;
    border: 1px solid var(--border);
}

.official-logo-card img {
    width: min(100%, 420px);
    height: auto;
    display: block;
}

.quick-card {
    position: relative;
    overflow: hidden;
}

.quick-card::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -28px;
    width: 72px;
    height: 72px;
    border: 10px solid rgba(0,0,0,.035);
    transform: rotate(45deg);
}

.quick-card:nth-child(1) { border-top: 5px solid var(--blue); }
.quick-card:nth-child(2) { border-top: 5px solid var(--pink); }
.quick-card:nth-child(3) { border-top: 5px solid var(--yellow); }
.quick-card:nth-child(4) { border-top: 5px solid var(--green); }
.quick-card:nth-child(5) { border-top: 5px solid var(--purple); }
.quick-card:nth-child(6) { border-top: 5px solid var(--orange); }

.bg-blue { background: linear-gradient(135deg, #0874ca, var(--blue)); }
.bg-pink { background: linear-gradient(135deg, #c90061, var(--pink)); }
.bg-gold { background: linear-gradient(135deg, #e98b00, var(--yellow)); }
.bg-green { background: linear-gradient(135deg, #006c42, var(--green)); }
.bg-purple { background: linear-gradient(135deg, #760075, var(--purple)); }
.bg-cyan { background: linear-gradient(135deg, var(--orange), #ff9700); }

.page-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 15%, rgba(247,185,0,.30), transparent 22%),
        radial-gradient(circle at 12% 80%, rgba(237,0,104,.25), transparent 24%),
        linear-gradient(135deg, var(--primary-dark), var(--primary), var(--blue));
}

.page-hero::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 150px;
    height: 150px;
    border: 18px solid rgba(255,255,255,.09);
    transform: rotate(45deg);
}

.contest-card:nth-child(1) { border-top: 6px solid var(--green); }
.contest-card:nth-child(2) { border-top: 6px solid var(--pink); }
.contest-card:nth-child(3) { border-top: 6px solid var(--purple); }

.winner-rank {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    color: #fff;
}

.bottom-nav a.active {
    color: var(--primary);
    background: linear-gradient(135deg, rgba(0,142,214,.12), rgba(237,0,104,.08));
}

.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 20%, rgba(237,0,104,.18), transparent 25%),
        radial-gradient(circle at 88% 70%, rgba(0,142,214,.18), transparent 28%),
        #061f4f;
}

@media (min-width: 992px) {
    .hero-logo-wrap {
        max-width: 390px;
    }
}


/* Clean contest page */
.contest-page-hero { padding-bottom: 48px; }
.contest-nav-section { position: relative; z-index: 3; margin-top: -24px; }
.contest-selector { display: grid; gap: 10px; }
.contest-selector-card {
    --contest-color: var(--green);
    display: grid;
    grid-template-columns: auto auto minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 13px 15px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border);
    border-left: 5px solid var(--contest-color);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(10,48,106,.10);
    transition: .2s ease;
}
.contest-selector-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 36px rgba(10,48,106,.15); }
.selector-number { color: #9aa5b7; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.selector-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--contest-color); font-size: 18px; }
.selector-copy { min-width: 0; display: flex; flex-direction: column; }
.selector-copy strong { font-size: 14px; line-height: 1.25; }
.selector-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.selector-arrow { color: var(--contest-color); font-size: 12px; }
.contest-content-section { padding-top: 24px; }
.contest-detail {
    --contest-color: var(--green);
    --contest-soft: rgba(0,131,77,.08);
    margin-bottom: 26px;
    scroll-margin-top: 96px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(9,44,97,.09);
}
.contest-theme-green { --contest-color: var(--green); --contest-soft: rgba(0,131,77,.08); }
.contest-theme-pink { --contest-color: var(--pink); --contest-soft: rgba(237,0,104,.08); }
.contest-theme-purple { --contest-color: var(--purple); --contest-soft: rgba(152,0,141,.08); }
.contest-detail-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 124px;
    padding: 22px 20px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--contest-color), #051f4f 28%), var(--contest-color));
}
.contest-detail-header::after { content:""; position:absolute; right:-45px; top:-60px; width:170px; height:170px; border:22px solid rgba(255,255,255,.11); transform:rotate(45deg); }
.contest-title-area { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.contest-title-icon { width: 52px; height: 52px; flex: 0 0 52px; display:grid; place-items:center; border-radius:16px; background:rgba(255,255,255,.16); font-size:22px; }
.contest-type { display:block; margin-bottom:4px; color:rgba(255,255,255,.72); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.contest-detail-header h2 { margin:0; font-family:"Montserrat",sans-serif; font-size:clamp(21px,6vw,31px); font-weight:900; line-height:1.05; }
.contest-subtitle { margin:4px 0 0; color:rgba(255,255,255,.82); font-size:12px; }
.contest-big-number { position:relative; z-index:1; color:rgba(255,255,255,.18); font-family:"Montserrat",sans-serif; font-size:54px; font-weight:900; line-height:1; }
.contest-intro-grid { display:grid; gap:0; border-bottom:1px solid var(--border); }
.contest-summary-panel { padding:20px; }
.contest-summary-panel > p { margin:0; color:var(--muted); font-size:13px; line-height:1.75; }
.contest-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.contest-fact { min-width:0; display:flex; align-items:center; gap:10px; padding:11px; border-radius:14px; background:var(--contest-soft); }
.contest-fact > i { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:10px; color:#fff; background:var(--contest-color); font-size:12px; }
.contest-fact div { min-width:0; }
.contest-fact small { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.contest-fact strong { display:block; margin-top:2px; overflow:hidden; color:var(--ink); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.contest-visual { min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px; background:linear-gradient(145deg,var(--contest-soft),#fff); }
.contest-visual img { width:min(100%,260px); max-height:230px; object-fit:contain; mix-blend-mode:multiply; }
.trashion-visual-icon { position:relative; width:112px; height:112px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--contest-color); box-shadow:0 18px 36px color-mix(in srgb,var(--contest-color),transparent 70%); }
.trashion-visual-icon .fa-recycle { position:absolute; font-size:82px; opacity:.28; }
.trashion-visual-icon .fa-shirt { position:relative; font-size:38px; }
.contest-visual > strong { margin-top:14px; color:var(--contest-color); font-family:"Montserrat",sans-serif; font-size:18px; }
.contest-visual > span { margin-top:3px; color:var(--muted); font-size:12px; }
.contest-details-grid { display:grid; gap:20px; padding:18px; background:#fbfcff; }
.contest-accordion .accordion-item { margin-bottom:10px; overflow:hidden; border:1px solid var(--border); border-radius:15px !important; background:#fff; }
.contest-accordion .accordion-button { gap:11px; padding:14px; color:var(--ink); background:#fff; box-shadow:none; font-size:13px; font-weight:800; }
.contest-accordion .accordion-button:not(.collapsed) { color:var(--contest-color); background:var(--contest-soft); }
.contest-accordion .accordion-button::after { width:15px; height:15px; background-size:15px; }
.accordion-count { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--contest-color); font-size:9px; }
.contest-accordion .accordion-body { padding:5px 15px 16px; }
.clean-rule-list { margin:0; padding:0; list-style:none; counter-reset:rules; }
.clean-rule-list li { position:relative; counter-increment:rules; padding:11px 0 11px 34px; color:#59667d; border-bottom:1px solid #edf0f5; font-size:12px; line-height:1.65; }
.clean-rule-list li:last-child { border-bottom:0; }
.clean-rule-list li::before { content:counter(rules); position:absolute; left:0; top:11px; width:23px; height:23px; display:grid; place-items:center; border-radius:50%; color:var(--contest-color); background:var(--contest-soft); font-size:9px; font-weight:900; }
.contest-sidebar { display:grid; align-content:start; gap:14px; }
.criteria-card,.prize-card { padding:17px; border:1px solid var(--border); border-radius:18px; background:#fff; }
.side-card-heading { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.side-card-heading i { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:var(--contest-color); font-size:13px; }
.side-card-heading h3 { margin:0; font-size:14px; font-weight:900; }
.criteria-list { display:grid; gap:13px; }
.criterion-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; color:#526078; font-size:10px; line-height:1.4; }
.criterion-top strong { flex:0 0 auto; color:var(--contest-color); font-size:11px; }
.criterion-track { height:5px; margin-top:7px; overflow:hidden; border-radius:99px; background:#edf1f6; }
.criterion-track span { display:block; height:100%; border-radius:inherit; background:var(--contest-color); }
.criteria-total { display:flex; justify-content:space-between; margin-top:15px; padding-top:13px; border-top:1px solid var(--border); color:var(--ink); font-size:12px; font-weight:900; }
.prize-list { display:grid; gap:9px; }
.prize-row { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; color:#4f5d75; background:var(--contest-soft); font-size:11px; font-weight:700; }
.prize-medal { width:29px; height:29px; flex:0 0 29px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--contest-color); font-size:11px; }
.contest-final-note { display:flex; align-items:flex-start; gap:12px; padding:16px; border:1px solid #dce7f7; border-radius:17px; background:#f2f7ff; }
.contest-final-note i { margin-top:2px; color:var(--primary); }
.contest-final-note p { margin:0; color:#56647a; font-size:12px; line-height:1.6; }

@media (min-width:768px) {
    .contest-selector { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .contest-selector-card { grid-template-columns:auto auto minmax(0,1fr); }
    .selector-arrow { display:none; }
    .contest-intro-grid { grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); }
    .contest-details-grid { grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); padding:24px; }
    .contest-summary-panel { padding:26px; }
    .contest-facts { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .contest-fact { flex-direction:column; align-items:flex-start; }
    .contest-fact strong { white-space:normal; }
}
@media (min-width:992px) {
    .contest-detail { margin-bottom:36px; }
    .contest-detail-header { padding:28px 30px; }
    .contest-big-number { font-size:74px; }
    .contest-summary-panel { padding:30px; }
    .contest-details-grid { padding:28px; gap:26px; }
}