* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    background: #edf3f8;
    color: var(--text-dark);
}

.template-moden {
    --primary: #6c63ff;
    --secondary: #ff6584;
    --gradient: linear-gradient(135deg, #6c63ff 0%, #ff6584 100%);
    --card: #ffffff;
    --text-dark: #263247;
    --text-light: #6e7c91;
    --soft: #f5f7ff;
}

.template-ombak {
    --primary: #00a9d6;
    --secondary: #006f99;
    --gradient: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
    --card: #ffffff;
    --text-dark: #17324d;
    --text-light: #50677f;
    --soft: #edfaff;
}

.template-flamingo {
    --primary: #ee75d8;
    --secondary: #ef435d;
    --gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --card: #ffffff;
    --text-dark: #37253a;
    --text-light: #745f77;
    --soft: #fff1f8;
}

.template-gelap {
    --primary: #4facfe;
    --secondary: #00f2fe;
    --gradient: linear-gradient(135deg, #111827 0%, #164e63 100%);
    --card: #0f172a;
    --text-dark: #e5eefb;
    --text-light: #a6b4c8;
    --soft: #17223a;
    background: #070b14;
}

.template-cerah {
    --primary: #ff6b6b;
    --secondary: #f5b400;
    --gradient: linear-gradient(135deg, #ff6b6b 0%, #ffe66d 100%);
    --card: #ffffff;
    --text-dark: #2e2d22;
    --text-light: #746d5d;
    --soft: #fff8df;
}

.template-angkasa {
    --primary: #a18cd1;
    --secondary: #f183d3;
    --gradient: linear-gradient(135deg, #1a1a2e 0%, #533483 100%);
    --card: #121528;
    --text-dark: #edf2ff;
    --text-light: #b8c1d9;
    --soft: #1e233d;
    background: #090b18;
}

.template-mawar {
    --primary: #ff8aa1;
    --secondary: #d85b93;
    --gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --card: #ffffff;
    --text-dark: #3d2430;
    --text-light: #816577;
    --soft: #fff2f6;
}

.template-emas {
    --primary: #ffd200;
    --secondary: #f7971e;
    --gradient: linear-gradient(135deg, #2c210c 0%, #f7971e 100%);
    --card: #171b24;
    --text-dark: #fff9e8;
    --text-light: #dfd1aa;
    --soft: #23202a;
    background: #0f1118;
}

.template-zamrud {
    --primary: #11998e;
    --secondary: #38ef7d;
    --gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --card: #ffffff;
    --text-dark: #173f35;
    --text-light: #477263;
    --soft: #edfff6;
}

.template-pelangi {
    --primary: #fc5c7d;
    --secondary: #6a82fb;
    --gradient: linear-gradient(135deg, #fc5c7d 0%, #6a82fb 100%);
    --card: #111329;
    --text-dark: #edf2ff;
    --text-light: #bbc4dd;
    --soft: #1c213e;
    background: #090b18;
}

.template-aurora {
    --primary: #00d4ff;
    --secondary: #302b63;
    --gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    --card: #111329;
    --text-dark: #edf2ff;
    --text-light: #b6bfd8;
    --soft: #1d2140;
    background: #090b18;
}

.template-sunset {
    --primary: #f12711;
    --secondary: #f5af19;
    --gradient: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    --card: #ffffff;
    --text-dark: #392416;
    --text-light: #7b5b43;
    --soft: #fff2df;
}

.template-forest {
    --primary: #134e5e;
    --secondary: #71b280;
    --gradient: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
    --card: #ffffff;
    --text-dark: #173a34;
    --text-light: #517167;
    --soft: #eef9f2;
}

.template-galaxy {
    --primary: #4f8cff;
    --secondary: #0f3460;
    --gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    --card: #11172b;
    --text-dark: #edf2ff;
    --text-light: #b8c2dc;
    --soft: #1a2340;
    background: #080b17;
}

.template-ocean {
    --primary: #005c97;
    --secondary: #363795;
    --gradient: linear-gradient(135deg, #005c97 0%, #363795 100%);
    --card: #ffffff;
    --text-dark: #172d4d;
    --text-light: #50647f;
    --soft: #eef7ff;
}

.template-sakura {
    --primary: #f093fb;
    --secondary: #f5576c;
    --gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --card: #ffffff;
    --text-dark: #3d2438;
    --text-light: #7d6377;
    --soft: #fff1f8;
}

.template-midnight {
    --primary: #6c63ff;
    --secondary: #2d2d44;
    --gradient: linear-gradient(135deg, #0b0e1a 0%, #1a1a2e 50%, #2d2d44 100%);
    --card: #111329;
    --text-dark: #edf2ff;
    --text-light: #b8c1d9;
    --soft: #1b1f37;
    background: #070914;
}

.template-tropical {
    --primary: #ff6b6b;
    --secondary: #4ecdc4;
    --gradient: linear-gradient(135deg, #ff6b6b 0%, #ffe66d 50%, #4ecdc4 100%);
    --card: #ffffff;
    --text-dark: #213838;
    --text-light: #5d7572;
    --soft: #effff9;
}

.template-royal {
    --primary: #6c3c7a;
    --secondary: #e83c7a;
    --gradient: linear-gradient(135deg, #6c3c7a 0%, #b33c7a 50%, #e83c7a 100%);
    --card: #ffffff;
    --text-dark: #3c233d;
    --text-light: #735d78;
    --soft: #fff2f8;
}

.template-carbon {
    --primary: #2c2c2c;
    --secondary: #0d0d0d;
    --gradient: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 50%, #0d0d0d 100%);
    --card: #ffffff;
    --text-dark: #20242b;
    --text-light: #606874;
    --soft: #f3f4f6;
}

.public-wrap {
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto;
    padding: 22px 0 34px;
}

.public-language {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin-bottom: 12px;
    padding: 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(126, 149, 180, .22);
    box-shadow: 0 12px 28px rgba(29, 44, 78, .08);
}

.public-language a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    color: var(--text-light);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.public-language a.active {
    color: #ffffff;
    background: var(--gradient);
}

.registration-card {
    overflow: hidden;
    border-radius: 8px;
    background: var(--card);
    box-shadow: 0 24px 80px rgba(28, 41, 70, .16);
}

.event-banner {
    min-height: 245px;
    display: flex;
    align-items: end;
    gap: 18px;
    position: relative;
    padding: 28px;
    color: white;
    background: var(--gradient);
    background-size: cover;
    background-position: center;
}

.event-banner.banner-size-image {
    min-height: 0;
}

.event-banner.banner-size-fixed {
    aspect-ratio: auto !important;
}

.event-banner-source {
    display: none;
}

.event-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 13, 28, .05), rgba(8, 13, 28, .42));
}

.event-banner.has-banner-image::after {
    display: none;
}

.event-banner > * {
    position: relative;
    z-index: 1;
}

.event-banner-copy {
    display: block;
}

.event-banner.banner-text-hidden {
    align-items: center;
}

.event-banner.banner-text-hidden .event-banner-copy {
    display: none;
}

.event-logo img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 8px;
    background: white;
}

.event-date {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-weight: 800;
}

.event-banner h1 {
    margin: 0 0 8px;
    font-size: clamp(30px, 5vw, 56px);
    letter-spacing: 0;
}

.event-banner p {
    max-width: 720px;
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
}

.registration-terms {
    margin: 0 24px;
    padding: 22px 24px;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, #dfe7f2);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    color: var(--text);
    background: linear-gradient(135deg, color-mix(in srgb, var(--soft) 76%, #ffffff), #ffffff);
    text-align: center;
}

.registration-terms p,
.registration-terms h3,
.registration-terms h4 {
    max-width: 760px;
    margin: 0 auto;
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.65;
}

.registration-terms p + p, .registration-terms h3 + p, .registration-terms h4 + p, .registration-terms ol, .registration-terms ul { margin-top: 12px; }
.registration-terms ol, .registration-terms ul { display: inline-block; max-width: 760px; margin-bottom: 0; padding-left: 24px; color: var(--text-light); line-height: 1.65; text-align: left; }

.public-toast {
    margin: 20px 22px 0;
    padding: 14px 16px;
    border-radius: 8px;
    color: #07543f;
    background: #d8fae9;
    font-weight: 800;
}

.public-toast.error {
    color: #9f1239;
    background: #ffe4ec;
}

.registration-success-panel {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin: 22px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, #10b981 26%, transparent);
    border-radius: 8px;
    color: #064e3b;
    text-align: center;
    background:
        linear-gradient(135deg, rgba(216, 250, 233, .95), rgba(236, 253, 245, .9));
    box-shadow: 0 18px 48px rgba(16, 185, 129, .15);
}

.success-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #059669, #34d399);
    font-size: 30px;
    font-weight: 950;
}

.success-kicker {
    margin: 0;
    color: #047857;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.registration-success-panel h2 {
    max-width: 620px;
    margin: 0;
    color: #064e3b;
    font-size: clamp(22px, 4vw, 34px);
    line-height: 1.15;
}

.new-registration-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: var(--gradient);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--primary) 22%, transparent);
    font: inherit;
    font-weight: 950;
    cursor: pointer;
}

.registration-complete .public-body {
    display: none;
}

.public-body {
    padding: 24px;
}

.payment-box {
    align-self: start;
    padding: 18px;
    border-radius: 8px;
    background: var(--soft);
}

.payment-box h2 {
    margin: 0 0 14px;
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
    justify-items: center;
}

.payment-grid.no-payment-qr {
    width: min(50%, 420px);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
}

.payment-qr {
    width: 100%;
    max-width: 240px;
    display: block;
    margin: 0 auto;
    border: 10px solid white;
    border-radius: 8px;
}

.payment-qr-stack {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 10px;
}

.payment-qr-note {
    max-width: 270px;
    margin: 0;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.4;
    text-align: center;
}

.payment-box dl {
    width: min(100%, 320px);
    display: grid;
    gap: 10px;
    justify-self: center;
}

.payment-grid.no-payment-qr dl {
    justify-self: start;
}

.payment-box dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(124, 141, 165, .22);
}

dt {
    color: var(--text-light);
}

dd {
    margin: 0;
    text-align: right;
    font-weight: 850;
}

.deadline {
    margin: 0;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.4;
    text-align: center;
}

.participant-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .1);
}

.field-error {
    margin: 0;
    color: #dc2626;
    font-size: 12px;
    font-weight: 850;
}

.wide {
    grid-column: 1 / -1;
}

.form-field.half {
    grid-column: span 2;
}

.form-field.quarter {
    grid-column: span 1;
}

label {
    font-weight: 820;
}

label b {
    margin-left: 4px;
    padding: 0;
    border-radius: 0;
    color: #ef4444;
    background: transparent;
    font-size: 15px;
    font-weight: 950;
    line-height: 1;
}

input,
select,
textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(126, 143, 169, .42);
    border-radius: 8px;
    padding: 12px 13px;
    color: var(--text-dark);
    background: var(--card);
    font: inherit;
}

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%), linear-gradient(135deg, var(--primary) 50%, transparent 50%);
    background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

