:root{
  --ink:#121212; --ink-2:#181818; --ink-3:#282828;
  --cream:#ffffff; --g:#1db954; --g-bright:#1ed760; --gold:#b3b3b3;
  --accent:#b3b3b3; --accent-2:#535353;
  --muted:rgba(255,255,255,.55); --muted-2:rgba(255,255,255,.72);
  --border:rgba(255,255,255,.08); --border-g:rgba(255,255,255,.14);
  --glass:#181818; --glass-2:#282828;
  --glass-border:rgba(255,255,255,.08);
  --glass-bg:var(--ink-2); --glass-bg-2:var(--ink-3);
  --glass-blur:none; --glass-shadow:none; --glass-shadow-sm:none; --glass-highlight:none;
  /* Afrondingen — één schaal, overal consistent */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:28px; --r-pill:9999px;
  --r:var(--r-lg);
  --maxw:100%;
  --shell-w:100%;
  --content-w:100%;
  --dock-w:100%;
  --header-h:52px;
  --safe-top:env(safe-area-inset-top, 0px);
  --header-offset:calc(var(--header-h) + var(--safe-top));
  --sans:'Inter',system-ui,sans-serif; --serif:'Instrument Serif',Georgia,serif;
  --dock-h:58px;
  --dock-gap:12px;
  --surface:var(--glass);
  --surface-2:var(--glass-2);
  --line:var(--glass-border);
  --shadow:none;
  --app-glow:none;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--sans); background:var(--ink); color:var(--cream);
  font-weight:400; line-height:1.5; overscroll-behavior-y:none;
}
.bg-mesh{display:none}
#app{
  max-width:var(--shell-w); margin:0 auto; min-height:100dvh; position:relative; z-index:1;
  background:transparent; width:100%;
}
h1,h2,h3{font-family:var(--sans); font-weight:600; letter-spacing:-.03em; line-height:1.15}
a{color:inherit}
button{font-family:var(--sans); cursor:pointer; border:none; background:none; color:inherit}
input,textarea,select{font-family:var(--sans); font-size:16px}

/* ---- vaste shell: logo linksboven ---- */
.app-header{
  position:fixed; top:0; left:0; right:0; z-index:30;
  height:var(--header-offset);
  padding-top:var(--safe-top);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  box-sizing:border-box;
}
.app-header .app-logo{
  width:100%; max-width:var(--shell-w); margin:0 auto;
  padding:0 18px;
}
.app-logo{
  pointer-events:auto; display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--cream);
  font-size:17px; font-weight:600; letter-spacing:-.04em;
  transition:opacity .15s;
}
.app-logo:hover{opacity:.88}
.app-logo-mark{display:grid; place-items:center}
.app-logo-text{text-transform:lowercase}
.app-logo-text b{color:var(--cream); font-weight:600}
body.authed #app{padding-top:0; background:transparent}
#sidebar{display:none!important}

/* ---- layout ---- */
.screen{padding:20px 20px calc(var(--dock-h) + var(--dock-gap) + 32px + env(safe-area-inset-bottom))}
.screen.no-tab{padding:20px 20px 32px}
body.authed #app > .topbar,
body.authed #app > .chat-wrap,
body.authed #app > .screen:first-child,
body.authed #app > .screen-home{
  margin-top:var(--header-offset);
}
.page-hero{margin-bottom:20px}
.page-title{font-size:clamp(1.65rem,4vw,2rem); margin:6px 0 0; font-weight:600; letter-spacing:-.03em}
.screen-head{margin-bottom:22px}
.screen-head .page-title{margin:0; font-size:clamp(1.75rem,5vw,2.15rem)}
.screen-head-sub{font-size:14px; margin-top:6px}
.float-back{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink-3);
  border:1px solid var(--border);
  margin-bottom:14px; color:var(--cream);
  transition:background .15s;
}
.float-back:hover{background:var(--glass-2)}
.float-back:active{transform:scale(.96)}
.float-back .ic-svg{transform:rotate(180deg)}
.float-search{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; margin-bottom:16px;
  background:var(--ink-3);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
}
.float-search-ic{color:var(--muted); flex:none; display:grid; place-items:center}
.float-search-input{
  flex:1; min-width:0; background:transparent; border:none; color:var(--cream);
  font-size:15px; outline:none; font-family:var(--sans);
}
.float-search-input::placeholder{color:var(--muted)}
.float-pills{
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 -20px 16px; padding:2px 20px 10px;
  scrollbar-width:none;
}
.float-pills::-webkit-scrollbar{display:none}
.float-pill{
  flex:0 0 auto; padding:8px 16px; border-radius:var(--r-pill);
  font-size:13px; font-weight:500; color:var(--muted); white-space:nowrap;
  background:transparent;
  border:1px solid var(--border);
  transition:background .15s, color .15s, border-color .15s;
}
.float-pill:active{transform:none}
.float-pill.on{
  background:var(--cream); color:var(--ink); border-color:var(--cream);
  box-shadow:none;
}
[data-theme="light"] .float-pill.on{color:#fff}
.float-tile{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; margin-bottom:18px;
  border-radius:var(--r-md);
  background:var(--ink-3);
  border:1px solid var(--border);
  font-size:14px; font-weight:500; color:var(--cream);
  cursor:pointer; transition:background .15s;
}
.float-tile:hover{background:var(--glass-2)}
.float-tile:active{transform:none}
.float-list{display:flex; flex-direction:column; gap:10px}
.float-card{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:var(--ink-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  cursor:pointer; transition:background .12s;
}
.float-card:active{transform:none}
.float-card:hover{background:var(--ink-3)}
.float-card .name{font-size:15px; font-weight:500; color:var(--cream)}
.float-card .meta{flex:1; min-width:0}
.float-card .snippet{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.float-stack{display:flex; flex-direction:column; gap:0; margin-bottom:18px;
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--ink-2)}
.float-menu{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:transparent;
  border:none; border-bottom:1px solid var(--border);
  border-radius:0;
  cursor:pointer; transition:background .12s;
}
.float-stack .float-menu:last-child{border-bottom:none}
.float-menu:hover{background:var(--ink-3)}
.float-menu:active{transform:none}
.float-menu-ic{width:24px; flex:none; color:var(--muted-2); display:grid; place-items:center}
.float-menu-body{flex:1; min-width:0}
.float-menu-t{display:block; font-size:15px; font-weight:500; color:var(--cream)}
.float-menu-s{display:block; font-size:13px; color:var(--muted); margin-top:1px}
.float-menu-chev{color:var(--muted); flex:none}
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:0 0 16px; position:relative; top:auto; z-index:15;
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:none;
  margin-left:0; margin-right:0;
  padding-left:0; padding-right:0;
}
.topbar .back{
  font-size:22px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:var(--cream);
  background:var(--ink-3);
  border:1px solid var(--border);
  transition:background .15s;
}
.topbar .back:hover{background:#333}
.topbar .back:active{transform:scale(.96)}
.brandmark b{color:var(--cream); font-weight:600}
.topbar h2{font-size:clamp(1.5rem,4vw,1.85rem); font-weight:600; letter-spacing:-.03em}
.brandmark{font-family:var(--sans); font-size:14px; letter-spacing:.04em; text-transform:none; color:var(--muted-2); font-weight:500}

/* ---- typography helpers ---- */
.eyebrow{font-size:13px; letter-spacing:0; text-transform:none; color:var(--muted); font-weight:400}
.muted{color:var(--muted)}
.lead{font-size:15px; color:var(--muted-2); font-weight:300}

/* ---- buttons ---- */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:16px 20px; border-radius:var(--r-md); font-size:16px; font-weight:500;
  transition:transform .12s ease, opacity .12s ease, box-shadow .15s ease}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--cream); color:var(--ink); border:none; font-weight:600}
