/* GasBlender — styles.css (SPEC §6) · wersja 1.1.0 (2.2.0: wielkość interfejsu, układ, druk etykiety): nowa szata graficzna (miętowa marka, białe karty, pigułki, Poppins).
   Tokeny, motywy, skala pisma (× --ts — wielkość tekstu z USTAWIEŃ), komponenty. Klasy używane przez JS bez zmian. */

/* ---------- font: Poppins (SIL OFL 1.1, fonts/OFL.txt) — latin + latin-ext (ą ć ę ł ń ó ś ź ż) ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/poppins-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/poppins-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* powierzchnie */
  --bg: #F3F6F5;
  --card: #FFFFFF;
  --card-2: #F7FAF9;
  --track: #E8EEEC;
  --line: #E3EAE7;
  --fg: #13201B;
  --fg-2: #5E6E68;
  /* marka (mięta / zieleń morska) — #1E9E78 dekoracyjnie; tekst na białym/miętowym = --brand-ink; pełne przyciski = --brand-strong (biały tekst ≥ 4,5:1) */
  --brand: #1E9E78;
  --brand-strong: #13805F;
  --brand-ink: #0F7556;
  --brand-soft: #E3F4EE;
  --brand-soft-2: #D3EDE3;
  --brand-fg: #FFFFFF;
  --brand-hero: linear-gradient(135deg, #16855F 0%, #13805F 45%, #0F6A4F 100%);
  --brand-btn: linear-gradient(180deg, #16855F 0%, #13805F 100%);
  --accent: var(--brand);
  --accent-fg: #FFFFFF;
  /* poziomy komunikatów */
  --stop-bg: #D93036; --stop-fg: #FFFFFF; --stop-ink: #C42B31;
  --warn-bg: #FFF4DE; --warn-fg: #7A4B00; --warn-tile: #F5A623; --warn-line: #F6DFAE;
  --info-bg: #E6F0F6; --info-fg: #1F4A66; --info-tile: #CFE2EE;
  --ok: #13805F;
  /* gazy — barwy odsunięte od marki: O2 limonkowy, EAN fioletowy; plakietki zawsze z tekstem */
  --he: #F5A623; --o2: #8FD14F; --n2: #9AA7B5; --air: #5FA8F5; --ean: #A78BFA;
  --he-tint: #FDF1DC; --o2-tint: #EEF8E1; --n2-tint: #EDF0F3; --air-tint: #E4F0FD; --ean-tint: #F0EBFE;
  /* pokrętło / butla */
  --metal-1: #F1F5F3; --metal-2: #9DAEA8;
  --rubber: #2C3A35;
  --tank-stroke: #9FB0AA;
  --tape: #FFFFFF; --tape-fg: #13201B;
  --gas-text: #13201B;
  --dim: rgba(10, 22, 18, .5);
  --wheel-shadow: drop-shadow(0 6px 10px rgba(16, 40, 32, .18));
  --amber: #A84D07;
  /* cienie */
  --sh-1: 0 1px 2px rgba(16, 40, 32, .04), 0 6px 18px rgba(16, 40, 32, .06);
  --sh-2: 0 2px 6px rgba(16, 40, 32, .06), 0 14px 34px rgba(16, 40, 32, .10);
  --sh-brand: 0 10px 22px -8px rgba(15, 106, 79, .55);
  --card-border: transparent;

  /* skala pisma — rem × --ts (html font-size = 100 % × --ts) */
  --ts: 1;
  /* 2.2.0 — wielkość interfejsu i układ (ustawia scr_applyTheme): --ui skala, --sp odstępy, --ch wysokości przycisków,
     --hk / --hm / --hs duże liczby / średnie liczby / nagłówki (układ kompaktowy ≈ 0,72 / 0,82 / 0,9), --rk zaokrąglenia, --fig rysunki */
  --ui: 1; --sp: 1; --ch: 1; --hk: 1; --hm: 1; --hs: 1; --rk: 1; --fig: 1;
  /* DOBIJ DO: zawsze największa liczba na karcie kroku i nigdy mniej niż 48 px */
  --t-hero: max(48px, calc(clamp(calc(72px * var(--ui)), min(5.25rem, 21vw), calc(112px * var(--ui))) * var(--hk)));
  --t-label-nr: calc(5.5rem * var(--hk));
  --t-xl: calc(3.5rem * var(--hk));
  --t-l: calc(3rem * var(--hk));
  --t-m: calc(2.125rem * var(--hm));
  --t-s: calc(1.5rem * var(--hs));
  --t-h1: calc(1.625rem * var(--hs));
  --t-h2: 1.125rem;
  --t-body: 1rem;
  --t-sm: 0.9375rem;
  --t-label: max(13px, 0.8125rem);

  --tabbar-h: calc(max(56px, 72px * var(--ch)) + env(safe-area-inset-bottom, 0px));
  --sbar-h: 0px;
  --strip-h: calc(30px + env(safe-area-inset-top, 0px));
  --radius: calc(20px * var(--rk));
  --radius-s: calc(16px * var(--rk));
  --font: Poppins, Roboto, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1513; --card: #17211E; --card-2: #1D2925; --track: #22302B; --line: #26332F; --fg: #EEF5F2; --fg-2: #A7B8B1;
    --brand: #3CCB9C; --brand-strong: #3CCB9C; --brand-ink: #7FE0BC; --brand-soft: #173A2F; --brand-soft-2: #1C4638; --brand-fg: #0E1513;
    --brand-hero: linear-gradient(135deg, #157F5E 0%, #12735A 45%, #0F5E46 100%);
    --brand-btn: linear-gradient(180deg, #47D3A5 0%, #3CCB9C 100%);
    --accent: #3CCB9C; --accent-fg: #0E1513;
    --stop-bg: #D93036; --stop-fg: #FFFFFF; --stop-ink: #FF8A8F;
    --warn-bg: #33260F; --warn-fg: #FFC46B; --warn-tile: #FFB627; --warn-line: #4A3816;
    --info-bg: #14283A; --info-fg: #9CC4FF; --info-tile: #1D3A52;
    --ok: #3CCB9C;
    --he: #FFB627; --o2: #A6E06A; --n2: #8A97A5; --air: #7CC4FF; --ean: #B9A2FF;
    --he-tint: #322A1A; --o2-tint: #22301A; --n2-tint: #232A30; --air-tint: #1B2C3D; --ean-tint: #2A2440;
    --metal-1: #8E9C97; --metal-2: #3A4743;
    --rubber: #0E1513;
    --tank-stroke: #6F827B;
    --dim: rgba(0, 0, 0, .6);
    --wheel-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
    --amber: #FFB64D;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 22px rgba(0, 0, 0, .25);
    --sh-2: 0 2px 8px rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .4);
    --sh-brand: 0 10px 22px -8px rgba(0, 0, 0, .6);
    --card-border: #22302B;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1513; --card: #17211E; --card-2: #1D2925; --track: #22302B; --line: #26332F; --fg: #EEF5F2; --fg-2: #A7B8B1;
  --brand: #3CCB9C; --brand-strong: #3CCB9C; --brand-ink: #7FE0BC; --brand-soft: #173A2F; --brand-soft-2: #1C4638; --brand-fg: #0E1513;
  --brand-hero: linear-gradient(135deg, #157F5E 0%, #12735A 45%, #0F5E46 100%);
  --brand-btn: linear-gradient(180deg, #47D3A5 0%, #3CCB9C 100%);
  --accent: #3CCB9C; --accent-fg: #0E1513;
  --stop-bg: #D93036; --stop-fg: #FFFFFF; --stop-ink: #FF8A8F;
  --warn-bg: #33260F; --warn-fg: #FFC46B; --warn-tile: #FFB627; --warn-line: #4A3816;
  --info-bg: #14283A; --info-fg: #9CC4FF; --info-tile: #1D3A52;
  --ok: #3CCB9C;
  --he: #FFB627; --o2: #A6E06A; --n2: #8A97A5; --air: #7CC4FF; --ean: #B9A2FF;
  --he-tint: #322A1A; --o2-tint: #22301A; --n2-tint: #232A30; --air-tint: #1B2C3D; --ean-tint: #2A2440;
  --metal-1: #8E9C97; --metal-2: #3A4743;
  --rubber: #0E1513;
  --tank-stroke: #6F827B;
  --dim: rgba(0, 0, 0, .6);
  --wheel-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
  --amber: #FFB64D;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 22px rgba(0, 0, 0, .25);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .4);
  --sh-brand: 0 10px 22px -8px rgba(0, 0, 0, .6);
  --card-border: #22302B;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(100% * var(--ts, 1)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: var(--t-body); font-weight: 400; line-height: 1.5;
  font-variant-numeric: tabular-nums; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  padding-top: var(--strip-h);
  padding-bottom: calc(var(--tabbar-h) + var(--sbar-h));
}
body.modal-open { overflow: hidden; }
body.sheet-open { overflow: hidden; }
body.overlay-open { padding-bottom: 0; }
h1, h2, h3, p { margin: 0; }
b, strong { font-weight: 600; }
button, input, textarea, select { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
input, textarea { touch-action: manipulation; }
[hidden] { display: none !important; }
.unit { font-size: max(0.42em, 13px); font-weight: 500; color: var(--fg-2); margin-left: .2em; letter-spacing: 0; vertical-align: baseline; }
.ico { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-28 { width: 28px; height: 28px; }
.muted { color: var(--fg-2); }
.caps { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-2); line-height: 1.3; }
.t-h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.t-h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.35; }
.t-s { font-size: var(--t-s); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.t-m { font-size: var(--t-m); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.t-l { font-size: var(--t-l); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.small { font-size: var(--t-sm); }
.red { color: var(--stop-ink); }
.amber { color: var(--amber); }
.okc { color: var(--ok); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.row-flex { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1 1 auto; min-width: 0; }
.wrap { overflow-wrap: anywhere; }

/* kafelek z ikoną (styl zestawu: zaokrąglony kwadrat, miętowe tło, zielony glif) */
.ico-tile { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--brand-soft); color: var(--brand-ink); }
.ico-tile .ico { width: 22px; height: 22px; }
.ico-tile.sm { width: 36px; height: 36px; border-radius: 12px; }
.ico-tile.sm .ico { width: 20px; height: 20px; }
.ico-tile.amber-t { background: var(--warn-bg); color: var(--warn-fg); }
.ico-tile.red-t { background: var(--stop-bg); color: var(--stop-fg); }
.ico-tile.ok-t { background: var(--brand); color: #FFFFFF; }
.ico-tile.white-t { background: rgba(255, 255, 255, .18); color: #FFFFFF; }

/* ---------- layout ---------- */
#app { display: block; }
.screen { display: block; }
.col { max-width: 520px; margin: 0 auto; padding: 0 16px 24px; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.overlay { position: fixed; left: 0; right: 0; top: var(--strip-h); bottom: 0; z-index: 30; background: var(--bg); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.overlay .col { padding-bottom: 132px; }
.topbar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.topbar .btn-text { min-height: 48px; padding: 0 16px 0 10px; border-radius: 999px; background: var(--card); color: var(--fg); box-shadow: var(--sh-1); font-weight: 600; font-size: var(--t-sm); gap: 4px; border: 1px solid var(--card-border); }
.topbar .btn-text .ico { width: 22px; height: 22px; }
.topbar-right { font-size: var(--t-h2); font-weight: 600; padding-right: 2px; min-width: 0; overflow-wrap: anywhere; text-align: right; line-height: 1.25; }
.topbar-nr { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 48px; padding: 0 16px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: var(--t-h1); font-weight: 700; letter-spacing: -.01em; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* nagłówek zakładki: szary wiersz powitalny + tytuł + okrągła plakietka */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0 16px; }
.ph-text { min-width: 0; }
.ph-greet { font-size: var(--t-sm); font-weight: 400; color: var(--fg-2); line-height: 1.4; }
.ph-title { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; margin-top: 2px; }
.ph-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 52px; height: 52px; padding: 0 14px; border-radius: 999px; background: var(--card); color: var(--brand-ink); font-weight: 700; font-size: var(--t-h2); box-shadow: var(--sh-1); border: 1px solid var(--card-border); white-space: nowrap; gap: 6px; }
.ph-badge.round { width: 52px; padding: 0; }
.ph-badge.nr { background: var(--brand-strong); color: var(--brand-fg); box-shadow: var(--sh-brand); font-size: var(--t-h2); letter-spacing: -.01em; }
.ph-badge.amber-chip { background: var(--warn-bg); color: var(--warn-fg); box-shadow: none; border: 1px solid var(--warn-line); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .06em; }
.ph-badge.amber-chip .ico { width: 20px; height: 20px; }

/* ---------- tab bar ---------- */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--tabbar-h);
  padding: 6px 4px env(safe-area-inset-bottom, 0px); background: var(--card);
  border-radius: 24px 24px 0 0; box-shadow: 0 -2px 10px rgba(16, 40, 32, .04), 0 -10px 30px rgba(16, 40, 32, .07);
  border-top: 1px solid var(--card-border);
  display: flex; align-items: stretch;
}
#tabbar .tab { position: relative; display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--fg-2); min-height: 60px; padding: 0 2px; }
#tabbar .tab-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; transition: background .2s, color .2s; }
#tabbar .tab .ico { width: 24px; height: 24px; }
#tabbar .tab-label { font-size: 13px; font-weight: 500; letter-spacing: 0; white-space: nowrap; line-height: 1.2; }
#tabbar .tab.active { color: var(--brand-ink); }
#tabbar .tab.active .tab-ico { background: var(--brand-soft); }
#tabbar .tab.active .tab-label { font-weight: 600; }
@media (max-width: 374px) { #tabbar .tab-ico { width: 48px; } #tabbar .tab { padding: 0 1px; } }
.tab-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--stop-bg); color: var(--stop-fg); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); line-height: 1; }

/* ---------- session bar (pływająca pigułka nad zakładkami) ---------- */
#session-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 8px); z-index: 19; min-height: 52px;
  background: var(--brand-hero); color: #FFFFFF; border-radius: 28px; box-shadow: var(--sh-brand);
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; font-size: var(--t-sm); font-weight: 500; line-height: 1.3;
  width: auto; text-align: left; overflow: hidden; max-width: 520px; margin: 0 auto;
}
#session-bar .sb-ico { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; flex: none; }
#session-bar .sb-ico .ico { width: 22px; height: 22px; }
#session-bar .sb-text { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
#session-bar .ico-chev { width: 20px; height: 20px; opacity: .9; }

/* ---------- error bar / toast ---------- */
#error-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--stop-bg); color: var(--stop-fg); padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; display: flex; align-items: center; gap: 12px; font-weight: 600; border-radius: 0 0 18px 18px; }
#error-bar .err-text { flex: 1; min-width: 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
#error-bar button { min-height: 48px; padding: 0 18px; border: 1.5px solid var(--stop-fg); border-radius: 999px; color: var(--stop-fg); font-weight: 600; }
#toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + var(--sbar-h) + 12px); z-index: 90; background: #13201B; color: #FFFFFF; padding: 12px 20px; border-radius: 999px; font-weight: 500; font-size: var(--t-sm); text-align: center; min-height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-2); max-width: 488px; margin: 0 auto; }
body.overlay-open #toast { bottom: 96px; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; box-shadow: var(--sh-1); }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; min-height: 24px; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.card-head .ch-text { flex: 1 1 auto; min-width: 0; }
.card-head .ch-title { font-size: var(--t-h2); font-weight: 600; line-height: 1.3; }
.card-head .ch-sub { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.4; }
.card.amber { box-shadow: var(--sh-1), inset 0 0 0 1.5px var(--warn-tile); }
.card.white { background: #FFFFFF; color: #13201B; }
.card-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* hero (pełna karta w gradiencie marki, biały tekst) */
.hero-card { position: relative; overflow: hidden; border-radius: 24px; padding: 18px 18px 16px; background: var(--brand-hero); color: #FFFFFF; box-shadow: var(--sh-brand); isolation: isolate; }
.hero-card .hc-art { position: absolute; right: -18px; top: -14px; width: 150px; height: 150px; z-index: -1; opacity: 1; pointer-events: none; }
.hero-card .hc-row { display: flex; align-items: center; gap: 12px; }
.hero-card .hc-cap { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #FFFFFF; line-height: 1.3; }
.hero-card .hc-title { display: block; width: 100%; text-align: left; color: #FFFFFF; font-size: var(--t-s); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; min-height: 48px; padding: 2px 0; overflow-wrap: anywhere; }
.hero-card .hc-title .hc-desc { display: block; font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; margin-top: 4px; line-height: 1.35; }
.hero-card .hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.hero-card .hc-note { font-size: var(--t-sm); font-weight: 500; color: #FFFFFF; min-width: 0; }
.hero-card .plak { background: #FFF4DE; color: #7A4B00; border-color: transparent; }
.hero-card.need .ico-tile.white-t { background: #FFF4DE; color: #7A4B00; }
.btn-pill-white { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: #FFFFFF; color: #0F7556; font-weight: 600; font-size: var(--t-sm); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); white-space: nowrap; }
.btn-pill-white:active { transform: scale(.98); }

/* tiles (wartości na przyciemnionych kafelkach) */
.tile { display: block; width: 100%; text-align: left; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; min-height: 56px; transition: background .15s, border-color .15s; }
button.tile:active { background: var(--brand-soft); border-color: var(--brand); }
.tile .tile-cap, .tile .tile-val, .tile .tile-sub { display: block; }
.tile .tile-val { font-size: var(--t-m); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tile .tile-val.s { font-size: var(--t-s); letter-spacing: -.01em; }
.tile .tile-sub { font-size: var(--t-sm); color: var(--fg-2); font-weight: 400; margin-top: 2px; line-height: 1.35; }
.tile .tile-cap { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-2); line-height: 1.3; margin-bottom: 2px; }
.tile.disabled { opacity: .75; border-style: dashed; background: transparent; }
.tile.ghost { color: var(--fg-2); display: flex; align-items: center; }
.two-col { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; }
.tiles { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tank-fig { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 6px; border-radius: var(--radius-s); background: var(--card-2); border: 1px solid var(--line); }
.tank-fig svg { width: 70px; height: 152px; display: block; }
.tank-fig.big { background: transparent; border: 0; }
.tank-fig.big svg { width: 120px; height: 260px; }
.tank-fig .tank-bar { font-size: var(--t-h2); font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: -.01em; }

/* chips — pigułki */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { min-height: 48px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; font-size: var(--t-sm); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; transition: background .15s, color .15s; }
.chip:active { background: var(--brand-soft-2); }
.chip.sel { background: var(--brand-strong); color: var(--brand-fg); box-shadow: var(--sh-brand); }
.chip.small { min-height: 48px; padding: 0 16px; }
.chip[data-gas]::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--n2); box-shadow: 0 0 0 2px var(--card); }
.chip[data-gas="He"]::before { background: var(--he); } .chip[data-gas="O2"]::before { background: var(--o2); } .chip[data-gas="N2"]::before { background: var(--n2); } .chip[data-gas="AIR"]::before { background: var(--air); } .chip[data-gas="EAN"]::before { background: var(--ean); }
.chip.readonly { background: transparent; color: var(--fg-2); border: 1px dashed var(--line); font-weight: 500; }
.chip.tag { min-height: 32px; padding: 0 12px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; }
.chip.amber-chip { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); }
.chips-label { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-2); align-self: center; white-space: nowrap; padding-right: 4px; }

/* segmented — tor pigułkowy */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); }
.seg button { min-height: 44px; padding: 0 10px; font-weight: 500; font-size: var(--t-sm); color: var(--fg-2); border-radius: 999px; transition: background .15s, color .15s; white-space: nowrap; }
.seg button.sel { background: var(--brand-strong); color: var(--brand-fg); font-weight: 600; box-shadow: var(--sh-brand); }
.seg button[data-gas="O2"].sel { background: var(--o2); color: var(--gas-text); box-shadow: none; }
.seg button[data-gas="He"].sel { background: var(--he); color: var(--gas-text); box-shadow: none; }
.seg.tall button { min-height: 52px; }

/* buttons — pigułki */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 0 20px; text-align: center; width: 100%; line-height: 1.2; transition: transform .1s, box-shadow .15s, background .15s; text-decoration: none; }
.btn:active:not([disabled]) { transform: scale(.985); }
.btn-primary { min-height: 60px; background: var(--brand-btn); color: var(--brand-fg); font-size: var(--t-h2); box-shadow: var(--sh-brand); }
.btn-secondary { min-height: 52px; background: var(--brand-soft); color: var(--brand-ink); border: 0; font-size: var(--t-sm); padding: 6px 20px; }
.btn-secondary:active:not([disabled]) { background: var(--brand-soft-2); }
.btn-text { min-height: 48px; background: none; color: var(--brand-ink); font-size: var(--t-sm); width: auto; font-weight: 600; letter-spacing: .03em; }
.btn-danger-text { min-height: 52px; background: none; color: var(--stop-ink); font-size: var(--t-sm); }
.btn-big { min-height: 64px; font-size: var(--t-h2); letter-spacing: .08em; }
.btn[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.btn-primary.pulse { animation: gb-pulse 2s ease-out 1; }
@keyframes gb-pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 158, 120, .55); } 100% { box-shadow: 0 0 0 16px rgba(30, 158, 120, 0); } }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; min-width: 0; }
.btn-ok { background: var(--brand-strong); color: var(--brand-fg); }

/* sticky action bar (nad zakładkami; na nakładkach na dole) */
.sticky-bar { position: sticky; bottom: calc(var(--tabbar-h) + var(--sbar-h)); z-index: 5; padding: 18px 0 12px; margin-top: 4px; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent) 0%, var(--bg) 34%); }
.overlay .sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 22px 16px calc(14px + env(safe-area-inset-bottom, 0px)); margin: 0; }
.overlay .sticky-bar > .inner { max-width: 488px; margin: 0 auto; }
.reason { font-size: var(--t-sm); font-weight: 600; color: var(--amber); text-align: center; margin-bottom: 8px; }
.stale { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-fg); font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

/* radio rows → wybieralne karty z kafelkiem ikony */
.radio-row { display: flex; align-items: center; gap: 12px; min-height: 68px; width: 100%; text-align: left; padding: 10px 14px 10px 10px; border-radius: 18px; font-weight: 500; font-size: var(--t-body); line-height: 1.4; background: var(--card-2); border: 1.5px solid var(--line); transition: border-color .15s, background .15s; }
.radio-row + .radio-row { margin-top: 8px; }
.radio-row > span:not(.radio):not(.ico-tile) { flex: 1 1 auto; min-width: 0; }
.radio-row .radio { order: 5; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--fg-2); flex: none; position: relative; margin-left: auto; }
.radio-row.sel { border-color: var(--brand); background: var(--brand-soft); }
.radio-row.sel .radio { border-color: var(--brand); background: var(--brand); }
.radio-row.sel .radio::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #FFFFFF; }
.radio-row.sel .ico-tile { background: var(--brand-strong); color: var(--brand-fg); }
.radio-row .inline-tile { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 700; font-size: var(--t-h2); margin: 2px 4px; vertical-align: middle; box-shadow: var(--sh-1); }

