/* PeakTransfer.io: huisstijl navy, oranje en paars */
:root{--orange:#FF6B35;--navy:#0A2342;--purple:#6B46C1;--grad:linear-gradient(90deg,#FF6B35,#6B46C1);
--bg:#fff;--fg:#0A2342;--muted:#4a5a72;--soft:#f3f4f8;--line:#dde1ea;--link:#6B46C1;--danger:#c0392b;--ok:#1f8a5b;
--wm:url("peaktransfer-mark.svg?v=2")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#071a33;--fg:#f2f4f8;--muted:#a9b6c9;--soft:#0d2748;--line:#1e3a5f;--link:#b9a3ff;--danger:#ff8a7a;--ok:#5fd3a0}}
:root[data-theme="dark"]{--bg:#071a33;--fg:#f2f4f8;--muted:#a9b6c9;--soft:#0d2748;--line:#1e3a5f;--link:#b9a3ff;--danger:#ff8a7a;--ok:#5fd3a0}
*,*::before,*::after{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--navy);color:var(--fg);font:400 17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{max-width:1120px;width:100%;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:#fff;border-bottom:1px solid #dde1ea}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:44px;width:auto;display:block;background:#fff;border-radius:8px;padding:4px 10px}
.logo.big img{height:56px}
nav{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:500}
nav a{text-decoration:none;color:#0A2342}
nav a:hover,nav a[aria-current="page"]{color:var(--orange)}
nav a[aria-current="page"]{font-weight:700}
form.inline{display:inline;margin:0}
@media(max-width:820px){nav{gap:14px;font-size:14px}header .logo img{height:36px}}
@media(max-width:640px){header .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:8px}header nav{gap:8px;font-size:13.5px}header nav:has(form){width:100%;justify-content:space-between}nav a{white-space:nowrap}nav .btn.small{padding:7px 11px;font-size:13px}}

/* Knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--orange);color:#fff;font:inherit;font-weight:700;font-size:16px;padding:14px 26px;border-radius:8px;text-decoration:none;border:2px solid var(--orange);cursor:pointer;line-height:1.2}
.btn:hover{background:#e85a26;border-color:#e85a26}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.small{padding:9px 16px;font-size:14px}
.btn.alt{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn.alt:hover{background:var(--fg);color:var(--bg)}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.danger:hover{background:var(--danger);color:#fff}
.btn.block{width:100%}
.linkbtn{all:unset;cursor:pointer;color:var(--link);text-decoration:underline;font-size:15px}
.linkbtn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* Hero */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:72px 0 170px}
/* Watermerk: groot zoals op peakcapture.io, 16 graden gedraaid, maar altijd helemaal in beeld
   (inclusief het vliegtuigje rechtsboven). scale(.8) houdt de gedraaide vorm binnen zijn eigen vak;
   de onderkant blijft boven de witte kaart die 80px over het blauwe vlak valt. */
.hero::after{content:"";position:absolute;right:max(12px,3vw);top:12px;bottom:calc(80px + 12px);aspect-ratio:500/470;background:#fff;-webkit-mask:var(--wm) center/contain no-repeat;mask:var(--wm) center/contain no-repeat;opacity:.18;transform:rotate(16deg) scale(.8);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.eyebrow{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:14px;color:#d5deea;letter-spacing:.04em;text-transform:uppercase}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--orange)}
.hero h1{font-size:clamp(34px,5.4vw,58px);margin-bottom:14px}
.bar{width:140px;height:5px;background:var(--grad);border-radius:3px;margin:0 0 20px}
.hero .lead{font-size:clamp(17px,2vw,20px);max-width:640px;color:#d5deea}
@media(max-width:700px){.hero{padding:40px 0 120px}.hero::after{right:4px;opacity:.12}}

/* Inhoud */
.main{flex:1;margin-top:-80px;position:relative;z-index:2;padding-bottom:72px}
.panel{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:32px;box-shadow:0 18px 40px rgba(10,35,66,.12)}
.panel+.panel{margin-top:24px}
.panel.narrow{max-width:520px}
.panel h2{font-size:26px;margin-bottom:8px}
.panel .sub{color:var(--muted);margin-bottom:22px}
@media(max-width:600px){.panel{padding:22px 18px}.wrap{padding:0 16px}}

.msg{border-radius:10px;padding:14px 18px;margin-bottom:20px;font-weight:500;border-left:5px solid}
.msg.ok{background:color-mix(in srgb,var(--ok) 12%,var(--bg));border-color:var(--ok)}
.msg.err{background:color-mix(in srgb,var(--danger) 12%,var(--bg));border-color:var(--danger)}
.msg.info{background:var(--bg);border-color:var(--purple)}

/* Formulieren */
.field{display:grid;gap:6px;margin-bottom:18px}
.field>span,.label{font-size:14px;font-weight:700}
.field small,.hint{font-size:13px;color:var(--muted);font-weight:400}
input[type=text],input[type=email],input[type=password],select,textarea{font:inherit;font-size:16px;padding:12px 14px;border-radius:8px;border:2px solid var(--line);background:var(--bg);color:var(--fg);width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
.check{display:flex;gap:10px;align-items:center;font-size:15px;margin-bottom:18px}
.check input{width:18px;height:18px;accent-color:var(--orange)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}

/* Segmentkeuze (e-mail / link) */
.seg{display:inline-grid;grid-template-columns:1fr 1fr;border:2px solid var(--line);border-radius:999px;padding:3px;margin-bottom:20px;width:100%}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{text-align:center;padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:700;font-size:15px}
.seg input:checked+label{background:var(--navy);color:#fff}
.seg input:focus-visible+label{outline:3px solid var(--orange);outline-offset:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg input:checked+label{background:var(--orange)}}

/* Uploadpagina */
.composer{display:grid;grid-template-columns:1.15fr .85fr;gap:32px}
@media(max-width:900px){.composer{grid-template-columns:1fr}}
.drop{position:relative;border:2px dashed var(--line);border-radius:14px;padding:40px 24px;text-align:center;transition:border-color .2s,background .2s;cursor:pointer;display:grid;place-items:center;gap:10px;min-height:220px}
.drop:hover,.drop.over{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 6%,var(--bg))}
.drop svg{width:56px;height:56px;color:var(--orange)}
.drop strong{font-size:20px}
.drop p{color:var(--muted);font-size:15px}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop:focus-within{border-color:var(--orange)}
.pick{display:flex;gap:16px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.pick .linkbtn{position:relative;z-index:2}

.files{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px;max-height:420px;overflow:auto}
.files li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.files .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:15px}
.files .sz{color:var(--muted);font-size:14px;white-space:nowrap}
.files button{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--muted);font-size:20px;line-height:1}
.files button:hover{background:var(--soft);color:var(--danger)}
.files li.done .sz{color:var(--ok)}

.meter{margin-top:18px}
.meter .track{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.meter .fill{height:100%;width:0;background:var(--grad);transition:width .2s}
.meter .info{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:6px;gap:12px}
.meter.over .fill{background:var(--danger)}
.meter.over .info b{color:var(--danger)}

/* Voortgang */
.progress{text-align:center;padding:24px 0}
.ring{width:180px;height:180px;margin:0 auto 20px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:12}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke:url(#g);stroke-linecap:round;transition:stroke-dashoffset .3s}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;font-weight:800}
.progress .stat{color:var(--muted)}

/* Resultaat */
.copy{display:flex;gap:8px;margin:18px 0}
.copy input{flex:1;min-width:0;font-size:15px}
.done-icon{width:72px;height:72px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin-bottom:18px}
.done-icon svg{width:36px;height:36px;color:#fff}

/* Tabellen */
.table-wrap{overflow-x:auto}
/* Valt een tabel toch breder uit dan het paneel: schaduw aan de kant waar nog meer staat. */
.table-wrap{background:linear-gradient(to right,var(--bg) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(to left,var(--bg) 30%,transparent) right/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(10,35,66,.22),transparent) left/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(10,35,66,.22),transparent) right/14px 100% no-repeat scroll}
table.list{width:100%;border-collapse:collapse;font-size:15px}
table.list th{text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
table.list td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.list td.num{white-space:nowrap}
table.list .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pill.ready{background:var(--grad);color:#fff}
.pill.expired,.pill.deleted{background:var(--line);color:var(--muted)}
.pill.uploading{background:color-mix(in srgb,var(--orange) 20%,var(--bg));color:var(--fg)}
.pill.admin{background:var(--navy);color:#fff}
.muted{color:var(--muted)}
.small{font-size:14px}
.empty{color:var(--muted);padding:24px 0}

/* Downloadpagina */
.dl{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
@media(max-width:860px){.dl{grid-template-columns:1fr;gap:28px}}
.dl .from{font-size:20px;font-weight:700;margin-bottom:6px}
.quote{border-left:4px solid var(--orange);padding:4px 0 4px 16px;margin:18px 0;white-space:pre-line}
.facts{list-style:none;padding:0;margin:22px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;border-top:4px solid;border-image:var(--grad) 1;padding-top:16px}
.facts b{display:block;font-size:22px;font-weight:800;color:var(--orange)}
.facts span{font-size:14px;color:var(--muted)}
.dlfiles{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.dlfiles li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
.dlfiles .nm{overflow-wrap:anywhere;font-weight:500}
.dlfiles .sz{color:var(--muted);font-size:14px;white-space:nowrap}
.dlfiles a{font-weight:700;text-decoration:none;white-space:nowrap}
@media(max-width:520px){.dlfiles li{grid-template-columns:1fr auto}.dlfiles .sz{grid-column:1;grid-row:2}}

/* Statistiek in beheer */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.stats div{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px}
.stats b{display:block;font-size:26px;font-weight:800;color:var(--orange)}
.stats span{font-size:14px;color:var(--muted)}
@media(max-width:700px){.stats{gap:8px}.stats div{padding:12px}.stats b{font-size:18px}.stats span{font-size:12px}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}

/* Footer */
footer{position:relative;z-index:3;background:var(--navy);border-top:1px solid rgba(255,255,255,.12);color:#c3cfdf;padding:40px 0 44px;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-start}
footer .fl{display:grid;gap:8px;line-height:1.5;word-break:break-word}
footer .fl a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
footer .fl a:hover{color:var(--orange);border-color:var(--orange)}

[hidden]{display:none !important}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}
.spaced{margin-top:14px}
.progress .row{justify-content:center}
/* Mijn transfers: vaste kolombreedtes, lange namen afgekapt, zodat de knoppen altijd in beeld staan. */
table.transfers{table-layout:fixed}
table.transfers .w-to{width:24%}
table.transfers .w-date{width:150px}
table.transfers .w-dl{width:104px}
table.transfers .w-act{width:150px}
@media(min-width:1061px){table.transfers td.num:nth-child(5),table.transfers th.w-dl{text-align:center}}
table.transfers .clipline{display:flex;align-items:center;min-width:0}
table.transfers .clip{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.transfers .more{flex:none;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:12px;font-weight:700}
table.transfers .pill.request{flex:none;margin-right:6px;background:var(--soft);color:var(--muted)}
table.transfers .fname .ico{flex:none;width:17px;height:17px;margin-right:6px;fill:var(--orange)}
table.transfers .actions{flex-direction:column;align-items:stretch}
table.transfers .actions .btn{width:100%}
@media(max-width:900px){
table.list thead{display:none}
table.list,table.list tbody,table.list tr,table.list td{display:block;width:100%}
table.list tr{border-bottom:1px solid var(--line);padding:12px 0}
table.list td{border:0;padding:3px 0}
table.list td[data-label]::before{content:attr(data-label);display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
table.list .actions{justify-content:flex-start;margin-top:8px}
}
/* Mijn transfers op tablet en telefoon: compacte kaart, gegevens naast elkaar, knoppen eronder. */
@media(max-width:1060px){
table.transfers thead{display:none}
table.transfers,table.transfers tbody,table.transfers td{display:block;width:100%}
table.transfers tr{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:8px 18px;border-bottom:1px solid var(--line);padding:16px 0}
table.transfers td{border:0;padding:0}
table.transfers td[data-label]::before{content:attr(data-label);display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
table.transfers td:last-child{grid-column:1/-1}
table.transfers td:last-child:empty{display:none}
table.transfers .actions{flex-direction:row;justify-content:flex-start}
table.transfers .actions .btn{width:auto}
}
@media(max-width:640px){
table.transfers tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
table.transfers td:first-child,table.transfers td:nth-child(2){grid-column:1/-1}
table.transfers .clip{white-space:normal;overflow-wrap:anywhere}
}
/* Woordmerk voor merken zonder logo-afbeelding (PeakTransfer) */
.wordmark{display:inline-flex;align-items:center;gap:9px;height:44px;background:#fff;border-radius:8px;padding:4px 12px 4px 5px;color:#0A2342;line-height:1}
.wordmark svg{width:34px;height:34px;flex:none}
.wordmark>span{display:grid;gap:3px}
.wm-name{font-size:20px;font-weight:700;letter-spacing:-.02em}
.wm-name b{color:var(--orange);font-weight:700}
.wm-name i{font-style:normal;color:var(--purple)}
.wm-slogan{font-size:9.5px;font-weight:500;color:#4a5a72;letter-spacing:.01em}
.logo.big .wordmark{height:56px;padding:6px 16px 6px 7px}
.logo.big .wordmark svg{width:42px;height:42px}
.logo.big .wm-name{font-size:25px}
.logo.big .wm-slogan{font-size:11.5px}
footer .by{margin-top:10px;font-size:14px}
footer .by a{color:#fff}
@media(max-width:640px){header .wordmark{height:36px}header .wordmark svg{width:28px;height:28px}header .wm-name{font-size:17px}header .wm-slogan{font-size:8.5px}}
.grid2+.panel{margin-top:24px}
.pill.pro{background:var(--orange);color:#fff}
/* Taalschakelaar NL | EN */
.langsw{display:inline-flex;margin-left:auto;border:2px solid #dde1ea;border-radius:999px;padding:2px;flex:none}
.langsw a{font-size:12px;font-weight:800;letter-spacing:.04em;text-decoration:none;color:#4a5a72;padding:4px 9px;border-radius:999px;line-height:1.2}
.langsw a:hover{color:#FF6B35}
.langsw a[aria-current]{background:#0A2342;color:#fff}
.grid2.tight{gap:0 16px}
.spaced-b{margin:-6px 0 18px}
/* Tweede klik nodig om te bevestigen */
.btn.armed{background:var(--danger);border-color:var(--danger);color:#fff}
.pill.extreme{background:#0A2342;color:#FF6B35;border:1px solid #FF6B35}
/* Inloggen met Google */
.btn.google{background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600}
.btn.google:hover{background:#f6f8fb;border-color:#c6cad1}
.g-icon{width:18px;height:18px;flex:none}
.or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.pill.google{background:#fff;color:#1f1f1f;border:1px solid #dadce0}
@media(max-width:640px){header nav:has(form){flex-wrap:wrap;justify-content:flex-start;gap:8px 18px}header nav form.inline{margin-left:auto}}
.code-input{font-size:28px;font-weight:800;letter-spacing:.3em;text-align:center}
/* Kiezen van bestanden en mappen */
.pick .btn svg{width:16px;height:16px}
.pick-note{text-align:center;color:var(--muted);font-size:13px;margin-top:8px}
.files .dir{color:var(--muted);font-weight:400}
/* Menu op middelgrote schermen: niet afbreken binnen een menu-item */
nav a{white-space:nowrap}
@media(max-width:900px) and (min-width:641px){nav{gap:14px;font-size:14px}.langsw a{padding:4px 7px}}
/* Past het menu niet naast het logo, dan schuift het netjes naar een tweede regel */
header .wrap{flex-wrap:wrap;height:auto;min-height:68px;padding-top:8px;padding-bottom:8px;row-gap:8px}
@media(min-width:641px){header nav{margin-left:auto}}
/* Bestanden aanleveren: het bericht van de vrager */
.request-msg{margin:0 0 20px;padding:4px 0 4px 16px;border-left:4px solid var(--orange);color:var(--fg);white-space:normal}