/* ============================================================
   SkippyApp, frontend (huisstijl "Zonsondergang").
   Warme, kleurrijke vriendenapp. Mobile-first; op desktop een
   gecentreerde telefoon-breedte voor app-gevoel.
   ============================================================ */

:root{
  --sk-primary:#FF6B4A; --sk-primary-600:#F4502E; --sk-primary-700:#D63E20;
  --sk-accent:#FFB23E; --sk-accent-600:#F59B1C;
  --sk-pink:#FF4D8D; --sk-teal:#1FC8B6; --sk-purple:#8B5CF6;
  --sk-soft:#FFF1EA; --sk-soft-2:#FFE7DA;
  --sk-canvas:#FFF8F3; --sk-card:#FFFFFF;
  --sk-text:#3A2418; --sk-muted:#9A8678; --sk-faint:#C7B6A9;
  --sk-border:#F0E2D8; --sk-border-2:#E7D5C8;
  --sk-success:#36B26A; --sk-success-soft:#E4F6EC;
  --sk-info:#3DA5D9; --sk-danger:#E0524A; --sk-danger-soft:#FBE9E7; --sk-warn:#F2B33C;
  --sk-radius:16px; --sk-radius-sm:12px; --sk-radius-lg:24px; --sk-pill:999px;
  --sk-shadow-sm:0 2px 8px rgba(214,62,32,.06);
  --sk-shadow:0 10px 30px rgba(214,62,32,.10);
  --sk-shadow-lg:0 20px 50px rgba(214,62,32,.16);
  --sk-sunset:linear-gradient(135deg,#FF8A4B 0%,#FF6B4A 45%,#FF4D8D 100%);
  --sk-sunset-soft:linear-gradient(135deg,#FFE7DA,#FFF1EA);
  --sk-glow:linear-gradient(135deg,#FFB23E,#FF6B4A);
  --sk-topbar-h:60px; --sk-bottom-h:64px; --sk-max:520px;
  --sk-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
[data-theme="dark"]{
  --sk-soft:#2F231C; --sk-soft-2:#3A2A20;
  --sk-canvas:#191310; --sk-card:#241B16;
  --sk-text:#F7EDE5; --sk-muted:#B49E8F; --sk-faint:#7C6A5C;
  --sk-border:#352a22; --sk-border-2:#42342a;
  --sk-shadow-sm:0 2px 8px rgba(0,0,0,.3); --sk-shadow:0 10px 30px rgba(0,0,0,.4); --sk-shadow-lg:0 20px 50px rgba(0,0,0,.5);
  --sk-success-soft:#1d3326; --sk-danger-soft:#3a201d;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--sk-font); background:var(--sk-canvas); color:var(--sk-text);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
a{color:var(--sk-primary);text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
h1,h2,h3,h4{margin:0 0 .4rem;line-height:1.25;font-weight:800;letter-spacing:-.01em}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--sk-border-2);border-radius:99px}

/* ── App-frame ─────────────────────────────────────────── */
.sk-app{min-height:100dvh;max-width:var(--sk-max);margin:0 auto;position:relative;background:var(--sk-canvas);
  box-shadow:0 0 60px rgba(214,62,32,.06)}
.sk-boot{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:1rem;background:var(--sk-canvas)}
.sk-boot-logo{font-size:3rem;animation:sk-bounce 1.2s infinite}
@keyframes sk-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.sk-spinner{width:34px;height:34px;border:3px solid var(--sk-soft-2);border-top-color:var(--sk-primary);border-radius:50%;animation:sk-spin .8s linear infinite}
@keyframes sk-spin{to{transform:rotate(360deg)}}

/* ── Topbar ────────────────────────────────────────────── */
.sk-topbar{position:fixed;top:0;left:0;right:0;height:var(--sk-topbar-h);z-index:40;
  max-width:var(--sk-max);margin:0 auto;display:flex;align-items:center;gap:.5rem;padding:0 .75rem;
  background:color-mix(in srgb,var(--sk-card) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--sk-border);padding-top:env(safe-area-inset-top)}
.sk-brand{display:flex;align-items:center;gap:.5rem;min-width:0;flex:1;background:none;border:0;cursor:pointer;padding:.25rem;border-radius:var(--sk-radius-sm)}
.sk-brand:active{background:var(--sk-soft)}
.sk-logo{width:34px;height:34px;border-radius:11px;background:var(--sk-sunset);display:grid;place-content:center;color:#fff;font-size:1.1rem;flex:none;box-shadow:var(--sk-shadow-sm)}
.sk-brand-txt{min-width:0;text-align:left;line-height:1.1}
.sk-brand-name{font-weight:800;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.3rem}
.sk-brand-name i{font-size:.7rem;color:var(--sk-muted)}
.sk-brand-sub{font-size:.7rem;color:var(--sk-muted)}
.sk-tb-actions{display:flex;align-items:center;gap:.15rem}
.sk-iconbtn{position:relative;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--sk-text);font-size:1.05rem;cursor:pointer;display:grid;place-content:center}
.sk-iconbtn:active{background:var(--sk-soft)}
.sk-badge-dot{position:absolute;top:5px;right:5px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--sk-primary);color:#fff;font-size:.62rem;font-weight:800;display:grid;place-content:center;border:2px solid var(--sk-card)}

/* group switcher dropdown */
.sk-switcher{position:fixed;top:calc(var(--sk-topbar-h) + 4px);left:50%;transform:translateX(-50%) scale(.96);
  width:min(var(--sk-max) - 16px,calc(100vw - 16px));max-height:70dvh;overflow:auto;z-index:60;
  background:var(--sk-card);border:1px solid var(--sk-border);border-radius:var(--sk-radius-lg);box-shadow:var(--sk-shadow-lg);
  padding:.6rem;opacity:0;pointer-events:none;transition:.18s}
.sk-switcher.open{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
.sk-switcher-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sk-muted);font-weight:800;padding:.4rem .6rem}
.sk-grp-row{display:flex;align-items:center;gap:.7rem;padding:.6rem;border-radius:var(--sk-radius-sm);cursor:pointer;border:0;background:none;width:100%;text-align:left;color:var(--sk-text)}
.sk-grp-row:active{background:var(--sk-soft)}
.sk-grp-row.active{background:var(--sk-soft)}
.sk-grp-av{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-content:center;color:#fff;font-weight:800;background:var(--sk-glow);object-fit:cover;overflow:hidden}
.sk-grp-meta{flex:1;min-width:0}
.sk-grp-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-grp-sub{font-size:.78rem;color:var(--sk-muted)}
.sk-grp-row .fa-check{color:var(--sk-primary)}
.sk-switcher .sk-divider{height:1px;background:var(--sk-border);margin:.4rem .3rem}

/* ── Main scroll area ─────────────────────────────────── */
.sk-main{padding-top:calc(var(--sk-topbar-h) + env(safe-area-inset-top));
  padding-bottom:calc(var(--sk-bottom-h) + env(safe-area-inset-bottom) + 12px);min-height:100dvh}
.sk-view{padding:1rem .9rem 0;animation:sk-fade .25s ease}
@keyframes sk-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sk-section-title{display:flex;align-items:center;justify-content:space-between;margin:1.3rem .2rem .6rem}
.sk-section-title h2{font-size:1.05rem;margin:0}
.sk-section-title a,.sk-section-title button{font-size:.82rem;font-weight:700;color:var(--sk-primary);background:none;border:0;cursor:pointer}

/* ── Bottom nav ───────────────────────────────────────── */
.sk-bottomnav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--sk-bottom-h) + env(safe-area-inset-bottom));
  max-width:var(--sk-max);margin:0 auto;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb,var(--sk-card) 92%,transparent);backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--sk-border);padding-bottom:env(safe-area-inset-bottom)}
