/* Die InteliGro-tekens. Dieselfde groen, dieselfde panele, dieselfde radiusskaal en
   dieselfde knoppie-maat as C:/Tools/inteligro se frontend, sodat 'n mens wat tussen
   die twee apps beweeg nie voel hy is by 'n ander maatskappy nie.
   Een doelbewuste afwyking: InteliGro sit WIT teks op die groen; ons sit donker teks,
   want hierdie app word op 'n trekker in die son gelees en wit-op-groen is daar ~2,6:1. */
:root{
  color-scheme: dark;
  --s1:#0F1419; --s2:#1A1F26; --s3:#222831; --lyn:#2A2F36; --lyn2:#39414B;
  --teks:#E6E8EB; --teks2:#A9B0B8; --dof:#7C848D;
  --acc:#41B649; --acc-hoog:#4FCB59; --acc-dof:rgba(65,182,73,.16);
  --acc-gloed:rgba(65,182,73,.30);
  --goed:#41B649; --waarsku:#F4B400; --krit:#E07070;
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-pil:999px;
  --t-vinnig:.14s ease; --t-med:.22s cubic-bezier(.2,.7,.2,1);
  --skadu:0 1px 2px rgba(0,0,0,.30),0 4px 12px rgba(0,0,0,.26);
  --sab: env(safe-area-inset-bottom,0px); --sat: env(safe-area-inset-top,0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; min-height:100%; background:var(--s1); color:var(--teks);
  font:14px/1.45 'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
.hide{display:none !important}
/* Druk-terugvoer op ALLES wat 'n knoppie is — dieselfde gebaar as InteliGro. Op 'n
   foon is dit die enigste manier om te weet of jou tik geland het. */
button:active,.btn:active{transform:translateY(1px) scale(.985)}

.kop{display:flex; align-items:center; gap:8px; padding:calc(var(--sat) + 9px) 12px 9px;
  background:var(--s2); border-bottom:1px solid var(--lyn); position:sticky; top:0; z-index:10}
.kop h1{margin:0; font-size:15px; font-weight:600; flex:1; letter-spacing:-.2px}
.kop .merk b{color:var(--acc)}
#taalKnop{width:40px; height:32px; border-radius:var(--r-md); background:var(--s3);
  border:1px solid var(--lyn); font-size:11px; font-weight:700; letter-spacing:.04em}

.bd{padding:14px; max-width:820px; margin:0 auto}
.mid{min-height:100vh; display:grid; place-items:center; padding:24px}
.boks{width:100%; max-width:340px; text-align:center}
.boks h2{margin:12px 0 4px; font-size:20px}
.boks p{color:var(--dof); font-size:13px; margin:0 0 16px}

.inp{width:100%; background:var(--s2); border:1px solid var(--lyn); color:var(--teks);
  border-radius:var(--r-lg); padding:10px 12px; font:inherit; font-size:13px; margin-bottom:8px;
  transition:border-color var(--t-vinnig)}
.inp:focus{outline:none; border-color:var(--acc)}
.inp.kode{text-align:center; letter-spacing:.28em; font-family:ui-monospace,monospace;
  font-size:20px; text-transform:uppercase}
label{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dof); margin:12px 2px 6px; font-weight:600}

.btn{display:block; width:100%; text-align:center; background:var(--s3);
  border:1px solid var(--lyn); border-radius:9px; padding:10px 16px; margin-bottom:8px;
  font-size:13px; font-weight:600; transition:background var(--t-vinnig),border-color var(--t-vinnig)}
/* 'n <a class="btn"> is 'n knoppie, nie 'n blou onderstreepte skakel nie. Sonder dit
   erf hy die blaaier se skakelstyl en lyk die app soos 'n 1998-webblad. */
a.btn{color:inherit; text-decoration:none}
.btn.pri{background:var(--acc); border-color:var(--acc); color:#06121f}
.btn.pri:hover{background:var(--acc-hoog); border-color:var(--acc-hoog);
  box-shadow:0 6px 18px -4px var(--acc-gloed)}
.btn.gevaar{background:transparent; border-color:var(--krit); color:var(--krit)}
.btn:disabled{opacity:.4}
/* Sekondêr, soos InteliGro se .btn-sec: kleiner en ligter as die hoofknoppie. */
.mini{background:var(--s3); border:1px solid var(--lyn); border-radius:var(--r-md);
  padding:6px 12px; font-size:11px; font-weight:500; color:var(--teks2);
  transition:border-color var(--t-vinnig),color var(--t-vinnig)}
.mini:hover{border-color:var(--lyn2); color:var(--acc)}

.item{background:var(--s2); border:1px solid var(--lyn); border-radius:var(--r-lg);
  padding:10px 12px; margin-bottom:7px; transition:border-color var(--t-vinnig)}
.item .t{font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:8px}
.item .t .tag{margin-left:auto; font-size:11px; color:var(--dof); font-weight:500}
.item .s{color:var(--teks2); font-size:12.5px; margin-top:3px; font-variant-numeric:tabular-nums}
.item.dood{opacity:.5}

h4.sec{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dof);
  margin:20px 2px 8px; font-weight:600; display:flex; align-items:center; gap:8px}
h4.sec .mini{margin-left:auto}

.nota{color:var(--dof); font-size:12.5px; margin:4px 2px 14px; line-height:1.55}
.baan{padding:9px 12px; font-size:12.5px; border-radius:var(--r-lg); margin-bottom:10px}
.baan.waarsku{background:rgba(244,180,0,.14); border:1px solid rgba(244,180,0,.45); color:#FFD680}
.baan.krit{background:rgba(224,112,112,.14); border:1px solid rgba(224,112,112,.45); color:#FFB4B4}
.fout{color:#FFB4B4; font-size:12.5px; margin-top:8px; min-height:1.2em}

.meter{display:flex; align-items:baseline; gap:8px; font-variant-numeric:tabular-nums}
.meter b{font-size:22px}
.balk{height:6px; background:var(--s3); border-radius:3px; overflow:hidden; margin:8px 0 2px}
.balk i{display:block; height:100%; background:var(--acc); width:0; transition:width var(--t-med)}
.balk i.vol{background:var(--krit)}

table.tb{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums}
table.tb th{text-align:right; font-weight:600; color:var(--dof); font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; padding:6px 8px; border-bottom:1px solid var(--lyn)}
table.tb th:first-child{text-align:left}
table.tb td{padding:7px 8px; border-bottom:1px solid #ffffff0f; text-align:right}
table.tb td:first-child{text-align:left; color:var(--teks2)}

.kode-wys{font-family:ui-monospace,monospace; font-size:19px; letter-spacing:.22em;
  background:var(--s3); border:1px dashed var(--lyn2); border-radius:var(--r-md);
  padding:10px; text-align:center; margin:8px 0; color:var(--acc)}