.btn-primary:hover{filter:brightness(.94)}
.btn-secondary{background:var(--ink-3); color:var(--cream); border:1px solid var(--border)}
.btn-secondary:hover{background:#333333}
.btn-ghost{background:transparent; color:var(--muted-2); border:1px solid var(--border)}
.btn-ghost:hover{color:var(--cream); border-color:var(--border-g)}
.btn-sm{padding:11px 16px; font-size:14px; width:auto; border-radius:var(--r-sm)}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ---- inputs ---- */
.field{margin-bottom:14px; position:relative}
.field label{display:block; font-size:12px; letter-spacing:.04em; color:var(--muted-2); margin-bottom:7px}
.input{
  width:100%; padding:13px 16px;
  background:var(--ink-3);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--cream);
  overflow:hidden;
  transition:border-color .15s;
  box-shadow:none;
}
.input:focus{outline:none; border-color:var(--muted-2); box-shadow:none}
select.input{
  appearance:none; -webkit-appearance:none;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
select.input[data-enhanced]{display:none!important}
textarea.input{resize:vertical; min-height:84px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- cards ---- */
.card{
  background:var(--ink-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:none;
  padding:20px; margin-bottom:12px; overflow:hidden;
}
.tag.on{color:var(--cream); border-color:var(--border-g); background:var(--ink-3)}
.avatar{width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--ink-3); color:var(--cream); font-weight:600; font-size:18px;
  font-family:var(--sans); overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar.lg{width:72px; height:72px; font-size:26px}

/* ---- welcome / hero ---- */
.hero{min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding:40px 28px}
.hero .brandmark{margin-bottom:auto; padding-top:24px}
.hero h1{font-family:var(--serif); font-weight:300; letter-spacing:-.02em; font-size:clamp(40px,12vw,56px); margin:18px 0 14px}
.hero h1 em{font-style:italic; color:var(--gold)}
.hero .lead{max-width:30ch; margin-bottom:30px}
.choice{display:grid; gap:12px; margin-top:auto; padding-bottom:18px}

/* ---- list rows (conversations) ---- */
.list-row{display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--border)}
.list-row .meta{flex:1; min-width:0}
.list-row .name{font-size:15px; font-weight:500}
.list-row .snippet{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.badge{min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--cream); color:var(--ink);
  font-size:11px; font-weight:600; display:grid; place-items:center}

/* ---- chat ---- */
.chat-wrap{display:flex; flex-direction:column; height:100dvh}
.chat-body{flex:1; overflow-y:auto; padding:16px 16px 8px; display:flex; flex-direction:column; gap:8px}
.bubble{max-width:78%; padding:11px 14px; border-radius:var(--r-lg); font-size:14.5px; line-height:1.4; word-wrap:break-word}
.bubble.them{align-self:flex-start; background:var(--ink-3); border:1px solid var(--border); border-bottom-left-radius:var(--r-xs)}
.bubble.me{align-self:flex-end; background:var(--ink-3); color:var(--cream); border:1px solid var(--border); border-bottom-right-radius:var(--r-xs)}
.bubble .time{display:block; font-size:10.5px; opacity:.55; margin-top:4px}
.bubble.loc{
  padding:0 !important; overflow:hidden; max-width:min(300px,88%); min-width:min(250px,80%);
  background:#fff !important; color:#111 !important;
  border:1px solid rgba(0,0,0,.15) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  cursor:pointer;
}
.bubble.loc.me{align-self:flex-end}
.bubble.loc.them{align-self:flex-start}
[data-theme="dark"] .bubble.loc{
  background:var(--ink-2) !important; color:var(--cream) !important;
  border-color:var(--border) !important; box-shadow:none;
}
.bubble.loc .loc-map{
  position:relative; width:100%; height:168px !important; min-height:168px !important;
  background:#cfd8e3; overflow:hidden;
}
.bubble.loc .loc-map.is-fallback{
  background:
    linear-gradient(135deg, #b9c6d4 0%, #dfe7ef 50%, #b9c6d4 100%);
}
.bubble.loc .loc-map-img{
  display:block !important; width:100% !important; height:168px !important;
  object-fit:cover; border:0;
}
.bubble.loc .loc-map-pin{
  position:absolute; left:50%; top:46%; width:18px; height:18px; margin:-22px 0 0 -9px;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg); z-index:2;
  background:#e5484d; border:2.5px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.4);
  pointer-events:none;
}
.bubble.loc .loc-map-pin.is-live{background:var(--g)}
.bubble.loc .loc-meta{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; font-size:14px; font-weight:600;
  background:#fff; color:#111; border-top:1px solid rgba(0,0,0,.08);
}
[data-theme="dark"] .bubble.loc .loc-meta{
  background:var(--ink-2); color:var(--cream); border-top-color:var(--border);
}
.bubble.loc .loc-meta .loc-live-ic{color:var(--g); flex:none; display:grid}
.bubble.loc .loc-meta .loc-label{flex:1; min-width:0}
.bubble.loc .loc-meta .time{margin:0; opacity:.55; font-size:11px; font-weight:500}
.bubble.loc .loc-stop{
  display:block; width:100%; padding:11px 12px 13px; text-align:center;
  font-size:14px; font-weight:600; color:#e5484d;
  background:#fff; border:none; border-top:1px solid rgba(0,0,0,.08); cursor:pointer;
}
[data-theme="dark"] .bubble.loc .loc-stop{background:var(--ink-2); border-top-color:var(--border)}
.bubble.loc .loc-stop:active{opacity:.7}

/* Locatie-picker (WhatsApp-achtig) */
.loc-picker{
  position:fixed; inset:0; z-index:95; display:flex; flex-direction:column;
  background:var(--ink); color:var(--cream);
}
.loc-picker-head{
  display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;
  border-bottom:1px solid var(--border); background:var(--ink-2);
}
.loc-picker-head h2{flex:1; margin:0; text-align:center; font-size:17px; font-weight:600}
.loc-picker-x{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--ink-3); color:var(--cream); display:grid; place-items:center; cursor:pointer;
}
.loc-picker-map{flex:1; min-height:40vh; position:relative; background:var(--ink-3)}
.loc-picker-sheet{
  background:var(--ink-2); border-top:1px solid var(--border);
  padding:8px 0 calc(12px + env(safe-area-inset-bottom,0px));
  max-height:42vh; overflow:auto;
}
.loc-picker-sec{
  padding:10px 18px 6px; font-size:12px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}
.loc-picker-row{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:14px 18px; border:none; background:transparent; color:inherit;
  text-align:left; cursor:pointer;
}
.loc-picker-row:active{background:var(--ink-3)}
.loc-picker-ic{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none;
}
.loc-picker-ic.live{background:rgba(29,185,84,.15); color:var(--g)}
.loc-picker-ic.pin{background:rgba(29,185,84,.15); color:var(--g)}
.loc-picker-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.loc-picker-txt b{font-size:15px; font-weight:600}
.loc-picker-txt small{font-size:12.5px; color:var(--muted)}

.live-view{
  position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  background:var(--ink); color:var(--cream);
}
.live-view-head{
  position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
}
.live-view-head h2{flex:1; font-size:17px; font-weight:600; margin:0; text-align:center; color:#fff}
.live-view-map{flex:1; width:100%; min-height:0}
.live-view-sheet{
  position:absolute; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:2; display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:var(--r-lg);
  background:rgba(24,24,24,.92); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:#fff;
}
[data-theme="light"] .live-view-sheet{
  background:rgba(255,255,255,.94); border-color:rgba(0,0,0,.08); color:var(--cream);
}
.live-view-av{
  width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--ink-3); display:grid; place-items:center; font-weight:600;
  border:2px solid rgba(255,255,255,.85);
}
.live-view-av img{width:100%; height:100%; object-fit:cover}
.live-view-meta{flex:1; min-width:0}
.live-view-meta .n{font-size:15px; font-weight:600}
.live-view-meta .s{font-size:13px; color:var(--muted); margin-top:2px}
.live-view-stop{
  background:none; border:none; color:#e5484d; font-size:14px; font-weight:600; cursor:pointer; padding:8px;
}
.live-view-stop:active{opacity:.7}
.map-pin--avatar{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  border:2.5px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.35);
  background:var(--ink-3); display:grid; place-items:center; font-size:14px; font-weight:600; color:var(--cream);
}
.map-pin--avatar img{width:100%; height:100%; object-fit:cover}
.inst-actions{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.inst-actions-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.inst-action-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 16px; border-radius:var(--r-md);
  background:var(--ink-2); border:1px solid var(--border);
  font-size:14px; font-weight:500; color:var(--cream); cursor:pointer;
}
.inst-action-btn:active{opacity:.85}
[data-theme="light"] .inst-action-btn{background:#fff}
.composer{display:flex; gap:8px; align-items:flex-end; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border); background:var(--ink)}
.composer .input{flex:1; min-height:44px; max-height:120px; padding:11px 14px}
.icon-btn{width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:19px; background:rgba(242,237,230,.06); border:1px solid var(--border)}
.icon-btn.send{background:var(--cream); color:var(--ink); border:none}

/* ---- portal dock ---- */
.dock{
  position:fixed; bottom:0; left:0; right:0;
  width:100%; max-width:none; transform:none;
  display:flex; align-items:center; justify-content:stretch; gap:10px; z-index:25;
  pointer-events:none;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  box-sizing:border-box;
}
.dock > *{pointer-events:auto}
.dock-pill{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  display:flex; align-items:center; gap:1px;
  padding:4px 6px;
  position:relative;
  background:rgba(24,24,24,.92);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.dock-pill.is-hovered{background:rgba(28,28,28,.94); border-color:rgba(255,255,255,.14)}
.dock-lens{
  position:absolute; left:0; top:0; z-index:0; pointer-events:none;
  border-radius:var(--r-lg);
  opacity:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;
  transition:transform .28s cubic-bezier(.34,1.1,.64,1), width .26s ease, height .26s ease, opacity .18s ease;
}
.dock-item{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:9px 4px; min-width:0; max-width:none;
  border-radius:var(--r-lg); color:var(--muted);
  font-size:10px; letter-spacing:.01em; font-weight:500;
  position:relative; z-index:1;
  background:transparent;
  transition:color .15s, transform .1s;
}
.dock-item:active{transform:scale(.94)}
.dock-item.active{
  color:var(--cream);
  background:transparent;
  box-shadow:none;
}
.dock-pill.is-hovered .dock-item:hover{color:var(--cream)}
.dock-pill.is-hovered .dock-item:hover .ic-svg{stroke:var(--cream)}
.dock-item.active .ic-svg{stroke:var(--cream)}
.dock-ic{display:grid; place-items:center; height:22px; position:relative}
.dock-ic .ic-svg{width:20px; height:20px; stroke:var(--muted-2); transition:stroke .15s}
.dock-lbl{line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.dock-dot{
  position:absolute; top:-2px; right:-6px; width:7px; height:7px;
  border-radius:50%; background:var(--g); border:1.5px solid rgba(8,12,22,.95);
}
.dock-fab{
  flex:none; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cream); color:var(--ink);
  border:none;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:transform .1s, filter .15s;
}
.dock-fab:hover{filter:brightness(.94)}
.dock-fab:active{transform:scale(.92)}
.dock-fab .ic-svg{width:21px; height:21px; stroke:currentColor}
.dock-pill.wide{max-width:none; width:100%}

/* ---- chips ---- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:9px 14px; border-radius:var(--r-pill); border:1px solid var(--border); font-size:13px; color:var(--muted-2);
  transition:all .12s}
.chip.sel{background:var(--cream); color:var(--ink); border-color:var(--cream); font-weight:500}
.section-title{font-size:14px; letter-spacing:-.01em; color:var(--cream); margin:24px 0 10px; font-weight:600}
.stat{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px}
.stat b{font-weight:500}
.empty{text-align:center; color:var(--muted); padding:60px 24px; font-size:14px}
.spinner{width:30px; height:30px; border:2px solid var(--border); border-top-color:var(--g); border-radius:50%;
  animation:spin .7s linear infinite; margin:60px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed; left:50%; bottom:calc(var(--dock-h) + var(--dock-gap) + 20px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px);
  background:var(--ink-3); border:1px solid var(--border); color:var(--cream); padding:12px 18px;
  border-radius:var(--r-md); font-size:14px; opacity:0; pointer-events:none; transition:all .25s; z-index:50; max-width:90%}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.reveal{animation:none}
.online-toggle{display:flex; align-items:center; justify-content:space-between; padding:18px 20px;
  border-radius:var(--r-md); border:1px solid var(--border); background:var(--ink-2); margin-bottom:18px}
.float-tile.online-toggle{background:var(--ink-2); border:1px solid var(--border); box-shadow:none}
.switch{width:52px; height:30px; border-radius:var(--r-pill); background:rgba(242,237,230,.12); position:relative; transition:.2s; flex:none}
.switch.on{background:var(--cream)}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:var(--cream); transition:.2s}
.switch.on::after{left:25px; background:var(--ink)}

/* ---- iconen ---- */
.ic-svg{display:inline-block; vertical-align:-3px}
.tabbar a .ic{display:grid; place-items:center; height:24px}
.dock-item .ic-svg{vertical-align:0}
.btn .ic-svg{vertical-align:-4px; margin-right:2px}
.icon-btn .ic-svg{vertical-align:0}
.bubble.loc .map .ic-svg{opacity:.5}


/* ---- profiel-voltooiing + rijk profiel ---- */
.progress{height:8px; border-radius:var(--r-pill); background:rgba(242,237,230,.10); overflow:hidden}
.progress span{display:block; height:100%; background:var(--cream); border-radius:var(--r-pill); transition:width .4s}
.tasklist{list-style:none; margin:4px 0 0; padding:0}
.tasklist li{position:relative; padding:5px 0 5px 20px; font-size:14px; color:var(--muted-2)}
.tasklist li::before{content:""; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--gold)}
.genre-group{margin-bottom:12px}
.genre-cat{font-size:13px; letter-spacing:0; text-transform:none; color:var(--muted); margin-bottom:6px; font-weight:500}
.rep-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px}
.rep-del{width:30px; height:30px; flex:none; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--muted); border:1px solid var(--border); transform:rotate(45deg)}
.rep-add{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.filt-label{display:block; font-size:12px; letter-spacing:.04em; color:var(--muted-2); margin-bottom:7px}
select.input{appearance:none; -webkit-appearance:none}

/* ---- moderne scrollbars + geen edges (2010-look weg) ---- */
*{scrollbar-width:thin; scrollbar-color:rgba(242,237,230,.16) transparent}
::-webkit-scrollbar{width:7px; height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(242,237,230,.16); border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:rgba(242,237,230,.30)}
::-webkit-scrollbar-button{display:none; width:0; height:0}   /* pijltjesknoppen weg */
::-webkit-scrollbar-corner{background:transparent}            /* resize-hoek weg */
html,body{background:var(--ink)}
#app{overflow-x:hidden}
textarea.input{resize:none}
.dock-pill{background:rgba(24,24,24,.92)}

/* ---- home menu (Spotify/Airbnb-stijl lijst) ---- */
.home-menu{
  display:flex; flex-direction:column;
  margin-bottom:16px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--ink-2);
  overflow:hidden;
}
.home-menu-item{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:15px 16px; text-align:left;
  border:none; background:transparent; cursor:pointer;
  transition:background .12s ease;
}
.home-menu-item:not(:last-child){border-bottom:1px solid var(--border)}
.home-menu-item:hover,.home-menu-item:active{background:var(--ink-3)}
.home-menu-ic{
  width:20px; flex:none; color:var(--muted);
  display:grid; place-items:center;
}
.home-menu-ic .ic-svg{stroke-width:1.75}
.home-menu-body{flex:1; min-width:0}
.home-menu-t{display:block; font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--cream)}
.home-menu-m{display:block; font-size:13px; color:var(--muted); margin-top:1px}
.home-menu-chev{flex:none; color:rgba(238,241,246,.28)}
.availability-card{padding:16px 18px}
.availability-row{display:flex; align-items:center; justify-content:space-between; gap:14px}
.availability-t{font-size:15px; font-weight:500; letter-spacing:-.01em}
.availability-s{font-size:13px; color:var(--muted); margin-top:2px}