/* ---------- bands (STOP / UWAGA / INFO) — karty z kafelkiem ikony ---------- */
.band { display: grid; grid-template-columns: 44px 1fr; gap: 10px 12px; padding: 14px 16px 14px 14px; border-radius: var(--radius); align-items: start; }
.band > .ico { width: 44px; height: 44px; padding: 10px; border-radius: 14px; }
.band-ico { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.band-ico .ico { width: 24px; height: 24px; }
.band-head { font-size: var(--t-body); font-weight: 600; line-height: 1.4; padding-top: 2px; }
.band[data-level="info"] .band-head { font-weight: 500; }
.band-detail { font-size: var(--t-sm); font-weight: 400; margin-top: 4px; overflow-wrap: anywhere; line-height: 1.5; }
.band-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.band[data-level="stop"] { background: var(--stop-bg); color: var(--stop-fg); box-shadow: 0 10px 24px -10px rgba(217, 48, 54, .6); }
.band[data-level="stop"] .band-ico, .band[data-level="stop"] > .ico { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
.band[data-level="stop"] .chip { background: #FFFFFF; color: #B0242A; }
.band[data-level="warn"] { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line); }
.band[data-level="warn"] .band-ico, .band[data-level="warn"] > .ico { background: var(--warn-tile); color: #13201B; }
.band[data-level="info"] { background: var(--info-bg); color: var(--info-fg); }
.band[data-level="info"] .band-ico, .band[data-level="info"] > .ico { background: var(--info-tile); color: var(--info-fg); }
.band-tag { display: inline-block; font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; margin-right: 8px; }
.info-line { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); font-weight: 400; color: var(--info-fg); background: var(--info-bg); padding: 12px 14px; border-radius: 16px; line-height: 1.45; }
.warn-line { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); font-weight: 500; color: var(--warn-fg); background: var(--warn-bg); padding: 12px 14px; border-radius: 16px; line-height: 1.45; border: 1px solid var(--warn-line); }
.info-line .ico, .warn-line .ico { width: 22px; height: 22px; margin-top: 1px; }
.err-line { color: var(--stop-ink); font-weight: 600; font-size: var(--t-sm); min-height: 1.4em; }

/* ---------- badges gazów (kafelek z tekstem) ---------- */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--gas-text); flex: none; background: var(--n2); letter-spacing: 0; }
.badge[data-gas="He"] { background: var(--he); } .badge[data-gas="O2"] { background: var(--o2); } .badge[data-gas="N2"] { background: var(--n2); }
.badge[data-gas="TOP"], .badge[data-gas="AIR"] { background: var(--air); } .badge[data-gas="EAN"], .badge[data-gas="EANx"] { background: var(--ean); }