textarea {
    resize: vertical;
}

.radio-options {
    display: grid;
    gap: 9px;
    padding: 12px;
    border-radius: 8px;
    background: var(--soft);
}

.radio-options label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 760;
}

.radio-options input {
    width: 20px;
    min-height: 20px;
    accent-color: var(--primary);
}

.public-choice-list {
    display: grid;
    gap: 9px;
    padding: 12px;
    border-radius: 8px;
    background: var(--soft);
}

.public-choice-list label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 760;
}

.public-choice-list input {
    width: 20px;
    min-height: 20px;
    accent-color: var(--primary);
}

.public-feedback-page {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--soft) 80%, #ffffff), color-mix(in srgb, var(--primary) 10%, #edf3f8));
}

.feedback-public-card {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    box-shadow: 0 26px 70px color-mix(in srgb, var(--primary) 16%, rgba(28, 41, 70, .16));
}

.feedback-banner {
    min-height: 340px;
    align-items: center;
    padding: 30px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, #111827), color-mix(in srgb, var(--secondary) 78%, #0f172a));
}

.feedback-banner::after,
.feedback-banner.has-banner-image::after {
    display: block;
    background:
        linear-gradient(90deg, rgba(5, 10, 24, .78), rgba(5, 10, 24, .36) 56%, rgba(5, 10, 24, .12)),
        linear-gradient(180deg, rgba(5, 10, 24, .18), rgba(5, 10, 24, .38));
}

