/* ═══════════════════════════════════════════════════════
   styles.css — M.Y. STUDIO CRM — Cloudflare Web App v31
   Основано на _Styles.html из GAS-версии
   ═══════════════════════════════════════════════════════ */

/* ── CSS-переменные ── */
:root {
  color-scheme: light dark;

  /* ── Акцент ── */
  --color-accent:      #007AFF;
  --color-accent-tint: rgba(0,122,255,0.12);

  /* ── Фоны (iOS system backgrounds) ── */
  --color-background-primary:   #FFFFFF;
  --color-background-secondary: #F2F2F7;
  --color-background-tertiary:  #FFFFFF;
  --color-background-elevated:  #FFFFFF;

  /* ── Текст (iOS labels) ── */
  --color-text-primary:     #000000;
  --color-text-secondary:   rgba(60,60,67,0.60);
  --color-text-tertiary:    rgba(60,60,67,0.30);
  --color-text-placeholder: rgba(60,60,67,0.30);

  /* ── Разделители ── */
  --color-border-tertiary:  rgba(60,60,67,0.29);
  --color-border-secondary: #C6C6C8;
  --color-border:           rgba(60,60,67,0.29);

  /* ── Системные цвета ── */
  --color-blue:   #007AFF;
  --color-green:  #34C759;
  --color-red:    #FF3B30;
  --color-orange: #FF9500;
  --color-yellow: #FFCC00;
  --color-purple: #AF52DE;
  --color-gray:   #8E8E93;
  --color-gray-2: #AEAEB2;
  --color-gray-3: #C7C7CC;
  --color-gray-4: #D1D1D6;
  --color-gray-5: #E5E5EA;
  --color-gray-6: #F2F2F7;

  /* ── Бейджи ── */
  --badge-red-bg:    #FFEDEF; --badge-red-fg:    #C0001A;
  --badge-green-bg:  #E8F8EC; --badge-green-fg:  #1A7A3A;
  --badge-blue-bg:   #E5F1FF; --badge-blue-fg:   #005CC5;
  --badge-orange-bg: #FFF4E0; --badge-orange-fg: #915200;
  --badge-purple-bg: #F3EEFF; --badge-purple-fg: #7B2FBE;
  --badge-grey-bg:   var(--color-background-secondary);
  --badge-grey-fg:   var(--color-text-secondary);

  /* ── Семантические алиасы ── */
  --color-success: var(--color-green);

  /* ── Скругления ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);

  /* ── Тени ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);

  /* ── Типографика (iOS scale) ── */
  --font-size-large-title: 34px;
  --font-size-title-1:     28px;
  --font-size-title-2:     22px;
  --font-size-title-3:     20px;
  --font-size-headline:    17px;
  --font-size-body:        17px;
  --font-size-callout:     16px;
  --font-size-subhead:     15px;
  --font-size-footnote:    13px;
  --font-size-caption-1:   12px;
  --font-size-caption-2:   11px;

  /* ── Шрифт инпутов: 13px десктоп, 16px мобиль (iOS no-zoom) ── */
  --input-fs: 13px;

  /* ── Blur-фон для мобильного nav (light/dark) ── */
  --mob-blur-bg: rgba(255,255,255,0.85);
}

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  min-height: 100dvh;
}

