/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --bg:           #08080f;
  --bg2:          #0f0f1a;
  --card:         rgba(255,255,255,0.04);
  --card-hover:   rgba(255,255,255,0.07);
  --border:       rgba(255,255,255,0.08);
  --border-acc:   rgba(255,255,255,0.2);
  --text:         #f1f5f9;
  --text2:        #94a3b8;
  --text3:        #475569;
  --purple:       #ffffff;
  --purple2:      #e2e8f0;
  --purple-d:     #cbd5e1;
  --purple-glow:  rgba(255,255,255,0.08);
  --green:        #22c55e;
  --green-glow:   rgba(34,197,94,0.2);
  --blue:         #3b82f6;
  --yellow:       #f59e0b;
  --red:          #ef4444;
  --nav-h:        68px;
  --header-h:     52px;
  /* Радиусы в духе Pochtoy: крупная карточка, мягкие элементы внутри */
  --radius:       20px;
  --radius-sm:    14px;
  --radius-xs:    10px;
  --shadow-card:  0 4px 30px rgba(64,129,255,0.10);
  --pad-card:     16px;
}

/* ── Эмодзи-флаги на Windows ───────────────────────────────────── */
/* Windows не рендерит флаги (показывает буквы «GB», «IT»). Шрифт содержит
   только глифы флагов (unicode-range) и грузится лишь когда класс включён. */
@font-face {
  font-family: 'TwemojiFlags';
  src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0060-E007F;
  font-display: swap;
}
body.no-flag-emoji { font-family: 'TwemojiFlags', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, select, textarea { font-family: inherit; }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Web3 Background ───────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* ── Aurora Blobs ──────────────────────────────────────────────── */
.aurora-blob {
  position: fixed; border-radius: 50%;
  filter: blur(70px); pointer-events: none; z-index: 0;
}
.aurora-1 {
  width: 380px; height: 320px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.06) 0%, transparent 70%);
  top: -120px; left: -60px;
  animation: drift1 14s ease-in-out infinite;
}
.aurora-2 {
  width: 300px; height: 280px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.03) 0%, transparent 70%);
  bottom: 80px; right: -80px;
  animation: drift2 18s ease-in-out infinite;
}
.aurora-3 {
  width: 200px; height: 180px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.025) 0%, transparent 70%);
  top: 45%; left: 60%;
  animation: drift3 22s ease-in-out infinite;
}
@keyframes drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(30px,-25px) scale(1.08); }
  70%     { transform: translate(-15px,20px) scale(0.95); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  35%     { transform: translate(-25px,15px) scale(1.1); }
  65%     { transform: translate(20px,-20px) scale(0.92); }
}
@keyframes drift3 {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(-30px,25px) scale(1.15); }
}

/* ── Loading ───────────────────────────────────────────────────── */
#loading {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
}
.loading-logo { text-align: center; position: relative; }
.logo-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 160px; height: 50px;
  background: var(--purple); border-radius: 50%;
  filter: blur(36px); opacity: 0.35;
  animation: pulse 2s ease-in-out infinite;
}
.logo-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 38px; font-weight: 900; letter-spacing: 10px;
  background: linear-gradient(135deg, #fff 30%, var(--purple2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  position: relative;
}
.logo-sub {
  font-size: 9px; letter-spacing: 4px; color: var(--text3);
  text-transform: uppercase; margin-top: 5px; position: relative;
}
.loading-bar {
  width: 100px; height: 2px;
  background: var(--border); border-radius: 99px; overflow: hidden;
}
.loading-fill {
  height: 100%; width: 0;
  background: #ffffff;
  border-radius: 99px; animation: loadFill 1.2s ease-out forwards;
}

/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes loadFill  { to { width: 100%; } }
@keyframes pulse     { 0%,100% { opacity: 0.3; } 50% { opacity: 0.5; } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes fadeInUp  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer   { to { background-position: -300% 0; } }
@keyframes cardShine {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ── App Shell ─────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100dvh; position: relative; z-index: 1; }

/* ── Header ────────────────────────────────────────────────────── */
#header {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(8,8,15,0.85); backdrop-filter: blur(20px);
  position: sticky; top: 0; z-index: 10; flex-shrink: 0;
}
.brand { display: flex; align-items: baseline; gap: 6px; }
.brand-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px; font-weight: 900; letter-spacing: 3px;
  background: linear-gradient(135deg, #fff, var(--purple2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.brand-tag {
  font-size: 8px; letter-spacing: 2px; color: var(--purple2); text-transform: uppercase;
  font-weight: 600; background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-acc); padding: 2px 6px; border-radius: 4px;
}
.header-actions { display: flex; align-items: center; gap: 8px; }
.btn-add-admin {
  width: 34px; height: 34px; border-radius: 10px;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  color: #08080f; transition: opacity 0.2s, transform 0.15s;
}
.btn-add-admin:active { transform: scale(0.92); opacity: 0.85; }

/* ── Main Content ──────────────────────────────────────────────── */
#content { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: calc(var(--nav-h) + 8px); }
#content::-webkit-scrollbar { display: none; }

/* ── Tab Sections ──────────────────────────────────────────────── */
.tab-section { display: none; padding: 16px 16px 0; }
.tab-section.active { display: block; animation: fadeInUp 0.22s ease-out; }
.section-header { margin-bottom: 16px; }
.section-header h2 { font-size: 20px; font-weight: 700; }
.section-desc { font-size: 13px; color: var(--text2); margin-top: 3px; }

/* ── View toggle (Посылки / Счета) ─────────────────────────────── */
.view-toggle { display: flex; gap: 6px; margin-bottom: 14px; }
.view-pill {
  padding: 7px 16px; border-radius: 99px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text2); cursor: pointer; transition: all 0.15s;
  position: relative;
}
.view-pill.active {
  background: rgba(255,255,255,0.09); border-color: var(--border-acc); color: var(--purple2);
}
.inv-dot {
  position: absolute; top: -5px; right: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #ef4444; border: 2px solid var(--bg);
  pointer-events: none;
}

/* ── Invoice Card ──────────────────────────────────────────────── */
.inv-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; position: relative; overflow: hidden;
}
.inv-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.inv-pending::before  { background: linear-gradient(90deg,#7c3aed,#a78bfa); }
.inv-reviewing::before{ background: linear-gradient(90deg,#3b82f6,#60a5fa); }
.inv-paid::before     { background: linear-gradient(90deg,#22c55e,#4ade80); }
.inv-cancelled::before{ background: linear-gradient(90deg,#475569,#64748b); }

/* ── Delivery ──────────────────────────────────────────────────── */
.btn-action-icon {
  width: 38px; height: 38px; border-radius: var(--radius-xs); font-size: 15px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.btn-action-icon:active { background: rgba(255,255,255,0.09); }
.btn-fill-delivery {
  width: 100%; padding: 10px; border-radius: var(--radius-xs);
  background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2);
  color: #60a5fa; font-size: 13px; font-weight: 600; cursor: pointer;
  margin-bottom: 4px; text-align: center;
}
.btn-fill-delivery:active { background: rgba(59,130,246,0.16); }
.pkg-delivery-pending { font-size: 12px; color: var(--text3); padding: 6px 0; }
.pkg-delivery-done    { font-size: 12px; color: #4ade80; padding: 6px 0; }
.pkg-delivery-info {
  background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: 12px;
}
.pkg-delivery-title { font-size: 11px; font-weight: 700; color: #60a5fa; margin-bottom: 6px; }
.pkg-delivery-type  { font-weight: 600; color: var(--text1); margin-bottom: 3px; }
.pkg-delivery-row   { color: var(--text2); line-height: 1.6; }

.delivery-type-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.delivery-type-pill {
  padding: 6px 14px; border-radius: 99px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text2); cursor: pointer; transition: all .15s;
}
.delivery-type-pill.active {
  background: rgba(255,255,255,0.1); border-color: var(--border-acc); color: var(--text1);
}
.delivery-save-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 0; gap: 10px;
  font-size: 13px; color: var(--text2); cursor: pointer;
  background: none; border: none; font-family: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.delivery-save-btn:active { opacity: 0.7; }
.delivery-toggle-track {
  position: relative; width: 44px; height: 26px; flex-shrink: 0;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 99px; transition: background .2s, border-color .2s;
}
.delivery-save-btn.active .delivery-toggle-track {
  background: rgba(34,197,94,0.25); border-color: rgba(34,197,94,0.5);
}
.delivery-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.35); transition: transform .22s cubic-bezier(.4,0,.2,1), background .2s;
}
.delivery-save-btn.active .delivery-toggle-knob {
  transform: translateX(18px);
  background: #4ade80;
}
.delivery-tpl-name-input {
  width: 100%; margin-top: 6px; padding: 10px 12px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text); font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .15s;
}
.delivery-tpl-name-input:focus { border-color: var(--border-acc); }

/* ── Photo lightbox ────────────────────────────────────────────── */
#photo-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.photo-lb-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.92); backdrop-filter: blur(10px);
}
.photo-lb-wrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 100%; animation: fadeUp .2s ease;
}
@keyframes fadeUp { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
#photo-lb-img {
  max-width: 100%; max-height: 72vh;
  border-radius: 14px; object-fit: contain;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.photo-lb-close {
  position: absolute; top: -14px; right: -14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; transition: background .15s;
}
.photo-lb-close:active { background: rgba(255,255,255,0.22); }
.photo-lb-label {
  font-size: 13px; color: rgba(255,255,255,0.45); letter-spacing: .3px;
  font-family: monospace;
}

/* Кнопка "Посмотреть фото" у клиента */
.btn-view-photo {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  color: var(--text); cursor: pointer; margin-bottom: 8px; font-family: inherit;
  position: relative; z-index: 1; transition: background .15s;
}
.btn-view-photo:active { background: rgba(255,255,255,0.1); }
.btn-view-photo svg { opacity: .7; flex-shrink: 0; }

/* ── No-tracking label ─────────────────────────────────────────── */
.pkg-no-track { color: var(--text3); font-style: italic; }
.pkg-no-track-id { font-size: 11px; color: var(--text3); margin-left: 6px; opacity: .6; }

/* ── Package photo ─────────────────────────────────────────────── */
.pkg-photo-wrap {
  position: relative; margin-bottom: 10px;
  border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.pkg-photo-view { cursor: zoom-in; }
.pkg-photo-img {
  width: 100%; height: auto; display: block;
  max-height: 260px; object-fit: cover; border-radius: 10px;
  transition: transform .25s ease;
}
.pkg-photo-view:active .pkg-photo-img { transform: scale(0.99); }
/* Значок «открыть на весь экран» */
.pkg-photo-badge {
  position: absolute; bottom: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; pointer-events: none; z-index: 2;
}
.btn-photo-delete {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,0.65); border: none;
  color: #fff; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; z-index: 2;
}
.btn-photo-icon {
  width: 38px; height: 38px; border-radius: var(--radius-xs); flex-shrink: 0;
  background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2);
  color: #60a5fa; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.btn-photo-icon:active  { background: rgba(59,130,246,0.18); }
.btn-photo-icon.has-photo { background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.4); }

/* ── Photo zone в модалке (вставка из буфера / файл / drag&drop) ── */
.photo-zone {
  position: relative;
  border: 1.5px dashed var(--border-acc); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  padding: 18px 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: border-color .15s, background .15s;
  outline: none;
}
.photo-zone:hover,
.photo-zone:focus-visible { border-color: rgba(59,130,246,0.55); background: rgba(59,130,246,0.05); }
.photo-zone.dragover { border-color: #60a5fa; background: rgba(59,130,246,0.1); }
.photo-zone.uploading { opacity: .55; pointer-events: none; }
.photo-zone-thumb {
  width: 100%; max-height: 200px; object-fit: cover;
  border-radius: 8px; display: block;
}
.photo-zone-hint {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; color: var(--text3); pointer-events: none;
}
.photo-zone-hint.compact svg { display: none; }
.photo-zone-hint.compact { gap: 2px; }
.photo-zone-hint svg { color: var(--text2); margin-bottom: 2px; }
.photo-zone-title { font-size: 13px; font-weight: 600; color: var(--text2); }
.photo-zone-sub { font-size: 11px; color: var(--text3); }
.photo-zone-remove {
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
  color: #f87171; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.photo-zone-remove:hover { background: rgba(239,68,68,0.18); }
body.theme-light .photo-zone { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.15); }
body.theme-light .photo-zone:hover,
body.theme-light .photo-zone:focus-visible { border-color: rgba(37,99,235,0.5); background: rgba(37,99,235,0.04); }
body.theme-light .photo-zone-title { color: #475569; }

/* ── Archive toggle ────────────────────────────────────────────── */
.btn-archive-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 14px; border-radius: var(--radius-sm); margin-top: 8px;
  background: rgba(255,255,255,0.03); border: 1px dashed var(--border);
  color: var(--text3); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-archive-toggle:active { background: rgba(255,255,255,0.06); color: var(--text2); }
.archive-chevron { margin-left: auto; transition: transform .2s; }
.archive-list { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }

.inv-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.inv-num { font-size: 11px; color: var(--text3); margin-bottom: 2px; }
.inv-amount { font-size: 22px; font-weight: 800; color: var(--text1); }
.inv-badge {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 99px;
  white-space: nowrap; flex-shrink: 0; margin-left: 8px; margin-top: 2px;
}
.inv-badge-pending   { background: rgba(139,92,246,.12); color:#a78bfa; border:1px solid rgba(139,92,246,.25); }
.inv-badge-reviewing { background: rgba(59,130,246,.12);  color:#60a5fa; border:1px solid rgba(59,130,246,.2); }
.inv-badge-paid      { background: rgba(34,197,94,.12);   color:#4ade80; border:1px solid rgba(34,197,94,.3); }
.inv-badge-cancelled { background: rgba(100,116,139,.12); color:#94a3b8; border:1px solid rgba(100,116,139,.2); }

.inv-desc { font-size: 14px; font-weight: 600; color: var(--text1); margin-bottom: 8px; }
.inv-client {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text3); margin-bottom: 8px;
}
.inv-details-block {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.inv-details-block { cursor: pointer; transition: background 0.15s; }
.inv-details-block:active { background: rgba(255,255,255,0.07); }
.inv-details-label {
  font-size: 11px; color: var(--text3); margin-bottom: 4px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.inv-details-copy {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: var(--text2);
  padding: 2px 8px; border-radius: 99px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
}
body.theme-light .inv-details-block:active { background: rgba(0,0,0,0.06); }
body.theme-light .inv-details-copy { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569; }
.inv-details-text { font-size: 13px; color: var(--text2); line-height: 1.5; word-break: break-all; }
.inv-date { font-size: 11px; color: var(--text3); margin-bottom: 12px; }
.inv-actions { display: flex; gap: 8px; margin-bottom: 4px; }
.btn-inv-paid {
  flex: 1; padding: 10px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.7); color: #ffffff; cursor: pointer;
}
.btn-inv-confirm {
  flex: 1; padding: 10px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600;
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #4ade80; cursor: pointer;
}
.btn-inv-cancel {
  flex: 1; padding: 10px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600;
  background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.18); color: #f87171; cursor: pointer;
}
.btn-inv-delete {
  padding: 8px 10px; border-radius: var(--radius-xs);
  background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text3);
  cursor: pointer; margin-top: 6px; float: right;
}
.btn-inv-edit {
  padding: 8px 10px; border-radius: var(--radius-xs);
  background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text2);
  cursor: pointer; margin-top: 6px; float: right; margin-right: 6px;
}
.btn-inv-edit:active { background: rgba(255,255,255,.08); }
body.theme-light .btn-inv-edit { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: #475569; }

/* ── Payment template chips (invoice modal) ─────────────────────── */
.tpl-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tpl-chip {
  padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-acc);
  color: var(--purple2); cursor: pointer; transition: background .15s;
}
.tpl-chip:active { background: rgba(255,255,255,0.12); }

/* ── Template management (info tab) ────────────────────────────── */
.tpl-mgmt-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
}
.tpl-mgmt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.tpl-mgmt-row:last-child { border-bottom: none; }
.tpl-mgmt-info { flex: 1; min-width: 0; }
.tpl-mgmt-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.tpl-mgmt-preview { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-tpl-delete {
  padding: 6px 8px; border-radius: 8px; flex-shrink: 0;
  background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.18);
  color: #f87171; cursor: pointer;
}
.tpl-add-form {
  flex-direction: column; gap: 8px; margin-bottom: 12px;
}
.tpl-add-form input, .tpl-add-form textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-xs);
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text1); font-size: 14px; font-family: inherit; resize: none;
}
.tpl-add-form textarea { min-height: 70px; }
.tpl-add-actions { display: flex; gap: 8px; }
.btn-tpl-save {
  flex: 1; padding: 10px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.07); border: 1px solid var(--border-acc); color: var(--purple2); cursor: pointer;
}
.btn-tpl-cancel {
  padding: 10px 14px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text2); cursor: pointer;
}
.btn-tpl-add {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 10px; border-radius: var(--radius-xs);
  font-size: 13px; font-weight: 600; justify-content: center;
  background: rgba(255,255,255,.03); border: 1px dashed var(--border);
  color: var(--text2); cursor: pointer; margin-top: 8px;
}
.btn-tpl-add:active { background: rgba(255,255,255,.07); }

/* ── Bottom Nav ────────────────────────────────────────────────── */
#bottom-nav {
  height: var(--nav-h); display: flex; align-items: stretch;
  border-top: 1px solid var(--border);
  background: rgba(8,8,15,0.92); backdrop-filter: blur(24px);
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  padding: 0 8px; padding-bottom: env(safe-area-inset-bottom,0px); flex-shrink: 0;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 8px 4px; border-radius: var(--radius-sm);
  color: var(--text3); font-size: 11px; font-weight: 500;
  transition: color 0.2s; -webkit-tap-highlight-color: transparent;
}
.nav-item svg { transition: stroke 0.2s; }
.nav-item.active { color: var(--purple2); }
.nav-item.active svg { stroke: var(--purple2); }

/* ── Package Cards ─────────────────────────────────────────────── */
.card-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }

.pkg-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  position: relative; overflow: hidden;
  animation: fadeInUp 0.25s ease-out;
}
/* Top highlight line */
.pkg-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
}
/* Status tint */
.pkg-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--status-color, transparent) 0%, transparent 55%);
  opacity: 0.06; pointer-events: none;
}
.pkg-card.status-pending    { --status-color: #ffffff;        border-color: rgba(255,255,255,0.2); }
.pkg-card.status-received   { --status-color: var(--yellow);  border-color: rgba(249,115,22,0.18); }
.pkg-card.status-processing { --status-color: var(--text3);   border-color: rgba(100,116,139,0.2); }
.pkg-card.status-shipped    { --status-color: var(--blue);    border-color: rgba(59,130,246,0.18); }
.pkg-card.status-ready      {
  --status-color: var(--green);
  border-color: rgba(34,197,94,0.25);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.1), 0 0 24px rgba(34,197,94,0.08);
}
.pkg-card.status-delivered  { --status-color: var(--text3); }

/* (shine removed) */

.pkg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; position: relative; z-index: 1; }
.pkg-tracking { flex: 1; min-width: 0; }
.pkg-track-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.pkg-track-row { display: flex; align-items: center; gap: 6px; }
.pkg-track-num {
  font-family: 'Space Grotesk', monospace; font-size: 15px; font-weight: 600; letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.copy-btn {
  flex-shrink: 0; width: 28px; height: 28px; background: rgba(255,255,255,0.06);
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
  color: var(--text2); transition: background 0.15s, color 0.15s; border: 1px solid var(--border);
}
.copy-btn:active { background: var(--border-acc); color: var(--purple2); }

.pkg-country {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text3); margin-bottom: 6px; position: relative; z-index: 1;
}
.pkg-item-name {
  font-size: 14px; font-weight: 600; color: var(--text1);
  margin-bottom: 10px; position: relative; z-index: 1;
}

/* ── Status Badges ─────────────────────────────────────────────── */
/* ── Status badge animation ──────────────────────────────────────── */
@keyframes badge-pop {
  0%   { transform: scale(1);    box-shadow: 0 0 0px currentColor; }
  20%  { transform: scale(1.12); box-shadow: 0 0 8px currentColor; }
  55%  { transform: scale(0.97); }
  80%  { transform: scale(1.03); }
  100% { transform: scale(1);    box-shadow: 0 0 0px currentColor; }
}

.status-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  padding: 4px 10px; border-radius: 99px; flex-shrink: 0; white-space: nowrap;
  transform-origin: center;
}
.status-badge.badge-pop {
  animation: badge-pop 0.55s ease-out forwards;
}