/* ---------- step card ---------- */
.step-card { position: relative; border-radius: 24px; padding: 16px 16px 16px; background: var(--card); box-shadow: var(--sh-2); border: 1px solid var(--card-border); overflow: hidden; }
.step-card::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--n2); }
.step-card[data-gas="He"]::before { background: var(--he); }
.step-card[data-gas="O2"]::before { background: var(--o2); }
.step-card[data-gas="TOP"]::before, .step-card[data-gas="AIR"]::before { background: var(--air); }
.step-card[data-gas="EAN"]::before, .step-card[data-gas="EANx"]::before { background: var(--ean); }
.step-card[data-gas="BLEED"] { background: var(--stop-bg); color: var(--stop-fg); border-color: var(--stop-bg); box-shadow: 0 12px 28px -12px rgba(217, 48, 54, .7); }
.step-card[data-gas="BLEED"]::before { display: none; }
.step-card[data-gas="BLEED"] .unit, .step-card[data-gas="BLEED"] .muted, .step-card[data-gas="BLEED"] .delta, .step-card[data-gas="BLEED"] .step-line { color: var(--stop-fg); }
.step-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
.step-title { display: flex; align-items: center; gap: 10px; font-size: var(--t-body); font-weight: 600; line-height: 1.3; }
.step-title .badge { order: -1; width: 44px; height: 44px; border-radius: 14px; font-size: 14px; }
.step-title > .ico { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .2); }
.step-meta { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); font-size: var(--t-label); color: var(--fg-2); font-weight: 500; text-align: right; white-space: nowrap; }
.step-body { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; align-items: flex-end; margin-top: 6px; }
.step-body > div:first-child { min-width: 0; }
.hero-label { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--fg-2); margin-top: 8px; }
.step-card[data-gas="BLEED"] .hero-label { color: var(--stop-fg); }
.hero { font-size: var(--t-hero); font-weight: 800; line-height: .98; letter-spacing: -.035em; color: var(--fg); white-space: nowrap; margin-top: 2px; }
.step-card[data-gas="BLEED"] .hero { color: var(--stop-fg); }
.hero .unit { font-size: max(1.5rem, 13px); font-weight: 600; letter-spacing: 0; margin-left: .15em; }
.delta { display: inline-flex; align-items: baseline; gap: 2px; margin-top: 10px; min-height: 34px; padding: 4px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: var(--t-h2); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.delta .unit { font-size: var(--t-sm); color: var(--brand-ink); font-weight: 500; }
.step-card[data-gas="BLEED"] .delta { background: rgba(0, 0, 0, .16); }
.step-line { font-size: var(--t-sm); color: var(--fg-2); font-weight: 400; margin-top: 6px; overflow-wrap: anywhere; line-height: 1.5; }
.step-line.strong { color: var(--fg); font-weight: 500; }
.step-line b { font-weight: 600; color: var(--fg); }
.mini-gauge { padding: 4px 0 0; }
.mini-gauge svg { width: 104px; height: 63px; display: block; }
.plaks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.plak { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg); line-height: 1.2; }
.plak.warnp { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); }
.eanx-box { background: var(--ean-tint); border-radius: 16px; padding: 10px 14px; margin: 10px 0 4px; border: 1px solid color-mix(in srgb, var(--ean) 45%, transparent); }
.eanx-box .val { font-size: var(--t-l); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.eanx-box .cap { font-size: var(--t-sm); color: var(--fg-2); font-weight: 400; margin-top: 4px; }
.skip-line { font-size: var(--t-sm); color: var(--fg-2); font-weight: 400; padding: 4px 16px; line-height: 1.45; }
.step-row { display: flex; align-items: center; gap: 12px; min-height: 60px; width: 100%; text-align: left; padding: 8px 14px 8px 8px; border-radius: 18px; font-size: var(--t-sm); font-weight: 500; background: var(--card); box-shadow: var(--sh-1); border: 1px solid var(--card-border); line-height: 1.4; }
.step-row > .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--card-2); color: var(--fg-2); flex: none; }
.step-row.done { color: var(--fg); }
.step-row.done > .ico { background: var(--brand); color: #FFFFFF; stroke-width: 2.5; }
.step-row.pending { color: var(--fg-2); background: transparent; box-shadow: none; border: 1.5px dashed var(--line); padding-left: 16px; }
.step-row .time { margin-left: auto; color: var(--fg-2); font-weight: 500; white-space: nowrap; font-size: var(--t-label); padding-left: 8px; }

/* hold button */
.btn-hold { position: relative; min-height: 64px; background: var(--brand-btn); color: var(--brand-fg); border-radius: 999px; width: 100%; font-weight: 600; font-size: var(--t-body); letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 20px 6px 8px; user-select: none; -webkit-user-select: none; touch-action: manipulation; box-shadow: var(--sh-brand); line-height: 1.25; text-align: left; }
.btn-hold .hold-ring { width: 48px; height: 48px; flex: none; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.btn-hold .hold-ring circle.fg { stroke: var(--brand-fg); transition: none; }
.btn-hold.holding .hold-ring circle.fg { stroke-dashoffset: 0 !important; transition: stroke-dashoffset .5s linear; }
.btn-hold .hold-ring circle.bg { stroke: var(--brand-fg); opacity: .3; }
.btn-hold.holding { transform: scale(.985); }
.btn-hold.secondary { background: var(--brand-soft); color: var(--brand-ink); box-shadow: none; }
.btn-hold > span { flex: 1 1 auto; min-width: 0; }

/* wait card — karta „hero” w gradiencie marki */
.wait-card { position: relative; overflow: hidden; border-radius: 24px; padding: 18px; background: var(--brand-hero); color: #FFFFFF; box-shadow: var(--sh-brand); isolation: isolate; }
.wait-card::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(0, 0, 0, .07); z-index: -1; box-shadow: -40px 70px 0 -10px rgba(0, 0, 0, .05); }
.wait-card .t-h2 { display: flex; align-items: center; gap: 10px; font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.wait-card .t-h2 .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .18); }
.wait-card .countdown { font-size: var(--t-xl); font-weight: 700; line-height: 1; margin: 14px 0 8px; letter-spacing: -.03em; }
.wait-card .ends { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(0, 0, 0, .16); font-size: var(--t-h2); font-weight: 600; }
.wait-card .step-line { color: #FFFFFF; }
.wait-card .chip { background: rgba(0, 0, 0, .16); color: #FFFFFF; }
.wait-card .chip.sel { background: #FFFFFF; color: #0F7556; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
.wait-card .btn-secondary { background: #FFFFFF; color: #0F7556; }
.wait-card .btn-text { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.wait-card .info-line { background: rgba(0, 0, 0, .14); color: #FFFFFF; }
.wait-card.finished { background: var(--card); color: var(--fg); box-shadow: var(--sh-1); border: 1.5px solid var(--brand); }
.wait-card.finished::after { display: none; }
.wait-card.finished .step-line { color: var(--fg-2); }
.wait-card.finished .mixed { font-size: var(--t-s); font-weight: 700; color: var(--brand-ink); letter-spacing: -.01em; }
.wait-card .honest { font-size: var(--t-sm); color: #FFFFFF; font-weight: 400; margin-top: 12px; line-height: 1.45; }
.wait-card .btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* session cards / log rows — wiersze listy jak w zestawie */
.sess-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 80px; padding: 12px 14px 12px 12px; border-radius: var(--radius); background: var(--card); box-shadow: var(--sh-1); border: 1px solid var(--card-border); }
.sess-card .sc-body { flex: 1 1 auto; min-width: 0; }
.sess-card .t-h2 { font-size: var(--t-body); font-weight: 600; line-height: 1.35; }
.sess-card .st { font-size: var(--t-sm); font-weight: 400; margin-top: 2px; color: var(--fg-2); line-height: 1.4; }
.sess-card .st.amber { color: var(--amber); font-weight: 500; }
.sess-card .st.okc { color: var(--brand-ink); font-weight: 500; }
.sess-card > .ico { color: var(--fg-2); }
.log-list { display: flex; flex-direction: column; gap: 10px; }
.log-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 72px; padding: 10px 12px 10px 10px; border-radius: 18px; background: var(--card); box-shadow: var(--sh-1); border: 1px solid var(--card-border); font-size: var(--t-sm); font-weight: 400; line-height: 1.4; }
.log-row .lr-title { display: block; font-size: var(--t-body); font-weight: 600; color: var(--fg); }
.log-row .lr-sub { display: block; color: var(--fg-2); }
.log-row .lr-pill { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; font-size: var(--t-label); white-space: nowrap; }
.log-row > .ico { color: var(--fg-2); width: 20px; height: 20px; }
.log-row .nr { font-weight: 700; }
.search-wrap { position: relative; }
.search-wrap > .ico { position: absolute; left: 18px; top: 50%; margin-top: -11px; width: 22px; height: 22px; color: var(--fg-2); pointer-events: none; }
.search { width: 100%; min-height: 56px; border: 1px solid var(--card-border); border-radius: 999px; padding: 0 20px 0 50px; background: var(--card); font-size: var(--t-body); font-weight: 400; box-shadow: var(--sh-1); }
.search::placeholder, .text-input::placeholder { color: var(--fg-2); opacity: 1; }
.text-input { width: 100%; min-height: 56px; border: 1px solid var(--line); border-radius: 16px; padding: 8px 16px; background: var(--card-2); font-size: var(--t-body); font-weight: 500; }
.text-input:focus, .search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }

/* echo — karta z wierszami ikon */
.echo { background: var(--card); border-radius: var(--radius); padding: 8px 16px 10px; font-size: var(--t-sm); font-weight: 400; display: flex; flex-direction: column; gap: 0; box-shadow: var(--sh-1); border: 1px solid var(--card-border); line-height: 1.45; }
.echo > div { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.echo > div:last-child { border-bottom: 0; padding-bottom: 2px; }
.echo b { font-weight: 600; display: inline-block; min-width: 0; margin-right: 6px; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.echo .echo-t { flex: 1 1 auto; min-width: 0; }
.echo .muted { font-size: var(--t-label); }
.footer-note { font-size: var(--t-sm); color: var(--fg-2); font-weight: 400; text-align: center; padding: 8px 0; line-height: 1.45; }

/* label tape */
.tape { background: var(--tape); color: var(--tape-fg); border: 1px solid #D5DDDA; border-radius: 14px; padding: 14px 16px; font-family: "Roboto Mono", "Consolas", "Courier New", monospace; font-weight: 700; box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 6px 16px -8px rgba(16, 40, 32, .25); }
.tape .l1 { font-size: var(--t-m); font-weight: 800; line-height: 1.05; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tape .l1 small { font-size: var(--t-sm); font-weight: 700; }
.tape .l2 { font-size: var(--t-s); font-weight: 800; line-height: 1.1; margin-top: 4px; }
.tape .l3 { font-size: var(--t-sm); margin-top: 4px; }
.tape .xtra { font-size: var(--t-sm); font-weight: 800; margin-top: 4px; }
.tape-btn { display: block; width: 100%; text-align: left; }
.label-screen { background: #FFFFFF; color: #13201B; }
.label-screen .topbar { background: rgba(255, 255, 255, .9); }
.label-screen .topbar .btn-text { background: #F3F6F5; color: #13201B; box-shadow: none; }
.label-screen .btn-secondary { background: #E3F4EE; color: #0F7556; }
.label-screen .btn-text { color: #0F7556; }
.label-screen .sticky-bar { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF 34%); }
.label-nr { font-size: var(--t-label-nr); font-weight: 800; line-height: 1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.label-mix { font-size: var(--t-xl); font-weight: 800; line-height: 1; overflow-wrap: anywhere; letter-spacing: -.02em; }
.label-screen .unit { color: #5E6E68; }
.write-nr { background: var(--bg); color: var(--fg); min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
.write-nr .wn-card { width: 100%; max-width: 488px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--card); border-radius: 28px; padding: 22px 16px 18px; box-shadow: var(--sh-2); border: 1px solid var(--card-border); }
.write-nr .wn-nr { display: inline-flex; align-items: center; justify-content: center; min-width: 60%; padding: 6px 22px; border-radius: 24px; background: var(--brand-hero); color: #FFFFFF; box-shadow: var(--sh-brand); }
.write-nr .caps { color: var(--fg-2); }
.write-nr .btn-primary { margin-top: auto; max-width: 488px; }

/* ---------- settings rows (karty grupowe) ---------- */
.group-title { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-2); padding: 24px 4px 10px; }
.group { padding: 4px 16px; }
.group > .row:last-child, .group > .row-wrap:last-child > .row { border-bottom: 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.row > .ico-tile { margin-right: 0; }
.row-label { font-size: var(--t-body); font-weight: 500; flex: 1; min-width: 0; line-height: 1.35; }
.row-label .small { font-weight: 400; display: block; margin-top: 1px; }
.row-value { font-size: var(--t-body); font-weight: 600; text-align: right; color: var(--fg); white-space: nowrap; }
.row-btn { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.row-btn > .ico:last-child { color: var(--fg-2); width: 20px; height: 20px; }
.row.col-row { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 0; }
.row.col-row > .rl-head { display: flex; align-items: center; gap: 12px; }
.toggle { width: 52px; height: 32px; border-radius: 16px; position: relative; flex: none; background: var(--track); border: 0; transition: background .2s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(16, 40, 32, .25); transition: left .18s; }
.toggle.on { background: var(--brand); }
.toggle.on::after { left: 23px; }
.toggle-btn { display: flex; align-items: center; gap: 12px; min-height: 64px; width: 100%; text-align: left; }
.order-row { display: grid; grid-template-columns: 22px 44px 1fr 48px 48px; align-items: center; gap: 8px; min-height: 68px; font-weight: 600; font-size: var(--t-body); padding: 6px 0; border-bottom: 1px solid var(--line); }
.order-row .badge { width: 44px; height: 44px; border-radius: 14px; font-size: 14px; }
.order-row .idx { font-size: var(--t-h2); font-weight: 700; color: var(--fg-2); text-align: center; }
.order-row .arrow { width: 48px; height: 48px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-ink); }
.order-row .arrow:active:not([disabled]) { background: var(--brand-soft-2); }
.order-row .arrow[disabled] { opacity: .35; background: var(--card-2); color: var(--fg-2); }
.order-row .sub { font-size: var(--t-sm); color: var(--fg-2); font-weight: 400; }
.preview { font-size: var(--t-h2); font-weight: 700; padding: 12px 0 4px; letter-spacing: -.01em; }
.tank-list .row { gap: 8px; min-height: 56px; }
.del-btn { min-height: 48px; padding: 0 14px; color: var(--stop-ink); font-weight: 600; font-size: var(--t-sm); border-radius: 999px; }
.del-btn:active { background: color-mix(in srgb, var(--stop-bg) 12%, transparent); }
.ts-preview { font-size: var(--t-body); color: var(--fg); background: var(--card-2); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; line-height: 1.45; }
.ts-preview b { font-weight: 700; font-size: 1.375rem; letter-spacing: -.02em; }
details.gloss summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: var(--t-body); cursor: pointer; list-style: none; }
details.gloss summary::-webkit-details-marker { display: none; }
details.gloss summary::after { content: ''; width: 10px; height: 10px; border-right: 2px solid var(--fg-2); border-bottom: 2px solid var(--fg-2); transform: rotate(45deg); margin: -4px 6px 0 0; transition: transform .2s; }
details.gloss[open] summary::after { transform: rotate(-135deg); margin-top: 6px; }
details.gloss p { padding: 8px 0; font-size: var(--t-sm); color: var(--fg-2); font-weight: 400; line-height: 1.55; border-top: 1px solid var(--line); }
.doc-content { line-height: 1.6; font-size: var(--t-body); }
.doc-content h2 { font-size: var(--t-h1); font-weight: 700; margin: 8px 0 12px; letter-spacing: -.015em; line-height: 1.25; }
.doc-content h3 { font-size: var(--t-h2); font-weight: 600; margin: 28px 0 8px; line-height: 1.35; }
.doc-content ol, .doc-content ul { padding-left: 22px; margin: 8px 0; }
.doc-content li { margin: 8px 0; padding-left: 2px; }
.doc-content li::marker { color: var(--brand-ink); font-weight: 600; }
.doc-content a { color: var(--brand-ink); font-weight: 500; }
.doc-content p { margin: 10px 0; }
.doc-content strong { font-weight: 600; }
.doc-content em { font-style: italic; }
.doc-content code { font-size: .9em; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }
.doc-content .help-warn { display: flex; gap: 12px; align-items: flex-start; background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line); border-radius: 18px; padding: 14px 16px 14px 14px; margin: 14px 0; font-weight: 400; line-height: 1.5; }
.doc-content .help-warn > .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; flex: none; background: var(--warn-tile); color: #13201B; }
.doc-content .help-warn strong { font-weight: 700; }
.doc-title { font-size: var(--t-h1); font-weight: 700; margin: 12px 0 0; }
.overlay .doc-content.col { padding-top: 4px; }

/* ---------- sheets ---------- */
#sheet-root { position: relative; z-index: 50; }
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-dim { position: absolute; inset: 0; background: var(--dim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet { position: relative; background: var(--card); color: var(--fg); border-top-left-radius: 28px; border-top-right-radius: 28px; max-height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -12px 40px rgba(0, 0, 0, .18); max-width: 560px; width: 100%; margin: 0 auto; }
.sheet::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--line); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 22px 12px 2px 20px; min-height: 64px; }
.sheet-title { font-size: var(--t-h2); font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
.sheet-head .sheet-cancel { padding: 0 14px; border-radius: 999px; color: var(--fg-2); font-weight: 500; letter-spacing: .04em; }
.sheet-head .sheet-cancel:active { background: var(--card-2); }
.sheet-sub { font-size: var(--t-sm); color: var(--fg-2); font-weight: 400; padding: 0 20px 8px; min-height: 1.4em; line-height: 1.45; }
.sheet-body { padding: 4px 20px 14px; display: flex; flex-direction: column; gap: 12px; }
.sheet-foot { position: sticky; bottom: 0; background: var(--card); padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; box-shadow: 0 -10px 18px -12px rgba(16, 40, 32, .18); }
.sheet-foot > .btn { flex: 1; }
.sheet-wrap.dialog { justify-content: center; align-items: center; padding: 16px; }
.sheet-wrap.dialog .sheet { border-radius: 28px; width: 100%; max-width: 420px; max-height: 90dvh; }
.sheet-wrap.dialog .sheet::before { display: none; }
.sheet-wrap.dialog .sheet-head { padding-top: 22px; }
.sheet-wrap.dialog .sheet-body { font-size: var(--t-body); font-weight: 400; line-height: 1.5; color: var(--fg-2); }
.sheet-wrap.dialog .sheet-foot { flex-direction: column; padding-top: 4px; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .sheet-wrap:not(.dialog) .sheet { animation: gb-sheet-in .22s cubic-bezier(.2, .9, .3, 1); }
  .sheet-wrap.dialog .sheet { animation: gb-dialog-in .18s ease-out; }
  @keyframes gb-sheet-in { from { transform: translateY(48px); opacity: .5; } to { transform: none; opacity: 1; } }
  @keyframes gb-dialog-in { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }
}
.live-line { font-size: var(--t-s); font-weight: 700; line-height: 1.15; min-height: 1.2em; text-align: center; overflow-wrap: anywhere; letter-spacing: -.01em; }
.live-line small { font-size: var(--t-sm); color: var(--fg-2); font-weight: 500; letter-spacing: 0; display: inline-block; margin-left: 4px; padding: 2px 10px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); vertical-align: middle; }
.sheet-row { display: flex; gap: 10px; align-items: stretch; }
.sheet-row > .seg { flex: 1; }
.sheet-row > .btn-secondary { flex: 1; width: auto; min-height: 54px; padding: 0 14px; }
.keypad-input { width: 100%; min-height: 84px; border: 1.5px solid var(--line); border-radius: 22px; padding: 0 16px; font-size: var(--t-l); font-weight: 700; text-align: center; background: var(--card-2); color: var(--fg); letter-spacing: -.02em; }
.keypad-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); background: var(--card); }
.keypad-input.bad { border-color: var(--stop-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--stop-bg) 18%, transparent); }
.keypad-line { display: flex; align-items: center; gap: 12px; }
.keypad-line .keypad-input { flex: 1; min-width: 0; }
.keypad-line .big-unit { font-size: var(--t-h1); font-weight: 600; color: var(--fg-2); flex: none; }
.range-hint { font-size: var(--t-sm); color: var(--fg-2); font-weight: 400; text-align: center; }
.steppers { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.stepper { min-height: 56px; border: 0; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; font-size: var(--t-h2); user-select: none; -webkit-user-select: none; }
.stepper:active { background: var(--brand-soft-2); }
.nr-input { width: 100%; min-height: 68px; border: 1.5px solid var(--line); border-radius: 20px; padding: 0 18px; font-size: 2.25rem; font-weight: 700; background: var(--card-2); color: var(--fg); letter-spacing: -.01em; }
.nr-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); background: var(--card); }
.nr-input::placeholder { color: var(--fg-2); font-weight: 500; font-size: 1.25rem; opacity: 1; }
.field-label { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-2); margin-top: 6px; }
.summary-line { font-size: var(--t-h2); font-weight: 700; padding: 12px 16px; overflow-wrap: anywhere; border-radius: 16px; background: var(--brand-soft); color: var(--brand-ink); }
.inline-q { background: var(--warn-bg); color: var(--warn-fg); border-radius: 18px; padding: 12px 14px; font-weight: 500; border: 1px solid var(--warn-line); }
.inline-q .btn-row { margin-top: 10px; }
.inline-q .btn-secondary { color: var(--warn-fg); background: color-mix(in srgb, var(--warn-tile) 22%, transparent); }
.check-row { display: flex; align-items: center; gap: 12px; min-height: 56px; font-size: var(--t-sm); font-weight: 400; padding: 6px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.check-row:last-of-type { border-bottom: 0; }
.check-row > .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); }
.check-row b { font-weight: 600; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); margin-right: 4px; }
textarea.import-area { width: 100%; min-height: 180px; border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 14px; font-size: var(--t-sm); background: var(--card-2); color: var(--fg); font-family: "Roboto Mono", Consolas, monospace; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: var(--t-sm); }
.kv div:nth-child(odd) { color: var(--fg-2); font-weight: 600; }
.kv div:nth-child(even) { overflow-wrap: anywhere; }
.steps-table thead tr { color: var(--fg-2); }
.steps-table th { font-weight: 600; }

/* ---------- dial (pokrętło) ---------- */
.dial-host { position: relative; width: min(300px, 100vw - 64px); aspect-ratio: 1 / 1; margin: 6px auto 0; }
.dial-host svg.dial-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial-rot { transform-origin: 160px 160px; transform-box: view-box; filter: var(--wheel-shadow); }
.dial-rot.anim { transition: transform .2s ease-out; }
.dial-rot.snap { transition: transform .06s ease-out; }
.dial-hit { touch-action: none; pointer-events: all; fill: transparent; cursor: grab; }
.dial-hit:active { cursor: grabbing; }
.dial-hit:focus-visible { outline: none; }
.dial-hub { position: absolute; left: 50%; top: 50%; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; background: var(--card); box-shadow: 0 8px 20px rgba(16, 40, 32, .18), inset 0 0 0 4px var(--n2); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; color: var(--fg); z-index: 2; }
.dial-hub[data-gas="O2"] { box-shadow: 0 8px 20px rgba(16, 40, 32, .18), inset 0 0 0 4px var(--o2); } .dial-hub[data-gas="He"] { box-shadow: 0 8px 20px rgba(16, 40, 32, .18), inset 0 0 0 4px var(--he); }
.dial-hub .hub-gas { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--fg-2); }
.dial-hub .hub-val { font-size: 2.75rem; font-weight: 700; letter-spacing: -.03em; margin: 2px 0; }
.dial-hub .hub-val.fine { font-size: 2.25rem; }
.dial-hub .hub-unit { font-size: 1rem; font-weight: 500; color: var(--fg-2); }
.dial-under { min-height: 24px; text-align: center; font-size: var(--t-sm); font-weight: 500; color: var(--fg-2); }
.dial-under .blocked { color: var(--amber); }
.dial-track { fill: none; stroke: var(--track); stroke-width: 10; }
.progress-arc { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .08s linear; }
.gauge svg { display: block; width: 100%; height: auto; }
.gauge-needle { transform-origin: 100px 100px; transform-box: view-box; transition: transform .6s cubic-bezier(.2, .9, .3, 1); }
.gauge-wrap { display: flex; justify-content: center; background: var(--card); border-radius: 24px; padding: 16px 12px 10px; box-shadow: var(--sh-1); border: 1px solid var(--card-border); }
.gauge-wrap svg { width: 240px; height: 144px; }

@media (prefers-reduced-motion: reduce) {
  .dial-rot.anim, .dial-rot.snap, .gauge-needle, .progress-arc, .toggle::after, .btn-hold .hold-ring circle.fg { transition: none !important; }
  .sheet-wrap .sheet { animation: none !important; }
  .btn-primary.pulse { animation: none; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 374px) {
  .col { padding-left: 14px; padding-right: 14px; }
  .two-col { grid-template-columns: 74px 1fr; gap: 10px; }
  .tank-fig svg { width: 60px; height: 130px; }
  .tile .tile-val { font-size: calc(1.875rem * var(--hm)); }
  .card { padding: 14px; }
  .order-row { grid-template-columns: 18px 40px 1fr 48px 48px; gap: 6px; }
  .order-row .badge { width: 40px; height: 40px; }
  .seg button { padding: 0 6px; }
}

/* ---------- wersja testowa: pasek, modale (disclaimer / samouczek), pomoc ---------- */
.test-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 48; height: var(--strip-h); padding: env(safe-area-inset-top, 0px) 14px 0; background: #FFE7B3; color: #6B4100; border-radius: 0 0 14px 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; overflow: hidden; width: 100%; box-shadow: 0 2px 8px rgba(122, 75, 0, .12); }
.test-strip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #E08A00; flex: none; box-shadow: 0 0 0 3px rgba(224, 138, 0, .22); }
.test-strip > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.test-strip .strip-long { display: none; }
.test-strip .strip-short { display: inline; font-weight: 600; }
@media (min-width: 600px) { .test-strip .strip-long { display: inline; } .test-strip .strip-short { display: none; } }
.disc-line { margin-top: -4px; text-align: center; font-size: var(--t-label); color: var(--fg-2); line-height: 1.45; padding: 0 8px; }
.test-line { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line); border-radius: 16px; padding: 8px 16px; font-weight: 600; text-align: center; font-size: var(--t-label); letter-spacing: .04em; line-height: 1.35; }
.modal-wrap { position: fixed; inset: 0; z-index: 49; background: var(--bg); color: var(--fg); overflow-y: auto; overscroll-behavior: contain; }
.modal { max-width: 520px; margin: 0 auto; min-height: 100%; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.modal .modal-body { flex: 1 1 auto; }
.modal .modal-foot { position: sticky; bottom: 0; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 26%); }
.modal .modal-foot .btn-text { min-height: 48px; color: var(--fg-2); }
.onb-art { position: relative; overflow: hidden; border-radius: 28px; background: var(--brand-hero); height: 200px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-brand); flex: none; isolation: isolate; }
.onb-art svg.onb-svg { width: 100%; height: 100%; display: block; }
.onb-kicker { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.onb-kicker.amber-k { background: var(--warn-bg); color: var(--warn-fg); }
.modal .onb-title { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.check-big { display: flex; gap: 12px; align-items: flex-start; min-height: 56px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 18px; font-weight: 500; cursor: pointer; background: var(--card); line-height: 1.45; font-size: var(--t-sm); }
.check-big input { width: 24px; height: 24px; flex: none; margin: 1px 0 0; accent-color: var(--brand-strong); }
.check-big.on { border-color: var(--brand); background: var(--brand-soft); }
.dots { display: flex; gap: 6px; justify-content: center; padding: 4px 0; }
.dot { width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width .2s, background .2s; }
.dot.on { width: 24px; background: var(--brand); }
.help-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; min-height: 76px; padding: 12px 14px 12px 12px; border-radius: var(--radius); background: var(--card); box-shadow: var(--sh-1); border: 1px solid var(--card-border); }
.help-row .t-h2 { font-size: var(--t-body); font-weight: 600; }
.help-row > .ico { color: var(--fg-2); width: 20px; height: 20px; }
.help-row .sub { font-size: var(--t-sm); color: var(--fg-2); font-weight: 400; margin-top: 2px; line-height: 1.4; }
.about-card { display: flex; align-items: center; gap: 14px; }

/* ---------- sesja: nagłówek z manometrem ---------- */
.gauge-wrap.sess-head { flex-direction: column; align-items: center; gap: 6px; padding: 16px 16px 12px; }
.sess-head .sh-title { align-self: stretch; text-align: center; font-size: var(--t-h2); font-weight: 600; line-height: 1.3; }
.sess-head .sh-sub { display: block; font-size: var(--t-sm); font-weight: 400; color: var(--fg-2); margin-top: 2px; }
.ph-badge .ico { width: 24px; height: 24px; }

/* ---------- planer ---------- */
.pl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-tiles .tile { padding: 10px 12px; }
.pl-result { background: var(--card-2); border: 1px solid var(--line); border-radius: 18px; padding: 6px 14px 12px; }
.pl-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pl-line .caps { display: block; }
.pl-val { display: block; font-size: var(--t-s); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.pl-pct { font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; }
.ico-tile.pl-ean, .ico-tile.pl-tmx { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--gas-text); }
.ico-tile.pl-ean { background: var(--ean); }
.ico-tile.pl-tmx { background: var(--he); }
.pl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-stats > div { background: var(--card-2); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; min-width: 0; }
.pl-stats .caps { display: block; font-size: 13px; letter-spacing: .04em; line-height: 1.3; }
.pl-stats b { display: block; font-size: var(--t-h2); font-weight: 700; line-height: 1.3; }

/* ---------- ustawienia: drobne ---------- */
.rl-head .row-label .small { display: block; }
.row .row-label .small { display: block; }
.onb-kicker .ico { width: 16px; height: 16px; stroke-width: 2.5; }
.card.group > .row-btn, .card.group > .toggle-btn { border-bottom: 1px solid var(--line); }
.card.group > :last-child { border-bottom: 0; }
#set-ts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#set-ts .chip { padding: 0 10px; }
/* pod pływającym paskiem sesji — pełne tło, żeby treść nie prześwitywała między pigułką a zakładkami */
body::before { content: ''; position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) - 24px); height: calc(var(--sbar-h) + 24px); background: var(--bg); z-index: 18; pointer-events: none; }
body.overlay-open::before { display: none; }
/* arkusz przewija się jako całość — dzieci nie mogą się ściskać (inaczej wiersz „było: …” wchodzi pod przełącznik) */
.sheet > * { flex-shrink: 0; }

/* ======================================================================================
   2.0.0 — konto DivePlaner (pigułka synchronizacji, grupa KONTO) i tryb komputera
   ====================================================================================== */
.ph-right { display: flex; align-items: center; gap: 8px; flex: none; }
.sync-slot:empty { display: none; }
.sync-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 36px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--card); color: var(--fg-2); border: 1px solid var(--card-border); box-shadow: var(--sh-1); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.sync-pill .ico { width: 18px; height: 18px; }
.sync-pill[data-tone="ok"] { color: var(--brand-ink); }
.sync-pill[data-tone="busy"] { color: var(--brand-ink); background: var(--brand-soft); border-color: transparent; }
.sync-pill[data-tone="warn"] { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-line); box-shadow: none; }
.sync-pill .sp-long { display: none; }
@media (max-width: 399px) { .sync-pill { padding: 0; width: 36px; } .sync-pill .sp-short { display: none; } }
@media (min-width: 600px) { .sync-pill .sp-long { display: inline; } .sync-pill .sp-short { display: none; } }
@media (prefers-reduced-motion: no-preference) { .sync-pill[data-tone="busy"] .ico { animation: gb-sync-pulse 1.2s ease-in-out infinite; } }
@keyframes gb-sync-pulse { 50% { opacity: .35; } }
#acct-box .acct-v { white-space: normal; overflow-wrap: anywhere; font-weight: 500; }
#acct-box .row-btn .ico:last-child { width: 20px; height: 20px; color: var(--fg-2); }
.nav-brand { display: none; }
.desk-empty { display: none; }

/* ---------- 600–1023 px: jedna kolumna, max 640 px, wyśrodkowana ---------- */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .col { max-width: 640px; }
  #tabbar { left: max(0px, calc(50% - 320px)); right: max(0px, calc(50% - 320px)); }
  #session-bar { max-width: 616px; }
  #toast { max-width: 608px; }
  .overlay .sticky-bar > .inner { max-width: 608px; }
}

