:root {
    --groen: #1b7f5a;
    --groen-diep: #0f4f38;
    --geel: #f6c445;
    --oranje: #ef7a45;
    --papier: #fdfaf3;
    --inkt: #17211d;
    --grijs: #6d7a74;
    --rand: #e4ded1;
    --radius: 18px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: var(--papier);
    color: var(--inkt);
    -webkit-text-size-adjust: 100%;
}

.kop {
    background: linear-gradient(150deg, var(--groen) 0%, var(--groen-diep) 100%);
    color: #fff;
    padding: 28px 20px 24px;
    border-radius: 0 0 26px 26px;
}
.kop h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; }
.hallo { margin: 6px 0 0; opacity: .9; font-size: .95rem; }
.hallo a { color: #fff; }

.voortgang {
    margin-top: 14px;
    height: 8px;
    background: rgba(255,255,255,.25);
    border-radius: 99px;
    overflow: hidden;
}
.voortgang span {
    display: block;
    height: 100%;
    background: var(--geel);
    border-radius: 99px;
    transition: width .4s ease;
}

.blad { max-width: 720px; margin: 0 auto; padding: 18px 16px 60px; }
.blad.smal { max-width: 380px; padding-top: 60px; }

.kaart {
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 18px;
    margin: 0 0 16px;
    box-shadow: 0 2px 0 rgba(23,33,29,.04);
}

.opdracht-kop { display: flex; gap: 12px; align-items: flex-start; }
.opdracht-kop h2 { margin: 0 0 3px; font-size: 1.05rem; }
.opdracht-kop p { margin: 0; color: var(--grijs); font-size: .9rem; line-height: 1.45; }

.nummer {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--geel);
    color: var(--groen-diep);
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: .95rem;
}
.opdracht.vrij .nummer { background: var(--oranje); color: #fff; }
.opdracht.klaar .nummer { background: var(--groen); color: #fff; }

.vink { margin-left: auto; color: var(--groen); font-size: 1.3rem; font-weight: 700; }

.uploadform { margin-top: 14px; display: grid; gap: 10px; }

.bestandsknop { position: relative; display: block; }
.bestandsknop input[type=file] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.bestandsknop span {
    display: block;
    text-align: center;
    padding: 14px;
    border: 2px dashed var(--rand);
    border-radius: 14px;
    color: var(--grijs);
    font-size: .95rem;
    background: #fcfbf7;
}
.bestandsknop.gekozen span { border-color: var(--groen); color: var(--groen); background: #f1f8f4; }

input[type=text], input[type=password], textarea, select {
    width: 100%;
    font: inherit;
    padding: 12px 14px;
    border: 1px solid var(--rand);
    border-radius: 12px;
    background: #fff;
    color: inherit;
}
textarea { resize: vertical; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }

.knop {
    font: inherit;
    font-weight: 600;
    border: 0;
    border-radius: 12px;
    background: var(--groen);
    color: #fff;
    padding: 13px 18px;
    cursor: pointer;
}
.knop:active { transform: translateY(1px); }
.knop.groot { width: 100%; margin-top: 12px; padding: 15px; font-size: 1.05rem; }
.knop[disabled] { opacity: .6; }

.tekstknop {
    background: none; border: 0; color: var(--grijs);
    font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; padding: 4px 0;
}

.melding { padding: 12px 15px; border-radius: 12px; margin-bottom: 16px; font-size: .95rem; }
.melding.goed { background: #e7f5ee; color: var(--groen-diep); }
.melding.mis { background: #fdeae2; color: #a03a12; }

.klein { font-size: .85rem; color: var(--grijs); }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; }
.raster figure { margin: 0; }
.raster img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.raster figcaption { font-size: .75rem; color: var(--grijs); margin-top: 4px; }

.uitloggen { text-align: center; margin-top: 8px; }
.uitloggen button { background: none; border: 0; color: var(--grijs); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }

/* --- beheer --- */
body.beheer { background: #f4f4f2; }
body.beheer .kop { background: var(--inkt); border-radius: 0; }
.titel { margin: 6px 0 16px; font-size: 1.25rem; }

.lijst { display: grid; gap: 12px; }
.deelnemerrij {
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: inherit; margin: 0;
}
.deelnemerinfo { flex: 1 1 auto; min-width: 0; }
.deelnemerinfo h2 { margin: 0 0 2px; font-size: 1.05rem; }
.mini { display: flex; gap: 5px; flex: 0 0 auto; }
.mini img { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; }

.beoordeel { display: grid; gap: 14px; }
.groot-beeld { width: 100%; border-radius: 12px; display: block; }
.opdrachtlabel { margin: 0 0 4px; font-weight: 700; color: var(--groen-diep); }
.bijschrift { margin: 0 0 4px; font-style: italic; }
.beoordeelform { display: grid; gap: 10px; margin-top: 12px; }
.beoordeelform .rij { display: flex; gap: 12px; align-items: center; }
.beoordeelform select { width: auto; flex: 0 0 auto; }
.favlabel { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.favlabel input { width: 18px; height: 18px; }
.verwijderform { text-align: right; }

@media (min-width: 620px) {
    .beoordeel { grid-template-columns: 1fr 1fr; align-items: start; }
}