/* KURAGUARD PREMIUM EXPLORER V1 */

:root {
    color-scheme: dark;
    --navy: #eef3ff;
    --green: #9385ff;
    --border: #30415e;
    --muted: #a7b7d0;
    --background: #071023;
}

body {
    background:
        radial-gradient(ellipse at 85% 0%,
            rgba(104, 74, 210, .22), transparent 40%),
        radial-gradient(ellipse at 0% 40%,
            rgba(42, 91, 192, .13), transparent 45%),
        #071023;
    color: #eef3ff;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

header {
    background: rgba(8, 17, 37, .96);
    border-bottom: 1px solid #2b3c5a;
    padding-top: 24px;
    padding-bottom: 24px;
}

header a {
    color: #fff;
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -1px;
}

main {
    max-width: 1240px;
    margin-top: 55px;
    padding-bottom: 100px;
}

h1 {
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 850;
    letter-spacing: -.055em;
    line-height: 1.1;
    background: linear-gradient(110deg,
        #fff 10%, #d2deff 65%, #a69bff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.intro {
    color: #aabbd4;
    font-size: 16px;
    line-height: 1.85;
}

.panel {
    background: linear-gradient(145deg,
        rgba(21, 35, 63, .98),
        rgba(12, 23, 45, .98));
    border: 1px solid #30415f;
    border-radius: 22px;
    padding: 30px;
    margin-top: 28px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .2);
}

h2, h3 {
    color: #f1f5ff;
}

h2 {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.office-grid {
    gap: 14px;
}

.office-button {
    background: #172744;
    color: #edf2ff;
    border: 1px solid #394c6d;
    border-radius: 14px;
    min-height: 95px;
    padding: 22px 15px;
    font-size: 15px;
    font-weight: 750;
    transition: transform .18s, background .18s,
        border-color .18s;
}

.office-button:hover {
    transform: translateY(-3px);
    background: #25345a;
    border-color: #8e87ff;
}

.office-button.active {
    background: linear-gradient(135deg,
        #303b7c, #382e72);
    border-color: #a49aff;
    color: #fff;
    box-shadow: inset 0 0 0 1px #a49aff;
}

label {
    color: #dce5f9;
}

select,
.polling-centre-toolbar input,
.polling-centre-toolbar select,
.geographic-explorer-toolbar input {
    background: #101d35;
    color: #eef3ff;
    border: 1px solid #394c6d;
    border-radius: 11px;
    font: inherit;
}

input::placeholder {
    color: #93a4be;
}

select:focus,
input:focus {
    outline: 2px solid #9189ff;
    outline-offset: 2px;
}

.stat {
    background: #182a49;
    border: 1px solid #3a4e70;
    border-radius: 16px;
    padding: 25px;
}

.stat strong {
    color: #fff;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 850;
}

.stat span {
    color: #afbed5;
}

.notice {
    background: rgba(106, 105, 233, .12);
    color: #d3d9ff;
    border: 1px solid #474e86;
    border-radius: 12px;
    padding: 17px;
}

.breadcrumb,
.geographic-breadcrumbs button {
    color: #bcb1ff;
}

.level {
    background: #272c55;
    color: #d1caff;
    border: 1px solid #494d81;
}

.geographic-card-grid {
    gap: 14px;
}

.geographic-card {
    background: #172845;
    color: #f0f4ff;
    border: 1px solid #3a4d6b;
    border-radius: 15px;
    min-height: 110px;
    padding: 20px;
    transition: transform .18s, background .18s,
        border-color .18s;
}

.geographic-card:hover,
.geographic-card:focus-visible {
    transform: translateY(-2px);
    background: #26345a;
    border-color: #9c91ff;
}

.geographic-card-name {
    font-size: 15px;
    font-weight: 800;
}

.geographic-card-voters {
    color: #b0bfd7;
}

.polling-centre-row,
.polling-station-row {
    background: #172845;
    border: 1px solid #3a4d6b;
    border-radius: 14px;
}

.polling-centre-row:hover {
    background: #25345a;
    border-color: #938aff;
}

.polling-centre-row.selected {
    background: #303168;
    border: 2px solid #a196ff;
}

.polling-centre-name,
.polling-station-row strong {
    color: #f1f5ff;
}

.polling-centre-details,
.polling-station-row span {
    color: #aebdd5;
}

.polling-selection-summary {
    background: #252e55;
    color: #e7e8ff;
    border: 1px solid #51578b;
}

.view-stations-button {
    background: #283365;
    color: #e0dcff;
    border: 1px solid #8179e8;
    border-radius: 9px;
}

.view-stations-button:hover {
    background: #383d7d;
}

.status {
    color: #b5c5dc;
}

.error {
    color: #ff9eaf;
}

@media (max-width: 700px) {
    main {
        margin-top: 34px;
    }

    .panel {
        padding: 20px;
        border-radius: 17px;
    }

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

    .office-button {
        min-height: 85px;
        padding: 16px 10px;
    }

    .selectors,
    .stats {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .office-button,
    .geographic-card {
        transition: none;
    }

    .office-button:hover,
    .geographic-card:hover {
        transform: none;
    }
}