.feedback-banner .event-banner-copy {
    width: min(760px, 100%);
    display: grid;
    gap: 12px;
}

.feedback-banner h1 {
    margin: 0;
    max-width: 820px;
    font-size: clamp(34px, 6vw, 62px);
    line-height: 1.02;
}

.feedback-banner p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: 16px;
    line-height: 1.5;
}

.feedback-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.feedback-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.feedback-meta-item {
    min-height: 76px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
}

.feedback-meta-item span {
    color: rgba(255, 255, 255, .74);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.feedback-meta-item strong {
    color: #ffffff;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.25;
}

.feedback-mobile-info {
    display: none;
}

.feedback-status-section {
    display: grid;
    justify-items: center;
    padding: 22px;
    background: color-mix(in srgb, var(--card) 92%, var(--soft));
}

.feedback-status-section .public-toast {
    width: min(100%, 620px);
    margin: 0;
}

.feedback-status-message {
    display: grid;
    place-items: center;
    min-height: 92px;
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, #10b981 20%, #b7efd2);
    color: #0b4c3a;
    text-align: center;
    line-height: 1.28;
    overflow-wrap: anywhere;
    box-shadow: 0 12px 30px rgba(16, 185, 129, .12);
}

.feedback-unavailable-wrap {
    min-height: 100vh;
    display: grid;
    align-items: center;
}

.feedback-unavailable-card {
    width: min(620px, 100%);
    display: grid;
    gap: 14px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, #d7e0ec);
    border-radius: 8px;
    background: var(--card);
    box-shadow: 0 24px 70px color-mix(in srgb, var(--primary) 16%, rgba(28, 41, 70, .16));
}

.feedback-unavailable-card h1 {
    margin: 0;
    color: var(--text-dark);
    font-size: clamp(28px, 6vw, 42px);
    line-height: 1.08;
}

.feedback-unavailable-card p {
    margin: 0;
    color: var(--text-light);
    font-size: 16px;
    font-weight: 760;
    line-height: 1.55;
}

.feedback-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 22px;
    background: color-mix(in srgb, var(--card) 92%, var(--soft));
}

