/* ── assets/css/contests.css ────────────────────────────────────
   Styles for Contests.html, Contest.html and ContestSubmit.html.
   Loaded alongside style.css. All colours and tokens come from the
   existing design system — no new CSS variables introduced.
   ──────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════ */
/* SHARED LAYOUT                                                  */
/* ══════════════════════════════════════════════════════════════ */

.contests-wrapper,
.contest-wrapper {
    max-width: 1100px;
    margin: 0 auto 40px auto;
    padding: 0 8px;
}

.contest-submit-wrapper {
    max-width: 640px;
    margin: 0 auto 40px auto;
    padding: 0 8px;
}

/* ══════════════════════════════════════════════════════════════ */
/* CONTESTS LISTING (Contests.html)                               */
/* ══════════════════════════════════════════════════════════════ */

.contests-hero {
    text-align: center;
    margin-bottom: 32px;
    padding: 0 12px;
}

.contests-hero h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 900;
    color: var(--on-background);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.contests-hero p {
    color: var(--on-background-alt);
    font-size: 1rem;
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.7;
}

.contests-section { margin-bottom: 36px; }

.contests-section-heading {
    text-align: center;
    margin: 12px 0 20px 0;
}

.contests-section-heading h2 {
    display: inline-block;
    color: var(--on-background) !important;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 4px;
    margin: 0;
}

.contests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.contest-card {
    background: var(--on-primary);
    border-radius: 14px;
    padding: 22px 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, #ff0000, #ff7400) 1;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

[data-theme="dark"] .contest-card { background: #1e1e1e; }

.contest-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

/* ══════════════════════════════════════════════════════════════ */
/* CONTEST POSTERS & ICON FALLBACKS (public-facing)              */
/* ══════════════════════════════════════════════════════════════ */

/* Card poster (in listings) */
.contest-card-poster {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 220px;       /* add this line */
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(255,0,0,0.06), rgba(255,116,0,0.08));
}
.contest-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.contest-card:hover .contest-card-poster img {
    transform: scale(1.04);
}

/* Card icon fallback */
.contest-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,0,0,0.10), rgba(255,116,0,0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.contest-card-icon i {
    font-size: 1.7rem;
    color: var(--secondary-color);
}

/* Hero poster (single contest page) */
.contest-hero-poster {
    width: 100%;
    max-width: 720px;        /* cap how wide it can grow */
    max-height: 480px;       /* hard ceiling on PC */
    margin: 0 auto 18px auto;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,0,0,0.06), rgba(255,116,0,0.08));
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
.contest-hero-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hero icon fallback */
.contest-hero-icon {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,0,0,0.10), rgba(255,116,0,0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.contest-hero-icon i {
    font-size: 2.4rem;
    color: var(--secondary-color);
}

@media (max-width: 480px) {
    .contest-hero-poster { aspect-ratio: 16 / 9; }
    .contest-hero-icon { width: 68px; height: 68px; }
    .contest-hero-icon i { font-size: 2rem; }
}

/* ══════════════════════════════════════════════════════════════ */
/* CONTEST CARD CONTENT                                           */
/* ══════════════════════════════════════════════════════════════ */

.contest-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--on-background);
    margin: 0 0 6px 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.contest-card-desc {
    color: var(--on-background-alt);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 14px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.contest-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 0.78rem;
    color: var(--on-background-alt);
    margin-bottom: 14px;
}

.contest-card-meta i {
    color: var(--secondary-color);
    margin-right: 4px;
}

.contest-card-cta {
    margin-top: auto;
    padding: 10px 16px;
    background: linear-gradient(45deg, #ff0000, #ff7400);
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.contest-card-cta:hover {
    box-shadow: 0 6px 18px rgba(255, 0, 0, 0.35);
    transform: translateY(-1px);
}

.contests-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--on-background-alt);
}

.contests-empty i {
    font-size: 2.6rem;
    margin-bottom: 14px;
    opacity: 0.4;
    display: block;
}

