/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM PRELOADER — NEOcargo
   Apple/Revolut-style splash screen with pulsing logo
   ═══════════════════════════════════════════════════════════════════════════ */

#neo-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #262626;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.5s;
}

#neo-preloader.neo-preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.neo-preloader-logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(178, 254, 18, 0.35));
}

.neo-preloader-bar-track {
  width: 150px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.neo-preloader-bar-fill {
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #b2fe12, transparent);
  border-radius: 2px;
  animation: neo-progress 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes neo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.96); }
}

@keyframes neo-progress {
  0% { transform: translateX(-150%); }
  100% { transform: translateX(400%); }
}

.branch-tab-svg,
.branch-info-svg {
  filter: brightness(0) saturate(100%) invert(81%) sepia(97%) saturate(749%) hue-rotate(41deg) brightness(1.2) drop-shadow(0 2px 8px #b2fe12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST INTERACTION SYSTEM
   Native app feel - no hover, tactile press feedback
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove tap highlight on mobile */
/* ДОЛГОЕ НАЖАТИЕ НЕ ДОЛЖНО ВЕСТИ СЕБЯ КАК НА САЙТЕ.
   Задержал палец на картинке или тексте — Safari показывает системное меню
   «Скопировать / Поделиться / Сохранить изображение», а текст начинает
   выделяться синим. В приложениях так не бывает никогда, и это один из самых
   бытовых признаков «я в браузере».

   Запрещаем это по умолчанию, но НЕ везде: ниже перечислено то, что люди
   действительно копируют руками — трек-код, адрес склада в Китае, код
   курьера, код филиала. Там выделение и меню остаются. Поля ввода тоже:
   без выделения в них нельзя поправить текст. */
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

input, textarea, select, [contenteditable="true"],
.cn-address-modern-card, .cn-address-modern-card *,
.compact-track, .courier-pin-code, .courier-pin-code-row,
.map-fullscreen-code, .pk-code, .pp-track, .sp-msg-text,
[data-kopiruem], .neo-vydelyaem {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection (except inputs) */
body {
  -webkit-user-select: none;
  user-select: none;
}

input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* ═══════════════════════════════════════════════════════════════════════════
   iOS-STYLE PRESS EFFECT
   Subtle, professional tactile feedback
   ═══════════════════════════════════════════════════════════════════════════ */

/* Smooth return transition (default state) */
button, a, .btn, .icon-btn, .card-item, .nav-item, .tab-link,
.parcel-card, .parcel-compact-card, .status-card, .bonuses-card,
.profile-feature-card, .profile-branch-card, .branch-card,
.cn-copy-btn, .cn-help-btn, .modal-close-btn, .profile-settings-btn {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), 
              opacity 0.3s ease,
              filter 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOVER ISOLATION - Only for devices with mouse (desktop)
   Prevents "sticky hover" on touch devices
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  /* Desktop-only hover effects */
  .parcel-card:hover,
  .parcel-compact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border-color: var(--accent-lime);
  }
  
  .status-card:hover,
  .bonuses-card:hover,
  .profile-feature-card:hover,
  .profile-branch-card:hover {
    transform: translateY(-2px);
  }
  
  .cn-copy-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(178, 254, 18, 0.4);
  }
  
  .cn-help-btn:hover {
    background: rgba(178, 254, 18, 0.12);
    border-color: rgba(178, 254, 18, 0.3);
    color: rgba(255, 255, 255, 0.9);
  }
  
  .modal-close-btn:hover {
    background: var(--color-error);
    color: white;
    border-color: var(--color-error);
  }
  
  .profile-settings-btn:hover,
  .profile-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .parcel-btn-history:hover {
    background: var(--accent-lime);
    color: #1a1a1a;
  }
  
  .parcel-btn-delete:hover {
    background: var(--color-error);
    color: white;
  }
  
  .parcel-compact-delete:hover {
    color: rgba(255, 59, 48, 1);
    transform: scale(1.1);
  }
  
  .logout-btn:hover {
    background: var(--color-error);
    color: white;
    transform: translateY(-2px);
  }
  
  /* Settings menu items hover */
  .settings-menu-item-udalen:hover {
    background: rgba(255, 255, 255, 0.03);
  }
  
  /* Logout settings button - red hover */
  #settings-logout-btn:hover {
    background: rgba(255, 59, 48, 0.05);
  }
  
  /* Delete modal buttons */
  #delete-cancel-btn:hover {
    background: var(--bg-hover);
  }
  
  #delete-confirm-btn:hover {
    background: rgba(255, 59, 48, 0.85);
  }
  
  /* Settings close button */
  #settings-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
  }
  
  /* Language modal close button */
  #language-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
  }
  
  /* About screen social links */
  .about-social-link:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS STATES - Keyboard navigation only
   ═══════════════════════════════════════════════════════════════════════════ */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent-lime);
  outline-offset: 2px;
}

/* ==== Global Scrollbar Hide (native app feel) ==== */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* NEOcargo — Dark Minimalist Design System */
/* ==========================================
   ДВИЖЕНИЕ ЭКРАНОВ — ОДНО МЕСТО НА ВСЁ ПРИЛОЖЕНИЕ
   ==========================================

   Кривая cubic-bezier(.32,.72,0,1) — это НЕ случайная кривая и не моя
   выдумка: это стандартное приближение пружины, которой UINavigationController
   гоняет push и pop (жёсткость 1000, затухание 500, масса 3, без отскока).
   Номинальная длительность перехода в iOS — 0.35 с на обе стороны.

   Я успел её заменить на «более плавную» пружину через linear() и ошибся:
   владелец сразу сказал, что стало тягуче. Резкость шла не от кривой.
   Настоящие причины лежали рядом и перечислены там, где исправлены:
   затемнение нижнего экрана отставало от пальца на всю длительность
   перехода; закрытие свайпом ехало вообще по кривой Material, то есть
   иначе, чем закрытие кнопкой; скорость для решения «закрывать или нет»
   считалась средней за весь жест, поэтому быстрый короткий флик не
   срабатывал; добивка после жеста была константой и не зависела от того,
   сколько пути осталось.

   ПОЧЕМУ ЗДЕСЬ НЕ РОВНО ЭТА КРИВАЯ. Владелец поднимал длительность
   350 → 370 → 390 → 420 и не чувствовал разницы. И не мог: у кривой iOS
   85% пути проходится за первые 30% времени, остальное — почти незаметный
   доводящий хвост. При 350 мс видимое движение заканчивается на 169-й
   миллисекунде, при 420 — на 203-й. Разница в 34 мс на таком движении
   глазом не ловится, сколько ни добавляй.

   Значит длительность — не та ручка. Ручка — форма кривой, то есть куда
   смещён вес движения. Ниже середина между родной кривой iOS и пружиной,
   которая показалась тягучей:

     путь на 10/20/30/50/70% времени
     iOS      27 / 66 / 85 / 95 / 99   — резко
     шаг 1    18 / 43 / 71 / 92 / 98
     здесь    13 / 33 / 59 / 88 / 97
     пружина  11 / 32 / 52 / 79 / 93   — тягуче

   Начало у нынешней кривой почти как у пружины — оттуда и мягкость на
   старте, которой просил владелец. А хвост заметно быстрее: у пружины на
   половине времени пройдено 79% пути, здесь 88%. Тягучесть, которая не
   понравилась в пружине, шла именно от хвоста — когда экран уже приехал,
   а движение ещё длится. */
:root {
  --neo-dur: 420ms;
  --neo-ease: cubic-bezier(0.42, 0.48, 0.15, 1);
}

:root {
  /* Core Colors — Dark Theme */
  --bg-primary: #262626;
  --bg-card: #2f2f2f;
  --bg-muted: #3a3a3a;
  --border-default: #3c3c3c;
  
  /* Text Colors */
  --text-primary: #dcded1;
  --text-secondary: rgba(220, 222, 209, 0.72);
  --text-tertiary: rgba(220, 222, 209, 0.54);
  --text-disabled: rgba(220, 222, 209, 0.38);
  
  /* Accent — Lime */
  --accent-lime: #b2fe12;
  --accent-lime-hover: #a0e010;
  --accent-lime-light: rgba(178, 254, 18, 0.15);
  
  /* Token Names (from task spec) */
  --brand: #b2fe12;
  --ink: #dcded1;
  --bg: #262626;
  --card: #2f2f2f;
  --muted: #6b7280;
  --pending: #f5a623;
  
  /* Semantic Colors */
  --color-success: #22c55e;
  --color-success-bg: rgba(34, 197, 94, 0.15);
  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.15);
  --color-error: #ef4444;
  --color-error-bg: rgba(239, 68, 68, 0.15);
  --color-info: #60a5fa;
  --color-info-bg: rgba(96, 165, 250, 0.15);
  
  /* Status Badge Colors */
  --status-pending-bg: var(--bg-muted);
  --status-pending-text: var(--text-secondary);
  --status-cn-warehouse-bg: var(--color-info-bg);
  --status-cn-warehouse-text: var(--color-info);
  --status-cn-transit-bg: var(--color-info-bg);
  --status-cn-transit-text: var(--color-info);
  --status-sorting-bg: var(--accent-lime-light);
  --status-sorting-text: var(--accent-lime);
  --status-ready-bg: var(--color-success-bg);
  --status-ready-text: var(--color-success);
  --status-delivered-bg: var(--bg-muted);
  --status-delivered-text: var(--text-tertiary);
  
  /* Spacing — 8px Grid */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  
  /* Border Radius */
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* Shadows — Soft, Dark-Adapted */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 4px 16px rgba(178, 254, 18, 0.2);
  
  /* Typography */
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Courier New', monospace;
  
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 20px;
  
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --transition-fast: .15s ease;
  --transition: .2s ease;
  --transition-slow: .3s ease;
  
  /* Legacy Variable Mapping → New Design System */
  --color-bg: var(--bg-primary);
  --color-card: var(--bg-card);
  --color-border: var(--border-default);
  --color-text: var(--text-primary);
  --color-text-light: var(--text-secondary);
  --color-text-muted: var(--text-tertiary);
  --color-accent: var(--accent-lime);
  --gradient-accent: linear-gradient(135deg, var(--accent-lime) 0%, var(--accent-lime-hover) 100%);
  --gradient-primary: linear-gradient(135deg, var(--accent-lime) 0%, var(--accent-lime-hover) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-muted) 100%);
  --color-success-text: var(--color-success);
  --color-warning-text: var(--color-warning);
  --color-danger: var(--color-error);
  --color-danger-bg: var(--color-error-bg);
  --color-danger-text: var(--color-error);
  --color-info-text: var(--color-info);
  --shadow: var(--shadow-sm);
  --shadow-accent: 0 4px 16px rgba(178, 254, 18, 0.25);
  --radius: var(--radius-md);
  --radius-sm: 12px;
  --radius-full: 9999px;
  --gap: var(--space-3);
  --gap-xs: var(--space-1);
  --gap-sm: var(--space-2);
  --gap-lg: var(--space-4);
  --gap-xl: var(--space-6);
  --font-size: var(--text-base);
  --font-size-sm: var(--text-sm);
  --font-size-md: var(--text-md);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-weight-normal: var(--font-normal);
  --font-weight-medium: var(--font-medium);
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Courier New', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; touch-action: pan-y; } /* Убрали overflow: hidden */
body { margin: 0; font-family: var(--font-system); font-size: var(--font-size); font-weight: var(--font-weight-normal); line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; touch-action: pan-y; overscroll-behavior: none; } /* Убрали overflow: hidden и height */

/* КРИТИЧНО: Класс для блокировки скролла при открытии экранов */
body.no-scroll {
  overflow: hidden !important;
  position: relative !important;
}

h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); line-height: 1.3; color: var(--color-text); }
h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }
button { font-family: inherit; }
.hidden { display: none !important; }
.lead { color: var(--color-text-light); font-size: var(--font-size-sm); margin-top: var(--gap-xs); }
.section-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: 0 0 var(--gap); color: var(--color-text); }

.current-branch-pill { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-sm) var(--gap); margin-bottom: var(--gap-lg); border-radius: var(--radius-full); background: var(--color-card); box-shadow: var(--shadow-sm); }
.current-branch-pill span:first-child { color: var(--color-text-light); font-size: var(--font-size-sm); }
.current-branch-pill #current-branch-name-sorting,
.current-branch-pill #current-branch-name-bundles,
.current-branch-pill #current-branch-name-handout { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.btn-sm { padding: 6px 12px; font-size: var(--font-size-sm); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs); padding: 12px 20px; font-size: var(--font-size); font-weight: var(--font-weight-semibold); border: 1px solid rgba(178, 254, 18, 0.2); border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.1s ease, opacity 0.1s ease; text-decoration: none; background: linear-gradient(135deg, rgba(178,254,18,0.15) 0%, rgba(178,254,18,0.05) 100%); color: #b2fe12; box-shadow: var(--shadow-sm); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background: var(--gradient-primary); color: white; }
.btn-secondary { background: var(--gradient-secondary); color: white; }
.btn-light { background: linear-gradient(135deg, rgba(178,254,18,0.15) 0%, rgba(178,254,18,0.05) 100%); color: #b2fe12; border: 1px solid rgba(178, 254, 18, 0.2); box-shadow: var(--shadow-sm); }
.btn-danger { background: linear-gradient(135deg, #EF4444 0%, #F87171 100%); color: white; }

.card { background: var(--color-card); border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow); transition: transform 0.1s ease; }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], select, textarea { width: 100%; padding: 12px 16px; font-size: var(--font-size); font-family: inherit; color: var(--color-text); background: var(--color-card); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); outline: none; transition: all var(--transition-fast); }
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px rgb(255 255 255 / 10%); }
input::placeholder { color: var(--color-text-muted); }
input.input-error, textarea.input-error { border-color: var(--color-danger); }
input.input-error:focus, textarea.input-error:focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(255,77,79,.1); }
input.input-success, textarea.input-success { border-color: var(--color-success); }
input.input-success:focus, textarea.input-success:focus { border-color: var(--color-success); box-shadow: 0 0 0 3px rgba(59,201,149,.1); }
.input.locked { background: #f6f7f9; cursor: not-allowed; }
.input.locked:focus { outline: none; box-shadow: none; border-color: var(--color-border); }
.form-group { margin-bottom: var(--gap); }
.form-group label { display: block; margin-bottom: var(--gap-xs); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.form-hint { margin-top: var(--gap-xs); font-size: var(--font-size-sm); color: var(--color-text-light); }
.form-footer { display: flex; justify-content: flex-end; gap: var(--gap-sm); margin-top: var(--gap-lg); }

.badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; font-size: 12px; font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); white-space: nowrap; }
.status-badge { padding: 6px 14px; font-size: 13px; }
.shelf-badge { background: var(--color-info-bg); color: var(--color-info-text); padding: 4px 10px; font-family: var(--font-mono); font-size: 12px; }
.badge-success, .status-ready { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning, .status-pending { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-info, .status-delivered { background: var(--color-info-bg); color: var(--color-info-text); }
.status-tag { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; font-size: 11px; font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .5px; }

.app-shell {
  display: flex;
  flex-direction: column;
  /* 100vh на телефоне — это высота ОКНА вместе с браузерной строкой, а не
     то, что видно. Низ оболочки уезжал под строку Safari, и вместе с ним
     всё, что прижато к низу экрана: плашка «К оплате», кнопки, списки.
     dvh считает по видимой области. Две строки — фолбэк: старый браузер
     не понимает dvh и отбросит второе объявление. */
  min-height: 100vh;
  height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  position: relative;
  touch-action: pan-y;
  overscroll-behavior: contain;
  overflow: hidden;
  background: var(--bg-primary);
}
.app-header { 
  position: sticky; 
  top: 0; 
  z-index: 100; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 12px 20px; 
  background: var(--bg-card); 
  border-bottom: 1px solid var(--border-default); 
  box-shadow: var(--shadow-md); 
}
.app-header-brand { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}
.app-header-logo { 
  width: 36px; 
  height: 36px; 
  background: var(--accent-lime); 
  border-radius: 8px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 20px; 
  font-weight: 700; 
  color: var(--bg-primary); 
  box-shadow: var(--shadow-accent);
}
.app-header-title { 
  font-size: 18px; 
  font-weight: 600; 
  color: var(--text-primary); 
  margin: 0; 
}
.app-header-actions { 
  display: flex; 
  gap: 8px; 
}
.header-icon-btn { 
  width: 36px; 
  height: 36px; 
  background: transparent; 
  border: 1px solid var(--border-default); 
  border-radius: 8px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  transition: transform 0.1s ease, opacity 0.1s ease; 
  font-size: 18px;
}
.app-header h1 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: 0; background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.app-main { 
  flex: 1 1 0%;
  position: relative;
  min-height: 0; /* КРИТИЧНО для flex scroll */
  height: 100%; /* Явная высота */
  padding: 0;
  background: var(--bg-primary); 
  overflow: hidden;
  --tab-content-padding-top: 20px;
  --tab-content-padding-bottom: 20px;
  --tab-content-padding-left: 20px;
  --tab-content-padding-right: 20px;
  --tab-content-bottom-offset: 150px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --safe-area-left: 0px;
  --safe-area-right: 0px;
}

/* ============================================
   TAB CONTENT - SCROLL FIX
   ============================================ */
.tab-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow-x: hidden;
  overflow-y: scroll; /* всегда прокручиваемый -> нативный iOS bounce даже на коротком контенте */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  box-sizing: border-box;
  padding: calc(var(--tab-content-padding-top) + var(--safe-area-top))
           calc(var(--tab-content-padding-right) + var(--safe-area-right))
           calc(var(--tab-content-bottom-offset) + var(--tab-content-padding-bottom) + var(--safe-area-bottom))
           calc(var(--tab-content-padding-left) + var(--safe-area-left));
  background: transparent;
  /* ЗДЕСЬ БЫЛ will-change: transform «для анимации PTR».
     Он остался от старого pull-to-refresh, который двигал сам список; нынешний
     (attachPTR в neo-gestures.js) трогает только кружок и высоту распорки, а
     вкладку не трансформирует ни разу.
     Зато transform в will-change делал вкладку точкой отсчёта для своих
     position:fixed потомков. Экран переписки лежит ВНУТРИ вкладки
     «Сообщения» — и цеплялся не за окно, а за неё: прокручивался вместе с
     ней, шапка уезжала вверх, хотя прокручивать там было нечего. Замерено:
     при scrollTop 300 экран и шапка уезжали на −300px, без transform стоят
     на месте.
     Убрать подсказку насовсем тоже нельзя: .tab-content — главный
     скролл-контейнер всех пяти вкладок, и слой на композиторе у длинных
     списков терять не за что. scroll-position даёт тот же слой и точкой
     отсчёта для fixed НЕ становится — это ровно то, что здесь и нужно. */
  will-change: scroll-position;
}

.tab-content:not(.hidden) {
  display: block;
}

/* Home Tab Components */
.home-tab {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-hero-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 28px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgb(178 254 18 / 66%) 0%, rgb(178 254 18 / 16%) 100%);
  border: 1px solid rgba(178, 254, 18, 0.25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.home-hero-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: rgba(255, 255, 255, 0.95);
}

.home-hero-eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.home-hero-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
}

.home-hero-text {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

.home-hero-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 12px 20px;
  background: #b2fe12;
  border-radius: 999px;
  border: none;
  color: #111;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(178, 254, 18, 0.35);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.home-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 22px;
  border: 1px dashed rgba(255, 255, 255, 0);
  min-height: 180px;
}

.home-hero-placeholder {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 12px;
}

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


.home-quick-card {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  overflow: hidden;
  z-index: 0;
}

.home-quick-card--ready {
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  border-color: rgba(178, 254, 18, 0.4);
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.16) 0%, rgba(178, 254, 18, 0.04) 100%);
}

.home-quick-card--empty {
  opacity: 0.7;
}

.home-quick-card--learning {
  border-color: rgba(255, 140, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.2) 0%, rgba(255, 140, 0, 0.05) 100%);
}

.home-quick-header {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 8px;
  padding-right: 64px;
}

.home-quick-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding-right: 40px;
}

.home-quick-label {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.home-quick-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.home-ready-badge {
  min-width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #b2fe12;
  color: #151515;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  position: absolute;
  top: 25px;
  right: 18px;
  padding: 0 5px;
}

.home-quick-card-footer {
  font-size: 13px;
  font-weight: 600;
  color: #b2fe12;
}

.home-quick-icon {
  position: absolute;
  bottom: -30px;
  right: -28px;
  width: 150px;
  height: 150px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  z-index: -1;
}

.home-quick-icon img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  transform: translate(15px, 15px);
}

.home-chip {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 7px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 46px;
  left: 20px;
  background: rgba(0, 0, 0, 0.2);
}

.home-cn-card {
  padding: 22px;
  border-radius: 24px;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Карточка адреса, пока адреса нет. Требование второго класса убрано: тот же
   класс вешается и на блок в профиле, у которого .home-cn-card нет. Одной
   прозрачности мало — под ней кнопки оставались нажимаемыми, поэтому клики
   гасим тоже. Живой оставляем только подсказку «как ввести адрес»: она
   единственная и нужна, когда адреса ещё нет. */
.home-cn-card--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.home-cn-card--disabled #cn-address-help-btn,
.home-cn-card--disabled #home-copy-cn-help {
  pointer-events: auto;
}

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

.home-section-title {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.home-section-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.home-copy-btn {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(178, 254, 18, 0.4);
  background: rgba(178, 254, 18, 0.1);
  color: #b2fe12;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.home-cn-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-cn-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.home-cn-row strong {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
}

.home-cn-row--address {
  flex-direction: column;
}

.home-cn-row--address p {
  margin: 4px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.home-cn-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 768px) {
  .home-hero-card {
    grid-template-columns: 1fr;
    padding: 5px;
  }

  .home-hero-btn {
    width: 100%;
    text-align: center;
  }

  /* home-quick-card sizes fixed - same as desktop (iPhone 12 Pro reference) */

  .home-quick-layout {
    grid-template-columns: minmax(0, 1fr) 120px;
  }

  .home-quick-visual {
    height: 130px;
  }
}

@media (max-width: 480px) {
  .home-hero-title {
    font-size: 24px;
  }

  .home-hero-text {
    font-size: 14px;
  }

  .home-cn-card {
    padding: 18px;
  }

  .home-quick-layout {
    grid-template-columns: 1fr;
  }

  .home-quick-visual {
    width: 100%;
    height: 140px;
  }
}

/* Removed @media 380px for home-quick-grid - keep 2 columns on all screens */

@media (max-width: 768px) {
  .app-main {
    --tab-content-bottom-offset: 140px;
  }
}

@media (max-width: 480px) {
  .app-main {
    --tab-content-padding-top: 16px;
    --tab-content-padding-bottom: 16px;
    --tab-content-padding-left: 16px;
    --tab-content-padding-right: 16px;
  }
}

@supports (padding: max(0px)) {
  .app-main {
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-left: env(safe-area-inset-left);
    --safe-area-right: env(safe-area-inset-right);
  }
}

/* Profile header styles - Desktop */
.profile-header-fixed {
  padding: 12px 20px;
}

.profile-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-header-info {
  flex: 1;
  min-width: 0;
}

.profile-header-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.profile-header-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-header-id {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.profile-header-phone {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.profile-settings-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 10px;
}

.profile-header-spacer {
  height: 64px;
}

/* Profile header - full width sticky */
.profile-header-sticky {
  margin: calc(var(--gap-lg) * -1) calc(var(--gap-lg) * -1) var(--gap-lg) calc(var(--gap-lg) * -1) !important;
}

/* Ultra Compact Tab Bar - Dock Style */
.tab-bar-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
  height: calc(60px + var(--safe-bottom)) !important;
  padding-bottom: var(--safe-bottom) !important;
}

.tab-bar-container {
  max-width: 100%;
  margin: 0;
  background: #1a1a1a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 10px 3px 25px;
  display: grid;
  grid-template-columns: 1fr 1fr 62px 1fr 1fr;
  gap: 0;
  align-items: stretch;
  box-shadow: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: auto;
  min-height: auto;
  height: auto;
  box-sizing: border-box;
  transition: inherit;
}

/* Regular Tab Button */
.tab-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 3px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.16s ease;
  border-radius: 0;
}

/* Top Indicator Bar (Active State) */
.tab-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: #b2fe12;
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: all 0.18s ease;
}

.tab-link .tab-icon {
  font-size: 20px;
  line-height: 1;
  transition: all 0.16s ease;
  filter: grayscale(1) opacity(0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ФИЛЬТР ЗДЕСЬ СНЯТ, И ЭТО ГЛАВНОЕ.
   Обёртка иконки несёт оба класса — .tab-icon и .tab-icon-svg, — а у
   .tab-icon стоит filter: opacity(.4) ещё с тех пор, когда иконки были
   текстом. Фильтры родителя и картинки перемножаются: 0.4 × 0.4 = 0.16.
   Иконки #b2fe12 на тёмной панели при такой прозрачности просто исчезали, и
   в навбаре была видна только активная. */
.tab-link .tab-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: none;
}

.tab-link .tab-svg-icon {
  width: 30px;
  height: 30px;
  /* Неактивная вкладка — спокойный серый, чуть светлее своей подписи
     (подпись rgba(255,255,255,.35)). Яркость режем: grayscale превращает
     лайм #b2fe12 почти в белый, и без этого иконки светились сильнее
     активной. */
  filter: grayscale(1) brightness(0.62) opacity(0.85);
  transition: all 0.16s ease;
}

.tab-link.active .tab-svg-icon {
  filter: grayscale(0) brightness(1) opacity(1) drop-shadow(0 0 2px #b2fe12);
}

.tab-link .tab-label {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.16s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Active Tab State */
.tab-link.active::before {
  opacity: 1;
}

.tab-link.active .tab-icon {
  filter: grayscale(0) opacity(1);
  transform: scale(1.04);
}

.tab-link.active .tab-label {
  color: #b2fe12;
  font-weight: 600;
}

/* Center FAB Button (QR Scanner/Pickup) */
.tab-link-fab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 54px;
  height: 54px;
  margin: -16px auto 0;
  border: none;
  background: linear-gradient(135deg, #b2fe12 0%, #a0e610 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow:0 3px 10px rgb(178 254 18 / 0%), 0 1.5px 5px rgb(0 0 0 / 13%), 0 0 0 6px #1a1a1a;
  transition: all 0.2s ease;
  padding: 0;
}

.tab-link-fab::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: radial-gradient(circle, rgba(178, 254, 18, 0.2) 0%, transparent 65%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tab-link-fab::after {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  transition: all 0.16s ease;
  pointer-events: none;
}

.tab-link-fab.active::after {
  color: #b2fe12;
  font-weight: 600;
}

.fab-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.fab-icon {
  font-size: 22px;
  line-height: 1;
  color: #1a1a1a;
  font-weight: 700;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
}

.fab-icon.fab-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fab-svg-icon {
  width: 32px;
  height: 32px;
  filter: brightness(0) opacity(0.9);
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.fab-label {
  display: none;
}

/* ==== Responsive Navbar for small screens ==== */
@media (max-width: 360px) {
  .tab-bar-container {
    max-width: 100%;
    border-radius: 0;
    padding: 0px 2px 15px;
    grid-template-columns: 1fr 1fr 50px 1fr 1fr;
    min-height: auto;
    gap: 0;
  }
  
  .tab-link {
    padding: 5px 2px 6px;
    gap: 1px;
  }
  
  .tab-link .tab-icon {
    font-size: 18px;
  }
  
  .tab-link .tab-label {
    font-size: 8px;
  }
  
  .tab-link .tab-svg-icon {
    width: 24px;
    height: 24px;
  }
  
  .tab-link-fab {
    width: 46px;
    height: 46px;
    margin-top: -12px;
  }
  
  .tab-link-fab::after {
    font-size: 7px;
    bottom: -14px;
  }
  
  .fab-svg-icon {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 320px) {
  .tab-bar-container {
    grid-template-columns: 1fr 1fr 44px 1fr 1fr;
    min-height: auto;
    border-radius: 0;
  }
  
  .tab-link {
    padding: 4px 1px 5px;
  }
  
  .tab-link .tab-icon {
    font-size: 16px;
  }
  
  .tab-link .tab-label {
    font-size: 7px;
  }
  
  .tab-link .tab-svg-icon {
    width: 20px;
    height: 20px;
  }
  
  .tab-link-fab {
    width: 40px;
    height: 40px;
    margin-top: -10px;
  }
  
  .tab-link-fab::after {
    font-size: 6px;
    bottom: -12px;
  }
  
  .fab-svg-icon {
    width: 22px;
    height: 22px;
  }
}

.tab-content { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 
  0%, 100% { opacity: 1; transform: scale(1); } 
  50% { opacity: 0.6; transform: scale(1.1); } 
}

@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

/* ============================================
   BONUS PAYMENT MODAL - Banking Style
   ============================================ */

.bonus-modal {
  position: fixed;
  inset: 0;
  z-index: 20000; /* модалка поверх экранов */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s 0.3s;
}

.bonus-modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s 0s;
}

.bonus-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s 0.3s;
}

.bonus-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: backdrop-filter 0.3s ease;
}

.bonus-modal-card {
  position: relative;
  max-width: 420px;
  width: 90vw;
  max-height: 85vh;
  background: linear-gradient(135deg, rgba(35, 35, 35, 0.98) 0%, rgba(30, 30, 30, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 28px 24px 48px 24px;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bonus-modal.show .bonus-modal-card {
  transform: scale(1) translateY(0);
}

.bonus-modal-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 24px;
  text-align: center;
  letter-spacing: -0.02em;
}

/* Balance Block */
.bonus-balance-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  margin-bottom: 18px;
}

.bonus-balance-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(178, 254, 18, 0.3));
}

.bonus-balance-info {
  flex: 1;
}

.bonus-balance-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.bonus-balance-amount {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* Payment Info Block */
.bonus-payment-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  margin-bottom: 24px;
}

.bonus-payment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bonus-payment-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.bonus-payment-value {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}

.bonus-payment-value--accent {
  color: #b2fe12;
}

/* Input Field */
.bonus-input-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.bonus-input-wrapper.hidden {
  opacity: 0;
  transform: translateY(-15px) scale(0.97);
  pointer-events: none;
}

.bonus-input-label {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
  font-weight: 500;
}

.bonus-input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0 14px;
  transition: all 0.2s ease;
}

.bonus-input-group:focus-within {
  border-color: rgba(178, 254, 18, 0.5);
  box-shadow: 0 0 0 3px rgba(178, 254, 18, 0.1);
}

.bonus-input-group.error {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.05);
  animation: shakeError 0.3s ease;
}