/* ── Duplicate hint ──────────────────────────────────────────────── */
.dup-hint {
  margin-top: 6px; padding: 7px 10px; border-radius: 8px;
  background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.25);
  color: #fbbf24; font-size: 12px; line-height: 1.4;
}
.badge-pending    { background: rgba(255,255,255,0.1); color: #f1f5f9; border: 1px solid rgba(255,255,255,0.3); }
.badge-received   { background: rgba(249,115,22,0.12);  color: #fb923c; border: 1px solid rgba(249,115,22,0.25); }
.badge-processing { background: rgba(100,116,139,0.12); color: #94a3b8; border: 1px solid rgba(100,116,139,0.2); }
.badge-shipped    { background: rgba(59,130,246,0.12);   color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
.badge-ready      { background: rgba(34,197,94,0.12);   color: #4ade80; border: 1px solid rgba(34,197,94,0.3); box-shadow: 0 0 10px var(--green-glow); }
.badge-delivered  { background: rgba(100,116,139,0.12); color: #94a3b8; border: 1px solid rgba(100,116,139,0.2); }

/* Тело карточки: название + детали слева, миниатюра фото справа */
.pkg-body { display: flex; gap: 12px; align-items: flex-start; position: relative; z-index: 1; }
.pkg-body-main { flex: 1; min-width: 0; }
.pkg-thumb {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border); position: relative;
  cursor: zoom-in; background: rgba(255,255,255,0.04);
}
.pkg-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.15s;
}
.pkg-thumb:active img { transform: scale(0.94); }
.pkg-thumb-del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
  font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.pkg-thumb-del:active { background: rgba(239,68,68,0.85); }

.pkg-details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 10px;
  position: relative; z-index: 1;
}
.pkg-detail-label { font-size: 10px; color: var(--text3); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.3px; }
.pkg-detail-val   { font-size: 14px; font-weight: 600; }

.pkg-client {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text2);
  padding: 7px 10px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs); margin-bottom: 10px;
  position: relative; z-index: 1;
}
.pkg-source-label {
  display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 99px;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
  color: #fbbf24; margin-left: 6px;
}
.pkg-actions {
  display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border);
  position: relative; z-index: 1; align-items: center;
}
.btn-edit-status {
  flex: 1; padding: 0 12px; height: 38px; border-radius: var(--radius-xs);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-acc);
  color: var(--purple2); font-size: 13px; font-weight: 500; transition: background 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-edit-status:active { background: rgba(255,255,255,0.1); }
.btn-delete {
  width: 38px; height: 38px; border-radius: var(--radius-xs);
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.18);
  color: var(--red); display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.btn-delete:active { background: rgba(239,68,68,0.18); }

/* Быстрая смена статуса */
.btn-next-status {
  flex: 1; height: 38px; padding: 0 12px; border-radius: var(--radius-xs);
  background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);
  color: #4ade80; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.15s;
}
.btn-next-status:active { background: rgba(34,197,94,0.2); }
.btn-next-status:disabled { opacity: 0.5; }
.btn-next-compact {
  flex: 0 0 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Бургер «⋯» и раскрывающийся ряд действий */

/* ── Группы посылок ────────────────────────────────────────────── */
.pkg-group { border-color: rgba(96,165,250,0.25); }
.group-client { font-size: 15px; font-weight: 700; margin-top: 2px; }
.group-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.group-items {
  margin: 4px 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; position: relative; z-index: 1;
}
.group-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; background: rgba(255,255,255,0.02);
}
.group-item + .group-item { border-top: 1px solid var(--border); }
.group-item.tappable { cursor: pointer; transition: background 0.15s; }
.group-item.tappable:active { background: rgba(255,255,255,0.06); }
/* Заметка на карточке — видна и клиенту, и админу.
   Типы: nt-note (🟢 примечание), nt-warn (🟡 замечание), nt-alert (🔴 важное) */
.pkg-important {
  position: relative; z-index: 1;
  margin-bottom: 10px; padding: 8px 10px;
  font-size: 12.5px; line-height: 1.4; font-weight: 600; color: #fbbf24;
  background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.35);
  border-radius: var(--radius-sm);
}
.pkg-important.nt-note  { color: #4ade80; background: rgba(74,222,128,0.08);  border-color: rgba(74,222,128,0.35); }
.pkg-important.nt-alert { color: #f87171; background: rgba(248,113,113,0.09); border-color: rgba(248,113,113,0.4); }
body.theme-light .pkg-important { color: #92400e; background: rgba(251,191,36,0.14); border-color: rgba(180,120,20,0.4); }
body.theme-light .pkg-important.nt-note  { color: #166534; background: rgba(74,222,128,0.14);  border-color: rgba(22,101,52,0.35); }
body.theme-light .pkg-important.nt-alert { color: #b91c1c; background: rgba(248,113,113,0.12); border-color: rgba(185,28,28,0.4); }
.group-item-note {
  font-size: 11px; line-height: 1.35; font-weight: 600; color: #fbbf24; margin-top: 3px;
}
.group-item-note.nt-note  { color: #4ade80; }
.group-item-note.nt-alert { color: #f87171; }
body.theme-light .group-item-note { color: #92400e; }
body.theme-light .group-item-note.nt-note  { color: #166534; }
body.theme-light .group-item-note.nt-alert { color: #b91c1c; }
.tbl-note { flex-shrink: 0; cursor: help; }
.label-hint { font-weight: 400; color: var(--text3); text-transform: none; letter-spacing: 0; }

.group-item-thumb {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); cursor: zoom-in; background: rgba(255,255,255,0.04);
}
.group-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group-item-main { flex: 1; min-width: 0; }
.group-item-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-item-sub { font-size: 11px; color: var(--text3); margin-top: 1px; }
.group-item-right { flex-shrink: 0; text-align: right; }
.group-item-right .status-badge { font-size: 9.5px; padding: 2px 8px; }
.group-item-cost { font-size: 12px; font-weight: 600; margin-top: 3px; }
.group-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; font-size: 12px; color: var(--text2); margin-bottom: 10px;
  position: relative; z-index: 1;
}
.group-total > span:first-child { flex: 1; min-width: 0; }
.group-total-sum {
  font-size: 15px; font-weight: 800; color: var(--text);
  white-space: nowrap; flex-shrink: 0;
}
.btn-group-invoice {
  flex: 1; height: 38px; border-radius: var(--radius-xs);
  background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);
  color: #4ade80; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.15s;
}
.btn-group-invoice:active { background: rgba(34,197,94,0.2); }
.btn-group-advance {
  flex: 1; height: 38px; border-radius: var(--radius-xs);
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.32);
  color: #4ade80; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s;
}
.btn-group-advance:active { background: rgba(34,197,94,0.22); }
.btn-group-advance:disabled { opacity: 0.5; }
body.theme-light .btn-group-advance {
  background: rgba(22,163,74,0.09); border-color: rgba(22,163,74,0.35); color: #15803d;
}

.btn-gd-remove {
  width: 100%; margin-top: 8px; padding: 10px;
  border-radius: var(--radius-xs); font-size: 13px; font-weight: 500;
  background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.18); color: #f87171;
}
.btn-gd-remove:active { background: rgba(239,68,68,0.15); }
body.theme-light .btn-gd-remove {
  background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.2); color: #dc2626;
}

/* Режим выбора для объединения */
.pkg-card.group-selected {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96,165,250,0.55);
}
.pkg-card.group-dim { opacity: 0.35; }
#group-bar {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(var(--nav-h) + 14px);
  z-index: 95;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius);
  background: rgba(15,15,26,0.97); border: 1px solid var(--border-acc);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
#group-bar-count { flex: 1; font-size: 13px; font-weight: 600; }
#group-bar-cancel {
  padding: 8px 14px; border-radius: var(--radius-xs); font-size: 13px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text2);
}
#group-bar-apply {
  padding: 8px 14px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600;
  background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.4); color: #93c5fd;
}
body.theme-light .group-item { background: rgba(0,0,0,0.02); }
body.theme-light .group-item.tappable:active { background: rgba(0,0,0,0.06); }
body.theme-light .btn-group-invoice {
  background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.35); color: #15803d;
}
body.theme-light #group-bar {
  background: rgba(255,255,255,0.98); border-color: rgba(0,0,0,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
body.theme-light #group-bar-cancel { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569; }
body.theme-light #group-bar-apply { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.35); color: #2563eb; }

/* Кнопка клиента: убрать из списка */
.btn-client-remove {
  flex: 1; height: 38px; border-radius: var(--radius-xs);
  background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.18);
  color: #f87171; font-size: 13px; font-weight: 500; transition: background 0.15s;
}
.btn-client-remove:active { background: rgba(239,68,68,0.15); }
body.theme-light .btn-client-remove {
  background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.2); color: #dc2626;
}

/* ── Empty State ───────────────────────────────────────────────── */
/* Пустые экраны как у Pochtoy: иконка в плашке, приглашение, пояснение, действие */
.empty-state {
  text-align: center; padding: 44px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty-state .ic-tile.lg { margin-bottom: 6px; }
.empty-title { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
.empty-sub { font-size: 13.5px; color: var(--text3); line-height: 1.5; max-width: 290px; }
.btn-empty-action { margin-top: 8px; padding: 12px 22px !important; font-size: 14px !important; width: auto; }
.empty-state.compact { padding: 18px 12px; gap: 8px; }
.empty-state.compact .ic-tile.lg { width: 56px; height: 56px; border-radius: 17px; margin-bottom: 2px; }
.empty-state.compact .ic-tile.lg .ic { width: 28px; height: 28px; }

/* ── Admin Stats ───────────────────────────────────────────────── */
.stats-row { display: flex; gap: 6px; flex-wrap: nowrap; margin-bottom: 12px; overflow-x: auto; }
.stats-row::-webkit-scrollbar { display: none; }
.stat-chip {
  padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text2); cursor: pointer; transition: all 0.15s;
  display: flex; gap: 5px; align-items: center; white-space: nowrap; flex-shrink: 0;
}
.stat-chip.active { background: rgba(255,255,255,0.09); border-color: var(--border-acc); color: var(--purple2); }
.stat-chip span { opacity: 0.65; }

/* ── Фильтр по странам + сортировка ────────────────────────────── */
.admin-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.country-chips { display: flex; gap: 6px; }
.country-chip {
  width: 36px; height: 30px; border-radius: 99px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  background: var(--card); border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.country-chip.active {
  background: rgba(255,255,255,0.12); border-color: var(--border-acc);
  box-shadow: 0 0 0 1px var(--border-acc);
}
.country-chip:active { transform: scale(0.92); }
.sort-wrap {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 30px; padding: 0 10px; border-radius: 99px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text2);
}
.sort-wrap svg { flex-shrink: 0; color: var(--text3); }
.sort-wrap select {
  background: none; border: none; outline: none; cursor: pointer;
  color: var(--text2); font-size: 12px; font-weight: 500;
  appearance: none; -webkit-appearance: none; max-width: 110px;
}
.sort-wrap select option { background: var(--bg2); color: var(--text); }

/* ── Search Box ────────────────────────────────────────────────── */
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  margin-bottom: 14px; transition: border-color 0.2s;
}
.search-box:focus-within { border-color: var(--border-acc); }
.search-icon { flex-shrink: 0; color: var(--text3); }
.search-box input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 14px; }
.search-box input::placeholder { color: var(--text3); }

/* ── Client filter (admin) ─────────────────────────────────────── */
.client-filter {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  margin-bottom: 14px; transition: border-color 0.2s;
}
.client-filter:focus-within { border-color: var(--border-acc); }
.client-filter-icon { flex-shrink: 0; color: var(--text3); }
.client-filter select {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 14px; appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.client-filter select option { background: var(--card); color: var(--text); }
body.theme-light .client-filter select { color: #0f172a; }
body.theme-light .client-filter select option { background: #ffffff; color: #0f172a; }

/* ── Track Tab ─────────────────────────────────────────────────── */
.track-search-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; margin-bottom: 14px;
}
.track-input-wrap { display: flex; align-items: center; gap: 8px; }
.track-input-wrap svg { flex-shrink: 0; color: var(--text3); }
.track-input-wrap input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 15px; font-family: 'Space Grotesk', monospace; letter-spacing: 0.5px;
}
.track-input-wrap input::placeholder { color: var(--text3); font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: 0; }
.btn-primary-sm {
  padding: 8px 14px; border-radius: var(--radius-xs);
  background: #ffffff;
  color: #08080f; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-primary-sm:active { transform: scale(0.95); opacity: 0.85; }

/* Client add button in track tab */
.btn-add-track {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.18);
  color: var(--purple2); font-size: 14px; font-weight: 600;
  transition: background 0.18s, border-color 0.18s;
  margin-bottom: 14px;
}
.btn-add-track:active { background: rgba(255,255,255,0.09); border-style: solid; }

#track-result { margin-bottom: 12px; }

.my-id-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.my-id-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.my-id-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.my-id-value { font-family: 'Space Grotesk', monospace; font-size: 18px; font-weight: 700; color: var(--purple2); }
.my-id-hint { font-size: 12px; color: var(--text3); line-height: 1.4; }

.track-found-card {
  background: var(--card); border: 1px solid var(--border-acc);
  border-radius: var(--radius); padding: 16px;
  box-shadow: 0 0 20px var(--purple-glow);
}
.track-not-found {
  text-align: center; padding: 22px; color: var(--text2); font-size: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.track-history { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.track-history-title { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.history-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--text2); }
.history-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); flex-shrink: 0; }
.btn-claim {
  width: 100%; margin-top: 12px; padding: 11px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-acc);
  color: var(--purple2); font-size: 14px; font-weight: 600; transition: background 0.15s;
}
.btn-claim:active { background: rgba(255,255,255,0.1); }

/* ── Rates Tab ─────────────────────────────────────────────────── */
.country-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
  position: relative; overflow: hidden;
}
.country-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.country-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.country-flag { font-size: 30px; }
.country-name { font-size: 16px; font-weight: 700; }
.country-route { font-size: 12px; color: var(--text2); margin-top: 1px; }
.country-badge {
  margin-left: auto; padding: 4px 10px; border-radius: 99px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-acc);
  color: var(--purple2); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.rates-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.rates-table thead th {
  font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 500; text-align: left; padding: 0 0 8px; border-bottom: 1px solid var(--border);
}
.rates-table thead th:last-child { text-align: right; }
.rates-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.03); }
.rates-table tbody tr:last-child { border-bottom: none; }
.rates-table tbody td { padding: 9px 0; font-size: 13px; }
.rates-table tbody td:first-child { font-weight: 600; }
.rates-table tbody td:last-child { text-align: right; font-weight: 700; color: var(--purple2); }
.rate-condition { font-size: 11px; color: var(--text2); }
.rates-note { font-size: 12px; color: var(--text3); margin-bottom: 10px; font-style: italic; line-height: 1.5; }
.stores-section { padding-top: 10px; border-top: 1px solid var(--border); }
.stores-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.stores-list { display: flex; flex-wrap: wrap; gap: 6px; }
.store-chip {
  padding: 4px 11px; border-radius: 99px; font-size: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text2);
}

/* ── Calculator ────────────────────────────────────────────────── */
.calc-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 16px;
  position: relative;
}
.calc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.calc-header {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
}
.calc-header svg { color: var(--purple2); }
.calc-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calc-row label { font-size: 13px; color: var(--text2); white-space: nowrap; }

/* Country pills */
.calc-country-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.country-pill {
  padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--card-hover); border: 1px solid var(--border);
  color: var(--text2); transition: all 0.15s; cursor: pointer;
}
.country-pill.active {
  background: rgba(255,255,255,0.09); border-color: var(--border-acc); color: var(--purple2);
}

/* Tariff pills (CN / JP) */
.calc-tariff-wrap { display: flex; flex-direction: column; gap: 8px; }
.calc-tariff-wrap label { font-size: 13px; color: var(--text2); }
.tariff-pills { display: flex; flex-direction: column; gap: 6px; }
.tariff-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--card-hover); border: 1px solid var(--border);
  color: var(--text2); font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.tariff-pill .pill-price { font-weight: 700; color: var(--text3); font-size: 12px; }
.tariff-pill.active {
  background: rgba(255,255,255,0.07); border-color: var(--border-acc);
  color: var(--text);
}
.tariff-pill.active .pill-price { color: var(--purple2); }

.calc-input-wrap {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: var(--radius-xs); overflow: hidden; transition: border-color 0.2s;
}
.calc-input-wrap:focus-within { border-color: var(--border-acc); }
.calc-input-wrap input {
  width: 76px; padding: 8px 10px; background: none; border: none; outline: none;
  color: var(--text); font-size: 16px; font-weight: 600; text-align: right;
}
.calc-unit { padding: 0 10px; font-size: 12px; color: var(--text3); }

.calc-result { padding-top: 12px; border-top: 1px solid var(--border); }
.calc-type { font-size: 13px; font-weight: 700; color: var(--purple2); margin-bottom: 6px; }
.calc-breakdown { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); flex-wrap: wrap; }
.calc-x, .calc-eq { color: var(--text3); }
.calc-total-val { font-size: 22px; font-weight: 800; color: var(--text); margin-left: auto; }

/* ── Info Tab ──────────────────────────────────────────────────── */

/* Hero */
.i-hero {
  text-align: center; padding: 24px 0 20px;
  position: relative;
}
.i-hero-glow {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 80px;
  background: var(--purple); border-radius: 50%;
  filter: blur(50px); opacity: 0.2; pointer-events: none;
}
.i-hero-img {
  display: block; width: 116px; height: auto;
  margin: 0 auto 4px; position: relative; z-index: 1;
  filter: invert(1); /* ч/б логотип: в тёмной теме линии белые */
  opacity: 0.95;
}
body.theme-light .i-hero-img { filter: none; }
.i-hero-logo {
  font-family: 'Montserrat', sans-serif; font-size: 40px; font-weight: 900; letter-spacing: 8px;
  background: linear-gradient(135deg, #ffffff 30%, #94a3b8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  position: relative;
}
.i-hero-sub {
  font-size: 12px; color: var(--text3); letter-spacing: 2px; text-transform: uppercase;
  margin-top: 4px; position: relative;
}
.i-hero-tag {
  display: inline-block; margin-top: 10px; padding: 5px 14px; border-radius: 99px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-acc);
  font-size: 12px; color: var(--purple2); position: relative;
}

/* Stats */
.i-stats {
  display: flex; align-items: stretch;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.i-stats::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 33%, rgba(56,189,248,0.6) 66%, rgba(251,191,36,0.4) 100%);
}
.i-stat { flex: 1; text-align: center; padding: 16px 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.i-stat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.i-dot-purple { background: #e2e8f0; box-shadow: 0 0 10px rgba(255,255,255,0.6); }
.i-dot-blue   { background: #38bdf8; box-shadow: 0 0 10px rgba(56,189,248,0.7);  }
.i-dot-gold   { background: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,0.7);  }

.i-stat-num {
  font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 900; line-height: 1;
}
/* Each stat number gets its own gradient via dedicated class */
.i-num-purple {
  background: linear-gradient(135deg, #ffffff, #e2e8f0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.i-num-blue {
  background: linear-gradient(135deg, #ffffff, #38bdf8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.i-num-gold {
  background: linear-gradient(135deg, #ffffff, #fbbf24);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.i-stat-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; }
.i-stat-sep { width: 1px; background: var(--border); margin: 12px 0; }

/* Section label */
.i-section-label {
  font-size: 10px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 10px;
}

/* Warehouse tab buttons — 5 in a row */
.i-wh-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.i-wh-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 9px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--border);
  transition: all 0.18s; cursor: pointer; -webkit-tap-highlight-color: transparent;
  position: relative; overflow: hidden;
}
.i-wh-tab::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}
.i-wh-tab.active {
  background: rgba(255,255,255,0.06); border-color: var(--border-acc);
  box-shadow: 0 0 16px var(--purple-glow);
}
.i-wh-tab-flag { font-size: 22px; line-height: 1; }
.i-wh-tab-name { font-size: 10px; font-weight: 600; color: var(--text2); }
.i-wh-tab.active .i-wh-tab-name { color: var(--purple2); }

/* Warehouse content panel */
.i-wh-content {
  background: var(--card); border: 1px solid var(--border-acc);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.i-wh-content::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-acc), transparent);
}
.i-wh-panel { animation: fadeInUp 0.18s ease-out; }

.i-wh-location {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--purple2); margin-bottom: 8px;
}
.i-wh-location svg { color: var(--purple2); flex-shrink: 0; }
.i-wh-desc { font-size: 13px; color: var(--text2); line-height: 1.55; margin-bottom: 12px; }
.i-wh-time-badge {
  display: inline-block; padding: 5px 12px; border-radius: 99px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-acc);
  font-size: 12px; color: var(--purple2); font-weight: 500;
}
.i-wh-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.i-wh-badge-cargo {
  background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #4ade80;
}
.i-wh-stores { font-size: 12px; color: var(--text3); margin-bottom: 10px; line-height: 1.6; }
.i-wh-note {
  font-size: 12px; color: #f59e0b;
  background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.2);
  border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; line-height: 1.45;
}

/* Timeline */
.i-timeline { display: flex; flex-direction: column; margin-bottom: 20px; }
.i-tl-step { display: flex; gap: 14px; }
.i-tl-left { display: flex; flex-direction: column; align-items: center; width: 32px; flex-shrink: 0; }
.i-tl-dot {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-d), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 900; color: #08080f;
  box-shadow: 0 0 14px var(--purple-glow); z-index: 1; position: relative;
}
.i-tl-line {
  flex: 1; width: 1px; min-height: 16px;
  background: linear-gradient(180deg, var(--purple) 0%, rgba(255,255,255,0.09) 100%);
  margin: 4px 0;
}
.i-tl-content { padding-bottom: 20px; flex: 1; padding-top: 5px; }
.i-tl-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.i-tl-text { font-size: 13px; color: var(--text2); line-height: 1.55; }

/* Features grid */
.i-features {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 20px;
}
.i-feature {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 12px;
  position: relative; overflow: hidden;
}
.i-feature::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.i-feature-icon { font-size: 22px; margin-bottom: 8px; }
.i-feature-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.i-feature-text { font-size: 11px; color: var(--text3); line-height: 1.4; }

/* Contacts */
.i-contacts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.i-contact-card {
  border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--border); -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s, background 0.18s;
}
.i-contact-card:active { background: var(--card-hover); }