/* ---- home mini-kaart ---- */
.home-map-block{
  margin-bottom:16px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--ink-2);
  overflow:hidden; cursor:pointer;
  transition:background .12s ease;
}
.home-map-block:hover,.home-map-block:active{background:var(--ink-3)}
.home-map-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px 10px;
}
.home-map-title{font-size:15px; font-weight:500; letter-spacing:-.01em}
.home-map-sub{font-size:13px; color:var(--muted); margin-top:2px}
.home-map-chev{flex:none; color:rgba(238,241,246,.28)}
.home-map-canvas-wrap{
  position:relative; height:148px; margin:0 12px 12px;
  border-radius:var(--r-sm); overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
  background:#0a0e14;
}
.home-map-canvas{width:100%; height:100%; pointer-events:none}
.home-map-canvas-wrap::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(2,4,8,.45) 100%);
}
.map-pin--sm{width:10px; height:10px; border-width:2px}
.map-pin--sm.map-pin--you{width:9px; height:9px; box-shadow:0 0 0 3px rgba(255,255,255,.12)}
[data-theme="light"] .home-map-block{background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.08)}
[data-theme="light"] .home-map-block:hover{background:rgba(0,0,0,.03)}
[data-theme="light"] .home-map-canvas-wrap{border-color:rgba(0,0,0,.06); background:#e8eaef}

/* ---- quick actions (legacy) ---- */
.quick-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px}

/* ---- profielpagina ---- */
.profile-hero{transition:transform .1s, border-color .15s}
.profile-hero:active{transform:scale(.99)}
.profile-hero:hover{border-color:var(--border-g)}
.profile-hero-cta{font-size:13px; color:var(--muted-2); margin-top:16px; font-weight:500}
.profile-account{padding:18px 20px; cursor:default}
.profile-account-email{font-size:15px; font-weight:500; word-break:break-all}

/* ---- profielfoto organisatie ---- */
.org-hero{display:flex; align-items:center; gap:16px; margin-bottom:18px}
.org-hero .avatar{flex:none}
.org-hero-meta{flex:1; min-width:0}
.org-hero-meta h2{font-size:22px; margin:0 0 4px}
.inst-thumb{width:52px; height:52px; border-radius:var(--r-md); object-fit:cover; border:1px solid var(--glass-border); background:var(--glass-2)}
.inst-card .avatar{width:52px; height:52px; font-size:18px}

/* ---- profielfoto-uploader ---- */
.photo-up{display:flex; align-items:center; gap:14px}
.photo-up .avatar{flex:none}

/* ---- adres-zoeken ---- */
.addr-row{display:flex; gap:8px}
.addr-row .input{flex:1}
.addr-res{margin-top:8px; display:flex; flex-direction:column; gap:6px}
.addr-pick{padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-md); font-size:13.5px; cursor:pointer; transition:background .12s, border-color .12s; color:var(--cream); background:var(--surface-2)}
.addr-pick:hover{border-color:var(--border-g); background:var(--ink-3)}
.addr-pick.sel{border-color:var(--cream); background:var(--ink-3)}
[data-theme="light"] .addr-pick{background:var(--glass-bg)}
[data-theme="light"] .addr-pick:hover{background:var(--ink-3)}
[data-theme="light"] .addr-pick.sel{border-color:var(--ink); background:var(--ink-3)}

/* ============================================================
   THEMA — plat zakelijk portaal (geen glassmorphism)
   ============================================================ */
:root{
  --surface:var(--ink-2);
  --surface-2:var(--ink-3);
  --line:var(--border);
  --shadow:none;
  --app-glow:none;
  --glass-bg:var(--ink-2);
  --glass-bg-2:var(--ink-3);
  --glass-border:var(--border);
  --glass-highlight:none;
  --glass-shadow:none;
  --glass-shadow-sm:none;
  --glass-blur:none;
  --pill-bg:transparent;
  --pill-border:var(--border);
}
[data-theme="light"]{
  --ink:#f4f3ef; --ink-2:#ffffff; --ink-3:#eceae4;
  --cream:#1a1714;
  --muted:#6b6760; --muted-2:#3d3a35;
  --border:rgba(26,23,20,.09); --border-g:rgba(26,23,20,.16);
  --g:#0d9f6e; --g-bright:#0d9f6e;
  --accent:#6b6760; --gold:#6b6760;
  --surface:#ffffff; --surface-2:#f5f5f3; --line:rgba(26,23,20,.08);
  --shadow:none;
  --app-glow:none;
  --glass-bg:var(--ink-2);
  --glass-bg-2:var(--ink-3);
  --glass-border:var(--border);
  --glass-highlight:none;
  --glass-shadow:none;
  --glass-shadow-sm:none;
  --glass-blur:none;
  --pill-bg:transparent;
  --pill-border:var(--border);
}

body{background:var(--ink); color:var(--cream)}
#app{background:transparent; overflow-x:hidden}

/* kaarten — flat enterprise */
.card{
  background:var(--ink-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:20px; margin-bottom:12px; overflow:hidden;
}
.card-row{display:flex; align-items:center; gap:14px}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:5px 10px;
  border-radius:var(--r-pill); border:1px solid var(--border); color:var(--muted-2)}

/* topbar + dock themabewust */
.topbar{background:transparent; border-bottom:none}
[data-theme="light"] .dock-pill{
  background:rgba(255,255,255,.92);
  border-color:rgba(0,0,0,.08);
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
[data-theme="light"] .dock-pill.is-hovered{
  background:rgba(255,255,255,.95);
  border-color:rgba(0,0,0,.12);
}
[data-theme="light"] .dock-item{color:var(--muted-2)}
[data-theme="light"] .dock-item.active,
[data-theme="light"] .dock-pill.is-hovered .dock-item:hover{color:var(--cream)}
[data-theme="light"] .dock-item.active .ic-svg,
[data-theme="light"] .dock-pill.is-hovered .dock-item:hover .ic-svg{stroke:var(--cream)}
[data-theme="light"] .dock-lens{
  background:rgba(0,0,0,.06);
  border-color:var(--border);
  box-shadow:none;
}
[data-theme="light"] .topbar .back,
[data-theme="light"] .float-back{
  background:var(--ink-3);
  border-color:var(--border);
  box-shadow:none;
  color:var(--cream);
}
[data-theme="light"] .notif.unread{
  border-color:var(--border-g);
  background:var(--ink-3);
}
[data-theme="light"] .home-menu{background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.08)}
[data-theme="light"] .home-menu-item:not(:last-child){border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .home-menu-item:hover{background:rgba(0,0,0,.03)}
[data-theme="light"] .home-menu-ic{color:rgba(10,14,24,.45)}

/* knoppen + invoer */
.btn-primary{background:var(--cream); color:var(--ink)}
.btn-secondary{background:var(--ink-3); color:var(--cream); border:1px solid var(--border)}
[data-theme="light"] .btn-primary{background:var(--ink); color:var(--cream)}
[data-theme="light"] .btn-secondary{background:var(--surface-2); color:var(--cream)}
.btn-ghost{background:var(--surface-2); border:1px solid var(--line); color:var(--cream)}
.icon-btn{background:var(--surface-2); border:1px solid var(--line)}
.icon-btn.send{background:var(--cream); color:var(--ink); border:none}
.input{background:var(--ink-3); border:1px solid var(--border)}
.csel-trigger{background-color:var(--ink-3)}
.chip.sel{color:var(--ink)}
[data-theme="light"] .input,
[data-theme="light"] .csel-trigger{background-color:var(--ink-3)}
[data-theme="light"] .field.ac-open > .input,
[data-theme="light"] .field.ac-open > .csel-trigger{
  border-color:var(--muted-2);
  box-shadow:none;
}

/* losse vlakjes themabewust */
.switch{background:rgba(127,127,127,.28)}
.progress{background:rgba(127,127,127,.18)}
.toast{background:var(--surface); box-shadow:var(--shadow)}
.bubble.them{background:var(--surface-2); border:1px solid var(--line)}
.bubble.me{color:var(--cream)}
.badge{color:var(--ink)}

/* lichte scrollbar */
[data-theme="light"] *{scrollbar-color:rgba(20,17,10,.18) transparent}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(20,17,10,.18)}

/* ---- Airbnb-achtig stat-blok ---- */
.statblock{display:grid; grid-template-columns:repeat(3,1fr)}
.statblock .s{padding:4px 14px; border-left:1px solid var(--line)}
.statblock .s:first-child{padding-left:0; border-left:none}
.statblock .s .n{font-size:22px; font-weight:600; letter-spacing:-.03em; line-height:1.1}
.statblock .s .l{font-size:12px; color:var(--muted); margin-top:2px}

/* ---- tikbare rij (icoon · label · chevron) ---- */
.tap-row{
  display:flex; align-items:center; gap:14px; padding:14px 2px;
  border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer;
  transition:opacity .12s;
}
.tap-row:hover{opacity:.92}
.tap-row:last-child{border-bottom:none}
.tap-row .tr-ic{width:24px; flex:none; color:var(--muted-2); display:grid; place-items:center}
.tap-row .tr-main{flex:1; min-width:0}
.tap-row .tr-main .t{font-size:15px}
.tap-row .tr-main .s{font-size:13px; color:var(--muted); margin-top:1px}
.tap-row .tr-chev{color:var(--muted)}

/* ---- meldingen (zwevende kaarten) ---- */
.notif{
  display:flex; gap:13px; padding:16px 18px;
  background:var(--ink-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:none;
  margin-bottom:10px;
}
.notif .nic{width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--ink-3); color:var(--muted-2)}
.notif.unread{border-color:var(--border-g); background:var(--ink-3)}
.notif .nbody{flex:1; min-width:0}
.notif .nbody .nt{font-size:14.5px; font-weight:500}
.notif .nbody .nx{font-size:13px; color:var(--muted-2); margin-top:1px}
.notif .nbody .ntime{font-size:11.5px; color:var(--muted); margin-top:3px}