@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.bonus-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  font-variant-numeric: tabular-nums;
  width: 100%;
}

.bonus-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.bonus-input-max {
  padding: 6px 12px;
  background: rgba(178, 254, 18, 0.12);
  border: 1px solid rgba(178, 254, 18, 0.3);
  border-radius: 8px;
  color: #b2fe12;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.bonus-input-error {
  font-size: 12px;
  color: #ef4444;
  margin-top: 8px;
  font-weight: 500;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s ease;
}

.bonus-input-error.hidden {
  opacity: 0;
  transform: translateY(-4px);
  height: 0;
  margin: 0;
}

/* ============================================
   BONUS MODAL - Input Field Specific Styles
   ============================================ */

.bonus-modal .bonus-modal-input-wrapper {
  margin-bottom: 28px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 200px;
  overflow: hidden;
}

.bonus-modal .bonus-modal-input-wrapper.hidden {
  opacity: 0;
  transform: translateY(-15px) scale(0.97);
  max-height: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.bonus-modal .bonus-modal-input-label {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
  font-weight: 500;
}

.bonus-modal .bonus-modal-input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0 14px;
  transition: all 0.2s ease;
}

.bonus-modal .bonus-modal-input-group:focus-within {
  border-color: rgba(178, 254, 18, 0.5);
}

.bonus-modal .bonus-modal-input-group.error {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.05);
  animation: shakeError 0.3s ease;
}

.bonus-modal .bonus-modal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  font-variant-numeric: tabular-nums;
  width: 100%;
}

.bonus-modal .bonus-modal-input:focus {
  border-color: transparent;
  box-shadow: none;
}

.bonus-modal .bonus-modal-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.bonus-modal .bonus-modal-input-max {
  padding: 8px 12px;
  background: rgba(178, 254, 18, 0.12);
  border: 1px solid rgba(178, 254, 18, 0.3);
  border-radius: 8px;
  color: #b2fe12;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.bonus-modal .bonus-modal-input-error {
  font-size: 12px;
  color: #ef4444;
  margin-top: 8px;
  font-weight: 500;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s ease;
}

.bonus-modal .bonus-modal-input-error.hidden {
  opacity: 0;
  transform: translateY(-4px);
  height: 0;
  margin: 0;
}

/* Confirmation Block */
.bonus-confirm-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.bonus-confirm-wrapper.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.bonus-confirm-card {
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.08) 0%, rgba(178, 254, 18, 0.04) 100%);
  border: 1px solid rgba(178, 254, 18, 0.2);
  border-radius: 16px;
  padding: 10px;
  text-align: center;
}

.bonus-confirm-icon {
  font-size: 40px;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 8px rgba(178, 254, 18, 0.3));
}

.bonus-confirm-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bonus-confirm-amount {
  font-size: 32px;
  font-weight: 700;
  color: #b2fe12;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(178, 254, 18, 0.3);
}

.bonus-confirm-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* Buttons Container */
.bonus-buttons-container {
  position: relative;
  min-height: 116px;
  margin-top: 12px;
}

/* Content area */
.bonus-modal-content-area {
  position: relative;
  min-height: 160px;
  margin-bottom: 10px;
}

.bonus-buttons-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bonus-buttons-group.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.bonus-buttons-group.hidden {
  opacity: 0;
  transform: translateY(-18px) scale(0.97);
  pointer-events: none;
}

#bonus-buttons-initial.show {
  transform: translateY(0) scale(1);
}

#bonus-buttons-confirm.show {
  transform: translateY(0) scale(1);
}

.bonus-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  outline: none;
}

.bonus-btn--secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.bonus-btn--primary {
  background: linear-gradient(135deg, #b2fe12 0%, #a0e610 100%);
  color: #1a1a1a;
  box-shadow: 
    0 4px 14px rgba(178, 254, 18, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.bonus-btn--back {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.bonus-btn--confirm {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #ffffff;
  box-shadow: 
    0 4px 14px rgba(34, 197, 94, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bonus-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .bonus-modal-card {
    padding: 24px 20px;
  }
  
  .bonus-modal-header h2 {
    font-size: 20px;
  }
  
  .bonus-balance-icon {
    width: 50px;
    height: 50px;
  }
  
  .bonus-balance-amount {
    font-size: 18px;
  }
  
  .bonus-input {
    font-size: 16px;
    padding: 12px 0;
  }
}

/* Bonus Bar Slide-In Animation */
@keyframes bonusBarSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Pickup Bonus Bar with Animation */
.pickup-bonus-bar {
  animation: bonusBarSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Pickup Bonus Skeleton */
.pickup-bonus-skeleton {
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.pickup-bonus-skeleton-bar {
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.12) 40px,
    rgba(255,255,255,0.05) 80px
  );
  background-size: 600px;
  animation: shimmer 1.2s ease-in-out infinite;
}

/* Professional Skeleton Loader */
.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.skeleton-item {
  background: linear-gradient(
    90deg,
    var(--bg-card) 0px,
    var(--bg-muted) 40px,
    var(--bg-card) 80px
  );
  background-size: 600px;
  border-radius: var(--radius-md);
  height: 120px;
  animation: shimmer 1.2s ease-in-out infinite;
  opacity: 0.6;
}

.status-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 18px;
}

/* Sprint 125: Skeleton tabs row for ready-status screen */
.status-skeleton-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.status-skeleton-tab {
  flex: 1;
  height: 42px;
  border-radius: 12px;
}

.status-skeleton-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
}

.status-skeleton-icon {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  flex-shrink: 0;
}

.status-skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.status-skeleton-title {
  width: 65%;
  height: 13px;
  border-radius: 6px;
}

.status-skeleton-track {
  width: 50%;
  height: 13px;
  border-radius: 6px;
}

.status-skeleton-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.status-skeleton-date {
  width: 60px;
  height: 10px;
  border-radius: 6px;
}

.status-skeleton-chip {
  width: 48px;
  height: 18px;
  border-radius: 999px;
}

/* ============================================
   PTR Skeleton Loaders - Minimal Silver Design
   ============================================ */

/* Base inline skeleton - subtle silver pulse */
.ptr-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: inherit;
  color: transparent !important;
  animation: ptr-pulse 1.4s ease-in-out infinite;
}

.ptr-skeleton * {
  visibility: hidden !important;
}

@keyframes ptr-pulse {
  0%, 100% { 
    opacity: 0.4;
  }
  50% { 
    opacity: 0.8;
  }
}

/* Status badge skeleton - compact pill */
.status-badge.ptr-skeleton {
  min-width: 26px !important;
  width: 26px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Bonus amount skeleton - compact for digits only */
.bonuses-card-amount.ptr-skeleton {
  min-width: 45px !important;
  width: 45px !important;
  height: 16px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Home ready card skeleton - full card */
.home-quick-card--ready.ptr-skeleton {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 24px !important;
  pointer-events: none;
  overflow: hidden;
}

.home-quick-card--ready.ptr-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.home-quick-card--ready.ptr-skeleton * {
  visibility: hidden !important;
}

/* Message dialog skeleton for badges */
.msg-dialog-badge.ptr-skeleton {
  min-width: 20px !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Message dialog item skeleton on preview text */
.msg-dialog-preview.ptr-skeleton {
  min-width: 60px !important;
  max-width: 100px !important;
  height: 12px !important;
  padding: 0 !important;
  border-radius: 3px !important;
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Message dialog time skeleton */
.msg-dialog-time.ptr-skeleton {
  min-width: 28px !important;
  width: 28px !important;
  height: 10px !important;
  padding: 0 !important;
  border-radius: 2px !important;
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Home ready card - NEVER dim when empty, show 0 */
.home-quick-card--ready.home-quick-card--empty {
  opacity: 1 !important;
  filter: none !important;
}

.home-quick-card--ready.home-quick-card--empty .home-ready-badge {
  display: flex !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.filters { display: grid; gap: var(--gap); margin-bottom: var(--gap-lg); }
.status-filter { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.search-box input { width: 100%; }
.status-chip { padding: 8px 16px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border: 1.5px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-card); color: var(--color-text-light); cursor: pointer; transition: transform 0.1s ease, opacity 0.1s ease; }
.status-chip.active { border-color: var(--color-accent); background: var(--color-accent); color: white; box-shadow: var(--shadow-accent); }

.parcel-list { display: grid; gap: var(--gap); }
.parcel-card { background: var(--color-card); border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow); transition: transform 0.1s ease, opacity 0.1s ease; }
.parcel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); margin-bottom: var(--gap-sm); }
.parcel-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin: 0; overflow: hidden; text-overflow: ellipsis; word-break: break-word; overflow-wrap: break-word; }
.parcel-track { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-light); margin: var(--gap-xs) 0; overflow: hidden; text-overflow: ellipsis; word-break: break-all; overflow-wrap: anywhere; }
.parcel-updated { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--gap-xs) 0; }
.parcel-actions { display: flex; gap: var(--gap-sm); margin-top: var(--gap); }

.create-form { max-width: 480px; }
.pickup-summary-card { display: flex; gap: var(--gap-lg); background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); border: 2px solid var(--color-accent); border-radius: var(--radius); padding: var(--gap-lg); margin-bottom: var(--gap-lg); box-shadow: var(--shadow-accent); }
.pickup-summary-qr { width: 140px; height: 140px; flex-shrink: 0; background: white; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.pickup-summary-info { flex: 1; display: grid; gap: var(--gap-sm); }
.pickup-summary-info p { margin: 0; font-size: var(--font-size); font-weight: var(--font-weight-medium); }
.pickup-hint { font-size: var(--font-size-sm); color: var(--color-text-light); font-weight: var(--font-weight-normal); }
.pickup-list { display: grid; gap: var(--gap); }
.pickup-card { background: var(--color-card); border: 2px solid transparent; border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow); transition: all var(--transition); }
.pickup-card.is-ready { border-color: var(--color-accent); box-shadow: var(--shadow-accent); }
.pickup-card.is-delivered { opacity: .6; }
.pickup-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); margin-bottom: var(--gap); }
.pickup-code { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); margin: 0 0 var(--gap-xs); }
.pickup-status { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.pickup-meta { display: flex; gap: var(--gap); flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--color-text-light); }
.pickup-body { display: flex; gap: var(--gap-lg); flex-wrap: wrap; }
.pickup-details { flex: 1; display: grid; gap: 6px; min-width: 200px; }
.pickup-details p { margin: 0; font-size: var(--font-size-sm); }
.pickup-actions { display: flex; justify-content: flex-end; gap: var(--gap-sm); margin-top: var(--gap); }
.pickup-weight, .pickup-amount, .pickup-items { display: inline-block; }
.pickup-branch, .pickup-payment, .pickup-paid, .pickup-remaining, .pickup-created { display: inline; }
.pickup-pay { margin-top: var(--gap-sm); }

.profile-card { max-width: 480px; background: var(--color-card); border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow); }
.profile-card p { margin: var(--gap-sm) 0; font-size: var(--font-size); }
.profile-warning { margin-top: var(--gap); padding: var(--gap); background: var(--color-danger-bg); color: var(--color-danger-text); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); }
.cn-address-card { max-width: 560px; margin-top: var(--gap-lg); background: var(--color-card); border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow); }
.cn-address { margin: var(--gap) 0; padding: var(--gap); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--font-size-sm); line-height: 1.6; white-space: pre-wrap; }
.empty-state { padding: var(--gap-xl); text-align: center; color: var(--color-text-light); background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.admin-shell { display: grid; grid-template-areas: 'top top' 'sidebar main'; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: 240px 1fr; height: 100vh; background: var(--color-bg); }
.top-bar { grid-area: top; position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: var(--gap-lg); padding: var(--gap) var(--gap-lg); background: var(--color-card); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.brand { display: flex; align-items: center; gap: var(--gap-sm); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.divider { width: 1px; height: 24px; background: var(--color-border); }
.top-bar-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.top-bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--gap); }
.admin-sidenav { grid-area: sidebar; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; background: var(--color-card); border-right: 1px solid var(--color-border); padding: var(--gap); }
.admin-tab { position: relative; display: flex; align-items: center; gap: var(--gap); width: 100%; padding: var(--gap) var(--gap-lg); border: none; border-radius: var(--radius-sm); background: transparent; font-size: var(--font-size); font-weight: var(--font-weight-medium); color: var(--color-text-light); text-align: left; cursor: pointer; transition: transform 0.1s ease, opacity 0.1s ease; margin-bottom: 4px; }
.admin-tab.active { background: linear-gradient(135deg, rgba(178,254,18,0.15) 0%, rgba(178,254,18,0.05) 100%); color: #b2fe12; border:1px solid rgba(178, 254, 18, 0.2); font-weight: var(--font-weight-semibold);}
.admin-tab.active::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 2px; height: 60%; background: #b2fe12; border-radius:4px 4px; }
.tab-badge { margin-left: auto; padding: 2px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: var(--font-weight-semibold); background: var(--color-danger); color: #1a1a1a; box-shadow: 0 4px 14px rgba(0,0,0,0.25); min-width: 32px; text-align: center; }
.admin-tab.active .tab-badge { background: #fff; color: #111; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.admin-main { grid-area: main; padding: var(--gap-lg); overflow-y: auto; height: 100%; }
.admin-section { display: block; }
.admin-section.hidden { display: none; }

.branch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap-lg); margin-top: var(--gap-lg); }
.branch-card { background: var(--color-card); border: 2px solid transparent; border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow); cursor: pointer; transition: transform 0.1s ease, opacity 0.1s ease; }
.branch-card.active { border-color: var(--color-accent); box-shadow: var(--shadow-accent); }
.branch-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: 0 0 var(--gap-sm); color: var(--color-text); }

.subtabs { display: flex; gap: var(--gap-sm); margin: var(--gap-lg) 0; border-bottom: 2px solid var(--color-border); flex-wrap: wrap; }
.subtab-btn { padding: var(--gap) var(--gap-lg); border: none; border-bottom: 3px solid transparent; background: transparent; font-size: var(--font-size); font-weight: var(--font-weight-medium); color: var(--color-text-light); cursor: pointer; transition: transform 0.1s ease, opacity 0.1s ease; }
.subtab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: var(--font-weight-semibold); }
.subtab-content { animation: fadeIn .3s ease; }

.sorting-card, .bundle-card, .handout-card, .intake-card { background: var(--color-card); border-radius: var(--radius); padding: var(--gap-lg); box-shadow: var(--shadow); margin-bottom: var(--gap-lg); }
.sorting-header, .bundle-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); margin-bottom: var(--gap-lg); flex-wrap: wrap; }
.sorting-info, .bundle-info { flex: 1; min-width: 200px; }
.sorting-code, .bundle-code { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: 0 0 var(--gap-sm); }
.sorting-meta, .bundle-meta { font-size: var(--font-size-sm); color: var(--color-text-light); }
.sorting-actions, .bundle-actions { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.scan-area { margin: var(--gap) 0; padding: var(--gap-lg); background: var(--color-bg); border: 2px dashed var(--color-border); border-radius: var(--radius); text-align: center; }
.scan-area.active { border-color: var(--color-accent); background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); }
.item-list { display: grid; gap: var(--gap-sm); margin-top: var(--gap); }
.item-badge { display: inline-flex; align-items: center; gap: var(--gap-sm); padding: 8px 12px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--font-size-sm); }

.handout-table { width: 100%; border-collapse: collapse; margin-top: var(--gap); background: var(--color-card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.handout-table thead { background: var(--color-bg); }
.handout-table th { padding: var(--gap) var(--gap-lg); text-align: left; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--color-border); }
.handout-table td { padding: var(--gap) var(--gap-lg); border-bottom: 1px solid var(--color-border); font-size: var(--font-size); color: var(--color-text); }
.handout-table tbody tr { transition: transform 0.1s ease, background 0.1s ease; }
.handout-table tbody tr:last-child td { border-bottom: none; }

/* Data table styles (for unmatched parcels, etc.) */
.data-table { width: 100%; border-collapse: collapse; background: var(--color-card); }
.data-table thead { background: var(--color-bg); }
.data-table th { padding: var(--gap-sm) var(--gap); text-align: left; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--color-border); white-space: nowrap; }
.data-table td { padding: var(--gap-sm) var(--gap); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); color: var(--color-text); vertical-align: middle; }
.data-table tbody tr { transition: background 0.1s ease; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td:nth-child(2) { font-family: var(--font-mono); min-width: 120px; }
.data-table td:last-child { white-space: nowrap; min-width: 180px; }
.data-table .badge-success, .data-table .badge-warning { white-space: nowrap; }
.data-table td .btn { margin: 2px; }

.handout-controls-row { display: flex; gap: var(--gap); flex-wrap: wrap; }
.input-row { display: flex; flex-direction: column; gap: var(--gap-sm); }
.input-row span { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--color-text-light); }
.receipt-row { display: flex; flex-direction: column; gap: var(--gap-lg); }
.receipt-actions { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; }
.settings-grid { display: grid; gap: var(--gap-lg); max-width: 800px; }
.setting-row { display: flex; gap: var(--gap-lg); align-items: flex-start; padding: var(--gap-lg); background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow); }
.setting-label { flex: 1; font-weight: var(--font-weight-semibold); }
.setting-control { flex: 2; }

/* QR Modal – polished */
.qr-modal { position: fixed; inset: 0; display: none; background: rgba(10,12,18,.55); backdrop-filter: blur(3px); align-items: center; justify-content: center; z-index: 9999; }
.qr-modal:not(.hidden) { display: flex; }
.qr-modal-dialog.qr-polished { background: #fff; border-radius: 20px; padding: 16px; width: min(92vw, 860px); box-shadow: 0 20px 60px rgba(0,0,0,.25); position: relative; }
.qr-modal-close { position: absolute; top: 10px; right: 10px; border: 0; background: #fff; width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 6px 16px rgba(0,0,0,.15); cursor: pointer; font-size: 24px; line-height: 1; color: #444; transition: transform 0.1s ease, opacity 0.1s ease; z-index: 10; }
.qr-hud { position: relative; }
#qr-video { width: 100%; height: 460px; display: block; border-radius: 14px; object-fit: cover; background: #000; }
.qr-frame { pointer-events: none; position: absolute; inset: 0; border: 30px solid transparent; }
.qr-hint { position: absolute; left: 16px; top: 12px; z-index: 2; background: rgba(255,255,255,.9); padding: 6px 10px; border-radius: 999px; font-size: 14px; font-weight: var(--font-weight-medium); color: var(--color-text); }

/* Последняя приёмка */
.last-intake-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); margin-top: var(--gap); }
.li-label { color: var(--color-text-light); margin-right: 6px; font-size: var(--font-size-sm); }
.badge-shelf { background: #F0F7FF; color: #175CD3; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: var(--font-size-sm); }

/* Клиент и сводка */
.client-row { display: flex; justify-content: space-between; padding: var(--gap-sm) 0; border-bottom: 1px solid var(--color-border); }
.client-row:last-child { border-bottom: none; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.summary-grid > div { display: flex; flex-direction: column; gap: 4px; }
.summary-grid span { font-size: var(--font-size-sm); color: var(--color-text-light); }
.t-right { text-align: right; }
.card-title { margin: 0 0 var(--gap) 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text); }

.page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-bg) 0%, #E0E7FF 100%); padding: var(--gap-lg); }
.auth-card { width: 100%; max-width: 420px; background: var(--color-card); border-radius: var(--radius-lg); padding: var(--gap-xl); box-shadow: var(--shadow-lg); }
.auth-card .brand { justify-content: center; font-size: 32px; margin-bottom: var(--gap-xl); }
.auth-card .tab-bar { display: flex; gap: var(--gap-sm); margin-bottom: var(--gap-lg); background: var(--color-bg); border-radius: var(--radius); padding: 4px; }
.auth-card .tab-bar button { flex: 1; padding: var(--gap-sm) var(--gap); border: none; border-radius: var(--radius-sm); background: transparent; font-size: var(--font-size); font-weight: var(--font-weight-medium); color: var(--color-text-light); cursor: pointer; transition: all var(--transition-fast); }
.auth-card .tab-bar button.active { background: var(--color-card); color: var(--color-accent); font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-sm); }
.auth-card form { display: grid; gap: var(--gap); }

@media (max-width: 768px) {
  .admin-shell { grid-template-areas: 'top' 'main'; grid-template-columns: 1fr; }
  .admin-sidenav { display: none; }
  .branch-cards { grid-template-columns: 1fr; }
  .handout-table { font-size: var(--font-size-sm); }
  .handout-table th, .handout-table td { padding: var(--gap-sm); }
  .pickup-summary-card { flex-direction: column; align-items: center; text-align: center; }
  .pickup-card-header, .sorting-header, .bundle-header { flex-direction: column; }
  .summary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .last-intake-grid { grid-template-columns: 1fr; }
  #qr-video { height: 360px; }
}

@media (max-width: 480px) {
  .tab-bar-bottom {
    padding: 0;
  }
  
  .tab-bar-container {
    padding: 0px 2px 23px;
    border-radius: 0;
    gap: 0;
    grid-template-columns: 1fr 1fr 58px 1fr 1fr;
    min-height: auto;
  }
  
  .tab-link {
    padding: 5px 2px 7px;
    gap: 2px;
  }
  
  .tab-link::before {
    width: 20px;
    height: 2px;
  }
  
  .tab-link .tab-icon {
    font-size: 19px;
  }
  
  .tab-link .tab-svg-icon {
    width: 33px;
    height: 33px;
  }
  
  .tab-link .tab-label {
    font-size: 8.5px;
  }
  
  .tab-link-fab {
    width: 50px;
    height: 50px;
    margin-top: -15px;
    box-shadow: 0 3px 10px rgb(178 254 18 / 0%), 0 1.5px 5px rgb(0 0 0 / 13%), 0 0 0 6px #1a1a1a;
  }
  
  .tab-link-fab::after {
    bottom: -13px;
    font-size: 8.5px;
  }
  
  .fab-icon {
    font-size: 21px;
  }
  
  .fab-svg-icon {
    width: 35px;
    height: 35px;
  }
  
  .fab-label {
    display: none;
  }
  
  .app-header { padding: var(--gap-sm) var(--gap); }
  
  /* Profile header - compact on mobile */
  .profile-header-fixed {
    padding: 8px 12px !important;
    min-height: 0 !important;
    transform: none !important;
    width: 100% !important;
  }
  
  .profile-header-content {
    min-height: 0 !important;
  }
  
  .profile-header-info {
    line-height: 1 !important;
  }
  
  .profile-header-name-row {
    gap: 4px !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
  }
  
  .profile-header-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }
  
  .profile-header-id {
    font-size: 10px !important;
    line-height: 1 !important;
  }
  
  .profile-header-phone {
    display: none !important;
  }
  
  .profile-settings-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 14px !important;
    margin-left: 8px !important;
    border-radius: 8px !important;
    padding: 0 !important;
  }
  
  .profile-header-spacer {
    height: 40px !important;
  }
  
  .parcel-card, .pickup-card { padding: var(--gap); }
  .qr-modal-dialog { max-width: 95vw; padding: 8px; }
  #qr-video { height: 320px; }
}

.section-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: 0 0 var(--gap-sm); color: var(--color-text); background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lead { font-size: var(--font-size-sm); color: var(--color-text-light); margin: 0 0 var(--gap-lg); line-height: 1.5; }

/* Scan log cards */
.scan-log { display: grid; gap: var(--gap); }
.scan-log-item.card { display: grid; gap: 6px; padding: 12px 14px; transition: all var(--transition-fast); }

/* Цветовая индикация сканов */
.scan-log-item.scan-success { 
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); 
  border-left: 4px solid var(--color-success);
}
.scan-log-item.scan-already { 
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); 
  border-left: 4px solid var(--color-warning);
}
.scan-log-item.scan-unmatched { 
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%); 
  border-left: 4px solid var(--color-danger);
}

.scan-log-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scan-log-n { font-weight: var(--font-weight-bold); color: var(--color-text); }
.scan-log-track { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.badge-shelf { background: var(--color-info-bg); color: var(--color-info-text); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.badge-shelf-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.badge-purple { background: #9b59b6; color: #fff; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.badge-blue { background: #3b82f6; color: #fff; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.badge-green { background: var(--color-success-bg); color: var(--color-success-text); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.badge-orange { background: var(--color-warning-bg); color: var(--color-warning-text); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.badge-red { background: var(--color-danger-bg); color: var(--color-danger-text); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.badge-yellow { background: #f39c12; color: #fff; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.scan-log-meta { font-size: 12px; color: var(--color-text-muted); }

/* Bundle parcels chips */
.bundle-parcels { display: grid; gap: 10px; }
.parcel-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--color-card); box-shadow: var(--shadow); cursor: pointer; transition: transform 0.1s ease, opacity 0.1s ease; }
.parcel-chip .chip-body { display: flex; align-items: center; gap: 10px; flex: 1; }
.parcel-chip .chip-track { font-family: ui-monospace, Menlo, monospace; }
.parcel-chip .parcel-check { cursor: pointer; }
.badge-green { background: var(--color-success-bg); color: var(--color-success-text); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.badge-purple { background: var(--color-info-bg); color: var(--color-info-text); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

/* Handout */
.handout-actions { display: flex; gap: 10px; margin-bottom: 16px; }
.handout-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.handout-table thead th { text-align: left; font-weight: var(--font-weight-semibold); color: var(--color-text); padding: var(--gap-sm) var(--gap); background: var(--color-bg); }
.handout-table tbody td { padding: var(--gap-sm) var(--gap); border-bottom: 1px solid var(--color-border); }
.handout-table tbody tr { transition: transform 0.1s ease, opacity 0.1s ease; }
.handout-controls { display: flex; gap: 10px; margin-top: 16px; }
.receipt-row { margin-top: var(--gap); }

/* Not Issued Section */
.not-issued-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap-lg); flex-wrap: wrap; }
.not-issued-kpis { display: flex; flex-wrap: wrap; gap: var(--gap); }
.not-issued-kpi { min-width: 180px; padding: var(--gap-lg); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.1)); box-shadow: var(--shadow); }
.not-issued-kpi[data-status="new"] { border-color: rgba(239,68,68,0.45); box-shadow: 0 10px 30px rgba(239,68,68,0.18); }
.not-issued-kpi[data-status="seen"] { border-color: rgba(245,158,11,0.35); }
.not-issued-kpi[data-status="resolved"] { border-color: rgba(34,197,94,0.35); }
.not-issued-kpi .kpi-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-light); }
.not-issued-kpi .kpi-value { font-size: 32px; font-weight: 700; margin: 6px 0; color: var(--color-text); }
.not-issued-kpi .kpi-hint { font-size: 13px; color: var(--color-text-muted); }

