/* =====================================================================
   TIZIMCHI — dizayn tizimi (iOS 26 "Liquid Glass" uslubi)
   Tokenlar → asos → qobiq (sidebar/tabbar) → komponentlar → moslashuv → chop
===================================================================== */

/* ---------- 1. Tokenlar ---------- */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --tint: #007AFF; --tint-rgb: 0, 122, 255;
  --green: #34C759; --green-rgb: 52, 199, 89; --green-ink: #248A3D;
  --red: #FF3B30; --red-rgb: 255, 59, 48; --red-ink: #D70015;
  --orange: #FF9500; --orange-rgb: 255, 149, 0; --orange-ink: #C93400;
  --yellow: #FFCC00; --indigo: #5856D6; --purple: #AF52DE; --teal: #30B0C7;
  --pink: #FF2D55; --mint: #00C7BE; --cyan: #32ADE6; --gray: #8E8E93; --brown: #A2845E;

  --label: #000000; --label-2: rgba(60, 60, 67, .6); --label-3: rgba(60, 60, 67, .3); --label-4: rgba(60, 60, 67, .18);
  --bg: #F2F2F7; --bg-2: #FFFFFF; --bg-3: #F2F2F7; --bg-elev: #FFFFFF;
  --fill: rgba(120, 120, 128, .2); --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(118, 118, 128, .12); --fill-4: rgba(116, 116, 128, .08);
  --sep: rgba(60, 60, 67, .16);
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-stroke: rgba(255, 255, 255, .6);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .05);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .75);
  --seg-thumb: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --overlay: rgba(0, 0, 0, .28);
  --paper: #FFFFFF;

  --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-card: 24px; --r-sheet: 34px; --r-pill: 999px;
  /* Kichik belgilar (mask sifatida — rangi matn rangidan olinadi): ⌄, ›, ⌃⌄ */
  --ic-chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ic-chev-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --ic-updown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  --side-w: 264px;
  --tab-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.3, .5, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint: #0A84FF; --tint-rgb: 10, 132, 255;
    --green: #30D158; --green-rgb: 48, 209, 88; --green-ink: #30D158;
    --red: #FF453A; --red-rgb: 255, 69, 58; --red-ink: #FF6961;
    --orange: #FF9F0A; --orange-rgb: 255, 159, 10; --orange-ink: #FFB340;
    --yellow: #FFD60A; --indigo: #5E5CE6; --purple: #BF5AF2; --teal: #40C8E0; --pink: #FF375F;
    --label: #FFFFFF; --label-2: rgba(235, 235, 245, .6); --label-3: rgba(235, 235, 245, .3); --label-4: rgba(235, 235, 245, .16);
    --bg: #000000; --bg-2: #1C1C1E; --bg-3: #2C2C2E; --bg-elev: #2C2C2E;
    --fill: rgba(120, 120, 128, .36); --fill-2: rgba(120, 120, 128, .32);
    --fill-3: rgba(118, 118, 128, .24); --fill-4: rgba(118, 118, 128, .18);
    --sep: rgba(84, 84, 88, .55);
    --glass-bg: rgba(38, 38, 42, .66);
    --glass-stroke: rgba(255, 255, 255, .1);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, .55);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .07);
    --seg-thumb: #636366;
    --card-shadow: none;
    --overlay: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tint: #0A84FF; --tint-rgb: 10, 132, 255;
  --green: #30D158; --green-rgb: 48, 209, 88; --green-ink: #30D158;
  --red: #FF453A; --red-rgb: 255, 69, 58; --red-ink: #FF6961;
  --orange: #FF9F0A; --orange-rgb: 255, 159, 10; --orange-ink: #FFB340;
  --yellow: #FFD60A; --indigo: #5E5CE6; --purple: #BF5AF2; --teal: #40C8E0; --pink: #FF375F;
  --label: #FFFFFF; --label-2: rgba(235, 235, 245, .6); --label-3: rgba(235, 235, 245, .3); --label-4: rgba(235, 235, 245, .16);
  --bg: #000000; --bg-2: #1C1C1E; --bg-3: #2C2C2E; --bg-elev: #2C2C2E;
  --fill: rgba(120, 120, 128, .36); --fill-2: rgba(120, 120, 128, .32);
  --fill-3: rgba(118, 118, 128, .24); --fill-4: rgba(118, 118, 128, .18);
  --sep: rgba(84, 84, 88, .55);
  --glass-bg: rgba(38, 38, 42, .66);
  --glass-stroke: rgba(255, 255, 255, .1);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .07);
  --seg-thumb: #636366;
  --card-shadow: none;
  --overlay: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- 2. Asos ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--bg); color: var(--label);
  font: 400 15px/1.45 var(--font); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); letter-spacing: -.02em; }
p { margin: 0 0 8px; }
a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
:focus-visible { outline: 3px solid rgba(var(--tint-rgb), .45); outline-offset: 2px; border-radius: 10px; }
::selection { background: rgba(var(--tint-rgb), .25); }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.i { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -.22em; }
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 24px; height: 24px; }
.i-xl { width: 30px; height: 30px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--font-mono); font-size: .92em; }
.muted { color: var(--label-2); }
.faint { color: var(--label-3); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.bold { font-weight: 600; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-nw { display: flex; align-items: center; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; }
.spacer { flex: 1; }
.mt { margin-top: 12px; } .mt-lg { margin-top: 20px; } .mb { margin-bottom: 12px; }
.c-green { color: var(--green-ink); } .c-red { color: var(--red-ink); } .c-orange { color: var(--orange-ink); } .c-tint { color: var(--tint); }

/* Liquid Glass material */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* ---------- 3. Qobiq: sidebar (kompyuter), tabbar (telefon) ---------- */
/* 100vh — dvh'ni bilmaydigan eski Android WebView uchun zaxira */
.shell { min-height: 100vh; min-height: 100dvh; }
.main { padding: 0 20px 48px; max-width: 1280px; margin: 0 auto; }
/* Sahifaga kirish (iOS): faqat joy o'zgarganda — core.js → playEnter, state.js → renderView. Filtr, qidiruv, ma'lumot
   yangilanishi animatsiyasiz. Animatsiya doimiy konteynerda (#view, #set-page): ichi qayta chizilsa ham uzilmaydi.
   pg-in — bo'lim almashdi; pg-push — ichkariga (telefonda sozlamalar sahifasi); pg-pop — orqaga; pg-fade — panel ichida */
.pg-in { animation: page-in .34s var(--ease) both; }
.pg-push { animation: page-push .44s cubic-bezier(.2, .9, .3, 1) both; }
.pg-pop { animation: page-pop .4s cubic-bezier(.2, .9, .3, 1) both; }
.pg-fade { animation: page-fade .26s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes page-push { from { opacity: 0; transform: translateX(44px); } }
@keyframes page-pop { from { opacity: 0; transform: translateX(-34px); } }
@keyframes page-fade { from { opacity: 0; transform: translateY(4px); } }

.sidebar {
  position: fixed; top: 12px; bottom: 12px; left: 12px; width: var(--side-w); z-index: 40;
  border-radius: 28px; padding: 16px 12px 12px; display: none; flex-direction: column; gap: 2px;
  overflow-y: auto; overscroll-behavior: contain; /* past ekranda menyu o'zi aylanadi */
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; }
.app-icon {
  width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #3A8DFF 0%, #0A5BFF 55%, #5B3DF5 100%);
  box-shadow: 0 4px 12px rgba(10, 91, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.app-icon .i { width: 22px; height: 22px; }
.brand-logo { display: block; flex: none; width: 40px; height: 40px; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.brand-logo.tile { width: 56px; height: 56px; }
.side-shop { font: 600 16px/1.2 var(--font-display); }
.side-sub { font-size: 12.5px; color: var(--label-2); }
.side-link {
  display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 13px;
  border: 0; background: transparent; color: var(--label); font-weight: 500; font-size: 15px; text-align: left; width: 100%;
  transition: background .15s var(--ease), color .15s;
}
.side-link .i { color: var(--tint); }
.side-link:hover { background: var(--fill-4); text-decoration: none; }
.side-link.active { background: var(--tint); color: #fff; box-shadow: 0 4px 14px rgba(var(--tint-rgb), .3); }
.side-link.active .i { color: #fff; }
.side-link .count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--label-2); }
.side-link.active .count { color: rgba(255, 255, 255, .85); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--sep); padding-top: 10px; }

/* Yon panelni yig'ish (☰): faqat ikonkalar qoladi, ish joyi kengayadi. Holat har qurilmada eslab qolinadi. */
.side-name { min-width: 0; flex: 1; }
.side-toggle {
  flex: none; margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 11px; display: grid; place-items: center;
  background: transparent; color: var(--label-2); transition: background .15s var(--ease), color .15s;
}
.side-toggle:hover { background: var(--fill-4); color: var(--label); }
.side-toggle .i { width: 20px; height: 20px; }
.sidebar { transition: width .28s var(--ease), padding .28s var(--ease); }
.shell.side-min { --side-w: 84px; }
.side-min .sidebar { padding: 14px 10px 12px; }
.side-min .side-brand { flex-direction: column; gap: 10px; padding: 4px 0 12px; }
.side-min .side-name, .side-min .side-staging { display: none; }
.side-min .side-toggle { margin: 0; }
.side-min .side-link { justify-content: center; padding: 0; gap: 0; position: relative; }
.side-min .side-link > span { display: none; }
.side-min .side-link > .count:not(:empty) {
  display: block; position: absolute; top: 3px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--red); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}

.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50;
  bottom: calc(10px + env(safe-area-inset-bottom)); width: min(560px, calc(100% - 20px)); height: var(--tab-h);
  border-radius: var(--r-pill); padding: 5px; display: flex; gap: 2px;
}
.tab {
  flex: 1; min-width: 0; border: 0; background: transparent; border-radius: var(--r-pill);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--label); font: 600 10.5px/1 var(--font); letter-spacing: 0; transition: background .2s var(--ease), color .2s;
}
.tab .i { width: 24px; height: 24px; }
.tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tab.active { color: var(--tint); background: var(--fill-3); }
.tab:active { transform: scale(.94); }
.tab.bump .i { animation: tab-bump .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tab-bump { 0% { transform: scale(1); } 30% { transform: scale(.8); } 100% { transform: scale(1); } }

/* Ixcham navbar (telefonda katta sarlavha ko'rinmay qolganda) */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: calc(48px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; justify-content: center; font: 600 17px var(--font-display);
  opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .2s, transform .2s var(--ease);
  border-radius: 0; border-width: 0 0 1px 0;
}
.navbar.show { transform: none; }
.navbar.show { opacity: 1; pointer-events: auto; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 20px 0 16px; flex-wrap: wrap; }
.large-title { font: 700 34px/1.12 var(--font-display); letter-spacing: -.025em; }
.page-sub { color: var(--label-2); font-size: 15px; margin-top: 2px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; margin: 12px 0 0;
  background: rgba(var(--orange-rgb), .14); color: var(--label); font-size: 14px;
}
.banner .i { color: var(--orange-ink); }
.banner.red { background: rgba(var(--red-rgb), .12); } .banner.red .i { color: var(--red-ink); }
.banner.blue { background: rgba(var(--tint-rgb), .1); } .banner.blue .i { color: var(--tint); }
.banner.green { background: rgba(var(--green-rgb), .12); } .banner.green .i { color: var(--green-ink); }
.banner.orange { background: rgba(var(--orange-rgb), .12); } .banner.orange .i { color: var(--orange-ink); }
.banner b { font-weight: 600; }
.c-pink { color: var(--pink); font-weight: 600; }
/* Taklif qilish (referal): quvnoq yashil — sovg'a, bepul oy */
.gift-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, #34C759, #00B894); box-shadow: 0 2px 8px rgba(var(--green-rgb), .35); white-space: nowrap; }
.banner.ref-banner { width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--label);
  border: 1px solid rgba(var(--green-rgb), .35); background: linear-gradient(135deg, rgba(var(--green-rgb), .20), rgba(0, 199, 190, .12)); }
.banner.ref-banner > .i:not(.chev) { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 11px; color: #fff;
  background: linear-gradient(145deg, #34C759, #00B894); box-shadow: 0 3px 10px rgba(var(--green-rgb), .35); }
.banner.ref-banner b { color: var(--green-ink); }
.banner.ref-banner:hover { background: linear-gradient(135deg, rgba(var(--green-rgb), .26), rgba(0, 199, 190, .16)); }
.banner.ref-banner .chev { margin-left: auto; color: var(--green-ink); }
.ref-hero { text-align: center; }
.ref-hero .card-title { justify-content: center; }
.ref-gift { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #34C759, #00B894); box-shadow: 0 6px 18px rgba(var(--green-rgb), .35); }
.ref-gift .i { width: 28px; height: 28px; }
.ref-code { display: inline-flex; flex-direction: column; gap: 4px; padding: 12px 28px; border-radius: 16px; border: 2px dashed rgba(var(--green-rgb), .55); background: rgba(var(--green-rgb), .08); }
.ref-code b { font-size: 30px; letter-spacing: .12em; }
.ref-actions { justify-content: center; }
.ref-hero .stats { text-align: left; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .ref-hero .stats { gap: 8px; }
  .ref-hero .stat { padding: 10px; }
  .ref-hero .stat-v { font-size: 18px; }
  .ref-hero .stat-ic { display: none; }
  .ref-hero .stat-top .ellipsis { white-space: normal; font-size: 12px; line-height: 1.25; }
}

/* ---------- 4. Kartalar va setka ---------- */
.card { background: var(--bg-2); border-radius: var(--r-card); padding: 18px; box-shadow: var(--card-shadow); min-width: 0; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-title { font: 600 18px/1.25 var(--font-display); display: flex; align-items: center; gap: 8px; }
.card-title .i { color: var(--tint); }
.card-sub { color: var(--label-2); font-size: 13px; }
.section-label { font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--label-2); margin: 22px 16px 8px; font-weight: 500; }
.section-foot { font-size: 13px; color: var(--label-2); margin: 8px 16px 0; line-height: 1.4; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.grid-2 > .card + .card, .grid-3 > .card + .card { margin-top: 0; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col > .card + .card { margin-top: 0; }

/* Statistika "vidjetlari" */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--bg-2); border-radius: 22px; padding: 14px 16px 15px; box-shadow: var(--card-shadow);
  border: 0; text-align: left; min-width: 0; display: block; color: var(--label);
}
button.stat { cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s; }
button.stat:active { transform: scale(.98); }
button.stat:hover { box-shadow: var(--card-shadow), 0 0 0 1.5px rgba(var(--tint-rgb), .35); }
/* Bosiladigan vidjet: o'ng burchakda › — ro'yxatga o'tishi ko'rinadi */
button.stat .stat-top::after {
  content: ""; flex: none; width: 15px; height: 15px; margin-left: auto; background: var(--label-3);
  -webkit-mask: var(--ic-chev-right) center / contain no-repeat; mask: var(--ic-chev-right) center / contain no-repeat;
}
button.stat:hover .stat-top::after { background: var(--tint); }
.stat-top { display: flex; align-items: center; gap: 8px; color: var(--label-2); font-size: 13px; font-weight: 500; }
.stat-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--tint); flex: none; }
.stat-ic .i { width: 16px; height: 16px; }
.stat-v { font: 700 22px/1.15 var(--font-display); margin-top: 10px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-s { font-size: 12.5px; color: var(--label-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.bg-tint { background: var(--tint) !important; } .bg-green { background: var(--green) !important; }
.bg-orange { background: var(--orange) !important; } .bg-red { background: var(--red) !important; }
.bg-indigo { background: var(--indigo) !important; } .bg-purple { background: var(--purple) !important; }
.bg-teal { background: var(--teal) !important; } .bg-pink { background: var(--pink) !important; }
.bg-gray { background: var(--gray) !important; } .bg-mint { background: var(--mint) !important; }
.bg-yellow { background: var(--yellow) !important; } .bg-brown { background: var(--brown) !important; }

/* ---------- 5. Ro'yxatlar (iOS inset grouped) ---------- */
.list { background: var(--bg-2); border-radius: 20px; overflow: hidden; box-shadow: var(--card-shadow); }
.cell {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; position: relative;
  width: 100%; border: 0; background: transparent; text-align: left; color: var(--label); font-size: 15px;
}
.cell + .cell::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; height: 1px; background: var(--sep); }
.cell.has-ic + .cell::before, .cell + .cell.has-ic::before { left: 58px; }
button.cell:active, a.cell:active { background: var(--fill-4); }
a.cell:hover { text-decoration: none; }
.cell-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--tint); flex: none; }
.cell-ic .i { width: 18px; height: 18px; }
.cell-t { flex: 1; min-width: 0; }
.cell-t .sub { font-size: 13px; color: var(--label-2); margin-top: 1px; }
.cell-v { color: var(--label-2); font-size: 15px; text-align: right; }
.cell .chev { color: var(--label-3); width: 18px; height: 18px; }
.cell.active { background: rgba(var(--tint-rgb), .1); }
.cell input:not([type=checkbox]) { background: transparent; border: 0; text-align: right; padding: 0; min-height: 0; height: auto; box-shadow: none; }
/* Ro'yxat qatoridagi tanlov (iOS «pop-up button»): kulrang tugma + ⌃⌄ belgisi — bosilsa variantlar chiqishi darhol ko'rinadi */
.cell select {
  width: auto; flex: 0 1 auto; min-width: 0; max-width: 62%; min-height: 34px; height: 34px; padding: 0 30px 0 12px; border-radius: 10px;
  background-color: var(--fill-3); background-position: right 10px center; background-size: 13px;
  font-size: 15px; font-weight: 500; text-overflow: ellipsis; box-shadow: none;
}
.cell select:hover { background-color: var(--fill-2); }
.cell select:focus { background-color: var(--fill-2); box-shadow: 0 0 0 3px rgba(var(--tint-rgb), .3); }

/* ---------- 6. Tugmalar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 18px;
  border-radius: var(--r-pill); border: 0; background: var(--fill-3); color: var(--label);
  font: 600 15px/1 var(--font); white-space: nowrap; text-decoration: none; user-select: none;
  transition: transform .12s var(--ease), background .15s, opacity .15s, box-shadow .15s;
}
.btn:hover { background: var(--fill-2); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn .i { width: 18px; height: 18px; }
.btn-primary { background: var(--tint); color: #fff; box-shadow: 0 4px 14px rgba(var(--tint-rgb), .28); }
.btn-primary:hover { background: var(--tint); filter: brightness(1.06); }
.btn-tinted { background: rgba(var(--tint-rgb), .13); color: var(--tint); }
.btn-tinted:hover { background: rgba(var(--tint-rgb), .19); }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 4px 14px rgba(var(--green-rgb), .3); }
.btn-green:hover { background: var(--green); filter: brightness(1.05); }
.btn-danger { background: rgba(var(--red-rgb), .12); color: var(--red-ink); }
.btn-danger:hover { background: rgba(var(--red-rgb), .18); }
.btn-plain { background: transparent; color: var(--tint); padding: 0 10px; }
.btn-plain:hover { background: var(--fill-4); }
.btn-glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-inset); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 14px; }
.btn-sm .i { width: 16px; height: 16px; }
.btn-lg { height: 54px; font-size: 17px; padding: 0 24px; }
.btn-block { width: 100%; }
.btn-icon {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--label-2);
  display: inline-grid; place-items: center; flex: none; transition: background .15s, transform .12s;
}
.btn-icon:hover { background: var(--fill-3); color: var(--label); }
.btn-icon:active { transform: scale(.92); }
.btn-icon.filled { background: var(--fill-3); color: var(--label); }
.btn-icon.tint { color: var(--tint); }
.btn-icon.danger:hover { color: var(--red-ink); background: rgba(var(--red-rgb), .1); }
.btn-icon .i { width: 19px; height: 19px; }

/* ---------- 7. Kiritish maydonlari ---------- */
.input, input:not([type]), input[type=text], input[type=number], input[type=password], input[type=search], input[type=tel],
input[type=date], input[type=time], input[type=email], input[type=url], textarea, select {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 13px; border: 0; outline: 0;
  background: var(--fill-3); color: var(--label); font-size: 16px; transition: box-shadow .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--label-3); }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(var(--tint-rgb), .35); background-color: var(--bg-2); } /* background-color — select belgisi (⌃⌄) o'chmasin */
textarea { resize: vertical; min-height: 80px; line-height: 1.45; }
/* Har qanday tanlov (select) — o'ngida ⌃⌄ belgisi: variantlar borligi bosmasdan oldin ko'rinadi */
select {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
select:hover:not(:focus) { background-color: var(--fill-2); }
select:disabled { opacity: .5; cursor: default; }
/* Sana maydoni: kalendar belgisi doim ko'rinsin */
input[type=date] { cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; padding: 2px; border-radius: 6px; }
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: .9; background-color: var(--fill-3); }
input[type=number]::-webkit-inner-spin-button { opacity: .4; }
input[data-money] { font-variant-numeric: tabular-nums; } /* pul: «160 000» */
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--label-2); font-weight: 500; }
label.field > span { padding-left: 4px; }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field-row > * { flex: 1 1 150px; min-width: 0; }
.search { position: relative; }
.search > .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--label-3); width: 18px; height: 18px; pointer-events: none; }
.search input { padding-left: 38px; }
.search .search-tail { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; }
.search.with-tail input { padding-right: 46px; }