.i-contact-main {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  position: relative; overflow: hidden;
  border-color: var(--border-acc);
  box-shadow: 0 0 20px var(--purple-glow);
}
.i-contact-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.i-contact-bg::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-acc), transparent);
}
.i-contact-icon {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; color: #fff;
  position: relative;
}
.i-contact-info { flex: 1; position: relative; }
.i-contact-title { font-size: 13px; color: var(--text2); }
.i-contact-handle { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 1px; }

.i-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.i-contact-sm {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 12px; gap: 10px;
}
.i-contact-sm-icon {
  width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.i-contact-sm-label { font-size: 13px; font-weight: 600; }

/* Export card */
.export-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 0;
}
.export-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.export-icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.export-info { flex: 1; min-width: 0; }
.export-title { font-size: 13px; font-weight: 600; }
.export-sub { font-size: 11px; color: var(--text3); margin-top: 2px; line-height: 1.4; }
.export-divider { height: 1px; background: var(--border); margin: 0 16px; }
.btn-export-action {
  flex-shrink: 0; padding: 7px 12px; border-radius: var(--radius-xs);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-acc);
  color: var(--purple2); font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: background 0.15s;
}
.btn-export-action:active { background: rgba(255,255,255,0.1); }

/* Backup */
.backup-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.backup-info { display: flex; align-items: center; gap: 12px; }
.backup-info svg { color: var(--purple2); flex-shrink: 0; }
.backup-title { font-size: 14px; font-weight: 600; }
.backup-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.backup-actions { display: flex; gap: 8px; }
.btn-backup-dl, .btn-backup-tg, .btn-backup-restore {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.btn-backup-tg {
  background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.3);
  color: #38bdf8;
}
.btn-backup-tg:active { background: rgba(14,165,233,0.2); }
.btn-backup-tg:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-backup-dl {
  background: rgba(255,255,255,0.07); border: 1px solid var(--border-acc);
  color: var(--purple2);
}
.btn-backup-dl:active { background: rgba(255,255,255,0.12); }
.btn-backup-restore {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--text2);
}
.btn-backup-restore:active { background: var(--card-hover); }

/* ── Modal ─────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(10px);
  display: flex; align-items: flex-end;
}
.modal-sheet {
  width: 100%; max-height: 92dvh;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 22px 22px 0 0; padding: 12px 16px 32px;
  overflow-y: auto; animation: slideUp 0.28s cubic-bezier(0.32,0.72,0,1);
}
.modal-sheet::-webkit-scrollbar { display: none; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-handle { width: 34px; height: 4px; border-radius: 99px; background: var(--border); margin: 0 auto 16px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-header h3 { font-size: 17px; font-weight: 700; }
.modal-close {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text2); display: flex; align-items: center; justify-content: center;
}
.modal-close:active { background: var(--card-hover); }

/* ── Form ──────────────────────────────────────────────────────── */
.modal-form { display: flex; flex-direction: column; gap: 13px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 12px; color: var(--text2); font-weight: 500; }
.reg-section select, #svc-new-group,
.form-group input, .form-group select, .form-group textarea {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 10px 13px;
  color: var(--text); font-size: 14px; outline: none; transition: border-color 0.2s; -webkit-appearance: none;
}
.reg-section select:focus, #svc-new-group:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-acc); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text3); }
.form-group select option, .reg-section select option, #svc-new-group option { background: #1a1a2e; }
/* Своя стрелка вместо системной — нативная не красится вместе с темой */
.reg-section select, #svc-new-group, .form-group select {
  width: 100%; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.form-group textarea { resize: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.client-form-hint { font-size: 12px; color: var(--text3); line-height: 1.5; }

.btn-primary {
  padding: 13px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700;
  background: #ffffff;
  color: #08080f; text-align: center; transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 20px rgba(255,255,255,0.12);
}
.btn-primary:active { transform: scale(0.98); opacity: 0.88; }
.btn-primary:disabled { opacity: 0.5; transform: none; }

/* ── Toast ─────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + 12px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,20,35,0.96); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 18px;
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
  backdrop-filter: blur(16px); z-index: 99;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: rgba(34,197,94,0.4); color: #4ade80; }
.toast.error   { border-color: rgba(239,68,68,0.4);  color: #f87171; }



/* ── Theme toggle button ───────────────────────────────────────── */
.btn-theme {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text2);
  transition: background 0.2s, color 0.2s;
}
.btn-theme:active { background: rgba(255,255,255,0.14); }

/* ── Light Theme ───────────────────────────────────────────────── */
body.theme-light {
  --bg:          #f1f5f9;
  --bg2:         #e8eef4;
  --card:        rgba(0,0,0,0.03);
  --card-hover:  rgba(0,0,0,0.05);
  --border:      rgba(0,0,0,0.08);
  --border-acc:  rgba(0,0,0,0.2);
  --text:        #0f172a;
  --text2:       #475569;
  --text3:       #94a3b8;
  --purple:      #0f172a;
  --purple2:     #1e293b;
  --purple-d:    #334155;
  --purple-glow: rgba(0,0,0,0.05);
  --green:       #16a34a;
  --green-glow:  rgba(22,163,74,0.12);
}

/* Background */
body.theme-light::after {
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
}
body.theme-light .aurora-blob { opacity: 0; }

