*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#101318;color:#fff}.container{width:min(1100px,92%);margin:auto}.card{background:#1b2028;border-radius:20px;padding:28px;margin:24px 0;box-shadow:0 8px 30px #0003}h1{font-size:clamp(30px,5vw,54px)}h2{font-size:clamp(24px,4vw,38px)}p{font-size:20px;line-height:1.5;color:#d5d9df}.big-center{text-align:center}.qr{background:#fff;padding:18px;border-radius:18px;display:inline-block}.qr img{display:block;width:min(420px,70vw)}.btn{display:inline-block;border:0;border-radius:14px;padding:18px 26px;font-size:22px;font-weight:700;cursor:pointer;background:#2f9db5;color:#fff;text-decoration:none}.secondary{background:#3a414d}.danger{background:#b93838}.option{display:block;background:#252c35;border:3px solid transparent;border-radius:18px;padding:22px;cursor:pointer;margin:15px 0}.option input{transform:scale(1.7);margin-right:14px}.option strong{font-size:25px}.result{margin:16px 0}.result-head{display:flex;justify-content:space-between;font-size:22px;font-weight:700}.bar{height:32px;background:#303742;border-radius:99px;overflow:hidden}.bar>span{display:block;height:100%;background:#2f9db5}input[type=text],input[type=password]{width:100%;padding:15px;border-radius:10px;border:1px solid #59616d;background:#11151b;color:#fff;font-size:18px}label{display:block;font-size:18px;font-weight:700;margin:14px 0 8px}table{width:100%;border-collapse:collapse;font-size:18px}th,td{text-align:left;padding:14px;border-bottom:1px solid #3b424d}.notice{padding:16px;border-radius:12px;background:#252c35;font-size:19px}.nav{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}@media(max-width:600px){.card{padding:20px}.btn{width:100%;text-align:center}.result-head{font-size:18px}}

.display-nav,.display-actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.display-nav{justify-content:center}.table-wrap{overflow-x:auto;margin-top:24px}.inline-form{display:inline-block;margin:4px}.edit-box{display:inline-block;margin:4px}.edit-box summary{list-style:none}.edit-box summary::-webkit-details-marker{display:none}.edit-box form{margin-top:12px;padding:16px;background:#252c35;border-radius:12px;min-width:280px}.muted{color:#aeb5bf;font-size:16px;margin-top:4px}button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:700px){.display-actions .btn,.display-nav .btn{width:100%;text-align:center}.inline-form,.edit-box{display:block}.inline-form .btn,.edit-box>summary{width:100%;text-align:center}}


/* =========================================================
   Bhayangkari HKGB 74 - Event Voting Theme
   ========================================================= */

:root {
    --event-pink: #e52f73;
    --event-pink-dark: #c92360;
    --event-pink-soft: #fff5fa;
    --event-pink-line: #f4c6d8;
    --event-text: #4b2737;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    background:
        linear-gradient(rgba(255, 248, 252, 0.18), rgba(255, 248, 252, 0.18)),
        url('/assets/bhayangkari-bg.png') center top / cover fixed no-repeat;
    color: var(--event-text);
}

.container {
    width: min(1100px, 94%);
    margin: 0 auto;
}

.card {
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid var(--event-pink-line);
    border-radius: 24px;
    padding: clamp(22px, 4vw, 42px);
    margin: 28px auto;
    box-shadow: 0 14px 40px rgba(130, 52, 82, 0.16);
    backdrop-filter: blur(3px);
}

.event-header {
    text-align: center;
    margin-bottom: 26px;
}

.event-title {
    margin: 0;
    color: var(--event-pink);
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.event-instruction {
    margin: 16px auto 0;
    max-width: 850px;
    color: var(--event-text);
    font-size: clamp(18px, 2.5vw, 26px);
}

.close-notice {
    margin: 26px auto 0;
    padding: 18px 22px;
    max-width: 850px;
    border: 2px solid #f0aac5;
    border-radius: 18px;
    background: rgba(255, 246, 250, 0.96);
    color: var(--event-pink);
    text-align: center;
    font-size: clamp(20px, 3vw, 30px);
    line-height: 1.25;
    font-weight: 800;
}

.close-notice strong {
    display: block;
    margin-top: 5px;
    font-size: 0.9em;
}

.option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255, 245, 250, 0.96);
    border: 3px solid #f0cada;
    border-radius: 20px;
    padding: 24px;
    cursor: pointer;
    margin: 16px 0;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.option:hover {
    border-color: #e99ab8;
    box-shadow: 0 8px 24px rgba(229, 47, 115, 0.12);
    transform: translateY(-1px);
}

.option:has(input:checked) {
    background: #fff0f6;
    border-color: var(--event-pink);
    box-shadow: 0 0 0 4px rgba(229, 47, 115, 0.10);
}

.option input {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0;
    transform: none;
    accent-color: var(--event-pink);
}

.option-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.option strong {
    color: var(--event-text);
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.2;
}

.option-content small {
    color: #79596a;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.4;
}

.vote-submit {
    margin-top: 24px;
}

.btn {
    background: var(--event-pink);
    box-shadow: 0 8px 18px rgba(229, 47, 115, 0.20);
}

.btn:hover {
    background: var(--event-pink-dark);
}

.qr {
    background: #fff;
    padding: 20px;
    border: 8px solid #fff;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(77, 33, 54, 0.16);
}

.qr img {
    display: block;
    width: min(620px, 82vw);
    height: auto;
}

.notice {
    border: 2px solid #f0aac5;
    background: #fff5fa;
    color: var(--event-pink-dark);
    font-weight: 700;
}

.result .bar > span,
.bar > span {
    background: var(--event-pink);
}

@media (max-width: 700px) {
    body {
        background-attachment: fixed;
    }

    .card {
        padding: 20px;
        margin: 16px auto;
    }

    .option {
        padding: 20px;
    }

    .event-title {
        font-size: clamp(32px, 10vw, 48px);
    }
}