:root {
    --build: "119";   /* маркер версии — виден в диагностике, бампается с кэшем */
    --radius: 12px;
    --gap: 12px;

    --shape-s: 8px; --shape-m: 12px; --shape-l: 16px; --shape-xl: 28px;

    --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
    --elev-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
  }

  :root, html[data-theme="light"] {
    --bg:        #F8F9FF;
    --bg2:       #ECEEF4;
    --text:      #191C20;
    --hint:      #43474E;
    --accent:    #0061A4;
    --accent-t:  #FFFFFF;
    --link:      #0061A4;

    --primary-container:     #D1E4FF;  --on-primary-container:   #001D36;
    --secondary-container:   #D7E3F7;  --on-secondary-container: #101C2B;
    --tertiary-container:    #FFDDB3;  --on-tertiary-container:  #291800;
    --surface-container-low: #F2F3FA;  --surface-container-high: #E7E8EE;
    --outline:               #73777F;  --outline-variant:        #C3C7CF;
    --error:                 #BA1A1A;  --on-error-container:     #410002;
    --error-container:       #FFDAD6;
    --ok:                    #146C2E;   /* семантика «активна»/успех, M3-тон под светлую тему */
  }

  html[data-theme="dark"] {
    --bg:        #111318;
    --bg2:       #1D2024;
    --text:      #E2E2E9;
    --hint:      #C3C7CF;
    --accent:    #9ECAFF;
    --accent-t:  #003258;
    --link:      #9ECAFF;
    --primary-container:     #00497D;  --on-primary-container:   #D1E4FF;
    --secondary-container:   #3B4858;  --on-secondary-container: #D7E3F7;
    --tertiary-container:    #7B580E;  --on-tertiary-container:  #FFDDB3;
    --surface-container-low: #191C20;  --surface-container-high: #282A2F;
    --outline:               #8D9199;  --outline-variant:        #43474E;
    --error:                 #FFB4AB;  --on-error-container:     #FFDAD6;
    --error-container:       #93000A;
    --ok:                    #7DD88A;   /* тот же смысл, светлее для тёмной темы */
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  /* Страница целиком НЕ скроллится — прокрутка только внутри .content (и экранов-
     контейнеров). Раньше здесь был голый min-height: 100vh на body БЕЗ overflow:
     hidden и без dvh — 100vh на iOS больше видимой области (не учитывает
     тулбар), из-за чего появлялся скролл всей страницы и нижняя панель уезжала
     за край экрана. Ниже — тот же min-height: 100vh, но с overflow: hidden на
     body и с dvh поверх (dvh не имеет той проблемы, что vh: браузер сам считает
     актуальную видимую высоту), поэтому повторения того бага не будет. */
  /* Полноэкранная модель: 100dvh (dynamic viewport height) — браузер сам
     корректно считает реальную видимую область в standalone-PWA, без JS-
     измерений и таймингов. 100vh — запасной вариант для совсем старых WebKit
     без поддержки dvh (сегодня таких почти не осталось). Скролл живёт только
     внутри экранов. */
  html {
    height: 100%;
    overflow: hidden;
  }
  body {
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    font-size: 16px;
    overscroll-behavior: none;
    accent-color: var(--accent);
  }

  /* Оболочка на всю высоту экрана. Шапка и нижняя панель — обычные flex-
     элементы вне прокрутки, поэтому не могут уехать при скролле;
     прокручивается только средний блок. */
  #app {
    height: 100vh;
    height: 100dvh;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Шапка. Фон СОВПАДАЕТ с фоном приложения, разделитель — волосяная линия.
     Так шапка не может визуально «висеть» над системной полосой сверху,
     если платформа не растягивает вебвью под вырез. */
  .header {
    flex-shrink: 0;
    background: var(--bg);
    padding: calc(6px + var(--safe-top, env(safe-area-inset-top, 0px))) 16px 8px;
    border-bottom: 1px solid var(--outline-variant);
  }
  .wiz-progress { margin-bottom: 8px; }
  .wiz-bar {
    height: 4px; background: var(--bg2); border-radius: 2px; overflow: hidden;
    margin-bottom: 4px;
  }
  .wiz-fill {
    height: 100%; background: var(--accent); border-radius: 2px;
    transition: width .25s ease;
  }
  .wiz-count { font-size: 12px; color: var(--hint); text-align: center; }

  .skel-card {
    background: var(--bg2); border-radius: 14px; padding: 14px;
    margin-bottom: 12px;
  }
  .skel-line, .skel-block {
    background: linear-gradient(90deg, var(--bg) 25%, var(--bg2) 50%, var(--bg) 75%);
    background-size: 200% 100%;
    animation: skelShimmer 1.2s infinite linear;
    border-radius: 8px;
  }
  .skel-line { height: 14px; margin-bottom: 10px; }
  .skel-block { height: 48px; margin-bottom: 10px; border-radius: 12px; }
  .skel-w40 { width: 40%; }
  .skel-w55 { width: 55%; }
  .skel-w70 { width: 70%; }
  @keyframes skelShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .skel-line, .skel-block { animation: none; }

    .content, .ocard, .btn-nudge { animation: none; }
  }

  .step-title {
    font-size: 12px;
    color: var(--hint);
    margin-bottom: 0;
  }
  .step-title strong { color: var(--text); font-size: 15px; }

  .content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    flex: 1 1 auto;
    align-content: start;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .content > * { flex-shrink: 0; }

  .option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-content: start;
    grid-auto-rows: min-content;
  }
  .option-grid.wide { grid-template-columns: 1fr; }

  .option-card {
    background: var(--bg2);
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 14px 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    -webkit-user-select: none;
    user-select: none;
  }
  .option-card .icon { font-size: 20px; flex-shrink: 0; }
  .option-card.selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  }

  .category-block { display: flex; flex-direction: column; gap: 8px; }
  .category-name {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--hint);
    padding: 4px 0 2px;
  }

  .product-row {
    display: flex;
    align-items: center;
    background: var(--bg2);
    border-radius: var(--radius);
    padding: 10px 12px;
    gap: 10px;
  }
  .product-info { flex: 1; min-width: 0; }
  .product-name {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-unit { font-size: 12px; color: var(--hint); }

  .counter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .counter-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: var(--accent-t);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: opacity .1s;
  }
  .counter-btn:active { opacity: .7; }
  .counter-btn.minus {
    background: var(--bg);
    color: var(--accent);
    border: 2px solid var(--accent);
  }
  .counter-btn.minus:disabled {
    border-color: var(--bg2);
    color: var(--hint);
  }
  .counter-val {
    min-width: 28px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .comment-wrap { display: flex; flex-direction: column; gap: 8px; }
  .comment-label { font-size: 13px; color: var(--hint); }
  textarea {
    width: 100%;
    background: var(--bg2);
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 12px;
    font-size: 15px;
    color: var(--text);
    resize: none;
    outline: none;
    font-family: inherit;
    transition: border-color .15s;
  }
  textarea:focus { border-color: var(--accent); }
  textarea::placeholder { color: var(--hint); }
  .preview-cat {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--accent); font-weight: 700;
    margin: 14px 0 6px; padding-top: 12px;
    border-top: 1px solid var(--outline-variant);
  }
  .oc-items-title + .preview-cat { border-top: none; padding-top: 0; margin-top: 8px; }
  .preview-item {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    padding: 3px 0;
  }
  .preview-item .qty { font-weight: 600; color: var(--accent); }

  .empty-msg {
    text-align: center;
    color: var(--hint);
    padding: 32px 0;
    font-size: 15px;
  }

  .kitchen-banner {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg));
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Док-бар навигации. Фон СОВПАДАЕТ с фоном приложения и с системной полосой
     под ним — поэтому панель всегда выглядит прижатой к низу экрана, независимо
     от того, растянут вебвью под домашнюю полосу или нет. Отделён волосяной
     линией. Отступ снизу = max(8px, 50% от safe-area) — уменьшен вдвое
     от полного отступа под домашнюю полосу. */
  .bottom-nav {
    flex-shrink: 0;
    background: var(--bg);
    padding: 6px 16px;
    /* #app теперь сам растянут на всю высоту экрана через 100dvh (см. выше),
       поэтому доку не нужно ничего "дотягивать" отдельно — обычный отступ
       под домашнюю полосу, уменьшенный вдвое от полного safe-area. */
    padding-bottom: max(8px, calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) * 0.5));
    border-top: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* Единственная кнопка («Назад» без «На главную») занимает всю ширину —
     иначе она жмётся к краю и панель выглядит незаполненной. */
  .bottom-nav .btn:only-child { flex: 1 1 auto; }
  .btn {
    flex: 0 0 auto;
    padding: 14px;
    border: none;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
  }

  .bottom-nav .btn, .cleanup-row .btn { flex: 1; }

  .bottom-nav .btn-back {
    flex: 0 0 auto;
    padding: 10px 20px;
    font-size: 15px;
  }

  .bottom-nav .btn-home {
    flex: 1 1 auto;
    padding: 10px 16px;
    font-size: 15px;
  }
  .btn:active { opacity: .75; transform: scale(0.97); }
  .btn-primary { background: var(--accent); color: var(--accent-t); }
  .btn-secondary {
    background: var(--bg2);
    color: var(--text);
    padding: 14px 18px;
  }
  .btn:disabled { opacity: .4; pointer-events: none; }

  .btn:focus-visible,
  .counter-btn:focus-visible,
  .option-card:focus-visible,
  .product-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  @keyframes btnWake {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
    100% { box-shadow: 0 0 0 12px transparent; }
  }
  .btn-wake { animation: btnWake .55s ease-out; }

  .success-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    gap: 16px;
    text-align: center;
    padding: 32px;
  }
  .success-screen > :first-child { margin-top: auto; }
  .success-screen > :last-child  { margin-bottom: auto; }
  .success-icon { font-size: 64px; }
  .success-title { font-size: 22px; font-weight: 700; }
  .success-sub { font-size: 15px; color: var(--hint); }

  .loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
  }
  .spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--bg2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .menu-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: calc(32px + var(--safe-top, env(safe-area-inset-top, 0px))) 20px 32px;
    text-align: center;
  }
  /* Центрируем меню, когда помещается, и даём полный скролл при переполнении.
     auto-margins схлопываются при нехватке места — в отличие от justify-content: center,
     который обрезал низ/верх (из-за чего пропадала «Выйти» и ломался скролл на ПК). */
  .menu-screen > :first-child { margin-top: auto; }
  .menu-screen > :last-child  { margin-bottom: auto; }
  .menu-logo { font-size: 64px; }
  .menu-title { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
  .menu-status {
    font-size: 14px; color: var(--hint);
    margin-bottom: 20px; padding: 8px 16px;
    background: var(--bg2); border-radius: 10px;
  }
  .menu-btn { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .btn-danger {
    background: var(--error); color: #fff;
  }
  .btn-danger:active { background: var(--error); }
  .empty-state {
    text-align: center; color: var(--hint);
    padding: 48px 20px; font-size: 15px;
    animation: ocardIn .25s ease both;
  }
  .empty-emoji { font-size: 52px; margin-bottom: 12px; line-height: 1; }
  .empty-text { margin-bottom: 16px; }
  .empty-state .btn { max-width: 260px; margin: 0 auto; }

  .hint-sm { font-size: 13px; color: var(--hint); font-weight: 400; }
  .arrow-btn {
    background: var(--bg2); border: none; border-radius: 10px;
    font-size: 16px; cursor: pointer; color: var(--text);
  }
  .arrow-btn:disabled { opacity: 0.25; }
  .btn-sm { padding: 8px 12px; font-size: 13px; }
  .user-row {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg2); border-radius: 12px; padding: 12px; margin-bottom: 8px;
  }
  .user-info { font-size: 15px; }
  .kitchen-current {
    text-align: center; padding: 14px; background: var(--bg2);
    border-radius: 12px; margin-bottom: 16px; font-size: 15px;
  }
  .user-chip {
    display: inline-flex; align-items: center;
    background: var(--bg); border: 1px solid var(--accent); border-radius: 8px;
    padding: 1px 8px; font-size: 13px; font-weight: 600; color: var(--link);
  }
  .ocard-cell .user-chip {
    background: var(--bg2); font-size: 14px; padding: 3px 10px;
  }

  .ocard {
    position: relative; background: var(--bg2); border-radius: 14px;
    padding: 12px 12px 12px 16px; margin-bottom: 12px; cursor: pointer;
    transition: background .12s, transform .1s; overflow: hidden;
  }
  .ocard::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: var(--hint);
  }
  .ocard.st-active::before  { background: var(--ok); }
  .ocard.st-done::before    { background: var(--accent); }
  .ocard.st-cancel::before  { background: var(--error); }
  .ocard:active { background: var(--bg); transform: scale(0.985); }

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

  @keyframes contentIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .content { animation: contentIn .16s ease both; }

  .content.no-anim { animation: none; }

  @keyframes nudgePulse {
    0%, 100% {
      box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
      transform: scale(1);
    }
    50% {
      box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent);
      transform: scale(1.012);
    }
  }
  .btn-nudge {
    animation: nudgePulse 2.6s ease-in-out infinite;
    animation-delay: 1.2s;
  }
  .ocard {
    animation: ocardIn .28s cubic-bezier(.22,.9,.3,1) both;
  }
  .ocard:nth-child(1) { animation-delay: 0s; }
  .ocard:nth-child(2) { animation-delay: .04s; }
  .ocard:nth-child(3) { animation-delay: .08s; }
  .ocard:nth-child(4) { animation-delay: .12s; }
  .ocard:nth-child(5) { animation-delay: .16s; }
  .ocard:nth-child(n+6) { animation-delay: .2s; }

  .ocard-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
  }
  .ocard-id { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
  .ocard-hash { color: var(--hint); font-weight: 600; opacity: 0.6; }
  .ocard-when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .ocard-pill {
    font-size: 14px; font-weight: 600; color: var(--text);
    background: var(--bg); padding: 4px 10px; border-radius: 10px;
  }
  .ocard-pill-accent { color: var(--accent); }

  .ocard-route {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px;
  }
  .ocard-boat-chip, .ocard-pier-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    border-radius: 10px; padding: 7px 12px;
  }
  .ocard-boat-chip {   /* главное — акцентный, крупнее, забирает место */
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent); font-weight: 700; font-size: 16px; flex: 0 1 auto;
  }
  .ocard-pier-chip {   /* вторичный — контурный чип, как у автора */
    background: var(--bg); border: 1px solid var(--outline-variant);
    color: var(--text); font-weight: 600; font-size: 14px; flex: 0 1 auto;
  }

  .ocard-grid { display: flex; flex-direction: column; gap: 6px; }
  .ocard-cell {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: var(--bg); border-radius: 10px; padding: 8px 12px;
  }
  .ocard-k { font-size: 15px; font-weight: 600; color: var(--text); flex: 0 0 auto; }

  .ocard-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; padding: 3px 12px; border-radius: 10px;
    background: var(--accent); color: var(--accent-t); font-size: 15px; font-weight: 700;
  }

  .ocard-comment {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--bg); border-radius: 10px; padding: 8px 12px; margin-top: 6px;
    border-left: 3px solid var(--accent);
  }
  .ocard-comment-k { font-size: 15px; font-weight: 600; color: var(--text); }
  .ocard-comment-v { font-size: 14px; color: var(--text); line-height: 1.4; word-break: break-word; }

  .stat-cat-card {
    background: var(--bg2); border-radius: 14px; padding: 14px;
    margin-bottom: 12px;
    animation: ocardIn .25s ease both;
  }
  .stat-cat-head {
    font-size: 17px; font-weight: 700; color: var(--accent);
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 2px solid var(--accent);
  }
  .stat-cat-body { display: flex; flex-direction: column; gap: 6px; }
  .stat-prod {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: var(--bg); border-radius: 10px; padding: 9px 12px;
  }
  .stat-prod-name { font-size: 15px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .stats-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 12px; border-radius: 10px;
    background: var(--accent); color: var(--accent-t); font-size: 15px; font-weight: 700;
    white-space: nowrap; flex: 0 0 auto;
  }
  .stats-period { margin-bottom: 14px; }
  .pick-nick { color: var(--hint); font-size: 13px; font-weight: 400; }
  .filter-bar, .filter-bar {
    display: flex; gap: 6px; padding: 10px 16px; flex-wrap: wrap;
  }
  .filter-btn {
    flex: 1; background: var(--bg2); border: none; border-radius: 8px;
    padding: 8px; font-size: 14px; cursor: pointer; color: var(--text);
  }
  .filter-btn.active { background: var(--accent); color: var(--accent-t); }
  .pager {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; padding: 10px;
  }
  .pager-info { font-size: 13px; color: var(--hint); }
  .input-label { display: block; font-size: 14px; color: var(--hint); margin-bottom: 8px; }
  .text-input {
    width: 100%; box-sizing: border-box; padding: 14px;
    border: 1px solid var(--bg2); border-radius: 12px;
    background: var(--bg2); color: var(--text); font-size: 16px;
    margin-bottom: 16px;
  }
  .text-input:focus { outline: none; border-color: var(--accent); }
  .tappable { cursor: pointer; transition: background 0.1s; }
  .tappable:active { background: rgba(127,127,127,0.15); }
  .tap-hint { font-size: 12px; color: var(--hint); text-align: right; margin-top: 6px; }
  .note-hint {
    font-size: 13px; color: var(--hint); text-align: center;
    margin-top: 16px; padding: 10px; background: var(--bg2); border-radius: 10px;
  }
  .cleanup-row {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg2); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
    font-size: 14px; gap: 10px;
  }
  .cleanup-row > span { flex: 1; min-width: 0; }
  .cleanup-row .btn {
    flex: 0 0 auto; width: 56px; padding: 10px;
  }
  .edit-hint { font-size: 13px; color: var(--hint); text-align: center; margin: 8px 0; }
  .login-screen {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: calc(32px + var(--safe-top, env(safe-area-inset-top, 0px))) 24px 32px;
    text-align: center; gap: 16px;
  }
  .login-screen > :first-child { margin-top: auto; }
  .login-screen > :last-child  { margin-bottom: auto; }
  .login-logo { width: 140px; height: 140px; border-radius: 28px; }
  .login-title { font-size: 28px; font-weight: 700; }
  .login-sub { font-size: 15px; color: var(--hint); margin-bottom: 8px; }
  .login-note { font-size: 13px; color: var(--hint); margin-top: 8px; }
  #update-bar {
    position: fixed; left: 0; right: 0;
    bottom: 0;   /* безопасную зону учитываем ТОЛЬКО в отступе, иначе двойной счёт */
    background: var(--accent); color: var(--accent-t); z-index: 9998;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    padding-bottom: max(12px, min(var(--safe-bottom, env(safe-area-inset-bottom, 0px)), 16px));
    font-size: 14px; box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
  }
  #update-bar button {
    background: #fff; color: var(--accent); border: none; border-radius: 8px;
    padding: 8px 16px; font-weight: 700; font-size: 14px; cursor: pointer;
  }
  .profile-card {
    margin-bottom: 4px; width: 100%; max-width: 360px;
    margin-left: auto; margin-right: auto; box-sizing: border-box;
  }
  .profile-name { font-size: 16px; font-weight: 700; }
  .profile-role { font-size: 13px; color: var(--hint); margin-top: 2px; }
  .logout-btn { margin-top: 8px; opacity: 0.85; }
  .theme-switch {
    display: flex; gap: 8px; margin-top: 12px;
    background: var(--bg2); border-radius: 12px; padding: 4px;
  }
  .theme-opt {
    border: none; background: transparent; border-radius: 9px;
    padding: 8px 16px; font-size: 18px; cursor: pointer; opacity: 0.5;
    transition: opacity .15s, background .15s;
  }
  .theme-opt.active { opacity: 1; background: var(--bg); }
  .filter-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--bg2); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
  }
  .filter-row-label { font-size: 14px; }
  .filter-row-value { flex: 1; font-size: 14px; color: var(--hint); text-align: right; min-width: 60px; }
  .user-link {
    display: inline-flex; align-items: center;
    background: var(--bg); color: var(--link); cursor: pointer;
    border: 1px solid var(--accent); border-radius: 10px;
    padding: 4px 10px; font-size: 14px; font-weight: 600;
    text-decoration: none;
  }
  .user-link:active { opacity: 0.6; }

  .dash-wrap {
    background: var(--bg2); border-radius: 16px; padding: 12px;
    margin-bottom: 10px;
  }
  .dash-tiles {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  .dash-tile {
    background: var(--bg); border-radius: 10px; padding: 10px 8px;
    text-align: center; transition: transform .1s;
  }
  .dash-tile.tappable:active { transform: scale(0.97); }
  .dash-tile-main {
    grid-column: 1 / -1;
    background: var(--bg); border-radius: 10px; padding: 10px;
    text-align: center; margin-bottom: 6px; transition: transform .1s;
  }
  .dash-tile-main.tappable:active { transform: scale(0.98); }
  .dash-tile-main .dash-tile-num { font-size: 30px; color: var(--accent); }
  .dash-tile-num { font-size: 21px; font-weight: 800; line-height: 1.1; }
  .dash-tile-label { font-size: 11px; color: var(--hint); margin-top: 2px; }
  .dash-tile-alert .dash-tile-num { color: var(--error); }

  .dash-sec {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--bg);
  }
  .dash-sec-title {
    font-size: 11px; font-weight: 600; color: var(--hint);
    margin-bottom: 6px; text-align: center; text-transform: uppercase;
    letter-spacing: .04em;
  }
  .dash-times { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
  .dash-activity {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center;
  }
  .notify-channel {
    background: var(--bg2); border-radius: 14px; padding: 12px; margin-bottom: 10px;

    width: 100%; max-width: 320px; margin-left: auto; margin-right: auto;
    box-sizing: border-box;
  }
  .notify-channel-title {
    font-size: 13px; font-weight: 600; color: var(--hint);
    text-align: center; margin-bottom: 8px;
  }
  .channel-seg {
    display: flex; gap: 6px; background: var(--bg); border-radius: 12px; padding: 4px;
  }
  .channel-opt {

    flex: 1 1 0; min-width: 0; cursor: pointer;
    padding: 11px 8px; border-radius: 9px; font-size: 14px; font-weight: 600;
    color: var(--text);
    background: var(--bg2);
    border: 1px solid var(--border, rgba(128,128,128,0.18));
    transition: background .15s, color .15s, box-shadow .15s, transform .05s;
  }
  .channel-opt.active {
    background: var(--accent); color: var(--accent-t);
    border-color: var(--accent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .channel-opt:not(.active):active { transform: scale(0.97); background: var(--bg); }

  .notify-channel .menu-btn { max-width: none; }
  .fb-text {
    font-size: 15px; line-height: 1.45; color: var(--text);
    background: var(--bg); border-radius: 10px; padding: 10px 12px;
    margin: 8px 0; word-break: break-word; white-space: pre-wrap;
  }
  .fb-kind { font-size: 16px; font-weight: 700; }
  .fb-reply {
    font-size: 14px; line-height: 1.45; color: var(--text);
    background: color-mix(in srgb, var(--accent) 12%, transparent); border-left: 3px solid var(--accent);
    border-radius: 8px; padding: 8px 12px; margin: 8px 0;
    word-break: break-word; white-space: pre-wrap;
  }
  .fb-reply-label { font-weight: 600; color: var(--accent); }
  .menu-badge {
    display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
    background: #ef4444; color: #fff; border-radius: 11px;
    font-size: 13px; font-weight: 700; vertical-align: middle;
  }
  .fb-btn { width: 100%; margin-top: 4px; }
  .fb-actions { display: flex; gap: 8px; margin-top: 4px; align-items: stretch; }
  .fb-actions .fb-btn { margin-top: 0; width: auto; flex: 1 1 auto; min-width: 0; }
  .fb-actions .btn-danger { flex: 0 0 52px; width: 52px; }
  .ptr-hint {
    position: fixed; top: calc(env(safe-area-inset-top, 0px) + 52px);
    left: 50%; transform: translateX(-50%);
    background: var(--accent); color: var(--accent-t); font-size: 13px; font-weight: 600;
    padding: 6px 14px; border-radius: 16px; z-index: 999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    animation: ocardIn .15s ease both;
  }
  .dash-chip {
    background: var(--bg); border-radius: 8px; padding: 4px 10px; font-size: 13px;
  }
  .dash-stat { font-weight: 600; }
  .fav-star {
    background: none; border: none; font-size: 20px; cursor: pointer;
    padding: 0 8px 0 0; opacity: 0.7; flex-shrink: 0;
  }
  .fav-star.on { opacity: 1; }
  .search-wrap { position: relative; margin-bottom: 12px; }
  .search-input {
    width: 100%; padding: 12px 38px 12px 14px; font-size: 16px;
    border: 1px solid var(--bg2); border-radius: 12px;
    background: var(--bg2); color: var(--text); outline: none;
  }
  .search-input:focus { border-color: var(--accent); }
  .search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    border: none; background: var(--hint); color: var(--bg);
    width: 24px; height: 24px; border-radius: 50%; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .profile-card { display: flex; align-items: stretch; gap: 8px; }
  .profile-info {
    flex: 1; text-align: center; min-width: 0;
    background: var(--bg2); border-radius: var(--radius);
    padding: 10px 12px; display: flex; flex-direction: column; justify-content: center;
  }
  .profile-sq {
    flex: 0 0 auto; width: 52px; border: none; cursor: pointer;
    background: var(--bg2); border-radius: var(--radius); font-size: 22px; position: relative;
    display: flex; align-items: center; justify-content: center;
  }
  .profile-sq:active { opacity: 0.75; }
  .date-group-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--accent);
    margin: 18px 0 10px; padding-bottom: 6px;
    border-bottom: 2px solid var(--accent);
  }
  .date-group-header:first-child { margin-top: 0; }
  .date-group-count {
    background: var(--accent); color: var(--accent-t); font-size: 12px;
    border-radius: 10px; padding: 1px 8px; font-weight: 700;
  }

  .oc-card { display: flex; flex-direction: column; gap: 12px; }
  .oc-header {
    background: var(--bg2); border-radius: var(--radius); padding: 16px;
  }
  .oc-status-line { margin-bottom: 12px; }
  .status-pill {
    display: inline-block; padding: 5px 12px; border-radius: 20px;
    font-size: 14px; font-weight: 700;
  }
  .st-active { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
  .st-done   { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
  .st-cancel { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); }
  .oc-when {
    display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
    padding: 12px 0; margin-bottom: 8px;
    border-bottom: 1px solid var(--bg);
  }
  .oc-date { font-size: 19px; font-weight: 700; }
  .oc-time { font-size: 17px; font-weight: 600; color: var(--accent); }
  .oc-meta { display: flex; flex-direction: column; gap: 8px; }
  .oc-route {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  }
  .oc-route-boat {
    font-size: 20px; font-weight: 800; color: var(--accent);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .oc-route-pier {
    font-size: 15px; font-weight: 600; color: var(--text); flex-shrink: 0;
  }
  .oc-meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .oc-meta-k { color: var(--hint); font-size: 14px; flex: 0 0 auto; }
  .oc-meta-v { font-size: 15px; font-weight: 500; text-align: right; min-width: 0; }
  .oc-dim { color: var(--hint); font-weight: 400; }
  .code-val {
    font-family: ui-monospace, monospace; font-size: 16px; font-weight: 700;
    letter-spacing: 1px; color: var(--accent);
    background: var(--bg); padding: 2px 8px; border-radius: 6px;
  }
  .oc-comment {
    margin-top: 12px; padding: 10px 12px; background: var(--bg);
    border-radius: 10px; font-size: 15px;
  }
  .oc-items {
    background: var(--bg2); border-radius: var(--radius); padding: 16px;
  }
  .oc-items-title {
    font-size: 15px; font-weight: 700; margin-bottom: 10px;
    padding-bottom: 8px; border-bottom: 2px solid var(--accent);
  }
  .bell-badge {
    position: absolute; top: -2px; right: -2px; background: #ef4444; color: #fff;
    font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
    animation: badgePop .3s ease;
  }
  @keyframes badgePop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.3); }
    100% { transform: scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ocard, .stat-cat-card { animation: none !important; }
    .bell-badge { animation: none !important; }
    .btn:active, .ocard:active { transform: none; }
  }
  .notif-card {
    display: flex; align-items: flex-start; gap: 10px; position: relative;
    background: var(--bg2); border-radius: 12px; padding: 12px; margin-bottom: 8px;
  }
  .notif-card.tappable { cursor: pointer; }
  .notif-card.tappable:active { opacity: 0.7; }
  .notif-dot {
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  }
  .notif-icon { font-size: 20px; flex-shrink: 0; }
  .notif-body { flex: 1; min-width: 0; }
  .notif-text { font-size: 14px; line-height: 1.3; }
  .notif-time { font-size: 12px; color: var(--hint); margin-top: 3px; }
  .notif-del {
    border: none; background: none; color: var(--hint); cursor: pointer;
    font-size: 16px; padding: 2px 6px; flex-shrink: 0;
  }
  .date-other, .time-custom { margin-top: 8px; }
  .date-other-label { display: block; font-size: 13px; color: var(--hint); margin-bottom: 6px; }
  .date-input {
    width: 100%; padding: 12px 14px; font-size: 16px;
    border: 1px solid var(--bg2); border-radius: 12px;
    background: var(--bg2); color: var(--text); outline: none;
  }
  .date-input:focus { border-color: var(--accent); }
  .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .cal-arrow {
    border: none; background: var(--bg2); color: var(--text); cursor: pointer;
    width: 44px; height: 44px; border-radius: 12px; font-size: 22px;
  }
  .cal-title { font-size: 16px; font-weight: 600; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-wd { text-align: center; font-size: 12px; color: var(--hint); padding: 4px 0; }
  .cal-cell {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--bg2); cursor: pointer; font-size: 15px;
  }
  .cal-cell.empty { background: none; cursor: default; }
  .cal-cell.past { opacity: 0.3; cursor: default; background: none; }
  .cal-cell.selected { background: var(--accent); color: var(--accent-t); font-weight: 700; }
  .cal-cell:not(.empty):not(.past):active { background: var(--accent); color: var(--accent-t); }
  .cal-cell.range-end { background: var(--accent); color: var(--accent-t); font-weight: 700; }
  .cal-cell.range-mid { background: color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 4px; }
  .cal-range-info { text-align: center; margin-top: 14px; font-size: 15px; }
  .cal-range-info .hint-sm { margin-bottom: 4px; }
  .stats-range { text-align: center; font-size: 14px; margin: 12px 0; color: var(--text); }

  .cat-row2 {
    display: flex; align-items: stretch; gap: 6px; margin-bottom: 8px;
  }
  .cat-row2 .arrow-btn {
    flex: 0 0 auto; width: 38px; min-height: 48px; background: var(--bg2);
    border: none; border-radius: var(--radius); font-size: 14px; cursor: pointer;
  }
  .cat-row2 .arrow-btn:disabled { opacity: .3; }
  .cat-row2 .cat-name {
    flex: 1; min-width: 0; font-size: 15px;
    background: var(--bg2); border-radius: var(--radius);
    padding: 10px 12px; display: flex; align-items: center;
    line-height: 1.25; word-break: break-word;
  }
  .cat-unit { color: var(--hint); font-size: 13px; margin-left: 6px; flex: 0 0 auto; }
  .cat-row2 .edit-btn, .cat-row2 .del-btn2 {
    flex: 0 0 auto; width: 40px; min-height: 48px; background: var(--bg2);
    border: none; border-radius: var(--radius); font-size: 15px; cursor: pointer;
  }
  .cat-row2 .edit-btn:active, .cat-row2 .del-btn2:active { opacity: .6; }
  .rem-card {
    background: var(--bg2); border-radius: 12px; padding: 12px; margin-bottom: 10px;
  }
  .rem-card.rem-off { opacity: 0.5; }
  .rem-text { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
  .rem-meta { font-size: 13px; color: var(--hint); margin-bottom: 2px; }
  .rem-actions { display: flex; gap: 8px; margin-top: 10px; }
  .rem-btn { flex: 1; padding: 10px; font-size: 14px; }
  .rem-actions .btn-danger.rem-btn { flex: 0 0 auto; width: 48px; }

  .time-preview {
    text-align: center; font-size: 40px; font-weight: 700;
    font-variant-numeric: tabular-nums; margin-bottom: 16px; color: var(--accent);
  }
  .wheel-wrap {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 16px;
  }
  .wheel {
    height: 200px; overflow-y: auto; flex: 1; max-width: 110px;
    background: var(--bg2); border-radius: 14px; padding: 4px 0;
    scroll-snap-type: y proximity;
  }
  .wheel-colon { font-size: 28px; font-weight: 700; color: var(--hint); }
  .wheel-item {
    padding: 12px 0; text-align: center; font-size: 20px; cursor: pointer;
    font-variant-numeric: tabular-nums; scroll-snap-align: center; border-radius: 8px;
  }
  .wheel-item.wheel-sel {
    background: var(--accent); color: var(--accent-t); font-weight: 700;
  }

  #m3-snack-host {
    position: fixed; left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    z-index: 2000; pointer-events: none; padding: 0 16px;
  }
  .m3-snackbar {
    pointer-events: auto;
    max-width: 480px; width: fit-content; min-width: 240px;
    background: #322F35; color: #F5EFF7;
    border-radius: var(--shape-s);
    padding: 14px 16px; font-size: 14px; line-height: 20px;
    box-shadow: var(--elev-3);
    opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s;
  }
  .m3-snackbar.show { opacity: 1; transform: translateY(0); }
  html[data-theme="dark"] .m3-snackbar { background: #E2E2E9; color: #2E3135; }

  .m3-scrim {
    position: fixed; inset: 0; z-index: 2100;
    background: rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; transition: opacity .2s;
  }
  .m3-scrim.show { opacity: 1; }
  .m3-dialog {
    background: var(--surface-container-high); color: var(--text);
    border-radius: var(--shape-xl); padding: 24px;
    width: 100%; max-width: 360px; box-shadow: var(--elev-3);
    transform: scale(.9); transition: transform .2s;
  }
  .m3-scrim.show .m3-dialog { transform: scale(1); }
  .m3-dialog-text { font-size: 16px; line-height: 24px; margin-bottom: 24px; }
  .m3-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
  .m3-text-btn {
    border: none; background: transparent; color: var(--accent);
    font-size: 14px; font-weight: 500; letter-spacing: .1px;
    padding: 10px 12px; min-width: 48px; min-height: 40px;
    border-radius: 20px; cursor: pointer;
  }
  .m3-text-btn.primary { color: var(--accent); }
  .m3-text-btn:active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .m3-text-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    .m3-snackbar, .m3-scrim, .m3-dialog { transition: none; }
  }

  .btn { border-radius: 999px; font-weight: 500; letter-spacing: .1px;
         position: relative; overflow: hidden; }
  .btn:active { opacity: 1; transform: none; }
  .btn-primary:hover { box-shadow: var(--elev-1); }
  .btn-secondary { background: var(--surface-container-high); color: var(--text);
                   box-shadow: inset 0 0 0 1px var(--outline-variant); }
  .btn-danger { background: var(--error); color: #fff; }
  html[data-theme="dark"] .btn-danger { color: #690005; }
  .btn-danger:active { background: var(--error); }

  .menu-btn { position: relative; overflow: hidden; border-radius: var(--shape-l); }

  .counter-btn, .channel-opt, .theme-opt, .filter-btn, .arrow-btn,
  .m3-text-btn, .cal-arrow, .cat-row2 .edit-btn, .cat-row2 .del-btn2 {
    position: relative; overflow: hidden;
  }

  .m3-ripple {
    position: absolute; border-radius: 50%; background: currentColor;
    opacity: .16; transform: scale(0); pointer-events: none;
    animation: m3RippleExpand .5s ease-out forwards;
  }
  @keyframes m3RippleExpand { to { transform: scale(2.2); opacity: 0; } }

  .counter-btn.minus { background: var(--secondary-container); color: var(--on-secondary-container); border: none; }
  .counter-btn.minus:disabled { background: var(--surface-container-high); color: var(--outline); border: none; }

  .channel-opt.active, .filter-btn.active {
    background: var(--secondary-container); color: var(--on-secondary-container);
    border-color: transparent; box-shadow: none;
  }
  .theme-opt.active { background: var(--secondary-container); }

  .ocard, .stat-cat-card, .skel-card, .oc-header, .oc-items,
  .option-card, .product-row, .notify-channel, .rem-card, .notif-card { border-radius: var(--shape-l); }
  .option-card { transition: background .15s, border-color .15s; }
  .option-card:active { background: color-mix(in srgb, var(--accent) 8%, var(--bg2)); }
  .option-card.selected { background: var(--secondary-container); border-color: var(--accent); }

  .status-pill { border-radius: 8px; font-weight: 600; }

  .text-input, .date-input, .search-input, textarea {
    border: 1px solid var(--outline-variant); border-radius: var(--shape-m);
  }
  .text-input:focus, .date-input:focus, .search-input:focus, textarea:focus {
    border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
  }

  @media (prefers-reduced-motion: reduce) { .m3-ripple { display: none; } }

  .notify-channel .menu-btn {
    margin-top: 10px; min-height: 52px;
    display: flex; align-items: center; justify-content: center;
  }


  .ocard.overdue {
    background: color-mix(in srgb, #f5a623 14%, var(--bg2));
  }
  .ocard.overdue::before { background: #f5a623; }
  .ocard-pill.ocard-pill-overdue {
    background: color-mix(in srgb, #f5a623 22%, transparent);
    color: #a15c00; font-weight: 700;
  }
  html[data-theme="dark"] .ocard-pill.ocard-pill-overdue { color: #ffcb5e; }

  .btn, .menu-btn, .counter-btn, .channel-opt, .theme-opt, .filter-btn,
  .arrow-btn, .cal-arrow, .m3-text-btn, .product-row, .option-card,
  .ocard, .profile-sq, .fav-star {
    touch-action: manipulation;
  }

  /* ── Карточка заявки: длинный текст в плашке времени ───────────────────
     time_display может быть произвольным текстом («До разводки отправить…»),
     который раньше распирал шапку и ломал вёрстку. Теперь номер заявки держит
     своё место, а плашка времени ограничена по ширине и сворачивается в 2 строки. */
  .ocard-head { align-items: flex-start; gap: 10px; }
  .ocard-id { flex: 0 0 auto; }
  .ocard-when { min-width: 0; flex: 1 1 auto; }
  .ocard-pill {
    max-width: 100%; min-width: 0;
    overflow: hidden; overflow-wrap: anywhere;
    text-align: left;
  }
  /* Дата — всегда одной строкой, она короткая и предсказуемая */
  .ocard-pill:not(.ocard-pill-accent) { white-space: nowrap; }
  /* Время/пометка — максимум 2 строки, дальше многоточие */
  .ocard-pill-accent {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.3;
  }

  /* Кнопки нижней панели: компактные, но с комфортной зоной нажатия (44px).
     Одинаковая высота у «Назад» и «На главную» на любом экране. */
  .bottom-nav .btn-back,
  .bottom-nav .btn-home {
    min-height: 40px; padding: 6px 18px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ── Безопасные зоны для экранов без нижней панели ──────────────────────
     Если панели навигации нет, её отступ снизу не работает — добавляем его
     самому прокручиваемому экрану, чтобы контент не заходил под домашнюю
     полосу. :last-child = после этого блока в оболочке ничего нет. */
  .content:last-child,
  .menu-screen:last-child,
  .login-screen:last-child,
  .success-screen:last-child {
    /* Отступ снизу под домашнюю полосу — чтобы нижние элементы (например,
       переключатель темы) не упирались в неё вплотную. */
    padding-bottom: max(20px, min(var(--safe-bottom, env(safe-area-inset-bottom, 0px)), 20px));
  }

  /* Гарантия: в установленном приложении шапка и верхние экраны всегда ниже
     статус-бара, даже если env() или переменная почему-то не сработали. */
  @media (display-mode: standalone) {
    .header { padding-top: max(calc(6px + var(--safe-top, env(safe-area-inset-top, 0px))), 62px); }
    .menu-screen, .login-screen {
      padding-top: max(calc(32px + var(--safe-top, env(safe-area-inset-top, 0px))), 72px);
    }
  }