/* ---- segmented control (meer tabs binnen scherm) ---- */
.seg{display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; margin-bottom:18px}
.seg button{flex:1; padding:9px 8px; border-radius:var(--r-pill); font-size:13px; font-weight:500; color:var(--muted-2)}
.seg button.on{background:var(--cream); color:var(--ink)}
.round-btn{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:var(--ink-3); border:1px solid var(--border); box-shadow:none; color:var(--cream)}
.round-btn .dot{position:absolute; top:9px; right:10px; width:9px; height:9px; border-radius:50%; background:var(--cream); border:2px solid var(--ink-2)}
.nearby-map{height:52vh; min-height:300px; margin:16px 16px 6px; border-radius:var(--r-md);
  overflow:hidden; border:1px solid var(--border); box-shadow:none}
.maplibregl-ctrl-group{background:var(--ink-2)!important; border:1px solid var(--border)!important; border-radius:var(--r-sm)!important; box-shadow:none!important; overflow:hidden}
.map-popup .maplibregl-popup-content{
  background:var(--ink-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:16px 18px;
  color:var(--cream);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  font-size:13.5px; min-width:190px;
}
.map-popup .maplibregl-popup-tip{border-top-color:var(--ink-2)}
.map-pop-name{font-weight:600; font-size:15px; letter-spacing:-.02em; color:var(--cream); line-height:1.25; margin-bottom:4px}
.map-pop-sub{font-size:12.5px; color:var(--muted); line-height:1.45; margin-bottom:6px}
.map-pop-rating{display:inline-flex; align-items:center; gap:4px; margin:4px 0 2px; font-size:12px; padding:4px 10px}
.map-pop-actions{display:flex; flex-direction:column; gap:2px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.map-pop-link{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 0; font-size:13px; font-weight:500; color:var(--muted-2);
  text-decoration:none; transition:color .12s;
}
.map-pop-link:hover{color:var(--cream)}
.map-pop-arr{opacity:.45; font-size:15px; transition:opacity .12s, transform .12s}
.map-pop-link:hover .map-pop-arr{opacity:.9; transform:translateX(2px)}
.map-pin{width:12px;height:12px;border-radius:50%;background:var(--cream);border:2px solid var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer}
.map-pin--mus{background:var(--muted-2)}
.map-pin--you{background:var(--g);width:10px;height:10px;box-shadow:0 0 0 3px rgba(29,185,84,.25)}
.nearby-hero{padding:20px 20px 0}
.nearby-hero .screen-head{margin-bottom:14px}
.inst-hero{text-align:center;margin-bottom:20px}
.inst-hero-photo-wrap{
  position:relative;margin:0 auto 18px;
  width:100%;max-width:340px;
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  padding:12px;
  border-radius:var(--r-xl);border:1px solid var(--border);
  background:var(--ink-3);overflow:hidden;
}
.inst-hero-photo{
  width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
  border-radius:var(--r-lg);
  background:#fff;
}
.inst-hero-fallback{
  width:100%;aspect-ratio:4/3;max-width:340px;margin:0 auto 18px;
  border-radius:var(--r-lg);display:grid;place-items:center;
  font-family:var(--sans);font-size:48px;font-weight:600;color:var(--muted);
  background:var(--ink-3);border:1px solid var(--border);
}
.rating-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r-pill);
  background:var(--ink-3);border:1px solid var(--border);font-size:13px;font-weight:500;color:var(--muted-2)}
.addr-chosen{margin-top:8px;padding:10px 14px;border-radius:var(--r-sm);font-size:13px;
  background:var(--ink-3);border:1px solid var(--border);color:var(--muted-2)}
[data-theme="light"] .addr-chosen{
  background:var(--ink-3);border-color:var(--border);color:var(--muted-2);
}
.admin-stat{background:var(--ink-3);border:1px solid var(--border);border-radius:var(--r-md);padding:14px}
.admin-stat .n{font-size:24px;font-family:var(--sans);font-weight:600;line-height:1}
.admin-stat .l{font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.02em}
.ac-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.admin-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.inst-card:active{transform:none}
.inst-link:hover{text-decoration:underline}
.maplibregl-map{font-family:var(--sans)}
.maplibregl-ctrl-group button{background:transparent!important; border:none!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--border)!important}
.home-top{display:flex; justify-content:flex-end; gap:10px; margin-bottom:4px}
.admin-stat .l{font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.02em}

/* ---- Custom select ---- */
.csel{position:relative}
.csel-list{top:calc(100% - 1px); margin-top:0}
.csel-trigger{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:13px 42px 13px 16px;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--glass-border);
  border-radius:var(--r-sm);
  color:var(--cream);
  font-family:var(--sans); font-size:16px; font-weight:400;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, box-shadow .15s, border-radius .12s;
}
[data-theme="light"] .csel-trigger{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6760' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.csel-trigger:focus{outline:none; border-color:var(--border-g); box-shadow:0 0 0 3px rgba(52,211,153,.10), inset 0 1px 0 rgba(255,255,255,.04)}
.csel.open .csel-trigger{
  border-bottom-left-radius:var(--r-xs);
  border-bottom-right-radius:var(--r-xs);
  border-bottom-color:transparent;
}
.csel.open .csel-list{display:flex}

/* ---- Autocomplete-dropdown (organisatie / adres) ---- */
.field.ac-open > .input,
.field.ac-open > .csel-trigger{
  border-bottom-left-radius:var(--r-xs);
  border-bottom-right-radius:var(--r-xs);
  border-bottom-color:transparent;
}
.ac-list{
  position:absolute; left:0; right:0; top:calc(100% - 1px); z-index:30;
  padding:6px; display:none; flex-direction:column; gap:2px;
  background:var(--ink-3);
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 var(--r-md) var(--r-md);
  max-height:260px; overflow-y:auto; overflow-x:hidden;
  color:var(--cream);
}
[data-theme="light"] .ac-list{
  background:var(--ink-2);
  border-color:var(--line);
}
.field.ac-open .ac-list{display:flex}
.ac-item{
  padding:11px 13px; font-size:14px; line-height:1.35; cursor:pointer;
  border-radius:var(--r-xs); border:none;
  color:var(--cream);
  transition:background .12s ease, color .12s ease;
}
.ac-item:hover,.ac-item.ac-sel{
  background:rgba(52,211,153,.14); color:var(--g-bright);
}
[data-theme="light"] .ac-item:hover,
[data-theme="light"] .ac-item.ac-sel{
  background:rgba(13,159,110,.09); color:var(--g);
}
[data-theme="light"] .ac-sub{color:var(--muted)}
.ac-group{padding:8px 13px 4px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); pointer-events:none}