/* ---------- ≥ 1024 px: tryb komputera ---------- */
@media (min-width: 1024px) {
  :root { --tabbar-h: 0px; --nav-w: 104px; --left-w: 440px; --right-x: calc(var(--nav-w) + var(--left-w)); }
  body { padding-bottom: calc(var(--sbar-h) + 8px); }
  body.overlay-open { padding-bottom: 8px; }
  #app { margin-left: var(--nav-w); width: var(--left-w); }
  #app > .screen:not(.overlay) > .col { max-width: none; }
  /* lewa kolumna ma 440 px — pigułka w krótkiej formie (pełny tekst w podpowiedzi i w menu konta) */
  .sync-pill .sp-long { display: none; }
  .sync-pill .sp-short { display: inline; }
  /* boczna nawigacja zamiast dolnego paska — widoczna także przy otwartym ekranie po prawej */
  #tabbar, #tabbar[hidden] { display: flex !important; }
  #tabbar { top: var(--strip-h); bottom: 0; left: 0; right: auto; width: var(--nav-w); height: auto; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 6px;
    padding: 18px 8px 18px; border-radius: 0 24px 24px 0; border-top: 0; border-right: 1px solid var(--card-border); box-shadow: 2px 0 10px rgba(16, 40, 32, .04), 10px 0 30px rgba(16, 40, 32, .05); }
  #tabbar .tab { flex: none; min-height: 72px; border-radius: 18px; }
  #tabbar .tab:hover .tab-ico { background: var(--card-2); }
  #tabbar .tab.active:hover .tab-ico { background: var(--brand-soft); }
  #tabbar .nav-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 12px; color: var(--brand-ink); letter-spacing: .01em; }
  #tabbar .nav-brand img { width: 40px; height: 40px; border-radius: 12px; }
  #session-bar { left: calc(var(--nav-w) + 12px); right: auto; width: calc(var(--left-w) - 24px); margin: 0; bottom: 12px; }
  body::before { left: var(--nav-w); right: auto; width: var(--left-w); }
  #toast { left: calc(var(--nav-w) + 16px); right: auto; width: calc(var(--left-w) - 32px); margin: 0; bottom: calc(var(--sbar-h) + 16px); }
  body.overlay-open #toast { left: calc(var(--right-x) + 24px); right: 24px; width: auto; max-width: 560px; margin: 0 auto; bottom: 104px; }
  /* prawa kolumna: ekrany WYNIK / sesja / naklejka / dokumenty / wpis dziennika obok, nie na wierzchu */
  .overlay { left: var(--right-x); right: 0; z-index: 15; border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgba(16, 40, 32, .04); }
  .overlay .col { max-width: 640px; }
  .overlay .sticky-bar { left: var(--right-x); right: 0; }
  .overlay .sticky-bar > .inner { max-width: 608px; }
  .desk-empty { display: flex; position: fixed; left: var(--right-x); right: 0; top: var(--strip-h); bottom: 0; z-index: 1; align-items: center; justify-content: center; padding: 32px; border-left: 1px solid var(--line); }
  body.overlay-open .desk-empty { display: none; }
  .de-card { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--card-border); border-radius: 28px; box-shadow: var(--sh-1); overflow: hidden; }
  .de-card .onb-art { border-radius: 0; margin: 0; }
  .de-text { padding: 22px 26px 26px; text-align: center; }
  .de-title { font-size: var(--t-h2); font-weight: 700; line-height: 1.35; }
  .de-sub { margin-top: 6px; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.5; }
  /* arkusze (pokrętło, klawiatura, butla, potwierdzenia) jako okna dialogowe na środku */
  .sheet-wrap { justify-content: center; align-items: center; padding: 24px; }
  .sheet { border-radius: 28px; max-width: 520px; max-height: calc(100dvh - 48px); box-shadow: 0 24px 60px rgba(0, 0, 0, .22); }
  .sheet::before { display: none; }
  .sheet-head { padding-top: 18px; }
  .sheet-foot { border-radius: 0 0 28px 28px; }
  .sticky-bar { bottom: var(--sbar-h); }
}
@media (min-width: 1280px) {
  :root { --nav-w: 224px; }
  #tabbar { padding: 18px 12px; }
  #tabbar .tab { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 56px; padding: 0 8px; }
  #tabbar .tab-ico { width: 48px; height: 40px; border-radius: 14px; }
  #tabbar .tab-label { font-size: 15px; }
  #tabbar .tab-badge { left: 40px; top: 4px; }
  #tabbar .nav-brand { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 4px 8px 16px; font-size: 18px; }
}

