/* Kousvit — estil pataje (jòn taxi #FFC107 + nwa), mobile-first */
:root{
  --jon:#FFC107; --jon-fonce:#E0A800; --nwa:#141414; --nwa2:#1F1F1F;
  --blan:#FFFFFF; --gri:#F4F4F4; --gri-bò:#E0E0E0; --tèks:#222; --tèks-feb:#777;
  --vèt:#1B9E57; --wouj:#D32F2F; --ble:#1976D2;
  --lonbraj:0 2px 10px rgba(0,0,0,.12); --reyon:12px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--gri); color:var(--tèks); font-size:16px; line-height:1.45;
}
.kontene{max-width:480px;margin:0 auto;min-height:100vh;background:var(--blan);
  display:flex;flex-direction:column;position:relative;}
/* Antèt */
.antet{background:var(--nwa);color:var(--blan);padding:14px 16px;
  display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;}
.antet .logo{width:38px;height:38px;border-radius:10px;background:var(--jon);
  color:var(--nwa);font-weight:900;font-size:22px;display:flex;align-items:center;
  justify-content:center;flex:none;}
.antet h1{font-size:17px;margin:0;font-weight:800;letter-spacing:.5px;}
.antet h1 span{color:var(--jon);}
.antet .sou-tit{font-size:11px;color:#BBB;margin:0;}
.antet .espas{flex:1;}
/* Selektè lang */
.selekte-lang{display:flex;gap:4px;}
.selekte-lang button{background:transparent;border:1px solid #555;color:#DDD;
  border-radius:6px;padding:4px 7px;font-size:11px;font-weight:700;cursor:pointer;}
.selekte-lang button.aktif{background:var(--jon);border-color:var(--jon);color:var(--nwa);}
/* Kò */
.kò{flex:1;padding:16px;padding-bottom:90px;}
.kat{background:var(--blan);border:1px solid var(--gri-bò);border-radius:var(--reyon);
  padding:14px;margin-bottom:12px;box-shadow:var(--lonbraj);}
.kat h2,.kat h3{margin:0 0 10px;font-size:16px;}
.tit-jon{border-left:5px solid var(--jon);padding-left:10px;}
/* Bouton */
.btn{display:block;width:100%;padding:14px;border:none;border-radius:var(--reyon);
  font-size:16px;font-weight:800;cursor:pointer;text-align:center;text-decoration:none;}
.btn-jon{background:var(--jon);color:var(--nwa);}
.btn-jon:active{background:var(--jon-fonce);}
.btn-nwa{background:var(--nwa);color:var(--blan);}
.btn-blan{background:var(--blan);color:var(--nwa);border:2px solid var(--nwa);}
.btn-vèt{background:var(--vèt);color:#fff;}
.btn-wouj{background:var(--wouj);color:#fff;}
.btn-gri{background:var(--gri-bò);color:var(--tèks);}
.btn-gwo{padding:18px;font-size:18px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.ranje{display:flex;gap:8px;}
.ranje .btn{flex:1;}
/* Fòmilè */
label{display:block;font-size:13px;font-weight:700;margin:10px 0 4px;color:#444;}
input,select,textarea{width:100%;padding:12px;border:1.5px solid var(--gri-bò);
  border-radius:10px;font-size:16px;background:#fff;color:var(--tèks);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--jon);}
.erè{color:var(--wouj);font-size:13px;margin-top:6px;min-height:18px;}
.siksè{color:var(--vèt);font-size:13px;margin-top:6px;}
/* Badj estati */
.badj{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:800;}
.badj-jon{background:#FFF3CD;color:#856404;}
.badj-vèt{background:#D4EDDA;color:#155724;}
.badj-wouj{background:#F8D7DA;color:#721C24;}
.badj-gri{background:#E2E3E5;color:#383D41;}
.badj-ble{background:#D1ECF1;color:#0C5460;}
/* Lis */
.lis-ranje{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--gri-bò);}
.lis-ranje:last-child{border-bottom:none;}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--nwa);color:var(--jon);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;flex:none;}
/* Navigasyon anba */
.nav-anba{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;
  max-width:480px;background:var(--nwa);display:flex;z-index:60;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.nav-anba a{flex:1;text-align:center;color:#AAA;text-decoration:none;font-size:10px;
  padding:6px 2px;font-weight:700;}
.nav-anba a .ikòn{font-size:20px;display:block;margin-bottom:2px;}
.nav-anba a.aktif{color:var(--jon);}
/* Kat Leaflet */
#kat{height:320px;border-radius:var(--reyon);z-index:1;}
#kat.gran{height:420px;}
.lejann{background:rgba(20,20,20,.85);color:#fff;border-radius:8px;padding:6px 10px;
  font-size:12px;font-weight:700;}
/* Zetwal */
.zetwal{font-size:34px;cursor:pointer;color:#CCC;letter-spacing:4px;}
.zetwal.chwazi,.zetwal.limyè{color:var(--jon);}
/* Chat */
.chat-bwat{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;
  padding:8px;background:var(--gri);border-radius:var(--reyon);}
.msg{max-width:80%;padding:9px 12px;border-radius:14px;font-size:14px;}
.msg-mwen{background:var(--jon);color:var(--nwa);align-self:flex-end;}
.msg-li{background:#fff;border:1px solid var(--gri-bò);align-self:flex-start;}
.chat-antre{display:flex;gap:8px;margin-top:10px;}
.chat-antre input{flex:1;}
.chat-antre button{flex:none;width:52px;border-radius:10px;border:none;
  background:var(--nwa);color:var(--jon);font-size:20px;}
/* KPI */
.griy-kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.kpi{background:var(--nwa);color:#fff;border-radius:var(--reyon);padding:14px;}
.kpi .valè{font-size:24px;font-weight:900;color:var(--jon);}
.kpi .etikèt{font-size:12px;color:#BBB;}
/* Tab */
.tab{display:flex;background:var(--gri);border-radius:10px;padding:4px;margin-bottom:12px;}
.tab button{flex:1;border:none;background:transparent;padding:10px;font-weight:800;
  font-size:14px;border-radius:8px;cursor:pointer;color:var(--tèks-feb);}
.tab button.aktif{background:var(--nwa);color:var(--jon);}
/* Bouton demo */
.btn-demo{margin-top:12px;background:transparent;border:2px dashed var(--jon-fonce);
  color:#8a6d00;width:100%;padding:11px;border-radius:10px;font-weight:700;cursor:pointer;}
/* Pwogrè */
.pwogrè{height:8px;background:var(--gri-bò);border-radius:4px;overflow:hidden;}
.pwogrè div{height:100%;background:var(--jon);transition:width .5s;}
.santre{text-align:center;}
.ti-tèks{font-size:12px;color:var(--tèks-feb);}
.mt{margin-top:12px;} .mb{margin-bottom:12px;}
@media(min-width:520px){
  body{background:#DDD;}
  .kontene{box-shadow:0 0 30px rgba(0,0,0,.2);}
}