:root {
    --font-size: 16px;
    --background: #ffffff;
    --foreground: oklch(0.145 0 0);
    --card: #ffffff;
    --card-foreground: oklch(0.145 0 0);
    --primary: #030213;
    --secondary: oklch(0.95 0.0058 264.53);
    --muted: #ececf0;
    --muted-foreground: #717182;
    --accent: #e9ebef;
    --destructive: #d4183d;
    --border: rgba(0, 0, 0, 0.1);
    --ring: oklch(0.708 0 0);
    --radius: 0.625rem;

    /* Landing palette */
    --navy: #0F172A;
    --navy-2: #1A2332;
    --navy-3: #1E293B;
    --navy-line: rgba(148, 163, 184, .18);
    --navy-soft: #4a6070;
    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --gold: #F1F5F9;
    --beige: #F8FAFC;
    --brand: #60A5FA;
    --brand-soft: rgba(96, 165, 250, .14);
    --brand-deep: #3B82F6;
}

.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --secondary: oklch(0.269 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --border: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
}

* { box-sizing: border-box; }
html { font-size: var(--font-size); scroll-behavior: smooth; }
body.landing-page { overflow: hidden; }

.landing-scroll {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto;
}
.landing-scroll-content {
    min-height: 100%;
    transform: translateX(var(--landing-scroll-shift, 0px));
}
body.login-page { scrollbar-gutter: auto; }
body {
    margin: 0;
    font-family: "Poppins", "Inter", system-ui, sans-serif;
    background: var(--navy);
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.container { width: min(1280px, 100%); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 32px; } }

/* Shared section helpers */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.section-heading {
    margin: 14px 0 12px;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
}
.section-subheading {
    margin: 0 auto;
    color: var(--slate-400);
    font-size: 16px;
    line-height: 1.6;
    max-width: 640px;
}

/* Topbar (brand only) */
.topbar {
    position: sticky;
    top: 0;
    z-index: 85;
    background: rgba(15, 23, 42, .85);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}
.topbar-inner {
    position: relative;
    z-index: 1;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}
.brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--brand-deep);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
    flex: 0 0 auto;
}
.brand-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: .1px; color: #fff; }
.brand-tag { font-size: 11px; font-weight: 600; letter-spacing: .8px; color: var(--slate-400); text-transform: uppercase; margin-top: 4px; }
@media (max-width: 640px) {
    .topbar-inner { height: 60px; }
    .brand-icon { width: 34px; height: 34px; }
    .brand-name { font-size: 16px; }
    .brand-tag { font-size: 10px; }
}