/* Kurs gas blendera — karta kontaktu (POMOC → Kurs gas blendera) */
.doc-content .course-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px; margin: 12px 0 16px; box-shadow: 0 6px 20px rgba(19, 32, 27, .06); }
.doc-content .course-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.doc-content .course-role { color: var(--fg-2); font-size: .95rem; }
.doc-content .course-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.doc-content .course-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--brand-btn); color: var(--brand-fg); font-weight: 600; text-decoration: none; }
.doc-content .course-btn.ghost { background: var(--brand-soft); color: var(--brand-ink); }

/* ======================================================================================
   2.2.0 — wielkość interfejsu i układ (kompaktowy / wygodny)
   Zmienne ustawia scr_applyTheme(): --sp mnoży odstępy, --ch wysokości przycisków i wierszy (zawsze ≥ 44 px),
   --rk zaokrąglenia, --fig rysunki (butla, manometr). Pismo skaluje --ts (rem), duże liczby --hk/--hm/--hs.
   ====================================================================================== */
.col { padding: 0 max(12px, calc(16px * var(--sp))) calc(24px * var(--sp)); }
.stack { gap: max(8px, calc(12px * var(--sp))); }
.title-row { min-height: max(44px, calc(64px * var(--ch))); }
.topbar { min-height: max(52px, calc(64px * var(--ch))); padding: calc(8px * var(--sp)) max(12px, calc(16px * var(--sp))); }
.topbar .btn-text { min-height: max(44px, calc(48px * var(--ch))); }
.topbar-nr { height: max(44px, calc(48px * var(--ch))); }
.page-head { padding: calc(20px * var(--sp)) 0 calc(16px * var(--sp)); }
.ph-badge { height: max(44px, calc(52px * var(--ch))); min-width: max(44px, calc(52px * var(--ch))); }
.ph-badge.round { width: max(44px, calc(52px * var(--ch))); }
/* „Aa” — szybka zmiana wielkości interfejsu; pole dotyku 44 px (pseudo-element), wygląd 36 px jak pigułka konta */
.ph-aa { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--card); color: var(--fg); border: 1px solid var(--card-border); box-shadow: var(--sh-1); font-weight: 700; font-size: 15px; letter-spacing: -.02em; line-height: 1; }
.ph-aa::after, .sync-pill::after { content: ""; position: absolute; inset: -4px; }
.sync-pill { position: relative; }
.ph-aa:active { background: var(--brand-soft); }
.card { padding: max(10px, calc(16px * var(--sp))); }
.card-head { margin-bottom: max(8px, calc(14px * var(--sp))); gap: max(8px, calc(12px * var(--sp))); }
.card-title { margin-bottom: max(6px, calc(12px * var(--sp))); }
.ico-tile { width: calc(44px * var(--ch)); height: calc(44px * var(--ch)); border-radius: calc(14px * var(--rk)); }
.ico-tile.sm { width: max(28px, calc(36px * var(--ch))); height: max(28px, calc(36px * var(--ch))); border-radius: calc(12px * var(--rk)); }
.hero-card { padding: max(12px, calc(18px * var(--sp))) max(12px, calc(18px * var(--sp))) max(10px, calc(16px * var(--sp))); border-radius: calc(24px * var(--rk)); }
.hero-card .hc-foot { margin-top: max(6px, calc(12px * var(--sp))); }
.hero-card .hc-title { min-height: 44px; }
.btn-pill-white { min-height: max(44px, calc(48px * var(--ch))); }
.tile { padding: max(6px, calc(10px * var(--sp))) max(10px, calc(14px * var(--sp))); min-height: max(44px, calc(56px * var(--ch))); }
.two-col { grid-template-columns: calc(84px * var(--fig)) minmax(0, 1fr); gap: max(8px, calc(14px * var(--sp))); }
.tank-fig svg { width: calc(70px * var(--fig)); height: calc(152px * var(--fig)); }
.tank-fig.big svg { width: calc(120px * var(--fig)); height: calc(260px * var(--fig)); }
.chips { gap: max(6px, calc(8px * var(--sp))); }
.chip { min-height: max(44px, calc(48px * var(--ch))); padding: 0 max(12px, calc(18px * var(--sp))); }
.chip.small { min-height: max(44px, calc(48px * var(--ch))); padding: 0 max(10px, calc(16px * var(--sp))); }
.seg button { min-height: max(44px, calc(44px * var(--ch))); }
.seg.tall button { min-height: max(44px, calc(52px * var(--ch))); }
.btn-primary { min-height: max(48px, calc(60px * var(--ch))); }
.btn-secondary { min-height: max(44px, calc(52px * var(--ch))); }
.btn-text { min-height: max(44px, calc(48px * var(--ch))); }
.btn-danger-text { min-height: max(44px, calc(52px * var(--ch))); }
.btn-big { min-height: max(52px, calc(64px * var(--ch))); }
.sticky-bar { padding: calc(18px * var(--sp)) 0 calc(12px * var(--sp)); }
.overlay .sticky-bar { padding: calc(22px * var(--sp)) max(12px, calc(16px * var(--sp))) calc(14px * var(--sp) + env(safe-area-inset-bottom, 0px)); }
.radio-row { min-height: max(48px, calc(68px * var(--ch))); gap: max(8px, calc(12px * var(--sp))); border-radius: calc(18px * var(--rk));
  padding: max(6px, calc(10px * var(--sp))) max(10px, calc(14px * var(--sp))) max(6px, calc(10px * var(--sp))) max(8px, calc(10px * var(--sp))); }