.sk-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:none;
  color:var(--sk-muted);font-size:.66rem;font-weight:700;cursor:pointer;position:relative}
.sk-nav-item i{font-size:1.15rem}
.sk-nav-item.active{color:var(--sk-primary)}
.sk-nav-item.active i{transform:translateY(-1px)}
.sk-nav-badge{position:absolute;top:6px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--sk-pink);color:#fff;font-size:.6rem;font-weight:800;display:grid;place-content:center}

/* ── Buttons ──────────────────────────────────────────── */
.sk-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.2rem;border-radius:var(--sk-pill);
  border:0;background:var(--sk-sunset);color:#fff;font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:var(--sk-shadow-sm);transition:transform .12s,box-shadow .12s}
.sk-btn:active{transform:scale(.97)}
.sk-btn:disabled{opacity:.55;cursor:not-allowed}
.sk-btn-block{display:flex;width:100%}
.sk-btn-lg{padding:1rem 1.3rem;font-size:1rem}
.sk-btn-ghost{background:var(--sk-soft);color:var(--sk-primary-700);box-shadow:none}
.sk-btn-outline{background:transparent;border:1.5px solid var(--sk-border-2);color:var(--sk-text);box-shadow:none}
.sk-btn-accent{background:var(--sk-glow)}
.sk-btn-danger{background:var(--sk-danger)}
.sk-btn-success{background:var(--sk-success)}
.sk-btn-sm{padding:.5rem .85rem;font-size:.82rem}
.sk-fab{position:fixed;right:calc(50% - var(--sk-max)/2 + 16px);bottom:calc(var(--sk-bottom-h) + 18px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;background:var(--sk-sunset);color:#fff;font-size:1.4rem;border:0;box-shadow:var(--sk-shadow-lg);z-index:35;cursor:pointer}
@media(max-width:540px){.sk-fab{right:16px}}

/* ── Cards ────────────────────────────────────────────── */
.sk-card{background:var(--sk-card);border:1px solid var(--sk-border);border-radius:var(--sk-radius);padding:1rem;box-shadow:var(--sk-shadow-sm)}
.sk-card+.sk-card{margin-top:.8rem}
.sk-card-hero{background:var(--sk-sunset);color:#fff;border:0;border-radius:var(--sk-radius-lg);padding:1.2rem;box-shadow:var(--sk-shadow)}
.sk-card-hero h2,.sk-card-hero h3{color:#fff}
.sk-tile{background:var(--sk-card);border:1px solid var(--sk-border);border-radius:var(--sk-radius);padding:.9rem;box-shadow:var(--sk-shadow-sm)}
.sk-row{display:flex;align-items:center;gap:.7rem}
.sk-row-between{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sk-muted{color:var(--sk-muted)}
.sk-small{font-size:.8rem}
.sk-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.sk-stack{display:flex;flex-direction:column;gap:.7rem}

/* avatars + chips */
.sk-av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-content:center;color:#fff;font-weight:800;background:var(--sk-glow);overflow:hidden;object-fit:cover;font-size:.95rem}
.sk-av.sm{width:30px;height:30px;font-size:.75rem}
.sk-av.lg{width:64px;height:64px;font-size:1.4rem}
.sk-av-stack{display:flex}
.sk-av-stack .sk-av{margin-left:-10px;border:2px solid var(--sk-card)}
.sk-av-stack .sk-av:first-child{margin-left:0}
.sk-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;border-radius:var(--sk-pill);background:var(--sk-soft);color:var(--sk-primary-700);font-size:.78rem;font-weight:700}
.sk-chip-accent{background:rgba(255,178,62,.18);color:var(--sk-accent-600)}
.sk-chip-success{background:var(--sk-success-soft);color:var(--sk-success)}
.sk-chip-muted{background:var(--sk-soft);color:var(--sk-muted)}
.sk-chip.online::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sk-success)}
.sk-pill-live{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:800;color:var(--sk-success)}
.sk-pill-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sk-success);box-shadow:0 0 0 4px var(--sk-success-soft);animation:sk-pulse 1.8s infinite}
@keyframes sk-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* ── Forms ────────────────────────────────────────────── */
.sk-field{margin-bottom:.85rem}
.sk-field label{display:block;font-weight:700;font-size:.82rem;margin-bottom:.35rem;color:var(--sk-text)}
.sk-input,.sk-textarea,.sk-select{width:100%;padding:.8rem .9rem;border-radius:var(--sk-radius-sm);border:1.5px solid var(--sk-border-2);
  background:var(--sk-card);color:var(--sk-text);font-size:1rem;font-family:inherit}
