@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');
:root{
  --bg:#f2f2f7;--bg2:#e5e5ea;--surface:#ffffff;
  --accent:#ff9500;--accent-bg:rgba(255,149,0,0.12);--accent-glow:rgba(255,149,0,0.24);
  --text:#1c1c1e;--text2:rgba(60,60,67,0.6);--text3:rgba(60,60,67,0.4);
  --border:rgba(60,60,67,0.18);--border2:rgba(60,60,67,0.1);
  --red:#ff3b30;--red-bg:rgba(255,59,48,0.1);
  --green:#34c759;--green-bg:rgba(52,199,89,0.1);
  --gold:#f59e0b;--gold-bg:rgba(245,158,11,0.1);
  --shadow:0 0.5px 0 rgba(0,0,0,0.1),0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:0 2px 12px rgba(0,0,0,0.08);
  --r:14px;--r-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{background:var(--bg2);color:var(--text);font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;}
#root{max-width:430px;margin:0 auto;background:var(--bg);min-height:100vh;display:flex;flex-direction:column;}
input,select,button,textarea{font-family:inherit;}
::-webkit-scrollbar{display:none;}
/* ── Tablet: phone-in-frame ── */
@media(min-width:500px) and (max-width:767px){
  body{display:flex;align-items:flex-start;justify-content:center;padding:24px 0;}
  #root{margin:0;height:calc(100vh - 48px);min-height:600px;border-radius:44px;box-shadow:0 32px 80px rgba(0,0,0,0.22),0 0 0 1px rgba(0,0,0,0.08),inset 0 0 0 1px rgba(255,255,255,0.15);overflow:hidden;}
}
/* ── Desktop: side nav layout ── */
@media(min-width:768px){
  body{background:var(--bg);padding:0;display:block;min-height:100vh;}
  #root{max-width:100%;width:100%;height:100vh;border-radius:0;box-shadow:none;margin:0;overflow:hidden;flex-direction:row;}
  .bnav{display:none!important;}
  .header{display:none!important;}
  #sidenav{display:flex!important;}
  .main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
  .body{overflow-y:auto;flex:1;}
  #tabBody{padding-bottom:24px!important;}
}
/* Splash */
.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;background:var(--bg);}
.name-input{width:100%;max-width:280px;padding:13px 16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text);font-size:16px;margin-bottom:12px;text-align:center;outline:none;box-shadow:var(--shadow);}
.name-input:focus{border-color:var(--accent);}
.name-btn{padding:13px 36px;background:var(--accent);border:none;border-radius:var(--r);color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px var(--accent-glow);}
/* Header */
.header{padding:12px 16px 10px;display:flex;justify-content:space-between;align-items:center;background:rgba(242,242,247,0.88);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);position:sticky;top:0;z-index:50;border-bottom:0.5px solid var(--border);}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--green);transition:box-shadow 0.3s;flex-shrink:0;}
.pulse{box-shadow:0 0 10px var(--green);}
.badge{background:var(--gold-bg);border:1px solid var(--gold);color:#92400e;font-size:11px;padding:3px 10px;border-radius:20px;cursor:pointer;font-weight:600;}
.lang-btn{padding:4px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);font-size:12px;font-weight:600;cursor:pointer;color:var(--accent);}
/* Strip / progress */
.strip{display:flex;align-items:center;background:var(--surface);padding:13px 16px;gap:8px;border-bottom:0.5px solid var(--border);}
.track{height:6px;background:var(--bg2);border-radius:99px;position:relative;overflow:hidden;margin-bottom:4px;}
.track-inner{position:absolute;top:0;left:0;height:100%;border-radius:99px;background:var(--accent);transition:width 0.5s;}
/* Tab bars */
.tab-bar{display:flex;background:rgba(242,242,247,0.88);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:0.5px solid var(--border);overflow-x:auto;}
.tab-btn{flex:1;padding:10px 3px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text3);cursor:pointer;font-size:10px;font-weight:600;white-space:nowrap;transition:color 0.15s,border-color 0.15s;}
.tab-btn.on{color:var(--accent);border-bottom-color:var(--accent);}
.main-tab-bar{display:flex;background:var(--surface);border-bottom:0.5px solid var(--border);overflow-x:auto;}
.main-tab-btn{flex:1;padding:11px 4px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text3);cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap;transition:color 0.15s,border-color 0.15s;}
.main-tab-btn.on{color:var(--accent);border-bottom-color:var(--accent);}
/* Content */
.body{padding:14px;}
.card{background:var(--surface);border-radius:var(--r);padding:16px;margin-bottom:12px;border:none;box-shadow:var(--shadow);}
/* Forms */
.inp{width:100%;padding:11px 13px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:14px;margin-bottom:10px;outline:none;}
.inp:focus{border-color:var(--accent);background:var(--surface);}
select.inp option{background:var(--surface);}
.lbl{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px;display:block;font-weight:600;}
/* Buttons */
.btn-p{padding:11px 22px;background:var(--accent);border:none;border-radius:var(--r-sm);color:#fff;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 10px var(--accent-glow);}
.btn-g{padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text2);font-size:13px;cursor:pointer;}
.btn-r{padding:10px 14px;background:var(--red-bg);border:1px solid rgba(255,59,48,0.2);border-radius:var(--r-sm);color:var(--red);font-size:13px;cursor:pointer;}
.add-btn{width:100%;padding:12px;background:var(--bg);border:1.5px dashed var(--border);border-radius:var(--r);color:var(--accent);cursor:pointer;font-size:14px;font-weight:600;margin-bottom:12px;}
/* Chips */
.chip{white-space:nowrap;padding:6px 13px;background:var(--bg);border:1px solid var(--border);border-radius:20px;color:var(--text2);cursor:pointer;font-size:12px;font-weight:500;}
.chip.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent);}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:8px;}
/* Rows */
.irow{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:0.5px solid var(--border2);}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:0.5px solid var(--border2);font-size:13px;}
.info-row:last-child{border-bottom:none;}
/* Tags & badges */
.tag{font-size:11px;padding:3px 9px;border-radius:20px;white-space:nowrap;font-weight:600;}
.vbtn{padding:6px 11px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text2);cursor:pointer;font-size:12px;font-weight:500;}
.mini-track{height:4px;background:var(--bg2);border-radius:99px;position:relative;overflow:hidden;margin:5px 0;}
/* Floor plan */
.fp-empty{padding:48px 20px;text-align:center;cursor:pointer;color:var(--text3);}
.fp-wrap{position:relative;width:100%;user-select:none;touch-action:none;}
.placed{position:absolute;cursor:grab;transform-origin:center;}
.ptile{width:82px;background:var(--bg);border-radius:var(--r-sm);padding:7px;border:1px solid var(--border);cursor:pointer;text-align:center;}
.cmt-text{font-size:13px;color:var(--text2);background:var(--bg);border-radius:var(--r-sm);padding:7px 11px;margin-top:4px;border:0.5px solid var(--border2);}
.muted{color:var(--text3);font-size:14px;text-align:center;padding:20px 0;}
.banner{padding:9px 16px;font-size:13px;cursor:pointer;text-align:center;font-weight:600;}
/* Countdown */
.countdown-bar{background:var(--accent);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;color:#fff;}
.countdown-num{font-size:42px;font-weight:700;line-height:1;}
/* Checklist */
.check-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:0.5px solid var(--border2);cursor:pointer;}
.check-box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.18s;}
.check-box.done{background:var(--green);border-color:var(--green);color:#fff;}
.check-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);margin:14px 0 6px;padding:0 2px;}
.week-task{display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg);border-radius:var(--r-sm);margin-bottom:8px;border:0.5px solid var(--border);}
/* AI FAB */
.ai-fab{position:fixed;bottom:24px;right:20px;z-index:200;background:var(--accent);border:none;border-radius:50px;padding:12px 20px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 20px var(--accent-glow);display:flex;align-items:center;gap:8px;transition:transform 0.2s;}
.ai-fab:active{transform:scale(0.96);}
.ai-fab-pulse{width:8px;height:8px;border-radius:50%;background:var(--surface);animation:aipulse 1.8s infinite;}
@keyframes aipulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(1.4);}}
/* AI Panel */
.ai-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:300;opacity:0;pointer-events:none;transition:opacity 0.25s;}
.ai-overlay.open{opacity:1;pointer-events:all;}
.ai-panel{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:430px;background:var(--surface);border-radius:24px 24px 0 0;z-index:301;transition:transform 0.4s cubic-bezier(.32,1.2,.5,1);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(0,0,0,0.15);}
.ai-panel.open{transform:translateX(-50%) translateY(0);}
.ai-panel-handle{width:36px;height:4px;background:var(--bg2);border-radius:99px;margin:12px auto 0;flex-shrink:0;}
.ai-panel-header{padding:14px 18px 12px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.ai-panel-body{flex:1;overflow-y:auto;padding:16px 18px 8px;}
.ai-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text3);padding:4px;line-height:1;}
.ai-msg{margin-bottom:14px;}
.ai-msg-user{background:var(--accent-bg);border:1px solid rgba(255,149,0,0.2);border-radius:var(--r) 14px 4px 14px;padding:10px 13px;font-size:13px;color:var(--text);margin-left:28px;line-height:1.5;}
.ai-msg-ai{background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--r) 14px 14px 4px;padding:12px 14px;font-size:13px;color:var(--text);margin-right:28px;line-height:1.6;}
.ai-msg-ai strong{color:var(--accent);}
.ai-msg-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);margin-bottom:5px;padding:0 2px;}
.ai-input-row{display:flex;gap:8px;padding:10px 16px 20px;border-top:0.5px solid var(--border);background:var(--surface);flex-shrink:0;}
.ai-input{flex:1;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);font-size:13px;outline:none;color:var(--text);}
.ai-input:focus{border-color:var(--accent);background:var(--surface);}
.ai-send{padding:10px 16px;background:var(--accent);border:none;border-radius:var(--r-sm);color:#fff;font-size:16px;cursor:pointer;flex-shrink:0;}
.ai-thinking{display:flex;gap:5px;align-items:center;padding:4px 2px;}
.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--bg2);animation:aidot 1.2s infinite;}
.ai-dot:nth-child(2){animation-delay:.2s;}.ai-dot:nth-child(3){animation-delay:.4s;}
@keyframes aidot{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-6px);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.ai-suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}
.ai-sug{padding:7px 13px;background:var(--accent-bg);border:1px solid rgba(255,149,0,0.25);border-radius:20px;font-size:12px;color:var(--accent);cursor:pointer;font-weight:600;}
.ai-sug:active{background:rgba(255,149,0,0.2);}
.ai-welcome{text-align:center;padding:20px 10px 16px;}
/* Bottom nav sub-row */
.bnav-sub-row{display:flex;gap:6px;overflow-x:auto;padding:6px 12px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none;width:100%;}
.bnav-sub-row::-webkit-scrollbar{display:none;}
.bnav-sub-btn{white-space:nowrap;padding:4px 12px;background:var(--bg2);border:none;border-radius:20px;color:var(--text2);cursor:pointer;font-size:11px;font-weight:600;transition:all 0.15s;flex-shrink:0;}
.bnav-sub-btn.on{background:var(--accent-bg);color:var(--accent);}
/* Side nav tree */
.snav-section{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;border:none;cursor:pointer;text-align:left;background:transparent;width:100%;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;transition:all 0.15s;margin-top:10px;color:var(--text3);}
.snav-section:first-of-type{margin-top:0;}
.snav-section.active{color:var(--text2);}
.snav-item{display:flex;align-items:center;padding:7px 10px 7px 30px;border-radius:8px;border:none;cursor:pointer;text-align:left;width:100%;font-size:12px;font-weight:500;transition:all 0.15s;background:transparent;color:var(--text2);}
.snav-item.active{background:var(--accent-bg);color:var(--accent);font-weight:600;}
/* Bottom nav */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:rgba(242,242,247,0.88);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:0.5px solid rgba(60,60,67,0.2);display:flex;flex-direction:column;z-index:100;}
.bnav-main-row{display:flex;align-items:flex-start;padding-top:8px;height:80px;}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;background:none;border:none;cursor:pointer;padding:4px 0;position:relative;transition:transform 0.12s cubic-bezier(0.34,1.56,0.64,1);}
.bnav-btn:active{transform:scale(0.86);}
.bnav-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:3px;border-radius:99px;background:var(--accent);}
.bnav-label{font-size:10px;font-weight:600;letter-spacing:-0.01em;transition:color 0.12s;}
/* iOS-style inputs (borderless fill) */
.inp{width:100%;padding:11px 13px;background:rgba(120,120,128,0.12);border:none;border-radius:var(--r-sm);color:var(--text);font-size:15px;margin-bottom:10px;outline:none;}
.inp:focus{background:rgba(120,120,128,0.18);}
select.inp option{background:var(--surface);}
.name-input{width:100%;max-width:280px;padding:13px 16px;background:rgba(120,120,128,0.12);border:none;border-radius:var(--r);color:var(--text);font-size:16px;margin-bottom:12px;text-align:center;outline:none;}
.name-input:focus{background:rgba(120,120,128,0.18);}
/* Kanban */
.kanban{display:flex;gap:10px;overflow-x:auto;}
.kanban-col{flex:1;min-width:160px;}
.kanban-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:8px;border-radius:var(--r-sm) var(--r-sm) 0 0;}
.kanban-item{background:var(--surface);border-radius:var(--r-sm);padding:10px;margin-bottom:8px;box-shadow:var(--shadow);}
/* Sparkline */
.spark-line{stroke:var(--accent);fill:none;stroke-width:2;}
.spark-area{fill:rgba(255,149,0,0.08);stroke:none;}
/* Contract card */
.contract-card{background:var(--surface);border-radius:var(--r);padding:14px;margin-bottom:10px;box-shadow:var(--shadow);}
.contract-warning{background:var(--gold-bg);outline:1px solid var(--gold);}
/* Status badges */
.status-active{background:rgba(52,199,89,0.1);color:#16a34a;border:1px solid rgba(52,199,89,0.3);border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600;}
.status-pending{background:var(--gold-bg);color:#92400e;border:1px solid rgba(245,158,11,0.3);border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600;}
.status-done{background:rgba(52,199,89,0.1);color:#15803d;border:1px solid rgba(52,199,89,0.3);border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600;}
.status-overdue{background:var(--red-bg);color:var(--red);border:1px solid rgba(255,59,48,0.25);border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600;}

/* ════════════════════════════════════════════════════════════════════════════
   WONING-DASHBOARD — warm, premium, hiërarchisch. Scoped onder .wn zodat de
   rest van de app ongemoeid blijft.
   ════════════════════════════════════════════════════════════════════════════ */
.wn{
  --w-acc:#c2613f;            /* terracotta */
  --w-acc-d:#a8492b;
  --w-acc-soft:rgba(194,97,63,0.10);
  --w-ink:#211a13;            /* warme inkt */
  --w-ink2:#6f6155;
  --w-ink3:#a89a8b;
  --w-surface:#fffdf9;        /* warm wit */
  --w-cream:#f6efe4;
  --w-line:rgba(33,26,19,0.08);
  --w-line2:rgba(33,26,19,0.06);
  --w-gold:#b07c2e;
  --w-red:#c0392b; --w-red-soft:rgba(192,57,43,0.10);
  --w-amber:#c98a1a; --w-amber-soft:rgba(201,138,26,0.12);
  --w-green:#3f7d4e;
  --w-shadow:0 1px 2px rgba(80,52,24,0.05), 0 10px 30px -16px rgba(80,52,24,0.22);
  --w-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --w-r:18px; --w-r-sm:13px;
  max-width:680px; margin:0 auto; padding:16px 14px 28px;
  display:flex; flex-direction:column; gap:14px;
}
@media(min-width:768px){ .wn{ padding:28px 24px 40px; gap:16px; } }

/* gestaffelde entree */
.wn>*{ animation:wnUp .55s cubic-bezier(.16,1,.3,1) both; }
.wn>*:nth-child(2){animation-delay:.05s}
.wn>*:nth-child(3){animation-delay:.10s}
.wn>*:nth-child(4){animation-delay:.15s}
.wn>*:nth-child(5){animation-delay:.20s}
@keyframes wnUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── Hero countdown ── */
.wn-hero{
  position:relative; overflow:hidden; border-radius:var(--w-r);
  padding:26px 24px; color:#fff7ee; text-align:left;
  background:linear-gradient(135deg,#c2613f 0%,#a8492b 55%,#8f3a20 100%);
  box-shadow:0 14px 36px -14px rgba(168,73,43,0.6);
}
.wn-hero-glow{ position:absolute; top:-60%; right:-20%; width:70%; height:200%;
  background:radial-gradient(circle,rgba(255,225,190,0.35),transparent 60%); pointer-events:none; }
.wn-hero-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.82; }
.wn-hero-row{ display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.wn-hero-num{ font-family:var(--w-serif); font-weight:500; font-size:clamp(54px,16vw,84px); line-height:.92; letter-spacing:-.02em; }
.wn-hero-unit{ font-family:var(--w-serif); font-size:22px; font-weight:500; opacity:.9; }
.wn-hero-title{ font-family:var(--w-serif); font-size:34px; font-weight:500; line-height:1; margin-top:6px; }
.wn-hero-sub{ font-size:13px; opacity:.9; margin-top:10px; font-weight:500; }
.wn-hero-icon{ font-size:30px; margin-bottom:8px; }
.wn-hero--done{ background:linear-gradient(135deg,#3f7d4e,#2e6b43 60%,#235437); box-shadow:0 14px 36px -14px rgba(46,107,67,0.55); }
.wn-hero--empty{ background:linear-gradient(135deg,#caa46a,#b07c2e); display:block; width:100%; border:none; cursor:pointer; box-shadow:0 14px 36px -16px rgba(176,124,46,0.5); transition:transform .18s ease; }
.wn-hero--empty:active{ transform:scale(.99); }
.wn-hero-empty-title{ font-family:var(--w-serif); font-size:24px; font-weight:500; margin-top:2px; }

/* ── Bento kerncijfers ── */
.wn-bento{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wn-tile{
  background:var(--w-surface); border:1px solid var(--w-line2); border-radius:var(--w-r);
  padding:16px 16px 14px; box-shadow:var(--w-shadow);
  display:flex; flex-direction:column; gap:6px; min-height:108px; transition:transform .18s ease, box-shadow .18s ease;
}
.wn-tile-label{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--w-ink3); }
.wn-tile-num{ font-family:var(--w-serif); font-size:30px; font-weight:500; color:var(--w-ink); line-height:1; letter-spacing:-.01em; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; }
.wn-tile--accent .wn-tile-num{ color:var(--w-acc); }
.wn-tile-flag{ font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:.02em; color:var(--w-red); background:var(--w-red-soft); padding:2px 8px; border-radius:20px; }
.wn-tile-foot{ font-size:11px; color:var(--w-ink3); font-weight:500; }
.wn-tile-zero{ font-size:12px; color:var(--w-green); font-weight:600; }
.wn-dots{ display:flex; gap:5px; align-items:center; min-height:9px; }
.wn-dot{ width:9px; height:9px; border-radius:50%; background:var(--w-ink3); flex-shrink:0; }
.wn-dot--red{ background:var(--w-red); }
.wn-dot--amber{ background:var(--w-amber); }
.wn-dot--muted{ background:var(--w-ink3); }

/* ── Kaarten ── */
.wn-card{ background:var(--w-surface); border:1px solid var(--w-line2); border-radius:var(--w-r); padding:18px 18px 16px; box-shadow:var(--w-shadow); transition:transform .18s ease, box-shadow .18s ease; }
.wn-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.wn-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--w-acc); }
.wn-card-title{ font-family:var(--w-serif); font-size:21px; font-weight:500; color:var(--w-ink); line-height:1.1; margin-top:3px; letter-spacing:-.01em; }
.wn-count{ font-family:var(--w-serif); font-size:22px; font-weight:500; color:var(--w-ink); background:var(--w-cream); width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wn-edit-btn{ font-family:inherit; font-size:12px; font-weight:600; color:var(--w-ink2); background:var(--w-cream); border:1px solid var(--w-line); border-radius:20px; padding:6px 14px; cursor:pointer; transition:all .15s ease; flex-shrink:0; }
.wn-edit-btn:hover{ color:var(--w-acc); border-color:var(--w-acc); background:var(--w-acc-soft); }
.wn-edit-btn.on{ color:var(--w-acc); border-color:var(--w-acc); background:var(--w-acc-soft); }

/* hover-lift alleen op apparaten met echte hover */
@media(hover:hover){
  .wn-card:hover,.wn-tile:hover{ transform:translateY(-2px); box-shadow:0 3px 6px rgba(80,52,24,0.06),0 18px 40px -18px rgba(80,52,24,0.30); }
}

/* ── Adres ── */
.wn-address{ font-family:var(--w-serif); font-size:clamp(22px,6vw,28px); font-weight:500; color:var(--w-ink); line-height:1.12; letter-spacing:-.015em; }
.wn-meta{ font-size:13px; color:var(--w-ink2); font-weight:500; margin-top:5px; }

/* ── Info-rijen ── */
.wn-rows{ margin-top:14px; border-top:1px solid var(--w-line2); }
.wn-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--w-line2); font-size:14px; }
.wn-row:last-child{ border-bottom:none; }
.wn-row-k{ color:var(--w-ink2); font-weight:500; }
.wn-row-v{ color:var(--w-ink); font-weight:600; }

/* ── Hypotheek hero-getal ── */
.wn-stat{ display:flex; align-items:baseline; gap:9px; padding:2px 0 2px; }
.wn-stat-num{ font-family:var(--w-serif); font-size:36px; font-weight:500; color:var(--w-acc); line-height:1; letter-spacing:-.02em; }
.wn-stat-unit{ font-size:13px; color:var(--w-ink2); font-weight:500; }

/* ── Onderhoud-taken ── */
.wn-tasks{ display:flex; flex-direction:column; }
.wn-task{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--w-line2); }
.wn-task:last-child{ border-bottom:none; }
.wn-task-name{ flex:1; font-size:14px; font-weight:600; color:var(--w-ink); display:flex; flex-direction:column; gap:1px; min-width:0; }
.wn-task-room{ font-size:11px; font-weight:500; color:var(--w-ink3); }
.wn-pill{ font-size:10px; font-weight:700; letter-spacing:.02em; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.wn-pill--red{ color:var(--w-red); background:var(--w-red-soft); }
.wn-pill--amber{ color:var(--w-amber); background:var(--w-amber-soft); }
.wn-pill--muted{ color:var(--w-ink2); background:var(--w-cream); }
.wn-more{ font-size:12px; font-weight:600; color:var(--w-acc); margin-top:12px; }
.wn-empty{ font-size:13px; color:var(--w-ink3); text-align:center; padding:14px 8px; font-weight:500; }

/* ── Edit-formulier binnen .wn ── */
.wn .inp{ background:var(--w-cream); color:var(--w-ink); }
.wn .inp:focus{ background:#fff; box-shadow:0 0 0 2px var(--w-acc-soft); }
.wn .lbl{ color:var(--w-ink2); }
.wn .btn-p{ background:var(--w-acc); box-shadow:0 4px 14px -4px rgba(168,73,43,0.5); margin-top:4px; }
.wn .btn-p:hover{ background:var(--w-acc-d); }
.wn-check{ display:flex; align-items:center; gap:11px; margin-bottom:12px; padding:11px 13px; background:var(--w-cream); border-radius:var(--w-r-sm); cursor:pointer; font-size:13px; font-weight:600; color:var(--w-ink); }
.wn-checkbox{ width:21px; height:21px; border-radius:6px; border:2px solid var(--w-line); background:transparent; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; flex-shrink:0; transition:all .15s ease; }
.wn-checkbox.on{ background:var(--w-acc); border-color:var(--w-acc); }

@media(prefers-reduced-motion:reduce){ .wn>*{ animation:none; } .wn-card,.wn-tile{ transition:none; } }