.feedback-question {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, #d7e0ec);
    border-radius: 8px;
    background: var(--card);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 7%, transparent);
}

.feedback-question-head {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.feedback-question-number {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: var(--gradient);
    font-size: 13px;
    font-weight: 950;
}

.feedback-question label {
    display: inline-flex;
    gap: 4px;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}

.feedback-question select,
.feedback-question textarea {
    border-color: color-mix(in srgb, var(--primary) 22%, #d7e0ec);
    background-color: color-mix(in srgb, var(--card) 96%, #ffffff);
    font-weight: 760;
}

.feedback-question textarea:focus,
.feedback-question select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
}

.feedback-question .public-choice-list {
    gap: 10px;
    padding: 0;
    background: transparent;
}

.feedback-question .public-choice-list label {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, #d7e0ec);
    border-radius: 8px;
    background: color-mix(in srgb, var(--soft) 72%, var(--card));
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.feedback-question .public-choice-list label:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 72%, #ffffff);
    background: color-mix(in srgb, var(--primary) 12%, var(--soft));
}

.feedback-question .public-choice-list input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.feedback-question .public-choice-list i {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid color-mix(in srgb, var(--primary) 24%, #93a4b8);
    border-radius: 50%;
    background: var(--card);
}

.feedback-question .public-choice-list i::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    transform: scale(0);
    transition: transform .16s ease;
}

.feedback-question .public-choice-list input:checked + i::after {
    transform: scale(1);
}

.feedback-question .public-choice-list span {
    color: var(--text-dark);
    font-weight: 850;
    line-height: 1.3;
}

.feedback-submit-row {
    padding: 0 22px 22px;
    background: color-mix(in srgb, var(--card) 92%, var(--soft));
}

.public-submit {
    width: 100%;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: var(--gradient);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--primary) 24%, transparent);
    font: inherit;
    font-weight: 950;
    cursor: pointer;
    appearance: none;
}