/* ── Header ── */
body.theme-light #header {
  background: rgba(241,245,249,0.94);
  border-bottom-color: rgba(0,0,0,0.08);
}
body.theme-light .brand-name {
  background: linear-gradient(135deg, #0f172a 30%, #475569);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
body.theme-light .brand-tag {
  color: #64748b;
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
}
body.theme-light .btn-theme {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .btn-theme:active { background: rgba(0,0,0,0.1); }
body.theme-light .btn-add-admin { background: #0f172a; color: #fff; }

/* ── Bottom nav ── */
body.theme-light #bottom-nav {
  background: rgba(241,245,249,0.96);
  border-top-color: rgba(0,0,0,0.08);
}
body.theme-light .nav-item       { color: #94a3b8; }
body.theme-light .nav-item.active { color: #0f172a; }
body.theme-light .nav-item.active svg { stroke: #0f172a; }

/* ── Package cards ── */
body.theme-light .pkg-card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
body.theme-light .pkg-card::before { background: linear-gradient(90deg,transparent,rgba(0,0,0,0.06),transparent); }
/* Ожидается: в тёмной теме — белый, в светлой — нейтральный тёмно-серый */
body.theme-light .pkg-card.status-pending { --status-color: #334155; border-color: rgba(15,23,42,0.14); }
body.theme-light .badge-pending { background: rgba(15,23,42,0.05); color: #475569; border-color: rgba(15,23,42,0.22); }
body.theme-light .pkg-card.status-ready {
  border-color: rgba(22,163,74,0.3);
  box-shadow: 0 0 0 1px rgba(22,163,74,0.1), 0 2px 12px rgba(22,163,74,0.1);
}
body.theme-light .pkg-actions   { border-top-color: rgba(0,0,0,0.07); }
body.theme-light .pkg-client    { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.07); }
body.theme-light .copy-btn      { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569; }
body.theme-light .copy-btn:active { background: rgba(0,0,0,0.1); }

/* Edit / delete / action buttons on cards */
body.theme-light .btn-edit-status {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); color: #1e293b;
}
body.theme-light .btn-edit-status:active { background: rgba(0,0,0,0.09); }
body.theme-light .btn-next-status {
  background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.35); color: #15803d;
}
body.theme-light .btn-next-status:active { background: rgba(22,163,74,0.16); }
body.theme-light .btn-action-icon {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1);
}
body.theme-light .btn-action-icon:active { background: rgba(0,0,0,0.09); }
body.theme-light .btn-view-photo {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #1e293b;
}
body.theme-light .btn-view-photo:active { background: rgba(0,0,0,0.08); }
body.theme-light .btn-archive-toggle {
  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: #64748b;
}
body.theme-light .btn-archive-toggle:active { background: rgba(0,0,0,0.07); color: #334155; }

/* ── Invoice cards ── */
body.theme-light .inv-card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
body.theme-light .inv-details-block { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.07); }
body.theme-light .btn-inv-paid {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.2); color: #1e293b;
}
body.theme-light .btn-inv-delete {
  background: rgba(239,68,68,0.05); border-color: rgba(239,68,68,0.15);
}

/* ── View toggle & stat chips ── */
body.theme-light .view-pill {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .view-pill.active {
  background: #0f172a; border-color: #0f172a; color: #fff;
}
body.theme-light .inv-dot { border-color: var(--bg); }
body.theme-light .stat-chip {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .stat-chip.active {
  background: #0f172a; border-color: #0f172a; color: #fff;
}
body.theme-light .country-chip {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1);
}
body.theme-light .country-chip.active {
  background: #fff; border-color: #0f172a; box-shadow: 0 0 0 1px #0f172a;
}
body.theme-light .sort-wrap {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .sort-wrap select { color: #334155; }
body.theme-light .sort-wrap select option { background: #fff; color: #0f172a; }
body.theme-light .search-box {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1);
}
body.theme-light .search-box input { color: #0f172a; }
body.theme-light .search-box input::placeholder { color: #94a3b8; }

/* ── Search / Track tab ── */
body.theme-light .track-search-card {
  background: #fff; border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
body.theme-light .track-input-wrap input { color: #0f172a; }
body.theme-light .track-input-wrap input::placeholder { color: #94a3b8; }
body.theme-light .btn-add-track {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
  color: #334155;
}
body.theme-light .btn-add-track:active { background: rgba(0,0,0,0.08); }
body.theme-light .my-id-section {
  background: #fff; border-color: rgba(0,0,0,0.08);
}
body.theme-light .my-id-value { color: #0f172a; }
body.theme-light .track-found-card {
  background: #fff; border-color: rgba(0,0,0,0.12);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
body.theme-light .track-not-found {
  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08);
}
body.theme-light .btn-claim {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); color: #1e293b;
}
body.theme-light .btn-claim:active { background: rgba(0,0,0,0.09); }
body.theme-light .history-dot { background: #334155; }

/* ── Rates tab ── */
body.theme-light .country-card {
  background: #fff; border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}
body.theme-light .country-card::before { background: linear-gradient(90deg,transparent,rgba(0,0,0,0.08),transparent); }
body.theme-light .country-badge {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #334155;
}
body.theme-light .rates-table thead th { border-bottom-color: rgba(0,0,0,0.1); }
body.theme-light .rates-table tbody tr { border-bottom-color: rgba(0,0,0,0.05); }
body.theme-light .rates-table tbody td:last-child { color: #1e293b; }
body.theme-light .store-chip {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .stores-section { border-top-color: rgba(0,0,0,0.08); }

/* ── Calculator ── */
body.theme-light .calc-card {
  background: #fff; border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}
body.theme-light .calc-card::before { background: linear-gradient(90deg,transparent,rgba(0,0,0,0.08),transparent); }
body.theme-light .calc-header { border-bottom-color: rgba(0,0,0,0.08); }
body.theme-light .country-pill {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .country-pill.active {
  background: rgba(0,0,0,0.09); border-color: rgba(0,0,0,0.2); color: #0f172a;
}
body.theme-light .tariff-pill {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .tariff-pill.active {
  background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.2); color: #0f172a;
}
body.theme-light .tariff-pill.active .pill-price { color: #334155; }
body.theme-light .calc-input-wrap {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1);
}
body.theme-light .calc-input-wrap:focus-within { border-color: rgba(0,0,0,0.25); }
body.theme-light .calc-result { border-top-color: rgba(0,0,0,0.08); }

/* ── Info tab ── */
body.theme-light .i-hero-logo {
  background: linear-gradient(135deg, #0f172a 30%, #475569);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
body.theme-light .i-hero-tag {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #334155;
}
body.theme-light .i-section-label { color: #94a3b8; }
body.theme-light .i-wh-content {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
}
body.theme-light .i-wh-content::before { background: linear-gradient(90deg,transparent,rgba(0,0,0,0.08),transparent); }
body.theme-light .i-wh-tab {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .i-wh-tab::before { background: none; }
body.theme-light .i-wh-tab.active {
  background: #fff;
  border-color: rgba(0,0,0,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
body.theme-light .i-wh-tab.active .i-wh-tab-name { color: #0f172a; }
body.theme-light .i-wh-location { color: #1e293b; }
body.theme-light .i-wh-location svg { color: #475569; }
body.theme-light .i-wh-desc { color: #475569; }
body.theme-light .i-wh-time-badge {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .i-wh-stores { color: #64748b; }
body.theme-light .i-wh-note { color: #94a3b8; }
body.theme-light .i-tl-dot { background: #0f172a; color: #fff; }
body.theme-light .i-tl-line { background: rgba(0,0,0,0.1); }
body.theme-light .i-contact-card {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1);
}
body.theme-light .i-contact-title { color: #334155; }
body.theme-light .i-contact-handle { color: #475569; }

/* Template management */
body.theme-light .tpl-mgmt-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.theme-light .tpl-mgmt-row  { border-bottom-color: rgba(0,0,0,0.07); }
body.theme-light .tpl-add-form input,
body.theme-light .tpl-add-form textarea {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #0f172a;
}
body.theme-light .btn-tpl-save {
  background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.18); color: #1e293b;
}
body.theme-light .btn-tpl-cancel {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .btn-tpl-add {
  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.12); color: #475569;
}
body.theme-light .btn-tpl-add:active { background: rgba(0,0,0,0.07); }
body.theme-light .tpl-chip {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); color: #334155;
}
body.theme-light .tpl-chip:active { background: rgba(0,0,0,0.1); }

/* Export card (admin) */
body.theme-light .export-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.theme-light .export-divider { background: rgba(0,0,0,0.07); }
body.theme-light .export-title { color: #1e293b; }
body.theme-light .export-sub   { color: #64748b; }
body.theme-light .btn-export-action {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #334155;
}
body.theme-light .backup-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.theme-light .backup-title { color: #1e293b; }
body.theme-light .backup-sub   { color: #64748b; }
body.theme-light .btn-backup-dl,
body.theme-light .btn-backup-tg,
body.theme-light .btn-backup-restore {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #334155;
}

/* ── Modals & forms ── */
body.theme-light .modal-overlay { background: rgba(0,0,0,0.4); }
body.theme-light .modal-sheet {
  background: #f8fafc;
  border-color: rgba(0,0,0,0.1);
}
body.theme-light .modal-handle { background: rgba(0,0,0,0.15); }
body.theme-light .modal-header { border-bottom-color: rgba(0,0,0,0.08); }
body.theme-light .modal-close { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569; }
body.theme-light .form-group label { color: #475569; }
body.theme-light .reg-section select,
body.theme-light #svc-new-group,
body.theme-light .form-group input,
body.theme-light .form-group select,
body.theme-light .form-group textarea {
  background: #fff; border-color: rgba(0,0,0,0.12); color: #0f172a;
}
body.theme-light .form-group input:focus,
body.theme-light .form-group select:focus,
body.theme-light .form-group textarea:focus { border-color: rgba(0,0,0,0.3); }
body.theme-light .client-form-hint { color: #64748b; }
body.theme-light .delivery-type-pill {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569;
}
body.theme-light .delivery-type-pill.active {
  background: rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.25); color: #0f172a;
}
body.theme-light .delivery-toggle-track {
  background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.15);
}
body.theme-light .delivery-toggle-knob { background: rgba(0,0,0,0.25); }
body.theme-light .delivery-tpl-name-input {
  background: #fff; border-color: rgba(0,0,0,0.12); color: #0f172a;
}
body.theme-light .pkg-no-track { color: #94a3b8; }

/* ── Loading & onboarding ── */
body.theme-light #loading { background: var(--bg); }
body.theme-light .logo-text {
  background: linear-gradient(135deg, #0f172a 30%, #475569);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
body.theme-light .logo-sub { color: #64748b; }
body.theme-light #onboarding { background: #f1f5f9; }
body.theme-light .ob-logo   { color: #0f172a; }
body.theme-light .ob-step   { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: #475569; }
body.theme-light .ob-step-n { background: #0f172a; border-color: #0f172a; color: #fff; }
body.theme-light .ob-dot    { background: rgba(0,0,0,0.15); }
body.theme-light .ob-dot.active { background: #0f172a; }
body.theme-light .ob-btn-next { background: #0f172a; color: #fff; }
body.theme-light .ob-skip { color: #94a3b8; background: rgba(0,0,0,0.05); }

/* ── Misc ── */
body.theme-light .ptr-badge { background: rgba(241,245,249,0.96); border-color: rgba(0,0,0,0.1); }
body.theme-light .ptr-icon  { color: #475569; }
body.theme-light .toast { background: #1e293b; color: #f1f5f9; border-color: rgba(255,255,255,0.1); }
body.theme-light .pkg-photo-wrap { background: rgba(0,0,0,0.04); }
body.theme-light .pkg-thumb { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
body.theme-light .i-stats { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.theme-light .i-stat-sep { background: rgba(0,0,0,0.08); }

/* ── Card stagger animation ────────────────────────────────────── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pkg-card, .inv-card {
  animation: cardIn 0.32s ease both;
}

/* ── Pull-to-refresh ───────────────────────────────────────────── */
.ptr-indicator {
  position: fixed;
  top: var(--header-h);
  left: 50%;
  transform: translateX(-50%) translateY(-52px);
  opacity: 0;
  z-index: 90;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.ptr-badge {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(15,15,26,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.ptr-icon { color: var(--text2); transition: transform 0.3s, color 0.2s; }
.ptr-indicator.ptr-ready   .ptr-icon { color: #fff; transform: rotate(180deg); }
.ptr-indicator.ptr-spinning .ptr-icon { color: #fff; animation: ptrSpin 0.7s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ── Onboarding ────────────────────────────────────────────────── */
#onboarding {
  position: fixed; inset: 0; z-index: 200;
  height: 100dvh;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#onboarding.ob-out {
  animation: obFadeOut 0.35s ease forwards;
}
@keyframes obFadeOut {
  to { opacity: 0; transform: scale(0.97); }
}

.ob-skip {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  font-size: 13px; font-weight: 500; color: var(--text3);
  padding: 6px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.05);
  transition: color 0.2s, background 0.2s;
}
.ob-skip:hover { color: var(--text2); background: rgba(255,255,255,0.09); }

.ob-slides-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.ob-slides-inner {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.ob-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  padding: 60px 28px 20px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  overflow-y: auto;
}

/* Icon */
.ob-icon-wrap {
  position: relative; margin-bottom: 28px;
}
.ob-icon {
  font-size: 64px; line-height: 1;
  filter: drop-shadow(0 4px 24px rgba(255,255,255,0.15));
  animation: obIconFloat 3s ease-in-out infinite;
}
.ob-logo-img {
  width: 96px; height: auto; display: block;
  filter: invert(1) drop-shadow(0 4px 24px rgba(255,255,255,0.15));
}
body.theme-light .ob-logo-img { filter: drop-shadow(0 4px 24px rgba(0,0,0,0.12)); }
@keyframes obIconFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.ob-icon-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 100px;
  border-radius: 50%; filter: blur(32px);
  pointer-events: none;
}
.ob-glow-white  { background: rgba(255,255,255,0.12); }
.ob-glow-blue   { background: rgba(59,130,246,0.25); }
.ob-glow-yellow { background: rgba(245,158,11,0.25); }
.ob-glow-green  { background: rgba(34,197,94,0.25); }

/* Logo on slide 1 */
.ob-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px; font-weight: 900; letter-spacing: 6px;
  color: #ffffff; margin-bottom: 16px;
}

.ob-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px; font-weight: 800;
  color: #ffffff; line-height: 1.25;
  margin-bottom: 14px;
}
.ob-desc {
  font-size: 14px; line-height: 1.65;
  color: var(--text2); max-width: 300px;
  margin-bottom: 28px;
}

/* Steps */
.ob-steps {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 300px; text-align: left;
}
.ob-step {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--text2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
.ob-step-n {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 11px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* Final note (slide 4) */
.ob-final-note {
  margin-top: 4px;
  font-size: 13px; font-weight: 600;
  color: var(--green);
  background: var(--green-glow);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 999px; padding: 8px 20px;
}

/* Footer */
.ob-footer {
  padding: 16px 24px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ob-dots {
  display: flex; gap: 7px; align-items: center;
}
.ob-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: width 0.25s ease, background 0.25s ease;
}
.ob-dot.active {
  width: 20px; border-radius: 4px;
  background: #ffffff;
}
.ob-btn-next {
  width: 100%; max-width: 320px;
  padding: 15px 0; border-radius: 14px;
  background: #ffffff; color: #08080f;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.3px;
  transition: opacity 0.2s, transform 0.15s;
}
.ob-btn-next:active { opacity: 0.85; transform: scale(0.98); }


/* ── Skeleton ──────────────────────────────────────────────────── */
.skel {
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.05) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s infinite linear;
}

/* ── Layout toggle (карточки / таблица, веб-версия) ────────────── */
.layout-toggle {
  display: flex; align-items: center; gap: 3px;
  margin-left: auto; padding: 3px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 99px;
}
.layout-btn {
  width: 32px; height: 26px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); transition: background 0.15s, color 0.15s;
}
.layout-btn:hover { color: var(--text2); }
.layout-btn.active { background: rgba(255,255,255,0.12); color: #fff; }
body.theme-light .layout-toggle { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
body.theme-light .layout-btn.active { background: rgba(0,0,0,0.1); color: #0f172a; }

/* ── Табличный вид посылок (как Live-таблица) ──────────────────── */
.card-list.table-mode { display: block; }
.pkg-table-wrap {
  overflow-x: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; margin-bottom: 16px;
  animation: fadeInUp 0.22s ease-out;
}
.pkg-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
.pkg-table thead th {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text3); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; white-space: nowrap;
}
.pkg-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s; cursor: pointer;
}
.pkg-table tbody tr:last-child { border-bottom: none; }
.pkg-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.pkg-table td { padding: 10px 12px; vertical-align: middle; }
.pkg-table .track { font-family: monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; }
.pkg-table .muted { color: var(--text3); }
.pkg-table .status-badge { white-space: nowrap; }
.pkg-table .tbl-item { display: flex; align-items: center; gap: 8px; min-width: 120px; max-width: 220px; }
.pkg-table .tbl-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-table .tbl-thumb {
  width: 26px; height: 26px; border-radius: 6px; object-fit: cover;
  flex-shrink: 0; border: 1px solid var(--border); cursor: zoom-in;
}
body.theme-light .pkg-table tbody tr { border-bottom-color: rgba(0,0,0,0.05); }
body.theme-light .pkg-table tbody tr:hover { background: rgba(0,0,0,0.03); }
body.theme-light .pkg-table thead th { border-bottom-color: rgba(0,0,0,0.1); }

/* ── Web refresh (зелёная иконка обновления в шапке веб-версии) ── */
.web-refresh { display: flex; align-items: center; margin-right: 2px; }
.btn-web-refresh {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35);
  color: #4ade80; transition: background 0.15s;
}
.btn-web-refresh:hover { background: rgba(34,197,94,0.22); }
.btn-web-refresh.spinning svg { animation: spin 0.6s linear infinite; }
body.theme-light .btn-web-refresh {
  background: rgba(22,163,74,0.1); border-color: rgba(22,163,74,0.35); color: #16a34a;
}

/* ── Desktop / веб-версия ──────────────────────────────────────── */
@media (min-width: 880px) {
  /* Ярче контраст на большом экране (светлая тема переопределяет ниже) */
  :root {
    --card:       rgba(255,255,255,0.07);
    --card-hover: rgba(255,255,255,0.11);
    --border:     rgba(255,255,255,0.14);
    --border-acc: rgba(255,255,255,0.32);
    --text2:      #c2cdda;
    --text3:      #8b9bb3;
  }

  button, select, label, .nav-item { cursor: pointer; }

  /* Header */
  #header { padding: 0 32px; }
  .brand-name { font-size: 20px; }
  .brand-tag { font-size: 9px; }

  /* Content: посылки во всю ширину, остальные вкладки по центру */
  #content { padding-bottom: 120px; }
  .tab-section { max-width: none; margin: 0 auto; padding: 28px 36px 0; }
  #tab-track { max-width: 680px; }
  #tab-info  { max-width: 760px; }
  #tab-rates { max-width: 1020px; }
  .section-header h2 { font-size: 24px; }

  /* Ярче бейджи статусов */
  .badge-pending    { background: rgba(255,255,255,0.14); color: #ffffff; border-color: rgba(255,255,255,0.5); }
  .badge-received   { background: rgba(249,115,22,0.22); color: #fdba74; border-color: rgba(249,115,22,0.45); }
  .badge-processing { background: rgba(148,163,184,0.2); color: #cbd5e1; border-color: rgba(148,163,184,0.4); }
  .badge-shipped    { background: rgba(59,130,246,0.22); color: #93c5fd; border-color: rgba(59,130,246,0.45); }
  .badge-ready      { background: rgba(34,197,94,0.22);  color: #86efac; border-color: rgba(34,197,94,0.5); }
  .badge-delivered  { background: rgba(148,163,184,0.16); color: #b6c2d1; border-color: rgba(148,163,184,0.35); }
  body.theme-light .badge-pending    { background: rgba(15,23,42,0.06); color: #334155; border-color: rgba(15,23,42,0.28); }
  body.theme-light .badge-received   { background: rgba(249,115,22,0.12); color: #ea580c; border-color: rgba(249,115,22,0.3); }
  body.theme-light .badge-processing { background: rgba(100,116,139,0.1); color: #475569; border-color: rgba(100,116,139,0.25); }
  body.theme-light .badge-shipped    { background: rgba(59,130,246,0.1);  color: #2563eb; border-color: rgba(59,130,246,0.3); }
  body.theme-light .badge-ready      { background: rgba(34,197,94,0.12);  color: #15803d; border-color: rgba(34,197,94,0.35); }
  body.theme-light .badge-delivered  { background: rgba(100,116,139,0.1); color: #64748b; border-color: rgba(100,116,139,0.25); }

  /* Статистика — карточки с крупными цифрами, как в Live-таблице */
  .stats-row { gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
  .stat-chip {
    flex-direction: column-reverse; align-items: flex-start; gap: 2px;
    min-width: 108px; padding: 10px 16px 9px;
    border-radius: 12px; font-size: 12px; font-weight: 500;
  }
  .stat-chip span {
    opacity: 1; font-size: 22px; font-weight: 700; line-height: 1.1; color: #fff;
  }
  .stat-chip[data-filter="pending"]  span { color: #94a3b8; }
  .stat-chip[data-filter="received"] span { color: #fb923c; }
  .stat-chip[data-filter="shipped"]  span { color: #60a5fa; }
  .stat-chip[data-filter="ready"]    span { color: #4ade80; }
  .stat-chip.active { box-shadow: 0 0 0 1px var(--border-acc); }
  body.theme-light .stat-chip span { color: #0f172a; }
  body.theme-light .stat-chip[data-filter="pending"]  span { color: #64748b; }
  body.theme-light .stat-chip[data-filter="received"] span { color: #ea580c; }
  body.theme-light .stat-chip[data-filter="shipped"]  span { color: #2563eb; }
  body.theme-light .stat-chip[data-filter="ready"]    span { color: #16a34a; }

  /* Карточки посылок и счетов — сетка */
  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px;
    align-items: start;
  }
  .card-list > .empty-state,
  .card-list > .btn-archive-toggle,
  .card-list > .archive-list { grid-column: 1 / -1; }
  .archive-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px;
    align-items: start;
  }
  .pkg-card, .inv-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .pkg-card:hover, .inv-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.4);
  }
  body.theme-light .pkg-card:hover,
  body.theme-light .inv-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.12); }

  /* Тарифы — две колонки */
  #rates-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  .calc-card { max-width: 640px; }

  /* Навигация — плавающая панель снизу по центру */
  #bottom-nav {
    left: 50%; right: auto; bottom: 18px;
    transform: translateX(-50%);
    height: auto; padding: 6px;
    border: 1px solid var(--border); border-radius: 999px;
    background: rgba(10,10,18,0.88); backdrop-filter: blur(24px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    gap: 4px;
  }
  .nav-item {
    flex: none;
    flex-direction: row; gap: 8px;
    padding: 10px 20px; border-radius: 999px;
    font-size: 13px;
  }
  .nav-item svg { width: 18px; height: 18px; }
  .nav-item:hover { color: var(--text2); }
  .nav-item.active { background: rgba(255,255,255,0.1); color: #fff; }
  .nav-item.active svg { stroke: #fff; }
  body.theme-light #bottom-nav {
    background: rgba(255,255,255,0.92);
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.14);
  }
  body.theme-light .nav-item:hover  { color: #475569; }
  body.theme-light .nav-item.active { background: rgba(0,0,0,0.07); color: #0f172a; }

  /* Модалки — по центру экрана вместо шторки снизу */
  .modal-overlay { align-items: center; justify-content: center; padding: 32px; }
  .modal-sheet {
    max-width: 540px; max-height: 86vh;
    border-radius: 20px; padding: 24px 28px 30px;
    animation: modalPop 0.22s ease-out;
  }
  .modal-handle { display: none; }

  /* Ховеры для кнопок */
  .view-pill:hover, .stat-chip:hover, .country-pill:hover, .tariff-pill:hover,
  .btn-export-action:hover, .btn-tpl-add:hover, .tpl-chip:hover,
  .btn-edit-status:hover, .btn-action-icon:hover, .btn-archive-toggle:hover,
  .btn-backup-dl:hover, .btn-backup-tg:hover, .btn-backup-restore:hover,
  .copy-btn:hover, .modal-close:hover, .btn-theme:hover {
    background: rgba(255,255,255,0.1);
  }
  body.theme-light .view-pill:hover, body.theme-light .stat-chip:hover,
  body.theme-light .country-pill:hover, body.theme-light .tariff-pill:hover,
  body.theme-light .btn-export-action:hover, body.theme-light .btn-tpl-add:hover,
  body.theme-light .tpl-chip:hover, body.theme-light .btn-edit-status:hover,
  body.theme-light .btn-action-icon:hover, body.theme-light .btn-archive-toggle:hover,
  body.theme-light .btn-backup-dl:hover, body.theme-light .btn-backup-tg:hover,
  body.theme-light .btn-backup-restore:hover, body.theme-light .copy-btn:hover,
  body.theme-light .modal-close:hover, body.theme-light .btn-theme:hover {
    background: rgba(0,0,0,0.07);
  }
  .btn-add-admin:hover { opacity: 0.85; }
  .btn-delete:hover { background: rgba(239,68,68,0.15); }
  .btn-primary:hover, .btn-primary-sm:hover { opacity: 0.88; }

  /* Pull-to-refresh на десктопе не нужен */
  .ptr-indicator { display: none; }
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ── QR-сканер: полноэкранная камера с прицелом ── */
#qr-scan-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; background: #000;
}
.qrscan-box { position: relative; width: 100%; height: 100%; overflow: hidden; }
.qrscan-box video { width: 100%; height: 100%; object-fit: cover; }
.qrscan-frame {
  position: absolute; top: 50%; left: 50%; width: 230px; height: 230px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,.92); border-radius: 22px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45);
  pointer-events: none;
}
.qrscan-hint {
  position: absolute; left: 20px; right: 20px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  text-align: center; color: #fff; font-size: 14px; font-weight: 500;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.qrscan-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 19px;
  backdrop-filter: blur(6px);
}

/* Подсветка карточки после скана */
@keyframes cardFlash {
  0%   { box-shadow: 0 0 0 2px rgba(96,165,250,0); }
  25%  { box-shadow: 0 0 0 2px rgba(96,165,250,.85), 0 0 22px rgba(96,165,250,.5); }
  100% { box-shadow: 0 0 0 2px rgba(96,165,250,0); }
}
.card-flash { animation: cardFlash 1.4s ease-out; }

/* ── Журнал смены статусов (виден только админу) ─────────────────── */
.pkg-status-col { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pkg-status-since { font-size: 10px; color: var(--text3); white-space: nowrap; }
.pkg-created-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--text3); position: relative; z-index: 1;
}
.btn-status-log {
  flex-shrink: 0; padding: 3px 8px; font-size: 10.5px; font-weight: 600;
  color: var(--text2); background: rgba(255,255,255,0.04);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-status-log:active, .btn-status-log.active { background: rgba(255,255,255,0.1); color: var(--text); }
.pkg-status-log { margin-top: 10px; position: relative; z-index: 1; }

/* Путь посылки — плашки шагов, соединённые линией */
.pkg-route { display: flex; flex-direction: column; gap: 0; }
.rt-step {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--card);
  position: relative;
}
.rt-step + .rt-step { margin-top: 9px; }
/* соединительная линия между плашками */
.rt-step + .rt-step::before {
  content: ''; position: absolute; left: 23px; top: -9px; width: 2px; height: 9px;
  background: var(--border);
}
.rt-mark {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; line-height: 1;
  border: 1px solid var(--border); background: transparent; color: transparent;
}
.rt-body { min-width: 0; }
.rt-name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.rt-sub { font-size: 11.5px; color: var(--text3); margin-top: 2px; }

.rt-done { border-color: rgba(34,197,94,0.35); }
.rt-done .rt-mark { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.45); color: #4ade80; }
.rt-done + .rt-step::before, .rt-done::before { background: rgba(34,197,94,0.35); }

.rt-current { border-color: rgba(59,130,246,0.5); background: rgba(59,130,246,0.08); }
.rt-current .rt-mark { background: rgba(59,130,246,0.22); border-color: rgba(59,130,246,0.5); color: #60a5fa; }

.rt-next { opacity: 0.45; }
.rt-next .rt-name { font-weight: 600; }

.rt-returned { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.07); }
.rt-returned .rt-mark { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.45); color: #f87171; }
.rt-returned .rt-name { color: #f87171; }

body.theme-light .rt-done { border-color: rgba(22,163,74,0.4); }
body.theme-light .rt-current { background: rgba(59,130,246,0.07); border-color: rgba(37,99,235,0.45); }
body.theme-light .rt-returned .rt-name { color: #b91c1c; }
body.theme-light .btn-status-log { background: rgba(0,0,0,0.03); }
body.theme-light .btn-status-log:active, body.theme-light .btn-status-log.active { background: rgba(0,0,0,0.08); }
body.theme-light .pkg-status-log { background: rgba(0,0,0,0.02); }
.group-item-since { font-size: 10px; color: var(--text3); white-space: nowrap; margin-top: 2px; }

/* Возврат — около-красный статус, ставится вручную */
.badge-returned { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.32); }
body.theme-light .badge-returned { background: rgba(239,68,68,0.1); color: #b91c1c; border-color: rgba(185,28,28,0.3); }

/* ── Мини-бар быстрых действий (тап по карточке) ─────────────────── */
.action-sheet { padding-bottom: 26px; }
.action-sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.action-sheet-titles { min-width: 0; }
.action-sheet-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.action-sheet-sub { font-size: 12px; color: var(--text3); margin-top: 3px; }
.action-sheet-grid { display: flex; flex-direction: column; gap: 8px; }
.action-sheet-grid .sheet-action {
  display: flex; align-items: center; gap: 12px; width: 100%; height: auto;
  padding: 13px 14px; text-align: left;
  font-size: 14.5px; font-weight: 600; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.action-sheet-grid .sheet-action:active { background: rgba(255,255,255,0.08); }
.action-sheet-grid .sheet-action-icon { font-size: 18px; line-height: 1; flex-shrink: 0; width: 22px; text-align: center; }
.action-sheet-grid .sheet-action-label { flex: 1; min-width: 0; }
.action-sheet-grid .sheet-action-danger { color: #f87171; border-color: rgba(239,68,68,0.28); }
.action-sheet-grid .sheet-action-danger:active { background: rgba(239,68,68,0.12); }
body.theme-light .action-sheet-grid .sheet-action:active { background: rgba(0,0,0,0.06); }
body.theme-light .action-sheet-grid .sheet-action-danger { color: #b91c1c; }

/* Карточка админа кликабельна — открывает мини-бар */
body.is-admin .pkg-card { cursor: pointer; }
/* Кнопки внутри бара несут рабочие классы (btn-group-invoice и т.п.) —
   гасим их собственную окраску, чтобы вид бара был одинаков в обеих темах */
body .action-sheet-grid .sheet-action {
  background: var(--card); border-color: var(--border); color: var(--text);
}
body .action-sheet-grid .sheet-action-danger { color: #f87171; border-color: rgba(239,68,68,0.28); }
body.theme-light .action-sheet-grid .sheet-action-danger { color: #b91c1c; }

/* Подсказка под полем формы */
.field-hint { font-size: 11.5px; color: var(--text3); line-height: 1.45; margin-top: 5px; }
body.theme-light .field-hint { color: #64748b; }

/* Способ получения посылки: сбор с пункта выдачи — платный */
.pkg-pickup {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding: 5px 9px; position: relative; z-index: 1;
  font-size: 11.5px; font-weight: 600; color: #c4b5fd;
  background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.28);
  border-radius: 999px;
}
body.theme-light .pkg-pickup { color: #6d28d9; background: rgba(167,139,250,0.14); border-color: rgba(109,40,217,0.28); }
.pkg-delivery-cost { font-size: 12px; font-weight: 600; color: var(--text2); margin-top: 6px; }

/* Второй шаг мини-бара: список посылок связки */
.action-sheet-grid .sheet-action-label { display: flex; flex-direction: column; gap: 2px; }
.action-sheet-grid .sheet-action-sub { font-size: 11px; font-weight: 500; color: var(--text3); }
.action-sheet-grid .sheet-action-tail { flex-shrink: 0; font-size: 15px; opacity: 0.7; }

/* ── Калькулятор: все тарифы сразу, как сравнение ────────────────── */
.calc-options { margin-top: 14px; position: relative; z-index: 1; }
.calc-opts-head {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 8px;
}
.calc-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; margin-bottom: 7px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.calc-opt-best { border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.07); }
.calc-opt-off { opacity: 0.45; }
.calc-opt-main { min-width: 0; }
.calc-opt-name {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.calc-opt-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #4ade80; background: rgba(34,197,94,0.14);
  border: 1px solid rgba(34,197,94,0.3); border-radius: 999px; padding: 2px 7px;
}
.calc-opt-sub { font-size: 11.5px; color: var(--text3); margin-top: 3px; }
.calc-opt-right { flex-shrink: 0; text-align: right; }
.calc-opt-total { font-size: 15.5px; font-weight: 800; color: var(--text); }
.calc-opt-rate { font-size: 11px; color: var(--text3); margin-top: 2px; white-space: nowrap; }
.calc-opts-off-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text3); margin: 12px 0 7px;
}
.calc-opts-note { font-size: 11px; color: var(--text3); line-height: 1.45; margin-top: 8px; }
body.theme-light .calc-opt-badge { color: #15803d; }
body.theme-light .calc-opt-best { background: rgba(34,197,94,0.1); border-color: rgba(22,163,74,0.4); }

/* ── Услуги склада ───────────────────────────────────────────────── */
.svc-block {
  margin-bottom: 10px; padding: 10px 12px; position: relative; z-index: 1;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.svc-block-title { font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 8px; }
.svc-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 5px 0; }
.svc-row + .svc-row { border-top: 1px solid var(--border); }
.svc-row-main { min-width: 0; flex: 1; }
.svc-row-name { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
.svc-row-done .svc-row-name { color: var(--text2); }
.svc-urgent-tag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: #fbbf24; background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.3); border-radius: 999px; padding: 1px 6px;
}
.svc-row-comment { font-size: 11px; color: var(--text3); margin-top: 2px; line-height: 1.35; }
.svc-row-right { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.svc-row-price { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.svc-row-done-btn, .svc-row-del {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; font-size: 11px; line-height: 1;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text2); cursor: pointer;
}
.svc-row-done-btn { color: #4ade80; border-color: rgba(34,197,94,0.3); }
.svc-row-del { color: #f87171; border-color: rgba(239,68,68,0.25); }
.btn-order-services {
  width: 100%; margin-top: 8px; padding: 9px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 700; color: var(--text);
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); cursor: pointer;
}
.btn-order-services:active { background: rgba(255,255,255,0.1); }

/* Модалка заказа */
.svc-pick-sub { font-size: 12px; color: var(--text3); margin-bottom: 12px; }
.svc-pick-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.svc-pick {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
}
.svc-pick input { width: 17px; height: 17px; flex-shrink: 0; accent-color: #4ade80; }
.svc-pick-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.svc-pick-price { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--text2); }
.svc-urgent {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 12px;
  background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.25);
  border-radius: var(--radius-sm); cursor: pointer;
}
.svc-urgent input { width: 17px; height: 17px; accent-color: #fbbf24; }
.svc-urgent-text { font-size: 13.5px; font-weight: 600; color: var(--text); }
.svc-urgent-fee { color: var(--text3); font-weight: 500; }
.svc-total-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; margin-bottom: 4px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text2);
}
.svc-total-val { font-size: 17px; font-weight: 800; color: var(--text); }

/* Админский прайс */
/* Услуга в прайсе: название сверху на всю ширину, ниже цена и кнопки */
.svc-admin-item {
  padding: 11px; margin-bottom: 9px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
}
.svc-admin-off { opacity: 0.5; }
.svc-admin-row { display: flex; align-items: center; gap: 7px; }
.svc-admin-item input {
  padding: 9px 11px; font-size: 13px; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
}
.svc-admin-name { width: 100%; margin-bottom: 8px; font-weight: 600; }
.svc-admin-price-wrap { position: relative; flex-shrink: 0; }
.svc-admin-price { width: 92px; padding-right: 26px !important; text-align: right; }
.svc-admin-cur {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--text3); pointer-events: none;
}
.svc-admin-group {
  flex: 1; min-width: 0; height: 36px; padding: 0 8px; border-radius: 9px;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); color: var(--text2); cursor: pointer;
}
.svc-admin-toggle, .svc-admin-del {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; font-size: 13px;
  background: var(--card); border: 1px solid var(--border); color: var(--text2); cursor: pointer;
}
.svc-admin-del { color: #f87171; border-color: rgba(239,68,68,0.25); }
body.theme-light .svc-admin-item { background: rgba(0,0,0,0.02); }
.svc-admin-urgent { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.svc-admin-urgent label { font-size: 12px; color: var(--text3); flex: 1; }
.svc-admin-urgent input {
  width: 92px; padding: 8px 10px; font-size: 12.5px; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
body.theme-light .svc-block { background: rgba(0,0,0,0.02); }
body.theme-light .btn-order-services { background: rgba(0,0,0,0.03); }
body.theme-light .svc-urgent-tag { color: #92400e; }

/* Выгода связки — по отдельности против одной отправки */
.grp-save {
  position: relative; z-index: 1; margin-bottom: 10px; padding: 11px 12px;
  border: 1px solid rgba(34,197,94,0.35); background: rgba(34,197,94,0.06);
  border-radius: 14px;
}
.grp-save-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.grp-save-old { color: var(--text3); font-size: 12px; }
.grp-save-strike { text-decoration: line-through; }
.grp-save-label { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 2px; }
.grp-save-new { font-size: 16px; font-weight: 800; color: #4ade80; }
.grp-save-badge {
  display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #052e16; background: #4ade80;
}
body.theme-light .grp-save-new { color: #15803d; }
body.theme-light .grp-save-badge { background: #16a34a; color: #fff; }

/* ── Форма регистрации посылки: подсказка и секции-вопросы ───────── */
.reg-hint {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 16px;
  background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.25);
  border-radius: 14px; font-size: 12.5px; line-height: 1.45; color: var(--text2);
}
.reg-hint-icon {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; font-style: italic;
  background: rgba(96,165,250,0.2); color: #60a5fa;
}
.reg-section {
  margin: 16px 0; padding-top: 16px; border-top: 1px solid var(--border);
}
.reg-section-title { font-size: 14.5px; font-weight: 700; color: #60a5fa; margin-bottom: 5px; }
.reg-section-sub { font-size: 12px; color: var(--text3); line-height: 1.45; margin-bottom: 11px; }
.svc-admin-group {
  width: 30px; height: 32px; flex-shrink: 0; border-radius: 8px; font-size: 12px;
  background: var(--card); border: 1px solid var(--border); cursor: pointer;
}
#svc-new-group {
  padding: 10px 12px; font-size: 13px; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
body.theme-light .reg-section-title { color: #2563eb; }
body.theme-light .reg-hint { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.2); }
.pkg-wishes {
  position: relative; z-index: 1; margin-bottom: 10px; padding: 8px 10px;
  font-size: 12px; line-height: 1.4; color: var(--text2);
  background: rgba(96,165,250,0.07); border: 1px solid rgba(96,165,250,0.22);
  border-radius: var(--radius-sm);
}

body.theme-light .reg-section select option,
body.theme-light #svc-new-group option,
body.theme-light .form-group select option { background: #fff; color: #0f172a; }

/* ══ Стиль Pochtoy: воздух, крупная типографика, мягкие карточки ══ */

/* Карточки — больше воздуха и мягкая тень вместо жёсткой рамки */
.pkg-card, .inv-card, .country-card, .track-found-card {
  padding: var(--pad-card) 18px;
  box-shadow: var(--shadow-card);
}
body.theme-light .pkg-card,
body.theme-light .inv-card,
body.theme-light .country-card,
body.theme-light .track-found-card { background: #fff; border-color: rgba(15,23,42,0.07); }
body.theme-light { --shadow-card: 0 4px 30px rgba(64,129,255,0.10); }

/* Трек-номер крупнее и заметнее — у них это главный якорь карточки */
.pkg-track-label { font-size: 10.5px; letter-spacing: 0.08em; }
.pkg-track-num { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }

/* Название товара — заголовок карточки */
.pkg-item-name { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; }

/* Цифры-акценты: стоимость и суммы крупнее */
.pkg-detail-label { font-size: 10.5px; letter-spacing: 0.06em; }
.pkg-detail-val { font-size: 14.5px; font-weight: 700; }
.group-total-sum { font-size: 17px; font-weight: 800; }
.inv-amount { letter-spacing: -0.5px; }

/* Статус-бейджи — пилюли с большим воздухом */
.status-badge { padding: 5px 11px; font-size: 11px; font-weight: 700; border-radius: 999px; }

/* Заголовки разделов — их манера: крупно, плотный трекинг */
.section-header h2, .modal-header h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.4px;
}
/* Manrope — только в светлой теме, тёмная остаётся на Inter */
body.theme-light { font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.i-section-label { font-size: 11px; letter-spacing: 0.1em; }

/* Кнопки — крупнее и мягче */
.btn-primary { padding: 15px; font-size: 15.5px; border-radius: var(--radius-sm); letter-spacing: -0.2px; }
.btn-edit-status, .btn-group-advance, .btn-group-invoice, .btn-client-remove, .btn-inv-paid {
  border-radius: var(--radius-sm); font-size: 13.5px;
}

/* Поля ввода — выше и мягче, как у них */
.reg-section select, #svc-new-group,
.form-group input, .form-group select, .form-group textarea {
  border-radius: var(--radius-xs); padding: 12px 14px; font-size: 14.5px;
}
.form-group label { font-size: 12.5px; font-weight: 600; }

/* Позиции внутри связки и плашки списков */
.group-item { padding: 11px 13px; }
.group-item-name { font-size: 13.5px; }
.svc-pick, .rt-step, .sheet-action { border-radius: var(--radius-sm); }

/* Нижняя навигация и шапка — чуть просторнее */
.nav-item span { font-size: 10.5px; font-weight: 600; }

/* Админский редактор тарифов доставки */
.rate-admin-country { margin-bottom: 14px; }
.rate-admin-country + .rate-admin-country { padding-top: 12px; border-top: 1px solid var(--border); }
.rate-admin-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rate-admin-flag { font-size: 16px; flex-shrink: 0; }
.rate-admin-name { font-size: 13.5px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; }
.rate-admin-days {
  width: 110px; flex-shrink: 0; padding: 7px 10px; font-size: 12px; text-align: right;
  color: var(--text2); background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
.rate-admin-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rate-admin-tariff { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text2); }
.rate-admin-price {
  width: 92px; flex-shrink: 0; padding: 8px 10px; font-size: 12.5px; text-align: right;
  color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
.rate-admin-unit { width: 52px; flex-shrink: 0; font-size: 11px; color: var(--text3); }

/* ── Полоса «требует действия» ───────────────────────────────────── */
.attention-bar {
  margin: 0 0 12px; padding: 11px 12px;
  background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.28);
  border-radius: var(--radius-sm);
}
.att-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fbbf24; margin-bottom: 8px;
}
.att-chips { display: flex; flex-direction: column; gap: 6px; }
.att-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px; text-align: left;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
}
.att-chip.active { border-color: rgba(251,191,36,0.6); background: rgba(251,191,36,0.1); }
.att-count {
  flex-shrink: 0; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #1f1300; background: #fbbf24;
}
.att-reset { justify-content: center; color: var(--text2); font-weight: 600; }
body.theme-light .attention-bar { background: rgba(251,191,36,0.1); border-color: rgba(180,120,20,0.3); }
body.theme-light .att-title { color: #92400e; }
body.theme-light .att-chip { background: #fff; }

/* ── Страховка ───────────────────────────────────────────────────── */
.ins-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ins-tier {
  font-size: 11.5px; font-weight: 600; color: var(--text2); padding: 4px 9px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
}
.ins-pick { margin-top: 10px; }
.pkg-insured {
  position: relative; z-index: 1; margin-bottom: 10px; padding: 8px 10px;
  font-size: 12px; font-weight: 600; color: #60a5fa;
  background: rgba(96,165,250,0.07); border: 1px solid rgba(96,165,250,0.25);
  border-radius: var(--radius-sm);
}
body.theme-light .pkg-insured { color: #1d4ed8; }
.ins-admin-toggle {
  display: flex; align-items: center; gap: 8px; height: 100%; min-height: 44px;
  padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--text);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: var(--radius-xs); cursor: pointer;
}
.ins-admin-toggle input { width: 17px; height: 17px; accent-color: #60a5fa; flex-shrink: 0; }
body.theme-light .ins-admin-toggle { background: #fff; border-color: rgba(0,0,0,0.12); }

/* Ступени страховки в админском прайсе */
.ins-admin { margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--border); }
.ins-admin-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ins-admin-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ins-admin-label { width: 52px; flex-shrink: 0; font-size: 12px; color: var(--text3); }
.ins-admin-row input {
  width: 86px; padding: 8px 10px; font-size: 12.5px; text-align: right; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
.ins-admin-cur, .ins-admin-arrow { font-size: 12px; color: var(--text3); }
.ins-admin-row .ins-admin-max-ro { opacity: 0.5; cursor: not-allowed; }

/* ══ Иконки: Tabler (спрайт в index.html) ═══════════════════════════
   .ic — линейная иконка в цвет текста; .ic-tile — иконка в цветной
   плашке, цвет плашки говорит о смысле действия:
   amber — услуги склада, green — деньги, blue — доставка и адреса,
   violet — метки и фото, teal — защита, red — опасное, gray — прочее */
.ic {
  width: 1em; height: 1em; flex-shrink: 0; display: inline-block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.14em;
}
.ic-tile {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ic-tile .ic { width: 17px; height: 17px; vertical-align: 0; }
.ic-tile.sm { width: 24px; height: 24px; border-radius: 7px; }
.ic-tile.sm .ic { width: 14px; height: 14px; }
.ic-amber  { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.ic-green  { background: rgba(74,222,128,0.14);  color: #4ade80; }
.ic-blue   { background: rgba(96,165,250,0.15);  color: #60a5fa; }
.ic-violet { background: rgba(167,139,250,0.16); color: #a78bfa; }
.ic-teal   { background: rgba(45,212,191,0.14);  color: #2dd4bf; }
.ic-red    { background: rgba(248,113,113,0.15); color: #f87171; }
.ic-gray   { background: rgba(148,163,184,0.14); color: #94a3b8; }
body.theme-light .ic-amber  { background: #fef3c7; color: #b45309; }
body.theme-light .ic-green  { background: #dcfce7; color: #15803d; }
body.theme-light .ic-blue   { background: #dbeafe; color: #1d4ed8; }
body.theme-light .ic-violet { background: #ede9fe; color: #6d28d9; }
body.theme-light .ic-teal   { background: #ccfbf1; color: #0f766e; }
body.theme-light .ic-red    { background: #fee2e2; color: #b91c1c; }
body.theme-light .ic-gray   { background: #f1f5f9; color: #475569; }
.action-sheet-grid .sheet-action-icon { width: auto; min-width: 30px; display: inline-flex; align-items: center; justify-content: center; }
.att-label { display: inline-flex; align-items: center; gap: 9px; }
.att-reset { gap: 6px; }
.ic-tile.lg { width: 72px; height: 72px; border-radius: 22px; }
.ic-tile.lg .ic { width: 36px; height: 36px; }
.export-icon { width: auto; font-size: 0; }
/* Иконки в кнопках и бейджах — с отступом от текста */
.view-pill .ic, .inv-badge .ic, .btn-status-log .ic, .pkg-delivery-title .ic,
.btn-inv-confirm .ic, .btn-inv-cancel .ic, .btn-group-invoice .ic, #group-bar-apply .ic,
.btn-claim .ic, .photo-zone-remove .ic { margin-right: 2px; }
.svc-row-name .ic-ok { color: #4ade80; }
.svc-row-name .ic-wait { color: #fbbf24; }
body.theme-light .svc-row-name .ic-ok { color: #15803d; }
body.theme-light .svc-row-name .ic-wait { color: #b45309; }

/* ══ Карточка посылки: один ровный список вместо стопки коробок ══════
   Как у Pochtoy: подпись приглушённая сверху, значение под ней,
   строки разделены тонкой линией, без собственных рамок и заливок */
.pkg-info {
  position: relative; z-index: 1; margin: 2px 0 12px;
  border-top: 1px solid var(--border);
}
.pi-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.pi-ic {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text2); background: rgba(255,255,255,0.04); font-size: 15px;
}
.pi-main { flex: 1; min-width: 0; }
.pi-label { font-size: 11.5px; color: var(--text3); line-height: 1.3; }
.pi-val {
  font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.4;
  margin-top: 2px; overflow-wrap: anywhere;
}
.pi-sub { font-weight: 500; color: var(--text3); white-space: nowrap; }
.pi-sub-line { font-size: 12px; color: var(--text2); margin-top: 3px; overflow-wrap: anywhere; }
.pi-tag {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; vertical-align: 1px;
  color: #fbbf24; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3);
}
.pi-btn { margin-top: 8px; }

/* Подпункты услуг внутри строки — без своей рамки */
.pi-subrows { margin-top: 6px; }
.pi-subrows .svc-row { padding: 5px 0; }
.pi-subrows .svc-row + .svc-row { border-top: 1px dashed var(--border); }
.pi-subrows .svc-row-name { font-size: 12.5px; font-weight: 500; }

/* Строка «страна · способ получения» — без отдельной пилюли */
.pkg-meta-dot { margin: 0 6px; color: var(--text3); }
.pkg-meta-pickup { display: inline-flex; align-items: center; gap: 4px; color: #a78bfa; }
.pkg-pending-hint { font-size: 12.5px; color: var(--text3); margin-bottom: 10px; position: relative; z-index: 1; }

body.theme-light .pi-ic { background: #f1f5f9; color: #475569; }
body.theme-light .pi-tag { color: #92400e; background: #fef3c7; border-color: rgba(180,120,20,0.3); }
body.theme-light .pkg-meta-pickup { color: #6d28d9; }
.pi-text { font-weight: 500; color: var(--text2); }
.pi-sub { white-space: normal; }

/* Светлая тема: основная кнопка — заливка, как у Pochtoy («Зарегистрировать»).
   Раньше белая кнопка терялась на белом листе модалки */
body.theme-light .btn-primary {
  background: #5b72ec; color: #fff; box-shadow: 0 4px 16px rgba(91,114,236,0.28);
}
body.theme-light .btn-primary:active { background: #4c63dc; }
/* Серая плашка не должна сливаться со светлым фоном страницы */
body.theme-light .ic-gray { background: #e2e8f0; color: #475569; }

/* ══ Шапка карточки как у Pochtoy: «Посылка» + трек акцентным цветом ══ */
.pkg-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0;
}
.pkg-title-word { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
.pkg-title-track {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  padding: 0; background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: -0.2px;
  color: #8fa0ff; overflow-wrap: anywhere;
}
span.pkg-title-track { cursor: default; }
.pkg-title-track:active { opacity: 0.7; }
.pkg-copy-ic { width: 14px; height: 14px; color: var(--text3); flex-shrink: 0; }
.pkg-title-track.pkg-no-track { color: var(--text3); font-weight: 600; font-size: 15px; font-style: normal; }
.pkg-no-track-id { font-size: 11.5px; color: var(--text3); margin-top: 3px; }
.pkg-tracking .group-sub { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; color: var(--text3); }
body.theme-light .pkg-title-track { color: #5b72ec; }
body.theme-light .pkg-title-track.pkg-no-track { color: #94a3b8; }
/* Шапка в две строки: «Посылка» + статус, ниже трек на всю ширину —
   так длинный трек не рвётся посреди номера */
.pkg-head { position: relative; z-index: 1; margin-bottom: 8px; }
.pkg-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pkg-head-track { margin-top: 3px; min-width: 0; }
.pkg-head-track .pkg-title-track { font-size: 18px; }
.pkg-head-track .pkg-no-track-id { display: block; }
.pkg-since { color: var(--text3); }
.pkg-card > .group-sub { display: flex; align-items: center; gap: 5px; margin: -2px 0 10px; font-size: 12.5px; color: var(--text3); position: relative; z-index: 1; }
.pkg-country .pkg-meta-dot { margin: 0; }
/* Шапка без слов «Посылка/Связка»: трек и статус в одну строку,
   статус переносится вниз целиком, если не помещается */
.pkg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pkg-head > .pkg-title-track { flex-shrink: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; }
.pkg-head > .status-badge { margin-left: auto; }
.pkg-head-raw { display: flex; flex-direction: column; min-width: 0; }

/* ── Вход в браузере (кабинет покупателя и админка) ─────────────── */
body.login-page #loading { overflow-y: auto; padding: 24px 16px; justify-content: center; }
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  padding: 32px 28px 26px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 24px; box-shadow: var(--shadow-card);
  text-align: center;
}
body.theme-light .login-card { background: #fff; border-color: rgba(15,23,42,0.07); }
.login-brand { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 22px; }
.login-brand .brand-name { font-size: 22px; }
.login-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); margin-bottom: 8px; }
.login-text { font-size: 14.5px; line-height: 1.55; color: var(--text2); margin-bottom: 22px; }
.login-widget { min-height: 46px; display: flex; justify-content: center; }
.login-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.login-btn .ic { width: 18px; height: 18px; }
.login-msg {
  display: none; margin-top: 14px; padding: 10px 12px;
  font-size: 13px; line-height: 1.45; border-radius: 12px;
  background: var(--card); color: var(--text2);
}
.login-msg.show { display: block; }
.login-msg.success { background: rgba(34,197,94,0.1); color: #16a34a; }
.login-msg.error   { background: rgba(239,68,68,0.1); color: #ef4444; }
.login-points { list-style: none; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); text-align: left; }
.login-points li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text2); line-height: 1.4; }
.login-points li + li { margin-top: 12px; }
.login-points .ic-tile { flex-shrink: 0; }
.login-note { margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text3); }
.login-note a, .login-switch { color: #5b72ec; text-decoration: none; font-weight: 600; }
.login-switch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; font-size: 13.5px;
}
.login-switch .ic { width: 16px; height: 16px; }

/* ── Аккаунт в веб-версии ───────────────────────────────────────── */
.side-brand, .side-user { display: none; }
.web-account {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
body.theme-light .web-account { background: #fff; border-color: rgba(15,23,42,0.07); }
.side-user-text { flex: 1; min-width: 0; text-align: left; }
.side-user-name { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-sub  { font-size: 12px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-logout {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: #ef4444; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
}
.btn-logout .ic { width: 16px; height: 16px; }
.cab-greet { display: none; }

/* ── Меню слева (как у Pochtoy) — режим nav-side; по умолчанию у кабинета
   покупателя, у админки — меню снизу. Переключатель — справа в шапке ── */
@media (min-width: 880px) {
  body.nav-side { --side-w: 248px; }
  body.nav-side #app { padding-left: var(--side-w); }
  body.nav-side #header .brand { display: none; }
  body.cabinet .cab-greet { display: block; font-size: 14px; color: var(--text2); }
  body.cabinet .cab-greet b { color: var(--text); font-weight: 700; }
  body.nav-side #content { padding-bottom: 40px; }
  body.nav-side .tab-section { max-width: 1180px; margin: 0 auto; }
  body.nav-side .web-account { display: none; } /* аккаунт — внизу меню */

  body.nav-side #bottom-nav {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--side-w); height: auto;
    transform: none;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 22px 14px 16px;
    border: none; border-right: 1px solid var(--border); border-radius: 0;
    box-shadow: none;
  }
  body.nav-side.theme-light #bottom-nav { background: #fff; border-right-color: rgba(15,23,42,0.07); box-shadow: none; }
  body.nav-side .side-brand {
    display: flex; align-items: baseline; gap: 6px;
    padding: 0 12px 22px;
  }
  body.nav-side .side-brand .brand-name { font-size: 19px; }
  body.nav-side .nav-item {
    flex: none; justify-content: flex-start;
    padding: 12px 14px; border-radius: 12px;
    font-size: 14.5px;
  }
  body.nav-side .nav-item span { font-size: 14.5px; font-weight: 600; }
  body.nav-side.theme-light .nav-item.active { background: #eef1fd; color: #5b72ec; }
  body.nav-side.theme-light .nav-item.active svg { stroke: #5b72ec; }
  body.nav-side .side-user {
    display: flex; align-items: center; gap: 10px;
    margin-top: auto; padding: 14px 8px 0 10px;
    border-top: 1px solid var(--border);
  }
  .side-logout {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 10px;
    color: var(--text3); background: transparent;
  }
  .side-logout:hover { color: #ef4444; background: rgba(239,68,68,0.08); }
  .side-logout .ic { width: 18px; height: 18px; }
}

/* Активный раздел в светлой теме — тёмная плашка, число тоже белое */
body.theme-light .stat-chip.active span { color: #fff !important; }
/* Заголовок онбординга был белым и пропадал на светлом фоне */
body.theme-light .ob-title { color: var(--text); }

/* Низ карточки покупателя: «Убрать» компактно слева, справа — явная
   кнопка мини-бара (раньше он открывался только тапом по карточке) */
.btn-client-remove-sm {
  flex: 0 0 auto; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-client-remove-sm .ic { width: 15px; height: 15px; }
.btn-client-more {
  flex: 1; min-width: 0; height: 38px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  background: rgba(91,114,236,0.16); border: 1px solid rgba(91,114,236,0.4); color: #b4c0ff;
  transition: background 0.15s, opacity 0.15s;
}
.btn-client-more .ic { width: 16px; height: 16px; }
.btn-client-more:active { background: rgba(91,114,236,0.26); }
body.theme-light .btn-client-more { background: #5b72ec; border-color: #5b72ec; color: #fff; }
@media (min-width: 880px) {
  .btn-client-more:hover { background: rgba(91,114,236,0.26); }
  body.theme-light .btn-client-more:hover { background: #4c63de; }
}

/* Вход через приложение Telegram — главная кнопка кабинета */
.btn-tg-login {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 52px; border-radius: 14px;
  background: #2aabee; color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 700; letter-spacing: -0.2px;
  box-shadow: 0 6px 20px rgba(42,171,238,0.3);
  transition: background 0.15s, transform 0.1s;
}
.btn-tg-login .ic { width: 22px; height: 22px; }
.btn-tg-login:hover { background: #229ed9; }
.btn-tg-login:active { transform: scale(0.98); }
.login-hint { margin-top: 8px; font-size: 12.5px; color: var(--text3); }
.login-or {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 14px; font-size: 12px; color: var(--text3);
}
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Вход с компьютера: QR-код для телефона + шаги */
.login-qr-wrap {
  display: flex; align-items: center; gap: 18px;
  padding: 16px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--border);
  text-align: left;
}
body.theme-light .login-qr-wrap { background: #f6f8ff; border-color: rgba(91,114,236,0.15); }
.login-qr {
  flex-shrink: 0; width: 148px; height: 148px; padding: 10px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15,23,42,0.08);
}
.login-qr:empty { background: #fff linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.login-qr svg { display: block; width: 100%; height: 100%; }
.login-qr-steps { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.45; color: var(--text2); }
.login-qr-steps li + li { margin-top: 8px; }
.login-qr-steps li::marker { color: #5b72ec; font-weight: 700; }
.btn-tg-login-sec {
  margin-top: 14px; height: 44px; font-size: 14px;
  background: transparent; color: #2aabee; box-shadow: none;
  border: 1px solid rgba(42,171,238,0.45);
}
.btn-tg-login-sec .ic { width: 18px; height: 18px; }
.btn-tg-login-sec:hover { background: rgba(42,171,238,0.08); }
@media (min-width: 880px) { .login-card { max-width: 460px; } }
/* Высокая карточка входа не обрезается сверху на низком экране */
body.login-page #loading { justify-content: flex-start; }
body.login-page #loading > .login-card { margin: auto 0; flex-shrink: 0; }

/* ── Счёт в карточке посылки: выставлен — просто цифры, клиент отметил
   оплату — синий фон, оплата подтверждена — зелёный ─────────────── */
.pkg-inv-chip {
  display: inline-flex; align-items: center;
  padding: 2px 0; border: none; border-radius: 8px; background: transparent;
  font: inherit; font-weight: 700; color: var(--text);
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.pkg-inv-chip:hover { text-decoration: underline; text-underline-offset: 3px; }
.inv-chip-reviewing, .inv-chip-paid { padding: 2px 9px; }
.inv-chip-reviewing { background: rgba(59,130,246,0.16); color: #7cb3ff; }
.inv-chip-paid      { background: rgba(34,197,94,0.16);  color: #4ade80; }
body.theme-light .inv-chip-reviewing { background: rgba(37,99,235,0.1); color: #2563eb; }
body.theme-light .inv-chip-paid      { background: rgba(22,163,74,0.1); color: #15803d; }
.inv-chip-reviewing:hover, .inv-chip-paid:hover { text-decoration: none; filter: brightness(1.08); }

/* У позиции связки — под стоимостью, мельче */
.group-item-right .pkg-inv-chip { margin-top: 4px; font-size: 12px; }
.group-inv {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-size: 13px; color: var(--text2);
}
.group-inv > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.group-inv .ic { width: 15px; height: 15px; }
.group-inv .pkg-inv-chip { font-size: 14px; }

/* Карточка счёта → посылка, из которой он выставлен */
.inv-pkg-link {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  margin: 2px 0 10px; padding: 6px 10px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer;
}
.inv-pkg-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-pkg-link .ic { width: 14px; height: 14px; flex-shrink: 0; }
body.theme-light .inv-pkg-link { background: #f6f8ff; border-color: rgba(91,114,236,0.18); color: #475569; }

/* Подсветка карточки после перехода */
@keyframes cardFlash { 0%, 60% { box-shadow: 0 0 0 3px rgba(91,114,236,0.55); } 100% { box-shadow: var(--shadow-card); } }
.card-flash { animation: cardFlash 1.6s ease-out; }
.pkg-inv-chip .ic { width: 13px; height: 13px; margin-right: 4px; opacity: 0.8; }
/* Итого к оплате — крупнее остальных значений */
.pi-total { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; }
.pi-total .pi-sub { font-size: 13px; font-weight: 500; letter-spacing: 0; }

/* ══ Главная — витрина в духе Pochtoy ═════════════════════════════ */
#tab-home { padding-bottom: 24px; }
.home-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 20px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(91,114,236,0.22), rgba(91,114,236,0.06));
  border: 1px solid rgba(91,114,236,0.25);
}
body.theme-light .home-hero {
  background: linear-gradient(135deg, #e8edff 0%, #f5f7ff 60%, #ffffff 100%);
  border-color: rgba(91,114,236,0.15);
  box-shadow: var(--shadow-card);
}
.home-hero-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.home-kicker {
  display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5b72ec; background: rgba(91,114,236,0.12);
}
body:not(.theme-light) .home-kicker { color: #b4c0ff; }
.home-title { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.6px; color: var(--text); margin-bottom: 10px; }
.home-lead { font-size: 14.5px; line-height: 1.55; color: var(--text2); margin-bottom: 18px; }
.home-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.home-cta .ic { width: 18px; height: 18px; }
.home-cta-main { width: auto; flex: 1 1 220px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.home-cta-sec {
  flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600;
  color: #5b72ec; background: transparent; border: 1px solid rgba(91,114,236,0.4);
}
body:not(.theme-light) .home-cta-sec { color: #b4c0ff; }
.home-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 12.5px; color: var(--text2); }
.home-facts span { display: inline-flex; align-items: center; gap: 6px; }
.home-facts .ic { width: 16px; height: 16px; color: #5b72ec; }
.home-hero-img {
  position: absolute; right: -34px; bottom: -34px; width: 124px; opacity: 0.07;
  pointer-events: none;
}
body:not(.theme-light) .home-hero-img { filter: invert(1); }

.home-h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); margin: 28px 0 12px; }
.home-h2-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-link {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 13.5px; font-weight: 600; color: #5b72ec; background: none; border: none;
}
.home-link .ic { width: 15px; height: 15px; }
body:not(.theme-light) .home-link { color: #b4c0ff; }

.home-grid { display: grid; gap: 12px; }
.home-card, .home-feature, .home-term, .home-country, .home-step, .home-contact {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
body.theme-light .home-card, body.theme-light .home-feature, body.theme-light .home-term,
body.theme-light .home-country, body.theme-light .home-step, body.theme-light .home-contact {
  background: #fff; border-color: rgba(15,23,42,0.07); box-shadow: var(--shadow-card);
}
.home-card { padding: 18px; }
.home-card .ic-tile { margin-bottom: 12px; }
.home-card-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: -0.2px; }
.home-card-text { font-size: 13.5px; line-height: 1.5; color: var(--text2); }
.home-feature { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.home-feature .ic-tile { flex-shrink: 0; }

.home-countries { display: grid; gap: 8px; }
.home-country {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; text-align: left; color: var(--text);
}
.home-country-flag { font-size: 24px; line-height: 1; flex-shrink: 0; }
.home-country-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-country-name { font-size: 15px; font-weight: 700; }
.home-country-sub { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text3); }
.home-country-sub .ic { width: 13px; height: 13px; }
.home-country-price { font-size: 15px; font-weight: 800; white-space: nowrap; color: var(--text); }
.home-country-price small { font-size: 12px; font-weight: 600; color: var(--text3); }

.home-steps { display: grid; gap: 10px; counter-reset: step; }
.home-step { position: relative; padding: 16px 16px 16px 62px; }
.home-step-num {
  position: absolute; left: 16px; top: 16px;
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff; background: #5b72ec;
}
.home-step-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.home-step-text { font-size: 13.5px; line-height: 1.5; color: var(--text2); }

.home-terms { display: grid; gap: 10px; }
.home-term { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.home-term .ic-tile { flex-shrink: 0; }
.home-term-main { flex: 1; min-width: 0; }
.home-term-text { font-size: 13.5px; line-height: 1.55; color: var(--text2); }
.home-price-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--border);
}
.home-price-row:last-child { border-bottom: none; padding-bottom: 0; }
.home-price-row b { color: var(--text); white-space: nowrap; }

.home-contacts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.home-contact { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--text); }
.home-contact b { display: block; font-size: 14.5px; }
.home-contact small { display: block; font-size: 12.5px; color: var(--text3); }

@media (min-width: 880px) {
  #tab-home { max-width: 1020px; }
  .home-hero { padding: 40px 44px; }
  .home-hero-img { position: static; width: 190px; opacity: 1; flex-shrink: 0; }
  .home-title { font-size: 34px; }
  .home-lead { font-size: 16px; max-width: 560px; }
  .home-cta-main, .home-cta-sec { flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }
  .home-h2 { font-size: 22px; margin-top: 40px; }
  .home-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .home-countries { grid-template-columns: repeat(2, 1fr); }
  .home-steps { grid-template-columns: repeat(4, 1fr); }
  .home-step { padding: 18px; }
  .home-step-num { position: static; margin-bottom: 12px; }
  .home-terms { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .home-country:hover, .home-contact:hover { border-color: rgba(91,114,236,0.4); }
}

/* Контакты «Инфо»: кнопок может быть от 1 до 6 */
.i-contact-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.i-contact-sm-icon .ic { width: 19px; height: 19px; color: #fff; }

/* Админ: редактор контактов */
.cadm-head { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3); margin: 4px 0 8px; }
.cadm-head ~ .cadm-head { margin-top: 14px; }
.cadm-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.cadm-row input, .cadm-row select {
  min-width: 0; padding: 9px 10px; font-size: 13px; border-radius: 9px;
  color: var(--text); background: var(--card); border: 1px solid var(--border);
}
.cadm-main .cadm-title { flex: 1 1 45%; }
.cadm-main .cadm-url   { flex: 1 1 55%; }
.cadm-kind  { flex: 0 0 92px; }
.cadm-label { flex: 1 1 35%; }
.cadm-extra .cadm-url { flex: 1 1 45%; }
.cadm-del {
  flex: 0 0 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #ef4444; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
}
.cadm-del .ic { width: 15px; height: 15px; }
#cadm-add { margin-top: 6px; }
#cadm-add .ic { width: 14px; height: 14px; }
body.theme-light .cadm-row input, body.theme-light .cadm-row select { background: #fff; border-color: rgba(15,23,42,0.12); }

/* Главная: «Остались вопросы?» вместо дубля контактов */
.home-ask {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 28px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
}
body.theme-light .home-ask { background: #fff; border-color: rgba(15,23,42,0.07); box-shadow: var(--shadow-card); }
.home-ask-btn { flex: 0 0 auto; padding: 11px 18px; }
@media (min-width: 880px) { .home-ask { margin-top: 40px; padding: 22px 26px; } }
/* На телефоне ссылка — второй строкой во всю ширину */
@media (max-width: 879px) {
  .cadm-extra { flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px dashed var(--border); margin-bottom: 8px; }
  .cadm-extra .cadm-label { flex: 1 1 calc(100% - 98px); }
  .cadm-extra .cadm-url { flex: 1 1 calc(100% - 38px); }
  .cadm-main { flex-wrap: wrap; }
  .cadm-main .cadm-title, .cadm-main .cadm-url { flex: 1 1 100%; }
}
/* Три кнопки контактов — в один ряд и на телефоне */
.i-contact-row { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
/* Значок Telegram у главного контакта — фирменный синий, видно в обеих темах */
.i-contact-main .i-contact-icon { background: #2aabee; color: #fff; }
/* Условия: на телефоне столбцы «растворяются» в общую сетку, на ПК — два
   независимых столбца карточек */
.home-terms-col { display: contents; }
@media (min-width: 880px) {
  .home-terms-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
}

/* Переключатель меню (слева / снизу) — только на широком экране */
.btn-nav-mode { display: none; }
@media (min-width: 880px) {
  .btn-nav-mode { display: flex; }
  .btn-nav-mode .ic { width: 18px; height: 18px; }
}

/* Админ с меню слева — таблица посылок во всю ширину */
@media (min-width: 880px) {
  body.nav-side.is-admin #tab-packages { max-width: none; }
}
/* Меню слева: логотип в шапке скрыт — кнопки шапки остаются справа */
@media (min-width: 880px) {
  body.nav-side .header-actions { margin-left: auto; }
}

/* ══ Статистика (админ) ═══════════════════════════════════════════ */
#tab-stats { padding-bottom: 24px; }
.stats-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stats-periods { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; }
.stats-periods::-webkit-scrollbar { display: none; }
.stats-period {
  flex-shrink: 0; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--text2); background: var(--card); border: 1px solid var(--border);
}
.stats-period.active { background: #5b72ec; border-color: #5b72ec; color: #fff; }

.st-card {
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
}
body.theme-light .st-card, body.theme-light .st-kpi { background: #fff; border-color: rgba(15,23,42,0.07); box-shadow: var(--shadow-card); }
.st-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.st-muted { font-size: 12px; color: var(--text3); font-weight: 500; }
.st-big { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; color: var(--text); }

.st-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.st-kpi {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border-radius: var(--radius); background: var(--card); border: 1px solid var(--border);
}
.st-kpi .ic-tile { flex-shrink: 0; }
.st-kpi-val { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); line-height: 1.1; }
.st-kpi-label { font-size: 12px; color: var(--text3); margin-top: 2px; line-height: 1.3; }

.st-grid2 { display: grid; gap: 12px; margin-bottom: 12px; }
.st-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: 12px; background: var(--border); }
.st-bar span { min-width: 6px; }
.st-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.st-leg { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text2); }
.st-leg i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.st-leg span { flex: 1; min-width: 0; }
.st-leg b { color: var(--text); }
.st-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text3); }

.st-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; font-size: 13.5px; color: var(--text2); }
.st-row b { color: var(--text); text-align: right; white-space: nowrap; }
.st-row small { font-size: 12px; color: var(--text3); font-weight: 500; }
.st-sep { height: 1px; margin: 4px 0; background: var(--border); }
.st-green { color: #16a34a; }
.st-blue  { color: #2563eb; }
body:not(.theme-light) .st-green { color: #4ade80; }
body:not(.theme-light) .st-blue  { color: #7cb3ff; }

.st-chart-legend { display: flex; gap: 12px; font-size: 12px; color: var(--text3); flex-wrap: wrap; }
.st-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.st-chart-legend i { width: 9px; height: 9px; border-radius: 3px; }
.c-created   { background: #5b72ec; }
.c-received  { background: #f97316; }
.c-delivered { background: #22c55e; }
.st-chart { display: flex; align-items: stretch; gap: 3px; height: 170px; overflow-x: auto; padding-bottom: 2px; }
.st-col { flex: 1 0 14px; display: flex; flex-direction: column; min-width: 14px; }
.st-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 1px; border-bottom: 1px solid var(--border); }
.st-bars i { flex: 1; max-width: 10px; border-radius: 3px 3px 0 0; }
.st-col-label { height: 18px; padding-top: 4px; font-size: 10px; color: var(--text3); white-space: nowrap; overflow: visible; }
.st-chart + * { margin-top: 0; }
.st-card + .st-h2, .st-grid2 + .st-card { margin-top: 0; }
.st-card:has(.st-chart) { margin-bottom: 12px; }

.st-h2 { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; }
.st-countries { display: grid; gap: 10px; margin-bottom: 12px; }
.st-country-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.st-country-head b { flex: 1; font-size: 15px; color: var(--text); }
.st-flag { font-size: 22px; line-height: 1; }
.st-share { font-size: 13px; font-weight: 700; color: #5b72ec; }
body:not(.theme-light) .st-share { color: #b4c0ff; }
.st-share-bar { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 12px; }
.st-share-bar span { display: block; height: 100%; background: #5b72ec; border-radius: 999px; }
.st-cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
.st-cgrid small { display: block; font-size: 11px; color: var(--text3); margin-bottom: 2px; }
.st-cgrid b { font-size: 15px; color: var(--text); }

.st-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.st-trio > div { padding: 10px; border-radius: 12px; background: var(--bg); text-align: center; }
body.theme-light .st-trio > div { background: #f6f8ff; }
.st-trio b { display: block; font-size: 20px; font-weight: 800; color: var(--text); }
.st-trio small { font-size: 11.5px; color: var(--text3); }
.st-sub { margin: 8px 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); }
.st-rank {
  display: inline-flex; width: 20px; height: 20px; margin-right: 8px; border-radius: 6px;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
  color: #5b72ec; background: rgba(91,114,236,0.12);
}

@media (min-width: 880px) {
  #tab-stats { max-width: 1240px; }
  .st-kpis { grid-template-columns: repeat(4, 1fr); }
  .st-grid2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .st-countries { grid-template-columns: repeat(3, 1fr); }
  .st-chart { height: 210px; }
}

/* ── Название Dostavochka | com: слово длиннее прежнего MONARC — плотнее
   разрядка и меньше кегль, чтобы влезало в шапку телефона ─────────── */
.brand-name { letter-spacing: 0.3px; }
.brand-tag { text-transform: none; letter-spacing: 0.5px; font-size: 10px; padding: 1px 6px; }
.logo-text { font-size: 34px; letter-spacing: 1px; }
.logo-sub { text-transform: none; letter-spacing: 3px; font-size: 12px; }
.i-hero-logo { font-size: 34px; letter-spacing: 1px; }
.i-hero-sub { text-transform: none; letter-spacing: 1px; }
.ob-logo { letter-spacing: 1px; font-size: 24px; }
.login-brand .brand-name { font-size: 22px; }
@media (min-width: 880px) { .i-hero-logo { font-size: 40px; } }
body.is-admin #tab-info .i-hero-logo { letter-spacing: 1px; }

/* ══ Тарифы: калькулятор — главное, страны — свёрнуты ═════════════ */
.calc-main { margin-bottom: 8px; box-shadow: var(--shadow-card); }
body.theme-light .calc-main { background: #fff; border-color: rgba(15,23,42,0.07); }
.calc-main .calc-body { padding: 18px; gap: 18px; }
.calc-main .calc-row { flex-direction: column; align-items: stretch; gap: 10px; }
.calc-main .calc-row > label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3);
}
.calc-main .calc-country-pills { gap: 8px; }
.calc-main .country-pill { padding: 10px 14px; font-size: 14px; border-radius: 12px; }
.calc-main .country-pill.active,
body.theme-light .calc-main .country-pill.active { background: #5b72ec; border-color: #5b72ec; color: #fff; }
.calc-weight-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.calc-main .calc-input-wrap { flex: 0 0 auto; border-radius: 12px; }
.calc-main .calc-input-wrap input { width: 110px; padding: 11px 12px; font-size: 22px; font-weight: 800; text-align: left; }
.calc-main .calc-unit { font-size: 14px; font-weight: 600; }
.calc-quick-row { display: flex; gap: 6px; flex-wrap: wrap; }
.calc-quick {
  padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--text2); background: var(--card-hover); border: 1px solid var(--border);
}
.calc-quick.active { color: #5b72ec; border-color: rgba(91,114,236,0.5); background: rgba(91,114,236,0.1); }
body:not(.theme-light) .calc-quick.active { color: #b4c0ff; }
.calc-hint {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px;
  font-size: 13.5px; color: var(--text2); background: var(--card-hover); border: 1px dashed var(--border);
}
.calc-hint .ic { width: 18px; height: 18px; color: #5b72ec; flex-shrink: 0; }
.calc-main .calc-options { margin-top: 0; }

.rates-all-head { margin: 26px 0 12px; }
.rates-all-head .home-h2 { margin: 0 0 2px; }
#rates-list { display: grid; gap: 10px; }
.rate-acc { padding: 0; overflow: hidden; }
.rate-acc-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; background: none; border: none; text-align: left; color: var(--text);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rate-acc-head .country-flag { flex-shrink: 0; }
.rate-acc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rate-acc-main .country-route { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rate-acc-from { font-size: 15px; font-weight: 800; white-space: nowrap; }
.rate-acc-from small { font-size: 12px; font-weight: 600; color: var(--text3); }
.rate-acc-chev { flex-shrink: 0; color: var(--text3); transition: transform 0.2s; }
.rate-acc.open .rate-acc-chev { transform: rotate(180deg); }
.rate-acc-body { padding: 0 16px 16px; }
.rate-acc-body .rates-table { margin-top: 2px; }
.rate-acc-calc {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: #5b72ec; background: rgba(91,114,236,0.08); border: 1px solid rgba(91,114,236,0.3);
}
.rate-acc-calc .ic { width: 15px; height: 15px; }
body:not(.theme-light) .rate-acc-calc { color: #b4c0ff; }

@media (min-width: 880px) {
  .calc-main { max-width: none; }
  .calc-main .calc-body { padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 28px; }
  .calc-main #calc-hint, .calc-main #calc-result { grid-column: 1 / -1; }
  #rates-list { grid-template-columns: 1fr 1fr; align-items: start; }
  .rate-acc-head:hover { background: var(--card-hover); }
}
.rate-acc { margin: 0; }

/* ══ «Инфо» у админа: страница настроек ═══════════════════════════ */
.adm-switch {
  display: flex; gap: 4px; width: max-content; max-width: 100%;
  padding: 4px; margin-bottom: 16px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
}
body.theme-light .adm-switch { background: #fff; border-color: rgba(15,23,42,0.08); }
.adm-switch-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--text2); background: none; border: none; white-space: nowrap;
}
.adm-switch-btn .ic { width: 16px; height: 16px; }
.adm-switch-btn.active { background: #5b72ec; color: #fff; }
#tab-info.adm-mode-settings #info-public { display: none; }
#tab-info.adm-mode-public #admin-backup { display: none !important; }

#admin-backup .adm-group { display: none; }
#admin-backup .adm-group.adm-active { display: block; animation: fadeInUp 0.18s ease-out; }
#admin-backup .adm-group > .i-section-label {
  font-size: 18px; font-weight: 800; letter-spacing: -0.3px; text-transform: none;
  color: var(--text); margin: 2px 0 14px; display: flex; align-items: center; gap: 8px;
}
.adm-nav { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.adm-nav::-webkit-scrollbar { display: none; }
.adm-nav-item {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 12px; font-size: 13px; font-weight: 600;
  color: var(--text2); background: var(--card); border: 1px solid var(--border); white-space: nowrap;
}
.adm-nav-item .ic-tile { width: 28px; height: 28px; border-radius: 8px; }
.adm-nav-item .ic-tile .ic { width: 16px; height: 16px; }
.adm-nav-item.active { color: var(--text); border-color: rgba(91,114,236,0.55); background: rgba(91,114,236,0.12); }
body.theme-light .adm-nav-item { background: #fff; border-color: rgba(15,23,42,0.08); }
body.theme-light .adm-nav-item.active { background: #eef1fd; border-color: rgba(91,114,236,0.35); }

@media (min-width: 880px) {
  body.is-admin #tab-info.adm-mode-settings { max-width: 1100px; }
  body.is-admin #admin-backup {
    display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start;
  }
  .adm-nav {
    position: sticky; top: 8px; flex-direction: column; gap: 4px; overflow: visible; margin: 0; padding: 8px;
    border-radius: var(--radius); background: var(--card); border: 1px solid var(--border);
  }
  body.theme-light .adm-nav { background: #fff; border-color: rgba(15,23,42,0.07); box-shadow: var(--shadow-card); }
  .adm-nav-item { width: 100%; border-color: transparent; background: none; padding: 8px 10px; font-size: 14px; }
  body.theme-light .adm-nav-item { background: none; border-color: transparent; }
  .adm-nav-item:hover { background: var(--card-hover); }
  .adm-panels { min-width: 0; }
}
/* Услуги в настройках на ПК — одна строка на услугу: название · цена · раздел · кнопки */
@media (min-width: 880px) {
  #admin-backup .svc-admin-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; }
  #admin-backup .svc-admin-name { flex: 1; min-width: 0; margin: 0; }
  #admin-backup .svc-admin-row { flex: 0 0 auto; }
  #admin-backup .svc-admin-group { flex: 0 0 120px; width: 120px; }
}

/* Шапка карточки: трек и статус в одной строке. Длинный трек мельче;
   если статус всё же переносится — встаёт ровно слева под треком */
.pkg-head { justify-content: space-between; }
.pkg-head > .status-badge { margin-left: 0; }
.pkg-head > .pkg-title-track.trk-m  { font-size: 15.5px; }
.pkg-head > .pkg-title-track.trk-s  { font-size: 14.5px; letter-spacing: -0.3px; }
.pkg-head > .pkg-title-track.trk-xs { font-size: 13.5px; letter-spacing: -0.3px; }
/* «от клиента» рядом с подписью «Клиент» */
.pi-label .pi-tag { margin-left: 6px; vertical-align: 0; font-size: 10px; padding: 0 7px; }

/* ── Доставка по РФ в карточке админа: каждое поле копируется ─────── */
.dlv-box {
  margin-top: 6px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--card);
}
body.theme-light .dlv-box { background: #f8faff; border-color: rgba(15,23,42,0.08); }
.dlv-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; }
.dlv-row + .dlv-row { border-top: 1px dashed var(--border); }
.dlv-label { flex: 0 0 62px; font-size: 11.5px; color: var(--text3); }
.dlv-val { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; line-height: 1.35; }
.dlv-copy {
  flex: 0 0 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); background: transparent; border: 1px solid transparent; cursor: pointer;
}
.dlv-copy .ic { width: 16px; height: 16px; }
.dlv-copy:hover, .dlv-copy:active { color: #5b72ec; background: rgba(91,114,236,0.1); border-color: rgba(91,114,236,0.25); }
.dlv-copy-all {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: #5b72ec; background: rgba(91,114,236,0.07); border: none; border-top: 1px solid var(--border);
}
body:not(.theme-light) .dlv-copy-all { color: #b4c0ff; }
.dlv-copy-all .ic { width: 14px; height: 14px; }

/* Клиент: «Указать адрес» / «Изменить» */
.btn-fill-delivery.pi-btn { display: inline-flex; align-items: center; gap: 6px; }
.btn-fill-delivery .ic { width: 15px; height: 15px; }
.pi-btn-ghost { background: transparent !important; color: var(--text2) !important; border: 1px solid var(--border) !important; }
.delivery-intro { font-size: 13.5px; line-height: 1.5; color: var(--text2); margin: -4px 0 14px; }
#delivery-address { resize: vertical; min-height: 64px; font-family: inherit; }
.nowrap { white-space: nowrap; }
.pi-btn.pi-btn-ghost { width: auto; padding: 7px 14px; font-size: 13px; }
.dlv-label { flex-basis: 56px; }

/* ══ Депозит ══════════════════════════════════════════════════════ */
.dep-card {
  padding: 14px 16px; margin-bottom: 12px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.03));
  border: 1px solid rgba(34,197,94,0.28);
}
body.theme-light .dep-card { background: linear-gradient(135deg, #ecfdf3, #ffffff); border-color: rgba(22,163,74,0.2); box-shadow: var(--shadow-card); }
.card-list > .dep-card { grid-column: 1 / -1; }
.dep-head { display: flex; align-items: center; gap: 12px; }
.dep-head .ic-tile { flex-shrink: 0; }
.dep-main { flex: 1; min-width: 0; }
.dep-label { font-size: 12px; color: var(--text3); }
.dep-bal { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); }
.btn-dep-topup, .btn-dep-manage {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700;
  color: #fff; background: #16a34a; border: none; cursor: pointer;
}
.btn-dep-manage { color: var(--text); background: var(--card); border: 1px solid var(--border); }
.btn-dep-topup .ic, .btn-dep-manage .ic { width: 16px; height: 16px; }
.dep-hint { margin-top: 8px; font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.dep-hist { margin-top: 10px; }
.dep-hist summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text2); list-style: none; }
.dep-hist summary::-webkit-details-marker { display: none; }
.dep-hist summary::after { content: ' ▾'; color: var(--text3); }
.dep-hist[open] summary::after { content: ' ▴'; }
.wtx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--border); }
.wtx-title { font-size: 13px; color: var(--text); }
.wtx-date { font-size: 11.5px; color: var(--text3); }
.wtx-amt { font-size: 14px; font-weight: 800; white-space: nowrap; }
.wtx-amt.plus { color: #16a34a; }
.wtx-amt.minus { color: var(--text); }
body:not(.theme-light) .wtx-amt.plus { color: #4ade80; }

/* Счёт: часть с депозита, кнопка оплаты с депозита, пометки */
.inv-dep {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: -2px 0 8px; font-size: 12.5px; color: var(--text2);
}
.inv-dep .ic { width: 15px; height: 15px; color: #16a34a; }
.btn-inv-deposit {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  margin: 4px 0 8px; padding: 11px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: #15803d; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.35);
}
body:not(.theme-light) .btn-inv-deposit { color: #4ade80; }
.btn-inv-deposit .ic { width: 16px; height: 16px; }
.inv-kind {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  font-size: 10.5px; font-weight: 700; color: #5b72ec; background: rgba(91,114,236,0.12);
}
.inv-kind-dep { color: #15803d; background: rgba(34,197,94,0.12); }
body:not(.theme-light) .inv-kind { color: #b4c0ff; }
body:not(.theme-light) .inv-kind-dep { color: #4ade80; }

/* Окно депозита */
.wm-rows { margin-bottom: 14px; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.wm-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 14px; color: var(--text2); }
.wm-row + .wm-row { border-top: 1px dashed var(--border); }
.wm-row b { color: var(--text); }
.wm-after { min-height: 20px; margin: -4px 0 14px; font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 6px; }
.wm-after .ic { width: 16px; height: 16px; color: #16a34a; }

/* Админ: раздел «Депозиты» */
.dep-adm-total { display: flex; justify-content: space-between; gap: 12px; padding: 4px 2px 12px; font-size: 14px; color: var(--text2); }
.dep-adm-total b { font-size: 16px; color: var(--text); }
.dep-adm-form { display: grid; gap: 8px; padding: 12px; margin-bottom: 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.dep-adm-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); }
.dep-adm-form input, .dep-adm-form select {
  min-width: 0; padding: 10px 12px; font-size: 14px; border-radius: 10px;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
}
body.theme-light .dep-adm-form input, body.theme-light .dep-adm-form select { background: #fff; }
.dep-adm-row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.dep-adm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dep-w { border-top: 1px solid var(--border); }
.dep-w-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 11px 2px; background: none; border: none; text-align: left; color: var(--text); cursor: pointer;
}
.dep-w-name { min-width: 0; font-size: 14px; font-weight: 600; }
.dep-w-name small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text3); }
.dep-w-bal { font-size: 14px; font-weight: 800; white-space: nowrap; }
.dep-w-body { padding: 0 2px 10px; }
.dep-w-pick {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 7px 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: #5b72ec; background: rgba(91,114,236,0.08); border: 1px solid rgba(91,114,236,0.3); cursor: pointer;
}
body:not(.theme-light) .dep-w-pick { color: #b4c0ff; }
.dep-w-pick .ic { width: 14px; height: 14px; }
/* Реквизиты для пополнения (админ) */
.dep-adm-form textarea {
  width: 100%; min-width: 0; padding: 10px 12px; font-size: 13.5px; font-family: inherit; line-height: 1.45;
  border-radius: 10px; color: var(--text); background: var(--bg); border: 1px solid var(--border); resize: vertical;
}
body.theme-light .dep-adm-form textarea { background: #fff; }
.dep-details-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text2); padding: 4px 0; }
.dep-details-more label { display: block; margin: 8px 0 4px; font-size: 12px; color: var(--text3); }
#wm-topup-details .inv-details-block { margin-bottom: 14px; }
/* Своя стоимость + валюта в одной строке */
.ct-row { display: flex; gap: 8px; }
.ct-row input { flex: 1; min-width: 0; }
.ct-row select { flex: 0 0 96px; }
/* «Сразу выставить счёт» под своей стоимостью */
.ct-invoice {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px;
  border-radius: 12px; cursor: pointer;
  background: rgba(34,197,94,0.07); border: 1px solid rgba(34,197,94,0.25);
}
.ct-invoice input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: #16a34a; }
.ct-invoice b { display: block; font-size: 13.5px; color: var(--text); }
.ct-invoice small { display: block; font-size: 12px; color: var(--text3); margin-top: 2px; line-height: 1.4; }
.form-group .ct-invoice input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 2px 0 0; border-radius: 4px; flex: 0 0 18px; }
/* Чекбокс «Сразу выставить счёт» — стандартный вид (общий стиль полей его прячет) */
.form-group .ct-invoice input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; background: none; border: none; }
/* Две колонки формы не вылезают за край на телефоне */
.form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-row .form-group { min-width: 0; }
.form-row input:not([type="checkbox"]):not([type="radio"]), .form-row select { width: 100%; min-width: 0; }
/* Чекбокс «Застраховать» — обычного размера, подпись рядом в той же рамке */
.form-row .ins-admin-toggle { min-width: 0; }
.form-row .ins-admin-toggle input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 17px; padding: 0; margin: 0;
  -webkit-appearance: checkbox; appearance: auto; background: none; border: none; }
.form-row .ins-admin-toggle span { min-width: 0; overflow-wrap: anywhere; }

/* ══ Форма посылки (админ) ═══════════════════════════════════════════
   Телефон: одна лента блоков («Посылка», «Стоимость», «Клиент», «Заметки»,
   «Фото») с тонкими разделителями — колонки разбираются через display:contents.
   ПК: широкое окно, слева основной поток, справа закреплённая панель
   с клиентом, живым расчётом и фото; страна, статус и получение — кнопками */
.pf-grid, .pf-sec, .pf-cost-grid, .pf-notes-grid { display: flex; flex-direction: column; gap: 13px; }
.pf-col { display: contents; }
.pf-sec-pkg { order: 1; } .pf-sec-cost { order: 2; } .pf-sec-client { order: 3; }
.pf-sec-notes { order: 4; } .pf-sec-photo { order: 5; }
.pf-sec-calc { display: none; }
.pf-sec:not(.pf-sec-pkg) { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border); }
.pf-sec-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -0.1px;
}
.pf-ic {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.pf-ic .ic { width: 14px; height: 14px; }
.pf-ic-blue   { background: rgba(91,114,236,0.16); color: #8fa0ff; }
.pf-ic-green  { background: rgba(34,197,94,0.14);  color: #4ade80; }
.pf-ic-amber  { background: rgba(245,158,11,0.14); color: #fbbf24; }
.pf-ic-violet { background: rgba(167,139,250,0.16); color: #c4b5fd; }
.pf-ic-gray   { background: rgba(148,163,184,0.14); color: #94a3b8; }
body.theme-light .pf-ic-blue   { background: #eef1ff; color: #4c63dc; }
body.theme-light .pf-ic-green  { background: #e8f8ee; color: #15803d; }
body.theme-light .pf-ic-amber  { background: #fef3c7; color: #b45309; }
body.theme-light .pf-ic-violet { background: #f1ecff; color: #6d28d9; }
body.theme-light .pf-ic-gray   { background: #eef2f6; color: #475569; }

/* Трек: кнопка «Нет трека» внутри поля */
.pf-track { position: relative; }
.pf-track input { width: 100%; padding-right: 104px !important; }
.pf-notrack-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; font-family: inherit;
  color: var(--text2); background: var(--card); border: 1px solid var(--border); cursor: pointer;
}
.pf-notrack-btn:hover { color: var(--text); border-color: var(--border-acc); }
body.theme-light .pf-notrack-btn { background: #f1f5f9; border-color: rgba(15,23,42,0.1); color: #475569; }

/* Страна | вес, тариф ниже (на ПК — страна на всю ширину, ниже «вес | тариф») */
.pf-cwt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px 10px; }
.pf-cwt .pf-tariff { grid-column: 1 / -1; }
.pf-cwt select, .pf-cwt input { width: 100%; min-width: 0; }

.pf-pills { display: none; }
.pf-ct-invoice { margin-top: 0; }
.pf-ct-invoice input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 18px; -webkit-appearance: checkbox; appearance: auto; }
.pf-footer { display: flex; flex-direction: column; }
.pf-total, .pf-cancel { display: none; }
/* Нет сохранённых клиентов — не показываем пустую строку с подписью */
.pkg-form .form-group:has(> .tpl-chips-row:empty) { display: none; }

/* Кнопки-переключатели вместо выпадающих списков (ПК) */
.pf-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 11px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--text2); white-space: nowrap;
  background: var(--card); border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pf-pill:hover { color: var(--text); border-color: var(--border-acc); }
.pf-pill.active { color: #c7d0ff; background: rgba(91,114,236,0.18); border-color: rgba(143,160,255,0.7); }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
body.theme-light .pf-pill { background: #fff; border-color: rgba(15,23,42,0.12); color: #475569; }
body.theme-light .pf-pill:hover { border-color: rgba(91,114,236,0.5); color: #0f172a; }
body.theme-light .pf-pill.active { color: #3346c9; background: #eef1ff; border-color: #5b72ec; box-shadow: inset 0 0 0 1px #5b72ec; }

/* Страховки «до РФ» и «по РФ» — карточки с галочкой и суммой справа */
.pf-ins, .pf-ins-cards { display: flex; flex-direction: column; gap: 10px; }
.pf-ins { gap: 13px; }
.pf-ins-card {
  display: block; border: 1px solid var(--border); border-radius: 14px; background: var(--card);
  transition: border-color 0.15s, background 0.15s;
}
label.pf-ins-card, .pf-ins-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.pf-ins-card input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0;
  -webkit-appearance: checkbox; appearance: auto; accent-color: #5b72ec;
}
.pf-ins-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-ins-main b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); }
.pf-ins-main b .ic { width: 15px; height: 15px; color: var(--text3); }
.pf-ins-main small { font-size: 11.5px; color: var(--text3); line-height: 1.35; }
.pf-ins-fee { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.pf-ins-card.on { border-color: rgba(143,160,255,0.6); background: rgba(91,114,236,0.08); }
.pf-ins-card.on .pf-ins-main b .ic { color: #8fa0ff; }
.pf-rfins-body { gap: 10px; padding: 0 14px 14px 44px; }
.pf-rfins-types { display: flex; gap: 6px; }
.pf-rfins-body .field-hint { margin: 0; }
body.theme-light .pf-ins-card { background: #fff; border-color: rgba(15,23,42,0.12); }
body.theme-light .pf-ins-card.on { background: #f5f7ff; border-color: #5b72ec; }
body.theme-light .pf-ins-card.on .pf-ins-main b .ic { color: #4c63dc; }
/* Страховки по РФ нет: Почта или связка уже застрахована */
.pf-ins-card.off .pf-ins-head { cursor: default; }
.pf-ins-card.off .pf-ins-main b, .pf-ins-card.off input[type="checkbox"] { opacity: 0.5; }
.pf-ins-card.off .pf-ins-main small { color: #d97706; }
body:not(.theme-light) .pf-ins-card.off .pf-ins-main small { color: #fbbf24; }
.pf-rfins-types .pf-pill:disabled { opacity: 0.35; cursor: not-allowed; }

/* Живой расчёт */
.pf-calc { display: flex; flex-direction: column; gap: 9px; }
.pf-calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text2); }
.pf-calc-row b { font-weight: 700; color: var(--text); white-space: nowrap; }
.pf-calc-sub { display: block; font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.pf-calc-total { padding-top: 11px; margin-top: 3px; border-top: 1px dashed var(--border); font-size: 14px; font-weight: 700; color: var(--text); }
.pf-calc-total b { font-size: 19px; letter-spacing: -0.3px; }
.pf-calc-empty { font-size: 12.5px; color: var(--text3); line-height: 1.45; }

@media (min-width: 880px) {
  #modal-overlay { padding: 20px 32px; }
  .modal-sheet.pkg-modal {
    width: calc(100vw - 64px); max-width: 1120px; max-height: calc(100vh - 40px);
    padding: 0; display: flex; flex-direction: column; overflow: hidden;
  }
  .pkg-modal .modal-header {
    flex-shrink: 0; margin: 0; padding: 18px 28px;
    border-bottom: 1px solid var(--border);
  }
  .pkg-modal .modal-header h3 { font-size: 20px; letter-spacing: -0.3px; }
  .pkg-modal .pkg-form { flex: 1; min-height: 0; gap: 0; }
  /* Прокручиваются только поля — шапка и кнопки всегда на месте */
  .pkg-modal .pf-grid {
    flex: 1; min-height: 0; overflow-y: auto;
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: 20px; align-items: start; padding: 22px 28px 26px;
  }
  .pkg-modal .pf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  /* Клиент и расчёт остаются на виду, пока листаешь левую колонку */
  .pkg-modal .pf-col-side { position: sticky; top: 0; }
  .pkg-modal .pf-sec {
    order: 0; gap: 16px; margin: 0; padding: 20px 22px 22px;
    border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,0.03);
  }
  .pkg-modal .pf-sec-calc { display: flex; background: rgba(91,114,236,0.08); border-color: rgba(143,160,255,0.25); }
  .pkg-modal .pf-sec-title { font-size: 15px; gap: 10px; }
  .pkg-modal .pf-ic { width: 28px; height: 28px; border-radius: 9px; }
  .pkg-modal .pf-ic .ic { width: 16px; height: 16px; }
  .pkg-modal .form-group { gap: 7px; }
  .pkg-modal .form-group > label { font-size: 12.5px; font-weight: 600; color: var(--text2); }
  .pkg-modal .pf-track input { height: 50px; font-size: 17px; font-weight: 700; letter-spacing: 0.3px; }
  .pkg-modal .pf-notrack-btn { padding: 8px 12px; }

  /* Выпадающие списки → кнопки */
  .pkg-modal .pf-country > select, .pkg-modal .pf-row-sp select, .pkg-modal #pkg-note-type { display: none; }
  .pkg-modal .pf-pills { display: flex; flex-wrap: wrap; gap: 7px; }
  .pkg-modal .pf-cwt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 16px 14px; }
  .pkg-modal .pf-cwt .pf-country { grid-column: 1 / -1; }
  .pkg-modal .pf-cwt .pf-tariff { grid-column: auto; }
  .pkg-modal .pf-row-sp { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .pkg-modal .pf-cost-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 14px; }
  .pkg-modal .pf-ct-invoice, .pkg-modal .pf-ins { grid-column: 1 / -1; }
  .pkg-modal .pf-ins { gap: 14px; }
  .pkg-modal .pf-declared { max-width: calc(50% - 7px); }
  /* «До РФ» и «По РФ» — рядом */
  .pkg-modal .pf-ins-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .pkg-modal .pf-rfins-body { padding-left: 14px; }
  .pkg-modal .pf-notes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; align-items: start; }
  .pkg-modal .pf-pills-note { gap: 6px; margin-bottom: 2px; }
  .pkg-modal .pf-pills-note .pf-pill { padding: 6px 10px; font-size: 12.5px; gap: 6px; }
  .pkg-modal #pkg-description { min-height: 124px; }
  .pkg-modal textarea { min-height: 84px; }
  .pkg-modal .field-hint { margin: 0; font-size: 11.5px; }

  .pkg-modal .pf-footer {
    flex-shrink: 0; flex-direction: row; align-items: center; gap: 12px;
    padding: 14px 28px; border-top: 1px solid var(--border); background: var(--bg2);
  }
  .pkg-modal .pf-total { display: block; margin-right: auto; font-size: 13.5px; color: var(--text2); }
  .pkg-modal .pf-total b { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; margin-left: 6px; }
  .pkg-modal .pf-cancel {
    display: inline-flex; padding: 13px 22px; border-radius: var(--radius-sm); cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 600;
    color: var(--text2); background: transparent; border: 1px solid var(--border);
  }
  .pkg-modal .pf-cancel:hover { color: var(--text); border-color: var(--border-acc); }
  .pkg-modal .pf-footer .btn-primary { min-width: 200px; padding: 13px 30px; }

  body.theme-light .modal-sheet.pkg-modal { background: #f4f6fb; }
  body.theme-light .pkg-modal .pf-sec { background: #fff; border-color: rgba(15,23,42,0.07); box-shadow: 0 1px 3px rgba(15,23,42,0.04); }
  body.theme-light .pkg-modal .pf-sec-calc { background: #f5f7ff; border-color: rgba(91,114,236,0.22); }
  body.theme-light .pkg-modal .pf-footer { background: #fff; border-top-color: rgba(15,23,42,0.08); }
  body.theme-light .pkg-modal .modal-header { background: #fff; border-bottom: 1px solid rgba(15,23,42,0.08); }
  body.theme-light .pkg-modal .pf-cancel { border-color: rgba(15,23,42,0.14); color: #475569; }
}

/* ══ Страховка отправки по РФ (СДЭК / Яндекс) в форме адреса ══ */
.dlv-ins { display: flex; flex-direction: column; gap: 8px; }
.field-hint.dlv-ins-off { margin: -4px 0 12px; }
body.theme-light .field-hint.dlv-ins-off { color: #b45309; }
body:not(.theme-light) .field-hint.dlv-ins-off { color: #fbbf24; }
.dlv-ins-pick .svc-pick-name { display: inline-flex; align-items: center; gap: 6px; }
.dlv-ins-pick .svc-pick-name .ic { width: 16px; height: 16px; color: #60a5fa; }
body.theme-light .dlv-ins-pick .svc-pick-name .ic { color: #2563eb; }
.dlv-ins-pick input { accent-color: #60a5fa; }
#delivery-ins-fee { color: var(--text); }
.dlv-ins-body { margin-top: 2px; }
.pi-sub-line .ic { width: 13px; height: 13px; vertical-align: -2px; color: var(--text3); }

/* Админка: ставки страховки отправки */
.rf-ins-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px;
  padding: 8px 0; border-top: 1px dashed var(--border);
}
.rf-ins-row:first-child { border-top: none; padding-top: 0; }
.rf-ins-name { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; color: var(--text); }
.rf-ins-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text3); min-width: 0; }
.rf-ins-row input {
  width: 100%; min-width: 0; padding: 8px 10px; font-size: 12.5px; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}

/* ══ Админ: «накладная оформлена» — зелёная рамка у блока данных клиента ══ */
.dlv-waybill {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  color: var(--text2); background: transparent; border: none; border-top: 1px solid var(--border);
}
.dlv-waybill .ic { width: 15px; height: 15px; }
.dlv-waybill:hover { color: #16a34a; }
.dlv-waybill:disabled { opacity: 0.5; }
.dlv-box.dlv-done { border: 2px solid #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.12); }
.dlv-waybill.done { color: #4ade80; background: rgba(34,197,94,0.1); border-top-color: rgba(34,197,94,0.35); }
.dlv-waybill-at { font-weight: 500; opacity: 0.8; white-space: nowrap; }
body.theme-light .dlv-box.dlv-done { border-color: #16a34a; }
body.theme-light .dlv-waybill.done { color: #15803d; background: rgba(22,163,74,0.08); border-top-color: rgba(22,163,74,0.3); }

/* ══ Фото в карточке: одна миниатюра, значок «ваше» / «клиент» / «2» ══ */
.pkg-thumb-badge {
  position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 7px; pointer-events: none;
  font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.62);
}
.pkg-thumb-badge .ic { width: 11px; height: 11px; }
.group-item-thumb { position: relative; }
.group-item-count {
  position: absolute; right: 2px; bottom: 2px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
  color: #fff; background: rgba(0,0,0,0.65); pointer-events: none;
}
.group-item.client-tap { cursor: pointer; }

/* Клиент: камера рядом с «Убрать» — добавить своё фото */
.btn-client-photo-sm {
  flex: 0 0 42px; height: 38px; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text2); background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
}
.btn-client-photo-sm .ic { width: 18px; height: 18px; }
.btn-client-photo-sm:active { background: rgba(91,114,236,0.16); color: #b4c0ff; }
body.theme-light .btn-client-photo-sm { background: #fff; border-color: rgba(15,23,42,0.14); color: #475569; }
.btn-client-more { overflow: hidden; text-overflow: ellipsis; }

/* Просмотр фото: стрелки, «1 из 2», удаление */
/* Сцена шириной в экран: стрелки всегда у краёв, даже у маленькой картинки */
.photo-lb-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: min(calc(100vw - 40px), 760px);
}
.photo-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.22);
}
.photo-lb-nav .ic { width: 18px; height: 18px; }
.photo-lb-prev { left: 8px; } .photo-lb-prev .ic { transform: rotate(180deg); }
.photo-lb-next { right: 8px; }
.photo-lb-bar { display: flex; align-items: center; gap: 14px; min-height: 34px; }
.photo-lb-count { font-size: 13px; color: rgba(255,255,255,0.6); }
.photo-lb-count:empty { display: none; }
.photo-lb-del {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: #fca5a5;
  background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.35);
}
.photo-lb-del .ic { width: 15px; height: 15px; }

/* Страховка по РФ не вошла в счёт — напоминание админу в карточке */
.rfins-due .pi-ic .ic { color: #f59e0b; }
.rfins-due-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rfins-due-btns button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-xs);
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.32); color: #b45309;
}
body:not(.theme-light) .rfins-due-btns button { color: #fbbf24; }
.rfins-due-btns .rfins-billed { background: transparent; border-color: var(--border); color: var(--text2) !important; }
.rfins-due-btns .ic { width: 15px; height: 15px; }
.rfins-due-btns button:disabled { opacity: 0.5; }

/* ══ СДЭК: карта пунктов выдачи ═════════════════════════════════ */
.cdek-map-overlay {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: var(--bg); padding-top: env(safe-area-inset-top);
}
.cdek-map-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.cdek-map-back, .cdek-view-toggle {
  flex-shrink: 0; height: 42px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.cdek-map-back { width: 42px; display: grid; place-items: center; }
.cdek-map-back .ic { width: 18px; height: 18px; }
.cdek-view-toggle { padding: 0 14px; }
.cdek-city { position: relative; flex: 1; min-width: 0; }
.cdek-city > .ic { position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; color: var(--text3); pointer-events: none; }
.cdek-city input {
  width: 100%; height: 42px; padding: 0 12px 0 36px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 15px; font-weight: 600;
}
.cdek-city-list {
  position: absolute; left: 0; right: 0; top: 48px; z-index: 1001; max-height: 50vh; overflow-y: auto;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.cdek-city-list button {
  display: block; width: 100%; text-align: left; padding: 11px 14px; border: none; background: none;
  color: var(--text); font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.cdek-city-list button:last-child { border-bottom: none; }
.cdek-city-list button:active, .cdek-city-list button:hover { background: var(--card-hover); }
.cdek-city-empty { padding: 12px 14px; font-size: 13.5px; color: var(--text3); }
.cdek-map-filters { display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
.cdek-chip {
  flex-shrink: 0; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.cdek-chip.active { background: #1ab248; border-color: #1ab248; color: #fff; }
.cdek-map-body { position: relative; flex: 1; min-height: 0; }
#cdek-map { position: absolute; inset: 0; background: var(--bg2); }
#cdek-map .leaflet-control-attribution { font-size: 10px; }
body:not(.theme-light) #cdek-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.6); }
.cdek-map-msg {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: calc(100% - 32px);
  padding: 9px 14px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 600; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Метки: капля с иконкой; пункт — зелёный СДЭК, постамат — синий */
.cdek-pin-wrap { background: none; border: none; }
.cdek-pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #1ab248; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  display: grid; place-items: center; transition: transform 0.15s;
}
.cdek-pin .ic { width: 15px; height: 15px; color: #fff; transform: rotate(45deg); }
.cdek-pin-postamat { background: #3b82f6; }
.cdek-pin.active { background: #0f172a; transform: rotate(-45deg) scale(1.25); }
body:not(.theme-light) .cdek-pin.active { background: #fff; }
body:not(.theme-light) .cdek-pin.active .ic { color: #0f172a; }
.cdek-cluster {
  display: grid; place-items: center; border-radius: 50%; background: rgba(26,178,72,0.25);
}
.cdek-cluster span {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #1ab248; color: #fff; font-size: 12.5px; font-weight: 800; border: 2px solid #fff;
}

/* Список пунктов */
.cdek-list { position: absolute; inset: 0; overflow-y: auto; background: var(--bg); padding: 0 12px 120px; z-index: 500; }
.cdek-list-search { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-bottom: 8px; }
.cdek-list-search .ic { position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; color: var(--text3); }
.cdek-list-search input {
  width: 100%; height: 42px; padding: 0 12px 0 36px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 14.5px;
}
.cdek-li {
  display: flex; gap: 12px; width: 100%; text-align: left; padding: 12px; margin-bottom: 6px; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.cdek-li.active { border-color: #1ab248; background: rgba(26,178,72,0.08); }
.cdek-li-ic, .cdek-pc-ic, .cdek-pick-ic {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(26,178,72,0.12); color: #1ab248;
}
.cdek-li-ic.postamat, .cdek-pc-ic.postamat { background: rgba(59,130,246,0.12); color: #3b82f6; }
.cdek-li-ic .ic, .cdek-pc-ic .ic, .cdek-pick-ic .ic { width: 18px; height: 18px; }
.cdek-li-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cdek-li-main b { font-size: 14px; font-weight: 700; }
.cdek-li-main small { font-size: 12px; color: var(--text3); line-height: 1.35; }
.cdek-list-empty { padding: 30px 10px; text-align: center; color: var(--text3); font-size: 14px; }

/* Карточка выбранного пункта внизу карты */
.cdek-point-sheet {
  position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 1000;
  max-width: 520px; margin: 0 auto; padding: 14px 16px 16px; border-radius: 18px;
  background: var(--bg2); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.cdek-ps-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cdek-ps-type { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #1ab248; }
.cdek-ps-type.postamat { color: #3b82f6; }
.cdek-ps-type .ic { width: 15px; height: 15px; }
.cdek-ps-code { font-size: 12px; color: var(--text3); font-weight: 600; }
.cdek-ps-x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--card); color: var(--text2); display: grid; place-items: center; cursor: pointer; }
.cdek-ps-x .ic { width: 15px; height: 15px; }
.cdek-ps-addr { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 6px; }
.cdek-ps-row { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--text2); line-height: 1.4; margin-top: 3px; }
.cdek-ps-row .ic { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--text3); }
.cdek-ps-pick { margin-top: 12px; width: 100%; background: #1ab248 !important; color: #fff !important; }

/* Форма адреса: кнопка «Выбрать на карте» и выбранный пункт */
.cdek-pick-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; cursor: pointer; text-align: left;
  border-radius: var(--radius-sm); border: 1.5px dashed rgba(26,178,72,0.5); background: rgba(26,178,72,0.06); color: var(--text);
}
.cdek-pick-btn > .ic { width: 18px; height: 18px; color: #1ab248; margin-left: auto; }
.cdek-pick-main { display: flex; flex-direction: column; gap: 2px; }
.cdek-pick-main b { font-size: 14.5px; }
.cdek-pick-main small { font-size: 12px; color: var(--text3); }
.cdek-point-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border-radius: var(--radius-sm); border: 1px solid rgba(26,178,72,0.4); background: rgba(26,178,72,0.06);
}
.cdek-pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cdek-pc-type { font-size: 11.5px; font-weight: 700; color: #1ab248; text-transform: uppercase; letter-spacing: 0.3px; }
.cdek-pc-addr { font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.cdek-pc-sub { font-size: 12px; color: var(--text3); line-height: 1.35; }
.cdek-pc-calc { font-size: 13px; color: var(--text2); margin-top: 4px; }
.cdek-pc-calc b { color: var(--text); }
.cdek-pick-change {
  flex-shrink: 0; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text2); font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* Карточка у админа: оформить / заказ оформлен */
.cdek-order-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 10px;
  border: none; border-top: 1px solid var(--border); background: #1ab248; color: #fff;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.cdek-order-btn .ic { width: 16px; height: 16px; }
.cdek-order { padding: 10px 12px; border-top: 1px solid var(--border); background: rgba(26,178,72,0.07); }
.cdek-order-head { display: flex; align-items: center; gap: 6px; font-size: 13.5px; min-width: 0; }
.cdek-order-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--text2); }
.cdek-dot { width: 7px; height: 7px; border-radius: 50%; background: #1ab248; flex-shrink: 0; }
.cdek-logo {
  display: inline-block; padding: 2px 6px; border-radius: 5px; background: #1ab248; color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px;
}
.cdek-num { font-size: 14.5px; letter-spacing: 0.2px; color: var(--text); }
.cdek-order-head .dlv-copy { margin-left: -2px; }
.cdek-test { padding: 1px 6px; border-radius: 5px; background: rgba(245,158,11,0.15); color: #d97706; font-size: 11px; font-weight: 700; }
.cdek-status { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--card); color: var(--text2); font-size: 12px; font-weight: 600; }
.cdek-order-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; margin-top: 10px; }
.cdek-order-btns button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 34px; padding: 0 8px;
  border-radius: 9px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 12.5px; font-weight: 600;
}
.cdek-order-btns .ic { width: 14px; height: 14px; flex-shrink: 0; }
.cdek-order-btns .cdek-cancel { width: 34px; padding: 0; color: #ef4444; border-color: rgba(239,68,68,0.3); background: transparent; }
.cdek-order-btns button:disabled { opacity: 0.5; }

/* Карточка у клиента: трек СДЭК */
.cdek-client { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--text); }
.cdek-client .cdek-status { margin-left: 0; }
.cdek-track-link { margin-left: auto; color: #1ab248; font-weight: 700; text-decoration: none; }

/* Окно оформления */
.cdek-order-summary { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); margin-bottom: 14px; }
.cdek-os-row { display: flex; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.cdek-os-row:last-child { border-bottom: none; }
.cdek-os-row span { flex: 0 0 92px; color: var(--text3); }
.cdek-os-row b { flex: 1; min-width: 0; font-weight: 600; color: var(--text); line-height: 1.35; }
.cdek-warn { color: #d97706; font-weight: 600; }
.cdek-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cdek-dims { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cdek-dims input { flex: 1; min-width: 0; text-align: center; }
.cdek-dims span { color: var(--text3); }
.pf-pills#cdek-order-boxes { display: flex; flex-wrap: wrap; gap: 7px; }
#cdek-order-boxes .pf-pill small { font-weight: 500; opacity: 0.7; margin-left: 3px; }
.cdek-order-calc { min-height: 20px; margin: 2px 0 12px; font-size: 14px; color: var(--text2); display: flex; align-items: center; gap: 6px; }
.cdek-order-calc .ic { width: 17px; height: 17px; color: #1ab248; }
.cdek-order-calc b { color: var(--text); }

/* Настройки СДЭК */
.cdek-adm-mode { display: flex; gap: 10px; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
.cdek-adm-mode .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.cdek-adm-live { background: rgba(26,178,72,0.1); color: var(--text); }
.cdek-adm-live .ic { color: #1ab248; }
.cdek-adm-test { background: rgba(245,158,11,0.12); color: var(--text); }
.cdek-adm-test .ic { color: #d97706; }
.cdek-adm-off { background: var(--card); color: var(--text2); }
.cdek-adm-block { padding: 12px 0; border-top: 1px solid var(--border); }
.cdek-adm-label { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cdek-adm-point { font-size: 13.5px; color: var(--text); margin-bottom: 8px; line-height: 1.4; }
.cdek-adm-point b { color: #1ab248; margin-right: 4px; }
.cdek-box-row { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.cdek-box-row input[type="text"], .cdek-box-row input[type="number"] {
  min-width: 0; padding: 7px 6px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 13px; text-align: center;
}
.cdek-box-name { flex: 1.2; }
.cdek-box-l, .cdek-box-w, .cdek-box-h { flex: 1; }
.cdek-box-row > span { color: var(--text3); font-size: 12px; }
.cdek-box-def input { width: 17px; height: 17px; accent-color: #1ab248; -webkit-appearance: radio; appearance: auto; }
.cdek-box-del { width: 28px; height: 28px; flex-shrink: 0; border: none; border-radius: 8px; background: transparent; color: var(--text3); display: grid; place-items: center; cursor: pointer; }
.cdek-box-del .ic { width: 15px; height: 15px; }
.cdek-box-add {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; margin: 2px 0 6px; border-radius: 9px; cursor: pointer;
  border: 1px dashed var(--border-acc); background: transparent; color: var(--text2); font-size: 12.5px; font-weight: 600;
}
.cdek-box-add .ic { width: 14px; height: 14px; }
.cdek-adm-inline { font-size: 12.5px; color: var(--text2); width: auto !important; flex: 1; }
.cdek-adm-auto { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0 2px; border-top: 1px solid var(--border); cursor: pointer; }
.cdek-adm-auto input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: #1ab248; -webkit-appearance: checkbox; appearance: auto; }
.cdek-adm-auto span { display: flex; flex-direction: column; gap: 3px; }
.cdek-adm-auto b { font-size: 13.5px; color: var(--text); }
.cdek-adm-auto small { font-size: 12px; color: var(--text3); line-height: 1.45; }

/* Доставка по РФ у админа: свёрнуто — одна строка, раскрыто — все поля */
.dlv-sum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 3px 8px;
  padding: 10px 10px 10px 12px; cursor: pointer;
}
.dlv-sum:focus-visible { outline: 2px solid #5b72ec; outline-offset: -2px; border-radius: 10px; }
.dlv-box.open .dlv-sum, .dlv-body { display: none; }
.dlv-box.open .dlv-body { display: block; }
.dlv-sum-name, .dlv-sum-addr { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlv-sum-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.dlv-sum-addr { grid-column: 1 / -1; font-size: 12px; color: var(--text3); }
.dlv-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.dlv-chip .ic { width: 14px; height: 14px; }
.dlv-chip-ok { background: rgba(34,197,94,0.12); color: #16a34a; }
body:not(.theme-light) .dlv-chip-ok { color: #4ade80; }
.dlv-chip .cdek-logo { padding: 1px 4px; font-size: 9.5px; }
.dlv-sum .cdek-order-btn.dlv-chip-btn { width: auto; flex-shrink: 0; padding: 6px 10px; border: none; border-radius: 9px; font-size: 12.5px; }
.dlv-chev { flex-shrink: 0; display: grid; place-items: center; color: var(--text3); }
.dlv-chev .ic { width: 18px; height: 18px; }
.dlv-actions { display: flex; border-top: 1px solid var(--border); }
.dlv-actions .dlv-copy-all { flex: 1; width: auto; border-top: none; }
.dlv-fold {
  flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 9px 12px; cursor: pointer;
  border: none; border-left: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 12.5px; font-weight: 600;
}
.dlv-fold .ic { width: 15px; height: 15px; transform: rotate(180deg); }

/* Службы доставки по РФ (админ): включить / выключить */
.dlv-type-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.dlv-type-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dlv-type-main b { font-size: 14px; color: var(--text); }
.dlv-type-main small { font-size: 12px; color: var(--text3); }
.dlv-type-row input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #1ab248; -webkit-appearance: checkbox; appearance: auto; }
#dlv-types-admin .field-hint { margin-top: 10px; }
#tab-info .adm-group[data-sec="cdek"] .i-section-label + .tpl-mgmt-card + .i-section-label { margin-top: 18px; }

/* Куда присылать автобэкапы */
.backup-chat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.backup-chat label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.backup-chat-row { display: flex; gap: 8px; }
.backup-chat-row input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--radius-xs); font-size: 14px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.backup-chat-row input:focus { outline: none; border-color: var(--border-acc); }
.backup-chat-row .btn-backup-dl { flex: 0 0 auto; padding: 10px 18px; }
.backup-chat .field-hint { margin-top: 8px; }

/* Мини-бар действий на ПК: плитки в три колонки вместо столбца, как на телефоне.
   Опасное действие — полосой внизу, списки посылок (второй шаг) — в две колонки */
@media (min-width: 880px) {
  .modal-sheet.action-sheet { max-width: 760px; }
  .action-sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .action-sheet-grid .sheet-action {
    flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px;
    min-height: 104px; padding: 14px 15px; font-size: 14px; line-height: 1.3;
  }
  .action-sheet-grid .sheet-action:hover { background: var(--card-hover); border-color: var(--border-acc); }
  .action-sheet-grid .sheet-action-danger {
    grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: center;
    min-height: 0; padding: 11px 14px;
  }
  .action-sheet-grid .sheet-action-danger:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.45); }
  .action-sheet-grid .sheet-action-danger .sheet-action-label { flex: 0 1 auto; }
  /* Второй шаг: строки посылок — горизонтально, в две колонки */
  .action-sheet-grid:has(.sheet-action-tail) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-sheet-grid:has(.sheet-action-tail) .sheet-action { flex-direction: row; align-items: center; min-height: 0; padding: 12px 14px; }
  .action-sheet-grid .btn-group-sheet-back { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; padding: 11px 14px; }
}

/* Клиент в карточке админа — нажмите, чтобы написать ему в Telegram */
.client-chat {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; margin: 0;
  border: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.client-chat > .ic { width: 15px; height: 15px; flex-shrink: 0; color: #5b72ec; opacity: 0.8; }
.client-chat:hover { color: #5b72ec; }
body:not(.theme-light) .client-chat:hover { color: #a5b4fc; }
.client-chat:disabled { opacity: 0.6; }
.client-chat-sm {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: #5b72ec; background: rgba(91,114,236,0.1);
}
.client-chat-sm > .ic { width: 13px; height: 13px; opacity: 1; }
.client-chat-sm:hover { background: rgba(91,114,236,0.18); }