@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Nunito:wght@700;800;900&display=swap');

:root {
  color-scheme: dark;
  --ink: #f7f2df;
  --muted: #aaa997;
  --paper: #080a08;
  --surface: #121512;
  --surface-2: #191d17;
  --line: #303b24;
  --lime: #c6ff35;
  --lime-dark: #9dd414;
  --gold: #e8bd57;
  --gold-soft: #f2d98e;
  --coral: #ff8d78;
  --sky: #92dcff;
  --danger: #ff786d;
  --shadow: 0 18px 50px rgba(0, 0, 0, .34);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(198,255,53,.45); outline-offset: 3px; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at 85% 0%, rgba(198,255,53,.1), transparent 28rem), radial-gradient(circle at 8% 18%, rgba(146,220,255,.07), transparent 24rem); }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px max(20px, calc((100vw - 1180px) / 2)); background: rgba(8,10,8,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand-area { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-logo { width: 48px; height: 48px; display: block; border-radius: 0; object-fit: contain; background: transparent; box-shadow: none; }
.brand-copy { min-width: 0; }
.brand-copy strong { display: block; color: var(--gold-soft); font-family: Nunito, sans-serif; font-size: 17px; line-height: 1; white-space: nowrap; }
.brand-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.nav { display: flex; gap: 4px; }
.nav-button { min-height: 42px; padding: 0 13px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 800; }
.nav-button:hover, .nav-button.active { background: rgba(198,255,53,.12); color: var(--lime); }
.profile-chip, .phone-profile-chip { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; }
.phone-profile-chip { display: none; min-height: 42px; padding: 4px 0; }
.phone-profile-chip:hover { color: var(--lime); }
.profile-chip.phone-hidden { display: none; }
.avatar { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: var(--gold); color: #171108; font-family: Nunito, sans-serif; }

main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 72px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .75fr); align-items: center; gap: 28px; margin-bottom: 27px; }
.hero-copy .kids-badge { margin-bottom: 15px; }
.hero-side { display: grid; gap: 14px; }
.hero-art { position: relative; min-height: 172px; overflow: hidden; border: 1px solid #40552a; border-radius: 26px; background: linear-gradient(145deg, #152317 0%, #263818 58%, #3b2d14 100%); box-shadow: var(--shadow); isolation: isolate; }
.hero-art::before { content: ''; position: absolute; top: 18px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 8px rgba(232,189,87,.12), 0 0 24px rgba(232,189,87,.23); }
.hero-art::after { content: ''; position: absolute; right: -18px; bottom: -34px; left: -18px; height: 76px; border-radius: 50% 50% 0 0; background: #162413; transform: rotate(-2deg); z-index: -1; }
.hero-card { position: absolute; bottom: 20px; width: 67px; height: 83px; border: 3px solid var(--lime); border-radius: 18px; background: #29451a; box-shadow: 0 9px 0 rgba(0,0,0,.22); }
.hero-card::before { content: ''; position: absolute; top: 21px; left: 17px; width: 8px; height: 8px; border-radius: 50%; background: #080a08; box-shadow: 22px 0 #080a08; }
.hero-card::after { content: ''; position: absolute; bottom: 18px; left: 20px; width: 22px; height: 9px; border-bottom: 3px solid currentColor; border-radius: 50%; color: var(--lime); }
.hero-card-one { left: 25px; color: var(--lime); transform: rotate(-14deg); }
.hero-card-two { left: 84px; bottom: 29px; border-color: var(--coral); background: #713b32; color: var(--coral); transform: rotate(4deg); z-index: 1; }
.hero-card-three { left: 143px; border-color: var(--sky); background: #24516a; color: var(--sky); transform: rotate(15deg); }
.hero-cloud { position: absolute; width: 62px; height: 18px; border-radius: 18px; background: var(--sky); opacity: .78; }
.hero-cloud::before, .hero-cloud::after { content: ''; position: absolute; bottom: 0; border-radius: 50%; background: var(--sky); }
.hero-cloud::before { left: 9px; width: 25px; height: 25px; }
.hero-cloud::after { right: 8px; width: 31px; height: 31px; }
.hero-cloud-one { top: 38px; left: 28px; transform: scale(.65); }
.hero-cloud-two { right: 92px; bottom: 47px; transform: scale(.45); opacity: .5; }
.hero-spark { position: absolute; width: 17px; height: 17px; background: var(--gold); clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); }
.hero-spark-one { top: 19px; left: 145px; }
.hero-spark-two { right: 33px; bottom: 23px; width: 12px; height: 12px; background: var(--lime); }
.eyebrow { margin: 0 0 9px; color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Nunito, sans-serif; }
h1, h2, h3 { color: var(--gold-soft); }
h1 { max-width: 650px; margin-bottom: 10px; font-size: clamp(34px, 5vw, 56px); line-height: .98; letter-spacing: -.04em; }
.hero p { max-width: 610px; margin-bottom: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.round-card { min-width: 188px; padding: 18px; border: 1px solid #4a5e2c; border-radius: 18px; background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow); }
.round-card .label { color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.round-card strong { display: block; margin-top: 6px; color: var(--gold-soft); font-family: Nunito, sans-serif; font-size: 25px; }
.round-card span { color: var(--lime); font-size: 13px; font-weight: 800; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .85fr); gap: 22px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.panel-pad { padding: 24px; }
.panel-title { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 18px; }
.panel-title h2 { margin-bottom: 5px; font-size: 25px; line-height: 1.05; }
.panel-title p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 99px; background: rgba(198,255,53,.13); color: var(--lime); font-size: 12px; font-weight: 800; white-space: nowrap; }

.prize-banner { position: relative; min-height: 0; margin: -2px -2px 22px; overflow: hidden; border: 1px solid #4b6c29; border-radius: 18px; background: #172316; isolation: isolate; }
.prize-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,12,7,.78), rgba(7,12,7,.16) 62%, rgba(7,12,7,.05)); pointer-events: none; }
.prize-banner img { width: 100%; height: 250px; display: block; object-fit: contain; object-position: center; }
.prize-banner-copy { position: absolute; z-index: 1; right: 24px; bottom: 20px; left: 24px; display: grid; gap: 4px; max-width: 320px; }
.prize-banner-copy span { color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.prize-banner-copy strong { color: #fff4cb; font-family: Nunito, sans-serif; font-size: clamp(20px, 3vw, 30px); line-height: 1.04; }
.prize-banner { width: calc(100% + 4px); padding: 0; color: inherit; text-align: left; cursor: zoom-in; transition: border-color .18s ease, transform .18s ease; }
.prize-banner:hover, .prize-banner:focus-visible { border-color: var(--lime); transform: translateY(-2px); outline: none; }
.prize-banner-zoom { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 7px 9px; border-radius: 999px; background: rgba(8,10,8,.78); color: var(--lime); font-size: 11px; font-weight: 900; }
.vote-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo-card { position: relative; overflow: hidden; min-height: 340px; border: 1px solid #3a4330; border-radius: 17px; background: #20251f; isolation: isolate; }
.photo-card img, .photo-card video { width: 100%; height: 100%; min-height: 340px; display: block; object-fit: cover; transition: transform .3s ease; }
.photo-card:hover img, .photo-card:hover video { transform: scale(1.03); }
.photo-label { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 7px 10px; border-radius: 8px; background: rgba(8,10,8,.88); color: var(--lime); font-size: 12px; font-weight: 800; }
.photo-name { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 1; padding: 13px; border-radius: 12px; background: linear-gradient(transparent, rgba(8,10,8,.88)); color: #fff; font-family: Nunito, sans-serif; font-size: 17px; }
.vote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.vote-button, .primary-button { min-height: 50px; border: 0; border-radius: 12px; background: var(--lime); color: #090b08; font-weight: 900; box-shadow: 0 8px 18px rgba(198,255,53,.14); transition: transform .18s ease, background .18s ease; }
.vote-button:hover, .primary-button:hover { background: #d5ff70; transform: translateY(-2px); }
.vote-button.alt { background: var(--gold); color: #171108; box-shadow: 0 8px 18px rgba(232,189,87,.13); }
.vote-button.alt:hover { background: #f3d074; }
.swipe-hint { margin: 13px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.vote-result { min-height: 22px; margin: 13px 0 0; color: var(--lime); font-size: 13px; font-weight: 800; text-align: center; }

.side-stack { display: grid; gap: 18px; }
.prize-card { padding: 22px; border: 1px solid #4a3d1d; border-radius: 20px; background: #17160f; }
.prize-card h3 { margin-bottom: 8px; font-size: 22px; }
.prize-card p { margin-bottom: 17px; color: #c2b993; font-size: 14px; line-height: 1.5; }
.amount { display: flex; align-items: baseline; gap: 7px; margin-bottom: 18px; }
.amount strong { color: var(--gold); font-family: Nunito, sans-serif; font-size: 28px; }
.amount span { color: var(--lime); font-size: 13px; font-weight: 800; }
.prize-safe { display: block; margin: -8px 0 17px; color: var(--lime); font-size: 12px; font-weight: 800; }
.link-button { padding: 0; border: 0; background: transparent; color: var(--lime); font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.info-list { display: grid; gap: 15px; }
.info-item { display: flex; gap: 12px; align-items: start; }
.info-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(198,255,53,.13); color: var(--lime); font-family: Nunito, sans-serif; font-weight: 900; }
.info-item strong { display: block; margin-bottom: 3px; color: var(--gold-soft); font-size: 14px; }
.info-item span { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.ad-slot { min-height: 92px; display: grid; place-items: center; border: 1px dashed #4a4c37; border-radius: 17px; background: #0f120f; color: #777b68; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.bottom-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; margin-top: 22px; }
.comment-list { display: grid; gap: 13px; margin-bottom: 17px; }
.comment { display: flex; gap: 10px; }
.comment .avatar { flex: 0 0 30px; width: 30px; height: 30px; font-size: 11px; }
.comment-body { padding: 10px 12px; border-radius: 13px 13px 13px 3px; background: var(--surface-2); }
.comment-body strong { display: block; margin-bottom: 3px; color: var(--gold-soft); font-size: 12px; }
.comment-body p { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.inline-form { display: flex; gap: 8px; }
.inline-form input, .field input, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; background: #0e110e; color: var(--ink); padding: 12px 13px; }
.inline-form button { flex: 0 0 auto; width: 46px; border: 0; border-radius: 11px; background: var(--lime); color: #090b08; font-weight: 900; }

.section-intro { margin-bottom: 22px; }
.section-intro h1 { margin-bottom: 8px; font-size: 42px; }
.section-intro p { color: var(--muted); line-height: 1.55; }
.form-card { max-width: 700px; padding: 25px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { color: var(--gold-soft); font-size: 13px; font-weight: 800; }
.field textarea { min-height: 106px; resize: vertical; }
.file-drop { display: grid; place-items: center; min-height: 125px; padding: 20px; border: 2px dashed #465229; border-radius: 16px; background: #10140d; text-align: center; }
.file-drop strong { display: block; margin-bottom: 5px; color: var(--lime); }
.file-drop span { color: var(--muted); font-size: 12px; }
.file-drop input { max-width: 100%; margin-top: 12px; color: var(--muted); font-size: 12px; }
.file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.file-picker { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 13px; padding: 0 15px; border-radius: 11px; background: var(--lime); color: #090b08; font-size: 12px; font-weight: 900; cursor: pointer; }
.file-picker:hover { background: #d5ff70; }
.file-status { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; }
.submit-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.form-note { margin: 0; color: var(--muted); font-size: 12px; }
.submission-list { display: grid; gap: 12px; }
.submission { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.submission-media { width: 86px; height: 72px; overflow: hidden; border-radius: 11px; background: #20251f; }
.submission-media img, .submission-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.submission-copy { min-width: 0; }
.submission strong { display: block; margin-bottom: 4px; color: var(--gold-soft); font-size: 14px; }
.submission span { color: var(--muted); font-size: 12px; }
.status { padding: 7px 10px; border-radius: 99px; background: rgba(198,255,53,.13); color: var(--lime); font-size: 11px; font-weight: 800; white-space: nowrap; }
.submission-story { display: block; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submission-status { display: grid; justify-items: end; gap: 8px; }
.status.approved { background: rgba(232,189,87,.16); color: var(--gold-soft); }
.approve-button { min-height: 38px; padding: 0 11px; border: 1px solid var(--lime); border-radius: 10px; background: transparent; color: var(--lime); font-size: 11px; font-weight: 900; }
.approve-button:hover { background: var(--lime); color: #090b08; }
.delete-button { min-height: 38px; padding: 0 11px; border: 1px solid var(--danger); border-radius: 10px; background: transparent; color: var(--danger); font-size: 11px; font-weight: 900; }
.delete-button:hover { background: var(--danger); color: var(--paper); }

.chat-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); min-height: 480px; overflow: hidden; }
.chat-people { padding: 20px; border-right: 1px solid var(--line); background: #0f120f; }
.chat-people h3 { margin-bottom: 15px; font-size: 18px; }
.person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; }
.person:hover, .person.active { background: rgba(198,255,53,.12); }
.person strong { display: block; color: var(--gold-soft); font-size: 13px; }
.person span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.chat-window { display: flex; flex-direction: column; min-width: 0; }
.chat-header { padding: 20px; border-bottom: 1px solid var(--line); }
.chat-header h2 { margin-bottom: 4px; font-size: 21px; }
.chat-header p { margin: 0; color: var(--muted); font-size: 12px; }
.messages { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px; }
.message-bubble { max-width: 72%; padding: 11px 13px; border-radius: 14px 14px 14px 4px; background: #222820; color: var(--ink); font-size: 13px; line-height: 1.4; }
.message-bubble.mine { align-self: end; border-radius: 14px 14px 4px 14px; background: var(--lime); color: #090b08; }
.chat-form { display: flex; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: #0e110e; color: var(--ink); }
.chat-form button { padding: 0 16px; border: 0; border-radius: 11px; background: var(--gold); color: #171108; font-weight: 900; }
.empty-state { padding: 20px; border-radius: 14px; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.single-vote-preview { display: grid; justify-items: center; gap: 13px; padding: 8px 0 4px; text-align: center; }
.single-vote-preview .photo-card { width: min(100%, 360px); min-height: 300px; }
.single-vote-preview .photo-card img, .single-vote-preview .photo-card video { min-height: 300px; }
.single-vote-preview h3 { margin: 2px 0 0; color: var(--gold-soft); font-size: 22px; }
.single-vote-preview p { max-width: 420px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.single-vote-preview .primary-button { min-width: 210px; }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { margin-bottom: 5px; color: var(--gold-soft); font-family: Nunito, sans-serif; font-size: 15px; }
.empty-state span { line-height: 1.5; }
.kids-badge { display: inline-flex; align-items: center; min-height: 27px; padding: 0 11px; border-radius: 99px; background: var(--lime); color: #090b08; font-size: 11px; font-weight: 900; letter-spacing: .03em; }
.empty-vote { position: relative; display: grid; justify-items: center; overflow: hidden; padding: 26px 20px 29px; border: 2px dashed #465229; border-radius: 22px; background: linear-gradient(145deg, #10160e, #1a2113); text-align: center; }
.empty-vote h3 { margin: 3px 0 7px; color: var(--gold-soft); font-size: 24px; }
.empty-vote p { max-width: 430px; margin: 0 auto 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.empty-cards { display: flex; align-items: center; justify-content: center; height: 122px; margin: 0 0 16px; }
.empty-card { display: grid; place-items: center; width: 88px; height: 112px; border: 3px solid var(--lime); border-radius: 18px; background: #25351a; color: var(--lime); box-shadow: 0 10px 0 rgba(0,0,0,.25); transform: rotate(-8deg); }
.empty-card strong { font-family: Nunito, sans-serif; font-size: 45px; }
.empty-card-two { border-color: var(--gold); background: #392b12; color: var(--gold); transform: translate(-8px, 8px) rotate(8deg); }
.empty-sparkle { position: absolute; color: var(--gold); font-size: 28px; animation: floaty 2.5s ease-in-out infinite; }
.sparkle-one { top: 27px; left: 17%; }
.sparkle-two { right: 17%; bottom: 78px; color: var(--lime); animation-delay: .6s; }
.empty-vote .primary-button { min-width: 210px; }
.chat-header .kids-badge { margin-bottom: 10px; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(12deg); } }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 10; max-width: min(360px, calc(100% - 40px)); padding: 13px 16px; border: 1px solid #4d5e27; border-radius: 12px; background: #151b10; color: var(--lime); box-shadow: var(--shadow); font-size: 13px; font-weight: 800; animation: rise .22s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.loading-state { display: grid; min-height: 100vh; place-items: center; color: var(--lime); font-weight: 800; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: rgba(3,5,3,.82); backdrop-filter: blur(10px); }
.welcome-modal { position: relative; width: min(100%, 510px); padding: 28px; border: 2px solid #526d2d; border-radius: 28px; background: linear-gradient(150deg, #172315, #10150e 72%); box-shadow: 0 24px 80px rgba(0,0,0,.55); text-align: center; animation: modal-pop .25s ease-out; }
.welcome-modal h2 { margin: 0 0 10px; color: var(--gold-soft); font-family: Nunito, sans-serif; font-size: clamp(26px, 6vw, 36px); line-height: 1.05; }
.welcome-modal > p:not(.eyebrow):not(.modal-footnote) { margin: 0 auto 22px; max-width: 410px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.modal-art { position: relative; height: 82px; margin: -8px auto 8px; display: grid; place-items: center; }
.onboarding-logo { width: min(220px, 72vw); height: 72px; display: block; object-fit: contain; border-radius: 0; background: transparent; box-shadow: none; }
.modal-card { position: absolute; display: grid; place-items: center; width: 56px; height: 68px; border: 3px solid var(--lime); border-radius: 16px; background: #2b481b; color: var(--lime); font-family: Nunito, sans-serif; font-size: 25px; font-weight: 900; box-shadow: 0 7px 0 rgba(0,0,0,.25); }
.modal-card-one { left: calc(50% - 58px); bottom: 0; transform: rotate(-13deg); }
.modal-card-two { right: calc(50% - 58px); bottom: 7px; border-color: var(--coral); background: #713b32; color: var(--coral); transform: rotate(13deg); }
.modal-star { position: absolute; top: 0; left: calc(50% - 105px); color: var(--gold); font-size: 25px; animation: floaty 2.2s ease-in-out infinite; }
.modal-star-two { top: 8px; right: calc(50% - 105px); left: auto; color: var(--sky); animation-delay: .45s; }
.device-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.device-option { display: grid; justify-items: center; gap: 6px; min-height: 150px; padding: 16px 10px; border: 1px solid #40552a; border-radius: 18px; background: #111811; color: var(--ink); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.device-option:hover, .device-option:focus-visible { border-color: var(--lime); background: rgba(198,255,53,.1); transform: translateY(-3px); }
.device-icon { display: grid; place-items: center; width: 58px; height: 48px; margin-bottom: 4px; border: 3px solid var(--lime); border-radius: 11px; color: var(--lime); font-family: Nunito, sans-serif; font-size: 13px; font-weight: 900; }
.device-option strong { color: var(--gold-soft); font-family: Nunito, sans-serif; font-size: 16px; }
.device-option small { color: var(--muted); font-size: 11px; }
.cookie-modal { text-align: left; }
.cookie-modal .cookie-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 13px; border-radius: 15px; background: var(--lime); color: #090b08; font-family: Nunito, sans-serif; font-size: 25px; font-weight: 900; }
.cookie-modal .eyebrow { margin-bottom: 8px; }
.cookie-preferences { display: grid; gap: 10px; margin: 0 0 20px; }
.cookie-preferences label { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #111711; cursor: pointer; }
.cookie-preferences input { flex: 0 0 auto; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--lime); }
.cookie-preferences span { display: grid; gap: 3px; }
.cookie-preferences strong { color: var(--gold-soft); font-size: 13px; }
.cookie-preferences small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.primary-button, .secondary-button { min-height: 46px; padding: 0 16px; border-radius: 11px; font-weight: 900; }
.secondary-button { border: 1px solid #526d2d; background: transparent; color: var(--lime); }
.secondary-button:hover { background: rgba(198,255,53,.1); }
.modal-footnote { margin: 18px 0 0; color: #828a74; font-size: 11px; line-height: 1.4; }
.prize-image-backdrop { padding: 14px; }
.prize-image-modal { position: relative; width: min(100%, 900px); max-height: calc(100vh - 28px); overflow: auto; padding: 26px 26px 20px; border: 2px solid #526d2d; border-radius: 24px; background: #10150e; box-shadow: 0 24px 80px rgba(0,0,0,.65); text-align: center; animation: modal-pop .25s ease-out; }
.prize-image-modal h2 { margin: 0 0 16px; color: var(--gold-soft); font-family: Nunito, sans-serif; font-size: clamp(24px, 5vw, 36px); }
.prize-image-modal img { display: block; width: 100%; max-height: min(72vh, 760px); object-fit: contain; border-radius: 14px; background: #172316; }
.prize-image-hint { margin: 13px 0 0; color: var(--muted); font-size: 12px; }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #526d2d; border-radius: 50%; background: #172315; color: var(--lime); font-size: 28px; line-height: 1; cursor: pointer; }
.modal-close:hover, .modal-close:focus-visible { border-color: var(--lime); background: rgba(198,255,53,.12); outline: none; }
.profile-panel { min-height: 330px; }
.profile-welcome, .login-intro { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.profile-welcome h2, .login-intro h2 { margin: 0 0 4px; color: var(--gold-soft); font-size: 25px; }
.profile-welcome p, .login-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.profile-big-avatar { flex: 0 0 58px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; background: var(--gold); color: #171108; font-family: Nunito, sans-serif; font-size: 27px; font-weight: 900; }
.profile-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 22px; }
.profile-facts div { padding: 12px; border-radius: 12px; background: var(--surface-2); }
.profile-facts span, .profile-facts strong { display: block; }
.profile-facts span { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.profile-facts strong { color: var(--lime); font-size: 14px; }
.profile-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.logout-button { margin-left: auto; color: var(--coral); }
.profile-form { max-width: 410px; }
.profile-note { margin-top: 15px; line-height: 1.45; }
.auth-switch { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 16px; color: var(--muted); font-size: 13px; }
.auth-switch .link-button { padding: 0; color: var(--lime); font-weight: 900; }
.winner-notice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 15px; align-items: start; margin: -2px 0 24px; padding: 18px; border: 1px solid var(--gold); border-radius: 18px; background: linear-gradient(135deg, rgba(232,189,87,.18), rgba(198,255,53,.08)); box-shadow: 0 12px 28px rgba(232,189,87,.08); }
.winner-notice h2 { margin: 2px 0 7px; color: var(--gold-soft); font-size: 25px; line-height: 1.05; }
.winner-notice p:not(.eyebrow):not(.winner-adult-note) { margin: 0 0 12px; color: var(--ink); font-size: 14px; line-height: 1.5; }
.winner-confetti { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--gold); color: #171108; font-family: Nunito, sans-serif; font-size: 23px; }
.winner-contact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 900; }
.winner-contact a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.winner-contact a:hover, .winner-contact a:focus-visible { color: var(--gold-soft); }
.winner-contact span { color: var(--muted); font-weight: 700; }
.winner-adult-note { margin: 13px 0 0; color: var(--gold-soft); font-size: 12px; font-weight: 800; line-height: 1.45; }
.winner-ok-button { margin-top: 15px; min-width: 92px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.admin-stat { padding: 17px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.admin-stat span, .admin-stat strong { display: block; }
.admin-stat span { margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-stat strong { color: var(--lime); font-family: Nunito, sans-serif; font-size: 28px; }
.admin-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 22px; align-items: start; }
.admin-leaderboard { margin-top: 22px; }
.website-export-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; }
.website-export-panel .panel-title { margin-bottom: 0; }
.website-export-panel .primary-button { flex: 0 0 auto; min-width: 210px; }
.export-warning { max-width: 620px; margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.export-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.export-actions .primary-button, .export-actions .secondary-button { min-height: 44px; }
@media (max-width: 560px) {
  .website-export-panel { display: block; }
  .website-export-panel .panel-title { margin-bottom: 0; }
  .export-warning { margin-top: 14px; }
  .export-actions { display: grid; grid-template-columns: 1fr; }
  .export-actions .primary-button, .export-actions .secondary-button { width: 100%; }
}
.admin-list, .leader-list { display: grid; gap: 11px; }
.admin-submission, .leader-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #10140f; }
.leader-row { grid-template-columns: 30px 68px minmax(0, 1fr) auto; }
.admin-submission .submission-media, .leader-row .submission-media { width: 68px; height: 58px; }
.admin-row-actions { display: grid; gap: 7px; justify-items: stretch; }
.admin-row-actions button { min-width: 76px; }
.reject-button { min-height: 38px; padding: 0 11px; border: 1px solid rgba(255,120,109,.75); border-radius: 10px; background: transparent; color: var(--coral); font-size: 11px; font-weight: 900; }
.reject-button:hover { background: var(--coral); color: #190b09; }
.leader-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(198,255,53,.13); color: var(--lime); font-family: Nunito, sans-serif; font-weight: 900; }
.leader-row-winner { border-color: var(--gold); background: rgba(232,189,87,.07); }
.small-button { min-height: 38px; padding: 0 10px; font-size: 11px; }
.admin-winner { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 17px; align-items: center; }
.admin-winner .submission-media { width: 120px; height: 105px; }
.admin-winner h3 { margin: 3px 0 5px; font-size: 21px; }
.admin-winner p { margin: 0 0 13px; color: var(--muted); font-size: 13px; }
.admin-winner .eyebrow { margin-bottom: 0; }
@keyframes modal-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.not-found-body { min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 50% 0%, rgba(198,255,53,.11), transparent 31rem), var(--paper); }
.not-found-shell { width: min(100% - 32px, 760px); min-height: 100vh; margin: 0 auto; padding: 28px 0 48px; }
.not-found-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.not-found-card { position: relative; display: grid; justify-items: center; margin: 52px auto 0; padding: 34px 26px 30px; border: 2px solid #40552a; border-radius: 28px; background: linear-gradient(145deg, #111a12, #1c2416); box-shadow: var(--shadow); text-align: center; }
.not-found-art { position: relative; display: flex; align-items: center; justify-content: center; height: 178px; margin-bottom: 12px; }
.not-found-sun { position: absolute; top: 1px; right: 7%; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 8px rgba(232,189,87,.12), 0 0 26px rgba(232,189,87,.24); }
.not-found-sun span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-soft); }
.not-found-sun span:first-child { top: -10px; left: 23px; }
.not-found-sun span:last-child { right: -10px; top: 22px; }
.not-found-cloud { position: absolute; width: 70px; height: 22px; border-radius: 18px; background: #9be8ff; opacity: .92; }
.not-found-cloud span { position: absolute; bottom: 0; width: 30px; height: 30px; border-radius: 50%; background: #9be8ff; }
.not-found-cloud span:first-child { left: 8px; }
.not-found-cloud span:nth-child(2) { left: 25px; bottom: 5px; width: 38px; height: 38px; }
.not-found-cloud span:last-child { right: 7px; }
.cloud-one { top: 32px; left: 2%; transform: scale(.72); }
.cloud-two { right: -1%; bottom: 23px; transform: scale(.56); opacity: .7; }
.not-found-card-shape { position: relative; display: grid; place-items: center; width: 86px; height: 112px; border: 3px solid var(--lime); border-radius: 22px; background: #25351a; color: var(--lime); box-shadow: 0 10px 0 rgba(0,0,0,.28); font-family: Nunito, sans-serif; font-size: 55px; }
.not-found-card-shape strong { position: relative; z-index: 1; line-height: 1; }
.not-found-card-shape i { position: absolute; top: 55px; width: 8px; height: 8px; border-radius: 50%; background: #090b08; }
.not-found-card-shape i:first-of-type { left: 25px; }
.not-found-card-shape i:nth-of-type(2) { right: 25px; }
.shape-one { transform: rotate(-12deg) translate(18px, 7px); }
.shape-two { z-index: 1; border-color: var(--gold); background: #392b12; color: var(--gold); transform: translateY(-11px); }
.shape-three { transform: rotate(12deg) translate(-18px, 7px); }
.not-found-card .eyebrow { margin-bottom: 10px; }
.not-found-card h1 { max-width: 560px; margin-bottom: 12px; font-size: clamp(34px, 7vw, 56px); }
.not-found-text { max-width: 530px; margin-bottom: 22px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.not-found-button { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; padding: 0 20px; text-decoration: none; }
.not-found-tip { margin: 18px 0 0; color: var(--gold-soft); font-size: 12px; font-weight: 700; }

@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; padding: 12px 20px; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
  .nav-button { flex: 1 0 auto; }
  main { width: min(100% - 28px, 680px); padding-top: 30px; }
  .hero { display: block; }
  .round-card { display: inline-block; margin-top: 20px; }
  .content-grid, .bottom-grid, .admin-grid { grid-template-columns: 1fr; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .brand-copy span, .profile-chip span { display: none; }
  .brand-copy strong { font-size: 15px; }
  .phone-profile-chip { display: flex; }
  .phone-profile-chip span:last-child { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
  .profile-chip { margin-left: auto; }
  h1 { font-size: 40px; }
  .vote-stage { gap: 8px; }
  .photo-card, .photo-card img, .photo-card video { min-height: 245px; }
  .photo-name { font-size: 14px; padding: 9px; }
  .vote-actions { grid-template-columns: 1fr; }
  .panel-pad { padding: 18px; }
  .prize-banner { min-height: 175px; margin: -2px -2px 18px; }
  .prize-banner img { height: 190px; }
  .prize-banner-copy { right: 16px; bottom: 15px; left: 16px; }
  .prize-banner-copy strong { font-size: 22px; }
  .chat-layout { grid-template-columns: 1fr; }
  .chat-people { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .chat-people h3 { display: none; }
  .person { min-width: 125px; }
  .welcome-modal { padding: 22px 18px; }
  .device-options { grid-template-columns: 1fr; }
  .device-option { min-height: 112px; }
  .cookie-actions .secondary-button, .cookie-actions .primary-button { flex: 1 1 100%; }
  .profile-facts { grid-template-columns: 1fr; }
  .winner-notice { grid-template-columns: 1fr; gap: 11px; padding: 16px; }
  .winner-notice h2 { font-size: 22px; }
  .logout-button { margin-left: 0; width: 100%; text-align: left; }
  .admin-stats { gap: 8px; }
  .admin-stat { padding: 13px; }
  .admin-submission { grid-template-columns: 58px minmax(0, 1fr); }
  .admin-submission .submission-media { width: 58px; height: 52px; }
  .admin-row-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .leader-row { grid-template-columns: 28px 58px minmax(0, 1fr); }
  .leader-row > div:last-child { grid-column: 3; }
  .leader-row .submission-media { width: 58px; height: 52px; }
  .admin-winner { grid-template-columns: 90px minmax(0, 1fr); }
  .admin-winner .submission-media { width: 90px; height: 84px; }
}

.site-footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 34px;
}

.site-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0f120f;
}

.site-footer strong {
  color: var(--gold-soft);
  font-family: Nunito, sans-serif;
  font-size: 17px;
}

.site-footer p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.contact-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.contact-links span {
  color: var(--lime);
  font-weight: 800;
}

.contact-links a {
  color: var(--gold-soft);
  font-weight: 800;
  text-decoration: none;
}

.contact-links a:hover,
.contact-links a:focus-visible {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .site-footer {
    width: min(100% - 28px, 680px);
    padding-bottom: 22px;
  }

  .site-footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
  }

  .contact-links {
    justify-content: flex-start;
    gap: 8px 12px;
  }
}

.home-intro { margin: 32px 0 18px; }
.home-intro h1 { margin: 8px 0 0; font-size: clamp(32px, 5vw, 52px); }
.contest-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 18px 22px; border-color: #4a5e2c; background: linear-gradient(110deg, rgba(198,255,53,.12), rgba(232,189,87,.08)); }
.contest-head h2 { margin: 0 0 5px; font-size: clamp(21px, 3vw, 30px); }
.contest-head p:not(.eyebrow) { max-width: 720px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.contest-mark { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 15px; background: var(--gold); color: #171108; font-size: 25px; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr); gap: 22px; align-items: start; }
.vote-panel { min-width: 0; }
.home-chat { min-width: 0; }
.home-chat .chat-layout { grid-template-columns: 142px minmax(0, 1fr); min-height: 520px; }
.chat-compact .chat-people { padding: 13px; }
.chat-compact .chat-header { padding: 16px; }
.chat-compact .messages { padding: 15px; }
.chat-compact .chat-form { padding: 12px; }
.locked-chat { padding: 23px; }
.locked-chat h3 { margin: 15px 0 7px; font-size: 21px; }
.locked-chat p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.about-under-vote { margin: 22px 0 0; padding: 15px; border-left: 3px solid var(--lime); border-radius: 0 12px 12px 0; background: rgba(198,255,53,.06); color: var(--gold-soft); font-weight: 900; line-height: 1.35; }
.about-under-vote span { color: var(--muted); font-size: 13px; font-weight: 500; }
.growth-reminder { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 16px 19px; border: 1px solid #4a3d1d; border-radius: 16px; background: #17160f; }
.growth-reminder strong { color: var(--gold-soft); font-family: Nunito, sans-serif; font-size: 16px; }
.growth-reminder span { color: #c2b993; font-size: 13px; line-height: 1.4; }
.home-lower { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; margin-top: 22px; }
.faq-card details { border-top: 1px solid var(--line); padding: 13px 0; }
.faq-card details:first-of-type { border-top: 0; }
.faq-card summary { color: var(--gold-soft); cursor: pointer; font-weight: 800; }
.faq-card details p { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.home-lower + .prize-banner { margin-top: 22px; }
.person-forum { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: rgba(198,255,53,.05); }
.person-forum > div { min-width: 0; flex: 1; }
.person-forum strong, .person-forum small { display: block; }
.person-forum strong { color: var(--gold-soft); font-size: 12px; }
.person-forum small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.person-forum .avatar { flex: 0 0 30px; width: 30px; height: 30px; font-size: 11px; }
.person-forum .small-button { min-height: 34px; padding: 0 9px; font-size: 10px; }
.person span { min-width: 0; }
.person small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.notification-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; background: rgba(232,189,87,.12); color: var(--gold-soft); font-size: 11px; }
.notification-strip .link-button { font-size: 10px; }
.nav-notification { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 4px; border-radius: 99px; background: var(--coral); color: #190b09; font-size: 10px; }
.chat-safety { display: grid; gap: 3px; margin: 0 14px 10px; padding: 10px 11px; border-radius: 11px; background: rgba(146,220,255,.08); color: var(--muted); font-size: 10px; line-height: 1.35; }
.chat-safety strong { color: var(--sky); font-size: 11px; }
.upload-safety { display: grid; gap: 3px; margin: -4px 0 17px; padding: 11px 13px; border-left: 3px solid var(--sky); border-radius: 0 11px 11px 0; background: rgba(146,220,255,.07); color: var(--muted); font-size: 11px; line-height: 1.4; }
.upload-safety strong { color: var(--sky); }

@media (max-width: 820px) {
  .home-layout, .home-lower { grid-template-columns: 1fr; }
  .home-chat { order: 2; }
  .home-chat .chat-layout { min-height: 430px; }
  .growth-reminder { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (max-width: 560px) {
  .home-intro { margin-top: 22px; }
  .contest-head { padding: 16px; }
  .contest-mark { flex-basis: 40px; width: 40px; height: 40px; }
  .home-chat .chat-layout { grid-template-columns: 1fr; }
  .home-chat .chat-people { display: flex; padding: 10px; }
  .home-chat .chat-people .person { min-width: 116px; }
  .person-forum { flex-wrap: wrap; }
  .person-forum .small-button { margin-left: auto; }
}