.public-submit:focus {
    outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent);
    outline-offset: 3px;
}

.terms {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    background: var(--soft);
}

.terms input {
    width: 20px;
    min-height: 20px;
}

.upload-zone {
    position: relative;
    border: 2px dashed color-mix(in srgb, var(--primary) 55%, #cbd5e1);
    border-radius: 8px;
    padding: 18px;
    background: var(--soft);
}

.upload-zone input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-zone label {
    display: grid;
    gap: 6px;
    text-align: center;
    color: var(--text-light);
}

.upload-zone strong {
    color: var(--text-dark);
}

.file-preview {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}

.file-preview button {
    border: 0;
    color: #b42318;
    background: transparent;
    font-weight: 850;
    cursor: pointer;
}

.submit-btn {
    min-height: 52px;
    border: 0;
    border-radius: 8px;
    color: white;
    background: var(--gradient);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}

.submit-btn .submit-loading {
    display: none;
}

.participant-form.is-submitting {
    pointer-events: none;
    opacity: .62;
}

.participant-form.is-submitting .submit-btn {
    cursor: wait;
}

.participant-form.is-submitting .submit-label {
    display: none;
}

.participant-form.is-submitting .submit-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.participant-form.is-submitting .submit-loading::before,
.public-loader {
    content: "";
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, .45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: public-spin .8s linear infinite;
}

.public-submit-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
    place-items: center;
    align-content: center;
    gap: 14px;
    color: #ffffff;
    background: rgba(8, 13, 28, .58);
    backdrop-filter: blur(5px);
}

.public-submit-overlay strong {
    font-size: 16px;
}

.is-public-submitting .public-submit-overlay {
    display: grid;
}

@keyframes public-spin {
    to {
        transform: rotate(360deg);
    }
}

.attendance-page {
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%),
        radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--soft) 76%, #ffffff), color-mix(in srgb, var(--primary) 8%, #edf3f8));
}

.attendance-wrap {
    width: min(820px, 100%);
}

.attendance-card {
    display: grid;
    gap: 16px;
    padding: 30px;
    border-radius: 8px;
    color: var(--text-dark);
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
    box-shadow: 0 24px 80px color-mix(in srgb, var(--primary) 16%, rgba(28, 41, 70, .12));
}

.attendance-mark {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: var(--gradient);
    font-size: 30px;
    font-weight: 950;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--primary) 28%, transparent);
}

.attendance-card.is-error .attendance-mark {
    background: linear-gradient(135deg, #ef4444, #ff8a8a);
}

.attendance-card .eyebrow {
    margin: 0;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 950;
}

.attendance-card h1 {
    margin: 0;
    font-size: clamp(28px, 6vw, 42px);
    line-height: 1.08;
}

.attendance-card p {
    margin: 0;
    color: var(--text-light);
    line-height: 1.55;
}

.attendance-welcome {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text-dark) !important;
    background: color-mix(in srgb, var(--primary) 9%, var(--soft));
    font-weight: 850;
}

.attendance-form {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.attendance-form button,
.seat-panel a,
.attendance-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: var(--gradient);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--primary) 24%, transparent);
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.seat-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--soft) 84%, #ffffff), color-mix(in srgb, var(--primary) 8%, var(--soft)));
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
}