.not-issued-filters-card { display: flex; flex-direction: column; gap: var(--gap); }
.not-issued-filter-tags { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.filter-tag { border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--color-text-light); padding: 8px 16px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 8px; font-weight: var(--font-weight-medium); cursor: pointer; transition: transform 0.1s ease, opacity 0.1s ease; }
.filter-tag .filter-count { display: inline-flex; align-items: center; justify-content: center; padding: 2px 10px; font-size: 12px; border-radius: var(--radius-full); background: rgba(0,0,0,0.35); color: var(--color-text); min-width: 32px; }
.filter-tag.active { background: rgb(178 254 18); border-color: var(--accent-lime); color: #141e05; box-shadow: var(--shadow-accent); }
.filter-tag.active .filter-count { background: rgba(255,255,255,0.75); color: #141e05; }

.not-issued-filter-inputs { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.not-issued-filter-inputs .input { flex: 1 1 220px; }
.not-issued-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); margin-bottom: var(--gap); }
.not-issued-selection { font-size: 14px; color: var(--color-text-light); }
.not-issued-action-buttons { display: flex; flex-wrap: wrap; gap: var(--gap-sm); justify-content: flex-end; }

.not-issued-table th { text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
.not-issued-table td:first-child { text-align: center; }
.not-issued-table .ni-code { font-family: var(--font-mono); font-weight: 600; color: var(--color-text); }
.not-issued-table .ni-code-link { background: none; border: none; padding: 0; font: inherit; color: var(--accent-lime); cursor: pointer; text-decoration: underline; }
.not-issued-table .ni-code-link:focus-visible { outline: 2px solid var(--accent-lime); outline-offset: 2px; }
.not-issued-table .ni-meta { margin-top: 4px; font-size: 12px; color: var(--color-text-light); display: flex; gap: 6px; flex-wrap: wrap; }
.not-issued-table .ni-comment { font-size: 13px; color: var(--color-text-light); margin-top: 4px; line-height: 1.4; }
.not-issued-status { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; }
.not-issued-status[data-status="new"] { background: var(--color-danger-bg); color: var(--color-danger-text); }
.not-issued-status[data-status="seen"] { background: var(--color-warning-bg); color: var(--color-warning-text); }
.not-issued-status[data-status="resolved"] { background: var(--color-success-bg); color: var(--color-success-text); }
.not-issued-row-actions { display: flex; justify-content: flex-end; gap: 6px; }

.not-issued-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.checkbox { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.checkbox input { margin: 0; }

@media (max-width: 768px) {
  .not-issued-hero { flex-direction: column; }
  .not-issued-action-buttons { width: 100%; justify-content: flex-start; }
  .filter-tag { flex: 1 1 auto; justify-content: center; }
}

/* Modal (generic) */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); z-index: 9999; backdrop-filter: blur(4px); }
.modal.hidden { display: none; }
.modal-dialog { position: relative; background: var(--color-card); border-radius: var(--radius-lg); padding: var(--gap-xl); box-shadow: var(--shadow-lg); max-width: 480px; width: 90vw; animation: modalIn .2s ease; }
.modal-close { position: absolute; top: var(--gap); right: var(--gap); background: none; border: none; font-size: 24px; cursor: pointer; color: var(--color-text-muted); transition: transform 0.1s ease, opacity 0.1s ease; }
.modal-dialog h3 { margin-bottom: var(--gap); }
.modal-dialog p { color: var(--color-text-light); margin-bottom: var(--gap); }
.modal-dialog label { display: block; margin-bottom: var(--gap-xs); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.modal-actions { display: flex; gap: var(--gap-sm); justify-content: flex-end; margin-top: var(--gap-lg); }
@keyframes modalIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }

/* List filters and pagination */
.list-filters { display: flex; gap: var(--gap-sm); margin-bottom: var(--gap); flex-wrap: wrap; }
.list-filters .input { flex: 1 1 200px; }
.list-filters .btn { flex: 0 0 auto; }
.table-wrapper { overflow-x: auto; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--gap); margin-top: var(--gap); }
.pager span { font-weight: var(--font-weight-medium); color: var(--color-text-light); }

/* Receipt Camera Modal */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.4); z-index: 9999; backdrop-filter: blur(2px); }
.modal:not(.hidden) { display: flex; }

/* CRITICAL: убираем backdrop-filter для модалки чека — баг GPU-композитинга на Windows/Chrome */
.modal[data-noblur] { backdrop-filter: none !important; background: rgba(0,0,0,.5); }
.modal[data-noblur] * { filter: none !important; }

.modal-dialog.receipt-dialog { width: min(920px, 96vw); background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.rc-pane .rc-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:16px; }
.rc-hint { color: var(--color-text-light, #6b7280); margin: 10px 0 0; }

/* Изоляция слоя композитинга для live */
#receipt-live {
  position: relative;
  isolation: isolate;
  contain: paint;
  z-index: 2;
}

/* Canvas для live-превью (видимый) */
#receipt-canvas-live {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: transparent;
  border-radius: 12px;
}

/* Видео скрыто — используется только как источник кадров для canvas */
#receipt-video {
  display: none !important;
}

#receipt-preview-img {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: #000;
  border-radius: 12px;
}

/* Подсветка коробок при сканировании */
tr.scanned { 
  outline: 2px solid #22c55e; 
  background: #ecfdf5; 
  transition: background .2s; 
}
tr.pending { 
  opacity: .85; 
}

/* Handout panel (safe, isolated) */
.handout-panel{
  margin-top:14px; padding:16px; border:1px solid var(--color-border);
  border-radius:14px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.hp-row{ display:flex; gap:16px; flex-wrap:wrap }
.hp-stat{ flex:1 1 220px; min-width:220px; background:#f9fafb; border-radius:12px; padding:12px 14px }
.hp-label{ color:#6b7280; font-size:12px; margin-bottom:6px }
.hp-value{ font-size:32px; font-weight:800; letter-spacing:.2px }
#hp-weight, #hp-amount{ font-size:34px } /* крупнее вес и сумма */
.hp-status-text{ margin-top:10px; color:#374151 }
.hp-actions{ display:flex; align-items:center; gap:12px; margin-top:14px }
.btn{ min-height:40px; padding:0 16px }
.btn-primary{ background:linear-gradient(135deg, rgba(178,254,18,0.15) 0%, rgba(178,254,18,0.05) 100%); color:#b2fe12; border:1px solid rgba(178, 254, 18, 0.2)}
.btn-secondary{ background:#eef2f7 }
.btn-success{ background:#16a34a; color:#fff }
#hp-cancel{ background:#ef4444; color:#fff } /* кнопка отменить красная */

/* confirm modal tweaks (local only) */
.modal .modal-dialog{ width:min(480px, 92vw) }
.modal .modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px }
.btn-danger{ background:linear-gradient(135deg, rgb(255 0 0 / 15%) 0%, rgb(255 0 0 / 5%) 100%); color:#ef4444; border: 1px solid rgb(254 18 18 / 20%) }

/* Parcel Details Modal */
.modal-dialog.modal-lg {
  max-width: 700px;
  width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-dialog.modal-lg .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

.modal-header {
  padding: 0 0 16px 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #f0f9ff;
  margin: 0;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  /* min-height: 0 — иначе flex-элемент не станет ниже своего содержимого
     и прокрутка внутри не появится: список растянется, а обрежет его
     родитель. Тот же случай, что был в карточке филиала. */
  min-height: 0;
}

.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.parcel-info {
  background: #f9fafb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.parcel-info h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
  letter-spacing: 0.5px;
}

.parcel-info p {
  margin: 12px 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
}

.parcel-info strong {
  color: #111827;
  font-weight: 600;
  display: inline-block;
  min-width: 120px;
}

.parcel-history {
  margin-top: 24px;
}

.parcel-history h5 {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 16px 0;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 10px;
}

.timeline li {
  margin-bottom: 16px;
  padding-left: 24px;
  border-left: 3px solid #e5e7eb;
  position: relative;
  transition: border-color 0.2s;
}

.timeline li::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 6px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #f97316;
  border-radius: 50%;
}

.timeline li strong {
  display: block;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.timeline li small {
  color: #6b7280;
  font-size: 13px;
}

.timeline li em {
  display: block;
  margin-top: 8px;
  color: #6b7280;
  font-size: 13px;
  font-style: normal;
  background: #f3f4f6;
  padding: 8px 12px;
  border-radius: 4px;
}

.cn-cache-info {
  margin-top: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 8px;
  border: 1px solid #bae6fd;
}

.cn-cache-info h5 {
  font-size: 16px;
  font-weight: 600;
  color: #0c4a6e;
  margin: 0 0 12px 0;
}

.cn-cache-info p {
  margin: 8px 0;
  color: #0369a1;
  font-size: 14px;
}

.cn-cache-info strong {
  color: #0c4a6e;
  font-weight: 600;
}

.cn-cache-info ul {
  margin: 12px 0 0 0;
  padding-left: 20px;
  list-style: none;
}

.cn-cache-info ul li {
  margin-bottom: 8px;
  color: #0369a1;
  font-size: 13px;
  position: relative;
  padding-left: 16px;
}

.cn-cache-info ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #0ea5e9;
  font-weight: bold;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #6b7280;
  font-size: 14px;
}

.alert {
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
}

.alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Client Profile View */
#client-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  z-index: 1000;
  overflow-y: auto;
  padding: var(--gap-lg);
}

#client-view.hidden {
  display: none;
}

.client-header {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-bottom: var(--gap-lg);
  flex-wrap: wrap;
}

.client-header h2 {
  flex: 1;
  margin: 0;
}

.impersonate-banner {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(247, 147, 30, 0.3);
}

.impersonate-banner.hidden {
  display: none;
}

.btn-link {
  background: none;
  border: none;
  color: white;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-weight: 600;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: var(--gap-lg);
  overflow-x: auto;
}

.tab-btn {
  background: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 3px solid transparent;
  transition: transform 0.1s ease, opacity 0.1s ease;
  white-space: nowrap;
}

.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* УДАЛЕНО - теперь управляется выше, рядом с .app-main */

/* Client Cards */
.client-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap-lg);
}

.client-card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg);
  box-shadow: var(--shadow-sm);
}

.client-card h4 {
  margin: 0 0 var(--gap) 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: var(--gap-xs);
}

.client-card p {
  margin: var(--gap-xs) 0;
  color: #4b5563;
  font-size: 14px;
}

.client-card strong {
  color: #111827;
  font-weight: 600;
  display: inline-block;
  min-width: 140px;
}

.client-card .btn {
  margin-top: var(--gap-sm);
  margin-right: var(--gap-xs);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-sm);
}

.stat-item {
  text-align: center;
  padding: var(--gap);
  background: #f9fafb;
  border-radius: var(--radius);
}

.stat-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.stat-label {
  display: block;
  font-size: 13px;
  color: #6b7280;
}

/* Client Parcels Filters */
.client-parcels-filters {
  display: flex;
  gap: var(--gap-sm);
  margin-bottom: var(--gap);
  flex-wrap: wrap;
}

.client-parcels-filters select,
.client-parcels-filters input {
  flex: 1 1 200px;
}

/* Notes */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.note-card {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: var(--gap);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--color-primary);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--gap-xs);
}

.note-meta {
  font-size: 13px;
  color: #6b7280;
}

.note-body {
  color: #111827;
  white-space: pre-wrap;
  margin: var(--gap-xs) 0;
  line-height: 1.6;
}

.note-actions {
  display: flex;
  gap: var(--gap-xs);
  margin-top: var(--gap-sm);
}

/* History Timeline */
.history-filters {
  display: flex;
  gap: var(--gap-sm);
  margin-bottom: var(--gap);
  flex-wrap: wrap;
}

.history-timeline {
  position: relative;
  padding-left: 40px;
}

.history-timeline::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
}

.history-item {
  position: relative;
  margin-bottom: var(--gap-lg);
  padding-bottom: var(--gap);
  border-bottom: 1px solid #f3f4f6;
}

.history-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px var(--color-primary);
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--gap-xs);
}

.history-item-title {
  font-weight: 600;
  color: #111827;
}

.history-item-time {
  font-size: 13px;
  color: #6b7280;
}

.history-item-body {
  color: #4b5563;
  font-size: 14px;
}

/* Security */
.sessions-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap);
  background: #f9fafb;
  border-radius: var(--radius);
  font-size: 14px;
}

.session-info {
  flex: 1;
}

.session-time {
  color: #6b7280;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .client-cards {
    grid-template-columns: 1fr;
  }
  
  .tabs {
    font-size: 13px;
  }
  
  .tab-btn {
    padding: 10px 14px;
  }
  
  .client-parcels-filters {
    flex-direction: column;
  }
  
  .client-parcels-filters select,
  .client-parcels-filters input {
    flex: 1 1 auto;
  }
  
  /* Mobile status cards - compact */
  .status-card {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  
  .status-card:first-child {
    padding-top: 10px !important;
  }
  
  .status-card > div:first-child {
    width: 36px !important;
    height: 36px !important;
    border-radius: 0 !important;
  }
  
  .status-card > div:first-child > span {
    font-size: 20px !important;
  }
  
  .status-icon-svg {
    width: 28px !important;
    height: 28px !important;
  }
  
  .status-card .status-name {
    font-size: 13px !important;
  }
  
  .status-arrow {
    width: 16px !important;
  }
  
  .status-badge {
    min-width: 24px !important;
    height: 22px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
  }
}

/* =============================================================================
   STATUS BADGES — Two-Screen Navigation
   ============================================================================= */

#status-tabs-vertical {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#status-tabs-vertical > * {
  list-style: none !important;
  display: flex !important;
}

.status-card {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, opacity 0.1s ease !important;
  position: relative !important;
  border-radius: 0 !important;
}

/* Remove top padding from first status card */
.status-card:first-child {
  padding-top: 14px !important;
}

.status-card:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Status card icon container */
.status-card > div:first-child {
  width: 42px !important;
  height: 42px !important;
  
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}

.status-card > div:first-child > span {
  font-size: 23px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important;
}

/* Status SVG icon */
.status-icon-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.status-icon-svg {
  width: 40px !important;
  height: 40px !important;
  filter: grayscale(0) brightness(1) opacity(0.9) drop-shadow(0 1px 2px rgba(178, 254, 18, 0.3)) !important;
  transition: transform 0.1s ease, opacity 0.1s ease !important;
}

/* Status name wrapper */
.status-name-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
  gap: 2px !important;
}

/* Status name */
.status-card .status-name {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* Status hint */
.status-hint {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

/* Status arrow */
.status-arrow {
  color: rgba(178, 254, 18, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 100% !important;
  align-self: center !important;
}

.status-card::before,
.status-card::marker {
  display: none !important;
  content: none !important;
}

.status-badge {
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: all 0.15s ease;
  position: relative;
  list-style: none !important;
}

.status-badge::before,
.status-badge::after,
.status-badge::marker {
  display: none !important;
  content: none !important;
}

/* Active badge (count > 0, lime for most) */
.status-badge.badge--active {
  background: #b2fe12;
  color: #0f0f0f;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(178, 254, 18, 0.2);
}

/* Pending badge (count > 0, amber/orange) */
.status-badge.badge--pending {
  background: #fbbf24;
  color: #0f0f0f;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
}

/* Zero badge (count = 0, subtle gray) */
.status-badge.badge--zero {
  background: transparent;
  color: #6b7280;
  border: 2px solid #3f3f46;
  font-weight: 500;
  opacity: 0.6;
}

/* Issued/Delivered badge (always gray, even if count > 0) */
.status-badge.badge--issued {
  background: transparent;
  color: #6b7280;
  border: 2px solid #3f3f46;
  font-weight: 500;
  opacity: 0.6;
}

/* =============================================================================
   APP SHELL OVERLAY — Fullscreen Status Screen
   ============================================================================= */

/* When status screen is active, hide tab-bar smoothly with opacity */
/* App shell overlay mode - РАДИКАЛЬНО УПРОЩАЕМ */
.app-shell--overlay {
  /* Сохраняем состояние без визуальных изменений */
  --app-shell-overlay-active: 1;
}

.app-shell--overlay .tab-bar-bottom,
.app-shell--overlay .bottom-nav {
  pointer-events: none !important; /* Блокируем взаимодействие, анимацию контролирует JS */
}

.app-shell--overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0); /* No darkening - home screen should be fully visible */
  z-index: 999;
  pointer-events: none;
}

/* During swipe, allow main screen to be visible */
.app-shell--swiping {
  overflow: visible !important;
}

.app-shell--swiping::before {
  background: rgba(0, 0, 0, var(--overlay-opacity, 0.5));
  transition: background 0.1s linear;
}

/* Status screen should be fullscreen */
#orders-status-screen {
  /* КРИТИЧНО: Используем absolute вместо fixed чтобы не вызывать автоскролл */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh; /* фолбэк для браузеров без dvh */
  min-height: 100vh;
  height: 100dvh; /* видимая высота: без этого низ уходит под строку браузера */
  min-height: 100dvh;
  background: var(--bg);
  z-index: 10001; /* общая полка экранов, см. лестницу слоёв */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Скролл в .status-screen-body, не здесь */
  
  padding-bottom: 0;
  
  /* Начальное состояние - справа за экраном */
  transform: translate3d(100%, 0, 0);
  visibility: hidden; /* КРИТИЧНО: Не рендерить когда закрыт */
  
  /* БЕЗ внешней тени - используем внутренний градиент */
  box-shadow: none;
  
  /* Плавное скольжение без fade - как в навигации iOS */
  transition: transform var(--neo-dur) var(--neo-ease), visibility 0s var(--neo-dur);
  
  /* GPU ускорение */
  will-change: transform;
  backface-visibility: hidden;
  
  /* Блокируем клики когда скрыт */
  pointer-events: none;
}

/* Sprint 119 Task 2: Nuclear ghost kill — block ALL children too */
#orders-status-screen:not(.active),
#orders-status-screen:not(.active) * {
  pointer-events: none !important;
}

#orders-status-screen.active {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--neo-dur) var(--neo-ease), visibility 0s 0s;
}

/* Внутренняя тень слева - не вылезает за пределы панели */




/* Status screen header — фиксированный в flex-контейнере (не скроллится) */
.status-screen-header {
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border-default);
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1001; /* КРИТИЧНО: Выше profile header (100) и pickup screen (1000) */
  min-height: 48px;
  pointer-events: auto; /* КРИТИЧНО: Header ВСЕГДА кликабельный */
}

/* Scrollable body for status screen */
.status-screen-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  min-height: 0; /* Позволяет flex работать правильно */
}

/* Экран "Готово к выдаче" (табы Оплачено/Неоплачено): body — flex-колонка,
   подсказка сверху (flex-shrink:0), #status-list-ready на оставшееся место
   (flex:1), скролл ТОЛЬКО внутри панели. Без этого был двойной скролл и
   обрезка нижних карточек под фикс-кнопкой при большом числе посылок. */
.status-screen-body--tabbed {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

.status-screen-header h2 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
}

/* Back button - icon only, compact and clean */
.status-screen-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #2f2f2f 0%, #333333 100%);
  border: 1.5px solid rgba(178, 254, 18, 0.2);
  color: var(--brand);
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.status-screen-back .back-arrow {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.1s ease;
}

/* Pickup Screen - Full-screen overlay like status screens */
#pickup-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh; /* Fallback */
  height: 100dvh; /* Динамическая высота с учетом адресной строки */
  min-height: 100dvh;
  background: var(--bg);
  z-index: 10001; /* общая полка экранов, см. лестницу слоёв */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  
  /* Начальное состояние - справа за экраном */
  transform: translate3d(100%, 0, 0);
  visibility: hidden; /* КРИТИЧНО: Не рендерить когда закрыт */
  
  /* БЕЗ внешней тени - используем внутренний градиент */
  box-shadow: none;
  
  /* Плавное скольжение */
  transition: transform var(--neo-dur) var(--neo-ease), visibility 0s var(--neo-dur);
  
  /* GPU ускорение */
  will-change: transform;
  backface-visibility: hidden;
  
  /* КРИТИЧНО: Блокируем клики когда скрыт */
  pointer-events: none;
}

/* Sprint 119 Task 2: Nuclear ghost kill — block ALL children too */
#pickup-screen:not(.active),
#pickup-screen:not(.active) * {
  pointer-events: none !important;
}

#pickup-screen.active {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  /* КРИТИЧНО: Разрешаем клики только когда активен */
  pointer-events: auto;
  transition: transform var(--neo-dur) var(--neo-ease), visibility 0s 0s;
}

/* Внутренняя тень слева - не вылезает за пределы панели */




/* 🔒 ЖЕСТКАЯ БЛОКИРОВКА: Backdrop перехватывает ВСЕ клики к фону */
#pickup-screen::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100dvh; /* ДИНАМИЧЕСКАЯ высота с учетом адресной строки */
  min-height: 100dvh;
  z-index: -1;
  background: var(--bg, #1a1a1a); /* СПЛОШНОЙ ФОН! */
  pointer-events: none; /* Sprint 118: не перехватывать когда еще не активен */
}

#pickup-screen.active::before {
  pointer-events: auto;
}

/* КРИТИЧНО: Весь контент экрана должен блокировать клики к фону */
#pickup-screen > * {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

/* =============================================================================
   SCREEN TRANSITIONS — Smooth Animations
   ============================================================================= */

/* Initial state when showing (entering) */
/* Старые классы анимации больше не нужны - используем transition на .active */

/* =============================================================================
   ORDERS SCREEN — Bonuses & Action Cards
   ============================================================================= */

/* Action Card - Accent button with brand color */
.orders-action-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 12px;
  margin-bottom: 12px;
  width: 100%;
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.85) 0%, rgba(158, 224, 15, 0.85) 100%);
  border: 2px solid rgba(178, 254, 18, 0.95);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 10px rgba(178, 254, 18, 0.2),
              0 1px 3px rgba(178, 254, 18, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-align: center;
  overflow: hidden;
}

/* Inner glow effect */
.orders-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 14px;
}

.orders-action-card:focus {
  
}

/* Icon in action card - dark on light */
.orders-action-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 0.25s ease;
  box-shadow: none;
}

/* Compact Search Button - Small icon-only button */
.orders-search-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: linear-gradient(135deg, #2d2d2d 0%, #323232 100%);
  border: 2px solid rgba(178, 254, 18, 0.12);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 3px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  top: 10px;
}