/* ── App shell ── */
.app {
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

/* ── Sidebar ── */
.sb {
  width: 152px;
  background: var(--color-background-secondary);
  border-right: 0.5px solid var(--color-border-tertiary);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sb-logo {
  padding: 14px 12px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.sb-logo .nm { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.sb-logo .rl { font-size: 10px; color: var(--color-text-secondary); margin-top: 2px; }

.nav { padding: 6px 0; flex: 1; }
.ni {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; cursor: pointer;
  color: var(--color-text-secondary);
  border-right: 2px solid transparent;
  font-size: 12px; transition: background 0.1s;
  user-select: none;
}
.ni:hover { background: var(--color-background-primary); color: var(--color-text-primary); }
.ni.on {
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  border-right-color: var(--color-accent);
  font-weight: 500;
}
.ni .material-icons { font-size: 16px; }

.sb-foot {
  padding: 10px 12px;
  border-top: 0.5px solid var(--color-border-tertiary);
  font-size: 10px; color: var(--color-text-secondary);
}

/* ── Large Title — скрыт на десктопе, виден только на мобиле ── */
.mob-large-title { display: none; }

/* ── Bottom Sheet Overlay (shown when body.has-sheet) ── */
#mob-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
@media (max-width: 768px) {
  body.has-sheet #mob-overlay { opacity: 1; pointer-events: auto; }
}

/* ── Drag handle (visible only inside mobile bottom sheets) ── */
.mob-drag-handle { display: none; }

/* ── Mobile top navbar (iOS, blur) ── */
.mob-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 44px;
  background: var(--mob-blur-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  flex-shrink: 0;
  z-index: 50;
}
.mob-bar-logo {
  flex: 1;
  font-size: 15px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--color-text-primary);
}

/* ── iOS Tab Bar (bottom, fixed) ── */
.mob-tab-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  flex-direction: row;
  background: var(--mob-blur-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--color-border-tertiary);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
}

/* ── Tab Bar items ── */
.mob-ni {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--color-text-secondary); font-size: 10px; white-space: nowrap;
  user-select: none; -webkit-tap-highlight-color: transparent;
  min-height: 49px;
}
.mob-ni .material-icons { font-size: 24px; }
.mob-ni.on { color: var(--color-accent); }

/* ── Content area ── */
.content {
  flex: 1;
  overflow: hidden;
  background: var(--color-background-primary);
  display: flex;
  flex-direction: column;
}

/* ── Modules ── */
.module { display: none; flex: 1; overflow: hidden; flex-direction: column; }
.module.on { display: flex; }

/* ── Page header ── */
.ph {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  flex-shrink: 0;
}
.ph h2 { font-size: 15px; font-weight: 500; }
.ph-right { display: flex; gap: 6px; align-items: center; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  transition: background 0.15s, opacity 0.15s, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover  { background: var(--color-background-secondary); }
.btn:active { transform: scale(0.96); opacity: 0.75; }
.btn:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }

/* Filled */
.btn.p   { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn.p:hover { background: #006AE6; border-color: #006AE6; }
.btn.grn { background: var(--color-green); border-color: var(--color-green); color: #fff; }
.btn.grn:hover { background: #28A745; border-color: #28A745; }
.btn.red { background: var(--color-red); border-color: var(--color-red); color: #fff; }
.btn.red:hover { background: #E0271E; border-color: #E0271E; }

/* Tinted */
.btn.tinted { background: var(--color-accent-tint); border-color: transparent; color: var(--color-accent); }
.btn.tinted:hover { background: rgba(0,122,255,0.18); }

/* Destructive tinted */
.btn.dest { background: var(--badge-red-bg); border-color: transparent; color: var(--color-red); }
.btn.dest:hover { background: rgba(255,59,48,0.18); }

/* Plain / Ghost */
.btn.ghost { border-color: transparent; background: transparent; color: var(--color-text-secondary); }
.btn.ghost:hover { background: var(--color-background-secondary); }

.btn .material-icons { font-size: 14px; }

/* ── Status badges ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  letter-spacing: 0.1px;
}
.b-no   { background: var(--badge-red-bg);    color: var(--badge-red-fg); }
.b-paid { background: var(--badge-green-bg);  color: var(--badge-green-fg); }
.b-acc  { background: var(--badge-blue-bg);   color: var(--badge-blue-fg); }
.b-ok   { background: var(--badge-green-bg);  color: var(--badge-green-fg); }
.b-miss { background: var(--badge-red-bg);    color: var(--badge-red-fg); }
.b-grey { background: var(--badge-grey-bg);   color: var(--badge-grey-fg); }
.b-lead { background: var(--badge-orange-bg); color: var(--badge-orange-fg); }
.b-conv { background: var(--badge-green-bg);  color: var(--badge-green-fg); }
.b-inv  { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.b-rcpt { background: var(--badge-green-bg);  color: var(--badge-green-fg); }
.b-doc  { background: var(--badge-blue-bg);   color: var(--badge-blue-fg); }

/* ── Stats bar ── */
.stats {
  display: grid; gap: 8px;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  flex-shrink: 0;
}
.stat {
  background: var(--color-background-primary);
  border-radius: var(--border-radius-md);
  padding: 10px 14px;
  border: 0.5px solid var(--color-border-tertiary);
  display: flex; flex-direction: column; align-items: center;
}
.sl { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 3px; text-align: center; }
.sv { font-size: 22px; font-weight: 700; text-align: center; }

/* ── Payment filters ── */
.pay-filters {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 6px;
  flex-wrap: wrap;
}
.pay-filters select {
  font-size: 13px; padding: 7px 10px;
  border: none;
  border-radius: var(--radius-md);
  background: rgba(118,118,128,0.12);
  color: var(--color-text-primary);
  min-width: 160px; max-width: 260px;
  -webkit-appearance: none; appearance: none;
  transition: background 0.15s;
}
.pay-filters select:focus { outline: none; background: rgba(118,118,128,0.16); box-shadow: 0 0 0 3px var(--color-accent-tint); }

/* pay-filters phone input */
.pay-filters input[type="tel"] {
  font-size: 13px; padding: 7px 10px;
  border: none;
  border-radius: var(--radius-md);
  background: rgba(118,118,128,0.12);
  color: var(--color-text-primary);
  transition: background 0.15s;
}
.pay-filters input[type="tel"]:focus { outline: none; background: rgba(118,118,128,0.16); box-shadow: 0 0 0 3px var(--color-accent-tint); }

/* ── Search bar (Leads / Clients) ── */
.search-bar {
  padding: 8px 16px 4px;
}
.search-bar input {
  font-size: 13px; padding: 7px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: rgba(118,118,128,0.12);
  color: var(--color-text-primary);
  width: 100%; max-width: 280px;
  transition: background 0.15s;
}
.search-bar input:focus { outline: none; background: rgba(118,118,128,0.16); box-shadow: 0 0 0 3px var(--color-accent-tint); }

/* ── Tables ── */
.tbl-wrap { flex: 1; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: 12px; font-weight: 600;
  color: var(--color-text-secondary); padding: 10px 12px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  white-space: nowrap; cursor: pointer; user-select: none;
  background: var(--color-background-secondary);
}
thead th:nth-child(even) { background: var(--color-gray-5); }
th:after { content: ' ⇅'; opacity: 0.3; }
th.sort-asc:after  { content: ' ▲'; opacity: 1; }
th.sort-desc:after { content: ' ▼'; opacity: 1; }
/* Скрывать sort-иконки в превью счёта (всегда) и при генерации PDF */
#inv-preview th:after,
body.pdf-mode th:after { content: none !important; }
#inv-preview th { cursor: default; }

td {
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  color: var(--color-text-primary);
  vertical-align: middle;
  white-space: nowrap;
}
td.cell-wrap { white-space: normal; min-width: 120px; max-width: 260px; }
tr:last-child td { border-bottom: none; }
tr.converted td { opacity: 0.5; }
tr:hover td { background: rgba(128,128,128,0.07); }

.id-c { color: var(--color-accent); font-weight: 500; font-size: 11px; }
.row-link { cursor: pointer; color: var(--color-accent); text-decoration: underline; }
.row-link:hover { color: var(--color-accent); }

/* ── Forms ── */
.fgrid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fgrid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.fg { display: flex; flex-direction: column; gap: 4px; }
.fg label { font-size: var(--font-size-caption-1); font-weight: 500; color: var(--color-text-secondary); }
.fg input, .fg select, .fg textarea {
  font-size: var(--input-fs); padding: 10px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: rgba(118,118,128,0.12);
  color: var(--color-text-primary); width: 100%;
  transition: background 0.15s;
  -webkit-appearance: none; appearance: none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  outline: none;
  background: rgba(118,118,128,0.16);
  box-shadow: 0 0 0 3px var(--color-accent-tint);
}
.fg textarea { resize: vertical; min-height: 60px; }
.fg.field-error input,
.fg.field-error select {
  box-shadow: inset 0 0 0 1.5px var(--color-red) !important;
  background: rgba(255,59,48,0.06) !important;
}
.fg.field-error label { color: var(--color-red); }
.fsec {
  font-size: 12px; font-weight: 500; color: var(--color-text-secondary);
  letter-spacing: 0.5px; margin: 10px 0 6px;
  padding-top: 10px; border-top: 0.5px solid var(--color-border-tertiary);
}
.fbtns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ── Inline add form ── */
.add-form {
  background: var(--color-background-secondary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  padding: 14px 16px; display: none; flex-shrink: 0;
  overflow-y: auto; max-height: 60vh;
}
.add-form.open { display: block; }
.add-form-title {
  font-size: 13px; font-weight: 500;
  color: var(--color-text-secondary); letter-spacing: 0.5px; margin-bottom: 10px;
}

/* ── Profile panel (slides from right) ── */
.profile-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(680px, 100%);
  background: var(--color-background-primary);
  border-left: 0.5px solid var(--color-border-tertiary);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 10;
}
.profile-panel.open { transform: translateX(0); }
.profile-header {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  flex-shrink: 0;
}
.profile-header h3 { font-size: 14px; font-weight: 500; flex: 1; }
.profile-body { flex: 1; overflow-y: auto; padding: 16px; }
.profile-content { max-width: 100%; }

/* ── Avatar ── */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
  font-family: -apple-system, system-ui, sans-serif;
  letter-spacing: -0.3px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* ── Info rows ── */
.info-row {
  display: flex; gap: 8px; margin-bottom: 6px; align-items: flex-start;
}
.info-row .info-label {
  font-size: 12px; color: var(--color-text-secondary);
  min-width: 110px; padding-top: 1px;
}
.info-row .info-val { font-size: 14px; }

/* ── Finance cards ── */
.fin-card {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 12px; margin-bottom: 8px;
}
.fin-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.fin-card-id { font-size: 11px; font-weight: 500; color: var(--color-accent); }
.fin-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ── Invoice module ── */
.inv-layout {
  display: flex; flex: 1; overflow: hidden; gap: 0;
}
.inv-form-col {
  width: 320px; flex-shrink: 0;
  border-right: 0.5px solid var(--color-border-tertiary);
  overflow-y: auto; padding: 16px;
}
.inv-preview-col {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* прижать предпросмотр к левому краю */
}

/* ── Invoice preview ── */
#inv-preview {
  font-family: Arial, sans-serif;
  direction: rtl; font-size: 15px;
  max-width: 595px; margin: 0;        /* выравнивание по левому краю */
  /* Намеренно белый — PDF генерируется из этого элемента */
  color-scheme: light;
  background: #fff; color: #111;
  border: 0.5px solid #ccc;
  padding: 24px;
}
#inv-preview table { width: 100%; font-size: 13px; }
#inv-preview .inv-total { font-weight: bold; font-size: 18px; }
.inv-logo { max-height: 50px; margin-bottom: 12px; }

/* ── Audit filter chips ── */
.audit-chip {
  cursor: pointer; border: none; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px; opacity: 0.45;
  transition: opacity 0.15s;
}
.audit-chip.on { opacity: 1; }
.audit-chip:hover { opacity: 0.8; }

/* ── Overlay backdrop ── */
.content { position: relative; }

/* ── Spinner / error in table ── */
.tbl-empty {
  text-align: center; padding: 32px;
  color: var(--color-text-secondary); font-size: 11px;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — мобильные устройства
   Заменяет ручной переключатель setViewMode_()
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Инпуты 16px на мобиле — iOS no-zoom rule */
  :root { --input-fs: 16px; }

  /* Скрыть боковую панель */
  .sb { display: none; }

  /* Показать мобильный топбар и Tab Bar снизу */
  .mob-bar     { display: flex; }
  .mob-tab-bar { display: flex; }

  /* Запас снизу чтобы контент не прятался под Tab Bar */
  .tbl-wrap { padding-bottom: calc(49px + env(safe-area-inset-bottom) + 8px); }

  /* Контент занимает всю высоту */
  .app { flex-direction: column; }
  .content { flex: 1; overflow: hidden; }

  /* Таблицы — горизонтальный скролл */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { width: auto; min-width: 100%; }

  /* ── Bottom Sheet: drag handle ── */
  .mob-drag-handle {
    display: block;
    width: 36px; height: 4px;
    background: var(--color-border-secondary);
    border-radius: 2px;
    margin: 10px auto 2px;
    flex-shrink: 0;
  }

  /* ── Bottom Sheet: profile panels ── */
  .profile-panel {
    position: fixed;
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 95dvh;
    border-radius: 20px 20px 0 0;
    border-left: none;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 201;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .profile-panel.open { transform: translateY(0); }

  /* ── Bottom Sheet: add-form ── */
  .add-form {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: block;
    max-height: 88dvh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    background: var(--color-background-primary);
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 201;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .add-form.open {
    transform: translateY(0);
    flex: unset;
    max-height: 88dvh;
  }

  /* Stats — 2 в ряд */
  .stats { grid-template-columns: 1fr 1fr !important; }

  /* Invoice layout — только форма, без предпросмотра */
  .inv-layout { flex-direction: column; }
  .inv-form-col { width: 100%; border-right: none; border-bottom: none; }
  .inv-preview-col { display: none; }

  /* Form grids — 1 колонка */
  .fgrid, .fgrid3 { grid-template-columns: 1fr; }

  /* Buttons bar — wrap */
  .fbtns { flex-wrap: wrap; }
  .ph-right { gap: 4px; }

  /* Кнопки — 44px min-height для попадания пальцем */
  .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .btn .material-icons { font-size: 18px; }

  /* Строки таблицы — крупнее для касания */
  td { padding: 12px; font-size: 14px; }
  th { padding: 12px; font-size: 13px; }

  /* Профиль */
  .ph h2 { font-size: 16px; }
  .profile-header h3 { font-size: 16px; }

  /* Мобильный топбар — стандартная iOS высота */
  .mob-bar { height: 44px; }

  /* ── Large Title (iOS Large Title pattern) ── */
  .mob-large-title {
    display: block;
    font-size: var(--font-size-title-1);  /* 28px */
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
    padding: 8px 4px 4px;
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
  }

  /* ── Tab Bar spring press ── */
  .mob-ni {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.15s ease;
  }
  .mob-ni:active { transform: scale(0.82); }

  /* ── Nav bar compact title fade ── */
  .mob-bar-logo { transition: opacity 0.18s ease; }
  .mob-bar.title-hidden .mob-bar-logo { opacity: 0; pointer-events: none; }

  /* ══════════════════════════════════════════
     iOS INSET GROUPED — формы в Bottom Sheet
     ══════════════════════════════════════════ */

  /* Внутренний контейнер add-form */
  .add-form > div {
    padding: 0 16px 16px;
  }

  /* Заголовок секции (НОВЫЙ ЛИД, etc.) — iOS section header */
  .add-form-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-secondary);
    padding: 16px 4px 6px;
    margin: 0;
    background: transparent;
  }

  /* .fsec внутри profile-body — iOS section header */
  .profile-body .fsec {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-secondary);
    padding: 16px 4px 6px;
    margin: 0;
    background: transparent;
    border: none;
  }

  /* fgrid / fgrid3 → inset grouped card */
  .add-form .fgrid,
  .add-form .fgrid3,
  .profile-body .fgrid,
  .profile-body .fgrid3 {
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--color-background-primary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 0.5px solid var(--color-border-tertiary);
    margin-bottom: 0;
  }

  /* Каждый .fg — строка с разделителем снизу */
  .add-form .fgrid .fg,
  .add-form .fgrid3 .fg,
  .profile-body .fgrid .fg,
  .profile-body .fgrid3 .fg {
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    border-radius: 0;
    gap: 3px;
  }
  .add-form .fgrid .fg:last-child,
  .add-form .fgrid3 .fg:last-child,
  .profile-body .fgrid .fg:last-child,
  .profile-body .fgrid3 .fg:last-child {
    border-bottom: none;
  }

  /* Инпуты внутри grouped карты — transparent bg */
  .add-form .fgrid .fg input,
  .add-form .fgrid .fg select,
  .add-form .fgrid .fg textarea,
  .add-form .fgrid3 .fg input,
  .add-form .fgrid3 .fg select,
  .profile-body .fgrid .fg input,
  .profile-body .fgrid .fg select,
  .profile-body .fgrid .fg textarea,
  .profile-body .fgrid3 .fg input,
  .profile-body .fgrid3 .fg select {
    background: var(--color-background-secondary);
  }

  /* Отдельный .fg вне fgrid (комментарий) — своя карточка */
  .add-form > div > .fg,
  .profile-body > .fg {
    background: var(--color-background-primary);
    border-radius: var(--border-radius-lg);
    padding: 12px 16px;
    border: 0.5px solid var(--color-border-tertiary);
    margin-top: 12px;
  }
  .add-form > div > .fg label,
  .profile-body > .fg label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  .add-form > div > .fg textarea,
  .profile-body > .fg textarea {
    background: var(--color-background-secondary);
  }

  /* fbtns — кнопки на мобиле */
  .add-form .fbtns {
    margin-top: 16px;
    flex-direction: column;
    gap: 10px;
  }
  .add-form .fbtns .btn {
    width: 100%;
    justify-content: center;
  }

  /* profile-body отступы */
  .profile-body {
    background: var(--color-background-secondary);
    padding: 0 16px 24px;
  }
}

@media (max-width: 480px) {
  td, th { padding: 10px 8px; font-size: 13px; }
  .ph { padding: 10px 12px; }
  .ph h2 { font-size: 15px; }
  .btn { min-height: 44px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════
   DARK MODE — iOS system dark palette
   ══════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    --color-accent:      #0A84FF;
    --color-accent-tint: rgba(10,132,255,0.15);

    --color-background-primary:   #1C1C1E;
    --color-background-secondary: #000000;
    --color-background-tertiary:  #2C2C2E;
    --color-background-elevated:  #2C2C2E;

    --color-text-primary:     #FFFFFF;
    --color-text-secondary:   rgba(235,235,245,0.60);
    --color-text-tertiary:    rgba(235,235,245,0.30);
    --color-text-placeholder: rgba(235,235,245,0.30);

    --color-border-tertiary:  rgba(84,84,88,0.65);
    --color-border-secondary: #48484A;
    --color-border:           rgba(84,84,88,0.65);

    --color-blue:   #0A84FF;
    --color-green:  #30D158;
    --color-red:    #FF453A;
    --color-orange: #FF9F0A;
    --color-yellow: #FFD60A;
    --color-purple: #BF5AF2;
    --color-gray:   #8E8E93;
    --color-gray-2: #636366;
    --color-gray-3: #48484A;
    --color-gray-4: #3A3A3C;
    --color-gray-5: #2C2C2E;
    --color-gray-6: #1C1C1E;

    --badge-red-bg:    rgba(255,69,58,0.18);   --badge-red-fg:    #FF6B62;
    --badge-green-bg:  rgba(48,209,88,0.18);   --badge-green-fg:  #30D158;
    --badge-blue-bg:   rgba(10,132,255,0.18);  --badge-blue-fg:   #0A84FF;
    --badge-orange-bg: rgba(255,159,10,0.18);  --badge-orange-fg: #FF9F0A;
    --badge-purple-bg: rgba(191,90,242,0.18);  --badge-purple-fg: #BF5AF2;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.20);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.25);

    --mob-blur-bg: rgba(28,28,30,0.85);
  }
}

/* ══════════════════════════════════════════════════
   ПЕРЕКЛЮЧАТЕЛЬ ВИДА: force-mobile / force-desktop
   ══════════════════════════════════════════════════ */

/* Кнопка переключателя */
.view-toggle-btn {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: var(--border-radius-md);
  transition: background 0.1s;
}
.view-toggle-btn:hover { background: var(--color-border-tertiary); color: var(--color-text-primary); }
.view-toggle-btn .material-icons { font-size: 18px; }

/* В мобильном топбаре — группа кнопок справа */
.mob-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.mob-bar .view-toggle-btn { flex-shrink: 0; }

/* Pull-to-refresh индикатор */
#ptr-bar {
  position: fixed;
  top: 44px; left: 0; right: 0;
  height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-background-secondary);
  opacity: 0;
  z-index: 148;
  pointer-events: none;
}
#ptr-icon {
  font-size: 18px;
  color: var(--color-text-secondary);
  line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease;
}
#ptr-icon.ptr-ready  { color: var(--color-accent); }
#ptr-icon.ptr-spin   { animation: ptr-spin 0.5s linear; }
@keyframes ptr-spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ─── force-mobile: принудительный мобильный вид на десктопе ─── */
body.force-mobile { --input-fs: 16px; } /* iOS no-zoom */
body.force-mobile .sb           { display: none !important; }
body.force-mobile .mob-bar      { display: flex !important; }
body.force-mobile .mob-tab-bar  { display: flex !important; }
body.force-mobile .app          { flex-direction: column !important; }
body.force-mobile .tbl-wrap     { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.force-mobile table         { width: auto; min-width: 100%; }
body.force-mobile .mob-drag-handle { display: block !important; }
body.force-mobile .profile-panel {
  position: fixed !important;
  top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 95dvh !important;
  border-radius: 20px 20px 0 0 !important;
  border-left: none !important;
  transform: translateY(100%) !important;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
  z-index: 201 !important;
  overflow-y: auto !important;
}
body.force-mobile .profile-panel.open { transform: translateY(0) !important; }
body.force-mobile .add-form {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  display: block !important;
  max-height: 88dvh !important;
  overflow-y: auto !important;
  border-radius: 20px 20px 0 0 !important;
  border-bottom: none !important;
  background: var(--color-background-primary) !important;
  transform: translateY(110%) !important;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
  z-index: 201 !important;
}
body.force-mobile .add-form.open { transform: translateY(0) !important; flex: unset !important; }
body.force-mobile .stats        { grid-template-columns: 1fr 1fr !important; }
body.force-mobile .inv-layout      { flex-direction: column !important; }
body.force-mobile .inv-form-col   { width: 100% !important; border-right: none !important; border-bottom: none !important; }
body.force-mobile .inv-preview-col { display: none !important; }
body.force-mobile .fgrid,
body.force-mobile .fgrid3       { grid-template-columns: 1fr !important; }
body.force-mobile .btn          { min-height: 44px; padding: 10px 16px; font-size: 14px; }
body.force-mobile td            { padding: 12px; font-size: 14px; }
body.force-mobile th            { padding: 12px; font-size: 13px; }
body.force-mobile .ph h2        { font-size: 16px; }
body.force-mobile .mob-bar      { height: 44px; }
body.force-mobile .tbl-wrap     { padding-bottom: calc(49px + env(safe-area-inset-bottom) + 8px); }

/* ─── force-desktop: принудительный десктоп на мобиле ─── */
@media (max-width: 768px) {
  body.force-desktop .sb            { display: flex !important; }
  body.force-desktop .mob-bar       { display: none !important; }
  body.force-desktop .mob-tab-bar   { display: none !important; }
  body.force-desktop .app           { flex-direction: row !important; }
  body.force-desktop .profile-panel { width: min(680px, 100%) !important; }
  body.force-desktop .stats         { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important; }
  body.force-desktop .inv-layout    { flex-direction: row !important; }
  body.force-desktop .inv-form-col  { width: 320px !important; border-right: 0.5px solid var(--color-border-tertiary) !important; border-bottom: none !important; }
  body.force-desktop .fgrid         { grid-template-columns: 1fr 1fr !important; }
  body.force-desktop .fgrid3        { grid-template-columns: 1fr 1fr 1fr !important; }
  body.force-desktop .btn           { min-height: auto !important; padding: 7px 13px !important; font-size: 13px !important; }
  body.force-desktop td             { padding: 10px 12px !important; font-size: 15px !important; }
  body.force-desktop th             { padding: 10px 12px !important; font-size: 12px !important; }
}

/* ─── Mob dropdown nav menu ────────────────────────────────────────────── */
@media (max-width: 768px), body.force-mobile {
  #mob-dropdown {
    display: none;
    position: fixed;
    top: 44px;
    right: 8px;
    min-width: 220px;
    background: var(--color-background-primary);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.20), 0 0 0 0.5px var(--color-border);
    z-index: 300;
    overflow: hidden;
  }
  #mob-dropdown.open {
    display: block;
    animation: ddFadeIn 0.15s ease;
  }
  @keyframes ddFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
  }
  .mob-dd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--color-text-primary);
    cursor: pointer;
    border-bottom: 0.5px solid var(--color-border);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-dd-item:last-child  { border-bottom: none; }
  .mob-dd-item:active      { background: var(--color-background-secondary); }
  .mob-dd-item.active      { color: var(--color-accent); font-weight: 600; }
  .mob-dd-item .material-icons { font-size: 20px; color: var(--color-text-secondary); }
  .mob-dd-item.active .material-icons { color: var(--color-accent); }
  .mob-dd-sep {
    height: 6px;
    background: var(--color-background-secondary);
    border-top: 0.5px solid var(--color-border);
    border-bottom: 0.5px solid var(--color-border);
  }
}