/* Telefoonschermen voor de landingspagina en de handleiding. Losse kleuren zodat ze overal werken. */
.phone { --w:100%; width:var(--w); max-width:230px; margin:0 auto; aspect-ratio:9/19; padding:7px; border-radius:34px; background:#101614; box-shadow:0 0 0 1px #2b3532 inset,0 26px 60px rgba(16,43,35,.28); position:relative; }
.phone::before { content:""; position:absolute; top:14px; left:50%; width:30%; height:15px; transform:translateX(-50%); border-radius:20px; background:#0a0e0d; z-index:3; }
.phone-screen { position:relative; height:100%; border-radius:27px; overflow:hidden; font-size:10px; }
.phone-status { height:34px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:10px; color:#17231f; }
.phone-status i { width:22px; height:9px; border-radius:3px; border:1.5px solid currentColor; position:relative; }
.phone-status i::after { content:""; position:absolute; inset:1px 5px 1px 1px; background:currentColor; border-radius:1px; }
.phone-status.light { color:#fff; }
/* 1. Browser met deelmenu */
.screen-browser { background:#f4f6f5; }
.browser-bar { margin:0 10px; padding:6px 10px; display:flex; align-items:center; gap:5px; justify-content:center; border-radius:9px; background:#e5e9e7; color:#4b5a54; font-size:9.5px; font-weight:700; }
.browser-lock { width:7px; height:8px; border-radius:2px; background:#7c8a85; }
.browser-page { padding:12px 12px 0; display:grid; gap:9px; }
.bp-head { display:flex; align-items:center; gap:6px; }
.bp-head img { width:18px; height:18px; }
.bp-head b,.bp-title,.bp-row { display:block; height:8px; border-radius:4px; background:#cfd9d4; }
.bp-head b { width:50px; }
.bp-title { height:13px; width:70%; background:#17231f; opacity:.85; }
.bp-cards { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.bp-cards i { height:46px; border-radius:8px; background:#fff; border:1px solid #dfe6e2; }
.bp-cards i:first-child { background:linear-gradient(135deg,#176b55,#0b4638); border:0; }
.bp-row.short { width:60%; }
.share-sheet { position:absolute; left:0; right:0; bottom:0; padding:8px 10px 16px; background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -10px 30px rgba(16,43,35,.18); display:grid; gap:4px; }
.share-grabber { width:30px; height:4px; margin:0 auto 6px; border-radius:4px; background:#d3dad7; }
.share-row { position:relative; display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:10px; background:#f3f5f4; color:#17231f; font-size:10.5px; font-weight:650; }
.share-row.is-highlight { background:#e3f1ea; color:#0b4638; font-weight:800; box-shadow:0 0 0 1.5px #176b55 inset; }
.share-icon { width:16px; height:16px; flex:none; background:center/contain no-repeat; }
.share-copy { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361706a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); }
.share-add { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176b55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
.share-star { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361706a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }
.tap-ring { position:absolute; right:14px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%; background:rgba(23,107,85,.25); box-shadow:0 0 0 0 rgba(23,107,85,.45); animation:app-tap 2.4s ease-out infinite; }

/* 2. Beginscherm */
.screen-home { background:radial-gradient(120% 80% at 20% 10%,#4f9b82 0%,#1f6b57 45%,#0d3f33 100%); }
.home-grid { padding:14px 14px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px 10px; }
.app-icon { display:block; aspect-ratio:1; border-radius:24%; position:relative; }
.app-icon.c1 { background:linear-gradient(140deg,#f6f1e4,#e6dcc2); }
.app-icon.c2 { background:linear-gradient(140deg,#9fc4e8,#6d9fd0); }
.app-icon.c3 { background:linear-gradient(140deg,#f2b8a5,#e08d74); }
.app-icon.c4 { background:linear-gradient(140deg,#c9e3d4,#9ccbb2); }
.app-icon.c5 { background:linear-gradient(140deg,#f3d58f,#e2b453); }
.app-icon.c6 { background:linear-gradient(140deg,#d7d0ee,#ada1dc); }
.app-icon.c7 { background:linear-gradient(140deg,#ffffff,#dfe5e2); }
.app-icon.c8 { background:linear-gradient(140deg,#a8d8d2,#6fb7ad); }
.app-icon.civita { background:none; z-index:1; }
.app-icon.civita img { width:100%; height:100%; border-radius:24%; display:block; box-shadow:0 0 0 3px rgba(255,255,255,.85),0 8px 20px rgba(0,0,0,.35); animation:app-pop 3.2s ease-in-out infinite; }
.app-icon.civita em { position:absolute; left:50%; top:calc(100% + 4px); transform:translateX(-50%); white-space:nowrap; color:#fff; font-style:normal; font-size:8.5px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.app-badge { position:absolute; top:-5px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#e5484d; color:#fff; font-size:9px; font-weight:800; display:grid; place-items:center; box-shadow:0 0 0 1.5px #1f6b57; }
.home-dock { position:absolute; left:8px; right:8px; bottom:10px; padding:9px 10px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; border-radius:22px; background:rgba(255,255,255,.22); backdrop-filter:blur(6px); }

/* 3. Vergrendelscherm met meldingen */
.screen-lock { background:linear-gradient(180deg,#24564a 0%,#163a31 55%,#0d241f 100%); color:#fff; }
.lock-time { margin-top:10px; text-align:center; font-size:46px; font-weight:250; letter-spacing:-1px; line-height:1; }
.lock-date { text-align:center; font-size:11px; font-weight:600; opacity:.85; margin-top:4px; }
.lock-notifications { position:absolute; left:8px; right:8px; bottom:16px; display:grid; gap:7px; }
.push-card { display:grid; grid-template-columns:22px 1fr; gap:8px; padding:9px 10px; border-radius:14px; background:rgba(255,255,255,.88); color:#17231f; box-shadow:0 6px 18px rgba(0,0,0,.18); backdrop-filter:blur(8px); }
.push-card img { width:22px; height:22px; border-radius:6px; }
.push-card small { display:flex; justify-content:space-between; color:#61706a; font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.push-card small time { text-transform:none; font-weight:600; }
.push-card strong { display:block; font-size:10.5px; line-height:1.25; margin:2px 0 1px; }
.push-card span { display:block; color:#43534d; font-size:9.5px; line-height:1.3; }
.push-card.n2 { opacity:.92; }
.push-card.n3 { opacity:.8; }
@keyframes push-in { from { opacity:0; transform:translateY(-26px) scale(.96); } to { transform:none; } }
@keyframes app-tap { 0% { box-shadow:0 0 0 0 rgba(23,107,85,.45); } 70% { box-shadow:0 0 0 14px rgba(23,107,85,0); } 100% { box-shadow:0 0 0 0 rgba(23,107,85,0); } }
@keyframes app-pop { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce) { .tap-ring,.app-icon.civita img { animation:none !important; } }

/* Appscherm (overzicht/profiel) met de installatiekaart zoals in de app */
.screen-app { background:#f6f8f7; }
.app-page { padding:10px 10px 0; display:grid; gap:7px; }
.mock-install-card { position:relative; display:grid; grid-template-columns:28px 1fr; gap:8px; padding:9px 10px; border:1px solid #cfe3da; border-radius:10px; background:linear-gradient(135deg,#eef6f2,#ffffff); }
.mock-install-card img { width:28px; height:28px; border-radius:8px; box-shadow:0 3px 8px rgba(23,107,85,.25); }
.mock-install-card strong { display:block; padding-right:12px; font-size:9.5px; line-height:1.25; color:#16231f; }
.mock-install-card p { margin:3px 0 6px; color:#5b6b66; font-size:8px; line-height:1.35; }
.mock-install-button { position:relative; display:inline-flex; align-items:center; gap:4px; padding:5px 8px; border-radius:6px; background:#176b55; color:#fff; font-size:8.5px; font-weight:800; justify-self:start; }
.mock-install-button svg { width:10px; height:10px; }
.mock-install-button .tap-ring { right:-7px; }
.mock-close { position:absolute; top:5px; right:7px; color:#5b6b66; font-style:normal; font-size:11px; line-height:1; }
.mock-kicker { margin:4px 0 0; color:#5b6b66; font-size:7px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.mock-title { margin:0; color:#16231f; font-size:15px; font-weight:800; }
.mock-cards { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mock-cards i { height:34px; border-radius:7px; background:#fff; border:1px solid #dfe6e2; }
.mock-panel { display:grid; gap:6px; padding:9px; border-radius:8px; background:#fff; border:1px solid #dfe6e2; }
.mock-panel b,.mock-panel span { display:block; height:6px; border-radius:3px; background:#d5dfda; }
.mock-panel b { width:45%; height:8px; background:#16231f; opacity:.8; }
.mock-panel span.short { width:60%; }
.mock-section { display:grid; gap:6px; padding:10px; border-radius:9px; background:#fff; border:1px solid #dfe6e2; }
.mock-section > strong { font-size:11px; color:#16231f; }
.mock-section > small { color:#16231f; font-size:8px; font-weight:800; margin-top:2px; }
.mock-toggle { display:flex; align-items:center; gap:6px; padding:5px 6px; border:1px solid #d4e6dd; border-radius:6px; background:#f1f7f4; color:#16231f; font-size:7.5px; line-height:1.25; }
.mock-toggle::before { content:""; flex:none; width:16px; height:9px; border-radius:9px; background:#176b55 radial-gradient(circle at 70% 50%,#fff 0 3px,transparent 3.5px); }
.mock-permission { position:absolute; left:14px; right:14px; bottom:22%; padding:12px 10px 0; border-radius:14px; background:rgba(248,248,248,.97); box-shadow:0 14px 40px rgba(0,0,0,.28); text-align:center; color:#111; }
.mock-permission strong { display:block; font-size:10px; line-height:1.3; }
.mock-permission > span { display:block; margin:4px 0 10px; color:#444; font-size:8px; line-height:1.35; }
.mock-permission div { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #d5d5d5; margin:0 -10px; }
.mock-permission b { position:relative; padding:8px 0; color:#0a7aff; font-size:9.5px; font-weight:600; }
.mock-permission b.is-allow { border-left:1px solid #d5d5d5; font-weight:800; }
.mock-permission .tap-ring { right:10px; }