:root{
  --orange:#F5921E; --orange-hover:#E8850F;
  --amber-bg:#FEF7EE; --amber-border:#F4E1C6;
  --slate:#3E4A5B; --label:#505A68; --muted:#9AA1AA; --value:#EC8A1E;
  --green:#2E9E5B; --red:#D64545;
  --border:#E9EBEF; --field-border:#DFE2E7; --card:#FFFFFF; --bg:#FFFFFF;
  --head:#FAFBFC; --hover:#FCFCFD;
  --r-lg:20px; --r:14px; --r-sm:10px; --r-pill:999px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--slate); -webkit-font-smoothing:antialiased; line-height:1.45}
a{color:var(--orange)}

.wrap{max-width:640px; margin:0 auto; padding:22px 16px 56px}
.wrap-wide{max-width:1240px; margin:0 auto; padding:22px 18px 48px; background:#F6F7F8; min-height:100vh}

/* Header / logo */
.top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px}
.logo{font-weight:800; font-size:30px; letter-spacing:-.5px; line-height:1}
.logo.sm{font-size:24px}
.logo .a{color:var(--slate)} .logo .b{color:var(--orange)}
.logo small{display:block; font-weight:500; font-size:12px; color:var(--muted); margin-top:6px}
.logo .tag{font-weight:600; font-size:13px; color:var(--muted); margin-left:10px}
.linkbtn{border:1px solid var(--border); background:#fff; border-radius:var(--r-pill);
  padding:9px 14px; font-size:13.5px; color:var(--label); font-weight:600; text-decoration:none}

/* Panel / card */
.panel{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:22px}
.ritpill{display:inline-block; border:1px solid var(--border); border-radius:var(--r-pill);
  padding:7px 15px; font-size:13.5px; color:var(--label); font-weight:500; margin-bottom:14px}
h1{font-size:30px; font-weight:800; letter-spacing:-.5px; margin:2px 0 20px}
h2{font-size:18px; font-weight:800; margin:0 0 16px}
.eyebrow{font-size:14px; font-weight:700; color:var(--slate); margin:24px 2px 12px}
.eyebrow:first-of-type{margin-top:6px}
.subhint{font-size:12.5px; color:var(--muted); margin:-4px 2px 12px}
.subhint .g{color:#C4C9D0}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:18px; margin-bottom:14px}
.card.req{background:var(--amber-bg); border-color:var(--amber-border)}
.hint{font-size:12px; color:var(--muted); margin-top:8px}

/* Fields */
label.f{display:block; margin-bottom:14px}
label.f:last-child{margin-bottom:0}
.flbl{font-size:13.5px; font-weight:600; color:var(--label); margin-bottom:7px; display:flex; align-items:center; gap:7px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--orange); display:inline-block}
input,select,textarea{width:100%; font:inherit; font-size:15px; color:var(--slate); background:#fff;
  border:1px solid var(--field-border); border-radius:var(--r-sm); padding:12px 13px; outline:none}
