/* Event fonts and palette come from the main /css/styles.css stylesheet. */
body {
  background: radial-gradient(ellipse at 10% 0%, rgba(109,40,217,.24), transparent 55%),
    radial-gradient(ellipse at 95% 25%, rgba(34,211,238,.07), transparent 45%), var(--bg-base);
  color: var(--text-100);
  font-family: 'LINE Seed Sans TH', system-ui, sans-serif;
  line-height: 1.75;
}
main { max-width:850px; margin:auto; padding:28px 22px 50px; }
a { color:var(--purple-200); }
a:hover { color:var(--neon-cyan); }
.back { text-decoration:none; }
header { padding:36px 0 28px; }
.event-logo { width:220px; max-width:65%; margin:0 0 24px; }
h1 { font-size:clamp(30px,5vw,46px); line-height:1.4; margin:14px 0; font-weight:800; background:linear-gradient(135deg,var(--purple-300),var(--neon-pink),var(--neon-cyan)); background-clip:text; -webkit-background-clip:text; color:transparent; }
h2 { font-size:21px; line-height:1.5; margin:0 0 18px; color:var(--text-200); font-weight:700; }
header p { margin:0 0 16px; }
.eyebrow { font-size:12px; letter-spacing:2px; color:var(--neon-cyan); }
.badge { display:inline-block; background:rgba(139,92,246,.14); border:1px solid var(--border-glow); border-radius:var(--radius-sm); padding:8px 14px; font-size:14px; color:var(--purple-200); }
section { background:var(--bg-glass); border:1px solid var(--border-glow); border-radius:var(--radius-lg); padding:28px; margin-bottom:22px; box-shadow:var(--shadow-card); }
label,legend { display:block; font-weight:700; }
input:not([type=radio]):not([type=checkbox]),select,textarea { width:100%; padding:12px; border:1px solid var(--border-glow); border-radius:var(--radius-sm); background:var(--bg-deep); font:inherit; color:var(--text-100); margin:8px 0 20px; color-scheme:dark; }
textarea { resize:vertical; }
input::placeholder,textarea::placeholder { color:#aaa0bb; }
small { font-size:11px; color:var(--neon-pink); white-space:nowrap; }
.optional,.hint { color:var(--purple-200); font-size:13px; font-weight:400; }
.hint { margin:4px 0 14px; }
.rating { border:0; border-top:1px solid var(--border-glow); margin:0; padding:19px 0; min-width:0; }
.rating legend { float:left; width:100%; margin-bottom:12px; }
.choices { clear:both; display:flex; gap:8px; flex-wrap:wrap; }
.choices label { cursor:pointer; font-weight:400; display:flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border-glow); border-radius:var(--radius-sm); padding:8px 12px; }
.choices label:hover { background:var(--bg-card-hover); }
.choices label:has(input:checked) { border-color:var(--purple-300); background:rgba(139,92,246,.24); color:var(--text-200); box-shadow:0 0 16px rgba(139,92,246,.15); }
.rating-other { margin-top:14px; }
.rating-other textarea { margin-bottom:0; }
input { accent-color:var(--purple-400); }
fieldset { border:0; padding:0; margin:8px 0 24px; min-width:0; }
.checks { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.checks label { font-weight:400; font-size:14px; display:flex; gap:8px; align-items:baseline; }
.last { border-top:3px solid var(--neon-cyan); }
button { background:linear-gradient(135deg,var(--purple-600),var(--purple-500)); color:white; border:1px solid var(--purple-400); border-radius:var(--radius-md); padding:16px 30px; font:inherit; font-weight:700; cursor:pointer; width:100%; box-shadow:var(--shadow-card); }
button:hover { box-shadow:var(--glow-purple); }
button:disabled { opacity:.6; cursor:wait; }
:focus-visible { outline:3px solid var(--neon-cyan); outline-offset:3px; }
#status { color:var(--neon-pink); margin-bottom:12px; }
#other-comments p { white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:12px; }
footer { text-align:center; color:var(--text-muted); font-size:13px; margin-top:30px; }
[hidden] { display:none!important; }
@media(max-width:550px) { main{padding:18px 14px} section{padding:21px 17px} .checks{grid-template-columns:1fr} .choices{gap:6px} .choices label{padding:8px 10px} }

/* The complete popup shares the event's typography on desktop and mobile. */
.survey-select { position:relative; margin:8px 0 20px; }
.survey-select .survey-select-source { position:absolute; width:1px; height:1px; padding:0; margin:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.survey-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:12px 16px; border:1px solid var(--border-glow); border-radius:var(--radius-sm); background:var(--bg-deep); color:var(--text-100); font:inherit; font-weight:400; text-align:left; box-shadow:none; }
.survey-select-trigger:hover { border-color:var(--purple-300); background:rgba(109,40,217,.12); box-shadow:none; }
.survey-select-trigger.is-placeholder { color:var(--purple-200); }
.survey-select-trigger[aria-expanded=true] { border-color:var(--neon-cyan); box-shadow:0 0 0 3px rgba(34,211,238,.1); }
.survey-select-trigger[aria-invalid=true] { border-color:var(--neon-pink); }
.survey-select-arrow { color:var(--neon-cyan); flex-shrink:0; font-size:22px; line-height:1; }
.survey-select-trigger[aria-expanded=true] .survey-select-arrow { transform:rotate(180deg); }
.survey-select-options { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20; max-height:min(320px,40dvh); overflow-y:auto; overscroll-behavior:contain; padding:6px; background:#130825; border:1px solid var(--purple-400); border-radius:var(--radius-sm); box-shadow:0 16px 40px rgba(0,0,0,.5); }
.survey-select-option { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; min-height:44px; border-radius:6px; cursor:pointer; font:inherit; color:var(--text-100); overflow-wrap:anywhere; }
.survey-select-option:hover,.survey-select-option.is-active { background:rgba(139,92,246,.24); }
.survey-select-option[aria-selected=true] { color:var(--neon-cyan); font-weight:700; background:rgba(34,211,238,.08); }
.survey-select-option[aria-selected=true]::after { content:'✓'; flex-shrink:0; }
.event-choice { margin:0 0 24px; }
.event-choice legend { margin-bottom:6px; }
.event-choice .choices { display:grid; grid-template-columns:1fr 1fr; }
.event-choice .choices label { justify-content:center; gap:12px; min-height:58px; font-size:19px; font-weight:700; }

/* Missing answers remain visible until corrected. */
.question-invalid { outline:none; box-shadow:inset 0 0 0 2px var(--neon-pink); border-radius:var(--radius-sm); scroll-margin-block:100px; }
.rating.question-invalid,.event-choice.question-invalid { padding:16px 12px; background:rgba(232,121,249,.06); }
.rating.question-invalid { margin-bottom:12px; border-top-color:transparent; }
.rating-other.question-invalid { padding:12px; }
.field-error { color:#f5a6ee; font-size:14px; font-weight:700; margin:10px 0 4px; }
#status:focus { outline:2px solid var(--neon-pink); outline-offset:8px; border-radius:var(--radius-sm); }