/* Shared button transitions (kept for back-compat with modal markup) */
.pill,
.cta,
.announce-btn,
.fbtn,
.fmonth,
.event-btn,
.submit,
.eval-submit,
.eval-close-cta,
.admin-access-btn,
.close-modal,
.rating-star {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.pill:focus-visible,
.cta:focus-visible,
.announce-btn:focus-visible,
.fbtn:focus-visible,
.fmonth:focus-visible,
.event-btn:focus-visible,
.submit:focus-visible,
.eval-submit:focus-visible,
.eval-close-cta:focus-visible,
.admin-access-btn:focus-visible,
.close-modal:focus-visible,
.rating-star:focus-visible {
    outline: 2px solid rgba(96, 165, 250, .55);
    outline-offset: 2px;
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .92) 0%, rgba(30, 41, 59, .85) 50%, rgba(15, 23, 42, .94) 100%),
        url('https://images.unsplash.com/photo-1664273891579-22f28332f3c4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx1bml2ZXJzaXR5JTIwY2FtcHVzJTIwbW9kZXJufGVufDF8fHx8MTc3NTUzODYzM3ww&ixlib=rb-4.1.0&q=80&w=1080') center/cover no-repeat;
    z-index: -2;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(96, 165, 250, .10), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(59, 130, 246, .08), transparent 45%);
    z-index: -1;
    pointer-events: none;
}
.hero-inner {
    position: relative;
    text-align: center;
    padding: 88px 16px 96px;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(96, 165, 250, .08);
    border: 1px solid rgba(96, 165, 250, .25);
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 22px;
}
.hero-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .14);
}
.hero h1 {
    margin: 0 0 20px;
    font-size: clamp(2rem, 5.6vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
}
.hero h1 .accent {
    background: linear-gradient(120deg, #ffffff 0%, var(--brand) 50%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hero p {
    margin: 0 auto 36px;
    max-width: 680px;
    color: rgba(248, 250, 252, .82);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.6;
}
.hero-ctas {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.cta {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border: 0;
    font-family: inherit;
}
.cta-primary {
    background: var(--brand-deep);
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
}
.cta-primary:hover {
    background: #2563EB;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .35);
}
.cta-secondary {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .26);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.cta-secondary:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .42);
    transform: translateY(-2px);
}
.cta-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cta-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hero stats panel */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 620px;
    margin: 52px auto 0;
    padding: 22px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.hero-stat-value {
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}
.hero-stat-label {
    font-size: 11.5px;
    color: var(--slate-400);
    font-weight: 600;
    margin-top: 4px;
    letter-spacing: .3px;
}
@media (max-width: 640px) {
    .hero-inner { padding: 64px 16px 72px; }
    .hero-stats { padding: 16px 12px; gap: 10px; }
    .hero-stat-label { font-size: 10.5px; }
}

/* Features (Why Use This System) */
.features {
    position: relative;
    padding: 90px 0 80px;
    background:
        radial-gradient(circle at 10% 0%, rgba(96, 165, 250, .04), transparent 55%),
        var(--navy);
}
.features-head {
    text-align: center;
    margin: 0 auto 48px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card {
    position: relative;
    padding: 28px 26px;
    background: var(--navy-3);
    border: 1px solid var(--navy-line);
    border-radius: 18px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.feature-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(96, 165, 250, .35);
    opacity: 0;
    transition: opacity .25s ease;
}
.feature-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, .3);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}
.feature-card:hover::before { opacity: 1; }
.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.feature-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #fff; }
.feature-desc { margin: 0; color: var(--slate-400); font-size: 14px; line-height: 1.6; }

/* How It Works */
.how {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(180deg, var(--navy) 0%, #0B1224 100%);
}
.how-head {
    text-align: center;
    margin: 0 auto 50px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.how-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}
@media (min-width: 768px) { .how-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.step-card {
    position: relative;
    text-align: center;
    padding: 34px 24px;
    background: rgba(30, 41, 59, .55);
    border: 1px solid var(--navy-line);
    border-radius: 18px;
    transition: transform .25s ease, border-color .25s ease;
}
.step-card:hover { transform: translateY(-2px); border-color: rgba(96, 165, 250, .25); }
.step-num {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--brand-deep);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
}
.step-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #fff; }
.step-desc { margin: 0; color: var(--slate-400); font-size: 14px; line-height: 1.6; }

/* Announcements */
.announce {
    background: var(--navy);
    padding: 80px 0;
    position: relative;
}
.hero + .announce {
    padding-top: 64px;
}
.announce-head {
    text-align: center;
    margin: 0 auto 40px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.announce-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .announce-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; } }
.announce-card {
    position: relative;
    border: 1px solid var(--navy-line);
    border-radius: 18px;
    padding: 26px 24px;
    background: var(--navy-3);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 260px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.announce-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, .25);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.announce-card.important {
    border-color: rgba(96, 165, 250, .35);
    background: var(--navy-3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.announce-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.announce-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.announce-icon-tile {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
}
.announce-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: rgba(148, 163, 184, .14);
    color: var(--slate-400);
}
.announce-card.important .announce-tag {
    background: var(--brand-soft);
    color: var(--brand);
}
.announce-card h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}
.announce-card-body { flex: 1; }
.announce-card-body p { margin-top: 10px; }
.announce-card p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(248, 250, 252, .82); }
.announce-btn {
    width: 100%;
    margin-top: auto;
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
a.announce-btn { text-decoration: none; }
.announce-btn.gold {
    background: var(--brand-deep);
    color: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .25);
}
.announce-btn.gold:hover {
    background: #2563EB;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .35);
}
.announce-btn.ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(248, 250, 252, .32);
}
.announce-btn.ghost:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .55);
    transform: translateY(-2px);
}

/* Events */
.events {
    background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%);
    color: var(--navy-2);
    padding: 90px 0 80px;
}
.events-head { text-align: center; margin-bottom: 36px; display: flex; flex-direction: column; align-items: center; }
.events-head .section-eyebrow { background: rgba(15, 23, 42, .08); color: var(--navy-2); }
.events-head h2 { color: var(--navy-2); margin: 14px 0 10px; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.01em; }
.events-head p { margin: 0 auto; color: var(--slate-500); font-size: 16px; line-height: 1.6; max-width: 620px; }

