.participation-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:2.5rem; align-items:center; padding:2rem 0 2.5rem; }
.participation-eyebrow { margin:0 0 .6rem; color:#9a292b; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:800; }
.participation-hero h1 { font-size:clamp(2rem,4vw,3rem); line-height:1.12; font-weight:900; color:#8b2323; letter-spacing:-.04em; }
.participation-intro { color:#526071; line-height:1.8; margin:1rem 0; }
.participation-link { display:inline-flex; align-items:center; gap:.7rem; color:#8b2323; font-weight:800; padding:.5rem 0; }
.participation-link:hover { text-decoration:underline; }
.participation-rewards { text-align:center; border-radius:2rem; padding:1.5rem; background:radial-gradient(ellipse at top,#fff7e9,#fff1f1 75%); border:1px solid #f1dedc; }
.participation-rewards p { font-size:.8rem; color:#63514c; margin:.9rem 0 .65rem; line-height:1.8; }
.participation-rewards strong { display:block; font-size:1.05rem; color:#8b2323; }
.participation-medal-preview { display:flex; justify-content:center; align-items:center; gap:1.2rem; padding:1rem 0 .9rem; }
.participation-medal { --medal-light:#f9d3a0; --medal-middle:#c58a54; --medal-dark:#8a4c23; position:relative; isolation:isolate; width:4rem; height:4rem; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--medal-dark); background:linear-gradient(145deg,var(--medal-light),var(--medal-middle)); border:3px solid var(--medal-light); box-shadow:inset 0 0 0 4px #ffffff40,0 5px 12px #00000015; }
.participation-medal::before { content:""; position:absolute; z-index:-1; top:75%; width:1.6rem; height:1.9rem; background:#a52b37; clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); }
.participation-medal--gumus { --medal-light:#f5f7fa; --medal-middle:#a8b4c2; --medal-dark:#47566b; }
.participation-medal--altin { --medal-light:#fff2aa; --medal-middle:#e5b845; --medal-dark:#8b5c10; }
.participation-medal--none { --medal-light:#f1e8e8; --medal-middle:#d9cccc; --medal-dark:#785959; }
.participation-medal-preview .participation-medal--altin { width:5rem; height:5rem; font-size:2.2rem; transform:translateY(-.4rem); }
.participation-guide { padding:1.8rem; background:#fff; border:1px solid #e9e5e5; border-radius:1.5rem; margin-bottom:1.5rem; }
.participation-guide h2 { font-size:1.35rem; font-weight:800; margin-bottom:1.4rem; }
.participation-guide ol { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem; margin:0; padding:0; }
.participation-guide li { display:flex; gap:.8rem; align-items:flex-start; }
.participation-step { width:1.9rem; height:1.9rem; display:flex; align-items:center; justify-content:center; border-radius:50%; flex:none; background:#f8e7e7; color:#8b2323; font-size:.85rem; font-weight:800; }
.participation-guide h3 { font-size:.95rem; font-weight:800; margin:.1rem 0 .5rem; }
.participation-guide li p,.participation-note { font-size:.83rem; line-height:1.7; color:#647080; }
.participation-note { border-top:1px solid #eeebeb; padding-top:1rem; margin-top:1.5rem; }
.participation-status { min-height:1.5rem; font-weight:600; margin:1rem 0; }
.participation-form-feedback { padding:.85rem 1rem; border:1px solid #bbdbc9; border-radius:.8rem; background:#f0faf5; color:#256345; font-size:.9rem; line-height:1.6; overflow-wrap:anywhere; }
.participation-form-feedback.is-error { background:#fff0f1; border-color:#ebbac1; color:#8b2335; }
.participation-field-feedback { color:#8b2335; font-size:.85rem; line-height:1.5; margin:.4rem 0 0; }
.participation-profile-note { padding:.8rem 1rem; border-left:3px solid #a52b37; background:#fff6f4; color:#6f4d4d; font-size:.85rem; line-height:1.6; }
#authPanel input[aria-invalid="true"],#resetPanel input[aria-invalid="true"] { border-color:#a52b37; outline:1px solid #a52b37; }
html.dark .participation-form-feedback { background:#153528; border-color:#34614b; color:#bcdfcd; }
html.dark .participation-form-feedback.is-error,html.dark .participation-profile-note { background:#402129; border-color:#805454; color:#ffc1c7; }
html.dark .participation-field-feedback { color:#ffc1c7; }
.participation-completion { margin:0 0 1.8rem; padding:clamp(1.1rem,4vw,1.8rem); border:2px solid #a52b37; border-radius:1.5rem; background:linear-gradient(135deg,#fff,#fff5f3); box-shadow:0 10px 28px #8b232313; scroll-margin-top:100px; }
.participation-completion-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.participation-completion-heading h2 { color:#8b2323; font-size:clamp(1.35rem,4vw,1.8rem); font-weight:900; line-height:1.35; margin:.3rem 0 .5rem; }
.participation-completion-message { color:#5b6574; line-height:1.7; margin:.5rem 0 1rem; }
.participation-cancel { flex:none; padding:.55rem .7rem; font-size:.8rem; border:1px solid #d9b9b9; border-radius:.7rem; color:#8b2323; background:#fff; }
.participation-cancel:focus-visible { outline:3px solid #a52b3780; outline-offset:3px; }
#ticketCompletionContent #authPanel,#ticketCompletionContent #claimForm { padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
#ticketCompletionContent #prepareCodeForm,#ticketCompletionContent #pendingCodeNote,#ticketCompletionContent #authPanel>h2,#ticketCompletionContent #authPanel>h2+p,#ticketCompletionContent #claimForm>h2 { display:none; }
#ticketCompletionStatus .participation-status:empty { display:none; }
.participation-completion.is-complete { border-color:#27744e; background:#f1faf5; }
.participation-completion.is-complete h2 { color:#27744e; }
.participation-note a { color:#8b2323; font-weight:700; text-decoration:underline; }
.participation-code-entry { border-bottom:1px solid #ece5e5; padding-bottom:1.25rem; margin-bottom:1.5rem; }
.participation-code-entry label { font-weight:700; }
.participation-code-entry p { margin:.4rem 0 .8rem; font-size:.85rem; color:#647080; }
.participation-code-row { display:flex; gap:.7rem; }
.participation-code-row input { flex:1; min-width:0; }
.participation-code-row button { flex:none; }
.participation-pending { padding:.8rem 1rem; margin:-.2rem 0 1.5rem; border:1px solid #bbdbc9; border-radius:.7rem; background:#f0faf5; color:#256345; font-size:.9rem; line-height:1.6; }
.participation-progress-card { border:1px solid #eadcda; background:linear-gradient(120deg,#fff,#fff6f4); border-radius:1.5rem; padding:1.8rem; }
.participation-account-heading { display:flex; gap:1.3rem; align-items:center; }
.participation-account-heading h2 { font-size:1.65rem; font-weight:900; line-height:1.3; }
.participation-account-heading #attendanceCount { margin-top:.3rem; font-size:.9rem; color:#647080; }
.participation-account-heading #logout { margin-left:auto; flex:none; font-size:.8rem; }
.participation-account-heading .participation-medal { margin-bottom:.6rem; }
.participation-progress-message { margin:1.7rem 0 .7rem; font-weight:700; color:#8b2323; line-height:1.6; }
#badgeProgress { width:100%; height:.65rem; appearance:none; border:0; border-radius:1rem; overflow:hidden; background:#eadfdf; display:block; }
#badgeProgress::-webkit-progress-bar { background:#eadfdf; border-radius:1rem; }
#badgeProgress::-webkit-progress-value { background:linear-gradient(90deg,#a62b2b,#e4665b); border-radius:1rem; }
#badgeProgress::-moz-progress-bar { background:linear-gradient(90deg,#a62b2b,#e4665b); border-radius:1rem; }
.participation-milestones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:1.5rem; }
.participation-milestones>div { display:flex; flex-direction:column; align-items:center; text-align:center; padding:1.1rem .4rem .75rem; border:1px solid #eadede; border-radius:1rem; background:#ffffff80; }
.participation-milestones .participation-medal { width:3rem; height:3rem; font-size:1.4rem; margin-bottom:1.3rem; filter:saturate(.55); }
.participation-milestones strong { font-size:.95rem; }
.participation-milestones>div>span:not(.participation-medal) { font-size:.75rem; color:#647080; margin:.2rem 0; }
.milestone-state { font-size:.7rem; font-weight:700; color:#647080; margin-top:.3rem; }
.participation-milestones .is-earned { border-color:#d6bba9; background:#fff9f0; }
.participation-milestones .is-earned .participation-medal { filter:none; }
.participation-milestones .is-earned .milestone-state { color:#795129; }
.participation-milestones .is-current { box-shadow:0 0 0 2px #bc706852; }
.participation-account-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.25rem; align-items:start; }
.participation-history { display:grid; gap:.8rem; }
.participation-attendance { display:flex; gap:1rem; align-items:flex-start; padding:1.2rem; border-radius:1rem; border:1px solid #e9e5e5; background:#fff; }
.participation-attendance-mark { width:2.3rem; height:2.3rem; flex:none; display:flex; align-items:center; justify-content:center; color:#8b2323; background:#fbeceb; border-radius:.8rem; font-weight:800; }
.participation-attendance h4 { font-weight:800; line-height:1.5; }
.participation-attendance h4 a:hover { text-decoration:underline; }
.participation-attendance p { margin-top:.3rem; font-size:.78rem; color:#647080; }
.participation-empty { padding:1.5rem; border-radius:1rem; border:1px dashed #d5c5c5; background:#ffffff70; line-height:1.8; color:#647080; }
.participation-empty a { display:inline-block; margin-top:.6rem; font-weight:700; color:#8b2323; }
.participation-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.participation-board-card { display:flex; align-items:center; gap:1.1rem; padding:1.1rem 1.4rem 1.35rem; border:1px solid #e9e5e5; background:#fff; border-radius:1rem; }
.participation-board-card .participation-medal { width:2.8rem; height:2.8rem; font-size:1.3rem; }
.participation-board-card strong { display:block; font-weight:800; overflow-wrap:anywhere; }
.participation-board-card p { font-size:.8rem; color:#647080; margin-top:.3rem; }
html.dark .participation-hero h1,html.dark .participation-eyebrow,html.dark .participation-link,html.dark .participation-rewards strong,html.dark .participation-progress-message,html.dark .participation-empty a { color:#f1b3b3; }
html.dark .participation-rewards { background:radial-gradient(ellipse at top,#3d2c21,#251b1e 75%); border-color:#4c3232; }
html.dark .participation-rewards p { color:#d1beb1; }
html.dark .participation-guide,html.dark .participation-attendance,html.dark .participation-board-card { background:#201919; border-color:#403232; }
html.dark .participation-progress-card { background:linear-gradient(120deg,#231b1b,#302022); border-color:#4c3232; }
html.dark .participation-intro,html.dark .participation-guide li p,html.dark .participation-note,html.dark .participation-code-entry p,html.dark .participation-account-heading #attendanceCount,html.dark .participation-milestones>div>span:not(.participation-medal),html.dark .milestone-state,html.dark .participation-attendance p,html.dark .participation-board-card p,html.dark .participation-empty { color:#beb5b5; }
html.dark .participation-note,html.dark .participation-code-entry { border-color:#403232; }
html.dark .participation-milestones>div { background:#271f1f; border-color:#503b3b; }
html.dark .participation-milestones .is-earned { background:#352b23; border-color:#8d6746; }
html.dark .participation-milestones .is-earned .milestone-state { color:#e1bc8e; }
html.dark .participation-step,html.dark .participation-attendance-mark { background:#46272b; color:#f1b3b3; }
html.dark .participation-empty { background:#201919; border-color:#5f4444; }
html.dark .participation-pending { background:#153528; border-color:#34614b; color:#bcdfcd; }
html.dark .participation-completion { background:linear-gradient(135deg,#251b1e,#302022); border-color:#bd646d; }
html.dark .participation-completion-heading h2,html.dark .participation-note a { color:#f1b3b3; }
html.dark .participation-completion-message { color:#beb5b5; }
html.dark .participation-cancel { background:#251b1e; border-color:#805454; color:#f1b3b3; }
html.dark .participation-completion.is-complete { background:#153528; border-color:#5baf80; }
html.dark .participation-completion.is-complete h2 { color:#bcdfcd; }
@media(max-width:767px) { .participation-hero { grid-template-columns:1fr; gap:1.6rem; padding-top:1rem; } .participation-guide ol,.participation-account-grid { grid-template-columns:1fr; } .participation-guide { padding:1.3rem; } .participation-guide ol { gap:1.25rem; } .participation-progress-card { padding:1.3rem; } .participation-board { grid-template-columns:1fr; } }
@media(max-width:420px) { .participation-code-row { flex-direction:column; } .participation-account-heading { flex-wrap:wrap; gap:1rem; } .participation-account-heading #logout { margin:0; } .participation-milestones { gap:.4rem; } .participation-milestones>div>span:not(.participation-medal) { font-size:.67rem; } }