/* toshare.webshopschool.nl in de stijl van JARVIS OS (Joey, 15-11-2026): dezelfde
   kleuren, de kaart met hoekjes, mono voor wat het systeem zegt. Zo kaal mogelijk. */
@font-face{font-family:Inter;src:url('/static/inter.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url('/static/jetbrainsmono.woff2') format('woff2');font-style:normal;font-weight:100 800;font-display:swap}

:root{
  --kader:#161616;--vlak:#1b1b1b;--vlak-2:#222222;--rand:#2a2a2a;--rand-2:#3a3a3a;--hoek:#7d7d7d;
  --inkt:#f1f1f1;--inkt-2:#b8b8b8;--inkt-3:#8d8d8d;
  --oranje:#e5a31b;--oranje-tekst:#f0bc4e;--oranje-wash:rgba(229,163,27,.12);
  --groen:#3ddc84;--groen-wash:rgba(61,220,132,.12);--rood:#ff7b72;--rood-wash:rgba(255,123,114,.1);
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code","SF Mono",Menlo,monospace;
  --tekst:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --kader:#fafaf8;--vlak:#ffffff;--vlak-2:#f3f2ee;--rand:#e1dfd9;--rand-2:#cbc8c0;--hoek:#8f8d86;
    --inkt:#17181a;--inkt-2:#4b4d53;--inkt-3:#6a6d75;
    --oranje-tekst:#8a5d00;--oranje-wash:#fbf1db;
    --groen:#1c7f3f;--groen-wash:#e4f3e9;--rood:#b3261e;--rood-wash:#fbeceb;
    color-scheme:light;
  }
}
:root{--hoekjes:
  linear-gradient(var(--hoek),var(--hoek)) top left/10px 1px no-repeat,
  linear-gradient(var(--hoek),var(--hoek)) top left/1px 10px no-repeat,
  linear-gradient(var(--hoek),var(--hoek)) top right/10px 1px no-repeat,
  linear-gradient(var(--hoek),var(--hoek)) top right/1px 10px no-repeat,
  linear-gradient(var(--hoek),var(--hoek)) bottom left/10px 1px no-repeat,
  linear-gradient(var(--hoek),var(--hoek)) bottom left/1px 10px no-repeat,
  linear-gradient(var(--hoek),var(--hoek)) bottom right/10px 1px no-repeat,
  linear-gradient(var(--hoek),var(--hoek)) bottom right/1px 10px no-repeat}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{min-height:100vh;min-height:100dvh;background:var(--kader);color:var(--inkt);font-family:var(--tekst);font-size:13.5px;line-height:1.55;-webkit-font-smoothing:antialiased;display:grid;place-items:start center;padding:12vh 16px 48px}
button,input,textarea{font:inherit;color:inherit;border-radius:0}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--oranje);outline-offset:2px}

.scherm{width:100%;max-width:480px}
.kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-family:var(--mono)}
.kop h1{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.2px}
.stip{width:8px;height:8px;background:var(--oranje)}
.merk{font-size:11px;color:var(--inkt-3)}

.kaart{position:relative;background:var(--vlak);border:1px solid var(--rand);padding:24px}
.kaart::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:var(--hoekjes)}
form{display:grid;gap:8px}
form+form,.links+form{margin-top:14px}

.lbl{font-family:var(--mono);font-size:11.5px;color:var(--inkt-2);margin-top:10px}
form>.lbl:first-child{margin-top:0}
.stil{color:var(--inkt-3)}
.klein{font-size:12px}
input[type=email],input[type=text],textarea{width:100%;padding:11px 12px;border:1px solid var(--rand-2);background:var(--vlak);outline:none;font-size:14px}
textarea{resize:vertical;line-height:1.55;min-height:62px}
input:focus,textarea:focus{border-color:var(--oranje)}
#code{font-family:var(--mono);font-size:20px;letter-spacing:8px;text-align:center}
#aanmeldcode{font-family:var(--mono);text-transform:uppercase;letter-spacing:2px;text-align:center}

.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--rand-2);background:var(--vlak);font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--inkt);white-space:nowrap}
.knop:hover{border-color:var(--inkt-3)}
.knop:disabled{opacity:.45;cursor:default}
.knop-oranje{background:var(--oranje);border-color:var(--oranje);color:#14110d;font-weight:600}
.knop-oranje:hover:not(:disabled){background:#ecb43f;border-color:#ecb43f}
.breed{width:100%;margin-top:8px}
.links{display:flex;gap:18px;justify-content:center;margin-top:16px}
.link{font-family:var(--mono);font-size:11.5px;color:var(--inkt-3);text-decoration:underline;text-decoration-color:var(--rand-2);text-underline-offset:4px}
.link:hover{color:var(--inkt)}
.link:disabled{cursor:default;text-decoration:none}

.melding{padding:9px 12px;font-size:12.5px;color:var(--rood);background:var(--rood-wash);border-left:2px solid var(--rood)}
.melding.zacht{color:var(--oranje-tekst);background:var(--oranje-wash);border-color:var(--oranje);margin-bottom:12px}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.wie{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.wie strong{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dropzone{height:150px;border:1px dashed var(--rand-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--inkt-2);cursor:pointer;text-align:center;padding:0 16px}
.dropzone:hover,.dropzone.over{border-color:var(--oranje);color:var(--inkt)}
.dropzone svg{width:26px;height:26px;color:var(--inkt-3)}

.bestanden{list-style:none;margin-top:4px}
.bestanden li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rand)}
.bestanden .naam{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bestanden .maat{font-family:var(--mono);font-size:11.5px;color:var(--inkt-3);white-space:nowrap}
.bestanden .weg{color:var(--inkt-3);font-size:17px;line-height:1;padding:2px 6px}
.bestanden .weg:hover{color:var(--rood)}
.bestanden li.fout .naam,.bestanden .waarom{color:var(--rood)}
.bestanden .waarom{grid-column:1/-1;font-size:12px}
.bestanden li .balk{grid-column:1/-1}
.bestanden li.af .maat{color:var(--groen)}

.kies{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.keuze{position:relative}
.keuze input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.keuze span{display:flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border:1px solid var(--rand-2);font-family:var(--mono);font-size:12px;color:var(--inkt-2)}
.keuze input:hover+span{border-color:var(--inkt-3)}
.keuze input:checked+span{border-color:var(--oranje);color:var(--oranje-tekst);background:var(--oranje-wash)}
.keuze input:focus-visible+span{outline:2px solid var(--oranje);outline-offset:2px}

.balk{height:4px;background:var(--vlak-2)}
.balk i{display:block;height:100%;width:0;background:var(--oranje);transition:width .25s linear}
.totaal{margin-bottom:14px}
.totaal .balk{height:8px}
.totaal p{font-family:var(--mono);font-size:12px;color:var(--inkt-2);margin-top:10px}
[data-stap=bezig]>.stil{margin-top:14px}

.klaar{display:grid;justify-items:center;gap:10px;padding:14px 0 6px;text-align:center}
.klaar h2{font-size:16px;font-weight:600}
.klaar .knop{margin-top:10px}
.vink{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--groen);background:var(--groen-wash);color:var(--groen);font-size:20px}

@media (max-width:600px){
  body{padding-top:28px}
  .kaart{padding:20px 18px}
  input[type=email],input[type=text],textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}