/* Segment (iOS Segmented Control) */
.seg { display: inline-flex; background: var(--fill-3); border-radius: 11px; padding: 2px; gap: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  border: 0; background: transparent; height: 32px; padding: 0 14px; border-radius: 9px; font: 500 13.5px var(--font);
  color: var(--label); white-space: nowrap; flex: 1 0 auto; transition: background .2s var(--ease), box-shadow .2s;
}
.seg button.on { background: var(--seg-thumb); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .06); font-weight: 600; }
.seg.block { display: flex; width: 100%; }
/* Oferta va maxfiylik siyosati havolalari */
.legal-links { margin-top: 8px; font-size: 13px; }
/* Yordam xizmati bilan aloqa: yozuv, ostida telefon (qo'ng'iroq belgisi) va Telegram (logotip) — har biri o'z qatorida */
.contacts { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.center .contacts, .foot .contacts, .contacts.center { align-items: center; }
.contacts-t { font-size: 14px; color: var(--label); margin-bottom: 2px; line-height: 1.4; }
.foot .contacts-t, .center .contacts-t { color: var(--label-2); font-size: 13px; }
.contact-row {
  display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 2px 10px 2px 2px; border-radius: var(--r-pill);
  font: 600 15px/1.2 var(--font); color: var(--tint); text-decoration: none; transition: background .15s;
}
.contact-row:hover { background: rgba(var(--tint-rgb), .08); text-decoration: none; }
a.contact-row > span:not(.contact-ic) { color: inherit; } /* sahifa uslublari (oferta: .legal-req span) rangini o'zgartirmasin */
.inst-foot .contacts { align-items: center; margin: 6px 0; }
.inst-foot .contacts-t { color: var(--label-2); }
.contact-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.contact-ic.phone { background: linear-gradient(180deg, #5BE07A, #28B44A); color: #fff; box-shadow: 0 2px 6px rgba(var(--green-rgb), .35); }
.contact-ic.phone .i { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.2; }
.contact-ic .tg-logo { width: 26px; height: 26px; filter: drop-shadow(0 2px 4px rgba(42, 171, 238, .35)); }
.banner.contact-banner { align-items: flex-start; }
.banner.contact-banner > .i { margin-top: 1px; }
.rate-badge { border: 0; cursor: pointer; height: 26px; padding: 0 10px; font-size: 13px; }
.rate-badge:hover { background: rgba(var(--tint-rgb), .2); }
/* Katta summalar valyutasi: so'm | $ (sahifa sarlavhasi ostida) */
.cur-toggle { display: inline-flex; vertical-align: 1px; margin-left: 6px; padding: 2px; border-radius: 9px; background: var(--fill-3); }
.cur-toggle button { border: 0; background: transparent; color: var(--label-2); font: 600 12px/1 var(--font); padding: 5px 9px; min-width: 32px; border-radius: 7px; cursor: pointer; }
.cur-toggle button.on { background: var(--seg-thumb); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 0; background: var(--fill-3); color: var(--label);
  font: 500 14px var(--font); display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s;
}
.chip.on { background: var(--label); color: var(--bg-2); }
.chip:hover:not(.on) { background: var(--fill-2); }
.chip .i { width: 15px; height: 15px; }

/* iOS switch */
input.switch {
  -webkit-appearance: none; appearance: none; width: 51px; height: 31px; min-height: 0; padding: 0; border-radius: var(--r-pill);
  background: var(--fill); position: relative; flex: none; cursor: pointer; transition: background .25s var(--ease); box-shadow: none !important;
}
input.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06); transition: transform .3s var(--spring);
}
input.switch:checked { background: var(--green); }
input.switch:checked::after { transform: translateX(20px); }
input.switch:focus-visible { outline: 3px solid rgba(var(--tint-rgb), .45); outline-offset: 2px; }

/* Nishonlar */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  font: 600 12px/1 var(--font); background: var(--fill-3); color: var(--label-2); white-space: nowrap; letter-spacing: 0;
}
.badge .i { width: 13px; height: 13px; }
.badge.green { background: rgba(var(--green-rgb), .15); color: var(--green-ink); }
.badge.red { background: rgba(var(--red-rgb), .13); color: var(--red-ink); }
.badge.orange { background: rgba(var(--orange-rgb), .16); color: var(--orange-ink); }
.badge.blue { background: rgba(var(--tint-rgb), .13); color: var(--tint); }
.cat {
  display: inline-block; font: 500 11.5px/1.5 var(--font-mono); padding: 0 6px; border-radius: 6px; background: var(--fill-3);
  color: var(--label-2); white-space: nowrap; vertical-align: 1px; letter-spacing: 0;
}
/* Tartib raqami (1, 2, 3…) — ro'yxatdagi tovarlarni adashtirmaslik uchun */
.ln-no {
  display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 5px; margin-right: 7px;
  border-radius: 7px; background: rgba(var(--tint-rgb), .12); color: var(--tint);
  font: 600 11.5px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0; vertical-align: 1px;
}
.cell > .ln-no { margin-right: 0; }
.ln-flex { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ln-flex > .ln-no { margin: 0; }
.ln-flex > .ln-body { flex: 1 1 auto; min-width: 0; }
.ln-flex.at-input { align-items: flex-start; }
.ln-flex.at-input > .ln-no { margin-top: 9px; }
.sale-items .ln-no { min-width: 18px; height: 18px; padding: 0 4px; margin-right: 6px; border-radius: 6px; font-size: 11px; }
.dr-name > span .ln-no { min-width: 18px; height: 18px; margin-right: 5px; border-radius: 6px; font-size: 11px; }
.need { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--orange-ink); margin-top: 2px; }
.need .i { width: 14px; height: 14px; }
kbd { font: 500 11px var(--font-mono); padding: 1px 6px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--sep); border-bottom-width: 2px; color: var(--label-2); }

/* ---------- 8. Jadval ---------- */
.table-wrap { overflow-x: auto; margin: 0 -6px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 11px 8px; font-size: 14px; vertical-align: middle; }
th { font-size: 12.5px; font-weight: 600; color: var(--label-2); white-space: nowrap; padding-top: 4px; }
tbody tr { border-top: 1px solid var(--sep); }
tbody tr:hover td { background: var(--fill-4); }
td.actions { white-space: nowrap; text-align: right; width: 1%; }
td .sub { font-size: 12.5px; color: var(--label-2); }

/* Uzun ro'yxat (ombor, mijozlar, sanoq): qismlab chiziladi — oxirida holat qatori */
.list-more, .list-end {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 14px 8px 4px;
  font-size: 13px; color: var(--label-2); font-variant-numeric: tabular-nums;
}
.list-more .spin { width: 14px; height: 14px; border-width: 2px; color: var(--label-3); }
.list-more .btn-link { font-size: 13px; font-weight: 600; }
.list-more .btn-link:disabled { opacity: .5; cursor: default; text-decoration: none; }
.list-end .i { color: var(--green-ink); }
/* Jadval kartaga sig'masa — ikkinchi darajali ustunlar yashiriladi (tovar qiymati, keyin kelish narxi):
   amal tugmalari (✎, ⋯) hech qachon ekrandan chiqib ketmaydi */
.list-table { container-type: inline-size; }
/* narx ostidagi izohlar («1 blister — 7 000 so'm», ulgurji) o'raladi — ustun kengayib, tovar nomini siqib qo'ymasin */
.list-table td.nowrap .xs { white-space: normal; min-width: 92px; }
@container (max-width: 800px) { .list-table .col-val { display: none; } }
@container (max-width: 600px) { .list-table .col-cost { display: none; } }
/* Kompyuterda: jadval sarlavhasi aylantirilganda tepada qotib turadi; chapdagi ustun (AI kartasi) ham ko'rinib turadi */
@media (min-width: 1024px) {
  .list-table { overflow: visible; }
  .list-table thead th {
    position: sticky; top: 0; z-index: 3; padding-top: 12px; padding-bottom: 9px;
    background: var(--bg-2); box-shadow: inset 0 -1px 0 var(--sep);
  }
  .list-table tbody tr:first-child { border-top: 0; }
}
@media (min-width: 1024px) and (min-height: 760px) {
  .grid-2.wide-right > .col:first-child { position: sticky; top: 12px; }
}
/* «Tepaga» — uzun ro'yxatda pastga tushilganda o'ng pastda chiqadi */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 46px; height: 46px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; color: var(--tint); cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .2s var(--ease), transform .3s var(--spring);
}
.to-top .i { width: 22px; height: 22px; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:active { transform: scale(.92); }
@media (max-width: 1023px) { .to-top { right: 16px; bottom: calc(var(--tab-h) + 22px + env(safe-area-inset-bottom)); } }

/* ---------- 9. Bo'sh holat, skeleton ---------- */
.empty { text-align: center; padding: 34px 16px; color: var(--label-2); }
.empty-ic { width: 64px; height: 64px; border-radius: 20px; background: var(--fill-4); display: grid; place-items: center; margin: 0 auto 12px; color: var(--label-3); }
.empty-ic .i { width: 30px; height: 30px; }
.empty-t { font: 600 17px var(--font-display); color: var(--label); margin-bottom: 4px; }
.skel { background: linear-gradient(90deg, var(--fill-4) 0%, var(--fill-3) 50%, var(--fill-4) 100%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-line { height: 14px; margin: 10px 0; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.4px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-screen { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; color: var(--label-3); }

/* ---------- 10. AI kartasi (Apple Intelligence nuri) ---------- */
@property --ai-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
/* Rangli chegara: ::before (ichki qatlam uni 1.5px dan tashqari yopadi), nur: ::after (xiralashgan) */
.ai-card { position: relative; border-radius: var(--r-card); isolation: isolate; }
.ai-card::before, .ai-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--ai-a), #FF6B9A, #B36BFF, #4F8BFF, #2ED3E6, #FFC84A, #FF8A4C, #FF6B9A);
  animation: ai-rot 8s linear infinite;
}
.ai-card::after { inset: 6px; filter: blur(18px); opacity: .32; z-index: -2; }
.ai-card > .ai-inner { position: relative; margin: 1.5px; padding: 17px; border-radius: calc(var(--r-card) - 1.5px); background: var(--bg-2); }
.ai-card.busy::before, .ai-card.busy::after { animation-duration: 1.6s; }
.ai-card.busy::after { opacity: .6; }
@keyframes ai-rot { to { --ai-a: 360deg; } }
.ai-title { display: flex; align-items: center; gap: 8px; font: 600 17px var(--font-display); margin-bottom: 4px; }
.ai-title .i { color: #B36BFF; }
.ai-hint { color: var(--label-2); font-size: 13.5px; margin-bottom: 12px; }
.ai-grad { background: linear-gradient(90deg, #FF6B9A, #B36BFF 40%, #4F8BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.textarea-wrap { position: relative; }
.textarea-wrap textarea { padding-right: 48px; }
.textarea-wrap .mic { position: absolute; right: 6px; top: 6px; }
.mic.rec { color: var(--red); background: rgba(var(--red-rgb), .12); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.dropzone { border: 2px dashed var(--fill); border-radius: 18px; padding: 10px; transition: border-color .15s, background .15s; }
.dropzone.drag { border-color: var(--tint); background: rgba(var(--tint-rgb), .06); }
.file-pill { margin-top: 8px; display: flex; align-items: center; gap: 8px; background: var(--fill-4); border-radius: 12px; padding: 6px 6px 6px 12px; font-size: 13.5px; }

/* ---------- 11. Kassa: qidiruv natijalari, qatorlar ---------- */
.pos-search { position: relative; }
/* Natijalar karta tor bo'lsa ham keng ochiladi (uzun nomlar: «… NEXIA 2 OLD RH/LH») */
.pos-results {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 25; max-height: min(460px, 60vh); overflow-y: auto;
  width: max(100%, min(720px, calc(100vw - 48px))); border-radius: 18px; padding: 6px;
}
.pos-res {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px;
  border: 0; background: transparent; border-radius: 12px; text-align: left; color: var(--label); font-size: 14.5px;
}
.pos-res.sel, .pos-res:hover { background: rgba(var(--tint-rgb), .12); }
.pos-res .meta { font-size: 13px; color: var(--label-2); white-space: nowrap; text-align: right; line-height: 1.45; }
/* Keng ro'yxat boshqa kartalar ustiga tushadi — orqadagi matn ko'rinmasin (shisha effekti saqlanadi, fon deyarli to'q) */
.pos-results.glass { background: color-mix(in srgb, var(--bg-2) 97%, transparent); box-shadow: 0 18px 48px rgba(0, 0, 0, .18); }
.res-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.res-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3; font-weight: 500; overflow-wrap: anywhere;
}
.res-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.res-sub .res-loc { margin-top: 0; }
.pos-res .meta .out { color: var(--red-ink); font-weight: 600; }
.lines { margin-top: 8px; container-type: inline-size; }
/* Tor kartada (savat, buyurtma) — tovar nomi alohida qatorda, raqamlar ostida */
@container (max-width: 560px) {
  .lines .line { grid-template-columns: 1fr 1fr 56px 36px; row-gap: 6px; }
  .lines .line-name { grid-column: 1 / -1; }
}
.line { display: grid; grid-template-columns: 1fr 76px 118px 56px 36px; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--sep); }
.line:first-child { border-top: 0; }
.line input { min-height: 38px; padding: 7px 10px; border-radius: 11px; font-size: 15px; text-align: right; }
.line input.name-in { text-align: left; }
.line-name { min-width: 0; font-weight: 500; }
.line-name .sub { font-size: 12.5px; color: var(--label-2); font-weight: 400; margin-top: 2px; }
.cur-btn { height: 38px; border-radius: 11px; border: 0; background: var(--fill-3); font: 600 13px var(--font); color: var(--label);
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 6px; }
.cur-btn:hover { background: var(--fill-2); }
/* Bosilsa almashadi (so'm ⇄ $, joylar): ⌃⌄ belgisi */
.cur-btn::after, .loc-chip::after {
  content: ""; flex: none; width: 10px; height: 10px; background: currentColor; opacity: .5;
  -webkit-mask: var(--ic-updown) center / contain no-repeat; mask: var(--ic-updown) center / contain no-repeat;
}
.total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 6px; border-top: 1px solid var(--sep); margin-top: 4px; }
.total-row > :first-child { flex: none; }
.total-row .v { font: 700 26px/1.15 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .total-row .v { font-size: 22px; } } /* «250 000 so'm + $140.00» bir qatorga sig'adi */
.kbd-hint { font-size: 12.5px; color: var(--label-2); margin-top: 10px; line-height: 1.8; }
.sale {
  display: flex; gap: 12px; justify-content: space-between; padding: 12px 14px; border-radius: 16px; background: var(--fill-4); margin-bottom: 8px;
}
.sale.pending { background: rgba(var(--orange-rgb), .1); }
.sale-items { font-size: 14px; min-width: 0; }
.sale-items > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sale-side { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sale-sum { font-weight: 600; font-variant-numeric: tabular-nums; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 4px 8px; }
.day-head:first-child { margin-top: 0; }
.day-head .d { font: 600 15px var(--font-display); }

/* Kirim hujjati: kompyuterda har bir tovar bitta qatorda */
.draft-card { border: 1.5px solid rgba(var(--tint-rgb), .35); }
.draft-row { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(110px, 1fr) 84px 118px 118px 56px 36px; gap: 8px; align-items: start; padding: 10px 0; border-top: 1px solid var(--sep); }
.draft-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--label-2); min-width: 0; }
.draft-row input { min-height: 38px; padding: 7px 10px; font-size: 15px; }
.draft-row input[type=number], .draft-row input[data-money] { text-align: right; }
.draft-row small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; margin-top: 2px; }
.draft-row small .i { width: 13px; height: 13px; }
.draft-row .cur-btn, .draft-row .btn-icon { margin-top: 19px; }
.draft-row.with-exp { grid-template-columns: minmax(170px, 2fr) minmax(100px, 1fr) 76px 108px 108px 140px 56px 36px; }
@media (max-width: 760px) {
  .draft-row, .draft-row.with-exp { grid-template-columns: 1fr 1fr 1fr 56px 36px; }
  .draft-row .dr-name { grid-column: 1 / -1; }
  .draft-row .dr-cat { grid-column: 1 / -1; }
  .draft-row .dr-exp { grid-column: 1 / 4; }
}
/* AI kirim qoralamasi */
.draft-item { padding: 12px 0; border-top: 1px solid var(--sep); }
.draft-top { display: grid; grid-template-columns: 1fr 150px; gap: 8px; margin-bottom: 8px; }
.draft-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 60px 36px; gap: 8px; align-items: end; }
.draft-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--label-2); }
.draft-top input, .draft-grid input { min-height: 38px; padding: 8px 10px; font-size: 15px; }
@media (max-width: 520px) { .draft-top { grid-template-columns: 1fr; } .draft-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Sozlamalar: kompyuterda ikki ustun (iPad / macOS «Settings» kabi). Ikkalasi ekran balandligida va har biri o'zi
   aylanadi — sichqoncha qaysi ustun ustida bo'lsa, o'sha aylanadi; bo'lim tanlansa o'ng ustun boshidan ko'rinadi. */
.settings-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-split .section-label:first-child { margin-top: 0; }
@media (min-width: 900px) {
  .settings-split { height: var(--fit-h, calc(100vh - 140px)); align-items: stretch; }
  .set-pane {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 12px;
    /* soya va fokus chizig'i kesilmasin */
    margin: -4px -6px 0; padding: 4px 6px 28px;
  }
  .set-pane:focus { outline: none; }
  .main:has(.settings-split) { padding-bottom: 16px; }
}
/* Ichki aylantirgichlar: ingichka, macOS uslubida — faqat kerak bo'lganda ko'zga tashlanadi */
.set-pane, .pos-results, .chat-log, .receipt-preview, .xl-prev, .sheet, .sidebar {
  scrollbar-width: thin; scrollbar-color: var(--label-4) transparent;
}

/* Kengaytiriladigan qator (mijoz, buyurtma) */
.item { background: var(--fill-4); border-radius: 18px; margin-bottom: 8px; overflow: hidden; }
.item-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; border: 0; background: transparent; text-align: left; color: var(--label); }
.item-head:hover { background: var(--fill-4); }
/* Ochiladigan qator: o'ngida ⌄ — bosilsa ochilishi ko'rinadi; ochiq bo'lsa ⌃ */
.item-head::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-left: -2px; background: var(--label-3);
  -webkit-mask: var(--ic-chev-down) center / contain no-repeat; mask: var(--ic-chev-down) center / contain no-repeat;
  transition: transform .25s var(--ease), background .15s;
}
.item-head:hover::after { background: var(--label-2); }
.item-head[aria-expanded="true"]::after { transform: rotate(180deg); background: var(--tint); }
.item-title { font-weight: 600; flex: 1; min-width: 0; }
.item-title .sub { font-weight: 400; font-size: 13px; color: var(--label-2); margin-top: 1px; }
.item-body { padding: 4px 14px 14px; }
.item.just-opened .item-body { animation: item-open .3s var(--ease) both; }
.item.just-opened .item-head::after { animation: chev-open .3s var(--ease); }
.item.just-closed .item-head::after { animation: chev-close .3s var(--ease); }
@keyframes item-open { from { opacity: 0; transform: translateY(-8px); } }
@keyframes chev-open { from { transform: rotate(0deg); } }
@keyframes chev-close { from { transform: rotate(180deg); } }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 600 15px var(--font-display); color: #fff; }