.queue-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--soft) 86%, #ffffff), color-mix(in srgb, var(--primary) 10%, var(--soft)));
}

.seat-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.seat-panel-head span,
.seat-notes span {
    color: var(--text-light);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.seat-panel-head small {
    color: var(--text-light);
    font-weight: 760;
    text-align: right;
}

.seat-ticket {
    display: grid;
    gap: 12px;
}

.seat-ticket-main,
.seat-ticket-zone b,
.seat-ticket-seat,
.seat-notes {
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 86%, var(--primary));
}

.seat-ticket-main {
    min-height: 148px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 18px;
    color: #ffffff;
    background: var(--gradient);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--primary) 22%, transparent);
}

.queue-ticket {
    min-height: 170px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 18px;
    border-radius: 8px;
    color: #ffffff;
    background: var(--gradient);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--primary) 22%, transparent);
}

.queue-ticket span {
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .86;
}

.queue-ticket strong {
    color: #ffffff;
    font-size: clamp(72px, 18vw, 130px);
    line-height: .9;
}

.seat-ticket-main span {
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .86;
}

.seat-ticket-main strong {
    color: #ffffff;
    font-size: clamp(54px, 12vw, 92px);
    line-height: 1;
}

.seat-ticket-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.seat-ticket-zone b,
.seat-ticket-seat {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 16px;
    font-style: normal;
}

.seat-ticket-zone b {
    min-height: 84px;
}

.seat-ticket-seat {
    min-height: 148px;
}

.seat-ticket-zone b span,
.seat-ticket-seat span {
    color: var(--text-light);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.seat-ticket-zone b strong,
.seat-ticket-seat strong {
    color: var(--text-dark);
    overflow-wrap: anywhere;
    font-size: clamp(24px, 6vw, 40px);
    line-height: 1.08;
}

.seat-notes {
    display: grid;
    gap: 7px;
    padding: 14px;
    border-left: 5px solid var(--primary);
}

.seat-notes p {
    color: var(--text-dark);
    font-weight: 780;
}

.attendance-link {
    color: var(--primary);
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--primary) 72%, white);
    box-shadow: none;
}