.radio-row + .radio-row { margin-top: max(6px, calc(8px * var(--sp))); }
.radio-row .inline-tile { min-height: 44px; }
.band { padding: max(10px, calc(14px * var(--sp))) max(12px, calc(16px * var(--sp))) max(10px, calc(14px * var(--sp))) max(10px, calc(14px * var(--sp))); }
.info-line, .warn-line { padding: max(8px, calc(12px * var(--sp))) max(10px, calc(14px * var(--sp))); border-radius: calc(16px * var(--rk)); }
.step-card { padding: max(12px, calc(16px * var(--sp))); border-radius: calc(24px * var(--rk)); }
.step-title .badge, .order-row .badge { width: calc(44px * var(--ch)); height: calc(44px * var(--ch)); border-radius: calc(14px * var(--rk)); }
.step-title > .ico { width: calc(44px * var(--ch)); height: calc(44px * var(--ch)); }
.delta { margin-top: max(6px, calc(10px * var(--sp))); }
.eanx-box { padding: max(8px, calc(10px * var(--sp))) max(10px, calc(14px * var(--sp))); }
.step-row { min-height: max(48px, calc(60px * var(--ch))); padding: max(6px, calc(8px * var(--sp))) max(10px, calc(14px * var(--sp))) max(6px, calc(8px * var(--sp))) 8px; }
.btn-hold { min-height: max(52px, calc(64px * var(--ch))); }
.btn-hold .hold-ring { width: calc(48px * var(--ch)); height: calc(48px * var(--ch)); }
.wait-card { padding: max(12px, calc(18px * var(--sp))); border-radius: calc(24px * var(--rk)); }
.sess-card { min-height: max(56px, calc(80px * var(--ch))); padding: max(8px, calc(12px * var(--sp))) max(10px, calc(14px * var(--sp))) max(8px, calc(12px * var(--sp))) max(8px, calc(12px * var(--sp))); }
.log-list { gap: max(6px, calc(10px * var(--sp))); }
.log-row { min-height: max(52px, calc(72px * var(--ch))); padding: max(6px, calc(10px * var(--sp))) max(8px, calc(12px * var(--sp))); border-radius: calc(18px * var(--rk)); }
.search, .text-input { min-height: max(44px, calc(56px * var(--ch))); }
.echo { padding: calc(8px * var(--sp)) max(12px, calc(16px * var(--sp))) calc(10px * var(--sp)); }
.echo > div { padding: max(5px, calc(8px * var(--sp))) 0; }
.tape { padding: max(10px, calc(14px * var(--sp))) max(12px, calc(16px * var(--sp))); }
.group-title { padding: max(14px, calc(24px * var(--sp))) 4px max(6px, calc(10px * var(--sp))); }
.group { padding: calc(4px * var(--sp)) max(12px, calc(16px * var(--sp))); }
.row { min-height: max(48px, calc(64px * var(--ch))); padding: max(6px, calc(10px * var(--sp))) 0; }
.row-btn, .toggle-btn { min-height: max(48px, calc(64px * var(--ch))); }
.row.col-row { padding: max(10px, calc(14px * var(--sp))) 0; }
.order-row { min-height: max(52px, calc(68px * var(--ch))); grid-template-columns: 22px auto minmax(0, 1fr) auto auto; }
.order-row .arrow { width: max(44px, calc(48px * var(--ch))); height: max(44px, calc(48px * var(--ch))); }
.del-btn { min-height: max(44px, calc(48px * var(--ch))); }
details.gloss summary { min-height: max(44px, calc(56px * var(--ch))); }
.help-row { min-height: max(56px, calc(76px * var(--ch))); padding: max(8px, calc(12px * var(--sp))) max(10px, calc(14px * var(--sp))) max(8px, calc(12px * var(--sp))) max(8px, calc(12px * var(--sp))); }
.sheet-head { min-height: max(52px, calc(64px * var(--ch))); padding: calc(22px * var(--sp)) 12px 2px max(14px, calc(20px * var(--sp))); }
.sheet-sub { padding: 0 max(14px, calc(20px * var(--sp))) 8px; }
.sheet-body { padding: calc(4px * var(--sp)) max(14px, calc(20px * var(--sp))) max(10px, calc(14px * var(--sp))); gap: max(8px, calc(12px * var(--sp))); }
.sheet-foot { padding: max(8px, calc(12px * var(--sp))) max(14px, calc(20px * var(--sp))) calc(max(10px, 14px * var(--sp)) + env(safe-area-inset-bottom, 0px)); }
.keypad-input { min-height: max(56px, calc(84px * var(--ch))); }
.stepper { min-height: max(44px, calc(56px * var(--ch))); }
.nr-input { min-height: max(52px, calc(68px * var(--ch))); }
.check-row { min-height: max(44px, calc(56px * var(--ch))); }
.check-big { min-height: max(44px, calc(56px * var(--ch))); padding: max(10px, calc(14px * var(--sp))) max(12px, calc(16px * var(--sp))); }
.modal { gap: max(10px, calc(14px * var(--sp))); }
.onb-art { height: calc(200px * var(--fig)); }
.gauge-wrap { padding: max(10px, calc(16px * var(--sp))) 12px max(8px, calc(10px * var(--sp))); }
.gauge-wrap svg { width: calc(240px * var(--fig)); height: calc(144px * var(--fig)); }
.pl-result { padding: calc(6px * var(--sp)) max(10px, calc(14px * var(--sp))) max(8px, calc(12px * var(--sp))); }
.pl-line { padding: max(6px, calc(10px * var(--sp))) 0; }
.pl-stats > div { padding: max(6px, calc(10px * var(--sp))) max(8px, calc(12px * var(--sp))); }
.write-nr .wn-card { padding: max(14px, calc(22px * var(--sp))) 16px max(12px, calc(18px * var(--sp))); }
#session-bar { min-height: max(44px, calc(52px * var(--ch))); }
@media (max-width: 1023.98px) {
  #tabbar .tab { min-height: max(48px, calc(60px * var(--ch))); }
  #tabbar .tab-ico { height: max(26px, calc(32px * var(--ch))); }
  #tabbar .tab-label { font-size: max(12px, calc(13px * var(--ui))); }
}
@media (max-width: 374px) {
  .col { padding-left: max(10px, calc(14px * var(--sp))); padding-right: max(10px, calc(14px * var(--sp))); }
  .card { padding: max(10px, calc(14px * var(--sp))); }
  .two-col { grid-template-columns: calc(74px * var(--fig)) minmax(0, 1fr); gap: max(8px, calc(10px * var(--sp))); }
  .tank-fig svg { width: calc(60px * var(--fig)); height: calc(130px * var(--fig)); }
  .order-row { grid-template-columns: 18px auto minmax(0, 1fr) auto auto; gap: 6px; }
}