/* ---- Datum/tijd-kiezer (Google Agenda-stijl) ---- */
.dtpick{position:relative}
.dtpick-trigger{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 14px; text-align:left; cursor:pointer;
  background:var(--ink-3); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--cream);
  transition:border-color .15s, background .15s;
  box-shadow:none;
}
.dtpick-trigger:hover{border-color:var(--border-g); background:#333}
.dtpick.open .dtpick-trigger{border-color:var(--muted-2); box-shadow:none}
.dtpick-ic{
  width:40px; height:40px; flex:none; border-radius:var(--r-sm);
  display:grid; place-items:center;
  background:var(--ink-2); color:var(--muted-2);
  border:1px solid var(--border);
}
.dtpick-trigger.has-value .dtpick-chev{color:var(--muted-2); opacity:1}
.dtpick-text{flex:1; min-width:0}
.dtpick-ph{font-size:15px; color:var(--muted)}
.dtpick-val{font-size:15px; font-weight:500; color:var(--cream)}
.dtpick-chev{flex:none; color:var(--muted); opacity:.7; transform:rotate(90deg)}
.dtpick-sheet[hidden]{display:none!important}
@keyframes dtpick-sheet{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.dtpick-sheet-title{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.dtpick-close{
  width:36px; height:36px; flex:none; border-radius:50%;
  border:1px solid var(--border); background:var(--ink-3);
  color:var(--muted-2); font-size:22px; line-height:1;
  display:grid; place-items:center; transition:background .12s;
}
.dtpick-close:hover{background:#333}
.dtpick-cal-wrap{padding:16px 18px 8px}
.dtpick-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px}
.dtpick-month{flex:1; text-align:center; font-size:15px; font-weight:600; color:var(--cream)}
.dtpick-nav{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border); background:var(--ink-3);
  color:var(--muted-2); font-size:20px; line-height:1;
  display:grid; place-items:center; transition:background .12s, border-color .12s, color .12s;
}
.dtpick-backdrop{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:20px 16px;
  background:rgba(0,0,0,.55);
  animation:fade .2s ease;
}
.dtpick-sheet{
  width:100%; max-width:400px; max-height:calc(100dvh - 40px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--ink-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  animation:dtpick-sheet .28s cubic-bezier(.2,.8,.2,1);
}
.dtpick-sheet-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:20px 20px 16px;
  border-bottom:1px solid var(--border);
  background:transparent;
}
.dtpick-summary-date{font-family:var(--sans); font-size:22px; font-weight:600; line-height:1.2; color:var(--cream); letter-spacing:-.02em}
.dtpick-summary-time{font-size:28px; font-weight:600; color:var(--cream); margin-top:4px; letter-spacing:-.03em}
.dtpick-week span{text-align:center; font-size:11px; font-weight:600; color:var(--muted); padding:4px 0}
.dtpick-days{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.dtpick-day{
  aspect-ratio:1; min-height:38px; border:none; border-radius:50%;
  background:transparent; color:var(--cream); font-size:14px; font-weight:500;
  cursor:pointer; transition:background .12s, color .12s, transform .1s;
}
.dtpick-day:hover:not(:disabled){background:var(--ink-3)}
.dtpick-day.sel{background:var(--cream); color:var(--ink); font-weight:700}
.dtpick-day.today:not(.sel){background:var(--ink-3); font-weight:600; color:var(--cream)}
.dtpick-day.other{opacity:.3; cursor:default}

.dtpick-time-section{padding:8px 18px 12px; border-top:1px solid var(--line)}
.dtpick-time-label{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.dtpick-time-bar{display:flex; align-items:center; justify-content:center; gap:10px}
.dtpick-time-unit{display:flex; align-items:center; gap:6px}
.dtpick-step{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface-2);
  color:var(--cream); font-size:18px; line-height:1;
  display:grid; place-items:center; transition:background .12s, border-color .12s;
}
.dtpick-step:hover{border-color:var(--border-g); background:var(--ink-3)}
.dtpick-time-num{
  min-width:44px; text-align:center; font-size:26px; font-weight:600;
  color:var(--cream); font-variant-numeric:tabular-nums;
}
.dtpick-time-dot{font-size:26px; font-weight:600; color:var(--muted); padding:0 2px}

.dtpick-chips{
  display:flex; flex-wrap:wrap; gap:8px; padding:4px 18px 16px;
}
.dtpick-chip{
  padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface-2);
  font-size:13px; font-weight:500; color:var(--muted-2);
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.dtpick-chip:hover{border-color:var(--border-g); background:var(--ink-3); color:var(--cream)}

.dtpick-actions{
  display:flex; gap:10px; justify-content:flex-end;
  padding:14px 18px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:var(--ink-2);
}
[data-theme="light"] .dtpick-actions{background:var(--ink-3)}
.dtpick-actions .btn{min-width:100px}

/* ---- Afdelingen / verdiepingen ---- */
.dep-list{margin-top:10px; border-top:1px solid var(--line,rgba(242,237,230,.08)); padding-top:6px}
.dep-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; font-size:14px;
  border-bottom:1px solid var(--line,rgba(242,237,230,.06))}
.dep-row:last-child{border-bottom:none}
.dep-x{width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:rgba(242,237,230,.06); border:1px solid var(--line,rgba(242,237,230,.12)); color:var(--muted-2,rgba(242,237,230,.6));
  transform:rotate(45deg)}  /* plus-icoon 45° gedraaid = kruisje */
.dep-form{margin-top:8px; padding:14px; border-radius:var(--r-md); background:rgba(242,237,230,.03); border:1px solid var(--line,rgba(242,237,230,.1))}

/* ---- Chat-header (Airbnb-stijl: foto + naam + rol) ---- */
.topbar.chat-head{gap:10px}
.ch-peer{display:flex; align-items:center; gap:10px; min-width:0; flex:1}
.ch-peer.tappable{cursor:pointer}
.avatar.sm{width:38px; height:38px; font-size:14px; flex:none}
.ch-name{font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ch-sub{font-size:12px; line-height:1.2}

/* ---- Chat: bewerken / verwijderen / live locatie ---- */
.bubble.del i{opacity:.7; font-style:italic}
.bubble .edited{font-size:10px; opacity:.6; margin:0 6px}
.live-pill{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.04em; color:#fff;
  background:#e5484d; padding:1px 7px; border-radius:var(--r-pill); vertical-align:1px; animation:livepulse 1.6s ease-in-out infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.55}}
.msg-menu{position:fixed; z-index:80; background:var(--surface,#0d1a20); border:1px solid var(--line,rgba(242,237,230,.14));
  border-radius:var(--r-lg); box-shadow:var(--shadow,0 12px 34px rgba(0,0,0,.5)); overflow:hidden; min-width:160px; padding:6px}
.msg-menu button{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:11px 12px; font-size:14.5px;
  color:var(--cream,#f2ede6); background:none; border:none; border-radius:var(--r-sm)}
.msg-menu button:last-child{border-bottom:none}
.msg-menu button:hover,.msg-menu button:active{background:var(--ink-3)}
.msg-menu button.danger{color:#ff6b6b}
.editbar,.livebar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 16px; font-size:13px; background:var(--ink-3); border-top:1px solid var(--border); color:var(--muted-2)}
.editbar a{color:var(--cream); cursor:pointer; text-decoration:underline}
.livebar #livestop{background:#e5484d; color:#fff; padding:6px 14px; border-radius:var(--r-pill); font-size:13px; font-weight:500}

/* ---- "aan het typen…" indicator ---- */
.ch-sub.typing{color:var(--g); font-style:italic}

/* "aan het typen…" onder de naam */
.ch-sub.typing{color:var(--g); font-style:italic}

/* ---- Social-media knoppen op profiel ---- */
.socials{display:flex; gap:14px; margin:2px 0 6px}
.soc-btn{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; flex:none;
  box-shadow:var(--shadow,0 6px 16px rgba(0,0,0,.3)); transition:transform .12s ease}
.soc-btn:active{transform:scale(.92)}

/* ---- Afspraakvoorstel in de chat ---- */
.bubble.prop{background:var(--surface);border:1px solid var(--border-g);border-radius:var(--r-lg);padding:12px 14px;max-width:78%}
.bubble.prop.me{align-self:flex-end}
.bubble.prop.them{align-self:flex-start}
.prop-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--g);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.prop-head svg{stroke:var(--g)}
.prop-line{font-size:15px;margin:2px 0}
.prop-line.muted{font-size:13px}
.prop-actions{display:flex;gap:8px;margin-top:10px}
.prop-actions-col{flex-direction:column;align-items:stretch}
.prop-reply{display:flex;flex-direction:column;gap:8px}
.prop-note{min-height:56px;font-size:13px;resize:vertical}
.prop-alt-time{font-size:13px}
.prop-status{margin-top:8px;font-size:13px;font-weight:600}
.prop-status.ok{color:var(--g)}
.prop-status.no{color:var(--muted)}
.bubble.prop .time{display:block;margin-top:6px;font-size:11px;color:var(--muted)}

/* ---- Modal (recensie / voorstel) ---- */
.modal-title{font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.03em;margin-bottom:4px}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:80;padding:0;animation:fade .2s ease}
.modal{background:var(--ink-2);width:100%;max-width:460px;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:24px 22px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:sheet .26s cubic-bezier(.2,.8,.2,1)}
@media(min-width:480px){.modal-back{align-items:center}.modal{border-radius:var(--r-xl)}}
@keyframes sheet{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---- Sterren-rating ---- */
.stars{display:flex;gap:8px;font-size:34px;line-height:1;justify-content:center}
.stars span{color:var(--line);cursor:pointer;transition:transform .1s,color .1s}
.stars span.on{color:var(--gold)}
.stars span:active{transform:scale(1.2)}

/* ---- Snelkeuze-chips in de recensie-modal ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--cream);border-radius:var(--r-pill);padding:7px 13px;font-size:13px;cursor:pointer;transition:all .12s}
.chip.on{background:var(--g);border-color:var(--g);color:#04210f;font-weight:600}
.prop-line svg{vertical-align:-2px;stroke:var(--muted)}

/* ---- Team / toegang ---- */
.team-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.team-row:last-of-type{border-bottom:none}
.avatar.sm{width:36px;height:36px;font-size:14px;flex-shrink:0}
.team-act{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.team-act[data-delmember] svg,.team-act[data-delorg] svg{transform:rotate(45deg)}
.team-act svg{stroke:currentColor}

/* ============================================================
   UI-MODUS: server zet html.ui-mobile | html.ui-desktop (User-Agent)
   ============================================================ */

/* ---- Telefoon (iPhone / Android mobile) ---- */
html.ui-mobile{
  --shell-w:100%;
  --dock-w:100%;
  --dock-gap:10px;
  --dock-h:54px;
}
html.ui-mobile .screen{padding-left:16px; padding-right:16px}
html.ui-mobile .dock{padding:8px 10px calc(8px + env(safe-area-inset-bottom)); gap:8px}
html.ui-mobile .dock-item{min-width:0; max-width:none; padding:8px 2px; font-size:9px}
html.ui-mobile .dock-lbl{max-width:100%; font-size:9px}
html.ui-mobile .dock-fab{width:48px; height:48px}
html.ui-mobile .quick-grid{grid-template-columns:repeat(2,1fr)}

/* ---- Desktop / Windows web ---- */
html.ui-desktop{
  --shell-w:min(1040px, calc(100% - 48px));
  --content-w:var(--shell-w);
  --dock-w:100%;
  --dock-gap:14px;
  --dock-h:64px;
  --header-h:60px;
}
html.ui-desktop body.authed #app{padding-top:0}
html.ui-desktop .app-header .app-logo{padding:0 4px}
html.ui-desktop .screen{padding-left:0; padding-right:0}
html.ui-desktop .float-pills{margin-left:0; margin-right:0; padding-left:0; padding-right:0}
html.ui-desktop .topbar{
  margin-left:0; margin-right:0;
  padding:0 0 18px;
}
html.ui-desktop body.authed #app > .topbar{margin-top:var(--header-offset)}
html.ui-desktop .topbar h2{font-size:1.35rem}
html.ui-desktop .dock{
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  gap:12px;
}
html.ui-desktop .dock-pill{
  padding:6px 10px;
  gap:4px;
  width:100%;
  max-width:none;
}
html.ui-desktop .dock-item{
  flex:1 1 0;
  min-width:0;
  max-width:none;
  padding:11px 14px; font-size:12px; gap:8px;
  flex-direction:row; justify-content:center;
}
html.ui-desktop .dock-lbl{display:inline; overflow:visible; text-overflow:clip; max-width:none; white-space:nowrap}
html.ui-desktop .dock-ic .ic-svg{width:20px; height:20px}
html.ui-desktop .dock-fab{width:58px; height:58px}
html.ui-desktop .quick-grid{grid-template-columns:repeat(4,1fr); gap:12px}
html.ui-desktop .quick-tile{min-height:104px; padding:18px 16px}
html.ui-desktop .qt-lbl{font-size:14px}
html.ui-desktop .qt-sub{font-size:11.5px}
html.ui-desktop .card{padding:22px 24px}
html.ui-desktop .org-hero{align-items:flex-start}
html.ui-desktop body.authed .chat-wrap{max-width:var(--shell-w); margin:0 auto; height:100dvh}
html.ui-desktop body.authed .chat-body{padding:20px 0 10px}

/* ---- gebruiksgemak: boeken, strip, financiën ---- */
.search-hero-btn{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:12px 16px; margin-bottom:22px; border-radius:var(--r-pill);
  border:none; background:rgba(255,255,255,.08); color:var(--muted);
  font-size:14px; font-weight:400; cursor:pointer; transition:background .15s;
}
.search-hero-btn:hover{background:rgba(255,255,255,.12); color:var(--muted-2)}
.creator-strip{display:flex; gap:12px; overflow-x:auto; padding:4px 2px 18px; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; margin-bottom:8px}
.creator-strip::-webkit-scrollbar{height:0}
.creator-strip-card{
  flex:0 0 132px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 10px 14px; border-radius:var(--r-lg); border:1px solid var(--border);
  background:var(--ink-2); cursor:pointer; text-align:center; transition:border-color .15s, background .12s;
}
.creator-strip-card:hover,.creator-strip-card:active{border-color:var(--border-g)}
.profile-hero{transition:border-color .15s, background .15s}
.profile-hero:active{transform:none}
.csc-photo{width:72px; height:72px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:var(--ink-3); font-family:var(--sans); font-size:22px; font-weight:600; color:var(--muted-2)}
.fin-big{font-family:var(--sans); font-size:34px; font-weight:600; margin:6px 0 2px}
.profile-hero h2,.profile-hero .page-title{font-family:var(--sans)}
.csc-photo img{width:100%; height:100%; object-fit:cover}
.csc-name{font-size:13px; font-weight:500; line-height:1.25; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.csc-meta{font-size:11px}
.csc-price{font-size:12px; font-weight:600; color:var(--muted-2)}
.csc-rating{font-size:11px; color:var(--muted)}
.creator-browse-card .avatar.lg{width:56px; height:56px; font-size:20px}
.creator-browse-card{align-items:center}
.book-steps{display:flex; gap:10px; margin-bottom:18px}
.book-steps span{width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:600; border:1px solid var(--line); color:var(--muted)}
.book-steps span.on{background:var(--cream); color:var(--ink); border-color:var(--cream)}
.price-break .pb-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:14px}
.price-break .pb-row.pb-total{border-top:1px solid var(--line); margin-top:6px; padding-top:12px; font-weight:500}
.nav-btn{display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 0; text-decoration:none}
.finance-hero{text-align:center; padding-top:8px}
.booking-mini .snippet{color:var(--muted)}
html.ui-desktop body.authed .composer{padding:14px 0 calc(14px + env(safe-area-inset-bottom))}
html.ui-desktop body.authed .bubble{max-width:56%}
html.ui-desktop .modal{max-width:500px}
html.ui-desktop .modal-back{align-items:center}

/* ---- status, boeking detail, home hero ---- */
.status-badge{
  display:inline-block; font-size:12px; font-weight:500; letter-spacing:.01em;
  padding:5px 10px; border-radius:var(--r-pill);
  background:var(--ink-3); color:var(--muted); border:1px solid var(--border);
}
.status-badge.is-confirmed,.status-badge.is-done{color:var(--cream); border-color:var(--border-g)}
.status-badge.is-pending{color:var(--muted-2); border-color:var(--border-g); background:rgba(255,255,255,.06)}
.status-badge.is-declined{color:#e11d48; border-color:rgba(225,29,72,.35); background:rgba(225,29,72,.08)}
.status-badge.is-cancelled{opacity:.75}
[data-theme="light"] .status-badge.is-pending{background:rgba(0,0,0,.04)}
[data-theme="light"] .status-badge.is-declined{background:rgba(225,29,72,.06)}

.bk-section{margin-bottom:26px}
.bk-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.bk-section-title{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0}
.bk-section-count{
  font-size:12px;font-weight:600;min-width:22px;height:22px;padding:0 7px;
  border-radius:999px;display:grid;place-items:center;
  background:var(--ink-3);border:1px solid var(--border);color:var(--muted-2);
}
.bk-section-hint{font-size:12px;color:var(--muted);line-height:1.45;margin:0 0 10px}
.bk-card-hint{margin-top:4px!important;font-size:12px!important;color:var(--muted-2)!important}

.review-card-top{display:flex;align-items:center;gap:12px}
.review-card-meta{flex:1;min-width:0}
.review-card-name{font-size:15px;font-weight:500;line-height:1.25}
.review-card-stars{font-size:14px;margin-top:2px;letter-spacing:.02em}
.review-card-comment{font-size:13.5px;margin:10px 0 0;line-height:1.5}
.review-card-date{font-size:12px;margin-top:8px}

.booking-detail{display:flex; flex-direction:column; gap:4px}
.booking-hero{text-align:left; padding:22px 20px}
.booking-hero-top{margin-bottom:12px}
.booking-party{font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px}
.booking-when{font-size:14px; color:var(--muted); margin:0}

.detail-block{margin-top:18px}
.detail-block-label{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px 2px}
.detail-card{padding:16px 18px}
.detail-address{font-size:14px; line-height:1.5; margin:0 0 14px; color:var(--muted-2)}
.detail-action{width:auto; margin-top:4px}

.action-grid{display:flex; flex-wrap:wrap; gap:8px}
.action-grid .btn{width:auto; flex:1 1 calc(50% - 4px); min-width:140px}

.next-booking{cursor:pointer; padding:18px 20px; transition:background .12s}
.next-booking:hover{background:var(--ink-3)}
.next-booking-label{font-size:12px; color:var(--muted); margin-bottom:6px}
.next-booking-title{font-size:18px; font-weight:600; letter-spacing:-.02em; margin-bottom:4px}
.next-booking-meta{font-size:13px; color:var(--muted); margin-bottom:14px}
.next-booking-actions{display:flex; flex-wrap:wrap; gap:8px}
.next-booking-actions .btn{width:auto}

.empty-state{padding:24px 20px; font-size:14px; color:var(--muted); line-height:1.5}

/* ---- profiel bewerken: secties i.p.v. chip-muur ---- */
.profile-edit-progress{margin-bottom:14px}
.profile-edit-form{display:flex; flex-direction:column; gap:10px}
.profile-save-btn{margin-top:16px;margin-bottom:calc(8px + env(safe-area-inset-bottom))}
.field-hint{font-size:12px; color:var(--muted); margin:-2px 0 10px; line-height:1.45}
.genre-search{margin-bottom:10px}
.edit-fold{
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--glass-bg); overflow:hidden;
}
.edit-fold > summary{
  list-style:none; cursor:pointer; padding:14px 16px;
  font-weight:500; font-size:15px; display:flex; align-items:center; justify-content:space-between;
}
.edit-fold > summary::-webkit-details-marker{display:none}
.edit-fold > summary::after{
  content:''; width:8px; height:8px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s;
  flex:none; margin-left:12px;
}
.edit-fold[open] > summary::after{transform:rotate(-135deg); margin-top:4px}
.edit-fold-body{padding:0 16px 16px}
.edit-fold-body .field:first-child{margin-top:0}
.genre-folds{display:flex; flex-direction:column; gap:6px}
.genre-fold{border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(0,0,0,.12)}
.genre-fold-head{
  list-style:none; cursor:pointer; padding:10px 12px; font-size:13px; font-weight:500;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.genre-fold > summary::-webkit-details-marker{display:none}
.genre-fold > summary::after{
  content:''; width:6px; height:6px; border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted); transform:rotate(45deg); flex:none;
}
.genre-fold[open] > summary::after{transform:rotate(-135deg)}
.genre-fold .chips{padding:0 12px 12px}
.genre-fold-count{
  font-size:11px; font-weight:600; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:var(--ink-3); color:var(--cream); border:1px solid var(--border);
  display:grid; place-items:center;
}
.tr-chev,.home-menu-chev,.home-map-chev,.float-menu-chev{display:none}

/* ---- profielfoto bijsnijden ---- */
body.photo-crop-open{overflow:hidden}
.photo-crop{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.photo-crop-panel{width:min(100%,380px); display:flex; flex-direction:column; gap:14px}
.photo-crop-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:15px; font-weight:600;
}
.photo-crop-head button{
  background:none; border:none; color:var(--cream); font-size:14px; font-weight:500;
  padding:8px 4px; cursor:pointer;
}
.photo-crop-done{color:var(--cream)!important; font-weight:600!important}
.photo-crop-stage{
  position:relative; width:100%; aspect-ratio:1;
  display:grid; place-items:center; border-radius:var(--r-xl); overflow:hidden;
  background:#0a0a0a;
}
.photo-crop-canvas{display:block; touch-action:none; cursor:grab}
.photo-crop-canvas:active{cursor:grabbing}
.photo-crop-mask{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at center, transparent 38%, rgba(0,0,0,.62) 39%);
}
.photo-crop-hint{
  text-align:center; font-size:12px; color:var(--muted); margin:0;
}
.photo-crop-zoom{
  width:100%; accent-color:var(--cream);
  -webkit-appearance:none; height:4px; border-radius:2px; background:var(--ink-3);
}
.photo-crop-zoom::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--cream); border:2px solid var(--ink);
}

/* ---- live popup-meldingen ---- */
.live-notif{
  position:fixed; left:50%; bottom:calc(var(--dock-h) + var(--dock-gap) + 18px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);
  z-index:180; width:min(92vw,360px);
  padding:14px 16px; border-radius:var(--r-md);
  background:var(--ink-2); border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
  cursor:pointer;
}
.live-notif.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}
.live-notif-t{font-size:14px;font-weight:600;line-height:1.3}
.live-notif-s{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4}

/* ---- toegankelijkheid: grotere tekst (C-061) ----
   Vast px in de UI schaalt niet mee met html font-size; zoom wel (Chrome/Safari/Edge).
   Firefox-fallback via font-size + gerichte bumps. */
html.text-scale-lg{
  font-size:18.5px;
  zoom:1.18;
}
@supports not (zoom: 1) {
  html.text-scale-lg{ zoom: normal; font-size:18.5px; }
}
html.text-scale-lg .page-title{font-size:1.7em}
html.text-scale-lg .float-menu-t,
html.text-scale-lg .ab-row-t,
html.text-scale-lg .home-menu-t,
html.text-scale-lg .float-card .name{font-size:1.08em}
html.text-scale-lg .float-menu-s,
html.text-scale-lg .ab-row-s,
html.text-scale-lg .snippet,
html.text-scale-lg .muted,
html.text-scale-lg .notif .nbody .nx{font-size:1.05em}
html.text-scale-lg .btn{font-size:1.05em}
html.text-scale-lg .input,
html.text-scale-lg .float-search-input,
html.text-scale-lg .ab-float-input{font-size:16px}
html.text-scale-lg .prop-line,
html.text-scale-lg .bubble,
html.text-scale-lg .notif .nbody .nt,
html.text-scale-lg .section-title,
html.text-scale-lg .dock-lbl{font-size:1.06em}
html.text-scale-lg .topbar h2{font-size:1.25em}
html.ui-desktop.text-scale-lg .dock-item{font-size:13px}
html.ui-mobile.text-scale-lg .dock-lbl{font-size:10px}

/* ---- multi-select (iCloud Mail-stijl) ---- */
.mail-sel-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:14px;
}
.mail-sel-head .page-title{margin:0; flex:1; min-width:0}
.mail-sel-title{
  font-size:clamp(1.55rem,4.5vw,2rem); font-weight:700; letter-spacing:-.03em;
  line-height:1.15; flex:1; min-width:0;
}
.mail-sel-actions{display:flex; align-items:center; gap:8px; flex:none; padding-top:4px}
.mail-pill{
  padding:7px 14px; border-radius:var(--r-pill); font-size:14px; font-weight:500;
  background:var(--ink-3); border:1px solid var(--border); color:var(--cream);
  cursor:pointer; white-space:nowrap;
}
.mail-pill:active{opacity:.85}
.mail-icon-btn{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink-3); border:1px solid var(--border); color:var(--cream);
  cursor:pointer;
}
.select-dot{
  width:24px; height:24px; border-radius:50%; flex:none;
  border:1.5px solid rgba(255,255,255,.32); background:transparent;
  display:grid; place-items:center; cursor:pointer; align-self:center;
  transition:background .12s, border-color .12s;
}
.select-dot .ic-svg{display:none; stroke:#fff; width:13px; height:13px}
.select-dot.on{
  background:#0a84ff; border-color:#0a84ff;
}
.select-dot.on .ic-svg{display:block}
[data-theme="light"] .select-dot{border-color:rgba(26,23,20,.28)}
.notif.selecting, .float-card.selecting{cursor:pointer}
/* Selectie: witte kaart blijft wit, alleen blauwe rand — geen inset-ring */
.notif.is-selected, .float-card.is-selected{
  background:var(--ink-2) !important;
  border-color:#0a84ff !important;
}
.float-list.mail-list{
  gap:10px;
}
.float-list.mail-list .float-card,
.float-list.mail-list .notif{
  border-radius:var(--r-md);
  margin-bottom:0;
  padding:14px 16px;
  overflow:visible;
  background:var(--ink-2);
  box-sizing:border-box;
  width:100%;
}
.float-list.mail-list .float-card.is-selected,
.float-list.mail-list .notif.is-selected{
  background:var(--ink-2);
  border-color:#0a84ff;
}
/* Vastgezet blijft herkenbaar, maar niet over selectie heen */
.float-list.mail-list .conv-card.is-pinned:not(.is-selected){border-color:var(--g)}
.mail-sel-toolbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px;
  padding:10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  background:transparent;
  border:none;
  pointer-events:none;
}
.mail-toolbar-btn{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  color:#1a1714; background:transparent; border:none; cursor:pointer;
  pointer-events:auto;
}
.mail-toolbar-btn .ic-svg{stroke:#1a1714; width:24px; height:24px}
.mail-toolbar-btn:disabled{opacity:.28; cursor:default}
.mail-toolbar-btn:not(:disabled):active{opacity:.7}
[data-theme="dark"] .mail-toolbar-btn,
[data-theme="dark"] .mail-toolbar-btn .ic-svg{
  color:#1a1714; stroke:#1a1714;
}
body.mail-selecting .dock{display:none!important}
body.mail-selecting .screen{
  padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px));
}
.radius-row{
  display:flex; align-items:center; gap:12px; margin:4px 0 14px;
  padding:12px 14px; border-radius:var(--r-md); background:var(--ink-2);
  border:1px solid var(--border);
}
.radius-row label{font-size:13px; color:var(--muted-2); white-space:nowrap}
.radius-row input[type=range]{flex:1; accent-color:var(--cream)}
.radius-row .radius-val{font-size:13px; font-weight:600; min-width:4.5ch; text-align:right}