@media (max-width: 860px) {
    .public-wrap {
        width: min(100% - 18px, 720px);
        padding-top: 12px;
    }

    .event-banner {
        min-height: 230px;
        padding: 22px;
    }

    .participant-form,
    .feedback-body,
    .payment-grid {
        grid-template-columns: 1fr;
    }

    .participant-form .form-field {
        grid-column: 1 / -1;
    }

    .payment-grid.no-payment-qr {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .attendance-page {
        align-items: start;
        padding: 10px;
    }

    .attendance-card {
        padding: 20px;
    }

    .attendance-page .seat-ticket-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seat-panel-head {
        display: grid;
        align-items: start;
    }

    .seat-panel-head small {
        text-align: left;
    }

    .public-body {
        padding: 16px;
    }

    .feedback-banner {
        min-height: 170px;
        padding: 22px;
        align-items: end;
    }

    .feedback-banner .event-banner-copy {
        display: none;
    }

    .feedback-banner h1 {
        font-size: 34px;
        line-height: 1.06;
    }

    .feedback-banner p {
        font-size: 14px;
    }

    .feedback-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feedback-meta-item {
        min-height: 70px;
        padding: 10px;
    }

    .feedback-mobile-info {
        display: grid;
        gap: 12px;
        padding: 18px 16px;
        border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, #d7e0ec);
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--soft)), color-mix(in srgb, var(--soft) 58%, var(--card)));
    }

    .feedback-mobile-kicker {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 7px 11px;
        border-radius: 999px;
        color: #ffffff;
        background: var(--gradient);
        font-size: 11px;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .feedback-mobile-info h1 {
        margin: 0;
        color: var(--text-dark);
        overflow-wrap: anywhere;
        font-size: 28px;
        line-height: 1.08;
    }

    .feedback-mobile-info p {
        margin: 0;
        color: var(--text-light);
        font-size: 14px;
        font-weight: 760;
        line-height: 1.45;
    }

    .feedback-mobile-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .feedback-mobile-meta div {
        display: grid;
        align-content: center;
        gap: 5px;
        min-height: 68px;
        padding: 10px;
        border: 1px solid color-mix(in srgb, var(--primary) 14%, #d7e0ec);
        border-radius: 8px;
        background: var(--card);
    }

    .feedback-mobile-meta span {
        color: var(--text-light);
        font-size: 11px;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .feedback-mobile-meta strong {
        color: var(--text-dark);
        overflow-wrap: anywhere;
        font-size: 13px;
        line-height: 1.25;
    }

    .feedback-question {
        padding: 14px;
    }

    .feedback-submit-row {
        padding: 0 16px 16px;
    }

    .feedback-status-section {
        padding: 18px 16px 16px;
    }

    .feedback-status-message {
        min-height: 84px;
        padding: 18px;
        font-size: 18px;
    }
}

@media (max-width: 520px) {
    .attendance-page {
        min-height: 100svh;
        padding: 8px;
        place-items: start center;
    }

    .attendance-wrap {
        width: 100%;
    }

    .attendance-card {
        gap: 9px;
        padding: 14px;
    }

    .attendance-mark {
        width: 42px;
        height: 42px;
        font-size: 24px;
    }

    .attendance-card .eyebrow {
        font-size: 10px;
        letter-spacing: .07em;
    }

    .attendance-card h1 {
        font-size: clamp(25px, 8vw, 34px);
    }

    .attendance-card > p {
        font-size: 14px;
        line-height: 1.35;
    }

    .attendance-welcome {
        padding: 8px 9px;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .seat-panel {
        gap: 8px;
        padding: 10px;
    }

    .seat-panel-head {
        gap: 4px;
    }

    .seat-panel-head span,
    .seat-notes span {
        font-size: 10px;
        letter-spacing: .07em;
    }

    .seat-panel-head small {
        font-size: 12px;
        line-height: 1.25;
    }

    .seat-ticket {
        gap: 8px;
    }

    .seat-ticket-row {
        gap: 8px;
    }

    .seat-ticket-zone b {
        min-height: 56px;
        padding: 9px 10px;
    }

    .seat-ticket-main,
    .seat-ticket-seat {
        min-height: 92px;
        padding: 10px;
    }

    .seat-ticket-main {
        gap: 4px;
    }

    .seat-ticket-main span,
    .seat-ticket-zone b span,
    .seat-ticket-seat span {
        font-size: 10px;
        letter-spacing: .08em;
    }

    .seat-ticket-main strong {
        font-size: clamp(36px, 16vw, 58px);
    }

    .seat-ticket-zone b strong,
    .seat-ticket-seat strong {
        font-size: clamp(22px, 9vw, 34px);
    }

    .seat-notes {
        gap: 4px;
        padding: 9px;
        border-left-width: 4px;
    }

    .seat-notes p {
        font-size: 12px;
        line-height: 1.25;
    }

    .attendance-form button,
    .seat-panel a,
    .attendance-link {
        min-height: 38px;
        font-size: 13px;
    }

    .seat-panel img {
        width: 96px !important;
        height: 96px !important;
    }

    .public-wrap {
        width: min(100% - 18px, 420px);
    }

    .feedback-banner {
        min-height: 132px;
        padding: 16px;
    }

    .feedback-meta-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .feedback-meta-item {
        min-height: 0;
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: center;
    }

    .feedback-mobile-meta {
        grid-template-columns: 1fr;
    }

    .feedback-mobile-meta div {
        min-height: 0;
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: center;
    }

    .feedback-body {
        gap: 12px;
        padding: 14px;
    }

    .feedback-status-section {
        padding: 14px;
    }

    .feedback-status-message {
        min-height: 78px;
        padding: 16px 14px;
        font-size: 17px;
    }

    .feedback-question-head {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .feedback-question-number {
        width: 28px;
        height: 28px;
    }
}