.sk-input:focus,.sk-textarea:focus,.sk-select:focus{outline:0;border-color:var(--sk-primary);box-shadow:0 0 0 4px rgba(255,107,74,.14)}
.sk-textarea{min-height:84px;resize:vertical}
.sk-help{font-size:.78rem;color:var(--sk-muted);margin-top:.3rem}
.sk-err{font-size:.82rem;color:var(--sk-danger);margin-top:.4rem}
.sk-toggle{position:relative;width:46px;height:28px;flex:none}
.sk-toggle input{opacity:0;width:0;height:0;position:absolute}
.sk-toggle .sk-track{position:absolute;inset:0;background:var(--sk-border-2);border-radius:99px;transition:.2s;cursor:pointer}
.sk-toggle .sk-track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sk-toggle input:checked+.sk-track{background:var(--sk-success)}
.sk-toggle input:checked+.sk-track::after{transform:translateX(18px)}

/* settings rows (Meer) */
.sk-list{background:var(--sk-card);border:1px solid var(--sk-border);border-radius:var(--sk-radius);overflow:hidden}
.sk-li{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;border-bottom:1px solid var(--sk-border);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;color:var(--sk-text);font-size:.94rem}
.sk-li:last-child{border-bottom:0}
.sk-li:active{background:var(--sk-soft)}
.sk-li-ic{width:38px;height:38px;border-radius:11px;background:var(--sk-soft);color:var(--sk-primary);display:grid;place-content:center;flex:none;font-size:1rem}
.sk-li-tx{flex:1;min-width:0}
.sk-li-tx b{font-weight:700;display:block}
.sk-li-tx span{font-size:.78rem;color:var(--sk-muted)}
.sk-li .fa-chevron-right{color:var(--sk-faint);font-size:.8rem}