/* Qarz yoshi indikatori */
.age { font-size: 12px; font-weight: 600; }
.age.warn { color: var(--orange-ink); } .age.bad { color: var(--red-ink); }

/* ---------- 12. Sheet (pastdan chiqadigan oyna) va dialog ---------- */
.sheet-bg {
  position: fixed; inset: 0; z-index: 100; background: var(--overlay); display: flex; align-items: flex-end; justify-content: center;
  animation: fade .22s var(--ease);
}
.sheet-bg.closing { animation: fade-out .2s var(--ease) forwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.sheet {
  width: calc(100% - 16px); max-width: 560px; overflow-y: auto;
  max-height: calc(100vh - 24px - env(safe-area-inset-top)); max-height: calc(100dvh - 24px - env(safe-area-inset-top));
  margin: 0 8px calc(8px + env(safe-area-inset-bottom)); background: var(--bg-2); border-radius: var(--r-sheet);
  padding: 8px 20px 20px; box-shadow: 0 -8px 60px rgba(0, 0, 0, .3); animation: sheet-up .42s var(--spring);
  overscroll-behavior: contain; touch-action: pan-y;
}
.sheet-bg.closing .sheet { animation: sheet-down .22s var(--ease) forwards; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(110%); } }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--label-3); margin: 4px auto 12px; }
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sheet-title { font: 700 21px/1.2 var(--font-display); flex: 1; letter-spacing: -.02em; }
.sheet-actions { display: flex; gap: 10px; margin-top: 18px; }
.sheet-actions > .btn { flex: 1; }
.sheet .list { box-shadow: none; background: var(--fill-4); }
@media (min-width: 760px) {
  .sheet-bg { align-items: center; padding: 20px; }
  .sheet { margin: 0; width: 100%; border-radius: 30px; padding: 22px 24px 24px; animation: pop .3s var(--spring); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
  .sheet.wide { max-width: 720px; }
  .sheet-bg.closing .sheet { animation: pop-out .18s var(--ease) forwards; }
  .grabber { display: none; }
}
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
@keyframes pop-out { to { opacity: 0; transform: scale(.96); } }
.form-err { color: var(--red-ink); font-size: 13.5px; background: rgba(var(--red-rgb), .1); border-radius: 12px; padding: 10px 12px; }
/* Amallar menyusi (⋯) */
.menu-sub { font-size: 14px; color: var(--label-2); margin: -6px 2px 14px; }
.menu-list .cell { min-height: 54px; }
.menu-list .cell:hover { background: var(--fill-4); }
.menu-list .cell.danger .cell-t { color: var(--red-ink); font-weight: 500; }
.form-note { color: var(--label-2); font-size: 13px; line-height: 1.45; }

/* ---------- 13. Toast (Dynamic Island uslubida) ---------- */
#toasts {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 24px); max-width: 440px;
}
.toast {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: var(--r-pill);
  font: 600 14.5px/1.3 var(--font); color: var(--label); pointer-events: auto; max-width: 100%;
  animation: toast-in .5s var(--spring);
}
.toast .i { color: var(--green); }
.toast.err .i { color: var(--red); }
.toast.info .i { color: var(--tint); }
.toast.out { animation: toast-out .3s var(--ease) forwards; }
.toast:not(.err):not(.info) .i path { stroke-dasharray: 12; stroke-dashoffset: 12; animation: tick .42s .2s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-24px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-16px) scale(.95); } }

