:root {
  --ink: #17345d;
  --ink-soft: #5e718e;
  --sky: #a8e7fb;
  --sky-light: #f3fbff;
  --blue: #237cc3;
  --blue-deep: #173e76;
  --yellow: #ffd75a;
  --orange: #ff826f;
  --pink: #ffc8d8;
  --pink-light: #fff2f7;
  --mint: #e9f8ee;
  --white: #ffffff;
  --line: rgba(16, 46, 71, .12);
  --shadow: 0 24px 70px rgba(30, 112, 151, .16);
  --radius: 26px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, #f5fcff 0%, #ffffff 28%, #f7fbff 100%);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.7);
  background: rgba(248, 252, 255, .9);
  backdrop-filter: blur(18px);
}
.nav-wrap { height: 74px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 230px; }
.brand-mark {
  width: 46px; height: 46px; display: grid; place-items: center;
  overflow: hidden; border-radius: 50%; color: var(--blue-deep); font-size: 23px;
  background: white; border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 22px rgba(35,124,195,.18);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-copy { line-height: 1.15; font-weight: 900; letter-spacing: .03em; }
.brand-copy small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.site-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-nav a { padding: 9px 12px; border-radius: 999px; color: #395d74; font-size: 14px; font-weight: 700; white-space: nowrap; }
.site-nav a:hover, .site-nav a.active { color: var(--blue-deep); background: rgba(255,255,255,.8); }
.nav-action { display: flex; align-items: center; gap: 10px; }
.nav-action a { padding: 9px 17px; border-radius: 999px; font-size: 14px; font-weight: 800; }
.nav-action .primary { color: #123650; background: var(--yellow); box-shadow: 0 8px 24px rgba(246, 188, 31, .26); }
.nav-action .account { border: 1px solid var(--line); background: rgba(255,255,255,.68); }
.menu-button { display: none; margin-left: auto; border: 0; background: transparent; font-size: 25px; color: var(--ink); }

.hero {
  min-height: 740px; position: relative; display: flex; align-items: center; overflow: hidden;
  background: radial-gradient(circle at 84% 18%, rgba(255,255,255,.95) 0 8%, transparent 9%),
              radial-gradient(circle at 7% 20%, rgba(157,229,246,.35) 0 12%, transparent 13%),
              linear-gradient(122deg, #e3f8ff 0%, #f8fdff 50%, #fff0f5 100%);
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 999px; filter: blur(3px); }
.hero::before { width: 280px; height: 280px; left: -130px; bottom: -40px; background: rgba(255, 178, 189, .42); }
.hero::after { width: 240px; height: 240px; left: 35%; top: -100px; background: rgba(255, 238, 129, .42); }
.hero-layout { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 42px; }
.hero-copy { position: relative; z-index: 3; max-width: 650px; padding-block: 105px 90px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border: 1px solid rgba(19,88,124,.13); border-radius: 999px; background: rgba(255,255,255,.7); color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,134,95,.14); }
.hero h1 { margin: 24px 0 10px; font-size: clamp(54px, 7vw, 94px); line-height: .98; letter-spacing: -.05em; }
.hero h1 span { display: block; margin-top: 14px; color: var(--blue); font-family: "STKaiti", "KaiTi", serif; font-size: .55em; font-weight: 700; letter-spacing: .06em; }
.hero-lead { max-width: 570px; margin: 24px 0 0; color: #325a72; font-size: 18px; }
.hero-actions { display: flex; gap: 13px; margin-top: 32px; flex-wrap: wrap; }
.button { display: inline-flex; min-height: 48px; padding: 11px 21px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; cursor: pointer; font-weight: 900; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #18364a; background: var(--yellow); box-shadow: 0 14px 30px rgba(231,169,9,.22); }
.button-secondary { color: var(--ink); background: rgba(255,255,255,.82); border: 1px solid rgba(16,46,71,.1); }
.button-dark { color: white; background: var(--blue-deep); }
.hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 590px; gap: 1px; margin-top: 44px; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 22px; background: rgba(255,255,255,.52); backdrop-filter: blur(12px); }
.hero-fact { padding: 15px 18px; border-right: 1px solid var(--line); }
.hero-fact:last-child { border: 0; }
.hero-fact strong { display: block; font-size: 17px; }
.hero-fact span { color: var(--ink-soft); font-size: 12px; }
.float-note { position: absolute; z-index: 2; color: var(--yellow); font-size: 50px; text-shadow: 0 10px 22px rgba(90,120,120,.18); animation: float 4s ease-in-out infinite; }
.note-one { right: 9%; top: 17%; }
.note-two { right: 38%; bottom: 12%; animation-delay: -2s; font-size: 34px; color: var(--pink); }
@keyframes float { 50% { transform: translateY(-14px) rotate(6deg); } }

.hero-visual { position: relative; z-index: 2; min-height: 590px; }
.hero-photo {
  position: absolute; inset: 54px 0 60px 44px; overflow: hidden;
  border: 10px solid rgba(255,255,255,.82); border-radius: 48% 48% 32px 32px;
  background: linear-gradient(rgba(28,73,118,.08), rgba(28,73,118,.08)), url("/campus/assets/hero-cover.jpg") center/cover;
  box-shadow: 0 34px 90px rgba(44,112,164,.2);
}
.hero-visual::before { content: ""; position: absolute; width: 170px; height: 170px; right: -40px; top: 18px; border-radius: 50%; background: rgba(255,215,90,.3); }
.hero-mascot { position: absolute; width: 190px; filter: drop-shadow(0 20px 24px rgba(43,88,145,.2)); animation: float 5s ease-in-out infinite; }
.hero-mascot.blue { right: -8px; bottom: 8px; }
.hero-mascot.pink { left: -16px; bottom: 10px; width: 168px; animation-delay: -2.4s; }
.date-ribbon { position: absolute; z-index: 4; top: 28px; right: 16px; max-width: 230px; padding: 16px 20px; border-radius: 22px 22px 22px 7px; color: white; background: var(--blue-deep); box-shadow: 0 15px 36px rgba(23,62,118,.25); }
.date-ribbon small { display: block; color: #b9ddf3; font-weight: 800; letter-spacing: .12em; }
.date-ribbon strong { display: block; color: var(--yellow); font-size: 20px; }

.countdown-band { position: relative; z-index: 4; margin-top: -34px; }
.countdown-card { display: grid; grid-template-columns: 1.4fr repeat(4, .45fr); align-items: center; padding: 22px 28px; border-radius: 25px; color: white; background: var(--blue-deep); box-shadow: 0 22px 60px rgba(9,55,88,.24); }
.countdown-title small { color: #91c9e6; font-weight: 800; letter-spacing: .12em; }
.countdown-title strong { display: block; font-size: 19px; }
.count-unit { text-align: center; border-left: 1px solid rgba(255,255,255,.13); }
.count-unit strong { display: block; color: var(--yellow); font-size: 28px; line-height: 1.2; }
.count-unit span { color: #a7cee2; font-size: 11px; }

.section { padding: 104px 0; position: relative; overflow: hidden; }
.section-white { background: rgba(255,255,255,.92); }
.section-blue { background: linear-gradient(135deg, #def6ff, #f3fbff 52%, #fff1f6); }
.section-dark { color: white; background: var(--blue-deep); }
.section-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 44px; }
.section-heading .kicker { color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.section-heading h2 { max-width: 720px; margin: 8px 0 0; font-size: clamp(34px, 4vw, 54px); line-height: 1.15; letter-spacing: -.04em; }
.section-heading p { max-width: 460px; margin: 0; color: var(--ink-soft); }
.section-dark .section-heading p { color: #a9cadc; }
.section-number { color: rgba(16,46,71,.08); font-size: 86px; font-weight: 950; line-height: 1; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { min-height: 260px; padding: 29px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.72); box-shadow: 0 18px 50px rgba(31,109,145,.08); }
.feature-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 44px; border-radius: 17px; background: #d8f5ff; color: var(--blue); font-size: 24px; }
.feature-card:nth-child(2) .feature-icon { color: #ad6d00; background: #fff5bd; }
.feature-card:nth-child(3) .feature-icon { color: #aa5160; background: #ffe4e8; }
.feature-card h3 { margin: 0 0 10px; font-size: 22px; }
.feature-card p { margin: 0; color: var(--ink-soft); }

.split { display: grid; grid-template-columns: .86fr 1.14fr; gap: 70px; align-items: center; }
.art-panel { min-height: 480px; position: relative; overflow: hidden; border-radius: 36px; background: linear-gradient(155deg, #8ce0fa, #e6faff 62%, #ffe28b); box-shadow: var(--shadow); }
.art-panel::before { content: "♫"; position: absolute; right: 42px; top: 18px; color: rgba(255,255,255,.7); font-size: 160px; transform: rotate(12deg); }
.art-panel::after { content: ""; position: absolute; width: 300px; height: 110px; left: -20px; bottom: 32px; border-radius: 50%; background: rgba(255,255,255,.78); box-shadow: 170px -40px 0 25px rgba(255,255,255,.45); }
.art-quote { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 34px; padding: 24px; border-radius: 22px; background: rgba(9,57,93,.86); color: white; backdrop-filter: blur(15px); }
.art-quote strong { display: block; color: var(--yellow); font-family: serif; font-size: 31px; }
.art-quote span { color: #bee0f0; }
.art-panel.history-panel { background: #18365e; }
.art-panel.history-panel::before, .art-panel.history-panel::after { display: none; }
.history-image { width: 100%; height: 100%; min-height: 480px; object-fit: cover; opacity: .88; }
.art-panel.history-panel .art-quote { background: rgba(12,38,72,.88); }
.story-copy h2 { margin: 12px 0 22px; font-size: 46px; line-height: 1.16; }
.story-copy p { color: var(--ink-soft); }
.mini-list { display: grid; gap: 12px; margin-top: 26px; }
.mini-item { display: flex; gap: 15px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.mini-item b { color: var(--blue); }

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: stage; }
.timeline-card { counter-increment: stage; position: relative; min-height: 360px; padding: 30px; overflow: hidden; border-radius: 28px; background: white; border: 1px solid var(--line); }
.timeline-card::after { content: "0" counter(stage); position: absolute; right: 18px; top: -22px; color: rgba(35,140,186,.08); font-size: 110px; font-weight: 950; }
.timeline-tag { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: #a95f00; background: #fff2bd; font-size: 12px; font-weight: 900; }
.timeline-card h3 { margin: 43px 0 14px; font-size: 25px; }
.timeline-card p { color: var(--ink-soft); }
.timeline-date { position: absolute; left: 30px; bottom: 28px; color: var(--blue); font-weight: 900; }

.award-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.prize-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prize-card { position: relative; min-height: 420px; padding: 34px; overflow: hidden; border-radius: 30px; color: var(--ink); background: white; }
.prize-card.gold { color: white; background: linear-gradient(150deg, #174474, #256da7); }
.prize-card.silver { background: linear-gradient(150deg, #f7fbff, #ddecf7); }
.prize-card.bronze { background: linear-gradient(150deg, #fff4f0, #ffe3d8); }
.prize-rank { color: var(--orange); font-size: 12px; font-weight: 950; letter-spacing: .16em; }
.prize-card.gold .prize-rank { color: var(--yellow); }
.prize-card h3 { margin: 14px 0 18px; font-size: 30px; }
.prize-card ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.prize-card.gold ul { color: #d6ebf7; }
.prize-card li + li { margin-top: 9px; }
.award-card { position: relative; min-height: 310px; padding: 34px; overflow: hidden; border-radius: 30px; background: white; }
.award-card.featured { color: white; background: linear-gradient(145deg, #0b395d, #116b93); }
.award-card .award-label { color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.award-card.featured .award-label { color: var(--yellow); }
.award-card h3 { margin: 12px 0 20px; font-size: 31px; }
.award-card ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.award-card.featured ul { color: #c5dfed; }
.award-card .trophy { position: absolute; right: 27px; bottom: -35px; font-size: 120px; opacity: .12; transform: rotate(-8deg); }

.page-hero { padding: 86px 0 72px; position: relative; overflow: hidden; background: linear-gradient(135deg, #d8f6ff, #f9fdff 55%, #fff0f5); }
.page-hero::after { content: "♪"; position: absolute; right: 8%; top: -30px; color: rgba(31,143,188,.12); font-size: 210px; }
.breadcrumbs { color: var(--blue); font-size: 13px; font-weight: 800; }
.page-hero h1 { max-width: 850px; margin: 18px 0 18px; font-size: clamp(44px, 6vw, 72px); line-height: 1.04; letter-spacing: -.05em; }
.page-hero p { max-width: 690px; margin: 0; color: var(--ink-soft); font-size: 18px; }
.page-hero .container { position: relative; z-index: 2; }
.page-mascot { position: absolute; z-index: 1; right: max(5%, calc((100vw - var(--max))/2)); bottom: -50px; width: 220px; opacity: .92; filter: drop-shadow(0 18px 25px rgba(43,88,145,.16)); }

.prose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.info-card { padding: 31px; border-radius: 25px; background: white; border: 1px solid var(--line); }
.info-card h3 { margin: 0 0 13px; font-size: 23px; }
.info-card p { margin: 0; color: var(--ink-soft); }
.org-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.org-grid-three { grid-template-columns: repeat(3,1fr); }
.judge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.judge-card { padding: 26px; border-radius: 24px; color: white; background: linear-gradient(150deg,#0b395d,#1c79a0); }
.judge-card:nth-child(2) { background: linear-gradient(150deg,#77502a,#c48942); }
.judge-avatar { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 44px; border-radius: 50%; background: rgba(255,255,255,.15); font-size: 26px; }
.judge-card h3 { margin: 0; font-size: 24px; }
.judge-card p { color: rgba(255,255,255,.76); }
.judge-card.has-portrait { padding: 0; overflow: hidden; }
.judge-card.has-portrait:nth-child(3) { background: linear-gradient(150deg,#405b70,#768da0); }
.judge-card.has-portrait:nth-child(4) { background: linear-gradient(150deg,#453a67,#776aa0); }
.judge-portrait { aspect-ratio: 1 / 1; overflow: hidden; background: rgba(255,255,255,.12); }
.judge-portrait img { width: 100%; height: 100%; object-fit: cover; }
.judge-body { padding: 22px 22px 24px; }
.judge-body h3 { margin-bottom: 10px; }
.judge-body p { margin: 0; }

.host-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.host-card { display: grid; grid-template-columns: 210px 1fr; min-height: 300px; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: white; box-shadow: 0 18px 50px rgba(31,109,145,.08); }
.host-card img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.host-copy { padding: 30px; align-self: center; }
.host-role { color: var(--orange); font-size: 12px; font-weight: 950; letter-spacing: .15em; }
.host-copy h3 { margin: 8px 0 12px; font-size: 28px; }
.host-copy p { margin: 0; color: var(--ink-soft); }
.schools { display: flex; flex-wrap: wrap; gap: 12px; }
.school-pill { padding: 10px 16px; border: 1px solid rgba(22,118,166,.18); border-radius: 999px; background: white; color: #315b72; font-weight: 800; }

.rules-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.rule-card { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.rule-no { color: var(--orange); font-weight: 950; letter-spacing: .12em; }
.rule-card h3 { margin: 10px 0 12px; }
.rule-card p, .rule-card li { color: var(--ink-soft); }

.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.social-card { display: grid; grid-template-rows: 220px auto; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: white; box-shadow: 0 18px 50px rgba(31,109,145,.08); }
.social-card img { width: 100%; height: 220px; object-fit: contain; padding: 18px; background: #f8fbfd; }
.social-copy { padding: 22px; }
.social-copy h3 { margin: 0 0 6px; font-size: 21px; }
.social-copy p { margin: 0; color: var(--ink-soft); }
.social-handle { display: inline-flex; margin-top: 10px; padding: 5px 10px; border-radius: 999px; color: var(--blue-deep); background: #e7f5fc; font-size: 13px; font-weight: 900; }

.auth-shell { min-height: calc(100vh - 74px); display: grid; grid-template-columns: .92fr 1.08fr; background: white; }
.auth-art { position: relative; min-height: 700px; padding: 64px; overflow: hidden; color: white; background: linear-gradient(145deg, rgba(8,54,87,.93), rgba(16,114,154,.8)), url("/campus/assets/hero-cover.jpg") center/cover; }
.auth-art::after { content: "一样的月光"; position: absolute; right: -20px; bottom: 60px; color: rgba(255,255,255,.08); font-family: "KaiTi", serif; font-size: 82px; writing-mode: vertical-rl; }
.auth-art .brand { color: white; }
.auth-art .brand-copy small { color: #a9d8ec; }
.auth-quote { position: absolute; left: 64px; right: 64px; bottom: 70px; max-width: 490px; }
.auth-quote h2 { margin: 0 0 15px; color: var(--yellow); font-size: 46px; line-height: 1.15; }
.auth-quote p { color: #c7e3ef; }
.auth-mascots { position: absolute; right: 25px; top: 115px; width: 280px; height: 230px; }
.auth-mascots img { position: absolute; width: 170px; filter: drop-shadow(0 16px 24px rgba(3,30,53,.28)); }
.auth-mascots img:first-child { left: 0; top: 0; }
.auth-mascots img:last-child { right: 0; bottom: 0; }
.auth-panel { display: grid; place-items: center; padding: 60px 40px; }
.auth-box { width: min(510px, 100%); }
.auth-box h1 { margin: 14px 0 8px; font-size: 40px; }
.auth-box > p { margin-top: 0; color: var(--ink-soft); }
.tabs { display: flex; gap: 6px; margin: 30px 0 24px; padding: 5px; border-radius: 15px; background: #edf7fb; }
.tab { flex: 1; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-soft); cursor: pointer; font-weight: 900; }
.tab.active { color: var(--ink); background: white; box-shadow: 0 6px 16px rgba(26,91,121,.1); }
.auth-form { display: none; }
.auth-form.active { display: block; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 900; }
.input, .select, .textarea { width: 100%; padding: 12px 14px; border: 1px solid #ccdde5; border-radius: 13px; color: var(--ink); background: white; outline: none; transition: border .2s, box-shadow .2s; }
.input:focus, .select:focus, .textarea:focus { border-color: #4fb7e0; box-shadow: 0 0 0 4px rgba(79,183,224,.13); }
.textarea { min-height: 126px; resize: vertical; }
.form-stack { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.span-2 { grid-column: 1 / -1; }
.form-hint { color: var(--ink-soft); font-size: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: 13px; }
.check input { margin-top: 6px; }
.full-button { width: 100%; }
.form-error { min-height: 24px; margin: 7px 0; color: #c73f3f; font-size: 13px; }

.member-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; padding: 55px 0 100px; }
.member-side { height: fit-content; position: sticky; top: 100px; padding: 24px; border-radius: 25px; color: white; background: var(--blue-deep); }
.member-avatar { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 20px; color: var(--ink); background: var(--yellow); font-size: 23px; font-weight: 950; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.member-side h2 { margin: 0; font-size: 20px; }
.member-side p { margin: 4px 0 24px; color: #a9cee1; font-size: 12px; overflow-wrap: anywhere; }
.side-link { display: block; padding: 11px 12px; border-radius: 12px; color: #cae3ef; font-weight: 800; }
.side-link.active { color: white; background: rgba(255,255,255,.1); }
.member-main { min-width: 0; }
.member-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.member-head h1 { margin: 0; font-size: 36px; }
.status-chip { padding: 7px 12px; border-radius: 999px; color: #996000; background: #fff0af; font-size: 12px; font-weight: 900; }
.form-card { padding: 32px; border: 1px solid var(--line); border-radius: 28px; background: white; box-shadow: 0 15px 50px rgba(30,112,151,.08); }
.form-section { padding: 28px 0; border-bottom: 1px solid var(--line); }
.form-section:first-child { padding-top: 0; }
.form-section:last-child { padding-bottom: 0; border: 0; }
.form-section h2 { margin: 0 0 5px; font-size: 21px; }
.form-section > p { margin: 0 0 22px; color: var(--ink-soft); font-size: 13px; }
.media-upload { min-height: 108px; display: flex; align-items: center; gap: 15px; padding: 20px; border: 1.5px dashed #9dc9db; border-radius: 17px; color: var(--ink); background: #f5fbfd; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.media-upload:hover, .media-upload.selected { border-color: var(--blue); background: #eef9fd; transform: translateY(-1px); }
.media-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.media-upload-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 15px; color: white; background: var(--blue); font-size: 24px; font-weight: 900; }
.media-upload > span:last-child { min-width: 0; }
.media-upload strong, .media-upload small { display: block; overflow-wrap: anywhere; }
.media-upload small { margin-top: 5px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.upload-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.upload-progress > span { height: 8px; overflow: hidden; border-radius: 999px; background: #dfedf2; }
.upload-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),#56c6d4); transition: width .2s; }
.upload-progress b { color: var(--blue-deep); font-size: 12px; }
.current-media { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid #cce7d9; border-radius: 14px; background: #f1fbf5; }
.current-media > span { min-width: 0; margin-right: auto; }
.current-media strong, .current-media small { display: block; overflow-wrap: anywhere; }
.current-media small { margin-top: 3px; color: #557264; font-size: 11px; }
.current-media a { color: var(--blue); font-size: 12px; font-weight: 900; white-space: nowrap; }

.admin-body { background: #f0f6f8; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.admin-side { padding: 27px 20px; color: white; background: #0a2b45; }
.admin-side .brand { margin-bottom: 50px; }
.admin-side .brand-copy small { color: #9bc7da; }
.admin-nav a, .admin-nav button { display: block; width: 100%; margin-bottom: 5px; padding: 12px 14px; border: 0; border-radius: 12px; color: #b8d5e2; background: transparent; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.admin-nav a:hover, .admin-nav button:hover { color: white; background: rgba(255,255,255,.06); }
.admin-nav a.active, .admin-nav button.active { color: white; background: rgba(255,255,255,.1); }
.admin-main { min-width: 0; padding: 38px; }
.admin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.admin-top h1 { margin: 0; font-size: 32px; }
.admin-top p { margin: 3px 0 0; color: var(--ink-soft); }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { padding: 21px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.stat-card span { color: var(--ink-soft); font-size: 12px; }
.stat-card strong { display: block; margin-top: 4px; font-size: 30px; }
.stat-card-button { color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }
.stat-card-button:hover { transform: translateY(-2px); border-color: rgba(22,118,166,.35); box-shadow: 0 12px 28px rgba(31,109,145,.1); }
.stat-card-button small { display: block; margin-top: 4px; color: var(--blue); font-weight: 800; }
.admin-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; }
.table-tools { display: flex; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
.table-tools .input { max-width: 300px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 13px 16px; text-align: left; color: var(--ink-soft); background: #f7fafb; white-space: nowrap; }
td { padding: 15px 16px; border-top: 1px solid var(--line); white-space: nowrap; }
td strong { display: block; }
td small { color: var(--ink-soft); }
.status-select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; }
.table-link { color: var(--blue); font-weight: 800; }
.media-actions span { display: flex; gap: 10px; }
.media-actions small { display: block; max-width: 230px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.users-summary { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-soft); background: #f7fafb; font-size: 13px; font-weight: 700; }
.user-badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.user-badge.applied { color: #11613d; background: #e3f5eb; }
.user-badge.not-applied { color: #755510; background: #fff3cf; }
.empty { padding: 60px 20px; text-align: center; color: var(--ink-soft); }
.admin-login { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: linear-gradient(135deg,#dff7ff,#fff9d9); }
.admin-login-card { width: min(450px,100%); padding: 36px; border-radius: 28px; background: white; box-shadow: var(--shadow); }
.admin-login-card h1 { margin-bottom: 4px; }
.admin-login-card > p { color: var(--ink-soft); }

.cta { padding: 48px; border-radius: 34px; display: flex; justify-content: space-between; align-items: center; gap: 30px; color: white; background: linear-gradient(135deg,#0b395d,#15789f); }
.cta h2 { margin: 0 0 5px; font-size: 36px; }
.cta p { margin: 0; color: #bce0ee; }
.site-footer { padding: 64px 0 26px; color: #b6d1df; background: #092b43; }
.footer-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 50px; padding-bottom: 46px; }
.footer-brand p { max-width: 430px; color: #8fb6c8; }
.footer-title { margin-bottom: 14px; color: white; font-weight: 900; }
.footer-links a { display: block; margin: 7px 0; color: #9fc3d3; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); color: #719aae; font-size: 12px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: 360px; padding: 13px 17px; border-radius: 14px; color: white; background: #123f5d; box-shadow: 0 18px 40px rgba(7,35,55,.25); opacity: 0; transform: translateY(15px); pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: none; }
.toast.error { background: #a83f44; }

@media (max-width: 1050px) {
  .site-nav { display: none; position: absolute; top: 74px; left: 20px; right: 20px; padding: 14px; flex-direction: column; align-items: stretch; border-radius: 18px; background: white; box-shadow: var(--shadow); }
  .site-nav.open { display: flex; }
  .nav-action .account { display: none; }
  .menu-button { display: block; }
  .hero-layout { grid-template-columns: 1fr .82fr; }
  .hero-visual { min-height: 520px; }
  .hero-mascot { width: 150px; }
  .hero-mascot.pink { width: 138px; }
  .feature-grid, .timeline, .judge-grid, .prize-grid { grid-template-columns: 1fr 1fr; }
  .timeline-card:last-child { grid-column: 1 / -1; }
  .prize-card:first-child { grid-column: 1 / -1; }
  .host-card { grid-template-columns: 160px 1fr; }
  .page-mascot { width: 170px; opacity: .55; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, var(--max)); }
  .nav-wrap { height: 66px; }
  .brand { min-width: 0; }
  .brand-copy small { display: none; }
  .nav-action .primary { display: none; }
  .site-nav { top: 66px; }
  .hero { min-height: auto; align-items: stretch; }
  .hero-layout { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding-block: 64px 40px; }
  .hero h1 { font-size: 52px; }
  .hero-lead { font-size: 16px; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-fact { border-right: 0; border-bottom: 1px solid var(--line); }
  .countdown-band { margin-top: -20px; }
  .countdown-card { grid-template-columns: repeat(4,1fr); padding: 18px 12px; }
  .countdown-title { grid-column: 1 / -1; margin-bottom: 15px; text-align: center; }
  .hero-visual { min-height: 430px; margin-bottom: 54px; }
  .hero-photo { inset: 20px 8px 40px; border-radius: 42% 42% 28px 28px; }
  .hero-mascot.blue { width: 136px; right: -4px; }
  .hero-mascot.pink { width: 122px; left: -4px; }
  .date-ribbon { top: 0; right: 0; }
  .section { padding: 72px 0; }
  .section-heading { display: block; margin-bottom: 30px; }
  .section-heading p { margin-top: 16px; }
  .section-number { display: none; }
  .feature-grid, .timeline, .award-grid, .prose-grid, .org-grid, .judge-grid, .rules-grid, .prize-grid, .host-grid, .social-grid { grid-template-columns: 1fr; }
  .timeline-card:last-child, .judge-card:last-child { grid-column: auto; }
  .prize-card:first-child { grid-column: auto; }
  .split { grid-template-columns: 1fr; gap: 38px; }
  .art-panel { min-height: 380px; }
  .story-copy h2 { font-size: 37px; }
  .page-hero { padding: 65px 0 55px; }
  .page-hero h1 { font-size: 42px; }
  .page-hero p { font-size: 16px; }
  .page-mascot { right: -38px; width: 145px; opacity: .28; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-panel { padding: 48px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .member-layout { grid-template-columns: 1fr; padding-top: 26px; }
  .member-side { position: static; }
  .member-head { align-items: flex-start; gap: 15px; }
  .form-card { padding: 22px; }
  .current-media { align-items: flex-start; flex-wrap: wrap; }
  .current-media > span { flex-basis: 100%; }
  .host-card { grid-template-columns: 1fr; }
  .host-card img { height: 330px; }
  .cta { padding: 32px 24px; display: block; }
  .cta .button { margin-top: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-top: 8px; }
  .admin-main { padding: 22px 14px; }
  .admin-top { align-items: flex-start; gap: 12px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .table-tools { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}