/* ================= Trackify · sport.css — stijl "Sport" (html[data-skin=sport]) =================
   Zwart met één neon-accent, smalle hoofdletters en grote cijfers. Alleen actief via Algemeen → Stijl. */
@font-face{font-family:"BC";src:url(bc600.woff2) format("woff2");font-weight:500 650;font-display:swap}
@font-face{font-family:"BC";src:url(bc800.woff2) format("woff2");font-weight:700 900;font-display:swap}
html:root[data-skin=sport]{
--bg:#0a0a0a;--card:#131313;--ink:#f4f4f1;--mut:#8b8b86;--line:#262626;--hdr:#0a0a0a;--inp:#0d0d0d;--fill:#1d1d1d;
--neon:#d4ff3a;--neon-ink:#0a0a0a;--hi:#d4ff3a;
--c-kcal:var(--neon);--s-kcal:#1d1d1d;--b-kcal:#1d1d1d;--k-kcal:var(--neon);--d-kcal:var(--neon);
--c-gym:var(--neon);--s-gym:#1d1d1d;--b-gym:#1d1d1d;--k-gym:var(--neon);--d-gym:var(--neon);
--c-hab:var(--neon);--s-hab:#1d1d1d;--b-hab:#1d1d1d;--k-hab:var(--neon);--d-hab:var(--neon);
--ok:var(--neon);--bad:#ff4d2e;--warn:#ffb020;--rose:#ff4d2e;--amber:#ffb020;--water:#5ee1ff;
--glass:#131313;--sh:none;--r:4px;--orb-op:0;--blob:0;
--cond:"BC","Arial Narrow",Impact,sans-serif;color-scheme:dark}
html:root[data-skin=sport][data-theme=light]{
--bg:#efeee9;--card:#fff;--ink:#0a0a0a;--mut:#6b6b66;--line:#dcdbd4;--hdr:#efeee9;--inp:#f7f6f2;--fill:#e6e5df;
--neon:#0a0a0a;--neon-ink:#d4ff3a;--hi:#b5e61d;--s-kcal:#e6e5df;--b-kcal:#e6e5df;--s-gym:#e6e5df;--b-gym:#e6e5df;--s-hab:#e6e5df;--b-hab:#e6e5df;--ok:#2f8a00;--glass:#fff;color-scheme:light}
@media(prefers-color-scheme:light){html:root[data-skin=sport]:not([data-theme=dark]){
--bg:#efeee9;--card:#fff;--ink:#0a0a0a;--mut:#6b6b66;--line:#dcdbd4;--hdr:#efeee9;--inp:#f7f6f2;--fill:#e6e5df;
--neon:#0a0a0a;--neon-ink:#d4ff3a;--hi:#b5e61d;--s-kcal:#e6e5df;--b-kcal:#e6e5df;--s-gym:#e6e5df;--b-gym:#e6e5df;--s-hab:#e6e5df;--b-hab:#e6e5df;--ok:#2f8a00;--glass:#fff;color-scheme:light}}

/* ---- basis ---- */
html[data-skin=sport] body{background:var(--bg)}
html[data-skin=sport] .bgfx,html[data-skin=sport] .orb{display:none!important}
html[data-skin=sport] body::before{box-shadow:none}
html[data-skin=sport] .site{background:var(--hdr);border-bottom:1px solid var(--line);animation:none}
html[data-skin=sport] .brand{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.35rem}
html[data-skin=sport] .brand .tag{font-family:var(--cond);font-weight:700;letter-spacing:.08em;border-radius:2px;background:var(--neon);color:var(--neon-ink)}
html[data-skin=sport] .ib{background:none;border:1px solid var(--line);border-radius:4px;color:var(--ink);width:40px;height:40px}
html[data-skin=sport] .ib:active{background:var(--fill)}

/* ---- typografie ---- */
html[data-skin=sport] h1{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:2.7rem;line-height:.95;letter-spacing:.005em;margin:18px 0 16px}
html[data-skin=sport] h1 small{display:block;font-family:var(--cond);font-weight:600;font-size:1rem;letter-spacing:.14em;color:var(--mut);margin-top:6px}
html[data-skin=sport] h2{font-family:var(--cond);font-weight:700;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);border:0;padding:0;display:flex;align-items:center;gap:8px}
html[data-skin=sport] h2::before{content:"";width:8px;height:8px;background:var(--hi);flex:none}
html[data-skin=sport] h2 .i{display:none}
html[data-skin=sport] label{font-family:var(--cond);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--mut)}
html[data-skin=sport] .note{color:var(--mut)}
html[data-skin=sport] .greet{font-family:var(--cond);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--neon);font-size:1rem}
html[data-skin=sport] .hero h1{font-size:clamp(2.6rem,12vw,4.2rem);line-height:1.02}
html[data-skin=sport] .hero h1 *{background:linear-gradient(transparent 14%,var(--hi) 14% 90%,transparent 90%)!important;-webkit-text-fill-color:#0a0a0a!important;color:#0a0a0a!important;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---- kaarten: plat en hoekig ---- */
html[data-skin=sport] .card{background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-skin=sport] .card:hover{transform:none;box-shadow:none}
html[data-skin=sport] .glow::before,html[data-skin=sport] .sec::after,html[data-skin=sport] .bimg::after{display:none!important}
html[data-skin=sport] .sec{border:1px solid var(--line)!important;transform:none!important;border-left:4px solid var(--neon)!important}
html[data-skin=sport] .sec h2,html[data-skin=sport] .sec h3{font-family:var(--cond);font-size:2rem;color:var(--ink);letter-spacing:.02em}
html[data-skin=sport] .sec .icn,html[data-skin=sport] .sico{border-radius:4px!important;background:var(--fill)!important;filter:grayscale(1) contrast(1.2)}
html[data-skin=sport] .li,html[data-skin=sport] .opt{border-top:1px solid var(--line)}

/* ---- knoppen ---- */
html[data-skin=sport] .btn{border-radius:2px;background:var(--neon);color:var(--neon-ink);font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;box-shadow:none}
html[data-skin=sport] .btn:active{transform:scale(.98);filter:brightness(.9)}
html[data-skin=sport] .btn.ghost{outline:0;background:transparent;color:var(--ink);border:1px solid var(--line)}
html[data-skin=sport] .btn.danger{background:transparent;color:var(--bad);border:1px solid var(--bad)}
html[data-skin=sport] .btn.sm{font-size:.9rem}
html[data-skin=sport] .linkb{color:var(--neon)}

/* ---- invoer ---- */
html[data-skin=sport] input,html[data-skin=sport] select,html[data-skin=sport] textarea{border-radius:2px;background:var(--inp);border:1px solid var(--line);font-variant-numeric:tabular-nums}
html[data-skin=sport] input:focus,html[data-skin=sport] select:focus,html[data-skin=sport] textarea:focus{border-color:var(--neon);box-shadow:none}

/* ---- keuzes ---- */
html[data-skin=sport] .seg,html[data-skin=sport] .modeseg{background:transparent;border:1px solid var(--line);border-radius:2px;padding:0;gap:0}
html[data-skin=sport] .seg button{border-radius:0;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-size:.95rem}
html[data-skin=sport] .seg button.on{background:var(--neon);color:var(--neon-ink)}
html[data-skin=sport] .chips button{border-radius:2px;border:1px solid var(--line);background:transparent;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
html[data-skin=sport] .chips button.on{background:var(--neon);border-color:var(--neon);color:var(--neon-ink)}
html[data-skin=sport] .sw input:checked+i{background:var(--neon)!important}
html[data-skin=sport] .tag{border-radius:2px;font-family:var(--cond);letter-spacing:.06em;text-transform:uppercase}

/* ---- cijfers & voortgang: de blikvanger ---- */
html[data-skin=sport] .rt b,html[data-skin=sport] .streak b,html[data-skin=sport] .cnt,html[data-skin=sport] .tk b,html[data-skin=sport] .kc{font-family:var(--cond);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0}
html[data-skin=sport] .rt b{font-size:3.4rem}
html[data-skin=sport] .rt span{font-family:var(--cond);letter-spacing:.14em;text-transform:uppercase}
html[data-skin=sport] .ring .rc{stroke:var(--hi);stroke-linecap:butt}
html[data-skin=sport] .rtk{stroke:var(--fill)}
html[data-skin=sport] .mr b{font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
html[data-skin=sport] .mr span{font-family:var(--cond);font-weight:600;font-size:1rem;font-variant-numeric:tabular-nums;color:var(--ink)}
html[data-skin=sport] .bar{height:10px;border-radius:0;background:var(--fill)}
html[data-skin=sport] .bar i{border-radius:0;background:var(--hi);-webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px);mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px)}
html[data-skin=sport] .mr.sug .bar i{background:var(--warn)}html[data-skin=sport] .mr.sug.over .bar i{background:var(--bad)}
html[data-skin=sport] .streak>div{border-radius:2px;background:var(--fill)}
html[data-skin=sport] .streak small{font-family:var(--cond);letter-spacing:.12em;text-transform:uppercase}
html[data-skin=sport] .party{background:var(--neon);color:var(--neon-ink);border-radius:2px;animation:none;font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
html[data-skin=sport] .chart .col i{border-radius:0;background:var(--line)}html[data-skin=sport] .chart .col i.hit{background:var(--hi)}

/* ---- habits ---- */
html[data-skin=sport] .hb{border-radius:2px;background:var(--card)}
html[data-skin=sport] .hb.done{background:var(--fill);border-color:var(--neon)}

/* ---- tabbalk ---- */
html[data-skin=sport] nav.tabs{background:var(--hdr);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid var(--line)}
html[data-skin=sport] nav.tabs a{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;border-radius:0}
html[data-skin=sport] nav.tabs a.on{color:var(--neon)}
html[data-skin=sport] nav.tabs a.on .ti{animation:none}
html[data-skin=sport] nav.tabs .tind{background:transparent;border-radius:0}
html[data-skin=sport] nav.tabs .tind::after{top:-7px;bottom:auto;left:18%;right:18%;height:3px;border-radius:0;background:var(--hi)}

/* ---- dialogen, toast, rondleiding ---- */
html[data-skin=sport] .mbox{border-radius:4px;border:1px solid var(--line);box-shadow:none}
html[data-skin=sport] .toast{border-radius:2px;background:var(--neon);color:var(--neon-ink);font-weight:700}
html[data-skin=sport] .tour{background:var(--bg)}
html[data-skin=sport] .tlist li,html[data-skin=sport] .tcard{border-radius:2px;background:var(--card)}
html[data-skin=sport] .tbar i{background:var(--neon)!important}
html[data-skin=sport] .scbox{border-radius:4px 4px 0 0}
html[data-skin=sport] .sec{--c:var(--neon)!important;--c2:var(--neon)!important}
html[data-skin=sport] .sec>b{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:2.3rem;letter-spacing:.01em;color:var(--ink)}
html[data-skin=sport] .sec>i{font-style:normal;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--neon)}
html[data-skin=sport] .sec .ic{border-radius:4px!important;background:var(--fill)!important;filter:grayscale(1) contrast(1.15)}
html[data-skin=sport] .sec{border-radius:4px!important}
html[data-skin=sport] .sec{border-left-color:var(--hi)!important}
html[data-skin=sport] .logo{border-radius:3px}
html[data-skin=sport] .logo rect:first-of-type{fill:var(--hi)}
html[data-skin=sport] .logo rect:not(:first-of-type){fill:var(--neon-ink)}
html[data-skin=sport][data-theme=light] .logo rect:not(:first-of-type){fill:#0a0a0a}
@media(prefers-color-scheme:light){html[data-skin=sport]:not([data-theme=dark]) .logo rect:not(:first-of-type){fill:#0a0a0a}}
html[data-skin=sport] .tlogo .logo{box-shadow:none}
html[data-skin=sport] .wico{background:var(--fill)!important;border-radius:3px}html[data-skin=sport] .wico .i{color:var(--neon)!important}
html[data-skin=sport] .icn button{border-radius:3px}html[data-skin=sport] .icn button.on{background:var(--neon);color:var(--neon-ink);border-color:var(--neon)}
html[data-skin=sport] .wch .i{color:var(--neon)}html[data-skin=sport] .actw,html[data-skin=sport] .card.wk{--wc:var(--hi)!important}
html[data-skin=sport] .b3d{border-radius:2px;background:transparent}
html[data-skin=sport] .b3dinfo{border-radius:2px;background:var(--card);border-left-color:var(--hi)}html[data-skin=sport] .b3dinfo>b{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:1.6rem;letter-spacing:.02em}
html[data-skin=sport] .b3dex span{border-radius:2px;font-family:var(--cond);font-weight:600;letter-spacing:.04em;text-transform:uppercase}html[data-skin=sport] .b3dex .i{color:var(--neon)}
html[data-skin=sport] .b3d .b3dreset{border-radius:2px}
html[data-skin=sport] .swm{border-radius:3px;box-shadow:none;border-color:var(--line)}
html[data-skin=sport] .swm a{border-radius:2px}html[data-skin=sport] .swm a span{border-radius:2px;background:var(--fill)}
html[data-skin=sport] .swm a b{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:1.15rem}
html[data-skin=sport] .swm a small{font-family:var(--cond);letter-spacing:.06em;text-transform:uppercase;font-size:.78rem}
html[data-skin=sport] .swm a.on{background:var(--fill);box-shadow:inset 3px 0 0 var(--neon)}html[data-skin=sport] .swm a.on b{color:var(--neon)}
html[data-skin=sport] .swm a:hover{background:var(--fill)}html[data-skin=sport] .swm a span .sico{filter:grayscale(1) contrast(1.2)}
html[data-skin=sport] .swm a:focus-visible{outline:2px solid var(--neon);outline-offset:-2px;border-radius:0}
html[data-skin=sport] .mbox,html[data-skin=sport] .toast,html[data-skin=sport] .seg,html[data-skin=sport] .chips button,html[data-skin=sport] input,html[data-skin=sport] select{border-radius:2px}
html[data-skin=sport] .b3dbig .b3dinfo{border-radius:2px;box-shadow:none;background:color-mix(in srgb,var(--card) 92%,transparent)}
html[data-skin=sport] .b3dtop h1{font-size:2.7rem}
html[data-skin=sport] .b3dsubs button{border-radius:2px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}html[data-skin=sport] .b3dsubs button.on{background:var(--neon);border-color:var(--neon);color:var(--neon-ink)}