input::placeholder,textarea::placeholder{color:#B4BAC1}
select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239AA1AA' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:38px}
input:focus,select:focus,textarea:focus{border-color:var(--orange); box-shadow:0 0 0 3px rgba(245,146,30,.14)}
textarea{resize:vertical; min-height:92px}
.row{display:flex; gap:12px}
.row > *{flex:1; margin-bottom:0}
.row .u{flex:0 0 92px}

/* Segment (kies-één) */
.segment{display:flex; flex-wrap:wrap; gap:8px}
.seg{flex:1 1 calc(50% - 4px); min-width:118px; padding:12px 10px; border:1px solid var(--field-border);
  background:#fff; color:var(--label); font:inherit; font-size:14.5px; font-weight:600; border-radius:var(--r-sm); cursor:pointer; transition:.12s}
.seg:hover{border-color:var(--orange)}
.seg.on{background:var(--orange); border-color:var(--orange); color:#fff}

/* Toggle */
.toggle{display:flex; align-items:center; justify-content:space-between}
.switch{position:relative; width:46px; height:26px; flex:0 0 46px}
.switch input{opacity:0; width:0; height:0; position:absolute}
.slider{position:absolute; inset:0; background:#DCE0E5; border-radius:999px; transition:.2s}
.slider:before{content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.15)}
.switch input:checked + .slider{background:var(--orange)}
.switch input:checked + .slider:before{transform:translateX(20px)}

/* Stops */
.stop{background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; margin-bottom:12px; position:relative}
.stop.anchor{background:var(--amber-bg); border-color:var(--amber-border)}
.stop.drag{padding-left:34px}
.stop .role{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--orange); margin-bottom:10px}
.stop .rm{position:absolute; top:12px; right:12px; border:1px solid var(--border); background:#fff; color:var(--muted);
  width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:15px; line-height:1}
.handle{position:absolute; left:9px; top:15px; color:#C6CBD2; cursor:grab; font-size:17px; line-height:1; touch-action:none; user-select:none; padding:2px}
.handle:active{cursor:grabbing}
.stop.dragging{box-shadow:0 10px 26px rgba(62,74,91,.16); opacity:.97}
.addr-new{display:none; margin-top:10px}
.addr-new.show{display:block}

.addbtn{width:100%; border:1px dashed var(--amber-border); background:#fff; color:var(--orange);
  font-weight:600; font-size:14px; padding:13px; border-radius:var(--r); cursor:pointer; margin-bottom:14px}
.addbtn:hover{background:var(--amber-bg)}

.docrow{display:flex; align-items:center; gap:10px; border:1px dashed var(--amber-border);
  border-radius:var(--r-sm); padding:12px 13px; margin-bottom:10px; background:#fff}
.docrow input[type=file]{border:none; padding:0; font-size:14px; background:transparent}
.docrow .rm{position:static; flex:0 0 auto; margin-left:auto}

.submit{width:100%; border:none; background:var(--orange); color:#fff; font-weight:700; font-size:16px;
  padding:16px; border-radius:var(--r-sm); cursor:pointer; margin-top:8px}
.submit:hover{background:var(--orange-hover)}
.note{font-size:12px; color:var(--muted); text-align:center; margin-top:12px}
.flash{border-radius:var(--r-sm); padding:12px 14px; margin-bottom:16px; font-size:14px; font-weight:500}
.flash.ok{background:#E9F7EF; color:var(--green)}
.flash.err{background:#FCECEC; color:var(--red)}

/* Admin */
.obtn{background:var(--orange); color:#fff; border:none; border-radius:var(--r-sm); padding:11px 15px; font:inherit; font-weight:700; font-size:14px; cursor:pointer}
.obtn:hover{background:var(--orange-hover)}
.toprow{display:flex; gap:16px; align-items:stretch; margin-bottom:20px; flex-wrap:wrap}
.toprow > .panel:first-child{flex:1; min-width:340px}
.newk{flex:0 0 300px}
.kpis{display:flex; gap:12px; flex-wrap:wrap}
.kpi{flex:1 1 150px; border:1px solid var(--border); border-radius:var(--r); padding:13px 15px}
.kpi .k{font-size:12px; color:var(--muted)} .kpi .v{font-size:24px; font-weight:800; margin-top:5px}
.today{font-size:12.5px; color:var(--muted); margin:14px 0 12px}
.kbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap}
.tblwrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-weight:700; color:var(--label); padding:11px 12px; border-bottom:1px solid var(--border); background:var(--head); white-space:nowrap}
td{padding:11px 12px; border-bottom:1px solid var(--border); color:var(--slate); white-space:nowrap}
tr:hover td{background:var(--hover)}
td.name{font-weight:600}
.st{font-weight:700; font-size:12.5px}
.st.on{color:var(--green)} .st.off{color:var(--muted)}
.key{font-family:ui-monospace,Menlo,monospace; color:var(--label)}
.btn{border:1px solid var(--field-border); background:#fff; border-radius:8px; padding:6px 11px; font:inherit; font-size:12.5px; font-weight:600; color:var(--label); cursor:pointer; text-decoration:none}
.btn:hover{border-color:var(--orange)}
.btn.red{color:var(--red); border-color:#EAD1D1} .btn.red:hover{border-color:var(--red)}
.acts{display:flex; gap:6px}

input.invalid{border-color:#D64545; box-shadow:0 0 0 3px rgba(214,69,69,.14)}