:root{
    /* Tekst (licht & leesbaar op donker) */
    --text:#ECE8FF;
    --muted:#B7AECF;

    /* Donkere paars/slate kaarten */
    --card:#2E2537;
    --card-hover:#3A2E48;
    --card-border:#423650;

    /* Paneel (header/tip) */
    --panel:#FFFFFF0A;
    --panel-2:#FFFFFF14;

    /* Schaduwen / glow */
    --shadow:#00000066;
    --glow-1:#8A5CF633;
    --glow-2:#FF7AD91A;
}

/* Pagina container */
.vote-page{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:16px;
}

/* ===== Header ===== */
.vote-header{
    margin:0 0 18px 0;
    padding:18px 20px;
    border-radius:18px;
    background:linear-gradient(180deg,#FFFFFF12,#FFFFFF08);
    border:1px solid var(--panel-2);
    backdrop-filter:blur(8px);
    box-shadow:0 8px 24px var(--shadow);
}
.vote-header h1{
    margin:0 0 6px 0;
    font-weight:900;
    letter-spacing:.2px;
    color:#F4F2FF;
}
.vote-header p{
    margin:0;
    color:#C5BED8;
    font-weight:600;
    font-size:14px;
}

/* ===== Layout: tabel links + grid rechts ===== */
.vote-layout{
    display:flex;
    gap:24px;
    align-items:flex-start;
}

/* ===== Grid ===== */
.vote-grid{
    display:grid;
    /* 2 kolommen, 3 rijen bij 6 items */
    grid-template-columns:repeat(2, minmax(260px, 1fr));
    gap:20px;
    flex:1;
}

/* ===== Kaart ===== */
.vote-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:18px;

    /* iets groter */
    padding:18px 20px;
    min-height:80px;

    color:var(--text);
    box-shadow:0 10px 22px var(--shadow);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
    overflow:hidden;
}

.vote-card::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(120% 80% at -10% -20%, #FFFFFF22 0%, transparent 55%);
    pointer-events:none;
    opacity:.18;
    transition:opacity .2s ease;
}

.vote-card:hover{
    transform:translateY(-2px);
    background:var(--card-hover);
    border-color:#4B3B5C;
    box-shadow:0 12px 28px var(--shadow), 0 0 14px var(--glow-1);
    filter:drop-shadow(0 0 10px var(--glow-2));
}
.vote-card:hover::before{ opacity:.26; }

.vote-card:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px #FFFFFF33, 0 12px 28px var(--shadow);
}

/* Body */
.vote-card__body{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}
.vote-card__title{
    margin:0;
    font-size:20px;          /* iets groter */
    font-weight:900;
    letter-spacing:.2px;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ===== Rewards kaart links ===== */
.vote-rewards{
    flex:0 0 260px;
    max-width:260px;
    padding:16px 18px;
    border-radius:18px;
    background:var(--panel);
    border:1px solid var(--panel-2);
    backdrop-filter:blur(8px);
    box-shadow:0 8px 24px var(--shadow);
    color:var(--text);
    font-size:13px;
}
.vote-rewards__title{
    margin:0 0 6px 0;
    font-size:16px;
    font-weight:800;
    letter-spacing:.2px;
}
.vote-rewards__subtitle{
    margin:0 0 10px 0;
    color:var(--muted);
    line-height:1.4;
    font-size:17px;
}

/* tabel zelf */
.vote-rewards__table{
    width:100%;
    border-collapse:collapse;
    font-size:17px;
}
.vote-rewards__table th,
.vote-rewards__table td{
    padding:6px 4px;
    text-align:left;
}
.vote-rewards__table th{
    color:var(--muted);
    font-weight:700;
    border-bottom:1px solid var(--panel-2);
}
.vote-rewards__table tbody tr:not(:last-child) td{
    border-bottom:1px dashed var(--panel-2);
}
.vote-rewards__table td:nth-child(1){
    width:80px;
    font-weight:700;
}

/* Small / medium screens */
@media (max-width:960px){
    .vote-layout{
        flex-direction:column;
    }
    .vote-rewards{
        flex:none;
        max-width:none;
        width:100%;
    }
    /* op kleinere schermen weer auto-fill, zodat het stapelt */
    .vote-grid{
        grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
    }
}

@media (max-width:520px){
    .vote-card{ padding:14px 16px; min-height:0; }
    .vote-card__title{ font-size:18px; }
}