/* Ranglar va shriftlar — 1-tizim/brendbuk.md */
:root {
  --sariq:#FFC414; --sariq-och:#FFF3C7; --sariq-ch:#E0A400; --qora:#17140F; --fon:#FBF8F1;
  --yashil:#2E7A39; --qizil:#C8331E; --ikkinchi:#5C5548; --chiziq:#ECE5D6; --oq:#fff;
  --sarlavha:"Unbounded",Arial,sans-serif; --matn:"Manrope",-apple-system,"Segoe UI",Arial,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--matn); background:var(--fon); color:var(--qora); line-height:1.45; font-size:15px; -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
button { font:inherit; cursor:pointer; }
.up { font-family:var(--sarlavha); font-weight:800; text-transform:uppercase; letter-spacing:.2px; }
.muted { color:var(--ikkinchi); }
.small { font-size:13px; }

/* Kirish */
.login { min-height:100vh; display:grid; place-items:center; padding:20px; background:var(--sariq); }
.login form { background:var(--oq); border-radius:20px; padding:28px 24px; width:100%; max-width:360px; display:grid; gap:14px; border-bottom:6px solid var(--sariq-ch); }
.login img { width:120px; height:120px; border-radius:14px; justify-self:center; }
.login h1 { font-size:16px; text-align:center; }

