/* Hadya Print ERP — Theme */
body{background:#e8ecf7;}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 20% 10%,rgba(108,92,231,.12) 0%,transparent 70%),radial-gradient(ellipse 50% 40% at 80% 90%,rgba(162,155,254,.1) 0%,transparent 70%);}
header.topbar{background:rgba(255,255,255,.72)!important;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.55)!important;box-shadow:0 1px 0 rgba(16,24,40,.05),0 4px 20px rgba(16,24,40,.06)!important;}
.topbar-btn{width:38px!important;height:38px!important;border-radius:13px!important;background:rgba(108,92,231,.08)!important;border:1px solid rgba(108,92,231,.15)!important;color:var(--ink)!important;font-size:18px!important;transition:all .2s;overflow:visible!important;}
.topbar-btn:active{transform:scale(.92);}
.topbar-btn .badge{position:absolute;top:-5px;right:-5px;border:2px solid #fff!important;}
.order-card{background:rgba(255,255,255,.72)!important;backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);border:1px solid rgba(255,255,255,.6)!important;border-radius:20px!important;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.08),inset 0 1px 0 rgba(255,255,255,.7)!important;transition:all .25s cubic-bezier(.34,1.2,.64,1);position:relative!important;overflow:hidden!important;}
.order-card::before{content:''!important;display:block!important;position:absolute!important;top:0!important;left:0!important;right:0!important;height:3px!important;}
.order-card.status-active::before{background:var(--accent)!important;}
.order-card.status-done::before{background:#00b894!important;}
.order-card.status-urgent::before{background:#ff6b6b!important;animation:pulse-red 1.5s ease-in-out infinite!important;}
.order-card.status-hazard::before{background:#f59e0b!important;animation:pulse-amber 1.5s ease-in-out infinite!important;}
@keyframes pulse-amber{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes pulse-red{0%,100%{opacity:1}50%{opacity:.3}}
.order-card:active{transform:scale(.97) translateY(2px)!important;}
.stat{background:rgba(255,255,255,.68)!important;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.6)!important;border-radius:18px!important;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.08),inset 0 1px 0 rgba(255,255,255,.7)!important;}
.sec{background:rgba(255,255,255,.70)!important;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:20px!important;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.08),inset 0 1px 0 rgba(255,255,255,.7)!important;}
.sec.signed{border-color:rgba(18,183,106,.3)!important;}
.sec.current{border-color:rgba(108,92,231,.3)!important;}
.sec-num{border-radius:11px!important;border:none!important;box-shadow:0 4px 10px rgba(0,0,0,.1);}
.sec.signed .sec-num{background:rgba(18,183,106,.12)!important;color:#00b894!important;}
.sec.current .sec-num{background:linear-gradient(145deg,#8b7fff,#5a4fcf)!important;color:#fff!important;box-shadow:0 6px 16px rgba(108,92,231,.4)!important;}
.sec.locked .sec-num{background:rgba(232,236,247,.8)!important;color:var(--hint)!important;}
.sign-btn{border-radius:14px!important;background:linear-gradient(145deg,#8b7fff,#5a4fcf)!important;box-shadow:0 6px 18px rgba(108,92,231,.4)!important;border:none!important;font-weight:700;transition:all .2s;}
.sign-btn.final{background:linear-gradient(145deg,#00b894,#00cec9)!important;}
.sign-btn:disabled{background:rgba(232,236,247,.8)!important;box-shadow:none!important;color:var(--hint)!important;}
.input,.textarea,.select{background:rgba(232,236,247,.6)!important;border:1.5px solid rgba(108,92,231,.1)!important;border-radius:14px!important;}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(108,92,231,.08)!important;}
.user-card,.presence-card{background:rgba(255,255,255,.70)!important;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.6)!important;border-radius:20px!important;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.08),inset 0 1px 0 rgba(255,255,255,.7)!important;}
.fin-card,.chart-card,.kpi{background:rgba(255,255,255,.70)!important;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.6)!important;border-radius:20px!important;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.08),inset 0 1px 0 rgba(255,255,255,.7)!important;}
.cal-day{border-radius:12px!important;background:rgba(255,255,255,.7)!important;border:1px solid rgba(255,255,255,.6)!important;}
.cal-day.today{background:linear-gradient(145deg,#8b7fff,#5a4fcf)!important;box-shadow:0 6px 16px rgba(108,92,231,.35)!important;border-color:transparent!important;}
.cal-day.today .cal-day-num{color:#fff!important;}
.cal-nav-btn{border-radius:12px!important;background:rgba(255,255,255,.8)!important;border:1px solid rgba(255,255,255,.6)!important;}
.login-screen{background:linear-gradient(160deg,#e8ecf7,#dde1f0)!important;}
.login-card{background:rgba(255,255,255,.68)!important;backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,.7)!important;border-radius:28px!important;box-shadow:0 2px 6px rgba(16,24,40,.06),0 24px 64px rgba(16,24,40,.14),inset 0 1px 0 rgba(255,255,255,.85)!important;}
.login-btn{border-radius:16px!important;box-shadow:0 8px 24px rgba(108,92,231,.45)!important;font-weight:700;}
.tabs{position:fixed!important;bottom:0!important;top:auto!important;left:0!important;right:0!important;z-index:999!important;background:#fff!important;border-top:1px solid #eee!important;padding:6px 0 calc(6px + env(safe-area-inset-bottom)) 0!important;display:flex!important;justify-content:space-between!important;box-shadow:0 -2px 16px rgba(0,0,0,.06)!important;gap:6px!important;padding-left:10px!important;padding-right:10px!important;}
.tab{flex:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:4px 2px!important;border:none!important;background:rgba(108,92,231,.06)!important;color:var(--ink)!important;font-size:10px!important;font-weight:600!important;cursor:pointer!important;border-radius:14px!important;min-height:52px!important;transition:all .25s cubic-bezier(.34,1.56,.64,1)!important;}
.tab::before{display:none;}
/* tab icons replaced with HTML */
.tab.active{background:linear-gradient(145deg,#8b7fff,#5a4fcf)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 4px 12px rgba(108,92,231,.35)!important;transform:scale(1.08) translateY(-3px)!important;}
.tab.active:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");}
.tab.active:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");}
.tab.active:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");}
.tab.active:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6'/%3E%3C/svg%3E");}
.tab.active:nth-child(5)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");}
#main,#adminContent{padding-bottom:80px!important;}
.fab{bottom:80px!important;}
.modal{border-radius:20px!important;max-height:80vh!important;}
.modal-backdrop.open{align-items:center!important;}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,.4)}50%{box-shadow:0 0 0 6px rgba(255,107,107,0)}}
#main{animation:pageIn .25s cubic-bezier(.34,1.2,.64,1)!important;}
.prog-seg.p-done{background:#00b894!important;}
.prog-seg.p-cur{background:#f59e0b!important;animation:pulse-seg 1.5s ease-in-out infinite!important;}
.prog-seg.p-urg{background:#ff6b6b!important;animation:pulse-seg-red 1.2s ease-in-out infinite!important;}
.prog-seg.p-wait{background:var(--rule-2)!important;}
@keyframes pulse-seg{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes pulse-seg-red{0%,100%{opacity:1}50%{opacity:.3}}
.sticky-save-btn{position:fixed;bottom:80px;left:0;right:0;padding:10px 14px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-top:1px solid var(--rule);z-index:50;}
.sticky-save-btn button{width:100%;background:var(--grad);color:#fff;border:none;padding:13px;border-radius:var(--rl);font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;}
.order-card::before{z-index:1!important;}
.order-card{background:rgba(255,255,255,.92)!important;}
[data-counter]{animation:none!important;}

/* ── DARK MODE ── */
body.dark-mode {
  --ink: #e8eaf6;
  --ink-2: #b0b8d8;
  --paper: #0f1117;
  --paper-2: #1a1d2e;
  --white: #1a1d2e;
  --rule: #2a2d42;
  --rule-2: #222538;
  --hint: #6b7099;
  --blue-soft: #1a2040;
  --amber-soft: #2a1f00;
  --green-soft: #0a2218;
  --red-soft: #2a0f0f;
  --purple-soft: #1a1535;
}
body.dark-mode { background: #0f1117 !important; color: #e8eaf6 !important; }
body.dark-mode header.topbar { background: rgba(26,29,46,.95) !important; border-color: #2a2d42 !important; }
body.dark-mode .order-card { background: rgba(26,29,46,.95) !important; border-color: #2a2d42 !important; }
body.dark-mode .sec { background: rgba(26,29,46,.95) !important; }
body.dark-mode .input, body.dark-mode .textarea, body.dark-mode .select { background: #1a1d2e !important; border-color: #2a2d42 !important; color: #e8eaf6 !important; }
body.dark-mode .input:focus, body.dark-mode .textarea:focus, body.dark-mode .select:focus { background: #222538 !important; }
body.dark-mode .tabs { background: #1a1d2e !important; border-color: #2a2d42 !important; }
body.dark-mode .tab { background: rgba(108,92,231,.1) !important; color: #b0b8d8 !important; }
body.dark-mode .modal { background: #1a1d2e !important; }
body.dark-mode .stat, body.dark-mode .kpi, body.dark-mode .fin-card, body.dark-mode .chart-card { background: rgba(26,29,46,.95) !important; border-color: #2a2d42 !important; }
body.dark-mode .user-card, body.dark-mode .presence-card { background: rgba(26,29,46,.95) !important; border-color: #2a2d42 !important; }
body.dark-mode .signoff { background: #1a1d2e !important; border-color: #2a2d42 !important; }
body.dark-mode .signoff.can-sign { background: #2a1f00 !important; }
body.dark-mode .signoff.signed-box { background: #0a2218 !important; }
body.dark-mode .signoff.missing { background: #2a0f0f !important; }
body.dark-mode .login-screen { background: linear-gradient(160deg,#0f1117,#1a1d2e) !important; }
body.dark-mode .login-form { background: #1a1d2e !important; border-color: #2a2d42 !important; }
body.dark-mode .cal-day { background: rgba(26,29,46,.8) !important; border-color: #2a2d42 !important; }
body.dark-mode .notif-item { border-color: #2a2d42 !important; }
body.dark-mode .chip { background: #1a1d2e !important; border-color: #2a2d42 !important; color: #b0b8d8 !important; }
body.dark-mode .qc-item { background: #1a1d2e !important; border-color: #2a2d42 !important; }
body.dark-mode .sel-product { background: #1a1d2e !important; border-color: #2a2d42 !important; }
body.dark-mode .fg-label { border-color: #2a2d42 !important; }
body.dark-mode body::before { opacity: 0.3; }

/* ── ANIMATSIYALAR ── */

/* Sahifa o'tish */
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pageSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Zakaz karta */
@keyframes cardAppear {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.order-card {
  animation: cardAppear 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
.order-card:nth-child(1) { animation-delay: 0.03s; }
.order-card:nth-child(2) { animation-delay: 0.06s; }
.order-card:nth-child(3) { animation-delay: 0.09s; }
.order-card:nth-child(4) { animation-delay: 0.12s; }
.order-card:nth-child(5) { animation-delay: 0.15s; }
.order-card:nth-child(6) { animation-delay: 0.18s; }
.order-card:nth-child(7) { animation-delay: 0.21s; }
.order-card:nth-child(8) { animation-delay: 0.24s; }

/* Skeleton loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--rule-2) 25%, var(--rule) 50%, var(--rule-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* Tab o'tish */
@keyframes tabPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15) translateY(-4px); }
  100% { transform: scale(1.08) translateY(-3px); }
}
.tab.active { animation: tabPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important; }

/* Tugma bosish */
@keyframes btnPress {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.sign-btn:not(:disabled):active { animation: btnPress 0.15s ease !important; }

/* Toast */
@keyframes toastPop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.9); }
  70% { transform: translate(-50%, -2px) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.toast { animation: toastPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }

/* Stat kartalar */
@keyframes statAppear {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.stat { animation: statAppear 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both; }
.stat:nth-child(1) { animation-delay: 0.05s; }
.stat:nth-child(2) { animation-delay: 0.1s; }
.stat:nth-child(3) { animation-delay: 0.15s; }

/* Section ochilish */
.sec-body { animation: expand 0.25s cubic-bezier(0.34, 1.2, 0.64, 1) !important; }

/* Modal */
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal { animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) !important; }

/* Dark mode toggle */
@keyframes darkToggle {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.3); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ── IMZOLASH ANIMATSIYA ── */
@keyframes signSuccess {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(18,183,106,0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(18,183,106,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(18,183,106,0); }
}
.signoff.signed-box {
  animation: signSuccess 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ripple effekt */
.ripple-host { position: relative; overflow: hidden; }
@keyframes rippleAnim {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}
.ripple-wave {
  position: absolute;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  pointer-events: none;
  animation: rippleAnim 0.6s ease-out forwards;
}

/* Dark mode ikonka */
@keyframes moonSpin {
  0% { transform: rotate(-30deg) scale(0.8); opacity: 0; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}
.topbar-btn .mode-icon {
  display: inline-block;
  animation: moonSpin 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Pull to refresh */
@keyframes ptrSpin {
  to { transform: rotate(360deg); }
}
#ptr-indicator .ptr-icon {
  display: inline-block;
  animation: ptrSpin 1s linear infinite;
}

/* Swipe aksiya */
@keyframes swipeRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(8px); background: var(--green-soft); }
}
@keyframes swipeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-8px); background: var(--red-soft); }
}
.order-card.swipe-right { animation: swipeRight 0.2s forwards; }
.order-card.swipe-left { animation: swipeLeft 0.2s forwards; }

/* Konfetti yangilangan */
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.confetti-piece {
  position: fixed;
  top: 0;
  width: 10px;
  height: 10px;
  animation: confettiFall 3s ease-in forwards;
  z-index: 9999;
  border-radius: 2px;
}

/* ── DETAIL ANIMATSIYA ── */
@keyframes secAppear {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.sections .sec {
  animation: secAppear 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
.sections .sec:nth-child(1) { animation-delay: 0.05s; }
.sections .sec:nth-child(2) { animation-delay: 0.1s; }
.sections .sec:nth-child(3) { animation-delay: 0.15s; }
.sections .sec:nth-child(4) { animation-delay: 0.2s; }
.sections .sec:nth-child(5) { animation-delay: 0.25s; }
.sections .sec:nth-child(6) { animation-delay: 0.3s; }
.sections .sec:nth-child(7) { animation-delay: 0.35s; }

/* KPI kartalar */
@keyframes kpiAppear {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.kpi { animation: kpiAppear 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both; }
.dash-row:nth-child(1) .kpi:nth-child(1) { animation-delay: 0.05s; }
.dash-row:nth-child(1) .kpi:nth-child(2) { animation-delay: 0.1s; }
.dash-row:nth-child(2) .kpi:nth-child(1) { animation-delay: 0.15s; }
.dash-row:nth-child(2) .kpi:nth-child(2) { animation-delay: 0.2s; }

/* Progress bar to'lish */
@keyframes progressFill {
  from { width: 0; }
}
.bar-fill { animation: progressFill 0.8s cubic-bezier(0.34, 1.2, 0.64, 1) both; }

/* ── FAB ANIMATSIYA ── */
@keyframes fabAppear {
  from { opacity: 0; transform: scale(0) rotate(-180deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
.fab {
  animation: fabAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both !important;
}
.fab:active {
  transform: scale(0.9) rotate(45deg) !important;
  transition: transform 0.15s !important;
}

/* ── NOTIFICATION BADGE ── */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
.badge {
  animation: badgePulse 2s ease-in-out infinite;
}

/* ── INPUT FOCUS ── */
.input, .textarea, .select {
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.1s !important;
}
.input:focus, .textarea:focus, .select:focus {
  transform: translateY(-1px) !important;
}

/* ── CHECKBOX ANIMATSIYA ── */
@keyframes checkPop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.chk:has(input:checked) {
  animation: checkPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── SIGN BTN HOVER ── */
.sign-btn:not(:disabled) {
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.sign-btn:not(:disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(108,92,231,0.5) !important;
}

/* ── MISSING ITEM ── */
@keyframes missingShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.missing-item {
  animation: missingShake 0.4s ease 0.1s both;
}

/* ── PAGE TRANSITION ── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── BO'LIM OCHILISHI ── */
.sec-body {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.3s ease !important;
}
.sec.open .sec-body {
  animation: expand 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}

/* ── PROGRESS BAR TO'LISH ── */
@keyframes progressGrow {
  from { width: 0 !important; }
}
.bar-fill {
  animation: progressGrow 1s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}
.dp-seg {
  animation: progressGrow 0.8s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}
.dp-seg:nth-child(1) { animation-delay: 0.05s !important; }
.dp-seg:nth-child(2) { animation-delay: 0.1s !important; }
.dp-seg:nth-child(3) { animation-delay: 0.15s !important; }
.dp-seg:nth-child(4) { animation-delay: 0.2s !important; }
.dp-seg:nth-child(5) { animation-delay: 0.25s !important; }
.dp-seg:nth-child(6) { animation-delay: 0.3s !important; }
.dp-seg:nth-child(7) { animation-delay: 0.35s !important; }
.prog-seg {
  animation: progressGrow 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}
.prog-seg:nth-child(1) { animation-delay: 0.02s !important; }
.prog-seg:nth-child(2) { animation-delay: 0.04s !important; }
.prog-seg:nth-child(3) { animation-delay: 0.06s !important; }
.prog-seg:nth-child(4) { animation-delay: 0.08s !important; }
.prog-seg:nth-child(5) { animation-delay: 0.1s !important; }
.prog-seg:nth-child(6) { animation-delay: 0.12s !important; }
.prog-seg:nth-child(7) { animation-delay: 0.14s !important; }

/* ── YANGI ZAKAZ ── */
@keyframes newOrderAppear {
  from { opacity: 0; transform: translateY(-30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.order-card.new-order {
  animation: newOrderAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  border-color: var(--accent) !important;
}

/* ── NOTIFICATION SHAKE ── */
@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(15deg); }
  60% { transform: rotate(-10deg); }
  80% { transform: rotate(10deg); }
}
.topbar-btn.has-notif {
  animation: bellShake 0.5s ease 0.5s both;
}

/* ── SKELETON LOADING ── */
@keyframes shimmerMove {
  0% { background-position: -300% 0; }
  100% { background-position: 300% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--rule-2) 25%, var(--rule) 50%, var(--rule-2) 75%) !important;
  background-size: 300% 100% !important;
  animation: shimmerMove 1.5s ease-in-out infinite !important;
}

/* ── TUGMA PRESS ── */
.btn-p:active, .btn-d:active, .login-btn:active {
  transform: scale(0.96) !important;
  transition: transform 0.1s !important;
}
.btn-s:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s !important;
}

/* ── KARTA HOVER ── */
.order-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--sh2),inset 0 1px 0 rgba(255,255,255,.75) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.kpi:hover, .stat:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: var(--sh2),inset 0 1px 0 rgba(255,255,255,.75) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

/* ── RASM YUKLASH FADE IN ── */
@keyframes imgFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.photo-slot img, .photo-slot.has-img img {
  transition: opacity 0.3s ease !important;
}

/* ── QC MEZON COLOR TRANSITION ── */
.qc-btn {
  transition: background 0.2s, color 0.2s, transform 0.15s !important;
}
.qc-btn:active {
  transform: scale(0.95) !important;
}
.qc-btn.ok.active {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
  transition: all 0.2s ease !important;
}
.qc-btn.fail.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  transition: all 0.2s ease !important;
}

/* ── CHIP BOUNCE ── */
.chip {
  transition: transform 0.15s, background 0.2s, color 0.2s !important;
}
.chip:active {
  transform: scale(0.93) !important;
}
.chip.active {
  animation: chipBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes chipBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ── DONUT CHART ── */
@keyframes donutDraw {
  from { stroke-dashoffset: 999; }
  to { stroke-dashoffset: 0; }
}




/* ── SCROLL REVEAL ── */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.chart-card, .fin-card, .user-card, .presence-card {
  opacity: 0;
  animation: revealUp 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.chart-card:nth-child(1) { animation-delay: 0.05s; }
.chart-card:nth-child(2) { animation-delay: 0.1s; }
.chart-card:nth-child(3) { animation-delay: 0.15s; }
.chart-card:nth-child(4) { animation-delay: 0.2s; }
.chart-card:nth-child(5) { animation-delay: 0.25s; }
.fin-card:nth-child(1) { animation-delay: 0.05s; }
.fin-card:nth-child(2) { animation-delay: 0.1s; }
.fin-card:nth-child(3) { animation-delay: 0.15s; }
.fin-card:nth-child(4) { animation-delay: 0.2s; }

/* ── ZAKAZ PROGRESS SEGMENTLAR ── */
@keyframes segFill {
  from { opacity: 0; transform: scaleX(0); transform-origin: left; }
  to { opacity: 1; transform: scaleX(1); transform-origin: left; }
}
.prog-seg {
  animation: segFill 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}
.prog-seg:nth-child(1) { animation-delay: 0.05s !important; }
.prog-seg:nth-child(2) { animation-delay: 0.1s !important; }
.prog-seg:nth-child(3) { animation-delay: 0.15s !important; }
.prog-seg:nth-child(4) { animation-delay: 0.2s !important; }
.prog-seg:nth-child(5) { animation-delay: 0.25s !important; }
.prog-seg:nth-child(6) { animation-delay: 0.3s !important; }
.prog-seg:nth-child(7) { animation-delay: 0.35s !important; }

/* Detail progress */
.dp-seg {
  animation: segFill 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
}
.dp-seg:nth-child(1) { animation-delay: 0.05s !important; }
.dp-seg:nth-child(2) { animation-delay: 0.1s !important; }
.dp-seg:nth-child(3) { animation-delay: 0.15s !important; }
.dp-seg:nth-child(4) { animation-delay: 0.2s !important; }
.dp-seg:nth-child(5) { animation-delay: 0.25s !important; }
.dp-seg:nth-child(6) { animation-delay: 0.3s !important; }
.dp-seg:nth-child(7) { animation-delay: 0.35s !important; }

/* ── NUMBER ODOMETER ── */
@keyframes digitRoll {
  0% { transform: translateY(-100%); opacity: 0; }
  60% { transform: translateY(8%); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes digitRollOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.odometer {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.odometer-digit {
  display: inline-block;
  animation: digitRoll 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.odometer-digit:nth-child(1) { animation-delay: 0.0s; }
.odometer-digit:nth-child(2) { animation-delay: 0.05s; }
.odometer-digit:nth-child(3) { animation-delay: 0.1s; }
.odometer-digit:nth-child(4) { animation-delay: 0.15s; }
.odometer-digit:nth-child(5) { animation-delay: 0.2s; }
.odometer-digit:nth-child(6) { animation-delay: 0.25s; }

/* ── MENU ITEMS ── */
.menu-item {
  transition: background 0.2s, transform 0.15s !important;
}
.menu-item:active {
  background: var(--paper-2) !important;
  transform: scale(0.98) !important;
}

/* ── FOCUS RING ── */
.input:focus, .textarea:focus, .select:focus {
  box-shadow: 0 0 0 3px rgba(108,92,231,0.15) !important;
}

/* ── LOADING SPINNER ── */
@keyframes spinnerRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinnerRing 0.8s linear infinite;
  margin: 20px auto;
}

/* ── TOAST YANGILANGAN ── */
@keyframes toastSuccess {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.85); }
  60% { transform: translate(-50%, -4px) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes toastHide {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(0.9); }
}
.toast {
  animation: toastSuccess 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── BACK BUTTON ── */
.back-btn {
  transition: transform 0.2s, background 0.2s !important;
}
.back-btn:active {
  transform: translateX(-4px) scale(0.97) !important;
}

/* ── ORDER CARD ACTIVE ── */
.order-card:active {
  transform: scale(0.98) translateY(1px) !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.08),inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* ── APPLE EMOJI SHRIFT ── */
.emoji, [data-emoji] {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

/* ── MENU ICON SVG ANIMATSIYA ── */
.menu-icon svg circle {
  transition: r 0.3s ease;
}
.menu-icon:hover svg circle {
  r: 11;
}
.menu-icon svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.menu-item:hover .menu-icon svg {
  transform: scale(1.2) rotate(10deg);
}
.menu-item:active .menu-icon svg {
  transform: scale(0.9);
}

/* ── TAB AKTIV RANG ── */
.tab.active svg path,
.tab.active svg line,
.tab.active svg polyline,
.tab.active svg rect,
.tab.active svg circle {
  stroke: #fff !important;
  fill-opacity: 0.3 !important;
}
.tab svg {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tab.active svg {
  transform: scale(1.1) translateY(-2px);
  filter: drop-shadow(0 2px 4px rgba(255,255,255,0.3));
}

/* ── TAB IKONKA ANIMATSIYA ── */
@keyframes homeWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
@keyframes docBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes calPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@keyframes moneyRotate {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes menuSlide {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.8); }
}

.tab:nth-child(1).active svg { animation: homeWiggle 0.6s ease; }
.tab:nth-child(2).active svg { animation: docBounce 0.5s ease; }
.tab:nth-child(3).active svg { animation: calPulse 0.5s ease; }
.tab:nth-child(4).active svg { animation: moneyRotate 0.8s ease; }
.tab:nth-child(5).active svg { animation: menuSlide 0.5s ease; }

.tab:not(.active):hover svg {
  animation: homeWiggle 0.4s ease;
}

/* ── SEC-NUM IKONKA ── */
.sec-num {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
.sec-num svg {
  width: 18px !important;
  height: 18px !important;
}
.sec.signed .sec-num svg polyline {
  stroke: #fff !important;
}



/* ── SEC-NUM IKONKA ANIMATSIYA ── */
@keyframes secIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@keyframes secIconBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-4px) rotate(-5deg); }
  60% { transform: translateY(-2px) rotate(3deg); }
}
@keyframes secIconSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sec-head:hover .sec-num {
  animation: secIconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.sec.signed .sec-num {
  animation: secIconPulse 2s ease-in-out infinite !important;
}
.sec.current .sec-num {
  animation: secIconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}


/* ═══════════════════════════════════════════════════════════════
   QORONG'I REJIM — to'liq palitra (10-avgust 2026)
   Ilgari faqat ~20 ta eski komponentga nuqtali qoida bor edi; yangi
   .dash2 / .dz-* uslublari umuman qamralmagan edi. Asosiy yechim —
   CSS o'zgaruvchilarini almashtirish: var(--...) ishlatadigan hamma
   narsa avtomat moslashadi. Ostidagi ro'yxat esa qattiq yozilgan
   oq fonlar uchun (index.html da 60 ta selektor topilgan).
   ═══════════════════════════════════════════════════════════════ */
body.dark-mode{
  --paper:#0E1017;      --paper-2:#171A26;
  --white:#1A1D2B;
  --ink:#E7EAF3;        --ink-2:#AEB6CE;      --hint:#7B85A1;
  --rule:rgba(255,255,255,.11);  --rule-2:rgba(255,255,255,.06);
  --accent:#8B7FFF;     --purple:#8B7FFF;     --purple-soft:#251F47;
  --grad:linear-gradient(135deg,#7B6FF0,#9B8CFF);
  --green:#2ED08A;      --green-soft:#0D2A1E;
  --amber:#FDB022;      --amber-soft:#2C2109;
  --red:#FF6B5E;        --red-soft:#2E1614;
  --blue:#6FA8D6;       --blue-soft:#12212D;
  --sh1:0 1px 2px rgba(0,0,0,.40);
  --sh2:0 8px 22px rgba(0,0,0,.50),0 2px 6px rgba(0,0,0,.35);
  background:var(--paper)!important;color:var(--ink)!important;
}

/* ── Yuzalar: kartochka, panel, bo'lim ── */
body.dark-mode .stat, body.dark-mode .order-card, body.dark-mode .sec,
body.dark-mode .kpi, body.dark-mode .chart-card, body.dark-mode .user-card,
body.dark-mode .porder-card, body.dark-mode .fin-card, body.dark-mode .presence-card,
body.dark-mode .dash2 .card, body.dark-mode .orders .item, body.dark-mode .abox,
body.dark-mode .dz-card, body.dark-mode .dz-main .sec,
body.dark-mode .login-form, body.dark-mode .product-suggestions,
body.dark-mode .ac-list, body.dark-mode .chat-input-wrap, body.dark-mode .fin-tbl tr,
body.dark-mode .dz-main .sec .sec-head, body.dark-mode .dz-main .fg,
body.dark-mode .fin-card-big, body.dark-mode .modal{
  background:var(--white)!important;
  border-color:var(--rule)!important;
  color:var(--ink);
}

/* ── Shisha yuzalar: topbar, yon menyu, hero, modal foni, pastki panel ── */
body.dark-mode header.topbar, body.dark-mode .shell .main-wrap>header.topbar{
  background:rgba(20,23,34,.78)!important;border-color:var(--rule)!important;
}
body.dark-mode .sidebar{background:rgba(20,23,34,.80)!important;border-color:var(--rule)!important}
body.dark-mode .hero{background:rgba(24,27,39,.70)!important;border-color:var(--rule)!important}
body.dark-mode .tabs{background:rgba(20,23,34,.85)!important;border-color:var(--rule)!important}
body.dark-mode .modal-backdrop{background:rgba(0,0,0,.55)!important}

/* ── Boshqaruv elementlari: tugma, chip, maydon ── */
body.dark-mode .list-search, body.dark-mode .chip, body.dark-mode .price-btn,
body.dark-mode .qc-btn, body.dark-mode .sms-digit, body.dark-mode .btn-s,
body.dark-mode .btn, body.dark-mode .btn-d, body.dark-mode .btn-icon,
body.dark-mode .cal-nav-btn, body.dark-mode .topbar-icon-btn, body.dark-mode .topbar-btn,
body.dark-mode .topbar-date, body.dark-mode .dz-chip, body.dark-mode .dz-chip.more,
body.dark-mode .filter-chips .chip, body.dark-mode .zbtn, body.dark-mode .fin-period-tab,
body.dark-mode .demo-chip, body.dark-mode .chat-input, body.dark-mode .dz-main .chk-dot,
body.dark-mode .login-btn.sec, body.dark-mode .topbar-right>button,
body.dark-mode .topbar-right>div>button, body.dark-mode .cal-day.today,
body.dark-mode .dz-main .sel-product .input, body.dark-mode .dz-main .sel-product .textarea,
body.dark-mode .dz-main .role-lock, body.dark-mode .dz-main .lock-msg,
body.dark-mode .chat-msg.theirs .chat-bubble{
  background:var(--paper-2)!important;
  border-color:var(--rule)!important;
  color:var(--ink)!important;
}

/* ── Fokus holati: bir oz yorug'roq ── */
body.dark-mode .input:focus, body.dark-mode .textarea:focus, body.dark-mode .select:focus,
body.dark-mode .list-search:focus, body.dark-mode .lf input:focus,
body.dark-mode .dz-main input:focus, body.dark-mode .dz-main select:focus,
body.dark-mode .dz-main textarea:focus{
  background:#232739!important;border-color:var(--accent)!important;color:var(--ink)!important;
}

/* ── Faol holatlar aksentda qoladi ── */
body.dark-mode .chip.active, body.dark-mode .chip.on, body.dark-mode .dz-chip.on,
body.dark-mode .filter-chips .chip.active, body.dark-mode .zbtn.pri,
body.dark-mode .fin-period-tab.active, body.dark-mode .price-btn.active{
  background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;
}
body.dark-mode .sidebar-item.active{background:var(--purple-soft)!important;color:var(--accent)!important}
body.dark-mode .sidebar-item.active .si-badge{background:var(--accent)!important;color:#fff!important}

/* ── Mayda tafsilotlar ── */
body.dark-mode .fg-label, body.dark-mode .field-label, body.dark-mode .sec-sub,
body.dark-mode .abox-t, body.dark-mode .pg-s{color:var(--hint)!important}
body.dark-mode ::placeholder{color:#6B7490!important}
body.dark-mode .dz-tbl td, body.dark-mode .dash2 td{border-top-color:var(--rule-2)!important;color:var(--ink)!important}
body.dark-mode .dz-tbl th, body.dark-mode .dash2 th{color:var(--hint)!important}
body.dark-mode .dz-tbl tbody tr.clickable:hover{background:var(--paper-2)!important}
body.dark-mode .modal-close{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.22)!important}
body.dark-mode img.emoji{filter:none}
body.dark-mode .skeleton{background:linear-gradient(90deg,#1A1D2B,#232739,#1A1D2B)!important}
body.dark-mode{color-scheme:dark}


/* ═══ QORONG'I: sahifa ichidan kiritiladigan uslublar ═══
   Moliya va Kanban o'z <style> bloklarini app.js dan sahifaga qo'shadi,
   shuning uchun ular theme.css dan KEYIN turadi. Selektor xoslligi
   yuqoriroq bo'lgani uchun (body.dark-mode qo'shilgani) bu qoidalar
   tartibdan qat'i nazar ustun keladi. */

/* ── Moliya ── */
body.dark-mode .fin-page{background:var(--paper)!important}
body.dark-mode .fin-card2,
body.dark-mode .fin-card-big{
  background:var(--white)!important;
  border-color:var(--rule)!important;
  box-shadow:var(--sh1)!important;
}
body.dark-mode .fin-card2:hover,
body.dark-mode .fin-card-big:hover{box-shadow:var(--sh2)!important}
body.dark-mode .fin-mlabel,
body.dark-mode .fin-msub,
body.dark-mode .fin-sec-title{color:var(--hint)!important}
body.dark-mode .fin-row{border-bottom-color:var(--rule-2)!important}
body.dark-mode .fin-btn-show{background:var(--paper-2)!important;color:var(--accent)!important}
body.dark-mode .fin-hero-split{border-top-color:rgba(255,255,255,.16)!important}
body.dark-mode .fin-trend-down{color:#FF8A80!important;background:rgba(255,107,94,.14)!important}
body.dark-mode .fin-mico,
body.dark-mode .fin-row-ico{background:var(--paper-2)!important}

/* ── Kanban (6-ishda to'liq qayta dizayn qilinadi, hozircha o'qilsin) ── */
body.dark-mode .kbwrap{
  --kbcard:#1A1D2B;
  --kbrule:rgba(255,255,255,.11);
  --kbrule2:rgba(255,255,255,.06);
  --kbink:#E7EAF3;
  --kbhint:#7B85A1;
}
body.dark-mode .kbwrap .kbstats,
body.dark-mode .kbwrap .kbstat-inline,
body.dark-mode .kbwrap .card,
body.dark-mode .kbwrap .col-head{
  background:var(--kbcard)!important;
  border-color:var(--kbrule)!important;
  color:var(--kbink)!important;
}
body.dark-mode .kbwrap .col-head::after{background:var(--paper)!important}
body.dark-mode .kbwrap .kbsc span{background:rgba(255,255,255,.14)!important}
body.dark-mode .kbwrap .col-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)!important}
body.dark-mode .kbwrap .kbnew-btn{background:var(--paper-2)!important;color:var(--ink)!important}
body.dark-mode .kbwrap .kbnew-btn:hover{background:#232739!important}
body.dark-mode .kbwrap .empty{border-color:var(--rule)!important;color:var(--hint)!important}
body.dark-mode .kbwrap .cb.srochna{background:rgba(255,107,94,.16)!important}
body.dark-mode .kbwrap .cb.late{background:rgba(253,176,34,.16)!important;color:#FDB022!important}
body.dark-mode .kbwrap .cb.brak{background:rgba(255,107,158,.16)!important;color:#FF7BA8!important}
body.dark-mode .kbwrap .cb.jam{background:rgba(139,127,255,.18)!important;color:#B8AEFF!important}
body.dark-mode .kbwrap .badge.srochna{background:rgba(255,107,94,.16)!important}
body.dark-mode .kbwrap .badge.clone{background:rgba(46,208,138,.16)!important;color:#2ED08A!important}
body.dark-mode .kbwrap .stay{background:var(--paper-2)!important;color:var(--hint)!important}


/* ═══ KO'Z HIMOYASI ═══
   Ekran ustiga issiq rangli yupqa qatlam. Tartibga ta'sir qilmaydi
   (pointer-events:none), qorong'i rejim bilan birga ishlaydi.
   Ikki daraja: yumshoq va kuchli. */
body.eye-1::after,
body.eye-2::after{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:2147483000;
  mix-blend-mode:multiply;
}
body.eye-1::after{background:#FFE7C2}
body.eye-2::after{background:#FFD199}
/* Qorong'i rejimda ko'paytirish o'rniga yumshoq issiq yorug'lik */
body.dark-mode.eye-1::after{background:rgba(255,176,90,.10);mix-blend-mode:overlay}
body.dark-mode.eye-2::after{background:rgba(255,160,60,.18);mix-blend-mode:overlay}
/* Tugma yoqilganda ajralib tursin */
.topbar-icon-btn.on{background:var(--amber-soft)!important;color:var(--amber)!important;border-color:var(--amber)!important}
/* Bosma va nakladnoy oynalariga tegmasin */
@media print{body.eye-1::after,body.eye-2::after{display:none}}


/* ═══ Filtr topbardagi bitta ikonkaga ko'chdi ═══
   Sahifadagi chip qatorlari yashiriladi - joy bo'shaydi, filtr esa
   har sahifada bir joyda turadi. */
.zchips,.dz-chips{display:none!important}
#filterBtn.on{background:var(--purple-soft)!important;color:var(--accent)!important;border-color:var(--accent)!important}
#filterBtn.on::after{
  content:'';position:absolute;top:5px;right:5px;
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 2px var(--white);
}
#filterBtn{position:relative}


/* ═══ BILDIRISHNOMA OYNASI — dizayn tizimiga moslashtirildi ═══
   Ilgari quti qattiq qorong'i yozilgan edi (#1a202c, oq matn), ya'ni
   yorug' rejimda butun ilovadan ajralib turardi. */
.notif-dd{
  display:none;position:absolute;top:44px;right:0;width:340px;max-width:calc(100vw - 24px);
  background:var(--white);border:1px solid var(--rule);border-radius:18px;
  box-shadow:var(--sh2);z-index:9999;color:var(--ink);overflow:hidden;
}
.notif-dd-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--rule-2);
}
.notif-dd-title{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.notif-dd-count{
  background:var(--red);color:#fff;border-radius:100px;
  padding:1px 8px;font-size:11px;font-weight:700;
}
.notif-dd-all{
  background:none;border:none;color:var(--accent);font-size:11.5px;font-weight:600;
  cursor:pointer;font-family:inherit;padding:4px 6px;border-radius:8px;
}
.notif-dd-all:hover{background:var(--purple-soft)}
.notif-dd-list{max-height:380px;overflow-y:auto;overscroll-behavior:contain}
.notif-dd .notif-item{align-items:flex-start;padding:12px 16px;position:relative}
.notif-dd .notif-item:hover{background:var(--paper-2)}
.notif-dd .notif-item:last-child{border-bottom:none}
.notif-ico{
  width:34px;height:34px;border-radius:11px;flex-shrink:0;
  display:grid;place-items:center;font-size:17px;
  background:var(--purple-soft);color:var(--accent);
}
.notif-ico.t-srochna,.notif-ico.t-warn{background:var(--red-soft);color:var(--red)}
.notif-ico.t-debt{background:var(--amber-soft);color:var(--amber)}
.notif-ico.t-done,.notif-ico.t-status{background:var(--green-soft);color:var(--green)}
.notif-ico.t-today,.notif-ico.t-ombor{background:var(--blue-soft);color:var(--blue)}
.notif-dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  flex-shrink:0;margin-top:6px;
}
.notif-dd-bosh{
  padding:34px 20px;text-align:center;color:var(--hint);font-size:13px;
}
.notif-dd-bosh i{font-size:30px;display:block;margin-bottom:8px;opacity:.5}
@media(max-width:899px){
  .notif-dd{position:fixed;top:auto;left:10px;right:10px;width:auto;
            top:calc(58px + env(safe-area-inset-top))}
  .notif-dd-list{max-height:60vh}
}


/* ═══ KIRISH SAHIFASI — dizayn tizimiga moslandi ═══ */
.login-screen{
  position:relative;overflow:hidden;
  background:var(--paper);
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
}
.login-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 420px at 12% -8%, rgba(108,92,231,.20), transparent 62%),
    radial-gradient(520px 380px at 105% 8%, rgba(18,183,106,.14), transparent 60%),
    radial-gradient(700px 520px at 50% 115%, rgba(108,92,231,.10), transparent 65%);
}
.login-card{position:relative;z-index:1;max-width:400px}
.login-brand{margin-bottom:26px}
.login-logo-wrap{width:74px;height:74px;border-radius:22px;box-shadow:0 12px 30px rgba(108,92,231,.34)}
.login-logo-letter{font-size:34px}
.login-title{font-size:25px;font-weight:700;letter-spacing:-.5px;color:var(--ink)}
.login-erp{
  color:var(--hint)!important;text-transform:none!important;letter-spacing:.02em!important;
  font-size:13px!important;font-weight:500!important;margin-top:2px;
}
.login-form{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.65)!important;
  border-radius:22px!important;padding:22px!important;
  box-shadow:0 12px 34px rgba(16,24,40,.10),inset 0 1px 0 rgba(255,255,255,.7);
}
.lf{margin-bottom:15px}
.lf label{
  text-transform:none!important;letter-spacing:0!important;
  font-size:12.5px!important;font-weight:600!important;color:var(--ink-2)!important;
  margin-bottom:7px!important;
}
.lf-wrap{position:relative;display:flex;align-items:center}
.lf-ico{
  position:absolute;left:13px;font-size:19px;color:var(--hint);pointer-events:none;
}
.lf-wrap input{
  padding:13px 14px 13px 42px!important;
  border-radius:14px!important;border:1.5px solid var(--rule)!important;
  background:var(--paper-2)!important;font-size:15px!important;
}
.lf-wrap input:focus{border-color:var(--accent)!important;background:var(--white)!important}
.lf-wrap input:focus~.lf-ico,.lf-wrap:focus-within .lf-ico{color:var(--accent)}
.lf-eye{
  position:absolute;right:6px;width:34px;height:34px;border:none;background:none;
  color:var(--hint);cursor:pointer;border-radius:10px;display:grid;place-items:center;font-size:18px;
}
.lf-eye:hover{background:var(--paper);color:var(--ink)}
.login-btn{
  border-radius:14px!important;text-transform:none!important;letter-spacing:0!important;
  font-size:15px!important;font-weight:600!important;padding:14px!important;margin-top:8px!important;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s,box-shadow .15s,opacity .15s;
}
.login-btn:not(.sec){box-shadow:0 8px 22px rgba(108,92,231,.30)}
.login-btn:not(.sec):hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(108,92,231,.38)}
.login-btn:active{transform:translateY(0)}
.login-btn.sec{
  background:var(--white)!important;border:1px solid var(--rule)!important;
  color:var(--ink-2)!important;font-weight:500!important;box-shadow:none!important;font-size:13.5px!important;
}
.login-btn.sec:hover{background:var(--paper-2)!important}
.login-btn.yuklanmoqda{opacity:.6;cursor:progress}
.login-error{
  display:flex;align-items:center;gap:8px;border-radius:14px!important;
  font-size:13px!important;font-weight:500;padding:11px 13px!important;
  border:1px solid rgba(240,68,56,.25);
}
.login-error i{font-size:17px;flex-shrink:0}
.login-foot{
  text-align:center;margin-top:18px;font-size:11.5px;color:var(--hint);
}
/* Qorong'i rejim */
body.dark-mode .login-screen{background:var(--paper)!important}
body.dark-mode .login-bg{
  background:
    radial-gradient(620px 420px at 12% -8%, rgba(139,127,255,.18), transparent 62%),
    radial-gradient(520px 380px at 105% 8%, rgba(46,208,138,.10), transparent 60%),
    radial-gradient(700px 520px at 50% 115%, rgba(139,127,255,.10), transparent 65%);
}
body.dark-mode .login-form{
  background:rgba(26,29,43,.78)!important;
  border-color:var(--rule)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.45)!important;
}
body.dark-mode .lf-wrap input{background:var(--paper-2)!important;border-color:var(--rule)!important;color:var(--ink)!important}
body.dark-mode .login-btn.sec{background:var(--paper-2)!important;color:var(--ink)!important}
@media(max-width:400px){
  .login-logo-wrap{width:64px;height:64px}
  .login-title{font-size:22px}
  .login-form{padding:18px!important}
}


/* ═══════════════════════════════════════════════════════════
   KANBAN — dizayn tizimiga moslashtirildi (10-avgust 2026)
   Kanban alohida qurilgan: o'z --kb* o'zgaruvchilari, o'z burchak
   va soyalari. Ular ilovaning qolgan qismidan farq qilardi.
   Uslub JS dan <head> ga KEYIN kiritiladi, shuning uchun bu yerda
   xoslik oshirilgan (body prefiksi) - tartibdan qat'i nazar ustun.

   Ustiga bitta xato tuzatildi: injected blokda --kbnavy:var(--kbnavy)
   deb yozilgan, ya'ni o'ziga o'zi havola. CSS da bunday ta'rif
   yaroqsiz bo'ladi va var(--kbnavy) ishlatilgan HAMMA joyda rang
   qo'llanmasdi - faol chip fonsiz, summa va hover ramkasi rangsiz.
   ═══════════════════════════════════════════════════════════ */
body .kbwrap{
  --kbnavy:var(--accent);
  --kbgreen:var(--green);
  --kbamber:var(--amber);
  --kbred:var(--red);
  --kbcard:var(--white);
  --kbrule:var(--rule);
  --kbrule2:var(--rule-2);
  --kbink:var(--ink);
  --kbhint:var(--hint);
  background:transparent;
}

/* ── Ustun sarlavhasi: ilova kartochkasi uslubida ── */
body .kbwrap .col-head{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:16px;
  box-shadow:var(--sh1);
  padding:13px 12px 12px;
  position:relative;overflow:hidden;
}
body .kbwrap .col-head::before{height:4px;border-radius:16px 16px 0 0}
body .kbwrap .col-head::after{display:none}
body .kbwrap .col-name{
  font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--ink-2);margin:0 auto;
}
body .kbwrap .col-count{font-size:20px;font-weight:700;color:var(--ink)}
body .kbwrap .col-sum{font-size:11.5px;color:var(--hint)}
/* Bosqich rangi endi ilova palitrasidan */
body .kbwrap .col-head.c1::before{background:var(--blue)}
body .kbwrap .col-head.c2::before{background:var(--accent)}
body .kbwrap .col-head.c3::before{background:var(--green)}
body .kbwrap .col-head.c4::before{background:var(--amber)}
body .kbwrap .col-head.c5::before{background:#0EA5A5}
body .kbwrap .col-head.c6::before{background:#E17055}
body .kbwrap .col-head.c7::before{background:#EC6FA6}
body .kbwrap .col-head.c1 .col-name,body .kbwrap .col-head.c2 .col-name,
body .kbwrap .col-head.c3 .col-name,body .kbwrap .col-head.c4 .col-name,
body .kbwrap .col-head.c5 .col-name,body .kbwrap .col-head.c6 .col-name,
body .kbwrap .col-head.c7 .col-name{color:var(--ink-2)}

/* ── Zakaz kartochkasi ── */
body .kbwrap .card{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:14px;
  box-shadow:var(--sh1);
  padding:11px 12px;
  transition:box-shadow .18s,border-color .18s,transform .18s;
}
body .kbwrap .card:hover{
  box-shadow:var(--sh2);
  border-color:rgba(108,92,231,.35);
  transform:translateY(-1px);
}
body .kbwrap .card-client{font-size:12.5px;font-weight:600;color:var(--ink)}
body .kbwrap .card-prod{font-size:11px;color:var(--hint)}
body .kbwrap .card-sum{font-size:12px;font-weight:700;color:var(--accent)}
body .kbwrap .card-id{font-size:10px;color:var(--hint);font-weight:600;letter-spacing:.2px}
body .kbwrap .card-foot{border-top:1px solid var(--rule-2);padding-top:8px;margin-top:8px}
body .kbwrap .card-thumb{border-radius:10px;border:1px solid var(--rule);background:var(--paper-2)}

/* ── Chiplar: ilovadagi .chip bilan bir xil ── */
body .kbwrap .kbchip{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:100px;
  padding:7px 14px;font-size:12.5px;font-weight:500;color:var(--ink-2);
  transition:background .15s,border-color .15s,color .15s;
}
body .kbwrap .kbchip:hover{border-color:var(--accent);color:var(--ink)}
body .kbwrap .kbchip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
body .kbwrap .kbchip.sro.on{background:var(--red);border-color:var(--red)}
body .kbwrap .kbchip.today.on{background:var(--amber);border-color:var(--amber)}

/* ── Statistika paneli ── */
body .kbwrap .kbstats{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:16px;
  box-shadow:var(--sh1);
  padding:12px 16px;
}
body .kbwrap .kbst-l{font-size:11px;color:var(--hint)}
body .kbwrap .kbst-v{font-size:18px;font-weight:700;color:var(--ink)}
body .kbwrap .kbst-v.navy{color:var(--accent)}
body .kbwrap .kbstat-inline{
  background:var(--white);border:1px solid var(--rule);
  border-radius:100px;color:var(--hint);font-size:12px;
}
body .kbwrap .kbf{background:transparent;padding:6px 2px 4px}

/* ── Yangi zakaz tugmasi ── */
body .kbwrap .kbnew-btn{
  background:var(--purple-soft);color:var(--accent);
  border:1px dashed rgba(108,92,231,.45);border-radius:12px;
  padding:10px;font-weight:600;font-size:12.5px;
}
body .kbwrap .kbnew-btn:hover{background:var(--accent);color:#fff;border-style:solid}

/* ── Bo'sh ustun va surish ko'rsatkichi ── */
body .kbwrap .empty{
  border:1px dashed var(--rule);border-radius:12px;
  color:var(--hint);font-size:11.5px;padding:22px 10px;
}
body .kbwrap .kbsc span{background:var(--rule);border-radius:100px}
body .kbwrap .kbsc span.on{background:var(--accent)}
body .kbwrap .col-body::-webkit-scrollbar-thumb{background:var(--rule);border-radius:100px}

/* ── Belgilar ── */
body .kbwrap .cb,body .kbwrap .badge,body .kbwrap .stay{border-radius:100px;font-weight:600}
body .kbwrap .stay{background:var(--paper-2);color:var(--hint)}


/* ═══ Ro'yxat va Kanban sarlavhasi bir xil ═══
   Kanbanda ☰/⫴ ikonkali kichik o'tkagich, ro'yxatda esa matnli
   "Ro'yxat / Kanban" o'tkagich va "+ Yangi zakaz" tugmasi bor edi.
   Endi ikkalasida ham bitta .zbar - renderZbar() dan. */
.kb-switch{display:none!important}
.kbwrap .zbar,.zwrap .zbar{margin-bottom:12px}
body .kbwrap>.zbar{padding:0 2px}
@media(max-width:899px){
  .zbar{flex-wrap:wrap;gap:8px}
  .zbar .zgrow{display:none}
  .zbar .zbtn.pri{width:100%;justify-content:center}
}


/* ═══ Kanban: statistika va filtr qatori sahifadan olib tashlandi ═══
   Ular endi topbardagi filtr ikonkasining ichida. */
body .kbwrap .kbtop,body .kbwrap .kbf{display:none!important}
body .kbwrap .board{padding-top:4px!important}

/* Filtr modali ichidagi bo'limlar */
.filt-lbl{
  font-size:11.5px;font-weight:600;color:var(--hint);
  text-transform:uppercase;letter-spacing:.06em;
  margin:16px 0 8px;
}
.filt-row{display:flex;flex-wrap:wrap;gap:8px}
.kbf-stat{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  background:var(--paper-2);border:1px solid var(--rule-2);
  border-radius:14px;padding:12px 14px;margin-top:4px;
}
.kbf-stat>div{min-width:0}
.kbf-stat span{display:block;font-size:10.5px;color:var(--hint);margin-bottom:3px}
.kbf-stat b{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
@media(max-width:420px){
  .kbf-stat{grid-template-columns:1fr 1fr}
  .kbf-stat>div:last-child{grid-column:1/-1}
}


/* ═══ Kanban ochilish animatsiyasi ═══
   #main da pageIn bor, lekin admin ko'rinishida faqat #adminContent
   ning ICHI almashadi - element o'zi qolgani uchun animatsiya qayta
   ishga tushmasdi va taxta birdan paydo bo'lardi. .kbwrap esa har
   chizishda yangidan yaratiladi, shuning uchun animatsiya unga qo'yildi. */
@keyframes kbIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@keyframes kbColIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
body .kbwrap{animation:kbIn .34s cubic-bezier(.22,1,.36,1) both}
body .kbwrap .col{animation:kbColIn .42s cubic-bezier(.22,1,.36,1) both}
body .kbwrap .col:nth-child(1){animation-delay:.03s}
body .kbwrap .col:nth-child(2){animation-delay:.06s}
body .kbwrap .col:nth-child(3){animation-delay:.09s}
body .kbwrap .col:nth-child(4){animation-delay:.12s}
body .kbwrap .col:nth-child(5){animation-delay:.15s}
body .kbwrap .col:nth-child(6){animation-delay:.18s}
body .kbwrap .col:nth-child(7){animation-delay:.21s}
/* Ro'yxat ham shu ohangda ochilsin */
body .zwrap{animation:kbIn .3s cubic-bezier(.22,1,.36,1) both}
/* Harakatni kamaytirish so'ralgan bo'lsa - o'chadi */
@media(prefers-reduced-motion:reduce){
  body .kbwrap,body .kbwrap .col,body .zwrap,#main{animation:none!important}
}


/* ═══ Kanban: bezak ranglari olib tashlandi ═══
   Ustun sarlavhasi tepasidagi rangli chiziq (c1..c7) faqat bezak edi -
   ustunda raqam va nom allaqachon bor. Kartochkaning chap chetidagi
   rang QOLDI: u muddat holatini bildiradi (qizil/sariq/yashil). */
body .kbwrap .col-head::before{display:none!important}
body .kbwrap .col-head{padding-top:14px}
body .kbwrap .col-head .col-name{color:var(--ink-2)!important}

/* ═══ Ochilish yumshoqroq ═══
   Ilgari .34s va 12px siljish edi - keskin tuyulardi.
   Endi uzunroq, kamroq siljish, yumshoq egri chiziq. */
@keyframes kbIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
@keyframes kbColIn{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}
body .kbwrap{animation:kbIn .55s cubic-bezier(.16,1,.3,1) both}
body .kbwrap .col{animation:kbColIn .6s cubic-bezier(.16,1,.3,1) both}
body .kbwrap .col:nth-child(1){animation-delay:.04s}
body .kbwrap .col:nth-child(2){animation-delay:.09s}
body .kbwrap .col:nth-child(3){animation-delay:.14s}
body .kbwrap .col:nth-child(4){animation-delay:.19s}
body .kbwrap .col:nth-child(5){animation-delay:.24s}
body .kbwrap .col:nth-child(6){animation-delay:.29s}
body .kbwrap .col:nth-child(7){animation-delay:.34s}
body .zwrap{animation:kbIn .5s cubic-bezier(.16,1,.3,1) both}
#main{animation:kbIn .45s cubic-bezier(.16,1,.3,1) both!important}
@media(prefers-reduced-motion:reduce){
  body .kbwrap,body .kbwrap .col,body .zwrap,#main{animation:none!important}
}


/* ═══ Zakaz kartochkasidagi rangli chiziq ham olib tashlandi ═══
   Chap chetdagi 3px rang (qizil/sariq/yashil) muddat holatini
   bildirardi. Ma'lumot yo'qolmaydi: o'sha holat kartochka ichida
   matn bilan ham bor - "0-kun", "4 kun o'tdi", "Muddati o'tdi". */
body .kbwrap .card{
  border-left-width:1px!important;
  border-left-style:solid!important;
  border-left-color:var(--rule)!important;
}
body .kbwrap .card.late,
body .kbwrap .card.soon,
body .kbwrap .card.ok{border-left-color:var(--rule)!important}
body .kbwrap .card:hover{border-left-color:rgba(108,92,231,.35)!important}

/* ═══ BRIFING (kirish ekrani) — dizayn tizimiga moslandi, qorong'i rejim tokenlar orqali ═══ */
.brf{background:var(--paper);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
.brf-hero{background:linear-gradient(135deg,#3D32B8,#5A4BD8 55%,#6C5CE7);color:#fff;padding:calc(28px + env(safe-area-inset-top)) 22px 26px;border-radius:0 0 24px 24px;box-shadow:0 8px 24px rgba(76,63,204,.28)}
.brf-greeting{font-family:var(--font-d);font-size:30px;font-weight:600;line-height:1.15;color:#fff;margin-bottom:6px}
.brf-role{font-family:var(--font-m);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:rgba(255,255,255,.92)}
.brf-body{flex:1;padding:18px 16px 8px;display:flex;flex-direction:column}
.brf-lbl{font-family:var(--font-m);text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--hint);margin:0 2px 10px}
.brf-task{background:var(--white);border:1px solid var(--rule);border-radius:var(--rl);box-shadow:var(--sh1);cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:8px;transition:transform .12s,box-shadow .12s}
.brf-task:active{transform:scale(.99)}
.brf-task.urg{border-color:var(--red);background:var(--red-soft)}
.brf-icon{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;background:var(--purple-soft);color:var(--accent);font-size:19px}
.brf-task.urg .brf-icon{background:var(--red);color:#fff}
.brf-task-txt{flex:1;min-width:0}
.brf-task-title{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.25;word-break:break-word}
.brf-task-sub{font-size:12px;color:var(--ink-2);margin-top:2px}
.brf-task.urg .brf-task-sub{color:#c0392b;font-weight:600}
.brf-task-arr{color:var(--hint);font-size:18px;flex-shrink:0}
.brf-empty{background:var(--white);border:1px solid var(--rule);border-radius:var(--rl);box-shadow:var(--sh1);padding:26px 16px;text-align:center;color:var(--ink-2);font-size:14px}
.brf-empty i{display:block;font-size:34px;color:var(--green);margin-bottom:8px}
.brf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 14px}
.brf-stat{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--sh1);text-align:center;padding:12px 6px}
.brf-stat-num{font-family:var(--font-d);font-size:24px;font-weight:700;color:var(--ink);line-height:1}
.brf-stat-num.green{color:#0d6e4e}
.brf-stat-num.amber,.brf-stat-num.gold{color:#b45309}
.brf-stat-label{font-family:var(--font-m);text-transform:uppercase;letter-spacing:.06em;font-size:9.5px;color:var(--ink-2);margin-top:5px;line-height:1.2}
.brf-quote{background:var(--purple-soft);border-left:3px solid var(--accent);border-radius:var(--rs);color:var(--ink-2);padding:12px 14px;font-size:13px;line-height:1.5}
.brf-foot{position:sticky;bottom:0;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--paper) 72%,transparent)}
.brf-start{background:var(--grad);color:#fff;border:none;border-radius:var(--rl);width:100%;padding:15px;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.03em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 18px rgba(108,92,231,.35)}
.brf-start:active{transform:scale(.99)}
@media(min-width:700px){.brf-hero,.brf-body,.brf-foot{max-width:560px;margin-left:auto;margin-right:auto;width:100%}}

/* ═══ BILDIRISHNOMA POPUP — ko'pi bilan 3 ta, o'zi yopiladi ═══ */
#notif-popup-stack{position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:99999;display:flex;flex-direction:column;gap:8px;width:320px;max-width:calc(100vw - 24px);pointer-events:none}
.np{--npc:var(--accent);position:relative;display:flex;align-items:flex-start;gap:10px;background:var(--white);color:var(--ink);border:1px solid var(--rule);border-left:3px solid var(--npc);border-radius:14px;box-shadow:var(--sh2);padding:11px 26px 13px 12px;pointer-events:auto;overflow:hidden;animation:npIn .26s cubic-bezier(.22,1,.36,1)}
.np.np-out{animation:npOut .26s ease forwards;pointer-events:none}
@keyframes npIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes npOut{from{transform:translateX(0);opacity:1}to{transform:translateX(110%);opacity:0}}
.np-srochna{--npc:var(--red)}
.np-deadline,.np-debt{--npc:var(--amber)}
.np-today{--npc:var(--blue)}
.np-new_order{--npc:var(--green)}
.np-status{--npc:var(--purple)}
.np-info{--npc:var(--hint)}
.np-ic{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;background:var(--npc);color:#fff;font-size:16px}
.np-txt{flex:1;min-width:0}
.np-title{font-size:13px;font-weight:700;line-height:1.3;color:var(--ink);word-break:break-word}
.np-sub{font-size:12px;line-height:1.4;color:var(--ink-2);margin-top:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.np-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.np[style*="pointer"]:hover{box-shadow:0 10px 26px rgba(16,24,40,.16)}
.np{transition:transform .14s,box-shadow .14s}
.np-x{position:absolute;top:5px;right:5px;background:none;border:none;color:var(--hint);cursor:pointer;font-size:15px;line-height:1;padding:4px;border-radius:6px;display:grid;place-items:center}
.np-x:hover{background:var(--paper-2);color:var(--ink)}
.np-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--npc);opacity:.5;transform-origin:left;animation:npBar linear forwards}
.np.np-hold .np-bar{animation-play-state:paused}
@keyframes npBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:520px){#notif-popup-stack{left:10px;right:10px;width:auto;max-width:none}.np{padding:10px 26px 11px 10px;gap:9px}.np-sub{-webkit-line-clamp:1;margin-top:2px}.np-ic{width:28px;height:28px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.np{animation-duration:.01ms}.np-bar{animation:none;display:none}}
body.dark-mode .brf-stat-num.green{color:var(--green)}
body.dark-mode .brf-stat-num.amber,body.dark-mode .brf-stat-num.gold{color:var(--amber)}
body.dark-mode .brf-task.urg .brf-task-sub{color:var(--red)}

/* ═══ TO'LIQ EKRANLAR: .shell 900px dan katta ekranda qator bo'ladi, shuning uchun
   yagona bola mazmuni bo'yicha qisqarib chap chekkaga taqalib qolardi ═══ */
@media(min-width:900px){
  .login-screen,.brf,.portal-screen,.skeleton{flex:1 1 100%;min-width:0}
  .brf-hero{border-radius:24px;margin-top:18px}
}
/* bildirishnomalar keng ekranda markazda, tepadan tushadi */
@media(min-width:521px){
  #notif-popup-stack{right:auto;left:50%;transform:translateX(-50%)}
  .np{animation-name:npTush}
  .np.np-out{animation-name:npChiq}
  @keyframes npTush{from{transform:translateY(-14px);opacity:0}to{transform:translateY(0);opacity:1}}
  @keyframes npChiq{from{transform:translateY(0);opacity:1}to{transform:translateY(-14px);opacity:0}}
}

/* ═══ TO'LOV YOZUVLARI ═══ */
.tlv-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.tlv-item{display:flex;align-items:flex-start;gap:10px;background:var(--white);border:1px solid var(--rule);border-radius:var(--rs);padding:10px 12px}
.tlv-item.bad{border-color:var(--red);background:var(--red-soft)}
.tlv-ic{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;background:var(--purple-soft);color:var(--accent);font-size:16px}
.tlv-item.bad .tlv-ic{background:var(--red);color:#fff}
.tlv-txt{flex:1;min-width:0}
.tlv-sum{font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.25}
.tlv-usul{font-size:11px;font-weight:600;color:var(--accent);background:var(--purple-soft);border-radius:100px;padding:2px 8px}
.tlv-meta{font-size:11.5px;color:var(--ink-2);margin-top:3px}
.tlv-taxmin{background:var(--amber-soft);color:#b45309;border-radius:100px;padding:1px 6px;font-size:10px;font-weight:600}
.tlv-izoh{font-size:12px;color:var(--ink-2);margin-top:4px;font-style:italic}
.tlv-x{background:none;border:none;color:var(--hint);cursor:pointer;font-size:15px;padding:4px;border-radius:6px;flex-shrink:0;display:grid;place-items:center}
.tlv-x:hover{background:var(--red-soft);color:var(--red)}
.tlv-bosh{text-align:center;color:var(--hint);font-size:13px;padding:16px;background:var(--paper-2);border-radius:var(--rs);margin:10px 0}
.tlv-ogoh{display:flex;gap:9px;align-items:flex-start;background:var(--red-soft);border:1px solid var(--red);border-radius:var(--rs);padding:10px 12px;margin:10px 0;font-size:12.5px;color:var(--ink);line-height:1.45}
.tlv-ogoh i{color:var(--red);font-size:18px;flex-shrink:0}
.tlv-form{background:var(--paper-2);border:1px dashed var(--rule);border-radius:var(--rs);padding:12px;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.tlv-chips{display:flex;gap:6px;flex-wrap:wrap}
.tlv-chip{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:12.5px;padding:7px 13px;border-radius:100px;border:1px solid var(--rule);background:var(--white);color:var(--ink);cursor:pointer}
.tlv-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.tlv-row2{display:grid;grid-template-columns:1fr 150px;gap:8px}
.tlv-add{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:#fff;border:none;border-radius:var(--rs);padding:11px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.tlv-add:active{transform:scale(.99)}
@media(max-width:520px){.tlv-row2{grid-template-columns:1fr}}

/* ═══ 2. Belgilash ikonkalari (.dz-main ichida) ═══
   .dz-main .chk-dot 19px qilib qayta o'lchamlangan, lekin belgi (:after)
   14px lik asosiy qoidada qolgan edi - shuning uchun tasdiq belgisi
   markazdan chiqib, oq kvadrat bo'lib ko'rinardi. */
.dz-main .chk input:checked+.chk-dot{background:#fff;border-color:#fff}
.dz-main .chk input:checked+.chk-dot:after{
  content:"";position:absolute;top:3px;left:6px;width:5px;height:9px;
  border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.dz-main .chk:has(input:checked){color:#fff}

/* ═══ 4. Sifat nazoratidagi rasm katakchalari ═══
   .dz-main .photo-row flex ga o'tkazilgan, lekin .photo-slot ga o'lcham
   berilmagan - grid da ustunni to'ldirardi, flex da esa nolga siqilib
   yuklangan rasm umuman ko'rinmasdi. */
.dz-main .photo-slot{width:104px;height:104px;aspect-ratio:auto;position:relative;
  flex-shrink:0;overflow:hidden;border-radius:15px;display:grid;place-items:center}
.dz-main .photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dz-main .photo-slot-lbl{width:100%;height:100%;border-radius:15px}
.dz-main .photo-slot .photo-del{position:absolute;top:5px;right:5px;z-index:3}

/* ═══ Sifat nazorati: tez tasdiqlash ═══ */
.qc-tez{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--purple-soft);
  border:1px solid var(--rule);border-radius:var(--rs);padding:11px 13px;margin-bottom:12px}
.qc-tez-txt{flex:1;min-width:190px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.qc-tez-txt b{color:var(--ink)}
.qc-tez-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;
  border:none;border-radius:var(--rs);padding:10px 16px;font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;flex-shrink:0}
.qc-tez-btn:active{transform:scale(.98)}
.qc-item.qc-krit{border-left:3px solid var(--amber)}
.qc-krit-bel{margin-left:6px;font-size:9.5px;font-family:var(--font-m);text-transform:uppercase;
  letter-spacing:.05em;background:var(--amber-soft);color:#b45309;border-radius:100px;padding:2px 7px}

/* mahsulot yig'indisi va jami summa farqi */
.mhs-farq{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:9px 11px;
  border-radius:var(--rs);background:var(--amber-soft);border:1px solid #fcd34d;
  font-size:12.5px;line-height:1.45;color:var(--ink)}
.mhs-farq i{color:#b45309;font-size:16px;flex-shrink:0;margin-top:1px}
.mhs-farq.bad{background:var(--red-soft);border-color:var(--red)}
.mhs-farq.bad i{color:var(--red)}

/* to'lov qatoridagi NDS belgisi */
.tlv-nds{font-size:11px;font-weight:600;color:#b45309;background:var(--amber-soft);
  border-radius:100px;padding:2px 8px}

/* ═══ Avans ko'chirish ═══ */
.avk-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  background:var(--accent);color:#fff;border:none;border-radius:var(--rs);padding:11px;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:10px}
.avk-btn:active{transform:scale(.99)}
.avk-hisob{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.avk-hisob>div{background:var(--paper-2);border-radius:var(--rs);padding:10px;text-align:center}
.avk-hisob span{display:block;font-size:10.5px;color:var(--hint);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:4px}
.avk-hisob b{font-size:14px;color:var(--ink)}
.avk-list{display:flex;flex-direction:column;gap:7px;max-height:230px;overflow-y:auto}
.avk-item{display:flex;align-items:center;gap:10px;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--rs);padding:10px 12px;cursor:pointer}
.avk-item:has(input:checked){border-color:var(--accent);background:var(--purple-soft)}
.avk-txt{flex:1;min-width:0}
.avk-id{font-size:13.5px;font-weight:600;color:var(--ink)}
.avk-sub{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.avk-sum{font-size:13.5px;font-weight:700;color:var(--red);flex-shrink:0}
.avk-bosh{text-align:center;color:var(--hint);font-size:13px;padding:18px;
  background:var(--paper-2);border-radius:var(--rs)}

/* ═══════════ OMBOR SAHIFASI ═══════════
   36 ta sinf ishlatilardi, birortasining uslubi yo'q edi - sahifa oddiy
   matn bo'lib ustma-ust tushardi. Uslublar dizayn tizimi tokenlariga
   tayanadi, shuning uchun qorong'i rejim avtomat ishlaydi. */
:root{--o-ok:#12B76A;--o-bad:#F04438;--o-ink2:#4B5163}
body.dark-mode{--o-ok:#2ED08A;--o-bad:#FF6B5E;--o-ink2:#AEB6CE}

#ombRoot{padding:18px 16px 60px;max-width:1500px;margin:0 auto}

.omb-head h2{font-family:var(--font-d);font-size:26px;font-weight:600;margin:0 0 4px;color:var(--ink)}
.omb-head p{margin:0 0 16px;font-size:13px;color:var(--hint)}

/* ── tayyorlash kerak ── */
.omb-sum{background:var(--white);border:1px solid var(--rule);border-radius:var(--rl);
  box-shadow:var(--sh1);padding:14px 16px;margin-bottom:14px}
.omb-sh{font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hint);margin-bottom:10px}
.omb-sh i{font-style:normal;font-weight:400;letter-spacing:0;text-transform:none;opacity:.8}
.omb-ar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;
  border-top:1px solid var(--rule-2)}
.omb-ar:first-of-type{border-top:none}
.omb-ar.warn .omb-aq{color:#b45309}
.omb-aq{font-size:14.5px;font-weight:700;color:var(--ink);min-width:92px}
.omb-an{font-size:12px;color:var(--hint)}
.omb-asz{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.omb-szp{font-size:11px;font-family:var(--font-m);background:var(--paper-2);
  color:var(--ink-2);border-radius:100px;padding:2px 8px}

/* ── plitkalar ── */
.omb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:10px;margin-bottom:16px}
.omb-tile{display:flex;align-items:center;gap:11px;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--sh1);padding:12px 14px}
.omb-tt .l{font-size:11.5px;color:var(--hint);line-height:1.25}
.omb-tt .v{font-family:var(--font-d);font-size:21px;font-weight:700;color:var(--ink);line-height:1.1}

.omb-ci{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;
  border-radius:10px;font-size:17px}
.omb-ci.s3{background:var(--purple-soft);color:var(--accent)}
.omb-ci.s4{background:var(--blue-soft);color:var(--blue)}
.omb-ci.w{background:var(--amber-soft);color:#b45309}
.omb-ci.g{background:var(--green-soft);color:var(--o-ok)}
.omb-ci.r{background:var(--red-soft);color:var(--o-bad)}

/* ── ustunlar ── */
.omb-board{display:grid;grid-template-columns:repeat(4,minmax(250px,1fr));gap:12px;align-items:start}
.omb-col{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--rl);
  display:flex;flex-direction:column;min-width:0;overflow:hidden}
.omb-ch{display:flex;align-items:center;gap:10px;padding:12px 13px;
  background:var(--white);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:2}
.omb-cht{flex:1;min-width:0}
.omb-cht b{display:block;font-size:13.5px;color:var(--ink);line-height:1.2}
.omb-cht span{display:block;font-size:11px;color:var(--hint);margin-top:2px}
.omb-cnt{flex-shrink:0;background:var(--ink);color:var(--white);border-radius:100px;
  min-width:24px;text-align:center;padding:2px 8px;font-size:12px;font-weight:700}
.omb-cb{padding:10px;display:flex;flex-direction:column;gap:10px}
/* DIQQAT: ustun ichida qat'iy balandlik (max-height) qo'yilmaydi - u
   sahifaning pastini kesib tashlardi va ostida bo'sh joy qolardi.
   Ustun mazmuni bo'yicha o'sadi, sahifaning o'zi aylanadi. */
.omb-empty{text-align:center;color:var(--hint);font-size:12.5px;padding:20px 8px}

/* ── zakaz kartochkasi ── */
.omb-zk{background:var(--white);border:1px solid var(--rule);border-radius:var(--rs);
  box-shadow:var(--sh1);padding:11px 12px}
.omb-zk.late{border-color:var(--o-bad);background:var(--red-soft)}
.omb-t{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.omb-n{font-family:var(--font-m);font-size:12px;font-weight:700;color:var(--ink)}
.omb-tag{font-size:9.5px;font-family:var(--font-m);text-transform:uppercase;
  letter-spacing:.04em;border-radius:100px;padding:2px 7px;font-weight:600}
.omb-tag.s3{background:var(--purple-soft);color:var(--accent)}
.omb-tag.s4{background:var(--blue-soft);color:var(--blue)}
.omb-tag.wait{background:var(--red);color:#fff}
.omb-fr{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.omb-p{border-top:1px dashed var(--rule-2);padding:7px 0}
.omb-p:first-of-type{border-top:none;padding-top:0}
.omb-pn{display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--ink)}
.omb-pn b{margin-left:auto;flex-shrink:0;font-size:12.5px}
.omb-sz{font-size:11px;color:var(--hint)}
.omb-ks{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}

/* ── rasmlar ── */
.omb-gal{display:flex;gap:5px;margin:8px 0;align-items:center}
.omb-gal img{width:52px;height:52px;object-fit:cover;border-radius:9px;
  border:1px solid var(--rule);cursor:zoom-in;flex-shrink:0}
.omb-more{width:52px;height:52px;flex-shrink:0;display:grid;place-items:center;
  border-radius:9px;background:var(--paper-2);color:var(--ink-2);font-size:12px;
  font-weight:600;cursor:pointer}
.omb-noimg{font-size:11.5px;color:var(--hint);margin:8px 0;font-style:italic}

.omb-m{font-size:11.5px;color:var(--ink-2);line-height:1.45;margin-top:6px}
.omb-m b{color:var(--ink)}
.omb-act{margin-top:9px}
.omb-btn{width:100%;background:var(--paper-2);color:var(--ink);border:1px solid var(--rule);
  border-radius:var(--rs);padding:9px;font-family:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer}
.omb-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.omb-btn.grn{background:var(--o-ok);border-color:var(--o-ok);color:#fff}
.omb-btn:active{transform:scale(.99)}
.omb-stop{margin-top:6px;font-size:11.5px;color:var(--o-bad);background:var(--red-soft);
  border-radius:var(--rs);padding:6px 9px}

@media(max-width:1100px){
  .omb-board{grid-template-columns:repeat(2,minmax(230px,1fr))}
}
@media(max-width:620px){
  #ombRoot{padding:14px 12px 60px}
  .omb-board{grid-template-columns:1fr}
  .omb-asz{margin-left:0;width:100%}
}

/* komplekt turi belgilari */
.omb-k{display:inline-block;padding:2px 9px;border-radius:100px;font-size:11px;font-weight:600;flex-shrink:0}
.omb-k.toliq{background:var(--green-soft);color:var(--o-ok)}
.omb-k.stoyka{background:var(--blue-soft);color:var(--blue)}
.omb-k.bachok{background:var(--purple-soft);color:var(--accent)}
.omb-k.yoq{background:var(--paper-2);color:var(--hint)}
.omb-k._yoq_{background:var(--amber-soft);color:#b45309}

/* ═══ MIJOZ PROFILI ═══ */
.mp-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mp-av{width:46px;height:46px;flex-shrink:0;border-radius:14px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-family:var(--font-d);font-size:20px;font-weight:700}
.mp-ht{min-width:0}
.mp-nom{font-size:17px;font-weight:700;color:var(--ink);line-height:1.2}
.mp-tel{font-size:12.5px;color:var(--hint);margin-top:3px;font-family:var(--font-m)}
.mp-diler{font-size:10px;font-family:var(--font-m);text-transform:uppercase;letter-spacing:.05em;
  background:var(--purple-soft);color:var(--accent);border-radius:100px;padding:2px 8px;font-weight:700;
  vertical-align:middle}
.mp-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:7px;margin-bottom:12px}
.mp-k{background:var(--paper-2);border-radius:var(--rs);padding:9px 10px;text-align:center}
.mp-k span{display:block;font-size:9.5px;color:var(--hint);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:3px}
.mp-k b{font-size:13.5px;color:var(--ink);word-break:break-word}
.mp-k.grn b{color:var(--green)} .mp-k.red b{color:var(--red)} .mp-k.blu b{color:var(--accent)}
.mp-info{background:var(--purple-soft);border:1px solid var(--rule);border-radius:var(--rs);
  padding:9px 12px;font-size:12px;color:var(--ink-2);line-height:1.45;margin-bottom:12px}
.mp-info b{color:var(--accent)}
.mp-act{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.mp-btn{flex:1;min-width:150px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--white);color:var(--ink);border:1px solid var(--rule);border-radius:var(--rs);
  padding:10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.mp-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.mp-btn:active{transform:scale(.99)}
.mp-sh{font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hint);margin-bottom:7px}
.mp-list{display:flex;flex-direction:column;gap:6px;max-height:290px;overflow-y:auto}
.mp-o{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--rule);
  border-radius:var(--rs);padding:9px 12px;cursor:pointer}
.mp-o:hover{border-color:var(--accent)}
.mp-o-l{flex:1;min-width:0}
.mp-o-id{font-family:var(--font-m);font-size:12px;font-weight:700;color:var(--ink)}
.mp-o-d{font-size:11px;color:var(--hint);margin-top:2px}
.mp-o-r{text-align:right;flex-shrink:0}
.mp-o-j{font-size:13px;font-weight:600;color:var(--ink)}
.mp-o-q{font-size:11.5px;font-weight:600;margin-top:2px}
.mp-bosh{text-align:center;color:var(--hint);font-size:12.5px;padding:16px}

/* to'liq to'langan zakaz uchun Payment bo'limidagi izoh */
.tlv-ok{display:flex;gap:9px;align-items:flex-start;background:var(--green-soft);
  border:1px solid var(--green);border-radius:var(--rs);padding:10px 12px;margin:10px 0;
  font-size:12.5px;color:var(--ink);line-height:1.45}
.tlv-ok i{color:var(--green);font-size:18px;flex-shrink:0}
.mp-o-p{font-size:11.5px;color:var(--green);font-weight:600;margin-top:2px}
/* mijoz qatoridagi tekshiriladigan fakt: sana oralig'i va zakaz soni */
.dz-fakt{font-size:11px;color:var(--hint);font-family:var(--font-m);margin-top:3px}

/* ═══ AmoCRM summa farqi ═══
   AmoCRM dagi summa ERP dagidan farq qilsa ko'rinib tursin - ilgari u
   hech qayerda saqlanmasdi va narx qayta hisoblanganda yo'qolardi. */
.amo-farq{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;
  background:var(--amber-soft);border:1px solid #fcd34d;border-radius:var(--rs);
  padding:8px 11px;font-size:12px;color:var(--ink);line-height:1.45}
.amo-farq i{font-size:15px;color:#b45309;flex-shrink:0}
.amo-farq span{flex:1;min-width:150px}
.amo-farq b{color:#b45309}
.amo-farq.ok{background:var(--green-soft);border-color:var(--green)}
.amo-farq.ok i{color:var(--green)}
.amo-farq.ok b{color:var(--green)}
.amo-btn{background:#b45309;color:#fff;border:none;border-radius:8px;padding:6px 11px;
  font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;flex-shrink:0}

/* Aksessuar taklifi: tizim bilmagan mahsulotni qo'lda belgilash yo'li.
   Kalit so'z "shunga o'xshagan narsalar"ni hech qachon qamrab ololmaydi. */
.aks-taklif{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;
  background:var(--paper-2);border:1px dashed var(--rule);border-radius:var(--rs);
  padding:8px 11px;font-size:11.5px;color:var(--hint);line-height:1.45}
.aks-taklif i{font-size:15px;color:var(--accent);flex-shrink:0}
.aks-taklif span{flex:1;min-width:150px}

/* ═══ Bo'lim ichidagi mahsulot ro'yxati ═══
   Sarlavhadagi qator bitta satrga siqilgan va kesiladi; bu yerda to'liq
   ko'rinadi - dizayner, bosmachi va sifatchi nima bosayotganini biladi. */
.sec-prods{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);
  padding:10px 12px;margin-bottom:14px}
.sp-h{display:flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:10.5px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--hint);margin-bottom:8px}
.sp-h i{font-size:14px;color:var(--accent)}
.sp-h span{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:600}
.sp-r{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:5px 0;
  border-top:1px dashed var(--rule-2)}
.sp-r:first-of-type{border-top:none}
.sp-n{font-size:13.5px;font-weight:600;color:var(--ink);flex:1;min-width:120px;line-height:1.35}
.sp-q{font-family:var(--font-m);font-size:12px;font-weight:700;color:var(--accent);flex-shrink:0}
.sp-s,.sp-k,.sp-i{font-size:11px;background:var(--white);border:1px solid var(--rule);
  border-radius:100px;padding:1px 8px;color:var(--ink-2)}
.sp-i{border-style:dashed;color:var(--hint)}

/* ═══ Chap menyu: har band alohida kartochka ═══
   Bandlar tekis ro'yxat edi, hover yo'q. Endi bosh sahifadagi kartochka
   bilan bir xil his: ko'tariladi va soya kuchayadi. !important kerak -
   asosiy uslub index.html dagi <style id="dz-new"> blokida, u theme.css
   dan KEYIN yuklanadi. */
.sidebar-nav{padding:8px 10px!important}
.si-group{margin:14px 0 6px!important}
.sidebar-item{
  background:var(--white)!important;
  border:1px solid var(--rule)!important;
  box-shadow:var(--sh1)!important;
  margin-bottom:6px!important;
  transition:transform .18s,box-shadow .18s,border-color .18s,background .15s!important}
.sidebar-item:hover{
  transform:translateY(-2px)!important;
  box-shadow:var(--sh2),inset 0 1px 0 rgba(255,255,255,.75)!important;
  border-color:rgba(108,92,231,.35)!important}
.sidebar-item:active{transform:translateY(0)!important}
.sidebar-item.active{border-color:var(--accent)!important;box-shadow:var(--sh1)!important}

/* Pastdagi avatar ham xuddi shunday */
.sidebar-bottom{padding:10px!important}
.sidebar-user{
  background:var(--white)!important;
  border:1px solid var(--rule)!important;
  box-shadow:var(--sh1)!important;
  transition:transform .18s,box-shadow .18s,border-color .18s!important}
.sidebar-user:hover{
  transform:translateY(-2px)!important;
  box-shadow:var(--sh2),inset 0 1px 0 rgba(255,255,255,.75)!important;
  border-color:rgba(108,92,231,.35)!important}
.sidebar-user:active{transform:translateY(0)!important}

/* Qorong'i rejimda ichki oq yorug'lik ortiqcha */
body.dark-mode .sidebar-item:hover,
body.dark-mode .sidebar-user:hover{box-shadow:var(--sh2)!important}

/* ═══ Telefon menyusi ekranga yopishsin ═══
   .tabs <main> ichida turadi, <main> ga esa kbIn animatsiyasi transform
   beradi. Transformli ota-element position:fixed uchun YANGI ASOS
   yaratadi - shuning uchun menyu ekranga emas, sahifa OXIRIGA yopishib
   qolardi va faqat pastga tushganda ko'rinardi (3411px da). Animatsiya
   endi faqat shaffoflik bilan ishlaydi, transform yo'q. */
@keyframes mainIn{from{opacity:0}to{opacity:1}}
main,#main{animation:mainIn .3s ease both!important}
@media(prefers-reduced-motion:reduce){main,#main{animation:none!important}}

/* ═══ Pastdagi avatar boshqa bandlar shaklida ═══
   Konteynerga radius qo'llanmay qolgan edi (0px) va u to'rtburchak
   bo'lib ko'rinardi; bandlarniki 13px. */
.sidebar .sidebar-bottom .sidebar-user{
  border-radius:13px!important;
  padding:10px 11px!important;
  margin-top:0!important}


/* ═══ BIRJA (tender) bloki ═══ */
.bj-wrap{background:var(--white);border:1px solid var(--rule);border-radius:var(--rl);
  box-shadow:var(--sh1);padding:14px 16px;margin-bottom:12px}
.bj-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.bj-head i{font-size:19px;color:var(--accent)}
.bj-head b{font-size:15px;color:var(--ink)}
.bj-bos{font-size:11.5px;font-weight:600;background:var(--purple-soft);color:var(--accent);
  border-radius:100px;padding:3px 11px}
.bj-off{margin-left:auto;background:var(--ink-2);color:#fff;border:none;border-radius:8px;
  padding:6px 11px;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.bj-steps{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.bj-s{flex:1;min-width:104px;font-size:10.5px;color:var(--hint);border-top:3px solid var(--rule-2);
  padding-top:6px;line-height:1.3}
.bj-s span{display:block;font-family:var(--font-m);font-weight:700;font-size:11px}
.bj-s.done{border-top-color:var(--green);color:var(--ink-2)}
.bj-s.cur{border-top-color:var(--accent);color:var(--accent);font-weight:700}
.bj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:10px}
.bj-g{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);padding:10px 12px}
.bj-g.ok{border-color:var(--green);background:var(--green-soft)}
.bj-gh{display:flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:10.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hint);margin-bottom:9px}
.bj-gh i{font-size:14px;color:var(--accent)}
.bj-gh span{margin-left:auto;letter-spacing:0;text-transform:none}
.bj-ok{margin-left:auto;color:var(--green);font-size:14px}
/* Maydonlar katakdan toshib ketardi (46-105 px): .input ga kenglik
   berilmagani uchun har biri o'z tabiiy kengligini olardi, sana
   maydoni esa 129 px dan kichraymaydi. Endi katak kengligiga
   moslashadi, joy yetmasa ustun soni o'zi kamayadi. */
.bj-gb{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.bj-g,.bj-f{min-width:0}
.bj-f .input{width:100%;max-width:100%;box-sizing:border-box}
.bj-f label{display:block;font-size:11px;color:var(--ink-2);margin-bottom:4px}
.bj-f.wide{grid-column:1/-1}
.bj-f .input{padding:7px 9px;font-size:13px}
.bj-files{margin-top:12px;border-top:1px dashed var(--rule-2);padding-top:10px}
.bj-flist{display:flex;gap:7px;flex-wrap:wrap}
.bj-fl{position:relative}
.bj-fl img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--rule);cursor:zoom-in}
.bj-fl button{position:absolute;top:-5px;right:-5px;width:19px;height:19px;border-radius:50%;
  border:none;background:var(--red);color:#fff;font-size:12px;line-height:1;cursor:pointer}
/* ═══ Ombor: qoldiq varag'i ═══ */
.omb-varaq{display:flex;gap:6px;margin-bottom:14px}
.omb-varaq button{background:var(--white);border:1px solid var(--rule);border-radius:100px;
  padding:7px 18px;font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink-2);cursor:pointer;transition:background .12s,color .12s}
.omb-varaq button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ombq-panel{background:var(--white);border:1px solid var(--rule);border-radius:var(--rl);
  box-shadow:var(--sh1);padding:12px}
.ombq-qidir{width:100%;margin-bottom:10px}
.ombq-row{display:grid;grid-template-columns:minmax(0,2.2fr) 88px 78px 104px auto;
  align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--rule)}
.ombq-row:last-child{border-bottom:none}
.ombq-row.bosh{opacity:.55}
.ombq-nom b{display:block;font-size:13px;color:var(--ink);line-height:1.25}
.ombq-nom span{display:block;font-size:11px;color:var(--hint);margin-top:1px}
.ombq-son{text-align:center}
.ombq-son i{display:block;font-style:normal;font-size:10px;color:var(--hint);text-transform:uppercase;letter-spacing:.04em}
.ombq-son b{font-size:15px;font-weight:800;color:var(--ink)}
.ombq-son.band b{color:var(--amber)}
.ombq-son.mumkin b{color:var(--green)}
.ombq-amal{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.ombq-b{border:1px solid var(--rule);background:var(--paper-2);border-radius:8px;
  padding:5px 10px;font-family:inherit;font-size:11.5px;font-weight:600;
  color:var(--ink-2);cursor:pointer;white-space:nowrap}
.ombq-b:hover{border-color:var(--accent);color:var(--accent)}
.ombq-b.kir{color:var(--green)} .ombq-b.chi{color:var(--red)}
.ombj-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 4px;border-bottom:1px solid var(--rule)}
.ombj-row b{font-size:13px;color:var(--ink)}
.ombj-row span{display:block;font-size:11px;color:var(--hint)}
.ombj-row b.pl{color:var(--green);font-size:15px;white-space:nowrap}
.ombj-row b.mn{color:var(--red);font-size:15px;white-space:nowrap}
@media(max-width:820px){
  .ombq-row{grid-template-columns:1fr 1fr 1fr;grid-auto-rows:auto;gap:6px}
  .ombq-nom{grid-column:1/-1}
  .ombq-amal{grid-column:1/-1;justify-content:flex-start}
}

/* Ombor: kirim varag'i */
.omb-varaq button i{font-style:normal;background:var(--red);color:#fff;border-radius:100px;
  padding:0 6px;font-size:11px;margin-left:4px}
.omb-varaq button.on i{background:rgba(255,255,255,.28)}
.ombk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 6px;border-bottom:1px solid var(--rule)}
.ombk-row:last-child{border-bottom:none}
.ombk-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.ombk-h b{font-family:var(--font-m);font-size:12px;color:var(--ink)}
.ombk-belgi{font-size:10px;background:var(--purple-soft);color:var(--accent);
  border-radius:100px;padding:1px 8px;font-weight:700}
.ombk-mij{font-size:11.5px;color:var(--hint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ombk-mahs{display:flex;gap:5px;flex-wrap:wrap;flex:1;min-width:0}
.ombk-t{font-size:11px;color:var(--ink-2);background:var(--paper-2);border-radius:100px;padding:2px 9px}
.ombk-p{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 4px;border-bottom:1px solid var(--rule)}
.ombk-p b{display:block;font-size:13px;color:var(--ink)}
.ombk-p span{display:block;font-size:10.5px;color:var(--hint);font-family:var(--font-m)}
@media(max-width:620px){ .ombk-row{align-items:flex-start} .ombk-h{width:100%} }

/* Sotuvchi ko'radigan qoldiq yorlig'i */
.zax-yor{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:600;
  background:var(--green-soft);color:var(--green);border-radius:100px;padding:2px 9px;
  vertical-align:middle;white-space:nowrap}
.zax-yor b{font-weight:800}
.zax-yor.yoq{background:var(--paper-2);color:var(--hint)}
@media(max-width:620px){ .zax-yor{display:block;margin:4px 0 0;width:fit-content} }

/* Bank to'lovida NDS ko'rsatkichi */
.tlv-nds{font-size:11.5px;color:#b45309;background:#fff8e1;border:1px solid #ffc107;
  border-radius:8px;padding:6px 10px;margin:2px 0 6px;line-height:1.35}
.tlv-nds b{font-weight:800}

/* Ombor: chiqimda yetmaydigan mahsulot */
.ombk-belgi.yetmas{background:var(--red-soft);color:var(--red)}
.ombk-t.yetmas{background:var(--red-soft);color:var(--red);font-weight:600}
.ombk-p.yetmas{background:var(--red-soft);border-radius:8px}
.ombk-p.yetmas span{color:var(--red)}

/* Kunlik oynadagi izoh - tushgan pul va zakaz summasi farqi */
.kun-izoh{font-size:11.5px;color:var(--hint);margin:2px 0 8px;line-height:1.35}

/* Yangilanish xabari - pastda, ishga xalaqit bermaydigan joyda */
.yangi-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:9999;display:flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;border-radius:14px;
  padding:10px 12px 10px 14px;box-shadow:0 8px 28px rgba(16,24,40,.28);
  animation:ybKir .25s ease}
@keyframes ybKir{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.yangi-banner>i{font-size:19px;color:#7ee2b8;flex-shrink:0}
.yangi-banner b{display:block;font-size:13px;line-height:1.2}
.yangi-banner span{display:block;font-size:11px;opacity:.7;margin-top:1px}
.yangi-banner button{border:none;border-radius:9px;padding:7px 13px;
  font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.yangi-banner .yb-ha{background:var(--green);color:#fff}
.yangi-banner .yb-yoq{background:rgba(255,255,255,.14);color:#fff}
@media(max-width:620px){
  .yangi-banner{left:10px;right:10px;bottom:76px;transform:none;
    animation:none;justify-content:space-between}
  .yangi-banner span{display:none}
}

/* NDS alohida qatori - umumiy/to'langan bilan aralashib ketmasin */
.nds-qator{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#fff8e1;border:1px solid #ffc107;border-radius:var(--rs);
  padding:8px 11px;margin-top:8px}
.nds-qator i{font-size:16px;color:#b45309;flex-shrink:0}
.nds-qator span{font-size:12px;font-weight:600;color:#b45309}
.nds-qator b{font-size:13.5px;font-weight:800;color:#b45309}
.nds-qator em{font-style:normal;font-size:11px;color:var(--hint);margin-left:auto}
@media(max-width:620px){ .nds-qator em{margin-left:0;width:100%} }

/* NDS va Logistika kartalari bosiladigan - ortidagi zakazlar ro'yxati */
.fin-card2.fin-bosiladi{cursor:pointer;transition:transform .12s,box-shadow .15s}
.fin-card2.fin-bosiladi:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.fin-mstrelka{margin-left:auto;font-size:16px;color:var(--hint)}
.fin-card2 .fin-mhead{display:flex;align-items:center}
.fakt-izoh{font-size:11.5px;color:var(--hint);margin:2px 0 10px;line-height:1.35}
.fakt-qator{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 4px;border-bottom:1px solid var(--rule);cursor:pointer}
.fakt-qator:hover{background:var(--paper-2)}
.fakt-mijoz{font-size:13px;font-weight:600;color:var(--ink)}
.fakt-meta{font-size:11px;color:var(--hint)}
.fakt-summa{flex-shrink:0;white-space:nowrap;font-size:13.5px;font-weight:700;color:var(--accent)}

/* Excel tugmasi - sahifa va ro'yxat oynasining o'ng yuqori burchagida.
   Ilgari sahifa tepasida katta panel turardi, joyni behuda egallardi. */
.fin-page{position:relative}
#modalContent{position:relative}
/* Oyna sarlavhasi uzun bo'lsa tugma ostiga kirib ketmasin */
#modalContent h2{padding-right:44px}
.eks-burchak{position:absolute;top:10px;right:12px;z-index:5;
  width:34px;height:34px;border-radius:10px;border:1px solid var(--rule);
  background:var(--white);color:var(--green);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--sh1);
  transition:transform .12s,border-color .15s}
.eks-burchak i{font-size:17px}
.eks-burchak:hover{border-color:var(--green);transform:translateY(-1px)}
.eks-burchak:active{transform:translateY(0)}
.fin-page>.eks-burchak{top:16px;right:18px}
/* Kassa kartasidagi o'sish belgisi tugma ostida qolib ketmasin */
.fin-hero-trend{margin-right:40px}
@media(max-width:620px){ .eks-burchak{width:31px;height:31px;top:9px;right:10px}
  .fin-page>.eks-burchak{top:12px;right:12px} }

/* Moliya: Excel ga yuklash paneli */
.eks-panel{background:var(--white);border:1px solid var(--rule);border-radius:var(--rl);
  box-shadow:var(--sh1);padding:12px 14px;margin:0 14px 12px}
.eks-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.eks-h i{font-size:18px;color:var(--green)}
.eks-h b{font-size:13.5px;color:var(--ink)}
.eks-h span{font-size:11px;color:var(--hint);margin-left:auto}
.eks-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:7px}
.eks-btn{display:flex;align-items:center;gap:7px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--rs);padding:9px 11px;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--ink);
  cursor:pointer;text-align:left;transition:border-color .15s,transform .1s}
.eks-btn i{font-size:16px;color:var(--green);flex-shrink:0}
.eks-btn:hover{border-color:var(--green);transform:translateY(-1px)}
.eks-btn:active{transform:translateY(0)}
@media(max-width:620px){ .eks-panel{margin:0 10px 10px} .eks-b{grid-template-columns:1fr 1fr} }

/* Rad etilgan schyot-faktura: pul bu hujjat bo'yicha kelmaydi, ko'zga
   tashlanib tursin */
.bj-rad{display:flex;align-items:flex-start;gap:10px;background:var(--red-soft);
  border:1px solid var(--red);border-radius:var(--r);padding:10px 12px;margin-bottom:12px}
.bj-rad i{font-size:19px;color:var(--red);flex-shrink:0;margin-top:1px}
.bj-rad b{display:block;font-size:13px;color:var(--red)}
.bj-rad span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:2px}
.bj-mol{font-size:11.5px;color:var(--green);background:var(--green-soft);
  border-radius:8px;padding:6px 9px;align-self:end}
.bj-mol.ogoh{color:var(--red);background:var(--red-soft)}
.bj-holat-sana{font-size:11.5px;color:var(--hint);align-self:end;padding-bottom:6px}
.bj-f select.input{width:100%;max-width:100%;box-sizing:border-box;padding:7px 9px;font-size:13px}
.bjk.rad{border-color:var(--red);background:var(--red-soft)}
.bjk-rad{font-size:10px;background:var(--red);color:#fff;border-radius:100px;
  padding:1px 7px;font-weight:700}
/* PDF hujjat kartasi: rasm emas, shuning uchun nomi bilan ko'rsatiladi */
.bj-fl.bj-pdf{width:auto;max-width:210px}
.bj-fl.bj-pdf a{display:flex;align-items:center;gap:7px;height:64px;padding:0 12px;
  background:var(--white);border:1px solid var(--rule);border-radius:9px;
  text-decoration:none;color:var(--ink);min-width:0}
.bj-fl.bj-pdf i{font-size:23px;color:var(--red);flex-shrink:0}
.bj-fl.bj-pdf span{font-size:11.5px;line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}
.bj-fl.bj-pdf a:hover{border-color:var(--accent);box-shadow:var(--sh1)}
.bj-add{width:64px;height:64px;border:1px dashed var(--rule);border-radius:9px;display:grid;
  place-items:center;font-size:22px;color:var(--hint);cursor:pointer}
@media(max-width:620px){ .bj-gb{grid-template-columns:1fr} }


/* ═══ Birja sahifasi (modal) ═══ */
.bjm-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.bjm-head i{font-size:24px;color:var(--accent)}
.bjm-head b{display:block;font-family:var(--font-d);font-size:19px;color:var(--ink)}
.bjm-head span{display:block;font-size:12px;color:var(--hint);margin-top:2px}
.bjm-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:10px}
.bjc{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--rl);
  display:flex;flex-direction:column;min-width:0;overflow:hidden}
.bjc-h{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--white);
  border-bottom:1px solid var(--rule)}
.bjc-h i{font-size:17px;color:var(--accent);flex-shrink:0}
.bjc-h b{display:block;font-size:12.5px;color:var(--ink);line-height:1.2}
.bjc-h span{display:block;font-size:11px;color:var(--hint);margin-top:1px}
.bjc-b{padding:9px;display:flex;flex-direction:column;gap:8px;max-height:62vh;overflow-y:auto}
.bjc-empty{text-align:center;color:var(--hint);font-size:12px;padding:14px 6px}
.bjk{background:var(--white);border:1px solid var(--rule);border-radius:var(--rs);
  box-shadow:var(--sh1);padding:9px 10px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.bjk:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.bjk.late{border-color:var(--red);background:var(--red-soft)}
.bjk-t{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.bjk-t b{font-family:var(--font-m);font-size:11.5px;color:var(--ink)}
.bjk-lot{font-size:10px;background:var(--purple-soft);color:var(--accent);
  border-radius:100px;padding:1px 7px;font-weight:700}
.bjk-late{font-size:10px;background:var(--red);color:#fff;border-radius:100px;padding:1px 7px;font-weight:700}
.bjk-c{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bjk-m{display:flex;gap:5px;flex-wrap:wrap}
.bjk-m span{font-size:10.5px;color:var(--ink-2);background:var(--paper-2);
  border-radius:100px;padding:1px 7px}
@media(max-width:620px){ .bjm-board{grid-template-columns:1fr} .bjc-b{max-height:none} }


/* ═══ BUXGALTERIYA SAHIFASI ═══
   Buxgalterning ish o'rni: tepada undan nima kutilayotgani, pastda barcha
   birja zakazlarining hujjat holati. */
.bux-varaq{padding:14px 14px 80px;}
.bux-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:18px;}
.bux-s{background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--rl);padding:12px;}
.bux-s.ish{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--paper-2));}
.bux-s.kech{border-color:var(--red);background:color-mix(in srgb,var(--red) 7%,var(--paper-2));}
.bux-s-n{font-size:20px;font-weight:800;color:var(--accent);line-height:1.15;word-break:break-word;}
.bux-s.kech .bux-s-n{color:var(--red);}
.bux-s-t{font-size:11px;color:var(--hint);font-weight:600;margin-top:3px;}

.bux-sarl{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
          color:var(--hint);margin:18px 0 8px;}
.bux-bosh{background:var(--paper-2);border:1px dashed var(--rule);border-radius:var(--rl);
          padding:16px;text-align:center;color:var(--hint);font-size:13px;}
.bux-bosh i{color:var(--green);margin-right:5px;}

.bux-k{background:var(--paper-2);border:1px solid var(--rule-2);border-left:3px solid var(--accent);
       border-radius:var(--rs);padding:10px 12px;margin-bottom:8px;cursor:pointer;}
.bux-k:hover{border-color:var(--accent);}
.bux-k-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;margin-bottom:6px;}
.bux-lot{font-size:11px;font-weight:700;background:var(--paper);border:1px solid var(--rule);
         border-radius:4px;padding:1px 6px;color:var(--hint);}
.bux-mij{font-size:12px;color:var(--hint);}
.bux-k-i{display:flex;gap:6px;flex-wrap:wrap;}
.bux-ish{font-size:11px;font-weight:700;border-radius:4px;padding:2px 7px;
         background:var(--paper);border:1px solid var(--rule);color:var(--hint);}
.bux-ish.x1{border-color:var(--accent);color:var(--accent);}
.bux-ish.x2{border-color:var(--red);color:var(--red);
            background:color-mix(in srgb,var(--red) 8%,var(--paper));}

.bux-jad{border:1px solid var(--rule-2);border-radius:var(--rl);overflow:hidden;}
.bux-q{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:10px 12px;
       border-bottom:1px solid var(--rule-2);cursor:pointer;align-items:center;}
.bux-q:last-child{border-bottom:none;}
.bux-q:hover{background:var(--paper-2);}
.bux-q-1{font-size:13px;display:flex;flex-direction:column;gap:2px;min-width:0;}
.bux-q-1 span{font-size:12px;color:var(--hint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bux-q-2{grid-column:1/-1;display:flex;gap:5px;flex-wrap:wrap;}
.bux-q-3{font-size:13px;font-weight:800;color:var(--accent);white-space:nowrap;}
.bux-bl{font-size:10.5px;font-weight:700;border-radius:4px;padding:1px 6px;
        display:inline-flex;align-items:center;gap:3px;border:1px solid var(--rule);}
.bux-bl i{font-size:12px;}
.bux-bl.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent);
           background:color-mix(in srgb,var(--green) 8%,transparent);}
.bux-bl.yoq{color:var(--hint);opacity:.75;}

@media(max-width:640px){
  .bux-varaq{padding:12px 10px 80px;}
  .bux-s-n{font-size:17px;}
}

/* Yo'ldagi tovar - omborda yo'q, lekin sifatdan o'tgan va kelayotgan */
.zax-yor.yol{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);}

/* To'lov usulini ro'yxatdan tuzatish - yozuvning o'zi tegilmaydi */
.tlv-usul.sel{font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid var(--rule);border-radius:5px;padding:1px 4px;margin-left:6px;
  background:var(--paper);color:var(--hint);max-width:150px;}
.tlv-usul.sel:hover{border-color:var(--accent);color:var(--accent);}

/* ═══ SOTUVCHI UCHUN OMBOR SAHIFASI ═══ */
.omb-sot{padding:14px 14px 80px;}
.omb-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px;}
.omb-stat>div{background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--rl);padding:11px;}
.omb-stat b{display:block;font-size:20px;font-weight:800;color:var(--accent);line-height:1.15;}
.omb-stat span{font-size:11px;color:var(--hint);font-weight:600;}
.omb-qid{display:flex;gap:8px;margin-bottom:12px;}
.omb-qid .input{flex:1;}
.omb-royxat{border:1px solid var(--rule-2);border-radius:var(--rl);overflow:hidden;}
.omb-q{display:flex;justify-content:space-between;align-items:center;gap:12px;
       padding:10px 12px;border-bottom:1px solid var(--rule-2);flex-wrap:wrap;}
.omb-q:last-child{border-bottom:none;}
.omb-q.yoq{opacity:.55;}
.omb-q-n{font-size:13px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0;}
.omb-olc{font-size:11px;font-weight:700;background:var(--paper);border:1px solid var(--rule);
         border-radius:4px;padding:1px 6px;color:var(--hint);}
.omb-kat{font-size:11px;color:var(--hint);}
.omb-q-r{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--hint);white-space:nowrap;}
.omb-q-r span{display:inline-flex;align-items:center;gap:3px;}
.omb-q-r i{font-size:14px;}
.omb-q-r .bnd{color:var(--red);}
.omb-q-r .kut{color:var(--accent);}
.omb-q-r .mum{color:var(--green);font-size:13px;}
.omb-q-r .mum b{font-size:15px;font-weight:800;}
.omb-bosh{padding:22px;text-align:center;color:var(--hint);font-size:13px;}
@media(max-width:640px){
  .omb-sot{padding:12px 10px 80px;}
  .omb-q{align-items:flex-start;}
  .omb-q-r{gap:9px;}
}

/* Sotuvchiga savol: bu diler mijozmi? Tizim o'zi hal qilmaydi. */
.diler-sorov{font-size:11px;font-weight:700;cursor:pointer;padding:2px 8px;border-radius:10px;
  border:1px dashed var(--accent);color:var(--accent);background:transparent;white-space:nowrap;}
.diler-sorov:hover{background:var(--accent);color:#fff;border-style:solid;}

/* Zakaz sarlavhasidagi mijoz ismi - raqam ostida, bir qarashda ko'rinsin */
.dhead-mijoz{font-size:15px;font-weight:650;color:var(--ink);margin-top:6px;
  line-height:1.35;max-width:52ch;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
@media(max-width:640px){.dhead-mijoz{font-size:14px;max-width:100%;}}

/* Diler nomi - mijoz ismidan oldin, ajralib tursin */
.dhead-diler{display:inline-block;font-size:12.5px;font-weight:700;
  background:var(--accent);color:#fff;border-radius:5px;padding:2px 8px;
  margin-right:8px;vertical-align:middle;white-space:nowrap;}