.orders-search-compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(178, 254, 18, 0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.orders-search-compact:focus {
  outline: 2px solid rgba(178, 254, 18, 0.6);
  outline-offset: 3px;
  border-color: rgba(178, 254, 18, 0.5);
}

.orders-search-compact-icon {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 0.1s ease, opacity 0.1s ease;
  position: relative;
  z-index: 1;
}

.orders-search-compact-icon img {
  width: 28px;
  height: 28px;
  filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7481%) hue-rotate(135deg) brightness(112%) contrast(100%);
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Floating Search Button - positioned in top-right corner of status block */
.orders-search-floating {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: linear-gradient(135deg, rgba(47, 47, 47, 0.95) 0%, rgba(51, 51, 51, 0.95) 100%);
  border: 2px solid rgba(178, 254, 18, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 3px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.orders-search-floating::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(178, 254, 18, 0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 10px;
}

.orders-search-floating-icon {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Mobile optimization */
@media (max-width: 640px) {
  .orders-action-card-icon {
    width: 50px;
    height: 50px;
    font-size: 26px;
  }
  
  .status-list-header {
    padding: 5px 8px;
  }
  
  .status-list-header-title {
    font-size: 9px;
    letter-spacing: 0.6px;
  }
  
  .status-list-search-btn {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 5px;
  }
}

/* Content area in action card - centered */
.orders-action-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.orders-action-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
}

.orders-action-card-hint {
  font-size: 10px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.2;
  text-align: center;
}

/* Status List Header - compact header inside status block */
.status-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.1);
}

.status-list-header-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.status-list-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: rgba(178, 254, 18, 0.08);
  border: 1.5px solid rgba(178, 254, 18, 0.2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: transform 0.1s ease, opacity 0.1s ease;
  flex-shrink: 0;
}

/* Bonuses Card - Professional & Compact */
/* ============================================================================= */
/* Bonuses Card - Minimalist Design */
/* ============================================================================= */

/* Base Card - Clean & Simple */
.bonuses-card {
  background: rgba(35, 35, 35, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease, opacity 0.1s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* ============================================================================= */
/* ORDERS Section - Centered Design (Large, Bold) */
/* ============================================================================= */

.bonuses-card--orders {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  gap: 14px;
}

.bonuses-card--orders .bonuses-card-left {
  flex-shrink: 0;
}

.bonuses-card--orders .bonuses-card-icon-wrap {
  width: 60px;
  height: 45px;
  background: rgba(178, 254, 18, 0.08);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(178, 254, 18, 0.15);
}

.bonuses-card--orders .bonuses-card-icon-img {
  width: 32px;
  height: 32px;
  opacity: 0.9;
}

.bonuses-card--orders .bonuses-card-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.bonuses-card--orders .bonuses-card-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bonuses-card--orders .bonuses-card-amount {
  font-size: 26px;
  font-weight: 700;
  color: #b2fe12;
  line-height: 1;
  letter-spacing: -0.02em;
}

.bonuses-card--orders .bonuses-card-right {
  flex-shrink: 0;
}

.bonuses-card--orders .bonuses-card-action {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  padding: 0;
}

.bonuses-card--orders .bonuses-card-action svg {
  display: block;
  flex-shrink: 0;
}

.bonuses-card--orders .bonuses-card-action:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ============================================================================= */
/* PROFILE Section - Compact Horizontal (Smaller, Inline) */
/* ============================================================================= */

/* Используем ID для максимальной специфичности */
#profile-bonuses-card.bonuses-card--profile,
.bonuses-card--profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px !important;  /* Отдельный padding для бонусов */
  gap: 10px !important;
  border-radius: 12px !important;  /* Чуть меньше радиус */
  margin-bottom: 14px !important;
}

#profile-bonuses-card .bonuses-card-left,
.bonuses-card--profile .bonuses-card-left {
  display: flex;
  align-items: center;
  gap: 10px !important;  /* Меньше gap */
  flex: 1;
  min-width: 0;
}

#profile-bonuses-card .bonuses-card-icon-wrap,
.bonuses-card--profile .bonuses-card-icon-wrap {
  width: 60px !important;  /* Уменьшено с 44px */
  height: 42px !important;
  background: rgba(178, 254, 18, 0.06);
  border-radius: 9px !important;  /* Меньше радиус */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(178, 254, 18, 0.12);
  flex-shrink: 0;
}

#profile-bonuses-card .bonuses-card-icon-img,
.bonuses-card--profile .bonuses-card-icon-img {
  width: 50px !important;  /* Уменьшено с 24px */
  height: 50px !important;
  opacity: 0.85;
}

#profile-bonuses-card .bonuses-card-text,
.bonuses-card--profile .bonuses-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#profile-bonuses-card .bonuses-card-label,
.bonuses-card--profile .bonuses-card-label {
  font-size: 10px !important;  /* Уменьшено с 10px */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#profile-bonuses-card .bonuses-card-amount,
.bonuses-card--profile .bonuses-card-amount {
  font-size: 16px !important;  /* Уменьшено с 18px */
  font-weight: 700;
  color: #b2fe12;
  line-height: 1;
  letter-spacing: -0.01em;
}

#profile-bonuses-card .bonuses-card-right,
.bonuses-card--profile .bonuses-card-right {
  flex-shrink: 0;
}

#profile-bonuses-card .bonuses-card-action,
.bonuses-card--profile .bonuses-card-action {
  width: 30px !important;  /* Уменьшено с 32px */
  height: 30px !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px !important;  /* Меньше радиус */
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

#profile-bonuses-card .bonuses-card-action svg,
.bonuses-card--profile .bonuses-card-action svg {
  display: block;
  flex-shrink: 0;
  width: 14px !important;  /* Уменьшено с 16px */
  height: 14px !important;
}

#profile-bonuses-card .bonuses-card-action:disabled,
.bonuses-card--profile .bonuses-card-action:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ============================================================================= */
/* Legacy Classes - Keep for backward compatibility */
/* ============================================================================= */

.bonuses-card-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bonuses-card-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.bonuses-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bonuses-card-title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bonuses-card-amount {
  font-size: 20px;
  font-weight: 700;
  color: #b2fe12;
  line-height: 1;
  letter-spacing: -0.01em;
}

.bonuses-card-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

.bonuses-card-btn {
  padding: 8px 16px;
  background: rgba(178, 254, 18, 0.08);
  border: 1px solid rgba(178, 254, 18, 0.2);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #b2fe12;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bonuses-card-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.bonuses-card-btn:focus {
  outline: 2px solid rgba(178, 254, 18, 0.4);
  outline-offset: 2px;
}

/* ============================================================================= */
/* Mobile Responsive */
/* ============================================================================= */

@media (max-width: 480px) {
  .bonuses-card--orders {
    padding: 14px 16px;
    gap: 12px;
  }
  
  .bonuses-card--orders .bonuses-card-icon-wrap {
    width: 55px;
    height: 40px;
  }
  
  .bonuses-card--orders .bonuses-card-icon-img {
    width: 45px;
    height: 45px;
  }
  
  .bonuses-card--orders .bonuses-card-label {
    font-size: 10px;
  }
  
  .bonuses-card--orders .bonuses-card-value {
    font-size: 22px;
  }
  
  .bonuses-card--orders .bonuses-card-action {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
  
  #profile-bonuses-card.bonuses-card--profile,
  .bonuses-card--profile {
    padding: 8px 10px !important;  /* Еще меньше на мобильных */
    gap: 8px !important;
  }
  
  #profile-bonuses-card .bonuses-card-icon-wrap,
  .bonuses-card--profile .bonuses-card-icon-wrap {
    width: 60px !important;  /* Уменьшено с 40px */
    height: 42px !important;
  }
  
  #profile-bonuses-card .bonuses-card-icon-img,
  .bonuses-card--profile .bonuses-card-icon-img {
    width: 55px !important;  /* Уменьшено с 22px */
    height: 55px !important;
  }
  
  #profile-bonuses-card .bonuses-card-amount,
  .bonuses-card--profile .bonuses-card-amount {
    font-size: 18px !important;  /* Уменьшено с 16px */
  }
  
  #profile-bonuses-card .bonuses-card-action,
  .bonuses-card--profile .bonuses-card-action {
    width: 30px !important;  /* Уменьшено с 28px */
    height: 30px !important;
  }
  
  #profile-bonuses-card .bonuses-card-action svg,
  .bonuses-card--profile .bonuses-card-action svg {
    width: 18px !important;  /* Уменьшено с 14px */
    height: 18px !important;
  }
}

/* =============================================================================
   BRANCH CARD - Ultra Compact Style (Icon Right)
   ============================================================================= */

.branch-card--compact {
  background: rgba(50, 50, 50, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease, opacity 0.1s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.branch-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.branch-card-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

.branch-card-details {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.branch-card-code {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
  line-height: 1.2;
  flex-shrink: 0;
}

.branch-card-separator {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.branch-card-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.branch-card-icon {
  font-size: 22px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.2s ease;
  opacity: 0.7;
}

.branch-card-arrow {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  transition: transform 0.1s ease, opacity 0.1s ease;
  line-height: 1;
  margin-right: -4px;
}

/* Mobile optimization */
@media (max-width: 480px) {
  .branch-card--compact {
    padding: 7px 10px;
    gap: 8px;
  }
  
  .branch-card-icon {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }
  
  .branch-card-label {
    font-size: 11px;
  }
  
  .branch-card-code {
    font-size: 13px;
  }
  
  .branch-card-separator {
    font-size: 11px;
  }
  
  .branch-card-name {
    font-size: 13px;
  }
  
  .branch-card-arrow {
    font-size: 28px;
  }
}

/* =============================================================================
   PROFILE BRANCH CARD - ОТДЕЛЬНЫЙ КОМПАКТНЫЙ СТИЛЬ
   ============================================================================= */

.profile-branch-card {
  background: var(--border-default);
  border-radius: 10px;
  padding: 5px 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease, opacity 0.1s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-branch-icon {
  font-size: 22px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.2s ease;
  opacity: 0.7;
}

/* SVG иконка внутри блока филиала */
.profile-branch-icon img {
  width: 70px;
  height: 70px;
  display: block;
}

.profile-branch-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-branch-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.2;
}

.profile-branch-details {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.profile-branch-code {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
  flex-shrink: 0;
}

.profile-branch-separator {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.profile-branch-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.profile-branch-arrow {
  font-size: 34px;
  color: #b2fe12d1;
  flex-shrink: 0;
  transition: transform 0.1s ease, opacity 0.1s ease;
  line-height: 1;
  margin-right: -10px;
  margin-top: -3.5px !important;
}

/* MOBILE - Profile Branch Card - ОТДЕЛЬНЫЙ КОМПАКТНЫЙ */
@media (max-width: 480px) {
  #profile-branch-card.profile-branch-card {
    padding: 3px 16px !important;
    gap: 5px !important;
    margin-bottom: 14px !important;
    border-radius: 16px !important;
  }
  
  #profile-branch-card .profile-branch-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    border-radius: 6px !important;
  }
  #profile-branch-card .profile-branch-icon img {
    width: 80px !important;
    height: 80px !important;
  }
  
  #profile-branch-card .profile-branch-label {
    font-size: 13px !important;
    font-weight: 500 !important;
  }
  
  #profile-branch-card .profile-branch-code {
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  
  #profile-branch-card .profile-branch-separator {
    font-size: 12px !important;
  }
  
  #profile-branch-card .profile-branch-name {
    font-size: 13px !important;
    font-weight: 500 !important;
  }
  
  #profile-branch-card .profile-branch-arrow {
    font-size: 28px !important;
  }
}

/* =============================================================================
   BRANCH SCREEN - TWO TABS (Мой филиал / Филиалы)
   ============================================================================= */
/* SVG-иконки вкладок "Выбрать филиал" */
.branch-tab-svg {
  width: 38px;
  height: 38px;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(178,254,18,0.25));
}

/* SVG-иконки в инфо-блоках филиала */
.branch-info-svg {
  width: 36px;
  height: 36px;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(178,254,18,0.25));
}

/* Modern Branch Tabs - Integrated with Header */

/* Fullscreen overlay с flex-layout (хедер фиксирован, контент скроллится) */
.fullscreen-overlay--flex {
  overflow: hidden !important; /* Скролл только в body, не в overlay */
}

/* Branch screen fixed header */
.branch-screen-fixed-header {
  flex-shrink: 0;
  background: var(--bg-primary);
  padding: 16px 20px 5px;
  z-index: 10;
}

/* Branch screen scrollable body */
.branch-screen-scroll-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0; /* Позволяет flex работать правильно */
}

.branch-tabs-modern {
  display: flex;
  gap: 10px;
  padding: 12px 16px 16px;
  background: linear-gradient(180deg, #1a1a1a4a 0%, rgb(26 26 26 / 21%) 100%);
  border-radius: 10px;
  margin-top: 8px;
}

.branch-tab-modern {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: none;
  border-radius: 12px;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.branch-tab-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(178,254,18,0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.branch-tab-modern.active {
  background: linear-gradient(135deg, rgba(178,254,18,0.15) 0%, rgba(178,254,18,0.08) 100%);
  color: #b2fe12;
  box-shadow: 
    0 0 0 1px rgba(178,254,18,0.3),
    0 4px 12px rgba(178,254,18,0.15),
    inset 0 1px 0 rgba(178,254,18,0.2);
}

.branch-tab-modern.active::before {
  opacity: 1;
}

.branch-tab-icon {
  font-size: 24px;
  filter: grayscale(0.5) opacity(0.7);
  transition: all 0.3s ease;
}

.branch-tab-modern.active .branch-tab-icon {
  filter: grayscale(0) opacity(1);
  transform: scale(1.1);
}

.branch-tab-text {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.branch-tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.branch-tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Мой филиал - Card */
.my-branch-card {
  background: var(--bg-card); 
  border-radius: 16px;
  padding: 16px;
}

.my-branch-header {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.my-branch-separator {
  color: rgba(255,255,255,0.3);
  font-size: 16px;
}

.my-branch-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.my-branch-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}

.my-branch-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}

.my-branch-info-item span:last-child,
.my-branch-info-item #my-branch-full-address {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  flex: 1;
  min-width: 0;
}

.my-branch-map {
  margin: 16px 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(30, 30, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Яндекс карта - базовые стили */
#my-branch-yandex-map,
#branch-modal-yandex-map {
  position: relative;
  /* Затемнение для темной темы (раскомментируйте если нужно) */
  /* filter: invert(0.9) hue-rotate(180deg) brightness(0.9) contrast(0.9); */
}

/* =============================================================================
   YANDEX MAPS — Скрываем все надписи, копирайты, промо-блоки
   ============================================================================= */
[class*="ymaps-2"][class*="copyrights"],
[class*="ymaps-2"][class*="copyright"],
[class*="ymaps"][class*="copyrights-promo"],
[class*="ymaps"][class*="map-copyrights"],
[class*="ymaps"][class*="logo"],
.ymaps-2-1-79-copyright,
.ymaps-2-1-79-copyrights-pane,
.ymaps-2-1-79-map-copyrights-promo {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Кнопка полноэкранного режима (в углу карты) */
.map-fullscreen-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: #262626d9;
  border: 0px solid rgba(178, 254, 18, 0.25);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
}

/* Полноэкранный режим карты — плавный fade (Sprint 137) */
.map-fullscreen-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  z-index: 10001; /* общая полка экранов */
  display: flex;
  flex-direction: column;

  /* ЕДИНЫЙ СТАНДАРТ ПЕРЕХОДА.
     Карта была последним полноэкранным экраном, который просто проявлялся
     на месте за 0.3с. На фоне остальных, приезжающих справа, это читалось
     как «старый экран». Теперь она едет справа, как все, а страница под
     ней уходит влево. */
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--neo-dur) var(--neo-ease), visibility 0s var(--neo-dur);
}

.map-fullscreen-container.active {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--neo-dur) var(--neo-ease), visibility 0s 0s;
}

/* no-transition больше не нужен (свайп отключён) */
.map-fullscreen-container.no-transition {
  transition: none !important;
}

/* ========================================
   Кастомные кнопки управления картой (Sprint 137)
   Используются на глобальной карте (#all-branches-map)
   ======================================== */
.map-custom-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 22px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-custom-ctrl-btn {
  width: 36px;
  height: 36px;
  background: rgba(38, 38, 38, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  padding: 0;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.map-custom-ctrl-btn:hover {
  background: rgba(50, 50, 50, 0.95);
  border-color: rgba(178, 254, 18, 0.3);
}

.map-custom-ctrl-btn img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* ========================================
   Кастомный маркер «Вы» — пульсирующая точка (Sprint 137)
   ======================================== */
/* Маркер геолокации «Вы» — круглый, синий, пульсирующий (Sprint 140) */
.map-user-marker {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4A90D9 0%, #357ABD 100%);
  border: 3px solid #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(53, 122, 189, 0.5), 0 0 0 0 rgba(74, 144, 217, 0.4);
  animation: userMarkerPulse 2s ease-in-out infinite;
  z-index: 10;
}

.map-user-marker::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  background: rgba(74, 144, 217, 0.15);
  animation: userAuraPulse 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes userMarkerPulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(53, 122, 189, 0.5), 0 0 0 0 rgba(74, 144, 217, 0.35);
  }
  50% {
    box-shadow: 0 2px 12px rgba(53, 122, 189, 0.7), 0 0 0 8px rgba(74, 144, 217, 0);
  }
}

@keyframes userAuraPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Шапка полноэкранной карты */
.map-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(26, 26, 26, 1) 0%, rgba(26, 26, 26, 0.98) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.map-fullscreen-back {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.map-fullscreen-title {
  flex: 1;
  text-align: center;
}

.map-fullscreen-address {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2px;
}

/* Под названием пункта — адрес мелким. Раньше здесь лаймом светился код
   двери; клиенту он не нужен. Сам элемент оставлен: по нему карта находит
   точку (data-branch-id). */
.map-fullscreen-code {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

/* Контейнер карты */
.map-fullscreen-yandex {
  flex: 1;
  width: 100%;
  position: relative;
}

/* Кнопки управления в полноэкранном режиме */
.map-fullscreen-controls {
  position: absolute;
  top: calc(50% + 30px);
  transform: translateY(-50%);
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}

.map-fullscreen-control-btn {
  width: 48px;
  height: 48px;
  background: #262626;
  border: 1px solid #262626;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, opacity 0.1s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.map-fullscreen-locate {
  margin-top: 8px;
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
  .map-fullscreen-btn {
    width: 30px;
    height: 30px;
    font-size: 18px;
    top: 10px;
    right: 10px;
  }

  .map-fullscreen-controls {
    right: 10px;
    gap: 6px;
  }

  .map-fullscreen-control-btn {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }

  .map-fullscreen-address {
    font-size: 15px;
  }

  .map-fullscreen-code {
    font-size: 12px;
  }
}

.my-branch-2gis-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.12) 0%, rgba(178, 254, 18, 0.08) 100%);
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Mobile */
@media (max-width: 480px) {
  .branch-tabs-modern {
    padding: 7px 7px 7px;
    gap: 8px;
  }
  
  .branch-tab-modern {
    padding: 5px 5px;
    border-radius: 7px;
    gap: 0px;
  }
  
  .branch-tab-icon {
    font-size: 20px;
  }
  
  .branch-tab-text {
    font-size: 12px;
    margin-bottom: 2px;
  }
  
  .my-branch-card {
    padding: 14px;
  }
  
  .my-branch-header {
    font-size: 17px;
    margin-left: 4px;
  }
  
  .my-branch-info-item {
    padding: 8px 10px;
  }
  
  .my-branch-icon {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  
  .my-branch-2gis-btn {
    padding: 12px 18px;
    font-size: 14px;
  }
}

/* Branch List - NEOcargo Style (Dark Theme with Lime) */
.branches-list {
  background: transparent;
  padding: 12px 16px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.branch-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: transform 0.1s ease, opacity 0.1s ease;
  position: relative;
  animation: branchSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.branch-list-item:nth-child(1) { animation-delay: 0s; }
.branch-list-item:nth-child(2) { animation-delay: 0.05s; }
.branch-list-item:nth-child(3) { animation-delay: 0.1s; }
.branch-list-item:nth-child(4) { animation-delay: 0.15s; }
.branch-list-item:nth-child(5) { animation-delay: 0.2s; }
.branch-list-item:nth-child(6) { animation-delay: 0.25s; }

@keyframes branchSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.branch-list-item.selected {
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.1) 0%, rgba(178, 254, 18, 0.05) 100%);
  border-color: rgba(178, 254, 18, 0.3);
  box-shadow: 0 0 0 1px rgba(178, 254, 18, 0.2), 0 4px 12px rgba(178, 254, 18, 0.15);
}

/* Галочка выбора (слева) */
.branch-checkbox {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.branch-check-circle {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: transparent !important;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
}

.branch-list-item.selected .branch-check-circle {
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  border-color: #b2fe12;
  color: #1a1a1a !important;
  box-shadow: 0 0 12px rgba(178, 254, 18, 0.4);
  font-weight: 700;
}

/* Основной контент (кликабельный) */
.branch-list-main {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.branch-list-icon {
  font-size: 22px;
  filter: grayscale(0.3);
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Стрелка (справа) */
.branch-arrow {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.branch-list-text {
  flex: 1;
  min-width: 0;
}

.branch-list-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  transition: color 0.1s ease;
}

.branch-list-code {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.branch-list-item.active .branch-list-code {
  color: #b2fe12;
  font-weight: 500;
}

/* Галочка выбора */
.branch-check {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: transparent;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.branch-list-item.active .branch-check {
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  border-color: #b2fe12;
  color: #1a1a1a;
  box-shadow: 0 0 12px rgba(178, 254, 18, 0.4);
}

/* Контейнер кнопки "Изменить филиал" - фиксированный внизу */
/* Позиционирование через inline стили + управление через JS */
.branch-change-btn-fixed {
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.95) 30%, rgba(26, 26, 26, 1) 100%);
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.branch-change-btn-fixed button {
  pointer-events: all;
}

/* Кнопка "Изменить филиал" */
.branch-change-btn {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  border: none;
  border-radius: 16px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 12px rgba(178, 254, 18, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.branch-change-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Mobile */
@media (max-width: 480px) {
  .branches-list {
    padding: 10px 12px;
    gap: 10px;
  }

  .branch-list-item {
    padding: 12px 12px;
    gap: 3px;
    border-radius: 10px;
  }
  
  .branch-list-icon {
    font-size: 20px;
  }
  
  .branch-list-title {
    font-size: 14px;
  }
  
  .branch-list-code {
    font-size: 12px;
  }
  
  .branch-check {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
  
  .branch-change-btn {
    padding: 14px 18px;
    font-size: 15px;
    border-radius: 14px;
  }
  
  .branch-checkbox {
    width: 28px;
    height: 28px;
  }
  
  .branch-check-circle {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
  
  .branch-arrow {
    font-size: 22px;
    width: 28px;
    height: 28px;
  }
}

/* =============================================================================
   BRANCH DETAILS MODAL (светлая тема, как на фото)
   ============================================================================= */

.branch-details-modal {
  position: fixed;
  inset: 0;
  z-index: 20000; /* полка модалок: иначе прячется под цепочкой экранов */
  display: none;
  align-items: flex-end;
  visibility: hidden;
}

.branch-details-modal.active {
  display: flex;
  visibility: visible;
}

/* Блокировка скролла фона для модалки филиала */
body.branch-modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

body.branch-modal-open .app-main,
body.branch-modal-open #profile-screen {
  overflow: hidden !important;
}

/* Блокировка скролла фона для экрана выбора филиала */
body.branch-screen-open {
  overflow: hidden !important;
  /* УБРАЛИ position: fixed - вызывал визуальный прыжок! */
  /* Теперь используем только overflow: hidden без смещения */
}

body.branch-screen-open .app-main,
body.branch-screen-open #profile-screen {
  overflow: hidden !important;
}

.branch-details-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.branch-details-modal.active .branch-details-overlay {
  opacity: 1;
}

.branch-details-content {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: linear-gradient(180deg, #1f1f1f 0%, #1a1a1a 100%);
  border-radius: 20px 20px 0 0;
  box-shadow: 
    0 -10px 40px rgba(0, 0, 0, 0.5),
    0 -2px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--neo-dur) var(--neo-ease); /* единый стандарт */
}

.branch-details-modal.active .branch-details-content {
  transform: translateY(0);
  animation: slideUpBounce var(--neo-dur) var(--neo-ease);
}

@keyframes slideUpBounce {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Header модалки (код филиала) */
.branch-modal-header {
  padding: 24px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.branch-modal-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  flex: 1;
}

.branch-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #b2fe12;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

/* Body модалки */
.branch-modal-body {
  padding: 0;
  overflow-y: auto;
  flex: 1;
  /* БЕЗ ЭТОЙ СТРОКИ КАРТОЧКА ФИЛИАЛА НЕ ПРОКРУЧИВАЛАСЬ.
     У flex-элемента минимальная высота по умолчанию равна высоте содержимого:
     блок растягивался под весь свой контент, прокручивать внутри было нечего,
     а снаружи всё обрезала шторка. Со стороны выглядело так, будто карточка
     застряла и не листается. */
  min-height: 0;
}

/* Элементы списка (с разделителями) */
.branch-modal-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  transition: background 0.2s ease;
}

.branch-modal-item-bordered {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 2px;
}

.branch-modal-item-bordered::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.branch-modal-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.branch-modal-text {
  flex: 1;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.4;
}

.branch-modal-text-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Строка адреса с кнопкой копирования — горизонтальный layout (Sprint 140) */
.branch-modal-text-group:has(.copy-address-btn) {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.branch-modal-text-group > div:first-child {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.4;
}

.branch-modal-status {
  font-size: 14px;
  color: #b2fe12;
  font-weight: 500;
}

.branch-modal-address-title {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.branch-modal-address-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* Карта */
.branch-modal-map {
  width: calc(100% - 40px);
  height: 250px;
  margin: 0 20px;
  background: rgba(30, 30, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.branch-modal-map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
}

/* Кнопка 2GIS */
.branch-modal-map-buttons {
  padding: 20px 20px 16px;
  display: flex;
  justify-content: flex-start;
}

.branch-modal-2gis-single-btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.12) 0%, rgba(178, 254, 18, 0.08) 100%);
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Footer с кнопкой */
.branch-modal-footer {
  padding: 20px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #1f1f1f 0%, #1a1a1a 100%);
  flex-shrink: 0;
}

.branch-modal-select-btn {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  border: none;
  border-radius: 16px;
  color: #1a1a1a;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  box-shadow: 
    0 4px 12px rgba(178, 254, 18, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Mobile модалка */
@media (max-width: 480px) {
  .branch-details-content {
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
  }
  
  .branch-modal-header {
    padding: 16px 16px 14px;
  }
  
  .branch-modal-header h3 {
    font-size: 18px;
  }
  
  .branch-modal-close {
    width: 28px;
    height: 28px;
    font-size: 24px;
  }
  
  .branch-modal-item {
    padding: 14px 16px;
    gap: 12px;
  }
  
  .branch-modal-icon {
    font-size: 22px;
    width: 28px;
    height: 28px;
  }
  
  .branch-modal-text {
    font-size: 16px;
  }
  
  .branch-modal-text-group > div:first-child {
    font-size: 16px;
  }
  
  .branch-modal-map {
    height: 180px;
  }
  
  .branch-modal-map-buttons {
    padding: 12px 16px;
  }
  
  .branch-modal-2gis-single-btn {
    padding: 12px 14px;
    font-size: 15px;
  }
  
  .branch-modal-footer {
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  
  .branch-modal-select-btn {
    padding: 14px 18px;
    font-size: 16px;
  }
}

/* =============================================================================
   SUPPORT MODAL - Модалка поддержки
   ============================================================================= */

.support-modal {
  position: fixed;
  inset: 0;
  z-index: 20000; /* модалка поверх экранов */
  display: flex;
  align-items: flex-end;
  visibility: hidden;
}

.support-modal.active {
  display: flex;
  visibility: visible;
}

/* Блокировка скролла фона */
body.support-modal-open {
  overflow: hidden !important;
  /* УБРАЛИ position: fixed - вызывал визуальный прыжок! */
  /* Теперь используем только overflow: hidden без смещения */
}

body.support-modal-open .app-main,
body.support-modal-open #profile-screen {
  overflow: hidden !important;
}

/* Затемнение и блюр для шапки и навбара (управляется отдельным классом, чтобы снимать blur сразу) */
body.support-modal-blur .app-header,
body.support-modal-blur .tab-bar-bottom,
body.support-modal-blur #profile-header-main {
  pointer-events: none !important;
}

.support-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.support-modal.active .support-overlay {
  opacity: 1;
}

.support-drag-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
  cursor: grab;
}

.support-content {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: rgba(25, 25, 25, 0.98);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.support-modal.active .support-content {
  transform: translateY(0);
}

/* Header */
.support-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.support-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

.support-close {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Body */
.support-body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Приветственный текст */
.support-welcome {
  margin-bottom: 24px;
}

.support-welcome p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 12px 0;
}

.support-welcome p:last-child {
  margin-bottom: 0;
}

/* Телефон */
.support-phone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  padding-right: 48px; /* Место для кнопки справа */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 16px;
}

/* Кнопка копирования телефона */
.copy-phone-btn {
  padding: 6px;
  background: rgba(178, 254, 18, 0.1);
  border: 1px solid rgba(178, 254, 18, 0.2);
  border-radius: 8px;
  color: #b2fe12;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.copy-phone-btn svg {
  display: block;
}

.copy-phone-btn-small {
  padding: 6px;
}

.copy-phone-btn-inline {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 8px;
}

/* Кнопка копирования адреса (Sprint 139) */
.copy-address-btn {
  padding: 6px;
  background: rgba(178, 254, 18, 0.1);
  border: 1px solid rgba(178, 254, 18, 0.2);
  border-radius: 8px;
  color: #b2fe12;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.copy-address-btn svg {
  display: block;
}

/* Телефон как кликабельная ссылка (Sprint 139) */
.phone-tel-link {
  color: inherit !important;
  text-decoration: none !important;
  user-select: text;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Отключение автоопределения телефонов iOS */
.phone-no-link {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
  user-select: text;
}

.phone-no-link a {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
}

/* Кнопка WhatsApp */
.support-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  border: none;
  border-radius: 12px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  box-shadow: 0 4px 16px rgba(178, 254, 18, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.support-whatsapp-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-whatsapp-icon img {
  width: 38px;
  height: 38px;
  display: block;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .support-content {
    border-radius: 20px 20px 0 0;
  }
  
  .support-header {
    padding: 6px 20px 10px;
  }
  
  .support-header h3 {
    font-size: 17px;
  }
  
  .support-body {
    padding: 18px 20px;
  }
  
  .support-welcome p {
    font-size: 13px;
  }
  
  .support-phone {
    padding: 8px;
    font-size: 16px;
  }
  
  .support-whatsapp-btn {
    padding: 14px;
    font-size: 15px;
  }
  
  .support-whatsapp-icon {
    font-size: 18px;
  }
}

/* =============================================================================
   FULLSCREEN SEARCH SCREEN
   ============================================================================= */

/* Экран поиска по посылкам удалён из приложения: элемента с таким id нет ни в
   разметке, ни в коде. Его стили оставались жить и держали СТАРУЮ анимацию —
   выезд снизу за 220мс с чужой кривой. Если экран когда-нибудь вернут под тем
   же id, он обязан приезжать справа, как все: translateX(100%) -> 0 с
   var(--neo-dur) и var(--neo-ease). */

/* Back button - icon only, compact and clean */
.search-screen-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #2f2f2f 0%, #333333 100%);
  border: 1.5px solid rgba(178, 254, 18, 0.2);
  color: var(--brand);
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.search-screen-back .back-arrow {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.1s ease;
}

.search-screen-back:focus {
  outline: 2px solid rgba(178, 254, 18, 0.6);
  outline-offset: 2px;
}

.search-screen-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #dcded1);
  margin: 0;
  flex: 1;
  letter-spacing: -0.2px;
}

/* Search Input Wrapper */
.search-screen-input-wrapper {
  padding: 16px;
  background: var(--bg, #262626);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.search-screen-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  background: var(--card, #2f2f2f);
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--ink, #dcded1);
  outline: none;
  transition: all 0.2s ease;
  font-weight: 500;
}

.search-screen-input::placeholder {
  color: var(--muted, #6b7280);
}

.search-screen-input:focus {
  border-color: rgba(178, 254, 18, 0.5);
  box-shadow: 0 0 0 4px rgba(178, 254, 18, 0.1);
  background: #323232;
}

/* Search Results */
.search-screen-results {
  padding: 16px;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

/* Search Result Card - compact and mobile-friendly */
.search-result-card {
  background: linear-gradient(135deg, #2f2f2f 0%, #2b2b2b 100%);
  border: 1px solid rgba(178, 254, 18, 0.1);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.search-result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.search-result-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.search-result-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #dcded1);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.3;
}

.search-result-divider {
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(178, 254, 18, 0.3) 0%, 
    rgba(178, 254, 18, 0.1) 50%, 
    transparent 100%);
  margin-bottom: 8px;
}

.search-result-track {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand, #b2fe12);
  font-family: 'Courier New', Monaco, monospace;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  opacity: 0.9;
}

.search-result-weight {
  font-size: 13px;
  color: var(--muted, #9ca3af);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Status badge in search results - text only, compact */
.search-result-card .status-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(178, 254, 18, 0.1);
  border: 1.5px solid rgba(178, 254, 18, 0.2);
  color: var(--brand, #b2fe12);
  min-width: fit-content;
  max-width: none;
}

.search-result-card .status-badge .badge-text {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1.2;
}

/* Badge variants */
.search-result-card .badge--pending {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

.search-result-card .badge--active {
  background: rgba(178, 254, 18, 0.1);
  border-color: rgba(178, 254, 18, 0.3);
  color: #b2fe12;
}

.search-result-card .badge--issued {
  background: rgba(107, 114, 128, 0.15);
  border-color: rgba(107, 114, 128, 0.3);
  color: #9ca3af;
}

/* Empty State */
.search-empty-state {
  text-align: center;
  padding: 80px 20px;
}

.search-empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.search-empty-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #dcded1);
  margin: 0 0 8px;
}

.search-empty-text {
  font-size: 15px;
  color: var(--muted, #6b7280);
  margin: 0;
}

/* =============================================================================
   ADD TRACK MODAL — Premium Design
   ============================================================================= */

.track-modal {
  max-width: 100%;
  width: 100%;
  background: rgba(30, 30, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px 20px 0 0;
  padding: 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  /* Bottom sheet positioning */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  margin: 0;
  height: auto;
  max-height: 85vh;
  overflow-y: auto;
  
  /* Prevent scroll jump */
  overscroll-behavior: contain;
  
  /* Initial state - hidden below screen */
  opacity: 0;
  transform: translateY(100%);
  
  /* Enable touch handling */
  touch-action: pan-y;
}

.track-modal[open] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--neo-dur) var(--neo-ease),
              transform var(--neo-dur) var(--neo-ease); /* единый стандарт */
}

.track-modal.closing {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--neo-dur) var(--neo-ease),
              transform var(--neo-dur) var(--neo-ease);
}

/* Drag indicator */
.track-modal-drag-indicator {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin: 8px auto 0;
  transition: background 0.2s ease;
}

.track-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
}

.track-modal[open]::backdrop {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.track-modal.closing::backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Modal Header */
.track-modal-header {
  position: sticky;
  top: 0;
  background: rgba(30, 30, 30, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.track-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 26px;
  font-weight: 700;
  color: #b2fe12;
  flex-shrink: 0;
  box-shadow: none;
}

.track-modal-icon img {
  filter: brightness(0) saturate(100%) invert(89%) sepia(19%) saturate(2095%) hue-rotate(26deg) brightness(107%) contrast(99%);
}

.track-modal-title {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink, #dcded1);
  margin: 0;
  letter-spacing: -0.3px;
}

.track-modal-close {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 32px;
  line-height: 1;
  color: #b2fe12;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  font-weight: 300;
}

/* Modal Form */
.track-modal-form {
  padding: 24px;
}

.track-modal-field {
  margin-bottom: 20px;
}

.track-modal-field:last-of-type {
  margin-bottom: 24px;
}

.track-modal-label {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #dcded1);
  margin-bottom: 10px;
}

.label-icon {
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-text {
  flex: 1;
}

.label-required {
  color: #ef4444;
  font-size: 16px;
  font-weight: 700;
}

.track-modal-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 500;
  background: #323232;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: var(--ink, #dcded1);
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.track-modal-input--code {
  font-family: 'Courier New', Monaco, monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.track-modal-input::placeholder {
  color: var(--muted, #6b7280);
  font-weight: 400;
}

.track-modal-input:focus {
  border-color: rgba(178, 254, 18, 0.5);
  box-shadow: 0 0 0 4px rgba(178, 254, 18, 0.12),
              inset 0 2px 4px rgba(0, 0, 0, 0.1);
  background: #2b2b2b;
}

/* Error State */
.track-modal-input.has-error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.track-modal-input.has-error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15),
              inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.field-error {
  display: none;
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid #ef4444;
  border-radius: 6px;
}

.field-error.show {
  display: block;
}

/* Hint Text */
.track-modal-hint {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #9ca3af);
  line-height: 1.5;
  padding: 10px 14px;
  background: rgba(178, 254, 18, 0.05);
  border-left: 3px solid rgba(178, 254, 18, 0.3);
  border-radius: 8px;
}

/* Modal Actions */
.track-modal-actions {
  display: flex;
  gap: 12px;
  padding-top: 8px;
}

.track-modal-btn {
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.2px;
}

.track-modal-btn--submit {
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.9) 0%, rgba(160, 224, 16, 0.9) 100%);
  border: none;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(178, 254, 18, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-icon {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* Mobile Adjustments - Compact modal for mobile */
@media (max-width: 768px) {
  .track-modal {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
  }
  
  .track-modal-header {
    padding: 8px 18px;
    gap: 10px;
    border-radius: 20px 20px 0 0;
  }
  
  .track-modal-icon {
    width: 46px;
    height: 46px;
    font-size: 22px;
    border-radius: 0;
  }
  
  .track-modal-title {
    font-size: 18px;
  }
  
  .track-modal-form {
    padding: 18px;
  }
  
  .track-modal-field {
    margin-bottom: 16px;
  }
  
  .track-modal-field:last-of-type {
    margin-bottom: 18px;
  }
  
  .track-modal-label {
    font-size: 13px;
    margin-bottom: 8px;
  }
  
  .label-icon {
    font-size: 15px;
  }
  
  .track-modal-input {
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 12px;
  }
  
  .track-modal-hint {
    font-size: 12px;
    padding: 8px 12px;
    margin-top: 8px;
  }
  
  .track-modal-actions {
    gap: 10px;
    padding-top: 4px;
  }
  
  .track-modal-btn {
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 12px;
  }
  
  .track-modal-btn--submit {
    font-size: 15px;
  }
}

/* =============================================================================
   PARCEL DETAILS MODAL (Bottom Sheet)
   ============================================================================= */

.parcel-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 20000; /* полка модалок: запасная шторка деталки лежала НИЖЕ экранов и была не видна */
  display: none;
  opacity: 0;
  transition: opacity 400ms ease-out;
  align-items: flex-end;
}

.parcel-modal-overlay.active {
  opacity: 1;
}

.parcel-modal-sheet {
  width: 100%;
  max-height: 50vh;
  background: #242424;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.9);
  transform: translateY(100%);
  transition: transform var(--neo-dur) var(--neo-ease); /* единый стандарт */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
  position: relative;
  z-index: 1;
  isolation: isolate;
  overscroll-behavior: contain;
}

.parcel-modal-overlay.active .parcel-modal-sheet {
  transform: translateY(0);
}

.parcel-modal-handle {
  width: 30px;
  height: 3px;
  background: var(--text-tertiary);
  border-radius: 2px;
  margin: 6px auto 0;
  opacity: 0.3;
}

.parcel-modal-fixed-content {
  flex-shrink: 0;
  padding: 10px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.parcel-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  /* min-height: 0 — иначе flex-элемент не станет ниже своего содержимого
     и прокрутка внутри не появится: список растянется, а обрежет его
     родитель. Тот же случай, что был в карточке филиала. */
  min-height: 0;
}

/* Header Wrapper */
.parcel-modal-header-wrapper {
  position: relative;
  margin: 0 -10px;
  padding: 0 10px 10px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* Header Title */
.parcel-modal-header-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.2;
  padding-top: 0;
}

.parcel-modal-close-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--accent-lime);
  border-radius: 4px;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  transition: transform 0.1s ease, opacity 0.1s ease;
  flex-shrink: 0;
  padding: 0;
  margin-top: -3px;
}

.parcel-modal-content::-webkit-scrollbar {
  width: 6px;
}

.parcel-modal-content::-webkit-scrollbar-thumb {
  background: rgba(178, 254, 18, 0.2);
  border-radius: 3px;
}

.parcel-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(178, 254, 18, 0.3);
}

/* Info Row */
.parcel-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 0;
  background: transparent;
  border-radius: 4px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.1s ease, opacity 0.1s ease;
  min-height: 34px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
}

.parcel-info-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  justify-content: center;
}

.parcel-info-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

.parcel-info-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  word-break: break-word;
  line-height: 1.3;
}

.parcel-info-value--mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}

.parcel-info-edit-input {
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--accent-lime);
  border-radius: 5px;
  padding: 4px 7px;
  outline: none;
  line-height: 1.3;
  transition: all 0.2s ease;
  height: 28px;
  box-sizing: border-box;
}

.parcel-info-edit-input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-lime);
  box-shadow: 0 0 0 2px rgba(178, 254, 18, 0.1);
}

.parcel-action-icon-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
}

.parcel-action-icon-btn svg {
  width: 16px;
  height: 16px;
}

.parcel-save-btn,
.parcel-cancel-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
  align-self: flex-end;
  margin-bottom: -20px;
}

.parcel-save-btn svg,
.parcel-cancel-btn svg {
  width: 18px;
  height: 18px;
}

.parcel-save-btn {
  background: rgba(178, 254, 18, 0.2);
  color: var(--accent-lime);
}

.parcel-cancel-btn {
  background: rgba(255, 100, 100, 0.2);
  color: rgb(255, 120, 120);
}

.parcel-action-buttons {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}

/* History Section */
.parcel-history-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 4px;
}

.parcel-history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 20px;
}

/* Timeline connector line */
.parcel-history-list::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border-default);
}