.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 44px;
    position: relative;
}
.filter-group {
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}
.fbtn {
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: 10px 18px;
    color: var(--slate-500);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
}
.fbtn:hover { background: #F1F5F9; color: var(--navy-2); }
.fbtn.active { background: var(--navy-2); color: #fff; box-shadow: 0 6px 14px rgba(15, 23, 42, .22); }
.filter-icon { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.filter-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.fmonth {
    border: 1px solid #E2E8F0;
    background: #fff;
    border-radius: 14px;
    padding: 12px 18px;
    color: var(--navy-2);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}
.fmonth:hover { background: #F8FAFC; border-color: #CBD5E1; transform: translateY(-1px); }
.month-icon { width: 16px; height: 16px; color: var(--slate-500); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.month-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.date-pop {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .15);
    z-index: 25;
    padding: 16px;
    color: var(--navy-2);
}
.date-pop.open { display: block; }
.date-pop label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: .5px; }
.date-pop input {
    width: 100%;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--navy-2);
    font-family: inherit;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.date-pop input:focus { outline: 0; border-color: var(--navy-2); background: #fff; box-shadow: 0 0 0 3px rgba(15, 23, 42, .08); }
.month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mbtn {
    border: 0;
    border-radius: 8px;
    padding: 9px 6px;
    background: #F1F5F9;
    font-size: 12px;
    font-weight: 700;
    color: var(--slate-500);
    cursor: pointer;
    font-family: inherit;
    transition: background-color .2s, color .2s;
}
.mbtn:hover { background: #E2E8F0; color: var(--navy-2); }
.mbtn.active { background: var(--navy-2); color: #fff; }
.month-all { grid-column: 1 / -1; background: rgba(15, 23, 42, .08); color: var(--navy-2); }
.month-all.active { background: var(--navy-2); color: #fff; }
.dp-actions { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dp-actions button { border: 0; border-radius: 10px; padding: 10px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background-color .2s, transform .15s; }
.clear { background: #F1F5F9; color: var(--slate-500); }
.clear:hover { background: #E2E8F0; }
.apply { background: var(--navy-2); color: #fff; }
.apply:hover { background: #0F172A; transform: translateY(-1px); }

.events-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 768px) { .events-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .events-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.event-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, .14);
    border-color: #CBD5E1;
}
.event-media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.event-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
.event-card:hover .event-media img { transform: scale(1.05); }
.badge {
    position: absolute;
    top: 14px;
    left: 14px;
    border-radius: 999px;
    color: var(--navy-2);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    letter-spacing: .3px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .15);
}
.badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--navy-soft);
}
.badge.conference { color: #fff; background: var(--navy-2); }
.badge.conference::before { background: var(--brand); }

.event-body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex-grow: 1; }
.event-title { margin: 0 0 12px; color: var(--navy-2); font-size: 17px; line-height: 1.3; font-weight: 700; }
.meta { margin: 0 0 14px; color: var(--slate-500); font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
.meta-row { display: flex; align-items: flex-start; gap: 10px; }
.meta-row > span:last-child { flex: 1; min-width: 0; }
.schedule-range { white-space: pre-line; }
.meta-icon { width: 16px; height: 16px; color: var(--brand-deep); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.meta-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.desc {
    margin: 0 0 18px;
    color: #475569;
    line-height: 1.55;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.sample-file-wrap {
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
}
.sample-file-label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy-2);
}
.sample-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    color: var(--navy-2);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.sample-file-btn:hover {
    background: #f8fafc;
    border-color: var(--navy-2);
    color: var(--navy-2);
    transform: translateY(-1px);
}
.sample-file-btn-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-deep);
    flex: 0 0 auto;
}
.sample-file-btn-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sample-file-unavailable {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}
.event-actions { margin-top: auto; padding-top: 14px; border-top: 1px solid #F1F5F9; }
.event-btn {
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: var(--navy-2);
    color: #fff;
    padding: 12px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
}
.event-btn:hover { background: #0F172A; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, .25); }
.event-btn.outline { background: #fff; color: var(--navy-2); border: 1px solid #CBD5E1; }
.event-btn.outline:hover { background: #F8FAFC; border-color: var(--navy-2); color: var(--navy-2); }
.event-btn:disabled,
.event-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.92;
    transform: none;
    box-shadow: none;
}
.event-btn:disabled:hover,
.event-btn[aria-disabled="true"]:hover {
    background: #fff;
    border-color: #CBD5E1;
    color: var(--navy-2);
    transform: none;
    box-shadow: none;
}
.event-btn.event-btn-completed:disabled,
.event-btn.event-btn-completed[aria-disabled="true"] {
    background: #F1F5F9;
    color: #64748B;
    border-color: #E2E8F0;
}
.eval-icon { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; }
.eval-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Footer */
.footer { background: #0B1224; color: var(--slate-400); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr; gap: 48px; } }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.fbrand { color: #fff; display: inline-flex; align-items: center; gap: 12px; }
.fbrand-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--brand-deep);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.fbrand-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fbrand-text { display: flex; flex-direction: column; line-height: 1.15; }
.fbrand-name { font-size: 17px; font-weight: 800; color: #fff; }
.fbrand-tag { font-size: 11px; font-weight: 600; color: var(--slate-400); text-transform: uppercase; letter-spacing: .7px; margin-top: 3px; }
.footer-desc { max-width: 460px; color: var(--slate-400); font-size: 14px; line-height: 1.65; margin: 0; }
.footer-links-title { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin: 0 0 14px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--slate-400); text-decoration: none; font-size: 14px; transition: color .2s; }
.footer-links a:hover { color: var(--brand); }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid rgba(148, 163, 184, .14);
}
.fcopy { font-size: 13px; color: var(--slate-400); margin: 0; }

/* Section reveal animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: fadeInUp .7s ease-out forwards; }
.reveal.delay-1 { animation-delay: .1s; }
.reveal.delay-2 { animation-delay: .2s; }
.reveal.delay-3 { animation-delay: .3s; }
.reveal.delay-4 { animation-delay: .4s; }
.reveal.delay-5 { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; animation: none; }
    .event-card:hover,
    .feature-card:hover,
    .announce-card:hover,
    .step-card:hover,
    .cta-primary:hover,
    .cta-secondary:hover,
    .event-btn:hover,
    .announce-btn:hover,
    .fbtn:hover,
    .fmonth:hover { transform: none; }
}

/* ==========================================================================
   Modal, registration, evaluation, admin-portal styles (preserved verbatim)
   ========================================================================== */

.admin-portal {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: none;
    flex-direction: column;
    background: linear-gradient(rgba(26, 35, 50, .86), rgba(74, 96, 112, .72)), url('https://images.unsplash.com/photo-1664273891579-22f28332f3c4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1600') center/cover no-repeat;
}
.admin-portal.open { display: flex; }
.admin-portal-bar { height: 64px; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(26, 35, 50, .9); }
.admin-portal-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.admin-portal-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 16px; }
.admin-card {
    width: min(420px, 100%);
    background: rgba(74, 96, 112, .62);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    box-shadow: 0 20px 44px rgba(0,0,0,.28);
    padding: 30px;
    text-align: center;
    color: #fff;
}
.admin-card-icon {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: var(--brand-deep);
    margin: 0 auto 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.admin-card-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-card h2 { margin: 0 0 6px; font-size: 46px; line-height: 1.1; }
.admin-card p { margin: 0 0 22px; color: #E8EDF2; font-size: 17px; font-weight: 600; }
.admin-form { display: grid; gap: 14px; }
.admin-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    background: rgba(26, 35, 50, .65);
    border: 1px solid rgba(255,255,255,.08);
    padding: 12px 14px;
}
.admin-input-icon { width: 18px; height: 18px; color: #E8EDF2; display: inline-flex; }
.admin-input-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-input-wrap input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #F1F5F9;
    font: 600 16px/1 "Poppins", sans-serif;
}
.admin-access-btn {
    margin-top: 2px;
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 14px;
    background: var(--brand-deep);
    color: #fff;
    font: 700 18px/1 "Poppins", sans-serif;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.admin-access-btn:hover {
    background: #2563EB;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
}
.admin-portal-footer { background: rgba(26, 35, 50, .92); border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; }
.admin-portal .footer { background: rgba(11, 18, 36, .92); border-top: 1px solid rgba(148, 163, 184, .14); padding: 18px 0; }
.admin-portal .footer .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 0; border-top: 0; }
.admin-portal .footer .fbrand-icon { width: 32px; height: 32px; }
.admin-portal .footer .fbrand-icon svg { width: 18px; height: 18px; }
.admin-portal .footer .fbrand-name { font-size: 15px; }
.admin-portal .footer .fbrand-tag { font-size: 10px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); z-index: 100; display: none; padding: 16px; }
.modal.open { display: flex; align-items: center; justify-content: center; }
.page-blur {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 90;
    pointer-events: none;
}
.page-blur.open { display: block; }
body.modal-open::before { content: ""; display: none; }
.modal-card { background: #fff; width: min(800px, calc(100% - 24px)); max-height: 84vh; overflow: hidden; border-radius: 26px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,.35); display: flex; flex-direction: column; }
#modalContent { flex: 1; overflow-y: auto; }
.close-modal { position: absolute; top: 12px; right: 12px; border: 0; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.45); font-size: 22px; line-height: 1; z-index: 5; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .15s ease; }
.close-modal:hover { background: rgba(0,0,0,.65); transform: scale(1.04); }
.modal-card.eval-mode {
    width: min(620px, calc(100% - 24px));
    max-height: 88vh;
    border-radius: 22px;
    overflow: hidden;
}
.modal-card.eval-mode .close-modal {
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border: 1px solid #c3ccd8;
    background: #f8fafc;
    color: #7a8797;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.modal-card.eval-mode .close-modal:hover {
    color: #ef4444;
    background: #fee2e2;
    border-color: #fca5a5;
    transform: scale(1.04);
}
.eval-modal { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 34%); }
.eval-head {
    padding: 22px 26px 18px;
    border-top: 5px solid var(--gold);
    border-bottom: 1px solid #e5e7eb;
}
.eval-head h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--navy-2);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .2px;
}
.eval-head-icon { width: 20px; height: 20px; color: var(--gold); display: inline-flex; }
.eval-head-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }
.eval-body { padding: 24px 26px 28px; text-align: left; }
.eval-copy { margin: 0 0 18px; color: #5c6677; font-size: 14px; line-height: 1.6; }
.eval-stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 12px 0 20px;
    padding: 12px 14px;
    border: 1px solid #dfe6ef;
    border-radius: 14px;
    background: #f8fbff;
}
.rating-star { border: 0; background: transparent; width: 40px; height: 40px; color: #c7ced8; cursor: pointer; padding: 0; transition: transform .15s ease, color .2s ease; }
.rating-star:hover { transform: scale(1.1); }
.rating-star svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rating-star.active { color: var(--gold); }
.eval-label {
    display: block;
    text-align: left;
    color: var(--navy-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .7px;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.eval-text {
    width: 100%;
    resize: vertical;
    border: 1px solid #d7dce3;
    border-radius: 12px;
    padding: 12px 14px;
    font: 500 15px/1.45 "Poppins", sans-serif;
    color: #374151;
    background: #fff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input.eval-text { min-height: 46px; height: 46px; margin-bottom: 16px; }
textarea.eval-text { min-height: 110px; }
.eval-text:focus { border-color: #64748B; box-shadow: 0 0 0 3px rgba(74, 96, 112, .18); background: #fcfdff; }
#evalMessage { text-align: left; }
.eval-submit {
    width: 100%;
    margin-top: 22px;
    border: 2px solid var(--navy-2);
    border-radius: 12px;
    padding: 14px 16px;
    font: 700 17px/1 "Poppins", sans-serif;
    color: #fff;
    background: var(--navy-2);
    box-shadow: 4px 4px 0 #3D4F5C;
    transition: background .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.eval-submit:hover:not(:disabled) { background: #0F1623; }
.eval-submit:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
.eval-success { text-align: center; padding-top: 28px; padding-bottom: 28px; }
.eval-success-icon { width: 74px; height: 74px; margin: 0 auto 14px; color: #22c55e; display: inline-flex; }
.eval-success-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eval-success h4 { margin: 0 0 8px; color: var(--navy-2); font-size: 32px; font-weight: 700; }
.eval-success p { margin: 0 auto 20px; color: #6b7280; max-width: 280px; }
.eval-close-cta { border: 0; border-radius: 12px; background: var(--navy-2); color: #fff; padding: 12px 28px; font: 700 16px/1 "Poppins", sans-serif; cursor: pointer; }
.eval-close-cta:hover { background: #0f1d3a; }
@media (max-width: 640px) {
    .modal-card.eval-mode { width: min(620px, calc(100% - 14px)); max-height: 90vh; }
    .eval-head { padding: 18px 18px 14px; }
    .eval-head h3 { font-size: 23px; }
    .eval-body { padding: 18px; }
    .eval-stars { gap: 8px; padding: 10px 8px; }
    .rating-star { width: 36px; height: 36px; }
    input.eval-text { min-height: 44px; height: 44px; }
    textarea.eval-text { min-height: 96px; }
    .eval-submit { margin-top: 18px; padding: 13px 14px; font-size: 16px; }
}
.modal-card.success-mode { width: min(860px, calc(100% - 24px)); max-height: none; border-radius: 20px; }
.registration-success { padding: 30px 26px 28px; text-align: center; background: #fff; }
.success-icon { width: 56px; height: 56px; margin: 0 auto 10px; color: var(--navy-soft); display: inline-flex; }
.success-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.registration-success h3 { margin: 0 0 10px; color: var(--navy-2); font-size: 30px; font-weight: 700; }
.registration-success .success-copy { margin: 0 auto 22px; max-width: 520px; color: #6b7280; font-size: 12px; line-height: 1.45; }
.success-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; margin-bottom: 20px; }
@media (min-width: 768px) { .success-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
.pass-card, .qr-card { border-radius: 16px; overflow: hidden; box-shadow: 4px 4px 0 #3D4F5C; border: 2px solid var(--navy-soft); min-height: 225px; }
.pass-card { background: #1A2332; color: #fff; padding: 14px; text-align: left; position: relative; }
.pass-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pass-kicker { font-size: 11px; letter-spacing: 1.2px; color: rgba(255,255,255,.65); text-transform: uppercase; }
.pass-tag { border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 10px; font-weight: 700; padding: 4px 8px; white-space: nowrap; }
.pass-event { font-size: 11px; color: rgba(255,255,255,.68); margin-bottom: 10px; }
.pass-name { font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: .2px; margin-bottom: 8px; text-transform: uppercase; }
.pass-meta { display: grid; gap: 4px; color: rgba(255,255,255,.78); font-size: 11px; }
.pass-meta-row { display: inline-flex; align-items: center; gap: 6px; }
.pass-meta-icon { width: 12px; height: 12px; display: inline-flex; color: rgba(255,255,255,.55); }
.pass-meta-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pass-divider { height: 1px; background: rgba(255,255,255,.14); margin: 10px 0; }
.pass-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pass-footer label { font-size: 10px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .8px; }
.pass-code { display: inline-flex; align-items: center; background: #0F1623; color: #E8EDF2; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 800; letter-spacing: 1.2px; }
.pass-shield {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 22px;
    height: 22px;
    color: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.pass-shield svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qr-card { background: #E8EDF2; color: #1A2332; }
.qr-top { background: #F1F5F9; border-bottom: 2px solid var(--navy-soft); color: var(--navy-2); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; padding: 8px 10px; text-transform: uppercase; }
.qr-body { padding: 18px 18px 16px; text-align: center; }
.qr-box { width: 138px; height: 138px; margin: 0 auto 12px; border-radius: 12px; border: 4px solid var(--navy-2); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); }
.qr-box svg { width: 110px; height: 110px; fill: currentColor; color: var(--navy-2); }
.qr-note { margin: 0; font-size: 10px; font-weight: 700; line-height: 1.35; color: var(--navy-2); }
.success-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.success-action-btn { border: 2px solid var(--navy-2); border-radius: 12px; background: var(--gold); color: var(--navy-2); padding: 12px 18px; font: 700 15px/1 "Poppins", sans-serif; display: inline-flex; align-items: center; gap: 8px; box-shadow: 4px 4px 0 #3D4F5C; cursor: pointer; }
.success-action-btn:hover { background: #ffffff; }
.success-action-secondary { background: #fff; }
.success-action-secondary:hover { background: #f8fafc; }
.success-action-icon { width: 16px; height: 16px; display: inline-flex; color: var(--navy-2); }
.success-action-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.success-done { display: block; margin: 0 auto; border: 2px solid var(--navy-2); border-radius: 12px; background: var(--gold); color: var(--navy-2); padding: 12px 30px; font: 700 18px/1 "Poppins", sans-serif; box-shadow: 4px 4px 0 #3D4F5C; cursor: pointer; }
.success-done:hover { background: #ffffff; }
.step-tag { background: var(--navy-2); color: #fff; border-radius: 8px; text-align: center; padding: 8px 10px; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.event-head { height: 300px; position: relative; }
.event-head img { width: 100%; height: 100%; object-fit: cover; }
.event-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 24px; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%); }
.event-overlay h2 { margin: 8px 0 0; font-size: 36px; font-weight: 800; }
.modal-body { padding: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 14px; background: #f9fafb; border: 1px solid #f0f1f3; border-radius: 12px; padding: 14px; margin-bottom: 20px; }
.chip-item { display: inline-flex; align-items: flex-start; gap: 8px; color: #555; font-weight: 600; max-width: 100%; line-height: 1.45; }
.chip-icon { width: 15px; height: 15px; color: #64748B; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.chip-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.desc-block { color: #4b5563; line-height: 1.7; margin-bottom: 28px; }
.grid-2 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: 13px; font-weight: 600; color: #4b5563; margin-bottom: 6px; }
.field input, .field select { width: 100%; border: 2px solid #e5e7eb; background: #f9fafb; border-radius: 12px; padding: 12px; font-size: 14px; font-family: inherit; }
.field select:required:invalid { color: #9ca3af; }
.field select option { color: #1f2937; }
.field select option[value=""] { color: #9ca3af; }

.attendance-mode-wrap { margin: 4px 0 16px; }
.attendance-mode-label { display: block; font-size: 13px; font-weight: 600; color: #4b5563; margin-bottom: 8px; }
.attendance-mode-options { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .attendance-mode-options { grid-template-columns: 1fr 1fr; } }
.attendance-mode-option {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    background: #f9fafb;
    transition: background-color .15s ease, border-color .15s ease;
}
.attendance-mode-option:hover { background: #f3f4f6; }
.attendance-mode-option input { width: auto; margin: 0; accent-color: #3B82F6; }
.attendance-mode-option span { font-size: 14px; font-weight: 600; color: #374151; }
.attendance-mode-option:has(input:checked) { border-color: #3B82F6; background: #eff6ff; }
.upload-wrap { display: none; margin-top: 12px; border: 1px solid #dbeafe; background: #f8fbff; border-radius: 16px; padding: 18px; }
.format-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #1a3263;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}
.format-download-btn:hover { background: #254989; color: #fff; }
.upload-title { font-size: 15px; font-weight: 700; color: #1A2332; margin-bottom: 8px; }
.upload-note { font-size: 12px; color: #6b7280; margin-bottom: 14px; }
.upload-drop { position: relative; min-height: 128px; border: 2px dashed #bfd0e4; border-radius: 14px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 18px; cursor: pointer; }
.upload-drop:hover { background: #fbfdff; border-color: #a9bfd8; }
.upload-drop.has-file { border-style: solid; border-color: #7bbd8a; background: #f3fff6; }
.upload-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-drop-icon { width: 36px; height: 36px; color: #64748B; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.upload-drop.has-file .upload-drop-icon { color: #2b8a4d; }
.upload-drop-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.upload-drop-main { font-size: 13px; font-weight: 700; color: #4b5563; }
.upload-drop.has-file .upload-drop-main { color: #1f6b39; }
.upload-drop-sub { font-size: 11px; color: #9ca3af; }
.upload-file-ready { font-size: 12px; color: #1f6b39; font-weight: 700; margin-top: 3px; }
.upload-file-meta { font-size: 11px; color: #4a6070; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.submit { width: 100%; margin-top: 18px; border: 0; border-radius: 12px; padding: 14px; font-size: 18px; font-weight: 700; background: var(--gold); color: var(--navy-2); font-family: inherit; cursor: pointer; }
.otp-row { display: flex; justify-content: center; gap: 8px; margin: 20px 0; }
.otp-row input { width: 48px; height: 56px; text-align: center; font-size: 24px; font-weight: 700; border: 1px solid var(--navy-soft); border-radius: 10px; text-transform: uppercase; font-family: inherit; }