:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-2: #fff8eb;
  --text: #182033;
  --muted: #66708a;
  --accent: #d97706;
  --accent-2: #b45309;
  --danger: #dc2626;
  --border: rgba(24,32,51,0.10);
  --cta: #f59e0b;
  --cta-strong: #d97706;
  --cta-contrast: #ffffff;
  --shadow-soft: 0 20px 44px rgba(120, 74, 11, 0.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; touch-action: manipulation; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}
html[data-display-mode="standalone"] body {
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; transition: transform .14s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease; }
button:hover, a.linkBtn:hover, a.primaryBtn:hover, a.ghostBtn:hover { transform: translateY(-1px); }
button:active, a.linkBtn:active, a.primaryBtn:active, a.ghostBtn:active { transform: translateY(0) scale(.98); }

.container { width: min(1180px, calc(100% - 24px)); margin: 0 auto; }

.linkBtn, .primaryBtn, .ghostBtn { border-radius: 14px; padding: 11px 16px; border: 1px solid rgba(194, 106, 22, 0.14); }
.primaryBtn { background: linear-gradient(135deg, var(--cta), var(--cta-strong)); color: var(--cta-contrast); border: none; font-weight: 700; box-shadow: 0 10px 22px rgba(194, 106, 22, 0.22); }
.ghostBtn, .linkBtn { background: rgba(255,255,255,0.94); color: #5c6475; }
.ghostBtn:hover, .linkBtn:hover { background: #f7f6ff; }
.deleteBtn { color: var(--danger); border-color: rgba(220, 38, 38, 0.2); }

.heroTitle { font-size: clamp(28px, 5vw, 42px); font-weight: 900; margin: 0 0 10px; }
.heroText { margin: 0; color: var(--muted); line-height: 1.6; }
.section { padding: 18px 0 28px; }
.sectionTitle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sectionTitle h2 { margin: 0; font-size: 22px; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.catalogGridUniform { align-items: stretch; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-soft); }
.catalogCompactCard { display: grid; grid-template-rows: auto 1fr; min-height: 100%; transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease; position: relative; }
.catalogCompactCard:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(24,32,51,0.08); border-color: rgba(194, 106, 22, 0.16); }
.catalogCompactMediaLink { display: block; }
.catalogCompactMedia { aspect-ratio: 1 / 1; }
.catalogCompactBody { display: grid; align-content: space-between; gap: 12px; }
.catalogCompactTitle { font-size: 15px; min-height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catalogCompactTitleLink { display: block; }
.catalogCompactPrices { margin-bottom: 0; }
.catalogCompactActions { display: grid; gap: 8px; }
.catalogCompactBtn { width: 100%; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.catalogCompactBtn.ghostBtn { padding: 8px 10px; font-size: 12px; }
.catalogCardLink { display: grid; min-height: 100%; color: inherit; }
.catalogGridAiry { gap: 18px; }
.catalogModernCard { border-radius: 24px; }
.catalogModernMedia { 
  background: linear-gradient(135deg, #dfe6ff, #f3f5ff); 
  aspect-ratio: 1; 
  border-radius: 24px 24px 0 0; 
}
.catalogModernBody { padding: 16px; gap: 14px; }
.catalogModernTitle { min-height: 44px; line-height: 1.42; }
.catalogModernPrices { gap: 10px; }
.catalogModernActions { gap: 10px; }
.catalogBadgeRow { position: absolute; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; padding: 10px; }
.catalogMiniBadge { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.94); color: #6b21a8; font-size: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(24,32,51,0.08); }
.catalogMiniBadgeFire { background: rgba(220,38,38,0.92); color: #fff; }

.archiveGrid { align-items: stretch; }
.archiveCard { opacity: 0.9; filter: grayscale(1); }
.archiveMedia { background: linear-gradient(135deg, #777, #444); }
.archiveBadge { background: rgba(255,255,255,0.10); color: #ececec; }
.cardMedia { 
  background: linear-gradient(135deg, #dfe6ff, #eef3ff); 
  aspect-ratio: 1; 
  border-radius: 16px 16px 0 0; 
}
.cardBody { padding: 14px; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 9px; border-radius: 999px; background: rgba(124,156,255,0.14); color: var(--accent-2); border: none; }
.badgePriceDrop { background: rgba(220,38,38,0.92); color: #fff; }
.badgeQueueButton { cursor: pointer; }
.cardTitle { margin: 0; line-height: 1.35; }
.cardText { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.priceRow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.oldPrice { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.newPrice { font-size: 18px; font-weight: 800; }
.muted { color: var(--muted); }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-soft); }
.list { display: grid; gap: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: none; }
.rowTop { align-items: flex-start; }
.groupCard { display: grid; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.groupCard:last-child { border-bottom: none; }
.groupActions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.subList { display: grid; gap: 10px; }
.subRow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.4); }

.adminFormGrid { display: grid; gap: 10px; width: 100%; }
.formField { display: grid; gap: 6px; min-width: 180px; }
.formFieldWide { min-width: min(100%, 420px); }
.textInput { width: 100%; border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 13px 14px; outline: none; }
.textAreaInput { min-height: 140px; resize: vertical; }

@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.adminShell { max-width: 1120px; }
.adminHeaderShell { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; padding: 14px 16px; border-radius: 22px; background: rgba(255,255,255,0.88); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.adminHeaderTitleBlock { display: grid; gap: 4px; }
.adminHeaderEyebrow { font-size: 11px; letter-spacing: 0.14em; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.adminHeaderTitle { margin: 0; font-size: 26px; }
.adminHeaderBackLink { white-space: nowrap; }
.adminNav { display: flex; flex-wrap: wrap; gap: 8px; }
.adminNavWrap { overflow-x: auto; padding-bottom: 2px; }
.adminNavModern { display: flex; flex-wrap: nowrap; gap: 8px; }
.adminNavChip { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.94); border: 1px solid var(--border); color: var(--text); box-shadow: 0 8px 18px rgba(24,32,51,0.05); }
.adminNavChipActive { background: linear-gradient(135deg, var(--cta), var(--cta-strong)); color: var(--cta-contrast); border-color: transparent; box-shadow: 0 10px 22px rgba(194, 106, 22, 0.22); }
.adminNavLink { text-align: center; }
.adminCardsGrid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }
.adminCardLink { display: block; }
.actionRow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (min-width: 900px) { .adminCardsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.modalBackdrop { position: fixed; inset: 0; background: rgba(8, 16, 34, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modalCard { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.modalCardWide { width: min(780px, 100%); }
.adminModalBackdrop { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.adminModalScrollable { max-height: min(calc(100dvh - 32px), 980px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

.siteHeader { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); background: rgba(255,255,255,0.82); border-bottom: 1px solid var(--border); transition: transform .24s ease, opacity .24s ease; }
.siteHeaderHidden { transform: translateY(-100%); opacity: 0; }
.siteHeaderInner { display: grid; grid-template-columns: 1fr; align-items: center; gap: 8px; padding: 8px 0; }
.siteHeaderSearchOnly { grid-template-columns: 1fr; }
.siteHeaderTopRow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.siteHeaderTopRowCompact { grid-template-columns: auto minmax(0, 1fr) auto; }
.siteHeaderTopRowRich { grid-template-columns: auto minmax(0, 1fr) auto; }
.siteHeaderCenter { min-width: 0; }
.siteHeaderQuickLinks { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.headerQuickLink { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.94); font-size: 12px; font-weight: 700; white-space: nowrap; }
.headerQuickIcon { display: inline-flex; align-items: center; justify-content: center; width: 16px; }
.searchStub { width: 100%; border: 1px solid var(--border); background: var(--panel-2); border-radius: 999px; padding: 10px 14px; color: var(--muted); font-size: 14px; }
.searchStubLarge { padding: 10px 14px; font-size: 14px; }
.searchIconBtn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.94); }
.searchDrawer { max-width: 0; overflow: hidden; transition: max-width .22s ease; }
.searchDrawerOpen { max-width: 520px; }
.searchDrawerInput { min-width: 0; }
.installAppBtn { white-space: nowrap; }
.installAppMiniBtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.94); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.installHint { font-size: 12px; color: var(--muted); }
.pwaInstallDock {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 29;
  width: min(1180px, calc(100% - 24px));
  margin: 12px auto 0;
  padding: 14px;
  border: 1px solid rgba(194, 106, 22, 0.14);
  border-radius: 20px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 18px 36px rgba(24,32,51,0.08);
  display: grid;
  gap: 12px;
}
.pwaInstallDockText { display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.pwaInstallDockActions { justify-content: flex-start; }
.guestNoticeBar { margin-top: 8px; padding: 10px 12px; border-radius: 16px; background: rgba(194, 106, 22, 0.08); border: 1px solid rgba(194, 106, 22, 0.16); color: var(--text); font-size: 14px; line-height: 1.45; }
.guestNoticeBarCompact { margin-top: 4px; font-size: 13px; }
.guestNoticeLink { color: var(--accent); font-weight: 800; text-decoration: none; }
.guestNoticeLink:hover { text-decoration: underline; }

.installAppBar { margin-top: 8px; padding: 8px 0; }
.installAppLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s ease;
}
.installAppLink:hover { opacity: 0.8; }
.installAppLink svg { flex-shrink: 0; }

.imageUploadBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.imageUploadBtn:hover {
  background: var(--panel-3);
}
.imageUploadBtn svg {
  flex-shrink: 0;
}

.installHintBox {
  margin-top: 12px;
  padding: 16px;
  background: var(--panel-2);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
}
.installHintBox p { margin: 0 0 8px; }
.installHintBox p:last-child { margin-bottom: 0; }

.guestModeCard { display: grid; gap: 14px; text-align: center; padding: 28px 20px; }
.guestModeTitle { font-size: 28px; font-weight: 900; }
.guestModeText { margin: 0 auto; max-width: 620px; line-height: 1.55; }
.guestModeBtn { justify-self: center; min-width: 220px; }
.authHeroCard { position: relative; overflow: hidden; border-radius: 30px; background: radial-gradient(circle at top left, rgba(155,170,215,0.16), transparent 42%), linear-gradient(135deg, #f6f8fc, #eef2f8 58%, #f9fbfd); color: var(--text); padding: 22px; margin-bottom: 22px; box-shadow: 0 18px 40px rgba(24,32,51,0.08); border: 1px solid rgba(133,153,213,0.12); }
.authHeroGlow { position: absolute; inset: auto -80px -120px auto; width: 220px; height: 220px; background: rgba(155,170,215,0.14); filter: blur(28px); border-radius: 999px; pointer-events: none; }
.authHeroInner { position: relative; display: grid; gap: 26px; }
.authHeroHeader { display: grid; gap: 12px; }
.authEyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: var(--muted); }
.authHeroTitle { margin: 0; font-size: clamp(24px, 6vw, 34px); line-height: 1.08; font-weight: 800; }
.authHeroText { margin: 0; color: var(--muted); line-height: 1.7; font-size: 15px; max-width: 42ch; }
.authHeroSwitchLink { color: #5f6f9d; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(95,111,157,0.32); text-underline-offset: 3px; }
.authHeroSubtleLink { color: var(--muted); font-size: 14px; }
.authCardSurface { background: rgba(255,255,255,0.94); color: var(--text); border-radius: 24px; padding: 22px; border: 1px solid rgba(24,32,51,0.05); display: grid; gap: 18px; }
.authFormSpaced { display: grid; gap: 16px; }
.authFieldGap { gap: 8px; }
.authInputLarge { min-height: 56px; font-size: 16px; border-radius: 16px; }
.authCodeInput { text-align: center; letter-spacing: 0.28em; font-weight: 800; }
.authPrimaryBtn { min-height: 52px; width: 100%; justify-content: center; margin-top: 4px; }
.authGhostBtn { min-height: 48px; width: 100%; justify-content: center; }
.authActionsColumnMobile { display: grid; gap: 12px; margin-top: 4px; }
.authDebugCode { margin: 0; padding: 12px 14px; border-radius: 16px; background: rgba(133,153,213,0.10); color: var(--text); }
.authStatusText { margin: 0; color: var(--muted); line-height: 1.6; }
.authCodeMetaBlock { display: grid; gap: 10px; }
.authPhoneHint { margin: -6px 0 2px; font-size: 12px; color: var(--muted); }
@media (min-width: 900px) { .authHeroInner { grid-template-columns: minmax(0, 1fr) minmax(380px, 480px); align-items: center; } .authCardSurface { padding: 26px; } }

.productAdminCompactCard { border: 1px solid var(--border); border-radius: 16px; padding: 12px; display: grid; gap: 10px; background: var(--panel); }
.productAdminCompactCardExpanded { box-shadow: 0 10px 24px rgba(24,32,51,0.08); }
.productAdminCompactToggle { border: none; background: transparent; padding: 0; text-align: left; width: 100%; }
.productAdminCompactLayout { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; }
.productAdminCompactThumb { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, #dbe5ff, #eef3ff); border: 1px solid var(--border); }
.productAdminCompactThumbSmall { width: 64px; height: 64px; }
.productAdminCompactMain { min-width: 0; display: grid; gap: 10px; }
.productAdminCompactTop { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.productAdminCompactTitleWrap { min-width: 0; }
.productAdminCompactTitle { line-height: 1.35; }
.productAdminAlertText { color: var(--danger); font-size: 13px; margin-top: 4px; }
.productAdminCompactPrices, .productAdminCompactStats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; }
.productAdminCompactMetaRow { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; }
.productAdminExpandedSection { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--border); }
.productAdminExpandedInfo { display: grid; gap: 8px; }
.productAdminExpandedLine { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.productAdminExpandedDescription { font-size: 14px; line-height: 1.45; }
.productAdminExpandedActions { padding-top: 2px; }
.adminEditorPanel { overflow: hidden; }
.adminEditorHeader { align-items: flex-start; }
.adminEditorFooter { justify-content: flex-start; }
.adminProductComposer { display: grid; gap: 16px; }
.adminProductComposerPreviewWrap { display: grid; gap: 10px; }
.adminProductComposerPreview { min-height: 220px; }
.adminProductComposerFields { min-width: 0; }
.adminProductComposerHint { font-size: 13px; line-height: 1.45; }
.adminProductFormGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.adminFieldFull { grid-column: 1 / -1; }
.adminProductThumbGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adminProductThumbGridCompact { grid-template-columns: repeat(auto-fill, minmax(150px, 150px)); }
.adminProductThumbItem { position: relative; width: 100%; }
.adminProductThumbItemCompact { width: 150px; }
.adminProductThumbImage { width: 150px; height: 150px; object-fit: cover; border-radius: 16px; border: 1px solid var(--border); display: block; background: linear-gradient(135deg, #dbe5ff, #eef3ff); }
.adminProductThumbPlaceholder { width: 100%; min-height: 150px; border-radius: 16px; border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); padding: 12px; }
.adminProductThumbPlaceholderCompact { width: 150px; min-height: 150px; }
.adminThumbRemoveBtn { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 999px; border: none; background: rgba(15, 23, 42, 0.82); color: white; cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.adminThumbPrimaryBtn { position: absolute; left: 6px; bottom: 6px; padding: 6px 10px; min-height: 0; border-radius: 999px; font-size: 12px; line-height: 1.1; background: rgba(255,255,255,0.94); box-shadow: 0 4px 12px rgba(24,32,51,0.10); z-index: 2; }
.statusPill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status-active { background: rgba(34,197,94,0.14); color: #15803d; }
.status-partial { background: rgba(245,158,11,0.16); color: #b45309; }
.status-full { background: rgba(239,68,68,0.14); color: #b91c1c; }
.status-stale { background: rgba(59,130,246,0.14); color: #1d4ed8; }
.status-archived { background: rgba(107,114,128,0.16); color: #4b5563; }

.productPageGrid { display: grid; gap: 16px; }
.productPageMediaWrap { position: relative; }
.productPageMedia { width: 100%; aspect-ratio: 1 / 1; min-height: 0; border-radius: 24px; background: linear-gradient(135deg, #dfe6ff, #eef3ff); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.productGallery { display: grid; gap: 10px; }
.productGalleryViewport { position: relative; overflow: hidden; }
.productGalleryImage { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; user-select: none; -webkit-user-drag: none; }
.productGalleryArrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; border: none; background: rgba(15, 23, 42, 0.72); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; transition: background-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
.productGalleryArrowLeft { left: 12px; }
.productGalleryArrowRight { right: 12px; }
.productGalleryArrow:hover { background: rgba(194, 106, 22, 0.88); box-shadow: 0 8px 22px rgba(194, 106, 22, 0.24); }
.productGalleryCounter { position: absolute; right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 12px; font-weight: 700; }
.productGalleryDots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.productGalleryDot { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(24,32,51,0.2); padding: 0; cursor: pointer; }
.productGalleryDotActive { width: 24px; background: var(--accent); }
.productBackLink { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; width: fit-content; }
.productPageInfoCol { display: grid; gap: 16px; }
.productPagePanel { display: grid; gap: 10px; }
.productPageTitle { font-size: clamp(24px, 4vw, 38px); }
.productPageText { margin-bottom: 8px; }
.productReserveBox { display: grid; gap: 14px; }
.productReservePriceBlock { display: grid; gap: 4px; }
.productReserveMainPrice { font-size: 30px; }
.productReserveBtn { width: 100%; justify-content: center; }
.productReserveLinkBtn { display: inline-flex; align-items: center; text-align: center; background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 800; }
.productReserveLinkBtn:hover { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
@media (min-width: 900px) {
  .productPageGrid { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 420px); align-items: start; }
  .adminProductComposer { grid-template-columns: minmax(320px, 340px) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 899px) {
  .productGalleryArrow { display: none; }
  .archiveAdminCard { grid-template-columns: 1fr; }
  .archiveAdminThumb { width: 100%; height: 180px; }
}

.pageWithBottomNav { padding-bottom: 110px; }
.bottomNavBar {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); transform: translateX(-50%);
  width: min(760px, calc(100% - 16px)); background: rgba(255,255,255,0.96);
  border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; z-index: 999;
}
.bottomNavBarCompact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bottomNavItem { border: none; background: transparent; color: var(--muted); border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 11px; line-height: 1.1; gap: 4px; }
.bottomNavIcon { font-size: 18px; line-height: 1; font-weight: 900; }
.bottomNavLabel { white-space: nowrap; }
.bottomNavItemActive { background: var(--panel-2); color: var(--text); font-weight: 700; }

.requestTinyCard { border: 1px solid var(--border); border-radius: 16px; padding: 12px; display: grid; gap: 10px; }
.requestTinyMain { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.requestTinySide { display: flex; align-items: center; }
.requestTinyActions { display: flex; gap: 8px; flex-wrap: wrap; }
.queueRow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; }

.notificationCompactRow { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.notificationCompactRow:last-child { border-bottom: none; }
.notificationCompactMain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notificationCompactBody { font-size: 13px; line-height: 1.4; }

.userCompactCard { border: 1px solid var(--border); border-radius: 16px; padding: 12px; display: grid; gap: 10px; }
.userCompactTop { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.userCompactMeta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.userCompactBottom { display: grid; grid-template-columns: minmax(90px, 110px) 1fr auto auto; gap: 8px; align-items: center; }
.userCompactSmallInput, .userCompactReasonInput { min-width: 0; }

.bookingsHeaderCard { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 16px; margin-bottom: 16px; }
.bookingsTotalAmount { font-size: 30px; font-weight: 900; }
.bookingsArchiveBtn { white-space: nowrap; }
.bookingsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bookingsList { display: grid; gap: 12px; }
.bookingMiniCard { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 12px; display: grid; gap: 10px; }
.bookingCardButton { display: grid; gap: 10px; border: none; background: transparent; padding: 0; text-align: left; }
.bookingMiniMedia { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; background: linear-gradient(135deg, #dfe6ff, #eef3ff); }
.bookingMiniBody { display: grid; gap: 8px; }
.bookingMiniTitle { display: block; }
.bookingDeadline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.bookingDeadlineUrgent { color: var(--danger); font-weight: 700; }
.bookingPulseDot { width: 10px; height: 10px; border-radius: 999px; background: var(--danger); animation: pulseDot 1.2s infinite; }
@keyframes pulseDot { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(1.6); opacity: .35; } 100% { transform: scale(1); opacity: 1; } }
.bookingMiniActions { display: flex; gap: 8px; flex-wrap: wrap; }
.bookingTinyBtn { padding: 8px 10px; font-size: 12px; }
.bookingDetailCard { display: grid; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 16px; }
.bookingDetailMedia { width: 100%; aspect-ratio: 1 / 1; border-radius: 18px; background: linear-gradient(135deg, #dfe6ff, #eef3ff); }
.bookingBackBtn { width: fit-content; }
.archiveTableCompact { display: grid; gap: 8px; }
.archiveTableRow { display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.archiveTableRow:last-child { border-bottom: none; }
.archiveGood { color: #15803d; font-weight: 700; }
.archiveBad { color: var(--danger); font-weight: 700; }
.cabinetHistoryList { display: grid; gap: 12px; }
.cabinetHistoryCard { border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,0.88); padding: 12px; display: grid; gap: 10px; }
.cabinetHistoryCardOpen { box-shadow: 0 10px 24px rgba(24,32,51,0.08); }
.cabinetHistoryToggle { width: 100%; border: none; background: transparent; padding: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; text-align: left; align-items: center; }
.cabinetHistoryThumb { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(135deg, #dfe6ff, #eef3ff); }
.cabinetHistoryMain { min-width: 0; display: grid; gap: 6px; }
.cabinetHistoryTop { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cabinetHistoryDetails { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.archiveAdminList { display: grid; gap: 12px; }
.archiveAdminCard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,0.88); }
.archiveAdminThumb { width: 96px; height: 96px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(135deg, #dfe6ff, #eef3ff); }
.archiveAdminBody { display: grid; gap: 10px; min-width: 0; }
.archiveAdminTop { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.archiveAdminDescription { line-height: 1.5; }
.adminCategoriesFormGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adminCategoryPreview { width: 100%; max-width: 240px; aspect-ratio: 1 / 1; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(135deg, #dfe6ff, #eef3ff); background-size: cover; background-position: center; }
.adminCategoryGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.adminCategoryTile { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,0.9); }
.adminCategoryTileMedia { aspect-ratio: 1 / 1; border-radius: 18px; background: linear-gradient(135deg, #dfe6ff, #eef3ff); border: 1px solid var(--border); background-size: cover; background-position: center; }
.adminCategoryTileBody { display: grid; gap: 4px; }
.adminCategoryActions { margin-top: 8px; }
.clientCategoryGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.clientCategoryTile { display: grid; gap: 10px; }
.clientCategoryTileMedia { aspect-ratio: 1 / 1; border-radius: 22px; background: linear-gradient(135deg, #dfe6ff, #eef3ff); border: 1px solid var(--border); box-shadow: var(--shadow-soft); background-size: cover; background-position: center; }
.clientCategoryTileLabel { text-align: center; font-weight: 700; }
.catalogPageStack { display: grid; gap: 16px; }
.catalogSearchPanel { padding: 14px; }
.catalogSearchRow { justify-content: space-between; }

.cabinetSimpleCard { background: var(--panel); border: 1px solid var(--border); border-radius: 26px; padding: 24px; display: grid; gap: 20px; box-shadow: var(--shadow-soft); }
.cabinetSimpleTop { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.cabinetSimpleTopBalanced { align-items: center; }
.cabinetSimpleTitle { font-size: 26px; font-weight: 800; }
.cabinetLogoutBtn { white-space: nowrap; }
.cabinetTabsRow { display: flex; flex-wrap: wrap; gap: 8px; }
.cabinetTabActive { background: var(--panel-2); color: var(--text); font-weight: 700; }
.cabinetSectionBlock { display: grid; gap: 16px; }
.cabinetProfileGrid { display: grid; gap: 12px; }
.cabinetProfileRow { display: grid; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cabinetProfileRow:last-child { border-bottom: none; }
.cabinetProfileRowTwoCols { grid-template-columns: 110px 1fr; }
.cabinetEditableRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cabinetTinyBtn { padding: 6px 10px; font-size: 12px; }
.cabinetPushBlock { display: grid; gap: 12px; }
.cabinetSwitchList { display: grid; gap: 10px; }
.switchRow { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border: none; background: transparent; text-align: left; }
.switchUi { width: 48px; height: 28px; border-radius: 999px; background: #d1d5db; display: inline-flex; align-items: center; padding: 3px; transition: background-color .18s ease; }
.switchUiOn { background: var(--accent); }
.switchKnob { width: 22px; height: 22px; border-radius: 999px; background: #fff; transform: translateX(0); transition: transform .18s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.switchUiOn .switchKnob { transform: translateX(20px); }
.switchRow[disabled] { opacity: .5; }

@media (max-width: 899px) {
  .siteHeaderTopRow { grid-template-columns: auto 1fr auto; }
  .siteHeaderTopRowRich { grid-template-columns: auto 1fr; }
  .siteHeaderQuickLinks { grid-column: 1 / -1; justify-content: space-between; width: 100%; }
  .headerQuickLink, .installAppMiniBtn { flex: 1 1 0; justify-content: center; }
  .searchDrawerOpen { max-width: 100%; }
  .pwaInstallDock { top: calc(env(safe-area-inset-top, 0px) + 8px); border-radius: 18px; }
  .productAdminCompactTop, .userCompactTop, .queueRow, .subRow, .bookingsHeaderCard, .cabinetSimpleTop, .requestCardMainRow, .reservationAdminTop, .adminHeaderShell, .cabinetHistoryTop { flex-direction: column; }
  .productAdminCompactLayout { grid-template-columns: 64px 1fr; }
  .productAdminCompactThumb { width: 64px; height: 64px; }
  .productAdminCompactMetaRow, .productAdminExpandedLine, .reservationAdminDetails { flex-direction: column; align-items: flex-start; }
  .userCompactBottom, .cabinetProfileRowTwoCols, .archiveTableRow, .adminProductFormGrid, .cabinetEditableRow { grid-template-columns: 1fr; }
  .requestTinyActions, .actionRow, .bookingMiniActions { width: 100%; }
  .requestTinyActions > *, .actionRow > *, .bookingMiniActions > * { flex: 1 1 auto; }
  .bottomNavBar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bookingsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabinetHistoryToggle { grid-template-columns: 1fr; }
  .cabinetHistoryThumb { width: 100%; height: 120px; }
  .adminCategoriesFormGrid { grid-template-columns: 1fr; }
  .adminCategoryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clientCategoryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adminModalBackdrop { padding: 0; }
  .adminModalScrollable {
    width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  }
  .adminProductComposerPreview { min-height: 180px; }
  .requestCardLayout, .reservationAdminToggle { grid-template-columns: 1fr; }
  .requestCardThumb, .reservationAdminThumb { width: 100%; height: 160px; }
}

.adminUsersToolbar {
  justify-content: space-between;
}

.adminProductsToolbar {
  justify-content: space-between;
}

.productAdminMono {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 12px;
}

.productAdminInlineLink {
  padding: 7px 10px;
  font-size: 12px;
}

.wizardStepsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.wizardStepCard {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: var(--panel);
}

.wizardStepHeader {
  display: grid;
  gap: 4px;
}

.wizardStepHeader h4 {
  margin: 0;
}

.wizardImagePreview {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: linear-gradient(135deg, #dbe5ff, #eef3ff);
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
}

.wizardReviewGrid {
  display: grid;
  gap: 12px;
}

@media (min-width: 900px) {
  .wizardReviewGrid {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }
}

.usersTableWrap {
  display: grid;
  gap: 0;
  overflow-x: auto;
}

.usersTable {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 90px 80px 90px 90px minmax(170px, 1.4fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.usersTableHead {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.usersTableRow {
  font-size: 14px;
}

.usersSubRating {
  font-size: 12px;
}

.usersTinyActions {
  justify-content: flex-end;
}

.usersTinyBtn {
  padding: 7px 10px;
  font-size: 12px;
}

.paginationRow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
}

.requestCardExpandable {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 12px;
  background: var(--panel);
}

.requestCardExpandableOpen {
  box-shadow: 0 10px 24px rgba(24,32,51,0.08);
}

.requestCardToggle {
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  width: 100%;
}

.requestCardLayout {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: start;
}

.requestCardThumb {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(135deg, #dbe5ff, #eef3ff);
  border: 1px solid var(--border);
}

.requestCardMain {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.requestCardMainRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.requestCardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

.requestQueueInline {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.queueRowLead {
  background: var(--panel-2);
}

.reservationAdminCard {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 12px;
  background: var(--panel);
}

.reservationAdminCardOpen {
  box-shadow: 0 10px 24px rgba(24,32,51,0.08);
}

.reservationAdminToggle {
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: start;
}

.reservationAdminThumb {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(135deg, #dbe5ff, #eef3ff);
  border: 1px solid var(--border);
}

.reservationAdminMain {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.reservationAdminTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.reservationAdminTitle {
  line-height: 1.35;
}

.reservationAdminMeta {
  font-size: 14px;
}

.reservationAdminExpanded {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.reservationAdminDetails {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

@media (max-width: 899px) {
  .requestCardLayout {
    grid-template-columns: 1fr;
  }

  .requestCardThumb {
    width: 100%;
    height: 160px;
  }

  .requestCardMeta {
    flex-direction: column;
    align-items: flex-start;
  }

  .usersCardGrid {
    grid-template-columns: 1fr;
  }

  .usersTable {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .usersTableHead {
    display: none;
  }

  .usersTinyActions {
    justify-content: flex-start;
  }

  .reservationCardCompact {
    grid-template-columns: 1fr;
  }

  .reservationCardMedia {
    width: 100%;
    height: 160px;
  }
}

.imageUploadBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.imageUploadBtn:hover {
  background: var(--panel-3);
}
.imageUploadBtn svg {
  flex-shrink: 0;
}

.installHintBox {
  margin-top: 12px;
  padding: 16px;
  background: var(--panel-2);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
}
.installHintBox p { margin: 0 0 8px; }
.installHintBox p:last-child { margin-bottom: 0; }


/* === Cabinet mobile redesign === */
.cabinetMobileLayout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
}

.cabinetHeroCard,
.cabinetPanelCard,
.cabinetAlertCard,
.cabinetEmptyCard,
.cabinetBookingCard,
.cabinetHistoryCardV2 {
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.08);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
}

.cabinetHeroCard {
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
}

.cabinetHeroTop {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cabinetEyebrow {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c26a16;
  margin-bottom: 8px;
}

.cabinetHeroTitle {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: #111827;
}

.cabinetHeroSub {
  margin-top: 6px;
  color: #6b7280;
  font-size: 14px;
}

.cabinetStatusPill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.cabinetStatusPill--ok {
  background: #ecfdf5;
  color: #047857;
}

.cabinetStatusPill--warn {
  background: #fffbeb;
  color: #b45309;
}

.cabinetStatusPill--danger {
  background: #fef2f2;
  color: #b91c1c;
}

.cabinetHeroMeta {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.cabinetMetaCard {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(124, 58, 237, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cabinetMetaCard strong {
  font-size: 18px;
  line-height: 1.2;
  color: #111827;
}

.cabinetMetaLabel {
  font-size: 12px;
  color: #6b7280;
}

.cabinetSummaryGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cabinetSummaryCard {
  appearance: none;
  border: 1px solid rgba(124, 58, 237, 0.08);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
  color: #111827;
  cursor: pointer;
}

.cabinetSummaryCard strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  line-height: 1.15;
}

.cabinetSummaryLabel {
  font-size: 12px;
  color: #6b7280;
}

.cabinetSegmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  border-radius: 18px;
  background: #f3f4f6;
}

.cabinetSegmentBtn {
  border: 0;
  background: transparent;
  border-radius: 14px;
  min-height: 42px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
}

.cabinetSegmentBtnActive {
  background: #fff;
  color: #111827;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08);
}

.cabinetSectionStack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cabinetPanelCard {
  padding: 16px;
}

.cabinetPanelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cabinetPanelTitle {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.cabinetPanelSub {
  margin-top: 4px;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.45;
}

.cabinetAlertCard {
  padding: 16px;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
  border-color: rgba(245, 158, 11, 0.18);
}

.cabinetAlertTitle {
  font-weight: 800;
  color: #92400e;
  margin-bottom: 6px;
}

.cabinetAlertText {
  color: #78350f;
  font-size: 14px;
}

.cabinetCardsList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cabinetEmptyCard {
  padding: 24px 18px;
  text-align: center;
}

.cabinetEmptyTitle {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.cabinetEmptyText {
  margin-top: 8px;
  color: #6b7280;
  line-height: 1.5;
}

.cabinetBookingCard,
.cabinetHistoryCardV2 {
  overflow: hidden;
}

.cabinetBookingToggle,
.cabinetHistoryToggleV2 {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  text-align: left;
  padding: 14px;
  cursor: pointer;
}

.cabinetBookingThumb,
.cabinetHistoryThumbV2 {
  width: 84px;
  height: 84px;
  border-radius: 16px;
  background: #f3f4f6;
  flex-shrink: 0;
}

.cabinetBookingBody,
.cabinetHistoryMainV2 {
  min-width: 0;
}

.cabinetBookingTop,
.cabinetHistoryTopV2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

.cabinetBookingTitleWrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cabinetBookingTitle {
  font-size: 16px;
  line-height: 1.35;
  color: #111827;
  word-break: break-word;
}

.cabinetBookingPrice {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f5f3ff;
  color: #8a4b08;
  font-weight: 800;
  font-size: 13px;
}

.cabinetBookingMeta,
.cabinetHistoryMetaLine {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
}

.cabinetMiniBadge {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.cabinetMiniBadge--ok {
  background: #ecfdf5;
  color: #047857;
}

.cabinetMiniBadge--warn {
  background: #fffbeb;
  color: #b45309;
}

.cabinetMiniBadge--danger {
  background: #fef2f2;
  color: #b91c1c;
}

.cabinetBookingExpanded {
  padding: 0 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cabinetBookingDescription {
  color: #4b5563;
  line-height: 1.5;
}

.cabinetBookingActions,
.cabinetActionsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cabinetInfoGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

.cabinetInfoItem {
  padding: 14px;
  border-radius: 16px;
  background: #f9fafb;
  border: 1px solid #eef2f7;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cabinetInfoItemFull {
  grid-column: 1 / -1;
}

.cabinetInfoLabel {
  font-size: 12px;
  color: #6b7280;
}

.cabinetEditableInline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cabinetInlineBtn,
.cabinetLogoutWideBtn {
  width: 100%;
}

.cabinetPageMessage {
  margin-top: 16px;
  color: #374151;
}

@media (min-width: 640px) {
  .cabinetHeroMeta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cabinetInfoGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cabinetEditableInline {
    flex-direction: row;
    align-items: center;
  }

  .cabinetInlineBtn {
    width: auto;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .cabinetHeroTop {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .cabinetSummaryGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cabinetBookingToggle,
  .cabinetHistoryToggleV2 {
    grid-template-columns: 104px 1fr;
    gap: 16px;
    padding: 16px;
  }

  .cabinetBookingThumb,
  .cabinetHistoryThumbV2 {
    width: 104px;
    height: 104px;
  }
}

.cabinetBookingOpenHint {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #c26a16;
}

.cabinetBookingExpanded {
  border-top: 1px solid #eef2f7;
  margin-top: 2px;
  background: #fcfcff;
}

.cabinetBookingCardOpen {
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.10);
}

.cabinetActionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, transform .14s ease;
}

.cabinetActionBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.cabinetActionBtn--extend {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}

.cabinetActionBtn--extend:hover {
  background: #e5e7eb;
  color: #111827;
}

.cabinetActionBtn--cancel {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.cabinetActionBtn--cancel:hover {
  background: #fee2e2;
  color: #991b1b;
}

.cabinetActionBtn--link {
  background: #ffffff;
  color: #4b5563;
  border-color: #e5e7eb;
}

.cabinetActionBtn--link:hover {
  background: #f9fafb;
  color: #111827;
}

html, body {
  font-size: 15px;
}

.heroTitle {
  font-size: clamp(24px, 4.2vw, 36px);
}

.sectionTitle h2 {
  font-size: 20px;
}

.cardText,
.heroText,
.guestModeText,
.authHeroText,
.installHintBox,
.pwaInstallDockText,
.guestNoticeBar {
  font-size: 13px;
}

.cardTitle,
.cabinetBookingTitle {
  font-size: 15px;
}

.newPrice {
  font-size: 16px;
}

.oldPrice,
.badge,
.catalogMiniBadge,
.cabinetMiniBadge,
.cabinetBookingMeta,
.cabinetHistoryMetaLine,
.cabinetInfoLabel {
  font-size: 12px;
}

.linkBtn,
.primaryBtn,
.ghostBtn,
.textInput,
.searchStub {
  font-size: 14px;
}

/* --- Global typography tuning --- */

html, body {
  font-size: 15px;
}

.heroTitle {
  font-size: clamp(24px, 4.2vw, 36px);
}

.sectionTitle h2 {
  font-size: 20px;
}

.cardText,
.heroText,
.guestModeText,
.authHeroText,
.installHintBox,
.pwaInstallDockText,
.guestNoticeBar {
  font-size: 13px;
}

.cardTitle,
.cabinetBookingTitle {
  font-size: 15px;
}

.newPrice {
  font-size: 16px;
}

.oldPrice,
.badge,
.catalogMiniBadge,
.cabinetMiniBadge,
.cabinetBookingMeta,
.cabinetHistoryMetaLine,
.cabinetInfoLabel {
  font-size: 12px;
}

.linkBtn,
.primaryBtn,
.ghostBtn,
.textInput,
.searchStub {
  font-size: 14px;
}

/* --- Header redesign --- */

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.84);
  border-bottom: 1px solid rgba(24,32,51,0.08);
}

.siteHeaderInner.siteHeaderModern {
  display: grid;
  gap: 10px;
  padding: 10px 0 12px;
}

.siteHeaderTopLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.siteBrand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.siteBrandDot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c26a16, #f3b15f);
  box-shadow: 0 0 0 6px rgba(194, 106, 22, 0.10);
  flex-shrink: 0;
}

.siteBrandText {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #111827;
}

.siteHeaderTopActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.siteHeaderMoreBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: rgba(255,255,255,0.96);
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}

.siteHeaderMoreIcon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 14px;
}

.siteHeaderMoreIcon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: #6b7280;
}

.siteHeaderSearchRow {
  display: block;
}

.siteHeaderSearchInput {
  width: 100%;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #6b7280;
  padding: 0 16px;
  outline: none;
  font-size: 14px;
}

.siteHeaderMoreSheetBackdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(15, 23, 42, 0.34);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
}

.siteHeaderMoreSheet {
  width: min(420px, 100%);
  margin-top: 60px;
  padding: 16px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(24,32,51,0.08);
  box-shadow: 0 24px 64px rgba(15,23,42,0.18);
  display: grid;
  gap: 14px;
}

.siteHeaderMoreSheetHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.siteHeaderMoreLinks {
  display: grid;
  gap: 8px;
}

.siteHeaderMoreLink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #111827;
  font-weight: 600;
}

/* --- Bottom nav redesign --- */

.bottomNav {
  position: sticky;
  bottom: 0;
  z-index: 28;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}

.bottomNavInner {
  width: min(680px, calc(100% - 24px));
  margin: 0 auto;
  padding: 8px;
  border-radius: 24px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(24,32,51,0.08);
  box-shadow: 0 16px 40px rgba(17,24,39,0.10);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.bottomNavItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 62px;
  border-radius: 18px;
  color: #6b7280;
  text-decoration: none;
}

.bottomNavItemActive {
  background: #eef2ff;
  color: #111827;
}

.bottomNavIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
}

.bottomNavLabel {
  font-size: 12px;
  font-weight: 700;
}

/* --- Cabinet compact action buttons --- */

.cabinetActionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, transform .14s ease;
}

.cabinetActionBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.cabinetActionBtn--extend {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}

.cabinetActionBtn--extend:hover {
  background: #e5e7eb;
  color: #111827;
}

.cabinetActionBtn--cancel {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.cabinetActionBtn--cancel:hover {
  background: #fee2e2;
  color: #991b1b;
}

.cabinetActionBtn--link {
  background: #ffffff;
  color: #4b5563;
  border-color: #e5e7eb;
}

.cabinetActionBtn--link:hover {
  background: #f9fafb;
  color: #111827;
}

@media (min-width: 900px) {
  .siteHeaderInner.siteHeaderModern {
    padding: 12px 0 14px;
  }

  .siteBrandText {
    font-size: 15px;
  }
}

.cabinetBookingExpanded {
  padding: 12px 14px 14px 14px;
}

.cabinetBookingActions {
  margin-top: 2px;
}

.bottomNav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}

.bottomNavInner.bottomNavInner4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bottomNavItemButton {
  border: 0;
  background: transparent;
  font: inherit;
}

.bottomNavSheetBackdrop {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(15, 23, 42, 0.28);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bottomNavSheet {
  width: min(680px, 100%);
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 42px rgba(15,23,42,0.16);
  display: grid;
  gap: 14px;
}

.bottomNavSheetHandle {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: #d1d5db;
  margin: 0 auto;
}

.bottomNavSheetHead {
  text-align: center;
  color: #111827;
}

.bottomNavSheetList {
  display: grid;
  gap: 8px;
}

.bottomNavSheetLink {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #111827;
  font-weight: 600;
}

body {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.cabinetBookingExpanded {
  padding: 14px 14px 14px 14px;
}

.cabinetPickupCodeCard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.cabinetPickupCodeLabel {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cabinetPickupCodeValue {
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #111827;
}

.cabinetBookingActions {
  margin-top: 8px;
}

.bottomNavWrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  pointer-events: none;
}

.bottomNavWrap .bottomNav,
.bottomNavWrap .bottomNavPopover {
  pointer-events: auto;
}

.bottomNavPopover {
  position: absolute;
  right: max(12px, calc((100vw - min(680px, calc(100% - 24px))) / 2 + 8px));
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  width: min(220px, 42vw);
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(24,32,51,0.08);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(17,24,39,0.14);
  padding: 8px;
  display: grid;
  gap: 6px;
  animation: bottomNavPopoverIn .16s ease-out;
  transform-origin: bottom right;
}

.bottomNavPopoverItem {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
}

.bottomNavPopoverItem:hover {
  background: #f3f4f6;
}

@keyframes bottomNavPopoverIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.siteHeaderSearchRowLive {
  display: flex;
  align-items: center;
  gap: 8px;
}

.siteHeaderSearchInput {
  flex: 1;
}

.siteHeaderResetBtn {
  flex-shrink: 0;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #4b5563;
  font-size: 13px;
  font-weight: 700;
}

.siteHeaderResetBtn:hover {
  background: #f9fafb;
  color: #111827;
}

.bottomNavPopover {
  position: absolute;
  right: max(12px, calc((100vw - min(680px, calc(100% - 24px))) / 2 + 8px));
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: min(180px, 34vw);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(24,32,51,0.08);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(17,24,39,0.12);
  padding: 6px;
  display: grid;
  gap: 4px;
  animation: bottomNavPopoverIn .16s ease-out;
  transform-origin: bottom right;
}

.bottomNavPopoverItem {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  color: #111827;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
}

.bottomNavPopoverItem:hover {
  background: #f3f4f6;
}

.siteHeaderSearchField {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.siteHeaderSearchGlyph {
  position: absolute;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  pointer-events: none;
}

.siteHeaderSearchInputDecorated {
  padding-left: 40px;
  padding-right: 40px;
}

.siteHeaderSearchClear {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 0;
  background: #eef2f7;
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.siteHeaderSearchClear:hover {
  background: #e5e7eb;
  color: #111827;
}

.bottomNavPopover {
  position: absolute;
  right: max(12px, calc((100vw - min(680px, calc(100% - 24px))) / 2 + 8px));
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: min(190px, 34vw);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(24,32,51,0.08);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(17,24,39,0.14);
  padding: 8px;
  display: grid;
  gap: 4px;
  animation: bottomNavPopoverInSoft .18s ease-out;
  transform-origin: bottom right;
}

.bottomNavPopoverArrow {
  position: absolute;
  right: 18px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.97);
  border-right: 1px solid rgba(24,32,51,0.08);
  border-bottom: 1px solid rgba(24,32,51,0.08);
  transform: rotate(45deg);
}

.bottomNavPopoverItem {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  color: #111827;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
}

.bottomNavPopoverItem:hover {
  background: #f3f4f6;
}

@keyframes bottomNavPopoverInSoft {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cabinetPickupCodeCard {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e5e7eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.cabinetPickupCodeValue {
  font-size: 24px;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.staleBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}


.siteBrandMark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.siteBrandLogo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(180, 83, 9, 0.22);
}

.siteBrandText {
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #8a4b08;
}

.heroTitle,
.cardTitle,
.catalogCompactTitle,
.catalogModernTitle,
.productAdminCompactTitle b {
  font-weight: 800;
  letter-spacing: -0.015em;
}

.cardText,
.heroText,
.authHeroText,
.muted {
  line-height: 1.6;
}

.ghostBtn:hover,
.linkBtn:hover {
  background: #fff7ed;
}

.catalogMiniBadge {
  color: #92400e;
}

.status-stale {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

html, body {
  font-family: var(--font-family-base, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:root {
  --font-family-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

body {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.heroTitle,
.sectionTitle h2,
.adminHeaderTitle,
.authHeroTitle,
.cardTitle,
.catalogCompactTitle,
.catalogModernTitle,
.productAdminCompactTitle b,
h1, h2, h3, h4 {
  font-family: var(--font-family-base);
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-weight: 800;
}

.cardTitle,
.catalogCompactTitle,
.catalogModernTitle {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
}

.cardText,
.heroText,
.authHeroText,
.muted,
.textInput,
textarea,
select,
button,
a {
  font-family: var(--font-family-base);
}

.cardText,
.heroText,
.authHeroText,
.muted {
  line-height: 1.65;
  letter-spacing: -0.01em;
}

.newPrice {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.oldPrice {
  font-size: 14px;
}

.catalogCompactTitle {
  font-size: 17px;
  min-height: 48px;
}

.siteBrandWrap,
.siteBrand,
.siteBrandLink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.siteBrandMark,
.siteBrandBadge {
  display: none !important;
}

.siteBrandLogo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(180, 83, 9, 0.18);
  flex: 0 0 auto;
}

.siteBrandText {
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #8a4b08;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .siteBrandLogo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .siteBrandText {
    font-size: 18px;
  }
}

.catalogCompactCard,
.card,
.panel,
.modalCard,
.productAdminCompactCard {
  border-radius: 24px;
}

.catalogCompactBody,
.cardBody {
  padding-top: 16px;
}

.textInput,
select,
textarea {
  font-size: 15px;
  line-height: 1.45;
}

.siteHeader {
  background: rgba(255, 251, 245, 0.92);
  border-bottom: 1px solid rgba(180, 83, 9, 0.10);
}

.siteHeaderTopLine {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0 2px;
}

.siteBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.siteBrandMark {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.siteBrandLogo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(180, 83, 9, 0.16);
  background: #fff;
}

.siteBrandText {
  margin: 0;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #8a4b08;
}

.siteHeaderSearchField {
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(24,32,51,0.08);
  box-shadow: 0 8px 20px rgba(24,32,51,0.04);
}

.siteHeaderSearchInput {
  font-size: 16px;
}

@media (min-width: 900px) {
  .siteBrandLogo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  .siteBrandText {
    font-size: 24px;
  }
}

/* ===== UI refresh: warm compact marketplace ===== */

:root {
  --bg: #f7f4ee;
  --panel: #fffdf9;
  --panel-2: #fcf6ea;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #c26a16;
  --accent-2: #8a4b08;
  --danger: #dc2626;
  --border: rgba(138, 75, 8, 0.10);
  --cta: #e58a1f;
  --cta-strong: #c26a16;
  --cta-contrast: #ffffff;
  --shadow-soft: 0 14px 34px rgba(140, 92, 33, 0.08);
}

html,
body {
  background:
    radial-gradient(circle at top, rgba(247, 201, 132, 0.10), transparent 32%),
    linear-gradient(180deg, #fbf7f1 0%, #f6f2eb 100%);
  color: var(--text);
}

.container {
  width: min(1240px, calc(100% - 28px));
}

.linkBtn,
.primaryBtn,
.ghostBtn {
  border-radius: 16px;
  padding: 11px 16px;
  border: 1px solid rgba(194, 106, 22, 0.14);
}

.primaryBtn {
  background: linear-gradient(135deg, #e89a34, #c26a16);
  color: #fff;
  border: none;
  box-shadow: 0 10px 22px rgba(194, 106, 22, 0.22);
}

.ghostBtn,
.linkBtn {
  background: rgba(255, 253, 249, 0.95);
  color: #6a4a2d;
  border: 1px solid rgba(194, 106, 22, 0.12);
  box-shadow: none;
}

.ghostBtn:hover,
.linkBtn:hover {
  background: #fff7ec;
  border-color: rgba(194, 106, 22, 0.20);
  color: #8a4b08;
}

button:hover,
a.linkBtn:hover,
a.primaryBtn:hover,
a.ghostBtn:hover {
  transform: translateY(-1px);
}

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 249, 241, 0.90);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(194, 106, 22, 0.08);
}

.siteHeaderInner {
  gap: 8px;
  padding: 8px 0 10px;
}

.siteHeaderTopLine {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.siteBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.siteBrandMark {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.siteBrandLogo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 8px 20px rgba(194, 106, 22, 0.14);
}

.siteBrandTitleGroup {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.siteBrandText {
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #8a4b08;
}

.siteBrandSubtext {
  font-size: 11px;
  line-height: 1.2;
  color: #9a7a57;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.siteHeaderSearchRow {
  margin-top: 2px;
}

.siteHeaderSearchField {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 52px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(194, 106, 22, 0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 6px 20px rgba(31, 41, 55, 0.04);
}

.siteHeaderSearchGlyph {
  color: #a1a1aa;
  padding-left: 14px;
}

.siteHeaderSearchInput {
  border: none;
  outline: none;
  background: transparent;
  padding: 0 10px;
  min-height: 50px;
  font-size: 16px;
  color: var(--text);
}

.siteHeaderSearchInput::placeholder {
  color: #9ca3af;
}

.siteHeaderSearchClear {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 22px;
  width: 42px;
  height: 42px;
  cursor: pointer;
}

.guestNoticeBar {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.14);
}

.grid {
  gap: 16px;
}

.card {
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(194, 106, 22, 0.08);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 38px rgba(31, 41, 55, 0.06);
}

.catalogCompactCard {
  grid-template-rows: auto 1fr;
}

.catalogCompactCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(31, 41, 55, 0.07);
  border-color: rgba(194, 106, 22, 0.14);
}

.catalogCompactMedia {
  aspect-ratio: 1 / 1;
}

.cardMedia,
.catalogModernMedia {
  background: linear-gradient(180deg, #fffdf8 0%, #f8f1e6 100%);
}

.cardBody,
.catalogCompactBody,
.catalogModernBody {
  padding: 14px 16px 16px;
  gap: 10px;
}

.catalogCompactTitle,
.catalogModernTitle,
.cardTitle {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #172033;
  min-height: 40px;
}

.cardText {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.priceRow {
  gap: 6px 10px;
  align-items: baseline;
}

.oldPrice {
  font-size: 13px;
  color: #8b93a6;
}

.newPrice {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #172033;
}

.badge {
  background: rgba(229, 138, 31, 0.12);
  color: #8a4b08;
}

.badgePriceDrop {
  background: #d14f2f;
  color: #fff;
}

.catalogMiniBadge {
  background: rgba(255, 250, 244, 0.94);
  color: #8a4b08;
  box-shadow: 0 4px 10px rgba(31, 41, 55, 0.06);
}

.catalogMiniBadgeFire {
  background: #d14f2f;
  color: #fff;
}

.panel {
  border-radius: 24px;
  border: 1px solid rgba(194, 106, 22, 0.08);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.05);
}

.modalCard {
  border-radius: 24px;
  background: #fffdf9;
}

.textInput,
select,
textarea {
  background: #fffdf9;
  border: 1px solid rgba(194, 106, 22, 0.12);
  border-radius: 16px;
  color: #1f2937;
}

.textInput:focus,
select:focus,
textarea:focus {
  border-color: rgba(194, 106, 22, 0.32);
  box-shadow: 0 0 0 4px rgba(229, 138, 31, 0.10);
}

.searchStub,
.installAppMiniBtn,
.headerQuickLink,
.searchIconBtn {
  border: 1px solid rgba(194, 106, 22, 0.10);
  background: rgba(255,255,255,0.92);
}

.adminHeaderShell,
.adminNavChip,
.adminNavChipActive {
  border-radius: 20px;
}

.adminNavChipActive {
  background: linear-gradient(135deg, #e89a34, #c26a16);
  box-shadow: 0 10px 22px rgba(194, 106, 22, 0.22);
}

.status-stale {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.staleBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

nav,
.bottomNav,
.mobileTabBar,
.mobileDock,
.bottomDock {
  backdrop-filter: blur(16px);
}

@media (max-width: 900px) {
  .container {
    width: min(100%, calc(100% - 20px));
  }

  .siteHeaderInner {
    padding: 8px 0 10px;
  }

  .siteBrandLogo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .siteBrandText {
    font-size: 15px;
  }

  .siteBrandSubtext {
    font-size: 10px;
  }

  .grid {
    gap: 12px;
  }

  .cardBody,
  .catalogCompactBody,
  .catalogModernBody {
    padding: 12px 14px 14px;
  }

  .catalogCompactTitle,
  .catalogModernTitle,
  .cardTitle {
    font-size: 14px;
    min-height: 38px;
  }

  .newPrice {
    font-size: 17px;
  }
}

/* ===== PWA mobile-first refinement ===== */

html[data-display-mode="standalone"] .siteHeader {
  padding-top: max(env(safe-area-inset-top, 0px), 4px);
}

html[data-display-mode="standalone"] body {
  background:
    radial-gradient(circle at top, rgba(247, 201, 132, 0.10), transparent 30%),
    linear-gradient(180deg, #fbf7f1 0%, #f6f2eb 100%);
}

.siteHeaderInner {
  padding: 6px 0 8px;
}

.siteHeaderTopLine {
  min-height: 42px;
}

.siteBrand {
  gap: 10px;
}

.siteBrandLogo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.siteBrandText {
  font-size: 16px;
}

.siteBrandSubtext {
  font-size: 10px;
}

.siteHeaderSearchField {
  min-height: 48px;
  border-radius: 16px;
}

.siteHeaderSearchInput {
  min-height: 46px;
  font-size: 15px;
}

.section {
  padding: 12px 0 20px;
}

.sectionTitle {
  margin-bottom: 12px;
}

.grid {
  gap: 10px;
}

.catalogGridUniform,
.archiveGrid {
  align-items: stretch;
}

.catalogCompactCard,
.card {
  border-radius: 22px;
}

.catalogCompactMedia,
.cardMedia {
  aspect-ratio: 1 / 1;
}

.cardBody,
.catalogCompactBody,
.catalogModernBody {
  padding: 12px 12px 14px;
  gap: 8px;
}

.catalogCompactTitle,
.catalogModernTitle,
.cardTitle {
  font-size: 14px;
  line-height: 1.28;
  min-height: 36px;
  font-weight: 800;
}

.cardText {
  font-size: 13px;
  line-height: 1.5;
}

.priceRow {
  gap: 4px 8px;
}

.oldPrice {
  font-size: 12px;
}

.newPrice {
  font-size: 16px;
}

.catalogCompactActions {
  gap: 6px;
}

.catalogCompactBtn,
.catalogCompactBtn.ghostBtn,
.catalogCompactBtn.primaryBtn {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 12px;
}

.badges,
.catalogBadgeRow {
  gap: 6px;
}

.badge,
.catalogMiniBadge {
  min-height: 24px;
  padding: 5px 8px;
  font-size: 11px;
}

.panel {
  border-radius: 20px;
  padding: 16px;
}

.textInput,
select,
textarea {
  min-height: 46px;
  border-radius: 14px;
  padding: 12px 13px;
}

.textAreaInput {
  min-height: 120px;
}

.linkBtn,
.primaryBtn,
.ghostBtn {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 14px;
}

.row,
.subRow {
  padding-top: 10px;
  padding-bottom: 10px;
}

.modalCard {
  border-radius: 22px;
  padding: 16px;
}

.bottomNav,
.mobileTabBar,
.mobileDock,
.bottomDock {
  position: sticky;
  bottom: 0;
  z-index: 35;
  background: rgba(255, 250, 244, 0.92);
  border-top: 1px solid rgba(194, 106, 22, 0.10);
  backdrop-filter: blur(18px);
  box-shadow: 0 -6px 24px rgba(31, 41, 55, 0.05);
}

.bottomNav a,
.mobileTabBar a,
.mobileDock a,
.bottomDock a,
.bottomNav button,
.mobileTabBar button,
.mobileDock button,
.bottomDock button {
  color: #7b5a39;
}

.bottomNav .active,
.mobileTabBar .active,
.mobileDock .active,
.bottomDock .active {
  color: #8a4b08;
}

.productGalleryArrow {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(194, 106, 22, 0.10);
  color: #8a4b08;
}

.productGalleryArrow:hover {
  background: rgba(194, 106, 22, 0.88);
  color: #fff;
  box-shadow: 0 8px 22px rgba(194, 106, 22, 0.24);
}

@media (max-width: 640px) {
  .container {
    width: min(100%, calc(100% - 16px));
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .siteHeader {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }

  .siteHeaderInner {
    gap: 6px;
  }

  .siteBrandLogo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .siteBrandText {
    font-size: 15px;
  }

  .siteBrandSubtext {
    display: none;
  }

  .siteHeaderSearchField {
    min-height: 46px;
  }

  .siteHeaderSearchInput {
    font-size: 15px;
  }

  .catalogCompactTitle,
  .catalogModernTitle,
  .cardTitle {
    font-size: 13px;
    min-height: 34px;
  }

  .newPrice {
    font-size: 15px;
  }

  .oldPrice {
    font-size: 11px;
  }

  .catalogCompactBtn,
  .catalogCompactBtn.ghostBtn,
  .catalogCompactBtn.primaryBtn {
    min-height: 36px;
    font-size: 11px;
    padding: 7px 8px;
  }

  .panel {
    padding: 14px;
  }

  .section {
    padding: 10px 0 18px;
  }

  .guestNoticeBar {
    font-size: 12px;
    line-height: 1.4;
  }
}

@media (min-width: 641px) and (max-width: 899px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html[data-display-mode="standalone"] .bottomNav,
html[data-display-mode="standalone"] .mobileTabBar,
html[data-display-mode="standalone"] .mobileDock,
html[data-display-mode="standalone"] .bottomDock {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
}

/* ===== FINAL mobile/PWA overrides ===== */

@media (max-width: 640px) {
  .siteHeader {
    background: rgba(255, 248, 239, 0.94);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(194, 106, 22, 0.08);
  }

  .siteHeaderInner {
    padding: 6px 0 8px !important;
    gap: 6px !important;
  }

  .siteHeaderTopLine {
    min-height: 38px;
    padding: 0;
  }

  .siteBrand {
    gap: 9px;
  }

  .siteBrandLogo {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    box-shadow: 0 6px 16px rgba(194, 106, 22, 0.14);
  }

  .siteBrandTitleGroup {
    gap: 0;
  }

  .siteBrandText {
    font-size: 15px !important;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.04em;
  }

  .siteBrandSubtext {
    display: none !important;
  }

  .siteHeaderSearchRow {
    margin-top: 0;
  }

  .siteHeaderSearchField {
    min-height: 44px !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.88) !important;
  }

  .siteHeaderSearchGlyph {
    padding-left: 12px;
  }

  .siteHeaderSearchInput {
    min-height: 42px !important;
    font-size: 15px !important;
    padding: 0 8px !important;
  }

  .siteHeaderSearchClear {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .guestNoticeBar {
    margin-top: 2px;
    padding: 8px 10px;
    border-radius: 14px;
    font-size: 12px;
  }

  .section {
    padding: 8px 0 16px !important;
  }

  .container {
    width: min(100%, calc(100% - 14px)) !important;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .card,
  .catalogCompactCard {
    border-radius: 20px !important;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.05) !important;
  }

  .cardMedia,
  .catalogCompactMedia,
  .catalogModernMedia {
    aspect-ratio: 1 / 1;
    border-radius: 20px 20px 0 0 !important;
  }

  .cardBody,
  .catalogCompactBody,
  .catalogModernBody {
    padding: 10px 11px 12px !important;
    gap: 7px !important;
  }

  .catalogCompactTitle,
  .catalogModernTitle,
  .cardTitle {
    font-size: 13px !important;
    line-height: 1.25 !important;
    min-height: 32px !important;
    font-weight: 800 !important;
    margin: 0 !important;
  }

  .cardText {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
  }

  .priceRow {
    gap: 3px 7px !important;
  }

  .oldPrice {
    font-size: 11px !important;
  }

  .newPrice {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  .catalogCompactActions {
    gap: 6px !important;
  }

  .catalogCompactBtn,
  .catalogCompactBtn.ghostBtn,
  .catalogCompactBtn.primaryBtn,
  .linkBtn,
  .ghostBtn,
  .primaryBtn {
    min-height: 36px !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .badge,
  .catalogMiniBadge {
    min-height: 22px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
  }

  .panel {
    border-radius: 18px !important;
    padding: 14px !important;
  }

  .modalCard {
    border-radius: 20px !important;
    padding: 14px !important;
  }

  .textInput,
  select,
  textarea {
    min-height: 42px !important;
    border-radius: 13px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  .textAreaInput {
    min-height: 110px !important;
  }
}

/* Bottom navigation */
.bottomNavWrap {
  position: sticky;
  bottom: 0;
  z-index: 45;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
}

.bottomNav {
  margin: 0 auto;
  width: min(680px, calc(100% - 14px));
  background: rgba(255, 250, 244, 0.94) !important;
  border: 1px solid rgba(194, 106, 22, 0.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 -2px 20px rgba(31, 41, 55, 0.06), 0 8px 24px rgba(31, 41, 55, 0.04) !important;
  backdrop-filter: blur(18px);
}

.bottomNavInner {
  padding: 8px !important;
  gap: 8px !important;
}

.bottomNavInner.bottomNavInner4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.bottomNavItem {
  min-height: 56px;
  border-radius: 18px !important;
  color: #7b6244 !important;
  gap: 4px !important;
  padding: 8px 4px !important;
  transition: background-color .18s ease, color .18s ease, transform .14s ease;
}

.bottomNavItem:hover {
  background: rgba(229, 138, 31, 0.08) !important;
  color: #8a4b08 !important;
}

.bottomNavItemActive {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(229, 138, 31, 0.08)) !important;
  color: #8a4b08 !important;
  font-weight: 800 !important;
}

.bottomNavIcon {
  font-size: 19px !important;
  line-height: 1 !important;
}

.bottomNavLabel {
  font-size: 11px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em;
}

.bottomNavItemButton {
  appearance: none;
}

/* More popover */
.bottomNavPopover {
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 180px;
  background: rgba(255, 252, 247, 0.98) !important;
  border: 1px solid rgba(194, 106, 22, 0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.10) !important;
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.bottomNavPopoverArrow {
  background: rgba(255, 252, 247, 0.98) !important;
  border-right: 1px solid rgba(194, 106, 22, 0.10);
  border-bottom: 1px solid rgba(194, 106, 22, 0.10);
}

.bottomNavPopoverItem {
  padding: 13px 14px !important;
  color: #6b4f30 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.bottomNavPopoverItem:hover {
  background: #fff4e3 !important;
  color: #8a4b08 !important;
}

html[data-display-mode="standalone"] .bottomNavWrap {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 10px);
}

html[data-display-mode="standalone"] .bottomNav {
  width: min(680px, calc(100% - 12px));
}

/* remove residual purple-like active glow from generic active states */
.bottomNav .active,
.mobileTabBar .active,
.mobileDock .active,
.bottomDock .active {
  color: #8a4b08 !important;
}

/* desktop/tablet tune */
@media (min-width: 641px) {
  .bottomNav {
    width: min(760px, calc(100% - 20px));
  }

  .bottomNavInner {
    padding: 10px !important;
  }

  .bottomNavItem {
    min-height: 60px;
  }
}

/* ===== polish: header + search + feed cards ===== */

.siteHeaderInner {
  padding-top: 6px !important;
  padding-bottom: 8px !important;
}

.siteHeaderTopLine {
  min-height: 36px !important;
}

.siteBrand {
  gap: 8px !important;
}

.siteBrandLogo {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}

.siteBrandTitleGroup {
  display: flex !important;
  align-items: center !important;
}

.siteBrandText {
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

.siteHeaderSearchRow {
  margin-top: 2px !important;
}

.siteHeaderSearchField {
  min-height: 42px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(194, 106, 22, 0.08) !important;
  box-shadow: 0 4px 14px rgba(31, 41, 55, 0.03) !important;
}

.siteHeaderSearchGlyph {
  padding-left: 12px !important;
  color: #9ca3af !important;
}

.siteHeaderSearchInput {
  min-height: 40px !important;
  font-size: 14px !important;
  padding: 0 8px !important;
}

.siteHeaderSearchInput::placeholder {
  color: #9ca3af !important;
}

.siteHeaderSearchClear {
  width: 34px !important;
  height: 34px !important;
  font-size: 18px !important;
}

@media (max-width: 640px) {
  .grid {
    gap: 8px !important;
  }

  .card,
  .catalogCompactCard {
    border-radius: 18px !important;
  }

  .cardBody,
  .catalogCompactBody,
  .catalogModernBody {
    padding: 9px 10px 11px !important;
    gap: 6px !important;
  }

  .catalogCompactTitle,
  .catalogModernTitle,
  .cardTitle {
    font-size: 12.5px !important;
    line-height: 1.22 !important;
    min-height: 30px !important;
  }

  .priceRow {
    gap: 2px 6px !important;
  }

  .oldPrice {
    font-size: 10px !important;
  }

  .newPrice {
    font-size: 14px !important;
  }

  .catalogCompactBtn,
  .catalogCompactBtn.ghostBtn,
  .catalogCompactBtn.primaryBtn {
    min-height: 34px !important;
    font-size: 11px !important;
    padding: 7px 8px !important;
  }

  .bottomNav {
    border-radius: 20px !important;
  }

  .bottomNavInner {
    padding: 6px !important;
    gap: 6px !important;
  }

  .bottomNavItem {
    min-height: 52px !important;
    border-radius: 15px !important;
  }

  .bottomNavLabel {
    font-size: 10px !important;
  }
}

/* ===== FINAL hierarchy polish: header + cabinet ===== */

/* Header */
.siteHeader {
  background: rgba(255, 248, 239, 0.96) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(194, 106, 22, 0.06) !important;
}

.siteHeaderInner {
  padding-top: 5px !important;
  padding-bottom: 7px !important;
  gap: 5px !important;
}

.siteHeaderTopLine {
  min-height: 32px !important;
}

.siteBrand {
  gap: 8px !important;
}

.siteBrandMark {
  flex: 0 0 auto;
}

.siteBrandLogo {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(194, 106, 22, 0.12) !important;
}

.siteBrandTitleGroup {
  min-width: 0;
}

.siteBrandText {
  font-size: 13.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #7c4a17 !important;
}

.siteHeaderSearchRow {
  margin-top: 0 !important;
}

.siteHeaderSearchField {
  min-height: 40px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(194, 106, 22, 0.08) !important;
  box-shadow: 0 2px 10px rgba(31, 41, 55, 0.025) !important;
}

.siteHeaderSearchGlyph {
  padding-left: 11px !important;
  color: #9aa3af !important;
}

.siteHeaderSearchInput {
  min-height: 38px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  padding: 0 8px !important;
}

.siteHeaderSearchInput::placeholder {
  color: #98a2af !important;
}

.siteHeaderSearchClear {
  width: 32px !important;
  height: 32px !important;
  font-size: 17px !important;
  color: #9aa3af !important;
}

.guestNoticeBar {
  margin-top: 1px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Cabinet hierarchy */
.cabinetMobileLayout {
  gap: 10px;
}

.cabinetHeroCard {
  padding: 14px !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.05) !important;
}

.cabinetHeroTop {
  gap: 10px !important;
  align-items: flex-start !important;
}

.cabinetEyebrow {
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  margin-bottom: 4px !important;
}

.cabinetHeroTitle {
  font-size: 22px !important;
  line-height: 1.06 !important;
  margin: 0 !important;
}

.cabinetHeroSub {
  font-size: 13px !important;
  margin-top: 4px !important;
  color: #7b8794 !important;
}

.cabinetStatusPill {
  min-height: auto !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

.cabinetHeroMeta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.cabinetMetaCard {
  padding: 9px 10px !important;
  border-radius: 14px !important;
  min-height: auto !important;
  box-shadow: none !important;
  border: 1px solid rgba(194, 106, 22, 0.08) !important;
  background: rgba(255,255,255,0.82) !important;
}

.cabinetMetaLabel {
  font-size: 10px !important;
  line-height: 1.15 !important;
  color: #8a95a5 !important;
  margin-bottom: 4px !important;
}

.cabinetMetaCard strong {
  display: block;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

.cabinetSummaryGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.cabinetSummaryCard {
  padding: 9px 8px !important;
  min-height: auto !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(194, 106, 22, 0.14) !important;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%) !important;
  border: 1px solid rgba(194, 106, 22, 0.22) !important;
}

.cabinetSummaryLabel {
  font-size: 10px !important;
  line-height: 1.15 !important;
  color: #8d97a6 !important;
  margin-bottom: 4px !important;
}

.cabinetSummaryCard strong {
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.cabinetSegmented {
  padding: 4px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.80) !important;
  border: 1px solid rgba(194, 106, 22, 0.08) !important;
}

.cabinetSegmentBtn {
  min-height: 38px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #9a3412 !important;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%) !important;
  border: 1px solid rgba(194, 106, 22, 0.20) !important;
  box-shadow: 0 8px 20px rgba(194, 106, 22, 0.10) !important;
}

.cabinetSegmentBtnActive {
  color: #ffffff !important;
  background: linear-gradient(180deg, #f59e0b 0%, #ea580c 100%) !important;
  border-color: rgba(194, 106, 22, 0.55) !important;
  box-shadow: 0 10px 24px rgba(194, 106, 22, 0.22) !important;
}

.cabinetSectionStack {
  gap: 10px !important;
}

.cabinetPanelCard {
  padding: 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,248,239,0.92)) !important;
  border: 1px solid rgba(194, 106, 22, 0.08) !important;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.04) !important;
}

.cabinetPanelTitle {
  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
}

.cabinetPanelSub {
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #7f8896 !important;
}

.cabinetAlertCard {
  padding: 12px 14px !important;
  border-radius: 16px !important;
}

.cabinetAlertTitle {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.cabinetAlertText {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.cabinetCardsList {
  gap: 10px !important;
}

.cabinetBookingCard {
  border-radius: 18px !important;
  border: 1px solid rgba(194, 106, 22, 0.09) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 10px 26px rgba(31, 41, 55, 0.05) !important;
}

.cabinetBookingToggle {
  padding: 12px !important;
  gap: 10px !important;
}

.cabinetBookingThumb {
  width: 78px !important;
  min-width: 78px !important;
  height: 78px !important;
  border-radius: 14px !important;
}

.cabinetBookingBody {
  gap: 4px !important;
}

.cabinetBookingTop {
  gap: 8px !important;
  align-items: flex-start !important;
}

.cabinetBookingTitle {
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.cabinetBookingPrice {
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: #8a4b08 !important;
}

.cabinetBookingMeta {
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #717b8a !important;
}

.cabinetBookingOpenHint {
  margin-top: 4px !important;
  font-size: 11px !important;
  color: #9aa3af !important;
}

.cabinetMiniBadge {
  min-height: 22px !important;
  padding: 4px 7px !important;
  font-size: 10px !important;
  border-radius: 999px !important;
}

.cabinetBookingExpanded {
  padding: 0 12px 12px !important;
}

.cabinetPickupCodeCard {
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

.cabinetPickupCodeLabel {
  font-size: 11px !important;
}

.cabinetPickupCodeValue {
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
}

.cabinetBookingActions {
  gap: 8px !important;
  margin-top: 10px !important;
}

.cabinetActionBtn {
  min-height: 40px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.cabinetEmptyCard {
  padding: 16px !important;
  border-radius: 18px !important;
}

.cabinetEmptyTitle {
  font-size: 15px !important;
}

.cabinetEmptyText {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

@media (max-width: 640px) {
  .cabinetHeroTitle {
    font-size: 20px !important;
  }

  .cabinetHeroMeta {
    gap: 6px !important;
  }

  .cabinetMetaCard {
    padding: 8px 8px !important;
  }

  .cabinetMetaCard strong {
    font-size: 14px !important;
  }

  .cabinetSummaryGrid {
    gap: 6px !important;
  }

  .cabinetSummaryCard {
    padding: 8px 6px !important;
  }

  .cabinetSummaryCard strong {
    font-size: 12px !important;
  }

  .cabinetBookingThumb {
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
  }

  .cabinetBookingTitle {
    font-size: 13px !important;
  }

  .cabinetBookingPrice {
    font-size: 13px !important;
  }
}

/* ===== cabinet mini-stats alignment polish ===== */

.cabinetHeroMeta {
  align-items: stretch !important;
}

.cabinetMetaCard,
.cabinetSummaryCard {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.cabinetMetaCard {
  min-height: 88px !important;
}

.cabinetSummaryCard {
  min-height: 72px !important;
}

.cabinetMetaLabel,
.cabinetSummaryLabel {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: #9099a8 !important;
  margin: 0 0 6px 0 !important;
  min-height: 0 !important;
}

.cabinetMetaCard strong,
.cabinetSummaryCard strong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  text-align: center !important;
  letter-spacing: -0.04em !important;
  color: #374151 !important;
  margin: 0 !important;
}

.cabinetMetaCard strong {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.cabinetSummaryCard strong {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #4b5563 !important;
}

@media (max-width: 640px) {
  .cabinetHeroMeta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .cabinetSummaryGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .cabinetMetaCard {
    min-height: 82px !important;
    padding: 8px 6px !important;
  }

  .cabinetSummaryCard {
    min-height: 72px !important;
    padding: 8px 6px !important;
  }

  .cabinetMetaLabel,
  .cabinetSummaryLabel {
    font-size: 10px !important;
    line-height: 1.15 !important;
    min-height: 0 !important;
    margin-bottom: 4px !important;
  }

  .cabinetMetaCard strong {
    font-size: 22px !important;
  }

  .cabinetSummaryCard strong {
    font-size: 16px !important;
  }
}

/* ===== search spacing fix ===== */

.siteHeaderSearchField {
  grid-template-columns: 38px minmax(0, 1fr) 34px !important;
}

.siteHeaderSearchGlyph {
  width: 38px !important;
  min-width: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 0 !important;
}

.siteHeaderSearchInput {
  padding-left: 4px !important;
}

@media (max-width: 640px) {
  .siteHeaderSearchField {
    grid-template-columns: 36px minmax(0, 1fr) 32px !important;
  }

  .siteHeaderSearchGlyph {
    width: 36px !important;
    min-width: 36px !important;
  }

  .siteHeaderSearchInput {
    padding-left: 6px !important;
  }
}

/* ===== cabinet modal polish ===== */

.modalBackdrop {
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(8px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.modalCard {
  width: min(520px, 100%) !important;
  background: #fffdf9 !important;
  border: 1px solid rgba(194, 106, 22, 0.10) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
}

.modalCard .sectionTitle {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.modalCard h3 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

.modalCard p {
  margin: 0 0 12px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #4b5563 !important;
}

.modalCard .actionRow {
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

@media (max-width: 640px) {
  .modalBackdrop {
    align-items: flex-end !important;
    padding: 10px !important;
  }

  .modalCard {
    width: 100% !important;
    border-radius: 22px !important;
    padding: 16px !important;
    margin-bottom: max(env(safe-area-inset-bottom, 0px), 6px);
  }

  .modalCard h3 {
    font-size: 19px !important;
  }

  .modalCard p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .modalCard .actionRow {
    grid-template-columns: 1fr !important;
  }
}

/* ===== minimal search field ===== */

.siteHeaderSearchInput::placeholder {
  color: transparent !important;
}

.siteHeaderSearchInput {
  padding-left: 0 !important;
}

/* ===== cabinet extend UX + proper mobile sheet ===== */

.cabinetPanelHeadBooking {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.cabinetExtendAllBtn {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
  border: none !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #f5a623, #d97706) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(217, 119, 6, 0.22) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.cabinetExtendAllBtnIcon {
  font-size: 15px !important;
  line-height: 1 !important;
}

.cabinetExtendAllBtnText {
  white-space: nowrap;
}

.cabinetModalHead {
  margin-bottom: 10px !important;
}

.cabinetModalHead h3 {
  margin: 0 !important;
}

.modalBackdrop.adminModalBackdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(8px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  z-index: 90 !important;
}

.modalCard.adminModalScrollable {
  width: min(520px, 100%) !important;
  max-height: min(88vh, 760px) !important;
  overflow: auto !important;
  background: #fffdf9 !important;
  border: 1px solid rgba(194, 106, 22, 0.10) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
}

.modalCard.adminModalScrollable .actionRow {
  margin-top: 16px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.modalCard.adminModalScrollable .primaryBtn,
.modalCard.adminModalScrollable .ghostBtn {
  min-height: 46px !important;
  border-radius: 14px !important;
}

@media (max-width: 640px) {
  .cabinetPanelHeadBooking {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .cabinetExtendAllBtn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }

  .cabinetExtendAllBtnText {
    white-space: normal !important;
    text-align: center !important;
  }

  .modalBackdrop.adminModalBackdrop {
    align-items: flex-end !important;
    padding: 8px !important;
  }

  .modalCard.adminModalScrollable {
    width: 100% !important;
    max-height: min(72vh, 560px) !important;
    border-radius: 22px 22px 18px 18px !important;
    padding: 16px !important;
    margin-bottom: max(env(safe-area-inset-bottom, 0px), 6px) !important;
  }

  .modalCard.adminModalScrollable .actionRow {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .modalCard.adminModalScrollable h3 {
    font-size: 20px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
  }

  .modalCard.adminModalScrollable p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
  }
}

.cabinetExtendAllWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.cabinetExtendAllBtn:disabled {
  opacity: 0.5;
  box-shadow: none !important;
  cursor: not-allowed;
}

.cabinetExtendAllHint {
  max-width: 280px;
  font-size: 12px;
  line-height: 1.35;
  color: #b45309;
  text-align: right;
}

@media (max-width: 640px) {
  .cabinetExtendAllWrap {
    align-items: stretch;
  }

  .cabinetExtendAllHint {
    max-width: none;
    text-align: center;
  }
}

.cabinetRequestMeta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.35;
}

.productAdminUpdatedAt {
  margin-top: 10px;
  text-align: right;
  font-size: 12px;
  line-height: 1.35;
  color: #98a2b3;
}

.adminRequestConfirmTitle {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adminRequestConfirmQty {
  margin-top: 6px;
  font-size: 14px;
  color: #6b7280;
}

.siteHeaderSearchField {
  position: relative;
  display: flex;
  align-items: center;
}

.siteHeaderSearchGlyph {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
  pointer-events: none;
  z-index: 2;
}

.siteHeaderSearchInputDecorated {
  width: 100%;
  text-align: center;
  padding-left: 48px;
  padding-right: 48px;
}

.siteHeaderSearchInputDecorated::placeholder {
  text-align: center;
  color: #98a2b3;
}

.siteHeaderSearchInputDecorated:focus,
.siteHeaderSearchInputDecorated:not(:placeholder-shown) {
  text-align: center;
}

.siteHeaderSearchClear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.clientCategoryTileSelectable {
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: #fff;
  padding: 0;
}

.clientCategoryTileSelectable .clientCategoryTileMedia {
  transition: filter .2s ease, transform .2s ease, opacity .2s ease;
}

.clientCategoryTileInactive .clientCategoryTileMedia {
  filter: grayscale(1);
  opacity: 0.72;
}

.clientCategoryTileActive .clientCategoryTileMedia {
  filter: grayscale(0);
  opacity: 1;
}

.clientCategoryTileSelectable:active .clientCategoryTileMedia {
  transform: scale(0.985);
}

.categoryPickerActions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.categoryPickerPage .pageTitleSoft {
  max-width: 680px;
}

/* ===== compact categories grid ===== */
.clientCategoryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.clientCategoryTile {
  border-radius: 16px;
  overflow: hidden;
  min-height: auto;
}

.clientCategoryTileMedia {
  aspect-ratio: 1 / 1;
  min-height: 84px;
}

.clientCategoryTileLabel {
  padding: 8px 8px 10px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

@media (min-width: 768px) {
  .clientCategoryGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }

  .clientCategoryTileMedia {
    min-height: 96px;
  }

  .clientCategoryTileLabel {
    font-size: 14px;
    padding: 10px;
  }
}

/* ===== categories compact polish ===== */
.clientCategoryGridCompact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.clientCategoryTileSelectable {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.clientCategoryTileMediaCompact {
  aspect-ratio: 1 / 1;
  min-height: 72px;
  background: linear-gradient(180deg, #eef4ff 0%, #e7eeff 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.clientCategoryTileBody {
  padding: 8px 8px 10px;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.clientCategoryTileLabelCompact {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.clientCategoryTileCount {
  text-align: center;
  font-size: 11px;
  line-height: 1.2;
  color: #8b95a7;
}

.clientCategoryTileInactive .clientCategoryTileMedia {
  filter: grayscale(1);
  opacity: 0.62;
}

.clientCategoryTileActive {
  border-color: rgba(245, 158, 11, 0.26);
  box-shadow: 0 14px 30px rgba(245, 158, 11, 0.10);
}

.clientCategoryTileActive .clientCategoryTileCount {
  color: #a16207;
}

.categoryPickerActions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.categoryPickerActions .ghostBtn,
.categoryPickerActions .primaryBtn {
  min-width: 0;
}

@media (min-width: 768px) {
  .clientCategoryGridCompact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }

  .clientCategoryTileMediaCompact {
    min-height: 92px;
  }

  .clientCategoryTileBody {
    min-height: 82px;
    padding: 10px 10px 12px;
  }

  .clientCategoryTileLabelCompact {
    font-size: 13px;
  }

  .clientCategoryTileCount {
    font-size: 12px;
  }
}

/* ===== categories mobile fix + badge ===== */
.clientCategoryGridCompact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.clientCategoryTileMediaWrap {
  position: relative;
}

.clientCategorySelectedBadge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.22);
}

.clientCategoryTileMediaCompact {
  aspect-ratio: 1 / 1;
  min-height: 110px;
}

.clientCategoryTileBody {
  padding: 10px 10px 12px;
  min-height: 92px;
}

.clientCategoryTileLabelCompact {
  font-size: 14px;
  line-height: 1.22;
  font-weight: 700;
  text-align: center;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.44em;
  word-break: break-word;
}

.clientCategoryTileCount {
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
  color: #8b95a7;
}

@media (min-width: 560px) {
  .clientCategoryGridCompact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .clientCategoryGridCompact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .clientCategoryTileMediaCompact {
    min-height: 96px;
  }

  .clientCategoryTileBody {
    min-height: 86px;
    padding: 10px 10px 12px;
  }

  .clientCategoryTileLabelCompact {
    font-size: 13px;
  }

  .clientCategoryTileCount {
    font-size: 12px;
  }
}

@media (min-width: 1024px) {
  .clientCategoryGridCompact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.categoryPickerTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.categoryPickerTopMeta {
  font-size: 14px;
  color: #6b7280;
}

.catalogFilteredNotice {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 98px);
  transform: translateX(-50%);
  z-index: 40;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 248, 235, 0.98);
  color: #9a6700;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.2;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
}

@media (max-width: 767px) {
  .categoryPickerTopBar {
    align-items: stretch;
  }

  .categoryPickerTopBar .ghostBtn {
    width: 100%;
  }

  .catalogFilteredNotice {
    width: calc(100% - 32px);
    text-align: center;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
  }
}

/* ===== final bottom nav cleanup ===== */
.bottomNavWrap {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding-top: 0 !important;
}

.bottomNav {
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.10) !important;
}

.catalogFilteredNotice {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  transform: translateX(-50%);
  z-index: 40;
  border: 1px solid rgba(245, 158, 11, 0.18);
  background: rgba(255, 251, 241, 0.96);
  color: #9a6700;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(8px);
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .catalogFilteredNotice {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
    width: auto;
    max-width: calc(100% - 24px);
    text-align: center;
  }
}

/* ===== fix jumping hover elements ===== */
.catalogFilteredNotice,
.catalogFilteredNotice:hover,
.catalogFilteredNotice:focus,
.catalogFilteredNotice:active {
  transform: translateX(-50%) !important;
  margin: 0 !important;
  top: auto !important;
}

.catalogFilteredNotice:hover {
  filter: brightness(0.98);
}

.cardMedia button,
.cardMedia button:hover,
.cardMedia button:focus,
.cardMedia button:active,
.catalogModernMedia button,
.catalogModernMedia button:hover,
.catalogModernMedia button:focus,
.catalogModernMedia button:active {
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  top: 50% !important;
}

.cardMedia button,
.catalogModernMedia button {
  translate: 0 -50%;
}

.catalogFilteredNotice {
  z-index: 9999 !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 118px) !important;
}

.bottomNavWrap,
.bottomNavShell,
.bottomNavOuter,
.bottomNavBackdrop {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.bottomNav {
  position: relative !important;
  z-index: 50 !important;
}

.catalogFilteredNotice {
  width: fit-content;
  max-width: min(720px, calc(100% - 32px));
  white-space: nowrap;
}

/* ===== final fix: filtered notice + bottom nav shell ===== */
.bottomNavWrap {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 60 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  border-radius: 0 !important;
}

.bottomNavWrap::before,
.bottomNavWrap::after {
  display: none !important;
  content: none !important;
}

.bottomNav {
  position: relative !important;
  z-index: 61 !important;
  margin: 0 auto !important;
}

.catalogFilteredNotice {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px) !important;
  z-index: 9999 !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(245, 158, 11, 0.18) !important;
  background: rgba(255, 251, 241, 0.98) !important;
  color: #9a6700 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.catalogFilteredNotice:hover,
.catalogFilteredNotice:focus,
.catalogFilteredNotice:active {
  transform: translateX(-50%) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px) !important;
}

@media (max-width: 767px) {
  .bottomNavWrap {
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  .catalogFilteredNotice {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
    max-width: calc(100% - 20px) !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
  }

  .catalogFilteredNotice:hover,
  .catalogFilteredNotice:focus,
  .catalogFilteredNotice:active {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
  }
}

/* ===== exact fix: remove bottom nav outer tray ===== */
.bottomNav {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.bottomNavInner {
  box-shadow: 0 16px 40px rgba(17,24,39,0.10) !important;
}

.catalogFilteredNotice {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  max-width: calc(100% - 24px) !important;
  width: auto !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(245, 158, 11, 0.18) !important;
  background: rgba(255, 251, 241, 0.98) !important;
  color: #9a6700 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.catalogFilteredNotice:hover,
.catalogFilteredNotice:focus,
.catalogFilteredNotice:active {
  transform: translateX(-50%) !important;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 767px) {
  .bottomNav {
    padding: 0 0 calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .catalogFilteredNotice {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100% - 20px) !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
  }

  .catalogFilteredNotice:hover,
  .catalogFilteredNotice:focus,
  .catalogFilteredNotice:active {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ===== override mobile bottom-sheet -> centered compact modal ===== */
@media (max-width: 640px) {
  .modalBackdrop.adminModalBackdrop {
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
  }

  .modalCard.adminModalScrollable {
    width: min(420px, calc(100% - 16px)) !important;
    max-height: min(78vh, 520px) !important;
    border-radius: 22px !important;
    padding: 16px !important;
    margin-bottom: 0 !important;
  }

  .modalCard.adminModalScrollable .actionRow {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .modalCard.adminModalScrollable .primaryBtn,
  .modalCard.adminModalScrollable .ghostBtn {
    width: 100% !important;
  }

  .modalCard.adminModalScrollable h3 {
    font-size: 20px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
  }

  .modalCard.adminModalScrollable p {
    font-size: 14px !important;
    line-height: 1.42 !important;
    margin: 0 0 10px !important;
  }
}

/* ===== polished cabinet confirm modal ===== */
.cabinetConfirmLead {
  margin: 0 0 12px !important;
  color: #4b5563 !important;
}

.cabinetConfirmLead strong {
  color: #111827 !important;
}

.cabinetConfirmWarning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff7ed 0%, #fffbf5 100%);
  border: 1px solid rgba(245, 158, 11, 0.18);
}

.cabinetConfirmWarningTitle {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  color: #9a6700;
}

.cabinetConfirmWarningValue {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  color: #111827;
}

.cabinetConfirmHint {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #8b95a7 !important;
}

@media (max-width: 640px) {
  .cabinetConfirmWarning {
    padding: 11px 12px;
    border-radius: 14px;
  }

  .cabinetConfirmWarningTitle {
    font-size: 12px;
  }

  .cabinetConfirmWarningValue {
    font-size: 20px;
  }

  .cabinetConfirmHint {
    font-size: 12px !important;
  }
}

/* ===== final cabinet modal polish ===== */
@keyframes cabinetConfirmModalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modalCard.adminModalScrollable {
  animation: cabinetConfirmModalIn 0.18s ease-out;
}

.cabinetConfirmWarningMain {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cabinetConfirmWarningIcon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}

.cabinetDangerBtn {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.22) !important;
}

.cabinetDangerBtn:hover,
.cabinetDangerBtn:focus {
  filter: brightness(0.98);
}

@media (max-width: 640px) {
  .cabinetConfirmWarningIcon {
    font-size: 15px;
  }
}

/* ===== final hard-fix: cabinet modal always centered and not full-height ===== */
.modalBackdrop.adminModalBackdrop {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.modalCard.adminModalScrollable {
  width: min(420px, calc(100% - 24px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(78vh, 560px) !important;
  overflow: auto !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .modalBackdrop.adminModalBackdrop {
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
  }

  .modalCard.adminModalScrollable {
    width: min(420px, calc(100% - 16px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(74vh, 520px) !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }
}

/* ===== final modal centering hard override ===== */
.modalBackdrop.adminModalBackdrop {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
}

.modalCard.adminModalScrollable {
  position: relative !important;
  inset: auto !important;
  width: min(420px, calc(100% - 16px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(70vh, 520px) !important;
  margin: 0 !important;
  overflow: auto !important;
  align-self: center !important;
}

@media (max-width: 640px) {
  .modalBackdrop.adminModalBackdrop {
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
  }

  .modalCard.adminModalScrollable {
    width: min(420px, calc(100% - 12px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(68vh, 500px) !important;
    margin: 0 !important;
    align-self: center !important;
    border-radius: 22px !important;
  }
}

/* ===== fix admin wide product modal after cabinet modal overrides ===== */
.modalCard.modalCardWide.adminModalScrollable {
  width: min(980px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 24px) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  overflow: auto !important;
}

.modalCard.modalCardWide.adminModalScrollable .adminProductComposer {
  display: grid !important;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.modalCard.modalCardWide.adminModalScrollable .adminProductComposerPreviewWrap,
.modalCard.modalCardWide.adminModalScrollable .adminProductComposerFields,
.modalCard.modalCardWide.adminModalScrollable .adminFormGrid,
.modalCard.modalCardWide.adminModalScrollable .formField,
.modalCard.modalCardWide.adminModalScrollable .adminFieldFull {
  min-width: 0 !important;
}

.modalCard.modalCardWide.adminModalScrollable .adminProductComposerFields {
  width: 100% !important;
  overflow: hidden !important;
}

.modalCard.modalCardWide.adminModalScrollable .adminFormGrid.adminProductFormGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.modalCard.modalCardWide.adminModalScrollable .adminFieldFull {
  grid-column: 1 / -1 !important;
}

.modalCard.modalCardWide.adminModalScrollable input,
.modalCard.modalCardWide.adminModalScrollable textarea,
.modalCard.modalCardWide.adminModalScrollable select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.modalCard.modalCardWide.adminModalScrollable textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

@media (max-width: 860px) {
  .modalCard.modalCardWide.adminModalScrollable {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 16px !important;
  }

  .modalCard.modalCardWide.adminModalScrollable .adminProductComposer {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .modalCard.modalCardWide.adminModalScrollable .adminFormGrid.adminProductFormGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== admin product editor modal: restore wide layout ===== */
.modalBackdrop.adminModalBackdrop:has(.modalCard.modalCardWide.adminModalScrollable) {
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow-y: auto !important;
}

.modalCard.modalCardWide.adminModalScrollable {
  width: min(980px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 24px) !important;
  overflow: auto !important;
  margin: 0 !important;
  border-radius: 24px !important;
  padding: 18px !important;
  align-self: flex-start !important;
}

.modalCard.modalCardWide.adminModalScrollable .adminProductComposer {
  display: grid !important;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.modalCard.modalCardWide.adminModalScrollable .adminProductComposerPreviewWrap,
.modalCard.modalCardWide.adminModalScrollable .adminProductComposerFields,
.modalCard.modalCardWide.adminModalScrollable .adminFormGrid,
.modalCard.modalCardWide.adminModalScrollable .formField,
.modalCard.modalCardWide.adminModalScrollable .adminFieldFull {
  min-width: 0 !important;
}

.modalCard.modalCardWide.adminModalScrollable .adminProductComposerFields {
  width: 100% !important;
  overflow: hidden !important;
}

.modalCard.modalCardWide.adminModalScrollable .adminFormGrid.adminProductFormGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.modalCard.modalCardWide.adminModalScrollable .adminFieldFull {
  grid-column: 1 / -1 !important;
}

.modalCard.modalCardWide.adminModalScrollable input,
.modalCard.modalCardWide.adminModalScrollable textarea,
.modalCard.modalCardWide.adminModalScrollable select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.modalCard.modalCardWide.adminModalScrollable textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

@media (max-width: 860px) {
  .modalBackdrop.adminModalBackdrop:has(.modalCard.modalCardWide.adminModalScrollable) {
    align-items: stretch !important;
    padding: 8px !important;
  }

  .modalCard.modalCardWide.adminModalScrollable {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .modalCard.modalCardWide.adminModalScrollable .adminProductComposer {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .modalCard.modalCardWide.adminModalScrollable .adminFormGrid.adminProductFormGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== admin product create preview ===== */
.adminCreatePreview {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(24, 32, 51, 0.08);
}

.adminCreatePreviewHeader {
  margin-bottom: 12px;
}

.adminCreatePreviewHeader h4 {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  color: #111827;
}

.adminCreatePreviewCard {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(24, 32, 51, 0.08);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.adminCreatePreviewMedia {
  min-width: 0;
}

.adminCreatePreviewImage,
.adminCreatePreviewPlaceholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}

.adminCreatePreviewImage {
  display: block;
  object-fit: cover;
  background: #f3f4f6;
}

.adminCreatePreviewPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px dashed rgba(107, 114, 128, 0.35);
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
}

.adminCreatePreviewBody {
  min-width: 0;
}

.adminCreatePreviewCategory {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
}

.adminCreatePreviewTitle {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
  color: #111827;
}

.adminCreatePreviewPrices {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.adminCreatePreviewMarket {
  font-size: 14px;
  color: #9ca3af;
  text-decoration: line-through;
}

.adminCreatePreviewSale {
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  color: #111827;
}

.adminCreatePreviewDesc {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
  white-space: pre-wrap;
}

.adminCreatePreviewMeta {
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7280;
}

@media (max-width: 767px) {
  .adminCreatePreviewCard {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .adminCreatePreviewMedia {
    max-width: 220px;
  }

  .adminCreatePreviewTitle {
    font-size: 18px;
  }

  .adminCreatePreviewSale {
    font-size: 20px;
  }
}

/* ===== admin create modal warning + clean preview ===== */
.adminInlineWarning {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fef2f2;
  border: 1px solid rgba(239, 68, 68, 0.16);
  color: #b91c1c;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
}

.adminCreatePreviewActions {
  margin-top: 14px;
}

.adminCreatePreviewActions .cabinetActionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
}

.adminCreatePreviewNoLink {
  color: #dc2626;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
}

@media (max-width: 767px) {
  .adminInlineWarning {
    margin-top: 14px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 13px;
  }

  .adminCreatePreviewActions .cabinetActionBtn {
    width: 100%;
  }

  .adminCreatePreviewNoLink {
    font-size: 13px;
  }
}

.faqRichContent {
  color: #111827;
  line-height: 1.65;
  font-size: 15px;
}

.faqRichContent > *:first-child {
  margin-top: 0;
}

.faqRichContent > *:last-child {
  margin-bottom: 0;
}

.faqRichContent h1,
.faqRichContent h2,
.faqRichContent h3,
.faqRichContent h4 {
  margin: 1.1em 0 0.55em;
  line-height: 1.25;
  color: #0f172a;
}

.faqRichContent p {
  margin: 0 0 1em;
}

.faqRichContent ul,
.faqRichContent ol {
  margin: 0 0 1em 1.25em;
  padding: 0;
}

.faqRichContent li {
  margin: 0.25em 0;
}

.faqRichContent a {
  color: #2563eb;
  text-decoration: underline;
}

.faqRichContent blockquote {
  margin: 1em 0;
  padding: 0.75em 1em;
  border-left: 3px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 10px;
}

.faqRichContent hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 1.25em 0;
}

.adminRichEditor {
  min-height: 360px;
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  background: #fff;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #111827;
  outline: none;
  overflow-wrap: anywhere;
}

.adminRichEditor:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

.adminRichEditor:empty:before {
  content: attr(data-placeholder);
  color: #9ca3af;
}

.adminRichEditor h1,
.adminRichEditor h2,
.adminRichEditor h3,
.adminRichEditor h4 {
  margin: 1.1em 0 0.55em;
  line-height: 1.25;
}

.adminRichEditor p {
  margin: 0 0 1em;
}

.adminRichEditor ul,
.adminRichEditor ol {
  margin: 0 0 1em 1.25em;
  padding: 0;
}

.adminRichEditor li {
  margin: 0.25em 0;
}

.adminRichEditor blockquote {
  margin: 1em 0;
  padding: 0.75em 1em;
  border-left: 3px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 10px;
}

.adminRichEditor a {
  color: #2563eb;
  text-decoration: underline;
}

/* ===== ADMIN SHELL V2 ===== */
.adminShellV2 {
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

.adminTopbar {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-bottom: 18px;
  backdrop-filter: blur(14px);
  background: rgba(245, 247, 251, 0.92);
  border-bottom: 1px solid rgba(20, 24, 32, 0.08);
  padding-top: 8px;
}

.adminTopbarMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 14px;
}

.adminTopbarActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.adminTopbarNav {
  padding-bottom: 10px;
}

.adminContentArea {
  min-height: 50vh;
}

.adminNavDesktopWrap {
  margin-bottom: 0 !important;
}

.adminBottomNav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(20, 24, 32, 0.08);
  backdrop-filter: blur(16px);
}

.adminBottomNavItem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  background: rgba(20, 24, 32, 0.04);
}

.adminBottomNavItemActive {
  background: rgba(194, 106, 22, 0.14);
  color: #9a4f08;
}

@media (max-width: 920px) {
  .adminTopbarMain {
    align-items: flex-start;
    flex-direction: column;
  }

  .adminTopbarActions {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .adminNavDesktopWrap {
    display: none;
  }

  .adminBottomNav {
    display: grid;
  }

  .adminShellV2 {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  .adminHeaderTitle {
    font-size: 28px;
  }
}

/* ===== ADMIN MOBILE NAV GRID + INSTALL ===== */
.adminNavWrapGrid {
  margin-bottom: 0 !important;
}

.adminNavGrid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.adminNavGrid .adminNavChip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
}

.adminInstallWrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.adminInstallBtn {
  white-space: nowrap;
}

.adminInstallBtnDone {
  opacity: 0.8;
  pointer-events: none;
}

.adminInstallHint {
  max-width: 220px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

@media (max-width: 1200px) {
  .adminNavGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .adminShellV2 {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  .adminNavGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .adminTopbarActions {
    align-items: stretch;
  }

  .adminTopbarActions .ghostBtn,
  .adminTopbarActions form,
  .adminTopbarActions form button,
  .adminInstallWrap {
    width: 100%;
  }

  .adminInstallHint {
    max-width: none;
  }
}

/* ===== ADMIN COMPACT MOBILE NAV ===== */
.adminNavWrapCompact {
  margin-bottom: 0 !important;
}

.adminNavScroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.adminNavScroll::-webkit-scrollbar {
  display: none;
}

.adminNavChipCompact {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .adminTopbar {
    margin-bottom: 14px;
  }

  .adminTopbarMain {
    gap: 10px;
    padding: 2px 0 10px;
  }

  .adminHeaderEyebrow {
    font-size: 11px;
  }

  .adminHeaderTitle {
    font-size: 22px;
    line-height: 1.05;
    margin: 0;
  }

  .adminTopbarActions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .adminTopbarActions .ghostBtn,
  .adminTopbarActions form,
  .adminTopbarActions form button {
    width: 100%;
    min-height: 40px;
  }

  .adminTopbarActions form {
    display: block;
  }

  .adminInstallWrap {
    min-width: 0;
  }

  .adminInstallHint {
    grid-column: 1 / -1;
    max-width: none;
    font-size: 11px;
    line-height: 1.3;
  }

  .adminNavChipCompact {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .adminContentArea {
    padding-top: 4px;
  }
}

/* ===== ADMIN COMPACT MOBILE NAV ===== */
.adminNavWrapCompact {
  margin-bottom: 0 !important;
}

.adminNavScroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.adminNavScroll::-webkit-scrollbar {
  display: none;
}

.adminNavChipCompact {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .adminTopbar {
    margin-bottom: 14px;
  }

  .adminTopbarMain {
    gap: 10px;
    padding: 2px 0 10px;
  }

  .adminHeaderEyebrow {
    font-size: 11px;
  }

  .adminHeaderTitle {
    font-size: 22px;
    line-height: 1.05;
    margin: 0;
  }

  .adminTopbarActions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .adminTopbarActions .ghostBtn,
  .adminTopbarActions form,
  .adminTopbarActions form button {
    width: 100%;
    min-height: 40px;
  }

  .adminTopbarActions form {
    display: block;
  }

  .adminInstallWrap {
    min-width: 0;
  }

  .adminInstallHint {
    grid-column: 1 / -1;
    max-width: none;
    font-size: 11px;
    line-height: 1.3;
  }

  .adminNavChipCompact {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .adminContentArea {
    padding-top: 4px;
  }
}

/* ===== ADMIN ULTRA COMPACT ===== */
.adminShellUltra {
  padding-top: calc(6px + env(safe-area-inset-top));
}

.adminTopbarUltra {
  margin-bottom: 10px;
  padding-top: 4px;
}

.adminTopbarMainUltra {
  gap: 8px;
  padding: 0 0 8px;
}

.adminHeaderTitleBlockUltra {
  min-width: 0;
}

.adminHeaderTitleUltra {
  margin: 0;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.adminTopbarNavUltra {
  padding-bottom: 6px;
}

.adminContentAreaUltra {
  min-height: 50vh;
}

.adminActionMiniBtn {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.adminTopbarActionsUltra form {
  margin: 0;
}

.adminTopbarActionsUltra .adminInstallWrap {
  display: contents;
}

.adminTopbarActionsUltra .adminInstallBtn {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

.adminTopbarActionsUltra .adminInstallHint {
  width: 100%;
  margin-top: 2px;
}

@media (max-width: 760px) {
  .adminShellUltra {
    padding-top: calc(2px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .adminTopbarUltra {
    margin-bottom: 8px;
    padding-top: 2px;
  }

  .adminTopbarMainUltra {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-bottom: 6px;
  }

  .adminHeaderEyebrow {
    font-size: 10px;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
  }

  .adminHeaderTitleUltra {
    font-size: 18px;
    line-height: 1;
  }

  .adminTopbarActionsUltra {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .adminTopbarActionsUltra .ghostBtn,
  .adminTopbarActionsUltra form,
  .adminTopbarActionsUltra form button,
  .adminTopbarActionsUltra .adminInstallBtn {
    width: 100%;
    min-width: 0;
  }

  .adminActionMiniBtn,
  .adminTopbarActionsUltra .adminInstallBtn {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 12px;
    border-radius: 9px;
  }

  .adminTopbarActionsUltra .adminInstallHint {
    grid-column: 1 / -1;
    font-size: 10px;
    line-height: 1.25;
  }

  .adminTopbarNavUltra {
    padding-bottom: 4px;
  }

  .adminNavScroll {
    gap: 6px;
    padding-bottom: 0;
  }

  .adminNavChipCompact {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 999px;
  }

  .adminContentAreaUltra {
    padding-top: 2px;
  }

  .sectionTitle {
    margin-bottom: 12px;
  }

  .sectionTitle h2,
  .sectionTitle h3 {
    font-size: 20px;
    line-height: 1.1;
  }

  .panel {
    border-radius: 14px;
  }

  .actionRow {
    gap: 8px;
  }
}

/* ===== ADMIN POLISH ===== */
.reservationAdminTitle,
.requestAdminTitle {
  font-weight: 600 !important;
  line-height: 1.25;
}

.requestAdminCard .reservationAdminMeta {
  line-height: 1.25;
}

.productAdminCompactLayout .productAdminCompactTitle,
.productAdminCompactCard .productAdminCompactTitle,
.productAdminCompactCard b,
.productAdminCompactCard strong {
  font-weight: 600 !important;
  line-height: 1.25;
}

.productAdminCompactMain b,
.productAdminCompactMain strong {
  font-weight: 600 !important;
}

@media (max-width: 760px) {
  .reservationAdminTitle,
  .requestAdminTitle {
    font-size: 15px;
  }
}

/* ===== CABINET POLISH ===== */
.cabinetPanelTitleNote {
  color: var(--muted);
  font-size: 0.92em;
  font-weight: 600;
}

.cabinetRatingHelpLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  opacity: 0.85;
}

.cabinetRatingHelpLink:hover {
  opacity: 1;
}

/* ===== BOTTOM NAV MORE ANCHOR FIX ===== */
.bottomNavMoreAnchor {
  position: relative;
  display: flex;
  min-width: 0;
}

.bottomNavMoreAnchor .bottomNavItemButton {
  width: 100%;
}

.bottomNavMoreAnchor .bottomNavPopover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 80;
}

.adminPushPrompt {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(194, 106, 22, 0.18);
  background: rgba(255, 248, 235, 0.96);
  box-shadow: 0 12px 28px rgba(120, 74, 11, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.adminPushPromptText {
  display: grid;
  gap: 6px;
}

.adminPushPromptActions {
  justify-content: flex-start;
}

.bottomNavInner.bottomNavInner5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}















.clientPromotionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.clientPromotionLink {
  color: inherit;
  text-decoration: none;
}

.clientPromotionCard {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255,255,255,0.94);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.clientPromotionMedia {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #dfe6ff, #eef3ff);
  background-size: cover;
  background-position: center;
}

.clientPromotionBody {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.clientPromotionTitle {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}

.clientPromotionExcerpt {
  margin: 0;
  line-height: 1.55;
  color: var(--text);
}

.promotionHeroCard {
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: rgba(255,255,255,0.94);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.promotionHeroMedia {
  min-height: 320px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #dfe6ff, #eef3ff);
  background-size: cover;
  background-position: center;
}

.promotionHeroBody {
  display: grid;
  align-content: center;
  gap: 8px;
}
































































.adminPromotionsPanel {
  padding-top: 20px;
}

.adminPromotionsToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.adminPromotionsPageTitle {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 4px;
}

.adminPromotionGrid {
  display: grid;
  gap: 14px;
}

.adminPromotionCard {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
  align-items: start;
}

.adminPromotionCardInactive {
  filter: grayscale(1);
  opacity: 0.88;
}

.adminPromotionCardMedia,
.adminPromotionCardMediaContain {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
}

.adminPromotionCardBody {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.adminPromotionCardTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.adminPromotionCardTitle {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}

.adminPromotionMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.adminPromotionActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.adminPromotionActions .secondaryBtn,
.adminPromotionActions .ghostBtn,
.adminPromotionActions .dangerBtn {
  appearance: none;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.adminPromotionFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.adminPromotionPreview,
.adminPromotionPreviewContain {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
}

.adminPromotionEditorToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
}

.adminPromotionEditorToolbar .secondaryBtn,
.adminPromotionEditorToolbar .imageUploadBtn {
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
}

.adminPromotionEmojiRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.adminPromotionEmojiBtn {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.adminPromotionUploadRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.adminPromotionPreviewTileLarge {
  max-width: 520px;
}

.adminPromotionEditor {
  min-height: 320px;
  max-height: 60vh;
  overflow: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  padding: 22px 24px;
  background: #fff;
  outline: none;
  font-family: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: #0f172a;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.adminPromotionEditor:focus {
  border-color: rgba(194, 106, 22, 0.35);
  box-shadow: 0 0 0 4px rgba(194, 106, 22, 0.08), 0 12px 32px rgba(15, 23, 42, 0.08);
}

.adminPromotionEditor:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
}

.adminPromotionEditor a {
  color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.adminPromotionEditor img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px auto;
  border-radius: 18px;
}

.adminPromotionEditor b,
.adminPromotionEditor strong {
  font-weight: 800;
}

.adminPromotionEditor i,
.adminPromotionEditor em {
  font-style: italic;
}

.adminPromotionEditor u {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.promotionInlineImage {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.promotionsIntro {
  margin-bottom: 18px;
}

.promotionsEmptyState {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  padding: 36px 20px;
  border-radius: 24px;
}

.promotionsEmptyIcon {
  font-size: 40px;
  line-height: 1;
}

.promotionsFeed {
  display: grid;
  gap: 18px;
}

.promotionFeedLink {
  color: inherit;
  text-decoration: none;
}

.promotionShowcaseCard {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255,255,255,0.95);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}

.promotionShowcaseCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(24,32,51,0.12);
}

.promotionShowcaseCardHero {
  grid-template-columns: minmax(340px, 520px) minmax(0, 1fr);
}

.promotionShowcaseMedia {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #dfe6ff, #eef3ff);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.promotionShowcaseOverlay {
  position: absolute;
  inset: auto 16px 16px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.promotionSolidBadge {
  background: rgba(255,255,255,0.96);
  color: #111827;
  border: 1px solid rgba(17,24,39,0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.promotionSolidBadgeMuted,
.promotionShowcaseDeadline {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(17,24,39,0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.promotionShowcaseBody {
  display: grid;
  gap: 14px;
  padding: 22px;
  align-content: center;
}

.promotionShowcaseTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.promotionShowcaseTitle {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 900;
}

.promotionShowcaseArrow {
  font-size: 28px;
  color: var(--muted);
  line-height: 1;
}

.promotionShowcaseExcerpt {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #374151;
}

.promotionShowcaseFooter {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.promotionShowcaseAction {
  font-weight: 800;
  color: var(--accent);
}

.promotionArticleCard {
  display: grid;
  gap: 18px;
}

.promotionArticleHero {
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(135deg, #dfe6ff, #eef3ff);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.promotionArticleHero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,24,0.08) 0%, rgba(10,14,24,0.58) 100%);
}

.promotionArticleHeroInner {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.promotionArticleTitle {
  margin: 0;
  color: #fff;
  font-size: 42px;
  line-height: 1.04;
  font-weight: 900;
  max-width: 900px;
}

.promotionArticleExcerpt {
  margin: 0;
  color: rgba(255,255,255,0.94);
  font-size: 18px;
  line-height: 1.6;
  max-width: 780px;
}

.promotionArticleContentWrap {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.promotionArticleInfoCard {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
  border-radius: 24px;
}

.promotionArticleFact {
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.promotionArticleFact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.promotionArticleContentCard {
  padding: 26px;
  border-radius: 24px;
}

.promotionRichContent {
  font-family: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.72;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--text);
}

.promotionRichContent p,
.promotionRichContent ul,
.promotionRichContent ol,
.promotionRichContent blockquote {
  margin: 0 0 20px;
}

.promotionRichContent h1,
.promotionRichContent h2,
.promotionRichContent h3,
.promotionRichContent h4 {
  margin: 28px 0 14px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.promotionRichContent h1 { font-size: 32px; }
.promotionRichContent h2 { font-size: 28px; }
.promotionRichContent h3 { font-size: 24px; }
.promotionRichContent h4 { font-size: 20px; }

.promotionRichContent strong,
.promotionRichContent b {
  font-weight: 800;
  color: #0f2747;
}

.promotionRichContent ul,
.promotionRichContent ol {
  padding-left: 1.25em;
}

.promotionRichContent li + li {
  margin-top: 10px;
}

.promotionRichContent a {
  color: var(--brand);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.promotionRichContent blockquote {
  padding: 16px 18px;
  border-left: 4px solid var(--brand);
  background: rgba(194, 106, 22, 0.08);
  border-radius: 16px;
}

.promotionRichContent img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 640px) {
  .promotionRichContent {
    font-size: 17px;
    line-height: 1.68;
  }

  .promotionRichContent h1 { font-size: 28px; }
  .promotionRichContent h2 { font-size: 24px; }
  .promotionRichContent h3 { font-size: 21px; }
  .promotionRichContent h4 { font-size: 18px; }
}

@media (max-width: 899px) {
  .adminPromotionsToolbar {
    align-items: stretch;
  }

  .adminPromotionsToolbar > * {
    width: 100%;
  }

  .adminPromotionFormGrid,
  .adminPromotionCard,
  .promotionShowcaseCard,
  .promotionShowcaseCardHero,
  .promotionArticleContentWrap {
    grid-template-columns: 1fr;
  }

  .adminPromotionPreview,
  .adminPromotionPreviewContain,
  .adminPromotionCardMedia,
  .adminPromotionCardMediaContain {
    max-width: 160px;
  }

  .adminPromotionActions {
    flex-direction: column;
  }

  .adminPromotionActions .secondaryBtn,
  .adminPromotionActions .ghostBtn,
  .adminPromotionActions .dangerBtn {
    width: 100%;
    justify-content: center;
  }

  .adminPromotionEditorToolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promotionShowcaseTitle {
    font-size: 24px;
  }

  .promotionArticleHero {
    aspect-ratio: 1 / 1;
  }

  .promotionArticleTitle {
    font-size: 30px;
  }

  .promotionArticleExcerpt {
    font-size: 16px;
  }

  .promotionArticleHeroInner {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .promotionArticleInfoCard {
    position: static;
    top: auto;
  }

  .promotionArticleContentCard {
    padding: 18px;
  }
}

.adminPromotionCardMediaBox,
.adminPromotionPreviewBox {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adminPromotionCardMediaBox {
  max-width: 220px;
  aspect-ratio: 1 / 1;
}

.adminPromotionPreviewBox {
  max-width: 240px;
  aspect-ratio: 1 / 1;
}

.adminPromotionCardImage,
.adminPromotionPreviewImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}

.adminPromotionCardMediaPlaceholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 700;
  background: var(--panel-2);
}

@media (max-width: 899px) {
  .adminPromotionCardMediaBox {
    max-width: 160px;
  }

  .adminPromotionPreviewBox {
    max-width: 160px;
  }
}

.adminPromotionGridCompact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.adminPromotionTile {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
}

.adminPromotionTileInactive {
  filter: grayscale(1);
  opacity: 0.88;
}

.adminPromotionTileMedia,
.adminPromotionPreviewTile {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
  overflow: hidden;
}

.adminPromotionPreviewTile {
  max-width: 520px;
  aspect-ratio: auto;
  height: auto;
  display: block;
  overflow: visible;
}

.adminPromotionTileImage,
.adminPromotionPreviewTileImage {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.adminPromotionTileImage {
  height: 100%;
}

.adminPromotionTileBody {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.adminPromotionTileTop {
  display: grid;
  gap: 8px;
}

.adminPromotionTileTitle {
  margin: 0;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 800;
}

@media (max-width: 899px) {
  .adminPromotionGridCompact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminPromotionTileMedia,
  .adminPromotionPreviewTile {
    max-width: 160px;
  }
}

.promotionDetailPage {
  display: grid;
  gap: 22px;
}

.promotionDetailHero {
  display: grid;
  grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.promotionDetailVisualWrap {
  display: flex;
}

.promotionDetailVisualCard {
  position: relative;
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.95), rgba(255,255,255,0.82)),
    linear-gradient(135deg, #eef3ff 0%, #fff8eb 100%);
  box-shadow: 0 20px 60px rgba(24,32,51,0.10);
  aspect-ratio: 1 / 1;
}

.promotionDetailVisualImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promotionDetailVisualPlaceholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  color: #1f2937;
}

.promotionDetailVisualBadges {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.promotionDetailOffer {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 8px 4px;
}

.promotionDetailOfferTop {
  display: grid;
  gap: 10px;
}

.promotionDetailTitle {
  margin: 0;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.03em;
  max-width: 920px;
}

.promotionDetailLead {
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: #475569;
  max-width: 760px;
}

.promotionDetailFactsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.promotionDetailFactCard {
  display: grid;
  gap: 6px;
  min-height: 110px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow-soft);
}

.promotionDetailFactCard strong {
  font-size: 17px;
  line-height: 1.45;
  color: #111827;
}

.promotionDetailActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.promotionDetailHint {
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,248,235,0.95), rgba(255,255,255,0.96));
  border: 1px solid var(--border);
  color: #475569;
  line-height: 1.65;
}

.promotionDetailContentGrid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.promotionDetailSidebar {
  min-width: 0;
}

.promotionDetailStickyCard {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 28px;
}

.promotionDetailStickyHead {
  display: grid;
  gap: 6px;
}

.promotionDetailStickyHead h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
}

.promotionDetailMiniList {
  display: grid;
  gap: 14px;
}

.promotionDetailMiniItem {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.promotionDetailMiniDot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 7px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  box-shadow: 0 0 0 6px rgba(245,158,11,0.14);
}

.promotionDetailDescriptionCard {
  padding: 28px;
  border-radius: 30px;
  box-shadow: var(--shadow-soft);
}

.promotionDetailDescriptionHead {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.promotionDetailDescriptionHead h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 900;
}

.promotionDetailRichContent {
  font-size: 17px;
  line-height: 1.85;
  color: #1f2937;
}

.promotionDetailRichContent h1,
.promotionDetailRichContent h2,
.promotionDetailRichContent h3,
.promotionDetailRichContent h4 {
  margin: 26px 0 14px;
  line-height: 1.15;
  color: #0f172a;
}

.promotionDetailRichContent h1 { font-size: 34px; }
.promotionDetailRichContent h2 { font-size: 28px; }
.promotionDetailRichContent h3 { font-size: 23px; }
.promotionDetailRichContent h4 { font-size: 19px; }

.promotionDetailRichContent p {
  margin: 0 0 16px;
}

.promotionDetailRichContent ul,
.promotionDetailRichContent ol {
  margin: 0 0 18px 0;
  padding-left: 22px;
}

.promotionDetailRichContent li {
  margin-bottom: 8px;
}

.promotionDetailRichContent blockquote {
  margin: 22px 0;
  padding: 18px 20px;
  border-left: 4px solid #f59e0b;
  border-radius: 18px;
  background: rgba(255,248,235,0.82);
  color: #374151;
}

.promotionDetailRichContent a {
  color: #b45309;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(180,83,9,0.25);
}

.promotionDetailRichContent a:hover {
  color: #92400e;
}

.promotionDetailRichContent img {
  width: 100%;
  max-width: 760px;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(15,23,42,0.10);
}

@media (max-width: 1100px) {
  .promotionDetailHero,
  .promotionDetailContentGrid {
    grid-template-columns: 1fr;
  }

  .promotionDetailFactsGrid {
    grid-template-columns: 1fr;
  }

  .promotionDetailStickyCard {
    position: static;
    top: auto;
  }
}

@media (max-width: 899px) {
  .promotionDetailPage {
    gap: 18px;
  }

  .promotionDetailHero {
    gap: 16px;
  }

  .promotionDetailVisualCard {
    border-radius: 24px;
  }

  .promotionDetailVisualBadges {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .promotionDetailTitle {
    font-size: 32px;
    line-height: 1.04;
  }

  .promotionDetailLead {
    font-size: 16px;
    line-height: 1.65;
  }

  .promotionDetailFactCard {
    min-height: auto;
    border-radius: 20px;
    padding: 16px;
  }

  .promotionDetailActions {
    flex-direction: column;
    align-items: stretch;
  }

  .promotionDetailActions .primaryBtn,
  .promotionDetailActions .ghostBtn {
    width: 100%;
    justify-content: center;
  }

  .promotionDetailDescriptionCard {
    padding: 20px;
    border-radius: 24px;
  }

  .promotionDetailDescriptionHead h2 {
    font-size: 24px;
  }

  .promotionDetailRichContent {
    font-size: 16px;
    line-height: 1.75;
  }

  .promotionDetailRichContent h1 { font-size: 28px; }
  .promotionDetailRichContent h2 { font-size: 24px; }
  .promotionDetailRichContent h3 { font-size: 20px; }
  .promotionDetailRichContent h4 { font-size: 18px; }
}

.promotionDetailHeroCompact {
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.promotionDetailVisualCardCompact {
  border-radius: 28px;
}

.promotionDetailOfferCompact {
  gap: 14px;
}

.promotionDetailTitleReadable {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-weight: 800;
  max-width: 760px;
}

.promotionDetailContentSingle {
  display: block;
}

.promotionDetailDescriptionCardCompact {
  padding: 24px;
}

.promotionDetailContentTitle {
  margin: 0 0 18px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.promotionsIntroCompact {
  margin-bottom: 14px;
}

.promotionsTitleCompact {
  margin-bottom: 10px;
}

.promotionsTextCompact {
  max-width: 680px;
}

.promotionsFeedCompact {
  display: grid;
  gap: 12px;
}

.promotionListCardCompact {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255,255,255,0.96);
  box-shadow: var(--shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease;
}

.promotionListCardCompact:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(24,32,51,0.10);
}

.promotionListCardMediaWrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.promotionListCardMedia {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 180px;
  border-radius: 20px;
  background: linear-gradient(135deg, #dfe6ff, #eef3ff);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}

.promotionListCardBadges {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.promotionListCardBody {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.promotionListCardTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.promotionListCardTitle {
  margin: 0;
  font-size: 28px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.promotionListCardArrow {
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  flex: 0 0 auto;
}

.promotionListCardExcerpt {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
}

.promotionListCardMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}

.promotionListCardDeadline {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(17,24,39,0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.16);
}

@media (max-width: 1100px) {
  .promotionDetailHeroCompact {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 899px) {
  .promotionDetailTitleReadable {
    font-size: 30px;
    line-height: 1.16;
  }

  .promotionDetailContentTitle {
    font-size: 24px;
  }

  .promotionListCardCompact {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
    border-radius: 20px;
  }

  .promotionListCardMedia {
    max-width: 120px;
    border-radius: 16px;
  }

  .promotionListCardTitle {
    font-size: 20px;
    line-height: 1.2;
  }

  .promotionListCardExcerpt {
    font-size: 14px;
    line-height: 1.5;
  }

  .promotionListCardArrow {
    font-size: 20px;
  }
}

.cabinetBanAlert {
  margin-bottom: 16px;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(220, 38, 38, 0.18);
  background: linear-gradient(135deg, rgba(254,242,242,0.98), rgba(255,255,255,0.96));
  box-shadow: 0 12px 30px rgba(220,38,38,0.08);
  display: grid;
  gap: 8px;
}

.cabinetBanAlertTitle {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  color: #991b1b;
}

.cabinetBanAlertText {
  color: #374151;
  line-height: 1.65;
}

.cabinetBanAlertMeta {
  color: #6b7280;
  font-size: 14px;
  }

.cabinetMetaCardRating {
}

.cabinetMetaLabelRating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cabinetMetaCardRating .cabinetMetaLabel,
.cabinetMetaCardRating .cabinetRatingHelpLink,
.cabinetMetaCardRating strong {
  color: inherit !important;
}


.authEntryShell {
  display: grid;
  gap: 18px;
  margin: 0 auto 22px;
  justify-items: center;
}

.authEntryIntro {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  justify-items: center;
  text-align: center;
}

.authEntryTitle {
  margin: 0;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.05;
  font-weight: 900;
}

.authEntryText {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
  max-width: 48ch;
}

.authEntryGrid {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 640px;
  align-items: start;
}

.authMethodCard {
  width: 100%;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(24,32,51,0.08);
  border-radius: 24px;
  padding: 16px 18px;
  box-shadow: 0 18px 40px rgba(24,32,51,0.06);
  display: grid;
  gap: 14px;
}

.authMethodCardTelegram {
  background:
    radial-gradient(circle at top left, rgba(70, 149, 255, 0.12), transparent 38%),
    linear-gradient(135deg, #f7fbff, #eef6ff 58%, #ffffff);
}

.authMethodCardEmail {
  background:
    radial-gradient(circle at top left, rgba(155,170,215,0.10), transparent 40%),
    linear-gradient(135deg, #fafbfe, #f3f6fb 58%, #ffffff);
}

.authMethodHeader {
  display: grid;
  gap: 10px;
}

.authMethodBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.10);
  color: #2457c5;
  font-size: 12px;
  font-weight: 800;
}

.authMethodBadgeMuted {
  background: rgba(24,32,51,0.06);
  color: var(--muted);
}

.authMethodTitle {
  margin: 0;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.08;
  font-weight: 800;
}

.authMethodText {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
  max-width: 42ch;
}

.authMethodLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.authMethodLinksCentered {
  justify-content: center;
}

.authMethodCardCollapsible {
  gap: 0;
}

.authMethodCardOpen {
  gap: 14px;
}

.authMethodToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.authMethodToggleMain {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.authMethodTitleCompact {
  font-size: clamp(20px, 3.6vw, 26px);
}

.authMethodChevron {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(24,32,51,0.06);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
}

.authMethodBody {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

.authInputCentered {
  text-align: center;
}

.authCodeInputWide {
  letter-spacing: 0.18em;
}

.authPhoneHintStrong {
  margin: -2px 0 4px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--text);
}

.authActionsCentered {
  justify-items: center;
}

.authPrimaryBtnCentered,
.authGhostBtnCentered {
  margin-left: auto;
  margin-right: auto;
}

.authPrimaryBtn {
  min-width: 220px;
  justify-content: center;
}

.authGhostBtn {
  min-width: 220px;
  justify-content: center;
}

.authStatusText {
  text-align: center;
}

.authFormSpaced {
  display: grid;
  gap: 14px;
}

.authTelegramWidgetWrapCentered {
  justify-content: center;
}

.authMethodSwitchText {
  color: var(--muted);
  font-size: 14px;
}

.authMethodSwitchLink {
  font-weight: 700;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(24,32,51,0.18);
  text-underline-offset: 3px;
}

.authMethodSubtleLink {
  color: var(--muted);
  font-size: 14px;
}

.authTelegramWidgetWrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 58px;
}

.authCardSurfaceCompact {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

@media (min-width: 980px) {
  .authEntryGrid {
    grid-template-columns: 1fr;
  }
}

.bottomNavInner.bottomNavInner6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.bottomNavIconWithBadge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== chat clean base ===== */

.chatWindowCard,
.adminChatWindowCard {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(194, 106, 22, 0.10);
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(194, 106, 22, 0.12);
  overflow: hidden;
}

.chatWindowCard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  height: auto;
}

.chatWindowHead {
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.94);
}

.chatWindowTitle {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: #1f2a37;
}

.chatWindowSub {
  margin-top: 4px;
  font-size: 14px;
  color: #7b8794;
}

.adminChatShell {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.adminChatSidebar {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(194, 106, 22, 0.10);
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(194, 106, 22, 0.12);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.adminChatSidebarHead {
  padding: 20px 18px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.94);
}

.adminChatSidebarTitle {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 800;
  color: #1f2a37;
}

.adminChatSearchWrap {
  margin-top: 12px;
}

.adminChatSearchWrap .textInput {
  background: rgba(255, 255, 255, 0.98);
}

.adminChatSearchHint {
  margin-top: 6px;
  font-size: 12px;
  color: #7b8794;
}

.adminChatSearchMark {
  background: rgba(245, 158, 11, 0.28);
  color: inherit;
  padding: 0 2px;
  border-radius: 4px;
}

.adminChatSearchResultLine {
  color: #5f4a1f;
}

.adminChatDialogList {
  min-height: 0;
  overflow-y: auto;
}

.adminChatDialogItem {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  background: transparent;
  padding: 15px 16px;
  text-align: left;
  cursor: pointer;
}

.adminChatDialogItem:first-child {
  border-top: 0;
}

.adminChatDialogItem:hover {
  background: rgba(252, 246, 234, 0.65);
}

.adminChatDialogItemActive {
  background: linear-gradient(180deg, rgba(251, 243, 226, 0.95), rgba(248, 240, 224, 0.88));
}

.adminChatDialogTop,
.adminChatDialogBottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.adminChatDialogName {
  font-size: 16px;
  font-weight: 800;
  color: #243041;
}

.adminChatDialogTime,
.adminChatDialogMeta,
.adminChatDialogPreview {
  font-size: 13px;
  color: #7b8794;
}

.adminChatDialogMeta,
.adminChatDialogPreview {
  margin-top: 6px;
}

.chatUnreadBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #c26a16;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.adminChatWindowCard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.adminChatHeadMain {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.adminChatBackBtn {
  display: none;
  min-width: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  font-size: 20px;
}

.adminChatUserMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 14px;
  color: #6b7280;
  background: rgba(255, 255, 255, 0.90);
}

.chatMessageList {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 10px;
  background:
    radial-gradient(circle at top, rgba(245, 158, 11, 0.10), transparent 55%),
    linear-gradient(180deg, #fdf8ee 0%, #fbf7ef 100%);
}

.chatRow {
  display: flex;
}

.chatRowOwn {
  justify-content: flex-end;
}

.chatRowSupport {
  justify-content: flex-start;
}

.chatBubble {
  max-width: min(78%, 720px);
  padding: 14px 16px 10px;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(31, 42, 55, 0.06);
  overflow: hidden;
}

.chatBubbleOwn {
  background: linear-gradient(180deg, #ecffd9 0%, #e3ffc8 100%);
  border-bottom-right-radius: 10px;
}

.chatBubbleSupport {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom-left-radius: 10px;
}

.chatBubbleText {
  white-space: pre-wrap;
  word-break: break-word;
  color: #223042;
  font-size: 16px;
  line-height: 1.45;
}

.chatBubbleMeta {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  font-size: 12px;
  color: #7b8794;
}

.chatBubbleImage {
  display: block;
  width: 100%;
  max-width: 360px;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  background: #fff;
}

.chatComposer {
  padding: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.96);
}

.adminChatWindowCard .chatComposer {
  margin: 0;
}

.chatWindowCard .chatComposer {
  position: sticky;
  bottom: calc(var(--bottom-nav-offset, 58px) + 10px);
  z-index: 3;
  margin: 0;
}

.chatComposerRow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.chatComposerRowClient {
  grid-template-columns: 44px 44px minmax(0, 1fr) auto;
}

.chatAttachBtn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 14px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.chatComposerInput {
  width: 100%;
  min-height: 44px;
  height: 44px;
  max-height: 200px;
  overflow-y: auto;
  resize: none;
  border-radius: 16px;
  background: #fff;
  padding: 12px 16px;
  scrollbar-width: thin;
}

.chatComposerInput::-webkit-resizer {
  display: none;
}

.chatComposerInput::-webkit-scrollbar {
  width: 6px;
}

.chatComposerInput::-webkit-scrollbar-thumb {
  background: rgba(123, 135, 148, 0.35);
  border-radius: 999px;
}

.chatSendBtn {
  min-width: 120px;
  min-height: 44px;
  border-radius: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.chatFooterHint {
  margin-top: 8px;
  font-size: 12px;
  color: #7b8794;
}

.chatEmptyState {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.chatEmptyBubble {
  max-width: 420px;
  padding: 14px 18px;
  border-radius: 18px;
  background: #fff;
  color: #526071;
  text-align: center;
  box-shadow: 0 10px 24px rgba(31, 42, 55, 0.06);
}

.chatUploadPreview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.chatUploadPreviewImage {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
}

@media (max-width: 980px) {
  .adminChatShell {
    grid-template-columns: 1fr;
    height: 100%;
    min-height: 0;
  }

  .adminChatSidebar,
  .adminChatWindowCard {
    height: 100%;
  }

  .adminChatShellListMode .adminChatSidebar {
    display: flex;
    flex-direction: column;
  }

  .adminChatShellListMode .adminChatWindowCard {
    display: none;
  }

  .adminChatShellChatMode .adminChatSidebar {
    display: none;
  }

  .adminChatShellChatMode .adminChatWindowCard {
    display: flex;
    flex-direction: column;
  }

  .adminChatBackBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .chatBubble {
    max-width: 86%;
  }
}

@media (max-width: 760px) {
  .chatWindowCard {
    min-height: 0;
    height: auto;
    border-radius: 22px;
  }

  .adminChatShell {
    height: 100%;
    min-height: 0;
  }

  .adminChatSidebar,
  .adminChatWindowCard {
    border-radius: 22px;
  }

  .adminChatSidebarHead,
  .chatWindowHead {
    padding: 16px;
  }

  .adminChatUserMeta {
    padding: 10px 14px;
    gap: 8px 14px;
  }

  .chatMessageList {
    padding: 14px 12px;
  }

  .chatComposer {
    padding: 10px;
  }

  .adminChatDialogItem {
    padding: 14px 12px;
  }

  .chatBubble {
    max-width: 90%;
    min-width: 0;
  }

  .chatComposerRow {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .chatComposerRowClient {
    grid-template-columns: 40px 40px minmax(0, 1fr) auto;
  }

  .chatAttachBtn {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .chatSendBtn {
    min-width: 96px;
  }
}

/* ===== admin chat only content fix ===== */



/* ===== chat page shell (client) ===== */
.chatPageShell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  background: #f5f6f8;
  overflow: hidden;
}

body:has(.chatPageShell) {
  overflow: hidden;
}

body:has(.chatPageShell) .siteHeader,
body:has(.chatPageShell) .bottomNav {
  display: none;
}

.chatPageShell .chatWindowCard {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: #f5f6f8;
}

.chatPageShell .chatMessageList {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 8px;
}

.chatPageShell .chatComposer {
  flex: 0 0 auto;
  position: static;
  padding: 6px 10px 6px;
  border-top: 1px solid rgba(15,23,42,0.08);
  background: #fff;
}

.chatPageShell .chatComposerInner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.chatPageShell .chatComposerInput {
  flex: 1 1 0;
  min-height: 36px;
  max-height: 100px;
  height: 36px;
  resize: none;
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.14);
  font-size: 15px;
  line-height: 1.4;
  background: #f5f6f8;
  box-sizing: border-box;
  transition: border-color 0.15s;
  outline: none;
}

.chatPageShell .chatComposerInput:focus {
  border-color: rgba(15,23,42,0.30);
  background: #fff;
}

.chatPageShell .chatAttachBtn {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: color 0.15s;
}

.chatPageShell .chatAttachBtn:hover {
  color: #1f2937;
}

.chatPageShell .chatSendBtn {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0;
  border: none;
  background: transparent;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  margin: 0;
  transition: opacity 0.15s, color 0.15s;
  font-size: 0;
  line-height: 0;
}

.chatPageShell .chatSendBtn:hover {
  color: #1f2937;
}

.chatPageShell .chatSendBtn:disabled {
  opacity: 0.30;
  cursor: default;
}

.chatPageShell .chatSendBtn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* attach menu */
.chatAttachWrap {
  position: relative;
  flex: 0 0 36px;
}

.chatAttachMenu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  white-space: nowrap;
  min-width: 190px;
}

.chatAttachMenuItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.chatAttachMenuItem:hover {
  background: rgba(15,23,42,0.05);
}

.chatFooterHint {
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
  padding: 0 4px;
}


/* ===== chat app header ===== */
.chatAppHeader {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(15,23,42,0.07);
  backdrop-filter: blur(12px);
}

.chatAppBackBtn {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1f2937;
  border-radius: 50%;
  padding: 0;
  transition: background 0.15s;
}

.chatAppBackBtn:hover {
  background: rgba(15,23,42,0.06);
}

.chatAppHeaderInfo {
  flex: 1 1 0;
  min-width: 0;
}

.chatAppHeaderTitle {
  font-size: 17px;
  font-weight: 800;
  color: #1f2937;
  line-height: 1.1;
}

.chatAppHeaderSub {
  font-size: 13px;
  color: #7b8794;
  margin-top: 2px;
}

/* chatPageShell — прямые дочерние элементы */
.chatPageShell > .chatMessageList {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 8px;
  background: #f5f6f8;
}

.chatPageShell > .chatComposer {
  flex: 0 0 auto;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid rgba(15,23,42,0.07);
}

/* ===== admin chat page — fullscreen fixed layout ===== */
.adminChatPage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: #f5f6f8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body:has(.adminChatPage) {
  overflow: hidden;
}

/* скрываем adminShell header когда открыт чат */
body:has(.adminChatPage) .adminTopbar,
body:has(.adminChatPage) .adminPushPromptWrap {
  display: none;
}

/* adminChatShell занимает весь экран кроме нашего header */
.adminChatPage .adminChatShell {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* на мобиле sidebar и window занимают 100% высоты shell */
@media (max-width: 980px) {
  .adminChatPage .adminChatSidebar,
  .adminChatPage .adminChatWindowCard {
    height: 100%;
    min-height: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .adminChatPage .adminChatShell {
    gap: 0;
  }
}

/* ===== admin chat window — flex column чтобы messageList скроллился ===== */
.adminChatPage .adminChatWindowCard {
  display: flex !important;
  flex-direction: column !important;
}

.adminChatPage .adminChatWindowCard .chatMessageList {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.adminChatPage .chatBubbleMeta {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(15,23,42,0.48);
  margin-top: 6px;
}

.adminChatPage .chatRowSupport .chatBubbleMeta {
  justify-content: flex-start;
}

.adminChatPage .adminChatWindowCard .chatComposer {
  flex: 0 0 auto !important;
  position: static !important;
  bottom: auto !important;
}

/* то же для sidebar */
.adminChatPage .adminChatSidebar {
  display: flex !important;
  flex-direction: column !important;
}

.adminChatPage .adminChatSidebar .adminChatDialogList {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* ===== admin chat app header ===== */
.adminChatAppHeader {
  flex: 0 0 auto;
}

.adminChatHeaderSort {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.adminChatSortBtn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.adminChatSortBtn:hover {
  background: rgba(15,23,42,0.06);
}

.adminChatSortBtnActive {
  background: var(--accent, #c26a16);
  color: #fff;
  border-color: var(--accent, #c26a16);
}

/* скрываем desktop-only элементы на мобиле */
@media (max-width: 980px) {
  .adminChatSidebarHeadDesktopOnly {
    display: none;
  }
  .adminChatWindowHeadDesktopOnly {
    display: none;
  }
  .adminChatAppHeader {
    display: flex;
  }
}

/* на десктопе скрываем мобильный app-header */
@media (min-width: 981px) {
  .adminChatAppHeader {
    display: none;
  }
  .adminChatSidebarHeadDesktopOnly {
    display: block;
  }
  .adminChatWindowHeadDesktopOnly {
    display: block;
  }
  /* на десктопе: adminChatPage статичный, растягивается на оставшееся место */
  .adminChatPage {
    position: static;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }
  /* adminContentAreaUltra должна тоже быть flex-col и отдавать остаток */
  body:has(.adminChatPage) .adminContentAreaUltra {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
  }
  body:has(.adminChatPage) main.adminShell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  body:has(.adminChatPage) .adminTopbar,
  body:has(.adminChatPage) .adminPushPromptWrap {
    display: revert;
    flex: 0 0 auto;
  }
  body:has(.adminChatPage) {
    overflow: hidden;
  }
}

/* ===== telegram widget placeholder ===== */
.authTelegramWidgetWrap {
  position: relative;
  min-height: 54px;
}

.authTelegramPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  font-size: 14px;
  color: #7b8794;
}

/* ===== telegram hint ===== */
.authTelegramHint {
  font-size: 13px;
  color: #7b8794;
  text-align: center;
  margin-top: 10px;
}

/* ===== adminChatUserMeta с кнопкой броней ===== */
.adminChatUserMeta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.adminChatUserMetaLeft {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.adminChatBookingsBtn {
  font-size: 13px;
  padding: 4px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  white-space: nowrap;
  color: #333;
  background: #fafafa;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.adminChatBookingsBtn:hover {
  background: #f0f0f0;
}

/* ===== bookings modal ===== */
.bookingsModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.bookingsModal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}

.bookingsModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.bookingsModalTitle {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.bookingsModalClose {
  font-size: 16px;
  color: #999;
  padding: 2px 6px;
}

.bookingsModalBody {
  overflow-y: auto;
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bookingsModalEmpty {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding: 24px 0;
}

.bookingsModalItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #efefef;
  border-radius: 10px;
  background: #fafafa;
}

.bookingsModalItemMain {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bookingsModalItemTitle {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookingsModalItemTitle:hover {
  text-decoration: underline;
}

.bookingsModalItemNum {
  font-size: 12px;
  color: #888;
}

.bookingBadge {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bookingBadgePending  { background: #fff8e1; color: #b8860b; }
.bookingBadgeApproved { background: #e8f5e9; color: #2e7d32; }
.bookingBadgeBooked   { background: #e3f2fd; color: #1565c0; }
.bookingBadgeRejected { background: #fce4ec; color: #c62828; }
.bookingBadgeCancelled{ background: #f5f5f5; color: #757575; }

/* ===== Кнопка "Задать вопрос о товаре" ===== */
.productReserveAskBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 14px;
  color: #4b5563;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 16px;
  background: #f9fafb;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.productReserveAskBtn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #111827;
}

/* ===== Ссылки внутри чат-бабла ===== */
.chatLink {
  color: inherit;
  text-decoration: underline;
  word-break: break-all;
  opacity: 0.85;
}
.chatLink:hover {
  opacity: 1;
}

/* ===== Кнопка "Посмотреть товары" в категории ===== */
.categoryViewBtn {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  align-self: flex-start;
}

.categoryViewBtn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

/* ===== Плашка фильтра по категории в ленте ===== */
.catalogCategoryFilterNotice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  font-size: 14px;
  color: #1e40af;
}

.catalogCategoryFilterReset {
  margin-left: auto;
  font-size: 13px;
  color: #2563eb;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}

.catalogCategoryFilterReset:hover {
  background: #dbeafe;
}

/* ===== admin chat mobile hard switch ===== */
@media (max-width: 980px) {
  .adminChatShellMobile.adminChatShellListMode {
    display: block !important;
  }

  .adminChatShellMobile.adminChatShellListMode > .adminChatSidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  .adminChatShellMobile.adminChatShellListMode > .adminChatWindowCard {
    display: none !important;
  }

  .adminChatShellMobile.adminChatShellChatMode {
    display: block !important;
  }

  .adminChatShellMobile.adminChatShellChatMode > .adminChatSidebar {
    display: none !important;
  }

  .adminChatShellMobile.adminChatShellChatMode > .adminChatWindowCard {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .adminChatShellMobile.adminChatShellChatMode > .adminChatWindowCard .chatMessageList {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 16px !important;
  }

  .adminChatShellMobile.adminChatShellChatMode > .adminChatWindowCard .chatComposer {
    flex: 0 0 auto !important;
    position: static !important;
    bottom: auto !important;
  }
}

/* ===== admin chat desktop no page scroll ===== */
@media (min-width: 981px) {
  body:has(.adminChatPage) html,
  body:has(.adminChatPage) {
    overflow: hidden;
  }

  body:has(.adminChatPage) main.adminShell {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body:has(.adminChatPage) .adminContentArea,
  body:has(.adminChatPage) .adminContentAreaUltra {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  .adminChatShellDesktop {
    height: 100%;
    min-height: 0;
  }

  .adminChatShellDesktop .adminChatSidebar,
  .adminChatShellDesktop .adminChatWindowCard {
    min-height: 0;
  }

  .adminChatShellDesktop .adminChatDialogList,
  .adminChatShellDesktop .chatMessageList {
    overflow-y: auto;
  }
}

/* ===== admin nav chat button + unread badge ===== */
.adminNavChip {
  position: relative;
  gap: 8px;
}

.adminNavChipLabel {
  display: inline-block;
  line-height: 1;
}

.adminNavChipChat {
  min-width: 108px;
  padding-left: 22px;
  padding-right: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, #5b7fcf, #6b8fd8);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(91, 127, 207, 0.18);
}

.adminNavChipChat:hover {
  background: linear-gradient(135deg, #5477c4, #6488d0);
  color: #fff;
}

.adminNavChipChat.adminNavChipActive {
  background: linear-gradient(135deg, var(--cta), var(--cta-strong));
  color: var(--cta-contrast);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(194, 106, 22, 0.22);
}

.adminNavUnreadBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: #4f6fba;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
}

.adminNavChipActive .adminNavUnreadBadge {
  color: var(--cta-strong);
}

@media (max-width: 760px) {
  .adminNavChipChat {
    min-width: 96px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .adminNavUnreadBadge {
    min-width: 20px;
    height: 20px;
    font-size: 11px;
    padding: 0 5px;
  }
}



/* categories final layout */
.clientCategoryGridCompact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.clientCategoryGridCompact .clientCategoryTileSelectable {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.clientCategoryGridCompact .clientCategoryTileMediaWrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.clientCategoryGridCompact .clientCategoryTileMediaCompact {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 110px;
  background: transparent;
  border: 0;
  box-shadow: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.clientCategoryGridCompact .clientCategoryTileBody {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.clientCategoryGridCompact .clientCategoryTileLabelCompact {
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
  overflow: visible;
  display: block;
  min-height: 0;
  max-height: none;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.clientCategoryGridCompact .clientCategoryTileCount {
  min-height: 1.3em;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
}

.clientCategoryGridCompact .categoryViewBtn {
  margin-top: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
}

@media (min-width: 560px) {
  .clientCategoryGridCompact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .clientCategoryGridCompact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .clientCategoryGridCompact .clientCategoryTileMediaCompact {
    min-height: 96px;
  }

  .clientCategoryGridCompact .clientCategoryTileBody {
    padding: 10px 10px 12px;
  }

  .clientCategoryGridCompact .clientCategoryTileLabelCompact {
    font-size: 13px;
  }

  .clientCategoryGridCompact .clientCategoryTileCount {
    font-size: 12px;
  }
}

@media (min-width: 1024px) {
  .clientCategoryGridCompact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}


/* admin nav responsive hard override */
.adminNavWrapResponsive {
  width: 100% !important;
}

.adminNavResponsive {
  width: 100% !important;
}

@media (min-width: 761px) {
  .adminNavWrapResponsive {
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }

  .adminNavResponsive {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    overflow: visible !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .adminNavResponsive .adminNavChip,
  .adminNavResponsive .adminNavChipCompact {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  .adminNavWrapResponsive {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .adminNavWrapResponsive::-webkit-scrollbar {
    display: none !important;
  }

  .adminNavResponsive {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-width: none !important;
  }

  .adminNavResponsive::-webkit-scrollbar {
    display: none !important;
  }

  .adminNavResponsive .adminNavChip,
  .adminNavResponsive .adminNavChipCompact {
    flex: 0 0 auto !important;
  }
}


/* admin desktop nav final fix */
@media (min-width: 761px) {
  .adminTopbarNav,
  .adminTopbarNavUltra,
  .adminNavWrap,
  .adminNavWrapCompact,
  .adminNavWrapResponsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    display: block !important;
  }

  .adminNav,
  .adminNavModern,
  .adminNavScroll,
  .adminNavResponsive {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, max-content)) !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .adminNavChip,
  .adminNavChipCompact {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

.adminNavChipDragging {
  opacity: 0.6;
}

.adminNavResetBtn {
  min-height: 40px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .adminNavResetBtn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 999px;
  }
}

.adminNavEditBar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.adminNavItemShell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.adminNavItemShellEdit {
  width: 100%;
}

.adminNavItemControls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.adminNavMoveBtn {
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
}

@media (max-width: 760px) {
  .adminNavEditBar {
    margin-bottom: 8px;
  }

  .adminNavItemShell {
    flex: 0 0 auto;
  }

  .adminNavItemShellEdit {
    width: auto;
  }

  .adminNavItemControls {
    flex: 0 0 auto;
  }

  .adminNavMoveBtn {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 8px;
  }
}

.adminNavEditBar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.adminNavSortableItem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.adminNavSortableItemDragging {
  z-index: 5;
}

.adminNavDragHandle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(24, 32, 51, 0.12);
  background: #fff;
  color: #6b7280;
  border-radius: 999px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  font-size: 16px;
  line-height: 1;
}

.adminNavDragHandle:active {
  cursor: grabbing;
}

@media (max-width: 899px) {
  .adminNavSortableItem {
    flex: 0 0 auto;
  }

  .adminNavDragHandle {
    width: 30px;
    min-width: 30px;
    height: 30px;
    font-size: 14px;
  }
}


.adminReservationSuccessBtn {
  background: linear-gradient(135deg, #20b15a, #159947) !important;
  color: #fff !important;
  border-color: #159947 !important;
  box-shadow: 0 10px 22px rgba(21, 153, 71, 0.24) !important;
}

.adminReservationInfoBtn {
  background: #eaf4ff !important;
  color: #205ea6 !important;
  border-color: #b9d7ff !important;
}

.adminReservationInfoBtn:hover {
  background: #dcecff !important;
}

.adminReservationWarnBtn {
  background: #fff3e8 !important;
  color: #b85b00 !important;
  border-color: #ffd2a8 !important;
}

.adminReservationWarnBtn:hover {
  background: #ffe8d2 !important;
}

.adminReservationDangerBtn {
  background: #ffe8e8 !important;
  color: #b42318 !important;
  border-color: #ffb3b3 !important;
}

.adminReservationDangerBtn:hover {
  background: #ffd6d6 !important;
}


.cabinetShowCodesBtn {
  margin-top: 10px;
}

.cabinetCodesModal {
  width: min(560px, calc(100vw - 24px));
}

.cabinetCodesModalList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cabinetCodesModalLine {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  word-break: break-word;
}


.cabinetPickupCodeLine {
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0 !important;
}

.cabinetPickupCodeStrong {
  font-weight: 800 !important;
}

.cabinetCodesModalLine {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cabinetCodesModalLine strong {
  font-weight: 800 !important;
}

.cardImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adminChatMobileBackRow {
  display: none;
}

.adminChatMobileBackBtn {
  min-height: 40px;
}

@media (max-width: 980px) {
  .adminChatMobileBackRow {
    display: flex;
    padding: 12px 12px 0;
  }
}

.adminChatMobileBackRow {
  display: none;
}

.adminChatMobileBackBtn {
  min-height: 40px;
}

@media (max-width: 980px) {
  .adminChatMobileBackRow {
    display: flex;
    padding: 12px 12px 0;
  }
}

.productGalleryImageButton {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.productLightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.88);
}

.productLightboxInner {
  position: relative;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.productLightboxImage {
  display: block;
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
}

.productLightboxClose {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.productLightboxNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.productLightboxNavLeft {
  left: 12px;
}

.productLightboxNavRight {
  right: 12px;
}

.productLightboxClose,
.productLightboxNav,
.productLightboxClose:hover,
.productLightboxNav:hover,
.productLightboxClose:active,
.productLightboxNav:active,
.productLightboxClose:focus,
.productLightboxNav:focus {
  transform: none !important;
}

.authTelegramHintAlert {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .globalShareBtn {
    top: auto;
    right: 12px;
    bottom: 84px;
  }

  .shareBtn {
    padding: 9px 12px;
    font-size: 13px;
  }

  .shareBtnCard {
    top: 12px;
    right: 12px;
  }
}


.shareBtn {
  appearance: none;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.96);
  color: #475569;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.shareBtn:hover {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}

.shareBtnCard {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
}

.shareBtnInline {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  align-self: center;
}

.promotionFeedCardWrap,
.catalogCardWrap {
  position: relative;
}

.promotionFeedLink,
.catalogCardLink {
  display: block;
}

.promotionDetailActions,
.productDetailActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 768px) {
  .shareBtn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 15px;
  }

  .shareBtnCard {
    top: 8px;
    right: 8px;
  }

  .shareBtnInline {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }
}


.pwaInstallSafariAccent {
  font-weight: 700;
  color: #b45309;
}

.shareBtnIcon {
  width: 18px;
  height: 18px;
  display: block;
}

.shareBtnDone {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.shareBtnTop {
  position: static;
  flex: 0 0 auto;
}

.promotionTopActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .shareBtnIcon {
    width: 17px;
    height: 17px;
  }

  .promotionTopActions {
    margin-bottom: 14px;
  }
}

.catalogCardWrap {
  height: 100%;
}

.catalogCardLink {
  display: block;
  height: 100%;
}

.catalogModernCard {
  height: 100%;
}

.catalogModernMedia {
  position: relative;
  overflow: visible;
}

.catalogModernMedia .cardImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.catalogMediaTopLeft {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  max-width: calc(100% - 56px);
}

.catalogMediaBadge {
  background: rgba(255, 255, 255, 0.96);
  color: var(--accent-2);
  box-shadow: 0 8px 18px rgba(24,32,51,0.10);
}

.catalogBottomBadges {
  margin-bottom: 0;
}

.catalogModernBody {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-content: start;
}

.catalogModernTitle,
.cardTitle {
  min-height: 44px;
  max-height: 44px;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .catalogMediaTopLeft {
    top: 8px;
    left: 8px;
    max-width: calc(100% - 52px);
  }
}

.authTelegramFallback {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 247, 237, 0.96);
  border: 1px solid rgba(217, 119, 6, 0.18);
}

.authTelegramFallbackTitle {
  font-size: 16px;
  font-weight: 800;
  color: #9a3412;
}

.authTelegramFallbackText {
  margin: 0;
  color: #7c2d12;
  line-height: 1.5;
  font-size: 14px;
}

.authTelegramFallbackActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.authTelegramFallbackBtn {
  justify-content: center;
}

.authTelegramSimpleFallback {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 14px 0 0;
}

.authTelegramSimpleFallbackText {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}

.authTelegramRetryBtn {
  justify-content: center;
}

.catalogMediaTopRight {
  position: absolute;
  top: 10px;
  right: 2px;
  z-index: 8;
}

.productPageTopbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.productPriceRowLarge {
  align-items: baseline;
  gap: 12px;
}

.productOldPriceLarge {
  font-size: 28px;
  line-height: 1.1;
}

.productNewPriceLarge {
  font-size: 40px;
  line-height: 1.05;
}

.productReserveMainPrice {
  font-size: 40px;
}

.productReserveDescription {
  margin-top: 8px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}


.catalogModernMedia .shareBtnCard,
.catalogModernMedia .shareBtnProductCard {
  position: relative;
  z-index: 9;
}

.catalogMediaTopRight {
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 8;
}

.shareBtnCatalogHome {
  position: relative;
  top: 0;
  right: 0;
  z-index: 9;
}


.catalogModernMedia {
  position: relative;
  overflow: visible;
}

.catalogMediaTopRight {
  position: absolute !important;
  top: 8px !important;
  right: 6px !important;
  z-index: 20 !important;
  line-height: 0 !important;
}

.catalogMediaTopRight .shareBtn,
.catalogMediaTopRight .shareBtnCard,
.catalogMediaTopRight .shareBtnCatalogHome {
  position: static !important;
  display: inline-flex !important;
  margin: 0 !important;
  transform: none !important;
  vertical-align: top !important;
}

.floatingCategoriesReset {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 118px);
  transform: translateX(-50%) !important;
  width: min(420px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 70;
  cursor: pointer;
  font: inherit;
}

.floatingCategoriesReset span:first-child {
  opacity: 0.92;
  font-weight: 500;
}

.floatingCategoriesReset span:last-child {
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .floatingCategoriesReset {
    width: min(420px, calc(100vw - 16px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + 114px);
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
  }
}


.floatingCategoriesReset:hover,
.floatingCategoriesReset:focus,
.floatingCategoriesReset:active {
  transform: translateX(-50%) !important;
}

@media (min-width: 900px) {
  .catalogCompactCard {
    border-radius: 16px;
  }

  .catalogModernMedia {
    aspect-ratio: 1 / 0.66;
    min-height: 125px;
  }

  .catalogModernBody {
    padding: 12px;
    gap: 9px;
  }

  .catalogModernTitle,
  .catalogCompactTitle,
  .cardTitle {
    min-height: 36px;
    max-height: 36px;
    font-size: 14px;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #172033;
  }

  .catalogModernPrices,
  .priceRow {
    gap: 6px 8px;
  }

  .oldPrice {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    color: #8b93a6;
  }

  .newPrice {
    font-size: 16px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #172033;
  }

  .catalogMiniBadge {
    font-size: 11px;
    padding: 5px 8px;
  }

  .catalogBadgeRow {
    gap: 6px;
  }
}

@media (min-width: 900px) {
  .productPageLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 24px;
    align-items: start;
  }

  .productPageMainCard,
  .productPageAside {
    min-width: 0;
  }

  .productPageAside {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 88px;
  }

  .productPageInfoCard {
    padding: 18px;
  }

  .productPageTitle {
    font-size: 30px;
    line-height: 1.16;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0;
    color: #172033;
  }

  .productPageMedia {
    aspect-ratio: 1 / 0.82;
    border-radius: 24px;
  }

  .productReserveMainPrice {
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: #172033;
  }

  .productReserveDescription {
    font-size: 15px;
    line-height: 1.55;
    color: #4b5563;
  }
}

/* ===== auth polish mobile/ios ===== */
.authEntryShell,
.authEntryShell *,
.authMethodCard,
.authMethodCard * {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

.authEntryTitle {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f2937;
}

.authMethodTitle,
.authMethodTitleCompact {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2937;
}

.authMethodText,
.authMethodSwitchText,
.authMethodSubtleLink,
.authStatusText,
.authPhoneHint,
.authPhoneHintStrong {
  color: #4b5563;
}

.authMethodBadge {
  background: rgba(59, 130, 246, 0.10);
  color: #315ea8;
}

.authMethodBadgeMuted {
  background: rgba(15, 23, 42, 0.06);
  color: #6b7280;
}

.authMethodChevron {
  background: rgba(15, 23, 42, 0.06);
  color: #374151;
}

.authPhoneInput {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.authGhostBtnSpaced {
  margin-top: 10px;
}

.pwaInstallDock {
  z-index: 80;
}

.siteHeader {
  z-index: 40;
}

main.section,
.section {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .authEntryShell {
    padding-top: 92px;
  }

  .pwaInstallDock {
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
  }
}


.cabinetSummaryCard:hover,
.cabinetSummaryCard:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(194, 106, 22, 0.18) !important;
  border-color: rgba(194, 106, 22, 0.30) !important;
}

.cabinetSegmentBtn:hover,
.cabinetSegmentBtn:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(194, 106, 22, 0.32) !important;
  box-shadow: 0 12px 24px rgba(194, 106, 22, 0.14) !important;
}

.cabinetSummaryCard,
.cabinetSegmentBtn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease !important;
}

/* hotfix: center modal above mobile bottom bar */
@media (max-width: 768px) {
  .modalOverlay,
  .dialogOverlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) 16px !important;
  }

  .modalCard,
  .dialogCard {
    margin: 0 auto !important;
    width: min(100%, 560px) !important;
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)) !important;
  }
}

/* HOTFIX: cabinet confirm booking/cancel modal centered above bottom nav */
@media (max-width: 768px) {
  .modalBackdrop.adminModalBackdrop {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom) + 72px) 16px !important;
    z-index: 9999 !important;
  }

  .modalBackdrop.adminModalBackdrop > .modalCard.adminModalScrollable {
    width: min(560px, 100%) !important;
    margin: 0 auto !important;
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom) - 72px) !important;
    overflow: auto !important;
    border-radius: 18px !important;
  }
}

/* HOTFIX: force-center cabinet/admin modal (was sticking to bottom) */
.modalBackdrop.adminModalBackdrop{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  z-index: 9999 !important;
}

.modalBackdrop.adminModalBackdrop > .modalCard.adminModalScrollable{
  margin: 0 !important;
  max-height: calc(100dvh - 48px) !important;
  overflow: auto !important;
}


/* HOTFIX: when viewport becomes narrow, keep cabinet confirm modal centered (not bottom-sheet) */
@media (max-width: 900px) {
  .modalBackdrop.adminModalBackdrop{
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;   /* instead of flex-end */
    justify-content: center !important;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) 16px !important;
  }

  .modalBackdrop.adminModalBackdrop > .modalCard.adminModalScrollable,
  .modalBackdrop.adminModalBackdrop > .modalCard.modalCardWide.adminModalScrollable{
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;

    width: min(560px, 100%) !important;
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
    border-radius: 18px !important;
  }
}

/* HOTFIX: booking confirm modal overlaps bottom nav -> lift sheet above bottom bar */
@media (max-width: 900px), (max-height: 720px) {
  .modalBackdrop {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; /* reserve space for bottom nav */
  }

  /* if it's rendered as bottom-sheet, ensure it sits above reserved space */
  .modalBackdrop .modalCard {
    margin-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 24px - 92px - env(safe-area-inset-bottom, 0px)) !important;
    overflow: auto !important;
  }
}


.adminCreatePreviewScheduled {
  margin-top: 8px;
  font-size: 13px;
  color: var(--accent, #c26a16);
  font-weight: 600;
}


.adminCreatePreviewFooterGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.adminCreatePreviewFooterBtn {
  width: 100%;
  min-height: 68px;
  justify-content: center;
}

@media (max-width: 980px) {
  .adminCreatePreviewFooterGrid {
    grid-template-columns: 1fr;
  }

  .adminCreatePreviewFooterBtn {
    min-height: auto;
  }
}

.chatBubbleLink {
  color: #0f62fe;
  text-decoration: underline;
  white-space: pre-wrap;
  word-break: break-word;
}

.chatProductPreview {
  display: flex;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.chatProductPreviewImage {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 76px;
  background: #f3efe7;
}

.chatProductPreviewImagePlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #8a7b68;
}

.chatProductPreviewBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chatProductPreviewTitle {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  color: #2b241f;
  word-break: break-word;
}

.chatProductPreviewMeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: #6f6254;
}

.chatProductPreviewBadge {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f7ead7;
  color: #b86a12;
  font-size: 12px;
  font-weight: 700;
}

.chatBubbleLink {
  color: #0f62fe;
  text-decoration: underline;
  white-space: pre-wrap;
  word-break: break-word;
}

.chatProductPreview {
  display: flex;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.chatProductPreviewImage {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 76px;
  background: #f3efe7;
}

.chatProductPreviewImagePlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #8a7b68;
}

.chatProductPreviewBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chatProductPreviewTitle {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  color: #2b241f;
  word-break: break-word;
}

.chatProductPreviewMeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: #6f6254;
}

.chatProductPreviewBadge {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f7ead7;
  color: #b86a12;
  font-size: 12px;
  font-weight: 700;
}

.chatProductMessage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

a.ghostBtn.productReserveLinkBtn {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  font-weight: 800 !important;
}

a.ghostBtn.productReserveLinkBtn:hover,
a.ghostBtn.productReserveLinkBtn:focus,
a.ghostBtn.productReserveLinkBtn:active {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
}

/* ===== Cabinet queue notice ===== */
.cabinetQueueNotice {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #92400e;
  font-size: 13px;
  line-height: 1.35;
}

/* ===== Cabinet queue notice ===== */
.cabinetQueueNotice {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #92400e;
  font-size: 13px;
  line-height: 1.35;
}


.fitBadge {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 248, 236, 0.98), rgba(255, 236, 214, 0.98));
  border: 1px solid rgba(245, 158, 11, 0.22);
  color: #9a3412;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.08);
}

/* admin products badges stack patch */
.productAdminStatusStack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  align-self: flex-start !important;
  gap: 5px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.productAdminStatusStack .statusPill {
  min-height: 24px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

@media (max-width: 899px) {
  .productAdminStatusStack {
    align-self: flex-end !important;
  }
}



/* admin chat: edit/delete own messages */
.adminChatMessageActions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.adminChatMessageActionBtn {
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.68);
  color: #334155;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}

.adminChatMessageActionBtn:hover {
  background: rgba(255, 255, 255, 0.95);
}

.adminChatMessageActionBtn:disabled {
  opacity: 0.55;
  cursor: default;
}

.adminChatMessageActionDanger {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.35);
}

.adminChatEditingBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 12px;
  background: rgba(255, 251, 235, 0.92);
  color: #92400e;
  font-size: 13px;
}

.adminChatEditingCancel {
  padding: 5px 9px;
  font-size: 12px;
}

.chatComposerEditing .chatComposerInput {
  border-color: rgba(245, 158, 11, 0.65);
}


/* ===== Generosity mode UI ===== */
.adminGenerosityNavButton {
  background: linear-gradient(135deg, #ffe4ec, #fff1f5) !important;
  color: #9f1239 !important;
  border-color: rgba(244, 114, 182, 0.35) !important;
  font-weight: 800 !important;
}

.adminGenerosityNavButtonActive {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  color: #ffffff !important;
  border-color: rgba(220, 38, 38, 0.75) !important;
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.22) !important;
  animation: generosityPulse 2.6s ease-in-out infinite;
}

@keyframes generosityPulse {
  0%, 100% {
    filter: brightness(1);
    transform: translateY(0);
  }
  50% {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
}

.generosityModalBackdrop {
  z-index: 80;
}

.generosityModalCard {
  display: grid;
  gap: 14px;
}

.generosityCategoryTools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.generosityCategoryList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding: 4px;
}

.generosityCategoryOption {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.25;
}

.generosityCategoryOption input {
  width: 18px;
  height: 18px;
  accent-color: #dc2626;
}

.generosityFormGrid {
  margin-top: 4px;
}

.generosityInfoGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.generosityInfoBox {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 247, 237, 0.9);
  border: 1px solid rgba(251, 146, 60, 0.22);
}

.generosityInfoBox strong {
  color: #9a3412;
}

.generositySelectedList {
  display: grid;
  gap: 8px;
}

.generosityCategoryChips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.generosityCategoryChip {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 228, 230, 0.95);
  color: #be123c;
  font-size: 12px;
  font-weight: 800;
}

.adminFormError {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(254, 226, 226, 0.95);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #b91c1c;
  font-size: 13px;
  font-weight: 700;
}

.adminGenerosityFinishBtn,
.dangerBtn.adminGenerosityFinishBtn {
  border: none;
  border-radius: 14px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.18);
}

.generosityProductCard {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%) !important;
  border-color: rgba(251, 146, 60, 0.35) !important;
}

.generosityProductCard:hover {
  border-color: rgba(249, 115, 22, 0.52) !important;
  box-shadow: 0 18px 42px rgba(249, 115, 22, 0.14) !important;
}

.catalogMiniBadgeGenerosity,
.clientCategoryGenerosityBadge {
  background: linear-gradient(135deg, #dc2626, #f97316) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

.generosityPrice {
  color: #dc2626 !important;
  font-weight: 950 !important;
}

.productGenerosityNotice {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.98), rgba(255, 237, 213, 0.98));
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 850;
}

.clientCategoryGenerosityBadge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 16px);
  min-height: 24px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1.1;
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.2);
}

@media (max-width: 720px) {
  .generosityCategoryList,
  .generosityInfoGrid {
    grid-template-columns: 1fr;
  }

  .generosityCategoryList {
    max-height: 300px;
  }
}


/* ===== Generosity mode separate page ===== */
.adminGenerosityNavLink {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #7c2d12 !important;
  border-color: rgba(251, 146, 60, 0.22) !important;
  box-shadow: 0 6px 14px rgba(24, 32, 51, 0.04) !important;
  font-weight: 750 !important;
}

.adminGenerosityNavLink:hover {
  background: rgba(255, 247, 237, 0.96) !important;
  color: #9a3412 !important;
}

.adminGenerosityNavLink.adminNavChipActive {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 9px 20px rgba(249, 115, 22, 0.18) !important;
}

.adminGenerosityNavLinkActive {
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  color: #9a3412 !important;
  border-color: rgba(249, 115, 22, 0.36) !important;
}

.adminGenerosityNavLinkActive.adminNavChipActive {
  background: linear-gradient(135deg, #dc2626, #f97316) !important;
  color: #ffffff !important;
}

.adminGenerosityNavDot {
  margin-left: 6px;
  background: rgba(34, 197, 94, 0.92) !important;
  color: #ffffff !important;
}

.adminGenerosityPage {
  display: grid;
  gap: 16px;
}

.adminGenerosityHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 16px;
  align-items: stretch;
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(251, 146, 60, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 237, 0.92));
  border: 1px solid rgba(251, 146, 60, 0.2);
  box-shadow: var(--shadow-soft);
}

.adminGenerosityEyebrow {
  color: #9a3412;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 8px;
}

.adminGenerosityHero h1 {
  margin: 0 0 8px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.02;
}

.adminGenerosityHero p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.adminGenerosityStatusCard {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.24);
}

.adminGenerosityStatusCard span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.adminGenerosityStatusCard strong {
  color: #1f2937;
  font-size: 28px;
  line-height: 1.1;
}

.adminGenerosityStatusCard small {
  color: var(--muted);
  line-height: 1.35;
}

.adminGenerosityStatusActive {
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.98), rgba(255, 237, 213, 0.98));
  border-color: rgba(239, 68, 68, 0.2);
}

.adminGenerosityStatusActive strong {
  color: #dc2626;
}

.adminGenerosityCard {
  display: grid;
  gap: 16px;
}

.adminGenerosityStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.adminGenerosityStat {
  display: grid;
  gap: 6px;
  min-height: 96px;
  align-content: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 247, 237, 0.9);
  border: 1px solid rgba(251, 146, 60, 0.2);
}

.adminGenerosityStat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.adminGenerosityStat strong {
  color: #9a3412;
  font-size: 18px;
  line-height: 1.2;
}

.adminGenerositySelectedBlock {
  display: grid;
  gap: 8px;
}

.adminGenerosityToolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.adminGenerosityToolbarMeta {
  color: var(--muted);
  font-weight: 700;
}

.adminGenerosityCategoryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.adminGenerosityCategoryTile {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.24);
  cursor: pointer;
  line-height: 1.25;
  font-weight: 700;
}

.adminGenerosityCategoryTile input {
  width: 18px;
  height: 18px;
  accent-color: #f97316;
  flex-shrink: 0;
}

.adminGenerosityCategoryTileActive {
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 237, 213, 0.98));
  border-color: rgba(249, 115, 22, 0.36);
  color: #9a3412;
}

.adminGenerosityFormGrid {
  margin-top: 2px;
}

.adminGenerosityPreview {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.adminGenerosityPreview div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.adminGenerosityPreview span {
  color: var(--muted);
  font-weight: 750;
}

.adminGenerosityPreview strong {
  color: #dc2626;
  font-size: 24px;
}

.adminGenerosityPreview p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.adminGenerosityActions {
  justify-content: flex-start;
}

.adminGenerositySuccess {
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(220, 252, 231, 0.96);
  border: 1px solid rgba(34, 197, 94, 0.24);
  color: #166534;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .adminGenerosityCategoryGrid,
  .adminGenerosityStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .adminGenerosityHero {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .adminGenerosityCategoryGrid,
  .adminGenerosityStats {
    grid-template-columns: 1fr;
  }

  .adminGenerosityStatusCard strong {
    font-size: 24px;
  }
}


/* HOTFIX: generosity nav is now a calm link, modal button styles must not win */
.adminNav .adminGenerosityNavLink {
  animation: none !important;
}

.adminNav .adminGenerosityNavLink:not(.adminGenerosityNavLinkActive):not(.adminNavChipActive) {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #7c2d12 !important;
  border-color: rgba(251, 146, 60, 0.22) !important;
  box-shadow: 0 6px 14px rgba(24, 32, 51, 0.04) !important;
}

/* ===== RAZMET ADMIN HEADER COMPACT REDESIGN START ===== */

/* Компактная современная шапка админки без изменения логики */
.adminShell.adminShellV2.adminShellUltra {
  width: min(1680px, calc(100% - 32px));
  max-width: none;
  padding-top: 12px;
}

.adminTopbar.adminTopbarUltra {
  position: relative;
  z-index: 20;
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid rgba(133, 153, 213, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(96, 125, 210, 0.10), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(247,249,253,0.92));
  box-shadow: 0 12px 34px rgba(24, 32, 51, 0.07);
  backdrop-filter: blur(14px);
}

.adminTopbarMain.adminTopbarMainUltra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  min-width: 0;
}

.adminHeaderTitleBlock.adminHeaderTitleBlockUltra {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.adminHeaderEyebrow {
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.16em;
  color: #6b7280;
}

.adminHeaderTitle.adminHeaderTitleUltra {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.adminTopbarNav.adminTopbarNavUltra {
  min-width: 0;
}

/* Навигация: компактные чипы, без огромных кнопок */
.adminNavWrap.adminNavWrapCompact.adminNavWrapResponsive {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  padding: 0;
}

.adminNav.adminNavModern.adminNavScroll.adminNavResponsive {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  overflow: visible;
  min-width: 0;
}

.adminNavChip,
.adminNavChip.adminNavChipCompact {
  position: relative;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(133, 153, 213, 0.22);
  background: rgba(255, 255, 255, 0.78);
  color: #263244;
  box-shadow: none;
  font-size: 14px;
  line-height: 1;
  font-weight: 750;
  text-decoration: none;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.adminNavChip:hover {
  background: rgba(255,255,255,0.98);
  border-color: rgba(96, 125, 210, 0.34);
  box-shadow: 0 6px 16px rgba(24, 32, 51, 0.06);
  transform: translateY(-1px);
}

.adminNavChipActive,
.adminNavChip.adminNavChipActive {
  border-color: transparent;
  background: linear-gradient(135deg, #e8942d, #c96d14);
  color: #fff;
  box-shadow: 0 8px 18px rgba(201, 109, 20, 0.20);
}

/* Чат не должен быть синим всегда — только когда он реально активен */
.adminNavChipChat:not(.adminNavChipActive) {
  border-color: rgba(133, 153, 213, 0.22);
  background: rgba(255, 255, 255, 0.78);
  color: #263244;
  box-shadow: none;
}

.adminNavChipChat.adminNavChipActive {
  background: linear-gradient(135deg, #6b8ee8, #587bd8);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(88, 123, 216, 0.20);
}

.adminNavChipLabel {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.adminNavUnreadBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.95);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.adminGenerosityNavLink:not(.adminNavChipActive) {
  color: #8a3b1d;
  border-color: rgba(194, 106, 22, 0.24);
  background: rgba(255, 248, 240, 0.86);
}

.adminGenerosityNavLinkActive {
  box-shadow: 0 0 0 2px rgba(34,197,94,0.12), 0 8px 18px rgba(34,197,94,0.12);
}

.adminGenerosityNavDot {
  background: #16a34a;
}

/* Контент ближе к шапке */
.adminContentArea.adminContentAreaUltra {
  margin-top: 0;
}

/* Планшеты и телефоны: шапка низкая, навигация горизонтальным скроллом */
@media (max-width: 899px) {
  .adminShell.adminShellV2.adminShellUltra {
    width: min(100%, calc(100% - 20px));
    padding-top: 8px;
  }

  .adminTopbar.adminTopbarUltra {
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    margin-bottom: 10px;
  }

  .adminTopbarMain.adminTopbarMainUltra {
    align-items: flex-start;
  }

  .adminHeaderTitle.adminHeaderTitleUltra {
    font-size: 24px;
  }

  .adminHeaderEyebrow {
    font-size: 9px;
  }

  .adminNavWrap.adminNavWrapCompact.adminNavWrapResponsive {
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: -12px;
    padding-inline: 12px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .adminNavWrap.adminNavWrapCompact.adminNavWrapResponsive::-webkit-scrollbar {
    display: none;
  }

  .adminNav.adminNavModern.adminNavScroll.adminNavResponsive {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    gap: 7px;
  }

  .adminNavChip,
  .adminNavChip.adminNavChipCompact {
    min-height: 34px;
    padding: 8px 11px;
    font-size: 13px;
  }
}

/* Очень узкие экраны */
@media (max-width: 420px) {
  .adminTopbar.adminTopbarUltra {
    padding: 10px;
  }

  .adminHeaderTitle.adminHeaderTitleUltra {
    font-size: 22px;
  }

  .adminNavChip,
  .adminNavChip.adminNavChipCompact {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 12.5px;
  }
}

/* ===== RAZMET ADMIN HEADER COMPACT REDESIGN END ===== */

/* ===== RAZMET ADMIN MOBILE NAV FULLBLEED START ===== */

/* Мобильное меню админки: скролл на всю ширину экрана, без боковых рамок карточки */
@media (max-width: 899px) {
  .adminTopbarNav.adminTopbarNavUltra {
    width: auto;
    min-width: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .adminNavWrap.adminNavWrapCompact.adminNavWrapResponsive {
    width: 100vw;
    max-width: 100vw;
    margin-inline: 0;
    padding-left: max(12px, calc((100vw - min(100vw, calc(100vw - 20px))) / 2 + 12px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 22px), transparent 100%);
  }

  .adminNav.adminNavModern.adminNavScroll.adminNavResponsive {
    width: max-content;
    min-width: max-content;
    padding-right: 18px;
  }
}

@media (max-width: 420px) {
  .adminNavWrap.adminNavWrapCompact.adminNavWrapResponsive {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
}

/* ===== RAZMET ADMIN MOBILE NAV FULLBLEED END ===== */

/* admin products drafts badge: start */
.adminProductsDraftsButtonLabel {
  display: inline-flex;
  align-items: center;
}

.adminProductsDraftsBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 14px rgba(239, 68, 68, 0.55);
  animation: adminProductsDraftsBadgePulse 1.45s ease-in-out infinite;
}

@keyframes adminProductsDraftsBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 10px rgba(239, 68, 68, 0.45);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 18px rgba(239, 68, 68, 0.75);
  }
}
/* admin products drafts badge: end */

/* admin products buttons variant 1: start */
[data-admin-products-controls-row-v1="true"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
}

[data-admin-products-controls-row-v1="true"] > * {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[data-admin-products-controls-row-v1="true"] button,
[data-admin-products-controls-row-v1="true"] a {
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  [data-admin-products-controls-row-v1="true"] {
    gap: 10px !important;
  }

  [data-admin-products-controls-row-v1="true"] button,
  [data-admin-products-controls-row-v1="true"] a {
    min-height: 44px;
  }
}
/* admin products buttons variant 1: end */

/* admin products existing drafts badge visibility: start */
.adminProductsDraftsButtonLabel {
  display: inline-flex;
  align-items: center;
}

.adminProductsDraftsBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: #facc15;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.28);
}
/* admin products existing drafts badge visibility: end */

/* R86U_ADMIN_CHAT_MOBILE_SEARCH_FIX_V3 */
@media (max-width: 980px) {
  .adminChatPage .adminChatSidebarHead {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    isolation: isolate;
  }

  .adminChatPage .adminChatSearchWrap {
    position: relative;
    z-index: 21;
    pointer-events: auto;
    isolation: isolate;
  }

  .adminChatPage .adminChatSearchWrap .adminChatSearchInput {
    position: relative;
    z-index: 22;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-user-select: text;
    user-select: text;
  }

  .adminChatPage .adminChatSidebar .adminChatDialogList {
    position: relative;
    z-index: 1;
  }
}


/* R86_PRODUCT_BUTTONS_POLISH_V1 */
.productPageAside .productReserveLinkBtn {
  width: fit-content !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #dbe3ee !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.productPageAside .productReserveLinkBtn:hover {
  background: #eef2f7 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px);
}

.productPageAside .primaryBtn.productReserveBtn:not(.productReserveLinkBtn) {
  background: linear-gradient(135deg, #d78a28 0%, #bd6b15 100%);
  border-color: #bd6b15;
  box-shadow: 0 8px 18px rgba(189, 107, 21, 0.18);
}

.productPageAside .primaryBtn.productReserveBtn:not(.productReserveLinkBtn):hover {
  filter: saturate(0.96) brightness(0.99);
  box-shadow: 0 10px 22px rgba(189, 107, 21, 0.2);
}

.productPageAside .ghostBtn.productReserveBtn {
  box-shadow: none;
}

/* R86_PRODUCT_BUTTONS_ALIGN_FIX_V2 */
.productPageAside .productReserveBtn {
  width: 100% !important;
  min-height: 56px !important;
  margin-top: 14px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.productPageAside .productReserveSourceBtn,
.productPageAside .productReserveLinkBtn.productReserveSourceBtn {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #d8e0ea !important;
  box-shadow: none !important;
}

.productPageAside .productReserveSourceBtn:hover,
.productPageAside .productReserveLinkBtn.productReserveSourceBtn:hover {
  background: #eef2f7 !important;
  color: #1f2937 !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
  transform: none !important;
}

.productPageAside .productReserveOneClickBtn {
  background: linear-gradient(135deg, #d88a24 0%, #c66d14 100%) !important;
  color: #ffffff !important;
  border: 1px solid #c66d14 !important;
  box-shadow: 0 8px 18px rgba(198, 109, 20, 0.16) !important;
}

.productPageAside .productReserveOneClickBtn:hover {
  filter: brightness(0.99) saturate(0.98) !important;
  box-shadow: 0 9px 20px rgba(198, 109, 20, 0.18) !important;
  transform: none !important;
}

.productPageAside .productCartBtn {
  background: linear-gradient(135deg, #4d82ba 0%, #3b70aa 100%) !important;
  color: #ffffff !important;
  border: 1px solid #3b70aa !important;
  box-shadow: 0 8px 18px rgba(59, 112, 170, 0.16) !important;
}

.productPageAside .productCartBtn:hover {
  filter: brightness(0.99) saturate(0.98) !important;
  box-shadow: 0 9px 20px rgba(59, 112, 170, 0.18) !important;
  transform: none !important;
}

.productPageAside .productReserveBtn:disabled {
  opacity: 0.62 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* R86 TELEGRAM SETTINGS UI START */
.telegramSettings {
  overflow: hidden;
  border: 1px solid rgba(34, 158, 217, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(34, 158, 217, 0.13), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    0 22px 60px rgba(29, 53, 87, 0.08),
    0 2px 8px rgba(29, 53, 87, 0.04);
}

.telegramSettingsHero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border-bottom: 1px solid rgba(34, 158, 217, 0.12);
}

.telegramSettingsBrand {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.telegramSettingsLogo {
  display: grid;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(145deg, #39afe5 0%, #1689c4 100%);
  box-shadow: 0 12px 26px rgba(34, 158, 217, 0.28);
}

.telegramSettingsLogo svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.telegramSettingsEyebrow {
  margin-bottom: 3px;
  color: #1689c4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.telegramSettingsHero h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.2;
}

.telegramSettingsHero p {
  max-width: 610px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.telegramSettingsStatus {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.telegramSettingsStatusTest {
  border-color: rgba(245, 158, 11, 0.24);
  color: #a15c00;
  background: rgba(255, 247, 224, 0.92);
}

.telegramSettingsStatusLive {
  border-color: rgba(16, 185, 129, 0.25);
  color: #087b59;
  background: rgba(232, 250, 243, 0.94);
}

.telegramSettingsStatusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 13%, transparent);
}

.telegramSettingsBody {
  display: grid;
  gap: 26px;
  padding: 28px;
}

.telegramSettingsSection {
  display: grid;
  gap: 16px;
}

.telegramSettingsSectionHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.telegramSettingsSectionHeading > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.telegramSettingsSectionHeading h4 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.3;
}

.telegramSettingsSectionHeading p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
}

.telegramSettingsStep {
  display: inline-grid;
  width: 30px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  color: #1689c4;
  background: rgba(34, 158, 217, 0.1);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.telegramChannelGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.telegramChannelCard {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  gap: 13px;
  align-items: start;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(116, 128, 148, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.telegramChannelCard:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 158, 217, 0.36);
  box-shadow: 0 14px 30px rgba(29, 53, 87, 0.09);
}

.telegramChannelCard:has(input:focus-visible) {
  outline: 3px solid rgba(34, 158, 217, 0.22);
  outline-offset: 3px;
}

.telegramChannelCardActive {
  border-color: rgba(34, 158, 217, 0.55);
  background:
    linear-gradient(135deg, rgba(34, 158, 217, 0.085), rgba(255, 255, 255, 0.96) 58%);
  box-shadow:
    0 14px 32px rgba(34, 158, 217, 0.11),
    inset 0 0 0 1px rgba(34, 158, 217, 0.08);
}

.telegramChannelCardLive.telegramChannelCardActive {
  border-color: rgba(16, 185, 129, 0.48);
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(255, 255, 255, 0.96) 58%);
  box-shadow:
    0 14px 32px rgba(16, 185, 129, 0.1),
    inset 0 0 0 1px rgba(16, 185, 129, 0.07);
}

.telegramVisuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.telegramChannelIcon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 900;
}

.telegramChannelIconTest {
  color: #a15c00;
  background: linear-gradient(145deg, #fff5d4, #ffe5a3);
}

.telegramChannelIconLive {
  color: #087b59;
  background: linear-gradient(145deg, #e2faef, #c6f2df);
}

.telegramChannelContent {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.telegramChannelTitleRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.telegramChannelTitleRow strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.telegramChannelBadge {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.telegramChannelBadgeTest {
  color: #a15c00;
  background: #fff2c8;
}

.telegramChannelBadgeLive {
  color: #087b59;
  background: #ddf8ec;
}

.telegramChannelDescription {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.telegramChannelContent code {
  width: fit-content;
  max-width: 100%;
  padding: 4px 7px;
  overflow: hidden;
  border-radius: 7px;
  color: #657086;
  background: rgba(99, 115, 138, 0.08);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.telegramChannelRadio {
  display: grid;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  place-items: center;
  border: 2px solid #ccd4df;
  border-radius: 50%;
  background: #ffffff;
  transition: border-color 180ms ease;
}

.telegramChannelRadio span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transform: scale(0.5);
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.telegramChannelCardActive .telegramChannelRadio {
  border-color: #229ed9;
}

.telegramChannelCardLive.telegramChannelCardActive .telegramChannelRadio {
  border-color: #10a978;
}

.telegramChannelCardActive .telegramChannelRadio span {
  background: #229ed9;
  transform: scale(1);
}

.telegramChannelCardLive.telegramChannelCardActive .telegramChannelRadio span {
  background: #10a978;
}

.telegramSettingsDivider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(116, 128, 148, 0.18) 10%,
    rgba(116, 128, 148, 0.18) 90%,
    transparent
  );
}

.telegramAutomationCard {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(116, 128, 148, 0.16);
  border-radius: 18px;
  background: rgba(248, 250, 253, 0.82);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

.telegramAutomationCard:hover {
  border-color: rgba(34, 158, 217, 0.3);
  background: rgba(245, 250, 254, 0.96);
}

.telegramAutomationIcon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: #8a55d6;
  background: linear-gradient(145deg, #f0e7ff, #e4d4ff);
}

.telegramAutomationIcon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.telegramAutomationContent {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.telegramAutomationTitle {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.telegramAutomationDescription {
  max-width: 720px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.telegramSwitch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.telegramSwitch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.telegramSwitchTrack {
  position: relative;
  display: block;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: #cfd6e0;
  box-shadow: inset 0 1px 3px rgba(29, 53, 87, 0.14);
  transition:
    background 180ms ease,
    box-shadow 180ms ease;
}

.telegramSwitchThumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(29, 53, 87, 0.25);
  transition: transform 180ms ease;
}

.telegramSwitch input:checked + .telegramSwitchTrack {
  background: linear-gradient(135deg, #31ace2, #1689c4);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.08),
    0 5px 14px rgba(34, 158, 217, 0.22);
}

.telegramSwitch input:checked + .telegramSwitchTrack .telegramSwitchThumb {
  transform: translateX(22px);
}

.telegramSwitch input:focus-visible + .telegramSwitchTrack {
  outline: 3px solid rgba(34, 158, 217, 0.24);
  outline-offset: 3px;
}

.telegramSettingsNotice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(34, 158, 217, 0.14);
  border-radius: 15px;
  color: #526075;
  background: rgba(34, 158, 217, 0.055);
}

.telegramSettingsNoticeIcon {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #229ed9;
  font-size: 12px;
  font-weight: 900;
  font-family: Georgia, serif;
}

.telegramSettingsNotice div {
  display: grid;
  gap: 3px;
}

.telegramSettingsNotice strong {
  color: #344057;
  font-size: 12px;
  line-height: 1.4;
}

.telegramSettingsNotice div > span {
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .telegramSettingsHero {
    display: grid;
    gap: 18px;
    padding: 20px;
  }

  .telegramSettingsStatus {
    width: fit-content;
  }

  .telegramSettingsBody {
    gap: 22px;
    padding: 20px;
  }

  .telegramSettingsSectionHeading {
    display: grid;
    gap: 7px;
  }

  .telegramSettingsSectionHeading p {
    padding-left: 40px;
    text-align: left;
  }

  .telegramChannelGrid {
    grid-template-columns: 1fr;
  }

  .telegramAutomationCard {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .telegramSettings {
    border-radius: 19px;
  }

  .telegramSettingsHero,
  .telegramSettingsBody {
    padding: 16px;
  }

  .telegramSettingsBrand {
    gap: 12px;
  }

  .telegramSettingsLogo {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .telegramSettingsLogo svg {
    width: 26px;
    height: 26px;
  }

  .telegramChannelCard {
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    gap: 10px;
    padding: 14px;
  }

  .telegramChannelIcon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .telegramAutomationCard {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .telegramSwitch {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .telegramSettingsNotice {
    padding: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .telegramChannelCard,
  .telegramChannelRadio,
  .telegramChannelRadio span,
  .telegramSwitchTrack,
  .telegramSwitchThumb,
  .telegramAutomationCard {
    transition: none;
  }
}
/* R86 TELEGRAM SETTINGS UI END */

/* R86_PRODUCT_CREATE_SHELL_V1 */
.adminProductCreateBackdrop {
  z-index: 10020 !important;
  padding: 14px !important;
  background: rgba(15, 23, 42, 0.58) !important;
  backdrop-filter: blur(12px) !important;
}

.adminProductCreateModal {
  display: flex !important;
  flex-direction: column !important;
  width: min(1120px, calc(100vw - 28px)) !important;
  max-width: 1120px !important;
  max-height: calc(100dvh - 28px) !important;
  padding: 0 !important;
  overflow: auto !important;
  border: 1px solid rgba(194, 106, 22, 0.12) !important;
  border-radius: 28px !important;
  background: #f7f5f1 !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28) !important;
}

.adminProductCreateHeader {
  position: sticky;
  top: 0;
  z-index: 8;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 20px 22px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(18px);
}

.adminProductCreateHeader h3 {
  margin: 0 !important;
  font-size: 27px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
}

.adminProductCreateEyebrow {
  margin-bottom: 5px;
  color: #b76717;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.adminProductCreateSubtitle {
  margin-top: 6px;
  color: #7b8794;
  font-size: 13px;
  line-height: 1.4;
}

.adminProductCreateCloseBtn {
  flex: 0 0 auto !important;
  min-width: 104px;
}

.adminProductCreateComposer {
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 20px 22px 10px;
}

.adminProductCreatePhotos,
.adminProductCreateFields {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.04);
}

.adminProductCreatePhotos {
  align-content: start;
}

.adminProductCreateUploadRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.adminProductCreateUploadRow .imageUploadBtn {
  flex: 1 1 150px;
  justify-content: center;
  min-height: 44px;
  background: #fff8ee;
  color: #8a4b08;
  font-weight: 800;
}

.adminProductCreateFormGrid {
  gap: 14px !important;
}

.adminProductCreateFormGrid .formField {
  gap: 7px;
}

.adminProductCreateFormGrid .formField > span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.adminProductCreateFormGrid .textInput {
  border-color: rgba(15, 23, 42, 0.10) !important;
  background: #fff !important;
}

.adminProductCreateModal .adminCreatePreview,
.adminProductCreateModal .adminInlineWarning {
  margin-left: 22px;
  margin-right: 22px;
}

.adminProductCreateFooter {
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin-top: 18px !important;
  padding: 14px 22px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255, 253, 249, 0.97);
  backdrop-filter: blur(18px);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.05);
}

.adminProductCreateFooter > button {
  min-height: 45px !important;
}

@media (max-width: 760px) {
  .adminProductCreateBackdrop {
    padding: 0 !important;
  }

  .adminProductCreateModal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .adminProductCreateHeader {
    padding:
      calc(14px + env(safe-area-inset-top, 0px))
      14px
      13px;
  }

  .adminProductCreateHeader h3 {
    font-size: 21px !important;
  }

  .adminProductCreateSubtitle {
    display: none;
  }

  .adminProductCreateCloseBtn {
    min-width: 0;
  }

  .adminProductCreateComposer {
    grid-template-columns: 1fr !important;
    padding: 13px 12px 8px;
  }

  .adminProductCreatePhotos,
  .adminProductCreateFields {
    padding: 14px;
    border-radius: 18px;
  }

  .adminProductCreateModal .adminCreatePreview,
  .adminProductCreateModal .adminInlineWarning {
    margin-left: 12px;
    margin-right: 12px;
  }

  .adminProductCreateFooter {
    padding:
      10px
      12px
      calc(10px + env(safe-area-inset-bottom, 0px));
  }
}
/* R86_PRODUCT_CREATE_SHELL_V1_END */

/* R86_PRODUCT_CREATE_MOBILE_OVERFLOW_V2 */
@media (max-width: 760px) {
  .adminProductCreateBackdrop {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .adminProductCreateModal {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .adminProductCreateModal *,
  .adminProductCreateModal *::before,
  .adminProductCreateModal *::after {
    box-sizing: border-box;
  }

  .adminProductCreateHeader {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .adminProductCreateHeader > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .adminProductCreateHeader h3,
  .adminProductCreateEyebrow {
    overflow-wrap: anywhere;
  }

  .adminProductCreateCloseBtn {
    flex: 0 0 auto !important;
    max-width: 40%;
    white-space: nowrap;
  }

  .adminProductCreateComposer,
  .adminProductCreatePhotos,
  .adminProductCreateFields,
  .adminProductCreateFormGrid,
  .adminProductCreateFooter {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .adminProductCreateFormGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .adminProductCreateModal input,
  .adminProductCreateModal textarea,
  .adminProductCreateModal select {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .adminProductCreateModal .adminCreatePreview,
  .adminProductCreateModal .adminInlineWarning,
  .adminProductCreateModal .adminCreatePreviewFooterGrid {
    max-width: 100%;
    min-width: 0;
  }
}
/* R86_PRODUCT_CREATE_MOBILE_OVERFLOW_V2_END */

/* ===== R86 ADMIN HEADER STABLE POLISH ===== */

/*
 * Кнопка установки загружается асинхронно и раньше возвращала null.
 * Постоянный слот сохраняет геометрию шапки до и после появления кнопки.
 */
.adminInstallSlot {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  min-width: 116px;
  min-height: 36px;
}

.adminInstallSlot .adminInstallWrap {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  gap: 6px;
}

.adminInstallSlot .adminInstallHint {
  position: absolute;
  z-index: 5;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(194, 106, 22, 0.14);
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.98);
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.12);
}

.adminTopbar.adminTopbarUltra {
  position: relative;
  overflow: visible;
  padding: 14px 16px 12px;
  border: 1px solid rgba(194, 106, 22, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(255, 253, 249, 0.98), rgba(255, 248, 239, 0.94));
  box-shadow:
    0 14px 34px rgba(31, 41, 55, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.adminTopbarMain.adminTopbarMainUltra {
  min-height: 48px;
  align-items: center;
  gap: 16px;
}

.adminHeaderTitleBlock.adminHeaderTitleBlockUltra {
  min-width: 0;
}

.adminHeaderTitle.adminHeaderTitleUltra {
  color: #4b2e16;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.adminHeaderEyebrow {
  color: #a16207;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.adminTopbarNav.adminTopbarNavUltra {
  margin-top: 12px;
  padding: 0;
}

.adminNavWrap.adminNavWrapCompact.adminNavWrapResponsive {
  border-top: 1px solid rgba(194, 106, 22, 0.10);
  padding-top: 10px;
}

.adminNav.adminNavModern.adminNavScroll.adminNavResponsive {
  min-height: 38px;
  align-items: center;
  gap: 8px;
}

.adminNavChip,
.adminNavChip.adminNavChipCompact {
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 13px;
  font-weight: 750;
  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.04);
}

.adminNavChipActive,
.adminNavChip.adminNavChipActive {
  box-shadow: 0 8px 18px rgba(194, 106, 22, 0.22);
}

@media (max-width: 760px) {
  .adminTopbar.adminTopbarUltra {
    padding: 11px 10px 10px;
    border-radius: 20px;
  }

  .adminTopbarMain.adminTopbarMainUltra {
    min-height: 46px;
    gap: 10px;
  }

  .adminHeaderTitle.adminHeaderTitleUltra {
    font-size: 22px;
  }

  .adminInstallSlot {
    min-width: 104px;
    min-height: 34px;
    justify-content: flex-end;
  }

  .adminInstallSlot .adminInstallWrap {
    min-height: 34px;
  }

  .adminInstallSlot .adminInstallBtn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .adminInstallSlot .adminInstallHint {
    right: 10px;
    max-width: calc(100vw - 32px);
  }

  .adminTopbarNav.adminTopbarNavUltra {
    margin-top: 10px;
  }

  .adminNavWrap.adminNavWrapCompact.adminNavWrapResponsive {
    border-top: 0;
    padding-top: 0;
  }

  .adminNav.adminNavModern.adminNavScroll.adminNavResponsive {
    min-height: 36px;
  }

  .adminNavChip,
  .adminNavChip.adminNavChipCompact {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 12.5px;
  }
}

/* ===== R86 ADMIN DESKTOP STATIC HEADER V2 ===== */

/*
 * На ПК меню админки всегда остаётся одной строкой.
 * Это отключает конфликтующие desktop grid/flex правила выше.
 */
.adminHeaderTitleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-height: 38px;
  white-space: nowrap;
}

.adminHeaderTitleRow .adminInstallSlot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 116px;
  width: 116px;
  min-width: 116px;
  height: 38px;
  min-height: 38px;
}

.adminHeaderTitleRow .adminInstallSlot .adminInstallWrap {
  display: inline-flex;
  align-items: center;
  height: 38px;
  min-height: 38px;
  line-height: 1;
}

.adminHeaderTitleRow .adminInstallSlot .adminInstallBtn {
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .adminTopbar.adminTopbarUltra {
    min-height: 138px;
  }

  .adminTopbarMain.adminTopbarMainUltra {
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    gap: 16px !important;
  }

  .adminHeaderTitleBlock.adminHeaderTitleBlockUltra {
    display: grid !important;
    align-content: center !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    overflow: visible !important;
  }

  .adminHeaderEyebrow {
    height: 12px !important;
    line-height: 12px !important;
  }

  .adminHeaderTitle.adminHeaderTitleUltra {
    height: 32px !important;
    line-height: 32px !important;
    white-space: nowrap !important;
  }

  .adminTopbarNav.adminTopbarNavUltra {
    display: block !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin-top: 12px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .adminNavWrap.adminNavWrapCompact.adminNavWrapResponsive {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 10px 0 0 !important;
    overflow: visible !important;
    border-top: 1px solid rgba(194, 106, 22, 0.10) !important;
    box-sizing: border-box !important;
  }

  .adminNav.adminNavModern.adminNavScroll.adminNavResponsive {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .adminNav.adminNavModern.adminNavScroll.adminNavResponsive .adminNavChip,
  .adminNav.adminNavModern.adminNavScroll.adminNavResponsive .adminNavChipCompact {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    padding: 0 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .adminNav.adminNavModern.adminNavScroll.adminNavResponsive
  .adminNavChip:hover,
  .adminNav.adminNavModern.adminNavScroll.adminNavResponsive
  .adminNavChip:active,
  .adminNav.adminNavModern.adminNavScroll.adminNavResponsive
  .adminNavChip:focus,
  .adminNav.adminNavModern.adminNavScroll.adminNavResponsive
  .adminNavChip:focus-visible {
    transform: none !important;
  }

  .adminNavUnreadBadge {
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }

  .adminTopbarActions.adminTopbarActionsUltra {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 899px) {
  .adminHeaderTitleRow {
    flex-wrap: wrap;
  }

  .adminHeaderTitleRow .adminInstallSlot {
    height: 34px;
    min-height: 34px;
  }
}


/* ===== R86 PRODUCT GALLERY ARROWS STATIC V1 ===== */

/*
 * Убираем конфликт с глобальными:
 * button:hover { transform: translateY(-1px) }
 * и фиксируем вертикальное положение стрелок без transform.
 */

.productGalleryArrow,
.productGalleryArrow:hover,
.productGalleryArrow:active,
.productGalleryArrow:focus,
.productGalleryArrow:focus-visible {
  position: absolute !important;
  box-sizing: border-box !important;
  top: calc(50% - 21px) !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(194, 106, 22, 0.18) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #8a4b08 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 38px !important;
  text-align: center !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease !important;
  z-index: 5 !important;
}

.productGalleryArrowLeft,
.productGalleryArrowLeft:hover,
.productGalleryArrowLeft:active,
.productGalleryArrowLeft:focus,
.productGalleryArrowLeft:focus-visible {
  left: 14px !important;
  right: auto !important;
}

.productGalleryArrowRight,
.productGalleryArrowRight:hover,
.productGalleryArrowRight:active,
.productGalleryArrowRight:focus,
.productGalleryArrowRight:focus-visible {
  right: 14px !important;
  left: auto !important;
}

.productGalleryArrow:hover,
.productGalleryArrow:focus-visible {
  background: #c26a16 !important;
  border-color: #c26a16 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(194, 106, 22, 0.24) !important;
}

.productGalleryArrow:active {
  background: #a9540e !important;
  border-color: #a9540e !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(194, 106, 22, 0.18) !important;
}

.productGalleryArrow:focus-visible {
  outline: 3px solid rgba(194, 106, 22, 0.24) !important;
  outline-offset: 2px !important;
}

@media (min-width: 900px) {
  .productGalleryArrow,
  .productGalleryArrow:hover,
  .productGalleryArrow:active,
  .productGalleryArrow:focus,
  .productGalleryArrow:focus-visible {
    top: calc(50% - 21px) !important;
  }
}

/*
 * Стрелки внутри lightbox тоже не должны прыгать.
 * Здесь положение фиксируется без transform.
 */
.productLightboxNav,
.productLightboxNav:hover,
.productLightboxNav:active,
.productLightboxNav:focus,
.productLightboxNav:focus-visible {
  box-sizing: border-box !important;
  top: calc(50% - 22px) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 50% !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 31px !important;
  font-weight: 400 !important;
  line-height: 40px !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease !important;
}

.productLightboxNav:hover,
.productLightboxNav:focus-visible {
  background: rgba(194, 106, 22, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

.productLightboxNav:active {
  background: rgba(169, 84, 14, 0.96) !important;
  transform: none !important;
}

.productLightboxNav:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.44) !important;
  outline-offset: 2px !important;
}

.productLightboxNavLeft,
.productLightboxNavLeft:hover,
.productLightboxNavLeft:active,
.productLightboxNavLeft:focus,
.productLightboxNavLeft:focus-visible {
  left: 14px !important;
  right: auto !important;
}

.productLightboxNavRight,
.productLightboxNavRight:hover,
.productLightboxNavRight:active,
.productLightboxNavRight:focus,
.productLightboxNavRight:focus-visible {
  right: 14px !important;
  left: auto !important;
}

@media (max-width: 899px) {
  .productGalleryArrow {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .productGalleryArrow,
  .productLightboxNav {
    transition: none !important;
  }
}

/* ===== R86 PRODUCT GALLERY ARROWS STATIC V1 END ===== */

/* ===== R86 PRODUCT SWIPE GALLERY ===== */

.productGalleryViewport {
  touch-action: pan-y;
  isolation: isolate;
}

.productGalleryImageButton {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.productGalleryTrack {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 360ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.productGalleryImage {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.productGalleryViewport:active .productGalleryTrack {
  transition-duration: 180ms;
}

.catalogProductSwipeMedia {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  isolation: isolate;
  background: linear-gradient(180deg, #fffdf8 0%, #f8f1e6 100%);
}

.catalogProductSwipeTrack {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.catalogProductSwipeImage {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.catalogProductSwipeDots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 44px);
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.22);
  transform: translateX(-50%);
  pointer-events: none;
}

.catalogProductSwipeDots span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  transition: width .22s ease, background-color .22s ease;
}

.catalogProductSwipeDots span.catalogProductSwipeDotActive {
  width: 15px;
  background: #fff;
}

.catalogProductSwipeCounter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.58);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

@media (min-width: 900px) {
  .catalogProductSwipeMedia:hover .catalogProductSwipeTrack {
    transition-duration: 280ms;
  }
}

@media (max-width: 899px) {
  .catalogProductSwipeMedia {
    border-radius: 20px 20px 0 0 !important;
  }

  .catalogProductSwipeDots {
    bottom: 7px;
  }

  .catalogProductSwipeCounter {
    bottom: 7px;
    right: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .productGalleryTrack,
  .catalogProductSwipeTrack,
  .catalogProductSwipeDots span {
    transition: none !important;
  }
}

/* Кликабельный шильдик очереди в карточке товара */
.productAdminQueueBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.productAdminQueueBadge:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
  border-radius: 5px;
}

.queueRowSide {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 899px) {
  .queueRowSide {
    text-align: left;
    white-space: normal;
  }
}