.parcel-history-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 5px 0;
  position: relative;
}

.parcel-history-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-default);
  flex-shrink: 0;
  margin-left: -20px;
  margin-top: 2px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.parcel-history-item.completed .parcel-history-dot {
  background: var(--accent-lime);
  border-color: var(--accent-lime);
}

.parcel-history-item.active .parcel-history-dot {
  background: var(--accent-lime);
  border-color: var(--accent-lime);
  box-shadow: 0 0 0 4px rgba(178, 254, 18, 0.15);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(178, 254, 18, 0.15);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(178, 254, 18, 0.1);
  }
}

.parcel-history-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.parcel-history-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.parcel-history-item.completed .parcel-history-status,
.parcel-history-item.active .parcel-history-status {
  color: var(--text-primary);
}

.parcel-history-item.active .parcel-history-status {
  color: var(--accent-lime);
}

.parcel-history-date {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* Mobile-specific modal styles */
@media (max-width: 768px) {
  .parcel-modal-sheet {
    max-height: 75vh !important;
    border-radius: 16px 16px 0 0 !important;
    overscroll-behavior: contain !important;
  }

  .parcel-modal-handle {
    width: 40px !important;
    height: 4px !important;
    margin: 12px auto !important;
    cursor: grab !important;
  }

  .parcel-modal-fixed-content {
    padding: 4px 12px 10px !important;
  }

  .parcel-modal-content {
    padding: 0 12px 14px !important;
  }

  .parcel-modal-header-wrapper {
    margin: 0 -12px !important;
    padding: 0 14px 14px !important;
    gap: 10px !important;
  }

  .parcel-modal-header-title {
    font-size: 16px !important;
  }

  .parcel-modal-close-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 30px !important;
    margin-top: -5px !important;
    touch-action: manipulation !important;
  }

  .parcel-info-row {
    min-height: 42px !important;
    padding: 6px 4px !important;
    gap: 8px !important;
    margin: 0 -4px !important;
    touch-action: manipulation !important;
  }

  .parcel-info-label {
    font-size: 11px !important;
  }

  .parcel-info-value {
    font-size: 14px !important;
  }

  .parcel-info-edit-input {
    font-size: 14px !important;
    height: 34px !important;
    padding: 6px 10px !important;
  }

  .parcel-action-icon-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    touch-action: manipulation !important;
  }

  .parcel-action-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
  }

  .parcel-save-btn,
  .parcel-cancel-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    touch-action: manipulation !important;
  }

  .parcel-action-buttons {
    gap: 6px !important;
    touch-action: manipulation !important;
  }

  .parcel-history-section {
    padding-top: 8px !important;
  }

  .parcel-history-list {
    padding-left: 24px !important;
  }

  .parcel-history-list::before {
    left: 7px !important;
    top: 8px !important;
    bottom: 8px !important;
  }

  .parcel-history-item {
    gap: 10px !important;
    padding: 8px 0 !important;
  }

  .parcel-history-dot {
    width: 14px !important;
    height: 14px !important;
    margin-left: -24px !important;
  }

  .parcel-history-info {
    gap: 3px !important;
  }

  .parcel-history-status {
    font-size: 14px !important;
  }

  .parcel-history-date {
    font-size: 12px !important;
  }

  /* Compact headers on mobile */
  .status-screen-header,
  .search-screen-header {
    padding: 10px 10px !important;
    min-height: 54px !important;
    gap: 8px !important;
  }

  .status-screen-header h2,
  .search-screen-title {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .status-screen-back,
  .search-screen-back {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
  }

  .status-screen-back .back-arrow,
  .search-screen-back .back-arrow {
    font-size: 18px !important;
  }

  /* Compact search result cards on mobile */
  .search-result-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .search-result-header {
    gap: 8px !important;
  }

  .search-result-title {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  .search-result-divider {
    margin-bottom: 6px !important;
  }

  .search-result-track {
    font-size: 13px !important;
    letter-spacing: 0.4px !important;
    font-weight: 600 !important;
  }

  .search-result-weight {
    font-size: 12px !important;
    margin-top: 6px !important;
    gap: 4px !important;
  }

  .search-result-card .status-badge {
    padding: 3px 6px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
  }

  .search-result-card .status-badge .badge-text {
    font-size: 9px !important;
    letter-spacing: 0.4px !important;
  }
}

/* =============================================================================
   PICKUP BONUS MODAL
   ============================================================================= */

.bonus-pay-modal {
  position: fixed;
  inset: 0;
  z-index: 20000; /* модалка поверх экранов */
  display: none;
  align-items: center;
  justify-content: center;
}

.bonus-pay-modal.active {
  display: flex;
}

.bonus-pay-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bonus-pay-card {
  position: relative;
  width: min(420px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.98), rgba(22, 22, 22, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 26px 28px 24px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.bonus-pay-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.bonus-pay-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.bonus-pay-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #b2fe12 0%, #a0e610 100%);
  color: #1a1a1a;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(178, 254, 18, 0.35);
}

.bonus-pay-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
}

.bonus-pay-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.bonus-pay-balance {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 18px;
}

.bonus-pay-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.bonus-pay-field label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.bonus-pay-issues {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bonus-pay-issue {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.bonus-pay-issue input[type="radio"] {
  accent-color: #b2fe12;
  width: 18px;
  height: 18px;
}

.bonus-pay-issue.active {
  border-color: rgba(178, 254, 18, 0.45);
  box-shadow: inset 0 0 0 1px rgba(178, 254, 18, 0.2);
  transform: translateY(-1px);
}

.bonus-pay-issue-code {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.bonus-pay-issue-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.bonus-pay-empty {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.bonus-pay-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.bonus-pay-input-row input {
  flex: 1;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-mono, 'Roboto Mono', 'SFMono-Regular', monospace);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bonus-pay-input-row input:focus {
  border-color: rgba(178, 254, 18, 0.45);
  box-shadow: 0 0 0 3px rgba(178, 254, 18, 0.15);
}

.bonus-pay-max-btn {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(178, 254, 18, 0.4);
  background: rgba(178, 254, 18, 0.08);
  color: rgba(178, 254, 18, 0.95);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.bonus-pay-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.bonus-pay-actions {
  display: flex;
  gap: 12px;
}

.bonus-pay-submit,
.bonus-pay-cancel {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.bonus-pay-submit {
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  color: #111;
  box-shadow: 0 10px 30px rgba(178, 254, 18, 0.3);
}

.bonus-pay-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.bonus-pay-cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 520px) {
  .bonus-pay-card {
    width: 94vw;
    padding: 22px 20px;
    border-radius: 18px;
  }

  .bonus-pay-header h2 {
    font-size: 18px;
  }

  .bonus-pay-input-row input {
    font-size: 15px;
  }

  .bonus-pay-actions {
    flex-direction: column;
  }
}

/* =============================================================================
   FULLSCREEN OVERLAYS - About Account, Change Name, Change Password
   ============================================================================= */

/* ==========================================
   .fullscreen-overlay — ТОЧНАЯ КОПИЯ паттерна #orders-status-screen
   Используем visibility + pointer-events, НИКОГДА display:none!
   display:none убивает CSS transitions — корень прыжков.
   ========================================== */
.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* bottom:0 у fixed-элемента на телефоне отсчитывается от низа ОКНА, а не
     от низа видимой области: низ экрана уходил под строку браузера. Явная
     высота в dvh переопределяет bottom и держит экран в видимом. */
  height: 100dvh;
  background: var(--bg);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* Начальное состояние — справа за экраном */
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  pointer-events: none;

  /* Плавное скольжение без fade — 280ms как iOS навигация */
  transition: transform var(--neo-dur) var(--neo-ease),
              visibility 0s var(--neo-dur);

  /* GPU ускорение */
  will-change: transform;
  backface-visibility: hidden;
}

/* Активное (открытое) состояние — как .active у status screen */
.fullscreen-overlay.active {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--neo-dur) var(--neo-ease),
              visibility 0s 0s;
}

/* Отключение transition при свайпе (drag) */
.fullscreen-overlay.no-transition {
  transition: none !important;
}

/* ==========================================
   Branch Guard — Fullscreen Mandatory Branch Picker
   Same visual as auth slide-branch in index.html
   ========================================== */
.branch-guard-forced {
  z-index: 10010 !important; /* above everything */
}
.branch-guard-forced.active {
  transform: translate3d(0, 0, 0);
}
.branch-guard-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.branch-guard-header {
  text-align: center;
  padding: 48px 20px 20px;
  flex-shrink: 0;
}
.branch-guard-title {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.branch-guard-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.5;
}

/* Tabs — same visual as auth-branch-tabs */
.branch-guard-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 8px;
  flex-shrink: 0;
}
.branch-guard-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.branch-guard-tab.active {
  background: rgba(178,254,18,0.12);
  border-color: rgba(178,254,18,0.35);
  color: #b2fe12;
  font-weight: 600;
}
.branch-guard-tab svg {
  opacity: 0.6;
  transition: opacity 0.2s;
}
.branch-guard-tab.active svg {
  opacity: 1;
  stroke: #b2fe12;
}

/* Tab content panels */
.branch-guard-tab-content {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.branch-guard-tab-content.active {
  display: flex;
}
.branch-guard-find-wrap {
  padding: 0 16px 8px;
  flex-shrink: 0;
}
.branch-guard-find-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(178,254,18,0.1);
  color: #b2fe12;
  border: 1px solid rgba(178,254,18,0.3);
  padding: 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s;
}
.branch-guard-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
  /* min-height: 0 — иначе flex-элемент не станет ниже своего содержимого
     и прокрутка внутри не появится: список растянется, а обрежет его
     родитель. Тот же случай, что был в карточке филиала. */
  min-height: 0;
}
.branch-guard-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.5);
  gap: 12px;
  font-size: 14px;
}
.branch-guard-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #b2fe12;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/* Branch guard items — same visual as auth-branch-item */
.branch-guard-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s;
  animation: branchGuardSlide 0.3s cubic-bezier(0.16,1,0.3,1) both;
}
.branch-guard-item:nth-child(1) { animation-delay: 0s; }
.branch-guard-item:nth-child(2) { animation-delay: 0.04s; }
.branch-guard-item:nth-child(3) { animation-delay: 0.08s; }
.branch-guard-item:nth-child(4) { animation-delay: 0.12s; }
.branch-guard-item:nth-child(5) { animation-delay: 0.16s; }
.branch-guard-item:nth-child(6) { animation-delay: 0.2s; }
@keyframes branchGuardSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.branch-guard-item.selected {
  border-color: rgba(178,254,18,0.5);
  background: rgba(178,254,18,0.06);
}
.branch-guard-item-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(178,254,18,0.12) 0%, rgba(178,254,18,0.04) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.branch-guard-item-icon img {
  width: 36px;
  height: 36px;
}
.branch-guard-item-body {
  flex: 1;
  min-width: 0;
}
.branch-guard-item-name {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
  word-wrap: break-word;
}
.branch-guard-item-code {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}
.branch-guard-item-dist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b2fe12;
  font-size: 12px;
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.branch-guard-check {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  color: #1a1a1a;
  transition: all 0.2s;
}
.branch-guard-item.selected .branch-guard-check {
  background: #b2fe12;
  border-color: #b2fe12;
}

/* --- Map tab --- */
.branch-guard-map-wrap {
  position: relative;
  flex: 1;
  margin: 0 12px 8px;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
}
.branch-guard-map-canvas {
  width: 100%;
  height: 100%;
  min-height: 50vh;
  background: rgba(30,30,30,0.95);
}
.branch-guard-map-controls {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.branch-guard-map-ctrl {
  width: 36px;
  height: 36px;
  background: rgba(38,38,38,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s;
  padding: 0;
}
.branch-guard-map-2gis {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 15;
  width: 36px;
  height: 36px;
  background: rgba(38,38,38,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s;
}
.branch-guard-map-2gis img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.branch-guard-footer {
  flex-shrink: 0;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.btn-primary-lime {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  border: none;
  color: #1a1a1a;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(178,254,18,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary-lime:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Branch guard: arrow indicator on items */
.branch-guard-arrow {
  color: rgba(255,255,255,0.25);
  font-size: 18px;
  flex-shrink: 0;
  cursor: pointer;
  padding: 4px;
}

/* Branch guard: detail modal — same as auth-branch-modal */
.guard-branch-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10020;
}
.guard-branch-modal.active {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.guard-branch-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: guardModalFadeIn 0.25s ease;
}
@keyframes guardModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.guard-branch-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  background: #242424;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: guardModalSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes guardModalSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.guard-bm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.guard-bm-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.guard-bm-close {
  width: 32px;
  height: 32px;
  border-radius: 24%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guard-bm-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* min-height: 0 — иначе flex-элемент не станет ниже своего содержимого
     и прокрутка внутри не появится: список растянется, а обрежет его
     родитель. Тот же случай, что был в карточке филиала. */
  min-height: 0;
}
.guard-bm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.guard-bm-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.guard-bm-icon {
  width: 36px;
  height: 36px;
  background: rgba(178,254,18,0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.guard-bm-icon .branch-info-svg {
  width: 36px;
  height: 36px;
}
.guard-bm-text {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
a.guard-bm-text {
  text-decoration: none;
  color: rgba(255,255,255,0.85);
}
.guard-bm-map {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(30,30,30,0.95);
  flex-shrink: 0;
}
.guard-bm-footer {
  padding: 14px 20px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Fullscreen Header */
/* ШАПКА ЭКРАНА СТОИТ, ЕДЕТ ТОЛЬКО СОДЕРЖИМОЕ.
   Четыре экрана — «Настройки», «Об аккаунте», «Изменить имя» и «Изменить
   пароль» — заворачивают шапку и тело в .fullscreen-content, а правила для
   этого класса в файле не было вовсе: обычный блок, высоту держал контент,
   и прокручивался весь оверлей вместе с шапкой. На остальных экранах шапка
   и тело лежат прямо в оверлее-колонке, поэтому там всё было правильно.
   Теперь .fullscreen-content — такая же колонка на всю высоту. */
.fullscreen-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.fullscreen-header {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2b2b2b 0%, #262626 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 56px;
  pointer-events: auto !important;
}

.fullscreen-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #2f2f2f 0%, #333333 100%);
  border: 1.5px solid rgba(178, 254, 18, 0.2);
  color: #b2fe12;
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  z-index: 10003; /* КРИТИЧНО: Выше header (10002) и overlay (10001)! */
  pointer-events: auto !important; /* КРИТИЧНО: Кнопка реагирует! */
}

.fullscreen-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
  flex: 1;
}

/* Fullscreen Body */
.fullscreen-body {
  flex: 1;
  overflow-y: auto; /* Скролл в body, НЕ в overlay */
  overflow-x: hidden;
  padding: 16px;
  padding-bottom: 100px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0; /* Позволяет flex работать правильно */
}

/* About Account Screen Specific Styles */
.about-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  color: #1a1a1a;
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(178, 254, 18, 0.3),
              inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.about-info-card {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(35, 35, 35, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.about-info-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  font-weight: 600;
}

.about-info-value {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  word-break: break-word;
}

.about-stats {
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.12) 0%, rgba(158, 224, 15, 0.08) 100%);
  border: 1px solid rgba(178, 254, 18, 0.2);
  border-radius: 16px;
  padding: 20px 16px;
}

.about-stats-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 16px;
  text-align: center;
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.about-stat-item {
  text-align: center;
}

.about-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #b2fe12;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(178, 254, 18, 0.4);
}

.about-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* About App Logo — экран "О приложении" */
.about-app-logo {
  width: 120px;
  height: 120px;
  background: rgba(178, 254, 18, 0.06);
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 5px;
  border: 2px solid rgba(178, 254, 18, 0.15);
  box-shadow: 0 8px 32px rgba(178, 254, 18, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  flex-shrink: 0;
}

.about-app-logo-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .about-app-logo {
    width: 100px;
    height: 100px;
    border-radius: 28px;
  }
  
  .about-app-logo-img {
    width: 100%px;
    height: 100%;
  }
}

/* Change Name Screen */
.change-name-current {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(35, 35, 35, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
}

.change-name-current-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  font-weight: 600;
}

.change-name-current-value {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.change-form-group {
  margin-bottom: 20px;
}

.change-form-label {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  font-weight: 500;
}

.change-form-input {
  width: 100%;
  background: rgba(30, 30, 30, 0.95);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
  transition: all 0.2s ease;
  outline: none;
}

.change-form-input:focus {
  border-color: rgba(178, 254, 18, 0.5);
  background: rgba(35, 35, 35, 0.95);
  box-shadow: 0 0 0 3px rgba(178, 254, 18, 0.1);
}

.change-form-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.change-form-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 6px;
}

.change-form-submit {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  color: #1a1a1a;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 20px rgba(178, 254, 18, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  margin-top: 24px;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .fullscreen-body {
    padding: 10px;
    padding-bottom: 85px;
  }

  .about-avatar {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .about-stat-value {
    font-size: 24px;
  }

  .fullscreen-header {
    padding: 10px 12px;
    min-height: 52px;
  }

  .fullscreen-title {
    font-size: 16px;
  }

  /* Адаптация блока китайского адреса для мобильных */
  .cn-address-modern-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  .cn-address-modern-card h3 {
    font-size: 16px !important;
  }

  #cn-address {
    font-size: 13px !important;
    padding: 0px !important;
    line-height: 1.7 !important;
  }

  #copy-cn-address {
    padding: 11px !important;
    font-size: 15px !important;
  }

  #copy-cn-address span:first-child {
    font-size: 14px !important;
  }

  #cn-address-help-btn {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  #cn-address-help-btn > div:first-child {
    width: 44px !important;
    height: 44px !important;
  }

  #cn-address-help-btn > div:first-child span {
    font-size: 22px !important;
  }

  #cn-address-help-btn > div:nth-child(2) > div:first-child {
    font-size: 14px !important;
  }

  #cn-address-help-btn > div:nth-child(2) > div:last-child {
    font-size: 11px !important;
  }
}

/* ============================================================================
   STATISTICS SCREEN
   ============================================================================ */

/* ============================================================================
   СТАТИСТИКА - ПОЛНОЭКРАННЫЙ РЕЖИМ
   ============================================================================ */

.statistics-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 10001 !important; /* общая полка экранов */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* ЕДИНЫЙ СТАНДАРТ ПЕРЕХОДА.
     Этот экран был последним, кто выезжал снизу вверх своей отдельной
     анимацией на 0.4с с чужой кривой. Теперь, как и все остальные, он
     приезжает справа, с общей длительностью и кривой приложения, а страница
     под ним уезжает влево. */
  transform: translateX(100%);
  transition: transform var(--neo-dur) var(--neo-ease);
  will-change: transform;
}

.statistics-fullscreen.open {
  transform: translateX(0);
}