/* ---------- 14. Chek ---------- */
.receipt { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: #000; }
.receipt h4 { text-align: center; margin: 0 0 2px; font: 700 15px var(--font-mono); }
.receipt .c { text-align: center; }
.receipt hr { border: 0; border-top: 1px dashed #000; margin: 7px 0; }
.receipt .l { display: flex; justify-content: space-between; gap: 8px; }
.receipt .l span:last-child { text-align: right; white-space: nowrap; }
.receipt .l.w span:last-child { white-space: normal; word-break: break-word; }
.receipt .it { margin-top: 4px; font-weight: 700; }
.receipt .sub { padding-left: 12px; font-size: 11.5px; color: #333; }
.receipt .t { font-weight: 700; font-size: 13.5px; }
/* Chekdagi tovarlar: ramkali jadval, har zapchast alohida katakda */
.receipt .rc-tbl { width: 100%; border-collapse: collapse; margin: 8px 0; }
.receipt .rc-tbl th, .receipt .rc-tbl td { border: 1px solid #000; padding: 3px 5px; vertical-align: top; text-align: left; font: 12px/1.35 var(--font-mono); color: #000; }
.receipt .rc-tbl th { font-weight: 700; font-size: 11px; background: #f2f2f2; }
.receipt .rc-tbl .n { width: 1%; text-align: center; font-weight: 700; white-space: nowrap; }
.receipt .rc-tbl .r { text-align: right; white-space: nowrap; }
.receipt .rc-tbl td:nth-child(2) { word-break: break-word; }
.receipt .rc-cat, .receipt .rc-note, .receipt .rc-qty { font-size: 11px; color: #333; }
#print-area .receipt .rc-tbl th, #print-area .receipt .rc-tbl td { font-size: 10.5px; padding: 2px 3px; }
#print-area .receipt .rc-tbl th { background: none; font-size: 9.5px; }
.receipt-preview { background: #fff; border-radius: 18px; padding: 18px; max-height: 50vh; overflow-y: auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.receipt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 420px) { .receipt-actions { grid-template-columns: 1fr; } }
.receipt-actions [data-r=tg] { grid-column: 1 / -1; }
.tg-ready { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--green-rgb), .12); font-size: 14px; }
.tg-ready .i { color: var(--green-ink); flex: none; margin-top: 1px; }
.tg-ready a { display: inline-block; margin-top: 2px; }

/* ---------- 15. Grafik ---------- */
.chart { position: relative; }
.chart svg { display: block; overflow: visible; }
.chart .gridline { stroke: var(--sep); stroke-width: 1; }
.chart .axis-label { fill: var(--label-2); font: 500 11px var(--font); }
.chart .bar { fill: var(--tint); }
.chart .bar.neg { fill: var(--red); }
.chart .bar.hover { fill: var(--indigo); }
.chart .hit { fill: transparent; cursor: pointer; }
.tooltip {
  position: absolute; pointer-events: none; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; white-space: nowrap;
  transform: translate(-50%, -100%); margin-top: -10px; z-index: 5; color: var(--label);
}
.tooltip b { font-variant-numeric: tabular-nums; }
.meter { height: 8px; border-radius: 4px; background: var(--fill-3); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 4px; background: var(--tint); }

/* ---------- 16. AI suhbat ---------- */
.chat { display: flex; flex-direction: column; height: calc(100vh - 190px); height: calc(100dvh - 190px); min-height: 440px; }
.chat-log { flex: 1; overflow-y: auto; padding: 4px 2px 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 20px; line-height: 1.5; overflow-wrap: anywhere; font-size: 15px; }
.msg.user { align-self: flex-end; background: var(--tint); color: #fff; border-bottom-right-radius: 6px; }
.msg.bot { align-self: flex-start; background: var(--fill-3); border-bottom-left-radius: 6px; }
.msg.bot ul { margin: 6px 0; padding-left: 18px; }
.msg.bot p { margin: 0 0 6px; } .msg.bot p:last-child { margin-bottom: 0; }
.chat-input { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; }
.chat-input textarea { min-height: 46px; max-height: 160px; border-radius: 23px; padding: 12px 48px 12px 16px; }
.typing { display: flex; gap: 4px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.suggest .chip { height: auto; min-height: 34px; padding: 8px 14px; text-align: left; }

/* ---------- 17. Kirish ekrani ---------- */
.auth-screen {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(var(--tint-rgb), .18), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(179, 107, 255, .16), transparent 60%),
    var(--bg);
}
.auth { width: 100%; max-width: 400px; border-radius: 34px; padding: 32px 26px 26px; text-align: center; }
.auth .app-icon { width: 76px; height: 76px; border-radius: 20px; margin: 0 auto 16px; }
.auth .app-icon .i { width: 38px; height: 38px; }
.auth .brand-logo { width: 84px; height: 84px; margin: -4px auto 16px; filter: drop-shadow(0 12px 26px rgba(4, 60, 255, .28)); }
.auth h1 { font: 700 30px var(--font-display); letter-spacing: -.02em; }
.auth .sub { color: var(--label-2); margin: 4px 0 22px; }
.auth form { text-align: left; }
.auth .list { background: var(--fill-4); box-shadow: none; margin-bottom: 14px; }
.auth .cell { min-height: 54px; }
.auth .cell input { background: transparent; box-shadow: none !important; padding: 0; font-size: 16px; text-align: left; }
.auth .foot { font-size: 13px; color: var(--label-2); margin-top: 16px; text-align: center; line-height: 1.6; }

/* O'zi ro'yxatdan o'tish va parolni tiklash */
.btn-link { border: 0; background: none; padding: 0; color: var(--tint); font: inherit; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.auth .forgot { display: block; margin: 12px auto 0; font-size: 14px; }
.signup-cta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sep); display: grid; gap: 8px; font-size: 14px; color: var(--label-2); }
.auth.signup .app-icon.tg { background: #229ED9; }
.auth.signup .app-icon.ok { background: var(--green); }
.auth input[name=promo]:placeholder-shown { font-family: var(--font); }
.signup-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--label-2); margin: 0 4px 14px; text-align: left; line-height: 1.45; }
.signup-agree input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--tint); }
.signup-steps { text-align: left; margin: 0 0 16px; padding-left: 22px; line-height: 1.5; color: var(--label); }
.signup-steps li { margin: 4px 0; }
.signup-wait { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; color: var(--label-2); font-size: 14px; }
/* Yuqori qator: «‹ Orqaga» chapda, til o'ngda (Telegram'dan qaytganda ham darhol ko'rinadi) */
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -10px -6px 18px; }
.auth-top .lang-switch { margin: 0; }
.auth-back { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 12px 0 6px; border: 0; border-radius: 17px;
  background: var(--fill-4); color: var(--tint); font: 600 15px var(--font); cursor: pointer; }
.auth-back .i { width: 20px; height: 20px; }
.auth-back:hover { background: var(--fill-3); }
.auth-hint { font-size: 12.5px; color: var(--label-2); margin: -6px 6px 14px; line-height: 1.45; text-align: left; }
/* Xodim ruxsatlari: ro'yxatda qisqa belgilar */
.perm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.perm-chips .badge { display: inline-flex; align-items: center; gap: 3px; }
.onboard { text-align: center; }
.onboard-hero { width: 64px; height: 64px; margin: 4px auto 10px; border-radius: 18px; display: grid; place-items: center; background: var(--tint); color: #fff; }
.onboard-hero .i { width: 32px; height: 32px; }
.onboard h2 { font: 700 24px var(--font-display); margin: 0 0 6px; }
.onboard .section-label, .onboard .list, .onboard .banner { text-align: left; }

/* Qulflangan (obuna) ekran */
.lock-wrap { max-width: 640px; margin: 0 auto; padding: 24px 16px 60px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.plan {
  border: 2px solid transparent; border-radius: 22px; padding: 16px; background: var(--bg-2); text-align: left; color: var(--label);
  box-shadow: var(--card-shadow); transition: border-color .15s, transform .15s var(--ease);
}
.plan:active { transform: scale(.98); }
.plan.on { border-color: var(--tint); box-shadow: 0 0 0 4px rgba(var(--tint-rgb), .12); }
.plan .p-name { font: 700 17px var(--font-display); }
.plan .p-price { font: 700 22px var(--font-display); margin-top: 6px; font-variant-numeric: tabular-nums; }
.plan .p-desc { font-size: 13px; color: var(--label-2); margin-top: 6px; line-height: 1.4; }
.pay-btn { height: 56px; border-radius: 18px; font-size: 17px; }
.pay-payme { background: #00CCCC; color: #fff; }
.pay-click { background: #0B6BF5; color: #fff; }
.pay-uzum { background: #7000FF; color: #fff; }
a.pay-btn { text-decoration: none; }

/* ---------- 18. Skaner ---------- */
.scanner { position: relative; border-radius: 22px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner .frame { position: absolute; inset: 22% 12%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.scanner .laser { position: absolute; left: 14%; right: 14%; top: 50%; height: 2px; background: #FF3B30; box-shadow: 0 0 12px #FF3B30; animation: laser 1.8s ease-in-out infinite; }
@keyframes laser { 0%, 100% { transform: translateY(-40px); } 50% { transform: translateY(40px); } }

/* ---------- 17b. Aralash to'lov: naqd + karta + o'tkazma + qarz ---------- */
.pay-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pay-row { display: flex; align-items: center; gap: 4px; min-width: 0; padding-left: 10px; border-radius: 13px; background: var(--fill-3); transition: box-shadow .15s; }
.pay-row:focus-within { box-shadow: 0 0 0 3px rgba(var(--tint-rgb), .35); background: var(--bg-2); }
.pay-row.auto .pay-lbl { color: var(--tint); }
.pay-lbl { display: inline-flex; align-items: center; gap: 5px; flex: none; min-width: 0; padding: 6px 0; border: 0; background: none; color: var(--label-2); font: 600 13px var(--font); cursor: pointer; }
.pay-lbl:hover { color: var(--tint); }
.pay-row input[type=number], .pay-row input[data-money] { flex: 1; min-width: 0; padding-left: 6px; text-align: right; background: transparent; box-shadow: none; }
.pay-state { grid-column: 1 / -1; padding: 0 4px; font-size: 14px; }

/* ---------- 17c. Muddat, aksiya, chegirma, bonus karta ---------- */
.badge.xs { height: 20px; padding: 0 6px; font-size: 11px; gap: 3px; vertical-align: 1px; }
.badge.xs .i { width: 11px; height: 11px; }
.badge.pink { background: rgba(255, 45, 85, .13); color: var(--pink); }
.c-purple { color: var(--purple); }
.cart-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 6px 0; font-size: 14px; }
.cart-extra .i { width: 17px; height: 17px; }
.cart-bonus { padding: 8px 10px; border-radius: var(--r-sm); background: rgba(175, 82, 222, .08); }
.cart-bonus > .row-nw .i { color: var(--purple); }
.cart-bonus .bonus-in { width: 120px; min-height: 34px; padding: 5px 10px; text-align: right; }
.lots-ed { margin-top: 12px; padding: 10px; border-radius: var(--r-sm); background: var(--fill-4); }
.lot-row { display: grid; grid-template-columns: 1fr 100px 36px; gap: 6px; margin-bottom: 6px; }
.lot-row input { min-height: 38px; padding: 6px 10px; font-size: 15px; }
.bonus-card { max-width: 320px; margin: 4px auto 10px; padding: 16px; border-radius: 20px; color: #fff; text-align: center;
  background: linear-gradient(135deg, #5B3DF5, #AF52DE 60%, #FF2D55); box-shadow: 0 10px 30px rgba(91, 61, 245, .3); }
.bonus-card-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.bonus-card-top span { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bonus-card-qr { display: grid; place-items: center; min-height: 150px; }
.bonus-card-qr svg { width: 150px; height: 150px; background: #fff; border-radius: 12px; padding: 6px; }
.bonus-card-bc svg { display: block; width: 100%; height: 44px; margin-top: 10px; border-radius: 6px; }
.bonus-card .mono { margin-top: 4px; letter-spacing: .08em; }
.bonus-card-sum { margin-top: 10px; font-size: 17px; }

/* ---------- 18a. Shtrix-kod: ketma-ket skaner, topilmagan kod, do'kon turi ---------- */
.scan-status { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--fill-4); font-size: 14px; }
.scan-status:empty { visibility: hidden; }
.scan-status.ok { background: rgba(var(--green-rgb), .12); color: var(--green-ink); }
.scan-status.err { background: rgba(var(--red-rgb), .1); color: var(--red-ink); }
.scan-status .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-code { text-align: center; font-size: 22px; font-weight: 600; letter-spacing: .04em; margin: 4px 0 6px; word-break: break-all; }
.scan-test { min-height: 96px; margin-top: 12px; padding: 14px; border-radius: var(--r); background: var(--fill-4); display: grid; place-items: center; text-align: center; gap: 4px; }
.input-btns { display: flex; align-items: center; gap: 4px; }
.input-btns input { flex: 1; min-width: 0; }
.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.kind-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 12px 8px;
  border: 2px solid transparent; border-radius: var(--r); background: var(--bg-2); color: var(--label); font: 600 14px var(--font);
  text-align: center; cursor: pointer; box-shadow: var(--card-shadow);
}
.kind-card .i { color: var(--label-2); }
.kind-card.on { border-color: var(--tint); background: rgba(var(--tint-rgb), .08); }
.kind-card.on .i { color: var(--tint); }
ol.steps { margin: 6px 0 0; padding-left: 20px; } ol.steps li { margin: 5px 0; line-height: 1.45; }
@media (max-width: 420px) { .kind-grid { grid-template-columns: 1fr; } .kind-card { flex-direction: row; justify-content: flex-start; min-height: 56px; padding: 10px 14px; } }
/* ---------- Faoliyat turi: ro'yxatdan o'tgandan keyingi birinchi ekran va Sozlamalar ----------
   Har bir tur — iOS ilova belgisidek rangli belgi, nomi, qisqa izoh va tanlanganda yoqiladigan funksiyalar */
.kind-screen {
  min-height: 100vh; min-height: 100dvh; padding: 18px 16px 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(var(--tint-rgb), .16), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(179, 107, 255, .14), transparent 60%),
    var(--bg);
}
.kind-wrap { max-width: 760px; margin: 0 auto; }
.kind-top { display: flex; justify-content: flex-end; }
.kind-top .lang-switch { margin: 0; }
.kind-hero { text-align: center; padding: 18px 8px 22px; }
.kind-hero .app-icon { width: 68px; height: 68px; border-radius: 18px; margin: 0 auto 16px; }
.kind-hero .app-icon .i { width: 34px; height: 34px; }
.brand-logo.kind-logo { width: 76px; height: 76px; margin: 0 auto 14px; }
.brand-logo.onboard-logo { width: 68px; height: 68px; margin: 4px auto 10px; }
.kind-hero h1 { font: 700 30px/1.15 var(--font-display); letter-spacing: -.025em; }
.kind-hero p { margin: 8px auto 0; max-width: 480px; color: var(--label-2); font-size: 15.5px; line-height: 1.45; }
.kind-list { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
@media (min-width: 640px) { .kind-list { grid-template-columns: 1fr 1fr; } }
.kind-opt {
  position: relative; display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px 44px 16px 16px; text-align: left;
  border: 2px solid transparent; border-radius: 22px; background: var(--bg-2); color: var(--label); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .04);
  transition: transform .18s var(--ease), border-color .18s, box-shadow .18s, background .18s;
}
.kind-opt:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 10px 26px rgba(0, 0, 0, .08); }
.kind-opt:active { transform: scale(.985); }
.kind-opt.on { border-color: var(--tint); background: color-mix(in srgb, var(--bg-2) 92%, var(--tint)); box-shadow: 0 0 0 4px rgba(var(--tint-rgb), .12); }
.kind-ic {
  width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.kind-ic .i { width: 26px; height: 26px; }
.tone-orange { background: linear-gradient(145deg, #FFB340, #FF7A00); }
.tone-green { background: linear-gradient(145deg, #5BE07A, #1FA846); }
.tone-brown { background: linear-gradient(145deg, #C9A27A, #8B6A47); }
.tone-mint { background: linear-gradient(145deg, #4FE0D3, #00A79D); }
.tone-indigo { background: linear-gradient(145deg, #8A88FF, #4B49D6); }
.kind-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kind-txt b { font: 600 17px/1.25 var(--font-display); letter-spacing: -.01em; }
.kind-desc { font-size: 13.5px; line-height: 1.4; color: var(--label-2); }
.kind-feats { display: none; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kind-opt.on .kind-feats { display: flex; animation: page-in .3s var(--ease); }
.kind-feats span { font: 600 11.5px/1 var(--font); padding: 5px 8px; border-radius: var(--r-pill); background: var(--fill-4); color: var(--label-2); }
.kind-opt.on .kind-feats span { background: rgba(var(--tint-rgb), .12); color: var(--tint); }
.kind-check {
  position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--label-4); color: transparent; transition: background .18s, border-color .18s, color .18s;
}
.kind-check .i { width: 14px; height: 14px; stroke-width: 3; }
.kind-opt.on .kind-check { background: var(--tint); border-color: var(--tint); color: #fff; }
.kind-screen .kind-opt.on .kind-check { animation: check-pop .42s var(--spring); }
@keyframes check-pop { 0% { transform: scale(.55); } 100% { transform: scale(1); } }
.kind-cta {
  position: sticky; bottom: 0; z-index: 5; margin: 18px -16px 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, transparent);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.kind-cta .btn { max-width: 420px; box-shadow: 0 8px 24px rgba(var(--tint-rgb), .3); }
.kind-cta .btn:disabled { box-shadow: none; }
.kind-note { font-size: 12.5px; line-height: 1.45; color: var(--label-2); text-align: center; max-width: 420px; }
.kind-note .i { vertical-align: -3px; margin-right: 2px; }
/* Sozlamalarda — ikki ustunli ixcham ko'rinish */
.set-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.set-kinds .kind-opt { padding: 14px 40px 14px 14px; box-shadow: var(--card-shadow); }
.set-kinds .kind-ic { width: 42px; height: 42px; border-radius: 12px; }
.set-kinds .kind-ic .i { width: 22px; height: 22px; }
.set-kinds .kind-txt b { font-size: 16px; }

/* Ro'yxatdan o'tishda faoliyat turi: 2×2, ixcham */
.auth-label { font-size: 13px; font-weight: 600; color: var(--label-2); margin: 2px 6px 8px; text-align: left; }
.auth .kind-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.auth .kind-card { flex-direction: row; justify-content: flex-start; min-height: 54px; padding: 8px 10px; gap: 8px; font-size: 13.5px; line-height: 1.25; text-align: left; background: var(--fill-4); box-shadow: none; }
.auth .kind-card .i { width: 20px; height: 20px; flex: none; }
/* ---------- Dollar qarzi: to'lov oynasi, kurs izohi ---------- */
.pay-debt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--fill-4); }
.pay-debt-v { font: 700 18px/1.2 var(--font-display); color: var(--red-ink); letter-spacing: -.01em; }
.banner.rate-note { align-items: flex-start; margin-top: 10px; }
.banner.rate-note > .i { margin-top: 1px; flex: none; }
.pay-plan .list { background: var(--fill-4); }
.pay-plan .cell { min-height: 46px; }
.tx-fx { display: flex; align-items: center; gap: 4px; color: var(--tint) !important; }
.tx-fx .i { width: 12px; height: 12px; }
.rate-explain .row-nw b { font-size: 16px; }
.rate-explain p { margin: 8px 0 0; line-height: 1.45; }
.rate-ex { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rate-ex > div:not(.rate-ex-arrow) { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--fill-4); font-size: 13px; }
.rate-ex b { font: 700 17px/1.2 var(--font-display); }
.rate-ex-arrow { color: var(--label-3); flex: none; }

/* ---------- Dorixona: dori satri, Rx, analoglar, seriya ---------- */
.ph-sub { color: var(--teal); font-weight: 500; }
.ph-sub .i { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.ph-line { margin-right: 6px; }
.ph-lot { display: inline; margin-left: 2px; color: var(--label-2); font-weight: 500; } /* inline — tor ustunda ham o'raladi, jadval kengaymaydi */
.ph-lot .i { margin-right: 3px; vertical-align: -2px; }
/* Ombor filtrlari: o'ralib turadi, sonlari bilan */
.filter-chips .chip { height: 32px; padding: 0 12px; font-size: 13.5px; }
.filter-chips .chip .i { width: 14px; height: 14px; opacity: .75; }
.filter-chips .chip.on { background: var(--tint); color: #fff; }
.filter-chips .chip.on .i { opacity: 1; }
.chip-n { min-width: 18px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--fill-3); font: 600 11.5px/1.4 var(--font); text-align: center; font-variant-numeric: tabular-nums; }
.chip.on .chip-n { background: rgba(255, 255, 255, .25); }
.ph-cold { display: inline-flex; align-items: center; color: var(--cyan); font-weight: 600; }
.badge.rx { background: rgba(var(--red-rgb), .12); color: var(--red-ink); font-weight: 700; letter-spacing: .02em; }
.pos-res.analog { margin-left: 18px; width: calc(100% - 18px); border-left: 2px solid rgba(var(--green-rgb), .5); border-radius: 4px 12px 12px 4px; }
.res-an { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--green-ink); }
.res-an .i { width: 12px; height: 12px; }
.res-ph { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--teal); }
.res-ph .i { width: 12px; height: 12px; }
.ph-head { padding: 12px 14px; border-radius: var(--r); background: rgba(48, 176, 199, .1); }
.ph-head-t { font-size: 16px; }
.ph-an.out { opacity: .55; }
.ph-an .btn { flex: none; }
.lot-row.ph { grid-template-columns: 1fr 1fr 90px 36px; }

/* Kassa: xizmatlar (yetkazib berish...) */
.svc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.svc-chips .chip { height: 32px; font-size: 13.5px; }
/* Savat qatori: birlik (m² | quti), «≈ 2,08 quti», butun qutiga yaxlitlash, olib ketilmagan qism */
.line-tools { font-size: 12.5px; color: var(--label-2); font-weight: 400; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: 4px; }
.line-tools:empty { display: none; }
.line-tools .i { width: 13px; height: 13px; }
.line-tools .btn-link { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; min-height: 28px; }
.line-tools .btn-link.c-orange { color: var(--orange-ink); }
.line-tools .btn-link.soft { color: var(--label-2); font-weight: 500; }
.unit-seg { display: inline-flex; background: var(--fill-3); border-radius: 9px; padding: 2px; flex: none; }
.unit-seg button {
  border: 0; background: transparent; height: 26px; min-width: 44px; padding: 0 10px; border-radius: 7px; cursor: pointer;
  font: 500 12.5px var(--font); color: var(--label); transition: background .2s var(--ease), box-shadow .2s;
}
.unit-seg button.on { background: var(--seg-thumb); box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .06); font-weight: 600; }
/* Tovar kartasi: ulgurji narx, ikkinchi birlik, pog'onalar, kalkulyator — forma ostida, bo'lim-bo'lim */
.form-note .item-extras { color: var(--label); font-size: 15px; line-height: normal; }
.item-extras { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ie-sec { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: 16px; background: var(--fill-4); }
.ie-h { display: flex; align-items: center; gap: 6px; font: 600 14px var(--font); color: var(--label); }
.ie-h .i { color: var(--tint); }
.ie-sec .field-row > * { flex-basis: 130px; }
.ie-sec .xs { line-height: 1.4; }
/* Material kalkulyatori */
.calc-dim { display: flex; align-items: center; gap: 6px; }
.calc-dim input { flex: 1 1 0; min-width: 0; }
.calc-dim > span { color: var(--label-3); font-weight: 600; flex: none; }
.calc-row { cursor: pointer; }
.calc-row input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--tint); }
.calc-row.on { background: rgba(var(--tint-rgb), .07); }
.calc-opts { align-items: flex-end; }
/* Olib ketilmaganlar ro'yxati: qoldiq va tugma o'ng tomonda ustma-ust — nom uchun joy qoladi */
.hold-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
/* Kassa smenasi (savat tepasida) */
.shift-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; margin: -4px 0 10px; border-radius: 14px; font-size: 13.5px; }
.shift-bar.on { background: rgba(var(--green-rgb), .1); }
.shift-bar.on > span .i { color: var(--green-ink); }
.shift-bar.off { background: rgba(var(--orange-rgb), .12); }
.shift-bar.off > span .i { color: var(--orange-ink); }
.shift-bar .grow { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.shift-bar .shift-acts { display: flex; gap: 6px; margin-left: auto; }
/* «Sotish» yonidagi QR to'lov tugmasi */
.checkout-row { gap: 8px; align-items: stretch; }
.checkout-row .btn-block { flex: 1 1 auto; }
.checkout-row .qr-btn { flex: none; }
/* QR to'lov oynasi */
.qr-pay { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 4px 0 8px; }
.qr-amount { font: 700 28px/1.1 var(--font-display); letter-spacing: -.02em; }
.qr-box { width: min(280px, 72vw); aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: 18px; padding: 10px; box-shadow: var(--card-shadow); }
.qr-box svg { width: 100%; height: 100%; }
.copy-line { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.copy-line code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font: 12px/1.4 var(--font-mono); padding: 8px 10px; border-radius: 10px; background: var(--fill-3); color: var(--label); }
/* Ta'minotchiga qaytarish: qatorlar */
.sr-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 10px; }
.sr-line .sr-in { grid-column: 1 / -1; display: flex; gap: 10px; }
.sr-line .sr-in .field { flex: 1 1 0; min-width: 0; }
.sr-line .sr-in input:not([type=checkbox]) { min-height: 38px; padding: 7px 10px; border-radius: 10px; font-size: 15px; text-align: right; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--sep); }
.sr-line .sr-in input:not([type=checkbox]):focus { box-shadow: 0 0 0 3px rgba(var(--tint-rgb), .35); }
.receipt .qr { text-align: center; margin: 6px 0; }
.receipt .qr svg { width: 120px; height: 120px; }
.sl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sl-row .btn-link { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; }
/* Olib ketish tarixi: bekor qilingani o'chirilgandek ko'rinadi */
.pk-cancelled .cell-t { color: var(--label-3); }
.pk-cancelled .cell-t > b { text-decoration: line-through; }

/* ---------- 18b. Joylar, tahlil, 2FA, til ---------- */
.loc-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; margin-left: 4px; border-radius: var(--r-pill);
  border: 0; background: rgba(var(--tint-rgb), .12); color: var(--tint); font: 600 12px var(--font); vertical-align: 1px; cursor: pointer;
}
.loc-chip:hover { background: rgba(var(--tint-rgb), .2); }
.res-loc { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--label-2); margin-top: 2px; font-weight: 400; }
/* Mijoz qarzi: qaysi tovar, nechta, necha puldan */
.tx-cell { flex-wrap: wrap; row-gap: 8px; }
.tx-body { flex: 1 1 100%; min-width: 0; padding-top: 8px; border-top: 1px dashed var(--sep); }
.tx-body .sub { font-size: 13px; color: var(--label-2); margin-top: 6px; }
.tx-items { display: flex; flex-direction: column; gap: 6px; }
/* Joy yetmasa «soni × narx» nom ostiga, o'ng tomonga tushadi — nom harfma-harf bo'linib ketmaydi */
.tx-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 12px; font-size: 13.5px; }
.tx-item-name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.tx-item .num { margin-left: auto; white-space: nowrap; color: var(--label-2); }
.tx-item .num b { color: var(--label); font-weight: 600; }
.loc-chips { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap; }
.loc-mini { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--label-2); background: var(--fill-4); border-radius: 7px; padding: 1px 6px; }
.loc-mini .i { width: 12px; height: 12px; }
.shelf { display: inline; color: var(--teal); font-weight: 500; }
/* Excel'dan yuklash: ustunlarni tanlash */
.xl-prev { max-height: 220px; overflow: auto; border-radius: 12px; background: var(--fill-4); }
.xl-prev th, .xl-prev td { font-size: 12.5px; padding: 6px 8px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.xl-prev th .sub { font-weight: 500; color: var(--label); }
.xl-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.xl-map select { min-width: 0; width: 100%; }
/* Inventarizatsiya (sanoq) */
.count-tbl .count-in { width: 92px; min-height: 36px; padding: 6px 10px; border-radius: 10px; text-align: right; font-size: 15px; background: var(--fill-3); }
.count-tbl tr.flash td { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: rgba(var(--tint-rgb), .22); } }
@media (max-width: 640px) {
  .count-tbl th, .count-tbl td { padding-left: 5px; padding-right: 5px; }
  .count-tbl .count-in { width: 64px; padding: 6px 8px; }
}
.count-steps { margin: 8px 0 0; padding-left: 22px; line-height: 1.5; }
.count-steps li { margin: 4px 0; }
.btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-left: 2px; }
/* Mos mashinalar (tovar qatorida va qidiruv natijasida) */
.cars { display: inline; color: var(--indigo); font-weight: 500; }
.cars .i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.car-filter { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: var(--fill-3); color: var(--label-2); }
.car-filter select { flex: 1; min-width: 0; min-height: 38px; border: 0; background-color: transparent; background-position: right 2px center; padding: 0 26px 0 0; color: var(--label); font: 500 15px var(--font); box-shadow: none; }
.car-filter select:hover, .car-filter select:focus { background-color: transparent; box-shadow: none; }
.car-filter:focus-within { box-shadow: 0 0 0 3px rgba(var(--tint-rgb), .35); }
.car-filter:hover { background: var(--fill-2); }
.shelf .i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.hint-card { border: 1.5px dashed rgba(var(--tint-rgb), .35); background: rgba(var(--tint-rgb), .04); box-shadow: none; }
.an-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.an-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; background: var(--fill-4); font-size: 13px; color: var(--label-2); }
.an-pill b { color: var(--label); font-weight: 600; }
.an-pill.red { background: rgba(var(--red-rgb), .1); }
.an-pill.red .i { color: var(--red-ink); }
.abc { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font: 700 12.5px var(--font); color: #fff; }
.abc-A { background: var(--green); } .abc-B { background: var(--orange); } .abc-C { background: var(--gray); }
.otp-in { font: 600 30px/1 var(--font-mono) !important; letter-spacing: .35em; text-align: center; min-height: 60px !important; padding-left: .35em !important; }
.qr-box { display: inline-grid; place-items: center; background: #fff; border-radius: 18px; padding: 8px; min-height: 216px; min-width: 216px; }
.qr-box img, .qr-box svg { width: 200px; height: 200px; }
.lang-switch { margin: -8px auto 18px; display: flex; width: fit-content; }
.lang-switch button { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* ---------- 19. Moslashuv ---------- */
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: minmax(360px, 1fr) minmax(0, 1.25fr); }
  .grid-2.wide-right { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1360px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

@media (min-width: 1024px) {
  .sidebar { display: flex; }
  .tabbar, .navbar, .only-mobile { display: none !important; }
  .main { padding: 8px 28px 48px calc(var(--side-w) + 40px); max-width: calc(1280px + var(--side-w)); transition: padding-left .28s var(--ease); }
}
@media (max-width: 1023px) {
  .main { padding-bottom: calc(var(--tab-h) + 40px + env(safe-area-inset-bottom)); }
  .only-desktop { display: none !important; }
}
@media (max-width: 640px) {
  .main { padding-left: 16px; padding-right: 16px; }
  .large-title { font-size: 32px; }
  .page-head { padding-top: calc(10px + env(safe-area-inset-top)); }
  .card { padding: 16px; border-radius: 22px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px 14px; border-radius: 20px; }
  .stat-v { font-size: 19px; }
  .line { grid-template-columns: 1fr 1fr 56px 36px; row-gap: 6px; }
  .line-name { grid-column: 1 / -1; }
  .kbd-hint { display: none; }
  .hide-phone { display: none !important; }
  .chat { height: calc(100vh - 210px - var(--tab-h)); height: calc(100dvh - 210px - var(--tab-h)); }
}

/* ---------- 19b. Ochilish ekrani (splash) — js/splash.js ----------
   0 ms      ko'k belgi (iOS ilova belgisi) prujinali kattalashib paydo bo'ladi
   140 ms    oq «T» belgi ustida paydo bo'ladi
   380 ms    yashil barg belgining o'ng qirrasidan sirpanib chiqib T yonida to'xtaydi (oxirida yengil «o'tirish»)
   1250 ms   «Tizimchi» harfma-harf yoziladi
   2250 ms   ilova tayyor bo'lsa — belgi yaqinlashib yo'qoladi, keyin fon eriydi va ostidan ilova chiqadi */
.splash {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--bg); color: var(--label);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  animation: spl-failsafe 0s 10s forwards; /* skript ishlamay qolsa ham 10 soniyada yo'qoladi */
}
@keyframes spl-failsafe { to { visibility: hidden; } }
.spl-stage { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.6vh, 24px); margin-top: -6vh; }
.spl-logo { position: relative; width: clamp(112px, 32vw, 144px); aspect-ratio: 1; }
.spl-logo img, .spl-clip { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-user-drag: none; }
.spl-bg { filter: drop-shadow(0 14px 30px rgba(4, 60, 255, .3)); }
/* barg belgi qirrasidan chiqadi — belgi tashqarisida ko'rinmaydi */
.spl-clip { overflow: hidden; border-radius: 25%; }
.spl-word { display: flex; font: 700 clamp(30px, 8.6vw, 40px)/1.1 var(--font-display); letter-spacing: -.03em; }
.spl-word span { display: inline-block; }
.splash:not(.still) .spl-bg, .splash:not(.still) .spl-t, .splash:not(.still) .spl-leaf, .splash:not(.still) .spl-word span { opacity: 0; }
.splash.play .spl-bg { animation: spl-bg .7s cubic-bezier(.2, 1.25, .35, 1) both; }
.splash.play .spl-t { animation: spl-t .6s .14s cubic-bezier(.2, .8, .2, 1) both; }
.splash.play .spl-leaf { transform-origin: 72% 58%; animation: spl-leaf 1s .38s both; }
.splash.play .spl-word span { animation: spl-letter .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(1250ms + var(--i) * 50ms); }
.splash.ff .spl-bg, .splash.ff .spl-t, .splash.ff .spl-leaf, .splash.ff .spl-word span { animation-duration: 1ms !important; animation-delay: 0s !important; }
@keyframes spl-bg { from { opacity: 0; transform: scale(.7); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes spl-t { from { opacity: 0; transform: translateY(3%) scale(.84); } to { opacity: 1; transform: none; } }
@keyframes spl-leaf {
  0% { opacity: 0; transform: translateX(46%) rotate(24deg) scale(.86); animation-timing-function: cubic-bezier(.25, .7, .3, 1); }
  30% { opacity: 1; }
  80% { transform: translateX(-1.6%) rotate(-5deg) scale(1.02); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes spl-letter { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.splash.out { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .38s cubic-bezier(.4, 0, .2, 1) .12s, visibility 0s .5s; }
.splash.out .spl-stage { opacity: 0; transform: scale(1.12); transition: opacity .26s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1); }
.splash.still.out { transition: opacity .2s ease, visibility 0s .2s; }
.splash.still.out .spl-stage { opacity: 1; transform: none; transition: none; }
.app-enter #view > .page, .app-enter .auth-screen > .auth { animation: app-in .6s .1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes app-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 20. Chop etish ---------- */
#print-area { display: none; }
@media print {
  body { background: #fff; color: #000; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block; }
  #print-area .receipt { width: 72mm; font-size: 11px; }
  #print-area .receipt h4 { font-size: 14px; }
  #print-area .receipt .t { font-size: 12.5px; }
}

/* =====================================================================
   21. RESTORAN (js/rest*.js): kassa, zal va stollar, oshxona ekrani, menyu, panel, yetkazib berish, to'lov, QR-kartalar.
   Holat rangi hech qachon yagona belgi emas — yonida doim matn va belgi bor (stol, taom, yetkazish).
===================================================================== */
:root { --teal-ink: #0E7C93; --purple-ink: #8E3DBE; --indigo-ink: #4B49C7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --teal-ink: #5AD4EA; --purple-ink: #D08BF5; --indigo-ink: #9A98FF; } }
:root[data-theme="dark"] { --teal-ink: #5AD4EA; --purple-ink: #D08BF5; --indigo-ink: #9A98FF; }

/* Rang tonlari: kategoriya, taom plitkasi (rasm bo'lmasa), rang tanlovi. --tone — shu rangning o'zi */
.tone-tint { background: linear-gradient(145deg, #4DA3FF, #0A6CFF); }
.tone-red { background: linear-gradient(145deg, #FF7A70, #E0352B); }
.tone-purple { background: linear-gradient(145deg, #D58BF5, #9A3FD0); }
.tone-pink { background: linear-gradient(145deg, #FF7D98, #E62E55); }
.tone-teal { background: linear-gradient(145deg, #6FD6E8, #1E9AB3); }
.tone-yellow { background: linear-gradient(145deg, #FFD84D, #EFAE00); }
.tone-gray { background: linear-gradient(145deg, #B5B5BA, #7C7C80); }
.tone-tint { --tone: var(--tint); } .tone-red { --tone: var(--red); } .tone-purple { --tone: var(--purple); } .tone-pink { --tone: var(--pink); }
.tone-teal { --tone: var(--teal); } .tone-yellow { --tone: #E5A800; } .tone-gray { --tone: var(--gray); } .tone-orange { --tone: var(--orange); }
.tone-green { --tone: var(--green); } .tone-brown { --tone: var(--brown); } .tone-mint { --tone: var(--mint); } .tone-indigo { --tone: var(--indigo); }
/* Kategoriya rangini tanlash (Menyu → kategoriya): ● nuqtalar */
.seg button.color-dot { background: transparent; color: var(--tone); font-size: 22px; line-height: 1; padding: 0 9px; min-width: 38px; }
.seg button.color-dot.on { background: var(--seg-thumb); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), inset 0 0 0 2px var(--tone); }

/* Holat ranglari: --st (rang), --st-ink (matn) */
.st-free { --st: var(--green); --st-ink: var(--green-ink); }
.st-waiting { --st: var(--orange); --st-ink: var(--orange-ink); }
.st-cooking { --st: var(--red); --st-ink: var(--red-ink); }
.st-serving { --st: var(--teal); --st-ink: var(--teal-ink); }
.st-bill { --st: var(--purple); --st-ink: var(--purple-ink); }
.st-dirty { --st: var(--gray); --st-ink: var(--label-2); }
.badge.st-new { --st: var(--gray); --st-ink: var(--label-2); }
.badge.st-sent { --st: var(--tint); --st-ink: var(--tint); }
.badge.st-accepted { --st: var(--indigo); --st-ink: var(--indigo-ink); }
.badge.st-cooking { --st: var(--orange); --st-ink: var(--orange-ink); }
.badge.st-ready { --st: var(--green); --st-ink: var(--green-ink); }
.badge.st-served { --st: var(--teal); --st-ink: var(--teal-ink); }
.badge.st-cancelled { --st: var(--red); --st-ink: var(--red-ink); }
.badge.st-new, .badge.st-sent, .badge.st-accepted, .badge.st-cooking, .badge.st-ready, .badge.st-served, .badge.st-cancelled {
  background: color-mix(in srgb, var(--st) 15%, transparent); color: var(--st-ink);
}
.badge.purple { background: color-mix(in srgb, var(--purple) 15%, transparent); color: var(--purple-ink); }
.badge.xs { height: 19px; padding: 0 7px; font-size: 11px; gap: 3px; }
.badge.xs .i { width: 12px; height: 12px; }

/* Umumiy kichik yordamchilar */
.search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--label-3); pointer-events: none; }
.search-ic .i { width: 18px; height: 18px; }
.strike { text-decoration: line-through; color: var(--label-3); }
.ta-r { text-align: right; }
.btn-icon.sm { width: 28px; height: 28px; } .btn-icon.sm .i { width: 15px; height: 15px; }
.btn-icon-lg { width: 54px; padding: 0; flex: none; }
.btn-icon-lg .i { width: 22px; height: 22px; }
.chip.static { cursor: default; max-width: 240px; background: rgba(var(--orange-rgb), .14); color: var(--orange-ink); }
.chip.static, .chip.static span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list.flat { background: transparent; box-shadow: none; border-radius: 0; }
.card .list.flat { margin: 0 -16px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.grid2 > .card + .card { margin-top: 0; }
@media (min-width: 900px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field-inline { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.field-inline > span { width: 96px; flex: none; font-size: 14px; color: var(--label-2); font-weight: 500; }
.field-inline input { flex: 1; min-width: 0; }

/* Soni: − 2 + (iOS stepper) */
.stepper { display: inline-flex; align-items: center; background: var(--fill-3); border-radius: var(--r-pill); padding: 2px; flex: none; }
.stepper button {
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--tint);
  display: grid; place-items: center; transition: background .15s, transform .12s var(--ease);
}
.stepper button:hover { background: var(--fill-3); }
.stepper button:active { transform: scale(.86); }
.stepper button .i { width: 16px; height: 16px; }
.stepper .num { min-width: 26px; text-align: center; font: 700 15px var(--font); }
.stepper.big { padding: 3px; }
.stepper.big button { width: 46px; height: 46px; }
.stepper.big button .i { width: 20px; height: 20px; }
.stepper.big .num { min-width: 38px; font-size: 19px; }

/* ---------- Kassa (POS): taomlar + joriy buyurtma ---------- */
.rpos { display: grid; gap: 16px; }
.rpos-menu { min-width: 0; }
.rpos-search { position: relative; }
.rpos-search input { padding-left: 40px; height: 46px; border-radius: 15px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.rpos-search input:focus { background: var(--bg-2); }
.rpos-cats {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 12px -2px 14px; padding: 2px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.rpos-cats::-webkit-scrollbar { display: none; }
.rpos-cats, .qm-cats { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
.rcat {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--label); font: 600 14px var(--font); white-space: nowrap; scroll-snap-align: start;
  box-shadow: var(--card-shadow), inset 0 0 0 1px var(--sep); transition: background .2s var(--ease), color .2s, transform .12s var(--ease);
}
.rcat[class*="tone-"] { background: var(--bg-2); }
.rcat:hover { background: var(--fill-4); }
.rcat:active { transform: scale(.95); }
.rcat .i { width: 16px; height: 16px; }
.rcat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone, var(--tint)); flex: none; display: inline-block; }
.rcat.on { background: var(--label); color: var(--bg-2); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.rcat.on[class*="tone-"] { background: var(--tone); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--tone) 40%, transparent); }
.rcat.on .rcat-dot { background: #fff; }
.rpos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; align-content: start; padding: 2px 2px 14px; }
.rpos-grid > .empty, .rpos-grid > .rpos-skel { grid-column: 1 / -1; }
.rpos-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
.dish-skel { height: 172px; border-radius: 20px; }
.dish {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 8px 11px; border: 0; border-radius: 22px;
  background: var(--bg-2); color: var(--label); text-align: left; box-shadow: var(--card-shadow), 0 1px 3px rgba(0, 0, 0, .04);
  transition: transform .2s var(--spring), box-shadow .2s var(--ease);
}
.dish:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .09); }
.dish:active { transform: scale(.95); }
.dish.in { box-shadow: inset 0 0 0 2px var(--tint), 0 6px 18px rgba(var(--tint-rgb), .16); }
.dish.off { cursor: not-allowed; }
.dish.off .dish-ph { filter: grayscale(.85); opacity: .55; }
.dish.off .dish-t, .dish.off .dish-p { color: var(--label-3); }
.dish.bump { animation: dish-bump .42s var(--spring); }
@keyframes dish-bump { 35% { transform: scale(.92); } }
.dish-ph {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 15px; overflow: hidden; background-color: var(--fill-3);
  color: #fff; font: 700 24px/1 var(--font-display); letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); user-select: none;
}
.dish-ph img { width: 100%; height: 100%; object-fit: cover; }
.dish-ph.sm { width: 46px; height: 46px; aspect-ratio: auto; border-radius: 12px; font-size: 15px; flex: none; }
.dish-t { font: 600 14px/1.25 var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; padding: 0 2px; }
.dish-p { font: 700 14.5px var(--font-display); color: var(--tint); padding: 0 2px; }
.dish-off {
  position: absolute; top: 8px; left: 8px; right: 8px; aspect-ratio: 4 / 3; border-radius: 15px; display: grid; place-items: center;
  color: #fff; font: 700 13px var(--font); letter-spacing: .02em; text-transform: uppercase; background: rgba(0, 0, 0, .38);
}
.dish-n {
  position: absolute; top: -6px; right: -6px; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px; background: var(--tint); color: #fff;
  font: 700 13.5px/28px var(--font); text-align: center; box-shadow: 0 3px 10px rgba(var(--tint-rgb), .45), 0 0 0 2.5px var(--bg); animation: n-pop .4s var(--spring);
}
@keyframes n-pop { from { transform: scale(.3); opacity: 0; } }
.dish-time {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 11px;
  font: 600 11.5px var(--font); color: #fff; background: rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dish-time .i { width: 12px; height: 12px; }

/* Joriy buyurtma paneli */
.rpos-order { display: none; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg-2); border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
.rpos-order.in-sheet { display: flex; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; margin: 0 -4px; }
.rpo-head { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--sep); }
.in-sheet .rpo-head { padding: 0 4px 12px; }
.rpo-head .seg button .i { width: 15px; height: 15px; vertical-align: -3px; }
.rpo-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rpo-no { display: flex; align-items: center; gap: 6px; font: 700 21px/1.2 var(--font-display); letter-spacing: -.02em; }
.rpo-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rpo-chips .chip { height: 32px; padding: 0 12px; font-size: 13.5px; font-weight: 600; }
.rpo-lines { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--label-4) transparent; }
.in-sheet .rpo-lines { overflow: visible; padding: 6px 0; }
.rpo-hint { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 20px; text-align: center; color: var(--label-3); font-size: 14px; }
.rpo-hint .i { width: 38px; height: 38px; }
.rpo-empty { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 18px; height: 100%; }
.rpo-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--sep); background: var(--bg-2); }
.in-sheet .rpo-foot { position: sticky; bottom: 0; z-index: 2; margin-top: 4px; padding: 12px 4px 4px; box-shadow: 0 -12px 18px -14px rgba(0, 0, 0, .18); }
.rpo-sum .l { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 14px; color: var(--label-2); }
.rpo-sum .l.c-green { color: var(--green-ink); }
.rpo-sum .l.tot { color: var(--label); font: 700 23px/1.25 var(--font-display); letter-spacing: -.02em; padding-top: 4px; }
.rpo-foot .banner { margin: 0; }
.rpo-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rpo-acts .rpo-send, .rpo-acts .rpo-pay, .rpo-acts .btn-primary { flex: 1 1 128px; }
.rpo-acts .rpo-bill { flex: 1 0 auto; }
.rpo-send .chip-n { background: rgba(255, 255, 255, .26); color: #fff; }

/* Buyurtma qatori */
.rline { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 14px; transition: background .2s; }
.rline + .rline::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--sep); }
.rline.draft { background: rgba(var(--tint-rgb), .05); }
.rline.draft::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--tint); }
.rline.cancelled { opacity: .55; }
.rline.cancelled .rline-t, .rline.cancelled .rline-p { text-decoration: line-through; }
.rline.fresh { animation: line-in .5s var(--spring); }
@keyframes line-in { from { opacity: 0; transform: translateY(-8px) scale(.97); background: rgba(var(--tint-rgb), .16); } }
.rline-q { min-width: 34px; text-align: center; font: 700 15px var(--font-display); color: var(--label-2); flex: none; }
.rline-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: transparent; color: var(--label); text-align: left; }
.rline-t { font: 600 14.5px/1.3 var(--font); }
.rline-s { font-size: 12.5px; line-height: 1.35; color: var(--label-2); }
.rline-s i { font-style: normal; font-weight: 600; }
.rline-st { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.rline-p { font: 600 14.5px var(--font); white-space: nowrap; flex: none; }

/* Telefonda: pastdagi «buyurtma» paneli (tabbar ustida) */
.rpos-bar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 45; bottom: calc(var(--tab-h) + 20px + env(safe-area-inset-bottom));
  width: min(560px, calc(100% - 20px)); height: 58px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 10px; padding: 0 14px 0 7px;
  color: var(--label); font: 600 15px var(--font); text-align: left; animation: rbar-in .5s var(--spring) both; transition: transform .15s var(--ease);
}
.rpos-bar:active { transform: translateX(-50%) scale(.97); }
@keyframes rbar-in { from { opacity: 0; transform: translate(-50%, 34px); } }
.rpos-bar-ic {
  position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff;
  background: var(--tint); box-shadow: 0 4px 12px rgba(var(--tint-rgb), .35);
}
.rpos-bar-ic b {
  position: absolute; top: -4px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--red); color: #fff;
  font: 700 11.5px/21px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--bg-2);
}
.rpos-bar .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label-2); font-weight: 500; font-size: 14px; }
.rpos-bar > b { font: 700 17px var(--font-display); white-space: nowrap; }
.rpos-bar > .i { color: var(--label-3); width: 18px; height: 18px; }
@media (max-width: 859px) {
  .main:has(.rpos-bar) { padding-bottom: calc(var(--tab-h) + 104px + env(safe-area-inset-bottom)); }
}
@media (min-width: 860px) {
  .rpos { grid-template-columns: minmax(0, 1fr) minmax(320px, 384px); height: var(--fit-h, calc(100vh - 170px)); align-items: stretch; }
  .rpos-menu { display: flex; flex-direction: column; min-height: 0; }
  .rpos-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--label-4) transparent; }
  .rpos-order { display: flex; }
  .rpos-bar { display: none; }
  .main:has(.rpos) { padding-bottom: 16px; }
}
@media (min-width: 860px) and (max-width: 1023px) { .main:has(.rpos) { padding-bottom: calc(var(--tab-h) + 30px + env(safe-area-inset-bottom)); } }

/* Taom tanlovi oynasi: o'lcham, qo'shimchalar, «...siz» */
.ritem-sheet .section-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 2px 8px; }
.ritem-sheet > p { margin-bottom: 0; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.opt {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; min-width: 0; min-height: 48px; padding: 8px 14px;
  border: 0; border-radius: 15px; background: var(--fill-4); box-shadow: inset 0 0 0 1.5px var(--fill-3); color: var(--label);
  font: 500 14.5px var(--font); text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s, transform .12s var(--ease);
}
.opt:hover { background: var(--fill-3); }
.opt:active { transform: scale(.97); }
.opt span { min-width: 0; overflow-wrap: anywhere; }
.opt b { margin-left: auto; font-weight: 600; font-size: 13.5px; color: var(--label-2); white-space: nowrap; } /* sig'masa — keyingi qatorga */
.opt.on { background: rgba(var(--tint-rgb), .1); box-shadow: inset 0 0 0 2px var(--tint); }
.opt.on b { color: var(--tint); }
.opt.rem { justify-content: flex-start; }
.opt.rem .i { color: var(--label-3); }
.opt.rem.on { background: rgba(var(--red-rgb), .09); box-shadow: inset 0 0 0 2px var(--red); color: var(--red-ink); }
.opt.rem.on .i { color: var(--red-ink); }
.opt.rem.on span { text-decoration: line-through; }
.opt.chk input { position: absolute; opacity: 0; pointer-events: none; }
.ritem-foot { position: sticky; bottom: -1px; z-index: 2; display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 12px; background: var(--bg-2); }
@media (max-width: 430px) {
  .ritem-foot { gap: 8px; }
  .ritem-foot .stepper.big button { width: 40px; height: 40px; }
  .ritem-foot .stepper.big .num { min-width: 30px; font-size: 17px; }
  .ritem-foot .btn-lg { padding: 0 12px; font-size: 15.5px; }
}
.guests-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.guests-grid .opt { justify-content: center; min-height: 58px; }
.guests-grid .opt b { margin: 0 auto; font: 700 20px var(--font-display); color: var(--label); }
.guests-grid .opt.on b { color: var(--tint); }
/* Stol tanlash */
.tpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.tpick-b {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 76px; padding: 6px; border: 0; border-radius: 18px;
  background: color-mix(in srgb, var(--st, var(--gray)) 12%, var(--bg-2)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--st, var(--gray)) 34%, transparent);
  color: var(--label); transition: transform .12s var(--ease), box-shadow .15s;
}
.tpick-b.st-free { background: var(--bg-2); }
.tpick-b:active { transform: scale(.95); }
.tpick-b b { font: 800 22px/1 var(--font-display); }
.tpick-b .xs { color: var(--st-ink, var(--label-2)); font-weight: 600; text-align: center; line-height: 1.2; }
.tpick-b.on { box-shadow: inset 0 0 0 3px var(--tint); }

/* To'lov oynasi */
.rpay { display: flex; flex-direction: column; gap: 14px; }
.rpay-total { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.rpay-total b { font: 800 40px/1.1 var(--font-display); letter-spacing: -.035em; }
.rpay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.rpm {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 74px; padding: 6px; border: 0; border-radius: 17px;
  background: var(--fill-4); box-shadow: inset 0 0 0 1.5px var(--fill-3); color: var(--label); font: 600 13px var(--font);
  transition: background .15s, box-shadow .15s, color .15s, transform .12s var(--ease);
}
.rpm:active { transform: scale(.95); }
.rpm .i { width: 23px; height: 23px; color: var(--label-2); transition: color .15s; }
.rpm.on { background: rgba(var(--tint-rgb), .1); box-shadow: inset 0 0 0 2px var(--tint); color: var(--tint); }
.rpm.on .i { color: var(--tint); }
.quick-cash { margin-top: 10px; }
.quick-cash .chip { font-variant-numeric: tabular-nums; font-weight: 600; }
.rpay-change {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 15px;
  background: rgba(var(--green-rgb), .12); color: var(--green-ink); font-size: 15px; font-weight: 600; animation: fade .2s var(--ease);
}
.rpay-change b { font: 800 23px var(--font-display); }
.rpay-change.bad { background: rgba(var(--red-rgb), .1); color: var(--red-ink); }
.rpay-split summary { display: inline-flex; align-items: center; gap: 6px; color: var(--tint); font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; }
.rpay-split summary::-webkit-details-marker { display: none; }
.rpay-done { text-align: center; padding: 20px 0 2px; }
.rpay-done h2 { font: 700 25px var(--font-display); margin: 14px 0 0; }
.rpay-ok {
  width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #5BE07A, #1FA846); box-shadow: 0 12px 32px rgba(var(--green-rgb), .42); animation: pay-ok .6s var(--spring) both;
}
.rpay-ok .i { width: 46px; height: 46px; stroke-width: 3; }
.rpay-ok .i path, .rpay-ok .i polyline { stroke-dasharray: 32; stroke-dashoffset: 32; animation: tick .5s .28s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes pay-ok { from { opacity: 0; transform: scale(.35); } }

/* ---------- Buyurtmalar ro'yxati ---------- */
.rord-tools .search { min-width: 220px; }
.rord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.rord-grid > .empty { grid-column: 1 / -1; }
.rord { position: relative; background: var(--bg-2); border-radius: 20px; box-shadow: var(--card-shadow); overflow: hidden; }
.rord::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tint); }
.rord.pending::before { background: var(--orange); }
.rord.closed::before { background: var(--green); }
.rord.cancelled::before { background: var(--gray); }
.rord.cancelled .rord-main { opacity: .7; }
.rord.late { box-shadow: var(--card-shadow), inset 0 0 0 1.5px rgba(var(--red-rgb), .55); }
.rord.late::before { background: var(--red); }
.rord-main { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 14px 16px 13px 19px; border: 0; background: transparent; color: var(--label); text-align: left; transition: background .15s; }
.rord-main:hover { background: var(--fill-4); }
.rord-main:active { background: var(--fill-3); }
.rord-top { display: flex; align-items: center; gap: 8px; }
.rord-no { font: 700 18px var(--font-display); letter-spacing: -.01em; }
.rord-where { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--label-2); min-width: 0; }
.rord-items { color: var(--label-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rord-bot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.rord-bot > b { font: 700 16.5px var(--font-display); }
.rord-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px 19px; }
.rord-acts .btn { flex: 1 1 auto; min-width: 0; }
.kp { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: var(--fill-3); overflow: hidden; }
.kp i { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .5s var(--ease); }

/* ---------- Zal va stollar: katakli xarita ---------- */
.fl-legend { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lg {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--st) 14%, transparent); color: var(--st-ink); font: 600 12px var(--font);
}
.lg .i { width: 13px; height: 13px; }
.lg b { color: var(--label); margin-left: 1px; }
.fl-areas .chip-n:empty { display: none; }
.floor-wrap { container-type: inline-size; overflow-x: auto; margin: 0 -4px; padding: 6px 4px 14px; -webkit-overflow-scrolling: touch; }
.floor {
  --gap: 12px; --cell: 112px; display: grid; gap: var(--gap); width: max-content;
  grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--rows), var(--cell));
}
@supports (width: 1cqi) {
  .floor { --cell: clamp(96px, calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols)), 150px); }
}
.floor-wrap.editing .floor {
  border-radius: 14px; outline: 2px dashed var(--fill); outline-offset: 6px;
  background-image: radial-gradient(circle, var(--label-4) 1.6px, transparent 2px);
  background-size: calc(var(--cell) + var(--gap)) calc(var(--cell) + var(--gap));
  background-position: calc(var(--gap) / -2) calc(var(--gap) / -2); /* nuqta — har katak markazida */
}
/* holat rangi (--st) — .st-* klassidan; bu yerda standart qiymat yo'q, aks holda u holat rangini bosib ketadi */
.tbl {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 10px 8px;
  border: 0; border-radius: 24px; color: var(--label); text-align: center; overflow: hidden;
  background: color-mix(in srgb, var(--st) 14%, var(--bg-2));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--st) 40%, transparent), var(--card-shadow);
  transition: transform .22s var(--spring), box-shadow .2s var(--ease), background .3s var(--ease);
}
.tbl.st-free { background: var(--bg-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--st) 30%, transparent), var(--card-shadow); }
.tbl:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st) 65%, transparent), 0 8px 22px rgba(0, 0, 0, .09); }
.tbl:active { transform: scale(.95); }
.tbl.shape-round { border-radius: 50%; }
.tbl.has-ready { box-shadow: inset 0 0 0 2.5px var(--green), 0 6px 18px rgba(var(--green-rgb), .25); }
.tbl.foreign { opacity: .6; }
.tbl-name { font: 800 25px/1 var(--font-display); letter-spacing: -.03em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-st { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font: 600 11.5px/1.2 var(--font); color: var(--st-ink); }
.tbl-st span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-st .i { width: 13px; height: 13px; flex: none; }
.tbl-sum { font: 700 13.5px var(--font); }
.tbl-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--label-2); }
.tbl-w { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--st); color: #fff; font: 700 9.5px/1 var(--font); }
.tbl-seats { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--label-2); }
.tbl-seats .i { width: 13px; height: 13px; }
.tbl-ready {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--green); box-shadow: 0 2px 8px rgba(var(--green-rgb), .5); animation: bell-ring 1.6s ease-in-out infinite; transform-origin: 50% 20%;
}
.tbl-ready .i { width: 14px; height: 14px; }
.tbl.shape-round .tbl-ready { top: 9%; right: 9%; }
@keyframes bell-ring { 0%, 55%, 100% { transform: rotate(0); } 8% { transform: rotate(16deg); } 18% { transform: rotate(-13deg); } 28% { transform: rotate(9deg); } 38% { transform: rotate(-6deg); } 46% { transform: rotate(3deg); } }
.tbl-lock { position: absolute; top: 9px; left: 10px; display: flex; color: var(--label-3); }
.tbl.add { background: transparent; box-shadow: none; border: 2px dashed var(--fill); color: var(--tint); font-weight: 600; font-size: 13px; }
.tbl.add:hover { background: rgba(var(--tint-rgb), .06); border-color: var(--tint); }
.floor-wrap.editing .tbl:not(.add) { cursor: grab; touch-action: none; user-select: none; animation: jiggle .26s ease-in-out infinite alternate; }
.floor-wrap.editing .tbl:nth-child(2n):not(.add) { animation-delay: -.13s; animation-direction: alternate-reverse; }
@keyframes jiggle { from { transform: rotate(-.9deg); } to { transform: rotate(.9deg); } }
.tbl.dragging, .floor-wrap.editing .tbl.dragging { z-index: 10; cursor: grabbing; animation: none; transition: none; opacity: .94; box-shadow: 0 20px 44px rgba(0, 0, 0, .26), inset 0 0 0 2px var(--tint); }
/* Telefonda (tahrirlashdan tashqari): xarita o'rniga ixcham to'r — stollar tartib bo'yicha */
@media (max-width: 640px) {
  .floor-wrap:not(.editing) .floor { width: auto; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); grid-template-rows: none; grid-auto-rows: 106px; gap: 10px; }
  .floor-wrap:not(.editing) .tbl { grid-column: auto !important; grid-row: auto !important; }
  .floor-wrap:not(.editing) .tbl.shape-wide { grid-column: span 2 !important; }
  .tbl-name { font-size: 22px; }
}