/* Tuzilma */
.layout { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.side { background:var(--qora); color:#fff; padding:18px 12px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:4px; }
.side .brand { font-size:14px; padding:6px 10px 18px; }
.side .brand b { color:var(--sariq); }
.nav a { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:10px; text-decoration:none; font-weight:600; color:#e9e3d6; }
.nav a.on { background:var(--sariq); color:var(--qora); }
.nav a .n { margin-left:auto; background:var(--qizil); color:#fff; border-radius:99px; font-size:11px; padding:1px 7px; }
.side .men { margin-top:auto; font-size:13px; color:#bdb4a2; padding:10px 12px; }
main { padding:24px 28px 100px; max-width:1100px; width:100%; }
.head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.head h1 { font-size:22px; }
.bottom { display:none; }

/* Elementlar */
.btn { border:none; border-radius:12px; padding:11px 16px; font-weight:800; background:var(--sariq); color:var(--qora); border-bottom:3px solid var(--sariq-ch); white-space:nowrap; }
.btn.ghost { background:var(--oq); border:1px solid var(--chiziq); font-weight:600; }
.btn.dark { background:var(--qora); color:#fff; border-bottom-color:#000; }
.btn.sm { padding:7px 11px; font-size:13px; border-bottom-width:2px; }
.btn:disabled { opacity:.5; }
input, select, textarea { width:100%; font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--chiziq); border-radius:10px; background:var(--oq); color:var(--qora); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--sariq); border-color:var(--sariq); }
textarea { min-height:80px; resize:vertical; }
label.f { display:grid; gap:4px; font-size:13px; font-weight:600; color:var(--ikkinchi); }
label.chk { display:flex; gap:8px; align-items:center; font-weight:600; }
label.chk input { width:20px; height:20px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.chip { border:1px solid var(--chiziq); background:var(--oq); border-radius:99px; padding:7px 13px; font-size:13px; font-weight:600; }
.chip.on { background:var(--qora); color:#fff; border-color:var(--qora); }
.search { margin-bottom:12px; }

.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:22px; }
.tile { background:var(--oq); border:1px solid var(--chiziq); border-radius:14px; padding:14px 16px; }
.tile b { display:block; font-size:26px; font-weight:800; line-height:1.2; }
.tile span { font-size:13px; color:var(--ikkinchi); }
.tile.alert { border-color:var(--qizil); }
.tile.alert b { color:var(--qizil); }
.tile.pul { background:var(--sariq-och); }

.sec { margin:22px 0 10px; font-size:13px; }
.list { display:grid; gap:8px; }
.item { background:var(--oq); border:1px solid var(--chiziq); border-radius:14px; padding:12px 14px; display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.item:hover { border-color:#d8cdb6; }
.item .main { flex:1; min-width:0; }
.item .t { font-weight:800; }
.item .meta { font-size:13px; color:var(--ikkinchi); display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
.item .right { text-align:right; font-size:13px; white-space:nowrap; }
.empty { padding:22px; text-align:center; color:var(--ikkinchi); background:var(--oq); border:1px dashed var(--chiziq); border-radius:14px; }

.teg { display:inline-block; font-family:var(--sarlavha); font-weight:700; font-size:10px; padding:3px 8px; border-radius:99px; text-transform:uppercase; vertical-align:middle; }
.teg.yangi { background:var(--sariq-och); }
.teg.syomka, .teg.montaj { background:var(--sariq); }
.teg.chiqdi { background:var(--yashil); color:#fff; }
.teg.yakunlandi { background:#e6e0d3; }
.teg.bekor { background:#e6e0d3; color:var(--ikkinchi); text-decoration:line-through; }
.teg.qizil { background:var(--qizil); color:#fff; }
.teg.yashil { background:var(--yashil); color:#fff; }
.teg.och { background:var(--sariq-och); }

/* Task */
.task { display:flex; gap:12px; align-items:flex-start; background:var(--oq); border:1px solid var(--chiziq); border-radius:14px; padding:12px 14px; }
.task .box { width:24px; height:24px; flex:none; border:2px solid var(--qora); border-radius:7px; background:var(--oq); display:grid; place-items:center; font-weight:800; }
.task.done .box { background:var(--yashil); border-color:var(--yashil); color:#fff; }
.task.done .t { text-decoration:line-through; color:var(--ikkinchi); }
.task .main { flex:1; min-width:0; cursor:pointer; }
.quick { display:flex; gap:8px; margin-bottom:14px; }

/* Grafiklar (bitta seriya — brend sariq-chuqur) */
.card { background:var(--oq); border:1px solid var(--chiziq); border-radius:14px; padding:16px; margin-bottom:14px; }
.card h3 { font-size:15px; margin-bottom:12px; }
.cols { display:flex; align-items:flex-end; gap:2px; height:160px; border-bottom:1px solid var(--chiziq); position:relative; }
.cols .c { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; position:relative; }
.cols .c i { display:block; background:var(--sariq-ch); border-radius:4px 4px 0 0; min-height:2px; }
.cols .c:hover i { background:var(--qora); }
.xax { display:flex; gap:2px; font-size:11px; color:var(--ikkinchi); margin-top:4px; }
.xax span { flex:1; text-align:center; overflow:hidden; }
.bars { display:grid; gap:8px; }
.bar { display:grid; grid-template-columns:130px 1fr 70px; gap:10px; align-items:center; font-size:13px; }
.bar .tr { background:var(--fon); border-radius:4px; height:18px; }
.bar .tr i { display:block; height:100%; background:var(--sariq-ch); border-radius:0 4px 4px 0; }
.bar b { text-align:right; }
.bar .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tip { position:fixed; pointer-events:none; background:var(--qora); color:#fff; font-size:12px; padding:6px 9px; border-radius:8px; z-index:50; display:none; white-space:nowrap; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--chiziq); vertical-align:top; }
th { color:var(--ikkinchi); font-weight:600; }
td.n, th.n { text-align:right; }

/* Dialog */
dialog { margin:auto; border:none; border-radius:18px; width:min(560px, calc(100% - 20px)); max-height:calc(100% - 30px); padding:0; background:var(--fon); }
dialog::backdrop { background:rgba(23,20,15,.55); }
.dh { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; background:var(--oq); border-bottom:1px solid var(--chiziq); position:sticky; top:0; z-index:2; }
.dh h2 { font-size:15px; }
.dh .x { border:none; background:none; font-size:24px; line-height:1; }
.db { padding:16px 18px; display:grid; gap:12px; }
.df { padding:12px 18px 18px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.kv { display:grid; grid-template-columns:120px 1fr; gap:6px 12px; font-size:14px; }
.kv dt { color:var(--ikkinchi); }
.steps { display:flex; gap:6px; flex-wrap:wrap; }
.kod { font-family:ui-monospace,Menlo,monospace; font-size:24px; background:var(--sariq-och); padding:12px; border-radius:10px; text-align:center; letter-spacing:2px; user-select:all; }

#toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:var(--qora); color:#fff; padding:10px 16px; border-radius:12px; font-weight:600; display:none; z-index:100; max-width:90%; }

@media (max-width:820px) {
  .layout { grid-template-columns:1fr; }
  .side { display:none; }
  main { padding:16px 14px 110px; }
  .head h1 { font-size:18px; }
  .bottom { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; bottom:0; left:0; right:0; background:var(--qora); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); z-index:20; }
  .bottom a { color:#d9d2c2; text-decoration:none; font-size:11px; font-weight:600; display:grid; justify-items:center; gap:2px; padding:6px 0; border-radius:10px; position:relative; }
  .bottom a .i { font-size:19px; }
  .bottom a.on { color:var(--qora); background:var(--sariq); }
  .bottom a .n { position:absolute; top:2px; right:18%; background:var(--qizil); color:#fff; border-radius:99px; font-size:10px; padding:0 5px; }
  .grid2 { grid-template-columns:1fr; }
  .bar { grid-template-columns:100px 1fr 56px; }
  .kv { grid-template-columns:100px 1fr; }
  .hide-m { display:none; }
}

/* Sayt admin qo'shimchalari */
.thumb { width:72px; height:56px; flex:none; border-radius:10px; background:#e9e2d2 center/cover no-repeat; }
.item.sold .thumb { filter:grayscale(.8); opacity:.7; }
.item.yashirin { opacity:.6; }
.acts { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.teg.top { background:var(--qora); color:var(--sariq); }
.teg.sotildi { background:var(--yashil); color:#fff; }
.teg.yashirin { background:#e6e0d3; color:var(--ikkinchi); }
.teg.qolda { background:var(--sariq-och); }
.preview-img { width:100%; aspect-ratio:4/3; border-radius:12px; background:#e9e2d2 center/cover no-repeat; }
.bottom.b4 { grid-template-columns:repeat(4,1fr); }
.warn { background:var(--sariq-och); border-radius:10px; padding:10px 12px; font-size:13px; }