:root{
  --yashil:#0f5132; --yashil2:#157347; --och:#f6f7f9; --oq:#fff;
  --matn:#1b1f23; --kul:#6b7280; --chiziq:#e5e7eb;
  --qizil:#b42318; --qizil-fon:#fef3f2;
  --kok:#175cd3; --sariq:#b54708; --sariq-fon:#fffaeb;
  --yashil-fon:#ecfdf3;
  --r:12px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--och); color:var(--matn); font-size:16px; line-height:1.5;
}
a{color:var(--kok); text-decoration:none}
h1{font-size:1.4rem; margin:0 0 1rem}
h2{font-size:1.1rem; margin:1.5rem 0 .6rem}

/* ---------- sarlavha va menyu ---------- */
.top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
  background:var(--yashil); color:#fff; padding:.7rem 1rem;
}
.brand{color:#fff; font-weight:700; font-size:1.05rem}
.menu-btn{
  background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer;
  padding:0 .3rem; line-height:1;
}
.nav{display:none; background:#0b3d26; padding:.4rem 0}
.nav a{
  display:block; color:#d7e8de; padding:.7rem 1.2rem; font-size:.98rem;
}
.nav a.faol{background:rgba(255,255,255,.12); color:#fff; font-weight:600}
.nav a.chiq{color:#ffb3ab; border-top:1px solid rgba(255,255,255,.12); margin-top:.3rem}
body.menu-ochiq .nav{display:block}
.dog{
  background:var(--qizil); color:#fff; border-radius:20px;
  padding:0 .45rem; font-size:.78rem; margin-left:.2rem;
}

/* ---------- asosiy joy ---------- */
main.ichki{padding:1rem; max-width:1100px; margin:0 auto}
main.yolgiz{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
}

.karta{
  background:var(--oq); border:1px solid var(--chiziq); border-radius:var(--r);
  padding:1rem; margin-bottom:1rem;
}
.karta h2{margin-top:0}

/* ---------- raqamlar ---------- */
.raqamlar{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin-bottom:1rem}
.raqam{background:var(--oq); border:1px solid var(--chiziq); border-radius:var(--r); padding:.9rem}
.raqam .k{font-size:.82rem; color:var(--kul); display:block; margin-bottom:.15rem}
.raqam .v{font-size:1.5rem; font-weight:700; line-height:1.2}
.raqam.yashil .v{color:var(--yashil2)}
.raqam.qizil .v{color:var(--qizil)}
.raqam.sariq .v{color:var(--sariq)}

/* ---------- jadval ---------- */
.jadval-orash{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; background:var(--oq); font-size:.95rem}
th,td{padding:.6rem .7rem; text-align:left; border-bottom:1px solid var(--chiziq); white-space:nowrap}
th{background:#f0f2f5; font-size:.82rem; color:var(--kul); font-weight:600;
   text-transform:uppercase; letter-spacing:.02em}
tbody tr:last-child td{border-bottom:0}
td.ism{white-space:normal; min-width:11rem; font-weight:500}
td.raqamli{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- belgilar ---------- */
.belgi{
  display:inline-block; padding:.15rem .55rem; border-radius:20px;
  font-size:.82rem; font-weight:600; white-space:nowrap;
}
.belgi.done{background:var(--yashil-fon); color:var(--yashil2)}
.belgi.missed{background:var(--qizil-fon); color:var(--qizil)}
.belgi.pending{background:var(--sariq-fon); color:var(--sariq)}
.belgi.kul{background:#f1f3f5; color:var(--kul)}

/* ---------- tugmalar ---------- */
.tugma{
  display:inline-block; border:1px solid var(--chiziq); background:var(--oq);
  color:var(--matn); border-radius:9px; padding:.5rem .9rem; font-size:.92rem;
  cursor:pointer; font-family:inherit; font-weight:500;
}
.tugma:hover{background:var(--och)}
.tugma.asosiy{background:var(--yashil2); border-color:var(--yashil2); color:#fff}
.tugma.xavf{background:#fff; border-color:#f3b3ad; color:var(--qizil)}
.tugma.katta{width:100%; padding:.8rem; font-size:1rem; text-align:center}
.tugmalar{display:flex; gap:.5rem; flex-wrap:wrap}

/* ---------- forma ---------- */
label{display:block; font-size:.9rem; color:var(--kul); margin:.9rem 0 .3rem}
input[type=password],input[type=text],input[type=date],input[type=time],
input[type=number],select,textarea{
  width:100%; padding:.75rem .8rem; border:1px solid var(--chiziq);
  border-radius:9px; font-size:1rem; font-family:inherit; background:var(--oq);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--yashil2); outline-offset:1px; border-color:transparent}

/* ---------- xabarlar ---------- */
.flash{padding:.7rem .9rem; border-radius:9px; margin-bottom:.9rem; font-size:.95rem}
.flash.ok{background:var(--yashil-fon); color:var(--yashil2); border:1px solid #a6f4c5}
.flash.xato{background:var(--qizil-fon); color:var(--qizil); border:1px solid #fecdca}
.xato-matn{background:var(--qizil-fon); color:var(--qizil); padding:.7rem .9rem;
           border-radius:9px; font-size:.93rem; margin-bottom:.5rem}
.izoh{color:var(--kul); font-size:.88rem}
.bosh{text-align:center; color:var(--kul); padding:2rem 1rem}

/* ---------- kirish sahifasi ---------- */
.kirish-karta{
  background:var(--oq); border:1px solid var(--chiziq); border-radius:16px;
  padding:1.8rem 1.5rem; width:100%; max-width:380px;
  box-shadow:0 2px 16px rgba(0,0,0,.05);
}
.kirish-karta .logo{font-size:2.4rem; text-align:center; display:block}
.kirish-karta h1{text-align:center; font-size:1.25rem; margin:.4rem 0 1.2rem}

/* ---------- tarix chizig'i ---------- */
.tarix{display:flex; flex-wrap:wrap; gap:4px; margin:.5rem 0}
.kun-nuqta{
  width:26px; height:26px; border-radius:6px; display:flex; align-items:center;
  justify-content:center; font-size:.7rem; color:#fff; font-weight:600;
}
.kun-nuqta.done{background:var(--yashil2)}
.kun-nuqta.missed{background:var(--qizil)}
.kun-nuqta.pending{background:#f0ad4e}
.kun-nuqta.yoq{background:#e5e7eb; color:var(--kul)}

/* ---------- ariza ---------- */
.chek{max-width:100%; border-radius:10px; border:1px solid var(--chiziq); display:block}
.ariza-kunlar{margin:.4rem 0; font-size:.92rem; color:var(--kul)}

/* ---------- kattaroq ekran ---------- */
@media (min-width:760px){
  .menu-btn{display:none}
  .top{padding:.8rem 1.5rem}
  .nav{display:flex !important; flex-wrap:wrap; padding:0 1rem; gap:.1rem}
  .nav a{padding:.7rem .9rem; border-radius:0}
  .nav a.chiq{border-top:0; margin-top:0; margin-left:auto}
  .raqamlar{grid-template-columns:repeat(4,1fr)}
  h1{font-size:1.6rem}
}

/* qo'shimcha */
details.karta summary{list-style:none}
details.karta summary::-webkit-details-marker{display:none}
details summary:hover{opacity:.8}
table .tugmalar{gap:.25rem}
table .tugma{padding:.3rem .5rem; font-size:.85rem}