/* ---------- Oshxona ekrani (KDS) ---------- */
.kds-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 20px 0 14px; }
.kds-head .large-title { margin-right: 6px; }
.kds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.kds > .kds-empty { grid-column: 1 / -1; }
.kds-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 140px; padding: 10px; border-radius: 26px; background: var(--fill-4); }
.kds-col-h { display: flex; align-items: center; gap: 8px; padding: 4px 6px 2px; font: 700 16px var(--font-display); }
.kds-col[data-col="new"] .kds-col-h { color: var(--tint); }
.kds-col[data-col="cooking"] .kds-col-h { color: var(--orange-ink); }
.kds-col[data-col="ready"] .kds-col-h { color: var(--green-ink); }
@media (min-width: 900px) { .kds { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kds-col { min-height: calc(100vh - 170px); } }
.kt { background: var(--bg-2); border-radius: 20px; overflow: hidden; border-top: 5px solid var(--tint); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .05); }
.kt.warn { border-top-color: var(--orange); }
.kt.late { border-top-color: var(--red); animation: kt-late 1.8s ease-in-out infinite; }
.kt.ok { border-top-color: var(--green); }
.kt.fresh .kt-h { background: rgba(var(--tint-rgb), .08); }
.kt.arrive { animation: kt-in .55s var(--spring) both; }
@keyframes kt-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes kt-late { 50% { box-shadow: 0 0 0 3px rgba(var(--red-rgb), .32), 0 6px 16px rgba(0, 0, 0, .05); } }
.kt-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.kt-no { font: 800 21px/1.1 var(--font-display); letter-spacing: -.02em; }
.kt-where { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-time { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 3px 9px; border-radius: var(--r-pill); background: var(--fill-4); color: var(--label-2); font: 700 13.5px var(--font); }
.kt-time .i { width: 13px; height: 13px; }
.kt.warn .kt-time { background: rgba(var(--orange-rgb), .15); color: var(--orange-ink); }
.kt.late .kt-time { background: var(--red); color: #fff; }
.kt-w { padding: 0 12px 4px; }
.kt-items { list-style: none; margin: 0; padding: 0 6px 6px; }
.kti + .kti { border-top: 1px solid var(--sep); }
.kti-b { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 10px 6px; border: 0; border-radius: 12px; background: transparent; color: var(--label); text-align: left; transition: background .15s; }
.kti-b:hover { background: var(--fill-4); }
.kti-b:active { background: var(--fill-3); }
.kti-q { min-width: 30px; font: 800 18px/1.2 var(--font-display); }
.kti-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font: 600 15.5px/1.3 var(--font); }
.kti-t b { font-weight: 700; }
.kti-s { font-size: 13px; font-weight: 500; color: var(--label-2); }
.kti-s.c-red { color: var(--red-ink); font-weight: 600; }
.kti-note { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: rgba(var(--orange-rgb), .13); color: var(--orange-ink); font-size: 13px; font-weight: 600; }
.kti-note .i { width: 13px; height: 13px; }
.kti-st { flex: none; padding-top: 1px; }
.kti.st-ready .kti-t, .kti.st-served .kti-t { color: var(--label-2); }
.kti.st-served .kti-t { text-decoration: line-through; }
.kt-note { display: flex; gap: 6px; align-items: flex-start; margin: 0 12px 8px; padding: 8px 10px; border-radius: 10px; background: var(--fill-4); font-size: 13px; }
.kt-note .i { margin-top: 2px; color: var(--tint); }
.kt-f { padding: 4px 10px 10px; }
.kds-empty { padding: 10px 0; }
@media (min-width: 1400px) { .kt-no { font-size: 23px; } .kti-t { font-size: 16.5px; } .kti-q { font-size: 19px; } }

/* ---------- Menyu ---------- */
.mnu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.mnu-cats-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mnu-cats-h .section-label { margin: 0 12px; }
.mnu-cats .cell .rcat-dot { width: 12px; height: 12px; margin: 0 9px; }
.mnu-cats .cell .btn-icon.sm { margin-right: -6px; }
.mnu-row { gap: 12px; }
.mnu-row.off .dish-ph, .mnu-row.off .mnu-name { opacity: .5; }
.mnu-main { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: transparent; color: var(--label); text-align: left; cursor: pointer; }
.mnu-main:hover .mnu-name { color: var(--tint); }
.mnu-name { font-weight: 600; transition: color .15s; }
.mnu-main .sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mnu-main .sub .i { width: 14px; height: 14px; }
.mnu-list .cell-v { color: var(--label); font-weight: 600; white-space: nowrap; }
@media (min-width: 900px) {
  .mnu { grid-template-columns: 290px minmax(0, 1fr); height: var(--fit-h, calc(100vh - 170px)); align-items: stretch; }
  .mnu-cats, .mnu-items { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 24px; margin: -2px -4px 0; scrollbar-width: thin; scrollbar-color: var(--label-4) transparent; }
  .main:has(.mnu) { padding-bottom: 16px; }
}
@media (max-width: 899px) {
  .mnu-cats .list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; background: transparent; box-shadow: none; border-radius: 0; padding: 2px; }
  .mnu-cats .list::-webkit-scrollbar { display: none; }
  .mnu-cats .cell { flex: none; width: auto; min-height: 40px; padding: 4px 14px 4px 6px; gap: 6px; border-radius: var(--r-pill); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--sep); }
  .mnu-cats .cell::before { display: none; }
  .mnu-cats .cell.active { background: var(--label); color: var(--bg-2); }
  .mnu-cats .cell.active .cell-v { color: inherit; opacity: .7; }
  .mnu-cats .cell .cell-ic { width: 26px; height: 26px; border-radius: 50%; }
  .mnu-cats .cell .rcat-dot { margin: 0 4px 0 8px; }
  .mnu-cats .cell-v { font-size: 13px; }
}
/* Taom formasi */
.item-top { display: flex; align-items: flex-start; gap: 16px; }
.item-photo {
  position: relative; flex: none; width: 116px; height: 116px; border-radius: 22px; overflow: hidden; display: grid; place-items: center;
  background: var(--fill-3); color: var(--label-2); transition: box-shadow .15s;
}
.item-photo:hover { box-shadow: inset 0 0 0 2px var(--tint); }
.item-photo > span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; }
.item-photo .i { width: 28px; height: 28px; }
.item-photo img { width: 100%; height: 100%; object-fit: cover; }
.item-photo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.item-photo.busy { animation: pulse 1s infinite; }
.item-form .section-label { margin: 12px 4px 0; }
.field-row.three > * { flex: 1 1 110px; }
.switch-cell { padding: 10px 14px; border-radius: 15px; background: var(--fill-4); cursor: pointer; }
.var-rows, .rec-rows, .mod-rows { display: flex; flex-direction: column; gap: 8px; }
.var-rows:empty, .rec-rows:empty { display: none; }
.var-row, .rec-row, .mod-row { display: grid; gap: 8px; align-items: center; animation: page-fade .22s var(--ease); }
.var-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 76px 36px; }
.rec-row { grid-template-columns: minmax(0, 2fr) minmax(0, .9fr) 86px 44px 36px; }
.mod-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.5fr) 86px 36px; }
.var-row input, .rec-row input, .rec-row select, .mod-row input, .mod-row select { min-height: 40px; padding: 8px 10px; font-size: 15px; }
.rec-row select, .mod-row select { padding-right: 28px; background-position: right 8px center; }
.rec-rm { position: relative; display: grid; place-items: center; height: 40px; border-radius: 12px; background: var(--fill-3); color: var(--label-3); cursor: pointer; transition: background .15s, color .15s; }
.rec-rm input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rec-rm:has(input:checked) { background: rgba(var(--orange-rgb), .16); color: var(--orange-ink); }
.rec-cost { display: flex; align-items: center; gap: 6px; min-height: 20px; color: var(--label-2); }
@media (max-width: 560px) {
  .item-top { flex-direction: column; align-items: stretch; }
  .item-photo { width: 100%; height: 170px; }
  .rec-row { grid-template-columns: minmax(0, 1fr) 86px 44px; grid-template-areas: "i i d" "q u r"; }
  .rec-row > [name=ri] { grid-area: i; } .rec-row > [name=rq] { grid-area: q; } .rec-row > [name=ru] { grid-area: u; }
  .rec-row > .rec-rm { grid-area: r; } .rec-row > [data-rdel] { grid-area: d; justify-self: center; }
  .mod-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 72px; grid-template-areas: "n n d" "p i q"; }
  .mod-row > [name=mn] { grid-area: n; } .mod-row > [name=mp] { grid-area: p; } .mod-row > [name=mi] { grid-area: i; }
  .mod-row > [name=mq] { grid-area: q; } .mod-row > [data-del] { grid-area: d; justify-self: end; }
  .var-row { grid-template-columns: minmax(0, 1fr) 96px 60px 36px; }
}