.statistics-fullscreen.hidden {
  display: none !important;
}

/* ШАПКА И НАВБАР СТОЯТ НА МЕСТЕ.
   Раньше при открытии статистики, чата и ещё нескольких экранов они
   уезжали анимацией — вниз и вверх, — а при открытии остальных экранов
   просто оставались под ними. Человек ходит между экранами и видит, что
   приложение ведёт себя по-разному без всякой причины. Теперь везде
   одинаково: экран открывается поверх, шапка и навбар не двигаются. */

/* Блокируем скролл заднего фона - жесткий метод */
body.statistics-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

body.statistics-open .app-main,
body.statistics-open #profile-screen {
  overflow: hidden !important;
}

body.statistics-open .tab-bar-bottom {
  pointer-events: none !important;
}

body.statistics-open #profile-header-main,
body.statistics-open .app-header {
  pointer-events: none !important;
}

/* Header */
.statistics-header-fixed {
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
  padding: 16px 20px;
  z-index: 10;
  flex-shrink: 0;
}

.statistics-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.statistics-header-fixed h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

#statistics-period {
  font-size: 13px;
  color: var(--accent-primary);
  font-weight: 600;
}

#statistics-close {
  width: 40px;
  height: 40px;
  background: rgba(178, 254, 18, 0.1);
  border: 1px solid rgba(178, 254, 18, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  flex-shrink: 0;
}

/* Content wrapper - без скролла */
.statistics-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Main stats grid */
.stats-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 20px 0 20px;
}

.stat-card-main {
  background: linear-gradient(135deg, rgba(47, 47, 47, 0.9) 0%, rgba(42, 42, 42, 0.9) 100%);
  border: 1px solid rgba(178, 254, 18, 0.2);
  border-radius: 16px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.stat-card-main::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(178, 254, 18, 0.1) 0%, transparent 70%);
}

.stat-card-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
  font-weight: 600;
}

.stat-card-value {
  font-size: 32px;
  font-weight: 700;
  color: #b2fe12;
  line-height: 1;
}

.stat-card-value-with-unit {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stat-card-unit {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

/* Status section */
.stat-status-section {
  background: linear-gradient(135deg, rgba(47, 47, 47, 0.9) 0%, rgba(42, 42, 42, 0.9) 100%);
  border: 1px solid rgba(178, 254, 18, 0.15);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.stat-status-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 16px;
}

.stat-status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-status-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.stat-status-dot.lime {
  background: #b2fe12;
  box-shadow: 0 0 8px rgba(178, 254, 18, 0.6);
}

.stat-status-dot.blue {
  background: #60a5fa;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
}

.stat-status-dot.orange {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.stat-status-dot.emerald {
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

.stat-status-dot.green {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.stat-status-label span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.stat-status-value {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

/* Additional info grid */
.stats-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.stat-card-small {
  background: linear-gradient(135deg, rgba(47, 47, 47, 0.9) 0%, rgba(42, 42, 42, 0.9) 100%);
  border: 1px solid rgba(178, 254, 18, 0.15);
  border-radius: 14px;
  padding: 16px;
}

.stat-card-small-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}

.stat-card-small-value {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.stat-card-small-value-with-unit {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.stat-card-small-unit {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* Список посылок */
.statistics-parcels-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 20px 0 20px;
}

.statistics-parcels-section h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 14px 0;
  flex-shrink: 0;
}

/* Информационное напоминание */
.statistics-info-note {
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.08) 0%, rgba(178, 254, 18, 0.05) 100%);
  border-left: 3px solid rgba(178, 254, 18, 0.6);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 20px 20px 0px 20px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.statistics-parcels-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 100px;
  /* min-height: 0 — иначе flex-элемент не станет ниже своего содержимого
     и прокрутка внутри не появится: список растянется, а обрежет его
     родитель. Тот же случай, что был в карточке филиала. */
  min-height: 0;
}

.statistics-parcel-item {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: default;
  transition: none;
}

.statistics-parcel-track {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
  margin-bottom: 4px;
}

.statistics-parcel-title {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.statistics-parcel-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 500;
}

.statistics-parcel-date {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Skeleton loader */
.skeleton-parcel-item {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 14px;
}

.skeleton-line {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Screen-level skeleton layouts */
.branch-screen-skeleton {
  padding: 12px 20px 120px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.branch-skeleton-pane {
  display: none;
}

.branch-skeleton-pane.active {
  display: block;
}

.branch-skeleton-pane[data-branch-skeleton-pane="my-branch"] {
  padding-top: 8px;
}

.branch-skeleton-pane[data-branch-skeleton-pane="all-branches"] {
  padding-bottom: 12px;
}

.branch-skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.branch-skeleton-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}

.branch-skeleton-map {
  height: 160px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.branch-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.branch-skeleton-list-item {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 14px 16px;
}

.statistics-skeleton {
  padding: 20px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.statistics-skeleton-metrics {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 18px;
}

.statistics-skeleton-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.statistics-skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 16px;
}

.statistics-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.statistics-skeleton-list-item {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 16px;
}

.statistics-skeleton-list-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* Sprint 125: Pickup Screen Skeleton — matches real layout */
.pickup-screen-skeleton {
  padding: 20px 0 110px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pickup-skeleton-qr {
  display: flex;
  justify-content: center;
}

.pickup-skeleton-qr-box {
  width: 220px;
  height: 220px;
  border-radius: 18px;
}

.pickup-skeleton-tabs {
  display: flex;
  gap: 8px;
  padding: 0 4px;
}

.pickup-skeleton-tab {
  flex: 1;
  height: 42px;
  border-radius: 12px;
}

.pickup-skeleton-stats {
  display: flex;
  gap: 12px;
}

.pickup-skeleton-stat-box {
  flex: 1;
  height: 72px;
  border-radius: 14px;
}

.pickup-skeleton-total {
  height: 72px;
  border-radius: 14px;
  width: 100%;
}

.pickup-skeleton-cta {
  height: 54px;
  border-radius: 14px;
  width: 100%;
}

/* ===== PICKUP SUCCESS OVERLAY ===== */
.pickup-success-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pickupSuccessFadeIn 0.4s ease forwards;
}

.pickup-success-content {
  text-align: center;
  animation: pickupSuccessScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pickup-success-check {
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
}

.pickup-success-svg {
  width: 100%;
  height: 100%;
}

.pickup-success-circle {
  stroke: #b2fe12;
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: pickupCircleDraw 0.6s 0.2s ease forwards;
}

.pickup-success-tick {
  stroke: #b2fe12;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: pickupTickDraw 0.4s 0.7s ease forwards;
}

.pickup-success-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, rgba(255,255,255,0.95));
  margin-bottom: 8px;
}

.pickup-success-subtitle {
  font-size: 14px;
  color: var(--text-secondary, rgba(255,255,255,0.5));
  font-weight: 500;
}

@keyframes pickupSuccessFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pickupSuccessScale {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pickupCircleDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes pickupTickDraw {
  to { stroke-dashoffset: 0; }
}

.pickup-success-overlay.fading-out {
  animation: pickupSuccessFadeOut 0.6s ease forwards;
}

@keyframes pickupSuccessFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.about-account-skeleton {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.about-skeleton-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  margin: 0 auto;
}

.about-skeleton-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 18px;
}

.about-skeleton-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.about-skeleton-stats {
  background: linear-gradient(135deg, rgba(178,254,18,0.12) 0%, rgba(178,254,18,0.04) 100%);
  border: 1px solid rgba(178,254,18,0.25);
  border-radius: 14px;
  padding: 16px;
}

.about-skeleton-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.about-account-content.hidden,
.branch-screen-content.hidden,
#statistics-loaded-content.hidden,
#pickup-screen-content.hidden {
  display: none !important;
}

/* =============================================================================
   PICKUP TABS — Sprint 1 Online Payment
   ============================================================================= */
.pickup-tabs-wrapper {
  margin: 16px 0 10px;
}

.pickup-tabs {
  display: flex;
  position: relative;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 3px;
}

.pickup-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  transition: color 0.25s ease;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.pickup-tab.active {
  color: #1a1a1a;
}

.pickup-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  font-variant-numeric: tabular-nums;
  transition: all 0.25s ease;
}

.pickup-tab.active .pickup-tab-badge {
  background: rgba(0,0,0,0.15);
  color: #1a1a1a;
}

.pickup-tab-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: #b2fe12;
  border-radius: 10px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  box-shadow: 0 2px 8px rgba(178,254,18,0.3);
}

/* =============================================================================
   Sprint 113: Wide animated pay button inside ready status unpaid panel
   ========================================================================== */
.ready-pay-btn-wrap {
  padding: 16px 0 8px;
  display: flex;
  justify-content: center;
}
.ready-pay-btn {
  width: 100%;
  padding: 15px 24px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(178,254,18,0.35), 0 2px 8px rgba(0,0,0,0.25);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.02em;
}
.ready-pay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(178,254,18,0.45), 0 4px 12px rgba(0,0,0,0.3);
}

/* =============================================================================
   Sprint 116/122: Isolated layout for "Готово к выдаче" tabbed screen
   ========================================================================== */
#status-list-ready {
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
  min-height: 0 !important; /* Sprint 122: CRITICAL for overflow-y to work in flex child */
  height: 100%;
  overflow: hidden !important;
  padding: 0 !important;
  gap: 0 !important;
}
#status-list-ready .pickup-tabs-wrapper {
  flex-shrink: 0;
  padding: 0px 12px 0 12px !important;
}
#status-list-ready .pickup-panels-viewport {
  flex: 1;
  min-height: 0 !important; /* Sprint 122: CRITICAL for overflow-y to work in flex child */
  overflow: hidden;
  height: 100%;
}
/* Sprint 122: Slider must constraint children height */
#status-list-ready .pickup-panels-slider {
  display: flex;
  height: 100%;
  align-items: stretch;
}
/* Возвращаем родные отступы внутрь независимых списков */
#ready-paid-list, #ready-unpaid-list {
  flex: 0 0 50%; /* Sprint 122: Each panel = 50% of slider = 100% of viewport */
  width: 50%;
  height: 100%;
  max-height: 100% !important; /* Sprint 122: Hard height cap to trigger overflow */
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 10px 20px 10px !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
/* Карточки в панелях выдачи: целимся в ПРЯМЫХ детей (класс .parcel-compact-card,
   а не .parcel-card!) и запрещаем сжатие — иначе flex-колонка расплющивает их
   по высоте (22px вместо 88px) при большом числе посылок, и список не скроллится. */
#ready-paid-list > *, #ready-unpaid-list > * {
  flex-shrink: 0 !important;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}

/* =============================================================================
   Sprint 13: Native Swipe Panels
   ============================================================================= */
.pickup-panels-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.pickup-panels-slider {
  display: flex;
  width: 200%; /* Two panels side by side */
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.pickup-panels-slider.swiping {
  transition: none !important; /* Disable transition during drag */
}

/* Sprint 14: Sync indicator — disable transition during drag */
.pickup-tab-indicator.swiping {
  transition: none !important;
}

.pickup-tab-panel {
  width: 50%; /* Each panel takes half of slider (= 100% of viewport) */
  flex-shrink: 0;
  display: block !important; /* Always visible for swipe */
  padding: 0 2px; /* Small padding to prevent edge bleeding */
  box-sizing: border-box;
}

/* Remove old animation since we use transform now */
.pickup-tab-panel.active {
  /* Active state managed by JS transform, not CSS */
}

@keyframes pickupTabFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =============================================================================
   Sprint 13: Brand Accent Variable + Grid Summary
   ============================================================================= */
:root {
  --brand-accent: #b2fe12; /* Deep professional green */
  --brand-accent-hover: #b2fe12;
  --brand-accent-light: #b2fe1212;
}

/* Sprint 13: Compact 2x2 Grid Summary — Sprint 14: Asymmetric 3-item layout */
.pickup-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.summary-cell {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Sprint 14: Hero cell — large count emphasis for "Готово" tab */
.summary-cell-hero {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.summary-value-hero {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Full-width bottom row cell */
.summary-cell-wide {
  grid-column: 1 / -1;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-cell-accent-green {
  background: rgba(74, 222, 128, 0.06);
}

.summary-cell-accent-red {
  background: rgba(248, 113, 113, 0.06);
}

.summary-cell-muted {
  background: rgba(255,255,255,0.03);
}

.summary-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.summary-value {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums;
}

.summary-value-green {
  color: #4ade80;
}

/* Sprint 14: Muted green for "Готово" tab (don't scream about money) */
.summary-value-green-muted {
  color: rgba(74, 222, 128, 0.6);
  font-size: 15px;
  font-weight: 600;
}

.summary-value-red {
  color: #f87171;
}

/* Main pay CTA button — Sprint 13: FLAT, brand accent */
.pickup-btn-kaspi {
  width: 100%;
  padding: 14px;
  background: var(--brand-accent);
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pickup-btn-kaspi:hover {
  background: var(--brand-accent-hover);
}

.pickup-btn-kaspi:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Other bank button */
.pickup-btn-other-bank {
  width: 100%;
  padding: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pickup-btn-other-bank:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

@media (max-width: 480px) {
  .pickup-tab {
    font-size: 12px;
    padding: 9px 5px;
    gap: 5px;
  }
  .pickup-tab-badge {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    padding: 0 5px;
  }
  .pickup-btn-kaspi,
  .pickup-btn-other-bank {
    padding: 12px;
    font-size: 14px;
  }
}

/* =============================================================================
   BANK SELECTION MODAL (Sprint 11)
   ============================================================================= */
/* Sprint 19: Bank select modal — native bottom sheet animations */
.bank-select-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: 85vh;
  max-width: 400px;
  width: 90%;
  padding: 0;
  background: linear-gradient(180deg, #222 0%, #1a1a1a 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  z-index: 20000; /* модалка поверх экранов */
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bank-select-modal[open] {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.bank-select-modal.closing {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bank-select-modal::backdrop {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bank-select-content {
  padding: 24px 20px;
}
.bank-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.bank-select-title {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  margin: 0;
}
.bank-select-close {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.bank-select-close:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}
.bank-select-hint {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin: 0 0 18px;
  line-height: 1.4;
}
.bank-select-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bank-select-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bank-select-option:hover {
  background: rgba(255,255,255,0.06);
}
.bank-option-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
.bank-option-name {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
/* Sprint 12: Radio button indicator */
.bank-option-radio {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  position: relative;
  transition: all 0.2s ease;
}
.bank-option-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--brand-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
}
.bank-select-option.active {
  background: var(--brand-accent-light);
  border-color: var(--brand-accent);
}
.bank-select-option.active .bank-option-radio {
  border-color: var(--brand-accent);
}
.bank-select-option.active .bank-option-radio::after {
  transform: translate(-50%, -50%) scale(1);
}
/* Sprint 12: Continue button */
.bank-select-continue {
  width: 100%;
  padding: 14px 20px;
  margin-top: 16px;
  background: var(--brand-accent);
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  box-shadow: none !important;
}
.bank-select-continue:disabled {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35);
  cursor: not-allowed;
}
.bank-select-continue:not(:disabled):hover {
  background: var(--brand-accent-hover);
}

/* =============================================================================
   PAYMENT METHOD BOTTOM SHEET — Sprint 19: Native slide animations
   ============================================================================= */
/* Sprint 70: Changed from display:none to visibility+pointer-events for smooth slide-up animation */
.payment-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000; /* полка модалок; !important убран — он делал слой неперебиваемым */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}
.payment-sheet-overlay.open {
  visibility: visible;
  pointer-events: auto;
}

.payment-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.payment-sheet-overlay.open .payment-sheet-backdrop {
  opacity: 1;
}
.payment-sheet-overlay.closing .payment-sheet-backdrop {
  opacity: 0;
}

.payment-sheet-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, #2b2b2b 0%, #222 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 12px 20px 24px;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.payment-sheet-overlay.open .payment-sheet-container {
  transform: translateY(0);
}
.payment-sheet-overlay.closing .payment-sheet-container {
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
}

.payment-sheet-handle {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 0 auto 16px;
}

/* Sprint 19: Removed old keyframes — using CSS transitions now */

/* Payment Method Option */
.payment-method-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  color: inherit;
  min-height: 44px;
}

.payment-method-option:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.payment-method-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-method-text {
  flex: 1;
  min-width: 0;
}

.payment-method-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-method-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.3;
}

@media (max-width: 480px) {
  .payment-sheet-container {
    padding: 10px 16px 20px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }
  .payment-method-option {
    padding: 12px;
    gap: 12px;
  }
  .payment-method-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  .payment-method-title {
    font-size: 14px;
  }
  .payment-method-hint {
    font-size: 11px;
  }
}

/* Mobile responsive */
@media (max-width: 480px) {
  #statistics-panel {
    max-width: 100%;
  }

  .statistics-header {
    padding: 14px 16px;
  }

  .statistics-header h2 {
    font-size: 20px;
  }

  .statistics-content {
    padding: 16px;
  }

  .stats-main-grid {
    gap: 12px;
  }

  .stat-card-main {
    padding: 16px;
  }

  .stat-card-value {
    font-size: 28px;
  }

  .stats-info-grid {
    gap: 12px;
  }
}

/* ============================================================================
   PROFILE FEATURE CARDS
   ============================================================================ */

.profile-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.profile-feature-card {
  background: linear-gradient(135deg, rgba(47, 47, 47, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
  border: 1px solid rgba(178, 254, 18, 0.15);
  border-radius: 16px;
  padding: 18px 16px;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.feature-card-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(178, 254, 18, 0.08) 0%, transparent 70%);
}

.feature-card-icon-container {
  width: 52px;
  height: 52px;
  background: rgba(178, 254, 18, 0.12);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.feature-card-icon-container.feature-card-icon-no-bg {
  background: transparent;
  box-shadow: none;
}

.feature-card-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.feature-card-icon-img {
  width: 70px;
  height: 70px;
}

.feature-card-content {
  flex: 1;
}

.feature-card-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 4px;
}

.feature-card-description {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

.feature-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(178, 254, 18, 0.2);
  border: 1px solid rgba(178, 254, 18, 0.3);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  color: #b2fe12;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mobile adaptation for profile feature cards */
@media (max-width: 768px) {
  .profile-features-grid {
    gap: 10px;
  }

  .profile-feature-card {
    padding: 16px 14px;
    border-radius: 14px;
  }

  .feature-card-icon-container {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    border-radius: 12px;
  }

  .feature-card-icon {
    font-size: 26px;
  }

  .feature-card-title {
    font-size: 14px;
  }

  .feature-card-description {
    font-size: 10px;
  }

  .feature-card-badge {
    padding: 2px 7px;
    font-size: 8px;
  }
}

@media (max-width: 480px) {
  .profile-features-grid {
    gap: 8px;
    margin-bottom: 14px;
  }

  .profile-feature-card {
    padding: 14px 12px;
    border-radius: 12px;
  }

  .feature-card-accent {
    width: 50px;
    height: 50px;
  }

  .feature-card-icon-container {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    border-radius: 10px;
  }

  .feature-card-icon {
    font-size: 25px;
  }

  .feature-card-title {
    font-size: 16px;
    margin-bottom: 3px;
  }

  .feature-card-description {
    font-size: 11px;
    line-height: 1.3;
  }

  .feature-card-badge {
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    font-size: 7px;
    border-radius: 6px;
  }
}

/* Notifications Screen */
.notifications-container {
  padding: 0px;
  padding-bottom: 100px;
}

.notifications-header {
  margin-bottom: 20px;
}

.notifications-header h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--text-primary);
}

.notifications-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.notif-tab {
  padding: 8px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.notif-tab.active {
  background: var(--accent-lime);
  color: #1a1a1a;
  border-color: var(--accent-lime);
}

.app-update-card {
  background: linear-gradient(135deg, rgba(40, 168, 234, 0.15) 0%, rgba(40, 168, 234, 0.05) 100%);
  border: 1px solid rgba(40, 168, 234, 0.3);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  min-height: 82px; /* Fixed height to prevent jumping */
  box-sizing: border-box;
}

.app-update-card {
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.15) 0%, rgba(178, 254, 18, 0.05) 100%);
  border-color: rgba(178, 254, 18, 0.3);
}

.app-update-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-update-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* Prevent flex overflow */
}

.app-update-info h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  word-break: break-word;
}

.app-update-info p {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  word-break: break-word;
}

.app-update-btn {
  padding: 0 16px;
  height: 36px;
  background: #28a8ea;
  color: white;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.app-update-btn {
  background: var(--accent-lime);
  color: #1a1a1a;
}

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

.notif-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 16px;
  position: relative;
  transition: all 0.2s ease;
}

.notif-card.unread {
  border-left: 3px solid var(--accent-lime);
  background: linear-gradient(90deg, rgba(178, 254, 18, 0.03) 0%, var(--bg-card) 100%);
}

.notif-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.notif-category {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
}

.notif-time {
  font-size: 11px;
  color: var(--text-tertiary);
}

.notif-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.notif-message {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Header Badge */
.header-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
}

.header-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff3b30;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #262626;
}







/* Notifications Redesign */
.notif-categories-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notif-category-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notif-cat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.notif-cat-content {
  flex: 1;
  min-width: 0;
}

.notif-cat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.notif-cat-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.notif-cat-date {
  font-size: 11px;
  color: var(--text-tertiary);
}

.notif-cat-preview {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-cat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-badge {
  background: var(--accent-lime);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.notif-chevron {
  color: var(--text-tertiary);
  font-size: 18px;
  font-weight: 600;
}

/* Detail Screen */
.notif-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}

.notif-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#notif-detail-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.notif-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notif-date-divider {
  text-align: center;
  margin: 8px 0;
}

.notif-date-chip {
  background: rgba(255,255,255,0.1);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
}

.notif-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 16px;
  position: relative;
}

.notif-bubble-time {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: right;
  margin-top: 8px;
}


/* ============================================
   MESSAGES SECTION - Messenger Style
   ============================================ */

/* Container */
.messages-container {
  position: relative;
}

/* Inbox Screen */
.messages-inbox {
  padding: 0px 0px 100px;
  animation: msgFadeIn 0.3s ease;
}

.messages-header {
  margin-bottom: 20px;
}

.messages-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.5px;
}

/* ==== Messages Skeleton Loader ==== */
.messages-skeleton {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-default);
}

.messages-skeleton.hidden {
  display: none;
}

.msg-skeleton-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: transparent;
}

.msg-skeleton-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-card) 50%, var(--bg-muted) 100%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.msg-skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg-skeleton-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-card) 50%, var(--bg-muted) 100%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

.msg-skeleton-line--title {
  width: 40%;
}

.msg-skeleton-line--text {
  width: 70%;
  height: 12px;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Dialogs List */
.messages-dialogs-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-default);
}

.messages-dialogs-list.hidden {
  display: none;
}

/* Single Dialog Item */
.msg-dialog-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
  width: 100%;
  position: relative;
}

.msg-dialog-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 76px;
  right: 16px;
  height: 1px;
  background: var(--border-default);
}

@media (hover: hover) {
  .msg-dialog-item:hover {
    background: rgba(255,255,255,0.03);
  }
}

/* Dialog Avatar */
.msg-dialog-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Dialog Content */
.msg-dialog-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msg-dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.msg-dialog-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.msg-dialog-time {
  font-size: 13px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.msg-dialog-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.msg-dialog-preview {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.msg-dialog-badge {
  background: var(--accent-lime);
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  flex-shrink: 0;
}

/* Has unread indicator */
.msg-dialog-item.has-unread .msg-dialog-name {
  color: var(--text-primary);
}

.msg-dialog-item.has-unread .msg-dialog-preview {
  color: var(--text-primary);
  font-weight: 500;
}

.msg-dialog-item.has-unread .msg-dialog-time {
  color: var(--accent-lime);
  font-weight: 600;
}

/* ============================================
   CHAT SCREEN - Full Screen Slide
   ============================================ */

.messages-chat-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Явная высота, а не один bottom:0 — на телефоне низ окна и низ видимой
     области не совпадают, тот же приём, что у .fullscreen-overlay. */
  height: 100dvh;
  background: var(--bg-primary);
  z-index: 10001; /* общая полка экранов */
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden; /* КРИТИЧНО: Не рендерить когда закрыт */
  transition: transform var(--neo-dur) var(--neo-ease), visibility 0s var(--neo-dur);
  will-change: transform;
  touch-action: pan-x pan-y;
  overflow: hidden;
  /* БЕЗ внешней тени - используем внутренний градиент */
  box-shadow: none;
}

/* Внутренняя тень слева - не вылезает за пределы панели */




.messages-chat-screen.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--neo-dur) var(--neo-ease), visibility 0s 0s;
}

.messages-chat-screen.dragging {
  transition: none;
}

/* No overlay - chat slides cleanly over inbox */

/* Hide navbar and lock scroll when chat is open */
body.chat-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
}

body.chat-open .tab-bar-bottom {
  pointer-events: none !important;
}

/* Chat Header */
.msg-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  padding-top: max(12px, env(safe-area-inset-top));
}

.msg-chat-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--accent-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.msg-chat-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.msg-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #28a8ea 0%, #1e90d6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.msg-chat-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.msg-chat-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-chat-subtitle {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Version Block (Updates Category) */
.msg-version-block {
  padding: 16px;
  flex-shrink: 0;
}

.msg-version-content {
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.08) 0%, rgba(178, 254, 18, 0.02) 100%);
  border: 1px solid rgba(178, 254, 18, 0.15);
  border-radius: 16px;
  padding: 16px;
}

.msg-version-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.msg-version-row:not(:last-of-type) {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.msg-version-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.msg-version-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}

.msg-version-new {
  color: var(--accent-lime);
}

.msg-version-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  margin-top: 8px;
  background: rgba(39, 174, 96, 0.1);
  border-radius: 10px;
}

.msg-version-status.needs-update {
  background: rgba(178, 254, 18, 0.1);
}

.msg-status-icon {
  font-size: 16px;
}

.msg-status-text {
  font-size: 14px;
  font-weight: 500;
  color: #27ae60;
}

.msg-version-status.needs-update .msg-status-text {
  color: var(--accent-lime);
}

.msg-update-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  background: var(--accent-lime);
  color: #1a1a1a;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Chat Body */
.msg-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  /* iOS Safari: Extra padding for bottom toolbar + safe area */
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 20px));
  /* Когда переписка короче экрана, прокручивать тут нечего — и жест уходил
     наверх, во вкладку под экраном. Останавливаем цепочку на себе. */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  /* min-height: 0 — иначе flex-элемент не станет ниже своего содержимого
     и прокрутка внутри не появится: список растянется, а обрежет его
     родитель. Тот же случай, что был в карточке филиала. */
  min-height: 0;
}

.msg-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* Date Divider */
.msg-date-divider {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

.msg-date-chip {
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 16px;
}

/* Message Bubble */
.msg-bubble {
  display: flex;
  gap: 10px;
  max-width: 85%;
  animation: msgBubbleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.msg-bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  align-self: flex-end;
}

.msg-bubble-content {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  padding: 12px 14px;
  position: relative;
}

.msg-bubble.unread .msg-bubble-content {
  border-color: rgba(178, 254, 18, 0.3);
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.05) 0%, var(--bg-card) 100%);
}

.msg-bubble-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.msg-unread-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-lime);
  border-radius: 50%;
  flex-shrink: 0;
}

.msg-bubble-text {
  font-size: 15px;
  color: rgb(220 222 209 / 85%);
  line-height: 1.5;
  margin: 0;
  word-wrap: break-word;
  font-weight: 500
}

/* =============================================================================
   БОНУСНЫЕ СООБЩЕНИЯ (БАНКОВСКИЙ СТИЛЬ)
============================================================================= */

.bonus-bubble .msg-bubble-text {
  padding: 0;
}

.bonus-msg-operation {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 10px;
}

.bonus-msg-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.15) 80%,
    transparent 100%
  );
  margin: 0 -4px;
}

.bonus-msg-balance {
  font-size: 15px;
  color: rgb(220 222 209 / 68%);
  padding-top: 10px;
}

/* Позитивные/негативные суммы в бонусах */
.bonus-msg-operation:has(+) {
  /* Для пополнений можно добавить зелёный цвет если нужно */
}

