[v-cloak] { display: none !important; }
    :root { --primary:#0ea5e9; --primary-hover:#0284c7; --primary-dim:rgba(14,165,233,0.15); --bg-darker:#020617; --bg:#0f172a; --card-bg:#1e293b; --text:#f8fafc; --text-muted:#94a3b8; --border:#334155; --success:#10b981; --warning:#f59e0b; --danger:#ef4444; --ha-blue:#03a9f4; --hacs-orange:#ff9800; --gemini-purple:#a855f7; --cat-1:#10b981; --cat-2:#f59e0b; --cat-3:#a855f7; --cat-4:#ef4444; }
    body { font-family:'Inter', sans-serif; background:var(--bg-darker); margin:0; padding:0; color:var(--text); overflow-x:hidden; scroll-behavior:smooth; }
    @media (prefers-reduced-motion:reduce) { *,::before,::after { animation-play-state:paused!important; transition-duration:0s!important; scroll-behavior:auto!important; } }
    
    .bg-blobs { position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
    .blob { position:absolute; filter:blur(100px); opacity:0.15; border-radius:50%; animation:float 12s ease-in-out infinite alternate; }
    .blob-1 { top:-10%; left:-10%; width:50vw; height:50vw; background:var(--primary); }
    .blob-2 { bottom:-10%; right:-10%; width:40vw; height:40vw; background:#a855f7; animation-delay:-6s; }
    @keyframes float { 0% { transform:translate(0,0) scale(1); } 100% { transform:translate(5%,10%) scale(1.05); } }
    
    code { display:inline-block; background:#0f172a; padding:4px 8px; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--primary); border:1px dashed var(--border); }
    pre code { display:block; padding:15px; overflow-x:auto; white-space:pre; border:none; color:#a5b4fc; line-height:1.5; margin:0; }
    
    .btn-primary { background:linear-gradient(135deg,#0ea5e9,#0284c7); color:#020617; border:none; padding:14px 24px; border-radius:10px; font-weight:bold; cursor:pointer; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; box-shadow:0 4px 15px rgba(14,165,233,0.3); }
    .btn-primary:active, .btn-primary:hover { background:linear-gradient(135deg,#38bdf8,#0ea5e9); transform:translateY(-2px); box-shadow:0 8px 25px rgba(14,165,233,0.5); }
    .btn-secondary { background:var(--card-bg); color:var(--text); border:1px solid var(--border); box-shadow:none; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:10px; font-weight:600; transition:0.2s; cursor:pointer; }
    .btn-secondary:hover { background:#334155; color:white; border-color:var(--text-muted); }
    .copy-btn { background:var(--border); color:var(--text); border:none; padding:6px 12px; border-radius:6px; font-size:12px; font-weight:bold; cursor:pointer; transition:0.2s; }
    .copy-btn:hover:not(:disabled) { background:var(--primary); color:#020617; }
    
    @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    .animate-in { animation:fadeIn 0.3s ease-out forwards; }
    
    .home-view { width:100%; min-height:100vh; overflow-y:auto; position:relative; }
    header { background:rgba(15,23,42,0.85); backdrop-filter:blur(12px); position:fixed; width:100%; top:0; z-index:100; border-bottom:1px solid rgba(255,255,255,0.05); }
    .nav-container { max-width:1200px; margin:0 auto; padding:15px 20px; display:flex; justify-content:space-between; align-items:center; }
    .logo { font-size:20px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:10px; cursor:pointer; }
    .logo span { color:var(--primary); }
    .mobile-menu-btn { display:none; background:none; border:none; color:var(--text); font-size:24px; cursor:pointer; }
    .nav-links { display:flex; gap:15px; align-items:center; }
    .nav-links a { color:var(--text-muted); text-decoration:none; font-size:13px; font-weight:500; transition:0.2s; cursor:pointer; }
    .nav-links a:hover:not(.nav-btn-setup) { color:var(--text); }
    .nav-btn-setup { background:rgba(14,165,233,0.1); color:var(--primary)!important; border:1px solid rgba(14,165,233,0.2); padding:8px 16px; border-radius:8px; font-weight:600!important; cursor:pointer; transition:0.2s; text-decoration:none; display:flex; align-items:center; gap:6px; }
    .nav-btn-setup:hover { background:var(--primary); color:#020617!important; }
    .lang-switcher { background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text); padding:6px 12px; border-radius:8px; font-size:14px; cursor:pointer; outline:none; transition:0.2s;}
    .lang-switcher:hover { border-color:var(--text-muted); }
    .lang-switcher option { background:var(--bg-darker); color:var(--text); }
    .portal-lang-switcher { min-width:88px; padding:7px 10px; font-size:12px; }
    .setup-top-row { display:flex; align-items:center; gap:8px; margin-bottom:15px; }
    .setup-top-row .btn-secondary { flex:1; width:auto !important; margin-bottom:0 !important; }
    .setup-nav-lang { width:82px; min-width:82px; padding:5px 7px; font-size:11px; }

    /* Compacte, zelfstandige header voor Dashboard Studio */
    .dashboard-studio-view { min-height:100vh; }
    .dashboard-studio-view .studio-header {
      position:sticky;
      top:0;
      width:100%;
      z-index:100;
      background:rgba(15,23,42,.96);
      border-bottom:1px solid var(--border);
      backdrop-filter:blur(12px);
      box-shadow:0 5px 18px rgba(0,0,0,.16);
    }
    .studio-header-inner {
      width:100%;
      max-width:1400px;
      min-height:62px;
      margin:0 auto;
      padding:9px 20px;
      box-sizing:border-box;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }
    .studio-title { display:flex; align-items:center; gap:11px; min-width:0; }
    .studio-title > span { flex:0 0 auto; }
    .studio-title strong { line-height:1.2; }
    .studio-title div > span { display:block; margin-top:3px; white-space:nowrap; }
    .studio-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; }
    .studio-header-actions .btn-secondary { min-height:38px; white-space:nowrap; }
    .studio-demo-link { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:7px 13px; box-sizing:border-box; border:1px solid rgba(56,189,248,.42); border-radius:10px; background:linear-gradient(135deg,rgba(14,165,233,.96),rgba(124,58,237,.92)); color:#fff; text-decoration:none; font:inherit; font-size:12px; font-weight:850; line-height:1.15; white-space:nowrap; box-shadow:0 8px 22px rgba(14,165,233,.18); cursor:pointer; transition:.2s; }
    .studio-demo-link small { padding-left:7px; border-left:1px solid rgba(255,255,255,.28); color:#e0f2fe; font-size:9px; font-weight:700; }
    .studio-demo-link:hover,.studio-demo-link:focus-visible { color:#fff; border-color:rgba(125,211,252,.8); background:linear-gradient(135deg,#38bdf8,#8b5cf6); box-shadow:0 11px 28px rgba(124,58,237,.26); outline:none; transform:translateY(-1px); }
    .studio-content-container { width:100%; box-sizing:border-box; padding:28px 20px 70px; }

    @media(max-width:760px) {
      .studio-header-inner { min-height:0; padding:9px 12px; gap:10px; flex-wrap:wrap; }
      .studio-title { width:100%; }
      .studio-title div > span { white-space:normal; }
      .studio-header-actions { width:100%; justify-content:stretch; flex-wrap:wrap; }
      .studio-header-actions .btn-secondary { flex:1; padding:8px 10px!important; font-size:11px!important; }
      .studio-demo-link { order:-1; width:100%; min-height:42px; }
      .studio-content-container { padding:22px 14px 55px; }
    }
    
    /* 3-KOLOMS HERO LAYOUT */
    .hero { padding:140px 20px 70px; background:radial-gradient(circle at 50% 0%,rgba(14,165,233,0.1),transparent 60%); }
    .hero-container { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:30px; align-items:center; }
    .hero-col-logo { display:flex; justify-content:center; align-items:center; position:relative; }
    .hero-col-meter { display:flex; justify-content:center; align-items:center; position:relative; }
    .hero-content { display:flex; flex-direction:column; align-items:center; text-align:center; z-index:5; }
    
    .ha-prominent-badge { display:inline-flex; align-items:center; gap:12px; background:rgba(15,23,42,0.6); border:1px solid rgba(3,169,244,0.4); padding:10px 20px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.3); backdrop-filter:blur(10px); text-decoration:none; transition:0.3s; margin-bottom:20px; }
    .ha-prominent-badge:hover { transform:translateY(-3px); border-color:var(--ha-blue); box-shadow:0 15px 40px rgba(3,169,244,0.25); background:rgba(3,169,244,0.05); }
    .ha-prominent-badge svg { width:32px; height:32px; fill:var(--ha-blue); filter:drop-shadow(0 0 8px rgba(3,169,244,0.5)); }
    .ha-prominent-text { display:flex; flex-direction:column; text-align:left; }
    .ha-prominent-sub { color:var(--text-muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
    .ha-prominent-main { color:var(--text); font-size:18px; font-weight:800; letter-spacing:-0.5px; }

    .hero-badge { display:inline-block; background:rgba(14,165,233,0.1); border:1px solid rgba(14,165,233,0.3); color:var(--primary); padding:6px 16px; border-radius:20px; font-size:12px; font-weight:800; margin-bottom:20px; letter-spacing:1px; text-transform:uppercase; box-shadow:0 0 20px rgba(14,165,233,0.15); }
    .hero h1 { font-size:48px; font-weight:800; margin:0 0 20px; line-height:1.1; letter-spacing:-1px; text-align:center; }
    .hero h1 span { background:linear-gradient(to right,#0ea5e9,#a855f7,#03a9f4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-size:200% auto; animation:textShine 4s linear infinite; }
    @keyframes textShine { to { background-position:200% center; } }
    .hero p { font-size:16px; color:var(--text-muted); max-width:550px; margin:0 0 30px; line-height:1.6; text-align:center; }
    
    .hero-buttons { display:flex; gap:15px; flex-wrap:wrap; justify-content:center; width:100%; margin-bottom:20px; }
    .quick-contact-strip { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%; }
    .quick-contact-strip a, .quick-contact-strip span { background:rgba(255,255,255,0.02); border:1px solid var(--border); color:var(--text-muted); padding:8px 16px; border-radius:999px; font-size:13px; text-decoration:none; transition:0.2s; }
    .quick-contact-strip a:hover { color:var(--text); border-color:var(--primary); background:rgba(14,165,233,0.05); }
    
    .hero-image-glow { position:absolute; width:100%; height:100%; background:var(--primary); filter:blur(100px); opacity:0.2; border-radius:50%; z-index:1; }
    .hero-image-glow.purple { background:#a855f7; }
    .logo-img { width:100%; max-width:280px; height:auto; border-radius:20px; border:1px solid rgba(255,255,255,0.1); box-shadow:0 25px 50px rgba(0,0,0,0.5); z-index:2; animation:floatLogo 6s ease-in-out infinite; }
    .meter-img { width:100%; max-width:320px; height:auto; border-radius:16px; border:1px solid var(--border); box-shadow:0 25px 50px rgba(0,0,0,0.5); z-index:2; transition:0.4s cubic-bezier(0.175,0.885,0.32,1.275); transform:perspective(1000px) rotateY(-8deg) rotateX(2deg); }
    .meter-img:hover { transform:perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02); box-shadow:0 30px 60px rgba(14,165,233,0.3); }
    @keyframes floatLogo { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-15px); } }
    
    .kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:60px auto 0; max-width:1200px; }
    .kpi-card { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center; transition:0.3s; position:relative; cursor:help; }
    .kpi-card:hover { transform:translateY(-5px); border-color:var(--primary); box-shadow:0 10px 20px rgba(0,0,0,0.3); }
    .kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--primary); opacity:0.5; border-radius:12px 12px 0 0; }
    .kpi-card:nth-child(2)::before { background:var(--success); }
    .kpi-card:nth-child(3)::before { background:#a855f7; }
    .kpi-card:nth-child(4)::before { background:var(--warning); }
    .kpi-card strong { display:block; font-size:24px; color:var(--text); font-weight:800; margin-bottom:5px; }
    .kpi-card span { color:var(--text-muted); font-size:13px; display:block; line-height:1.4; }
    .kpi-tooltip { position:absolute; top:110%; left:50%; transform:translateX(-50%) translateY(-10px); background:rgba(15,23,42,0.95); backdrop-filter:blur(8px); border:1px solid var(--primary); color:var(--text); font-size:12px; padding:10px 14px; border-radius:8px; width:220px; text-align:center; opacity:0; pointer-events:none; transition:all 0.25s cubic-bezier(0.175,0.885,0.32,1.275); box-shadow:0 15px 30px rgba(0,0,0,0.6); z-index:50; line-height:1.4; }
    .kpi-tooltip::after { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border-width:6px; border-style:solid; border-color:transparent transparent var(--primary) transparent; }
    .kpi-card:hover .kpi-tooltip { opacity:1; transform:translateX(-50%) translateY(0); }
    
    .section { padding:100px 20px; max-width:1200px; margin:0 auto; }
    .section-title { text-align:center; font-size:32px; font-weight:800; margin-bottom:15px; }
    .section-subtitle { text-align:center; color:var(--text-muted); margin-bottom:60px; font-size:16px; }
    
    .features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; }
    .feature-card { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:16px; padding:40px 30px; text-align:left; transition:0.3s; display:flex; flex-direction:column; }
    .feature-card:hover { border-color:var(--primary); background:var(--card-bg); transform:translateY(-5px); }
    .feature-icon { width:50px; height:50px; background:rgba(14,165,233,0.1); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px; border:1px solid rgba(14,165,233,0.2); }
    .feature-card h3 { font-size:20px; margin:0 0 15px; }
    .feature-card p { color:var(--text-muted); line-height:1.6; font-size:15px; margin:0; flex-grow:1; }
    .feature-link-btn { background:none; border:none; color:var(--primary); font-family:'Inter',sans-serif; font-weight:700; font-size:14px; margin-top:20px; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:0.2s; align-self:flex-start; }
    .feature-link-btn:hover { color:var(--primary-hover); transform:translateX(3px); }

    /* Uitgebreide informatie achter de drie Lees meer-knoppen */
    .feature-modal-backdrop { position:fixed; inset:0; z-index:5000; background:rgba(2,6,23,.82); backdrop-filter:blur(8px); padding:28px; display:flex; align-items:center; justify-content:center; }
    .feature-modal-panel { width:min(1080px,100%); max-height:calc(100dvh - 56px); overflow:auto; background:#0b1220; border:1px solid #334155; border-radius:20px; box-shadow:0 30px 90px rgba(0,0,0,.55); color:var(--text); }
    .feature-modal-head { position:sticky; top:0; z-index:3; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 24px; background:rgba(11,18,32,.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
    .feature-modal-kicker { display:block; margin-bottom:6px; color:var(--primary); font-size:10px; font-weight:900; letter-spacing:1.25px; text-transform:uppercase; }
    .feature-modal-head h2 { margin:0; font-size:clamp(23px,3vw,34px); line-height:1.15; }
    .feature-modal-close { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:#111827; color:var(--text); font-size:20px; cursor:pointer; }
    .feature-modal-close:hover { border-color:var(--primary); color:var(--primary); }
    .feature-modal-body { padding:26px 24px 28px; }
    .feature-modal-lead { max-width:850px; margin:0 0 22px; color:#cbd5e1; font-size:16px; line-height:1.75; }
    .feature-chip-row { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
    .feature-chip-row span { padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.025); color:#cbd5e1; font-size:11px; font-weight:700; }
    .feature-knowledge-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
    .feature-knowledge-card { padding:18px; border:1px solid var(--border); border-radius:14px; background:rgba(15,23,42,.72); }
    .feature-knowledge-card.wide { grid-column:1/-1; }
    .feature-knowledge-card h3 { margin:0 0 9px; font-size:16px; }
    .feature-knowledge-card p { margin:0; color:var(--text-muted); font-size:13px; line-height:1.65; }
    .feature-knowledge-card ul { margin:10px 0 0; padding-left:19px; color:var(--text-muted); font-size:13px; line-height:1.7; }
    .feature-knowledge-card li + li { margin-top:5px; }
    .feature-data-table { width:100%; border-collapse:collapse; margin-top:11px; font-size:12px; }
    .feature-data-table th,.feature-data-table td { padding:10px 9px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
    .feature-data-table th { color:#cbd5e1; font-size:10px; letter-spacing:.6px; text-transform:uppercase; }
    .feature-data-table td { color:var(--text-muted); line-height:1.5; }
    .feature-data-table td:first-child { color:var(--text); font-weight:700; white-space:nowrap; }
    .feature-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:15px 0 4px; }
    .feature-flow div { padding:12px 10px; border:1px solid var(--border); border-radius:11px; background:#080f1d; text-align:center; }
    .feature-flow b { display:block; color:var(--primary); font-size:12px; margin-bottom:4px; }
    .feature-flow span { color:var(--text-muted); font-size:10px; line-height:1.4; }
    .feature-note { margin:18px 0; padding:14px 16px; border-left:3px solid var(--warning); border-radius:0 10px 10px 0; background:rgba(245,158,11,.07); color:#fde68a; font-size:12px; line-height:1.6; }
    .feature-note.info { border-left-color:var(--primary); background:rgba(14,165,233,.07); color:#bae6fd; }
    .feature-modal-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
    .feature-modal-actions .btn-primary,.feature-modal-actions .btn-secondary { min-height:42px; }
    .feature-source-links { display:flex; flex-wrap:wrap; gap:12px; margin-left:auto; }
    .feature-source-links a { color:var(--text-muted); font-size:11px; text-decoration:none; }
    .feature-source-links a:hover { color:var(--primary); }
    @media(max-width:760px) {
      .feature-modal-backdrop { padding:0; align-items:stretch; }
      .feature-modal-panel { max-height:100dvh; border-radius:0; border-left:0; border-right:0; }
      .feature-modal-head { padding:17px 16px; }
      .feature-modal-body { padding:20px 16px 26px; }
      .feature-knowledge-grid,.feature-flow { grid-template-columns:1fr; }
      .feature-knowledge-card.wide { grid-column:auto; }
      .feature-data-table { display:block; overflow-x:auto; }
      .feature-modal-actions>* { width:100%; box-sizing:border-box; }
      .feature-source-links { margin-left:0; }
    }
    
    .integration-tabs { display:flex; justify-content:center; gap:15px; margin-bottom:40px; flex-wrap:wrap; }
    .tab-btn { background:var(--bg-darker); color:var(--text-muted); border:1px solid var(--border); padding:12px 24px; border-radius:30px; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:8px; }
    .tab-btn:hover { border-color:var(--primary); color:var(--text); }
    .tab-btn.active { background:rgba(14,165,233,0.1); color:var(--primary); border-color:var(--primary); box-shadow:0 0 15px rgba(14,165,233,0.2); }
    .tab-btn.active-modbus { background:rgba(245,158,11,0.1); color:var(--warning); border-color:var(--warning); box-shadow:0 0 15px rgba(245,158,11,0.2); }
    
    .hacs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:30px; margin-top:40px; }
    .hacs-card { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:30px; text-align:left; border-top:4px solid var(--primary); box-shadow:0 10px 30px rgba(0,0,0,0.3); display:flex; flex-direction:column; }
    .hacs-tag { display:inline-block; background:rgba(255,152,0,0.1); color:var(--hacs-orange); padding:4px 10px; border-radius:6px; font-size:11px; font-weight:bold; margin-bottom:15px; letter-spacing:1px; align-self:flex-start; }
    .hacs-card h3 { margin:0 0 10px 0; font-size:20px; }
    .hacs-card p { color:var(--text-muted); font-size:14px; line-height:1.6; margin-bottom:25px; }
    .ha-text-link { color:var(--ha-blue); text-decoration:none; border-bottom:1px dashed rgba(3,169,244,0.4); transition:0.2s; font-weight:500; }
    .ha-text-link:hover { color:#fff; border-bottom-color:#fff; background:rgba(3,169,244,0.1); border-radius:2px; }
    .official-ha-links { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; padding:10px 12px; border:1px solid rgba(3,169,244,.22); border-radius:10px; background:rgba(3,169,244,.055); }
    .official-ha-links strong { color:var(--ha-blue); font-size:11px; letter-spacing:.45px; text-transform:uppercase; }
    .official-ha-links a { color:var(--text-muted); font-size:12px; font-weight:700; text-decoration:none; padding:5px 8px; border:1px solid var(--border); border-radius:999px; background:rgba(2,6,23,.32); transition:.2s; }
    .official-ha-links a:hover { color:#fff; border-color:var(--ha-blue); background:rgba(3,169,244,.12); }
    
    footer { background:rgba(15,23,42,0.8); border-top:1px solid var(--border); padding:40px 20px; text-align:center; margin-top:50px; }
    footer p { color:var(--text-muted); font-size:14px; }
    
    .setup-view { display:grid; grid-template-columns:clamp(390px,31vw,470px) minmax(0,1fr); height:100dvh; width:100%; position:relative; overflow:hidden; background:var(--bg); }
    .sidebar { width:auto; min-width:0; background:rgba(15,23,42,0.97); backdrop-filter:blur(10px); display:flex; flex-direction:column; height:100dvh; border-right:1px solid var(--border); box-shadow:4px 0 25px rgba(0,0,0,0.42); z-index:10; overflow-y:auto; overscroll-behavior:contain; }
    .sidebar::-webkit-scrollbar { width:6px; }
    .sidebar::-webkit-scrollbar-thumb { background:#475569; border-radius:10px; }
    .card { background:var(--card-bg); border-radius:12px; padding:20px; margin-bottom:20px; box-shadow:0 4px 12px rgba(0,0,0,0.2); border:1px solid var(--border); }
    .card h2 { font-size:16px; margin:0 0 16px 0; display:flex; align-items:center; gap:8px; color:var(--primary); }
    .setup-hero { padding:18px 20px 16px; text-align:center; border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(2,6,23,.42),transparent); }
    .setup-top-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; }
    .brand-logo-container { display:flex; flex-direction:column; align-items:center; margin:4px 0 4px; }
    .setup-sidebar-brand-logo { width:82px; height:auto; border-radius:15px; opacity:.94; filter:saturate(.88) drop-shadow(0 10px 24px rgba(14,165,233,.16)); }
    .brand-tagline { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--primary); margin-top:6px; border-top:2px solid var(--border); padding-top:4px; }
    .nav-bar { background:var(--bg-darker); padding:16px 20px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.3); border-bottom:1px solid var(--border); }
    .back-btn { font-size:20px; cursor:pointer; padding-right:10px; color:var(--primary); transition:0.2s; }
    .nav-title { font-size:17px; font-weight:700; flex-grow:1; text-align:center; min-width:0; }
    .progress-container { padding:20px 15px 15px; display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
    .step { font-size:10px; font-weight:600; color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2; padding:0 4px; flex:1; }
    .step.active { color:var(--primary); }
    .step-dot { width:20px; height:20px; border-radius:50%; background:var(--card-bg); display:flex; justify-content:center; align-items:center; font-size:9px; color:var(--text-muted); border:2px solid rgba(15,23,42,0.95); box-shadow:0 0 0 1px var(--border); transition:0.3s; }
    .step.active .step-dot { background:var(--primary); color:#020617; box-shadow:0 0 10px var(--primary),0 0 0 2px var(--primary); }
    .progress-line-container { position:absolute; left:30px; right:30px; top:10px; height:2px; background:var(--border); z-index:1; }
    .progress-wrapper { position:relative; width:100%; display:flex; justify-content:space-between; }
    .main-content-sidebar { padding:0 20px 20px; flex-grow:1; display:flex; flex-direction:column; }
    .guide-text { font-size:14px; color:var(--text-muted); line-height:1.6; margin-bottom:15px; margin-top:0; }
    .warning-box { background:rgba(14,165,233,0.05); border-left:4px solid var(--primary); padding:12px; border-radius:6px; margin-bottom:20px; border:1px solid rgba(14,165,233,0.1); }
    .warning-box.warning { border-left-color:var(--warning); background:rgba(245,158,11,0.05); border-color:rgba(245,158,11,0.1); }
    .setup-screen-action { display:flex; align-items:flex-start; gap:11px; margin:0 0 15px; padding:12px; border:1px solid rgba(56,189,248,.35); border-radius:9px; background:linear-gradient(135deg,rgba(14,165,233,.13),rgba(16,185,129,.06)); }
    .setup-screen-action-number { flex:0 0 25px; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:#020617; font-size:12px; font-weight:900; box-shadow:0 0 14px rgba(14,165,233,.35); }
    .setup-screen-action strong { display:block; color:var(--text); font-size:13px; line-height:1.35; }
    .setup-screen-action small { display:block; margin-top:3px; color:var(--text-muted); font-size:11px; line-height:1.45; }
    .hotspot-card { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:15px; }
    .setup-route-intro { margin:2px 0 12px; color:var(--text-muted); font-size:12px; line-height:1.55; }
    .setup-route-grid { display:grid; gap:10px; }
    .setup-route-card { width:100%; min-height:112px; display:grid; grid-template-columns:42px minmax(0,1fr) 22px; align-items:center; gap:12px; padding:14px; border:1px solid var(--border); border-radius:13px; background:linear-gradient(145deg,rgba(30,41,59,.94),rgba(15,23,42,.98)); color:var(--text); text-align:left; cursor:pointer; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease,background .2s ease; }
    .setup-route-card:hover,.setup-route-card:focus-visible { transform:translateY(-1px); border-color:rgba(56,189,248,.62); background:linear-gradient(145deg,rgba(14,165,233,.13),rgba(15,23,42,.98)); box-shadow:0 12px 28px rgba(2,6,23,.28),inset 0 0 26px rgba(14,165,233,.035); outline:none; }
    .setup-route-card.expert:hover,.setup-route-card.expert:focus-visible { border-color:rgba(168,85,247,.58); background:linear-gradient(145deg,rgba(168,85,247,.12),rgba(15,23,42,.98)); }
    .setup-route-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; border:1px solid rgba(56,189,248,.28); background:rgba(14,165,233,.09); font-size:20px; }
    .setup-route-card.expert .setup-route-icon { border-color:rgba(168,85,247,.28); background:rgba(168,85,247,.09); }
    .setup-route-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
    .setup-route-copy strong { display:flex; align-items:center; gap:7px; color:#f8fafc; font-size:13px; line-height:1.3; }
    .setup-route-copy small { color:var(--text-muted); font-size:11px; line-height:1.45; }
    .setup-route-badge { padding:2px 7px; border:1px solid rgba(16,185,129,.35); border-radius:999px; background:rgba(16,185,129,.1); color:#6ee7b7; font-size:8px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
    .setup-route-arrow { color:#7dd3fc; font-size:20px; font-weight:900; }
    .setup-route-card.expert .setup-route-arrow { color:#c084fc; }
    .setup-route-card.expert .setup-route-badge { border-color:rgba(168,85,247,.38); background:rgba(168,85,247,.11); color:#d8b4fe; }
    .installer-console { border-color:rgba(168,85,247,.34); background:linear-gradient(145deg,rgba(30,41,59,.98),rgba(26,17,46,.92)); box-shadow:inset 0 0 40px rgba(168,85,247,.035); }
    .installer-tool-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
    .installer-tool-head h2 { margin:0; color:#e9d5ff; }
    .installer-tool-head p { margin:5px 0 0; color:var(--text-muted); font-size:11px; line-height:1.45; }
    .installer-profile-pill,.installer-batch-pill { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; min-height:25px; padding:0 9px; border:1px solid rgba(16,185,129,.34); border-radius:999px; background:rgba(16,185,129,.09); color:#6ee7b7; font-size:9px; font-weight:900; letter-spacing:.03em; white-space:nowrap; }
    .installer-profile-pill.off { border-color:rgba(148,163,184,.28); background:rgba(148,163,184,.07); color:#94a3b8; }
    .installer-batch-pill { border-color:rgba(56,189,248,.34); background:rgba(14,165,233,.09); color:#7dd3fc; }
    .installer-field { padding:13px; border:1px solid rgba(148,163,184,.2); border-radius:11px; background:rgba(2,6,23,.42); }
    .installer-field label { display:block; margin-bottom:7px; color:#cbd5e1; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
    .installer-field-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:stretch; }
    .installer-field-row input { min-width:0; width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--border); border-radius:8px; background:#020617; color:#f8fafc; font:700 14px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; text-transform:uppercase; }
    .installer-field-row .copy-btn { width:auto; min-width:92px; }
    .installer-mini-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
    .installer-mini-stat { padding:10px; border:1px solid rgba(148,163,184,.16); border-radius:9px; background:rgba(15,23,42,.66); }
    .installer-mini-stat small { display:block; color:var(--text-muted); font-size:9px; line-height:1.3; }
    .installer-mini-stat strong { display:block; margin-top:3px; color:#f8fafc; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .installer-profile-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; padding:10px 12px; border:1px solid rgba(16,185,129,.28); border-radius:10px; background:rgba(16,185,129,.07); color:#cbd5e1; font-size:10px; line-height:1.45; }
    .installer-profile-banner strong { color:#6ee7b7; }
    .installer-finish-actions { display:grid; gap:9px; margin-top:14px; }
    .installer-finish-actions button { width:100%; }
    .installer-submit-note { padding:13px; border:1px solid rgba(56,189,248,.3); border-radius:11px; background:rgba(14,165,233,.08); color:#cbd5e1; font-size:11px; line-height:1.55; }
    .setup-flow-chip { display:inline-flex; align-items:center; gap:5px; margin-top:4px; padding:3px 8px; border:1px solid rgba(56,189,248,.25); border-radius:999px; background:rgba(14,165,233,.07); color:#7dd3fc; font-size:9px; font-weight:800; letter-spacing:.04em; }
    .setup-flow-chip.expert { border-color:rgba(168,85,247,.28); background:rgba(168,85,247,.08); color:#c084fc; }
    .hotspot-row { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.02); padding:8px 12px; border-radius:6px; border:1px solid var(--border); margin-top:8px; }
    .smart-copy-row { display:flex; gap:10px; align-items:flex-end; margin-bottom:12px; }
    .smart-copy-row:last-child { margin-bottom:0; }
    .smart-copy-input-group { display:flex; flex-direction:column; gap:4px; flex-grow:1; }
    .smart-copy-input-group label { font-size:10px; color:var(--text-muted); font-weight:700; text-transform:uppercase; }
    .smart-copy-input-group input { padding:10px; border-radius:6px; border:1px solid var(--border); background:var(--bg-darker); color:var(--text); font-size:13px; outline:none; transition:0.2s; width:100%; box-sizing:border-box; }
    .smart-copy-input-group input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(14,165,233,0.2); }
    .smart-copy-row .copy-btn { height:38px; padding:0 15px; background:rgba(14,165,233,0.15); color:var(--primary); border:1px solid rgba(14,165,233,0.3); white-space:nowrap; transition:0.2s; }
    .smart-copy-row .copy-btn:hover:not(:disabled) { background:var(--primary); color:#020617; box-shadow:0 0 10px rgba(14,165,233,0.4); }
    .smart-copy-row .copy-btn:disabled { opacity:0.4; cursor:not-allowed; background:var(--bg-darker); color:var(--text-muted); border-color:var(--border); box-shadow:none; }
    .setup-save-card { margin-top:15px; padding:14px; border:1px solid var(--border); border-radius:10px; background:rgba(2,6,23,0.34); transition:border-color .2s ease,background .2s ease,box-shadow .2s ease; }
    .setup-save-card.active { border-color:rgba(16,185,129,0.42); background:rgba(16,185,129,0.06); box-shadow:inset 0 0 24px rgba(16,185,129,0.03); }
    .setup-save-card label { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
    .setup-save-card input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
    .setup-save-switch { position:relative; flex:0 0 44px; width:44px; height:24px; margin-top:1px; border:1px solid var(--border); border-radius:999px; background:#0f172a; transition:.2s ease; }
    .setup-save-switch::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#94a3b8; transition:.2s ease; }
    .setup-save-card input:checked + .setup-save-switch { border-color:var(--success); background:rgba(16,185,129,0.22); }
    .setup-save-card input:checked + .setup-save-switch::after { left:23px; background:var(--success); box-shadow:0 0 10px rgba(16,185,129,0.45); }
    .setup-save-card label:focus-within .setup-save-switch { box-shadow:0 0 0 3px rgba(14,165,233,0.2); }
    .setup-save-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
    .setup-save-copy strong { color:var(--text); font-size:13px; line-height:1.35; }
    .setup-save-card.active .setup-save-copy strong { color:var(--success); }
    .setup-save-copy small { color:var(--text-muted); font-size:11px; line-height:1.5; }
    .setup-submit-confirm { margin-top:14px; }
    .setup-submit-confirm .setup-save-copy strong { color:#f8fafc; }
    .setup-submit-confirm.active .setup-save-copy strong { color:var(--success); }
    .v27-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
    .setup-bottom-nav { margin-top:auto; margin-bottom:0; padding-top:4px; }
    .setup-bottom-actions { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:10px; }
    .setup-bottom-actions > button { width:100%; min-width:0; margin:0; }
    .setup-bottom-actions > button:only-child { grid-column:1 / -1; }
    .setup-prev-btn { border-color:rgba(148,163,184,.34); color:#cbd5e1; background:rgba(15,23,42,.72); }
    .setup-prev-btn:hover,.setup-prev-btn:focus-visible { border-color:#38bdf8; color:#7dd3fc; outline:none; }
    .setup-mobile-jump { display:none; width:100%; margin:0 0 9px; padding:10px 12px; border:1px solid rgba(56,189,248,.34); border-radius:9px; background:rgba(14,165,233,.08); color:#7dd3fc; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
    .iframe-container { min-width:0; background:radial-gradient(circle at 52% 44%,#1e293b 0%,#0f172a 58%,#08111f 100%); display:flex; position:relative; isolation:isolate; overflow:auto; overscroll-behavior:contain; scroll-behavior:smooth; justify-content:center; align-items:flex-start; padding:78px 24px 26px; box-sizing:border-box; }
    .setup-deep-watermark { position:absolute; z-index:0; left:52%; top:52%; width:min(58vw,760px); aspect-ratio:1; transform:translate(-42%,-50%); display:grid; place-items:center; opacity:.05; pointer-events:none; user-select:none; mix-blend-mode:screen; -webkit-mask-image:radial-gradient(circle at center,#000 0 55%,rgba(0,0,0,.72) 66%,transparent 82%); mask-image:radial-gradient(circle at center,#000 0 55%,rgba(0,0,0,.72) 66%,transparent 82%); }
    .setup-deep-watermark img { width:100%; height:100%; object-fit:contain; filter:saturate(.7) contrast(1.08) drop-shadow(0 0 70px rgba(14,165,233,.2)); }
    .setup-workspace-toolbar { position:absolute; top:18px; right:20px; z-index:40; display:flex; align-items:center; gap:10px; }
    .setup-workspace-back { min-height:44px; padding:0 15px; border-color:rgba(148,163,184,.28); background:rgba(15,23,42,.82); color:var(--text); box-shadow:0 10px 24px rgba(0,0,0,.24); backdrop-filter:blur(10px); white-space:nowrap; }
    .setup-workspace-back:hover { border-color:var(--primary); color:var(--primary); background:rgba(14,165,233,.09); }
    .setup-workspace-help { display:none; min-height:44px; padding:0 12px; border:1px solid rgba(56,189,248,.3); border-radius:8px; background:rgba(14,165,233,.08); color:#7dd3fc; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
    .setup-workspace-direct { min-height:44px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:#02130d; background:linear-gradient(135deg,#6ee7b7,#34d399); box-shadow:0 10px 24px rgba(16,185,129,.2); font-size:11px; font-weight:900; line-height:1.1; text-decoration:none; white-space:nowrap; }
    .setup-workspace-direct:hover,.setup-workspace-direct:focus-visible { color:#020617; background:linear-gradient(135deg,#a7f3d0,#6ee7b7); outline:2px solid rgba(167,243,208,.45); outline-offset:2px; }
    .welcome-overlay, .ha-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:40px; z-index:5; overflow-y:auto; }
    .welcome-overlay { background:linear-gradient(135deg,rgba(2,6,23,.36),rgba(2,6,23,.72)); isolation:isolate; overflow:hidden; }
    .setup-welcome-copy { position:relative; z-index:1; width:min(560px,100%); padding:34px; box-sizing:border-box; border:1px solid rgba(56,189,248,.18); border-radius:22px; background:linear-gradient(145deg,rgba(15,23,42,.76),rgba(2,6,23,.52)); box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 0 44px rgba(14,165,233,.025); backdrop-filter:blur(7px); text-align:center; }
    .setup-welcome-eyebrow { color:#7dd3fc; font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
    .setup-welcome-points { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:18px; }
    .setup-welcome-points span { padding:6px 9px; border:1px solid rgba(148,163,184,.2); border-radius:999px; background:rgba(15,23,42,.58); color:#cbd5e1; font-size:10px; font-weight:750; }
    .ha-overlay { background:radial-gradient(circle at top right,rgba(3,169,244,.12) 0%,rgba(2,6,23,.88) 62%); }
    .ha-content-box { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:40px; max-width:900px; width:100%; box-shadow:0 20px 40px rgba(0,0,0,0.5); }
    .device-mockup { width:auto; height:min(760px,calc(100dvh - 154px)); aspect-ratio:390/800; border:14px solid #09090b; border-radius:40px; overflow:hidden; box-shadow:0 25px 50px -12px rgba(0,0,0,0.7),0 0 0 1px rgba(56,189,248,.08); background:var(--card-bg); display:flex; position:relative; transition:width .22s ease,height .22s ease; }
    .device-mockup.wide-mockup { width:auto; aspect-ratio:480/800; }
    .device-mockup iframe { width:130%; min-width:130%; height:130%; min-height:130%; transform:scale(0.769); transform-origin:top left; border:none; background:white; opacity:0.85; filter:invert(0.88) hue-rotate(180deg) contrast(1.15) brightness(1.1); -webkit-filter:invert(0.88) hue-rotate(180deg) contrast(1.15) brightness(1.1); }
    /* De iframe-viewport blijft bewust in iedere stap exact gelijk. De externe
       pagina gebruikt viewporthoogte voor haar blauwe kop; wisselende hoogtes
       lieten ZIP-knoppen na Terug omhoog springen. */
    .device-stage { position:relative; z-index:2; width:min(100%,520px); display:flex; flex-direction:column; align-items:center; gap:10px; margin:auto 0; }
    .setup-iframe-callout { width:min(480px,calc(100vw - 40px)); box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px; border:1px solid rgba(56,189,248,.38); border-radius:10px; background:rgba(15,23,42,.9); color:#cbd5e1; box-shadow:0 8px 22px rgba(0,0,0,.22); font-size:12px; line-height:1.35; text-align:center; }
    .setup-iframe-callout strong { color:#7dd3fc; }
    /* De KPM-app navigeert intern van Code search naar Device Config. Deze
       compacte bediening verschijnt pas na een geslaagde zoekactie en staat
       bewust buiten het telefoonscherm, zodat native KPM-knoppen vrij blijven. */
    .iframe-phase-guard { position:static; z-index:34; align-self:center; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; width:min(480px,calc(100vw - 40px)); max-width:100%; box-sizing:border-box; padding:0; }
    .iframe-phase-guard button { min-height:36px; padding:0 12px; border:1px solid rgba(148,163,184,.28); border-radius:8px; background:rgba(2,6,23,.92); color:#cbd5e1; box-shadow:0 8px 20px rgba(0,0,0,.28); font:inherit; font-size:10px; font-weight:850; line-height:1.1; white-space:nowrap; cursor:pointer; }
    .iframe-phase-guard button:hover,.iframe-phase-guard button:focus-visible { border-color:#38bdf8; color:#7dd3fc; outline:none; }
    .iframe-phase-guard .iframe-phase-config { border-color:rgba(16,185,129,.48); color:#6ee7b7; background:rgba(6,78,59,.38); }
    /* Het Compere-scherm is cross-origin. Deze merklagen blijven daarom bewust
       buiten het iframe: de configurator werkt ongewijzigd. De onderste laag
       is permanent aanwezig zolang het meterscherm zichtbaar is. */
    .iframe-download-cover { position:absolute !important; z-index:20 !important; right:-1px; bottom:-1px; left:-1px; display:grid !important; place-items:center; overflow:hidden; border-top:1px solid rgba(56,189,248,0.16); border-radius:0 0 25px 25px; background:radial-gradient(circle at 50% 44%,rgba(14,165,233,0.12),transparent 54%),linear-gradient(180deg,#121316 0%,#0c1119 100%); box-shadow:0 -2px 0 #121316; opacity:1 !important; visibility:visible !important; cursor:default; touch-action:none; pointer-events:auto; transition:height .22s ease,top .22s ease; }
    /* In het zoekscherm blijft de kap direct na Code search beginnen. In
       Device Config schuift alleen de bovenzijde omlaag: Submit blijft volledig
       zichtbaar en bedienbaar, terwijl de ZIP-zone onderaan afgedekt blijft. */
    .iframe-download-cover.cover-search { top:calc(50% + 6.6rem); height:auto; min-height:0; }
    .iframe-download-cover.cover-config { top:calc(50% + 14.25rem); height:auto; min-height:0; }
    .iframe-download-cover::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,6,23,0.38),transparent 18%,transparent 82%,rgba(2,6,23,0.38)); pointer-events:none; }
    .iframe-download-cover-logo { position:relative; z-index:1; width:min(46%,154px); max-height:76%; display:block; object-fit:contain; border:0; border-radius:0; box-shadow:none; filter:saturate(.9) contrast(1.04) drop-shadow(0 10px 24px rgba(0,0,0,.45)); pointer-events:none; user-select:none; }
    .cover-config .iframe-download-cover-logo { width:min(38%,118px); height:auto; max-height:60%; opacity:.86; }
    .iframe-download-cover-fallback { position:relative; z-index:1; color:#7dd3fc; font-size:12px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
    /* De onderste merkafdekking blijft gedurende alle iframe-stappen aanwezig.
       Alleen de losstaande logobadge is beperkt tot het eerste zoekscherm,
       zodat Device ID, status en configuratievelden bedienbaar blijven. */
    
    .docs-overlay { position:fixed; inset:0; background:rgba(2,6,23,0.95); backdrop-filter:blur(15px); z-index:1200; display:flex; align-items:center; justify-content:center; padding:20px; }
    .docs-modal { background:var(--bg); border:1px solid var(--border); border-radius:16px; width:100%; max-width:1400px; height:95vh; max-height:900px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 25px 50px rgba(0,0,0,0.6); }
    .docs-header { background:var(--card-bg); padding:20px 30px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); flex:0 0 auto; position:relative; z-index:2; }
    .docs-header h1 { margin:0; font-size:20px; display:flex; align-items:center; gap:10px; }
    .close-docs-btn { background:var(--border); color:var(--text); border:none; padding:8px 16px; border-radius:8px; font-weight:bold; cursor:pointer; transition:0.2s; }
    .close-docs-btn:hover { background:var(--danger); color:white; }
    .docs-nav { display:flex; justify-content:center; background:var(--bg-darker); padding:15px; border-bottom:1px solid var(--border); gap:10px; flex-wrap:wrap; flex:0 0 auto; position:relative; z-index:2; }
    .doc-tab { background:var(--card-bg); color:var(--text-muted); border:1px solid var(--border); padding:10px 20px; border-radius:30px; cursor:pointer; font-weight:600; font-size:13px; transition:0.2s; }
    .doc-tab:hover { background:var(--border); color:var(--text); }
    .doc-tab.active { background:var(--primary); color:#020617; border-color:var(--primary); box-shadow:0 0 10px rgba(14,165,233,0.3); }
    .doc-tab.hacs-tab { border-color:var(--hacs-orange); color:var(--hacs-orange); }
    .doc-tab.hacs-tab.active { background:var(--hacs-orange); color:#fff; box-shadow:0 0 10px rgba(255,152,0,0.3); }
    .doc-tab.io-tab { border-color:#a855f7; color:#a855f7; }
    .doc-tab.io-tab.active { background:#a855f7; color:#fff; box-shadow:0 0 10px rgba(168,85,247,0.3); }
    .doc-tab.specs-tab { border-color:var(--success); color:var(--success); }
    .doc-tab.specs-tab.active { background:var(--success); color:#020617; box-shadow:0 0 10px rgba(16,185,129,0.3); }
    .docs-content-scroll { overflow-y:auto; padding:30px; flex:1 1 auto; min-height:0; padding-bottom:60px; overscroll-behavior:contain; }
    .docs-content-inner { max-width:1300px; margin:0 auto; }
    
    .dashboard-picker-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
    .dash-option-item { background:var(--bg-darker); border:2px solid var(--border); border-radius:10px; padding:12px 20px; cursor:pointer; transition:0.2s; display:flex; align-items:center; justify-content:space-between; }
    .dash-option-item:hover,.dash-option-item:focus-visible { border-color:var(--text-muted); background:rgba(255,255,255,0.02); }
    .dash-option-item:focus-visible{outline:3px solid rgba(56,189,248,.42);outline-offset:2px;}
    .dash-option-item.active { border-color:var(--primary); background:rgba(14,165,233,0.08); box-shadow:0 0 15px rgba(14,165,233,0.15); }
    .dash-option-item-content { display:flex; align-items:center; gap:15px; }
    .dash-option-icon { font-size:20px; }
    .dash-option-text h4 { margin:0 0 4px 0; color:var(--text); font-size:14px; }
    .dash-option-text p { margin:0; font-size:12px; color:var(--text-muted); }
    .dash-radio-circle { width:18px; height:18px; border-radius:50%; border:2px solid var(--border); position:relative; }
    .dash-option-item.active .dash-radio-circle { border-color:var(--primary); }
    .dash-option-item.active .dash-radio-circle::after { content:''; position:absolute; inset:3px; background:var(--primary); border-radius:50%; }
    .generator-output-stack{display:flex;flex-direction:column;gap:18px;min-width:0;}
    .generator-output-stack>.dash-beginner-result,.generator-output-stack>.terminal-block{width:100%;}
    .dashboard-style-preview{width:100%;margin:16px 0 4px;padding:0;border:1px solid rgba(56,189,248,.28);border-radius:15px;background:linear-gradient(180deg,rgba(14,165,233,.075),rgba(2,6,23,.30));color:var(--text);font:inherit;text-align:left;overflow:hidden;cursor:zoom-in;box-shadow:0 14px 32px rgba(0,0,0,.20);transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;}
    .dashboard-style-preview:hover{border-color:rgba(56,189,248,.58);transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,0,0,.27);}
    .dashboard-style-preview.is-previewing{border-color:rgba(56,189,248,.68);box-shadow:0 0 0 1px rgba(56,189,248,.12),0 18px 42px rgba(0,0,0,.29);}
    .dashboard-style-preview:focus-visible{outline:3px solid rgba(56,189,248,.62);outline-offset:3px;}
    .dashboard-style-preview-head{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.78);}
    .dashboard-style-preview-head small{color:#38bdf8;font-size:9px;font-weight:850;letter-spacing:.075em;text-transform:uppercase;}
    .dashboard-style-preview-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#f8fafc;}
    .dashboard-style-preview-head span{margin-left:auto;flex:0 0 auto;color:#94a3b8;font-size:10px;font-weight:750;}
    .dashboard-style-preview-media{position:relative;display:block;aspect-ratio:16/9;background:#07111f;overflow:hidden;}
    .dashboard-style-preview-media img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .28s ease;}
    .dashboard-preview-fade-enter-active,.dashboard-preview-fade-leave-active{transition:opacity .15s ease,transform .15s ease;}
    .dashboard-preview-fade-enter-from,.dashboard-preview-fade-leave-to{opacity:0;transform:scale(.985);}
    .dashboard-style-preview:hover .dashboard-style-preview-media img{transform:scale(1.012);}
    .dashboard-style-preview-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;background:rgba(15,23,42,.78);}
    .dashboard-style-preview-foot span:first-child{color:var(--text-muted);font-size:10px;line-height:1.45;}
    .dashboard-style-preview-foot span:last-child{flex:0 0 auto;color:#7dd3fc;font-size:10px;font-weight:800;}
    .dashboard-style-preview--desktop{margin:0;}
    .dashboard-style-preview--mobile{display:none;}
    @media(max-width:600px){
      .dash-option-item{padding:11px 12px;gap:10px;}
      .dash-option-item-content{gap:10px;min-width:0;}
      .dash-option-text{min-width:0;}
      .dash-option-text h4{font-size:12px;}
      .dash-option-text p{font-size:10px;line-height:1.35;}
      .dash-radio-circle{flex:0 0 18px;}
      .dashboard-style-preview-head{align-items:flex-start;flex-wrap:wrap;}
      .dashboard-style-preview-head strong{width:100%;order:3;}
      .dashboard-style-preview-head span{font-size:9px;}
      .dashboard-style-preview-foot span:last-child{display:none;}
    }
    @media(max-width:900px){
      .dashboard-style-preview--desktop{display:none;}
      .dashboard-style-preview--mobile{display:block;}
      .generator-output-stack{display:block;}
    }
    @media(prefers-reduced-motion:reduce){.dashboard-style-preview,.dashboard-style-preview-media img,.dashboard-preview-fade-enter-active,.dashboard-preview-fade-leave-active{transition:none;}}

    /* V33: per ontwerp exact zichtbare HACS-afhankelijkheden. */
    .dashboard-requirement-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 14px;padding:12px 13px;border:1px solid rgba(56,189,248,.22);border-radius:12px;background:linear-gradient(135deg,rgba(14,165,233,.075),rgba(2,6,23,.34));}
    .dashboard-requirement-strip>div{min-width:170px;margin-right:auto;}
    .dashboard-requirement-strip small{display:block;color:#7dd3fc;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}
    .dashboard-requirement-strip strong{display:block;color:#f8fafc;font-size:12px;line-height:1.35;}
    .dashboard-requirement-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid rgba(255,152,0,.34);border-radius:999px;background:rgba(255,152,0,.08);color:#fdba74;font-size:9px;font-weight:850;white-space:nowrap;}
    .dashboard-requirement-chip.native{border-color:rgba(16,185,129,.34);background:rgba(16,185,129,.08);color:#6ee7b7;}
    .dashboard-requirement-chip.theme{border-color:rgba(56,189,248,.42);background:linear-gradient(135deg,rgba(30,64,175,.20),rgba(14,165,233,.10));color:#bae6fd;}
    .hacs-guide-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;}
    .hacs-install-box,.hacs-cards-box{min-width:0;padding:20px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(2,6,23,.48));}
    .hacs-install-box.native-ready{border-color:rgba(16,185,129,.30);background:linear-gradient(180deg,rgba(16,185,129,.07),rgba(2,6,23,.48));}
    .hacs-install-box.native-ready h3{color:#6ee7b7!important;}
    .hacs-steps-list{margin:0;padding-left:20px;color:var(--text-muted);font-size:12px;line-height:1.55;}
    .hacs-steps-list li+li{margin-top:12px;}
    .hacs-steps-list strong{color:var(--text);}
    .hacs-card-badge-list{display:grid;gap:10px;}
    .hacs-card-badge-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:12px;border:1px solid rgba(255,152,0,.22);border-radius:11px;background:rgba(255,152,0,.055);}
    .hacs-card-badge-item strong{color:#f8fafc;font-size:12px;}
    .hacs-card-badge-item strong a{color:inherit;text-decoration:none;}
    .hacs-card-badge-item strong a:hover,.hacs-card-badge-item strong a:focus-visible{color:#7dd3fc;text-decoration:underline;}
    .hacs-card-badge-item code{color:#fdba74;font-size:10px;border:1px solid rgba(255,152,0,.28);border-radius:999px;padding:2px 7px;background:rgba(2,6,23,.48);}
    .hacs-card-badge-item span{grid-column:1/-1;color:var(--text-muted);font-size:10px;line-height:1.45;}
    .hacs-card-badge-item.native{border-color:rgba(16,185,129,.28);background:rgba(16,185,129,.055);}
    .hacs-card-badge-item.native code{color:#6ee7b7;border-color:rgba(16,185,129,.32);}
    .hacs-style-summary{margin-bottom:13px;padding:13px;border:1px solid rgba(56,189,248,.22);border-radius:11px;background:rgba(14,165,233,.055);}
    .hacs-style-summary span{display:block;color:#7dd3fc;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;}
    .hacs-style-summary strong{display:block;color:#f8fafc;font-size:14px;margin-bottom:4px;}
    .hacs-style-summary p{margin:0;color:var(--text-muted);font-size:11px;line-height:1.5;}
    .hacs-official-link{display:inline-flex;margin-top:12px;color:#7dd3fc;font-size:10px;font-weight:750;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.30);}
    .hacs-official-link:hover,.hacs-official-link:focus-visible{color:#e0f2fe;border-color:#e0f2fe;}
    @media(max-width:760px){.hacs-guide-grid{grid-template-columns:1fr}.hacs-install-box,.hacs-cards-box{padding:16px}.dashboard-requirement-strip>div{width:100%;margin-right:0}.dashboard-requirement-chip{white-space:normal;text-align:left}}
    
    .svg-container { background:rgba(255,255,255,0.02); padding:40px 20px; border-radius:16px; border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,0.3); overflow-x:auto; margin-top:20px; }
    .term-grid-container { display:grid; grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:8px; margin-bottom:20px; }
    .term-btn { height:50px; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid transparent; cursor:pointer; transition:0.2s; background:#1e293b; color:#94a3b8; font-family:'JetBrains Mono',monospace; font-size:11px; }
    .term-btn:hover { filter:brightness(1.2); transform:scale(1.05); }
    .term-btn.active { box-shadow:0 0 0 2px var(--primary),0 0 15px rgba(14,165,233,0.5); font-weight:bold; transform:scale(1.05); }
    .term-group-volt { background:rgba(133,77,14,0.2); border-color:rgba(234,179,8,0.4); color:#eab308; }
    .term-group-power { background:rgba(127,29,29,0.2); border-color:rgba(239,68,68,0.4); color:#ef4444; }
    .term-group-neutral { background:rgba(30,58,138,0.2); border-color:rgba(59,130,246,0.4); color:#3b82f6; }
    .term-group-comm { background:rgba(6,78,59,0.2); border-color:rgba(16,185,129,0.4); color:#10b981; }
    .term-group-di { background:rgba(88,28,135,0.2); border-color:rgba(168,85,247,0.4); color:#a855f7; }
    .term-group-do { background:rgba(131,24,67,0.2); border-color:rgba(236,72,153,0.4); color:#ec4899; }
    .term-group-temp { background:rgba(124,45,18,0.2); border-color:rgba(249,115,22,0.4); color:#f97316; }
    
    .menu-flow-container { display:grid; grid-template-columns:1fr 1fr; gap:30px; position:relative; padding:20px; background:var(--bg-darker); border-radius:12px; border:1px solid var(--border); margin-top:30px; }
    .flow-col { display:flex; flex-direction:column; align-items:center; gap:10px; }
    .flow-col-reverse { display:flex; flex-direction:column-reverse; align-items:center; gap:10px; }
    .flow-item { width:100%; display:flex; justify-content:space-between; align-items:center; padding:10px 15px; border-radius:6px; font-size:13px; font-weight:600; border:1px solid var(--border); background:var(--card-bg); color:var(--text); }
    .flow-item.highlight { background:rgba(249,115,22,0.15); border-color:rgba(249,115,22,0.4); color:#fdba74; }
    .flow-item.dashed { background:rgba(30,41,59,0.5); border-style:dashed; color:var(--text-muted); }
    .flow-item span.code { font-family:'JetBrains Mono',monospace; color:var(--primary); font-weight:800; font-size:14px; }
    .flow-group { width:100%; border:2px solid; border-radius:8px; padding:15px; position:relative; margin:10px 0; background:rgba(0,0,0,0.2); }
    .flow-group-wifi { border-color:rgba(59,130,246,0.3); }
    .flow-group-lora { border-color:rgba(168,85,247,0.3); }
    .flow-group-title { position:absolute; top:0; left:15px; transform:translateY(-50%); background:var(--bg-darker); padding:0 10px; font-size:11px; font-weight:bold; text-transform:uppercase; border-radius:4px; border:1px solid; }
    .flow-group-wifi .flow-group-title { color:#3b82f6; border-color:rgba(59,130,246,0.5); }
    .flow-group-lora .flow-group-title { color:#a855f7; border-color:rgba(168,85,247,0.5); }
    .arrow-down { width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--text-muted); margin:2px 0; }
    .arrow-up { width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:8px solid var(--text-muted); margin:2px 0; }
    .menu-help-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 12px; }
    .menu-help-card { padding:13px 14px; border:1px solid var(--border); border-radius:10px; background:rgba(2,6,23,.35); }
    .menu-help-card.wide { grid-column:1 / -1; }
    .menu-help-card strong { display:block; color:var(--text); font-size:12px; margin-bottom:4px; }
    .menu-help-card span { display:block; color:var(--text-muted); font-size:11px; line-height:1.5; }
    .menu-variant-note { margin:0; padding:11px 13px; border-left:3px solid var(--primary); background:rgba(14,165,233,.055); color:var(--text-muted); font-size:11px; line-height:1.55; border-radius:0 8px 8px 0; }
    .menu-flow-bridge { position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); color:var(--primary); font-size:20px; }
    
    .generator-grid { display:grid; grid-template-columns:440px 1fr; gap:30px; align-items:start; }
    .generator-sidebar { background:rgba(255,255,255,0.02); padding:20px; border-radius:12px; border:1px solid var(--border); display:flex; flex-direction:column; gap:20px; }
    .gen-section-title { font-size:11px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:10px; }
    .gen-input { width:100%; padding:12px; border-radius:8px; border:1px solid var(--border); background:var(--bg-darker); color:var(--text); font-family:'JetBrains Mono',monospace; font-size:14px; outline:none; transition:0.2s; }
    .gen-input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(14,165,233,0.2); }
    
    .gen-radio-group { display:flex; flex-direction:column; gap:8px; }
    .gen-radio-label { display:flex; align-items:center; gap:10px; background:var(--bg-darker); padding:12px 15px; border-radius:8px; border:1px solid var(--border); cursor:pointer; transition:0.2s; font-size:13px; font-weight:600; }
    .gen-radio-label:hover { border-color:var(--text-muted); }
    .gen-radio-label:has(input:checked) { border-color:var(--primary); background:rgba(14,165,233,0.1); color:var(--text); }
    .gen-radio-label input { margin:0; }
    .meter-mode-choice .gen-radio-label:has(input:checked) { border-color:#34d399; background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(5,150,105,.10)); color:#ecfdf5; box-shadow:0 0 0 1px rgba(52,211,153,.18),0 8px 22px rgba(5,150,105,.10); }
    .meter-mode-choice .gen-radio-label:has(input:checked) input { accent-color:#10b981; }
    .gen-checkbox-label { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text); cursor:pointer; padding:4px 0; transition:0.2s; }
    .gen-checkbox-label.disabled { opacity:0.4; cursor:not-allowed; }
    .gen-checkbox-label input { accent-color:var(--primary); width:15px; height:15px; flex-shrink:0; }
    .dashboard-help-toggle{border:1px solid rgba(56,189,248,.24);border-radius:12px;background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(168,85,247,.05));overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
    .dashboard-help-toggle:has(input:checked){border-color:rgba(52,211,153,.48);background:linear-gradient(135deg,rgba(16,185,129,.11),rgba(14,165,233,.06));box-shadow:0 0 28px rgba(16,185,129,.06)}
    .dashboard-help-toggle label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:13px 14px;cursor:pointer}
    .dashboard-help-toggle input{width:18px;height:18px;margin:0;accent-color:#10b981}
    .dashboard-help-toggle-copy{display:grid;gap:3px;min-width:0}
    .dashboard-help-toggle-copy strong{color:var(--text);font-size:12px;line-height:1.3}
    .dashboard-help-toggle-copy small{color:var(--text-muted);font-size:10px;line-height:1.45}
    .dashboard-help-toggle-state{min-width:38px;padding:5px 8px;border:1px solid rgba(148,163,184,.20);border-radius:999px;background:rgba(2,6,23,.46);color:#94a3b8;font-size:9px;font-weight:900;letter-spacing:.7px;text-align:center}
    .dashboard-help-toggle:has(input:checked) .dashboard-help-toggle-state{border-color:rgba(52,211,153,.32);color:#6ee7b7}
    .dashboard-theme-choice{border:1px solid rgba(167,139,250,.24);border-radius:14px;padding:14px;background:linear-gradient(145deg,rgba(79,70,229,.06),rgba(2,6,23,.34));}
    .dashboard-theme-intro{margin:0 0 12px;color:var(--text-muted);font-size:11px;line-height:1.55;}
    .dashboard-theme-intro strong{color:#e2e8f0;}
    .dashboard-theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .dashboard-theme-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;min-width:0;padding:12px;border:1px solid var(--border);border-radius:12px;background:rgba(2,6,23,.56);cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;}
    .dashboard-theme-card:hover{border-color:rgba(148,163,184,.62);transform:translateY(-1px);}
    .dashboard-theme-card:has(input:focus-visible){outline:2px solid #38bdf8;outline-offset:2px;}
    .dashboard-theme-card:has(input:checked){border-color:var(--theme-accent,#38bdf8);background:linear-gradient(145deg,var(--theme-tint,rgba(14,165,233,.12)),rgba(2,6,23,.68));box-shadow:0 10px 28px rgba(2,6,23,.22);}
    .dashboard-theme-card input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--theme-accent,#38bdf8);}
    .dashboard-theme-copy{display:grid;gap:4px;min-width:0;}
    .dashboard-theme-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;}
    .dashboard-theme-heading strong{color:#f8fafc;font-size:12px;line-height:1.35;}
    .dashboard-theme-badge{flex:0 0 auto;padding:3px 6px;border:1px solid color-mix(in srgb,var(--theme-accent,#38bdf8) 42%,transparent);border-radius:999px;color:var(--theme-accent,#7dd3fc);font-size:8px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;}
    .dashboard-theme-copy small{color:var(--text-muted);font-size:10px;line-height:1.45;}
    .dashboard-theme-palette{display:flex;align-items:center;gap:5px;margin-top:4px;}
    .dashboard-theme-palette i{width:19px;height:8px;border-radius:999px;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
    .dashboard-theme-feel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;padding:9px 11px;border:1px solid rgba(148,163,184,.14);border-radius:10px;background:rgba(255,255,255,.025);color:var(--text-muted);font-size:10px;line-height:1.45;}
    .dashboard-theme-feel strong{color:#e2e8f0;}
    .dashboard-theme-feel span:last-child{color:var(--active-theme-accent,#7dd3fc);font-weight:800;text-align:right;}
    .dashboard-theme-live{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding:8px 10px;border:1px dashed rgba(125,211,252,.24);border-radius:10px;background:rgba(14,165,233,.035);color:#94a3b8;font-size:9px;line-height:1.45;}
    .dashboard-theme-live :is(a,button){flex:0 0 auto;display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid color-mix(in srgb,var(--active-theme-accent,#38bdf8) 48%,transparent);border-radius:9px;background:color-mix(in srgb,var(--active-theme-accent,#38bdf8) 9%,transparent);color:var(--active-theme-accent,#7dd3fc);font:inherit;font-weight:850;text-decoration:none;white-space:nowrap;cursor:pointer;}
    .dashboard-theme-live :is(a,button):hover,.dashboard-theme-live :is(a,button):focus-visible{border-color:var(--active-theme-accent,#7dd3fc);background:color-mix(in srgb,var(--active-theme-accent,#38bdf8) 16%,transparent);outline:2px solid color-mix(in srgb,var(--active-theme-accent,#38bdf8) 20%,transparent);outline-offset:2px;}
    @media(max-width:520px){.dashboard-theme-grid{grid-template-columns:1fr}.dashboard-theme-heading{align-items:flex-start}.dashboard-theme-feel,.dashboard-theme-live{align-items:flex-start;flex-direction:column}.dashboard-theme-feel span:last-child{text-align:left}.dashboard-theme-live :is(a,button){width:100%;box-sizing:border-box;justify-content:center}}
    .sensor-options-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    
    .channel-inputs-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .channel-input-wrapper { display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid rgba(148,163,184,.16); border-radius:11px; background:rgba(8,17,31,.42); }
    .channel-input-wrapper label { font-size:10px; color:var(--text-muted); font-weight:700; text-transform:uppercase; }
    .channel-input-wrapper input { box-sizing:border-box; width:100%; padding:8px 10px; border-radius:6px; border:1px solid var(--border); background:var(--bg-darker); color:var(--text); font-size:12px; outline:none; transition:0.2s;}
    .channel-input-wrapper input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(14,165,233,0.2); }
    .measurement-correction-entry{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:11px 12px;border:1px solid rgba(56,189,248,.22);border-radius:10px;background:linear-gradient(135deg,rgba(14,165,233,.09),rgba(124,58,237,.08));color:#cbd5e1;font-size:11px;line-height:1.5}.measurement-correction-entry img{width:34px;height:36px;object-fit:contain;flex:0 0 auto}.measurement-correction-entry strong{display:block;color:#e0f2fe;font-size:12px}.channel-correction-button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;min-height:46px;padding:8px 10px;border:1px solid rgba(56,189,248,.40);border-radius:9px;background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(37,99,235,.08));color:#dbeafe;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}.channel-correction-button:hover,.channel-correction-button:focus-visible{border-color:#67e8f9;background:linear-gradient(135deg,rgba(14,165,233,.22),rgba(37,99,235,.13));box-shadow:0 8px 24px rgba(14,165,233,.12);outline:2px solid rgba(56,189,248,.16);outline-offset:1px;transform:translateY(-1px)}.channel-correction-button img{width:27px;height:29px;object-fit:contain}.channel-correction-copy{display:grid;gap:2px;min-width:0}.channel-correction-copy strong{font-size:11px;line-height:1.2}.channel-correction-copy small{color:#94a3b8;font-size:8.5px;font-weight:650;line-height:1.3}.channel-correction-arrow{color:#67e8f9;font-size:16px}.channel-correction-button.is-active{border-color:rgba(52,211,153,.52);background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(14,165,233,.08));color:#d1fae5}.channel-correction-button.is-active .channel-correction-arrow{color:#6ee7b7}.channel-correction-status{display:flex;align-items:center;justify-content:space-between;gap:6px;color:#a7f3d0;font-size:9px;line-height:1.35}.channel-correction-status button{padding:0;border:0;background:none;color:#93c5fd;font:inherit;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.phase-correction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.phase-correction-grid .channel-correction-button{grid-template-columns:1fr auto;gap:5px;min-height:58px;padding:8px}.phase-correction-grid .channel-correction-button img{display:none}.phase-correction-grid .channel-correction-copy strong{font-size:12px;color:#f8fafc}.phase-correction-grid .channel-correction-copy small{font-size:8px}.phase-correction-grid .channel-correction-arrow{font-size:13px}.phase-correction-help{color:#94a3b8;font-size:9px;line-height:1.45}
    .measurement-correction-overlay{position:fixed;inset:0;z-index:1460;display:grid;place-items:center;padding:20px;background:rgba(2,6,23,.68);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.measurement-correction-card{box-sizing:border-box;width:min(620px,100%);max-height:calc(100dvh - 40px);overflow:auto;border:1px solid rgba(56,189,248,.34);border-radius:20px;background:linear-gradient(155deg,rgba(15,31,51,.995),rgba(10,15,31,.995) 74%);box-shadow:0 28px 90px rgba(0,0,0,.62);color:#e5edf7}.measurement-correction-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px 17px;border-bottom:1px solid rgba(148,163,184,.15);background:linear-gradient(135deg,rgba(14,165,233,.10),rgba(124,58,237,.11))}.measurement-correction-avatar{display:grid;place-items:center;width:46px;height:48px;border-radius:15px;background:rgba(14,165,233,.11)}.measurement-correction-avatar img{width:40px;height:42px;object-fit:contain}.measurement-correction-head strong{display:block;color:#f8fafc;font-size:16px}.measurement-correction-head small{display:block;margin-top:3px;color:#a5f3fc;font-size:10px;font-weight:750}.measurement-correction-close{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(148,163,184,.24);border-radius:11px;background:rgba(15,23,42,.58);color:#dbeafe;font-size:20px;cursor:pointer}.measurement-correction-body{display:grid;gap:15px;padding:18px}.measurement-correction-intro{margin:0;color:#cbd5e1;font-size:13px;line-height:1.55}.measurement-correction-question{margin:0;color:#f8fafc;font-size:12px;font-weight:850}.measurement-correction-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.measurement-correction-option{display:flex;align-items:flex-start;gap:9px;padding:12px;border:1px solid rgba(148,163,184,.20);border-radius:12px;background:rgba(15,23,42,.48);color:#dbeafe;text-align:left;cursor:pointer}.measurement-correction-option:hover,.measurement-correction-option:focus-visible{border-color:#67e8f9;outline:2px solid rgba(56,189,248,.14)}.measurement-correction-option.is-active{border-color:#38bdf8;background:rgba(14,165,233,.12)}.measurement-correction-option i{font-style:normal;font-size:20px}.measurement-correction-option strong{display:block;font-size:12px}.measurement-correction-option small{display:block;margin-top:4px;color:#94a3b8;font-size:10px;line-height:1.4}.measurement-correction-fields{display:grid;gap:12px;padding:13px;border:1px solid rgba(148,163,184,.15);border-radius:12px;background:rgba(2,6,23,.26)}.measurement-correction-fields label{display:grid;gap:6px;color:#cbd5e1;font-size:11px;font-weight:750}.measurement-correction-fields input,.measurement-correction-fields textarea{box-sizing:border-box;width:100%;padding:9px 10px;border:1px solid #334155;border-radius:8px;background:#08111f;color:#f8fafc;font:inherit;resize:vertical}.measurement-correction-fields input:focus,.measurement-correction-fields textarea:focus{border-color:#38bdf8;outline:2px solid rgba(56,189,248,.15)}.measurement-correction-percent{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px;align-items:center}.measurement-correction-factor-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px;align-items:center}.measurement-correction-factor-presets{display:flex;gap:6px;flex-wrap:wrap}.measurement-correction-factor-presets button{padding:6px 9px;border:1px solid rgba(148,163,184,.22);border-radius:8px;background:rgba(15,23,42,.7);color:#cbd5e1;font-size:10px;font-weight:800;cursor:pointer}.measurement-correction-factor-presets button.is-active{border-color:#38bdf8;background:rgba(14,165,233,.14);color:#e0f2fe}.measurement-correction-impact{display:grid;gap:5px;padding:11px 12px;border:1px solid rgba(56,189,248,.2);border-radius:11px;background:rgba(14,165,233,.07);color:#bae6fd;font-size:10px;line-height:1.5}.measurement-correction-impact strong{color:#e0f2fe;font-size:11px}.measurement-correction-preview{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:13px;border:1px solid rgba(52,211,153,.25);border-radius:12px;background:rgba(16,185,129,.07)}.measurement-correction-preview div{display:grid;gap:3px}.measurement-correction-preview div:last-child{text-align:right}.measurement-correction-preview span{color:#94a3b8;font-size:9px;font-weight:800;text-transform:uppercase}.measurement-correction-preview strong{color:#f8fafc;font-size:16px}.measurement-correction-preview b{color:#6ee7b7;font-size:18px}.measurement-correction-note{margin:0;color:#94a3b8;font-size:10px;line-height:1.5}.measurement-correction-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.measurement-correction-actions button{min-height:38px;padding:9px 13px;border-radius:9px;font-size:11px;font-weight:850;cursor:pointer}.measurement-correction-reset{margin-right:auto;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.45);color:#aebfd2}.measurement-correction-reset:hover,.measurement-correction-reset:focus-visible{border-color:rgba(103,232,249,.48);color:#e0f2fe;outline:2px solid rgba(56,189,248,.12)}.measurement-correction-cancel{border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.58);color:#cbd5e1}.measurement-correction-apply{border:1px solid #38bdf8;background:linear-gradient(135deg,#0284c7,#2563eb);color:white}.measurement-correction-apply:disabled{opacity:.45;cursor:not-allowed}
    @media(max-width:700px){.channel-inputs-grid{grid-template-columns:1fr}.measurement-correction-overlay{align-items:end;padding:10px}.measurement-correction-card{max-height:calc(100dvh - 20px);border-radius:18px}.measurement-correction-options{grid-template-columns:1fr}.measurement-correction-head{padding:13px}.measurement-correction-body{padding:15px}.measurement-correction-percent,.measurement-correction-factor-row{grid-template-columns:1fr 80px}}

    .terminal-block { background:#0d1117; border-radius:12px; border:1px solid var(--border); overflow:hidden; display:flex; flex-direction:column; position:sticky; top:10px; height:calc(100vh - 120px); min-height:500px; box-shadow:0 10px 30px rgba(0,0,0,0.4); }
    .terminal-header { background:#161b22; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-weight:700; flex-shrink:0; flex-wrap:wrap; gap:10px; }
    .header-actions { display:flex; gap:10px; }
    .header-action-btn { background:rgba(14,165,233,0.15); color:var(--primary); border:1px solid rgba(14,165,233,0.3); padding:8px 14px; border-radius:6px; font-weight:bold; font-size:12px; cursor:pointer; transition:0.2s; display:flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; }
    .header-action-btn:hover { background:var(--primary); color:#020617; box-shadow:0 0 10px rgba(14,165,233,0.4); }
    .header-action-btn.download { background:rgba(16,185,129,0.15); color:var(--success); border-color:rgba(16,185,129,0.3); }
    .header-action-btn.download:hover { background:var(--success); color:#020617; box-shadow:0 0 10px rgba(16,185,129,0.4); }
    .terminal-block.yaml-closed { height:auto!important; min-height:0!important; position:relative; top:auto; }
    .yaml-code-disclosure { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 20px; background:linear-gradient(135deg,rgba(14,165,233,.07),rgba(15,23,42,.76)); border-top:1px solid rgba(56,189,248,.12); }
    .yaml-code-disclosure-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
    .yaml-code-disclosure-copy strong { color:#e0f2fe; font-size:13px; }
    .yaml-code-disclosure-copy span { color:var(--text-muted); font-size:11px; line-height:1.45; }
    .yaml-code-toggle { flex:0 0 auto; min-height:42px; padding:9px 14px; border:1px solid rgba(56,189,248,.4); border-radius:9px; background:rgba(14,165,233,.11); color:#7dd3fc; font:inherit; font-size:12px; font-weight:850; cursor:pointer; }
    .yaml-code-toggle:hover,.yaml-code-toggle:focus-visible { border-color:#38bdf8; background:rgba(14,165,233,.2); color:#e0f2fe; outline:none; }
    .yaml-code-panel { flex:0 0 auto; max-height:min(68vh,720px); margin:0; padding:20px 20px 80px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
    .yaml-code-panel code { background:transparent; border:none; padding:0; color:#a5b4fc; font-size:12px; line-height:1.6; white-space:pre; }
    .tier-selector { display:flex; background:var(--bg-darker); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:15px; }
    .tier-btn { flex:1; padding:10px 5px; text-align:center; font-size:11px; font-weight:700; color:var(--text-muted); background:transparent; border:none; cursor:pointer; transition:0.2s; display:flex; flex-direction:column; align-items:center; gap:4px; border-right:1px solid var(--border); }
    .tier-btn:last-child { border-right:none; }
    .tier-btn:hover { background:rgba(255,255,255,0.05); }
    .tier-btn.active { background:rgba(14,165,233,0.15); color:var(--primary); }
    .tier-icon { font-size:16px; }
    
    .thankyou-overlay { position:fixed; inset:0; z-index:1300; box-sizing:border-box; background:rgba(2,6,23,0.8); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px)); overflow:auto; overscroll-behavior:contain; }
    .thankyou-card { box-sizing:border-box; width:100%; max-width:520px; max-height:calc(100dvh - 40px); overflow:auto; background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:30px; box-shadow:0 25px 50px rgba(0,0,0,.45); }
    .thankyou-card h3 { margin:0 0 15px 0; font-size:22px; display:flex; align-items:center; gap:10px; }
    .thankyou-card p { margin:0 0 20px 0; color:var(--text-muted); line-height:1.6; }
    .thankyou-actions { display:flex; gap:10px; margin-top:20px; }
    .thankyou-actions .btn-secondary, .thankyou-actions .btn-primary { flex:1; }
    @media(max-width:560px){.thankyou-overlay{align-items:flex-end;padding:max(10px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}.thankyou-card{max-height:calc(100dvh - 20px);padding:22px 18px;border-radius:18px}.thankyou-actions{flex-direction:column}.thankyou-actions .btn-secondary,.thankyou-actions .btn-primary{width:100%;box-sizing:border-box}}
    
    .ha-badge-link { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:rgba(3,169,244,0.1); border:1px solid rgba(3,169,244,0.3); color:var(--ha-blue); padding:12px 20px; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; transition:0.3s; margin-top:15px; width:100%; box-sizing:border-box; }
    .ha-badge-link:hover { background:var(--ha-blue); color:#020617; }
    .ha-badge-icon { width:22px; height:22px; fill:currentColor; }

    /* MODBUS ENGINEER PORTAL SPECIFIEK */
    .modbus-mobile-picker { display: none; background: #0f172a; padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .modbus-select-dropdown { width: 100%; padding: 12px 14px; background: var(--card-bg); color: var(--text); border: 1.5px solid var(--warning); border-radius: 8px; font-size: 14px; font-weight: 700; font-family: inherit; outline: none; cursor: pointer; }
    .modbus-select-dropdown option { background: var(--bg-darker); color: var(--text); padding: 10px; }

    .modbus-view { display:flex; flex-direction:column; height:100vh; width:100%; max-width:100vw; background:var(--bg-darker); overflow:hidden; }
    .modbus-view .modbus-header {
      position:relative;
      inset:auto;
      width:100%;
      min-width:0;
      min-height:64px;
      box-sizing:border-box;
      flex:0 0 auto;
      background:rgba(15,23,42,0.95);
      border-bottom:1px solid var(--warning);
      padding:10px 18px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
      z-index:100;
      box-shadow:0 4px 15px rgba(0,0,0,0.3);
    }
    .modbus-title { min-width:0; margin:0; font-family:'JetBrains Mono',monospace; color:var(--warning); font-size:clamp(15px,1.3vw,18px); line-height:1.3; font-weight:800; display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
    .modbus-back-btn { flex:0 0 auto; white-space:nowrap; padding:8px 14px; font-size:13px; margin:0; }
    .modbus-portal { display:flex; flex:1; min-height:0; overflow:hidden; }
    .modbus-sidebar { width:280px; background:var(--card-bg); border-right:1px solid var(--border); overflow-y:auto; padding:20px 10px; display:flex; flex-direction:column; gap:5px; }
    .modbus-content { flex:1; min-width:0; overflow-y:auto; padding:28px 32px 48px; position:relative; scroll-behavior:smooth; }
    .enc-nav-btn { background:transparent; border:1px solid transparent; color:var(--text-muted); padding:12px 16px; text-align:left; font-size:0.9rem; font-weight:600; border-radius:8px; cursor:pointer; transition:0.2s; display:flex; align-items:center; gap:10px; }
    .enc-nav-btn:hover { background:rgba(255,255,255,0.05); color:var(--text); }
    .enc-nav-btn.active { background:rgba(245,158,11,0.1); border-color:rgba(245,158,11,0.3); color:var(--warning); }
    .enc-table-card { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:30px; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
    .enc-table-title { background:rgba(15,23,42,0.8); padding:16px 20px; font-weight:700; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; border-left:4px solid var(--warning); }
    .table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom: 5px; }
    .enc-table-card table { width:100%; border-collapse:collapse; font-size:0.9rem; text-align:left; min-width:680px; }
    .enc-table-card th { background:#1e293b; color:var(--text-muted); padding:12px 20px; font-weight:600; border-bottom:2px solid var(--border); }
    .enc-table-card td { padding:14px 20px; border-bottom:1px solid var(--border); color:var(--text); }
    .enc-hex { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-family:'JetBrains Mono',monospace; background:#0f172a; color:#7dd3fc; padding:4px 6px 4px 8px; border-radius:7px; font-size:0.85rem; border:1px solid var(--border); box-shadow:inset 0 0 0 1px rgba(125,211,252,.03); }
    .enc-dec { display:inline-flex; align-items:center; min-height:20px; padding:1px 6px; border-left:1px solid rgba(245,158,11,.36); border-radius:0 5px 5px 0; background:rgba(245,158,11,.10); color:#fbbf24; font-size:.72rem; font-weight:800; letter-spacing:.01em; }
    .modbus-address-key { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 18px; align-items:center; margin:0 0 12px; padding:12px 14px; border:1px solid rgba(56,189,248,.22); border-radius:12px; background:linear-gradient(135deg,rgba(14,165,233,.07),rgba(245,158,11,.05)); color:var(--text-muted); font-size:.82rem; line-height:1.45; }
    .modbus-address-key strong { display:block; margin-bottom:2px; color:#e0f2fe; font-size:.88rem; }
    .modbus-address-example { display:flex; align-items:center; gap:8px; color:#94a3b8; font-size:.74rem; white-space:nowrap; }
    .enc-type-pill { display:inline-block; padding:3px 8px; border-radius:12px; font-size:0.75rem; font-weight:600; font-family:'JetBrains Mono',monospace; }
    .enc-info-box { background:rgba(245,158,11,0.05); border-left:4px solid var(--warning); padding:16px 20px; border-radius:0 8px 8px 0; margin-bottom:24px; font-size:0.95rem; border-top:1px solid rgba(245,158,11,0.1); border-right:1px solid rgba(245,158,11,0.1); border-bottom:1px solid rgba(245,158,11,0.1); }
    .modbus-export-bar { display:flex; justify-content:flex-end; margin-bottom:10px; position:sticky; top:0; z-index:10; }
    @media(max-width:700px) { .modbus-address-key { grid-template-columns:1fr; } .modbus-address-example { justify-content:flex-start; } }

    /* Shinen / Highlighten van actieve instructie kaarten */
    @keyframes shineCard {
      0% { border-color: var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
      50% { border-color: var(--primary); box-shadow: 0 0 25px rgba(14, 165, 233, 0.4); }
      100% { border-color: var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
    }
    .card-shine {
      animation: shineCard 2.5s infinite ease-in-out;
      border: 1px solid var(--primary) !important;
    }
    .shining-star {
      display: inline-block;
      animation: bounceStar 1s infinite alternate;
      color: var(--warning);
    }
    @keyframes bounceStar {
      from { transform: scale(1); }
      to { transform: scale(1.3); }
    }

    @media (max-width: 1024px) {
      .hero-container { grid-template-columns:1fr; gap:40px; text-align:center; }
      .hero-col-logo { order:1; max-width:240px; margin:0 auto; }
      .hero-col-text { order:2; align-items:center; }
      .hero-col-meter { order:3; max-width:320px; margin:0 auto; }
      .hero h1 { text-align:center; font-size:42px; }
      .hero p { text-align:center; }
      .hero-buttons { justify-content:center; }
      .quick-contact-strip { justify-content:center; }
      .hero-content > p[style*="justify-content"] { justify-content: center !important; }
      .ha-prominent-badge { justify-content:center; margin: 0 auto 25px; }
      .meter-img { transform:perspective(1000px) rotateY(0deg) rotateX(0deg); max-width:280px; }
      .enc-layout { flex-direction:column; }
      .enc-sidebar { width:100%; max-height:250px; }
    }

    @media (max-width: 900px) {
      .generator-grid { grid-template-columns:1fr; } 
      .terminal-block { height:600px; position:relative; top:0; margin-top:20px; } 
      .sensor-options-grid { grid-template-columns:1fr; } 
      .mobile-menu-btn { display:block; }
      .nav-links { display:none; flex-direction:column; position:absolute; top:100%; left:0; width:100%; background:rgba(15,23,42,0.95); backdrop-filter:blur(10px); padding:10px 20px; gap:10px; }
      .nav-links.mobile-open { display:flex; }
      .nav-links a { padding:12px 0; font-size:16px; border-bottom:1px solid rgba(255,255,255,0.05); width:100%; }
      .terminal-header { flex-direction:column; align-items:flex-start; }
      .setup-view { display:block; overflow-y:auto; height:100dvh; padding:0; scroll-behavior:smooth; }
      .sidebar { width:100%; min-width:100%; min-height:100dvh; height:auto; overflow-y:visible; border-right:none; }
      .iframe-container { padding:72px 10px 24px; min-height:calc(100dvh - 10px); align-items:flex-start; overflow:visible; }
      .setup-deep-watermark { position:absolute; left:50%; top:53%; width:min(92vw,520px); transform:translate(-50%,-50%); opacity:.036; }
      .setup-workspace-toolbar { top:12px; right:12px; gap:8px; }
      .setup-workspace-back { min-height:40px; padding:0 12px; font-size:11px; }
      .setup-workspace-help { display:inline-flex; align-items:center; min-height:40px; }
      .setup-workspace-direct { min-height:40px; padding:0 11px; font-size:10px; }
      .setup-welcome-copy { padding:26px 20px; border-radius:17px; }
      .installer-mini-grid { grid-template-columns:1fr; }
      .installer-tool-head { flex-direction:column; }
      .installer-field-row { grid-template-columns:minmax(0,1fr) 82px; }
      .device-stage { width:100%; margin:0; }
      .device-mockup,.device-mockup.wide-mockup { width:min(390px,calc(100vw - 28px)); height:auto; aspect-ratio:390/800; margin:0 auto; border-width:10px; border-radius:32px; }
      /* Mobiel gebruikt het iframe exact de zichtbare telefoonbreedte. De oude
         130%-zoom kon op enkele toestellen een extern responsive breakpoint
         passeren; dan schoof de blauwe kop in en kwamen de ZIP-knoppen boven de
         merkkap terecht. Met deze vaste 1:1-viewport blijft de externe indeling
         stabiel, ook na Terug, paginaherstel en rotatie. */
      .device-mockup iframe { width:100%; min-width:100%; height:100%; min-height:100%; transform:none; }
      /* Op mobiel blijft het zoekscherm ongewijzigd afgeschermd. In Device
         Config krijgt Submit een subtiel ruimere vrije strook; alleen de
         ZIP-zone onderaan blijft achter de merkkap. */
      .iframe-download-cover.cover-search { top:calc(50% + 8.5rem); height:auto; min-height:0; bottom:-1px; }
      .iframe-download-cover.cover-config { top:calc(50% + 19.5rem); height:auto; min-height:0; bottom:-1px; }
      .iframe-download-cover-logo { width:min(42%,132px); max-height:74%; }
      .cover-config .iframe-download-cover-logo { width:min(36%,96px); height:auto; max-height:58%; }
      .iframe-phase-guard { width:min(100%,390px); max-width:calc(100vw - 28px); }
      .iframe-phase-guard button { min-height:40px; padding:0 11px; font-size:10px; }
      /* De navigatie blijft bij de uitleg, maar bedekt het meterscherm niet. */
      .setup-bottom-nav { position:sticky; bottom:0; left:auto; width:auto; background:rgba(15,23,42,0.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--border); z-index:1000; margin:8px -20px -20px; box-sizing:border-box; }
      .setup-mobile-jump { display:block; }
      footer { padding-bottom:calc(30px + env(safe-area-inset-bottom, 0px)); }
      .kpi-strip { grid-template-columns:repeat(2,1fr); }
      
      .docs-overlay { padding:0; }
      .docs-modal { height:100dvh; max-height:100dvh; border-radius:0; border:none; }
      .docs-header { flex-direction:column; align-items:flex-start; gap:15px; padding:15px; }
      .docs-header > div { width:100%; justify-content:space-between; }
      
      /* Horizontale Touch Tab Bar (Docs) - Zonder storende scrollbar */
      .docs-nav { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; justify-content:flex-start; align-items:center; padding:10px 15px; min-height:56px; box-sizing:border-box; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
      .docs-nav::-webkit-scrollbar { display:none; }
      .doc-tab { white-space:nowrap; flex-shrink:0; padding:8px 16px; font-size:12px; }
      .docs-content-scroll { padding:20px 15px calc(90px + env(safe-area-inset-bottom, 0px)) 15px; } 

      /* Bedieningstab: op mobiel twee rustige routes onder elkaar */
      #doc-panel-instellingen .card { overflow:hidden; padding:20px; }
      #doc-panel-instellingen .card > div:first-child { margin-bottom:12px !important; }
      #doc-panel-instellingen .card h2 { font-size:clamp(20px,5vw,24px); line-height:1.25; }
      .menu-help-grid { grid-template-columns:1fr; }
      .menu-flow-container { grid-template-columns:minmax(0,1fr); gap:26px; padding:14px; margin-top:20px; overflow:hidden; }
      .menu-flow-container > .flow-col,.menu-flow-container > .flow-col-reverse { width:100%; min-width:0; }
      .menu-flow-container > .flow-col-reverse { border-top:1px solid var(--border); padding-top:24px; }
      .flow-col,.flow-col-reverse { flex-direction:column; gap:8px; min-width:0; }
      #doc-panel-instellingen .arrow-down,#doc-panel-instellingen .arrow-up,.menu-flow-bridge { display:none; }
      #doc-panel-instellingen .flow-item { width:100%; min-width:0; display:grid; grid-template-columns:minmax(76px,.5fr) minmax(0,1fr); gap:12px; padding:11px 12px; }
      #doc-panel-instellingen .flow-item span.code { white-space:nowrap; font-size:13px; }
      #doc-panel-instellingen .flow-item span:last-child { min-width:0; text-align:right; line-height:1.35; overflow-wrap:anywhere; }
      #doc-panel-instellingen .flow-group { width:100%; min-width:0; box-sizing:border-box; padding:12px 10px 10px; margin:6px 0; }
      #doc-panel-instellingen .flow-group-title { position:static; transform:none; display:inline-flex; max-width:100%; margin:0 0 10px; line-height:1.3; }
      
      .terminal-header { padding-bottom:10px; }
      .terminal-header .header-actions { position:fixed; bottom:0; left:0; width:100%; background:rgba(15,23,42,0.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:12px 15px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--border); z-index:1300; box-sizing:border-box; display:flex; gap:10px; }
      .terminal-header .header-actions .header-action-btn { flex:1; justify-content:center; height:44px; font-size:14px; }
      .yaml-code-disclosure { align-items:stretch; flex-direction:column; gap:11px; padding:14px; }
      .yaml-code-toggle { width:100%; min-height:44px; }
      .yaml-code-panel { max-height:60vh; padding:16px 14px 64px; }
      .yaml-code-panel code { font-size:11px; }
      
      /* Modbus Mobile specific - Perfect zichtbare navigatie & secties */
      .modbus-view { height: 100dvh; overflow-y: auto; background: var(--bg-darker); display: flex; flex-direction: column; }
      .modbus-view .modbus-header { min-height:56px; padding:8px 12px; gap:10px; }
      .modbus-title { font-size:13px; gap:4px 7px; }
      .modbus-back-btn { padding:8px 10px; font-size:11px; }
      .modbus-mobile-picker { display: block !important; position: sticky; top: 0; z-index: 101; box-shadow: 0 4px 15px rgba(0,0,0,0.4); }
      .modbus-portal { flex-direction: column !important; margin-top: 0; overflow: visible !important; flex: 1 !important; display: flex !important; }
      .modbus-sidebar { 
        width: 100% !important; 
        height: auto !important; 
        max-height: none !important;
        border-right: none !important; 
        border-bottom: 1px solid var(--border) !important; 
        flex-direction: row !important; 
        overflow-x: auto !important; 
        overflow-y: hidden !important; 
        padding: 10px 12px !important; 
        gap: 8px !important; 
        flex-shrink: 0 !important; 
        background: var(--card-bg) !important; 
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }
      .modbus-sidebar .enc-nav-btn { 
        white-space: nowrap !important; 
        flex-shrink: 0 !important; 
        padding: 8px 14px !important; 
        font-size: 0.85rem !important;
        background: var(--bg-darker) !important;
        border: 1px solid var(--border) !important;
      }
      .modbus-sidebar .enc-nav-btn.active {
        background: rgba(245, 158, 11, 0.2) !important;
        border-color: var(--warning) !important;
        color: var(--warning) !important;
        box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
      }
      .modbus-content { padding: 15px !important; padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; overflow: visible !important; flex: 1 !important; background: var(--bg-darker) !important; }
      .modbus-export-bar { position: fixed; top: auto; bottom: 0; left: 0; width: 100%; background: rgba(15, 23, 42, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 12px 15px calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0; border-top: 1px solid var(--border); z-index: 1300; box-sizing: border-box; justify-content: center; display: flex; }
      .modbus-export-bar .btn-secondary { width: 100%; height: 44px; font-size: 14px; border-color: var(--warning); color: var(--warning); }
    }
    @media (max-width: 500px) {
      .kpi-strip { grid-template-columns: 1fr; }
      .hero h1 { font-size: 36px; }
      .modbus-view .modbus-header { align-items:flex-start; }
      .modbus-title span { display:none; }
      .docs-content-scroll { padding-left:10px; padding-right:10px; }
      #doc-panel-instellingen .card { padding:15px; border-radius:12px; }
      .menu-flow-container { padding:10px; background:rgba(2,6,23,.55); }
      #doc-panel-instellingen .flow-item { grid-template-columns:84px minmax(0,1fr); font-size:12px; }
    }

    /* ===== v6 commercial refresh ===== */
    .v6-hero { padding: 145px 20px 55px; }
    .v6-hero-container { max-width: 1220px; margin: 0 auto; display:grid; grid-template-columns: 1.02fr .98fr; gap: 55px; align-items:center; }
    .v6-hero-copy { text-align:left; }
    .v6-kicker { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid rgba(14,165,233,.32); background:rgba(14,165,233,.08); color:var(--primary); border-radius:999px; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
    .v6-hero h1 { font-size: clamp(42px, 5vw, 68px); line-height:1.02; margin:20px 0 20px; letter-spacing:-2.5px; }
    .v6-hero h1 span { background:linear-gradient(90deg,#0ea5e9,#a855f7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .v6-lead { font-size:18px !important; line-height:1.7 !important; max-width:650px !important; text-align:left !important; margin-bottom:28px !important; }
    .v6-proof { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 28px; }
    .v6-proof span { padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.045); border:1px solid var(--border); color:var(--text-muted); font-size:12px; font-weight:700; }
    .v6-hero-actions { justify-content:flex-start !important; margin-bottom:14px !important; }
    .v6-hero-note { text-align:left !important; max-width:600px !important; margin:0 !important; font-size:12px !important; }
    .v6-product-stage { position:relative; min-height:480px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) auto; align-items:center; justify-items:center; gap:16px 8px; padding:14px 0 4px; box-sizing:border-box; }
    .v6-product-stage:before { content:''; position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(14,165,233,.22),transparent 68%); filter:blur(18px); }
    .v6-product-stage img { grid-column:1/-1; grid-row:1; position:relative; z-index:2; width:min(100%,500px); max-height:410px; object-fit:contain; filter:drop-shadow(0 25px 45px rgba(0,0,0,.38)); }
    .v6-hero-container.hero-without-image { grid-template-columns:1fr; max-width:900px; }
    .hero-without-image .v6-product-stage { display:none; }
    .hero-without-image .v6-hero-copy { width:100%; max-width:850px; margin:0 auto; text-align:center; }
    .hero-without-image .v6-lead,.hero-without-image .v6-hero-note { text-align:center!important; margin-left:auto!important; margin-right:auto!important; }
    .hero-without-image .v6-proof,.hero-without-image .v6-hero-actions { justify-content:center!important; }
    .v6-callout { position:static; z-index:3; width:100%; min-height:34px; box-sizing:border-box; padding:8px 7px; background:rgba(8,15,30,.88); border:1px solid var(--border); border-radius:9px; box-shadow:0 9px 25px rgba(0,0,0,.2); font-size:10px; line-height:1.25; font-weight:800; text-align:center; display:flex; align-items:center; justify-content:center; }
    .v6-callout.one { grid-column:1; grid-row:2; } .v6-callout.two { grid-column:2; grid-row:2; } .v6-callout.three { grid-column:3; grid-row:2; }
    .v6-section-lead { max-width:760px; margin:0 auto 34px; text-align:center; color:var(--text-muted); line-height:1.7; }
    .v6-use-grid,.v6-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1100px; margin:0 auto; }
    .v6-use-card,.v6-service-card { background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); border:1px solid var(--border); border-radius:16px; padding:26px; }
    .v6-use-card h3,.v6-service-card h3 { margin:12px 0 8px; }
    .v6-use-card p,.v6-service-card p { color:var(--text-muted); line-height:1.65; margin:0; font-size:14px; }
    .v6-icon { font-size:28px; }
    .v6-flow { max-width:1050px; margin:0 auto 35px; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; align-items:stretch; }
    .v6-flow-step { position:relative; padding:20px 14px; text-align:center; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.025); }
    .v6-flow-step strong { display:block; margin-bottom:6px; } .v6-flow-step span { color:var(--text-muted); font-size:12px; line-height:1.4; }
    .v6-final-cta { max-width:1000px; margin:0 auto; padding:42px 30px; border:1px solid rgba(14,165,233,.28); border-radius:20px; text-align:center; background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(168,85,247,.06)); }
    .v6-final-cta h2 { margin-top:0; font-size:32px; } .v6-final-cta p { color:var(--text-muted); }
    @media(max-width:1050px) and (min-width:901px){.v6-hero-container{gap:32px}.v6-product-stage{min-height:430px}.v6-product-stage img{max-height:360px}.v6-callout{font-size:9px;padding:7px 4px}}
    @media(max-width:900px){ .v6-hero{padding-top:115px;padding-bottom:46px}.v6-hero-container{grid-template-columns:1fr;gap:30px}.v6-hero-copy{text-align:center}.v6-lead,.v6-hero-note{text-align:center!important;margin-left:auto!important;margin-right:auto!important}.v6-hero-actions{justify-content:center!important}.v6-product-stage{min-height:360px;max-width:560px;width:100%;margin:0 auto;padding:0}.v6-product-stage img{max-height:360px}.v6-callout{display:none}.v6-use-grid,.v6-service-grid{grid-template-columns:1fr}.v6-flow{grid-template-columns:1fr}.v6-proof{justify-content:center} }
  
    /* ===== v7 premium product / conversion layer ===== */
    .nav-divider{width:1px;height:22px;background:var(--border);margin:0 2px;}
    .v7-trust{max-width:1100px;margin:0 auto;padding:0 20px 20px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;}
    .v7-trust span{font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--text-muted);padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.025)}
    .v7-product-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch;}
    .v7-product-card,.v7-spec-card,.v7-why-card,.v7-faq{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border:1px solid var(--border);border-radius:18px;padding:28px;}
    .v7-product-card h3,.v7-spec-card h3,.v7-why-card h3{margin:0 0 10px;}
    .v7-product-card p,.v7-spec-card p,.v7-why-card p{color:var(--text-muted);line-height:1.7;margin:0;}
    .v7-product-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;}
    .v7-product-point{padding:15px;border-radius:12px;background:rgba(0,0,0,.14);border:1px solid var(--border);}
    .v7-product-point strong{display:block;font-size:14px;margin-bottom:4px}.v7-product-point span{font-size:12px;color:var(--text-muted);line-height:1.5}
    .v7-spec-list{display:grid;gap:0;margin-top:10px}.v7-spec-row{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--border);font-size:13px}.v7-spec-row:last-child{border-bottom:0}.v7-spec-row span{color:var(--text-muted);text-align:right}
    .v7-dashboard-demo{max-width:1120px;margin:0 auto;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:#08101e;box-shadow:0 25px 70px rgba(0,0,0,.28)}
    .v7-demo-head{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);gap:15px}.v7-demo-head strong{font-size:14px}.v7-demo-live{font-size:10px;font-weight:900;color:var(--success);padding:6px 9px;border:1px solid rgba(16,185,129,.35);border-radius:999px}
    .v7-demo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px}.v7-demo-card{padding:17px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}.v7-demo-card small{color:var(--text-muted);display:block;margin-bottom:7px}.v7-demo-card b{font-size:22px}.v7-demo-bar{height:7px;border-radius:99px;background:linear-gradient(90deg,var(--primary),#a855f7);margin-top:12px;opacity:.85}
    .v7-why-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.v7-why-card .v7-icon{font-size:28px;margin-bottom:12px}.v7-why-card ul{padding-left:18px;color:var(--text-muted);line-height:1.8;font-size:13px;margin:14px 0 0}
    .v7-about{max-width:900px;margin:0 auto;text-align:center}.v7-about p{color:var(--text-muted);line-height:1.8;font-size:16px}.v7-about-mark{display:inline-flex;align-items:center;gap:10px;padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);font-size:11px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:var(--primary)}
    .v7-faq-grid{max-width:900px;margin:0 auto;display:grid;gap:10px}.v7-faq{padding:0;overflow:hidden}.v7-faq summary{cursor:pointer;list-style:none;padding:20px 22px;font-weight:800}.v7-faq summary::-webkit-details-marker{display:none}.v7-faq p{padding:0 22px 20px;margin:0;color:var(--text-muted);line-height:1.7;font-size:14px}
    .v7-form-intro{max-width:720px;margin:0 auto 24px;text-align:center;color:var(--text-muted);line-height:1.7}.v7-form-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 auto 24px}.v7-form-badges span{font-size:11px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;color:var(--text-muted)}
    .v7-footer-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;text-align:left;padding:35px 20px}.v7-footer-grid h4{margin:0 0 10px}.v7-footer-grid p,.v7-footer-grid a{color:var(--text-muted);font-size:13px;line-height:1.7;text-decoration:none}.v7-footer-links{display:grid;gap:5px}.v7-footer-links a:hover{color:var(--text)}
    @media(max-width:900px){.nav-divider{display:none}.v7-product-grid,.v7-why-grid{grid-template-columns:1fr}.v7-demo-grid{grid-template-columns:1fr 1fr}.v7-footer-grid{grid-template-columns:1fr;text-align:center}.v7-footer-links{justify-items:center}}
    @media(max-width:520px){.v7-product-points{grid-template-columns:1fr}.v7-demo-grid{grid-template-columns:1fr}.v7-product-card,.v7-spec-card,.v7-why-card{padding:22px}.v7-demo-head{align-items:flex-start;flex-direction:column}}

    /* V8 KLANTVRIENDELIJKE PORTALEN */
    .customer-intro { background:linear-gradient(145deg,rgba(14,165,233,.11),rgba(168,85,247,.06)); border:1px solid rgba(14,165,233,.24); border-radius:16px; padding:22px; margin:0 0 24px; }
    .customer-intro h2,.customer-intro h3 { margin:0 0 8px; color:var(--text); }
    .customer-intro p { margin:0; color:var(--text-muted); line-height:1.65; }
    .customer-intro-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
    .customer-chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
    .customer-chip { background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text-muted); border-radius:999px; padding:7px 11px; font-size:12px; font-weight:600; }
    .customer-chip-link { display:inline-flex; align-items:center; text-decoration:none; cursor:pointer; font-family:inherit; transition:background .2s,border-color .2s,color .2s,transform .2s; }
    .customer-chip-link:hover,.customer-chip-link:focus-visible,.customer-chip-link.active { background:rgba(14,165,233,.12); border-color:var(--primary); color:var(--text); transform:translateY(-1px); outline:none; }
    .docs-content-scroll { scroll-behavior:smooth; }
    [id^="doc-panel-"] { scroll-margin-top:16px; }
    .simple-help { background:rgba(16,185,129,.07); border:1px solid rgba(16,185,129,.22); border-radius:12px; padding:14px 16px; margin:14px 0; color:#bbf7d0; font-size:13px; line-height:1.55; }
    .simple-help strong { color:#ecfdf5; }
    .support-strip { display:flex; align-items:center; justify-content:space-between; gap:14px; background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:16px 0; }
    .support-strip p { margin:0; color:var(--text-muted); font-size:12px; line-height:1.45; }
    .support-strip a,.support-strip button { padding:0;border:0;background:transparent;white-space:nowrap;color:var(--primary);text-decoration:none;font:700 12px/1.4 'Inter',sans-serif;cursor:pointer; }
    .portal-guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0 24px; }
    .portal-guide-card { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:15px; }
    .portal-guide-card strong { display:block; margin-bottom:5px; color:var(--text); font-size:13px; }
    .portal-guide-card span { color:var(--text-muted); font-size:12px; line-height:1.45; display:block; }
    .docs-welcome { max-width:1100px; margin:0 auto 20px; }
    .install-safety-card { max-width:1100px; margin:0 auto 22px; padding:20px; border-radius:16px; border:1px solid rgba(245,158,11,.34); background:linear-gradient(145deg,rgba(245,158,11,.09),rgba(15,23,42,.72)); }
    .install-safety-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:16px; }
    .install-safety-head h3 { margin:0 0 5px; color:#fbbf24; font-size:18px; }
    .install-safety-head p { margin:0; color:var(--text-muted); font-size:12px; line-height:1.55; }
    .install-safety-badge { flex:0 0 auto; padding:6px 9px; border-radius:999px; border:1px solid rgba(245,158,11,.4); background:rgba(245,158,11,.1); color:#fbbf24; font-size:10px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; }
    .install-safety-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
    .install-safety-step { min-height:105px; padding:13px; border-radius:12px; background:rgba(2,6,23,.54); border:1px solid var(--border); }
    .install-safety-step b { display:block; color:var(--text); font-size:12px; margin-bottom:5px; }
    .install-safety-step span { display:block; color:var(--text-muted); font-size:11px; line-height:1.5; }
    .install-source-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
    .install-source-links a { color:var(--primary); border:1px solid rgba(14,165,233,.26); background:rgba(14,165,233,.055); border-radius:999px; padding:6px 9px; text-decoration:none; font-size:10px; font-weight:700; }
    .install-source-links a:hover { border-color:var(--primary); background:rgba(14,165,233,.12); }
    .docs-next-step { max-width:1100px; margin:0 auto 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid rgba(16,185,129,.26); background:rgba(16,185,129,.06); border-radius:13px; }
    .docs-next-step p { margin:0; color:var(--text-muted); font-size:12px; line-height:1.5; }
    .docs-next-actions { display:flex; flex-wrap:wrap; gap:8px; flex:0 0 auto; }
    .docs-next-actions .btn-primary,.docs-next-actions .btn-secondary { padding:8px 11px; font-size:11px; white-space:nowrap; }
    .modbus-customer-head { max-width:1200px; margin:0 auto 22px; }
    .setup-start-title { font-size:24px; margin:0 0 8px; }
    .setup-start-list { margin:14px 0 0; padding-left:18px; color:var(--text-muted); font-size:13px; line-height:1.7; }
    .setup-start-list strong { color:var(--text); }
    .privacy-note { font-size:11px; color:var(--text-muted); line-height:1.5; margin:10px 0 0; }
    .field-hint { display:block; font-size:10px; color:var(--text-muted); margin-top:4px; line-height:1.35; }
    @media(max-width:900px){ .portal-guide-grid{grid-template-columns:1fr;} .support-strip{align-items:flex-start;flex-direction:column;} .customer-intro{padding:18px;} .install-safety-grid{grid-template-columns:1fr 1fr;} .docs-next-step{align-items:flex-start;flex-direction:column;} }
    @media(max-width:520px){ .install-safety-card{padding:16px;} .install-safety-head{flex-direction:column;} .install-safety-grid{grid-template-columns:1fr;} .docs-next-actions{width:100%;} .docs-next-actions .btn-primary,.docs-next-actions .btn-secondary{width:100%;box-sizing:border-box;text-align:center;} }


    /* V9 Dashboard Studio: rustige keuze tussen begeleiding en direct ontwerpen */
    .dash-route-wrap{max-width:1050px;margin:0 auto 28px;padding:0 4px;}
    .dash-route-intro{text-align:center;margin-bottom:24px;}
    .dash-route-intro h1{font-size:clamp(30px,5vw,48px);margin:0 0 12px;line-height:1.08;}
    .dash-route-intro p{max-width:760px;margin:0 auto;color:var(--text-muted);line-height:1.65;}
    .dash-route-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
    .dash-route-card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid var(--border);border-radius:18px;padding:28px;display:flex;flex-direction:column;min-height:260px;transition:.22s;}
    .dash-route-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:0 18px 50px rgba(0,0,0,.28);}
    .dash-route-card.recommended{border-color:rgba(14,165,233,.45);background:linear-gradient(180deg,rgba(14,165,233,.10),rgba(255,255,255,.018));}
    .dash-route-icon{font-size:32px;margin-bottom:12px;}
    .dash-route-card h2{margin:0 0 8px;font-size:22px;}
    .dash-route-card p{color:var(--text-muted);line-height:1.6;margin:0 0 16px;}
    .dash-route-card ul{margin:0 0 22px;padding-left:18px;color:var(--text-muted);line-height:1.7;font-size:13px;}
    .dash-route-card .btn-primary,.dash-route-card .btn-secondary{margin-top:auto;width:100%;box-sizing:border-box;}
    .dash-route-badge{display:inline-flex;align-self:flex-start;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.28);color:var(--primary);padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;}
    .dash-beginner-guide{max-width:1050px;margin:0 auto 24px;background:rgba(14,165,233,.045);border:1px solid rgba(14,165,233,.22);border-radius:18px;padding:26px;}
    .dash-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;}
    .dash-guide-item{background:var(--bg-darker);border:1px solid var(--border);border-radius:12px;padding:16px;}
    .dash-guide-item strong{display:block;margin-bottom:7px;}
    .dash-guide-item p{font-size:12px;color:var(--text-muted);line-height:1.55;margin:0;}
    .dash-quick-designs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;}
    .dash-quick-card{border:1px solid var(--border);background:var(--bg-darker);border-radius:12px;padding:14px;cursor:pointer;transition:.2s;text-align:left;color:var(--text);font-family:inherit;}
    .dash-quick-card:hover,.dash-quick-card.active{border-color:var(--primary);background:rgba(14,165,233,.08);}
    .dash-quick-card strong{display:block;margin-bottom:4px;}
    .dash-quick-card span{font-size:11px;color:var(--text-muted);line-height:1.4;display:block;}
    .dash-quick-card.signature{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;border-color:rgba(56,189,248,.36);background:radial-gradient(circle at 0 0,rgba(34,197,94,.16),transparent 36%),linear-gradient(135deg,rgba(14,165,233,.13),rgba(124,58,237,.10));}
    .dash-quick-card.signature::before{content:"✦";display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(125,211,252,.38);border-radius:13px;background:rgba(2,132,199,.14);color:#7dd3fc;font-size:18px;box-shadow:0 0 24px rgba(14,165,233,.18);}
    .dash-quick-card.signature strong,.dash-quick-card.signature span{grid-column:2;margin:0}.dash-quick-card.signature strong{font-size:14px;color:#e0f2fe}.dash-quick-card.signature em{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.08em;color:#86efac;text-transform:uppercase;}
    .dash-advanced-details{margin-top:12px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:rgba(0,0,0,.12);}
    .dash-advanced-details summary{padding:12px 14px;cursor:pointer;color:var(--text-muted);font-size:12px;font-weight:700;}
    .dash-advanced-details .dashboard-picker-list{padding:0 10px 10px;}
    .dashboard-display-options[open]{padding-bottom:10px;}
    .dashboard-display-options .dashboard-help-toggle{margin:10px 10px 0;}
    .dash-beginner-result{background:#0d1117;border:1px solid var(--border);border-radius:12px;min-height:500px;display:flex;flex-direction:column;overflow:hidden;position:sticky;top:10px;}
    .dash-result-body{padding:26px;display:flex;flex-direction:column;gap:16px;flex:1;}
    .dash-result-check{display:flex;gap:12px;align-items:flex-start;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.22);border-radius:10px;padding:14px;}
    .dash-result-check b{display:block;margin-bottom:3px;}
    .dash-result-check span{font-size:12px;color:var(--text-muted);line-height:1.45;}
    .dash-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;}
    .dash-relay-addon{margin-top:10px;padding:12px;border:1px solid rgba(16,185,129,.34);border-radius:12px;background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(14,165,233,.07));color:var(--text-muted);font-size:11px;line-height:1.55}
    .dash-relay-addon strong{display:block;color:#a7f3d0;font-size:12px;margin-bottom:4px}.dash-relay-addon .dash-result-actions{margin-top:9px}
    .dash-switch-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
    .dash-switch-btn{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:7px 11px;font-size:11px;cursor:pointer;}
    .dash-switch-btn.active{border-color:var(--primary);color:var(--primary);background:rgba(14,165,233,.08);}
    .dash-install-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
    .dash-install-mode-card{position:relative;display:flex;gap:12px;align-items:flex-start;padding:15px;border:1px solid var(--border);border-radius:13px;background:var(--bg-darker);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease;}
    .dash-install-mode-card:hover{transform:translateY(-1px);border-color:rgba(125,211,252,.55);}
    .dash-install-mode-card.active{border-color:#22c55e;background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(14,165,233,.06));box-shadow:0 0 0 1px rgba(34,197,94,.08);}
    .dash-install-mode-card.extended.active{border-color:#38bdf8;background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(124,58,237,.07));}
    .dash-install-mode-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid rgba(148,163,184,.22);border-radius:12px;background:rgba(255,255,255,.035);font-size:19px;}
    .dash-install-mode-copy{display:block;min-width:0;}
    .dash-install-mode-copy strong{display:block;margin:0 0 4px;color:#f8fafc;font-size:12px;line-height:1.35;}
    .dash-install-mode-copy small{display:block;color:var(--text-muted);font-size:10px;line-height:1.5;}
    .dash-install-mode-badge{display:inline-flex;margin-top:8px;padding:3px 7px;border:1px solid rgba(34,197,94,.35);border-radius:999px;color:#86efac;font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;}
    .dash-native-note{padding:15px;border:1px solid rgba(34,197,94,.34);border-radius:13px;background:linear-gradient(135deg,rgba(16,185,129,.10),rgba(2,6,23,.46));color:var(--text-muted);font-size:11px;line-height:1.6;}
    .dash-native-note strong{display:block;color:#a7f3d0;font-size:13px;margin-bottom:4px;}
    .ha-file-plan{margin:18px 0;padding:20px;border:1px solid rgba(56,189,248,.28);border-radius:15px;background:linear-gradient(145deg,rgba(14,165,233,.07),rgba(2,6,23,.46));}
    .ha-file-plan.native{border-color:rgba(34,197,94,.34);background:linear-gradient(145deg,rgba(16,185,129,.09),rgba(2,6,23,.46));}
    .ha-file-plan-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
    .ha-file-plan-head img{width:44px;height:46px;border-radius:13px;object-fit:cover;}
    .ha-file-plan-head h3{margin:0 0 3px;font-size:16px;color:#f8fafc;}
    .ha-file-plan-head p{margin:0;color:var(--text-muted);font-size:11px;line-height:1.5;}
    .ha-file-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:ha-install;}
    .ha-file-step{position:relative;min-width:0;padding:13px 13px 13px 48px;border:1px solid rgba(148,163,184,.16);border-radius:11px;background:rgba(2,6,23,.46);counter-increment:ha-install;}
    .ha-file-step::before{content:counter(ha-install);position:absolute;left:13px;top:13px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(14,165,233,.14);border:1px solid rgba(56,189,248,.32);color:#7dd3fc;font-size:10px;font-weight:900;}
    .ha-file-plan.native .ha-file-step::before{background:rgba(16,185,129,.14);border-color:rgba(34,197,94,.32);color:#86efac;}
    .ha-file-step strong{display:block;color:#f8fafc;font-size:11px;margin-bottom:4px;}
    .ha-file-step span{display:block;color:var(--text-muted);font-size:10px;line-height:1.5;overflow-wrap:anywhere;}
    .ha-file-step code{color:#bae6fd;font-size:9px;overflow-wrap:anywhere;}
    .ha-config-snippet{margin:12px 0 0;padding:11px 13px;border:1px solid rgba(148,163,184,.18);border-radius:10px;background:#07111f;color:#bae6fd;font:10px/1.6 'JetBrains Mono',monospace;white-space:pre-wrap;overflow-wrap:anywhere;}
    .ha-file-plan-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px;}
    .ha-file-plan-actions button{min-height:38px;}
    .helper-file-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin:0 0 15px;padding:16px;border:2px solid rgba(56,189,248,.52);border-radius:15px;background:radial-gradient(circle at 0 0,rgba(14,165,233,.18),transparent 42%),linear-gradient(135deg,rgba(15,23,42,.94),rgba(30,41,59,.88));box-shadow:0 15px 38px rgba(2,132,199,.13);}
    .helper-file-cta-copy{min-width:0;}
    .helper-file-cta-badge{display:inline-flex;margin-bottom:7px;padding:4px 8px;border:1px solid rgba(125,211,252,.38);border-radius:999px;background:rgba(14,165,233,.12);color:#7dd3fc;font-size:8px;font-weight:950;letter-spacing:.1em;text-transform:uppercase;}
    .helper-file-cta h4{margin:0 0 5px;color:#f8fafc;font-size:16px;line-height:1.3;}
    .helper-file-cta p{margin:0;color:#b6c6da;font-size:10.5px;line-height:1.55;}
    .helper-file-cta code{display:block;margin-top:8px;color:#bae6fd;font:800 9.5px/1.45 'JetBrains Mono',monospace;overflow-wrap:anywhere;}
    .helper-file-cta-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;min-width:380px;}
    .helper-file-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 15px;border:1px solid transparent;border-radius:12px;color:#f8fafc;font:900 11px/1.25 'Inter',sans-serif;text-align:center;cursor:pointer;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;}
    .helper-file-button:hover,.helper-file-button:focus-visible{transform:translateY(-1px);filter:brightness(1.1);outline:3px solid rgba(125,211,252,.18);outline-offset:2px;}
    .helper-file-button.is-download{border-color:rgba(125,211,252,.62);background:linear-gradient(135deg,#0369a1,#2563eb);box-shadow:0 10px 24px rgba(37,99,235,.20);}
    .helper-file-button.is-copy{border-color:rgba(110,231,183,.58);background:linear-gradient(135deg,#047857,#0d9488);box-shadow:0 10px 24px rgba(13,148,136,.18);}
    .helper-quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px;}
    .helper-quick-actions .helper-file-button{min-height:42px;padding:0 10px;font-size:10px;}
    .helper-quick-actions .helper-file-button.is-guide{border-color:rgba(196,181,253,.48);background:linear-gradient(135deg,#6d28d9,#4338ca);box-shadow:0 10px 24px rgba(109,40,217,.17);}
    .r12-helper-target-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    @media(max-width:700px){.dash-install-mode,.ha-file-plan-grid{grid-template-columns:1fr}.ha-file-plan{padding:16px}.ha-file-plan-head{align-items:flex-start}.helper-file-cta{grid-template-columns:1fr;padding:14px}.helper-file-cta-actions,.helper-quick-actions{grid-template-columns:1fr;min-width:0}.helper-file-button{width:100%}.r12-helper-target-actions{grid-template-columns:1fr}}
    @media(max-width:900px){.dash-route-grid,.dash-guide-grid,.dash-quick-designs{grid-template-columns:1fr}.dash-route-card{min-height:0}.dash-beginner-result{position:relative;top:0;min-height:420px}.dash-result-actions{grid-template-columns:1fr}}

  

    /* ==========================================================
       V10 SERVICE-FIRST EXPERIENCE
       ========================================================== */
    .v10-service-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25);color:#6ee7b7;font-size:12px;font-weight:800;letter-spacing:.02em}
    .v10-journey{max-width:1200px;margin:-24px auto 0;padding:0 20px 30px;position:relative;z-index:6}
    .v10-journey-card{background:rgba(15,23,42,.92);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 18px 45px rgba(0,0,0,.24);display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
    .v10-journey-step{padding:14px 12px;border-radius:12px;min-height:76px;background:rgba(255,255,255,.025);display:flex;gap:10px;align-items:flex-start}
    .v10-journey-step b{width:26px;height:26px;border-radius:50%;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.25);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:12px}
    .v10-journey-step strong{display:block;font-size:12px;margin-bottom:4px}.v10-journey-step span{font-size:11px;color:var(--text-muted);line-height:1.4}
    .v10-setup-shell{display:grid;grid-template-columns:minmax(370px,470px) 1fr;width:100%;height:100vh;background:var(--bg-darker)}
    .v10-setup-panel{background:rgba(15,23,42,.98);border-right:1px solid var(--border);height:100vh;overflow-y:auto;display:flex;flex-direction:column;position:relative;z-index:10}
    .v10-setup-top{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;background:rgba(15,23,42,.96);backdrop-filter:blur(12px);z-index:30}
    .v10-setup-brand{display:flex;align-items:center;gap:10px}.v10-setup-brand img{width:34px;height:34px;border-radius:8px}.v10-setup-brand strong{font-size:14px;display:block}.v10-setup-brand span{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
    .v10-icon-btn{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:9px;padding:8px 10px;cursor:pointer;font-weight:700}
    .v10-setup-body{padding:22px;flex:1}
    .v10-kicker{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--primary);margin-bottom:8px}
    .v10-setup-title{font-size:27px;line-height:1.12;margin:0 0 10px;letter-spacing:-.6px}.v10-setup-lead{font-size:14px;color:var(--text-muted);line-height:1.65;margin:0 0 20px}
    .v10-route-grid{display:grid;gap:12px}.v10-route{border:1px solid var(--border);border-radius:14px;padding:17px;background:rgba(255,255,255,.025);cursor:pointer;transition:.2s;text-align:left;color:var(--text);font-family:inherit;width:100%}.v10-route:hover{border-color:var(--primary);transform:translateY(-2px);background:rgba(14,165,233,.05)}
    .v10-route.primary{border-color:rgba(14,165,233,.38);background:linear-gradient(135deg,rgba(14,165,233,.11),rgba(168,85,247,.05))}.v10-route-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.v10-route-head strong{font-size:15px}.v10-route p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.55}.v10-route-tag{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:var(--primary);font-weight:800}
    .v10-ready{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.v10-ready div{border:1px solid var(--border);border-radius:10px;padding:11px;background:rgba(255,255,255,.02);font-size:11px;color:var(--text-muted)}.v10-ready strong{display:block;color:var(--text);font-size:11px;margin-bottom:3px}
    .v10-privacy{font-size:11px;line-height:1.5;color:var(--text-muted);padding:11px 12px;border-radius:10px;background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.16);margin:14px 0}
    .v10-support-card{padding:15px;border:1px solid rgba(37,211,102,.24);background:rgba(37,211,102,.06);border-radius:13px;margin-top:14px}.v10-support-card strong{display:block;margin-bottom:5px;font-size:13px}.v10-support-card p{font-size:11px;color:var(--text-muted);line-height:1.5;margin:0 0 10px}
    .v10-stagebar{padding:16px 20px 12px;border-bottom:1px solid var(--border);background:rgba(2,6,23,.45)}
    .v10-stagebar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.v10-stagebar-top strong{font-size:13px}.v10-stagebar-top span{font-size:11px;color:var(--text-muted)}
    .v10-progress{height:5px;border-radius:999px;background:var(--border);overflow:hidden}.v10-progress > div{height:100%;background:linear-gradient(90deg,var(--primary),#a855f7);transition:width .3s ease}
    .v10-step-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 0 0;scrollbar-width:none}.v10-step-tabs::-webkit-scrollbar{display:none}.v10-step-tab{border:1px solid var(--border);background:rgba(255,255,255,.025);color:var(--text-muted);padding:7px 10px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap;cursor:pointer}.v10-step-tab.active{border-color:var(--primary);color:var(--primary);background:rgba(14,165,233,.09)}
    .v10-step-card{border:1px solid var(--border);border-radius:16px;padding:20px;background:rgba(255,255,255,.025);box-shadow:0 10px 28px rgba(0,0,0,.14)}.v10-step-card h2{font-size:18px;margin:0 0 8px;color:var(--text)}.v10-step-card > p{font-size:13px;color:var(--text-muted);line-height:1.6}
    .v10-action-list{display:flex;flex-direction:column;gap:9px;margin:16px 0}.v10-action{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04)}.v10-action b{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(14,165,233,.12);color:var(--primary);font-size:11px}.v10-action span{font-size:12px;line-height:1.5;color:var(--text-muted)}.v10-action span strong{color:var(--text)}
    .v10-callout{padding:12px 13px;border-radius:10px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.16);font-size:11px;color:#fcd34d;line-height:1.55;margin:14px 0}.v10-callout.success{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.18);color:#86efac}.v10-callout.info{background:rgba(14,165,233,.06);border-color:rgba(14,165,233,.18);color:#7dd3fc}
    .v10-field-group{border:1px solid var(--border);border-radius:13px;padding:14px;background:rgba(2,6,23,.28);margin-top:12px}.v10-field-group h3{font-size:12px;margin:0 0 11px;display:flex;align-items:center;justify-content:space-between}.v10-field-group h3 span{font-size:9px;font-weight:700;color:var(--text-muted)}
    .v10-setup-nav{display:flex;gap:10px;margin-top:16px}.v10-setup-nav > *{flex:1}.v10-link-btn{background:none;border:none;color:var(--text-muted);font-size:11px;text-decoration:underline;cursor:pointer;padding:8px}
    .v10-workspace{height:100vh;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 20%,#172033 0%,#0b1220 55%,#020617 100%);display:flex;align-items:center;justify-content:center;padding:28px}
    .v10-workspace-frame{width:min(760px,95%);height:min(820px,92vh);border-radius:22px;border:1px solid var(--border);background:#09090b;box-shadow:0 30px 70px rgba(0,0,0,.45);overflow:hidden;position:relative}.v10-workspace-frame iframe{width:130%;height:130%;border:0;transform:scale(.769);transform-origin:top left;background:white;filter:invert(.88) hue-rotate(180deg) contrast(1.15) brightness(1.08)}
    .v10-workspace-empty{max-width:660px;text-align:center;padding:38px}.v10-workspace-empty .big{font-size:48px;margin-bottom:14px}.v10-workspace-empty h2{font-size:25px;margin:0 0 10px}.v10-workspace-empty p{color:var(--text-muted);line-height:1.6;font-size:14px}.v10-workspace-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.v10-workspace-points div{padding:12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025);font-size:11px;color:var(--text-muted)}
    .v10-expert-grid{display:grid;gap:9px;margin:16px 0}.v10-expert-btn{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.025);color:var(--text);cursor:pointer;font-family:inherit;text-align:left}.v10-expert-btn small{display:block;color:var(--text-muted);font-size:10px;margin-top:3px}
    .v10-trouble-grid{display:grid;gap:9px;margin:14px 0}.v10-trouble{padding:13px;border-radius:11px;border:1px solid var(--border);background:rgba(255,255,255,.02)}.v10-trouble strong{font-size:12px;display:block;margin-bottom:4px}.v10-trouble p{font-size:11px;color:var(--text-muted);line-height:1.5;margin:0}.v10-trouble button{margin-top:8px}
    .v11-entry{max-width:1200px;margin:22px auto 8px;padding:0 20px;position:relative;z-index:7}
    .v11-entry-head{text-align:center;margin-bottom:16px}.v11-entry-head h2{font-size:24px;margin:0 0 7px}.v11-entry-head p{margin:0;color:var(--text-muted);font-size:13px}
    .v11-entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .v11-entry-card{border:1px solid var(--border);border-radius:18px;padding:22px;background:rgba(15,23,42,.92);box-shadow:0 16px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;min-height:230px}
    .v11-entry-card.pro{border-color:rgba(14,165,233,.4);background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(15,23,42,.95))}
    .v11-entry-label{font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--primary);margin-bottom:9px}.v11-entry-card h3{font-size:21px;margin:0 0 8px}.v11-entry-card p{font-size:12px;line-height:1.6;color:var(--text-muted);margin:0 0 14px}.v11-entry-points{display:grid;gap:6px;margin-bottom:18px}.v11-entry-points span{font-size:11px;color:#cbd5e1}.v11-entry-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto}.v11-entry-actions button{flex:1;min-width:160px}
    .v11-pro-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:1200px;margin:10px auto 0;padding:13px 18px;border:1px solid rgba(14,165,233,.24);border-radius:14px;background:rgba(14,165,233,.055)}.v11-pro-strip div{font-size:12px;color:var(--text-muted)}.v11-pro-strip strong{color:var(--text);display:block;margin-bottom:2px}.v11-pro-strip button{white-space:nowrap}
    @media(max-width:760px){.v11-entry-grid{grid-template-columns:1fr}.v11-entry-card{min-height:0}.v11-pro-strip{align-items:flex-start;flex-direction:column}.v11-pro-strip button{width:100%}}
    @media(max-width:900px){.v10-journey-card{grid-template-columns:1fr 1fr}.v10-setup-shell{display:block;height:auto;min-height:100dvh}.v10-setup-panel{height:auto;min-height:100dvh;border-right:0}.v10-workspace{height:auto;min-height:720px;padding:18px}.v10-workspace-frame{height:690px}.v10-ready{grid-template-columns:1fr 1fr}.v10-workspace-points{grid-template-columns:1fr}.v10-setup-top{position:sticky}.v10-setup-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}}
    @media(max-width:560px){.v10-journey-card{grid-template-columns:1fr}.v10-ready{grid-template-columns:1fr}.v10-setup-body{padding:18px}.v10-setup-title{font-size:24px}.v10-workspace{display:none}}


    /* ===== V12 · ÉÉN KLANT- EN INSTALLATEURSPORTAAL ===== */
    .v12-role-band{max-width:1200px;margin:-10px auto 54px;padding:0 20px;position:relative;z-index:5}
    .v12-role-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.24)}
    .v12-role-shell>*{min-width:0;max-width:100%}
    .v12-role{background:rgba(15,23,42,.97);padding:26px;display:flex;flex-direction:column;gap:12px;min-height:250px;box-sizing:border-box;overflow:hidden}
    .v12-role.installer{background:linear-gradient(145deg,rgba(14,165,233,.14),rgba(15,23,42,.98) 54%)}
    .v12-role-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;min-width:0}.v12-role-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.22);flex:0 0 auto}
    .v12-role-badge{max-width:calc(100% - 68px);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--primary);border:1px solid rgba(14,165,233,.3);border-radius:999px;padding:5px 9px;background:rgba(14,165,233,.08)}
    .v12-role h3{font-size:23px;margin:0}.v12-role p{font-size:13px;line-height:1.65;color:var(--text-muted);margin:0}.v12-role-list{display:grid;gap:7px;margin:2px 0 6px}.v12-role-list span{font-size:12px;color:#cbd5e1}.v12-role-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto}.v12-role-actions>*{flex:1;min-width:170px}
    .v12-servicebar{max-width:1200px;margin:0 auto 34px;padding:0 20px}.v12-servicebar-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.v12-service-item{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.018);font-size:11px;color:var(--text-muted)}.v12-service-item strong{display:block;color:var(--text);font-size:12px;margin-bottom:2px}

    .v12-installer-console{display:flex;flex-direction:column;gap:14px}.v12-console-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.v12-console-head h2{margin:3px 0 5px;font-size:25px}.v12-console-head p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.55}.v12-console-badge{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#6ee7b7;padding:6px 9px;border-radius:999px;white-space:nowrap}
    .v12-profile{border:1px solid var(--border);border-radius:14px;background:rgba(2,6,23,.45);padding:14px}.v12-profile-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.v12-profile-title strong{font-size:12px}.v12-profile-title span{font-size:9px;color:var(--text-muted);text-transform:uppercase;font-weight:800;letter-spacing:.8px}.v12-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v12-profile-field{background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:9px;padding:9px}.v12-profile-field label{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-weight:800;margin-bottom:4px}.v12-profile-field div{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v12-profile-field .missing{color:var(--warning);font-family:'Inter',sans-serif}
    .v12-meter-card{border:1px solid rgba(14,165,233,.35);border-radius:14px;padding:14px;background:rgba(14,165,233,.055)}.v12-meter-card label{display:block;color:var(--text-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}.v12-meter-input{display:flex;gap:8px}.v12-meter-input input{flex:1;min-width:0;padding:11px 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg-darker);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;outline:none}.v12-meter-input input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(14,165,233,.15)}
    .v12-fast-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v12-fast{border:1px solid var(--border);border-radius:11px;padding:12px;text-align:left;background:var(--bg-darker);color:var(--text);cursor:pointer;font-family:inherit;transition:.2s}.v12-fast:hover{border-color:var(--primary);background:rgba(14,165,233,.07);transform:translateY(-1px)}.v12-fast strong{font-size:12px;display:block;margin-bottom:3px}.v12-fast span{font-size:10px;color:var(--text-muted);line-height:1.4;display:block}
    .v12-console-footer{display:flex;gap:8px}.v12-console-footer>*{flex:1}
    .v12-statusline{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0 2px}.v12-status{border:1px solid var(--border);border-radius:9px;padding:7px 8px;font-size:9px;color:var(--text-muted);text-align:center;background:rgba(255,255,255,.018)}.v12-status.done{border-color:rgba(16,185,129,.28);color:#6ee7b7;background:rgba(16,185,129,.06)}.v12-status.active{border-color:rgba(14,165,233,.35);color:#7dd3fc;background:rgba(14,165,233,.07)}
    .v12-work-summary{max-width:680px;width:100%;text-align:left}.v12-work-summary h2{font-size:28px;margin:0 0 8px}.v12-work-summary>p{color:var(--text-muted);line-height:1.6}.v12-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.v12-work-tile{padding:14px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.02)}.v12-work-tile small{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);display:block;margin-bottom:4px}.v12-work-tile strong{font-size:13px;display:block}.v12-work-actions{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}.v12-work-actions>*{flex:1;min-width:180px}
    .v12-complete-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.v12-complete-actions .wide{grid-column:1/-1}
    .v12-secure-note{font-size:9px;color:var(--text-muted);line-height:1.45;margin-top:8px}.v12-secure-note strong{color:#cbd5e1}
    @media(max-width:900px){.v12-role-shell{grid-template-columns:1fr}.v12-servicebar-inner{grid-template-columns:1fr 1fr}.v12-statusline{grid-template-columns:1fr 1fr}}
    @media(max-width:560px){.v12-role-band{padding:0 14px}.v12-role{padding:20px}.v12-servicebar{padding:0 14px}.v12-servicebar-inner,.v12-profile-grid,.v12-fast-grid,.v12-work-grid,.v12-complete-actions{grid-template-columns:1fr}.v12-complete-actions .wide{grid-column:auto}.v12-meter-input{flex-direction:column}.v12-console-footer{flex-direction:column}}


    /* ==========================================================
       V13 STABILITY / ROUTE SEPARATION / COLLISION FIXES
       ========================================================== */
    .dash-route-wrap.route-selected .dash-route-grid{display:none;}
    .dash-route-wrap.route-selected .dash-route-intro{margin-bottom:10px;}
    .dash-route-wrap.route-selected .dash-route-intro p{display:none;}
    .dash-advanced-details{position:relative;z-index:2;overflow:hidden;}
    .dash-advanced-details[open]{z-index:25;overflow:visible;background:var(--bg);box-shadow:0 16px 40px rgba(0,0,0,.35);}
    .dash-advanced-details[open] summary{border-bottom:1px solid var(--border);}
    .dash-advanced-details .dashboard-picker-list{position:relative;z-index:26;background:var(--bg);border-radius:0 0 10px 10px;padding:10px;}
    .generator-sidebar{overflow:visible;min-width:0;}
    .generator-grid>*{min-width:0;}
    .dash-beginner-result{position:relative;top:auto;min-height:0;}
    .studio-card,.generator-sidebar,.terminal-block{isolation:isolate;}
    .btn-primary,.btn-secondary,.copy-btn,.header-action-btn,.dash-switch-btn,.dash-quick-card{position:relative;z-index:3;}
    .v13-config-launch{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0;}
    .v13-config-launch>*{flex:1;min-width:180px;}
    .v13-embed-note{font-size:11px;color:var(--text-muted);line-height:1.55;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.025);margin-top:10px;}
    .v13-expert-card{border:1px solid rgba(14,165,233,.30);background:linear-gradient(180deg,rgba(14,165,233,.07),rgba(255,255,255,.02));}
    .v13-expert-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
    .v13-expert-head span{font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--primary);border:1px solid rgba(14,165,233,.3);border-radius:999px;padding:5px 8px;white-space:nowrap;}
    .v13-expert-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0;}
    .v13-expert-actions .wide{grid-column:1/-1;}
    .v13-inline-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0;}
    .v13-inline-fields label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--text-muted);font-weight:700;}
    .v13-inline-fields input{padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-darker);color:var(--text);min-width:0;}
    .v13-workspace-toolbar{position:absolute;left:18px;right:18px;top:18px;z-index:10;display:flex;justify-content:flex-end;pointer-events:none;}
    .v13-workspace-toolbar a{pointer-events:auto;text-decoration:none;}
    @media(max-width:900px){
      .terminal-header .header-actions{position:static!important;width:auto!important;background:transparent!important;backdrop-filter:none!important;padding:0!important;border:0!important;z-index:auto!important;}
      .terminal-header .header-actions .header-action-btn{height:auto!important;}
      .terminal-block{height:auto!important;min-height:480px!important;margin-bottom:20px;}
      .v13-expert-actions,.v13-inline-fields{grid-template-columns:1fr;}
      .v13-expert-actions .wide{grid-column:auto;}
      .v10-setup-shell{display:block;height:auto;min-height:100dvh;}
      .v10-setup-panel{height:auto;min-height:100dvh;overflow:visible;}
      .v10-workspace{height:auto;min-height:520px;padding:18px;}
      .v10-workspace-frame{height:680px;width:100%;}
      .v10-step-card,.v10-field-group,.dash-advanced-details[open]{overflow:visible;}
      .dash-route-wrap{padding-left:12px;padding-right:12px;}
      .studio-content-container{overflow:visible;}
    }

  
    /* ===== V14 · INTERACTIE + RUSTIGE TOP + LAYOUT FIXES ===== */
    .v14-hero-actions a{box-sizing:border-box}
    .v12-role-band{margin:18px auto 34px}
    .v12-role-shell{gap:14px;background:transparent;border:0;overflow:visible;box-shadow:none}
    .v14-role-choice,.v14-dash-choice{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;text-align:left;width:100%;box-sizing:border-box;min-width:0;max-width:100%;cursor:pointer;position:relative;z-index:2}
    .v14-role-choice{border:1px solid var(--border);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;background:rgba(15,23,42,.96)}
    .v14-role-choice.installer{background:linear-gradient(145deg,rgba(14,165,233,.14),rgba(15,23,42,.98) 54%)}
    .v14-role-choice:hover,.v14-role-choice:focus-visible,.v14-dash-choice:hover,.v14-dash-choice:focus-visible{transform:translateY(-3px);border-color:var(--primary);box-shadow:0 18px 48px rgba(0,0,0,.3);outline:none}
    .v14-role-choice:active,.v14-dash-choice:active{transform:translateY(-1px) scale(.995)}
    .v14-choice-action{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:12px 14px;border-radius:10px;background:rgba(14,165,233,.10);border:1px solid rgba(14,165,233,.24);color:var(--primary);font-size:13px;font-weight:800}
    .v14-choice-action b{font-size:18px;line-height:1}
    .v12-servicebar{margin-bottom:24px}
    .v7-trust{margin-top:18px}
    .dash-route-card{min-height:0;border:1px solid var(--border)}
    .v14-dash-choice{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));padding:26px;border-radius:18px}
    .v14-dash-choice.recommended{border-color:rgba(14,165,233,.45);background:linear-gradient(180deg,rgba(14,165,233,.10),rgba(255,255,255,.018))}
    .v14-dash-choice ul{margin-bottom:18px}
    .dash-advanced-details{overflow:visible;position:relative;z-index:1}
    .dash-advanced-details[open]{z-index:6;padding-bottom:10px}
    .dash-advanced-details summary{position:relative;z-index:7;background:rgba(2,6,23,.92);border-radius:10px}
    .dash-advanced-details .dashboard-picker-list{position:relative;z-index:6;background:var(--bg-darker);border-radius:0 0 10px 10px;padding:10px;margin:0}
    .dashboard-picker-list,.dash-option-item,.generator-sidebar,.studio-card,.dash-beginner-guide{position:relative}
    .dash-option-item{z-index:1}
    .dash-option-item:hover{z-index:2}
    .generator-grid{gap:24px}
    .generator-sidebar{min-width:0;overflow:visible}
    .terminal-block,.dash-beginner-result{position:relative!important;top:auto!important;height:auto;min-height:520px}
    .studio-content-container{overflow:visible}
    .studio-banner{margin-bottom:22px}
    @media(max-width:900px){
      .v6-hero{padding-bottom:38px}
      .v12-role-band{margin-top:0}
      .v12-role-shell,.dash-route-grid{grid-template-columns:1fr}
      .v14-role-choice,.v14-dash-choice{min-height:0}
      .generator-grid{grid-template-columns:1fr!important}
      .terminal-block,.dash-beginner-result{min-height:420px}
    }
    @media(max-width:560px){
      .v6-hero-actions{display:grid!important;grid-template-columns:1fr;width:100%}
      .v6-hero-actions a{width:100%}
      .v12-role-band{padding:0 14px}
      .v14-role-choice{padding:20px}
      .dash-route-wrap{padding:0}
      .v14-dash-choice{padding:20px}
    }

    /* V15: service-first polish + explicit interaction feedback */
    .v15-hero-actions{align-items:center}.v15-meter-cta{min-width:210px;box-shadow:0 12px 32px rgba(14,165,233,.28)}
    .v15-text-link{width:100%;color:var(--text-muted);font-size:12px;font-weight:700;text-decoration:none;margin-top:-4px}.v15-text-link:hover{color:var(--primary)}
    .v15-service-focus{max-width:1160px;margin:6px auto 34px;padding:24px;border:1px solid rgba(14,165,233,.28);border-radius:20px;background:linear-gradient(135deg,rgba(14,165,233,.09),rgba(15,23,42,.94) 55%,rgba(168,85,247,.04));box-shadow:0 18px 45px rgba(0,0,0,.22);display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:center}
    .v15-service-eyebrow{display:block;color:var(--primary);font-size:10px;font-weight:900;letter-spacing:1.2px;margin-bottom:7px}.v15-service-focus h2{margin:0 0 7px;font-size:24px}.v15-service-focus p{margin:0;color:var(--text-muted);font-size:13px;line-height:1.6;max-width:720px}
    .v15-service-focus-actions{display:grid;gap:9px}.v15-service-focus-actions .btn-primary,.v15-service-focus-actions .btn-secondary{width:100%;box-sizing:border-box}.v15-support-link{background:transparent;border:0;color:#cbd5e1;text-align:center;font-weight:700;padding:8px;cursor:pointer}.v15-support-link:hover{color:var(--primary)}
    .v15-service-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;border-top:1px solid var(--border);padding-top:14px}.v15-service-steps span{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:7px}.v15-service-steps b{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:rgba(14,165,233,.12);color:var(--primary);font-size:10px}
    .v15-expert-start{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px;border:1px solid rgba(14,165,233,.25);border-radius:14px;background:rgba(14,165,233,.055);margin-bottom:14px}.v15-expert-start>div{display:flex;flex-direction:column;gap:3px}.v15-expert-start span{font-size:11px;color:var(--text-muted)}
    .v15-ui-toast{position:fixed;top:82px;left:50%;transform:translateX(-50%);z-index:5000;background:#0f172a;border:1px solid rgba(14,165,233,.45);color:#e2e8f0;border-radius:999px;padding:10px 16px;box-shadow:0 12px 35px rgba(0,0,0,.38);font-size:12px;font-weight:800;pointer-events:none}
    .v10-route:focus-visible,.v12-fast:focus-visible,.v14-role-choice:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:3px solid rgba(56,189,248,.45);outline-offset:3px}
    @media(max-width:900px){.v15-service-focus{margin:0 14px 28px;grid-template-columns:1fr}.v15-service-steps{grid-template-columns:1fr 1fr}.v15-expert-start{flex-direction:column;align-items:stretch}.v15-ui-toast{top:68px;max-width:calc(100vw - 30px);text-align:center}}
    @media(max-width:520px){.v15-service-steps{grid-template-columns:1fr}.v15-hero-actions>*{width:100%;box-sizing:border-box}}

    /* V20: prominent R12-productbeeld met technisch gecontroleerde HTML-copy */
    .v20-product-stage{min-height:625px;align-content:center;}
    .v20-product-stage:before{width:430px;height:430px;background:radial-gradient(circle,rgba(14,165,233,.24),rgba(168,85,247,.08) 48%,transparent 72%);}
    .v20-r12-hero-img{width:min(100%,560px)!important;max-height:560px!important;aspect-ratio:1/1;object-fit:contain!important;border-radius:24px!important;border:1px solid rgba(56,189,248,.24)!important;background:#020617;transform:none!important;filter:none!important;box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 45px rgba(14,165,233,.10)!important;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease!important;}
    .v20-r12-hero-img:hover{transform:translateY(-4px) scale(1.01)!important;border-color:rgba(56,189,248,.48)!important;box-shadow:0 34px 80px rgba(0,0,0,.48),0 0 55px rgba(14,165,233,.16)!important;}
    .v20-product-stage .v6-callout{min-height:46px;padding:9px 8px;background:rgba(8,15,30,.94);border-color:rgba(148,163,184,.2);line-height:1.35;}
    @media(max-width:1050px) and (min-width:901px){.v20-product-stage{min-height:555px}.v20-r12-hero-img{max-height:480px!important}.v20-product-stage .v6-callout{font-size:8.5px;}}
    @media(max-width:900px){.v20-product-stage{min-height:auto!important;max-width:600px;padding:0 0 4px}.v20-r12-hero-img{width:min(100%,520px)!important;max-height:none!important;}}

    /* V21: sterkere merkopening, herkenbare Home Assistant-badge en volledige posterzoom */
    .v21-nav-brand{gap:11px;min-width:max-content}.v21-nav-mark{width:44px;height:42px;display:grid;place-items:center;overflow:hidden;border-radius:10px;border:1px solid rgba(56,189,248,.34);background:#071827;box-shadow:0 0 24px rgba(14,165,233,.22);flex:0 0 auto}.v21-nav-mark img{width:100%;height:100%;object-fit:contain;filter:none}.v21-nav-mark b{font-size:13px;color:#fff}.v21-nav-wordmark{display:flex;align-items:baseline;gap:6px;color:#f8fafc!important;line-height:1}.v21-nav-wordmark b{font-size:20px;letter-spacing:-.45px}.v21-nav-wordmark em{font-style:normal;font-size:20px;font-weight:850;color:var(--primary)}
    .v21-hero-container{max-width:1360px;grid-template-columns:minmax(0,.88fr) minmax(530px,1.12fr);gap:44px}.v21-hero-copy{position:relative;z-index:4}.v21-hero-copy:before{content:'';position:absolute;inset:-55px -35px auto -80px;height:360px;z-index:-1;background:radial-gradient(circle,rgba(14,165,233,.13),transparent 68%);filter:blur(18px);pointer-events:none}
    .v21-brand-lockup{display:inline-flex;align-items:center;gap:16px;margin-bottom:8px;padding:10px 16px 10px 10px;border:1px solid rgba(56,189,248,.32);border-radius:18px;background:linear-gradient(135deg,rgba(14,165,233,.10),rgba(15,23,42,.74));box-shadow:0 15px 42px rgba(0,0,0,.24),0 0 34px rgba(14,165,233,.07)}.v21-brand-mark{width:112px;height:108px;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:#071827;border:1px solid rgba(56,189,248,.24);box-shadow:0 0 28px rgba(14,165,233,.22);flex:0 0 auto}.v21-brand-mark img{width:100%;height:100%;object-fit:contain;filter:none}.v21-brand-mark b{font-size:14px;color:#fff}.v21-brand-copy{display:flex;flex-direction:column;text-align:left}.v21-brand-copy span{font-size:10px;color:#38bdf8;font-weight:900;letter-spacing:1.45px}.v21-brand-copy strong{margin-top:4px;color:#f8fafc;font-size:14px;letter-spacing:-.1px;max-width:190px;line-height:1.35}
    .v21-ha-badge{display:inline-flex;align-items:center;gap:11px;max-width:100%;margin:0 0 20px;padding:8px 13px 8px 8px;border:1px solid rgba(3,169,244,.36);border-radius:14px;background:linear-gradient(135deg,rgba(3,169,244,.11),rgba(15,23,42,.74));color:inherit;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.18);transition:.25s ease}.v21-ha-badge:hover{transform:translateY(-2px);border-color:#03a9f4;box-shadow:0 15px 38px rgba(3,169,244,.18)}.v21-ha-logo{width:48px;height:48px;object-fit:cover;border-radius:10px;background:#fff;flex:0 0 auto}.v21-ha-logo-fallback{width:48px;height:48px;border-radius:10px;background:#03a9f4;display:grid;place-items:center;font-size:22px;flex:0 0 auto}.v21-ha-copy{display:flex;min-width:0;flex-direction:column;text-align:left}.v21-ha-copy small{color:#94a3b8;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px}.v21-ha-copy strong{color:#f8fafc;font-size:13px;line-height:1.3}.v21-ha-arrow{color:#38bdf8;font-weight:900;margin-left:3px}
    .v21-hero-copy h1{margin-top:13px}.v21-hero-copy .v6-proof{margin-bottom:16px}.v21-hero-copy .v6-lead{margin-bottom:18px!important}
    .v21-product-stage{min-height:700px}.v21-product-stage:before{width:520px;height:520px;opacity:.95}.v21-poster-button{grid-column:1/-1;grid-row:1;position:relative;z-index:2;width:min(100%,620px);padding:0;border:0;border-radius:27px;background:transparent;cursor:zoom-in;color:#fff}.v21-poster-button .v20-r12-hero-img{display:block;width:100%!important;max-width:620px!important;max-height:620px!important}.v21-poster-button:hover .v20-r12-hero-img,.v21-poster-button:focus-visible .v20-r12-hero-img{transform:translateY(-5px) scale(1.012)!important;border-color:rgba(56,189,248,.64)!important;box-shadow:0 38px 90px rgba(0,0,0,.5),0 0 65px rgba(14,165,233,.2)!important}.v21-poster-button:focus-visible{outline:3px solid rgba(56,189,248,.55);outline-offset:6px}.v21-zoom-cue{position:absolute;right:15px;bottom:15px;z-index:5;display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(2,6,23,.86);backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.36);font-size:11px;font-weight:850;letter-spacing:.15px}.v21-zoom-cue b{font-size:16px;color:#38bdf8}
    html.v21-modal-open,body.v21-modal-open{overflow:hidden!important;overscroll-behavior:none}
    .v21-poster-lightbox{position:fixed;inset:0;z-index:9000;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100dvh;padding:max(22px,env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) max(22px,env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:rgba(2,6,23,.94);backdrop-filter:blur(14px);touch-action:manipulation;cursor:zoom-out}.v21-lightbox-inner{position:relative;display:flex;align-items:center;justify-content:center;width:min(94vw,1000px);max-width:100%;height:auto;max-height:calc(100dvh - 44px);min-height:0}.v21-lightbox-img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 44px);aspect-ratio:1/1;object-fit:contain;border-radius:22px;border:1px solid rgba(56,189,248,.34);background:#020617;box-shadow:0 40px 120px rgba(0,0,0,.72),0 0 80px rgba(14,165,233,.15);touch-action:manipulation;cursor:zoom-out;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.v21-lightbox-img:focus-visible{outline:3px solid #38bdf8;outline-offset:4px}.v21-lightbox-close{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:4;min-width:96px;min-height:44px;padding:0 15px;border:1px solid rgba(255,255,255,.30);border-radius:12px;background:rgba(2,6,23,.94);backdrop-filter:blur(10px);color:#fff;font:inherit;font-size:12px;font-weight:850;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.45)}.v21-lightbox-close:hover,.v21-lightbox-close:focus-visible{border-color:#38bdf8;color:#38bdf8;outline:2px solid rgba(56,189,248,.42);outline-offset:2px}
    @media(max-width:1280px) and (min-width:901px){.mobile-menu-btn{display:block}.nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;box-sizing:border-box;background:rgba(15,23,42,.97);backdrop-filter:blur(12px);padding:12px 24px 18px;gap:6px;border-bottom:1px solid var(--border);box-shadow:0 18px 35px rgba(0,0,0,.34)}.nav-links.mobile-open{display:flex}.nav-links a{width:100%;box-sizing:border-box;padding:10px 0;font-size:14px;border-bottom:1px solid rgba(255,255,255,.05)}.nav-divider{display:none}.lang-switcher{align-self:flex-start;margin-top:5px}}
    @media(max-width:1160px) and (min-width:901px){.v21-hero-container{grid-template-columns:minmax(0,.95fr) minmax(460px,1.05fr);gap:30px}.v21-product-stage{min-height:610px}.v21-poster-button{width:min(100%,535px)}.v21-poster-button .v20-r12-hero-img{max-width:535px!important;max-height:535px!important}.v21-brand-copy strong{font-size:13px}}
    @media(max-width:900px){.v21-hero-container{grid-template-columns:1fr;gap:34px}.v21-hero-copy:before{inset:-30px 0 auto;height:300px}.v21-brand-lockup{margin-left:auto;margin-right:auto}.v21-ha-badge{margin-left:auto;margin-right:auto}.v21-product-stage{min-height:auto!important;width:100%;max-width:660px;padding:0 0 4px}.v21-poster-button{width:min(100%,600px)}.v21-poster-button .v20-r12-hero-img{max-width:600px!important;max-height:none!important}.v21-zoom-cue{right:12px;bottom:12px}}
    @media(max-width:560px){.v21-nav-mark{width:38px;height:37px}.v21-nav-wordmark b,.v21-nav-wordmark em{font-size:18px}.v21-brand-lockup{width:100%;box-sizing:border-box;gap:12px;padding:9px 12px 9px 9px}.v21-brand-mark{width:84px;height:81px}.v21-brand-copy span{font-size:8px;letter-spacing:1.1px}.v21-brand-copy strong{font-size:11px}.v21-hero-copy h1{font-size:clamp(38px,12vw,52px);letter-spacing:-1.8px}.v21-hero-copy .v6-lead{font-size:15px!important;line-height:1.6!important}.v21-hero-copy .v6-hero-note{display:none}.v21-ha-badge{width:100%;box-sizing:border-box}.v21-ha-logo,.v21-ha-logo-fallback{width:44px;height:44px}.v21-ha-copy strong{font-size:12px}.v21-ha-arrow{margin-left:auto}.v21-zoom-cue{padding:8px 10px;font-size:10px}.v21-poster-lightbox{align-items:center;padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}.v21-lightbox-inner{width:100%;height:auto;max-height:calc(100dvh - 16px)}.v21-lightbox-img{max-height:calc(100dvh - 16px);border-radius:14px}.v21-lightbox-close{top:max(8px,env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));min-width:100px;min-height:46px;background:rgba(2,6,23,.97)}}
    @media(max-height:560px){.v21-poster-lightbox{padding:6px}.v21-lightbox-inner,.v21-lightbox-img{max-height:calc(100dvh - 12px)}.v21-lightbox-close{top:max(6px,env(safe-area-inset-top,0px));right:max(6px,env(safe-area-inset-right,0px));min-height:40px}}

    /* V23: rustige beeldhero — uitsluitend huislogo links, R12-meter rechts */
    .v23-showcase{padding-bottom:34px}.v23-showcase-grid{max-width:1180px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px;align-items:center}.v23-logo-only{min-height:590px;display:flex;align-items:center;justify-content:center}.v23-logo-only:before{inset:8% -4% 8% -8%;height:auto;background:radial-gradient(circle,rgba(14,165,233,.17),rgba(168,85,247,.06) 48%,transparent 72%);filter:blur(24px)}.v23-logo-only>*:not(.v21-brand-lockup){display:none!important}.v23-logo-only .v21-brand-lockup{width:min(100%,560px);display:block;margin:0;padding:0;border:0;border-radius:30px;background:transparent;box-shadow:0 34px 90px rgba(0,0,0,.48),0 0 65px rgba(14,165,233,.13);overflow:hidden}.v23-logo-only .v21-brand-mark{display:block;width:100%;height:auto;aspect-ratio:860/827;border:1px solid rgba(56,189,248,.24);border-radius:30px;background:#071827;box-shadow:none}.v23-logo-only .v21-brand-mark img{display:block;width:100%;height:100%;object-fit:contain}.v23-logo-only .v21-brand-copy{display:none}
    .v23-meter-stage{min-height:590px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;padding:0}.v23-meter-stage:before{width:470px;height:470px;background:radial-gradient(circle,rgba(14,165,233,.22),rgba(249,115,22,.06) 52%,transparent 72%)}.v23-meter-stage .v6-callout,.v23-meter-stage>.v21-poster-button{display:none!important}.v23-meter-button{grid-column:1;grid-row:1;position:relative;z-index:3;width:min(100%,520px);padding:0;border:0;border-radius:30px;background:transparent;cursor:zoom-in;color:#fff}.v23-meter-img{display:block!important;width:100%!important;max-width:520px!important;max-height:565px!important;aspect-ratio:1019/1100;object-fit:contain!important;border-radius:30px!important;border:1px solid rgba(56,189,248,.25)!important;background:#020617;transform:none!important;filter:none!important;box-shadow:0 34px 90px rgba(0,0,0,.5),0 0 60px rgba(14,165,233,.12)!important;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease!important}.v23-meter-button:hover .v23-meter-img,.v23-meter-button:focus-visible .v23-meter-img{transform:translateY(-5px) scale(1.012)!important;border-color:rgba(56,189,248,.62)!important;box-shadow:0 40px 100px rgba(0,0,0,.56),0 0 72px rgba(14,165,233,.2)!important}.v23-meter-button:focus-visible{outline:3px solid rgba(56,189,248,.55);outline-offset:6px}.v23-meter-zoom-icon{position:absolute;right:16px;bottom:16px;z-index:4;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(2,6,23,.86);backdrop-filter:blur(10px);color:#38bdf8;font-size:20px;font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.38)}
    .v23-hero-actionbar{max-width:1160px;margin:18px auto 0;padding:14px 16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;border:1px solid rgba(56,189,248,.18);border-radius:18px;background:linear-gradient(135deg,rgba(14,165,233,.07),rgba(15,23,42,.78));box-shadow:0 15px 42px rgba(0,0,0,.22)}.v23-hero-actionbar .v21-ha-badge{margin:0;white-space:nowrap}.v23-action-buttons{justify-content:flex-end!important;align-items:center;margin:0!important}.v23-action-buttons .v15-text-link{width:auto;margin:0 0 0 2px;padding:10px 5px}
    .v23-product-poster{max-width:900px;margin:0 auto 28px;padding:0}.v23-product-poster button{position:relative;display:block;width:100%;padding:0;border:0;border-radius:24px;background:transparent;color:#fff;cursor:zoom-in}.v23-product-poster img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border:1px solid rgba(56,189,248,.22);border-radius:24px;background:#020617;box-shadow:0 24px 68px rgba(0,0,0,.4);transition:.3s ease}.v23-product-poster button:hover img,.v23-product-poster button:focus-visible img{transform:translateY(-4px);border-color:rgba(56,189,248,.5);box-shadow:0 30px 78px rgba(0,0,0,.48),0 0 45px rgba(14,165,233,.13)}.v23-product-poster button:focus-visible{outline:3px solid rgba(56,189,248,.5);outline-offset:6px}.v23-poster-cue{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(2,6,23,.88);font-size:11px;font-weight:850;box-shadow:0 10px 28px rgba(0,0,0,.35)}
    .v23-lightbox-img{aspect-ratio:auto!important}
    @media(max-width:1160px) and (min-width:901px){.v23-showcase-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}.v23-logo-only,.v23-meter-stage{min-height:520px}.v23-logo-only .v21-brand-lockup{width:min(100%,500px)}.v23-meter-button{width:min(100%,470px)}.v23-meter-img{max-width:470px!important;max-height:510px!important}.v23-hero-actionbar{margin-left:20px;margin-right:20px}}
    @media(max-width:900px){.v23-showcase-grid{grid-template-columns:1fr;gap:24px}.v23-logo-only{min-height:auto}.v23-logo-only .v21-brand-lockup{width:min(100%,520px)}.v23-meter-stage{min-height:auto;max-width:580px;width:100%;margin:0 auto}.v23-meter-button{width:min(94%,520px)}.v23-meter-img{max-width:520px!important;max-height:none!important}.v23-hero-actionbar{margin:22px 14px 0;grid-template-columns:1fr}.v23-hero-actionbar .v21-ha-badge{justify-self:center}.v23-action-buttons{justify-content:center!important}}
    @media(max-width:560px){.v23-showcase{padding-top:100px}.v23-showcase-grid{gap:20px}.v23-logo-only .v21-brand-lockup,.v23-logo-only .v21-brand-mark{border-radius:20px}.v23-meter-img{border-radius:20px!important}.v23-meter-zoom-icon{right:11px;bottom:11px;width:38px;height:38px}.v23-hero-actionbar{padding:12px}.v23-hero-actionbar .v21-ha-badge{white-space:normal}.v23-action-buttons{display:grid!important;grid-template-columns:1fr;width:100%}.v23-action-buttons>*{width:100%!important;box-sizing:border-box}.v23-product-poster{margin-bottom:22px}.v23-product-poster img{border-radius:16px}.v23-poster-cue{right:10px;bottom:10px;padding:8px 10px;font-size:10px}}

    /* V25: teruggeschakeld naar de rustige, premium beeldverhouding */
    .v23-showcase{padding-top:128px;padding-bottom:44px}.v23-showcase-grid{max-width:1000px;gap:76px}.v23-logo-only,.v23-meter-stage{min-height:440px}.v23-logo-only .v21-brand-lockup{width:min(100%,420px);border-radius:23px;box-shadow:0 24px 62px rgba(0,0,0,.38),0 0 40px rgba(14,165,233,.08)}.v23-logo-only .v21-brand-mark{border-radius:23px}.v23-meter-stage:before{width:360px;height:360px;opacity:.72}.v23-meter-button{width:min(100%,375px);border-radius:23px}.v23-meter-img{max-width:375px!important;max-height:410px!important;border-radius:23px!important;box-shadow:0 24px 64px rgba(0,0,0,.4),0 0 40px rgba(14,165,233,.08)!important}.v23-meter-button:hover .v23-meter-img,.v23-meter-button:focus-visible .v23-meter-img{box-shadow:0 30px 72px rgba(0,0,0,.46),0 0 48px rgba(14,165,233,.14)!important}.v23-meter-zoom-icon{right:12px;bottom:12px;width:38px;height:38px;font-size:18px}.v23-hero-actionbar{max-width:1000px;margin-top:16px;padding:12px 14px;box-shadow:0 12px 34px rgba(0,0,0,.18)}
    @media(max-width:1160px) and (min-width:901px){.v23-showcase-grid{max-width:900px;grid-template-columns:1fr 1fr;gap:52px}.v23-logo-only,.v23-meter-stage{min-height:410px}.v23-logo-only .v21-brand-lockup{width:min(100%,390px)}.v23-meter-button{width:min(100%,350px)}.v23-meter-img{max-width:350px!important;max-height:380px!important}.v23-hero-actionbar{max-width:900px}}
    @media(max-width:900px){.v23-showcase{padding-top:108px}.v23-showcase-grid{max-width:520px;gap:26px}.v23-logo-only .v21-brand-lockup{width:min(100%,380px)}.v23-meter-stage{max-width:520px}.v23-meter-button{width:min(92%,340px)}.v23-meter-img{max-width:340px!important;max-height:none!important}.v23-hero-actionbar{max-width:520px;margin-top:20px}}
    @media(max-width:560px){.v23-showcase{padding-top:96px}.v23-showcase-grid{gap:22px}.v23-logo-only .v21-brand-lockup{width:min(92%,340px)}.v23-meter-button{width:min(88%,315px)}.v23-meter-img{max-width:315px!important}.v23-hero-actionbar{margin-top:18px}}

    /* V26: complete premium polish — compacte navigatie, duidelijke acties en rustige kaarten */
    header{border-bottom-color:rgba(148,163,184,.10);box-shadow:0 8px 30px rgba(0,0,0,.12)}
    .nav-container{max-width:1240px;padding:11px 20px}
    .nav-links{gap:11px}
    .nav-links>a{font-size:12px}
    .v26-nav-setup{display:inline-flex;align-items:center;min-height:38px;box-sizing:border-box;padding:8px 12px!important;border:1px solid rgba(56,189,248,.24);border-radius:10px;background:rgba(14,165,233,.08);color:#7dd3fc!important;font-weight:750!important}
    .v26-nav-setup:hover,.v26-nav-setup:focus-visible{background:rgba(14,165,233,.16);border-color:rgba(56,189,248,.52);color:#e0f2fe!important;outline:none}
    .v26-portal-menu{position:relative;color:var(--text-muted)}
    .v26-portal-menu summary{display:flex;align-items:center;gap:6px;min-height:38px;padding:0 5px;box-sizing:border-box;list-style:none;color:var(--text-muted);font-size:12px;font-weight:650;cursor:pointer;transition:.2s}
    .v26-portal-menu summary::-webkit-details-marker{display:none}
    .v26-portal-menu summary span{font-size:15px;transition:transform .2s ease}
    .v26-portal-menu[open] summary,.v26-portal-menu summary:hover,.v26-portal-menu summary:focus-visible{color:var(--text);outline:none}
    .v26-portal-menu[open] summary span{transform:rotate(180deg)}
    .v26-portal-popover{position:absolute;right:0;top:calc(100% + 11px);width:318px;padding:8px;border:1px solid rgba(148,163,184,.16);border-radius:15px;background:rgba(10,18,34,.98);box-shadow:0 22px 55px rgba(0,0,0,.46);backdrop-filter:blur(18px)}
    .v26-portal-popover button,.v26-portal-popover a{display:block;width:100%;box-sizing:border-box;padding:11px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:.18s}
    .v26-portal-popover button:hover,.v26-portal-popover button:focus-visible,.v26-portal-popover a:hover,.v26-portal-popover a:focus-visible{background:rgba(14,165,233,.10);outline:none}
    .v26-portal-popover b{display:block;font-size:12px;line-height:1.35}
    .v26-portal-popover small{display:block;margin:3px 0 0 24px;color:var(--text-muted);font-size:10px;line-height:1.4}
    .v75-portal-group{margin-top:6px;padding-top:7px;border-top:1px solid rgba(148,163,184,.13)}
    .v75-portal-group-label{display:block;padding:5px 12px 3px;color:#64748b;font-size:8px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
    .v75-portal-demo b{color:#7dd3fc}.v75-portal-cloud b{color:#c4b5fd}.v75-portal-green b{color:#6ee7b7}

    .v23-hero-actionbar{border-color:rgba(148,163,184,.14);border-radius:17px;background:linear-gradient(135deg,rgba(14,165,233,.055),rgba(15,23,42,.76))}
    .v23-action-buttons{gap:10px!important}
    .v26-setup-cta{min-height:50px;padding:13px 22px;border-color:rgba(56,189,248,.25);background:rgba(15,23,42,.88);font-size:14px;font-weight:800;white-space:nowrap}
    .v26-setup-cta:hover,.v26-setup-cta:focus-visible{border-color:rgba(56,189,248,.55);background:rgba(14,165,233,.11);outline:none}
    .v26-dashboard-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 6px;color:#94a3b8;text-decoration:none;font-size:12px;font-weight:750;white-space:nowrap;transition:.2s}
    .v26-dashboard-link:hover,.v26-dashboard-link:focus-visible{color:#e2e8f0;outline:none}

    .v23-logo-only .v21-brand-mark,.v23-meter-img,.v23-product-poster img{border-color:rgba(148,163,184,.16)!important}
    .v7-product-card,.v7-spec-card,.feature-card,.v12-service-item{border-color:rgba(148,163,184,.14);border-radius:16px}
    .v12-role-band{margin:4px auto 32px}
    .v12-role-shell{gap:12px}
    .v12-role{min-height:218px;padding:21px;gap:9px;border-color:rgba(148,163,184,.15);border-radius:17px;box-shadow:0 14px 38px rgba(0,0,0,.18)}
    .v12-role-top{align-items:center}
    .v12-role-icon{width:42px;height:42px;border-radius:12px;font-size:20px}
    .v12-role h3{font-size:20px;line-height:1.25}
    .v12-role p{font-size:12.5px;line-height:1.55}
    .v12-role-list{gap:5px;margin:1px 0 4px}
    .v12-role-list span{font-size:11px;line-height:1.35}
    .v14-choice-action{padding:10px 12px;border-radius:10px;font-size:12px}

    @keyframes v26Reveal{from{opacity:0;transform:translateY(12px) scale(.988)}to{opacity:1;transform:translateY(0) scale(1)}}
    .v23-logo-only .v21-brand-lockup{animation:v26Reveal .62s cubic-bezier(.2,.75,.25,1) both}
    .v23-meter-button{animation:v26Reveal .62s .09s cubic-bezier(.2,.75,.25,1) both}
    .v23-hero-actionbar{animation:v26Reveal .55s .18s cubic-bezier(.2,.75,.25,1) both}
    .v23-meter-zoom-icon{opacity:.68;transform:translateY(2px);transition:opacity .22s ease,transform .22s ease,background .22s ease}
    .v23-meter-button:hover .v23-meter-zoom-icon,.v23-meter-button:focus-visible .v23-meter-zoom-icon{opacity:1;transform:translateY(0);background:rgba(2,6,23,.94)}

    @media(max-width:1280px){
      .v26-portal-menu{width:100%}
      .v26-portal-menu summary{width:100%;min-height:0;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;justify-content:space-between}
      .v26-portal-popover{position:static;width:100%;box-sizing:border-box;margin-top:5px;box-shadow:none;background:rgba(2,6,23,.5)}
      .v26-portal-popover button{padding:11px}
      .nav-links .v26-nav-setup{padding:10px 12px!important;border-bottom:1px solid rgba(56,189,248,.24);width:100%}
    }
    @media(max-width:900px){
      .v23-action-buttons{gap:9px!important}
      .v26-dashboard-link{min-height:40px;padding:8px!important}
      .v12-role-shell{gap:12px}
      .v12-role{min-height:0}
    }
    @media(max-width:560px){
      .nav-container{padding:10px 14px}
      .v23-hero-actionbar{border-radius:15px}
      .v23-hero-actionbar .v21-ha-badge{justify-self:stretch}
      .v26-setup-cta{min-height:48px}
      .v12-role{padding:18px}
      .v12-role-badge{font-size:8px;letter-spacing:.75px}
    }
    @media(pointer:coarse){.v23-meter-zoom-icon{opacity:.9;transform:none}}
    @media(prefers-reduced-motion:reduce){
      .v23-logo-only .v21-brand-lockup,.v23-meter-button,.v23-hero-actionbar{animation:none}
      .v23-meter-img,.v23-meter-zoom-icon,.v12-role{transition:none!important}
    }

    /* V27: één complete R12-productvisual als rustige openingshero */
    .v23-showcase{padding-top:102px;padding-bottom:38px}
    .v23-showcase-grid{display:block;max-width:1040px}
    .v23-showcase-grid>.v23-logo-only,.v23-showcase-grid>.v23-meter-stage{display:none!important}
    .v27-hero-poster{position:relative;z-index:2;width:min(760px,88vw);margin:0 auto;animation:v26Reveal .62s cubic-bezier(.2,.75,.25,1) both}
    .v27-hero-poster:before{content:"";position:absolute;z-index:-1;inset:8% 3%;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.20),rgba(59,130,246,.07) 46%,transparent 72%);filter:blur(34px)}
    .v27-hero-poster-button{position:relative;display:block;width:100%;padding:0;border:0;border-radius:22px;background:#020617;color:#fff;cursor:zoom-in;box-shadow:0 28px 72px rgba(0,0,0,.42),0 0 48px rgba(14,165,233,.09);transition:transform .28s ease,box-shadow .28s ease}
    .v27-hero-poster-button:hover,.v27-hero-poster-button:focus-visible{transform:translateY(-4px);box-shadow:0 34px 82px rgba(0,0,0,.48),0 0 58px rgba(14,165,233,.15);outline:none}
    .v27-hero-poster-button:focus-visible{outline:3px solid rgba(56,189,248,.58);outline-offset:6px}
    .v27-hero-poster-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border:1px solid rgba(148,163,184,.16);border-radius:22px;background:#020617}
    .v27-hero-zoom{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(255,255,255,.20);border-radius:999px;background:rgba(2,6,23,.88);color:#e0f2fe;font-size:11px;font-weight:800;box-shadow:0 10px 28px rgba(0,0,0,.38);backdrop-filter:blur(10px)}
    .v27-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
    .v23-showcase-grid+.v23-hero-actionbar{margin-top:18px}
    @media(max-width:900px){
      .v23-showcase{padding-top:92px;padding-bottom:32px}
      .v23-showcase-grid{max-width:720px;padding-left:16px;padding-right:16px}
      .v27-hero-poster{width:min(680px,100%)}
    }
    @media(max-width:560px){
      .v23-showcase{padding-top:82px;padding-bottom:26px}
      .v23-showcase-grid{padding-left:10px;padding-right:10px}
      .v27-hero-poster-button,.v27-hero-poster-img{border-radius:16px}
      .v27-hero-zoom{right:9px;bottom:9px;padding:7px 9px;font-size:9px}
    }
    @media(prefers-reduced-motion:reduce){.v27-hero-poster{animation:none}.v27-hero-poster-button{transition:none}}

    /* V28: rustige, verwelkomende openingspagina met compacte productposter */
    .v23-showcase{
      min-height:760px;
      min-height:100svh;
      padding:112px 24px 56px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .v23-showcase-grid{
      display:grid;
      width:100%;
      max-width:1280px;
      grid-template-columns:minmax(0,1.12fr) minmax(320px,.72fr);
      gap:clamp(54px,7vw,108px);
      align-items:center;
    }
    .v23-showcase-grid>.v23-logo-only,
    .v23-showcase-grid>.v23-meter-stage{display:none!important}
    .v28-hero-copy{
      max-width:700px;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      position:relative;
      z-index:2;
      animation:v26Reveal .56s cubic-bezier(.2,.75,.25,1) both;
    }
    .v28-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-bottom:24px;
      padding:8px 13px;
      border:1px solid rgba(56,189,248,.34);
      border-radius:999px;
      background:rgba(14,165,233,.055);
      color:#38bdf8;
      font-size:11px;
      line-height:1;
      font-weight:850;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .v28-hero-title{
      max-width:690px;
      margin:0 0 24px;
      color:#f8fafc;
      font-size:clamp(48px,5.15vw,72px);
      line-height:.99;
      letter-spacing:-.052em;
      font-weight:900;
    }
    .v28-hero-title span{
      display:block;
      margin-top:7px;
      color:#38bdf8;
      background:linear-gradient(100deg,#18b6ec 2%,#4387f5 52%,#9b5cf6 96%);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .v28-hero-lead{
      max-width:660px;
      margin:0 0 24px;
      color:#d6deeb;
      font-size:clamp(16px,1.45vw,19px);
      line-height:1.72;
      font-weight:500;
    }
    .v28-proof{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin:0 0 28px;
    }
    .v28-proof span{
      min-height:31px;
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 11px;
      border:1px solid rgba(148,163,184,.27);
      border-radius:9px;
      background:rgba(255,255,255,.035);
      color:#aebbd0;
      font-size:11px;
      font-weight:800;
    }
    .v28-proof img{width:17px;height:17px;object-fit:contain;border-radius:4px}
    .v28-hero-actions{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:13px;
      margin:0;
    }
    .v28-hero-actions .btn-primary,
    .v28-hero-actions .btn-secondary{
      min-height:58px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0 28px!important;
      border-radius:12px;
      font-size:15px!important;
      text-decoration:none;
    }
    .v28-setup-link{
      width:100%;
      margin-top:0;
      color:#94a3b8;
      font-size:12px;
      font-weight:750;
      text-decoration:none;
      transition:color .2s ease;
    }
    .v28-setup-link:hover,.v28-setup-link:focus-visible{color:#38bdf8}
    .v28-hero-note{
      max-width:650px;
      margin:20px 0 0;
      color:#9cabc0;
      font-size:12px;
      line-height:1.55;
    }
    .v28-hero-note strong{color:#dbe7f5}
    .v27-hero-poster{
      width:min(100%,420px);
      margin:0;
      justify-self:end;
      animation:v26Reveal .62s .08s cubic-bezier(.2,.75,.25,1) both;
    }
    .v27-hero-poster:before{
      inset:10% 4%;
      opacity:.42;
      filter:blur(30px);
    }
    .v27-hero-poster-button{
      border-radius:20px;
      box-shadow:0 22px 54px rgba(0,0,0,.34);
    }
    .v27-hero-poster-button:hover,.v27-hero-poster-button:focus-visible{
      transform:translateY(-2px);
      box-shadow:0 27px 64px rgba(0,0,0,.4),0 0 34px rgba(14,165,233,.08);
    }
    .v27-hero-poster-img{border-radius:20px;border-color:rgba(148,163,184,.22)}
    .v27-hero-zoom{
      right:11px;
      bottom:11px;
      padding:7px 10px;
      border-color:rgba(255,255,255,.16);
      background:rgba(2,6,23,.82);
      color:#cfeeff;
      font-size:9px;
      box-shadow:0 8px 22px rgba(0,0,0,.3);
    }
    .v23-hero-actionbar{display:none!important}
    @media(max-width:1050px){
      .v23-showcase-grid{grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:46px}
      .v28-hero-title{font-size:clamp(46px,5.7vw,62px)}
      .v27-hero-poster{width:min(100%,370px)}
    }
    @media(max-width:820px){
      .v23-showcase{min-height:auto;padding:102px 20px 48px}
      .v23-showcase-grid{max-width:680px;grid-template-columns:1fr;gap:38px}
      .v28-hero-copy{max-width:650px;align-items:center;text-align:center}
      .v28-hero-title{font-size:clamp(44px,9vw,60px)}
      .v28-hero-title span{margin-top:5px}
      .v28-hero-lead,.v28-hero-note{margin-left:auto;margin-right:auto}
      .v28-proof,.v28-hero-actions{justify-content:center}
      .v28-setup-link{text-align:center}
      .v27-hero-poster{width:min(100%,380px);justify-self:center}
    }
    @media(max-width:560px){
      .v23-showcase{padding:90px 16px 38px}
      .v23-showcase-grid{padding:0;gap:31px}
      .v28-eyebrow{margin-bottom:18px;font-size:10px}
      .v28-hero-title{margin-bottom:19px;font-size:clamp(39px,12vw,50px);line-height:1.01}
      .v28-hero-lead{margin-bottom:20px;font-size:15px;line-height:1.62}
      .v28-proof{gap:7px;margin-bottom:23px}
      .v28-proof span{padding:6px 9px;font-size:10px}
      .v28-hero-actions{width:100%;gap:10px}
      .v28-hero-actions .btn-primary,.v28-hero-actions .btn-secondary{width:100%;min-height:54px}
      .v28-hero-note{margin-top:17px;font-size:11px}
      .v27-hero-poster{width:min(100%,340px)}
      .v27-hero-poster-button,.v27-hero-poster-img{border-radius:16px}
      .v27-hero-zoom{right:8px;bottom:8px;padding:6px 8px;font-size:8px}
    }
    @media(prefers-reduced-motion:reduce){.v28-hero-copy{animation:none}}

    /* V29: rustige galerij met echte Home Assistant-dashboardvoorbeelden */
    .v29-dashboard-section{padding-top:18px}
    .v29-dashboard-intro{max-width:820px;margin:0 auto 26px;text-align:center}
    .v29-dashboard-eyebrow{display:inline-flex;align-items:center;padding:7px 11px;border:1px solid rgba(56,189,248,.22);border-radius:999px;background:rgba(14,165,233,.06);color:#7dd3fc;font-size:10px;font-weight:850;letter-spacing:.8px;text-transform:uppercase}
    .v29-dashboard-intro .section-title{margin:14px 0 8px}
    .v29-dashboard-intro .section-subtitle{margin:0 auto}
    .v29-dashboard-gallery{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
    .v29-dashboard-card{min-width:0;overflow:hidden;border:1px solid rgba(148,163,184,.20);border-radius:17px;background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(8,15,29,.94));box-shadow:0 16px 42px rgba(0,0,0,.20);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
    .v29-dashboard-card:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.34);box-shadow:0 20px 48px rgba(0,0,0,.28)}
    .v29-dashboard-preview{position:relative;display:flex;width:100%;height:205px;padding:0;border:0;border-bottom:1px solid rgba(148,163,184,.16);background:#080c13;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
    .v29-dashboard-preview:focus-visible{outline:3px solid rgba(56,189,248,.62);outline-offset:-3px}
    .v29-dashboard-preview img{display:block;width:100%;height:100%;object-fit:contain;background:#080c13;transition:transform .28s ease}
    .v29-dashboard-preview:hover img,.v29-dashboard-preview:focus-visible img{transform:scale(1.015)}
    .v29-dashboard-zoom{position:absolute;right:10px;bottom:10px;padding:6px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(2,6,23,.88);color:#e0f2fe;font-size:9px;font-weight:800;backdrop-filter:blur(8px)}
    .v29-dashboard-copy{padding:16px 17px 18px}
    .v29-dashboard-tag{display:block;margin-bottom:8px;color:#38bdf8;font-size:9px;font-weight:850;letter-spacing:.75px;text-transform:uppercase}
    .v29-dashboard-copy h3{margin:0 0 7px;font-size:16px;line-height:1.25;color:#f8fafc}
    .v29-dashboard-copy p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.65}
    .v29-dashboard-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:22px}
    .v29-live-demo-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;padding:0 22px;border:0;border-radius:10px;background:linear-gradient(135deg,#0ea5e9,#7c3aed);color:#fff;font:inherit;font-size:13px;font-weight:850;text-decoration:none;box-shadow:0 10px 28px rgba(14,165,233,.22);cursor:pointer;transition:.2s}
    .v29-live-demo-link:hover,.v29-live-demo-link:focus-visible{background:linear-gradient(135deg,#38bdf8,#8b5cf6);color:#fff;box-shadow:0 14px 34px rgba(124,58,237,.28);outline:none;transform:translateY(-1px)}
    .v29-dashboard-source{color:#7dd3fc;font-size:12px;font-weight:750;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.30);padding:5px 1px}
    .v29-dashboard-source:hover,.v29-dashboard-source:focus-visible{color:#e0f2fe;border-color:#e0f2fe}
    .v29-dashboard-note{max-width:820px;margin:16px auto 0;text-align:center;color:#718096;font-size:10px;line-height:1.6}
    @media(max-width:900px){
      .v29-dashboard-gallery{grid-template-columns:1fr 1fr;max-width:760px}
      .v29-dashboard-card:first-child{grid-column:1/-1}
      .v29-dashboard-card:first-child .v29-dashboard-preview{height:260px}
    }
    @media(max-width:620px){
      .v29-dashboard-section{padding-top:10px}
      .v29-dashboard-gallery{grid-template-columns:1fr;gap:13px}
      .v29-dashboard-card:first-child{grid-column:auto}
      .v29-dashboard-preview,.v29-dashboard-card:first-child .v29-dashboard-preview{height:auto;aspect-ratio:16/10}
      .v29-dashboard-copy{padding:14px 15px 16px}
      .v29-dashboard-actions{align-items:stretch;gap:12px}
      .v29-dashboard-actions .btn-secondary,.v29-dashboard-actions .v29-live-demo-link{width:100%}
      .v29-dashboard-source{text-align:center}
    }
    @media(prefers-reduced-motion:reduce){.v29-dashboard-card,.v29-dashboard-preview img{transition:none}}

    /* V74: lokaal als fundament, optionele veilige toegang op afstand */
    .v74-remote-section{padding-top:34px;padding-bottom:34px}
    .v74-remote-shell{position:relative;max-width:1120px;margin:0 auto;overflow:hidden;border:1px solid rgba(56,189,248,.23);border-radius:25px;background:radial-gradient(circle at 87% 20%,rgba(168,85,247,.14),transparent 34%),radial-gradient(circle at 7% 74%,rgba(14,165,233,.12),transparent 34%),linear-gradient(145deg,rgba(9,21,38,.97),rgba(8,11,27,.98));box-shadow:0 24px 65px rgba(0,0,0,.25)}
    .v74-remote-watermark{position:absolute;right:-65px;top:50%;width:430px;aspect-ratio:1;transform:translateY(-44%) rotate(-3deg);pointer-events:none;opacity:.055;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,#000 28%,rgba(0,0,0,.88) 52%,transparent 76%);mask-image:radial-gradient(circle,#000 28%,rgba(0,0,0,.88) 52%,transparent 76%)}
    .v74-remote-watermark img{display:block;width:100%;height:100%;object-fit:contain;filter:saturate(.72)}
    .v74-remote-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.52fr);gap:28px;align-items:end;padding:34px 36px 25px}
    .v74-remote-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:13px;padding:7px 11px;border:1px solid rgba(52,211,153,.27);border-radius:999px;background:rgba(16,185,129,.07);color:#86efac;font-size:10px;font-weight:850;letter-spacing:.9px;text-transform:uppercase}
    .v74-remote-eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 13px rgba(52,211,153,.65)}
    .v74-remote-head h2{max-width:720px;margin:0 0 10px;color:#f8fafc;font-size:clamp(28px,4vw,42px);line-height:1.08}
    .v74-remote-head p{max-width:770px;margin:0;color:#9fb0c8;font-size:14px;line-height:1.72}
    .v74-remote-choice{justify-self:end;max-width:285px;padding:15px 17px;border:1px solid rgba(148,163,184,.17);border-radius:14px;background:rgba(15,23,42,.72);color:#cbd5e1;font-size:11px;line-height:1.58;backdrop-filter:blur(10px)}
    .v74-remote-choice strong{display:block;margin-bottom:4px;color:#7dd3fc;font-size:12px}
    .v74-access-path{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr);gap:9px;align-items:stretch;padding:0 36px 26px}
    .v74-access-node{min-width:0;padding:18px;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:rgba(7,15,29,.82);box-shadow:inset 0 1px rgba(255,255,255,.025)}
    .v74-access-node:nth-child(1){border-color:rgba(56,189,248,.27)}
    .v74-access-node:nth-child(3){border-color:rgba(34,197,94,.25)}
    .v74-access-node:nth-child(5){border-color:rgba(168,85,247,.28)}
    .v74-node-icon{display:grid;width:40px;height:40px;margin-bottom:12px;place-items:center;border:1px solid rgba(56,189,248,.29);border-radius:12px;background:rgba(14,165,233,.09);font-size:19px}
    .v74-access-node:nth-child(3) .v74-node-icon{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.08)}
    .v74-access-node:nth-child(5) .v74-node-icon{border-color:rgba(168,85,247,.3);background:rgba(168,85,247,.09)}
    .v74-access-node h3{margin:0 0 7px;color:#f8fafc;font-size:15px}
    .v74-access-node p{margin:0;color:#91a1b8;font-size:11px;line-height:1.62}
    .v74-access-node b{color:#dbeafe}
    .v74-access-arrow{display:grid;place-items:center;color:#38bdf8;font-size:22px;opacity:.75}
    .v74-access-arrow:last-of-type{color:#a78bfa}
    .v74-remote-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:1px;border-top:1px solid rgba(148,163,184,.14);background:rgba(148,163,184,.12)}
    .v74-remote-card{min-width:0;padding:26px 30px 28px;background:rgba(7,14,27,.95)}
    .v74-remote-card h3{margin:0 0 9px;color:#f8fafc;font-size:18px}
    .v74-remote-card>p{margin:0;color:#94a3b8;font-size:12px;line-height:1.7}
    .v74-checks{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
    .v74-checks li{display:flex;gap:9px;align-items:flex-start;color:#cbd5e1;font-size:11px;line-height:1.55}
    .v74-checks li:before{content:"✓";flex:0 0 auto;color:#34d399;font-weight:900}
    .v74-remote-card--cloud .v74-checks li:before{color:#a78bfa}
    .v74-remote-badges{display:flex;gap:7px;flex-wrap:wrap;margin:17px 0}
    .v74-remote-badges span{padding:6px 8px;border:1px solid rgba(148,163,184,.17);border-radius:999px;background:rgba(15,23,42,.72);color:#cbd5e1;font-size:9px;font-weight:750}
    .v74-remote-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
    .v74-remote-actions a{min-height:42px}
    .v74-remote-link{display:inline-flex;align-items:center;color:#7dd3fc;font-size:11px;font-weight:800;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.3);padding:4px 1px}
    .v74-remote-link:hover,.v74-remote-link:focus-visible{color:#e0f2fe;border-color:#e0f2fe}
    .v74-remote-terms{margin-top:12px!important;color:#64748b!important;font-size:9px!important;line-height:1.55!important}
    .v74-remote-terms a{color:#94a3b8;text-decoration:underline;text-decoration-color:rgba(148,163,184,.35);text-underline-offset:2px}
    .v74-security-note{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:17px 30px;border-top:1px solid rgba(148,163,184,.14);background:rgba(15,23,42,.72);color:#94a3b8;font-size:10px;line-height:1.58}
    .v74-security-icon{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;background:rgba(245,158,11,.09);color:#fbbf24;font-size:15px}
    .v74-security-note strong{color:#e2e8f0}
    .v74-security-note a{color:#7dd3fc;font-weight:800;text-decoration:none;white-space:nowrap}
    @media(max-width:860px){
      .v74-remote-head{grid-template-columns:1fr;align-items:start}.v74-remote-choice{justify-self:start;max-width:520px}
      .v74-access-path{grid-template-columns:1fr}.v74-access-arrow{height:23px;transform:rotate(90deg)}
      .v74-remote-grid{grid-template-columns:1fr}.v74-remote-watermark{right:-90px;width:380px;opacity:.04}
    }
    @media(max-width:580px){
      .v74-remote-section{padding:24px 14px}.v74-remote-shell{border-radius:18px}
      .v74-remote-head{padding:25px 20px 20px}.v74-remote-head h2{font-size:30px}.v74-remote-head p{font-size:13px}
      .v74-access-path{padding:0 20px 22px}.v74-access-node{padding:16px}.v74-remote-card{padding:22px 20px}
      .v74-remote-actions{align-items:stretch}.v74-remote-actions .btn-primary{width:100%}.v74-remote-link{justify-content:center;text-align:center}
      .v74-security-note{grid-template-columns:auto 1fr;padding:16px 20px}.v74-security-note a{grid-column:1/-1;justify-self:start}.v74-remote-watermark{right:-105px;width:310px;opacity:.032}
    }
    @media(prefers-reduced-motion:reduce){.v74-remote-watermark{transform:translateY(-44%)}}

    /* V75: Home Assistant Green als optionele lokale hardwarebasis */
    .v75-green-section{padding-top:16px;padding-bottom:36px}
    .v75-green-shell{position:relative;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(300px,.76fr) minmax(0,1.24fr);gap:0;overflow:hidden;border:1px solid rgba(52,211,153,.24);border-radius:24px;background:radial-gradient(circle at 11% 26%,rgba(45,212,191,.18),transparent 38%),linear-gradient(145deg,rgba(7,31,36,.97),rgba(8,13,28,.98) 64%);box-shadow:0 22px 60px rgba(0,0,0,.23)}
    .v75-green-watermark{position:absolute;right:-95px;bottom:-150px;width:400px;aspect-ratio:1;pointer-events:none;opacity:.045;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,#000 20%,rgba(0,0,0,.85) 48%,transparent 76%);mask-image:radial-gradient(circle,#000 20%,rgba(0,0,0,.85) 48%,transparent 76%)}
    .v75-green-watermark img{display:block;width:100%;height:100%;object-fit:contain;filter:saturate(.65)}
    .v75-green-visual{position:relative;z-index:1;min-height:390px;display:grid;place-items:center;padding:42px 28px;border-right:1px solid rgba(148,163,184,.13);background:linear-gradient(145deg,rgba(20,184,166,.10),rgba(14,165,233,.035))}
    .v75-green-device-wrap{position:relative;width:min(100%,270px);display:grid;place-items:center}
    .v75-green-halo{position:absolute;inset:-45px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.19),rgba(56,189,248,.055) 46%,transparent 70%);filter:blur(5px)}
    .v75-green-device{position:relative;width:220px;aspect-ratio:1;border:1px solid rgba(255,255,255,.34);border-radius:36px;background:linear-gradient(145deg,rgba(213,255,246,.68),rgba(64,196,178,.20) 58%,rgba(8,47,55,.52));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -18px 40px rgba(3,39,44,.24),0 28px 55px rgba(0,0,0,.35),0 0 42px rgba(45,212,191,.13);backdrop-filter:blur(16px);transform:perspective(700px) rotateX(55deg) rotateZ(-4deg)}
    .v75-green-device:before{content:"";position:absolute;left:12px;right:12px;bottom:-19px;height:31px;border:1px solid rgba(255,255,255,.09);border-radius:0 0 25px 25px;background:linear-gradient(180deg,#172c31,#071216);box-shadow:0 18px 22px rgba(0,0,0,.32)}
    .v75-green-device-face{position:absolute;inset:20px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:24px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 9px)}
    .v75-green-device-face img{width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 10px 17px rgba(0,0,0,.28))}
    .v75-green-device-face b{position:absolute;bottom:18px;color:#d8fff6;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
    .v75-green-leds{position:absolute;right:18px;top:20px;display:flex;gap:5px}
    .v75-green-leds i{display:block;width:6px;height:6px;border-radius:50%;background:#f8fafc;box-shadow:0 0 9px rgba(248,250,252,.65)}
    .v75-green-leds i:nth-child(2){background:#34d399;box-shadow:0 0 9px rgba(52,211,153,.8)}.v75-green-leds i:nth-child(3){background:#fbbf24;box-shadow:0 0 9px rgba(251,191,36,.7)}
    .v75-green-visual-caption{position:relative;margin-top:32px;text-align:center}.v75-green-visual-caption strong{display:block;color:#ecfdf5;font-size:15px}.v75-green-visual-caption span{display:block;margin-top:5px;color:#6ee7b7;font-size:10px;font-weight:750}
    .v75-green-copy{position:relative;z-index:1;padding:36px 38px 34px}
    .v75-green-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;color:#6ee7b7;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
    .v75-green-eyebrow:before{content:"";width:7px;height:7px;border-radius:2px;background:#34d399;box-shadow:0 0 11px rgba(52,211,153,.58)}
    .v75-green-copy h2{margin:0 0 10px;color:#f8fafc;font-size:clamp(26px,3.4vw,38px);line-height:1.1}
    .v75-green-copy>p{max-width:680px;margin:0;color:#9fb0c8;font-size:13px;line-height:1.72}
    .v75-green-flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:20px 0}
    .v75-green-flow span{display:inline-flex;align-items:center;min-height:34px;padding:7px 10px;border:1px solid rgba(148,163,184,.17);border-radius:9px;background:rgba(15,23,42,.66);color:#dbeafe;font-size:10px;font-weight:780}
    .v75-green-flow b{color:#34d399;font-size:16px;font-weight:700}
    .v75-green-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px}
    .v75-green-spec{min-width:0;padding:12px;border:1px solid rgba(148,163,184,.14);border-radius:11px;background:rgba(7,15,29,.68)}
    .v75-green-spec strong{display:block;color:#ecfdf5;font-size:13px;line-height:1.25}.v75-green-spec span{display:block;margin-top:3px;color:#7890a8;font-size:8px;line-height:1.35;text-transform:uppercase;letter-spacing:.06em}
    .v75-green-benefits{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}
    .v75-green-benefits li{display:flex;gap:8px;align-items:flex-start;color:#cbd5e1;font-size:10px;line-height:1.52}.v75-green-benefits li:before{content:"✓";flex:0 0 auto;color:#34d399;font-weight:900}
    .v75-green-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
    .v75-green-actions .btn-primary{background:linear-gradient(135deg,#2dd4bf,#0ea5e9)}
    .v75-green-actions a{min-height:43px}
    .v75-green-actions button.v74-remote-link{appearance:none;min-height:43px;display:inline-flex;align-items:center;border:0;background:transparent;font:inherit;cursor:pointer}
    .v75-green-note{margin-top:16px!important;padding-top:14px;border-top:1px solid rgba(148,163,184,.13);color:#6f8298!important;font-size:9px!important;line-height:1.58!important}
    .v75-green-note strong{color:#94a3b8}
    @media(max-width:880px){.v75-green-shell{grid-template-columns:1fr}.v75-green-visual{min-height:320px;border-right:0;border-bottom:1px solid rgba(148,163,184,.13)}.v75-green-device{width:190px}.v75-green-copy{padding:30px}.v75-green-watermark{width:330px}}
    @media(max-width:580px){.v75-green-section{padding:10px 14px 28px}.v75-green-shell{border-radius:18px}.v75-green-visual{min-height:270px;padding:30px 20px}.v75-green-device{width:165px;border-radius:28px}.v75-green-device-face img{width:66px;height:66px}.v75-green-copy{padding:24px 20px}.v75-green-copy h2{font-size:28px}.v75-green-specs{grid-template-columns:1fr 1fr}.v75-green-benefits{grid-template-columns:1fr}.v75-green-actions{align-items:stretch}.v75-green-actions .btn-primary,.v75-green-actions .btn-secondary{width:100%}.v75-green-watermark{right:-120px;bottom:-90px;width:280px;opacity:.03}}
    @media(prefers-reduced-motion:reduce){.v75-green-device{transform:none}}

    /* V30: compacte, controleerbare certificerings- en vertrouwenslaag */
    .v30-trust-section{padding-top:34px;padding-bottom:34px}
    .v30-trust-shell{max-width:1080px;margin:0 auto;overflow:hidden;border:1px solid rgba(148,163,184,.20);border-radius:22px;background:linear-gradient(145deg,rgba(15,23,42,.92),rgba(8,15,29,.96));box-shadow:0 18px 48px rgba(0,0,0,.18)}
    .v30-trust-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;padding:28px 30px 23px;border-bottom:1px solid rgba(148,163,184,.14)}
    .v30-trust-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:11px;color:#7dd3fc;font-size:10px;font-weight:850;letter-spacing:1px;text-transform:uppercase}
    .v30-trust-eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.42)}
    .v30-trust-head h2{margin:0 0 7px;color:#f8fafc;font-size:clamp(24px,3vw,34px);line-height:1.12}
    .v30-trust-head p{max-width:720px;margin:0;color:var(--text-muted);font-size:13px;line-height:1.7}
    .v30-trust-head .btn-secondary{white-space:nowrap}
    .v30-trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(148,163,184,.13)}
    .v30-trust-card{min-width:0;padding:24px 25px 25px;background:rgba(7,14,28,.95)}
    .v30-trust-code{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;margin-bottom:15px;border:1px solid rgba(56,189,248,.25);border-radius:8px;background:rgba(14,165,233,.07);color:#7dd3fc;font-size:9px;font-weight:850;letter-spacing:.75px;text-transform:uppercase}
    .v30-trust-card:nth-child(2) .v30-trust-code{border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.06);color:#86efac}
    .v30-trust-card:nth-child(3) .v30-trust-code{border-color:rgba(168,85,247,.25);background:rgba(168,85,247,.06);color:#c4b5fd}
    .v30-trust-card h3{margin:0 0 9px;color:#f8fafc;font-size:16px;line-height:1.3}
    .v30-trust-card p{margin:0;color:#94a3b8;font-size:12px;line-height:1.68}
    .v30-trust-card strong{color:#dbeafe}
    .v30-standard-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}
    .v30-standard-list span{padding:5px 7px;border:1px solid rgba(148,163,184,.18);border-radius:7px;background:rgba(15,23,42,.72);color:#cbd5e1;font-size:9px;font-weight:750}
    .v30-trust-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:24px;align-items:center;padding:19px 25px;background:rgba(15,23,42,.68)}
    .v30-trust-disclaimer{margin:0;color:#718096;font-size:10px;line-height:1.65}
    .v30-acknowledgement{display:flex;gap:11px;align-items:flex-start;margin:0;padding-left:23px;border-left:1px solid rgba(148,163,184,.17)}
    .v30-ack-icon{color:#38bdf8;font-size:15px;line-height:1.35}
    .v30-acknowledgement p{margin:0;color:#94a3b8;font-size:10px;line-height:1.65}
    .v30-acknowledgement strong{display:block;margin-bottom:2px;color:#dbeafe;font-size:11px}
    @media(max-width:820px){
      .v30-trust-head{grid-template-columns:1fr;gap:18px;align-items:start}
      .v30-trust-head .btn-secondary{justify-self:start}
      .v30-trust-grid{grid-template-columns:1fr}
      .v30-trust-foot{grid-template-columns:1fr;gap:17px}
      .v30-acknowledgement{padding:16px 0 0;border-left:0;border-top:1px solid rgba(148,163,184,.17)}
    }
    @media(max-width:560px){
      .v30-trust-section{padding-top:24px;padding-bottom:24px}
      .v30-trust-shell{border-radius:17px}
      .v30-trust-head{padding:23px 20px 20px}
      .v30-trust-head .btn-secondary{width:100%}
      .v30-trust-card{padding:21px 20px}
      .v30-trust-foot{padding:18px 20px}
    }


/* ===== V17 APP-ACHTIGE METER SETUP ===== */
.v17-app-stage{display:flex;flex-direction:column;flex:1;min-width:0;background:radial-gradient(circle at 55% 35%,rgba(14,165,233,.12),transparent 32%),radial-gradient(circle at 75% 70%,rgba(168,85,247,.08),transparent 35%),#020617;overflow:auto;padding:22px}
.v17-app-toolbar{max-width:1100px;width:100%;margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:rgba(15,23,42,.82);border:1px solid rgba(148,163,184,.16);border-radius:16px;padding:12px 14px;backdrop-filter:blur(14px);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.v17-app-toolbar-left{display:flex;align-items:center;gap:11px;min-width:0}.v17-app-dot{width:10px;height:10px;border-radius:50%;background:var(--success);box-shadow:0 0 14px rgba(16,185,129,.75);flex:0 0 auto}.v17-app-toolbar strong{display:block;font-size:14px}.v17-app-toolbar span{display:block;color:var(--text-muted);font-size:11px;margin-top:2px}.v17-app-actions{display:flex;gap:8px;flex-wrap:wrap}.v17-app-actions a,.v17-app-actions button{min-height:38px}
.v17-app-layout{max-width:1100px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(310px,390px) minmax(0,1fr);gap:20px;align-items:start}.v17-guide-card{background:linear-gradient(180deg,rgba(30,41,59,.96),rgba(15,23,42,.96));border:1px solid rgba(148,163,184,.17);border-radius:20px;padding:22px;box-shadow:0 18px 45px rgba(0,0,0,.3);position:sticky;top:12px}.v17-guide-kicker{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--primary);font-weight:800;margin-bottom:8px}.v17-guide-card h2{font-size:22px;margin:0 0 8px}.v17-guide-card>p{font-size:13px;line-height:1.6;color:var(--text-muted);margin:0 0 18px}.v17-mini-steps{display:grid;gap:8px;margin:16px 0}.v17-mini-step{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:rgba(2,6,23,.45);border-radius:11px;padding:10px 11px;color:var(--text-muted);font-size:12px}.v17-mini-step b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#0f172a;border:1px solid var(--border);font-size:10px;color:var(--text-muted);flex:0 0 auto}.v17-mini-step.active{border-color:rgba(14,165,233,.5);background:rgba(14,165,233,.08);color:var(--text)}.v17-mini-step.active b{background:var(--primary);color:#020617;border-color:var(--primary);box-shadow:0 0 12px rgba(14,165,233,.35)}.v17-guide-tip{font-size:12px;line-height:1.55;padding:12px;border-radius:10px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.22);color:#fcd34d}.v17-guide-tip strong{color:#fff}
.v17-device-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0}.v17-restored-device{width:480px;height:800px;max-width:100%;max-height:calc(100vh - 155px);min-height:590px;border:14px solid #09090b;border-radius:40px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.72),0 0 60px rgba(14,165,233,.14);background:var(--card-bg);display:flex;position:relative}.v17-restored-device iframe{width:130%;min-width:130%;height:130%;min-height:130%;transform:scale(.769);transform-origin:top left;border:none;background:white;opacity:.85;filter:invert(.88) hue-rotate(180deg) contrast(1.15) brightness(1.1);-webkit-filter:invert(.88) hue-rotate(180deg) contrast(1.15) brightness(1.1)}.v17-restored-fallback{width:min(100%,480px);padding:10px 12px;border:1px solid rgba(14,165,233,.25);background:rgba(2,6,23,.91);border-radius:11px;font-size:11px;color:#94a3b8;line-height:1.45;text-align:center}.v17-restored-fallback a{color:#38bdf8;font-weight:800;text-decoration:none}.v17-empty{max-width:900px;width:100%;margin:auto;text-align:center;background:rgba(15,23,42,.65);border:1px solid rgba(148,163,184,.15);border-radius:24px;padding:50px 30px;box-shadow:0 25px 60px rgba(0,0,0,.28)}.v17-empty .big{font-size:54px}.v17-empty h2{font-size:28px;margin:10px 0}.v17-empty p{max-width:620px;margin:0 auto;color:var(--text-muted);line-height:1.7}.v17-empty-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
@media(max-width:1050px){.v17-app-layout{grid-template-columns:1fr}.v17-guide-card{position:relative;top:0}.v17-restored-device{height:680px;max-height:none}.v17-mini-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.v17-app-stage{padding:10px}.v17-app-toolbar{border-radius:12px;margin-bottom:10px}.v17-app-layout{gap:10px}.v17-guide-card{padding:16px;border-radius:14px}.v17-mini-steps{grid-template-columns:1fr}.v17-restored-device{width:100%;height:650px;min-height:540px;border-width:8px;border-radius:24px}.v17-restored-device iframe{width:120%;min-width:120%;height:120%;min-height:120%;transform:scale(.833)}.v17-restored-fallback{font-size:10px}.v17-app-actions{width:100%}.v17-app-actions a,.v17-app-actions button{flex:1;justify-content:center}}
/* ===== V31 PROFESSIONELE POLISH ===== */
html{scroll-padding-top:92px}
#mijn-r12,#product,#integratie,#service,#specialisten,#toegang-op-afstand,#home-assistant-green{scroll-margin-top:92px}
.skip-link{position:fixed;z-index:10000;top:10px;left:12px;transform:translateY(-180%);padding:11px 15px;border:1px solid rgba(56,189,248,.65);border-radius:10px;background:#071526;color:#f8fafc;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.42);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0)}
.logo.v21-nav-brand{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer}
.mobile-menu-btn:focus-visible,.logo.v21-nav-brand:focus-visible,.nav-links a:focus-visible,.nav-links summary:focus-visible,.lang-switcher:focus-visible{outline:3px solid rgba(56,189,248,.62);outline-offset:3px}
.nav-links>a:not(.nav-btn-setup):not(.v26-nav-setup){position:relative}
.nav-links>a:not(.nav-btn-setup):not(.v26-nav-setup)::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,#0ea5e9,#8b5cf6);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.nav-links>a.active:not(.nav-btn-setup):not(.v26-nav-setup),.nav-links>a[aria-current="location"]{color:#f8fafc}
.nav-links>a.active:not(.nav-btn-setup):not(.v26-nav-setup)::after,.nav-links>a[aria-current="location"]::after{transform:scaleX(1)}
@media(max-width:980px){
  .nav-links>a.active:not(.nav-btn-setup):not(.v26-nav-setup){background:rgba(14,165,233,.1);border-color:rgba(56,189,248,.28)}
  .nav-links>a:not(.nav-btn-setup):not(.v26-nav-setup)::after{display:none}
}
@media(max-width:560px){html{scroll-padding-top:76px}#mijn-r12,#product,#integratie,#service,#specialisten,#toegang-op-afstand,#home-assistant-green{scroll-margin-top:76px}.skip-link{top:7px;left:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.skip-link,.nav-links>a::after{transition:none!important}}

/* ===== V107 ÉÉN HULPROUTE · KIES EEN VASTE SPECIALIST ===== */
.v107-specialists{max-width:1180px!important}
.v107-specialist-intro{max-width:760px;margin:0 auto 12px;color:var(--text-muted);font-size:15px;line-height:1.7;text-align:center}
.v107-specialist-status{display:flex;align-items:center;justify-content:center;gap:8px;width:fit-content;max-width:100%;margin:0 auto 22px;padding:8px 12px;border:1px solid rgba(16,185,129,.34);border-radius:999px;background:rgba(16,185,129,.08);color:#a7f3d0;font-size:11px;font-weight:800;text-align:center}
.v107-specialist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:26px}
.v107-specialist-card{position:relative;min-width:0;overflow:hidden;border:1px solid rgba(148,163,184,.17);border-radius:18px;background:linear-gradient(160deg,rgba(15,23,42,.96),rgba(7,13,26,.98));box-shadow:0 16px 42px rgba(2,6,23,.24);transition:transform .2s,border-color .2s,box-shadow .2s}
.v107-specialist-card:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.42);box-shadow:0 20px 48px rgba(2,6,23,.34)}
.v107-specialist-card.is-selected{border-color:rgba(52,211,153,.66);box-shadow:0 0 0 2px rgba(16,185,129,.12),0 20px 48px rgba(2,6,23,.34)}
.v107-specialist-portrait{position:relative;height:190px;overflow:hidden;background:radial-gradient(circle at 50% 15%,rgba(56,189,248,.13),transparent 55%),#071526}
.v107-specialist-portrait:after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(transparent,rgba(7,13,26,.96));pointer-events:none}
.v107-specialist-portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 23%;transition:transform .28s ease}.v107-specialist-card:hover .v107-specialist-portrait img{transform:scale(1.025)}
.v107-specialist-check{position:absolute;z-index:2;top:11px;right:11px;padding:5px 8px;border:1px solid rgba(110,231,183,.55);border-radius:999px;background:rgba(6,78,59,.92);color:#d1fae5;font-size:9px;font-weight:900;letter-spacing:.35px;text-transform:uppercase}
.v107-specialist-body{display:flex;min-height:205px;flex-direction:column;padding:0 16px 16px}.v107-specialist-name{position:relative;z-index:2;margin-top:-19px;color:#f8fafc;font-size:20px;line-height:1.15}.v107-specialist-role{display:block;margin-top:5px;color:#7dd3fc;font-size:10px;font-weight:900;letter-spacing:.55px;text-transform:uppercase}.v107-specialist-opening{display:-webkit-box;min-height:68px;margin:11px 0 14px;overflow:hidden;color:#94a3b8;font-size:11px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.v107-specialist-button{width:100%;min-height:43px;margin-top:auto;border:1px solid rgba(56,189,248,.38);border-radius:10px;background:rgba(14,165,233,.10);color:#bae6fd;font:850 11px/1.25 'Inter',sans-serif;cursor:pointer;transition:.2s}.v107-specialist-button:hover,.v107-specialist-button:focus-visible{border-color:#38bdf8;background:rgba(14,165,233,.2);color:#fff;outline:none}.v107-specialist-card.is-selected .v107-specialist-button{border-color:rgba(52,211,153,.55);background:rgba(16,185,129,.12);color:#a7f3d0}
.v107-specialist-privacy{display:flex;align-items:flex-start;justify-content:center;gap:7px;max-width:760px;margin:18px auto 0;color:#64748b;font-size:10px;line-height:1.5;text-align:center}.v107-specialist-privacy:before{content:"✓";color:#34d399;font-weight:900}
@media(max-width:760px){.v107-specialist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v107-specialist-portrait{height:170px}}
@media(max-width:520px){.v107-specialists{padding-left:12px;padding-right:12px}.v107-specialist-grid{grid-template-columns:1fr;gap:11px}.v107-specialist-card{display:grid;grid-template-columns:112px minmax(0,1fr);border-radius:14px}.v107-specialist-portrait{height:100%;min-height:184px}.v107-specialist-body{min-height:0;padding:15px 13px}.v107-specialist-name{margin-top:0;font-size:18px}.v107-specialist-opening{min-height:50px;margin:8px 0 10px;-webkit-line-clamp:3}.v107-specialist-check{top:8px;right:8px;font-size:8px}.v107-specialist-intro{font-size:13px}.v107-specialist-status{border-radius:12px}}

/* ===== V89 MIJN R12 · EEN SERIENUMMER DOOR DE HELE WEBSITE ===== */
.r12-profile-section{position:relative;z-index:4;padding:18px 24px 8px}
.r12-profile-shell{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:18px;overflow:hidden;border:1px solid rgba(56,189,248,.24);border-radius:20px;background:linear-gradient(135deg,rgba(8,20,38,.96),rgba(15,23,42,.96));box-shadow:0 18px 52px rgba(2,6,23,.30)}
.r12-profile-copy{position:relative;padding:26px 28px}.r12-profile-copy:after{content:"R12";position:absolute;right:18px;bottom:-18px;color:rgba(56,189,248,.035);font-size:112px;font-weight:950;line-height:1;pointer-events:none}
.r12-profile-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;color:#7dd3fc;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.r12-profile-eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.5)}
.r12-profile-copy h2{margin:0 0 8px;color:#f8fafc;font-size:clamp(23px,3vw,31px);line-height:1.15}.r12-profile-copy>p{max-width:700px;margin:0;color:#94a3b8;font-size:13px;line-height:1.7}
.r12-profile-benefits{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.r12-profile-benefits span{padding:6px 9px;border:1px solid rgba(148,163,184,.17);border-radius:999px;background:rgba(2,6,23,.34);color:#cbd5e1;font-size:10px;font-weight:750}
.r12-profile-panel{padding:22px;border-left:1px solid rgba(148,163,184,.14);background:rgba(2,6,23,.34)}
.r12-profile-panel label{display:block;margin-bottom:7px;color:#cbd5e1;font-size:11px;font-weight:800}.r12-profile-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.r12-profile-input{width:100%;min-width:0;box-sizing:border-box;padding:13px 14px;border:1px solid #334155;border-radius:10px;background:#020617;color:#f8fafc;font:750 14px/1.2 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.03em}.r12-profile-input:focus{outline:3px solid rgba(56,189,248,.25);border-color:#38bdf8}.r12-profile-input.invalid{border-color:#fb7185}
.r12-profile-save{min-width:112px;border:1px solid #0ea5e9;border-radius:10px;background:#0ea5e9;color:#020617;font-weight:900;cursor:pointer}.r12-profile-save:hover{background:#38bdf8}.r12-profile-save:disabled{opacity:.46;cursor:not-allowed}
.r12-profile-status{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:20px;margin-top:9px;color:#94a3b8;font-size:10px;line-height:1.5}.r12-profile-status strong{color:#86efac}.r12-profile-status .error{color:#fda4af}.r12-profile-clear{padding:0;border:0;background:transparent;color:#7dd3fc;font-size:10px;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.r12-profile-register{margin-top:15px;padding-top:14px;border-top:1px solid rgba(148,163,184,.14)}.r12-profile-register summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#e2e8f0;font-size:11px;font-weight:850;cursor:pointer}.r12-profile-register summary::-webkit-details-marker{display:none}.r12-profile-register summary:after{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(56,189,248,.10);color:#7dd3fc}.r12-profile-register[open] summary:after{content:"−"}.r12-profile-register p{margin:10px 0;color:#94a3b8;font-size:10px;line-height:1.6}.r12-profile-register button{width:100%;min-height:40px;border:1px solid rgba(16,185,129,.45);border-radius:9px;background:rgba(16,185,129,.10);color:#6ee7b7;font-weight:850;cursor:pointer}.r12-profile-register button:hover{background:rgba(16,185,129,.17)}
.r12-profile-contact-field{grid-column:1/-1}.r12-registration-consent{display:flex!important;align-items:flex-start;gap:10px;margin:14px 0 0!important;padding:12px;border:1px solid rgba(16,185,129,.30);border-radius:10px;background:rgba(16,185,129,.06);color:#cbd5e1!important;font-size:11px!important;line-height:1.55}.r12-registration-consent input{width:17px;height:17px;margin:1px 0 0;flex:0 0 auto;accent-color:#10b981}.r12-registration-note{margin:9px 1px 0;color:#94a3b8;font-size:10px;line-height:1.55}
.r12-inline-profile-note{margin-top:7px;color:#86efac;font-size:10px;line-height:1.45}.r12-inline-profile-note button{padding:0;border:0;background:transparent;color:#7dd3fc;font:inherit;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
@media(max-width:850px){.r12-profile-section{padding:12px 14px 4px}.r12-profile-shell{grid-template-columns:1fr}.r12-profile-panel{border-left:0;border-top:1px solid rgba(148,163,184,.14)}.r12-profile-copy{padding:22px 22px 20px}.r12-profile-panel{padding:20px 22px}}
@media(max-width:520px){.r12-profile-section{padding-left:10px;padding-right:10px}.r12-profile-shell{border-radius:15px}.r12-profile-copy,.r12-profile-panel{padding:17px}.r12-profile-input-row{grid-template-columns:1fr}.r12-profile-save{min-height:44px}.r12-profile-status{display:block}.r12-profile-clear{display:block;margin-top:6px}.r12-profile-benefits{gap:6px}.r12-profile-benefits span{font-size:9px}}

/* ===== V91 WELKOM · SERIENUMMER OF EERST VERKENNEN ===== */
.serial-welcome-overlay{position:fixed;inset:0;z-index:9300;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100dvh;padding:max(18px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));overflow:auto;overscroll-behavior:contain;background:radial-gradient(circle at 18% 12%,rgba(14,165,233,.17),transparent 33%),radial-gradient(circle at 86% 88%,rgba(168,85,247,.13),transparent 32%),rgba(2,6,23,.96);backdrop-filter:blur(16px)}
.serial-welcome-watermark{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;pointer-events:none}.serial-welcome-watermark img{display:block;width:min(82vw,900px);height:min(82vw,900px);object-fit:contain;opacity:.045;filter:saturate(1.2) drop-shadow(0 0 90px rgba(56,189,248,.32));transform:rotate(-4deg) scale(1.04)}
.serial-welcome-card{position:relative;width:min(100%,940px);max-height:calc(100dvh - 36px);display:grid;grid-template-columns:minmax(300px,.86fr) minmax(390px,1.14fr);box-sizing:border-box;overflow:auto;border:1px solid rgba(125,211,252,.30);border-radius:27px;background:linear-gradient(145deg,rgba(12,25,44,.985),rgba(5,11,23,.99));box-shadow:0 38px 120px rgba(0,0,0,.66),0 0 80px rgba(14,165,233,.10);animation:serial-welcome-in .36s ease-out}.serial-welcome-card:focus{outline:none}
.serial-welcome-brand{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:34px 31px;overflow:hidden;border-right:1px solid rgba(148,163,184,.15);background:radial-gradient(circle at 20% 12%,rgba(56,189,248,.18),transparent 36%),linear-gradient(160deg,rgba(15,40,65,.92),rgba(15,23,42,.72))}.serial-welcome-brand:before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(125,211,252,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.035) 1px,transparent 1px);background-size:29px 29px}.serial-welcome-brand:after{content:"R12";position:absolute;right:-15px;bottom:-32px;z-index:-1;color:rgba(125,211,252,.045);font-size:150px;font-weight:950;line-height:1;letter-spacing:-.08em}
.serial-welcome-brandbar{display:flex;align-items:center;gap:12px;margin-bottom:27px}.serial-welcome-brandmark{width:62px;height:62px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;border:1px solid rgba(125,211,252,.35);border-radius:17px;background:rgba(2,6,23,.72);box-shadow:0 13px 32px rgba(0,0,0,.34),0 0 25px rgba(14,165,233,.12)}.serial-welcome-brandmark img{display:block;width:100%;height:100%;object-fit:cover}.serial-welcome-brandmark b{color:#7dd3fc;font-size:18px}.serial-welcome-wordmark{min-width:0}.serial-welcome-wordmark b,.serial-welcome-wordmark span{display:block}.serial-welcome-wordmark b{color:#f8fafc;font-size:16px;line-height:1.1}.serial-welcome-wordmark span{margin-top:3px;color:#7dd3fc;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.serial-welcome-language{margin-left:auto;min-width:72px;height:38px;padding:0 9px;border:1px solid rgba(148,163,184,.28);border-radius:10px;background:rgba(2,6,23,.70);color:#e2e8f0;font:800 10px/1 'Inter',sans-serif;cursor:pointer}.serial-welcome-language:focus-visible{outline:3px solid rgba(56,189,248,.30);border-color:#38bdf8}
.serial-welcome-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;color:#67e8f9;font-size:9px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.serial-welcome-eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 14px rgba(52,211,153,.62)}.serial-welcome-brand h2{max-width:360px;margin:0;color:#fff;font-size:clamp(25px,3.2vw,37px);line-height:1.08;letter-spacing:-.025em}.serial-welcome-lead{max-width:390px;margin:13px 0 0;color:#b5c3d6;font-size:12px;line-height:1.65}
.serial-welcome-find{margin-top:auto;padding-top:20px}.serial-welcome-find>strong{display:block;margin-bottom:9px;color:#dbeafe;font-size:10px;letter-spacing:.025em}.serial-welcome-passport{display:grid;grid-template-columns:minmax(0,1fr) 108px;align-items:center;gap:9px;padding:8px;border:1px solid rgba(56,189,248,.25);border-radius:15px;background:linear-gradient(145deg,rgba(2,6,23,.58),rgba(14,165,233,.07));box-shadow:0 12px 30px rgba(0,0,0,.22)}.serial-passport-card{position:relative;display:block;width:100%;aspect-ratio:1040/686;min-width:0;padding:0;overflow:hidden;border:1px solid rgba(125,211,252,.30);border-radius:10px;background:#05121f;box-shadow:0 9px 24px rgba(0,0,0,.34);cursor:pointer}.serial-passport-card:hover,.serial-passport-card:focus-visible{border-color:#7dd3fc;outline:3px solid rgba(56,189,248,.22);outline-offset:2px}.serial-passport-side{position:absolute;inset:0;display:block}.serial-passport-side img{display:block;width:100%;height:100%;object-fit:cover}.serial-passport-sticker{position:absolute;left:27.9%;top:20.8%;width:65.4%;height:51.7%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4%;color:#0f172a;text-align:center;pointer-events:none}.serial-passport-sticker small{display:block;margin-bottom:4px;color:#475569;font-size:clamp(5px,.58vw,8px);font-weight:900;letter-spacing:.08em;text-transform:uppercase}.serial-passport-sticker output{display:block;max-width:100%;overflow:hidden;color:#0f172a;font:900 clamp(7px,1.03vw,13px)/1.15 'JetBrains Mono',monospace;letter-spacing:.025em;text-overflow:ellipsis;white-space:nowrap}.serial-passport-sticker output.is-placeholder{color:#94a3b8;font-size:clamp(6px,.72vw,9px);letter-spacing:.035em}.serial-passport-guide{min-width:0}.serial-passport-guide>b,.serial-passport-guide>small{display:block}.serial-passport-guide>b{color:#f8fafc;font-size:9px;line-height:1.3}.serial-passport-guide>small{margin-top:5px;color:#94a3b8;font-size:7.5px;line-height:1.4}.serial-passport-tabs{display:grid;grid-template-columns:1fr;gap:5px;margin-top:8px}.serial-passport-tabs button{min-height:31px;padding:0 7px;border:1px solid rgba(148,163,184,.22);border-radius:8px;background:rgba(2,6,23,.40);color:#94a3b8;font:800 7.5px/1 'Inter',sans-serif;cursor:pointer}.serial-passport-tabs button.active{border-color:rgba(56,189,248,.55);background:rgba(14,165,233,.14);color:#bae6fd}.serial-passport-tabs button:hover,.serial-passport-tabs button:focus-visible{border-color:#7dd3fc;outline:2px solid rgba(56,189,248,.22);outline-offset:1px}.serial-welcome-meter-hint{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:8px;margin-top:7px;padding:7px 9px;border:1px solid rgba(148,163,184,.15);border-radius:10px;background:rgba(2,6,23,.28)}.serial-welcome-meter-hint>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:rgba(16,185,129,.10);color:#6ee7b7;font-size:16px}.serial-welcome-meter-hint b,.serial-welcome-meter-hint small{display:block}.serial-welcome-meter-hint b{color:#e2e8f0;font-size:8.5px;line-height:1.25}.serial-welcome-meter-hint small{margin-top:2px;color:#94a3b8;font-size:7.5px;line-height:1.35}.serial-passport-swap-enter-active,.serial-passport-swap-leave-active{transition:opacity .14s ease,transform .14s ease}.serial-passport-swap-enter-from{opacity:0;transform:rotateY(-8deg) scale(.98)}.serial-passport-swap-leave-to{opacity:0;transform:rotateY(8deg) scale(.98)}
.serial-welcome-content{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:38px 40px;background:radial-gradient(circle at 100% 0,rgba(168,85,247,.07),transparent 35%)}.serial-welcome-step{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;margin-bottom:9px;padding:5px 8px;border:1px solid rgba(56,189,248,.27);border-radius:999px;background:rgba(14,165,233,.07);color:#7dd3fc;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.serial-welcome-content h3{margin:0 0 8px;color:#f8fafc;font-size:23px;line-height:1.18}.serial-welcome-help{margin:0 0 18px;color:#94a3b8;font-size:11px;line-height:1.55}
.serial-welcome-form label{display:block;margin-bottom:7px;color:#dbeafe;font-size:10px;font-weight:850}.serial-welcome-input-wrap{position:relative}.serial-welcome-input-wrap>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;min-width:31px;height:27px;border-right:1px solid rgba(148,163,184,.22);color:#38bdf8;font:900 9px/1 'JetBrains Mono',monospace}.serial-welcome-input{width:100%;min-height:52px;box-sizing:border-box;padding:0 13px 0 55px;border:1px solid #334155;border-radius:12px;background:#020617;color:#f8fafc;font:800 15px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.035em;outline:none}.serial-welcome-input::placeholder{color:#526076;font-weight:600}.serial-welcome-input:focus{border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.18)}.serial-welcome-input.invalid{border-color:#fb7185;box-shadow:0 0 0 3px rgba(251,113,133,.10)}.serial-welcome-validation{min-height:19px;margin:6px 1px 0;color:#fda4af;font-size:9px;line-height:1.4}.serial-welcome-validation.valid{color:#86efac}
.serial-welcome-primary,.serial-welcome-scan,.serial-welcome-explore{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border-radius:11px;font:900 11px/1.25 'Inter',sans-serif;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease}.serial-welcome-primary{margin-top:5px;border:1px solid #38bdf8;background:linear-gradient(135deg,#38bdf8,#22d3ee);color:#03111f;box-shadow:0 12px 28px rgba(14,165,233,.18)}.serial-welcome-primary:hover,.serial-welcome-primary:focus-visible{transform:translateY(-1px);box-shadow:0 16px 34px rgba(14,165,233,.28);outline:3px solid rgba(56,189,248,.25);outline-offset:2px}.serial-welcome-primary:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}.serial-welcome-divider{display:flex;align-items:center;gap:10px;margin:12px 0;color:#64748b;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.serial-welcome-divider:before,.serial-welcome-divider:after{content:"";height:1px;flex:1;background:rgba(148,163,184,.16)}.serial-welcome-scan{border:1px solid rgba(56,189,248,.48);background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(16,185,129,.08));color:#bae6fd}.serial-welcome-scan span{color:#38bdf8;font-size:18px}.serial-welcome-scan:hover,.serial-welcome-scan:focus-visible{border-color:#7dd3fc;background:linear-gradient(135deg,rgba(14,165,233,.24),rgba(16,185,129,.12));outline:3px solid rgba(56,189,248,.22);outline-offset:2px}.serial-welcome-explore{min-height:48px;margin-top:10px;padding:0 16px;border:1px solid rgba(251,191,36,.72);background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(249,115,22,.15));color:#fef3c7;box-shadow:0 10px 26px rgba(245,158,11,.10),inset 0 1px 0 rgba(255,255,255,.04)}.serial-welcome-explore-icon{width:27px;height:27px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(253,230,138,.30);border-radius:8px;background:rgba(245,158,11,.13);font-size:14px;line-height:1}.serial-welcome-explore-label{min-width:0}.serial-welcome-explore-arrow{color:#fbbf24;font-size:15px;font-weight:950;transition:transform .2s ease,color .2s ease}.serial-welcome-explore:hover,.serial-welcome-explore:focus-visible{transform:translateY(-1px);border-color:#fde68a;background:linear-gradient(135deg,#f59e0b,#f97316);color:#1c0f02;box-shadow:0 15px 32px rgba(245,158,11,.23);outline:3px solid rgba(251,191,36,.27);outline-offset:2px}.serial-welcome-explore:hover .serial-welcome-explore-icon,.serial-welcome-explore:focus-visible .serial-welcome-explore-icon{border-color:rgba(28,15,2,.22);background:rgba(28,15,2,.10)}.serial-welcome-explore:hover .serial-welcome-explore-arrow,.serial-welcome-explore:focus-visible .serial-welcome-explore-arrow{color:#1c0f02;transform:translateX(3px)}.serial-welcome-later{margin:8px 0 0;color:#718096;font-size:9px;line-height:1.4;text-align:center}.serial-welcome-privacy{display:flex;align-items:flex-start;gap:7px;margin:15px 0 0;padding-top:13px;border-top:1px solid rgba(148,163,184,.13);color:#94a3b8;font-size:9px;line-height:1.5}.serial-welcome-privacy:before{content:"✓";flex:0 0 auto;color:#34d399;font-weight:900}
.serial-welcome-installer{width:100%;min-height:58px;display:grid;grid-template-columns:35px minmax(0,1fr) auto;align-items:center;gap:10px;box-sizing:border-box;margin-top:9px;padding:9px 11px;border:1px solid rgba(168,85,247,.46);border-radius:12px;background:linear-gradient(135deg,rgba(124,58,237,.17),rgba(14,165,233,.09));color:#f8fafc;text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}.serial-welcome-installer-icon{width:35px;height:35px;display:grid;place-items:center;border:1px solid rgba(196,181,253,.22);border-radius:10px;background:rgba(2,6,23,.42);font-size:17px}.serial-welcome-installer-copy strong,.serial-welcome-installer-copy small{display:block}.serial-welcome-installer-copy strong{font:900 10px/1.25 'Inter',sans-serif;color:#f8fafc}.serial-welcome-installer-copy small{margin-top:3px;color:#c4b5fd;font:650 8px/1.4 'Inter',sans-serif}.serial-welcome-installer-arrow{color:#67e8f9;font-size:18px;font-weight:900}.serial-welcome-installer:hover,.serial-welcome-installer:focus-visible{transform:translateY(-1px);border-color:#c4b5fd;background:linear-gradient(135deg,rgba(124,58,237,.27),rgba(14,165,233,.14));box-shadow:0 13px 28px rgba(76,29,149,.17);outline:3px solid rgba(168,85,247,.20);outline-offset:2px}
@keyframes serial-welcome-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.serial-welcome-card{animation:none}.serial-welcome-primary,.serial-welcome-scan,.serial-welcome-explore,.serial-welcome-explore-arrow,.serial-welcome-installer,.serial-passport-swap-enter-active,.serial-passport-swap-leave-active{transition:none}}
@media(max-width:720px){.serial-welcome-overlay{align-items:flex-start;padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}.serial-welcome-card{grid-template-columns:1fr;max-height:calc(100dvh - 16px);border-radius:20px}.serial-welcome-brand{padding:19px 18px 17px;border-right:0;border-bottom:1px solid rgba(148,163,184,.15)}.serial-welcome-brand:after{right:8px;bottom:-22px;font-size:94px}.serial-welcome-brandbar{margin-bottom:16px}.serial-welcome-brandmark{width:52px;height:52px;border-radius:14px}.serial-welcome-wordmark b{font-size:14px}.serial-welcome-brand h2{font-size:25px}.serial-welcome-lead{margin-top:8px;font-size:10px;line-height:1.5}.serial-welcome-find{margin-top:14px;padding-top:0}.serial-welcome-find>strong{margin-bottom:7px;font-size:9px}.serial-welcome-passport{grid-template-columns:minmax(0,1fr) 104px}.serial-passport-sticker small{font-size:6px}.serial-passport-sticker output{font-size:clamp(7px,2.6vw,12px)}.serial-passport-sticker output.is-placeholder{font-size:7px}.serial-welcome-content{padding:21px 18px 18px}.serial-welcome-content h3{font-size:20px}.serial-welcome-help{margin-bottom:13px}.serial-welcome-input{min-height:50px}.serial-welcome-primary,.serial-welcome-scan{min-height:46px}.serial-welcome-privacy{margin-top:12px;padding-top:10px}}
@media(max-width:410px){.serial-welcome-wordmark span{font-size:8px}.serial-welcome-language{min-width:64px;padding:0 6px}.serial-welcome-brand h2{font-size:22px}.serial-welcome-lead{display:none}.serial-welcome-passport{grid-template-columns:minmax(0,1fr) 88px;gap:6px;padding:6px}.serial-passport-guide>small{font-size:7px}.serial-passport-tabs button{min-height:29px;padding:0 4px;font-size:7px}.serial-welcome-meter-hint{padding:6px 8px}}

/* ===== V90 LOKALE QR-SCANNER VOOR HET R12-SERIENUMMER ===== */
.qr-scan-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;padding:0 14px;border:1px solid rgba(56,189,248,.55);border-radius:9px;background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(16,185,129,.10));color:#bae6fd;font:850 11px/1.2 'Inter',sans-serif;white-space:nowrap;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}.qr-scan-btn:hover,.qr-scan-btn:focus-visible{border-color:#7dd3fc;background:linear-gradient(135deg,rgba(14,165,233,.25),rgba(16,185,129,.14));box-shadow:0 9px 24px rgba(14,165,233,.15);outline:3px solid rgba(56,189,248,.22);outline-offset:2px;transform:translateY(-1px)}.qr-scan-btn span{color:#38bdf8;font-size:17px;line-height:1}.r12-profile-scan{width:100%;margin-top:9px}.dashboard-serial-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}.dashboard-serial-row .qr-scan-btn{min-width:126px}.installer-field-row.serial-with-scanner{grid-template-columns:minmax(0,1fr) auto auto}.installer-field-row.serial-with-scanner .qr-scan-btn{min-width:112px}
.qr-scanner-overlay{position:fixed;inset:0;z-index:9500;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100dvh;padding:max(18px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));overflow:auto;overscroll-behavior:contain;background:rgba(2,6,23,.93);backdrop-filter:blur(14px)}.qr-scanner-card{width:min(100%,520px);max-height:calc(100dvh - 36px);box-sizing:border-box;overflow:auto;padding:20px;border:1px solid rgba(56,189,248,.35);border-radius:20px;background:linear-gradient(150deg,#111c31,#070d19 72%);color:#f8fafc;box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 48px rgba(14,165,233,.10)}.qr-scanner-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:8px}.qr-scanner-head h3{margin:0;color:#f8fafc;font-size:20px;line-height:1.25}.qr-scanner-close{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;margin:-5px -5px 0 0;padding:0;border:1px solid rgba(148,163,184,.30);border-radius:12px;background:rgba(2,6,23,.62);color:#e2e8f0;font-size:22px;line-height:1;cursor:pointer}.qr-scanner-close:hover,.qr-scanner-close:focus-visible{border-color:#38bdf8;color:#7dd3fc;outline:3px solid rgba(56,189,248,.23);outline-offset:2px}.qr-scanner-intro{margin:0 0 15px;color:#94a3b8;font-size:12px;line-height:1.55}.qr-scanner-view{position:relative;width:min(100%,390px);aspect-ratio:1/1;margin:0 auto;overflow:hidden;border:1px solid rgba(56,189,248,.38);border-radius:18px;background:radial-gradient(circle at 50% 42%,rgba(14,165,233,.12),transparent 48%),#020617}.qr-scanner-view video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}.qr-scanner-view.is-active video{opacity:1}.qr-scanner-placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:9px;padding:24px;text-align:center;color:#94a3b8}.qr-scanner-placeholder span{width:70px;height:70px;display:grid;place-items:center;border:1px solid rgba(56,189,248,.35);border-radius:20px;background:rgba(14,165,233,.09);color:#7dd3fc;font-size:38px}.qr-scanner-placeholder strong{color:#cbd5e1;font-size:12px}.qr-scanner-guide{position:absolute;inset:14%;border:3px solid rgba(125,211,252,.92);border-radius:18px;box-shadow:0 0 0 999px rgba(2,6,23,.30),0 0 28px rgba(56,189,248,.35);pointer-events:none}.qr-scanner-guide:after{content:"";position:absolute;left:10%;right:10%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#22d3ee,transparent);box-shadow:0 0 14px #22d3ee;animation:qr-scan-line 1.8s ease-in-out infinite}.qr-scanner-status{min-height:42px;margin:12px 0 0;padding:10px 12px;border:1px solid rgba(148,163,184,.17);border-radius:10px;background:rgba(2,6,23,.42);color:#cbd5e1;font-size:11px;line-height:1.5}.qr-scanner-status.is-error{border-color:rgba(251,113,133,.40);background:rgba(190,24,93,.08);color:#fecdd3}.qr-scanner-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.qr-scanner-action{min-height:44px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 12px;border:1px solid rgba(56,189,248,.44);border-radius:10px;background:rgba(14,165,233,.12);color:#bae6fd;font:850 11px/1.25 'Inter',sans-serif;text-align:center;cursor:pointer}.qr-scanner-action.secondary{border-color:rgba(148,163,184,.28);background:rgba(148,163,184,.07);color:#e2e8f0}.qr-scanner-action:hover,.qr-scanner-action:focus-visible,.qr-scanner-action:focus-within{border-color:#7dd3fc;outline:3px solid rgba(56,189,248,.22);outline-offset:2px}.qr-scanner-action:disabled{opacity:.5;cursor:wait}.qr-scanner-file{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.qr-scanner-privacy{display:flex;align-items:flex-start;gap:7px;margin:12px 1px 0;color:#94a3b8;font-size:10px;line-height:1.5}.qr-scanner-privacy:before{content:"✓";color:#34d399;font-weight:900}.qr-scanner-manual{width:100%;min-height:42px;margin-top:9px;padding:0;border:0;background:transparent;color:#7dd3fc;font:800 11px/1.3 'Inter',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes qr-scan-line{0%,100%{transform:translateY(-74px);opacity:.45}50%{transform:translateY(74px);opacity:1}}
@media(prefers-reduced-motion:reduce){.qr-scanner-guide:after{animation:none}.qr-scan-btn{transition:none}}
@media(max-width:560px){.dashboard-serial-row{grid-template-columns:1fr}.dashboard-serial-row .qr-scan-btn{width:100%}.installer-field-row.serial-with-scanner{grid-template-columns:1fr 1fr}.installer-field-row.serial-with-scanner input{grid-column:1/-1}.installer-field-row.serial-with-scanner .copy-btn,.installer-field-row.serial-with-scanner .qr-scan-btn{width:100%;min-width:0}.qr-scanner-overlay{align-items:flex-end;padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}.qr-scanner-card{max-height:calc(100dvh - 16px);padding:17px 15px;border-radius:20px}.qr-scanner-head h3{font-size:18px}.qr-scanner-view{width:min(100%,330px)}.qr-scanner-actions{grid-template-columns:1fr}.qr-scanner-intro{font-size:11px}}

/* ===== V32 CONFIGURATOR-GESTUURD LIVE DASHBOARD ===== */
.r12-live-preview{--demo-accent:#38bdf8;position:relative;min-width:0;overflow:hidden;border:1px solid rgba(56,189,248,.34);border-radius:18px;background:radial-gradient(circle at 14% 0,rgba(14,165,233,.13),transparent 32%),linear-gradient(145deg,#071421,#070918 72%);box-shadow:0 18px 45px rgba(2,6,23,.35);color:#f8fafc}
.r12-live-preview.is-previewing{border-color:rgba(125,211,252,.72);box-shadow:0 0 0 1px rgba(56,189,248,.11),0 20px 48px rgba(2,6,23,.44)}
.r12-live-preview.style-signature{--demo-accent:#38bdf8}.r12-live-preview.style-mushroom{--demo-accent:#a855f7}.r12-live-preview.style-flow{--demo-accent:#10b981}.r12-live-preview.style-powerflow{--demo-accent:#0ea5e9}.r12-live-preview.style-apex{--demo-accent:#f43f5e}.r12-live-preview.style-barcard{--demo-accent:#eab308}.r12-live-preview.style-bubble{--demo-accent:#ec4899}.r12-live-preview.style-tilegrid{--demo-accent:#06b6d4}.r12-live-preview.style-gauge{--demo-accent:#38bdf8}.r12-live-preview.style-pro{--demo-accent:#f97316}.r12-live-preview.style-minimal{--demo-accent:#10b981}
.r12-live-preview--desktop{position:sticky;top:102px;z-index:3;width:min(460px,100%);max-height:420px;box-sizing:border-box;margin:0;overflow:hidden;pointer-events:none;box-shadow:0 22px 58px rgba(0,0,0,.52),0 0 0 1px rgba(56,189,248,.13);animation:r12-hover-preview-in .16s ease-out both}.r12-live-preview--desktop .r12-ha-shell--real{padding:10px}.r12-live-preview--desktop .r12-real-dashboard-preview{aspect-ratio:16/10}.r12-live-preview--mobile{display:none;margin:14px 0 4px}
@keyframes r12-hover-preview-in{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
.r12-live-preview-head{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 14px;border-bottom:1px solid rgba(148,163,184,.15);background:rgba(15,23,42,.78)}
.r12-live-kicker{color:#38bdf8;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.r12-live-preview-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.r12-demo-badge{margin-left:auto;flex:0 0 auto;border:1px solid color-mix(in srgb,var(--demo-accent) 58%,transparent);border-radius:999px;padding:4px 7px;color:color-mix(in srgb,var(--demo-accent) 82%,white);background:color-mix(in srgb,var(--demo-accent) 10%,transparent);font:850 8px/1.1 'JetBrains Mono',monospace;letter-spacing:.06em}
.r12-ha-shell{padding:13px;background-image:linear-gradient(rgba(56,189,248,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.025) 1px,transparent 1px);background-size:28px 28px}
.r12-ha-shell--real>:not(.r12-real-dashboard-preview){display:none!important}
.r12-real-dashboard-preview{position:relative;display:grid;width:100%;aspect-ratio:4/5;padding:0;place-items:center;overflow:hidden;border:0;border-radius:12px;background:#090d12;cursor:zoom-in;box-shadow:inset 0 0 0 1px rgba(148,163,184,.12)}
.r12-real-dashboard-preview:focus-visible{outline:3px solid color-mix(in srgb,var(--demo-accent) 72%,white);outline-offset:3px}
.r12-real-dashboard-preview img{display:block;width:100%;height:100%;object-fit:contain;object-position:top center;background:#090d12;transition:transform .24s ease,opacity .16s ease}
.r12-real-dashboard-preview:hover img{transform:scale(1.012)}
.v21-lightbox-img{aspect-ratio:auto}
.v39-mobile-preview-hint{display:none}
@media(max-width:900px){
  .r12-live-preview--mobile{display:none!important}
  .v39-mobile-preview-hint{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:6;display:inline-flex;align-items:center;justify-content:center;max-width:calc(100vw - 40px);box-sizing:border-box;padding:9px 13px;border:1px solid rgba(125,211,252,.30);border-radius:999px;background:rgba(2,6,23,.90);color:#e0f2fe;font-size:11px;font-weight:800;line-height:1.25;text-align:center;white-space:nowrap;transform:translateX(-50%);box-shadow:0 10px 30px rgba(0,0,0,.42);pointer-events:none}
}
.r12-ha-topbar{display:flex;align-items:center;gap:9px;margin-bottom:12px}.r12-ha-logo{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:#071526;color:#fff;font-size:14px;overflow:hidden;border:1px solid rgba(56,189,248,.34);box-shadow:0 0 18px rgba(14,165,233,.25)}.r12-ha-logo img{width:100%;height:100%;object-fit:cover;display:block}.r12-ha-title{min-width:0}.r12-ha-title b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.r12-ha-title small{display:block;margin-top:2px;color:#94a3b8;font-size:8px}.r12-live-status{margin-left:auto;display:flex;align-items:center;gap:5px;color:#86efac;font-size:8px;font-weight:800}.r12-live-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e}
.r12-demo-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:9px}.r12-demo-metric{min-width:0;padding:9px;border:1px solid rgba(148,163,184,.18);border-radius:11px;background:rgba(15,23,42,.82)}.r12-demo-metric span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#94a3b8;font-size:7px;text-transform:uppercase;letter-spacing:.05em}.r12-demo-metric strong{display:block;margin-top:4px;font-size:15px;line-height:1.05}.r12-demo-metric:nth-child(2) strong{color:#fb923c}.r12-demo-metric:nth-child(4) strong{color:#86efac}
.r12-demo-chart{position:relative;height:124px;margin-bottom:9px;padding:9px 9px 4px;border:1px solid rgba(148,163,184,.16);border-radius:12px;background:rgba(2,6,23,.70)}.r12-demo-chart-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px;font-size:8px;color:#94a3b8}.r12-demo-chart-top b{color:#e2e8f0;font-size:9px}.r12-demo-chart svg{display:block;width:100%;height:88px;overflow:visible}.r12-demo-area{fill:color-mix(in srgb,var(--demo-accent) 20%,transparent)}.r12-demo-line{fill:none;stroke:var(--demo-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--demo-accent) 55%,transparent))}
.r12-channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.r12-channel-card{min-width:0;padding:9px;border:1px solid rgba(148,163,184,.16);border-radius:11px;background:rgba(15,23,42,.82)}.r12-channel-card-top{display:flex;align-items:center;gap:6px;min-width:0}.r12-channel-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--channel-color);box-shadow:0 0 8px var(--channel-color)}.r12-channel-card b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.r12-channel-card strong{display:block;margin-top:7px;font-size:13px}.r12-channel-card small{display:block;color:#64748b;font-size:7px;margin-top:2px}.r12-channel-bar{height:3px;margin-top:7px;border-radius:4px;background:#1e293b;overflow:hidden}.r12-channel-bar i{display:block;height:100%;border-radius:inherit;background:var(--channel-color);transition:width .8s ease}
.r12-flow-demo{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center;min-height:205px}.r12-flow-source{display:grid;place-items:center;min-height:140px;padding:12px;border:1px solid color-mix(in srgb,var(--demo-accent) 55%,transparent);border-radius:17px;background:color-mix(in srgb,var(--demo-accent) 10%,#0f172a);text-align:center}.r12-flow-source span{font-size:8px;color:#94a3b8}.r12-flow-source strong{font-size:22px}.r12-flow-source small{font-size:8px;color:#6ee7b7}.r12-flow-lines{display:grid;gap:8px}.r12-flow-row{display:grid;grid-template-columns:minmax(80px,1fr) 64px;gap:8px;align-items:center;position:relative;min-width:0}.r12-flow-track{height:var(--flow-width);min-height:7px;max-height:25px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--channel-color) 80%,#0f172a),color-mix(in srgb,var(--channel-color) 35%,transparent));box-shadow:0 0 10px color-mix(in srgb,var(--channel-color) 22%,transparent)}.r12-flow-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.r12-flow-row b{display:block;font-size:10px}
.r12-powerflow-demo{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:center;min-height:205px}.r12-power-node{position:relative;z-index:1;text-align:center}.r12-power-node i,.r12-power-center i{display:grid;place-items:center;margin:auto;border-radius:50%;background:#0e2034;border:2px solid var(--channel-color);box-shadow:0 0 22px color-mix(in srgb,var(--channel-color) 20%,transparent);font-style:normal}.r12-power-node i{width:58px;height:58px;font-size:23px}.r12-power-center i{width:86px;height:86px;font-size:34px;border-color:var(--demo-accent)}.r12-power-node b,.r12-power-center b{display:block;margin-top:8px;font-size:9px}.r12-power-node small,.r12-power-center small{display:block;color:#94a3b8;font-size:8px;margin-top:2px}.r12-powerflow-demo::before{content:"";position:absolute;left:16%;right:16%;top:50%;height:2px;background:linear-gradient(90deg,#22c55e,var(--demo-accent),#f59e0b);box-shadow:0 0 9px var(--demo-accent)}
.r12-signature-demo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(120px,.95fr);gap:9px;min-height:205px}.r12-signature-flow{position:relative;display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;padding:10px;border:1px solid rgba(56,189,248,.24);border-radius:15px;background:radial-gradient(circle at 50% 42%,rgba(14,165,233,.18),transparent 37%),rgba(2,6,23,.68)}.r12-signature-flow::before{content:"";position:absolute;left:13%;right:13%;top:49%;height:2px;background:linear-gradient(90deg,#22c55e,#38bdf8,#fb923c);box-shadow:0 0 10px rgba(56,189,248,.55)}.r12-signature-node{position:relative;z-index:1;text-align:center}.r12-signature-node i{display:grid;place-items:center;width:38px;height:38px;margin:auto;border:1px solid var(--signature-color);border-radius:50%;background:#0b1728;color:var(--signature-color);font-style:normal;box-shadow:0 0 14px color-mix(in srgb,var(--signature-color) 30%,transparent)}.r12-signature-node.center i{width:56px;height:56px;font-size:21px}.r12-signature-node b,.r12-signature-node small{display:block}.r12-signature-node b{margin-top:6px;font-size:8px}.r12-signature-node small{margin-top:2px;color:#cbd5e1;font-size:8px}.r12-signature-side{display:grid;grid-template-rows:auto 1fr;gap:9px}.r12-signature-distribution{display:flex;height:22px;overflow:hidden;border:1px solid rgba(148,163,184,.18);border-radius:999px;background:#111827}.r12-signature-distribution i{display:block;height:100%;background:var(--channel-color);box-shadow:inset -1px 0 rgba(255,255,255,.22)}.r12-signature-trend{display:grid;padding:9px;border:1px solid rgba(148,163,184,.16);border-radius:13px;background:rgba(15,23,42,.76)}.r12-signature-trend strong{font-size:8px;color:#cbd5e1}.r12-signature-trend svg{width:100%;height:84px;overflow:visible}.r12-signature-trend polygon{fill:rgba(56,189,248,.13)}.r12-signature-trend polyline{fill:none;stroke:#38bdf8;stroke-width:3;filter:drop-shadow(0 0 4px rgba(56,189,248,.5))}
.r12-bubble-demo{display:grid;gap:9px}.r12-bubble-main{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--demo-accent) 48%,transparent);border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--demo-accent) 13%,#0b1527),#0c1628);box-shadow:0 10px 30px rgba(0,0,0,.18)}.r12-bubble-orb{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:color-mix(in srgb,var(--demo-accent) 22%,#101827);color:#fff;font-size:19px;box-shadow:0 0 18px color-mix(in srgb,var(--demo-accent) 32%,transparent)}.r12-bubble-copy b,.r12-bubble-copy small{display:block}.r12-bubble-copy b{font-size:10px}.r12-bubble-copy small{margin-top:3px;color:#94a3b8;font-size:8px}.r12-bubble-main>strong{font-size:17px;color:#f9a8d4}.r12-bubble-subs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.r12-bubble-sub{min-width:0;padding:10px 11px;border:1px solid rgba(148,163,184,.18);border-radius:999px;background:#101b2e}.r12-bubble-sub span,.r12-bubble-sub b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.r12-bubble-sub span{font-size:8px;color:#94a3b8}.r12-bubble-sub b{margin-top:3px;font-size:10px;color:var(--channel-color)}
.r12-tile-demo{display:grid;gap:8px}.r12-tile-direction{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid rgba(34,197,94,.32);border-radius:11px;background:rgba(16,185,129,.09);font-size:9px}.r12-tile-direction strong{color:#86efac}.r12-tile-matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.r12-tile-cell{min-width:0;padding:10px;border:1px solid color-mix(in srgb,var(--channel-color) 52%,transparent);border-radius:10px;background:#0d1a2d}.r12-tile-cell span,.r12-tile-cell strong,.r12-tile-cell small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.r12-tile-cell span{font-size:8px;color:#94a3b8}.r12-tile-cell strong{margin-top:6px;font-size:12px;color:var(--channel-color)}.r12-tile-cell small{margin-top:4px;font-size:7px;color:#64748b}
.r12-gauge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:205px;align-items:center}.r12-gauge{text-align:center}.r12-gauge-ring{--gauge-value:55%;width:94px;max-width:100%;aspect-ratio:1;margin:auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(from 225deg,#22c55e 0 22%,#eab308 22% 48%,#ef4444 48% var(--gauge-value),#1e293b var(--gauge-value) 75%,transparent 75%);position:relative;transform:rotate(0deg)}.r12-gauge-ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:#0a1424}.r12-gauge-ring strong{position:relative;z-index:1;font-size:15px}.r12-gauge span{display:block;margin-top:8px;color:#94a3b8;font-size:8px}
.r12-bar-demo,.r12-minimal-demo{display:grid;gap:8px;min-height:205px}.r12-bar-row,.r12-minimal-row{display:grid;grid-template-columns:minmax(80px,1fr) 1.5fr 58px;gap:8px;align-items:center;padding:7px 8px;border:1px solid rgba(148,163,184,.13);border-radius:9px;background:rgba(15,23,42,.62)}.r12-bar-row span,.r12-minimal-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.r12-bar-track{height:8px;border-radius:9px;background:#1e293b;overflow:hidden}.r12-bar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--channel-color),#fb923c);transition:width .8s ease}.r12-bar-row b,.r12-minimal-row b{font-size:9px;text-align:right}.r12-minimal-demo{padding:9px;border-radius:12px;background:#f8fafc}.r12-minimal-row{grid-template-columns:minmax(90px,1fr) 58px;background:#fff;border-color:#e2e8f0;color:#0f172a}.r12-minimal-row:nth-child(even){background:#f1f5f9}
.r12-live-preview.style-mushroom .r12-channel-card{border-radius:999px;padding:10px 12px;background:#111d32}.r12-live-preview.style-bubble .r12-channel-card{border-radius:22px}.r12-live-preview.style-tilegrid .r12-channel-card{border-color:color-mix(in srgb,var(--channel-color) 50%,transparent)}.r12-live-preview.style-apex .r12-demo-chart{box-shadow:inset 0 0 28px color-mix(in srgb,var(--demo-accent) 9%,transparent)}
.r12-demo-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;border-top:1px solid rgba(148,163,184,.14);background:rgba(15,23,42,.82);color:#94a3b8;font-size:8px;line-height:1.35}.r12-demo-foot b{color:#7dd3fc;font-size:8px}.r12-demo-foot span:last-child{flex:0 0 auto}
@media(min-width:901px){.dashboard-picker-list{max-height:min(52vh,520px);overflow-y:auto;overscroll-behavior:contain;padding-right:5px;scrollbar-width:thin;scrollbar-color:#334155 transparent}.dash-advanced-details .dashboard-picker-list{max-height:min(48vh,480px)}}
@media(min-width:1500px){
  .generator-grid{grid-template-columns:minmax(380px,440px) minmax(0,1fr);gap:20px;align-items:start}
  .generator-output-stack{display:grid!important;grid-template-columns:minmax(360px,460px) minmax(420px,1fr);gap:18px 20px;align-items:start;align-self:start;min-height:0}
  .generator-output-stack::before{content:"Voorbeeldgebied · wijs links een dashboardstijl aan";grid-column:1;grid-row:1;display:grid;place-items:center;min-height:150px;box-sizing:border-box;padding:22px;border:1px dashed rgba(56,189,248,.28);border-radius:18px;background:linear-gradient(145deg,rgba(14,165,233,.055),rgba(2,6,23,.28));color:#7dd3fc;font-size:10px;font-weight:850;line-height:1.5;text-align:center;letter-spacing:.035em}
  .generator-output-stack>.r12-live-preview--desktop{grid-column:1;grid-row:1;width:100%}
  .generator-output-stack>:not(.r12-live-preview--desktop){grid-column:2;min-width:0}
  .generator-output-stack>.dash-beginner-result,.generator-output-stack>.terminal-block{width:100%;min-width:0}
}
@media(max-width:900px){.r12-live-preview--desktop{display:none}.r12-live-preview--mobile{display:block}.r12-ha-shell{padding:10px}.r12-demo-metrics{grid-template-columns:1fr 1fr}.r12-channel-grid,.r12-tile-matrix{grid-template-columns:1fr 1fr}.r12-live-preview--mobile .r12-channel-grid .r12-channel-card:nth-child(n+5),.r12-live-preview--mobile .r12-tile-cell:nth-child(n+5){display:none}.r12-bubble-subs{grid-template-columns:1fr 1fr}.r12-bubble-sub:nth-child(n+3){display:none}.r12-flow-demo{grid-template-columns:88px 1fr}.r12-gauge-ring{width:76px}.r12-demo-foot span:last-child{display:none}}
@media(max-width:600px){.r12-signature-demo{grid-template-columns:1fr}.r12-signature-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}}
@media(max-width:460px){.r12-live-preview-head{align-items:flex-start;flex-wrap:wrap}.r12-live-preview-head strong{width:100%;order:3}.r12-demo-metric strong{font-size:13px}.r12-gauge-grid{gap:5px}.r12-gauge-ring{width:68px}.r12-gauge-ring::before{inset:9px}.r12-gauge-ring strong{font-size:11px}.r12-flow-demo{grid-template-columns:72px 1fr;gap:8px}.r12-flow-source strong{font-size:16px}.r12-power-center i{width:70px;height:70px}.r12-power-node i{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.r12-channel-bar i,.r12-bar-track i{transition:none}.r12-live-status::before{box-shadow:none}.r12-live-preview--desktop{animation:none}}

/* V20.71: subtiele merklaag achter de openbare website. Door de screen-blend
   verdwijnt het donkere afbeeldingsvlak en blijven vooral de logolijnen over. */
.v71-site-watermark{
  position:fixed;
  right:clamp(-78px,-3vw,-28px);
  bottom:clamp(-72px,-4vh,-30px);
  z-index:0;
  width:clamp(300px,34vw,610px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  pointer-events:none;
  user-select:none;
  overflow:hidden;
  opacity:.045;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 25%,rgba(0,0,0,.9) 48%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 50%,#000 25%,rgba(0,0,0,.9) 48%,transparent 78%);
  transform:rotate(-2deg);
}
.v71-site-watermark img{width:100%;height:100%;display:block;object-fit:contain;filter:saturate(.72) brightness(.94)}
.home-view>header,.home-view>main,.home-view>.skip-link{position:relative;z-index:1}
.home-view>header{position:fixed;z-index:100}
@media(max-width:760px){
  .v71-site-watermark{right:-72px;bottom:28px;width:clamp(240px,72vw,360px);opacity:.03;transform:rotate(-2deg)}
}
@media(prefers-reduced-motion:reduce){.v71-site-watermark{transform:none}}

/* v39 · Volta, de lokale en optioneel uitbreidbare R12-hulp */
.volta-welcome-overlay{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;box-sizing:border-box;padding:clamp(12px,3vw,34px);overflow:auto;background:radial-gradient(circle at 18% 18%,rgba(14,165,233,.14),transparent 34%),radial-gradient(circle at 82% 76%,rgba(124,58,237,.13),transparent 36%),rgba(2,6,23,.76);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.volta-welcome-card{position:relative;display:grid;grid-template-columns:minmax(190px,245px) minmax(0,1fr);width:min(900px,100%);overflow:hidden;border:1px solid rgba(103,232,249,.34);border-radius:28px;background:linear-gradient(145deg,rgba(15,31,51,.995),rgba(7,13,26,.998) 72%);box-shadow:0 35px 110px rgba(0,0,0,.68),0 0 54px rgba(14,165,233,.10);color:#e8f2fb;outline:none}
.volta-welcome-portrait{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:430px;padding:32px 28px;overflow:hidden;background:linear-gradient(155deg,rgba(8,47,73,.86),rgba(49,22,82,.76))}.volta-welcome-portrait:after{content:'⚡';position:absolute;right:-22px;bottom:-38px;color:rgba(103,232,249,.07);font:900 190px/1 sans-serif;transform:rotate(10deg)}
.volta-welcome-avatar{position:relative;z-index:1;display:block;width:82px;height:82px;overflow:hidden;border:2px solid rgba(255,255,255,.28);border-radius:27px;background:linear-gradient(145deg,#22d3ee,#7c3aed);box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 28px rgba(34,211,238,.18)}.volta-welcome-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%}.volta-welcome-portrait small{position:relative;z-index:1;margin-top:18px;color:#a5f3fc;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.volta-welcome-portrait strong{position:relative;z-index:1;margin-top:6px;color:#f8fafc;font-size:22px;line-height:1.15}.volta-welcome-portrait p{position:relative;z-index:1;margin:10px 0 0;color:#cbd5e1;font-size:11px;line-height:1.55}
.volta-welcome-main{min-width:0;padding:25px 26px 22px}.volta-welcome-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.volta-welcome-top h2{margin:0;color:#f8fafc;font-size:clamp(22px,3vw,31px);line-height:1.12;letter-spacing:-.025em}.volta-welcome-top p{margin:8px 0 0;color:#b8c8da;font-size:12px;line-height:1.52}.volta-welcome-language{flex:0 0 auto;min-height:38px;padding:0 9px;border:1px solid rgba(148,163,184,.28);border-radius:10px;background:rgba(2,6,23,.55);color:#dbeafe;font:850 10px/1 'Inter',sans-serif;cursor:pointer}
.volta-welcome-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.volta-welcome-option{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:91px;padding:12px;border:1px solid rgba(148,163,184,.18);border-radius:15px;background:rgba(15,23,42,.58);color:#e5edf7;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}.volta-welcome-option:hover,.volta-welcome-option:focus-visible{transform:translateY(-2px);border-color:rgba(103,232,249,.72);background:rgba(14,165,233,.10);outline:3px solid rgba(56,189,248,.13);outline-offset:2px}.volta-welcome-option-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(56,189,248,.11);font-size:19px}.volta-welcome-option strong{display:block;color:#f8fafc;font-size:11px;line-height:1.28}.volta-welcome-option small{display:block;margin-top:4px;color:#8fa3ba;font-size:9px;line-height:1.4}.volta-welcome-option-arrow{color:#67e8f9;font-size:16px;font-weight:900}.volta-welcome-option.is-meter{border-color:rgba(56,189,248,.28)}.volta-welcome-option.is-dashboard{border-color:rgba(52,211,153,.25)}.volta-welcome-option.is-support{border-color:rgba(251,191,36,.25)}.volta-welcome-option.is-browse{border-color:rgba(167,139,250,.25)}
.volta-welcome-soft-note{display:flex;align-items:center;gap:7px;margin:14px 2px 0;color:#8fa3ba;font-size:9.5px;line-height:1.45}.volta-welcome-soft-note:before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 9px rgba(52,211,153,.65)}.volta-welcome-cookie{display:flex;align-items:center;gap:9px;margin-top:13px;padding:9px 11px;border:1px solid rgba(251,191,36,.18);border-radius:12px;background:rgba(120,53,15,.08);color:#c9bfa9;font-size:9px;line-height:1.4}.volta-welcome-cookie p{margin:0}.volta-welcome-cookie span{font-size:20px}.volta-welcome-cookie strong{color:#fde68a}
@media(max-width:720px){.volta-welcome-overlay{align-items:start;padding:8px}.volta-welcome-card{grid-template-columns:1fr;border-radius:21px}.volta-welcome-portrait{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:13px;align-items:center;min-height:0;padding:17px 18px}.volta-welcome-avatar{grid-row:1/4;width:58px;height:58px;border-radius:19px}.volta-welcome-portrait small{margin:0}.volta-welcome-portrait strong{margin-top:2px;font-size:17px}.volta-welcome-portrait p{margin-top:3px;font-size:9.5px}.volta-welcome-main{padding:18px 14px 14px}.volta-welcome-top h2{font-size:21px}.volta-welcome-top p{font-size:10.5px}.volta-welcome-options{grid-template-columns:1fr;gap:7px;margin-top:13px}.volta-welcome-option{min-height:70px;padding:9px 10px}.volta-welcome-cookie{margin-top:9px}.volta-welcome-soft-note{margin-top:10px}}
@media(max-width:380px){.volta-welcome-language{min-height:34px;padding:0 7px}.volta-welcome-option small{font-size:8.5px}.volta-welcome-main{padding-left:11px;padding-right:11px}}
@media(prefers-reduced-motion:reduce){.volta-welcome-option{transition:none}}
.r12-help-launcher{position:fixed;left:20px;bottom:20px;z-index:1140;display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:6px 15px 6px 7px;border:1px solid rgba(56,189,248,.48);border-radius:999px;background:linear-gradient(135deg,rgba(8,47,73,.98),rgba(49,22,82,.98));box-shadow:0 15px 38px rgba(0,0,0,.42),0 0 24px rgba(14,165,233,.13);color:#f8fafc;font:900 12px/1.2 'Inter',sans-serif;cursor:pointer;transition:transform .2s ease,border-color .2s ease,filter .2s ease}.r12-help-launcher:hover,.r12-help-launcher:focus-visible{transform:translateY(-2px);border-color:#67e8f9;filter:brightness(1.08);outline:3px solid rgba(56,189,248,.18);outline-offset:2px}.r12-help-launcher-art{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:linear-gradient(145deg,#22d3ee,#7c3aed);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);font-size:19px}.r12-help-launcher small{display:block;margin-top:1px;color:#a5f3fc;font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.r12-companion-dock{position:fixed;left:20px;bottom:20px;z-index:1140;display:grid;justify-items:start;gap:5px;max-width:calc(100vw - 40px)}.r12-companion-promise{display:inline-flex;align-items:center;gap:5px;margin-left:7px;padding:3px 7px;border:1px solid rgba(52,211,153,.18);border-radius:999px;background:rgba(2,6,23,.82);box-shadow:0 7px 20px rgba(0,0,0,.22);color:#a7f3d0;font:800 8px/1.2 'Inter',sans-serif;letter-spacing:.025em}.r12-companion-promise:before{content:'';width:5px;height:5px;border-radius:50%;background:#34d399}.r12-companion-actions{display:flex;align-items:center;gap:7px}.r12-companion-dock .r12-help-launcher{position:relative;left:auto;bottom:auto;z-index:auto}.r12-cookie-companion{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 13px 6px 7px;border:1px solid rgba(251,191,36,.44);border-radius:999px;background:linear-gradient(135deg,rgba(69,39,9,.97),rgba(35,20,9,.98));box-shadow:0 15px 38px rgba(0,0,0,.38),0 0 22px rgba(245,158,11,.09);color:#fff7d6;font:900 12px/1.2 'Inter',sans-serif;cursor:pointer;transition:transform .2s ease,border-color .2s ease,filter .2s ease}.r12-cookie-companion:hover,.r12-cookie-companion:focus-visible{transform:translateY(-2px);border-color:#fde68a;filter:brightness(1.07);outline:3px solid rgba(251,191,36,.18);outline-offset:2px}.r12-cookie-companion-art{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:linear-gradient(145deg,#fde68a,#f59e0b);box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);font-size:19px}.r12-cookie-companion small{display:block;margin-top:1px;color:#fde68a;font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.r12-volta-phone{position:absolute;left:27px;top:-22px;z-index:3;display:inline-flex;align-items:center;gap:4px;padding:4px 7px 4px 5px;border:1px solid rgba(103,232,249,.52);border-radius:999px;background:linear-gradient(135deg,rgba(8,47,73,.98),rgba(49,22,82,.98));box-shadow:0 9px 24px rgba(0,0,0,.38),0 0 18px rgba(34,211,238,.14);color:#e0f2fe;opacity:0;pointer-events:none;transform:translate(-8px,8px) rotate(-16deg) scale(.72);transform-origin:20% 100%;animation:r12-volta-phone 52s 16s ease-in-out infinite}.r12-volta-phone i{font:normal 15px/1 sans-serif}.r12-volta-phone b{color:#a5f3fc;font:900 8px/1 'Inter',sans-serif;letter-spacing:.03em}
.r12-help-launcher-art{animation:r12-duo-volta 54s 18s ease-in-out infinite,r12-volta-call-glow 52s 16s ease-in-out infinite}.r12-cookie-companion-art{animation:r12-duo-cookie 54s 18s ease-in-out infinite}@keyframes r12-duo-volta{0%,88%,96%,100%{transform:none}90%{transform:translateX(3px) rotate(4deg)}92%{transform:translateX(1px) rotate(-2deg)}94%{transform:none}}@keyframes r12-duo-cookie{0%,88%,96%,100%{transform:none}90%{transform:translateX(-3px) rotate(-5deg)}92%{transform:translateX(-1px) rotate(3deg)}94%{transform:none}}@keyframes r12-volta-phone{0%,72%,88%,100%{opacity:0;transform:translate(-8px,8px) rotate(-16deg) scale(.72)}75%{opacity:1;transform:translate(-1px,1px) rotate(5deg) scale(1.04)}78%,84%{opacity:1;transform:translate(0,0) rotate(-3deg) scale(1)}80%,82%{opacity:1;transform:translate(1px,-1px) rotate(3deg) scale(1)}87%{opacity:0;transform:translate(7px,-6px) rotate(14deg) scale(.82)}}@keyframes r12-volta-call-glow{0%,72%,88%,100%{filter:none}76%,85%{filter:brightness(1.12) drop-shadow(0 0 5px rgba(103,232,249,.45))}}
.r12-dashboard-choice-dock{position:fixed;right:20px;bottom:20px;z-index:1130;box-sizing:border-box;display:flex;align-items:center;gap:11px;max-width:min(760px,calc(100vw - 40px));padding:9px 9px 9px 11px;border:1px solid rgba(103,232,249,.42);border-radius:17px;background:linear-gradient(145deg,rgba(15,31,51,.985),rgba(7,13,26,.99));box-shadow:0 20px 58px rgba(0,0,0,.48),0 0 28px rgba(14,165,233,.08);color:#dbeafe}.r12-dashboard-choice-volta{position:relative;flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;overflow:visible;border:1px solid rgba(103,232,249,.34);border-radius:13px;background:linear-gradient(145deg,#22d3ee,#7c3aed);box-shadow:0 8px 20px rgba(14,165,233,.18);animation:r12-choice-volta 7s 1.4s ease-in-out 2}.r12-dashboard-choice-volta img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%;border-radius:12px}.r12-dashboard-choice-volta:after{content:'→';position:absolute;right:-13px;top:-9px;display:grid;place-items:center;width:21px;height:21px;border:1px solid rgba(167,243,208,.42);border-radius:50%;background:#052e2b;color:#a7f3d0;font:900 12px/1 sans-serif;box-shadow:0 0 16px rgba(52,211,153,.2);animation:r12-choice-arrow 1.4s ease-in-out infinite}.r12-dashboard-choice-summary{flex:1;min-width:0;color:#94a3b8;font-size:9px;line-height:1.35}.r12-dashboard-choice-summary strong{display:block;overflow:hidden;color:#e0f2fe;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.r12-dashboard-choice-actions{flex:0 0 auto;display:flex;align-items:stretch;gap:7px}.r12-dashboard-choice-button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;padding:0 13px;border:1px solid rgba(56,189,248,.52);border-radius:12px;background:rgba(14,165,233,.13);color:#bae6fd;font:900 10.5px/1.25 'Inter',sans-serif;text-align:center;text-decoration:none;cursor:pointer}.r12-dashboard-choice-button.is-live{border-color:rgba(56,189,248,.32);background:rgba(14,165,233,.07);color:#bae6fd}.r12-dashboard-choice-button.is-primary{min-width:170px;border-color:rgba(52,211,153,.68);background:linear-gradient(135deg,rgba(5,150,105,.95),rgba(13,148,136,.95));color:#ecfdf5;box-shadow:0 10px 26px rgba(16,185,129,.18)}.r12-dashboard-choice-button:hover,.r12-dashboard-choice-button:focus-visible{border-color:#67e8f9;background:rgba(14,165,233,.22);outline:3px solid rgba(56,189,248,.16);outline-offset:2px}.r12-dashboard-choice-button.is-primary:hover,.r12-dashboard-choice-button.is-primary:focus-visible{border-color:#a7f3d0;background:linear-gradient(135deg,#059669,#0d9488);outline-color:rgba(52,211,153,.22);transform:translateY(-1px)}.r12-dashboard-choice-enter-active,.r12-dashboard-choice-leave-active{transition:opacity .18s ease,transform .18s ease}.r12-dashboard-choice-enter-from,.r12-dashboard-choice-leave-to{opacity:0;transform:translateY(7px)}
@keyframes r12-choice-volta{0%,28%,100%{transform:none}10%{transform:rotate(-4deg) translateY(-2px)}18%{transform:rotate(3deg) translateY(-1px)}}@keyframes r12-choice-arrow{0%,100%{transform:translateX(0);opacity:.72}50%{transform:translateX(3px);opacity:1}}

/* v64 · Compact zwevend dashboardvoorbeeld zonder verschuiving van de configurator. */
.r12-install-overlay{position:fixed;inset:0;z-index:1460;display:grid;place-items:center;box-sizing:border-box;padding:clamp(12px,3vw,32px);overflow:auto;background:radial-gradient(circle at 20% 16%,rgba(14,165,233,.14),transparent 34%),radial-gradient(circle at 82% 78%,rgba(16,185,129,.10),transparent 34%),rgba(2,6,23,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.r12-install-card{position:relative;box-sizing:border-box;width:min(820px,100%);overflow:hidden;border:1px solid rgba(103,232,249,.38);border-radius:25px;background:linear-gradient(150deg,rgba(15,31,51,.995),rgba(7,13,26,.998) 74%);box-shadow:0 34px 100px rgba(0,0,0,.68),0 0 46px rgba(14,165,233,.10);color:#e5edf7}
.r12-install-head{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:14px;align-items:center;padding:20px 20px 17px;border-bottom:1px solid rgba(148,163,184,.14);background:linear-gradient(135deg,rgba(14,165,233,.11),rgba(16,185,129,.07))}.r12-install-volta{position:relative;display:block;width:62px;height:62px}.r12-install-volta img{display:block;width:58px;height:58px;object-fit:cover;object-position:50% 24%;border:2px solid rgba(255,255,255,.24);border-radius:20px;background:linear-gradient(145deg,#22d3ee,#7c3aed);box-shadow:0 12px 28px rgba(14,165,233,.22);animation:r12-install-volta 4.8s 1s ease-in-out 2}.r12-install-volta i{position:absolute;right:-5px;bottom:-1px;display:grid;place-items:center;width:24px;height:24px;border:2px solid #0f1f33;border-radius:50%;background:#10b981;color:#03231a;font:900 12px/1 sans-serif;animation:r12-install-spark 1.8s ease-in-out infinite}.r12-install-heading{min-width:0}.r12-install-heading small{display:block;color:#a5f3fc;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.r12-install-heading h2{margin:4px 0 0;color:#f8fafc;font-size:clamp(21px,3vw,29px);line-height:1.12;letter-spacing:-.025em}.r12-install-heading p{margin:7px 0 0;color:#b8c8da;font-size:11px;line-height:1.48}.r12-install-close{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(148,163,184,.22);border-radius:12px;background:rgba(15,23,42,.58);color:#dbeafe;font:900 22px/1 sans-serif;cursor:pointer}.r12-install-close:hover,.r12-install-close:focus-visible{border-color:#67e8f9;background:rgba(14,165,233,.13);outline:3px solid rgba(56,189,248,.16);outline-offset:2px}
.r12-install-body{padding:18px 20px 20px}.r12-install-safe{display:flex;gap:9px;align-items:flex-start;margin:0 0 15px;padding:10px 12px;border:1px solid rgba(52,211,153,.24);border-radius:13px;background:rgba(16,185,129,.07);color:#c7f9e5;font-size:10px;line-height:1.5}.r12-install-safe span{font-size:17px}.r12-install-safe strong{color:#a7f3d0}.r12-helper-target{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin:0 0 13px;padding:12px 13px;border:1px solid rgba(56,189,248,.28);border-radius:14px;background:linear-gradient(135deg,rgba(14,165,233,.10),rgba(124,58,237,.06))}.r12-helper-target small,.r12-helper-target strong{display:block}.r12-helper-target small{color:#7dd3fc;font-size:8px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.r12-helper-target strong{margin-top:4px;color:#f8fafc;font:800 10px/1.45 'JetBrains Mono',monospace;overflow-wrap:anywhere}.r12-install-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 0 12px;color:#94a3b8;font-size:9px;font-weight:800}.r12-install-progress-track{height:7px;overflow:hidden;border-radius:999px;background:rgba(148,163,184,.13)}.r12-install-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0ea5e9,#22c55e);transition:width .2s ease}.r12-install-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;counter-reset:r12-install-step}.r12-install-step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;min-width:0;padding:13px 12px 12px 44px;border:1px solid rgba(148,163,184,.17);border-radius:14px;background:rgba(15,23,42,.58);counter-increment:r12-install-step;cursor:pointer;transition:border-color .18s ease,background .18s ease,opacity .18s ease}.r12-install-step:hover,.r12-install-step:focus-within{border-color:rgba(103,232,249,.46)}.r12-install-step.is-done{border-color:rgba(52,211,153,.34);background:rgba(16,185,129,.07)}.r12-install-step:before{content:counter(r12-install-step);position:absolute;left:11px;top:12px;display:grid;place-items:center;width:24px;height:24px;border:1px solid rgba(103,232,249,.38);border-radius:8px;background:rgba(14,165,233,.12);color:#67e8f9;font:900 10px/1 'Inter',sans-serif}.r12-install-step.is-done:before{content:'✓';border-color:rgba(52,211,153,.45);background:#10b981;color:#03231a}.r12-install-step-copy{display:block;min-width:0}.r12-install-step-copy em{display:block;margin-bottom:3px;color:#7dd3fc;font-size:7.5px;font-style:normal;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.r12-install-step strong{display:block;color:#f8fafc;font-size:10.5px;line-height:1.35}.r12-install-step span{display:block;margin-top:5px;color:#9fb0c4;font-size:9.5px;line-height:1.5}.r12-install-step-check{width:17px;height:17px;margin:1px 0 0;accent-color:#10b981}.r12-install-route{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:14px 0 0;padding:10px 12px;border:1px dashed rgba(167,139,250,.30);border-radius:13px;background:rgba(76,29,149,.07);color:#c4b5fd;font-size:9.5px;line-height:1.4}.r12-install-route b{color:#ede9fe}.r12-install-route i{color:#67e8f9;font-style:normal}.r12-install-success{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:9px 11px;border:1px solid rgba(52,211,153,.34);border-radius:12px;background:rgba(16,185,129,.10);color:#a7f3d0;font-size:10px;font-weight:800}.r12-install-success:before{content:'✓';display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#34d399;color:#03231a;font-weight:950}.r12-install-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px}.r12-install-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:43px;padding:0 14px;border:1px solid rgba(148,163,184,.24);border-radius:12px;background:rgba(15,23,42,.60);color:#dbeafe;font:900 10.5px/1.25 'Inter',sans-serif;text-align:center;cursor:pointer}.r12-install-button.is-help{margin-right:auto;border-color:rgba(167,139,250,.34);background:rgba(124,58,237,.09);color:#ddd6fe}.r12-install-button.is-copy{min-width:205px;border-color:rgba(52,211,153,.65);background:linear-gradient(135deg,#059669,#0d9488);color:#ecfdf5;box-shadow:0 10px 26px rgba(16,185,129,.18)}.r12-install-button.is-download{border-color:rgba(56,189,248,.55);background:linear-gradient(135deg,#0369a1,#2563eb);color:#eff6ff}.r12-install-button:hover,.r12-install-button:focus-visible{border-color:#67e8f9;outline:3px solid rgba(56,189,248,.15);outline-offset:2px;filter:brightness(1.08)}.r12-install-button.is-copy:hover,.r12-install-button.is-copy:focus-visible{border-color:#a7f3d0;outline-color:rgba(52,211,153,.2)}
@keyframes r12-install-volta{0%,34%,100%{transform:none}12%{transform:rotate(-4deg) translateY(-2px)}23%{transform:rotate(3deg)}}@keyframes r12-install-spark{0%,100%{transform:scale(.92);box-shadow:0 0 0 0 rgba(52,211,153,.24)}50%{transform:scale(1.06);box-shadow:0 0 0 7px rgba(52,211,153,0)}}
@media(max-width:720px){.r12-install-overlay{align-items:end;padding:8px}.r12-install-card{max-height:calc(100dvh - 16px);overflow:auto;border-radius:21px}.r12-install-head{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:14px}.r12-install-volta{width:48px;height:48px}.r12-install-volta img{width:46px;height:46px;border-radius:16px}.r12-install-heading h2{font-size:20px}.r12-install-body{padding:14px}.r12-helper-target{grid-template-columns:1fr}.r12-install-steps{grid-template-columns:1fr;gap:7px}.r12-install-step{padding-top:11px;padding-bottom:11px}.r12-install-actions{display:grid;grid-template-columns:1fr 1fr}.r12-install-button.is-help{margin:0}.r12-install-button.is-copy{grid-column:1/-1;grid-row:1;min-width:0}.r12-install-route{font-size:9px}}
.r12-help-overlay{position:fixed;inset:0;z-index:1400;background:rgba(2,6,23,.38);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.r12-help-panel{position:fixed;left:20px;bottom:20px;z-index:1401;box-sizing:border-box;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;width:min(430px,calc(100vw - 40px));height:min(690px,calc(100vh - 40px));height:min(690px,calc(100dvh - 40px));overflow:hidden;border:1px solid rgba(56,189,248,.42);border-radius:22px;background:linear-gradient(155deg,rgba(15,31,51,.99),rgba(7,13,26,.995) 72%);box-shadow:0 28px 85px rgba(0,0,0,.62),0 0 45px rgba(14,165,233,.10);color:#e5edf7}.r12-help-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:14px 14px 12px;border-bottom:1px solid rgba(148,163,184,.14);background:linear-gradient(135deg,rgba(14,165,233,.10),rgba(124,58,237,.10))}.r12-help-avatar{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:linear-gradient(145deg,#22d3ee,#7c3aed);box-shadow:0 8px 22px rgba(14,165,233,.25);font-size:25px;transform:rotate(-3deg)}.r12-help-avatar:after{content:'•‿•';position:absolute;bottom:3px;color:#061526;font:900 8px/1 monospace;letter-spacing:-1px}.r12-help-heading{min-width:0}.r12-help-heading strong{display:block;overflow:hidden;color:#f8fafc;font-size:15px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.r12-help-mode{display:flex;align-items:center;gap:5px;margin-top:3px;color:#a5f3fc;font-size:9px;font-weight:800}.r12-help-mode:before{content:'';width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.7)}.r12-help-head-actions{display:flex;gap:6px}.r12-help-icon-btn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(148,163,184,.22);border-radius:11px;background:rgba(15,23,42,.58);color:#dbeafe;font:900 17px/1 sans-serif;cursor:pointer}.r12-help-icon-btn:hover,.r12-help-icon-btn:focus-visible{border-color:#67e8f9;background:rgba(14,165,233,.13);outline:2px solid rgba(56,189,248,.18);outline-offset:1px}
.r12-help-launcher-art,.r12-help-avatar{overflow:hidden}.r12-help-launcher-art img,.r12-help-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%}.r12-help-avatar{transform:none}.r12-help-avatar:after{display:none}
.daily-assistant-avatar.is-ari{background:radial-gradient(circle at 32% 24%,#38bdf8,#1d4ed8 48%,#172554)}
.daily-assistant-avatar{display:grid!important;place-items:center;isolation:isolate}.daily-assistant-avatar.is-volta{background:linear-gradient(145deg,#22d3ee,#0f3f78)}.daily-assistant-avatar.is-nova{background:radial-gradient(circle at 30% 25%,#c084fc,#6d28d9 46%,#1e1b4b)}.daily-assistant-avatar.is-pulse{background:radial-gradient(circle at 32% 24%,#5eead4,#0f766e 48%,#042f2e)}.daily-assistant-avatar.is-lumen{background:radial-gradient(circle at 32% 24%,#fcd34d,#d97706 48%,#451a03)}.daily-assistant-avatar.is-sol{background:radial-gradient(circle at 32% 24%,#fb923c,#c2410c 48%,#431407)}.daily-assistant-avatar.is-echo{background:radial-gradient(circle at 32% 24%,#67e8f9,#2563eb 48%,#172554)}.daily-assistant-avatar img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}.daily-assistant-glyph{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;color:#fff;font:900 24px/1 'Inter',sans-serif;text-shadow:0 3px 12px rgba(0,0,0,.35)}.volta-welcome-avatar .daily-assistant-glyph{font-size:39px}.daily-assistant-avatar.is-pulse .daily-assistant-glyph{font-size:29px}.daily-assistant-avatar.is-lumen .daily-assistant-glyph{font-size:30px}
.r12-help-privacy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;margin:10px 12px 0;padding:9px 10px;border:1px solid rgba(251,191,36,.20);border-radius:12px;background:rgba(120,53,15,.10);color:#cbd5e1;font-size:9.5px;line-height:1.42}.r12-help-privacy span:first-child{font-size:20px}.r12-help-privacy strong{display:block;margin-bottom:2px;color:#fde68a;font-size:10px}.r12-help-messages{display:flex;flex-direction:column;gap:9px;min-height:0;margin:10px 5px 0 12px;padding:0 7px 10px 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.r12-help-message{display:flex;flex-direction:column;align-items:flex-start;max-width:88%}.r12-help-message.is-user{align-self:flex-end;align-items:flex-end}.r12-help-message-label{margin:0 6px 3px;color:#7890aa;font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.r12-help-bubble{padding:10px 12px;border:1px solid rgba(148,163,184,.17);border-radius:6px 15px 15px 15px;background:rgba(30,41,59,.72);color:#dce7f3;font-size:11px;line-height:1.52;overflow-wrap:anywhere;white-space:pre-wrap}.r12-help-message.is-user .r12-help-bubble{border-color:rgba(56,189,248,.28);border-radius:15px 6px 15px 15px;background:linear-gradient(135deg,rgba(3,105,161,.55),rgba(30,64,175,.48));color:#f8fafc}.r12-help-typing{display:inline-flex;gap:4px;align-items:center;padding:9px 12px;border-radius:6px 15px 15px;background:rgba(30,41,59,.72)}.r12-help-typing i{width:5px;height:5px;border-radius:50%;background:#67e8f9;animation:r12-help-dot 1s ease-in-out infinite}.r12-help-typing i:nth-child(2){animation-delay:.14s}.r12-help-typing i:nth-child(3){animation-delay:.28s}
.r12-help-tools{max-height:136px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.r12-help-chips,.r12-help-actions,.r12-help-suggestions{display:flex;gap:6px;overflow-x:auto;padding:0 12px 8px;scrollbar-width:none}.r12-help-chips::-webkit-scrollbar,.r12-help-actions::-webkit-scrollbar,.r12-help-suggestions::-webkit-scrollbar{display:none}.r12-help-chip,.r12-help-action,.r12-help-suggestion{flex:0 0 auto;min-height:34px;padding:7px 10px;border-radius:999px;font:800 9.5px/1.25 'Inter',sans-serif;cursor:pointer;white-space:nowrap}.r12-help-chip{border:1px solid rgba(56,189,248,.25);background:rgba(14,165,233,.07);color:#bae6fd}.r12-help-action{border:1px solid rgba(52,211,153,.32);background:rgba(16,185,129,.09);color:#a7f3d0}.r12-help-action.is-online{border-color:rgba(167,139,250,.42);background:rgba(124,58,237,.13);color:#ddd6fe}.r12-help-action.is-whatsapp{border-color:rgba(74,222,128,.46);background:rgba(22,163,74,.14);color:#bbf7d0}.r12-help-action.is-email{border-color:rgba(56,189,248,.46);background:rgba(14,165,233,.12);color:#bae6fd}.r12-help-suggestion{border:1px dashed rgba(148,163,184,.30);background:rgba(148,163,184,.06);color:#cbd5e1}.r12-help-chip:hover,.r12-help-chip:focus-visible,.r12-help-action:hover,.r12-help-action:focus-visible,.r12-help-suggestion:hover,.r12-help-suggestion:focus-visible{border-color:#67e8f9;outline:2px solid rgba(56,189,248,.15);outline-offset:1px}.r12-help-handoff-note{display:flex;align-items:flex-start;gap:7px;margin:0 12px 8px;padding:8px 9px;border:1px solid rgba(56,189,248,.20);border-radius:11px;background:rgba(14,165,233,.055);color:#9fb5ca;font-size:8.5px;line-height:1.45}.r12-help-handoff-note:before{content:'↗';flex:0 0 auto;color:#67e8f9;font-size:11px;font-weight:900}.r12-help-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0 12px;padding:10px 0 0;border-top:1px solid rgba(148,163,184,.14)}.r12-help-form textarea{box-sizing:border-box;width:100%;min-height:48px;max-height:112px;resize:none;padding:11px 12px;border:1px solid rgba(100,116,139,.48);border-radius:13px;background:#020817;color:#f8fafc;font:500 11px/1.4 'Inter',sans-serif;outline:none}.r12-help-form textarea:focus{border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.12)}.r12-help-form textarea::placeholder{color:#65748a}.r12-help-send{align-self:stretch;min-width:52px;padding:0 12px;border:1px solid rgba(56,189,248,.55);border-radius:13px;background:linear-gradient(135deg,#22d3ee,#0ea5e9);color:#032337;font-size:20px;font-weight:950;cursor:pointer}.r12-help-send:disabled{cursor:not-allowed;filter:saturate(.25);opacity:.52}.r12-help-form-meta{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:-3px;color:#64748b;font-size:8px}.r12-help-footer{padding:8px 12px 11px;color:#718198;font-size:8.5px;line-height:1.4;text-align:center}.r12-help-footer strong{color:#93c5fd}.r12-help-history-link{display:inline-flex;align-items:center;gap:4px;min-height:24px;margin-left:5px;padding:2px 5px;border-radius:7px;color:#94a3b8;font-size:10px;text-decoration:none;text-underline-offset:2px}.r12-help-history-link:hover{color:#fde68a;text-decoration:underline}.r12-help-history-link:focus-visible{color:#fde68a;text-decoration:underline;outline:2px solid rgba(103,232,249,.75);outline-offset:1px}.r12-help-warning{color:#fcd34d}.r12-help-error{color:#fda4af}
@keyframes r12-help-dot{0%,70%,100%{transform:translateY(0);opacity:.42}35%{transform:translateY(-3px);opacity:1}}
@media(max-width:720px){.r12-help-launcher{left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));min-height:44px;padding-right:12px}.r12-help-launcher.is-dashboard{bottom:calc(12px + env(safe-area-inset-bottom,0px))}.r12-help-launcher-art{width:32px;height:32px;font-size:17px}.r12-help-panel{left:calc(8px + env(safe-area-inset-left,0px));right:calc(8px + env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;height:min(88vh,720px);height:min(88dvh,720px);max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border-radius:20px}.r12-help-header{padding:11px}.r12-help-avatar{width:42px;height:42px}.r12-help-privacy{margin-top:8px}.r12-help-messages{margin-top:8px}.r12-help-tools{max-height:96px}.r12-help-form{padding-top:8px}.r12-help-icon-btn{width:42px;height:42px}.r12-help-chip,.r12-help-action,.r12-help-suggestion{min-height:38px}.r12-help-send{min-width:54px}.r12-help-form textarea{font-size:16px}.r12-help-footer{padding-bottom:9px}}
@media(max-width:900px){.r12-companion-dock{left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 24px)}.r12-companion-dock.is-dashboard{bottom:calc(12px + env(safe-area-inset-bottom,0px))}.r12-companion-dock.is-dashboard.has-dashboard-choice{bottom:calc(82px + env(safe-area-inset-bottom,0px))}.r12-companion-dock .r12-help-launcher,.r12-cookie-companion{min-height:44px}.r12-companion-dock .r12-help-launcher{padding-right:11px}.r12-cookie-companion{padding-right:11px}.r12-cookie-companion-art{width:32px;height:32px;font-size:17px}.r12-dashboard-choice-dock{left:0;right:0;bottom:0;max-width:none;min-height:68px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));border-width:1px 0 0;border-radius:0;background:rgba(7,13,26,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.r12-dashboard-choice-summary{flex:1}.r12-dashboard-choice-actions{flex:0 0 auto}.dashboard-studio-view.has-dashboard-choice{padding-bottom:78px}}
@media(max-width:620px){.r12-dashboard-choice-summary{display:none}.r12-dashboard-choice-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.r12-dashboard-choice-button{width:100%;min-height:46px;padding:0 8px;font-size:10px}}
@media(max-width:420px){.r12-companion-actions{gap:5px}.r12-companion-dock .r12-help-launcher,.r12-cookie-companion{padding-right:8px}.r12-help-launcher small,.r12-cookie-companion small{display:none}.r12-companion-promise{margin-left:4px;font-size:7.5px}.r12-dashboard-choice-button{font-size:9.5px}}
@media(max-width:360px){.r12-help-heading strong{font-size:13px}.r12-help-reset{display:none}.r12-help-panel{top:calc(4px + env(safe-area-inset-top,0px));left:calc(4px + env(safe-area-inset-left,0px));right:calc(4px + env(safe-area-inset-right,0px));bottom:calc(4px + env(safe-area-inset-bottom,0px));height:auto;max-height:none}}
@media(max-height:560px){.r12-help-footer{padding:2px 8px 4px;font-size:0;line-height:1}.r12-help-footer strong{display:none}.r12-help-history-link{min-height:22px;margin-left:0;padding:1px 5px;font-size:9.5px}.r12-help-privacy{padding:6px 8px}.r12-help-privacy strong{display:inline;margin-right:4px}.r12-help-tools{max-height:48px}.r12-help-header{padding-top:8px;padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){.r12-help-launcher,.r12-help-typing i,.r12-help-launcher-art,.r12-cookie-companion-art,.r12-volta-phone,.r12-dashboard-choice-dock,.r12-dashboard-choice-volta,.r12-dashboard-choice-volta:after,.r12-install-volta img,.r12-install-volta i{transition:none;animation:none}}

/* v39 · compacte uitleg over uitsluitend functionele browseropslag */
.r12-cookie-notice{position:fixed;left:20px;bottom:20px;z-index:1150;box-sizing:border-box;width:min(430px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;padding:15px;border:1px solid rgba(251,191,36,.42);border-radius:18px;background:linear-gradient(145deg,rgba(18,27,43,.98),rgba(7,14,26,.98));box-shadow:0 22px 65px rgba(0,0,0,.52),0 0 34px rgba(245,158,11,.08);color:var(--text);scrollbar-width:thin;animation:r12-cookie-arrive .28s ease-out}
.r12-cookie-head{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center}.r12-cookie-art{width:58px;height:58px;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.34));transform-origin:50% 70%;animation:r12-cookie-wave 4.6s 1.1s ease-in-out infinite}.r12-cookie-eyebrow{display:block;margin:0 0 3px;color:#fbbf24;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.r12-cookie-notice h2{margin:0;color:#f8fafc;font-size:16px;line-height:1.25}.r12-cookie-notice>p{margin:10px 0 0;color:#c5d0df;font-size:11px;line-height:1.55}.r12-cookie-details{margin-top:11px;padding:11px 12px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(2,6,23,.38)}.r12-cookie-details strong{display:block;margin-bottom:7px;color:#fde68a;font-size:10px}.r12-cookie-details ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}.r12-cookie-details li{position:relative;padding-left:15px;color:#aebccd;font-size:10px;line-height:1.48}.r12-cookie-details li:before{content:'✓';position:absolute;left:0;top:0;color:#34d399;font-weight:900}.r12-cookie-details p{margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(148,163,184,.12);color:#7dd3fc;font-size:9.5px;line-height:1.5}.r12-cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.r12-cookie-actions button{min-height:43px;padding:0 12px;border-radius:10px;font:850 11px/1.25 'Inter',sans-serif;cursor:pointer}.r12-cookie-more{border:1px solid rgba(148,163,184,.30);background:rgba(148,163,184,.07);color:#e2e8f0}.r12-cookie-ok{border:1px solid rgba(251,191,36,.55);background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#271300}.r12-cookie-actions button:hover,.r12-cookie-actions button:focus-visible,.r12-cookie-footer-link:hover,.r12-cookie-footer-link:focus-visible{outline:3px solid rgba(251,191,36,.23);outline-offset:2px;border-color:#fde68a}.r12-cookie-footer-link{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:var(--text-muted);font:inherit;line-height:1.7;text-align:left;cursor:pointer}.r12-cookie-footer-link:hover{color:#fde68a}.r12-dashboard-cookie-link{margin-top:9px;padding:6px 10px;border:1px solid rgba(251,191,36,.25);border-radius:999px;background:rgba(245,158,11,.06);color:#fde68a;font:800 10px/1.3 'Inter',sans-serif;cursor:pointer}
@keyframes r12-cookie-arrive{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes r12-cookie-wave{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-5deg)}95%{transform:rotate(5deg)}}
@media(max-width:900px){.r12-cookie-notice{left:10px;bottom:calc(74px + env(safe-area-inset-bottom,0px));width:calc(100vw - 20px);max-height:calc(100dvh - 92px - env(safe-area-inset-bottom,0px))}}
@media(max-width:720px){.r12-cookie-notice{padding:13px;border-radius:15px}.r12-cookie-head{grid-template-columns:50px minmax(0,1fr);gap:10px}.r12-cookie-art{width:50px;height:50px}.r12-cookie-notice h2{font-size:15px}.r12-cookie-notice>p{font-size:10.5px}.v7-footer-links .r12-cookie-footer-link{justify-content:center;text-align:center}}
@media(max-width:360px){.r12-cookie-actions{grid-template-columns:1fr}.r12-cookie-actions button{min-height:40px}}
@media(prefers-reduced-motion:reduce){.r12-cookie-notice,.r12-cookie-art{animation:none}}
/* Current product guide; original visual identity and website preserved. */
/* Website v112: current app and Atelier previews. */
.current-intro-actions{margin-bottom:28px}.current-design-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:30px;align-items:start}.current-design-list{display:grid;gap:8px}.current-design-list>button{display:flex;align-items:center;gap:13px;text-align:left;width:100%;padding:14px 16px;border:1px solid #315367;border-radius:12px;background:#0c2232;color:#eaf8ff;font:inherit;cursor:pointer}.current-design-list>button[aria-pressed=true]{border-color:var(--design-accent);background:#173746;box-shadow:inset 3px 0 var(--design-accent)}.current-design-list small{display:block;font-size:13px;color:#adc3d5;line-height:1.4}.current-design-list button>span:nth-child(2){flex:1}.current-design-dot{width:12px;height:12px;border-radius:50%;background:var(--design-accent);flex:0 0 12px}.current-design-detail{position:sticky;top:18px;scroll-margin-top:20px}.current-design-detail h2{color:var(--design-accent)}.current-design-board{padding:18px;border:1px solid #3c596d;border-radius:16px;background:#071622;margin:22px 0;color:var(--design-accent)}.current-preview-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.current-preview-head>span{font-size:11px;letter-spacing:.08em;color:#adc3d5}.current-preview-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.current-preview-kpis>div,.current-preview-bottom>div{min-width:0;padding:14px 10px;background:#122e3f;border:1px solid #315267;border-radius:12px}.current-preview-kpis small,.current-preview-bottom small{display:block;color:#a8c4d4;font-size:12px}.current-preview-kpis b{display:block;font-size:clamp(17px,2vw,27px);color:#edfbff;line-height:1.5}.current-preview-kpis em{color:var(--design-accent,#57d9ed);font-style:normal;font-size:14px}.current-preview-chart{padding:14px 0}.current-preview-chart small{color:#abc3d3}.current-preview-chart svg{width:100%;height:auto;margin-top:16px;display:block}.current-preview-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:13px}.current-preview-flow{display:flex;gap:12px;align-items:center;justify-content:center;min-height:150px;text-align:center}.current-preview-flow>div{border:1px solid currentColor;padding:14px;border-radius:12px;font-size:13px}.current-design-board.gauge .current-preview-kpis>div{border:3px solid var(--design-accent);border-bottom-color:#1d3948;border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;text-align:center}.current-design-board.gauge .current-preview-kpis b{font-size:17px}.current-design-board.bubble .current-preview-kpis>div{border-radius:25px;border-left:3px solid var(--design-accent)}.current-design-board.list .current-preview-kpis{grid-template-columns:1fr}.current-design-board.list .current-preview-kpis>div{display:flex;justify-content:space-between;align-items:center}.current-design-board.list .current-preview-kpis b{font-size:18px}.current-example-details{margin-top:22px;border-top:1px solid #315367;padding-top:20px}.current-demo-shell{--design-accent:#54deef;background:#081a29;border:1px solid #34596c;border-radius:20px;overflow:hidden;margin-bottom:30px}.current-demo-top{display:flex;align-items:center;gap:14px;padding:20px;border-bottom:1px solid #2b4b60}.current-demo-top img{width:52px;height:52px;border-radius:10px}.current-demo-top>div{flex:1}.current-demo-top small{display:block;color:#a8c4d4}.current-demo-top>span{font-size:11px;letter-spacing:.1em;border:1px solid #41768c;border-radius:15px;padding:6px 12px;color:#93e7f1}.current-demo-nav{display:flex;gap:7px;flex-wrap:wrap;padding:12px 20px;background:#0c2434}.current-demo-nav>button{min-height:44px;padding:9px 14px;border:1px solid #385c71;border-radius:10px;background:#142f42;color:#d9ecf6;font:600 14px/1.4 system-ui;cursor:pointer}.current-demo-nav>button[aria-pressed=true]{border-color:#54deef;color:#8deef5;box-shadow:inset 0 -2px #54deef}.current-demo-content{padding:28px}.current-demo-metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px}.current-demo-metrics>article{padding:22px;background:#102c3e;border:1px solid #305365;border-radius:15px}.current-demo-metrics p b{display:block;color:#edf8ff}.current-demo-metrics meter{width:100%;height:8px;accent-color:#69e3d8}.current-demo-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}.current-demo-controls>article{border:1px solid #345366;border-radius:13px;padding:20px;background:#102b3d}.current-demo-controls small{color:#b6cfdc}.current-demo-controls strong{display:block}.current-demo-controls .current-button{margin-top:14px;width:100%;min-height:44px}.current-demo-controls .is-on{background:#193f36;border-color:#81b887}.current-demo-controls .is-on strong{color:#c0f39e}.current-demo-controls .is-off{background:#153e52;border-color:#69b2cd}.current-demo-controls .is-off strong{color:#a3e3fd}.current-demo-rates{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:13px}.current-energy-tree{font-size:18px}.current-product button:active,.current-product a.current-button:active{filter:brightness(1.2);transform:translateY(1px)}
@media(max-width:900px){.current-design-layout{grid-template-columns:1fr}.current-design-detail{position:static}.current-design-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:380px;overflow:auto;padding:3px}.current-demo-content{padding:20px}.current-demo-metrics{grid-template-columns:1fr}}
@media(max-width:520px){.current-design-list{grid-template-columns:1fr}.current-demo-top{padding:15px}.current-demo-top>span{font-size:9px;padding:4px 8px}.current-demo-top strong{font-size:13px}.current-demo-top small{font-size:12px}.current-demo-controls{grid-template-columns:1fr}.current-demo-nav{padding:10px}.current-demo-content{padding:16px}.current-preview-kpis{gap:6px}.current-preview-kpis>div{padding:12px 7px}.current-preview-bottom{grid-template-columns:1fr}.current-preview-bottom>div{display:flex;justify-content:space-between}.current-design-board{padding:12px}.current-demo-rates{grid-template-columns:1fr}}
.current-product,.current-home-band{--cp-accent:#47daf4;--cp-line:#294358;--cp-muted:#adc3d5;color:#edf7fc;font:400 16px/1.65 Inter,system-ui,sans-serif}
.current-product,.current-product *,.current-home-band{box-sizing:border-box}
.v15-ui-toast{width:max-content!important;max-width:calc(100vw - 32px)!important;border-radius:14px!important;font-size:14px!important;line-height:1.5!important}
.current-product{min-height:100vh;background:radial-gradient(ellipse at 95% 0%,#123d50 0%,transparent 45%),#071526}
.current-header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:14px}.current-header-actions .current-button{padding:9px 14px;font-size:14px}
.current-header{position:relative!important;top:auto!important;backdrop-filter:none!important;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px max(24px,calc((100vw - 1240px)/2));border-bottom:1px solid var(--cp-line);background:#081929!important}
.current-brand{display:flex;align-items:center;gap:14px;text-decoration:none!important;color:#e6f8ff!important;letter-spacing:.14em;font-size:15px}.current-brand img{width:64px;height:64px;object-fit:contain;border-radius:12px}.current-brand b{display:block;color:var(--cp-accent);font-size:13px;letter-spacing:.08em}.current-back{font-size:14px}
.current-product a,.current-home-band a{color:var(--cp-accent)}.current-tabs{display:flex;flex-wrap:wrap;gap:7px;padding:12px max(24px,calc((100vw - 1240px)/2));border-bottom:1px solid var(--cp-line);background:#0b1f30}.current-tabs a{border-radius:9px;padding:9px 14px;text-decoration:none;color:#bed0df;font-size:14px;font-weight:600}.current-tabs a[aria-current]{background:#163b4b;color:#67e8f9;box-shadow:inset 0 -2px var(--cp-accent)}
.current-main{max-width:1240px;margin:auto;padding:56px 24px 24px}.current-intro{max-width:920px;margin-bottom:36px}.current-eyebrow{color:var(--cp-accent);font-size:13px;font-weight:800;letter-spacing:.16em;margin:0 0 15px}.current-product h1{font-size:clamp(32px,4.2vw,58px);letter-spacing:-.045em;line-height:1.13;margin:0 0 24px}.current-product h1 em{font-style:normal;color:var(--cp-accent)}.current-intro>p:last-child{font-size:18px;color:var(--cp-muted);max-width:790px}.current-product h2{font-size:24px;line-height:1.25;letter-spacing:-.025em;margin:14px 0}.current-product h3{font-size:18px;margin:0 0 6px}.current-product p{margin:12px 0;color:var(--cp-muted)}
.current-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.current-card{background:linear-gradient(135deg,#112c3e,#0b1e30);border:1px solid var(--cp-line);border-radius:20px;padding:28px;margin-bottom:22px;min-width:0}.current-apps .current-card{display:flex;flex-direction:column;border-top:3px solid #47daf4}.current-apps .mint{border-top-color:#b4ec6a}.current-apps .purple{border-top-color:#bda5ff}.current-card-top{display:flex;justify-content:space-between;gap:12px;font-size:13px}.current-platform{letter-spacing:.1em;font-weight:700;color:var(--cp-accent)}.current-version{color:#c8d8e5}.current-card ul{padding-left:20px;color:var(--cp-muted);margin-bottom:24px}.current-card li+li{margin-top:9px}.current-apps .current-button{margin-top:auto}.current-apps .current-small{min-height:72px}
.current-button{display:inline-flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 19px;min-height:48px;font:700 15px/1.5 Inter,system-ui,sans-serif;border:1px solid transparent;border-radius:11px;text-decoration:none;cursor:pointer;background:linear-gradient(110deg,#31bfe6,#68e4ed);color:#042331!important}.current-button.secondary{background:#153044;border-color:#3a5870;color:#e5f5ff!important}.current-product .current-small{font-size:14px;line-height:1.55}.current-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:8px}.current-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.current-feature-label{color:#b4ec6a;font-size:13px;font-weight:700;letter-spacing:.12em}.current-link{border:0;background:none;padding:8px 0;color:var(--cp-accent);font:600 15px/1.5 Inter,system-ui,sans-serif;cursor:pointer;text-align:left}
.current-note{border-left:3px solid #53def0;background:#123040;padding:20px;border-radius:10px;margin:22px 0}.current-note h2{margin-top:0}.current-note p:last-child{margin-bottom:0}.current-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:25px}.current-choices button{cursor:pointer;text-align:left;border:1px solid #37536b;background:#10283b;color:#e2f3fc;border-radius:15px;padding:24px;font:400 16px/1.5 Inter,system-ui,sans-serif}.current-choices b{display:block;font-size:18px;margin-bottom:9px}.current-choices span{color:var(--cp-muted)}.current-choices [aria-pressed=true]{border-color:#52d9ed;background:#173f50;box-shadow:0 0 0 1px #52d9ed}.current-steps ol{list-style:none;counter-reset:step;padding:0}.current-steps li{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid #284153;counter-increment:step}.current-steps li:before{content:counter(step);flex:0 0 34px;height:34px;text-align:center;background:#1b5263;border-radius:50%;color:#77e6f6;font-weight:700;line-height:34px}.current-steps li p{margin:0}
.current-product summary{font-size:17px;cursor:pointer;font-weight:700;line-height:1.5}.current-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}.current-form label,.current-search{display:block;font-weight:600;font-size:14px;color:#c7dce9}.current-product input,.current-product select{display:block;width:100%;min-width:0;min-height:48px;background:#081828;border:1px solid #42627b;border-radius:9px;padding:11px 13px;color:#eef8ff;font:400 16px/1.5 Inter,system-ui,sans-serif;margin-top:7px;box-sizing:border-box}.current-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;grid-column:1/-1}.current-feedback{color:#a8efc1!important;min-height:24px}.current-search{max-width:670px}.current-manual{margin:20px 0 30px}.current-manual details{background:#0e2538;border:1px solid #2d4a60;border-radius:13px;padding:20px 24px;margin-bottom:12px;scroll-margin-top:24px}.current-manual summary span{display:inline-block;font-size:14px;color:#4bdff3;min-width:36px}.current-manual details>div{padding:12px 0}.current-manual li{color:var(--cp-muted);margin:12px 0}.current-manual ul{padding-left:21px}.current-product :focus-visible{outline:3px solid #77e8fc;outline-offset:4px}.current-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;border-top:1px solid #2b455a;margin-top:42px;padding-top:22px;color:#a5bed1;font-size:13px}.current-product button,.current-product a{touch-action:manipulation}.current-development summary{color:#bcdeef}
.current-home-band{max-width:1240px;margin:32px auto;padding:30px;background:linear-gradient(105deg,#12364a,#102034);border:1px solid #386779;border-radius:20px;display:grid;grid-template-columns:1.5fr 1fr;gap:30px}.current-home-band h2{font-size:clamp(23px,3vw,34px);line-height:1.2;margin:0 0 14px}.current-home-band p{color:#afcadc;margin:8px 0}.current-home-links{display:flex;flex-direction:column;justify-content:center;gap:11px}.current-dashboard-notice{margin:22px 0;border:1px solid #48758b;background:#0e3040;border-radius:15px;padding:24px;color:#c0d7e6;font:400 16px/1.6 Inter,system-ui,sans-serif}.current-dashboard-notice strong{color:#eafaff}.current-dashboard-notice a{color:#62e5f6}.current-example-check{display:flex!important;gap:12px;align-items:flex-start;max-width:800px;margin-top:16px!important}.current-example-check input{width:20px!important;height:20px!important;flex:0 0 20px;margin:4px 0 0!important}
@media(max-width:950px){.current-apps,.current-feature-grid{grid-template-columns:1fr}.current-apps .current-small{min-height:0}.current-apps .current-button{align-self:flex-start}.current-choices{grid-template-columns:1fr}.current-home-band{margin:24px;grid-template-columns:1fr}.current-product h1{font-size:42px}}
@media(max-width:600px){.current-main{padding:30px 18px 20px}.current-header{padding:14px 18px;gap:10px}.current-brand img{width:48px;height:48px}.current-brand{font-size:12px;gap:9px}.current-brand b{font-size:11px}.current-back{font-size:12px;max-width:105px;text-align:right}.current-tabs{padding:10px 12px;gap:4px}.current-tabs a{padding:8px 10px;font-size:13px}.current-product h1{font-size:34px}.current-split,.current-form{grid-template-columns:1fr}.current-card{padding:23px 20px;border-radius:16px}.current-intro>p:last-child{font-size:16px}.current-manual details{padding:18px}.current-product .current-button{max-width:100%;white-space:normal;text-align:left}.current-actions>*{width:100%}.current-home-band{padding:23px;margin:18px}.current-product .current-eyebrow{font-size:12px}.current-product *{overflow-wrap:break-word}}
@media(prefers-reduced-motion:reduce){.current-product *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:600px){.current-header-actions{flex-direction:column;align-items:flex-end;gap:8px}.current-header-actions .current-button{font-size:12px;padding:8px 10px}.current-header-actions .current-back{max-width:150px}}