.contests-empty p {
    color: var(--on-background-alt);
    font-size: 0.95rem;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════ */
/* STATUS PILLS                                                   */
/* ══════════════════════════════════════════════════════════════ */

.contest-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.status-open    { background: rgba(40,167,69,0.15);  color: #28a745;  border: 1.5px solid rgba(40,167,69,0.35); }
.status-voting  { background: rgba(13,110,253,0.12); color: #0d6efd;  border: 1.5px solid rgba(13,110,253,0.35); }
.status-closed  { background: rgba(108,117,125,0.12);color: #6c757d;  border: 1.5px solid rgba(108,117,125,0.3); }
.status-draft   { background: rgba(255,116,0,0.12);  color: #ff7400;  border: 1.5px solid rgba(255,116,0,0.35); }

.contest-status-pill i { font-size: 0.6em; }

/* ══════════════════════════════════════════════════════════════ */
/* SINGLE CONTEST (Contest.html)                                  */
/* ══════════════════════════════════════════════════════════════ */

.contest-page-loading,
.contest-page-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--on-background-alt);
}

.contest-page-loading i,
.contest-page-error i {
    font-size: 2rem;
    margin-bottom: 14px;
    display: block;
}

.contest-hero {
    background: var(--on-primary);
    border-radius: 18px;
    padding: 32px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-bottom: 24px;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, #ff0000, #ff7400) 1;
}

[data-theme="dark"] .contest-hero { background: #1e1e1e; }

.contest-hero-title {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    font-weight: 900;
    color: var(--on-background);
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.contest-hero-desc {
    color: var(--on-background-alt);
    line-height: 1.7;
    font-size: 0.97rem;
    margin: 0 0 18px 0;
}

.contest-info-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.contest-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: rgba(128,128,128,0.06);
    border-radius: 22px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--on-background);
    border: 1.5px solid var(--border-color, #ddd);
}

.contest-info-pill i { color: var(--secondary-color); }

[data-theme="dark"] .contest-info-pill {
    background: rgba(255,255,255,0.04);
    border-color: #2a2a2a;
}

/* Action area */
.contest-actions {
    background: var(--on-primary);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
    margin-bottom: 24px;
    text-align: center;
}

[data-theme="dark"] .contest-actions { background: #1e1e1e; }

.contest-actions h3 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    color: var(--on-background);
}

.contest-actions p {
    margin: 0 0 16px 0;
    color: var(--on-background-alt);
    font-size: 0.92rem;
}

.btn-enter-contest {
    display: inline-block;
    padding: 12px 26px;
    background: linear-gradient(45deg, #ff0000, #ff7400);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
    transition: all 0.2s;
}

.btn-enter-contest:hover {
    box-shadow: 0 8px 22px rgba(255, 0, 0, 0.45);
    transform: translateY(-2px);
}

.btn-enter-contest:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Entries grid */
.entries-section-heading {
    text-align: center;
    margin: 28px 0 20px 0;
}

.entries-section-heading h2 {
    display: inline-block;
    color: var(--on-background) !important;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 4px;
    margin: 0;
}

.entries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.entry-card {
    background: var(--on-primary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

[data-theme="dark"] .entry-card { background: #1e1e1e; }

.entry-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

.entry-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(128,128,128,0.08);
    overflow: hidden;
    position: relative;
}

.entry-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.entry-card-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: var(--on-background-alt);
    background: linear-gradient(135deg, rgba(255,0,0,0.06), rgba(255,116,0,0.06));
    text-align: center;
    padding: 20px;
}

.entry-card-fallback i {
    font-size: 2.2rem;
    color: var(--secondary-color);
}

.entry-card-fallback small { font-size: 0.78rem; }

.entry-card-fallback:has(i.fa-facebook) {
    padding-left: 14px;
    padding-right: 26px;
}

.entry-platform-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 4px 9px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    backdrop-filter: blur(4px);
}

.entry-platform-badge i { margin-right: 4px; }

.entry-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.entry-card-name {
    font-weight: 800;
    color: var(--on-background);
    font-size: 0.95rem;
    margin: 0 0 4px 0;
}

.entry-card-caption {
    color: var(--on-background-alt);
    font-size: 0.84rem;
    line-height: 1.55;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry-card-footer {
    display: flex;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}

.btn-view-original {
    flex: 1;
    min-width: 110px;
    padding: 8px 12px;
    background: transparent;
    color: var(--on-background-alt);
    border: 2px solid var(--primary-variant);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-view-original:hover {
    border-color: var(--secondary-color);
    color: var(--on-background);
    background: rgba(128,128,128,0.05);
}

.btn-vote {
    flex: 1;
    min-width: 110px;
    padding: 8px 12px;
    background: linear-gradient(45deg, #ff0000, #ff7400);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-vote:hover {
    box-shadow: 0 4px 14px rgba(255, 0, 0, 0.35);
    transform: translateY(-1px);
}

.btn-vote:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.entry-vote-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(13,110,253,0.1);
    color: #0d6efd;
    border: 1.5px solid rgba(13,110,253,0.3);
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 8px;
    width: max-content;
}

/* ══════════════════════════════════════════════════════════════ */
/* RESULTS BLOCK                                                  */
/* ══════════════════════════════════════════════════════════════ */

.contest-results {
    background: linear-gradient(135deg, rgba(255,0,0,0.04), rgba(255,116,0,0.04));
    border: 2px solid rgba(255,116,0,0.3);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    text-align: center;
}

.contest-results h3 {
    margin: 0 0 14px 0;
    color: var(--secondary-color);
    font-size: 1.2rem;
}

.contest-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.podium-card {
    background: var(--on-primary);
    border-radius: 10px;
    padding: 14px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    text-align: center;
}

[data-theme="dark"] .podium-card { background: #1e1e1e; }

.podium-card .podium-icon {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.podium-1 .podium-icon { color: #b8860b; }
.podium-2 .podium-icon { color: #708090; }
.podium-3 .podium-icon { color: #cd7f32; }

.podium-card .podium-place {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-background-alt);
    margin-bottom: 4px;
}

.podium-card .podium-name {
    font-weight: 800;
    color: var(--on-background);
    font-size: 0.9rem;
    line-height: 1.3;
    margin: 0 0 4px 0;
}

.podium-card .podium-score {
    font-size: 0.78rem;
    color: var(--on-background-alt);
}

@media (max-width: 480px) {
    .contest-podium { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════ */
/* ENTRY SUBMISSION FORM (ContestSubmit.html)                     */
/* ══════════════════════════════════════════════════════════════ */

.submit-card {
    background: var(--on-primary);
    border-radius: 14px;
    padding: 30px 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
}

[data-theme="dark"] .submit-card { background: #1e1e1e; }

.submit-card h1 {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
    color: var(--on-background);
}

.submit-card .submit-subtitle {
    color: var(--on-background-alt);
    font-size: 0.92rem;
    margin: 0 0 22px 0;
    line-height: 1.7;
}

.submit-allowed-platforms {
    background: rgba(128,128,128,0.05);
    border: 1.5px solid var(--border-color, #ddd);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 22px;
    font-size: 0.85rem;
    color: var(--on-background-alt);
    line-height: 1.6;
}

.submit-allowed-platforms strong {
    color: var(--on-background);
    display: block;
    margin-bottom: 4px;
}

.submit-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

.submit-field label {
    font-weight: 700;
    color: var(--on-background);
    font-size: 0.88rem;
}

.submit-field small {
    color: var(--on-background-alt);
    font-size: 0.78rem;
    margin-top: 2px;
}

.submit-field input,
.submit-field textarea {
    padding: 11px 14px;
    border: 2px solid var(--primary-variant);
    border-radius: 8px;
    background: var(--on-primary);
    color: var(--on-background);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
    width: 100%;
}

[data-theme="dark"] .submit-field input,
[data-theme="dark"] .submit-field textarea { background: #2a2a2a; }

.submit-field input:focus,
.submit-field textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.submit-field input:read-only {
    background: rgba(128,128,128,0.06);
    color: var(--on-background-alt);
    cursor: not-allowed;
}

.submit-field textarea {
    resize: vertical;
    min-height: 90px;
}

.btn-submit-entry {
    width: 100%;
    padding: 13px;
    background: linear-gradient(45deg, #ff0000, #ff7400, #ff1100);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255,0,0,0.3);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.btn-submit-entry:hover {
    box-shadow: 0 8px 25px rgba(255,0,0,0.45);
    transform: translateY(-2px);
}

.btn-submit-entry:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.submit-feedback {
    display: none;
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 16px;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
}

.submit-feedback.success {
    background: rgba(40,167,69,0.1);
    border: 1.5px solid rgba(40,167,69,0.4);
    color: #28a745;
}

.submit-feedback.error {
    background: rgba(220,53,69,0.09);
    border: 1.5px solid rgba(220,53,69,0.35);
    color: #dc3545;
}

.submit-feedback.show { display: block; }

.submit-token-error {
    background: var(--on-primary);
    border-radius: 14px;
    padding: 36px 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
    text-align: center;
}

[data-theme="dark"] .submit-token-error { background: #1e1e1e; }

.submit-token-error i {
    font-size: 2.6rem;
    color: var(--secondary-color);
    margin-bottom: 14px;
    display: block;
}

.submit-token-error h2 {
    color: var(--on-background);
    margin: 0 0 10px 0;
}

.submit-token-error p {
    color: var(--on-background-alt);
    margin: 0 0 18px 0;
    line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════ */
/* VOTE MODAL                                                     */
/* ══════════════════════════════════════════════════════════════ */

#vote-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 11000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.vote-modal-box {
    background: var(--on-primary);
    border-radius: 14px;
    padding: 26px 26px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

[data-theme="dark"] .vote-modal-box { background: #1e1e1e; }

.vote-modal-box h2 {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    color: var(--on-background);
}

.vote-modal-box p {
    margin: 0 0 16px 0;
    color: var(--on-background-alt);
    font-size: 0.9rem;
    line-height: 1.6;
}

.vote-modal-box .voting-for {
    background: rgba(255,116,0,0.06);
    border: 1.5px solid rgba(255,116,0,0.3);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: var(--on-background);
    margin-bottom: 16px;
}

.vote-modal-box .voting-for strong { color: var(--secondary-color); }

.vote-modal-box label {
    font-weight: 700;
    color: var(--on-background);
    font-size: 0.88rem;
    display: block;
    margin-bottom: 6px;
}

.vote-modal-box input[type="email"] {
    padding: 11px 14px;
    border: 2px solid var(--primary-variant);
    border-radius: 8px;
    background: var(--on-primary);
    color: var(--on-background);
    font-size: 0.95rem;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 14px;
}

[data-theme="dark"] .vote-modal-box input[type="email"] { background: #2a2a2a; }

.vote-modal-box input[type="email"]:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.vote-recaptcha-wrap {
    margin: 8px 0 16px 0;
    min-height: 78px;
    display: flex;
    justify-content: center;
}

.vote-modal-buttons {
    display: flex;
    gap: 10px;
}

.vote-modal-buttons .btn-cancel {
    flex: 1;
    padding: 11px 14px;
    background: transparent;
    color: var(--on-background-alt);
    border: 2px solid var(--primary-variant);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.vote-modal-buttons .btn-cancel:hover {
    border-color: var(--on-background);
    color: var(--on-background);
}

.vote-modal-buttons .btn-confirm {
    flex: 2;
    padding: 11px 14px;
    background: linear-gradient(45deg, #ff0000, #ff7400);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.vote-modal-buttons .btn-confirm:hover {
    box-shadow: 0 5px 16px rgba(255,0,0,0.3);
}

.vote-modal-buttons .btn-confirm:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.vote-modal-error {
    color: #dc3545;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 10px 0 0 0;
    display: none;
}

.vote-modal-error.show { display: block; }

/* ══════════════════════════════════════════════════════════════ */
/* ENTRY MODAL                                                    */
/* ══════════════════════════════════════════════════════════════ */

#entry-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 11000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.entry-modal-box {
    background: var(--on-primary);
    border-radius: 14px;
    padding: 26px 26px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

[data-theme="dark"] .entry-modal-box { background: #1e1e1e; }

.entry-modal-box h2 {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    color: var(--on-background);
}

.entry-modal-box p {
    margin: 0 0 14px 0;
    color: var(--on-background-alt);
    font-size: 0.88rem;
    line-height: 1.6;
}

.entry-modal-box .entry-fee-line {
    background: rgba(255,116,0,0.06);
    border: 1.5px solid rgba(255,116,0,0.3);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--on-background);
    text-align: center;
}

.entry-modal-box .entry-fee-line strong {
    color: var(--secondary-color);
    font-size: 1.05rem;
}

/* ══════════════════════════════════════════════════════════════ */
/* JUDGE SCORING UI                                               */
/* ══════════════════════════════════════════════════════════════ */

.judge-banner {
    background: linear-gradient(135deg, rgba(13,110,253,0.07), rgba(255,116,0,0.05));
    border: 2px solid rgba(13,110,253,0.3);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 22px;
    display: flex;
    gap: 14px;
    align-items: center;
}

.judge-banner i {
    font-size: 1.6rem;
    color: #0d6efd;
    flex-shrink: 0;
}

.judge-banner h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    color: var(--on-background);
}

.judge-banner p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--on-background-alt);
}

.judge-score-input {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid var(--primary-variant);
    border-radius: 8px;
    background: var(--on-primary);
    color: var(--on-background);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
    margin-top: 8px;
}

[data-theme="dark"] .judge-score-input { background: #2a2a2a; }

.judge-score-input:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.judge-score-input.scored {
    border-color: #28a745;
    background: rgba(40,167,69,0.05);
}

.btn-save-scores {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 22px auto 0 auto;
    padding: 13px 22px;
    background: linear-gradient(45deg, #ff0000, #ff7400);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255,0,0,0.3);
    transition: all 0.2s;
}

.btn-save-scores:hover {
    box-shadow: 0 8px 22px rgba(255,0,0,0.45);
    transform: translateY(-2px);
}

.btn-save-scores:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ══════════════════════════════════════════════════════════════ */
/* ADMIN CONTESTS PANEL                                           */
/* ══════════════════════════════════════════════════════════════ */

.admin-contest-card {
    background: var(--on-primary);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    border-left: 4px solid var(--border-color, #ddd);
    transition: box-shadow 0.2s, border-color 0.2s;
    margin-bottom: 14px;
}

[data-theme="dark"] .admin-contest-card { background: #1e1e1e; }

.admin-contest-card:hover {
    box-shadow: 0 6px 22px rgba(0,0,0,0.12);
}

.admin-contest-card.contest-status-open    { border-left-color: #28a745; }
.admin-contest-card.contest-status-voting  { border-left-color: #0d6efd; }
.admin-contest-card.contest-status-closed  { border-left-color: #6c757d; }
.admin-contest-card.contest-status-draft   { border-left-color: #ff7400; }

.admin-contest-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.admin-contest-emoji {
    width: 44px; height: 44px; flex-shrink: 0; margin-top: 2px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,0,0,0.10), rgba(255,116,0,0.12));
    display: flex; align-items: center; justify-content: center;
}
.admin-contest-emoji i {
    font-size: 1.3rem; color: var(--secondary-color);
}

/* Small "Poster" indicator pill in admin card title row */
.poster-uploaded-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255,116,0,0.12);
    color: #ff7400;
    border: 1px solid rgba(255,116,0,0.3);
}

.poster-uploaded-pill i { font-size: 0.85em; }

.admin-contest-body {
    flex: 1;
    min-width: 0;
}

.admin-contest-title {
    font-weight: 800;
    color: var(--on-background);
    font-size: 1rem;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-contest-meta {
    font-size: 0.82rem;
    color: var(--on-background-alt);
    margin-bottom: 6px;
    line-height: 1.6;
}

.admin-contest-meta i {
    margin-right: 3px;
    color: var(--secondary-color);
}

.admin-contest-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: flex-start;
}

.btn-toggle-sub {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    background: rgba(13,110,253,0.1);
    color: #0d6efd;
    border: 1.5px solid #0d6efd;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-toggle-sub:hover { background: #0d6efd; color: #fff; }

.contest-sub-panel {
    display: none;
    margin-top: 14px;
    border-top: 1px dashed rgba(128,128,128,0.25);
    padding-top: 14px;
    width: 100%;
}

.contest-sub-panel.open { display: block; }

.contest-sub-panel-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.contest-sub-tab {
    padding: 6px 13px;
    border: 1.5px solid var(--primary-variant);
    background: transparent;
    color: var(--on-background-alt);
    border-radius: 18px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.contest-sub-tab.active {
    background: linear-gradient(45deg, #ff0000, #ff7400);
    color: #fff;
    border-color: transparent;
}

.contest-sub-tab:hover:not(.active) {
    border-color: var(--secondary-color);
    color: var(--on-background);
}

.entry-admin-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    background: rgba(128,128,128,0.04);
    border-radius: 10px;
    border: 1.5px solid var(--border-color, #ddd);
    margin-bottom: 10px;
}

[data-theme="dark"] .entry-admin-row {
    background: rgba(255,255,255,0.03);
    border-color: #2a2a2a;
}

.entry-admin-thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(128,128,128,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.entry-admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.entry-admin-thumb i {
    color: var(--on-background-alt);
    font-size: 1.5rem;
}

.entry-admin-body {
    flex: 1;
    min-width: 0;
}

.entry-admin-name {
    font-weight: 800;
    color: var(--on-background);
    font-size: 0.92rem;
    margin: 0 0 3px 0;
    word-break: break-word;
}

.entry-admin-meta {
    font-size: 0.78rem;
    color: var(--on-background-alt);
    margin-bottom: 6px;
    word-break: break-all;
}

.entry-admin-meta a {
    color: var(--secondary-color);
}

.entry-admin-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.btn-approve {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    background: rgba(40,167,69,0.1);
    color: #28a745;
    border: 1.5px solid #28a745;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-approve:hover { background: #28a745; color: #fff; }

.btn-reject {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    background: rgba(220,53,69,0.1);
    color: #dc3545;
    border: 1.5px solid #dc3545;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-reject:hover { background: #dc3545; color: #fff; }

.entry-status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.entry-status-pending  { background: rgba(255,116,0,0.15);  color: #ff7400; }
.entry-status-approved { background: rgba(40,167,69,0.15);  color: #28a745; }
.entry-status-rejected { background: rgba(108,117,125,0.15);color: #6c757d; }

.vote-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(128,128,128,0.04);
    border-radius: 8px;
    border: 1.5px solid var(--border-color, #ddd);
    margin-bottom: 8px;
}

[data-theme="dark"] .vote-bar-row {
    background: rgba(255,255,255,0.03);
    border-color: #2a2a2a;
}

.vote-bar-name {
    flex: 0 0 35%;
    font-weight: 700;
    color: var(--on-background);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vote-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(128,128,128,0.18);
    border-radius: 99px;
    overflow: hidden;
}

.vote-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff0000, #ff7400);
    border-radius: 99px;
}

.vote-bar-count {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--secondary-color);
    min-width: 38px;
    text-align: right;
}

.vote-suspicious-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 800;
    background: rgba(255,116,0,0.12);
    color: #ff7400;
    border: 1px solid rgba(255,116,0,0.3);
    margin-left: 6px;
}

.judge-admin-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(128,128,128,0.04);
    border-radius: 8px;
    border: 1.5px solid var(--border-color, #ddd);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

[data-theme="dark"] .judge-admin-row {
    background: rgba(255,255,255,0.03);
    border-color: #2a2a2a;
}

.judge-admin-name {
    flex: 1;
    min-width: 140px;
    font-weight: 700;
    color: var(--on-background);
    font-size: 0.88rem;
}

.judge-admin-name small {
    display: block;
    color: var(--on-background-alt);
    font-weight: 400;
    font-size: 0.78rem;
    margin-top: 2px;
}

.judge-progress {
    font-size: 0.82rem;
    color: var(--on-background-alt);
    min-width: 90px;
}

.judge-progress strong { color: var(--on-background); }

.judge-add-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 14px;
}

@media (max-width: 540px) {
    .judge-add-form { grid-template-columns: 1fr; }
}

.judge-add-form input {
    padding: 9px 12px;
    border: 2px solid var(--primary-variant);
    border-radius: 7px;
    background: var(--on-primary);
    color: var(--on-background);
    font-size: 0.88rem;
    box-sizing: border-box;
    width: 100%;
}

[data-theme="dark"] .judge-add-form input { background: #2a2a2a; }

.judge-add-form input:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.btn-add-judge {
    padding: 9px 16px;
    background: rgba(13,110,253,0.1);
    color: #0d6efd;
    border: 1.5px solid #0d6efd;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-add-judge:hover { background: #0d6efd; color: #fff; }

.admin-results-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(128,128,128,0.04);
    border-radius: 8px;
    border: 1.5px solid var(--border-color, #ddd);
    margin-bottom: 8px;
}

[data-theme="dark"] .admin-results-row {
    background: rgba(255,255,255,0.03);
    border-color: #2a2a2a;
}

.admin-results-rank {
    font-size: 1.4rem;
    font-weight: 900;
    width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.admin-results-rank-1 { color: #b8860b; }
.admin-results-rank-2 { color: #708090; }
.admin-results-rank-3 { color: #cd7f32; }

.admin-results-body { flex: 1; }

.admin-results-name {
    font-weight: 800;
    color: var(--on-background);
    font-size: 0.95rem;
}

.admin-results-stats {
    font-size: 0.8rem;
    color: var(--on-background-alt);
    margin-top: 2px;
}

.admin-results-score {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--secondary-color);
    min-width: 70px;
    text-align: right;
}

.judge-weight-row {
    display: none;
}

.judge-weight-row.visible {
    display: flex;
}

.og-preview {
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid var(--border-color, #ddd);
    background: rgba(128,128,128,0.04);
    display: flex;
    align-items: stretch;
    max-width: 100%;
}

.og-preview img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
}

.og-preview-body {
    padding: 10px 12px;
    flex: 1;
    min-width: 0;
}

.og-preview-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--on-background);
    margin: 0 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.og-preview-desc {
    font-size: 0.78rem;
    color: var(--on-background-alt);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.contest-banner {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 18px;
    text-align: center;
    font-weight: 600;
    font-size: 0.93rem;
}

.contest-banner.success {
    background: rgba(40,167,69,0.1);
    border: 2px solid rgba(40,167,69,0.4);
    color: #28a745;
}

.contest-banner.info {
    background: rgba(13,110,253,0.08);
    border: 2px solid rgba(13,110,253,0.35);
    color: #0d6efd;
}

.contest-banner.error {
    background: rgba(220,53,69,0.08);
    border: 2px solid rgba(220,53,69,0.35);
    color: #dc3545;
}

@media (max-width: 720px) {
    .admin-contest-row { flex-direction: column; }
    .admin-contest-actions { width: 100%; justify-content: flex-end; margin-top: 10px; }
    .entries-grid, .contests-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .entries-grid, .contests-grid { grid-template-columns: 1fr; }
    .entry-admin-row { flex-direction: column; }
    .entry-admin-thumb { width: 100%; height: 160px; }
}