.msg-bubble-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 12px 8px 0;
  padding: 10px 16px;
  background: rgba(178, 254, 18, 0.12);
  color: var(--accent-lime);
  border: 1px solid rgba(178, 254, 18, 0.25);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.msg-bubble-time {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
  text-align: right;
}

/* Empty State */
.msg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.msg-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-empty-icon .material-symbols-rounded {
  font-size: 48px;
  color: var(--text-secondary);
}

.msg-empty-text {
  font-size: 15px;
  color: var(--text-tertiary);
  margin: 0;
}

/* Animations */
@keyframes msgFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes msgBubbleIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes msgSlideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes msgSlideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* Mobile Optimizations */
@media (max-width: 480px) {
  .messages-title {
    font-size: 24px;
  }
  
  .msg-dialog-avatar {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  .msg-dialog-item:not(:last-child)::after {
    left: 70px;
  }
  
  .msg-dialog-name {
    font-size: 15px;
  }
  
  .msg-dialog-preview {
    font-size: 13px;
  }
  
  .msg-bubble {
    max-width: 90%;
  }
}

/* =============================================================================
   SWITCH TOGGLE (Переключатель)
============================================================================= */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  transition: background-color 0.25s ease;
}

.switch-slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.switch-toggle input:checked + .switch-slider {
  background-color: #b2fe12;
}

.switch-toggle input:checked + .switch-slider::before {
  transform: translateX(24px);
}

.switch-toggle input:focus + .switch-slider {
  box-shadow: 0 0 0 3px rgba(178, 254, 18, 0.3);
}

.switch-toggle input:disabled + .switch-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================================================================
   COURIER PIN MODAL STYLES
   ============================================================================= */

/* Кнопка-ссылка под QR */
.courier-trigger-wrapper { 
  margin-top: 0px; 
  display: flex;
  justify-content: center;
}

