/* Housepass (zelf verkopen / Housepass voor makelaars) - look zoals de landingspagina's (Playfair/Montserrat, zand/inkt/terra/zee/olijf). Geen CDN's. */
:root{--sand:#EFE7DA;--sand-2:#F7F2EA;--ink:#1C1C1C;--terra:#C4693F;--sea:#2B7A9E;--olive:#8A9A7B;--muted:#6B665E;--ok:#2E7D4F;--line:#DDD3C3}
*{box-sizing:border-box}
body{margin:0;background:var(--sand);color:var(--ink);font-family:"Montserrat","Segoe UI",system-ui,sans-serif;font-size:15px;line-height:1.55}
h1,h2,h3{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-weight:700;line-height:1.15;margin:0 0 .5em}
h1{font-size:2.2rem}h2{font-size:1.5rem;margin-top:1.6em}h3{font-size:1.15rem}
a{color:var(--sea)}
header.top{background:var(--ink);color:#fff;padding:14px 0}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
header.top a{color:#fff;text-decoration:none;margin-left:18px;font-size:.92rem}
.brand{font-family:"Playfair Display",Georgia,serif;font-size:1.35rem}
.brand span{color:#F6D3C0}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
main{padding:32px 0 64px}
.flash{background:#FFF4D6;border:1px solid #E8D28A;padding:10px 14px;border-radius:8px;margin:0 0 20px}
.card{background:#fff;border-radius:14px;padding:22px 24px;margin:0 0 20px;border:1px solid var(--line)}
.grid{display:grid;gap:18px}
@media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.btn{display:inline-block;background:var(--terra);color:#fff;border:0;border-radius:999px;padding:.6em 1.3em;font-weight:600;cursor:pointer;text-decoration:none;font-size:.95rem}
.btn.sec{background:var(--sea)}.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}.btn.small{padding:.35em .9em;font-size:.85rem}
.btn.dark{background:var(--ink)}
.hero{padding:56px 0 36px;text-align:center}
.hero p{max-width:60ch;margin:0 auto 24px;color:var(--muted)}
.hero .btn{margin:6px}
label{display:block;font-size:.85rem;font-weight:600;margin:10px 0 4px;color:var(--muted)}
input[type=text],input[type=email],input[type=number],input[type=tel],input[type=date],select,textarea{width:100%;padding:.55em .7em;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
textarea{min-height:90px}
input[type=file]{font-size:.9rem}
form .row{display:grid;gap:12px}
@media(min-width:700px){form .row-2{grid-template-columns:1fr 1fr}form .row-3{grid-template-columns:1fr 1fr 1fr}form .row-4{grid-template-columns:repeat(4,1fr)}}
.actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.92rem}
th{background:var(--sand-2);font-weight:600}
.muted{color:var(--muted);font-size:.9rem}
.tag{display:inline-block;background:var(--sand-2);border:1px solid var(--line);border-radius:999px;padding:.1em .7em;font-size:.8rem}
.tag.ok{background:#E3F2E8;border-color:#9FCDB0}.tag.warn{background:#FFF4D6;border-color:#E8D28A}
/* milestone-balk */
.ms-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px 10px;margin:18px 0 28px;box-shadow:0 6px 18px rgba(28,28,28,.05)}
.ms-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.ms-title{font-family:"Playfair Display",Georgia,serif;font-size:1.05rem;font-weight:700}
.ms-pct{font-size:.8rem;color:var(--muted);letter-spacing:.02em}
.ms-help{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:999px;color:var(--terra);text-decoration:none;font-weight:600}.ms-help:hover{background:var(--sand-2)}
.ms-track{position:relative;height:6px;border-radius:3px;background:var(--sand);margin:0 4px 6px;overflow:hidden}
.ms-track i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--olive),var(--terra));transition:width .6s ease}
.ms{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;overflow-x:auto}
.ms a{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--muted);font-size:.68rem;line-height:1.15;text-align:center;padding:6px 2px 4px;border-radius:10px;transition:background .15s,color .15s}
.ms a:hover{background:var(--sand-2);color:var(--ink)}
.ms .n{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--line);margin:0 0 6px;font-weight:600;font-size:.85rem;color:var(--muted);transition:transform .15s,box-shadow .15s}
.ms .l{max-width:88px}
.ms .done{color:var(--ink)}
.ms .done .n{background:var(--olive);border-color:var(--olive);color:#fff}
.ms .cur{color:var(--ink);font-weight:600}
.ms .cur .n{background:var(--terra);border-color:var(--terra);color:#fff;transform:scale(1.18);box-shadow:0 0 0 5px rgba(196,105,63,.18)}
.ms .todo .n{background:var(--sand-2)}
@media(max-width:760px){.ms{grid-template-columns:repeat(12,minmax(76px,1fr))}.ms-wrap{padding:12px 10px 8px}}
@media(prefers-reduced-motion:reduce){.ms-track i,.ms .n,.ms a{transition:none}}
/* tiles op dossier-overzicht */
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--ink);display:block}
.tile:hover{border-color:var(--terra)}
.tile b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.05rem;margin-bottom:4px}
.tile small{color:var(--muted)}
/* media */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.thumbs .item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.thumbs img{width:100%;height:130px;object-fit:cover;border-radius:6px;display:block}
.thumbs .ph{height:130px;background:var(--sand-2);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem}
/* woningkaarten */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.cards a{text-decoration:none;color:var(--ink);background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.cards img,.cards .ph{width:100%;height:180px;object-fit:cover;display:block;background:var(--sand-2)}
.cards .body{padding:14px 16px}
.cards .price{font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;color:var(--terra)}
pre{white-space:pre-wrap;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;font-size:.85rem}
code{background:var(--sand-2);padding:.1em .4em;border-radius:4px}
.checklist li{margin:4px 0}
footer{color:var(--muted);font-size:.8rem;text-align:center;padding:24px 0;border-top:1px solid var(--line)}
/* --- Housepass: aanvullingen (olijf = partner/gereed, terra = actief, zee = koper) --- */
.brand span{color:var(--terra)}
header.top.partner{background:var(--olive)}
header.top.partner .brand span{color:#fff}
.payoff{font-family:"Playfair Display",Georgia,serif;font-style:italic;color:var(--muted)}
.tag.demo{background:#FFF4D6;border-color:#E8D28A;color:#7a5a00;font-weight:600;letter-spacing:.03em}
.tag.live{background:#E3F2E8;border-color:#9FCDB0;color:var(--ok)}
.tag.olive{background:var(--olive);border-color:var(--olive);color:#fff}
.tag.terra{background:var(--terra);border-color:var(--terra);color:#fff}
.tag.sea{background:var(--sea);border-color:var(--sea);color:#fff}
.btn.olive{background:var(--olive)}
.check{background:#fff;border-left:4px solid var(--terra);border-radius:10px;padding:14px 18px;margin:0 0 20px}
.check ul{margin:6px 0 0;padding-left:20px}
.check.done{border-left-color:var(--olive)}
/* AI-bewerkbalk */
.aibar{background:var(--sand-2);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 18px}
.aibar textarea{min-height:60px}
.aibar .actions{margin-top:8px}
.doc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 32px;line-height:1.6}
.doc h1{font-size:1.6rem}.doc h2{font-size:1.15rem;margin-top:1.2em}.doc table{margin:8px 0}
.versions{list-style:none;padding:0;margin:0}
.versions li{padding:6px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.versions li.cur{font-weight:600}
/* koperportaal */
.filters{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 20px}
.filters label{margin-top:0}
.cards .feat{color:var(--muted);font-size:.85rem;margin-top:6px}
.cards .feat span{display:inline-block;margin-right:10px}
.gallery{margin:0 0 20px}
.gallery .large{width:100%;max-height:560px;object-fit:cover;border-radius:14px;display:block;background:var(--sand-2)}
.gallery .strip{display:flex;gap:8px;overflow-x:auto;margin-top:8px;padding-bottom:4px}
.gallery .strip a{flex:0 0 auto}
.gallery .strip img{width:110px;height:76px;object-fit:cover;border-radius:6px;border:2px solid transparent;display:block}
.gallery .strip a.on img{border-color:var(--terra)}
.hero-w{padding:14px 0 6px}
.hero-w .kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--terra);font-weight:600}
.hero-w h1{font-size:2.4rem;margin:.2em 0 .2em}
.hero-w .sub{font-size:1.1rem;color:var(--muted);max-width:70ch}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 22px}
.why{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 26px}
.why li{margin:6px 0}
.bot{background:var(--sand-2);border-left:4px solid var(--sea);padding:12px 16px;border-radius:8px;margin:12px 0}
details.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 22px;margin:0 0 14px}
details.panel summary{cursor:pointer;font-family:"Playfair Display",Georgia,serif;font-size:1.15rem;padding:12px 0;font-weight:700}
.lijst{display:grid;gap:14px}
@media(min-width:700px){.lijst{grid-template-columns:repeat(3,1fr)}}
.lijst ul{margin:4px 0;padding-left:18px;font-size:.9rem}
/* partner */
.partner-head{background:var(--olive);color:#fff;border-radius:14px;padding:22px 26px;margin:0 0 22px}
.partner-head h1{color:#fff;margin:0 0 4px}
.partner-head .muted{color:#f2f2f2}
.kop-form{display:grid;gap:14px}
@media(min-width:760px){.kop-form{grid-template-columns:1fr 1fr}}
.kop-form .card{margin:0}
.kop-form .card h3 .tag{float:right}
.explain{background:var(--sand-2);border-radius:12px;padding:14px 18px;font-size:.9rem;color:var(--muted)}
.docgrid{grid-template-columns:1fr}
@media(min-width:760px){.docgrid{grid-template-columns:2fr 1fr}}
@media(max-width:700px){table{display:block;overflow-x:auto}}

/* --- Housepass: koperportaal, marktplaats, makelaar --- */
.wcard{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.cards .wcard a.cardlink{border:0;border-radius:0;flex:1}
.cardbar{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-top:1px solid var(--line);background:var(--sand-2);font-size:.85rem}
.cardbar form{margin:0}
.cmp{font-weight:400;margin:0;font-size:.85rem;color:var(--muted)}
.viewtoggle a{display:inline-block;padding:.15em .8em;border:1px solid var(--line);border-radius:999px;text-decoration:none;margin-left:4px}
.viewtoggle a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.map{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--sand-2);margin:0 0 18px}
.map iframe{width:100%;height:420px;border:0;display:block}
.compare th{width:160px;background:var(--sand-2)}
.compare td{min-width:180px}
.compare .price{font-family:"Playfair Display",Georgia,serif;font-size:1.2rem;color:var(--terra)}
.wgrid{grid-template-columns:1fr}
@media(min-width:900px){.wgrid{grid-template-columns:2.2fr 1fr}}
.side .card{margin-bottom:14px}
.regel .btn{display:block;margin:6px 0;text-align:center}
.cards a.prof{padding:0}
.stars{color:#C99700;font-weight:600}
.tarief .tile{position:relative;padding-top:18px}
.tarief .tile input[type=radio]{position:absolute;top:14px;right:14px}
.tarief .tile.sel{border-color:var(--terra);box-shadow:0 0 0 2px var(--terra) inset}
.tarief .price{font-family:"Playfair Display",Georgia,serif;font-size:1.5rem;color:var(--terra);margin:8px 0 4px}
.tile.todo{border-color:var(--terra);border-style:dashed}
.entrances .tile b{font-size:1.2rem}

/* Chatbot, hartje, actiebalk, modals: zie hp-widgets.css (ook geinjecteerd in de landingspagina). */
/* --- Funda-achtige filters (A) --- */
.filters-wrap{margin:0 0 14px}
.filters-wrap>summary{cursor:pointer;font-weight:600;padding:8px 0;list-style:none}
.filters-wrap>summary::-webkit-details-marker{display:none}
.filters-wrap>summary::before{content:"\25B8  ";color:var(--terra)}
.filters-wrap[open]>summary::before{content:"\25BE  "}
.filters{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.filters .filters-checks{grid-column:span 2}
.filters .chk{display:inline-block;font-weight:400;margin:0 12px 4px 0;color:var(--ink);font-size:.85rem}
.filters .chk input{margin-right:3px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip{display:inline-block;background:var(--sand-2);border:1px solid var(--terra);color:var(--ink);border-radius:999px;padding:.2em .8em;font-size:.85rem;text-decoration:none}
.chip b{color:var(--terra);margin-left:2px}
.chip:hover{background:var(--terra);color:#fff}.chip:hover b{color:#fff}
.chip.clear{border-color:var(--line);color:var(--muted)}
.saveq{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.saveq input[type=text]{width:auto;margin:0}
.count{font-size:1rem}
@media(max-width:760px){.filters{grid-template-columns:1fr 1fr}.filters .filters-checks{grid-column:span 2}}

/* --- Webshop-achtige filtersidebar (/aanbod, /aanbod/kaart): sticky links, op <= 900px een off-canvas lade via checkbox #hp-drawer --- */
.aanbod-page .wrap{max-width:1360px}
.aanbod-page h1{margin-bottom:.2em}
.aanbod-page .lead{margin:0 0 22px;max-width:80ch}
.aanbod-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
.results{min-width:0}
.results.loading{opacity:.55;transition:opacity .2s}
.fside{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 18px 14px;scrollbar-width:thin;font-variant-numeric:tabular-nums}
.fside-head{display:flex;align-items:baseline;gap:12px;padding:12px 0 8px;border-bottom:1px solid var(--line)}
.fside-head h2{font-size:1.25rem;margin:0;flex:1}
.fside-clear{font-size:.82rem;color:var(--muted)}
.fside-clear:hover{color:var(--terra)}
.drawer-close{display:none}
.drawer-backdrop{display:none}
.fg-n{display:inline-flex;align-items:center;justify-content:center;min-width:1.45em;height:1.45em;padding:0 .4em;border-radius:999px;background:var(--terra);color:#fff;font-size:.72rem;font-weight:700;vertical-align:middle;margin-left:6px;font-family:"Montserrat","Segoe UI",system-ui,sans-serif}
.fg{border-bottom:1px solid var(--line)}
.fg:last-of-type{border-bottom:0}
.fg>summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:12px 0;font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.02rem;user-select:none}
.fg>summary::-webkit-details-marker{display:none}
.fg>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.fg[open]>summary::after{transform:rotate(45deg)}
.fg>summary:hover{color:var(--terra)}
.fg-body{padding:0 0 14px}
.fg-body label{margin:10px 0 5px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.fg-body .pill,.fg-body .tchip,.fg-body .seg label,.fg-body .tile-t,.fg-body .el{text-transform:none;letter-spacing:0;margin:0}
.fg-body>label:first-child,.fg-body .two label{margin-top:0}
.fg-body .two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.fg-body .hint{margin:0 0 6px;font-size:.82rem;color:var(--muted)}
.fform input[type=text],.fform input[type=search],.fform input[type=number],.fform select{width:100%;padding:.5em .65em;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.9rem;background:#fff}
.fform select,.sortsel{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B665E' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .7em center;padding-right:2em}
.fform-foot{display:flex;align-items:center;gap:12px;padding-top:14px}
.fform-foot.js .btn{display:none}
/* pill-rijen (radio / checkbox verborgen, label = pill) */
.pills,.chips-in,.seg,.tiles,.elabels{display:flex;flex-wrap:wrap;gap:6px}
.pills input,.chips-in input,.seg input,.tiles input,.elabels input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pill,.tchip{position:relative;display:inline-flex;align-items:center;margin:0;padding:.3em .8em;border:1px solid var(--line);border-radius:999px;background:var(--sand-2);color:var(--ink);font-size:.82rem;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.pill:hover,.tchip:hover{border-color:var(--terra);background:#fff}
.pill:has(:checked),.tchip:has(:checked),.pill.on,.tchip.on{background:var(--terra);border-color:var(--terra);color:#fff}
.tchip::before{content:"+";margin-right:.4em;color:var(--terra);font-weight:700}
.tchip:has(input[type=radio])::before{content:none}
.tchip:has(:checked)::before,.tchip.on::before{content:"\2713";color:#fff}
/* gesegmenteerde straal */
.seg{gap:0;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--sand-2)}
.seg label{position:relative;flex:1;margin:0;padding:.35em 0;text-align:center;font-size:.85rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;border-right:1px solid var(--line);font-variant-numeric:tabular-nums}
.seg label:last-child{border-right:0}
.seg label small{font-size:.65em;font-weight:500;margin-left:1px}
.seg label:hover{background:#fff}
.seg label:has(:checked),.seg label.on{background:var(--terra);color:#fff}
/* type-tegels */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile-t{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:9px 4px 7px;border:1px solid var(--line);border-radius:12px;background:var(--sand-2);color:var(--ink);font-size:.7rem;font-weight:500;text-transform:none;letter-spacing:0;text-align:center;cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.tile-t svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile-t:hover{border-color:var(--terra);background:#fff}
.tile-t:has(:checked),.tile-t.on{background:var(--terra);border-color:var(--terra);color:#fff}
/* energielabels */
.el{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;margin:0;padding:.25em .55em;border-radius:6px 999px 999px 6px;color:#fff;font-size:.78rem;font-weight:700;text-transform:none;letter-spacing:0;cursor:pointer;opacity:.55;border:2px solid transparent;transition:opacity .12s,transform .12s}
.el:hover{opacity:.9}
.el:has(:checked),.el.on{opacity:1;border-color:var(--ink);transform:scale(1.06)}
.el-none{background:var(--muted);border-radius:999px}
.el-apppp,.el-appp,.el-app,.el-ap{background:#1E7B3C}.el-a{background:#2E9A4A}.el-b{background:#6BB544}.el-c{background:#C6C82E}.el-d{background:#F2C23E}.el-e{background:#EE9A3C}.el-f{background:#E0662E}.el-g{background:#C9302C}
/* prijsslider (dual thumb, twee ranges over elkaar) */
.prange{margin:2px 0 4px}
.prange-vals{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;margin-bottom:6px;font-variant-numeric:tabular-nums}
.prange-track{position:relative;height:28px}
.prange-track::before{content:"";position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:var(--line)}
.prange-track i{position:absolute;top:12px;height:4px;border-radius:2px;background:var(--terra);left:0;right:0}
.prange-track input[type=range]{position:absolute;left:0;right:0;top:0;width:100%;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none;z-index:2}
.prange-track input[type=range]::-webkit-slider-runnable-track{background:transparent;height:28px}
.prange-track input[type=range]::-moz-range-track{background:transparent;height:28px}
.prange-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:4px;border-radius:50%;background:#fff;border:2px solid var(--terra);box-shadow:0 1px 3px rgba(28,28,28,.15);cursor:grab}
.prange-track input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--terra);cursor:grab}
.prange-track input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--sea);outline-offset:2px}
.prange:not(.js) .prange-track{display:none}
/* resultatenkop */
.res-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 10px}
.res-head .count{margin:0;font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums}
.res-head .count b{font-family:"Playfair Display",Georgia,serif;font-size:1.35rem;color:var(--terra)}
.res-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sortlab{margin:0;font-size:.8rem}
.sortsel{width:auto;padding:.4em 2em .4em .7em;font-size:.88rem;border-radius:999px}
.res-head .viewtoggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.res-head .viewtoggle a{margin:0;border:0;border-radius:0;padding:.35em .9em;font-size:.88rem;color:var(--ink)}
.res-head .viewtoggle a+a{border-left:1px solid var(--line)}
.res-head .viewtoggle a.on{background:var(--ink);color:#fff}
.drawer-btn{display:none;margin:0}
.aanbod-page .chips{margin:0 0 12px}
.aanbod-page .saveq{margin:0 0 18px;padding:10px 14px;background:#fff;border:1px dashed var(--line);border-radius:12px}
.aanbod-page .saveq input[type=text]{max-width:240px}
.tablewrap{overflow-x:auto}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* focus */
.pill:has(:focus-visible),.tchip:has(:focus-visible),.seg label:has(:focus-visible),.tile-t:has(:focus-visible),.el:has(:focus-visible){outline:2px solid var(--sea);outline-offset:2px}
.fform input:focus-visible,.fform select:focus-visible,.sortsel:focus-visible,.fg>summary:focus-visible{outline:2px solid var(--sea);outline-offset:1px}
/* mobiel: lade */
@media(max-width:900px){
  .aanbod-layout{display:block}
  .drawer-btn{display:inline-block}
  .fside{position:fixed;top:0;left:0;bottom:0;z-index:1200;width:min(88vw,340px);max-height:none;border-radius:0 16px 16px 0;transform:translateX(-105%);transition:transform .22s ease}
  .drawer-toggle:checked~.aanbod-layout .fside{transform:none;box-shadow:12px 0 32px rgba(28,28,28,.18)}
  .drawer-backdrop{display:block;position:fixed;inset:0;z-index:1190;background:rgba(28,28,28,.35);opacity:0;pointer-events:none;transition:opacity .2s}
  .drawer-toggle:checked~.aanbod-layout .drawer-backdrop{opacity:1;pointer-events:auto}
  .drawer-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;border-radius:50%;background:var(--sand-2);color:var(--ink);font-size:1.3rem;cursor:pointer}
  .fform-foot{position:sticky;bottom:0;background:#fff;padding:12px 0 4px;border-top:1px solid var(--line)}
  .fform-foot.js .btn{display:inline-block}
  .res-head .count{width:100%}
}
@media(prefers-reduced-motion:reduce){.fside,.drawer-backdrop,.results.loading{transition:none}}

/* opvolgingslijst */
.task{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:5px solid var(--olive);border-radius:10px;padding:10px 14px;margin:0 0 8px}
.task.prio-hoog{border-left-color:var(--terra)}.task.prio-laag{border-left-color:var(--muted)}.task.done{opacity:.65;border-left-color:var(--line)}
.task-main{display:flex;gap:10px;min-width:0}.task-icon{font-size:1.3rem;line-height:1.2;width:1.6em;text-align:center}
.task-meta{font-size:.85rem}.task-desc{font-size:.85rem;white-space:pre-line}.task-note{font-size:.85rem;background:#FFF4D6;border-radius:6px;padding:4px 8px;margin-top:4px;white-space:pre-line}
.task-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center;flex-shrink:0}
.task-more summary{list-style:none;cursor:pointer}.task-more summary::-webkit-details-marker{display:none}
.task-inline{display:flex;gap:6px;margin-top:6px}.task-inline input{margin:0;padding:.4em .6em;font-size:.85rem}
.late{color:var(--terra);font-weight:600}.today{color:var(--ok);font-weight:600}

/* --- campagnedashboard (/dossier/<id>/marketing) --- */
.cd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.cd-head h1{margin-bottom:.2em}
.cd-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;flex-shrink:0}
.cd-toggle a{padding:.35em 1em;font-size:.88rem;color:var(--ink);text-decoration:none}
.cd-toggle a+a{border-left:1px solid var(--line)}
.cd-toggle a.on{background:var(--ink);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0 20px;font-variant-numeric:tabular-nums}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.kpi small{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.kpi b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.2;margin:4px 0 2px;white-space:nowrap}
.kpi i{display:block;font-style:normal;font-size:.78rem;color:var(--muted)}
.kpi-warn{border-color:var(--terra)}.kpi-warn b{color:var(--terra)}
.cd-charts{grid-template-columns:1fr}
@media(min-width:900px){.cd-charts{grid-template-columns:3fr 2fr}}
.chart-card h3{margin-bottom:6px}
.legend{display:flex;gap:16px;font-size:.82rem;color:var(--muted);margin:0 0 6px}
.legend .sw{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
.sw-spend{background:var(--terra)}.sw-leads{background:var(--sea)}
svg.chart{width:100%;height:auto;display:block;font-variant-numeric:tabular-nums}
svg.chart .grid{stroke:var(--line);stroke-width:1}
svg.chart .ax{font-size:10px;fill:var(--muted);font-family:"Montserrat","Segoe UI",system-ui,sans-serif}
svg.chart .ax-l{text-anchor:end}svg.chart .ax-r{text-anchor:start}svg.chart .ax-x{text-anchor:middle}
svg.chart .area{fill:var(--terra);fill-opacity:.12}
svg.chart .line-spend{fill:none;stroke:var(--terra);stroke-width:2;stroke-linejoin:round}
svg.chart .line-leads{fill:none;stroke:var(--sea);stroke-width:2;stroke-dasharray:4 3;stroke-linejoin:round}
svg.chart .dot-leads{fill:#fff;stroke:var(--sea);stroke-width:2}
svg.chart .hit{fill:transparent}
svg.chart .hit:hover{fill:var(--ink);fill-opacity:.06}
.bars,.funnel{display:grid;gap:6px;font-variant-numeric:tabular-nums}
.bar-row,.f-row{display:grid;grid-template-columns:120px 1fr 64px;gap:8px;align-items:center;font-size:.85rem}
.bar-label,.f-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track,.f-track{display:block;height:14px;background:var(--sand-2);border-radius:7px;overflow:hidden}
.bar-track i,.f-track i{display:block;height:100%;background:var(--sea);border-radius:7px;transition:width .5s ease}
.f-track i{background:linear-gradient(90deg,var(--olive),var(--terra))}
.bar-val,.f-val{text-align:right;white-space:nowrap}
.cd-table td,.cd-table th{font-size:.86rem;vertical-align:middle}
.cd-table td:first-child{min-width:150px}.cd-table td:first-child b{white-space:nowrap}
.kpis{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
.cd-table th.num,.cd-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill-st{display:inline-block;border-radius:999px;padding:.1em .7em;font-size:.78rem;background:var(--sand-2);border:1px solid var(--line);white-space:nowrap}
.pill-st.st-actief{background:#E3F2E8;border-color:#9FCDB0;color:var(--ok)}
.pill-st.st-gepauzeerd,.pill-st.st-gepauzeerd_saldo{background:#FFF4D6;border-color:#E8D28A;color:#7a5a00}
.pill-st.st-gepland,.pill-st.st-gekozen{background:#fff;border-style:dashed}
.pill-st.st-afgerond{color:var(--muted)}
.budget-form{display:inline-flex;align-items:center;gap:2px}
.budget-form input[type=number]{width:62px;padding:.3em .4em;text-align:right;font-size:.85rem;margin:0}
.budget-form .step{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1rem;line-height:1;padding:0}
.budget-form .step:hover{border-color:var(--terra);color:var(--terra)}
.budget-form .save{display:none;margin-left:4px}
.budget-form.dirty .save{display:inline-block}
.ok-t{color:var(--ok)}.warn-t{color:var(--terra)}
svg.spark{display:block}svg.spark polyline{fill:none;stroke:var(--sea);stroke-width:1.5;stroke-linejoin:round}
.cd-two{margin-top:22px}
.hugo{background:var(--sand-2);border-left:4px solid var(--sea)}
.hugo-list{padding-left:20px;margin:0}
.hugo-list li{margin:0 0 12px}.hugo-list p{margin:2px 0 6px;font-size:.9rem}
.tl{list-style:none;padding:0;margin:0}
.tl li{display:grid;grid-template-columns:76px 1fr auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.88rem;align-items:start}
.tl li:last-child{border-bottom:0}
.tl-date{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.8rem;padding-top:2px}
.tl-st{text-align:right;white-space:nowrap;font-size:.8rem}
.stepper{display:grid;gap:12px}
@media(min-width:760px){.stepper{grid-template-columns:repeat(3,1fr)}}
.step-card{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.step-card.chosen{border-color:var(--olive)}.step-card.on{border-color:var(--terra);box-shadow:0 0 0 2px rgba(196,105,63,.15)}
.step-n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--sand-2);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700}
.step-card.chosen .step-n{background:var(--olive);border-color:var(--olive);color:#fff}
.step-card.on .step-n{background:var(--terra);border-color:var(--terra);color:#fff}
.step-body{min-width:0;flex:1}.step-body .actions{gap:6px;margin-top:6px}
.step-body input[type=number],.step-body input[type=text]{padding:.3em .5em;font-size:.85rem}
.gp-grid{display:grid;gap:6px}
@media(min-width:900px){.gp-grid{grid-template-columns:1fr 1fr}}
.gp{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;border:1px solid var(--line);margin:0;background:#fff}
.gp.geplaatst{background:#F3F8F4;border-color:#CFE5D6}.gp.wachtend{background:#FFFBEF}.gp.afgewezen{opacity:.6}
.gp-check{font-size:1rem;text-align:center;color:var(--ok)}.gp.wachtend .gp-check{color:#7a5a00}.gp.gepland .gp-check{color:var(--muted)}.gp.afgewezen .gp-check{color:var(--terra)}
.gp-body{min-width:0;font-size:.88rem}.gp-body b{font-weight:600}
.gp-act{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.cmini{display:flex;flex-direction:column;gap:2px;font-size:.8rem;font-variant-numeric:tabular-nums;min-width:150px}
.cmini b{white-space:nowrap}
@media(prefers-reduced-motion:reduce){.bar-track i,.f-track i{transition:none}}

/* --- homepage: founder-verhaal ---------------------------------------------------- */
.story{padding:28px 0 8px;max-width:72ch}
.story .kicker,.door .kicker{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--terra);font-weight:600;margin-bottom:6px}
.story h1{font-size:2rem;margin:0 0 .5em}
.story-text p{margin:0 0 .9em;font-size:1.02rem}
.signature{font-family:"Playfair Display",Georgia,serif;font-style:italic;color:var(--muted);margin:4px 0 18px}
.fotostrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.fotostrip a{flex:0 0 auto;scroll-snap-align:start;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff}
.fotostrip img{display:block;height:150px;width:auto;max-width:240px;object-fit:cover}
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0 8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.proof div{text-align:center}
.proof b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.5rem;color:var(--terra);line-height:1.1}
.proof small{color:var(--muted);font-size:.8rem}
.doors-h{margin-top:1.4em}
.door{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;border-top:4px solid var(--terra)}
.door.makelaar{border-top-color:var(--olive)}.door.koper{border-top-color:var(--sea)}
.door h3{margin:0 0 .4em}
.door p{color:var(--muted);flex:1;margin:0 0 12px}
.door .counter{font-size:.9rem;color:var(--ink);flex:0}
.door .counter b{color:var(--olive)}
.door .btn{align-self:flex-start}
.steps{list-style:none;padding:0;margin:0 0 8px}
.steps li{background:var(--sand-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.steps .n{display:inline-block;width:28px;height:28px;border-radius:50%;background:var(--terra);color:#fff;text-align:center;line-height:28px;font-weight:700;margin-bottom:8px}
.steps b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.05rem}
.steps small{color:var(--muted)}
@media(min-width:760px){.story{padding-top:40px}.story h1{font-size:2.5rem}.proof{grid-template-columns:repeat(5,1fr)}.fotostrip img{height:200px;max-width:320px}}

/* --- Ontdek (swipe, /ontdek + teaser op /aanbod) -------------------------------------------------------------- */
.ontdek-teaser{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#fff,var(--sand-2));border:1.5px dashed var(--terra);border-radius:14px;padding:12px 16px;margin:0 0 18px;text-decoration:none;color:var(--ink)}
.ontdek-teaser .ot-ico{font-size:1.6rem;color:var(--terra);transform:rotate(-12deg)}.ontdek-teaser span:nth-child(2){flex:1}.ontdek-teaser:hover{border-style:solid}
.ontdek-head h1{margin-bottom:4px}.ontdek-head .muted a{color:var(--sea)}
.ontdek-wrap{max-width:420px;margin:0 auto;touch-action:pan-y}
.ontdek-stack{position:relative;height:min(74vh,600px);min-height:460px;margin:8px 0 14px;touch-action:none;user-select:none;-webkit-user-select:none}
.ocard{position:absolute;inset:0;background:#fff;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 12px 34px rgba(28,28,28,.16);display:flex;flex-direction:column;
  transform:translateY(calc(var(--i,0) * 10px)) scale(calc(1 - var(--i,0) * .04));transform-origin:50% 100%;z-index:calc(20 - var(--i,0));
  transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .3s;cursor:grab;will-change:transform}
.ocard.drag{transition:none;cursor:grabbing}.ocard.gone{pointer-events:none;transition:transform .32s ease-in,opacity .3s}
.ocard:not(.top):not(.oempty){pointer-events:none}
.ophoto{position:relative;flex:1;min-height:0;background:var(--sand-2)}.ophoto img,.ophoto .ph{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ochips{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap}.ochips span{background:rgba(255,255,255,.92);border-radius:999px;padding:.15em .7em;font-size:.8rem;font-weight:600}
.ostamp{position:absolute;top:22px;padding:.25em .7em;border:3px solid;border-radius:8px;font-family:"Playfair Display",Georgia,serif;font-size:1.4rem;font-weight:700;opacity:0;transition:opacity .15s;background:rgba(255,255,255,.85)}
.ostamp.like{left:18px;color:var(--ok);border-color:var(--ok);transform:rotate(-14deg)}.ostamp.nope{right:18px;color:var(--terra);border-color:var(--terra);transform:rotate(14deg)}
.ostamp.up{left:50%;top:40%;transform:translateX(-50%);color:var(--sea);border-color:var(--sea)}
.ocard.show-like .ostamp.like,.ocard.show-nope .ostamp.nope,.ocard.show-up .ostamp.up{opacity:1}
.obody{padding:12px 16px 14px}.oprice{font-family:"Playfair Display",Georgia,serif;font-size:1.35rem;color:var(--terra)}.oname{font-weight:600}
.ofeat{color:var(--muted);font-size:.85rem;margin-top:4px}.ofeat span{display:inline-block;margin-right:10px}
.oempty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;cursor:default;background:var(--sand-2);border-style:dashed;box-shadow:none;transform:none}
.oempty[hidden],.ontdek-vera[hidden],.ov-follow[hidden]{display:none}
.ontdek-btns{display:flex;justify-content:center;gap:14px;margin:6px 0}
.obtn{width:58px;height:58px;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:transform .15s;line-height:1}
.obtn:hover{transform:scale(1.08)}.obtn.like{color:var(--ok);border-color:var(--ok)}.obtn.nope{color:var(--terra);border-color:var(--terra)}.obtn.up{color:var(--sea);border-color:var(--sea)}.obtn.undo{width:46px;height:46px;font-size:1.2rem;align-self:center;color:var(--muted)}
.ontdek-count{text-align:center}
.ontdek-vera{border-left:4px solid var(--sea);margin-top:18px}.ontdek-vera.pop{animation:ov-pop .35s ease-out}
.ov-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}.ov-avatar{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--sea);color:#fff;align-items:center;justify-content:center;font-weight:700}
.ov-actions{display:flex;gap:8px;flex-wrap:wrap}.ov-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}.ov-form input[type=text]{flex:1;min-width:160px;padding:.45em .7em;border:1px solid var(--line);border-radius:8px;font:inherit}
.ov-alert{font-size:.9rem}
@keyframes ov-pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.ocard,.ocard.gone,.obtn,.ostamp{transition:none}.ontdek-vera.pop{animation:none}}
@media (max-width:520px){.ontdek-stack{height:min(68vh,560px)}.ontdek-teaser{flex-wrap:wrap}}

/* logo */
.brand{display:inline-flex;align-items:center;gap:10px;margin-left:0!important;line-height:1}
.brand-mark{width:34px;height:34px;flex:none;transition:transform .2s ease}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.05)}
.brand-word{font-family:"Playfair Display",Georgia,serif;font-size:1.45rem;font-weight:700;letter-spacing:.01em}
.brand .brand-word{color:inherit}
header.top .brand .brand-word{color:#fff}
header.top .brand-word span{color:#F6D3C0}
header.top.partner .brand-word span{color:#fff}
@media(max-width:560px){.brand-mark{width:30px;height:30px}.brand-word{font-size:1.25rem}}
@media(prefers-reduced-motion:reduce){.brand-mark{transition:none}}

/* --- marketingwizard (landen, pakket, advertenties) + eenvoudig overzicht + advertentieconcepten (app/packages.py, app/adconcepts.py) --- */
.mw-head h1{margin-bottom:4px}
.mw-steps{display:flex;gap:8px;list-style:none;padding:0;margin:14px 0 18px;flex-wrap:wrap}
.mw-steps a{display:inline-block;padding:.35em 1em;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);background:#fff;font-weight:600;font-size:.9rem}
.mw-steps .done a{background:var(--olive);border-color:var(--olive);color:#fff}.mw-steps .cur a{border-color:var(--terra);color:var(--terra)}
.mw h2{display:flex;align-items:center;gap:10px;margin-top:0}
.mw-n{display:inline-flex;align-items:center;justify-content:center;width:1.8em;height:1.8em;border-radius:50%;background:var(--terra);color:#fff;font-size:.9rem;flex:none}
.mw-landen{display:grid;gap:8px}
@media(min-width:760px){.mw-landen{grid-template-columns:1fr 1fr}}
.mw-land{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:#fff;margin:0}
.mw-land input[type=checkbox]{width:auto;margin-top:5px}
.mw-land:has(input:checked){border-color:var(--olive);background:var(--sand-2)}
.mw-land .flag{font-size:1.6rem;line-height:1}
.mw-land-body{flex:1;font-weight:400}
.mw-add{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}.mw-add select{width:auto}
.mw-pakketten{display:grid;gap:12px;margin:14px 0}
@media(min-width:900px){.mw-pakketten{grid-template-columns:repeat(4,1fr)}}
@media(min-width:600px) and (max-width:899px){.mw-pakketten{grid-template-columns:1fr 1fr}}
.mw-pakket{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff;display:flex;flex-direction:column;gap:4px;margin:0}
.mw-pakket h3{margin:4px 0 0}.mw-pakket p{margin:2px 0;font-size:.9rem}
.mw-pakket .btn{margin-top:auto;align-self:flex-start}
.mw-pakket.aanbevolen{border-color:var(--terra);box-shadow:0 0 0 2px rgba(196,105,63,.18)}
.mw-pakket.gekozen{border-color:var(--olive);box-shadow:0 0 0 2px var(--olive) inset}
.mw-prijs{font-family:"Playfair Display",Georgia,serif;font-size:1.4rem;color:var(--terra)}
.mw-melding{background:#FFF4D6;border:1px solid #E8D28A;border-radius:8px;padding:6px 8px}
.mw-talen{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.pk-kaart{border-left:4px solid var(--olive)}.pk-kaart h2{margin:2px 0}
.pk-kpis{margin:12px 0 0}
.pk-bar{display:block;height:6px;background:var(--sand-2);border-radius:3px;margin-top:6px;overflow:hidden}.pk-bar i{display:block;height:100%;background:var(--olive)}
details.backoffice>summary{font-size:1rem}
.note-live{background:#E3F2E8;border:1px solid #9FCDB0;border-radius:10px;padding:10px 14px;margin:0 0 14px}
.ad-grid{display:grid;gap:18px}
@media(min-width:960px){.ad-grid{grid-template-columns:repeat(3,1fr)}}
.ad-variant{display:flex;flex-direction:column;gap:10px}
.ad-phone{background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:0 2px 10px rgba(0,0,0,.05);max-width:340px;width:100%}
.ad-ph-head{display:flex;gap:8px;align-items:center;font-size:.85rem;line-height:1.2}
.ad-avatar{width:32px;height:32px;border-radius:50%;background:var(--terra);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.ad-ph-text{font-size:.88rem;margin:8px 0;white-space:pre-line}
.ad-ph-img{width:100%;aspect-ratio:1.91/1;object-fit:cover;border-radius:6px 6px 0 0;display:block;background:var(--sand-2)}
.ad-ph-img.ph{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.ad-ph-foot{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--sand-2);padding:8px;border-radius:0 0 6px 6px;font-size:.85rem;line-height:1.25}
.ad-fields label{display:block;font-size:.85rem;margin:0 0 6px}
.ad-line{display:flex;gap:6px;align-items:center;font-size:.85rem;margin:0 0 6px}
.ad-line .n{width:1.6em;color:var(--muted);text-align:right;flex:none}.ad-line input,.ad-line textarea{flex:1}
.cc{font-size:.75rem;color:var(--muted);margin-left:6px;white-space:nowrap}.cc.over{color:#b3261e;font-weight:700}
.ad-serp{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;max-width:640px;margin:0 0 14px;font-family:Arial,Helvetica,sans-serif}
.ad-serp-url{font-size:.8rem;color:#202124}.ad-serp-title{color:#1a0dab;font-size:1.15rem;margin:2px 0}.ad-serp p{margin:2px 0;font-size:.88rem;color:#4d5156}
.chips-edit{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip.kw{display:inline-flex;align-items:center;gap:4px;cursor:text}.chip.kw:hover{background:var(--sand-2);color:var(--ink)}
.chip.kw button{border:0;background:none;color:var(--terra);cursor:pointer;font-size:1rem;line-height:1;padding:0 2px}
.chip-add{border:1px dashed var(--line);border-radius:999px;padding:.2em .8em;font-size:.85rem;width:auto!important;min-width:150px}
.js-hidden{display:none}
.ad-actions{position:sticky;bottom:0;background:var(--sand);padding:10px 0;z-index:2;border-top:1px solid var(--line)}