/* ================= Trackify · ios.css — stijl "iOS" (html[data-skin=ios]) =================
   Alleen actief als je bij Algemeen → Stijl "iOS" kiest. De klassieke stijl (style.css) blijft onaangeroerd. */
html[data-skin=ios]{
--bg:#f2f2f7;--card:#fff;--ink:#000;--mut:#8a8a8e;--line:rgba(60,60,67,.18);--hdr:rgba(249,249,249,.86);--inp:#f2f2f7;--fill:rgba(118,118,128,.12);
--c-kcal:#ff9500;--s-kcal:rgba(255,149,0,.13);--b-kcal:#ffcc80;--k-kcal:#ff9500;--d-kcal:#ff9500;
--c-gym:#007aff;--s-gym:rgba(0,122,255,.12);--b-gym:#8cc2ff;--k-gym:#007aff;--d-gym:#007aff;
--c-hab:#af52de;--s-hab:rgba(175,82,222,.12);--b-hab:#d9aef0;--k-hab:#af52de;--d-hab:#af52de;
--ok:#34c759;--bad:#ff3b30;--warn:#ff9500;--rose:#ff2d55;--amber:#ff9500;--water:#32ade6;
--glass:#fff;--sh:none;--r:12px;--orb-op:0;--blob:0;
--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
color-scheme:light}
html[data-skin=ios][data-theme=dark]{
--bg:#000;--card:#1c1c1e;--ink:#fff;--mut:#8d8d93;--line:rgba(84,84,88,.6);--hdr:rgba(22,22,24,.86);--inp:#2c2c2e;--fill:rgba(118,118,128,.24);
--c-kcal:#ff9f0a;--s-kcal:rgba(255,159,10,.18);--b-kcal:#7a4a05;--k-kcal:#ff9f0a;--d-kcal:#ff9f0a;
--c-gym:#0a84ff;--s-gym:rgba(10,132,255,.18);--b-gym:#0a3f7a;--k-gym:#0a84ff;--d-gym:#0a84ff;
--c-hab:#bf5af2;--s-hab:rgba(191,90,242,.18);--b-hab:#5a2a73;--k-hab:#bf5af2;--d-hab:#bf5af2;
--ok:#30d158;--bad:#ff453a;--warn:#ff9f0a;--rose:#ff375f;--amber:#ff9f0a;--water:#64d2ff;--glass:#1c1c1e;color-scheme:dark}
@media(prefers-color-scheme:dark){html[data-skin=ios]:not([data-theme=light]){
--bg:#000;--card:#1c1c1e;--ink:#fff;--mut:#8d8d93;--line:rgba(84,84,88,.6);--hdr:rgba(22,22,24,.86);--inp:#2c2c2e;--fill:rgba(118,118,128,.24);
--c-kcal:#ff9f0a;--s-kcal:rgba(255,159,10,.18);--b-kcal:#7a4a05;--k-kcal:#ff9f0a;--d-kcal:#ff9f0a;
--c-gym:#0a84ff;--s-gym:rgba(10,132,255,.18);--b-gym:#0a3f7a;--k-gym:#0a84ff;--d-gym:#0a84ff;
--c-hab:#bf5af2;--s-hab:rgba(191,90,242,.18);--b-hab:#5a2a73;--k-hab:#bf5af2;--d-hab:#bf5af2;
--ok:#30d158;--bad:#ff453a;--warn:#ff9f0a;--rose:#ff375f;--amber:#ff9f0a;--water:#64d2ff;--glass:#1c1c1e;color-scheme:dark}}

/* ---- basis ---- */
html[data-skin=ios] body{background:var(--bg);font-family:var(--font);letter-spacing:-.01em}
html[data-skin=ios] .bgfx,html[data-skin=ios] .orb{display:none!important}
html[data-skin=ios] body::before{box-shadow:none}

/* ---- navigatiebalk boven ---- */
html[data-skin=ios] .site{background:var(--hdr);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-bottom:.5px solid var(--line);position:sticky;top:0;animation:none}
html[data-skin=ios] .brand{font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
html[data-skin=ios] .ib{background:none;color:var(--accent);width:40px;height:40px}
html[data-skin=ios] .ib:active{opacity:.4;transform:none}

/* ---- titels: iOS "large title" + sectiekoppen ---- */
html[data-skin=ios] h1{font-size:2.05rem;font-weight:700;letter-spacing:-.025em;margin:14px 4px 12px}
html[data-skin=ios] h1 small{display:block;font-size:.95rem;font-weight:400;color:var(--mut);letter-spacing:0;margin-top:2px}
html[data-skin=ios] h2{border:0;padding:0;color:var(--mut);font-size:.8rem;font-weight:400;letter-spacing:0;text-transform:uppercase;margin:0 0 8px}
html[data-skin=ios] h2 .i{color:var(--mut)}

/* ---- kaarten = gegroepeerde lijsten ---- */
html[data-skin=ios] .card{background:var(--card);border:0;border-radius:12px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:14px 16px;margin-bottom:22px}
html[data-skin=ios] .card:hover{transform:none;box-shadow:none}
html[data-skin=ios] .glow::before,html[data-skin=ios] .sec::after,html[data-skin=ios] .bimg::after{display:none!important}
html[data-skin=ios] .li,html[data-skin=ios] .opt{border-top:.5px solid var(--line);padding:11px 0}
html[data-skin=ios] .li:first-child,html[data-skin=ios] .opt:first-of-type{border-top:0}
html[data-skin=ios] .note{color:var(--mut);font-size:.82rem}
html[data-skin=ios] label{color:var(--mut);font-weight:400;font-size:.8rem}

/* ---- knoppen ---- */
html[data-skin=ios] .btn{border-radius:12px;min-height:46px;font-weight:600;font-size:1rem;background:var(--accent);color:#fff;box-shadow:none;letter-spacing:-.01em}
html[data-skin=ios] .btn:active{opacity:.65;transform:none}
html[data-skin=ios] .btn.ghost{outline:0;background:var(--soft);color:var(--accent)}
html[data-skin=ios] .btn.danger{background:rgba(255,59,48,.12);color:var(--bad)}
html[data-skin=ios] .btn.sm{min-height:34px;border-radius:9px;font-size:.88rem}
html[data-skin=ios] .linkb{color:var(--accent);text-decoration:none}

/* ---- invoer ---- */
html[data-skin=ios] input,html[data-skin=ios] select,html[data-skin=ios] textarea{border:0;background:var(--inp);border-radius:10px;min-height:44px}
html[data-skin=ios] input:focus,html[data-skin=ios] select:focus,html[data-skin=ios] textarea:focus{box-shadow:0 0 0 2px var(--accent);border:0}

/* ---- segmented control ---- */
html[data-skin=ios] .seg,html[data-skin=ios] .modeseg{background:var(--fill);border-radius:9px;padding:2px;gap:0}
html[data-skin=ios] .seg button{min-height:32px;border-radius:7px;color:var(--ink);font-weight:500;font-size:.86rem}
html[data-skin=ios] .seg button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
html[data-skin=ios][data-theme=dark] .seg button.on{background:#636366}
@media(prefers-color-scheme:dark){html[data-skin=ios]:not([data-theme=light]) .seg button.on{background:#636366}}

/* ---- chips → iOS "pill" filters ---- */
html[data-skin=ios] .chips button{border:0;background:var(--fill);color:var(--ink);font-weight:500;min-height:34px;border-radius:17px;padding:0 14px}
html[data-skin=ios] .chips button.on{background:var(--accent);color:#fff}

/* ---- schakelaar in iOS-groen ---- */
html[data-skin=ios] .sw{width:51px;height:31px}
html[data-skin=ios] .sw input:checked+i{background:var(--ok)!important}

/* ---- voortgang ---- */
html[data-skin=ios] .bar{height:6px;background:var(--fill);border-radius:3px}
html[data-skin=ios] .bar i{background:var(--accent);border-radius:3px}
html[data-skin=ios] .mr b{font-weight:600}
html[data-skin=ios] .party{background:var(--accent);animation:none;border-radius:12px}
html[data-skin=ios] .ring .rc{stroke:var(--accent)}

/* ---- tabbalk onder ---- */
html[data-skin=ios] nav.tabs{background:var(--hdr);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-top:.5px solid var(--line);gap:0;padding-top:4px}
html[data-skin=ios] nav.tabs a{border-radius:0;font-weight:500;font-size:.66rem;min-height:48px;color:var(--mut)}
html[data-skin=ios] nav.tabs a[aria-current=page],html[data-skin=ios] nav.tabs a.on{color:var(--accent);background:none!important}
html[data-skin=ios] nav.tabs a::before,html[data-skin=ios] nav.tabs a::after{display:none!important}

/* ---- startpagina ---- */
html[data-skin=ios] .hero{padding:26px 4px 18px}
html[data-skin=ios] .hero h1{font-size:2.1rem}
html[data-skin=ios] .hero h1 *{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--ink)!important}
html[data-skin=ios] .sec{border:0!important;transform:none!important}
html[data-skin=ios] .sec:active{opacity:.7}
html[data-skin=ios] .tag{border-radius:6px;background:var(--fill);color:var(--mut)}

/* ---- dialogen, toast, rondleiding ---- */
html[data-skin=ios] .mbox{border:0;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
html[data-skin=ios] .toast{border-radius:12px;background:rgba(30,30,30,.92);color:#fff}
html[data-skin=ios] .tlist li,html[data-skin=ios] .tcard{background:var(--card);border:0;border-radius:12px}
html[data-skin=ios] .tour{background:var(--bg)}
html[data-skin=ios] .scbox{background:var(--bg)}
html[data-skin=ios] nav.tabs a.on .ti{background:none;animation:none}
html[data-skin=ios] .site{top:env(safe-area-inset-top,0px)}
html[data-skin=ios] body::before{background:var(--hdr);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
html[data-skin=ios] nav.tabs .tind{border-radius:12px;background:var(--fill)}html[data-skin=ios] nav.tabs .tind::after{display:none}
html[data-skin=ios] .logo rect:first-of-type{fill:var(--accent)}
html[data-skin=ios] .tlogo .logo{box-shadow:none}
html[data-skin=ios] .icn button{border:0;background:var(--fill);border-radius:12px}html[data-skin=ios] .icn button.on{background:var(--accent);color:#fff}
html[data-skin=ios] .b3d{background:var(--bg);border-radius:12px}html[data-skin=ios] .b3dinfo{background:var(--bg);border:0;border-radius:12px}html[data-skin=ios] .b3dex span{border:0;background:var(--card)}
html[data-skin=ios] .swm{border:0;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.2)}html[data-skin=ios] .swm a{border-radius:10px}html[data-skin=ios] .swm a span{border-radius:10px}
html[data-skin=ios] .b3d.b3dbig{background:none}html[data-skin=ios] .b3dbig .b3dinfo{background:color-mix(in srgb,var(--card) 90%,transparent);border-radius:14px}