/* Компактная кнопка для курьера */
.btn-courier-compact {
  background: linear-gradient(135deg, rgb(178 254 18 / 27%) 0%, rgb(178 254 18 / 23%) 100%);
  border: 1px solid rgb(178 254 18 / 49%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-courier-compact svg {
  color: #b2fe12;
  filter: drop-shadow(0 0 4px rgba(178, 254, 18, 0.4));
}

.btn-courier-compact:hover {
  background: linear-gradient(135deg, rgba(178, 254, 18, 0.18) 0%, rgba(178, 254, 18, 0.1) 100%);
  border-color: rgba(178, 254, 18, 0.4);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(178, 254, 18, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Legacy btn-text-icon support */
.btn-text-icon {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  padding: 12px 20px; 
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-text-icon:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

.btn-text-icon .material-symbols-rounded {
  font-size: 18px;
  color: var(--accent-lime);
}

/* Loader spinner for button */
.loader-spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--accent-lime);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Дисплей PIN кода */
.pin-display-box {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 16px; 
  padding: 24px; 
  margin: 20px 0;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

.pin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 18px;
}

.pin-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.pin-value-sm { 
  font-weight: 700; 
  font-size: 18px;
  color: #fff;
  font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace;
}

.pin-big-row {
  text-align: center;
  padding: 12px 0;
}

.pin-value-xl {
  font-size: 48px; 
  font-weight: 800; 
  letter-spacing: 10px;
  color: #ccff00;
  font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace;
  text-shadow: 0 0 20px rgba(204, 255, 0, 0.4);
}

.pin-validity { 
  font-size: 12px; 
  color: rgba(255,255,255,0.4); 
  margin-top: 14px;
  text-align: center;
}

/* Compact modal variant */
.modal-content.compact-modal {
  max-width: 360px;
}

.modal-content.compact-modal .modal-header {
  padding: 18px 24px;
}

.modal-content.compact-modal .modal-body {
  padding: 0 24px 28px;
}

.modal-content.compact-modal .modal-header h3 {
  font-size: 18px;
}

/* ============================================================================= */
/* COURIER PIN MODAL - Compact Centered Design                                  */
/* ============================================================================= */

.courier-pin-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.courier-pin-modal.active {
  display: flex !important;
}

/* Backdrop with animation */
.courier-pin-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.courier-pin-modal.active .courier-pin-backdrop {
  opacity: 1;
}

/* Card - Centered Compact */
.courier-pin-card {
  position: relative;
  background: rgba(30, 30, 30, 0.98);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 340px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.courier-pin-modal.active .courier-pin-card {
  transform: scale(1);
  opacity: 1;
}

/* Header - Centered */
.courier-pin-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.courier-pin-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b2fe12;
  filter: drop-shadow(0 0 6px rgba(178, 254, 18, 0.3));
}

.courier-pin-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  text-align: center;
}

/* Body */
.courier-pin-body {
  padding: 18px 18px;
}

.courier-pin-hint {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 16px;
}

/* Info Box */
.courier-pin-info {
  background: rgba(47, 47, 47, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.courier-pin-id-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.courier-pin-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.courier-pin-id-value {
  font-size: 16px;
  font-weight: 700;
  color: #b2fe12;
}

.courier-pin-code-row {
  padding: 6px 0 14px;
}

.courier-pin-code {
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 10px;
  color: #b2fe12;
  text-shadow: 0 0 24px rgba(178, 254, 18, 0.35);
}

.courier-pin-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

/* Footer */
.courier-pin-footer {
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.courier-pin-btn {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.courier-pin-btn-copy {
  background: linear-gradient(135deg, #b2fe12 0%, #a0e610 100%);
  color: #1a1a1a;
  box-shadow: 0 3px 12px rgba(178, 254, 18, 0.3);
}

.courier-pin-btn-copy:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(178, 254, 18, 0.4);
}

.courier-pin-btn-close {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.courier-pin-btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Close animation */
.courier-pin-modal.closing .courier-pin-backdrop {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.courier-pin-modal.closing .courier-pin-card {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

#document-modal {
  opacity: 0;
  transition: opacity 0.25s ease;
}

#document-modal > div {
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#document-modal[style*="display: flex"] {
  opacity: 1;
}

#document-modal[style*="display: flex"] > div {
  transform: scale(1);
}

#close-document-modal:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

#document-download-link:hover {
  background: rgba(178, 254, 18, 0.15) !important;
  border-color: rgba(178, 254, 18, 0.35) !important;
  transform: translateY(-2px);
}

#open-public-contract:hover,
#open-user-agreement:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}


/* iOS notifications — all styles are inline via JS, no CSS needed */

/* ═══ NEO UX v4: Status Hints ═══ */
.neo-hint { margin:12px 12px 0; padding:14px 16px; background:var(--bg-card); border:1px solid rgba(178,254,18,0.15); border-radius:14px; display:flex; align-items:flex-start; gap:12px; position:relative; max-height:200px; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease; }
.neo-hint .neo-hint-body { transition:opacity 0.25s ease; opacity:1; flex:1; }
.neo-hint .neo-hint-close { transition:opacity 0.2s ease; opacity:1; width:24px; height:24px; border-radius:8px; background:transparent; border:none; color:var(--text-tertiary); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.neo-hint.collapsed { max-height:44px; padding:10px 16px; cursor:pointer; }
.neo-hint.collapsed .neo-hint-body { opacity:0; pointer-events:none; height:0; overflow:hidden; }
.neo-hint.collapsed .neo-hint-close { opacity:0; pointer-events:none; width:0; overflow:hidden; padding:0; }
.neo-hint.collapsed::after { content:'Подсказка'; font-size:12px; color:var(--text-tertiary); font-weight:500; }
.neo-hint-icon { width:20px; height:20px; flex-shrink:0; margin-top:1px; color:rgba(178,254,18,0.7); }
.neo-hint-title { font-size:12px; font-weight:600; color:rgba(178,254,18,0.8); margin-bottom:4px; letter-spacing:0.3px; }
.neo-hint-text { font-size:13px; color:rgba(255,255,255,0.7); line-height:1.55; }
.neo-card-eta { position:absolute; bottom:8px; right:8px; font-size:8px; color:rgba(178,254,18,0.45); font-weight:500; white-space:nowrap; background:var(--bg-card); padding:1px 4px; border-radius:4px; }

/* ═══ NEO UX v4: Video Instructions ═══ */
.neo-video-overlay { position:fixed; inset:0; z-index:20000; display:none; align-items:center; justify-content:center; }
.neo-video-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; transition:opacity 0.3s ease; }
.neo-video-overlay.active .neo-video-backdrop { opacity:1; }
.neo-video-sheet { position:relative; width:92%; max-width:400px; max-height:90vh; background:linear-gradient(180deg, #1e1e20 0%, #161618 100%); border-radius:24px; overflow:hidden; overflow-y:auto; z-index:1; opacity:0; transform:translateY(30px); transition:opacity 0.35s cubic-bezier(0.16,1,0.3,1), transform 0.35s cubic-bezier(0.16,1,0.3,1); border:1px solid rgba(255,255,255,0.06); box-shadow:0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03); }
.neo-video-overlay.active .neo-video-sheet { opacity:1; transform:translateY(0); }
.neo-video-overlay.closing .neo-video-backdrop { opacity:0; }
.neo-video-overlay.closing .neo-video-sheet { opacity:0; transform:translateY(30px); }
.neo-video-header { display:flex; align-items:center; gap:12px; padding:20px 20px 16px; }
.neo-video-header h3 { font-size:18px; font-weight:700; color:var(--text-primary); flex:1; margin:0; letter-spacing:-0.2px; }
.neo-video-close { width:36px; height:36px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.06); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s ease; flex-shrink:0; }
.neo-mp-subtitle { font-size:13px; color:var(--text-tertiary); padding:0 20px 4px; margin:0; line-height:1.4; }
.neo-mp-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px 20px 28px; }
.neo-mp-card { padding:28px 16px 20px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:18px; display:flex; flex-direction:column; align-items:center; gap:12px; cursor:pointer; transition:all 0.25s cubic-bezier(0.16,1,0.3,1); }
.neo-mp-card-icon { width:48px; height:48px; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.neo-mp-card-name { font-size:14px; font-weight:600; color:var(--text-primary); letter-spacing:-0.1px; }
.neo-video-embed { width:100%; aspect-ratio:9/16; background:#000; border-top:1px solid rgba(255,255,255,0.04); }
.neo-video-embed iframe { width:100%; height:100%; border:none; }
.neo-track-help { display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px; background:rgba(178,254,18,0.02); border:1px solid rgba(178,254,18,0.08); border-radius:14px; cursor:pointer; transition:all 0.2s ease; margin-bottom:8px; text-align:left; }
.neo-track-help-icon { color:rgba(178,254,18,0.45); flex-shrink:0; width:20px; height:20px; }
.neo-track-help-text { font-size:13px; color:rgba(255,255,255,0.5); flex:1; font-weight:500; }
.neo-track-help-arrow { color:rgba(178,254,18,0.25); flex-shrink:0; width:16px; height:16px; }

/* ═══ NEO UX v4: Onboarding ═══ */
.neo-onboarding { position:fixed; inset:0; z-index:99998; background:#121212; display:flex; flex-direction:column; overflow:hidden; }
.neo-onboarding-slides { flex:1; display:flex; min-width:0; transition:transform 0.5s cubic-bezier(0.25,0.1,0.25,1); }
.neo-onboarding-slide { min-width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 32px 60px; text-align:center; }
.neo-onboarding-slide-icon { width:100px; height:100px; border-radius:28px; background:radial-gradient(circle, rgba(178,254,18,0.12) 0%, rgba(178,254,18,0.04) 70%); border:1px solid rgba(178,254,18,0.15); display:flex; align-items:center; justify-content:center; margin-bottom:32px; color:#b2fe12; }
.neo-onboarding-slide-icon svg { width:42px; height:42px; }
.neo-onboarding-slide h2 { font-size:24px; font-weight:700; margin:0 0 12px; letter-spacing:-0.3px; color:rgba(255,255,255,0.95); }
.neo-onboarding-slide p { font-size:15px; color:rgba(255,255,255,0.6); line-height:1.6; max-width:300px; margin:0; }
.neo-onboarding-footer { position:fixed; bottom:0; left:0; right:0; padding:20px 24px 40px; display:flex; flex-direction:column; align-items:center; gap:20px; background:linear-gradient(transparent, #121212 30%); z-index:99999; }
.neo-onboarding-dots { display:flex; gap:8px; }
.neo-onboarding-dot { width:8px; height:8px; border-radius:4px; background:rgba(255,255,255,0.15); transition:all 0.3s ease; }
.neo-onboarding-dot.active { width:24px; background:#b2fe12; }
.neo-onboarding-btn { width:100%; max-width:320px; padding:16px; background:#b2fe12; color:#1a1a1a; border:none; border-radius:14px; font-size:16px; font-weight:600; cursor:pointer; transition:all 0.15s; letter-spacing:0.2px; }

/* ═══ NEO Spotlight Tour (legacy) ═══ */
@keyframes neo-tour-fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.neo-tour-text { font-size:14px; color:rgba(255,255,255,0.9); line-height:1.6; margin-bottom:16px; }
.neo-tour-footer { display:flex; justify-content:space-between; align-items:center; }
.neo-tour-counter { font-size:12px; color:rgba(255,255,255,0.35); font-weight:500; }
.neo-tour-btn { padding:10px 24px; background:#b2fe12; color:#1a1a1a; border:none; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.15s; }

/* ═══ NEO ONBOARDING v5 — interactive demo tour ═══ */
/* Card / tooltip */
.neo-onb-card { background:#1e1e20; border:1px solid rgba(178,254,18,0.22); border-radius:16px; padding:14px 16px; box-shadow:0 16px 48px rgba(0,0,0,0.55); display:flex; flex-direction:column; box-sizing:border-box; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow:hidden; }
.neo-onb-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; flex-shrink:0; }
.neo-onb-section { font-size:10px; font-weight:600; color:#b2fe12; background:rgba(178,254,18,0.1); padding:2px 8px; border-radius:6px; letter-spacing:0.3px; }
.neo-onb-counter { font-size:10px; color:rgba(255,255,255,0.35); font-weight:500; }
.neo-onb-text { font-size:13px; color:rgba(255,255,255,0.88); line-height:1.45; margin-bottom:10px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; min-height:0; }
.neo-onb-bar { height:2px; background:rgba(255,255,255,0.06); border-radius:2px; margin-bottom:10px; overflow:hidden; flex-shrink:0; }
.neo-onb-bar-fill { height:100%; background:linear-gradient(90deg, #b2fe12, #a0e010); border-radius:2px; transition:width 0.4s cubic-bezier(0.16,1,0.3,1); }
.neo-onb-btn { width:100%; padding:11px; background:linear-gradient(135deg, #b2fe12 0%, #a0e010 100%); color:#1a1a1a; border:none; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; transition:transform 0.15s ease; flex-shrink:0; }
/* Кнопка «Пропустить» под «Начать обучение» на стартовом экране */
.neo-onb-skip-link { width:100%; margin-top:10px; padding:10px; background:transparent; color:rgba(255,255,255,0.55); border:none; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
/* Маленькие экраны: компактная карточка, чтобы кнопка «Далее» не уходила под экран */
@media (max-height: 640px) {
  .neo-onb-card { padding:10px 13px; }
  .neo-onb-head { margin-bottom:6px; }
  .neo-onb-text { font-size:12px; line-height:1.4; margin-bottom:8px; }
  .neo-onb-bar { margin-bottom:8px; }
  .neo-onb-btn { padding:9px; font-size:13px; }
}

/* Onboarding v6 uses real app screens with patched data; no demo-* blocks needed */

/* ═══ Карточки "Адрес склада в Китае" — ОДИНАКОВЫЙ вид в Главной и Профиле ═══ */
/* Раньше различались: media query давал профилю 16px/14px, а Главной оставались
   24px/20px (из своего класса/inline). Жёстко выравниваем обе по одним значениям,
   чтобы стили не "брались с общих отступов разделов". */
#home-cn-card,
#cn-address-block {
  padding: 18px !important;
  border-radius: 16px !important;
}

/* ═══ Предупреждение о смене филиала (адрес склада в Китае) ═══ */
/* Плашка — рамка-уведомление внутри карточки; индивидуальный margin на раздел
   (home/profile) задаёт JS, чтобы отступы не "брались с общих" разделов. */
.neo-branch-alert {
  display: flex;
  gap: 9px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 176, 32, 0.20) 0%, rgba(255, 140, 20, 0.10) 100%);
  border: 1px solid rgba(255, 176, 32, 0.30);
  border-radius: 10px;
  padding: 12px 16px;
  animation: neoBranchAlertIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.neo-branch-alert__icon {
  color: #ffb020;
  flex-shrink: 0;
  display: flex;
}
.neo-branch-alert__icon svg { width: 18px; height: 18px; }
.neo-branch-alert__text {
  color: rgba(255, 255, 255, 0.90);
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  min-width: 0;
}
@keyframes neoBranchAlertIn {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}

/* Модалка-предупреждение при входе */
.neo-branch-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 8, 10, 0.62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.26s ease;
}
.neo-branch-modal-overlay.active { opacity: 1; }
.neo-branch-modal {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(160deg, #232325 0%, #19191b 100%);
  border: 1px solid rgba(255, 176, 32, 0.32);
  border-radius: 24px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: scale(0.93) translateY(8px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.neo-branch-modal-overlay.active .neo-branch-modal { transform: none; }
.neo-branch-modal__icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 176, 32, 0.14);
  color: #ffb020;
}
.neo-branch-modal__icon svg { width: 28px; height: 28px; }
.neo-branch-modal h3 {
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 9px;
  letter-spacing: -0.02em;
}
.neo-branch-modal p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  line-height: 1.52;
  margin: 0 0 22px;
}
.neo-branch-modal__primary {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 13px;
  background: linear-gradient(135deg, #b2fe12 0%, #a0e610 100%);
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 9px;
  transition: transform 0.12s ease, filter 0.2s ease;
}
.neo-branch-modal__ghost {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}



/* ═══════════════════════════════════════════════════════════════════════
   ЭКРАН «ВЫБЕРИТЕ ФИЛИАЛ» И КАРТОЧКА ПУНКТА — правки под телефон
   ═══════════════════════════════════════════════════════════════════════ */

/* Заголовок съедал седьмую часть экрана отступом сверху, а списку не
   хватало места — на телефоне было видно три с половиной карточки.
   Отступ считаем от «чёлки», а не фиксированным числом. */
.branch-guard-header {
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 12px;
}
.branch-guard-title { font-size: 24px; }

/* Поиск и города — те же, что на экране регистрации. Классы там свои
   (auth-*), их стили лежат в auth.css, который в приложении не подключён:
   без этих правил иконка лупы уезжала в угол экрана. */
.branch-guard-body .auth-branch-search-wrap {
  position: relative;
  padding: 4px 16px 0;
  flex-shrink: 0;
}
.branch-guard-body .auth-branch-search-ico {
  position: absolute;
  left: 28px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.branch-guard-body .auth-branch-search {
  width: 100%;
  height: 44px;
  padding: 0 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.branch-guard-body .auth-branch-search::placeholder { color: rgba(255, 255, 255, 0.35); }
.branch-guard-body .auth-branch-search:focus { border-color: rgba(178, 254, 18, 0.45); }
.branch-guard-body .auth-branch-search::-webkit-search-cancel-button { display: none; }
.branch-guard-body .auth-branch-search-clear {
  display: none;
  position: absolute;
  right: 24px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.branch-guard-body .neo-city-row { padding: 8px 16px 0; }

/* ── Карточка пункта ────────────────────────────────────────────────── */

/* Две линии подряд: одна под названием пункта, вторая сразу над адресом.
   Верхняя у адреса лишняя — он и так первый в теле. */
.branch-modal-body .neo-bd-addr:first-child,
.branch-modal-body > div > .neo-bd:first-child > .neo-bd-addr:first-child,
#branch-modal-details > .neo-bd > .neo-bd-addr:first-child { border-top: none; }
#branch-modal-details .neo-bd > *:first-child { border-top: none; }

/* Скролл внутри карточки. На телефоне он не работал: страница под модалкой
   перехватывала жест, и содержимое стояло на месте. overscroll-behavior
   держит прокрутку внутри карточки, а заодно гасит «потяни, чтобы обновить»
   у браузера — иначе при попытке пролистать вверх перезагружалась страница. */
.branch-modal-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Полоса прокрутки поверх содержимого выглядела грубо — убираем во всех
   списках этих экранов, жест остаётся. */
.branch-modal-body::-webkit-scrollbar,
.branch-guard-list::-webkit-scrollbar,
.auth-branches-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.branch-modal-body,
.branch-guard-list,
.auth-branches-list { scrollbar-width: none; -ms-overflow-style: none; }

/* Крестик закрытия: голая «птичка» без формы выглядела случайной.
   Кружок делает её кнопкой, по которой понятно куда нажимать. */
.branch-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.65);
  font-size: 17px;
  font-weight: 400;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.branch-modal-close:hover,
.branch-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

/* Ручки сверху нет: карточка закрывается крестиком, тянуть её не нужно. */

/* Пока карточку тянут пальцем, анимацию возврата выключаем — иначе она
   спорит с пальцем и движение получается рывками. */
.branch-details-content.is-dragging { transition: none; }

/* «Потяни, чтобы обновить» у браузера срабатывало прямо поверх наших
   экранов: человек листал список пунктов вверх и получал перезагрузку. */
html, body { overscroll-behavior-y: contain; }
.branch-guard-list, .auth-branches-list {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* Карточка пункта на экране «выберите филиал» — то же, что и в кабинете:
   прокрутка внутри, без полосы, кнопка-кружок и ручка для свайпа. */
.guard-bm-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.guard-bm-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.guard-bm-body { scrollbar-width: none; -ms-overflow-style: none; }
#guard-branch-modal-details .neo-bd > *:first-child { border-top: none; }
.guard-bm-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.65);
  font-size: 17px;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.guard-bm-close:hover { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); }
.guard-branch-modal-content { position: relative; }

.guard-branch-modal-content.is-dragging { transition: none; }


/* ── «Генерируем ваш адрес склада» ──────────────────────────────────────
   Пока адреса нет, на его месте — скелет карточки с бегущим бликом и одной
   строкой поверх. Так видно, что идёт работа, а не что-то сломалось: пустые
   поля с прочерками читались как поломка, и человек пытался их копировать. */
.cn-addr-skeleton {
  position: relative;
  min-height: 148px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.cn-addr-skeleton .cn-skel-bars {
  position: absolute;
  inset: 0;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cn-addr-skeleton .cn-skel-bar {
  height: 13px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  position: relative;
  overflow: hidden;
}
.cn-addr-skeleton .cn-skel-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(178, 254, 18, 0.10) 45%,
    rgba(178, 254, 18, 0.18) 50%,
    rgba(178, 254, 18, 0.10) 55%,
    transparent 100%);
  animation: cnSkelSweep 1.5s ease-in-out infinite;
}
.cn-addr-skeleton .cn-skel-bar:nth-child(1) { width: 62%; }
.cn-addr-skeleton .cn-skel-bar:nth-child(2) { width: 84%; }
.cn-addr-skeleton .cn-skel-bar:nth-child(3) { width: 72%; }
.cn-addr-skeleton .cn-skel-bar:nth-child(4) { width: 92%; }
.cn-addr-skeleton .cn-skel-bar:nth-child(2)::after { animation-delay: 0.12s; }
.cn-addr-skeleton .cn-skel-bar:nth-child(3)::after { animation-delay: 0.24s; }
.cn-addr-skeleton .cn-skel-bar:nth-child(4)::after { animation-delay: 0.36s; }

@keyframes cnSkelSweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.cn-addr-skeleton .cn-skel-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.86);
  backdrop-filter: blur(3px);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.01em;
}
.cn-addr-skeleton .cn-skel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b2fe12;
  flex-shrink: 0;
  animation: cnSkelPulse 1.15s ease-in-out infinite;
}
@keyframes cnSkelPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .cn-addr-skeleton .cn-skel-bar::after,
  .cn-addr-skeleton .cn-skel-dot { animation: none; }
}


/* Две кнопки оплаты на экране выдачи. Главная — «Оплатить всё», она шире и
   заметнее: это то, что делают почти всегда. «Перейти к оплате» рядом и
   спокойнее — за ней уходят те, кому надо оплатить часть. */
.pickup-pay-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.pickup-pay-row .pickup-btn-secondary {
  flex: 0 0 44%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, transform 0.12s ease;
}
.pickup-pay-row .pickup-btn-kaspi {
  flex: 1 1 auto;
  font-size: 16px;
  padding: 16px 12px;
}

/* Штрих-код едет за пальцем — переход отключён намеренно, иначе он бы
   догонял прокрутку с задержкой и выглядел ватным. */
#pickup-qr-container { transition: none; }

/* ─── Тарифы: модалка ────────────────────────────────────────────────────
   Оформление шторки наследуется от модалки поддержки (подложка, выезд снизу,
   свайп). Здесь только содержимое: цифра и три коротких пункта. */
.tariff-body {
  padding: 16px 20px 26px;
  /* Шторка занимает не больше 88% экрана, а прокручивается её содержимое.
     Раньше высота росла под текст: модалка распирала экран, и прочитать
     нижнюю часть было нельзя — она уезжала за край. */
  max-height: calc(88vh - 92px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
}
.tariff-body::-webkit-scrollbar { width: 0; display: none; }
.tariff-body { scrollbar-width: none; }

/* Опт — отдельная карточка под основным тарифом. Заметная, но тише главной:
   это предложение для другого разговора, а не второй тариф. */
.tariff-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  margin: 10px 0 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.tariff-opt-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; }
.tariff-opt-note { margin-top: 3px; font-size: 12.5px; color: rgba(255,255,255,0.5); }
.tariff-opt-value {
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  color: #b2fe12; white-space: nowrap;
}
.tariff-opt-unit { font-size: 14px; font-weight: 700; }

.tariff-hero {
  padding: 20px;
  margin-bottom: 6px;
  border-radius: 18px;
  background: rgba(178, 254, 18, 0.08);
  border: 1px solid rgba(178, 254, 18, 0.2);
}
.tariff-hero-value {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #b2fe12;
}
.tariff-hero-unit { font-size: 16px; font-weight: 700; }
.tariff-hero-note {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.tariff-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tariff-item:last-child { border-bottom: none; padding-bottom: 4px; }
.tariff-item-ic {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  color: #b2fe12;
}
.tariff-item-tx {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.tariff-item-tx b {
  display: block;
  margin-bottom: 3px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}
/* ─── Тариф обновлён: карточка на главной ───────────────────────────────
   Стоит под плитками, ведёт в модалку тарифов. Одна строка и кнопка —
   подробности читаются внутри, а не тут. */
.tariff-note {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  margin: 0 0 0px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tariff-note-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(178, 254, 18, 0.12);
  color: #b2fe12;
}
.tariff-note-body { flex: 1 1 auto; min-width: 0; }
.tariff-note-title {
  font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.92);
}
.tariff-note-cta {
  flex: 0 0 auto;
  font-size: 13.5px; font-weight: 600; color: #b2fe12;
}
/* Приписка под расчётом у посылок легче минимального веса: объясняет, почему
   сумма больше, чем «вес × тариф». Без неё человек считает в уме и идёт
   спрашивать, почему его обсчитали. */
.pp-paycard-minnote {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
}

/* Приписка рядом с весом лёгкой посылки: вес настоящий, а считается как за
   минимальные сто граммов. */
.pp-row-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
}


/* Пока шторка тарифов уезжает вниз, подложка гаснет вместе с ней — иначе
   затемнение висит лишние доли секунды после жеста. */
.support-modal.is-closing .support-overlay { opacity: 0; }

/* ==========================================================================
   ПРАВИЛА СЕРВИСА И ТАРИФЫ — ПОЛНОЦЕННЫЕ ЭКРАНЫ
   ==========================================================================
   Правила — это то, на что мы ссылаемся в споре с клиентом. Спрятать их в
   шторку значит сказать «прочти мельком»: шторка закрывается смахиванием,
   не листается длинным текстом и не даёт вернуться к прочитанному. Поэтому
   у правил и тарифов свой экран с шапкой и кнопкой «назад» — такой же, как у
   договора, и открывается он теми же openFullscreen/closeFullscreen.
   ========================================================================== */

.rules-body,
.tariff-screen-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 16px calc(100px + env(safe-area-inset-bottom, 0px));
}

/* Логотип над правилами: документ наш, и это должно быть видно сразу. */
.rules-logo {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0 16px;
}
.rules-logo img { height: 30px; width: auto; display: block; opacity: .95; }

/* Шапка-объяснение: кто мы такие. Стоит первой, потому что половина споров
   начинается с того, что клиент считает нас продавцом товара. */
.rules-intro {
  background: linear-gradient(135deg, rgba(178, 254, 18, .08) 0%, rgba(178, 254, 18, .03) 100%);
  border: 1px solid rgba(178, 254, 18, .22);
  border-radius: 16px;
  padding: 16px 16px 15px;
  margin-bottom: 16px;
}
.rules-intro-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; color: #b2fe12; margin-bottom: 7px;
}
.rules-intro-title svg { width: 19px; height: 19px; flex-shrink: 0; }
.rules-intro-text {
  display: block;
  font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .78);
}

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

.rules-card {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  padding: 15px 16px;
}
.rules-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 9px; }
.rules-card-ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  background: rgba(178, 254, 18, .09);
  color: #b2fe12;
  display: flex; align-items: center; justify-content: center;
}
.rules-card-ic svg { width: 19px; height: 19px; }
.rules-card-titles { display: block; flex: 1; min-width: 0; padding-top: 2px; }
/* Номер пункта мелкий и приглушённый: он нужен, чтобы сослаться на правило в
   переписке, а не чтобы его читали первым. */
.rules-card-num {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255, 255, 255, .34); margin-bottom: 2px;
}
.rules-card-title {
  display: block;
  font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #fff;
}
.rules-card-body {
  font-size: 13.5px; line-height: 1.58; color: rgba(255, 255, 255, .72);
}
.rules-card-body p { margin: 0 0 8px; }
.rules-card-body p:last-child { margin-bottom: 0; }
.rules-card-body b { color: rgba(255, 255, 255, .92); font-weight: 700; }

/* Пример-расчёт: цифра, которую человек проверит на своей посылке. */
.rules-example {
  display: flex; align-items: center; gap: 8px;
  margin-top: 9px; padding: 9px 11px;
  background: rgba(255, 255, 255, .04);
  border-radius: 10px;
  font-size: 12.5px; color: rgba(255, 255, 255, .62);
}
.rules-example b { color: #b2fe12; font-weight: 700; }

/* Предупреждение — там, где клиент теряет деньги, если не прочитает. */
.rules-warn {
  margin-top: 9px; padding: 10px 12px;
  background: rgba(255, 138, 76, .08);
  border-left: 0;
  border: 1px solid rgba(255, 138, 76, .2);
  border-radius: 10px;
  font-size: 12.5px; line-height: 1.5; color: rgba(255, 184, 140, .95);
}

.rules-foot {
  margin-top: 18px; padding: 14px 15px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
}
.rules-foot-text {
  font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .55); margin-bottom: 12px;
}
.rules-foot-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 14px;
  background: rgba(178, 254, 18, .1);
  border: 1px solid rgba(178, 254, 18, .28);
  border-radius: 12px;
  color: #b2fe12; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .2s;
}
.rules-foot-btn svg { width: 17px; height: 17px; }

/* --- Карточка-вход «Правила сервиса» --------------------------------------
   Отметка «обязательно прочитайте» — не украшение: на неё мы ссылаемся, когда
   клиент говорит, что его не предупредили о стекле или об обрешётке. */
.rules-entry {
  width: 100%;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  background: linear-gradient(135deg, rgba(178, 254, 18, .07) 0%, rgba(178, 254, 18, .025) 100%);
  border: 1px solid rgba(178, 254, 18, .25);
  border-radius: 16px;
  cursor: pointer; text-align: left;
  transition: transform .15s ease, border-color .2s;
}
.rules-entry-ic {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  background: rgba(178, 254, 18, .12);
  color: #b2fe12;
  display: flex; align-items: center; justify-content: center;
}
.rules-entry-ic svg { width: 21px; height: 21px; }
.rules-entry-body { display: block; flex: 1; min-width: 0; }
.rules-entry-badge {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: rgba(178, 254, 18, .85); background: rgba(178, 254, 18, .1);
  border: 1px solid rgba(178, 254, 18, .2);
  padding: 2px 7px; border-radius: 5px; margin-bottom: 5px;
}
.rules-entry-title { display: block; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; }
.rules-entry-sub { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .5); margin-top: 2px; }
.rules-entry-arrow { flex-shrink: 0; color: rgba(255, 255, 255, .28); font-size: 19px; }

/* --- Экран тарифов: тот же контент, что был в шторке ---------------------- */
/* Внутри экрана .tariff-body больше не ограничен по высоте: этот предел был
   нужен шторке, которая не могла занимать больше 88% экрана. В экране он
   срезал верх карточки с ценой. */
.tariff-screen-body .tariff-body {
  max-height: none;
  overflow: visible;
  padding: 0;
}

/* ==========================================================================
   ЭКРАН «ОБ АККАУНТЕ»
   ==========================================================================
   Сюда человек заходит с одним вопросом: «правильно ли у них записаны мои
   данные». Значит первым делом — имя, фамилия и ИИН, по которым оформляют
   посылку на таможне, и кнопка их поправить. Учётные поля (ID, номер, пункт,
   даты) ниже: их читают, но не меняют.
   ========================================================================== */

.acc-avatar-wrap { display: flex; flex-direction: column; align-items: center; padding: 6px 0 20px; }
.acc-avatar {
  width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: #0e1400;
  box-shadow: 0 6px 20px rgba(178, 254, 18, .18);
}
.acc-avatar-name { margin-top: 11px; font-size: 17px; font-weight: 700; color: #fff; text-align: center; }
.acc-avatar-id { margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, .42); font-family: "SF Mono", Consolas, monospace; }

.acc-group-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin: 18px 2px 8px;
}
.acc-group-title:first-of-type { margin-top: 0; }

.acc-card {
  background: var(--bg-card, rgba(255, 255, 255, .035));
  border: 1px solid var(--border-default, rgba(255, 255, 255, .08));
  border-radius: 14px;
  overflow: hidden;
}
.acc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}
.acc-row:last-child { border-bottom: none; }
.acc-row-k { font-size: 13.5px; color: rgba(255, 255, 255, .48); flex-shrink: 0; }
/* Значение прижато вправо и может переноситься: адрес пункта длиннее ключа,
   и обрезать его многоточием нельзя — по нему человек едет забирать. */
.acc-row-v {
  flex: 1; text-align: right;
  font-size: 13.5px; font-weight: 600; color: #fff;
  word-break: break-word;
}
.acc-row-v--mono { font-family: "SF Mono", Consolas, monospace; letter-spacing: .02em; }
/* Незаполненный ИИН — не ошибка и не тревога: человек просто ещё не дошёл. */
.acc-row-v--empty { color: rgba(255, 255, 255, .34); font-weight: 500; }
.acc-row-v--ok { color: #22b04a; }

.acc-edit-btn {
  width: 100%; margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 14px;
  background: rgba(178, 254, 18, .1);
  border: 1px solid rgba(178, 254, 18, .28);
  border-radius: 13px;
  color: #b2fe12; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .2s;
}
.acc-edit-btn svg { width: 17px; height: 17px; }

.acc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acc-stat {
  background: linear-gradient(135deg, rgba(178, 254, 18, .09) 0%, rgba(178, 254, 18, .03) 100%);
  border: 1px solid rgba(178, 254, 18, .2);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.acc-stat-ic {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(178, 254, 18, .12); color: #b2fe12;
  display: flex; align-items: center; justify-content: center; margin-bottom: 9px;
}
.acc-stat-ic svg { width: 17px; height: 17px; }
.acc-stat-val { font-size: 25px; font-weight: 800; color: #fff; line-height: 1.05; }
.acc-stat-key {
  margin-top: 4px; font-size: 11.5px; color: rgba(255, 255, 255, .45);
}
.acc-stats-note {
  margin-top: 10px; font-size: 11.5px; line-height: 1.45;
  color: rgba(255, 255, 255, .34); text-align: center;
}

/* ==========================================
   НАСТРОЙКИ — ЭКРАН
   ========================================== */

/* Настройки лежат в разметке ниже остальных экранов, а z-index у всех
   одинаковый — значит при равенстве побеждает тот, кто ниже в документе, и
   настройки накрыли бы «Об аккаунте». Опускаем их на ступень: настройки —
   основание стопки, всё, что из них открывается, ложится сверху. */
#settings-screen {
  z-index: 10001; /* общая полка экранов */
}

/* ==========================================================================
   НАСТРОЙКИ — СОДЕРЖИМОЕ ЭКРАНА (.set-*)
   ==========================================================================
   Настройки были листом снизу, растянутым на весь экран: строки от края до
   края, линия под каждой, серые полосы 3px между группами и картинки .webp/.svg
   разного размера в одинаковых плашках. На полном экране это читается как
   системный список, а не как наше приложение, и расходится с «Об аккаунте» и
   «Правилами», которые уже приняты. Здесь тот же язык: заголовок группы вместо
   полосы, карточка со скруглением, линия внутри карточки, один набор
   инлайновых stroke-иконок в одинаковых лаймовых плашках.
   ========================================================================== */

/* Хвост в 100px достался от времён, когда под экраном виднелась таб-панель.
   У оверлея z-index 10000, у панели 999 — она полностью перекрыта, и эти
   100px превращались в пустоту под последней кнопкой. Боковые нули из
   прежнего правила не трогаем: отступы берёт на себя .set-wrap. */
.settings-screen-body {
  padding: 0;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* 16px по бокам — как на экране правил. Медиазапрос .fullscreen-body на
   ≤480px оставляет 10px, и на 375px карточка с таким отступом выглядит
   приклеенной к краю. Ограничение по ширине нужно планшету: растянутые на
   всю ширину строки теряют связь между иконкой слева и шевроном справа. */
.set-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 14px 16px 0;
}
@media (max-width: 480px) {
  .set-wrap { padding: 12px 10px 0; }
}

/* --- Карточка-вход в аккаунт ---------------------------------------------
   Первый вопрос в настройках — «я вообще под собой?». Раньше ответ прятался
   в строке «Об Аккаунте», неотличимой от «Ввести промокод». Лаймовая подложка
   (та же, что у карточки правил) отделяет «моё» от списка действий. */
.set-profile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  background: linear-gradient(135deg, rgba(178, 254, 18, .07) 0%, rgba(178, 254, 18, .025) 100%);
  border: 1px solid rgba(178, 254, 18, .25);
  border-radius: 16px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, border-color .2s;
}

/* Квадрат с буквой имени — тот же, что на «Об аккаунте», только меньше.
   Пока JS не проставил букву, внутри лежит человечек: пустой лаймовый
   квадрат выглядел бы как не догрузившаяся картинка. Размеры шрифта заданы
   здесь же, поэтому подстановка буквы ничего не ломает. */
.set-profile-av {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #b2fe12 0%, #9ee00f 100%);
  box-shadow: 0 4px 14px rgba(178, 254, 18, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16210a;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.set-profile-av svg { width: 23px; height: 23px; }

.set-profile-body { display: block; flex: 1; min-width: 0; }
.set-profile-name {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
/* Код клиента моноширинный, как везде, где его диктуют менеджеру, и лаймовый,
   потому что это единственная строка на экране, которую человек будет искать
   глазами. Пустой строки нет вовсе: прочерк в этом месте читается как сбой. */
.set-profile-code {
  display: block;
  margin-top: 2px;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: rgba(178, 254, 18, .72);
}
.set-profile-code:empty { display: none; }
.set-profile-sub {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .55);
}

/* --- Заголовок группы ------------------------------------------------------
   Заменяет серые полосы 3px. Полоса делит экран, ничего не объясняя; слово
   делит его и сразу говорит, что ниже. Размеры один в один с .acc-group-title,
   чтобы два экрана не выглядели сделанными разными людьми. */
.set-group {
  margin: 18px 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* --- Карточка со строками --------------------------------------------------
   Линия-разделитель живёт внутри карточки и не доходит до краёв экрана —
   именно этим список в приложении отличается от системного. */
.set-card {
  background: var(--bg-card, rgba(255, 255, 255, .035));
  border: 1px solid var(--border-default, rgba(255, 255, 255, .08));
  border-radius: 14px;
  overflow: hidden;
}

/* min-height 56px — это не «покрасивее»: палец мажет по цели ниже 48px.
   Реальная высота строки выходит 60px, её держит плашка иконки. */
.set-row {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease;
}
/* Граница сверху у соседа, а не снизу у каждого: строку промокода JS
   показывает через style.display, и при таком порядке под последней видимой
   строкой не остаётся висячей линии. */
.set-row + .set-row { border-top: 1px solid rgba(255, 255, 255, .055); }

/* Плашка иконки одна на все строки. Раньше в одинаковых квадратах 28px лежали
   картинки 26, 30 и 36px — отсюда ощущение зоопарка при одинаковых плашках.
   Цвет задан на плашке, иконка берёт его через currentColor, поэтому серых
   иконок в лаймовой плашке больше не бывает. */
.set-ic {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 11px;
  background: rgba(178, 254, 18, .1);
  color: #b2fe12;
  display: flex;
  align-items: center;
  justify-content: center;
}
.set-ic svg { width: 19px; height: 19px; }

.set-row-body { display: block; flex: 1; min-width: 0; }
.set-row-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}
.set-row-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .52);
}

/* «В разработке» гасим перекраской слоёв, а не opacity: лайм под
   полупрозрачной плёнкой становится грязно-зелёным, а не выключенным. Клик
   остаётся — обработчик показывает подсказку «скоро будет доступно». */
.set-row--soon .set-ic { background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .42); }
.set-row--soon .set-row-title { color: rgba(255, 255, 255, .56); font-weight: 500; }
.set-row--soon .set-row-sub { color: rgba(255, 255, 255, .5); }
.set-row--soon .set-chev { color: rgba(255, 255, 255, .26); }

/* Шеврон одинаковый во всех строках и в карточке аккаунта: он говорит
   «откроется экран», и разнобой в этом месте сбивает. Обводка 2 против 1.9 у
   иконок — оптическая компенсация: на 16px линия 1.9 выглядит тоньше. */
.set-chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, .42);
}

/* Текущий язык — значение, а не действие, поэтому спокойная капсула слева от
   шеврона: строка должна заканчиваться так же, как все остальные. */
.set-val {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 5px 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}
/* Флаг — единственная заливка на экране: это знак страны, а не иконка
   интерфейса, обводкой он нечитаем. Инлайновый svg вместо .webp, потому что
   растр в 17px давал мыло и светлый ореол по краю. */
.set-flag {
  width: 17px;
  height: 13px;
  flex-shrink: 0;
  display: block;
}

/* --- Выход -----------------------------------------------------------------
   Единственное действие на экране, всё остальное — переходы, поэтому оно вне
   карточек. Красный приглушённый: чистый системный #ff3b30 на тёмном фоне
   жжётся и тянет внимание сильнее, чем заслуживает. */
.set-logout {
  width: 100%;
  min-height: 52px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  background: rgba(255, 59, 48, .08);
  border: 1px solid rgba(255, 59, 48, .22);
  border-radius: 13px;
  color: #ff6259;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s;
}
.set-logout svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Подвал ----------------------------------------------------------------
   Без него последняя треть экрана — голый фон, и список выглядит обрезанным.
   Заодно отвечает на вопрос «чьё это приложение» тому, кто долистал до конца.
   Контраст низкий намеренно: это подпись, а не пункт меню.
   Версия скрыта, пока её не проставит JS (#settings-app-version): выдуманный
   номер хуже отсутствующего — по нему нас потом спросят в поддержке. */
.set-foot {
  margin-top: 24px;
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.set-foot-brand {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .55);
}
.set-foot-note {
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .5);
}
.set-foot-ver {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
}
.set-foot-ver:empty { display: none; }

/* Ховер только там, где есть мышь. На телефоне подсветка залипала бы после
   тапа — ровно то, что делали прежние onmouseover прямо в разметке. */
@media (hover: hover) and (pointer: fine) {
  .set-row:hover { background: rgba(255, 255, 255, .04); }
  .set-profile:hover { border-color: rgba(178, 254, 18, .38); }
  .set-logout:hover { background: rgba(255, 59, 48, .13); }
}

/* ==========================================
   ПЕРЕХОДЫ МЕЖДУ ЭКРАНАМИ, КАК В ТЕЛЕФОНЕ
   ========================================== */

/* Раньше новый экран наезжал на неподвижный — от этого переход читался как
   «шторка поверх», а не как переход между экранами. В iOS нижний экран в это
   же время уезжает влево примерно на треть и слегка темнеет; вместе это и
   даёт ощущение глубины.

   Долю сдвига держит переменная --neo-pod: 1 — экран полностью уведён,
   0 — стоит на месте. Пока экран сверху тянут пальцем, жест выставляет её
   сам, и нижний экран возвращается ровно за пальцем. Когда экран сверху
   просто закрыли кнопкой, класс снимается и всё едет на собственном
   переходе экрана — той же длительности и кривой. */
/* 33%, а не «примерно треть на глаз». В исходниках Flutter, где переход
   iOS повторён покадровым замером, это константа _kMiddleLeftTween =
   Offset(-1/3, 0) — ровно одна треть ширины. Независимый замер записи
   экрана iOS 26 даёт 0.29-0.30. Я стоял на 28% — меньше обоих. */
.neo-under {
  transform: translate3d(calc(var(--neo-pod, 1) * -33.333%), 0, 0) !important;
}

/* Затемнение нижнего экрана. Лежит ВНУТРИ самого экрана, поэтому уезжает
   вместе с ним и не мешает верхнему. position:fixed внутри экрана считается
   от самого экрана: у него всегда есть собственный transform. z-index выше
   шапки экрана (10002), иначе шапка осталась бы незатемнённой. */
.fullscreen-overlay::after,
.messages-chat-screen::after,
.id-screen::after,
.wl-screen::after,
.sp-screen::after,
.pp-screen::after {
  content: '';
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 10001; /* общая полка экранов */
  transition: opacity var(--neo-dur) var(--neo-ease);
}
/* Затемнение 0.10, а не 0.14. В iOS это чёрный с альфой 0.094 — константа
   _kCupertinoPageTransitionBarrierColor = 0x18000000 в тех же исходниках;
   замер записи экрана даёт 0.10. Я перетемнял в полтора раза. */
.neo-under::after {
  opacity: calc(var(--neo-pod, 1) * 0.10);
}
/* Пока экран ведут пальцем, затемнение обязано идти кадр в кадр вместе со
   сдвигом. Сдвиг жест гасит инлайном на самом экране, но затемнение живёт в
   псевдоэлементе, а transition не наследуется и инлайн-стиль до псевдоэлемента
   не доходит — темнота ползла следом с задержкой в целый переход, и нижний
   экран будто выцветал сам по себе. */
.neo-drag::after { transition: none; }

/* Тем, кто выключил анимации, сдвиг и затемнение не нужны. */
@media (prefers-reduced-motion: reduce) {
  .neo-under { transform: translate3d(0, 0, 0) !important; }
  .neo-under::after { opacity: 0; }
}

/* Тень вдоль левого края приходящего экрана. Без неё экран не «наезжает»
   на нижний, а просто подменяет его: границы между ними не видно, и весь
   переход читается плоско. Два слоя — узкий и мягкий: первый рисует саму
   кромку, второй даёт глубину.

   Когда экран стоит на месте, тень уходит за левый край окна и не видна;
   когда закрыт — у него visibility:hidden, и её нет вовсе. Поэтому держим
   её постоянно, без переключений. */
.fullscreen-overlay,
.messages-chat-screen,
.id-screen,
.wl-screen,
.sp-screen,
.pp-screen {
  box-shadow: -1px 0 2px rgba(0, 0, 0, .18), -10px 0 26px rgba(0, 0, 0, .26);
}

/* Горизонтальный жест по экрану не должен утекать браузеру. В Chrome на
   Android и в десктопных браузерах горизонтальное перетягивание за край
   содержимого уводит на предыдущую страницу — и наш свайп закрытия
   перехватывается на середине. overscroll-behavior-x это выключает.

   А вот touch-action: pan-y на корень экрана я СОЗНАТЕЛЬНО не ставлю, хотя
   так советуют. Эффективное значение считается пересечением по всей цепочке
   предков: pan-y у экрана и pan-x у ребёнка дают «ничего», и внутри экранов
   перестанут листаться вкладки уведомлений, вкладки филиалов, полоса чипов
   в поддержке и лента сторис. Системный жест «назад» в Android этим всё
   равно не отключается — он живёт за пределами страницы и снимается только
   из нативной обёртки. */
.fullscreen-overlay,
.messages-chat-screen,
.id-screen,
.wl-screen,
.sp-screen,
.pp-screen,
#orders-status-screen,
#pickup-screen {
  overscroll-behavior-x: none;
}

/* ==========================================
   ВКЛАДКА ПОД ОТКРЫТЫМ ЭКРАНОМ
   ========================================== */

/* Стопка экранов знала только про экраны — а под первым открытым экраном
   почти всегда лежит не экран, а ВКЛАДКА. Кошелёк открывается из профиля,
   поддержка из сообщений, статусы из посылок, настройки из профиля: везде
   снизу вкладка, и параллакса там не было вовсе. Он работал только в
   глубоких цепочках вроде настройки → об аккаунте → данные получателя.

   Двигаем активную вкладку и шапку профиля — это то, что человек видит
   слева, пока приходящий экран ещё не закрыл экран целиком.

   Навбар едет вместе с содержимым — как в iOS, где при переходе уезжает
   вся нижележащая страница целиком, включая нижнюю панель. Это НЕ то
   скрытие анимацией, которое владелец просил убрать: там навбар уезжал
   сам по себе, отдельно от экрана, и на разных экранах по-разному. Здесь
   он часть одного общего движения.

   Двигать .tab-content можно только потому, что внутри вкладок не осталось
   ни одного position:fixed: у .tab-content стоит -webkit-overflow-scrolling,
   и любой fixed-потомок прицепился бы к ней вместо окна. Экран переписки,
   который там лежал, вынесен наружу отдельной правкой. */
/* !important здесь ОБЯЗАТЕЛЕН, и вот почему.
   На .tab-content висит `animation: fadeIn .3s ease`, а fadeIn двигает
   transform (translateY(10px) -> 0). По правилам каскада ЛЮБАЯ CSS-анимация
   перебивает обычное объявление — и наш сдвиг просто не применялся, пока
   анимация идёт. А запускается она заново при КАЖДОМ показе вкладки, то есть
   при каждом переключении. Открыл экран в первые 0.3 секунды после
   переключения — параллакса нет; открыл позже — есть. Отсюда и ощущение, что
   он работает через раз и «на некоторых экранах его нет».
   Важное объявление анимацию перебивает — у навбара и шапки !important стоял
   с самого начала, у вкладки его забыли. */
body.neo-tab-under .tab-content:not(.hidden) {
  transform: translate3d(calc(var(--neo-tab-pod, 1) * -33.333%), 0, 0) !important;
  transition: transform var(--neo-dur) var(--neo-ease);
}
/* Шапке профиля нужен !important: переключение вкладок ставит ей transform
   инлайном (translateY(0) на профиле, translateY(-10px) на остальных), а
   инлайн перебивает таблицу стилей. Без этого вкладка уезжала, а шапка
   оставалась стоять — то есть ровно тот разнобой, который мы и убирали. */
/* Навбару !important нужен по той же причине: несколько мест в app.js
   ставят ему инлайном translateY(0) при восстановлении после экранов. */
body.neo-tab-under #profile-header-main,
body.neo-tab-under .tab-bar-bottom {
  transform: translate3d(calc(var(--neo-tab-pod, 1) * -33.333%), 0, 0) !important;
  transition: transform var(--neo-dur) var(--neo-ease) !important;
}

/* Пока экран ведут пальцем — вкладка идёт кадр в кадр, без перехода. */
body.neo-tab-drag .tab-content:not(.hidden) { transition: none !important; }
body.neo-tab-drag #profile-header-main,
body.neo-tab-drag .tab-bar-bottom { transition: none !important; }

/* ═══ ЛЕСТНИЦА СЛОЁВ ПРИЛОЖЕНИЯ ═══════════════════════════════════════════
   Значения были разбросаны от 1100 до 2147483647 по шести файлам, и из-за
   этого часть окон открывалась ПОД тем, из чего их вызвали, а плашка Telegram
   висела поверх экранов выдачи и статусов.

      100    шапка профиля
     1000    навбар
     1050    затемнение страницы под открытым экраном
    10001    ВСЕ полноэкранные экраны — одна полка.
             Порядок между ними держит стек в neo-gestures.js: он поднимает
             верхний открытый экран на ступень выше соседа снизу.
    10050    затемнение МЕЖДУ экранами (::after у самих экранов)
    10100+   шторки и тосты поверх своего экрана (кошелёк, оплата)
    20000    модалки поверх экранов (бонусы, выбор банка, видео, привязка TG)
    30000    обучающий тур — поверх всего

   Значения внутри экранов (шапка, кнопка «назад», списки) считаются от самого
   экрана: у экранов есть transform, а он создаёт свой контекст наложения.
   Поэтому их трогать не нужно и не следует. */

/* ЗАТЕМНЕНИЕ — ОТДЕЛЬНЫЙ ПОСТОЯННЫЙ СЛОЙ, А НЕ ПСЕВДОЭЛЕМЕНТ ВКЛАДКИ.
   Псевдоэлементом оно ломалось сразу тремя способами.

   1. z-index 900 — это НИЖЕ навбара (1000) и шапки профиля. Страница
      темнела, а навбар и шапка оставались яркими и висели светлыми
      полосами поверх затемнённой страницы. Именно это видно на скриншоте
      и читается как «навбар сломан».

   2. position:fixed внутри вкладки, к которой применён transform,
      считается ОТ ВКЛАДКИ, а не от окна. Затемнение уезжало влево вместе
      со страницей вместо того, чтобы стоять на месте.

   3. Псевдоэлемент появлялся и исчезал ВМЕСТЕ с классом — то есть сразу с
      готовой непрозрачностью, переходу не от чего было идти. Отсюда чёрное
      мигание при открытии экрана. Постоянный элемент гаснет и зажигается
      плавно, как и должен. */
.neo-zatemnenie {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  /* выше навбара (1000) и шапки профиля, ниже любого экрана (от 1100) */
  z-index: 1050;
  transition: opacity var(--neo-dur) var(--neo-ease);
}
body.neo-tab-under .neo-zatemnenie { opacity: calc(var(--neo-tab-pod, 1) * 0.10); }
/* Пока экран ведут пальцем — затемнение идёт кадр в кадр, без перехода. */
body.neo-tab-drag .neo-zatemnenie { transition: none; }

@media (prefers-reduced-motion: reduce) {
  body.neo-tab-under .tab-content:not(.hidden) { transform: none !important; }
  body.neo-tab-under #profile-header-main,
  body.neo-tab-under .tab-bar-bottom { transform: none !important; }
  .neo-zatemnenie { transition: none; }
  body.neo-tab-under .neo-zatemnenie { opacity: 0; }
}

/* Экран под клавиатурой перестаёт закрывать окно целиком: модуль
   поддержки подгоняет ему высоту под видимую область, иначе поле ввода
   уезжает под клавиатуру. В этот момент вокруг панели видна страница —
   а она сдвинута влево параллаксом, и выглядит это как поломка: съехавший
   навбар, съехавшая шапка, обрезанный экран. Прячем страницу целиком:
   вокруг панели должен быть ровный фон. */
body.neo-kb-fit .tab-content:not(.hidden),
body.neo-kb-fit .tab-bar-bottom,
body.neo-kb-fit #profile-header-main {
  visibility: hidden !important;
}


/* Окно технических работ. Оболочку берёт у окна обновления (update-modal.css),
   здесь только своя иконка — у того она бесконечно вращается, а здесь это
   читалось бы как «идёт загрузка». */
.tehrab-znak {
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--color-warning-bg);
  border: 1px solid rgba(245, 158, 11, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-warning);
}
.tehrab-pripiska {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
}