/* numer wersji — mały, szary (kontrast ≥ 4,5:1 w obu motywach), na dole zakładek i bocznej nawigacji */
.ver-foot { text-align: center; font-size: 12px; line-height: 1.4; color: var(--fg-2); padding: max(8px, calc(12px * var(--sp))) 0 4px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.nav-ver { display: none; }
@media (min-width: 1024px) {
  #tabbar .nav-ver { display: block; margin-top: auto; padding: 10px 0 0; text-align: center; font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
}

/* wielkość interfejsu — wybór w arkuszu „Aa” i w USTAWIENIA */
.ui-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ui-sizes .chip { padding: 0 8px; white-space: normal; text-align: center; line-height: 1.15; }

/* ---------- PLANER: tryb rekreacyjny / pro ---------- */
.pl-tabs button { font-weight: 600; }
.pl-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-inputs.one { grid-template-columns: minmax(0, 1fr); }
.pl-big { margin-top: max(10px, calc(14px * var(--sp))); text-align: center; background: var(--brand-soft); border-radius: var(--radius); padding: max(12px, calc(18px * var(--sp))) 12px max(12px, calc(16px * var(--sp))); }
.pl-big .caps { color: var(--brand-ink); }
.pl-big-val { font-size: var(--t-xl); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--fg); margin-top: 4px; overflow-wrap: anywhere; }
.pl-big-val .unit { font-size: max(.42em, 13px); }
.pl-big-sub { font-size: var(--t-sm); color: var(--fg-2); margin-top: 6px; line-height: 1.45; }
.pl-big-sub b { color: var(--fg); font-weight: 600; }
.pl-note { font-size: var(--t-sm); color: var(--fg-2); text-align: center; line-height: 1.45; }

