/* QAZYNA Business на телефоне (сайт, приложение для Android, «На экран Домой» на iPhone).
   Подключается последним: перестраивает раскладку под узкий экран, не трогая настольную версию.
   Таблицы на телефоне становятся карточками — подписи колонок ставит modules/mobile.js (data-label). */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }

  /* Шапка: название раздела, уведомления и организация; часы и дата — только на компьютере. */
  #appShell .topbar { height: calc(54px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); gap: 8px; }
  #appShell .breadcrumb { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
  #appShell .breadcrumb > :not(:last-child) { display: none; }
  #appShell .breadcrumb b { overflow: hidden; text-overflow: ellipsis; }
  #appShell .calendar-trigger { display: none; }
  #appShell .topbar { display: flex; justify-content: space-between; }
  #appShell .breadcrumb { flex: 1 1 auto; max-width: none; }
  #appShell .top-actions { flex: none; margin-left: auto; }

  /* Заголовок раздела: кнопки под текстом, во всю ширину, ничего не уезжает за край. */
  #appShell .page-heading { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  #appShell .page-heading > div:first-child { min-width: 0; }
  #appShell .page-heading > .button, #appShell .page-heading > button { width: 100%; justify-content: center; }
  #appShell .heading-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  #appShell .heading-actions > * { min-width: 0; width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; }
  #appShell .heading-actions > .button-primary { grid-column: 1 / -1; order: -1; }
  #appShell .heading-actions label, #appShell .heading-actions .type-filter-label { display: flex; align-items: center; gap: 8px; }

  /* Панели: заголовок и действия друг под другом. */
  #appShell .panel-heading { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
  #appShell .panel-heading > :first-child { flex: 1 1 100%; min-width: 0; }
  #appShell .panel-heading > :not(:first-child) { margin: 0 !important; }
  #appShell .panel-heading > .text-button, #appShell .panel-heading > a, #appShell .panel-heading > .ios-text-button, #appShell .panel-heading > div:not(:first-child) > .text-button { flex: none; min-height: 32px; padding: 6px 13px; border-radius: 999px; background: var(--qm-chip, #eef4ef); font-size: 12.5px; text-align: center; }
  #appShell .panel-heading > div:not(:first-child):not(.update-actions) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  #appShell .update-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  #appShell .update-actions > .button, #appShell .update-actions > button { flex: 1 1 calc(50% - 8px); justify-content: center; }
  #appShell .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #appShell .filter-row > .search-box, #appShell .filter-row > :only-child { grid-column: 1 / -1; }

  /* Карточки показателей: две в ряд, компактно. */
  #appShell .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #appShell .stat-card { min-height: 0; padding: 13px 13px 12px; border-radius: 14px; }
  #appShell .stat-card .stat-value { font-size: 19px; line-height: 1.2; word-break: break-word; }
  #appShell .stat-card small, #appShell .stat-card .tax-stat-hint { font-size: 11px; line-height: 1.35; }
  #appShell .stats-grid > .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Вкладки настроек и аналитики — одна строка с прокруткой, как сегменты iOS. */
  #appShell .settings-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  #appShell .settings-tabs::-webkit-scrollbar { display: none; }
  #appShell .settings-tab { flex: none; white-space: nowrap; scroll-snap-align: start; }

  /* Формы: одна колонка, поля 16px — iPhone не увеличивает страницу при вводе. */
  #appShell .editor-form, .invoice-modal .editor-form { grid-template-columns: 1fr; }
  #appShell input:not([type=checkbox]):not([type=radio]), #appShell select, #appShell textarea,
  .modal-backdrop input:not([type=checkbox]):not([type=radio]), .modal-backdrop select, .modal-backdrop textarea, .qz-dialog-input, .auth-field > input, .auth-password-wrap input { font-size: 16px; }
  #appShell .form-actions, .modal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  #appShell .form-actions > *, .modal-actions > * { flex: 1 1 140px; justify-content: center; }

  /* Кнопки удобного для пальца размера (не меньше 44 px). */
  #appShell .button, #appShell .ios-button, .modal-backdrop .button { min-height: 44px; }
  #appShell .icon-button, #appShell .row-menu-toggle { min-width: 40px; min-height: 40px; }

  /* Окна — снизу, как листы iOS: во всю ширину, с прокруткой внутри. */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-backdrop .invoice-modal, .modal-backdrop .editor-modal, .modal-backdrop > div:not(.hidden) { width: 100%; max-width: 100%; max-height: calc(100dvh - 24px - env(safe-area-inset-top)); margin: 0; border-radius: 20px 20px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; animation: qzSheet .32s cubic-bezier(.2, .8, .2, 1); }
  .qz-dialog-back { align-items: flex-end; padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  .qz-dialog { width: 100%; max-width: 100%; border-radius: 20px; }

  /* Таблицы → карточки. Каждая строка — карточка, ячейка — «подпись: значение». */
  #appShell .table-wrap.qm-cards { overflow: visible; border: 0; }
  #appShell .qm-cards table { min-width: 0 !important; width: 100%; border: 0; table-layout: auto !important; }
  #appShell .qm-cards thead { display: none; }
  #appShell .qm-cards tbody, #appShell .qm-cards tfoot { display: grid; gap: 10px; padding: 2px 12px 12px; }
  #appShell .qm-cards tr { display: grid; grid-template-columns: 1fr; gap: 0; padding: 12px 14px; border: 1px solid var(--qm-line, #e2e9e3); border-radius: 14px; background: var(--qm-card, #fff); }
  #appShell .qm-cards td { display: block; position: relative; min-height: 0 !important; height: auto !important; line-height: 1.4; padding-left: 42% !important; min-width: 0; padding: 5px 0 !important; border: 0 !important; text-align: right !important; white-space: normal !important; width: auto !important; max-width: none !important; }
  #appShell .qm-cards td > * { position: static !important; float: none !important; }
  #appShell .qm-cards td, #appShell .qm-cards td * { white-space: normal !important; overflow-wrap: anywhere; }
  #appShell .qm-cards td::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 40%; color: var(--qm-muted, #7b8a80); font-size: 11.5px; font-weight: 600; text-align: left; text-transform: none; letter-spacing: 0; }
  #appShell .qm-cards td:not([data-label])::before, #appShell .qm-cards td[data-label=""]::before { display: none; }
  #appShell .qm-cards td:first-child { padding-left: 0 !important; text-align: left !important; font-size: 14.5px; padding-bottom: 8px !important; margin-bottom: 4px; border-bottom: 1px solid var(--qm-line, #e2e9e3) !important; }
  #appShell .qm-cards td:first-child::before { display: none; }
  #appShell .qm-cards td[colspan] { padding-left: 0 !important; text-align: center !important; border: 0 !important; margin: 0; }
  #appShell .qm-cards td[colspan]::before { display: none; }
  #appShell .qm-cards tr:has(> td[colspan]:only-child) { border-style: dashed; background: transparent; }
  #appShell .qm-cards td:empty { display: none; }
  #appShell .qm-cards td .table-subtext, #appShell .qm-cards td small { display: block; }
  #appShell .qm-cards td:last-child:has(button, .row-menu, select) { padding-left: 0 !important; padding-top: 8px !important; }
  #appShell .qm-cards td:last-child:has(button, .row-menu, select)::before { display: none; }
  #appShell .qm-cards tr { height: auto !important; }
  #appShell .qm-cards input, #appShell .qm-cards select { max-width: 100%; }
  [data-theme="dark"] #appShell { --qm-chip: rgba(255, 255, 255, .06); --qm-line: #2c4436; --qm-card: rgba(255, 255, 255, .035); --qm-muted: #94a99a; }

  /* Плавность: тяжёлое размытие и тени на телефоне дорогие — упрощаем; панели вне экрана не рисуются. */
  #appShell .work-panel, #appShell .stat-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
  #appShell .page-content > .work-panel { content-visibility: auto; contain-intrinsic-size: auto 420px; }
  #appShell .mobile-tabbar { padding-bottom: calc(7px + env(safe-area-inset-bottom)); }
  #appShell .main-content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* Плашка демо-режима — компактная полоса над нижним меню, а не поверх него. */
  #demoBanner { bottom: calc(72px + env(safe-area-inset-bottom)); left: 10px; right: 10px; transform: none; width: auto; max-width: none; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 10px 9px 14px; font-size: 12px; line-height: 1.35; }
  #demoBanner > span { flex: 1 1 160px; }
  #demoBanner .button { flex: none; margin-left: auto; min-height: 32px; height: 32px; padding: 0 12px; font-size: 12px; white-space: nowrap; }

  /* Экран входа — с учётом выреза и «чёлки». */
  .auth-panel { padding-top: calc(28px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 340px) {
  #appShell .stats-grid { grid-template-columns: 1fr; }
  #appShell .heading-actions { grid-template-columns: 1fr; }
  #appShell .filter-row { grid-template-columns: 1fr; }
}

/* Меню «Ещё» на телефоне — лист снизу: плитки с иконками по три в ряд, прокрутка внутри, фон затемнён. */
@media (max-width: 760px) {
  #appShell .mobile-more-menu { left: 8px; right: 8px; width: auto; bottom: calc(70px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 140px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 20px; box-shadow: 0 0 0 100vmax rgba(6, 20, 14, .45), 0 12px 32px rgba(0, 0, 0, .25); animation: qzSheet .28s cubic-bezier(.2, .8, .2, 1); }
  #appShell .mobile-more-menu .nav-item { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 78px; padding: 10px 4px; margin: 0; border-radius: 14px; text-align: center; font-size: 11.5px; line-height: 1.2; white-space: normal; transform: none !important; background: var(--qm-chip, #f1f5f2); }
  #appShell .mobile-more-menu .nav-item .nav-icon { display: flex; width: 24px; height: 24px; margin: 0; color: currentColor; }
  #appShell .mobile-more-menu .nav-item .nav-icon svg { width: 22px; height: 22px; }
  #appShell .mobile-more-menu .nav-item.active { background: #dcebe1; }
  [data-theme="dark"] #appShell .mobile-more-menu .nav-item.active { background: #24452f; }
  body:has(.mobile-tab-more[aria-expanded="true"]) #demoBanner { display: none; }
}
@media (max-width: 760px) {
  /* Кнопки-значки в карточках (изменить, удалить) — под палец. */
  #appShell .qm-cards td:last-child button:not(.button) { min-width: 40px; min-height: 40px; font-size: 18px; border-radius: 10px; }
}
@media (max-width: 760px) {
  /* Всплывающие уведомления — над нижним меню (и над плашкой демо-режима), не шире экрана. */
  #toast { bottom: calc(80px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  body.is-demo:not(:has(.mobile-tab-more[aria-expanded="true"])) #toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* ================================================================
   Телефон в стиле iOS: «жидкое стекло» у панели вкладок и шапки, капсульные кнопки, листы с ручкой,
   переключатели вместо галочек, отклик на нажатие. Размытие — только у шапки, панели вкладок и подложки
   окон (их немного), остальное — плоская заливка: так плавно и на недорогих телефонах.
   ================================================================ */
@media (max-width: 760px) {
  #appShell, .modal-backdrop, .qz-dialog-back {
    --ios-glass: rgba(250, 252, 250, .72); --ios-glass-border: rgba(255, 255, 255, .7); --ios-fill: rgba(118, 128, 120, .12);
    --ios-fill-strong: rgba(118, 128, 120, .2); --ios-card: #fff; --ios-sep: rgba(60, 70, 62, .12); --ios-accent: #1f7a52; --ios-ink: #142019;
    --ios-spring: cubic-bezier(.2, .9, .25, 1.12); --ios-ease: cubic-bezier(.25, .8, .25, 1);
  }
  [data-theme="dark"] #appShell, [data-theme="dark"] .modal-backdrop, [data-theme="dark"] .qz-dialog-back {
    --ios-glass: rgba(22, 40, 31, .62); --ios-glass-border: rgba(255, 255, 255, .1); --ios-fill: rgba(200, 230, 210, .08);
    --ios-fill-strong: rgba(200, 230, 210, .14); --ios-card: #15271e; --ios-sep: rgba(220, 240, 228, .09); --ios-accent: #4cc48a; --ios-ink: #eef5f0;
  }
  #appShell * { touch-action: manipulation; }

  /* Шапка — стекло. */
  #appShell .topbar { background: var(--ios-glass) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-bottom: .5px solid var(--ios-sep); box-shadow: none; }
  #appShell .breadcrumb b, #appShell .breadcrumb { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--ios-ink); }

  /* Панель вкладок — плавающая стеклянная капсула. */
  #appShell .mobile-tabbar { left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 6px; gap: 0; border-radius: 30px; border: .5px solid var(--ios-glass-border); background: var(--ios-glass) !important; -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); box-shadow: 0 10px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .12); }
  #appShell .mobile-tabbar .nav-item, #appShell .mobile-tab-more { height: 50px; border-radius: 24px; gap: 3px; color: var(--ios-ink); opacity: .62; background: transparent !important; transition: opacity .2s var(--ios-ease), transform .25s var(--ios-spring), background-color .25s var(--ios-ease); }
  #appShell .mobile-tabbar .nav-item.active, #appShell .mobile-tab-more[aria-expanded="true"] { opacity: 1; color: var(--ios-accent); background: var(--ios-fill-strong) !important; font-weight: 700; }
  #appShell .mobile-tabbar .nav-item:active, #appShell .mobile-tab-more:active { transform: scale(.9); }
  #appShell .mobile-tabbar .nav-icon svg { width: 22px; height: 22px; }
  #appShell .main-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  #appShell .mobile-more-menu { bottom: calc(76px + env(safe-area-inset-bottom)); border-radius: 26px; border: .5px solid var(--ios-glass-border); background: var(--ios-glass) !important; -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); }
  #appShell .mobile-more-menu .nav-item { background: var(--ios-fill) !important; border-radius: 18px; color: var(--ios-ink); }
  #appShell .mobile-more-menu .nav-item.active { background: var(--ios-fill-strong) !important; color: var(--ios-accent); }
  #appShell .mobile-more-menu .nav-item:active { transform: scale(.94) !important; transition: transform .15s var(--ios-ease); }
  #toast { bottom: calc(92px + env(safe-area-inset-bottom)); border-radius: 18px; }
  #demoBanner { bottom: calc(84px + env(safe-area-inset-bottom)); border-radius: 18px; }

  /* Заголовок раздела — крупный, как в iOS. */
  #appShell .page-heading h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.6px; font-weight: 800; }

  /* Карточки и панели — скругление 22 px, тонкая граница, без тяжёлых теней. */
  #appShell .work-panel, #appShell .stat-card { border-radius: 22px !important; border: .5px solid var(--ios-sep) !important; box-shadow: none !important; }
  #appShell .qm-cards tr { border-radius: 18px; border: .5px solid var(--ios-sep); background: var(--ios-card); }

  /* Кнопки — капсулы; основная — сплошная, остальные — заливка. Отклик на нажатие. */
  #appShell .button, .modal-backdrop .button, #appShell .ios-button { border-radius: 999px !important; min-height: 46px; font-weight: 700; letter-spacing: -.1px; box-shadow: none !important; transition: transform .18s var(--ios-ease), opacity .18s, background-color .2s; }
  #appShell .button-secondary, .modal-backdrop .button-secondary, #appShell .ios-button-secondary { background: var(--ios-fill) !important; border: 0 !important; color: var(--ios-ink) !important; }
  #appShell .button-primary, .modal-backdrop .button-primary { background: var(--ios-accent) !important; border: 0 !important; color: #fff !important; }
  [data-theme="dark"] #appShell .button-primary, [data-theme="dark"] .modal-backdrop .button-primary { color: #06210f !important; }
  #appShell .button:active, .modal-backdrop .button:active, #appShell .ios-button:active, #appShell .stat-card[role=button]:active, #appShell .text-button:active, #appShell .qm-cards tr:active { transform: scale(.97); opacity: .85; }
  #appShell .panel-heading > .text-button, #appShell .panel-heading > a { background: var(--ios-fill) !important; color: var(--ios-accent) !important; }

  /* Поля ввода — как в iOS: заливка, скругление 14 px, без рамки. */
  #appShell input:not([type=checkbox]):not([type=radio]):not([type=file]), #appShell select, #appShell textarea,
  .modal-backdrop input:not([type=checkbox]):not([type=radio]):not([type=file]), .modal-backdrop select, .modal-backdrop textarea {
    min-height: 46px; border-radius: 14px !important; border: 0 !important; background-color: var(--ios-fill) !important; box-shadow: none !important; max-width: 100%; min-width: 0; }
  #appShell input:focus, #appShell select:focus, #appShell textarea:focus, .modal-backdrop input:focus, .modal-backdrop select:focus, .modal-backdrop textarea:focus { background-color: var(--ios-fill-strong) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ios-accent) 55%, transparent) !important; }
  /* Системное поле даты iOS: не шире контейнера, текст слева (иначе оно раздвигает лист и сдвигает его вбок). */
  input[type=date], input[type=month], input[type=time] { -webkit-appearance: none; appearance: none; display: block; width: 100% !important; min-width: 0 !important; text-align: left; }
  input[type=date]::-webkit-date-and-time-value, input[type=month]::-webkit-date-and-time-value { text-align: left; margin: 0; }

  /* Галочки настроек — переключатели iOS. */
  #appShell .mail-check input[type=checkbox], .modal-backdrop .mail-check input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 16px; background: var(--ios-fill-strong); position: relative; cursor: pointer; transition: background-color .25s var(--ios-ease); }
  #appShell .mail-check input[type=checkbox]::before, .modal-backdrop .mail-check input[type=checkbox]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .3s var(--ios-spring); }
  #appShell .mail-check input[type=checkbox]:checked, .modal-backdrop .mail-check input[type=checkbox]:checked { background: #34c759; }
  #appShell .mail-check input[type=checkbox]:checked::before, .modal-backdrop .mail-check input[type=checkbox]:checked::before { transform: translateX(20px); }

  /* Вкладки настроек — сегменты. */
  #appShell .settings-tabs { background: var(--ios-fill) !important; border: 0 !important; border-radius: 14px; padding: 3px; }
  #appShell .settings-tab { border-radius: 11px !important; min-height: 34px; border: 0 !important; transition: background-color .2s var(--ios-ease), color .2s; }
  #appShell .settings-tab.is-active { background: var(--ios-card) !important; color: var(--ios-ink) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important; }

  /* Суммы в карточках — одной строкой; длинные уменьшаются (modules/mobile.js подгоняет размер под ширину). */
  #appShell .stat-card strong, #appShell .stat-card .stat-value { font-size: 20px; line-height: 1.2; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; letter-spacing: -.3px; }
  #appShell .stat-card .qm-text { white-space: normal !important; font-size: 17px; }
  #appShell .money-stat-card { min-height: 0; padding: 14px; gap: 6px; }
  #appShell .money-stat-card > span { font-size: 12.5px; }

  /* Окна — листы iOS: ручка сверху, большое скругление, затемнённая подложка; закрываются смахиванием вниз. */
  .modal-backdrop { background: rgba(0, 0, 0, .38) !important; }
  .modal-backdrop > div:not(.hidden) { border-radius: 28px 28px 0 0 !important; padding-top: 26px; overflow-x: hidden; position: relative; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); }
  .modal-backdrop > div:not(.hidden)::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--ios-fill-strong); }
  .modal-backdrop .modal-close { width: 32px; height: 32px; border-radius: 50%; background: var(--ios-fill) !important; }
  .qz-dialog { border-radius: 26px !important; }
}
/* Кнопка «Действия» (modules/mobile.js): второстепенные кнопки заголовка собраны в ней.
   На компьютере — список под кнопкой, на телефоне — меню снизу. */