/* ---------- Umumiy panel ---------- */
.panel-tools select { width: auto; min-width: 190px; }
.live-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 10px; margin-bottom: 16px; }
.live {
  --c: var(--tint); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px; align-items: center;
  padding: 12px 14px; border: 0; border-radius: 22px; background: var(--bg-2); box-shadow: var(--card-shadow); color: var(--label); text-align: left;
  transition: transform .15s var(--ease), box-shadow .15s;
}
.live:hover { box-shadow: var(--card-shadow), 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); }
.live:active { transform: scale(.97); }
.live .i { grid-row: 1 / 3; width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.live b { font: 700 22px/1.1 var(--font-display); letter-spacing: -.02em; }
.live span { font-size: 12.5px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live.orange { --c: var(--orange); } .live.green { --c: var(--green); } .live.teal { --c: var(--teal); } .live.red { --c: var(--red); }
.live.pulse { animation: live-pulse 1.8s ease-in-out infinite; }
@keyframes live-pulse { 50% { box-shadow: var(--card-shadow), 0 0 0 4px rgba(var(--red-rgb), .24); } }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 6px; }
.bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.bar i {
  display: block; width: 100%; max-width: 38px; border-radius: 9px 9px 4px 4px; transform-origin: bottom;
  background: linear-gradient(180deg, var(--tint), color-mix(in srgb, var(--tint) 62%, var(--bg-2))); animation: bar-up .7s var(--ease) both;
}
.bar:nth-child(2n) i { animation-delay: .04s; } .bar:nth-child(3n) i { animation-delay: .08s; }
.bar span { color: var(--label-3); font-variant-numeric: tabular-nums; }
@keyframes bar-up { from { transform: scaleY(0); } }
.hbar { display: grid; grid-template-columns: minmax(90px, 32%) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; }
.hbar-l { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-t { height: 10px; border-radius: 5px; background: var(--fill-4); overflow: hidden; }
.hbar-t i { display: block; height: 100%; border-radius: inherit; background: var(--green); transform-origin: left; animation: grow-x .7s var(--ease) both; }
@keyframes grow-x { from { transform: scaleX(0); } }

/* ---------- Yetkazib berish doskasi ---------- */
.dl-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.dl-board > .empty { grid-column: 1 / -1; }
@media (min-width: 700px) { .dl-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dl-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dl-col { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 24px; background: var(--fill-4); min-width: 0; }
.dl-col-h { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font: 700 14.5px var(--font-display); }
.dl-none { text-align: center; padding: 10px; }
.dl-card {
  --st: var(--tint); display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 18px; background: var(--bg-2);
  border-left: 4px solid var(--st); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .04);
}
.dl-card.st-new { --st: var(--tint); } .dl-card.st-cooking { --st: var(--orange); } .dl-card.st-ready { --st: var(--green); }
.dl-card.st-on_way { --st: var(--purple); } .dl-card.st-delivered { --st: var(--teal); }
.dl-top { display: flex; align-items: center; gap: 6px; }
.dl-top b { font: 700 16px var(--font-display); }
.dl-who { font-size: 14.5px; font-weight: 600; }
.dl-addr { display: flex; gap: 6px; color: var(--label-2); line-height: 1.35; }
.dl-addr .i { flex: none; margin-top: 2px; }
.dl-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--label-2); }
.dl-meta .i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.dl-meta b { margin-left: auto; color: var(--label); font-size: 15px; }
.dl-acts { display: flex; gap: 8px; margin-top: 4px; }