/* ---------- druk etykiety ---------- */
.seg.wrap button { white-space: normal; line-height: 1.2; padding: 4px 10px; }
.lbl-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lbl-size { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; text-align: left; min-height: max(52px, calc(60px * var(--ch))); padding: 8px 12px; border-radius: calc(16px * var(--rk)); border: 1.5px solid var(--line); background: var(--card-2); color: var(--fg); }
.lbl-size b { font-size: var(--t-body); font-weight: 700; white-space: nowrap; }
.lbl-size small { font-size: max(12px, .8125rem); color: var(--fg-2); line-height: 1.3; overflow-wrap: anywhere; }
.lbl-size.sel { border-color: var(--brand); background: var(--brand-soft); }
.lbl-size.sel small { color: var(--brand-ink); }
.lbl-rot { margin-top: 8px; gap: 12px; }
.lbl-rot .row-label .small { display: block; }
.lbl-prev-wrap { display: flex; justify-content: center; align-items: center; padding: 16px 12px; background: var(--card-2); border: 1px dashed var(--line); border-radius: calc(16px * var(--rk)); }
.lbl-prev { display: block; max-width: 100%; height: auto; background: #FFFFFF; border-radius: 4px; outline: 1px solid #C9D3CF; box-shadow: 0 6px 16px -8px rgba(16, 40, 32, .35); image-rendering: pixelated; }
.lbl-prev:not([src]) { width: 60%; aspect-ratio: 10 / 3; }
/* ekran NAKLEJKA jest biały w obu motywach — jasne tokeny także dla kart i przycisków w środku */
.label-screen { color-scheme: light; --bg: #F3F6F5; --card: #FFFFFF; --card-2: #F7FAF9; --track: #E8EEEC; --line: #E3EAE7; --fg: #13201B; --fg-2: #5E6E68;
  --brand: #1E9E78; --brand-strong: #13805F; --brand-ink: #0F7556; --brand-soft: #E3F4EE; --brand-soft-2: #D3EDE3; --brand-fg: #FFFFFF;
  --brand-btn: linear-gradient(180deg, #16855F 0%, #13805F 100%); --sh-brand: 0 10px 22px -8px rgba(15, 106, 79, .55); --card-border: #E3EAE7;
  --warn-bg: #FFF4DE; --warn-fg: #7A4B00; --warn-line: #F6DFAE; --info-bg: #E6F0F6; --info-fg: #1F4A66; --info-tile: #CFE2EE; --amber: #A84D07;
  --sh-1: 0 1px 2px rgba(16, 40, 32, .04), 0 6px 18px rgba(16, 40, 32, .06); }
/* druk na zwykłej drukarce: tylko etykieta w skali 1:1 */
#print-root { display: none; }
@media print {
  body.print-label { padding: 0 !important; background: #FFFFFF !important; }
  body.print-label::before { display: none !important; }
  body.print-label > *:not(#print-root) { display: none !important; }
  body.print-label { min-height: 0 !important; }
  /* jedna strona = etykieta: obraz wypełnia stronę (bez drugiej, pustej strony przez zaokrąglenia) */
  body.print-label #print-root { display: block !important; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
  #print-root img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; image-rendering: pixelated; }
}
/* własne rozmiary etykiet */
.lbl-size.custom { flex-direction: row; align-items: stretch; padding: 0; gap: 0; }
.lbl-pick { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; padding: 8px 4px 8px 12px; color: inherit; }
.lbl-pick b { overflow-wrap: anywhere; white-space: normal; }
.lbl-del { flex: none; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--stop-ink); border-radius: 0 calc(16px * var(--rk)) calc(16px * var(--rk)) 0; }
.lbl-del .ico { width: 20px; height: 20px; }
.lbl-size.add { border-style: dashed; background: transparent; }
.lbl-size.add b { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-ink); white-space: normal; }
.lbl-size.add b .ico { width: 20px; height: 20px; }
.lbl-dims { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 8px; align-items: end; }
.lbl-dim { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lbl-dim .text-input { text-align: center; font-weight: 700; font-size: var(--t-h2); }
.lbl-swap { width: 44px; height: 44px; margin-bottom: max(0px, calc((56px * var(--ch) - 44px) / 2)); border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-size: 20px; font-weight: 700; }
.text-input.bad { border-color: var(--stop-bg); }