.qm-tab-pill { display: none; }
#appShell .qm-collapsed { display: none !important; }
#appShell .qm-more-actions { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; }
.qm-more-icon { width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); opacity: .75; transition: transform .18s ease, margin .18s ease; }
.qm-more-actions[aria-expanded="true"] .qm-more-icon { transform: rotate(225deg); margin-top: 3px; }
.qm-menu { position: fixed; z-index: 2000; min-width: 230px; max-width: min(340px, calc(100vw - 16px)); padding: 6px; display: grid; gap: 2px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: #17271f; box-shadow: 0 18px 44px rgba(0, 0, 0, .38); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right; transition: opacity .14s ease, transform .16s ease; }
.qm-menu.is-open { opacity: 1; transform: none; }
.qm-menu-item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #e7f2ec; font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-align: left; white-space: nowrap; cursor: pointer; }
.qm-menu-item:hover, .qm-menu-item:focus-visible { background: rgba(111, 224, 166, .12); color: #fff; outline: none; }
.qm-menu-item:disabled { opacity: .45; cursor: default; }
.qm-menu-item.is-danger { color: #ff7a7a; }
[data-theme="light"] .qm-menu { background: #fff; border-color: rgba(20, 60, 40, .12); box-shadow: 0 18px 44px rgba(20, 50, 35, .18); }
[data-theme="light"] .qm-menu-item { color: #1d3b2c; }
[data-theme="light"] .qm-menu-item:hover, [data-theme="light"] .qm-menu-item:focus-visible { background: rgba(31, 122, 82, .1); color: #145c3c; }
@media (max-width: 760px) {
  #appShell .heading-actions:has(.qm-more-actions) { grid-template-columns: 1fr; }
  .qm-sheet-back { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; padding: 0 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, 0); transition: background-color .26s ease; }
  .qm-sheet-back.is-open { background: rgba(0, 0, 0, .4); }
  .qm-sheet { width: 100%; display: grid; gap: 8px; transform: translateY(110%); transition: transform .34s cubic-bezier(.2, .9, .25, 1.05); }
  .qm-sheet-back.is-open .qm-sheet { transform: none; }
  .qm-sheet-group { display: grid; overflow: hidden; border-radius: 16px; background: rgba(248, 250, 248, .9); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
  .qm-sheet-item, .qm-sheet-cancel { min-height: 57px; padding: 0 16px; border: 0; background: transparent; color: #1f7a52; font: 500 17px/1.2 inherit; font-family: inherit; text-align: center; }
  .qm-sheet-item + .qm-sheet-item { border-top: .5px solid rgba(60, 70, 62, .18); }
  .qm-sheet-item.is-danger { color: #e5484d; }
  .qm-sheet-item:active, .qm-sheet-cancel:active { background: rgba(120, 130, 122, .16); }
  .qm-sheet-cancel { border-radius: 16px; background: #fff; font-weight: 700; }
  [data-theme="dark"] .qm-sheet-group { background: rgba(32, 52, 42, .9); }
  [data-theme="dark"] .qm-sheet-item, [data-theme="dark"] .qm-sheet-cancel { color: #6fe0a6; }
  [data-theme="dark"] .qm-sheet-item + .qm-sheet-item { border-color: rgba(220, 240, 228, .12); }
  [data-theme="dark"] .qm-sheet-item.is-danger { color: #ff6b6b; }
  [data-theme="dark"] .qm-sheet-cancel { background: #1c3127; }

  /* Нижняя панель: иконки SF-стиля (контур, у активной — заливка), подсветка-капсула переезжает к выбранной вкладке. */
  #appShell .mobile-tabbar { position: fixed; overflow: hidden; }
  #appShell .mobile-tabbar .nav-item, #appShell .mobile-tab-more { position: relative; z-index: 1; background: transparent !important; }
  #appShell .mobile-tabbar .nav-item.active, #appShell .mobile-tab-more[aria-expanded="true"] { background: transparent !important; }
  #appShell .qm-tab-pill { display: block; position: absolute; z-index: 0; top: 6px; left: 0; height: 50px; border-radius: 24px; background: var(--ios-fill-strong); transition: transform .45s cubic-bezier(.2, .95, .25, 1.15), width .45s cubic-bezier(.2, .95, .25, 1.15); will-change: transform; }
  #appShell .mobile-tabbar .qm-current { opacity: 1; color: var(--ios-accent); font-weight: 700; }
  #appShell .mobile-tabbar .nav-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 24px; }
  #appShell .qm-tab-icon { width: 24px; height: 24px; transition: transform .3s cubic-bezier(.2, .9, .25, 1.2); }
  #appShell .qm-tab-icon .qm-fill { fill: transparent; transition: fill .25s ease; }
  #appShell .mobile-tabbar .qm-current .qm-tab-icon .qm-fill { fill: currentColor; fill-opacity: .22; }
  #appShell .mobile-tabbar .qm-current .qm-tab-icon .qm-soft { fill-opacity: .18; }
  #appShell .nav-icon.qm-bounce .qm-tab-icon { animation: qmBounce .45s cubic-bezier(.2, .9, .25, 1.2); }
  @keyframes qmBounce { 0% { transform: scale(1); } 35% { transform: scale(.78); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

  /* Переключатели iOS без псевдоэлементов (в Safari у полей ввода их нет): кружок — градиент, ездит с позицией фона. */
  #appShell .mail-check input[type=checkbox], .modal-backdrop .mail-check input[type=checkbox] { position: static; background: rgba(120, 128, 122, .32) radial-gradient(circle, #fff 12.5px, rgba(255, 255, 255, 0) 13.5px) no-repeat 2px center / 27px 27px; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .06); transition: background-color .25s ease, background-position .3s cubic-bezier(.2, .9, .25, 1.15); }
  #appShell .mail-check input[type=checkbox]::before, .modal-backdrop .mail-check input[type=checkbox]::before { content: none !important; display: none !important; }
  #appShell .mail-check input[type=checkbox]:checked, .modal-backdrop .mail-check input[type=checkbox]:checked { background: #34c759 radial-gradient(circle, #fff 12.5px, rgba(255, 255, 255, 0) 13.5px) no-repeat calc(100% - 2px) center / 27px 27px; }
  /* Строка с переключателем — как ячейка списка iOS: подпись слева, переключатель справа. */
  #appShell .update-actions:has(> .mail-check) { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; width: 100%; }
  #appShell .mail-check input[type=checkbox] { width: 51px !important; height: 31px !important; min-height: 31px !important; flex: none; }
  #appShell .update-actions > .mail-check { display: flex; flex-direction: row-reverse !important; justify-content: space-between; width: 100%; align-items: center; gap: 12px; min-height: 50px; padding: 4px 2px; border-bottom: .5px solid var(--ios-sep); font-size: 16px; }
  #appShell .update-actions > .mail-check:last-of-type { border-bottom: 0; }
  #appShell .update-actions:has(> .mail-check) > .button { margin-top: 10px; }

  /* Поиск — одно поле с лупой, без двойной рамки. */
  #appShell .search-box { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0 !important; border-radius: 14px; background: var(--ios-fill) !important; box-shadow: none !important; }
  #appShell .search-box input { flex: 1; min-height: 42px; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
  #appShell .search-box .search-icon { opacity: .55; font-size: 17px; }

  /* Кнопки «изменить» и «удалить» в карточках — круглые, под палец. */
  #appShell .qm-cards td .row-menu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; margin-left: 8px; padding: 0; border: 0 !important; border-radius: 50%; background: var(--ios-fill) !important; color: var(--ios-ink); font-size: 18px; line-height: 1; }
  #appShell .qm-cards td .row-menu.danger-action { color: #e5484d; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  #appShell *, .modal-backdrop * { transition: none !important; animation: none !important; }
}

/* Вход по Face ID / отпечатку (modules/biometric.js): карточка аккаунта вместо формы пароля. */
.qz-bio { display: none; }
#authScreen.has-bio .qz-bio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 28px 0 8px; animation: qzPop .4s cubic-bezier(.2, .9, .25, 1.1); }
#authScreen.has-bio #authForm, #authScreen.has-bio #accountPicker, #authScreen.has-bio #toggleAuthMode, #authScreen.has-bio #authIntro, #authScreen.has-bio #authFootnote { display: none !important; }
.qz-bio-avatar { width: 84px; height: 84px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: linear-gradient(150deg, #2a8a5e, #134c35); color: #fff; font-size: 34px; font-weight: 800; box-shadow: 0 10px 30px rgba(20, 80, 55, .35); }
.qz-bio b { font-size: 20px; letter-spacing: -.3px; }
.qz-bio small { opacity: .65; font-size: 14px; }
.qz-bio-enter { width: 100%; min-height: 54px; margin-top: 22px; border-radius: 999px !important; font-size: 16px; justify-content: center; }
.qz-bio-other { margin-top: 10px; padding: 12px; border: 0; background: transparent; color: inherit; opacity: .75; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================
   Скорость на iPhone. Размытие под шапкой и нижней панелью пересчитывалось на каждом кадре прокрутки —
   заменено почти непрозрачной заливкой (выглядит так же, стоит ничего). Без «сжатия» строк при касании во время
   прокрутки, без бесконечных анимаций фона на экране входа.
   ================================================================ */
@media (max-width: 760px) {
  #appShell .topbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(246, 249, 246, .97) !important; }
  [data-theme="dark"] #appShell .topbar { background: rgba(15, 36, 26, .97) !important; }
  #appShell .mobile-tabbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(250, 252, 250, .96) !important; transform: translateZ(0); }
  [data-theme="dark"] #appShell .mobile-tabbar { background: rgba(24, 44, 34, .96) !important; }
  #appShell .qm-cards tr:active { transform: none; opacity: 1; }
  .auth-screen *, .auth-screen::before, .auth-screen::after, .auth-art::before, .auth-art::after { animation: none !important; }

  /* Поиск: внутреннее поле прозрачное — правило для всех полей было «сильнее» и рисовало второе поле со сдвигом. */
  #appShell .search-box input:not([type=checkbox]):not([type=radio]):not([type=file]) { flex: 1; width: auto; min-width: 0; min-height: 44px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  #appShell .search-box input:focus { box-shadow: none !important; background: transparent !important; }
  #appShell .search-box:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ios-accent) 55%, transparent) !important; }

  /* Поле месяца и даты в iOS — той же высоты, что соседние, текст по центру строки. */
  #appShell input[type=month], #appShell input[type=date], .modal-backdrop input[type=month], .modal-backdrop input[type=date] { height: 46px !important; min-height: 46px !important; padding: 0 14px !important; line-height: 46px; font-size: 16px; font-weight: 600; }
  input[type=month]::-webkit-date-and-time-value, input[type=date]::-webkit-date-and-time-value { min-height: 46px; line-height: 46px; text-align: left; }
  #appShell .filter-row { align-items: stretch; }
  #appShell .filter-row > * { min-height: 46px; height: 46px; }
  #appShell .filter-row > .search-box { height: auto; }
  #appShell .filter-row select, #appShell .filter-row .filter-button { font-size: 16px; font-weight: 600; }

  /* Нижняя панель: иконка выбранной вкладки — контур цвета акцента (заливка сливалась с подсветкой). */
  #appShell .mobile-tabbar .qm-current .qm-tab-icon .qm-fill, #appShell .mobile-tabbar .qm-current .qm-tab-icon .qm-soft { fill: none; }
  #appShell .mobile-tabbar .qm-current .qm-tab-icon { stroke-width: 2.2; }
  #appShell .qm-tab-pill { transition: transform .42s cubic-bezier(.22, 1.15, .36, 1); }
}

/* Длинные списки: карточки вне экрана браузер не раскладывает и не рисует — 400 строк открываются так же быстро, как 20. */
@media (max-width: 760px) {
  #appShell .qm-cards tbody > tr { content-visibility: auto; contain-intrinsic-size: auto 190px; }
}