/* ---------- Hisobot ---------- */
.rep-mode { margin: 18px 0 0; }
.tbl-rep th.r, .tbl-rep td.r { text-align: right; }
.tbl-rep td.r { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- QR-menyu kartalari (stollar uchun) ---------- */
.qr-preview { max-height: 62vh; overflow: auto; padding: 12px; border-radius: 20px; background: var(--fill-4); }
.qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.qr-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 18px; text-align: center;
  background: #fff; color: #000; border: 1px solid rgba(0, 0, 0, .08);
}
.qr-card svg { width: 100%; max-width: 150px; height: auto; }
.qr-shop { font: 700 14px/1.2 var(--font-display); }
.qr-name { font: 800 21px/1.1 var(--font-display); letter-spacing: -.02em; }
.qr-hint { font-size: 11.5px; color: #555; }
@media print {
  body.print-qr #print-area .qr-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm; }
  body.print-qr #print-area .qr-card { border: 1px dashed #999; border-radius: 4mm; padding: 6mm 4mm; break-inside: avoid; page-break-inside: avoid; }
  body.print-qr #print-area .qr-card svg { max-width: 46mm; }
  body.print-qr #print-area .qr-name { font-size: 18pt; }
}

/* =====================================================================
   21b. RESTORAN — LAVOZIM EKRANLARI VA XODIMLAR (js/rest-roles.js, js/rest-staff.js)
   Ofitsiant — katta tugmali kartalar; kassir — summa va «To'lov» birinchi; kuryer — telefon uchun, manzil va qo'ng'iroq;
   oshxona — uzoqdan o'qiladigan yirik rejim; xodim oynasi — lavozim kartochkalari, guruhlangan ruxsatlar.
===================================================================== */
.st-busy { --st: var(--gray); --st-ink: var(--label-2); }
.st-ready { --st: var(--green); --st-ink: var(--green-ink); }
.st-pending { --st: var(--orange); --st-ink: var(--orange-ink); }

/* ---------- Ofitsiant: «Stollarim» ---------- */
.wv { display: flex; flex-direction: column; gap: 18px; }
.wv-ready { margin: 0; animation: wv-glow 2.2s ease-in-out infinite; }
@keyframes wv-glow { 50% { box-shadow: 0 0 0 4px rgba(var(--green-rgb), .18); } }
.wv-sec { display: flex; flex-direction: column; gap: 10px; }
.wv-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 2px; }
.wv-h > b { font: 700 19px var(--font-display); letter-spacing: -.02em; }
.wv-h .fl-legend { margin: 0 0 0 auto; }
.wv-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; align-items: start; }
.wv-empty { padding: 4px 0; }
.wcard {
  --st: var(--tint); --st-ink: var(--tint);
  position: relative; display: flex; flex-direction: column; background: var(--bg-2); border-radius: 22px; overflow: hidden;
  box-shadow: var(--card-shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--st) 22%, transparent); animation: page-fade .3s var(--ease);
}
.wcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--st); }
.wcard.st-pending, .wcard.st-waiting { --st: var(--orange); --st-ink: var(--orange-ink); }
.wcard.st-cooking { --st: var(--red); --st-ink: var(--red-ink); }
.wcard.st-ready { --st: var(--green); --st-ink: var(--green-ink); }
.wcard.st-serving { --st: var(--teal); --st-ink: var(--teal-ink); }
.wcard.st-bill { --st: var(--purple); --st-ink: var(--purple-ink); }
.wcard.st-ready { box-shadow: var(--card-shadow), inset 0 0 0 2px color-mix(in srgb, var(--green) 55%, transparent); }
.wcard.st-ready .wcard-st { animation: pulse 1.6s ease-in-out infinite; }
.wcard-main { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 10px 20px; border: 0; background: transparent; color: var(--label); text-align: left; }
.wcard-main:active { background: var(--fill-4); }
.wcard-top { display: flex; align-items: center; gap: 10px; }
.wcard-t { font: 800 26px/1 var(--font-display); letter-spacing: -.03em; }
.wcard-st { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--st) 14%, transparent); color: var(--st-ink); font: 600 12.5px var(--font); white-space: nowrap; }
.wcard-items { color: var(--label-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wcard-bot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.wcard-bot > b { font: 700 17px var(--font-display); }
.wcard-acts { display: flex; gap: 8px; padding: 0 14px 14px 20px; flex-wrap: wrap; }
.wcard-acts .btn { flex: 1 1 auto; height: 44px; font-size: 15px; }
.wcard-acts .btn-green .chip-n { background: rgba(255, 255, 255, .26); color: #fff; }
.floor.compact {
  width: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-template-rows: none; grid-auto-rows: 104px; gap: 10px;
}
.floor.compact .tbl { grid-column: auto; grid-row: auto; }
.tbl.mine { box-shadow: inset 0 0 0 2.5px var(--tint), 0 6px 16px rgba(var(--tint-rgb), .18); }
.tbl.st-busy { background: var(--fill-4); box-shadow: inset 0 0 0 1.5px var(--fill-3); }
.tbl.st-busy .tbl-name { color: var(--label-2); }

/* ---------- Kassir: «To'lovlar» ---------- */
.pc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.pc-list > .empty { grid-column: 1 / -1; }
.pcard {
  --st: var(--tint); position: relative; display: flex; flex-direction: column; background: var(--bg-2); border-radius: 22px; overflow: hidden;
  box-shadow: var(--card-shadow); animation: page-fade .3s var(--ease);
}
.pcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--st); }
.pcard.st-bill { --st: var(--purple); }
.pcard.st-ready, .pcard.st-serving { --st: var(--green); }
.pcard.st-cooking { --st: var(--orange); }
.pcard.done { --st: var(--green); padding: 12px 16px 12px 20px; gap: 6px; }
.pcard-main { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 8px 20px; border: 0; background: transparent; color: var(--label); text-align: left; }
.pcard-main:active { background: var(--fill-4); }
.pcard-top { display: flex; align-items: center; gap: 8px; }
.pcard-no { font: 800 20px var(--font-display); }
.pcard-where { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; color: var(--label-2); }
.pcard-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pcard-pay { display: flex; align-items: center; gap: 12px; padding: 8px 14px 14px 20px; }
.pcard-pay > b { font: 800 24px/1.1 var(--font-display); letter-spacing: -.02em; flex: 1; }
.pcard-pay .btn { height: 50px; padding: 0 22px; font-size: 16px; }
.pcard-bot { display: flex; align-items: center; gap: 8px; }
.pcard-bot > b { font: 700 16px var(--font-display); }

/* ---------- Kuryer: «Yetkazishlarim» ---------- */
.cr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.cr-list > .empty { grid-column: 1 / -1; }
.ccard {
  --st: var(--tint); display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; background: var(--bg-2); border-radius: 22px;
  box-shadow: var(--card-shadow); border-top: 5px solid var(--st); animation: page-fade .3s var(--ease);
}
.ccard.st-cooking { --st: var(--orange); } .ccard.st-ready { --st: var(--green); } .ccard.st-on_way { --st: var(--purple); }
.ccard.st-delivered { --st: var(--teal); } .ccard.st-failed { --st: var(--red); }
.ccard-top { display: flex; align-items: center; gap: 8px; }
.ccard-top > b { font: 800 20px var(--font-display); }
.badge.dl-st { --st: var(--tint); --st-ink: var(--tint); background: color-mix(in srgb, var(--st) 15%, transparent); color: var(--st-ink); }
.badge.dl-st.st-cooking { --st: var(--orange); --st-ink: var(--orange-ink); } .badge.dl-st.st-ready { --st: var(--green); --st-ink: var(--green-ink); }
.badge.dl-st.st-on_way { --st: var(--purple); --st-ink: var(--purple-ink); } .badge.dl-st.st-delivered { --st: var(--teal); --st-ink: var(--teal-ink); }
.badge.dl-st.st-failed { --st: var(--red); --st-ink: var(--red-ink); }
.ccard-who { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.ccard-addr {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--fill-4); color: var(--label);
  font-size: 15px; line-height: 1.35; text-decoration: none;
}
.ccard-addr:hover { text-decoration: none; background: var(--fill-3); }
.ccard-addr > .i:first-child { color: var(--red); flex: none; margin-top: 1px; }
.ccard-addr > span { flex: 1; min-width: 0; }
.ccard-addr > .i:last-child { color: var(--label-3); flex: none; }
.ccard-items summary { cursor: pointer; color: var(--label-2); }
.ccard-pay { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: rgba(var(--orange-rgb), .12); color: var(--orange-ink); font-weight: 600; font-size: 14px; }
.ccard-pay.paid { background: rgba(var(--green-rgb), .12); color: var(--green-ink); }
.ccard-pay b { font-size: 16px; }
.ccard .banner { margin: 0; }
.ccard-acts { display: flex; gap: 8px; }
.ccard-acts .btn { height: 52px; font-size: 16px; }

/* ---------- Panel: «Xodimlar hozir» ---------- */
.sw-card { margin-bottom: 16px; }
.sw-row .cell-v { max-width: 55%; white-space: normal; }
.sw-row.warn .cell-v { color: var(--green-ink); font-weight: 600; }

/* ---------- Buyurtmalar: bekor qilish so'rovi (menejer) ---------- */
.rord-req {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 16px 12px 19px; padding: 10px 12px;
  border-radius: 14px; background: rgba(var(--red-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--red-rgb), .2);
}
.rord-req .row-nw { gap: 6px; }

/* ---------- Oshxona: so'rov belgisi, yirik rejim ---------- */
.kti-req { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: rgba(var(--red-rgb), .12);
  color: var(--red-ink); font-size: 13px; font-weight: 700; animation: pulse 1.6s ease-in-out infinite; }
.kti-req .i { width: 13px; height: 13px; }
.kds-aa { font: 800 15px/1 var(--font-display); letter-spacing: -.04em; }
.kds-aa small { font-size: 11px; }
.kds.big .kt-no { font-size: 30px; }
.kds.big .kt-where, .kds.big .kt-time { font-size: 16px; }
.kds.big .kti-q { font-size: 24px; min-width: 40px; }
.kds.big .kti-t { font-size: 21px; }
.kds.big .kti-s, .kds.big .kti-note, .kds.big .kti-req { font-size: 16px; }
.kds.big .kt-f .btn { height: 56px; font-size: 18px; }
.kds.big .kds-col-h { font-size: 19px; }

/* ---------- Xodimlar: ro'yxat ---------- */
.staff-filter { margin: 0 2px 12px; }
.staff-row { align-items: flex-start; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.staff-row.off .avatar, .staff-row.off .staff-name { opacity: .5; }
.staff-name { gap: 8px; flex-wrap: wrap; }
.staff-row > .badge, .staff-row > .btn, .staff-row > .btn-icon { align-self: center; }
.staff-row .perm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.badge.job-waiter { background: rgba(var(--orange-rgb), .15); color: var(--orange-ink); }
.badge.job-cashier { background: rgba(var(--green-rgb), .14); color: var(--green-ink); }
.badge.job-kitchen { background: rgba(var(--red-rgb), .12); color: var(--red-ink); }
.badge.job-courier { background: color-mix(in srgb, var(--purple) 15%, transparent); color: var(--purple-ink); }
.badge.job-storekeeper { background: color-mix(in srgb, var(--brown) 18%, transparent); color: var(--brown); }
.badge.job-manager { background: color-mix(in srgb, var(--indigo) 15%, transparent); color: var(--indigo-ink); }
.badge.job-admin { background: rgba(var(--tint-rgb), .13); color: var(--tint); }
.badge.job-accountant { background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal-ink); }

/* ---------- Xodim oynasi: lavozim, ish joyi, kirish, ruxsatlar ---------- */
.staff-form .section-label { margin: 14px 4px 0; }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.job-opt {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border: 0; border-radius: 16px; text-align: left;
  background: var(--fill-4); box-shadow: inset 0 0 0 1.5px var(--fill-3); color: var(--label); cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .12s var(--ease);
}
.job-opt:active { transform: scale(.98); }
.job-opt.on { background: rgba(var(--tint-rgb), .09); box-shadow: inset 0 0 0 2px var(--tint); }
.job-opt .cell-ic { width: 38px; height: 38px; border-radius: 11px; }
.job-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.job-t b { font: 600 15px var(--font); }
.job-t span { font-size: 12.5px; line-height: 1.35; color: var(--label-2); }
.perm-diff { display: flex; flex-direction: column; gap: 6px; background: rgba(var(--tint-rgb), .07); box-shadow: inset 0 0 0 1.5px rgba(var(--tint-rgb), .25); animation: pop .3s var(--spring); }
.perm-head { align-items: flex-end; }
.perm-cell.danger input.switch:checked { background: var(--orange); }
.perm-cell.dis { opacity: .6; }
.perm-cell .badge { vertical-align: 1px; }
.pw-box { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--fill-3); }
.pw-box .mono { flex: 1; font-size: 18px; letter-spacing: .06em; }
.cred .mono { font-size: 16px; }