/* ── Drawer (Meer, off-canvas rechts) ─────────────────── */
.sk-scrim{position:fixed;inset:0;background:rgba(58,36,24,.45);z-index:50;opacity:0;pointer-events:none;transition:.25s}
.sk-scrim.open{opacity:1;pointer-events:auto}
.sk-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(86%,400px);z-index:55;background:var(--sk-canvas);
  box-shadow:var(--sk-shadow-lg);transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;left:auto;margin:0}
.sk-app .sk-drawer{right:max(0px,calc(50% - var(--sk-max)/2))}
.sk-drawer.open{transform:translateX(0)}
.sk-drawer-head{background:var(--sk-sunset);color:#fff;padding:1.2rem 1rem;padding-top:calc(1.2rem + env(safe-area-inset-top));display:flex;align-items:center;gap:.8rem}
.sk-drawer-head .sk-av{background:rgba(255,255,255,.25)}
.sk-drawer-body{flex:1;overflow:auto;padding:1rem .8rem;padding-bottom:2rem}
.sk-drawer-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--sk-muted);margin:1.1rem .4rem .5rem}

/* ── Home dashboard ───────────────────────────────────── */
.sk-greet{font-size:1.35rem;font-weight:800;margin:.2rem 0}
.sk-dash-fin{display:flex;align-items:baseline;gap:.5rem;margin:.2rem 0}
.sk-dash-fin .amt{font-size:1.8rem;font-weight:800}
.sk-lb-row{display:flex;align-items:center;gap:.7rem;padding:.5rem 0}
.sk-lb-rank{width:26px;font-weight:800;text-align:center;color:var(--sk-muted)}
.sk-lb-rank.r1{color:#E8A13C}.sk-lb-rank.r2{color:#9AA0A6}.sk-lb-rank.r3{color:#CD7F32}
.sk-poll-mini{border:1px solid var(--sk-border);border-radius:var(--sk-radius-sm);padding:.7rem;margin-top:.5rem}
.sk-progress{height:8px;border-radius:99px;background:var(--sk-soft-2);overflow:hidden}
.sk-progress>span{display:block;height:100%;background:var(--sk-sunset);border-radius:99px}

/* ── Spellen ──────────────────────────────────────────── */
.sk-game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.sk-game-card{background:var(--sk-card);border:1px solid var(--sk-border);border-radius:var(--sk-radius);padding:.9rem;text-align:left;cursor:pointer;box-shadow:var(--sk-shadow-sm);transition:transform .12s}
.sk-game-card:active{transform:scale(.97)}
.sk-game-ic{width:46px;height:46px;border-radius:13px;background:var(--sk-sunset-soft);color:var(--sk-primary);display:grid;place-content:center;font-size:1.3rem;margin-bottom:.5rem}
.sk-game-card b{display:block;font-size:.92rem}
.sk-game-card span{font-size:.74rem;color:var(--sk-muted)}
.sk-session{border:1.5px solid var(--sk-accent);background:rgba(255,178,62,.08);border-radius:var(--sk-radius);padding:.9rem;margin-bottom:.7rem}

/* ── Agenda ───────────────────────────────────────────── */
.sk-cal{background:var(--sk-card);border:1px solid var(--sk-border);border-radius:var(--sk-radius);padding:.8rem}
.sk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.sk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.sk-cal-dow{font-size:.66rem;color:var(--sk-muted);font-weight:700;padding:.3rem 0}
.sk-cal-day{aspect-ratio:1;display:grid;place-content:center;border-radius:10px;font-size:.82rem;cursor:pointer;position:relative}
.sk-cal-day.muted{color:var(--sk-faint)}
.sk-cal-day.today{background:var(--sk-soft);font-weight:800;color:var(--sk-primary-700)}
.sk-cal-day.has::after{content:"";position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--sk-primary)}
.sk-cal-day.sel{background:var(--sk-sunset);color:#fff}
.sk-event{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem;border:1px solid var(--sk-border);border-radius:var(--sk-radius-sm);margin-top:.5rem}
.sk-event-date{width:48px;text-align:center;flex:none;background:var(--sk-soft);border-radius:10px;padding:.3rem 0}
.sk-event-date b{display:block;font-size:1.1rem;color:var(--sk-primary-700)}
.sk-event-date span{font-size:.66rem;text-transform:uppercase;color:var(--sk-muted)}
.sk-vote-opt{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:1.5px solid var(--sk-border-2);border-radius:var(--sk-radius-sm);margin-top:.4rem;cursor:pointer;position:relative;overflow:hidden}
.sk-vote-opt.mine{border-color:var(--sk-primary);background:var(--sk-soft)}
.sk-vote-fill{position:absolute;inset:0;background:rgba(255,107,74,.1);width:0;z-index:0}
.sk-vote-opt>*{position:relative;z-index:1}

/* ── Chat ─────────────────────────────────────────────── */
.sk-chat{display:flex;flex-direction:column;height:calc(100dvh - var(--sk-topbar-h) - var(--sk-bottom-h) - 96px)}
.sk-chat-scroll{flex:1;overflow:auto;padding:.5rem .2rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.sk-msg{max-width:78%;align-self:flex-start;display:flex;gap:.5rem;align-items:flex-end}
.sk-msg.mine{align-self:flex-end;flex-direction:row-reverse}
.sk-bubble{background:var(--sk-card);border:1px solid var(--sk-border);padding:.55rem .8rem;border-radius:18px;border-bottom-left-radius:5px;box-shadow:var(--sk-shadow-sm)}
.sk-msg.mine .sk-bubble{background:var(--sk-sunset);color:#fff;border:0;border-bottom-left-radius:18px;border-bottom-right-radius:5px}
.sk-bubble .who{font-size:.72rem;font-weight:800;color:var(--sk-primary-700);margin-bottom:1px}
.sk-bubble p{margin:0}
.sk-bubble .time{font-size:.62rem;opacity:.6;margin-top:2px;text-align:right}
.sk-bubble img,.sk-bubble video{border-radius:12px;margin-top:.2rem;max-height:260px}
.sk-reply-quote{border-left:3px solid var(--sk-accent);padding:.1rem .5rem;font-size:.78rem;opacity:.85;margin-bottom:.2rem}
.sk-composer{display:flex;align-items:center;gap:.4rem;padding:.5rem;border-top:1px solid var(--sk-border);background:var(--sk-card);position:sticky;bottom:0}
.sk-composer .sk-input{border-radius:var(--sk-pill);padding:.65rem .9rem}
.sk-subtabs{display:flex;gap:.3rem;background:var(--sk-soft);border-radius:var(--sk-pill);padding:.25rem;margin:.2rem 0 .6rem}
.sk-subtab{flex:1;border:0;background:none;padding:.5rem;border-radius:var(--sk-pill);font-weight:700;font-size:.82rem;color:var(--sk-muted);cursor:pointer}
.sk-subtab.active{background:var(--sk-card);color:var(--sk-primary-700);box-shadow:var(--sk-shadow-sm)}

/* ── Feed ─────────────────────────────────────────────── */
.sk-post{background:var(--sk-card);border:1px solid var(--sk-border);border-radius:var(--sk-radius);overflow:hidden;margin-bottom:.9rem;box-shadow:var(--sk-shadow-sm)}
.sk-post-head{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem}
.sk-post-media img,.sk-post-media video{width:100%;max-height:440px;object-fit:cover}
.sk-post-body{padding:.6rem .8rem}
.sk-post-actions{display:flex;gap:1.1rem;padding:.2rem .8rem .5rem;font-size:1.1rem;color:var(--sk-muted)}
.sk-post-actions .liked{color:var(--sk-pink)}
.sk-link-card{display:flex;gap:.7rem;align-items:center;border:1px solid var(--sk-border);border-radius:var(--sk-radius-sm);padding:.6rem;margin:.5rem .8rem}
.sk-link-card .ic{width:40px;height:40px;border-radius:10px;background:var(--sk-soft);color:var(--sk-primary);display:grid;place-content:center;flex:none}

/* ── Finance ──────────────────────────────────────────── */
.sk-bal{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--sk-border)}
.sk-bal:last-child{border-bottom:0}
.sk-bal .amt{margin-left:auto;font-weight:800}
.sk-bal .amt.pos{color:var(--sk-success)} .sk-bal .amt.neg{color:var(--sk-danger)}
.sk-exp{padding:.8rem;border:1px solid var(--sk-border);border-radius:var(--sk-radius-sm);margin-bottom:.6rem}

/* ── Locatie / kompas ─────────────────────────────────── */
.sk-compass{width:230px;height:230px;border-radius:50%;margin:1rem auto;position:relative;background:radial-gradient(circle at 50% 40%,var(--sk-soft),var(--sk-card));border:2px solid var(--sk-border);display:grid;place-content:center;box-shadow:var(--sk-shadow)}
.sk-compass-arrow{font-size:4.5rem;color:var(--sk-primary);transition:transform .25s ease;will-change:transform}
.sk-compass-dist{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-weight:800;font-size:1.1rem}
.sk-compass-n{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:.7rem;font-weight:800;color:var(--sk-muted)}
.sk-loc-target{display:flex;gap:.5rem;overflow-x:auto;padding:.3rem 0 .6rem}
.sk-loc-chip{flex:none;padding:.5rem .8rem;border-radius:var(--sk-pill);border:1.5px solid var(--sk-border-2);background:var(--sk-card);font-weight:700;font-size:.82rem;cursor:pointer;display:flex;align-items:center;gap:.4rem}
.sk-loc-chip.active{background:var(--sk-sunset);color:#fff;border-color:transparent}

/* ── Auth / onboarding ────────────────────────────────── */
.sk-auth{min-height:100dvh;display:flex;flex-direction:column}
.sk-auth-hero{background:var(--sk-sunset);color:#fff;padding:2.4rem 1.4rem 2rem;padding-top:calc(2.4rem + env(safe-area-inset-top));border-bottom-left-radius:30px;border-bottom-right-radius:30px;text-align:center}
.sk-auth-hero .sk-logo{width:64px;height:64px;border-radius:20px;font-size:2rem;margin:0 auto .8rem;background:rgba(255,255,255,.2)}
.sk-auth-hero h1{font-size:1.8rem;color:#fff}
.sk-auth-body{padding:1.4rem;flex:1}
.sk-auth-card{background:var(--sk-card);border-radius:var(--sk-radius-lg);box-shadow:var(--sk-shadow);padding:1.3rem;margin-top:-2.6rem;position:relative}
.sk-segment{display:flex;background:var(--sk-soft);border-radius:var(--sk-pill);padding:.25rem;margin-bottom:1rem}
.sk-segment button{flex:1;border:0;background:none;padding:.6rem;border-radius:var(--sk-pill);font-weight:700;color:var(--sk-muted);cursor:pointer}
.sk-segment button.active{background:var(--sk-card);color:var(--sk-primary-700);box-shadow:var(--sk-shadow-sm)}
.sk-steps{display:flex;gap:.4rem;justify-content:center;margin:1rem 0}
.sk-step-dot{width:8px;height:8px;border-radius:99px;background:var(--sk-border-2);transition:.2s}
.sk-step-dot.active{width:22px;background:var(--sk-primary)}
.sk-onb-art{font-size:3.4rem;text-align:center;margin:.5rem 0}
.sk-feature{display:flex;gap:.8rem;align-items:flex-start;margin:.9rem 0}
.sk-feature .ic{width:42px;height:42px;border-radius:12px;background:var(--sk-soft);color:var(--sk-primary);display:grid;place-content:center;flex:none;font-size:1.1rem}

/* ── Misc: empty, toast, modal, skeleton ──────────────── */
.sk-empty{text-align:center;color:var(--sk-muted);padding:2rem 1rem}
.sk-empty .em{font-size:2.6rem;display:block;margin-bottom:.5rem}
.sk-toast-wrap{position:fixed;left:0;right:0;bottom:calc(var(--sk-bottom-h) + 18px);z-index:80;display:flex;flex-direction:column;align-items:center;gap:.4rem;pointer-events:none}
.sk-toast{background:var(--sk-text);color:var(--sk-canvas);padding:.7rem 1.1rem;border-radius:var(--sk-pill);font-weight:600;font-size:.86rem;box-shadow:var(--sk-shadow-lg);animation:sk-toast-in .25s;max-width:90%}
.sk-toast.err{background:var(--sk-danger);color:#fff}.sk-toast.ok{background:var(--sk-success);color:#fff}
@keyframes sk-toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sk-modal-scrim{position:fixed;inset:0;background:rgba(58,36,24,.5);z-index:70;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:.2s}
.sk-app .sk-modal-scrim{left:max(0px,calc(50% - var(--sk-max)/2));right:max(0px,calc(50% - var(--sk-max)/2))}
.sk-modal-scrim.open{opacity:1;pointer-events:auto}
.sk-modal{background:var(--sk-canvas);width:100%;max-width:var(--sk-max);border-top-left-radius:24px;border-top-right-radius:24px;padding:1.2rem 1rem calc(1.4rem + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);max-height:88dvh;overflow:auto}
.sk-modal-scrim.open .sk-modal{transform:none}
.sk-modal-grip{width:42px;height:5px;border-radius:99px;background:var(--sk-border-2);margin:0 auto .8rem}
.sk-skel{background:linear-gradient(90deg,var(--sk-soft) 25%,var(--sk-soft-2) 37%,var(--sk-soft) 63%);background-size:400% 100%;animation:sk-shimmer 1.4s infinite;border-radius:10px}
@keyframes sk-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-divider{height:1px;background:var(--sk-border);margin:1rem 0}

/* ── Home: snelle acties ──────────────────────────────── */
.sk-quick{display:flex;gap:.6rem;overflow-x:auto;padding:.1rem 0 .3rem;-ms-overflow-style:none;scrollbar-width:none}
.sk-quick::-webkit-scrollbar{display:none}
.sk-quick-btn{flex:none;display:flex;flex-direction:column;align-items:center;gap:.45rem;width:80px;border:1px solid var(--sk-border);background:var(--sk-card);border-radius:var(--sk-radius);padding:.7rem .35rem;font-size:.72rem;font-weight:700;color:var(--sk-text);cursor:pointer;box-shadow:var(--sk-shadow-sm)}
.sk-quick-btn:active{transform:scale(.96)}
.sk-quick-btn .ic{width:42px;height:42px;border-radius:13px;background:var(--sk-soft);color:var(--sk-primary);display:grid;place-content:center;font-size:1.15rem}

/* ── Groep-overzicht: hub-kaarten ─────────────────────── */
.sk-hub{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.sk-hub-card{background:var(--sk-card);border:1px solid var(--sk-border);border-radius:var(--sk-radius);padding:1rem;text-align:left;cursor:pointer;box-shadow:var(--sk-shadow-sm);position:relative;transition:transform .12s}
.sk-hub-card:active{transform:scale(.97)}
.sk-hub-card .ic{width:44px;height:44px;border-radius:13px;display:grid;place-content:center;font-size:1.25rem;margin-bottom:.55rem}
.sk-hub-card b{display:block;font-size:.96rem}
.sk-hub-card span{font-size:.76rem;color:var(--sk-muted)}

.sk-hidden{display:none!important}