/* Tijdsthema: donker van 18:00 t/m 07:59, gedempt licht van 08:00 t/m 17:59. */
:root,[data-theme="light"]{color-scheme:light;--ink:#262431;--muted:#777481;--green:#665c94;--green-dark:#514779;--mint:#e1deeb;--paper:#e9e8ed;--line:#d8d6e0}
[data-theme="light"] body{background:#e9e9e2}
[data-theme="light"] .topbar{background:rgba(233,233,226,.94);border-color:#d9ddd5}
[data-theme="light"] .form-card,[data-theme="light"] .your-card,[data-theme="light"] .lobby-empty{background:#f2f2ec;border-color:#d8dcd4}
[data-theme="light"] .input-wrap{border-color:#d4d9d1}
[data-theme="light"] .photo-slot{background:#ededE7;border-color:#ced6cd}
[data-theme="light"] .profile-wishes{background:#e8eae3}
[data-theme="light"] .lobby-empty{background:#e5e8e0}
[data-theme="light"] footer,[data-theme="light"] .privacy-section{border-color:#d4d9d1}
[data-theme="dark"]{color-scheme:dark;--ink:#eceaf2;--muted:#a9a5b3;--green:#aaa1dc;--green-dark:#c0b9e8;--mint:#383449;--paper:#191821;--line:#383643}
[data-theme="dark"] body{background:#17211f;color:#e7ebe6}
[data-theme="dark"] .topbar{background:rgba(23,33,31,.96);border-color:#303d37}
[data-theme="dark"] .brand{color:#edf1eb}
[data-theme="dark"] .brand-mark{background:#90b69d}
[data-theme="dark"] .brand-dot{color:#dba477}
[data-theme="dark"] .top-note,[data-theme="dark"] .help-link,[data-theme="dark"] .eyebrow,[data-theme="dark"] .step-label,[data-theme="dark"] .field,[data-theme="dark"] .field-title{color:#aab5ac}
[data-theme="dark"] .intro-copy>p,[data-theme="dark"] .trust-row,[data-theme="dark"] .field small,[data-theme="dark"] .photo-hint,[data-theme="dark"] .privacy-reminder,[data-theme="dark"] .privacy-section p,[data-theme="dark"] .lobby-top p,[data-theme="dark"] .your-profile p,[data-theme="dark"] .profile-wishes,[data-theme="dark"] .lobby-empty p{color:#a5b0a8}
[data-theme="dark"] h1 em,[data-theme="dark"] .lobby h2 span{color:#9bc2a6}
[data-theme="dark"] .form-card,[data-theme="dark"] .your-card{background:#202c28;border-color:#35413b;box-shadow:0 12px 36px #00000018}
[data-theme="dark"] .lobby-empty{background:#1d2925;border-color:#35413b}
[data-theme="dark"] .form-heading h2,[data-theme="dark"] .lobby h2,[data-theme="dark"] .your-profile h3,[data-theme="dark"] .lobby-empty h3,[data-theme="dark"] .privacy-section h2{color:#e8ede8}
[data-theme="dark"] .input-wrap{border-color:#43514a;background:#1b2622}
[data-theme="dark"] .input-wrap:focus-within{border-color:#88b398;box-shadow:0 0 0 3px #355442}
[data-theme="dark"] .input-wrap input,[data-theme="dark"] .input-wrap select{color:#edf1ec}
[data-theme="dark"] .input-wrap textarea{color:#edf1ec}
[data-theme="dark"] .input-wrap input::placeholder{color:#829087}
[data-theme="dark"] .input-wrap textarea::placeholder{color:#829087}
[data-theme="dark"] .input-wrap option{background:#292833;color:#eceaf2}
[data-theme="dark"] .photo-slot{background:#1b2622;border-color:#4a5b51;color:#a4b1a8}
[data-theme="dark"] .photo-slot:hover{background:#24332c;border-color:#89b498}
[data-theme="dark"] .photo-hint span,[data-theme="dark"] .input-icon{color:#9bc2a6}
[data-theme="dark"] .optional,[data-theme="dark"] .photo-counter,[data-theme="dark"] .required-note{color:#a3aea5}
[data-theme="dark"] .privacy-reminder strong{color:#d5ded6}
[data-theme="dark"] .form-bottom,[data-theme="dark"] footer,[data-theme="dark"] .privacy-section{border-color:#35413b}
[data-theme="dark"] .primary-button{background:#83aa91;color:#15211b}
[data-theme="dark"] .primary-button:hover{background:#a1c4ac}
[data-theme="dark"] .privacy-icon,[data-theme="dark"] .step-label>span{background:#2d4037;color:#a7cbb1}
[data-theme="dark"] .text-button,[data-theme="dark"] .back-link{color:#b5c0b7}
[data-theme="dark"] .text-button span,[data-theme="dark"] .back-link span{color:#9bc2a6}
[data-theme="dark"] .avatar{background:#2d4037;color:#b4d2bc}
[data-theme="dark"] .profile-wishes{background:#26332d}
[data-theme="dark"] footer{color:#94a097}
[data-theme="dark"] .visual-card:before{background:radial-gradient(ellipse at 78% 24%,rgba(210,161,112,.17),transparent 42%),linear-gradient(145deg,#2b4438,#303a32 58%,#41372e)}
[data-theme="dark"] .chat-bubble:not(.bubble-b){background:#26352e;color:#dce5dc}
[data-theme="dark"] .chat-bubble span{color:#9ca99f}
[data-theme="dark"] .bubble-b{background:#52775f;color:#f1f5ef}
[data-theme="dark"] .bubble-b span{color:#d0e0d2}
[data-theme="dark"] .visual-caption{color:#bdcbbb}

/* Rustige, compacte openingskop. */
.intro{min-height:0;padding:38px 24px 26px}
.intro-copy{max-width:none}
h1{font-size:38px;line-height:1.1;letter-spacing:-1.8px;margin:0}
@media(max-width:760px){.intro{padding:34px 5px 22px}h1{font-size:34px}}
@media(max-width:520px){.intro{padding:29px 5px 19px}h1{font-size:31px}}

/* Kaal startscherm: korte kop en één duidelijke actie. */
header .help-link{font-size:11px}
.intro{min-height:min(66vh,620px);display:grid;place-items:center;text-align:center;padding:50px 20px}
.intro-copy{display:flex;align-items:center;flex-direction:column;gap:23px}
.intro h1{font-size:clamp(38px,6vw,58px);letter-spacing:-2.7px}
.start-button{min-width:190px;height:49px;text-transform:uppercase;letter-spacing:.8px;font-size:11px}
.form-heading{gap:8px}
.form-heading>div:first-child{margin-right:auto}
.back-home{white-space:nowrap}
.footer-privacy{color:#77817d;text-decoration:none;font-size:10px}
[data-theme="dark"] .footer-privacy{color:#aab5ac}
@media(max-width:520px){.intro{min-height:58vh;padding:38px 16px}.intro-copy{gap:20px}.intro h1{font-size:38px}.start-button{width:190px}.form-heading{flex-wrap:wrap}}

/* Een compact chatwolkje als enkelvoudig beeldmerk. */
.brand-mark{position:relative;font-size:0!important;border-radius:9px!important}
.brand-mark::before{content:"";width:13px;height:10px;border:1.7px solid white;border-radius:5px;position:absolute;left:8px;top:8px}
.brand-mark::after{content:"";position:absolute;left:10px;top:17px;width:5px;height:5px;border-left:1.7px solid white;transform:skew(-25deg) rotate(-30deg)}
[data-theme="dark"] .brand-mark::before{border-color:#17211f}
[data-theme="dark"] .brand-mark::after{border-color:#17211f}

/* Paars accent in plaats van groen. */
[data-theme="dark"] body{background:#191821}
[data-theme="dark"] .topbar{background:rgba(25,24,33,.96);border-color:#383643}
[data-theme="dark"] .brand-mark{background:#aaa1dc}
[data-theme="dark"] .brand-mark::before,[data-theme="dark"] .brand-mark::after{border-color:#191821}
[data-theme="dark"] h1 em,[data-theme="dark"] .lobby h2 span,[data-theme="dark"] .photo-hint span,[data-theme="dark"] .input-icon{color:#bcb4eb}
[data-theme="dark"] .step-label>span,[data-theme="dark"] .privacy-icon{background:#383449;color:#c0b9e8}
[data-theme="dark"] .primary-button{background:#a39ad4;color:#211f2a}
[data-theme="dark"] .primary-button:hover{background:#beb7e9}
[data-theme="dark"] .form-bottom,[data-theme="dark"] footer,[data-theme="dark"] .privacy-section{border-color:#383643}
[data-theme="dark"] .input-wrap:focus-within{border-color:#aaa1dc;box-shadow:0 0 0 3px #383449}
[data-theme="dark"] .photo-slot:hover{border-color:#aaa1dc;background:#282636}
[data-theme="light"] body{background:#e9e8ed}
[data-theme="light"] .topbar{background:rgba(233,232,237,.94);border-color:#d8d6e0}
[data-theme="light"] .form-card,[data-theme="light"] .your-card{background:#f1f0f4;border-color:#d8d6e0}
[data-theme="light"] .lobby-empty{background:#e4e2e9;border-color:#d8d6e0}
[data-theme="light"] .brand-mark{background:#665c94}
[data-theme="light"] .step-label>span,[data-theme="light"] .privacy-icon{background:#e1deeb;color:#665c94}
[data-theme="light"] .primary-button{background:#665c94;color:#fff}
[data-theme="light"] .primary-button:hover{background:#514779}

.form-heading h2{font-size:29px;letter-spacing:-.7px;margin-top:9px}
.form-heading .step-label{font-size:12px;letter-spacing:1.25px}
.field{font-size:15px;gap:9px}
.input-wrap{height:49px}
.input-wrap input{font-size:14px}
.field small{font-size:12px}
.field-title{font-size:15px}
.optional,.photo-counter,.photo-slot,.photo-hint{font-size:12px}
.photo-slot{height:82px}
.logout-button{height:42px;padding:0 15px;border:1px solid #ccc8dc;border-radius:8px;background:transparent;color:#514779;font:600 13px var(--sans);cursor:pointer}
.logout-button:hover{background:#e1deeb}
.logout-button span{font-size:17px;margin-right:7px}
[data-theme="dark"] .logout-button{color:#c0b9e8;border-color:#56516a}
[data-theme="dark"] .logout-button:hover{background:#383449}
.form-bottom{justify-content:flex-end}
.form-bottom .primary-button{height:54px;min-width:220px;padding:0 24px;font-size:14px}
.form-bottom .primary-button span{font-size:20px}
footer{justify-content:flex-start}
footer .brand{font-size:23px}
footer .brand-mark{height:30px;width:30px;border-radius:10px}
@media(max-width:520px){.form-heading h2{font-size:26px}.field{font-size:14px}.field small{font-size:11px}.photo-slot{height:76px}}

.brand-group{display:flex;align-items:center;gap:17px}
.brand-tagline{border-left:1px solid #d1cedd;padding-left:15px;color:#6d687e;font-size:11px;white-space:nowrap}
[data-theme="dark"] .brand-tagline{border-color:#454252;color:#b9b4c8}
.lobby-top h2{font-size:31px}
.lobby-people{padding:17px;background:#f1f0f4;border:1px solid #d8d6e0;border-radius:14px}
.people-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.people-heading h3{font:700 16px var(--display);margin:0 0 3px;color:var(--ink)}
.people-heading h3 span{font:600 11px var(--sans);color:#665c94;background:#e1deeb;border-radius:20px;padding:3px 7px;margin-left:4px}
.people-heading p{font-size:10px;color:#858190;margin:0}
.people-online{display:flex;align-items:center;gap:7px;color:#686477;font-size:10px}
.people-online i,.person-status{width:7px;height:7px;border-radius:50%;background:#69a27b;box-shadow:0 0 0 3px #dcecdf}
.people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.person-card{position:relative;display:flex;align-items:center;gap:9px;min-width:0;padding:9px;background:#faf9fc;border:1px solid #e1dfe7;border-radius:9px}
.person-avatar{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;font:700 15px var(--display)}
.avatar-tone-1{background:#e9d8d3;color:#865c51}.avatar-tone-2{background:#d7e4de;color:#41634e}.avatar-tone-3{background:#e4dcf0;color:#66538d}.avatar-tone-4{background:#d7e0eb;color:#526786}.avatar-tone-5{background:#eee2cf;color:#846643}.avatar-tone-6{background:#d7e7e8;color:#4e7379}
.person-info{min-width:0;line-height:1.35}
.person-info h4{margin:0;font:700 11px var(--sans);color:#292733;white-space:nowrap}
.person-info h4 span{font-weight:400;color:#827e8d;margin-left:3px}
.person-info p{margin:1px 0 2px;font-size:9px;color:#777482;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-info small{display:block;font-size:9px;color:#6e6a79;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-status{position:absolute;right:9px;top:11px;width:6px;height:6px}
.demo-disclaimer{margin:11px 1px 0;font-size:9px;line-height:1.45;color:#777482}
[data-theme="dark"] .lobby-people{background:#20202a;border-color:#383643}
[data-theme="dark"] .people-heading h3,[data-theme="dark"] .person-info h4{color:#eceaf2}
[data-theme="dark"] .people-heading h3 span{background:#383449;color:#c0b9e8}
[data-theme="dark"] .people-heading p,[data-theme="dark"] .people-online,[data-theme="dark"] .person-info p,[data-theme="dark"] .person-info small,[data-theme="dark"] .person-info h4 span,[data-theme="dark"] .demo-disclaimer{color:#aaa6b4}
[data-theme="dark"] .person-card{background:#292833;border-color:#3b3947}
[data-theme="dark"] .people-online i,[data-theme="dark"] .person-status{background:#7bb48a;box-shadow:0 0 0 3px #33453a}
@media(max-width:760px){.brand-group{gap:10px}.brand-tagline{font-size:10px;padding-left:10px;white-space:normal;max-width:205px}.lobby-grid{grid-template-columns:1fr}.people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.topbar{min-height:68px;height:auto;padding:10px 14px}.brand{font-size:20px;gap:7px}.brand-mark{width:27px;height:27px}.brand-tagline{font-size:9px;max-width:150px;padding-left:8px;line-height:1.35}.people-grid{gap:6px}.person-card{padding:7px;gap:7px}.person-avatar{width:31px;height:31px;border-radius:10px}.person-info small{max-width:120px}.person-status{right:7px;top:9px}}

/* Lobby: bezoekers links in een ruime lijst, eigen profiel rechts. */
.lobby-grid{grid-template-columns:minmax(0,1.55fr) minmax(245px,.75fr);align-items:start;gap:18px}
.lobby-people{padding:21px}
.people-grid{grid-template-columns:1fr;gap:10px}
.person-card{min-height:78px;padding:12px 14px;gap:13px;background:#faf9fc}
.person-avatar{width:48px;height:48px;border-radius:15px;font-size:18px}
.person-info{flex:1;padding-right:8px}
.person-info h4{font-size:14px}
.person-info h4 span{font-size:12px}
.person-info p{font-size:11px}
.person-info small{font-size:11px}
.person-status{right:122px;top:14px}
.person-chat{flex:none;border:1px solid #cfcadd;border-radius:8px;background:transparent;color:#5d5489;padding:9px 12px;font:600 11px var(--sans);cursor:pointer}
.person-chat:hover{background:#e8e5f0}
.person-chat span{font-size:15px;margin-left:7px}
[data-theme="dark"] .person-card{background:#292833}
[data-theme="dark"] .person-chat{border-color:#59546c;color:#c0b9e8}
[data-theme="dark"] .person-chat:hover{background:#383449}
.your-card{position:sticky;top:18px;padding:23px}
.chat-view{margin-top:2px;border:1px solid var(--line);border-radius:14px;background:#f1f0f4;padding:20px}
.chat-header{display:flex;align-items:center;gap:18px;border-bottom:1px solid #d8d6e0;padding-bottom:15px}
.chat-header .text-button{white-space:nowrap}
.chat-contact{display:flex;align-items:center;gap:10px;min-width:0}
.chat-contact h3{font:700 15px var(--display);margin:0 0 3px;color:var(--ink)}
.chat-contact p{font-size:11px;color:#777482;margin:0}
.demo-chat-label{margin-left:auto;padding:5px 8px;border-radius:6px;background:#e1deeb;color:#665c94;font-size:9px;font-weight:700;letter-spacing:.8px}
.chat-notice{margin:14px 0 0;border-radius:8px;background:#e8e5f0;color:#625b7b;padding:10px 12px;font-size:11px;line-height:1.5}
.messages{height:310px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:17px 3px}
.chat-empty-state{margin:auto;color:#858190;font-size:12px;text-align:center;max-width:350px;line-height:1.6}
.message{max-width:min(75%,480px);padding:10px 13px;border-radius:12px;box-shadow:0 2px 8px #28213a0c}
.message p{margin:0 0 5px;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.message time{display:block;text-align:right;font-size:9px;color:#827e8d}
.own-message{align-self:flex-end;background:#665c94;color:white;border-radius:12px 12px 3px 12px}
.own-message time{color:#dfdbee}
.message-form{display:flex;gap:9px;border-top:1px solid #d8d6e0;padding-top:14px}
.message-form input{flex:1;min-width:0;border:1px solid #d8d6e0;border-radius:8px;background:#faf9fc;color:var(--ink);padding:0 13px;font:13px var(--sans);outline:none}
.message-form input:focus{border-color:#8d83bd;box-shadow:0 0 0 3px #e1deeb}
.message-form .primary-button{height:45px;font-size:12px}
[data-theme="dark"] .chat-view{background:#20202a;border-color:#383643}
[data-theme="dark"] .chat-header{border-color:#383643}
[data-theme="dark"] .chat-contact p,[data-theme="dark"] .chat-empty-state{color:#aaa6b4}
[data-theme="dark"] .demo-chat-label{background:#383449;color:#c0b9e8}
[data-theme="dark"] .chat-notice{background:#302d3e;color:#c2bbdc}
[data-theme="dark"] .message time{color:#bab5c6}
[data-theme="dark"] .own-message{background:#8379b7;color:#fff}
[data-theme="dark"] .own-message time{color:#e5e0f4}
[data-theme="dark"] .message-form{border-color:#383643}
[data-theme="dark"] .message-form input{background:#292833;border-color:#454252;color:#eceaf2}
[data-theme="dark"] .message-form input:focus{border-color:#aaa1dc;box-shadow:0 0 0 3px #383449}
@media(max-width:760px){.lobby-grid{grid-template-columns:1fr}.your-card{position:static;grid-row:2}.lobby-people{grid-row:1}.chat-view{padding:14px}.chat-header{gap:10px;flex-wrap:wrap}.chat-header .text-button{width:100%;text-align:left}.messages{height:280px}}
@media(max-width:520px){.lobby-people{padding:14px}.person-card{min-height:72px;padding:9px}.person-avatar{height:40px;width:40px}.person-status{right:91px;top:11px}.person-chat{padding:8px;font-size:10px}.person-chat span{margin-left:3px}.chat-header{position:relative}.chat-contact{margin-right:auto}.demo-chat-label{margin-left:0}.message-form .primary-button{min-width:82px;padding:0 11px}.message-form .primary-button span{display:none}}

.people-title{display:flex;align-items:center;gap:9px}
.people-title h3{margin:0}
.people-online>span{white-space:nowrap}
.people-mode{font-size:9px;letter-spacing:.6px;font-weight:700;color:#665c94;background:#e1deeb;border-radius:5px;padding:4px 6px}
[data-theme="dark"] .people-mode{background:#383449;color:#c0b9e8}
.demo-disclaimer{display:none!important}
.person-avatar.profile-open{border:0;cursor:pointer;transition:transform .16s,box-shadow .16s}
.person-avatar.profile-open:hover{transform:scale(1.07);box-shadow:0 0 0 3px #e1deeb}
.person-avatar img,.avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avatar.profile-open{border:0;padding:0;cursor:pointer;font:italic 26px var(--serif)}
.your-photos .gallery-photo{display:block;padding:0;border:0;background:none;border-radius:8px;cursor:zoom-in}
.your-photos .gallery-photo img{display:block;height:50px;width:50px;border-radius:8px;object-fit:cover}
.your-photos .gallery-photo:hover img{outline:3px solid #cfcadd}
.chat-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:15px;align-items:stretch}
.chat-conversation{min-width:0}
.chat-my-profile{position:static;align-self:start;padding:18px}
.profile-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;width:min(420px,calc(100vw - 32px));max-height:min(86vh,720px);overflow:auto;padding:27px;border:1px solid #d8d6e0;border-radius:16px;background:#f1f0f4;color:var(--ink);box-shadow:0 22px 80px #17152255}
.profile-dialog::backdrop{background:#17152299;backdrop-filter:blur(3px)}
.dialog-close{position:absolute;right:12px;top:10px;width:32px;height:32px;border:0;border-radius:50%;background:#e1deeb;color:#514779;font-size:21px;cursor:pointer}
.profile-detail-main{height:260px;width:100%;border-radius:12px;background:#e1deeb;display:grid;place-items:center;overflow:hidden;margin-bottom:16px;color:#665c94;font:700 80px var(--display)}
.profile-detail-main img{width:100%;height:100%;object-fit:contain}
.profile-detail-main img{display:block;width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain!important}
.profile-dialog h3{font:700 21px var(--display);margin:0 0 4px}
.profile-dialog>p{font-size:12px;color:#777482;margin:0 0 10px}
.profile-dialog .profile-detail-wishes{padding:11px 13px;border-radius:8px;background:#e8e7ed;color:#514e5c}
.profile-detail-gallery{display:flex;gap:9px;margin-top:12px}
.profile-detail-gallery button{height:58px;width:58px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#e1deeb;cursor:pointer}
.profile-detail-gallery button[aria-current="true"]{border-color:#665c94}
.profile-detail-gallery img{height:100%;width:100%;object-fit:cover}
[data-theme="dark"] .profile-dialog{background:#20202a;border-color:#383643;color:#eceaf2}
[data-theme="dark"] .dialog-close,[data-theme="dark"] .profile-detail-main{background:#383449;color:#c0b9e8}
[data-theme="dark"] .profile-dialog>p{color:#aaa6b4}
[data-theme="dark"] .profile-dialog .profile-detail-wishes{background:#292833;color:#d3cfdd}
[data-theme="dark"] .person-avatar.profile-open:hover,[data-theme="dark"] .your-photos .gallery-photo:hover img{outline-color:#665c94}
footer{align-items:center;gap:26px;border-top:1px solid var(--line);padding-top:21px}
.footer-privacy-copy{display:flex;flex-direction:column;gap:3px;max-width:650px}
.footer-privacy-label{font-size:9px;letter-spacing:1.3px;font-weight:700;color:#777482}
.footer-privacy-copy strong{font:700 14px var(--display);color:var(--ink)}
.footer-privacy-copy>span:last-child{font-size:10px;line-height:1.5;color:#777482}
[data-theme="dark"] .footer-privacy-label,[data-theme="dark"] .footer-privacy-copy>span:last-child{color:#aaa6b4}
[data-theme="dark"] .footer-privacy-copy strong{color:#eceaf2}
@media(max-width:760px){.chat-layout{grid-template-columns:1fr}.chat-my-profile{order:2}.chat-conversation{order:1}}
@media(max-width:520px){footer{align-items:flex-start;gap:14px;padding-left:17px;padding-right:17px}footer .brand{flex:none}.footer-privacy-copy>span:last-child{max-width:250px}.profile-dialog{padding:23px}.profile-detail-main{height:220px}}

.profile-column{display:flex;flex-direction:column;gap:13px;min-width:0}
.lobby-people{position:sticky;top:15px;max-height:calc(100vh - 150px);overflow:auto;scrollbar-width:thin}
.person-card{cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.person-card:hover{border-color:#bcb5d5;background:#f4f2f8;transform:translateY(-1px)}
.person-card:focus-visible{outline:3px solid #aaa1dc;outline-offset:2px}
.person-status{right:10px}
.chat-view{margin:0;padding:14px;min-width:0}
.chat-header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;border-bottom:1px solid #d8d6e0;padding:0 0 11px}
.chat-contact{gap:8px}
.chat-contact .person-avatar{width:40px;height:40px;font-size:15px;flex:none}
.chat-contact h3{font-size:13px}
.chat-contact p{font-size:10px}
.demo-chat-label{font-size:8px;padding:5px 6px;white-space:nowrap}
.chat-close{height:28px;width:28px;border:0;border-radius:50%;background:#e1deeb;color:#514779;font-size:19px;line-height:1;cursor:pointer}
.messages{height:230px;padding:11px 2px}
.message{max-width:90%;padding:8px 10px}
.message p{font-size:12px}

/* Privacyboodschap staat compact maar volledig in de header. */
.topbar{height:auto;min-height:76px;padding-top:12px;padding-bottom:12px;gap:24px}
.header-privacy{display:flex;flex-direction:column;gap:2px;max-width:470px;margin-left:auto;text-align:right}
.header-privacy-label{font-size:8px;letter-spacing:1.1px;font-weight:700;color:#777482}
.header-privacy strong{font:700 13px var(--display);color:var(--ink)}
.header-privacy>span:last-child{font-size:10px;line-height:1.4;color:#777482}
[data-theme="dark"] .header-privacy-label,[data-theme="dark"] .header-privacy>span:last-child{color:#aaa6b4}
[data-theme="dark"] .header-privacy strong{color:#eceaf2}
.your-photos .gallery-photo{position:relative;transition:transform .15s,box-shadow .15s}
.your-photos .gallery-photo:hover{transform:scale(1.06);box-shadow:0 0 0 2px #8379b7}
.your-photos .gallery-photo:focus-visible{outline:3px solid #8379b7;outline-offset:3px}
.profile-detail-main img{object-fit:contain}
@media(max-width:760px){.topbar{flex-wrap:wrap;gap:9px 18px}.header-privacy{flex:1 0 100%;max-width:none;margin-left:0;text-align:left;border-top:1px solid var(--line);padding-top:8px}.person-status{right:10px}}
@media(max-width:520px){.topbar{padding:10px 14px}.header-privacy>span:last-child{font-size:9px}.person-status{right:8px}}

/* Ruimere lobby: profiel en chat nemen samen minimaal de helft van het scherm. */
main:has(#lobby:not([hidden])){max-width:1480px}
#lobby{width:100%}
.lobby-grid{grid-template-columns:minmax(320px,.9fr) minmax(520px,1.1fr);gap:22px}
.lobby-people{padding:18px}
.people-grid{max-width:620px}
.person-card{max-width:100%;min-height:70px;padding:10px 12px;gap:11px}
.person-avatar{width:42px;height:42px;border-radius:13px}
.person-status{right:10px}
.profile-column{min-width:0}
.your-card{position:static;padding:20px}
.chat-view{padding:17px}
.messages{height:clamp(290px,48vh,620px)}
.logout-button{background:#665c94;border:1px solid #665c94;color:#fff;transition:background .18s,transform .18s}
.logout-button:hover{background:#514779;border-color:#514779;transform:translateY(-1px)}
[data-theme="dark"] .logout-button{background:#a39ad4;border-color:#a39ad4;color:#211f2a}
[data-theme="dark"] .logout-button:hover{background:#beb7e9;border-color:#beb7e9}

/* Grote fotopreview: de volledige foto past in beeld en wordt niet bijgesneden. */
.profile-dialog{left:50%;top:50%;width:min(94vw,1400px);height:min(92vh,1000px);max-height:none;transform:translate(-50%,-50%);padding:24px;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;gap:0}
.profile-dialog:not([open]){display:none}
.profile-detail-main{height:100%;min-height:0;width:100%;margin:0 0 14px;border-radius:12px}
.profile-detail-main img{width:100%;height:100%;object-fit:contain}
.profile-dialog h3{font-size:22px;margin:0 0 4px}
.profile-dialog>p{margin-bottom:8px}
.profile-detail-gallery{margin-top:3px}
.profile-detail-gallery button{width:62px;height:62px}

/* Rustig, neutraal startscherm met één duidelijke actie in het midden. */
main:has(#intro:not([hidden])){max-width:none;padding:0}
#intro{position:relative;isolation:isolate;min-height:calc(100svh - 76px);padding:40px 24px;background:radial-gradient(ellipse at 50% 45%,#dedce8 0%,#e9e8ed 48%,#e3e2e8 100%)}
#intro{display:flex;align-items:center;justify-content:center}
#intro{width:100vw;margin-left:calc(50% - 50vw);background:linear-gradient(135deg,#eeedf2 0%,#e4e2eb 52%,#efedea 100%)}
#intro .intro-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;display:flex;align-items:center;justify-content:center}
[data-theme="dark"] #intro{background:radial-gradient(ellipse at 50% 45%,#302e3c 0%,#191821 54%,#22212b 100%)}
.start-button{min-width:300px;height:72px;border-radius:15px;font-size:18px;letter-spacing:.3px;box-shadow:0 12px 30px #51477938}
.start-button span{font-size:22px}
.start-button:hover{box-shadow:0 16px 36px #51477955;transform:translateY(-3px)}

@media(max-width:900px){
  main:has(#lobby:not([hidden])){max-width:100%}
  .lobby-grid{grid-template-columns:minmax(280px,.9fr) minmax(390px,1.1fr);gap:14px}
  .lobby-people{padding:13px}
}
@media(max-width:760px){
  .lobby-grid{grid-template-columns:1fr}
  .people-grid{max-width:none}
  .messages{height:40vh;min-height:250px}
  .profile-dialog{width:min(96vw,720px);height:min(92vh,900px);padding:16px}
  #intro{min-height:calc(100svh - 76px)}
  .start-button{min-width:min(300px,86vw);height:68px;font-size:17px}
}
@media(max-width:520px){
  .profile-dialog{width:calc(100vw - 20px);height:90dvh;padding:13px;grid-template-rows:minmax(0,1fr) auto auto auto}
  .profile-detail-main{margin-bottom:10px}
  .profile-detail-gallery button{width:54px;height:54px}
  #intro{min-height:calc(100svh - 76px)}
}
.chat-notice{font-size:10px;padding:8px 9px}
.message-form{gap:6px;padding-top:10px}
.message-form input{height:39px;padding:0 9px;font-size:11px}
.message-form .primary-button{height:39px;min-width:73px;padding:0 9px;font-size:10px}
.message-form .primary-button span{margin-left:4px;font-size:13px}
[data-theme="dark"] .person-card:hover{border-color:#77709c;background:#302e3c}
[data-theme="dark"] .chat-header{border-color:#383643}
[data-theme="dark"] .chat-close{background:#383449;color:#c0b9e8}
@media(max-width:760px){.lobby-people{position:static;max-height:none;overflow:visible}.profile-column{display:contents}.your-card{position:static;grid-row:2}.chat-view{grid-row:3}.chat-header{grid-template-columns:minmax(0,1fr) auto auto}}
@media(max-width:520px){.chat-view{padding:12px}.chat-header{gap:5px}.chat-contact .person-avatar{width:36px;height:36px}}

/* Beter leesbare teksten op de plekken die Dennis aanwees. */
.brand-tagline{font-size:14px}
.header-privacy-label{font-size:10px}
.header-privacy strong{font-size:16px}
.header-privacy>span:last-child{font-size:13px;line-height:1.5}
.profile-wishes{font-size:14px;line-height:1.5;padding:11px 13px}
.chat-contact p{font-size:14px}
.message-form .primary-button{font-size:14px;min-width:90px}
@media(max-width:760px){.brand-tagline{font-size:12px}.header-privacy>span:last-child{font-size:12px}}
@media(max-width:520px){.brand-tagline{font-size:11px}.header-privacy>span:last-child{font-size:11px}.chat-contact p{font-size:13px}.message-form .primary-button{font-size:13px}}
.header-privacy{max-width:430px;gap:3px}
.header-privacy-label{font-size:12px;letter-spacing:.5px;text-transform:none}
.header-privacy strong{font-size:17px}
.header-privacy>span:last-child{font-size:13px;line-height:1.35}
.form-heading{justify-content:flex-end;min-height:26px}
.form-heading .back-home{margin-left:auto}
.bottom-required{align-self:center;margin:0;font-size:13px}
.form-bottom{align-items:center}
@media(max-width:520px){.header-privacy{max-width:none}.header-privacy>span:last-child{font-size:12px}.bottom-required{font-size:12px}}
.header-privacy{display:block;max-width:none;white-space:nowrap}
.header-privacy strong{font-size:16px;line-height:1.3}
@media(max-width:760px){.header-privacy{flex:0 0 auto;margin-left:auto;text-align:right;border-top:0;padding-top:0}}
@media(max-width:520px){.header-privacy{white-space:normal}.header-privacy strong{font-size:13px}}

/* Voorkom dat de grote preview door de hoge modalrij aan de onderkant afsnijdt. */
.profile-detail-main{display:flex;align-items:center;justify-content:center;height:auto;overflow:visible;min-height:0;margin-bottom:12px}
.profile-detail-main img{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:calc(92vh - 300px)!important;object-fit:contain!important;flex:0 1 auto}
@media(max-width:760px){.profile-detail-main img{max-height:calc(92vh - 290px)!important}}
@media(max-width:520px){.profile-detail-main img{max-height:calc(90dvh - 290px)!important}}

/* Meer karakter voor de merkheader, met een uitnodigende privacyboodschap. */
.brand{font-size:31px;gap:11px;letter-spacing:-1.8px}
.brand-mark{width:42px;height:42px;border-radius:13px!important}
.brand-mark::before{width:18px;height:14px;left:11px;top:11px;border-radius:6px}
.brand-mark::after{left:13px;top:23px;width:6px;height:6px}
.brand-group{gap:17px}
.header-privacy{display:flex;flex-direction:column;gap:3px;white-space:normal;max-width:480px}
.header-privacy-label{font-size:10px;letter-spacing:1.4px;text-transform:uppercase}
.header-privacy strong{font-size:20px;line-height:1.2;letter-spacing:-.3px}
@media(max-width:760px){.brand{font-size:27px}.brand-mark{width:38px;height:38px}.brand-mark::before{width:16px;height:13px;left:10px;top:10px}.brand-mark::after{left:12px;top:21px}.header-privacy{flex:1 0 100%;margin-left:0;text-align:left;border-top:1px solid var(--line);padding-top:8px}}
@media(max-width:520px){.brand{font-size:25px}.brand-mark{width:35px;height:35px}.brand-mark::before{width:15px;height:12px;left:9px;top:9px}.brand-mark::after{left:11px;top:19px}.brand-group{gap:10px}.brand-tagline{font-size:10px}.header-privacy strong{font-size:17px}}
.topbar{justify-content:center;gap:clamp(18px,3vw,42px)}
.brand-group{flex:none}
.brand-tagline{display:none}
.header-privacy{flex:0 1 auto;max-width:none;margin:0;padding:0;border:0;text-align:left;white-space:nowrap}
.header-privacy-label{display:none}
.header-privacy strong{font-size:20px}
@media(max-width:760px){.topbar{flex-direction:column;flex-wrap:nowrap;justify-content:center;gap:4px;padding-top:10px;padding-bottom:10px}.header-privacy{flex:none;text-align:center}.header-privacy strong{font-size:16px}}
.message-form{gap:10px;padding-top:14px}
.message-form input{height:52px;padding:0 15px;font-size:16px}
.message-form input::placeholder{font-size:15px}
.message-form .primary-button{height:52px;min-width:112px;padding:0 16px;font-size:15px}
.message-form .primary-button span{font-size:18px;margin-left:8px}
@media(max-width:520px){.message-form{gap:8px}.message-form input{height:48px;padding:0 12px;font-size:15px}.message-form input::placeholder{font-size:14px}.message-form .primary-button{height:48px;min-width:102px;padding:0 12px;font-size:14px}}
.person-card.has-conversation{background:#f0eef6;border-color:#c9c3dc}
.person-card.has-unread{background:#e8e3f5;border-color:#887ab8;box-shadow:inset 4px 0 #665c94}
.person-card.has-unread:hover{background:#e2dcf1;border-color:#665c94}
.person-card.has-unread .person-info h4{font-weight:800}
.person-unread-badge{position:relative;z-index:1;flex:none;margin:0 21px 0 auto;padding:5px 8px;border-radius:999px;background:#665c94;color:#fff;font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap}
[data-theme="dark"] .person-card.has-conversation{background:#302e3c;border-color:#514c65}
[data-theme="dark"] .person-card.has-unread{background:#3a354b;border-color:#a39ad4;box-shadow:inset 4px 0 #a39ad4}
[data-theme="dark"] .person-card.has-unread:hover{background:#433d57;border-color:#beb7e9}
[data-theme="dark"] .person-unread-badge{background:#a39ad4;color:#211f2a}
@media(max-width:520px){.person-unread-badge{margin-right:16px;padding:4px 6px;font-size:9px}}
.topbar{position:relative}
.unread-indicator{display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid #c8c1df;border-radius:999px;background:#e1deeb;color:#514779;font-size:13px;font-weight:700;box-shadow:0 3px 12px #352a591c}
.lobby-top .unread-indicator{position:static;transform:none;margin:0 12px 0 auto;flex:none}
.unread-dot{width:10px;height:10px;flex:none;border-radius:50%;background:#e48a50;box-shadow:0 0 0 4px #e48a5033;animation:unread-pulse 1.8s ease-in-out infinite}
@keyframes unread-pulse{50%{box-shadow:0 0 0 7px #e48a5018}}
[data-theme="dark"] .unread-indicator{border-color:#655d82;background:#383449;color:#eceaf2}
@media(max-width:760px){.lobby-top .unread-indicator{margin-top:0}}
.chat-photo-preview{display:flex;align-items:center;gap:10px;margin:0 0 9px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#e8e6ed;color:var(--ink);font-size:12px}
.chat-photo-preview[hidden]{display:none!important}
.chat-photo-preview img{width:44px;height:44px;border-radius:7px;object-fit:cover;background:#d8d6e0}
.chat-photo-preview span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-photo-preview button{width:28px;height:28px;border:0;border-radius:50%;background:#d8d5e3;color:#514779;font-size:19px;cursor:pointer}
.chat-attach-button{flex:none;height:52px;padding:0 14px;border:1px solid #c8c1df;border-radius:9px;background:#e1deeb;color:#514779;font:700 13px var(--sans);cursor:pointer}
.chat-attach-button:hover{background:#d8d4e8}
.chat-image-open{display:block;max-width:min(100%,320px);padding:0;border:0;border-radius:9px;background:transparent;text-align:left;cursor:zoom-in}
.chat-image-open:focus-visible{outline:3px solid #8d83bd;outline-offset:3px}
.chat-message-image{display:block;width:auto;height:auto;max-width:100%;max-height:240px;object-fit:contain;border-radius:9px;background:#22212b}
.message:has(.chat-message-image){padding:7px}
.chat-photo-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;width:min(94vw,1400px);height:min(92vh,1000px);max-width:none;max-height:none;padding:40px 24px 24px;border:1px solid #d8d6e0;border-radius:16px;background:#f1f0f4;box-shadow:0 22px 80px #17152266;place-items:center}
.chat-photo-dialog:not([open]){display:none}
.chat-photo-dialog::backdrop{background:#171522aa;backdrop-filter:blur(4px)}
.chat-photo-dialog>img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:9px}
.chat-photo-dialog .dialog-close{z-index:1}
[data-theme="dark"] .chat-photo-dialog{background:#20202a;border-color:#454252}
[data-theme="dark"] .chat-photo-preview{background:#292833;border-color:#454252;color:#eceaf2}
[data-theme="dark"] .chat-photo-preview button{background:#383449;color:#c0b9e8}
[data-theme="dark"] .chat-attach-button{background:#383449;border-color:#59546c;color:#eceaf2}
[data-theme="dark"] .chat-attach-button:hover{background:#454057}
@media(max-width:520px){.chat-attach-button{height:48px;padding:0 9px;font-size:12px}.chat-photo-dialog{width:calc(100vw - 18px);height:90dvh;padding:42px 12px 12px}}

/* Eén herkenbare EVEN-markering in de header én als app-icoon. */
.brand-mark{display:block;width:42px!important;height:42px!important;flex:none;border-radius:0!important;background:transparent!important;object-fit:contain}
.input-wrap select{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:400 14px var(--sans);cursor:pointer}
.input-wrap select:focus-visible{outline:2px solid #8d83bd;outline-offset:2px;border-radius:3px}
.input-wrap option{background:#f2f2ec;color:#292733}
.wishes-field .input-wrap{height:86px;align-items:flex-start;padding:10px 12px}
.wishes-field .input-icon{padding-top:2px}
.wishes-field textarea{width:100%;height:100%;min-width:0;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font:400 14px/1.45 var(--sans)}
.wishes-field textarea::placeholder{color:#adb5af}
.wishes-field{grid-column:1/-1}
.people-heading{gap:12px}
.people-grid{display:flex;flex-direction:column;gap:19px}
.province-group{display:flex;flex-direction:column;gap:9px}
.province-group-heading{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px 7px;border-bottom:1px solid #d8d6e0}
.province-group-heading h4{margin:0;color:#292733;font:700 14px var(--display)}
.province-group-heading span{color:#777482;font-size:11px}
.province-profiles{display:flex;flex-direction:column;gap:9px}
[data-theme="dark"] .province-group-heading{border-color:#3b3947}
[data-theme="dark"] .province-group-heading h4{color:#eceaf2}
[data-theme="dark"] .province-group-heading span{color:#aaa6b4}

.human-check-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;width:min(420px,calc(100vw - 32px));padding:28px;border:1px solid #d8d6e0;border-radius:16px;background:#f1f0f4;color:var(--ink);box-shadow:0 22px 80px #17152266}
.human-check-dialog:not([open]){display:none}
.human-check-dialog::backdrop{background:#171522aa;backdrop-filter:blur(4px)}
.human-check-dialog h2{margin:0 0 5px;font:700 23px var(--display)}
.human-check-dialog p{margin:0 0 18px;color:#777482;font-size:14px}
.human-check-dialog label{display:block;margin-bottom:8px;font-weight:700;font-size:16px}
.human-check-dialog input{width:100%;height:48px;padding:0 13px;border:1px solid #cbc8d6;border-radius:9px;background:#faf9fc;color:var(--ink);font:600 18px var(--sans)}
.human-check-dialog input:focus-visible{outline:3px solid #9d93c4;outline-offset:2px}
.human-check-dialog .human-check-error{margin:9px 0 0;color:#b74358;font-size:13px}
.human-check-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.human-check-actions .primary-button{min-height:44px;padding:0 15px}
[data-theme="dark"] .human-check-dialog{border-color:#454252;background:#20202a;color:#eceaf2}
[data-theme="dark"] .human-check-dialog p{color:#aaa6b4}
[data-theme="dark"] .human-check-dialog input{border-color:#454252;background:#292833;color:#eceaf2}
[data-theme="dark"] .human-check-dialog .human-check-error{color:#ff91a2}
@media(max-width:520px){.human-check-dialog{padding:22px}.human-check-actions{gap:6px}.human-check-actions .primary-button{padding:0 11px}}

.privacy-overview{width:min(100%,1040px);margin:0 auto;padding:68px 26px 76px;color:#262431}
.privacy-overview-heading{max-width:690px;margin:0 auto 30px;text-align:center}
.privacy-overline{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#665c94}
.privacy-overview-heading h2{margin:9px 0 10px;font:700 clamp(24px,3vw,34px)/1.15 var(--display);letter-spacing:-.8px}
.privacy-overview-heading p{margin:0;color:#777481;font-size:14px;line-height:1.7}
.privacy-overview a{color:#665c94;font-weight:700;text-underline-offset:3px}
.privacy-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.privacy-points article{padding:20px;border:1px solid #d8d6e0;border-radius:13px;background:#f1f0f4}
.privacy-points article>span{color:#665c94;font-size:10px;font-weight:800;letter-spacing:1px}
.privacy-points h3{margin:8px 0 5px;font:700 15px var(--display);color:#292733}
.privacy-points p{margin:0;color:#777482;font-size:12px;line-height:1.65}
.privacy-overview-note{max-width:720px;margin:19px auto 0;text-align:center;color:#777482;font-size:11px;line-height:1.6}
[data-theme="dark"] .privacy-overview{color:#eceaf2}
[data-theme="dark"] .privacy-overline,[data-theme="dark"] .privacy-overview a,[data-theme="dark"] .privacy-points article>span{color:#c0b9e8}
[data-theme="dark"] .privacy-overview-heading p,[data-theme="dark"] .privacy-points p,[data-theme="dark"] .privacy-overview-note{color:#aaa6b4}
[data-theme="dark"] .privacy-points article{border-color:#383643;background:#20202a}
[data-theme="dark"] .privacy-points h3{color:#eceaf2}
@media(max-width:760px){.privacy-overview{padding:52px 20px 60px}.privacy-points{grid-template-columns:1fr;gap:9px}.privacy-points article{padding:16px 18px}}
.people-empty{margin:0;padding:24px 12px;text-align:center;color:#777482;font-size:15px}[data-theme="dark"] .people-empty{color:#aaa6b4}