/* ---------- Mening profilim ---------- */
.prof-card { padding: 16px 18px; }
.prof-name { font: 700 21px/1.2 var(--font-display); letter-spacing: -.02em; }

@media (max-width: 640px) {
  .wv-orders, .pc-list, .cr-list { grid-template-columns: minmax(0, 1fr); }
  .wcard-t { font-size: 24px; }
  .job-grid { grid-template-columns: minmax(0, 1fr); }
  .staff-row { flex-wrap: wrap; }
  .staff-row > .cell-t { flex-basis: calc(100% - 56px); }
}

/* =====================================================================
   22. TA'LIM (js/edu*.js): o'quvchilar, guruh kartalari, haftalik jadval, davomat varag'i, to'lovlar, panel.
   Holat rangi yagona belgi emas — yonida doim matn yoki belgi bor (davomat, dars, hisob).
===================================================================== */
.ed-tools { flex-wrap: wrap; gap: 10px; }
.ed-tools .search { min-width: 220px; margin: 0; }
.ed-tools select { max-width: 260px; }
.ed-row { gap: 12px; }
.ed-row .avatar { flex: none; }
.ed-link { display: flex; flex-direction: column; gap: 2px; min-width: 0; border: 0; background: none; padding: 0; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.ed-link .sub, .ed-row .sub { display: block; }
.ed-list .perm-chips { margin-top: 3px; }
/* rang tasmasi (guruh rangi): kartaning chap cheti */
[class*="tone-l-"] { --acc: var(--tint); }
.tone-l-tint { --acc: var(--tint); } .tone-l-orange { --acc: var(--orange); } .tone-l-green { --acc: var(--green); } .tone-l-red { --acc: var(--red); }
.tone-l-purple { --acc: var(--purple); } .tone-l-pink { --acc: var(--pink); } .tone-l-teal { --acc: var(--teal); } .tone-l-indigo { --acc: var(--indigo); }
.tone-l-brown { --acc: var(--brown); } .tone-l-yellow { --acc: var(--yellow); } .tone-l-mint { --acc: var(--mint); } .tone-l-gray { --acc: var(--gray); }
/* guruh kartalari */
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ed-gcard { display: flex; flex-direction: column; gap: 5px; text-align: left; border: 0; cursor: pointer; color: var(--label); font: inherit;
  box-shadow: var(--card-shadow), inset 4px 0 0 var(--acc); transition: transform .12s var(--ease), box-shadow .15s; }
.ed-gcard:hover { box-shadow: var(--card-shadow), inset 4px 0 0 var(--acc), 0 0 0 1.5px color-mix(in srgb, var(--acc) 40%, transparent); }
.ed-gcard:active { transform: scale(.985); }
.ed-gcard .i-sm { vertical-align: -2px; opacity: .7; }
.ed-occ { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ed-occ-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--fill-3); overflow: hidden; }
.ed-occ-bar i { display: block; height: 100%; border-radius: 3px; background: var(--acc); }
.ed-occ-bar i.full { background: var(--red); }
/* kartalar (o'quvchi, guruh) */
.ed-card-top { gap: 14px; margin-bottom: 12px; }
.ed-card-top .avatar { flex: none; }
.ed-card-tabs { margin: 4px 0 14px; overflow-x: auto; }
.ed-card-tabs button { white-space: nowrap; }
.ed-card-body { min-height: 120px; }
.ed-mini-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ed-enr .sub { display: block; }
.ed-grade { font-size: 17px; min-width: 44px; text-align: right; }
.ed-guard { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--fill-4); box-shadow: none; }
.ed-guard-opts { align-items: center; gap: 12px; flex-wrap: wrap; }
.ed-guard-opts select { max-width: 200px; }
.ed-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--label-2); cursor: pointer; }
.ed-pick { max-height: 52vh; overflow-y: auto; }
.ed-start .cell[disabled] { cursor: default; opacity: 1; }
/* haftalik jadval */
.ed-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
.ed-day { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border-radius: var(--r); background: var(--fill-4); }
.ed-day.today { background: rgba(var(--tint-rgb), .08); box-shadow: inset 0 0 0 1.5px rgba(var(--tint-rgb), .35); }
.ed-day.past { opacity: .78; }
.ed-day-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--label-2); padding: 0 2px 2px; }
.ed-day-h b { color: var(--label); font-size: 14px; }
.ed-ses { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px 7px 10px; border: 0; border-radius: 10px; background: var(--bg-2); text-align: left;
  color: var(--label); font: inherit; font-size: 13px; cursor: pointer; box-shadow: inset 3px 0 0 var(--acc), var(--card-shadow); min-width: 0; }
.ed-ses-t { font-size: 12px; color: var(--label-2); }
.ed-ses.st-done { box-shadow: inset 3px 0 0 var(--green), var(--card-shadow); }
.ed-ses.st-cancelled { opacity: .55; text-decoration: line-through; }
.ed-none { padding: 4px 2px; }
@media (max-width: 900px) {
  .ed-week { grid-template-columns: minmax(0, 1fr); }
  .ed-day { flex-direction: row; flex-wrap: wrap; }
  .ed-day-h { width: 100%; }
  .ed-ses { flex: 1 1 180px; }
}
/* bugungi darslar */
.ed-today { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ed-tcard { display: flex; flex-direction: column; gap: 4px; box-shadow: var(--card-shadow), inset 4px 0 0 var(--acc); }
.ed-tcard.off { opacity: .6; }
.ed-tcard.live { box-shadow: var(--card-shadow), inset 4px 0 0 var(--green), 0 0 0 1.5px rgba(var(--green-rgb), .45); }
.ed-ttime { font: 700 17px var(--font-display); letter-spacing: -.01em; margin-right: auto; }
.ed-tname { font: 600 17px/1.25 var(--font-display); }
.ed-tcard .badge.pulse { animation: live-pulse 1.8s ease-in-out infinite; }
/* davomat varag'i */
.ed-reg { display: flex; flex-direction: column; gap: 8px; }
.ed-reg-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--fill-4); box-shadow: inset 3px 0 0 transparent; }
.ed-reg-row.st-present { box-shadow: inset 3px 0 0 var(--green); }
.ed-reg-row.st-late { box-shadow: inset 3px 0 0 var(--orange); }
.ed-reg-row.st-absent { box-shadow: inset 3px 0 0 var(--red); }
.ed-reg-row.st-excused { box-shadow: inset 3px 0 0 var(--tint); }
.ed-att button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.ed-att button.on.present { color: var(--green-ink); } .ed-att button.on.late { color: var(--orange-ink); }
.ed-att button.on.absent { color: var(--red-ink); } .ed-att button.on.excused { color: var(--tint); }
.ed-att-x { gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-att-x:empty { display: none; }
.ed-att-x .field-inline { margin: 0; gap: 6px; font-size: 13px; color: var(--label-2); }
.ed-att-x .field-inline input { width: 96px; flex: none; }
.ed-att-x input[data-note] { min-width: 140px; }
.ed-att-x select { max-width: 220px; }
@media (max-width: 520px) { .ed-att button span { display: none; } .ed-att button .i { width: 18px; height: 18px; } }
/* baholar */
.ed-grades .cell { gap: 10px; }
.ed-five { flex: none; }
.ed-five button { min-width: 36px; }
.ed-score { width: 88px; }
.ed-mark { max-width: 120px; }
/* pul */
.ed-inv.off, .ed-pay.off { opacity: .6; }
.ed-inv .cell-v { flex: none; }
.ed-methods { flex-wrap: wrap; }
/* hisobot jadvallari */
.ed-tbl { width: 100%; }
.ed-tbl th.r, .ed-tbl td.r { text-align: right; }
.ed-sub { display: block; }

/* =====================================================================
   23. AGENTLAR VA ULGURJI BUYURTMALAR (js/agent*.js): agent ish joyi (telefon uchun), savat, ombor navbati, buyurtma kartasi
   (holatlar zinapoyasi, qatorlar jadvali, yig'ish va yetkazish formalari), agentlar va hisobot. Holat rangi yagona belgi emas —
   badge'da doim matn va belgi bor; yetmagan va qaytgan son qatorda matn bilan yoziladi.
===================================================================== */
.badge.job-agent { background: rgba(var(--orange-rgb), .14); color: var(--orange-ink); }
.ag-tools { flex-wrap: wrap; gap: 10px; }
.ag-tools .search { min-width: 220px; margin: 0; flex: 1 1 220px; }
.ag-tools select { max-width: 240px; }
.ag-tools .field-inline { margin: 0; gap: 6px; font-size: 13px; color: var(--label-2); }
.ag-tools .field-inline input { width: 150px; flex: none; }
.ag-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ag-row { gap: 12px; }
.ag-row .avatar { flex: none; }
.ag-row .sub, .ag-row .xs { display: block; }
.ag-row.off { opacity: .55; }
.ag-list .perm-chips { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ag-no { flex: none; min-width: 52px; font: 700 15px var(--font-display); color: var(--label-2); letter-spacing: -.01em; }
/* qamrov chizig'i (bugun nechta do'kon bilan ishlandi) */
.ag-bar { height: 8px; border-radius: 4px; background: var(--fill-3); overflow: hidden; }
.ag-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--green), var(--mint)); transition: width .4s var(--ease); }
.ag-quick { flex-wrap: wrap; gap: 8px; }
.ag-quick .btn { flex: 1 1 150px; }
.ag-shop-acts { flex-wrap: wrap; gap: 8px; }
.ag-shop-acts .btn-primary { flex: 1 1 100%; }
/* katalog */
.ag-cat-row { gap: 12px; align-items: center; }
.ag-cat-meta { gap: 6px; margin-top: 4px; flex-wrap: wrap; align-items: baseline; }
.ag-cat-meta b { font-size: 15px; }
.ag-find-row .sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* savat */
.ag-new { align-items: start; }
.ag-cart-shop .row-nw { gap: 12px; align-items: center; }
.ag-cart-shop .avatar { flex: none; }
.ag-lines { display: flex; flex-direction: column; gap: 8px; }
.ag-line { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--fill-4); }
.ag-line.missing { flex-direction: row; align-items: center; justify-content: space-between; box-shadow: inset 3px 0 0 var(--red); }
.ag-line-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ag-line-h .btn-icon { flex: none; margin: -4px -6px 0 0; }
.ag-line-t { min-width: 0; }
.ag-line-t b { font-weight: 600; }
.ag-line-t s { opacity: .7; }
.ag-line-c { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-line-c select { max-width: 110px; height: 36px; }
.ag-line-c .stepper input { width: 64px; height: 30px; border: 0; background: transparent; text-align: center; font: 700 15px var(--font); padding: 0; }
.ag-disc { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--label-2); }
.ag-disc input { width: 56px; height: 32px; padding: 0 6px; text-align: right; }
.ag-line-sum { margin-left: auto; font-size: 15px; white-space: nowrap; }
.ag-total .total-row { padding-top: 10px; }
.ag-cart-acts { gap: 10px; flex-wrap: wrap; }
.ag-cart-acts .btn-lg { min-width: 200px; }
/* buyurtma kartasi */
.ag-card-top { gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ag-steps { display: flex; list-style: none; margin: 4px 0 14px; padding: 0; counter-reset: s; overflow-x: auto; }
.ag-steps li { flex: 1 1 0; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; font-size: 11.5px; color: var(--label-3); text-align: center; }
.ag-steps li::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--fill-3); z-index: 0; }
.ag-steps li:first-child::before { display: none; }
.ag-steps li.done::before, .ag-steps li.cur::before { background: var(--green); }
.ag-steps .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-3); color: var(--label-3); }
.ag-steps .dot .i { width: 15px; height: 15px; }
.ag-steps li.done .dot { background: var(--green); color: #fff; }
.ag-steps li.cur .dot { background: var(--tint); color: #fff; box-shadow: 0 0 0 4px rgba(var(--tint-rgb), .18); }
.ag-steps li.cur .lbl { color: var(--label); font-weight: 600; }
.ag-steps li.done .lbl { color: var(--label-2); }
.ag-card-info .cell-t .sub a { font-weight: 500; }
.ag-card-info .cell-t .sub .i { vertical-align: -2px; }
.ag-items-wrap { overflow-x: auto; margin: 12px -4px 0; -webkit-overflow-scrolling: touch; }
.ag-items { min-width: 520px; }
.ag-items th.r, .ag-items td.r { text-align: right; white-space: nowrap; }
.ag-items td { vertical-align: top; }
.ag-items tr.short td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.ag-items .cat { margin-left: 4px; }
.ag-card-tot { margin-top: 6px; }
.ag-card-tot .total-row { padding: 8px 0 2px; }
.ag-card-tot .total-row + .total-row { border-top: 0; margin-top: 0; }
.ag-card-acts { margin-top: 14px; }
.ag-card-acts .row { flex-wrap: wrap; gap: 8px; }
.ag-card-acts .btn-primary { flex: 1 1 180px; }
.ag-timeline .cell { align-items: flex-start; }
.ag-timeline .cell > .xs { flex: none; white-space: nowrap; }
/* yig'ish va yetkazish formalari */
.ag-pick, .ag-deliver { background: var(--fill-4); box-shadow: none; }
.ag-pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--sep); flex-wrap: wrap; }
.ag-pick-row:first-of-type { border-top: 0; }
.ag-pick-row .grow { min-width: 160px; flex: 1 1 200px; }
.ag-pick-row input.num { width: 92px; flex: none; text-align: right; }
.ag-pick-row select { max-width: 190px; flex: none; }
.ag-pick-row input:not(.num) { flex: 1 1 140px; min-width: 120px; }
/* navbat */
.ag-q-chips .chip.hot:not(.on) { background: rgba(var(--tint-rgb), .12); color: var(--tint); font-weight: 600; }
.ag-queue .ag-row .badge { flex: none; }
/* agentga do'kon biriktirish */
.ag-assign { max-height: 52vh; overflow-y: auto; }
.ag-assign .cell { gap: 12px; cursor: pointer; }
.ag-assign input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--tint); }
.ag-cli { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--fill-4); color: var(--label-2); }
.ag-cli .i { vertical-align: -2px; }
.ag-rep-t { min-width: 760px; }
@media (max-width: 760px) {
  .ag-no { min-width: 44px; font-size: 14px; }
  .ag-cart-acts .btn-lg { flex: 1 1 100%; min-width: 0; }
  .ag-steps li { min-width: 44px; }
  .ag-steps li .lbl { display: none; }
  .ag-steps li.cur .lbl { display: block; white-space: nowrap; font-size: 11px; }
  .ag-items { min-width: 0; }
  .ag-items .col-price { display: none; }
  .ag-items th, .ag-items td { padding: 9px 5px; font-size: 13.5px; }
}