/* 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,.85)!important;backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);border-bottom:1px solid rgba(255,255,255,.6)!important;box-shadow:0 4px 20px rgba(108,92,231,.08)!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,.92)!important;backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8)!important;border-radius:20px!important;box-shadow:0 4px 16px rgba(108,92,231,.12)!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,.9)!important;backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8)!important;border-radius:18px!important;box-shadow:0 4px 16px rgba(108,92,231,.12)!important;}
.sec{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(16px);border-radius:20px!important;box-shadow:0 4px 16px rgba(108,92,231,.1)!important;}
.sec.signed{border-color:rgba(0,184,148,.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(0,184,148,.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,.92)!important;backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8)!important;border-radius:20px!important;box-shadow:0 4px 16px rgba(108,92,231,.1)!important;}
.fin-card,.chart-card,.kpi{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8)!important;border-radius:20px!important;box-shadow:0 4px 16px rgba(108,92,231,.1)!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,.88)!important;backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.9)!important;border-radius:28px!important;box-shadow:0 24px 64px rgba(108,92,231,.2)!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,.95);backdrop-filter:blur(10px);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(0,184,148,0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(0,184,148,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,184,148,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: 0 8px 24px rgba(108,92,231,0.18) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.kpi:hover, .stat:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 20px rgba(108,92,231,0.15) !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 2px 8px rgba(108,92,231,0.1) !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;
}