*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f4f6fa;--panel:#ffffff;--border:#e4e8ef;--text:#1c2430;--muted:#6b7686;--faint:#9aa5b4;--accent:#16a34a;--accent-soft:#eaf7ef;--ink:#0b1220;--shadow:0 1px 2px rgba(20,30,50,.06),0 1px 1px rgba(20,30,50,.04)}body,html{background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.shell{display:flex;min-height:100vh}.sidebar{flex:0 0 220px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:14px 12px;gap:4px;position:-webkit-sticky;position:sticky;top:0;height:100vh}.sidebar .logo{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}.sidebar .logo .mark{width:30px;height:30px;border-radius:8px;background:var(--ink);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px}.sidebar .logo .txt{font-weight:700;font-size:15px}.sidebar .logo .txt small{display:block;color:var(--faint);font-weight:500;font-size:11px}.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--muted);font-weight:600;font-size:13.5px}.nav-item:hover{background:var(--bg);color:var(--text)}.nav-item.active{background:var(--accent-soft);color:#15803d}.nav-item .ico{width:18px;text-align:center;font-size:15px}.nav-item .tel{margin-left:auto;font-size:11px;font-weight:600;color:var(--faint)}.nav-sep{flex:1 1}.nav-foot{color:var(--faint);font-size:11px;padding:8px;line-height:1.5}.nav-foot a{color:var(--muted);font-weight:600}.main{flex:1 1;min-width:0;display:flex;flex-direction:column}.content{flex:1 1;min-width:0}.topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--border);position:-webkit-sticky;position:sticky;top:0;z-index:5}.topbar h1{font-size:15px;font-weight:700;letter-spacing:-.01em}.topbar .sub{color:var(--faint);font-weight:500;font-size:13px}.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px}.topbar .right form button{background:none;border:none;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer}.topbar .right form button:hover{color:var(--text)}.inbox{display:flex;height:calc(100vh - 57px)}.conv-list{flex:0 0 320px;border-right:1px solid var(--border);background:var(--panel);overflow-y:auto}.conv-list .head{padding:14px 16px 8px;font-weight:700;font-size:14px}.conv-tabs{display:flex;gap:14px;padding:0 16px 10px;border-bottom:1px solid var(--border)}.conv-tabs span{font-size:12.5px;font-weight:600;color:var(--muted);padding-bottom:6px;cursor:pointer}.conv-tabs span.active{color:var(--accent);border-bottom:2px solid var(--accent)}.conv-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer}.conv-item:hover{background:#fafbff}.conv-item.active{background:var(--accent-soft)}.conv-ava{position:relative;flex:0 0 auto}.conv-ava .circle{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;background:var(--ink)}.conv-ava .chan{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:9px;border:1.5px solid #fff;background:#25d366;color:#fff}.conv-main{min-width:0;flex:1 1}.conv-main .top{display:flex;justify-content:space-between;gap:8px}.conv-main .nm{font-weight:650;font-size:13.5px}.conv-main .tm{color:var(--faint);font-size:11.5px;flex:0 0 auto}.conv-main .prev{color:var(--muted);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conv-main .prev.unread{color:var(--text);font-weight:600}.conv-empty{padding:18px 16px;color:var(--faint);font-size:13px}.thread{flex:1 1;display:flex;flex-direction:column;min-width:0;background:#f7f9fc}.thread-head{display:flex;align-items:center;gap:11px;padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--border)}.thread-head .avatar{width:34px;height:34px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:0 0 auto}.thread-head .nm{font-weight:700;font-size:15px}.thread-head .sub{color:var(--faint);font-size:12px}.thread-scroll{flex:1 1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:10px}.msg{max-width:72%}.msg.in{align-self:flex-start}.msg.out{align-self:flex-end}.msg .bubble{padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}.msg.in .bubble{background:var(--panel);border:1px solid var(--border);border-bottom-left-radius:5px}.msg.out .bubble{background:#dcf8c6;border:1px solid #c9ecae;border-bottom-right-radius:5px}.msg .foot{font-size:10.5px;color:var(--faint);margin-top:4px;display:flex;gap:5px}.msg.out .foot{justify-content:flex-end}.msg .fail{color:#c0392b}.inbox-empty{flex:1 1;display:grid;place-items:center;color:var(--faint)}.note-card{align-self:center;max-width:88%;width:100%;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:9px 13px}.note-head{font-size:10.5px;font-weight:700;color:#b45309;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}.note-body{font-size:13px;color:var(--text);white-space:pre-wrap;word-wrap:break-word}.note-time{font-size:10px;color:var(--faint);margin-top:5px}.day-sep{align-self:center;font-size:11px;color:var(--faint);background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:2px 12px}.thread-actions{display:flex;align-items:center;gap:6px;margin-left:auto}.thread-actions button{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:5px 9px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}.thread-actions button:hover{background:#f4f6fb}.thread-actions button:disabled{opacity:.5;cursor:default}.composer{border-top:1px solid var(--border);background:var(--panel);flex-shrink:0}.composer-tabs{display:flex;gap:2px;padding:6px 12px 0}.composer-tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:6px 10px;font-size:12px;color:var(--faint);cursor:pointer;border-radius:6px 6px 0 0}.composer-tabs button.active{color:var(--text);font-weight:600;border-bottom-color:var(--text)}.composer-pane{padding:10px 14px 14px}.composer-row{display:flex;gap:8px;align-items:flex-end}.composer-row textarea{flex:1 1;resize:none;border:1px solid var(--border);border-radius:9px;padding:9px 12px;font:inherit;font-size:13.5px;outline:none}.composer-row textarea:focus{border-color:var(--accent)}.composer-row textarea.note-input{background:#fffbeb;border-color:#fde68a}.composer-row button{flex:0 0 auto;color:#fff;border:none;border-radius:9px;padding:0 16px;height:42px;font-weight:600;font-size:13.5px;cursor:pointer}.composer-row button:disabled{opacity:.5;cursor:default}.composer-row .btn-wa{background:var(--accent)}.composer-row .btn-note{background:#d97706}.composer-warn{background:#fffbeb;border:1px solid #fde68a;border-radius:9px;padding:10px 12px;font-size:12px;color:#92400e;line-height:1.5}.composer-err{color:#c0392b;font-size:12px;margin-bottom:6px}.page-pad{padding:18px 22px}.list{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}.list table{width:100%;border-collapse:collapse}.list th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fafbfd}.list td,.list th{padding:11px 14px;border-bottom:1px solid var(--border)}.list td{font-size:13.5px}.list tr:last-child td{border-bottom:none}.list tr:hover td{background:#fafbff}.list .empty-row td{color:var(--faint);text-align:center;padding:26px}.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--bg);color:var(--muted);border:1px solid var(--border)}.pill.open{background:var(--accent-soft);color:#15803d;border-color:#bbe7cb}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:28px;background:var(--bg)}.login-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:28px}.login-card .mark{width:38px;height:38px;border-radius:10px;background:var(--ink);display:grid;place-items:center;color:#fff;font-weight:800;margin-bottom:14px}.login-card h1{font-size:18px;margin-bottom:2px}.login-card p{color:var(--faint);font-size:13px;margin-bottom:18px}.login-card label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:12px}.login-card input{width:100%;margin-top:5px;border:1px solid var(--border);border-radius:9px;padding:10px 12px;font:inherit;font-size:14px;outline:none}.login-card input:focus{border-color:var(--accent)}.login-card button{width:100%;margin-top:6px;background:var(--ink);color:#fff;border:none;border-radius:10px;padding:12px;font-weight:700;font-size:14px;cursor:pointer}.login-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:8px;padding:8px 10px;font-size:12.5px;margin-bottom:14px}.thread-wrap{flex:1 1;display:flex;min-width:0}.orders{flex:0 0 300px;background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;padding:0 0 16px}.orders-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;font-weight:700;font-size:13px;border-bottom:1px solid var(--border)}.orders-head button{background:none;border:1px solid var(--border);border-radius:7px;width:26px;height:26px;cursor:pointer;color:var(--muted);font-size:13px}.orders-head button:hover{background:var(--bg)}.orders-leeg{padding:14px 16px;font-size:13px;color:var(--muted)}.orders-hint{margin-top:6px;font-size:11.5px;color:var(--faint);line-height:1.5}.order-kaart{padding:13px 16px;border-bottom:1px solid var(--border)}.order-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.order-top strong{font-size:13.5px}.order-datum{color:var(--faint);font-size:11.5px}.order-regels{margin:7px 0;font-size:12.5px;color:var(--text);line-height:1.5}.order-regels .variant{color:var(--faint)}.order-status{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.order-bedrag{margin-left:auto;font-weight:700;font-size:13px}.order-tracking{margin-top:9px}.tt-knop{display:block;text-align:center;background:var(--accent);color:#fff;border-radius:9px;padding:9px 12px;font-size:12.5px;font-weight:600}.tt-knop:hover{background:#15803d}.order-test{margin-top:7px;font-size:10.5px;color:#b45309;text-transform:uppercase;letter-spacing:.04em;font-weight:700}.orders-koppel{padding:14px 16px;display:flex;flex-direction:column;gap:8px}.orders-koppel .ontkoppel{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:11.5px;color:var(--muted);cursor:pointer}.zoek-rij{display:flex;gap:6px}.zoek-rij input{flex:1 1;min-width:0;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit;font-size:12.5px;outline:none}.zoek-rij input:focus{border-color:var(--accent)}.zoek-rij button{background:var(--ink);color:#fff;border:none;border-radius:8px;padding:0 12px;font-size:12.5px;font-weight:600;cursor:pointer}.zoek-rij button:disabled{opacity:.5;cursor:default}.treffer{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:9px 11px;font:inherit;font-size:12.5px;cursor:pointer}.treffer:hover{border-color:var(--accent)}.treffer span{color:var(--faint);font-size:11.5px}@media (max-width:1200px){.orders{flex:0 0 250px}}