/* ---- enterprise UI helpers ---- */
.enterprise-help,.enterprise-finance-note{padding:16px 18px;margin-bottom:14px}
.enterprise-help a,.enterprise-finance-note a{color:var(--g)}
.ledger-alert{border:1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background:color-mix(in srgb, var(--gold) 10%, transparent)}
.ledger-alert .eyebrow{color:var(--gold)}
.account-restriction{margin-bottom:14px;border:1px solid color-mix(in srgb, var(--gold) 55%, var(--line));background:color-mix(in srgb, var(--gold) 12%, transparent)}
.account-restriction.danger{border-color:color-mix(in srgb, #ef4444 50%, var(--line));background:color-mix(in srgb, #ef4444 12%, transparent)}
.account-restriction .eyebrow{color:var(--gold)}
.account-restriction.danger .eyebrow{color:#f87171}
.account-restriction a{color:var(--g)}
.pb-foot{font-size:12px;margin-top:10px;line-height:1.5;padding-top:8px;border-top:1px solid var(--line)}
.sort-bar{display:flex;align-items:center;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.sort-pill{
  padding:6px 12px;border-radius:var(--r-pill);font-size:12px;
  background:var(--ink-3);border:1px solid var(--line);color:var(--muted);cursor:pointer;
}
.sort-pill.on{background:var(--g);border-color:var(--g);color:#000;font-weight:500}
.finance-sub-card{margin-bottom:12px;padding:16px 18px}
.finance-bulk-card{margin-bottom:16px;padding:16px 18px}
.finance-bulk-row{display:flex;gap:10px;margin-bottom:10px}
.finance-bulk-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.finance-preview{margin-bottom:16px;padding:14px 16px}
.finance-preview-body{font-size:13px;line-height:1.55;margin-top:8px}
.kvk-lookup-row{display:flex;gap:8px;align-items:center}
.kvk-lookup-row .input{flex:1}
.finance-settings-link{align-items:center}

/* ---- Stories (Instagram-style ring + timeline) ---- */
.story-ring{
  display:inline-grid;place-items:center;border-radius:50%;padding:3px;cursor:pointer;
  background:transparent;border:none;vertical-align:middle;
}
.story-ring-unseen{
  background:conic-gradient(from 200deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888,#f09433);
}
.story-ring-seen{background:var(--line)}
.story-ring .avatar,.story-ring.profile-hero-ring .avatar{margin:0}
.profile-hero-ring{margin:0 auto 12px!important}
.csc-photo .story-ring{padding:2px}
.csc-photo .csc-av{
  display:grid;place-items:center;width:72px;height:72px;border-radius:50%;
  overflow:hidden;background:var(--ink-3);font-size:22px;font-weight:600;
}
.csc-photo .csc-av img{width:100%;height:100%;object-fit:cover}

.story-timeline{
  display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.story-timeline::-webkit-scrollbar{display:none}
.story-tile{
  flex:none;width:76px;border:none;background:none;padding:0;cursor:pointer;text-align:center;
}
.story-tile-fallback,.story-tile img{
  display:grid;place-items:center;width:68px;height:68px;border-radius:50%;
  border:2px solid var(--line);object-fit:cover;background:var(--ink-3);margin:0 auto;
}
.story-tile.is-live .story-tile-fallback,.story-tile.is-live img{
  border-color:var(--g);box-shadow:0 0 0 2px rgba(29,185,84,.25);
}
.story-tile-cap{display:block;font-size:11px;color:var(--muted);margin-top:6px;line-height:1.2;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.story-share-card{align-items:center}

.story-viewer-back{
  position:fixed;inset:0;z-index:200;background:#000;
  display:flex;align-items:stretch;justify-content:center;padding:0;
}
body.story-open{overflow:hidden}
.story-viewer{
  position:relative;width:100%;max-width:520px;height:100%;max-height:100dvh;
  margin:0 auto;display:flex;flex-direction:column;color:#fff;background:#000;
}
.story-progress{display:flex;gap:4px;padding:10px 12px 0;z-index:4;position:relative;flex:none}
.story-progress-seg{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.story-progress-seg .story-progress-fill{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.story-progress-seg.done .story-progress-fill{width:100%}
.story-progress-seg.on .story-progress-fill{width:100%;transition:width linear}
.story-viewer-stage{
  position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#000;
}
.story-viewer-media-wrap{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#000;z-index:0;
}
.story-viewer-media{
  width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
}
.story-viewer-media.is-enter{animation:storyFadeIn .28s ease}
@keyframes storyFadeIn{from{opacity:.4}to{opacity:1}}
.story-viewer-overlay{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;pointer-events:none;
}
.story-viewer-overlay-top{
  display:flex;align-items:center;gap:10px;padding:8px 14px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 100%);
  pointer-events:auto;
}
.story-viewer-name{font-weight:600;font-size:14px}
.story-viewer-close{
  margin-left:auto;width:36px;height:36px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer;
}
.story-viewer-overlay-bottom{
  margin-top:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(0,0,0,.75) 0%,transparent 100%);
  pointer-events:none;
}
.story-viewer-caption{
  font-size:15px;line-height:1.45;text-shadow:0 1px 8px rgba(0,0,0,.6);
  margin:0;word-break:break-word;
}
.story-viewer-chip{margin-bottom:8px}
.story-card-preview{
  background:rgba(18,18,18,.88);backdrop-filter:blur(12px);border-radius:var(--r-lg);
  padding:18px;border:1px solid rgba(255,255,255,.1);
}
.scp-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--g);margin-bottom:8px;font-weight:600}
.scp-title{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-.02em}
.scp-meta{font-size:14px;margin-top:6px;color:rgba(255,255,255,.82)}
.scp-city{font-size:13px;margin-top:4px}
.scp-note{font-size:12px;margin-top:12px;line-height:1.45}
.story-viewer-chip{
  display:inline-flex;flex-direction:column;gap:2px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);
  padding:10px 14px;margin-bottom:10px;max-width:100%;
}
.story-viewer-chip-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--g);font-weight:600}
.story-viewer-chip-title{font-size:15px;font-weight:600;letter-spacing:-.02em}
.story-viewer-chip-meta{font-size:12px;color:rgba(255,255,255,.72)}
.story-viewer-body{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:0 16px;position:relative;z-index:1;width:100%;
}
.story-viewer-card,.story-viewer-chip{position:relative;z-index:1}
.story-tap{
  position:absolute;top:56px;bottom:72px;width:35%;border:none;background:transparent;cursor:pointer;z-index:3;
}
.story-tap-prev{left:0}
.story-tap-next{right:0}
.story-thumb img{max-width:100%;border-radius:var(--r-lg);margin-top:8px;max-height:120px;object-fit:cover}

/* ---- Story composer (Instagram-stijl) ---- */
body.story-compose-open{overflow:hidden}
.story-compose{
  position:fixed;inset:0;z-index:210;background:#000;
  display:flex;flex-direction:column;color:#fff;
}
.story-compose-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top));z-index:2;
}
.story-compose-close{
  width:40px;height:40px;border:none;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:24px;cursor:pointer;
}
.story-compose-stage{
  flex:1;position:relative;display:flex;align-items:stretch;justify-content:center;
  min-height:0;padding:0;overflow:hidden;
}
.story-compose-preview{
  width:100%;height:100%;flex:1;
  border-radius:0;overflow:hidden;background:#000;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.story-compose-preview.has-photo img{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
}
.story-compose-preview:not(.has-photo){
  max-width:420px;margin:0 auto;aspect-ratio:9/16;
  max-height:calc(100dvh - 200px);border-radius:var(--r-xl);
}
.story-compose-cap-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:20px 16px 24px;
  background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 100%);
}
.story-compose-cap-preview{
  margin:0;font-size:15px;line-height:1.45;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.6);word-break:break-word;
}
.story-compose-preview-card{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;
  background:linear-gradient(0deg,rgba(0,0,0,.65) 0%,transparent 45%);
}
.story-compose-preview-card .story-card-preview{width:100%}
.story-compose-preview.is-empty{
  display:grid;place-items:center;
  background:linear-gradient(160deg,#1a1a1a 0%,#0d0d0d 100%);
  border:1px solid rgba(255,255,255,.08);
}
.story-compose-empty-hint{font-size:14px;color:rgba(255,255,255,.45)}
.story-compose-share-av img{width:100%;height:100%;object-fit:cover}
.story-compose-bottom{
  padding:12px 16px calc(16px + env(safe-area-inset-bottom));z-index:2;
}
.story-compose-cap{
  width:100%;border:none;background:transparent;color:#fff;font-size:15px;
  padding:8px 4px;outline:none;resize:none;min-height:36px;
}
.story-compose-cap::placeholder{color:rgba(255,255,255,.45)}
.story-compose-actions{
  display:flex;align-items:center;gap:10px;margin-top:12px;
}
.story-compose-share{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
  font-size:14px;font-weight:500;
}
.story-compose-share-av{
  width:28px;height:28px;border-radius:50%;overflow:hidden;
  background:var(--ink-3);display:grid;place-items:center;flex:none;font-size:11px;font-weight:600;
}
.story-compose-send{
  width:48px;height:48px;border:none;border-radius:50%;
  background:#3897f0;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;
  transition:transform .12s,opacity .12s;
}
.story-compose-send:disabled{opacity:.45;cursor:not-allowed}
.story-compose-send:not(:disabled):active{transform:scale(.94)}
.story-compose-tools{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;
}
.story-compose-tools .btn{width:auto;flex:none;padding:8px 14px;font-size:13px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:#fff}

/* ---- Story foto bijsnijden (9:16) ---- */
body.story-crop-open{overflow:hidden}
.story-crop{
  position:fixed;inset:0;z-index:220;background:#000;
  display:flex;flex-direction:column;
  height:100dvh;max-height:100dvh;overflow:hidden;
}
.story-crop-head{
  flex:none;
  display:grid;
  grid-template-columns:minmax(96px,1fr) auto minmax(96px,1fr);
  align-items:center;gap:8px;
  padding:10px 20px;
  padding-top:max(14px, env(safe-area-inset-top));
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
  min-height:56px;
  background:#000;
  z-index:3;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.story-crop-head > span{
  text-align:center;font-size:15px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.story-crop-head button{
  background:none;border:none;color:#fff;font-size:14px;font-weight:500;
  padding:10px 14px;min-height:44px;min-width:44px;cursor:pointer;
  border-radius:var(--r-sm);
  -webkit-tap-highlight-color:transparent;
}
.story-crop-cancel{justify-self:start;text-align:left}
.story-crop-done{justify-self:end;text-align:right;font-weight:600!important}
.story-crop-stage{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:12px 20px;min-height:0;overflow:hidden;
}
.story-crop-frame{
  position:relative;
  width:min(100%,340px);
  max-height:calc(100dvh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  aspect-ratio:9/16;
  border-radius:var(--r-xl);overflow:hidden;background:#111;
}
.story-crop-canvas{display:block;touch-action:none;cursor:grab;width:100%;height:100%}
.story-crop-canvas:active{cursor:grabbing}
.story-crop-mask{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.55);border-radius:var(--r-xl);
}
.story-crop-foot{
  flex:none;
  padding:14px 20px max(18px, env(safe-area-inset-bottom));
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
  text-align:center;background:#000;z-index:3;
}
.story-crop-hint{font-size:12px;color:rgba(255,255,255,.55);margin:0 0 12px}
.story-crop-zoom{width:100%;accent-color:#fff;-webkit-appearance:none;height:4px;border-radius:2px;background:rgba(255,255,255,.2)}
.story-crop-zoom::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;border:2px solid #000;
}

.nav-sheet{max-width:400px}
.nav-sheet .nav-sheet-opt{cursor:pointer;text-decoration:none;color:inherit}
.nav-sheet .float-stack{border-radius:var(--r-lg)}

.profile-hero-avatar-btn{
  position:relative;display:inline-block;border:none;background:none;padding:3px;cursor:pointer;
  border-radius:50%;margin:0 auto 12px;
}
.profile-hero-avatar-btn .avatar{margin:0}
.profile-hero-add{
  position:absolute;bottom:2px;right:2px;width:26px;height:26px;border-radius:50%;
  background:var(--g);color:#000;font-size:18px;font-weight:700;line-height:26px;
  border:2px solid var(--ink);pointer-events:none;
}
.story-tile-views{display:block;font-size:10px;color:var(--muted);margin-top:4px}

.story-hub-modal{max-width:440px;max-height:88vh;overflow-y:auto;padding:18px 20px 24px}
.story-hub-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.story-hub-close{width:36px;height:36px;border:none;border-radius:50%;background:var(--ink-3);font-size:22px;cursor:pointer;color:var(--cream)}
.story-hub-item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;display:grid;grid-template-columns:1fr auto;align-items:start}
.story-hub-item.open{border-color:var(--g)}
.story-hub-main{
  display:flex;gap:12px;align-items:center;width:100%;padding:12px 14px;border:none;
  background:transparent;cursor:pointer;text-align:left;color:inherit;grid-column:1;
}
.story-hub-thumb{
  width:52px;height:52px;border-radius:10px;overflow:hidden;flex:none;
  display:grid;place-items:center;background:var(--ink-3);
}
.story-hub-thumb img{width:100%;height:100%;object-fit:cover}
.story-hub-meta{flex:1;min-width:0}
.story-hub-title{display:block;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-hub-sub{display:block;font-size:12px;margin-top:2px}
.story-hub-eyes{display:flex;align-items:center;gap:4px;font-size:12px;margin-top:6px;color:var(--muted)}
.story-hub-actions{display:flex;gap:4px;padding:12px 10px 10px 0;justify-content:flex-end;grid-column:2}
.story-hub-del{font-size:18px;line-height:1}
.story-hub-viewers{display:none;padding:0 14px 12px;border-top:1px solid var(--line);grid-column:1/-1}
.story-hub-item.open .story-hub-viewers{display:block}
.story-viewer-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.story-viewer-row-name{font-size:13px;font-weight:500}
.story-hub-new-list{display:flex;flex-direction:column;gap:8px}
.conv-card.is-pinned{border-color:var(--g)}
.conv-card.is-muted .snippet{opacity:.75}
.conv-ico{display:inline-flex;vertical-align:middle;margin-left:6px;opacity:.7}
.muted-badge{background:var(--ink-3)!important;color:var(--muted)!important}

/* ---- Airbnb-achtig profiel & edit ---- */
.ab-profile-screen{padding-top:16px}
.ab-profile-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:18px;
}
.ab-profile-head .page-title{margin:0; font-size:clamp(1.85rem,5vw,2.25rem); font-weight:700; letter-spacing:-.04em}
.ab-icon-btn{
  position:relative; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:var(--cream);
  background:var(--ink-2); border:1px solid var(--border); flex:none;
}
.ab-icon-dot{
  position:absolute; top:10px; right:10px; width:7px; height:7px; border-radius:50%;
  background:#e11d48; border:1.5px solid var(--ink-2);
}
.ab-card{
  background:var(--ink-2); border:1px solid var(--border);
  border-radius:28px; padding:22px 20px; margin-bottom:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}
[data-theme="light"] .ab-card{
  background:#fff; border-color:rgba(0,0,0,.06);
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}
.ab-identity{display:flex; align-items:stretch; gap:8px; min-height:140px}
.ab-identity-left{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:4px 8px 4px 0;
}
.ab-identity-photo{display:flex; justify-content:center}
.ab-identity-photo .avatar,
.ab-identity-photo .profile-hero-avatar-btn,
.ab-identity-photo .profile-hero-ring{margin:0!important}
.ab-identity-photo .avatar{width:92px!important; height:92px!important; font-size:32px!important}
.ab-identity-name{
  margin-top:12px; font-size:22px; font-weight:700; letter-spacing:-.03em;
  line-height:1.15; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.ab-identity-sub{margin-top:4px; font-size:13px; color:var(--muted); line-height:1.3}
.ab-identity-stats{
  flex:0 0 42%; max-width:46%; display:flex; flex-direction:column; justify-content:center;
  border-left:1px solid var(--line); padding-left:16px;
}
.ab-stat{padding:10px 0}
.ab-stat + .ab-stat{border-top:1px solid var(--line)}
.ab-stat-n{font-size:22px; font-weight:700; letter-spacing:-.03em; line-height:1.1}
.ab-stat-l{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.25}
.ab-tiles{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px}
.ab-tile{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:18px 16px; border-radius:22px; text-align:left;
  background:var(--ink-2); border:1px solid var(--border);
  box-shadow:0 4px 16px rgba(0,0,0,.08); cursor:pointer; color:inherit;
}
[data-theme="light"] .ab-tile{
  background:#fff; border-color:rgba(0,0,0,.06); box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.ab-tile:active{transform:scale(.985)}
.ab-tile-ic{color:var(--cream); opacity:.9}
.ab-tile-t{font-size:14px; font-weight:600; letter-spacing:-.01em}
.ab-section{margin-bottom:26px}
.ab-section-title{
  font-size:20px; font-weight:700; letter-spacing:-.03em; margin:0 0 10px;
}
.ab-list{display:flex; flex-direction:column}
.ab-row{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:16px 2px; background:transparent; border:none; border-bottom:1px solid var(--line);
  color:inherit; cursor:pointer; text-align:left;
}
.ab-list .ab-row:last-child{border-bottom:none}
.ab-row-ic{width:24px; flex:none; color:var(--cream); display:grid; place-items:center; opacity:.88}
.ab-row-body{flex:1; min-width:0}
.ab-row-t{display:block; font-size:15px; font-weight:500}
.ab-row-s{display:block; font-size:13px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ab-row-chev{color:var(--muted); flex:none; opacity:.7}
.ab-row--toggle{cursor:default}
.ab-account-line{font-size:12px; color:var(--muted); margin:8px 0 6px}
.ab-help{font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:18px}
.ab-help a{color:var(--cream); text-decoration:underline; text-underline-offset:2px}
.ab-logout{
  display:block; width:100%; padding:14px; margin-bottom:8px;
  font-size:15px; font-weight:500; color:var(--cream);
  background:transparent; border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer;
}
.ab-logout:hover{background:var(--ink-3)}

/* Edit hub */
.ab-edit-screen{padding-top:8px}
.ab-edit-head{position:relative; text-align:center; margin-bottom:8px; min-height:40px}
.ab-edit-close{position:absolute; right:0; top:0}
.ab-edit-title{font-size:16px; font-weight:600; margin:8px 0 0; letter-spacing:-.02em}
.ab-photo-block{
  display:flex; flex-direction:column; align-items:center; gap:0; margin:18px 0 28px;
}
.ab-photo-av{width:112px!important; height:112px!important; font-size:40px!important; margin:0!important}
.ab-photo-pill{
  margin-top:-14px; z-index:1; display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--ink-2); color:var(--cream); border:1px solid var(--border);
  box-shadow:0 4px 14px rgba(0,0,0,.14); cursor:pointer;
}
[data-theme="light"] .ab-photo-pill{background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.1)}
.ab-edit-intro{margin-bottom:8px}
.ab-edit-hint{font-size:13px; color:var(--muted); line-height:1.5; margin:8px 0 4px}
.ab-list--edit .ab-row{padding:18px 2px}
.ab-edit-done{margin-top:28px; margin-bottom:calc(12px + env(safe-area-inset-bottom)); border-radius:12px}

/* Sheets */
.ab-sheet{max-height:92dvh; overflow:auto; position:relative; padding-top:20px}
.ab-sheet-x{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink-3); border:1px solid var(--border); color:var(--cream);
}
.ab-sheet-title{font-size:24px; font-weight:700; letter-spacing:-.03em; margin:8px 28px 10px 0; line-height:1.2}
.ab-sheet-hint{font-size:14px; color:var(--muted); line-height:1.5; margin:0 0 18px}
.ab-sheet-body{margin-bottom:18px}
.ab-sheet-foot{position:sticky; bottom:0; padding-top:8px; background:linear-gradient(transparent, var(--ink-2) 30%)}
.ab-float-field{
  border:1.5px solid var(--cream); border-radius:14px; padding:10px 14px 12px; margin-bottom:12px;
  background:transparent;
}
.ab-float-field label{display:block; font-size:11px; color:var(--muted); margin-bottom:4px; font-weight:500}
.ab-float-input{
  width:100%; border:none; background:transparent; color:var(--cream);
  font-size:16px; font-family:var(--sans); outline:none; resize:vertical;
}
.ab-charcount{font-size:12px; color:var(--muted); margin-top:6px}
.ab-search{
  width:100%; padding:12px 14px; margin-bottom:14px; border-radius:12px;
  border:1px solid var(--border); background:var(--ink-3); color:var(--cream); font-size:15px;
}
.ab-pill-meta{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px}
.ab-pill-label{font-size:14px; font-weight:700}
.ab-pill-count{font-size:12px; color:var(--muted)}
.ab-pill-group{margin-bottom:16px}
.ab-pills{display:flex; flex-wrap:wrap; gap:8px}
.ab-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:999px; font-size:13px; font-weight:500;
  border:1.5px solid var(--border); background:transparent; color:var(--muted-2); cursor:pointer;
}
.ab-pill.is-on{border-color:var(--cream); color:var(--cream); font-weight:600}
.ab-rep-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.ab-rep-del{color:var(--muted); padding:6px; border-radius:50%}
.ab-rep-add{margin-top:14px}
.ab-loc-field{position:relative}