/* ==========================================================================
   HOBB App UI Kit: odtworzone ekrany aplikacji na stronach funkcji
   --------------------------------------------------------------------------
   Zasady (pełny opis: docs/feature-landing-kit.md):
   1. Wymiary piszemy w pikselach 1:1 z Figmy (ekran telefonu = 375 × 812).
      Skalę ustawia strona przez --app-zoom na elemencie z klasą .app-ui.
   2. Ekrany aplikacji zawsze w jasnym motywie, niezależnie od motywu strony.
   3. Każdy korzeń odtworzonego UI ma klasę .app-ui (tokeny + reset).
   4. Ikony Phosphor nigdy nie dostają display: grid/flex. Centrujemy wrapper
      (.app-ico), bo duotone rysuje dwie warstwy (::before + ::after).
   5. Stany komponentów: modyfikatory .is-* i atrybuty ARIA, bez zależności
      od klas strony. JS strony przełącza te stany.
   Źródło ekranów: Figma „HOBB - Screenshots - Mockups” (Blls4qqbt8mfX0c4GLCSx9).
   ========================================================================== */

/* @hobb-tokens:start */
/* Wygenerowane przez tools/landing-gen/kit/build_tokens.py z Figmy 01 — nie edytuj ręcznie. */
.app-ui, .hobb-kit {
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --color-theme-neutral-50: #f3f3f7;
  --color-theme-primary-50: #f5effe;
  --color-theme-primary-100: #efe8ff;
  --color-theme-primary-200: #dfd5ff;
  --color-theme-primary-300: #c8b2ff;
  --color-theme-primary-400: #ad87fe;
  --color-theme-primary-500: #975ff3;
  --color-theme-primary-600: #752ed1;
  --color-theme-primary-700: #622e9e;
  --color-theme-primary-800: #4e267e;
  --color-theme-primary-900: #300e58;
  --color-theme-primary-950: #240949;
  --color-theme-neutral-100: #eaecf1;
  --color-theme-neutral-200: #e2e0e5;
  --color-theme-neutral-300: #d5d3d9;
  --color-theme-neutral-400: #a6a5ac;
  --color-theme-neutral-500: #7c7a85;
  --color-theme-neutral-600: #64616b;
  --color-theme-neutral-700: #524e56;
  --color-theme-neutral-800: #3d3a40;
  --color-theme-neutral-900: #232225;
  --color-theme-neutral-950: #141316;
  --color-theme-secondary-50: #eafaf2;
  --color-theme-secondary-100: #d5f6e5;
  --color-theme-secondary-200: #abedcb;
  --color-theme-secondary-300: #82e3b1;
  --color-theme-secondary-400: #58da97;
  --color-theme-secondary-500: #2ed17d;
  --color-theme-secondary-600: #25a764;
  --color-theme-secondary-700: #1c7d4b;
  --color-theme-secondary-800: #125432;
  --color-theme-secondary-900: #092a19;
  --color-theme-secondary-950: #061d11;
  --color-theme-tr-background-0: rgba(255,255,255,0);
  --color-theme-tr-background-4: rgba(255,255,255,0.04);
  --color-theme-tr-background-8: rgba(255,255,255,0.08);
  --color-theme-tr-background-16: rgba(255,255,255,0.16);
  --color-theme-tr-background-24: rgba(255,255,255,0.24);
  --color-theme-tr-background-32: rgba(255,255,255,0.32);
  --color-theme-tr-background-50: rgba(255,255,255,0.5);
  --color-theme-tr-background-80: rgba(255,255,255,0.8);
  --color-theme-tr-foreground-0: rgba(20,19,22,0);
  --color-theme-tr-foreground-4: rgba(20,19,22,0.04);
  --color-theme-tr-foreground-8: rgba(20,19,22,0.08);
  --color-theme-tr-foreground-16: rgba(20,19,22,0.16);
  --color-theme-tr-foreground-24: rgba(20,19,22,0.24);
  --color-theme-tr-foreground-32: rgba(20,19,22,0.32);
  --color-theme-tr-foreground-50: rgba(20,19,22,0.5);
  --color-theme-tr-foreground-80: rgba(20,19,22,0.8);
  --color-theme-accent: #c5985a;
  --color-theme-accent_bg: #fbefda;
  --color-theme-accent_border: #fce8c6;
  --color-theme-success: #12b493;
  --color-theme-success_bg: #eafaf6;
  --color-theme-success_border: #70d8be;
  --color-theme-warning: #cc7217;
  --color-theme-warning_bg: #fdf9f2;
  --color-theme-warning_border: #f2e6d0;
  --color-theme-error: #f20f47;
  --color-theme-error_bg: #fef2f3;
  --color-theme-error_border: #fbd0d6;
  --color-theme-info: #3a66d6;
  --color-theme-info_bg: #edf3fc;
  --color-theme-info_border: #b7d5ff;
  --color-theme-black: #000000;
  --color-theme-rarity_legendary: #c79145;
  --color-theme-rarity_epic: #7d4ffb;
  --color-theme-rarity_rare: #449fff;
  --color-theme-rarity_uncommon: #53c65c;
  --color-theme-rarity_common: #a7a3b6;
  --color-theme-white: #ffffff;
  --color-theme-bg: #f3f3f7;
  --color-theme-foreground: #141316;
  --color-theme-mid_gray: #7c7a85;
  --color-theme-primary: #975ff3;
  --color-theme-secondary: #1c7d4b;
  --color-theme-borders: rgba(20,19,22,0.08);
  --color-theme-contrast_foreground: #000000;
  --color-theme-contrast_background: #ffffff;
  --color-theme-ai_functions: #8fb634;
  --gamification-leaderboard-gold: #dfb844;
  --gamification-leaderboard-silver: #a6a5ac;
  --gamification-leaderboard-bronze: #8f5b48;
  --gamification-rank-5: #ffdb9e;
  --gamification-rank-6: #7686ff;
  --gamification-rank-7: #b296fa;
  --gamification-rank-4: #ffbfc4;
  --gamification-rank-3: #ffe8a2;
  --gamification-rank-2: #a4f3d8;
  --gamification-rank-1: #c2fdd5;
  --padding-default: 16px;
  --padding-device: 16px;
  --padding-none: 0px;
  --padding-p-xs: 2px;
  --padding-p-sm: 4px;
  --padding-p-md: 6px;
  --padding-p-lg: 8px;
  --padding-p-xl: 12px;
  --padding-p-2xl: 16px;
  --padding-p-3xl: 24px;
  --padding-p-4xl: 32px;
  --padding-p-5xl: 48px;
  --padding-p-6xl: 64px;
  --padding-p-7xl: 80px;
  --radius-radius-inputs-buttons: 8px;
  --radius-rounded-full: 9999px;
  --radius-rounded-none: 0px;
  --radius-rounded-xs: 2px;
  --radius-rounded-sm: 4px;
  --radius-rounded-lg: 8px;
  --radius-rounded-xl: 12px;
  --radius-rounded-2xl: 16px;
  --radius-rounded-3xl: 24px;
  --radius-rounded-4xl: 32px;
  --radius-rounded-5xl: 48px;
  --radius-rounded-6xl: 64px;
  --shadows-card-shadow: 0px 8px 16px -32px rgba(20,19,22,0.04), 0px 1px 4px -8px rgba(20,19,22,0.04);
  --shadows-card-shadow-big: 0px 20px 20px -16px rgba(86,78,230,0.16);
  --shadows-card-shadow-medium: 0px 8px 16px -32px rgba(20,19,22,0.1), 0px 3px 4px -8px rgba(20,19,22,0.12);
  --shadows-sharp-shadow-xxs: 0px 1px 1.41px 0px rgba(0,0,0,0.2);
  --shadows-avatar-shadow: 0px 12px 24px -24px rgba(153,81,245,0.12), 0px 4px 12px -8px rgba(20,19,22,0.16);
  --shadows-purple-accent-shadow: 0px 24px 32px -16px rgba(86,78,230,0.32), 0px 8px 16px -4px rgba(0,0,0,0.25);
  --blur-bg-blur-8px: blur(8px);
  --blur-background-blur-mid: blur(20px);
  --shadows-hobb-plus-icons: 0px 4px 6px -2px rgba(20,19,22,0.12);
  --shadows-action-sheet-top-shadow: 0px -12px 16px -8px rgba(20,19,22,0.06), 0px -2px 4px -2px rgba(20,19,22,0.04);
  --shadows-plant-overlay-shadows: 4px 15px 12px 0px rgba(60,19,113,0.06), 5px -4px 4px 0px rgba(132,45,243,0.09);
}
.app-ui[data-theme="dark"], .hobb-kit[data-theme="dark"] {
  --color-theme-neutral-50: #141316;
  --color-theme-primary-50: #240949;
  --color-theme-primary-100: #300e58;
  --color-theme-primary-200: #4e267e;
  --color-theme-primary-300: #622e9e;
  --color-theme-primary-400: #752ed1;
  --color-theme-primary-600: #ad87fe;
  --color-theme-primary-700: #c8b2ff;
  --color-theme-primary-800: #dfd5ff;
  --color-theme-primary-900: #efe8ff;
  --color-theme-primary-950: #f5effe;
  --color-theme-neutral-100: #232225;
  --color-theme-neutral-200: #3d3a40;
  --color-theme-neutral-300: #524e56;
  --color-theme-neutral-400: #64616b;
  --color-theme-neutral-600: #a6a5ac;
  --color-theme-neutral-700: #d0ced4;
  --color-theme-neutral-800: #eae9ec;
  --color-theme-neutral-900: #f3f3f7;
  --color-theme-neutral-950: #f6f7f9;
  --color-theme-secondary-50: #061d11;
  --color-theme-secondary-100: #092a19;
  --color-theme-secondary-200: #125432;
  --color-theme-secondary-300: #1c7d4b;
  --color-theme-secondary-400: #25a764;
  --color-theme-secondary-600: #58da97;
  --color-theme-secondary-700: #82e3b1;
  --color-theme-secondary-800: #abedcb;
  --color-theme-secondary-900: #d5f6e5;
  --color-theme-secondary-950: #eafaf2;
  --color-theme-tr-background-0: rgba(0,0,0,0);
  --color-theme-tr-background-4: rgba(0,0,0,0.04);
  --color-theme-tr-background-8: rgba(0,0,0,0.08);
  --color-theme-tr-background-16: rgba(0,0,0,0.16);
  --color-theme-tr-background-24: rgba(0,0,0,0.24);
  --color-theme-tr-background-32: rgba(0,0,0,0.32);
  --color-theme-tr-background-50: rgba(0,0,0,0.5);
  --color-theme-tr-background-80: rgba(0,0,0,0.8);
  --color-theme-tr-foreground-0: rgba(255,255,255,0);
  --color-theme-tr-foreground-4: rgba(255,255,255,0.04);
  --color-theme-tr-foreground-8: rgba(255,255,255,0.08);
  --color-theme-tr-foreground-16: rgba(255,255,255,0.16);
  --color-theme-tr-foreground-24: rgba(255,255,255,0.24);
  --color-theme-tr-foreground-32: rgba(255,255,255,0.32);
  --color-theme-tr-foreground-50: rgba(255,255,255,0.5);
  --color-theme-tr-foreground-80: rgba(255,255,255,0.8);
  --color-theme-accent: #e5be88;
  --color-theme-accent_bg: #27211b;
  --color-theme-accent_border: #5c5044;
  --color-theme-success: #36e2bf;
  --color-theme-success_bg: #06382d;
  --color-theme-success_border: #0b6f5b;
  --color-theme-warning: #f7a450;
  --color-theme-warning_bg: #371f06;
  --color-theme-warning_border: #6e3d0c;
  --color-theme-error: #fc5e86;
  --color-theme-error_bg: #3a0311;
  --color-theme-error_border: #740622;
  --color-theme-info: #6d93f4;
  --color-theme-info_bg: #071d37;
  --color-theme-info_border: #0e386c;
  --color-theme-rarity_legendary: #e9ac56;
  --color-theme-rarity_epic: #aa8bff;
  --color-theme-bg: #000000;
  --color-theme-foreground: #f6f7f9;
  --color-theme-mid_gray: #a6a5ac;
  --color-theme-secondary: #82e3b1;
  --color-theme-borders: rgba(255,255,255,0.16);
  --color-theme-contrast_foreground: #ffffff;
  --color-theme-contrast_background: #232225;
}
.app-ui .heading-sm, .hobb-kit .heading-sm { font: 700 14px/24px var(--font-display); }
.app-ui .heading-base, .hobb-kit .heading-base { font: 700 16px/24px var(--font-display); }
.app-ui .heading-lg, .hobb-kit .heading-lg { font: 700 18px/24px var(--font-display); }
.app-ui .heading-xl, .hobb-kit .heading-xl { font: 700 20px/30px var(--font-display); }
.app-ui .heading-2xl, .hobb-kit .heading-2xl { font: 700 24px/30px var(--font-display); }
.app-ui .heading-3xl, .hobb-kit .heading-3xl { font: 700 30px/36px var(--font-display); }
.app-ui .text-lg-prim, .hobb-kit .text-lg-prim { font: 400 18px/30px var(--font-body); }
.app-ui .text-md-prim, .hobb-kit .text-md-prim { font: 400 16px/24px var(--font-body); }
.app-ui .text-base-prim-bold, .hobb-kit .text-base-prim-bold { font: 600 16px/24px var(--font-body); }
.app-ui .text-sm-prim, .hobb-kit .text-sm-prim { font: 400 14px/24px var(--font-body); }
.app-ui .text-sm-prim-bold, .hobb-kit .text-sm-prim-bold { font: 600 14px/24px var(--font-body); }
.app-ui .text-xs-prim, .hobb-kit .text-xs-prim { font: 400 12px/20px var(--font-body); }
.app-ui .text-xs-prim-bold, .hobb-kit .text-xs-prim-bold { font: 700 12px/20px var(--font-body); }
.app-ui .text-2xs-prim, .hobb-kit .text-2xs-prim { font: 400 10px/16px var(--font-body); }
.app-ui .text-2xs-prim-bold, .hobb-kit .text-2xs-prim-bold { font: 600 10px/16px var(--font-body); }
.app-ui .text-xl-sec, .hobb-kit .text-xl-sec { font: 400 20px/30px var(--font-display); }
.app-ui .text-xl-sec-bold, .hobb-kit .text-xl-sec-bold { font: 500 20px/30px var(--font-display); }
.app-ui .text-base-sec, .hobb-kit .text-base-sec { font: 400 16px/24px var(--font-display); }
.app-ui .text-base-sec-bold, .hobb-kit .text-base-sec-bold { font: 700 16px/24px var(--font-display); }
.app-ui .text-sm-sec, .hobb-kit .text-sm-sec { font: 400 14px/24px var(--font-display); }
.app-ui .text-sm-sec-bold, .hobb-kit .text-sm-sec-bold { font: 700 14px/24px var(--font-display); }
.app-ui .text-xs-sec, .hobb-kit .text-xs-sec { font: 400 12px/20px var(--font-display); }
.app-ui .text-xs-sec-bold, .hobb-kit .text-xs-sec-bold { font: 700 12px/20px var(--font-display); }
.app-ui .text-2xs-sec, .hobb-kit .text-2xs-sec { font: 400 10px/16px var(--font-display); }
.app-ui .text-2xs-sec-bold, .hobb-kit .text-2xs-sec-bold { font: 500 10px/16px var(--font-display); }
.app-ui .link-md, .hobb-kit .link-md { font: 500 16px/24px var(--font-display); }
.app-ui .link-sm, .hobb-kit .link-sm { font: 500 14px/24px var(--font-display); }
.app-ui .link-xs, .hobb-kit .link-xs { font: 500 12px/20px var(--font-display); }
.app-ui .sec-14-14, .hobb-kit .sec-14-14 { font: 500 14px/100% var(--font-display); }
.app-ui .sec-12-12, .hobb-kit .sec-12-12 { font: 500 12px/100% var(--font-display); }
.app-ui .sec-10-10, .hobb-kit .sec-10-10 { font: 700 10px/100% var(--font-display); }
.app-ui .bottom-menu-9, .hobb-kit .bottom-menu-9 { font: 500 9px/16px var(--font-display); }
.app-ui .markdown-h1, .hobb-kit .markdown-h1 { font: 700 20px/24px var(--font-display); }
.app-ui .markdown-h2, .hobb-kit .markdown-h2 { font: 700 18px/24px var(--font-display); }
.app-ui .markdown-h3, .hobb-kit .markdown-h3 { font: 700 16px/24px var(--font-display); }
.app-ui .markdown-p-body-normal-16px, .hobb-kit .markdown-p-body-normal-16px { font: 400 16px/24px var(--font-body); }
.app-ui .markdown-p-body-small-14px, .hobb-kit .markdown-p-body-small-14px { font: 400 14px/24px var(--font-body); }
.app-ui .subheading-sm, .hobb-kit .subheading-sm { font: 500 12px/20px var(--font-body); letter-spacing: 0.2px; text-transform: uppercase; }
.app-ui .link-xxs, .hobb-kit .link-xxs { font: 500 10px/16px var(--font-display); }
.app-ui .markdown-quote, .hobb-kit .markdown-quote { font: italic 400 16px/24px var(--font-body); }
/* @hobb-tokens:end */

.app-ui {
  /* Tokeny 1:1 ze zmiennych Figmy (color-theme/*) */
  --app-bg: var(--color-theme-bg);                 /* color-theme/bg */
  --app-surface: var(--color-theme-contrast_background);
  --app-ink: var(--color-theme-foreground);
  --app-subtle: #4a4750;
  --app-muted: var(--color-theme-mid_gray);              /* color-theme/mid_gray */
  --app-neutral-200: var(--color-theme-neutral-200);
  --app-line: var(--color-theme-borders);
  --app-fill: #efeef2;
  --app-fill-2: #e6e4ea;
  --app-lavender: var(--color-theme-primary-50);           /* primary-50 */
  --app-lavender-ink: #8f5cf0;
  --app-mint: var(--color-theme-secondary-100);               /* secondary-100 */
  --app-mint-200: var(--color-theme-secondary-200);           /* secondary-200 */
  --app-primary: var(--color-theme-primary);            /* color-theme/primary */
  --app-high: var(--color-theme-secondary);               /* secondary */
  --app-high-bg: var(--color-theme-secondary-100);
  --app-mid: var(--color-theme-warning);                /* warning */
  --app-low: var(--color-theme-error);                /* error */
  --app-warn-bg: #fcf9f2;
  --app-warn-line: #f6e7d7;
  --app-scan: #77e71e;
  --app-scan-2: #2ed17d;
  --app-r-xl: 22px;
  --app-r-lg: var(--radius-rounded-2xl);
  --app-r: var(--radius-rounded-xl);
  --app-r-sm: var(--radius-rounded-lg);
  --app-font: "Inter", system-ui, sans-serif;
  --app-display: "Space Grotesk", "Inter", sans-serif;
  --app-shadow: 0 30px 60px -30px rgba(40, 30, 60, .35), 0 2px 6px rgba(20, 19, 22, .04);
  --app-shadow-card: 0 1px 2px rgba(20, 19, 22, .04), 0 8px 8px rgba(20, 19, 22, .04);
  /* Gradienty z Figmy. Subtelne, ale obowiązkowe: bez nich ekran wygląda płasko */
  --app-grad-surface: linear-gradient(180deg, var(--app-bg) 0%, #fff 100%);                              /* neutral-gradients/vert-bg-contrast_bg */
  --app-grad-detail: linear-gradient(180deg, var(--app-bg) 0%, var(--app-lavender) 80%, var(--app-mint) 100%); /* nagłówek profilu rośliny */
  --app-grad-success: linear-gradient(180deg, var(--app-bg) 0%, var(--app-lavender) 50%, var(--app-mint-200) 100%); /* theme-gradients/vert-bg-prim50-sec200 */
  --app-ease: cubic-bezier(.2, .7, .2, 1);
  zoom: var(--app-zoom, 1);
  color-scheme: light;
  color: var(--app-ink);
  font: 400 14px/1.35 var(--app-font);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.app-ui *, .app-ui *::before, .app-ui *::after { box-sizing: border-box; }
/* Specyficzność (0,1,0): wygrywa z bazą strony (:where(.fx-main) p), a przegrywa z klasami komponentów niżej */
.app-ui :where(p, h1, h2, h3, h4, ul, ol, li, figure) { margin: 0; padding: 0; color: inherit; font: inherit; list-style: none; }
.app-ui :where(button) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.app-ui :where(input, textarea) { font: inherit; color: inherit; }
.app-ui img { display: block; max-width: none; }
.app-ui .ph, .app-ui .ph-duotone, .app-ui .ph-fill { display: inline-block; line-height: 1; white-space: nowrap; }
.app-ui button:focus-visible, .app-ui input:is([type="checkbox"], [type="radio"], [type="range"]):focus-visible, .app-ui [tabindex]:focus-visible { outline: 2px solid var(--app-lavender-ink); outline-offset: 2px; }
/* Aktywne pole tekstowe: bez obrysu dookoła, przyciemnia się tylko dolna krawędź */
.app-ui :is(input, textarea, [contenteditable]):focus-visible { outline: none; }

/* Wrapper ikony: to on się centruje, nie <i> */
.app-ico { display: inline-grid; place-items: center; flex: none; line-height: 1; }

/* ── Ramki ─────────────────────────────────────────────────────────────── */
/* Pływające okno wycięte z ekranu (hero, kafelki) */
.app-window { overflow: hidden; border: 1px solid var(--app-line); border-radius: var(--app-r-xl); background: var(--app-surface); box-shadow: var(--app-shadow); }

/* Ramka o proporcjach ekranu iPhone'a (375 × 812). Treść przewija się w środku. */
.app-phone { position: relative; width: 375px; height: 812px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 44px; background: var(--app-bg); box-shadow: var(--app-shadow), 0 0 0 8px rgba(255, 255, 255, .55); }
/* STATUSBAR:START (generuje tools/build_statusbar_css.py z assets/icons/statusbar/, nie edytuj ręcznie) */
/* Status bar 1:1 z oficjalnych zestawów: iOS 27 (iPhone 17 Pro) i Android (punch hole).
   Przezroczysty, więc widać tło ekranu. --app-sb to górna bezpieczna strefa: ekrany i przyklejone nagłówki liczą od niej.
   Wyspa i otwór na kamerę to sprzęt (.app-phone::before), nie część zrzutu ekranu. Android: klasa .is-android na telefonie. */
.app-phone { --app-sb: 62px; }
.app-phone.is-android { --app-sb: 40px; }
.app-status { position: absolute; z-index: 5; inset: 0 0 auto; height: var(--app-sb); background: transparent; color: #000; pointer-events: none; transition: background .25s ease; }
.app-status > * { display: none !important; }
.app-status::before, .app-status::after { content: ""; position: absolute; background: currentColor; -webkit-mask: var(--app-sb-m) center / 100% 100% no-repeat; mask: var(--app-sb-m) center / 100% 100% no-repeat; }
.app-status::before { --app-sb-m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2237%22 height=%2222%22 viewBox=%2252.3 21.2 37 22%22%3E%3Cpath d=%22M58.0166 25.8896C57.1589 25.8896 56.3924 26.0723 55.7173 26.4375C55.0477 26.7972 54.522 27.2952 54.1401 27.9316C53.7638 28.5625 53.5757 29.2847 53.5757 30.0981V30.1147C53.5757 30.8674 53.7417 31.5425 54.0737 32.1401C54.4113 32.7378 54.8734 33.2082 55.46 33.5513C56.0465 33.8944 56.7217 34.0659 57.4854 34.0659C58.0387 34.0659 58.5202 33.9829 58.9297 33.8169C59.3447 33.6509 59.6934 33.4323 59.9756 33.1611C60.2578 32.89 60.4709 32.5967 60.6147 32.2812H60.9053V30.0732H60.4072V30.0898C60.4072 30.5381 60.3021 30.9393 60.0918 31.2935C59.8815 31.6476 59.5965 31.9243 59.2368 32.1235C58.8771 32.3228 58.4704 32.4224 58.0166 32.4224C57.5628 32.4224 57.1589 32.32 56.8047 32.1152C56.4505 31.9105 56.1711 31.631 55.9663 31.2769C55.7616 30.9172 55.6592 30.5049 55.6592 30.04V30.0234C55.6592 29.5752 55.7671 29.1712 55.9829 28.8115C56.1987 28.4463 56.4865 28.1585 56.8462 27.9482C57.2059 27.738 57.6016 27.6328 58.0332 27.6328C58.4814 27.6328 58.8826 27.7407 59.2368 27.9565C59.5965 28.1724 59.8815 28.4657 60.0918 28.8364C60.3021 29.2072 60.4072 29.6195 60.4072 30.0732L60.7808 32.0737C60.7808 32.1512 60.7808 32.2314 60.7808 32.3145C60.7808 32.3919 60.778 32.4722 60.7725 32.5552C60.7448 33.3188 60.6286 34.0161 60.4238 34.647C60.2246 35.2723 59.923 35.7731 59.519 36.1494C59.1206 36.5202 58.606 36.7056 57.9751 36.7056C57.6265 36.7056 57.311 36.6502 57.0288 36.5396C56.7521 36.4233 56.5142 36.2601 56.3149 36.0498C56.1213 35.8395 55.9718 35.596 55.8667 35.3193L55.8335 35.2363H53.7334L53.75 35.3276C53.8828 35.9364 54.1401 36.4787 54.522 36.9546C54.9093 37.425 55.3963 37.7957 55.9829 38.0669C56.575 38.3325 57.2391 38.4653 57.9751 38.4653C58.9767 38.4653 59.8372 38.2108 60.5566 37.7017C61.2816 37.187 61.8377 36.451 62.2251 35.4937C62.6125 34.5363 62.8062 33.3853 62.8062 32.0405V32.0239C62.8062 30.9393 62.6789 30.0124 62.4243 29.2432C62.1698 28.4684 61.8184 27.8348 61.3701 27.3423C60.9274 26.8442 60.4183 26.479 59.8428 26.2466C59.2673 26.0086 58.6585 25.8896 58.0166 25.8896ZM66.5747 36.5562C66.9565 36.5562 67.272 36.4316 67.521 36.1826C67.77 35.9281 67.8945 35.6182 67.8945 35.2529C67.8945 34.8822 67.77 34.5723 67.521 34.3232C67.272 34.0687 66.9565 33.9414 66.5747 33.9414C66.1984 33.9414 65.883 34.0687 65.6284 34.3232C65.3794 34.5723 65.2549 34.8822 65.2549 35.2529C65.2549 35.6182 65.3794 35.9281 65.6284 36.1826C65.883 36.4316 66.1984 36.5562 66.5747 36.5562ZM66.5747 30.397C66.9565 30.397 67.272 30.2725 67.521 30.0234C67.77 29.7689 67.8945 29.459 67.8945 29.0938C67.8945 28.723 67.77 28.4131 67.521 28.1641C67.272 27.9095 66.9565 27.7822 66.5747 27.7822C66.1984 27.7822 65.883 27.9095 65.6284 28.1641C65.3794 28.4131 65.2549 28.723 65.2549 29.0938C65.2549 29.459 65.3794 29.7689 65.6284 30.0234C65.883 30.2725 66.1984 30.397 66.5747 30.397ZM76.1538 38.1665H78.1958V35.8672H79.8145V34.0991H78.1958V26.1885H75.1826C74.8506 26.681 74.5186 27.1873 74.1865 27.7075C73.86 28.2222 73.5308 28.7451 73.1987 29.2764C72.8722 29.8021 72.543 30.3361 72.2109 30.8784C71.8844 31.4152 71.5607 31.9548 71.2397 32.4971C70.9243 33.0394 70.6089 33.5789 70.2935 34.1157V35.8672H76.1538V38.1665ZM72.2856 34.1489V34.0244C72.5181 33.6149 72.7588 33.2026 73.0078 32.7876C73.2568 32.367 73.5086 31.9492 73.7632 31.5342C74.0177 31.1136 74.2751 30.6958 74.5352 30.2808C74.7952 29.8657 75.0526 29.459 75.3071 29.0605C75.5672 28.6621 75.819 28.2747 76.0625 27.8984H76.187V34.1489H72.2856ZM84.77 38.1665H86.9033V26.1885H84.77L81.6406 28.3882V30.397L84.6206 28.2969H84.77V38.1665Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); top: 21.2px; left: calc((9px + (100% - 125px) / 2) / 2 - 21.45px); width: 37px; height: 22px; }
.app-status::after { --app-sb-m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2285.3%22 height=%2213%22 viewBox=%22285.1 25.7 85.3 13%22%3E%3Cpath d=%22M286.736 33.5815C287.036 33.5816 287.305 33.6515 287.555 33.8013C287.805 33.9513 288.006 34.1519 288.156 34.4019C288.306 34.6517 288.375 34.9215 288.375 35.2212V36.6919C288.375 36.9916 288.306 37.2614 288.156 37.5112C288.006 37.7612 287.805 37.9618 287.555 38.1118C287.305 38.2616 287.036 38.3315 286.736 38.3315C286.436 38.3315 286.156 38.2617 285.906 38.1118C285.656 37.9618 285.455 37.7612 285.305 37.5112C285.155 37.2614 285.086 36.9916 285.085 36.6919V35.2212C285.085 34.9215 285.155 34.6517 285.305 34.4019C285.455 34.1519 285.656 33.9513 285.906 33.8013C286.156 33.6514 286.436 33.5815 286.736 33.5815ZM292.085 31.3618C292.385 31.3618 292.656 31.4315 292.906 31.5815C293.156 31.7315 293.355 31.9314 293.505 32.1812C293.655 32.4312 293.725 32.7015 293.725 33.0015V36.6919C293.725 36.9917 293.655 37.2614 293.505 37.5112C293.355 37.7612 293.156 37.9618 292.906 38.1118C292.656 38.2618 292.385 38.3315 292.085 38.3315C291.785 38.3315 291.505 38.2618 291.255 38.1118C291.005 37.9618 290.806 37.7612 290.656 37.5112C290.506 37.2614 290.435 36.9817 290.435 36.6919V33.0015C290.435 32.7015 290.506 32.4312 290.656 32.1812C290.806 31.9314 291.006 31.7315 291.255 31.5815C291.505 31.4315 291.785 31.3618 292.085 31.3618ZM302.776 26.0015C303.076 26.0015 303.345 26.0714 303.595 26.2212C303.845 26.3712 304.046 26.5718 304.196 26.8218C304.346 27.0716 304.415 27.3414 304.416 27.6411V36.6919C304.415 36.9916 304.346 37.2614 304.196 37.5112C304.046 37.7612 303.845 37.9618 303.595 38.1118C303.345 38.2616 303.076 38.3315 302.776 38.3315C302.476 38.3315 302.196 38.2616 301.946 38.1118C301.696 37.9618 301.495 37.7612 301.345 37.5112C301.195 37.2614 301.126 36.9916 301.125 36.6919V27.6411C301.126 27.3414 301.195 27.0716 301.345 26.8218C301.495 26.5718 301.696 26.3712 301.946 26.2212C302.196 26.0713 302.476 26.0015 302.776 26.0015ZM297.435 28.7915C297.735 28.7915 298.005 28.8613 298.255 29.0112C298.505 29.1612 298.705 29.3618 298.855 29.6118C299.005 29.8617 299.076 30.1313 299.076 30.4312V36.6812C299.076 36.9812 299.005 37.2515 298.855 37.5015C298.705 37.7513 298.505 37.9511 298.255 38.1011C298.005 38.2511 297.735 38.3218 297.435 38.3218C297.135 38.3217 296.855 38.2617 296.605 38.1118C296.355 37.9718 296.155 37.7712 296.005 37.5112C295.855 37.2613 295.786 36.9811 295.786 36.6812V30.4312C295.786 30.1314 295.856 29.8616 296.005 29.6118C296.155 29.3619 296.355 29.1612 296.605 29.0112C296.855 28.8613 297.135 28.7916 297.435 28.7915Z%22 fill=%22%23000%22/%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M311.774 30.7693C312.193 31.2006 312.847 31.1267 313.377 30.6584C315.127 29.0809 317.31 28.2676 319.751 28.2676C322.192 28.2676 324.386 29.1056 326.125 30.6584C326.642 31.139 327.296 31.1883 327.727 30.7693C328.159 30.3256 328.22 29.6602 327.777 29.1919C325.927 27.3063 322.907 26 319.751 26C316.595 26 313.562 27.3186 311.725 29.2042C311.281 29.6602 311.33 30.3256 311.774 30.7816V30.7693ZM314.819 33.8626C315.3 34.3309 315.916 34.2816 316.459 33.8379C317.347 33.1355 318.53 32.6548 319.751 32.6672C320.959 32.6672 322.142 33.1355 323.042 33.8502C323.585 34.2939 324.226 34.3185 324.694 33.8502C325.151 33.3819 325.225 32.6672 324.744 32.2235C323.548 31.1513 321.748 30.3996 319.763 30.3996C317.778 30.3996 315.966 31.1513 314.782 32.2235C314.363 32.6179 314.277 33.2957 314.832 33.8626H314.819ZM318.937 37.954C319.467 38.4593 320.022 38.4593 320.552 37.954L321.551 36.9928C322.081 36.4752 322.192 35.822 321.588 35.3784C321.082 35.021 320.441 34.7868 319.751 34.7868C319.06 34.7868 318.407 35.021 317.914 35.3907C317.31 35.822 317.433 36.4875 317.963 36.9928L318.949 37.954H318.937Z%22 fill=%22%23000%22/%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M361.084 29.9865V33.9957C361.484 33.8855 362.415 32.9934 362.415 31.9911C362.415 30.9888 361.484 30.0967 361.084 29.9865ZM360.083 33.1638C360.083 33.3743 360.083 33.5848 360.083 33.7953C360.083 33.9757 360.083 34.1461 360.083 34.3265C360.073 34.7174 360.053 35.0983 359.983 35.4892C359.913 35.8801 359.803 36.2409 359.623 36.5917C359.443 36.9425 359.213 37.2532 358.943 37.5239C358.673 37.7945 358.353 38.025 358.012 38.2054C357.662 38.3859 357.302 38.4961 356.912 38.5663C356.532 38.6364 356.142 38.6565 355.751 38.6665C355.571 38.6665 355.401 38.6665 355.221 38.6665C355.011 38.6665 354.801 38.6665 354.591 38.6665H340.574C340.364 38.6665 340.154 38.6665 339.944 38.6665C339.764 38.6665 339.594 38.6665 339.414 38.6665C339.023 38.6565 338.643 38.6364 338.253 38.5663C337.863 38.4961 337.503 38.3859 337.153 38.2054C336.812 38.025 336.492 37.7945 336.222 37.5239C335.952 37.2532 335.722 36.9325 335.542 36.5917C335.362 36.2409 335.252 35.8801 335.182 35.4892C335.112 35.1083 335.092 34.7174 335.082 34.3265C335.082 34.1461 335.082 33.9757 335.082 33.7953C335.082 33.5848 335.082 33.3743 335.082 33.1638V31.1592C335.082 30.9487 335.082 30.7382 335.082 30.5277C335.082 30.3473 335.082 30.1769 335.082 29.9965C335.092 29.6056 335.112 29.2247 335.182 28.8438C335.252 28.4529 335.362 28.0921 335.542 27.7413C335.722 27.3905 335.952 27.0798 336.222 26.8091C336.492 26.5385 336.812 26.308 337.153 26.1276C337.503 25.9472 337.863 25.8369 338.253 25.7667C338.633 25.6966 339.023 25.6765 339.414 25.6665C339.594 25.6665 339.764 25.6665 339.944 25.6665C340.154 25.6665 340.364 25.6665 340.574 25.6665H354.581C354.791 25.6665 355.001 25.6665 355.211 25.6665C355.391 25.6665 355.561 25.6665 355.741 25.6665C356.132 25.6765 356.512 25.6966 356.902 25.7667C357.292 25.8369 357.652 25.9472 358.002 26.1276C358.353 26.308 358.663 26.5385 358.933 26.8091C359.203 27.0798 359.433 27.4005 359.613 27.7413C359.793 28.0921 359.903 28.4529 359.973 28.8438C360.043 29.2247 360.063 29.6156 360.073 29.9965C360.073 30.1769 360.073 30.3473 360.073 30.5277C360.073 30.7382 360.073 30.9487 360.073 31.1592V33.1638H360.083Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); top: 25.7px; left: calc(((100% + 125px) / 2 + 100% - 9px) / 2 - 43.15px); width: 85.3px; height: 13px; }
.is-android .app-status { color: #171d1b; }
.is-android .app-status::before { --app-sb-m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2229%22 height=%2220%22 viewBox=%2216 16 29 20%22%3E%3Cpath d=%22M18.085 29.9404H18.2148C18.944 29.9404 19.5365 29.8379 19.9922 29.6328C20.4479 29.4277 20.7988 29.152 21.0449 28.8057C21.291 28.4593 21.4596 28.0697 21.5508 27.6367C21.6419 27.1992 21.6875 26.7503 21.6875 26.29V24.7656C21.6875 24.3145 21.6351 23.9134 21.5303 23.5625C21.43 23.2116 21.2887 22.9176 21.1064 22.6807C20.9287 22.4437 20.7259 22.2637 20.498 22.1406C20.2702 22.0176 20.0286 21.9561 19.7734 21.9561C19.4818 21.9561 19.2197 22.0153 18.9873 22.1338C18.7594 22.2477 18.5658 22.4095 18.4062 22.6191C18.2513 22.8288 18.1328 23.0749 18.0508 23.3574C17.9688 23.64 17.9277 23.9476 17.9277 24.2803C17.9277 24.5765 17.9642 24.8636 18.0371 25.1416C18.11 25.4196 18.2217 25.6702 18.3721 25.8936C18.5225 26.1169 18.7093 26.2946 18.9326 26.4268C19.1605 26.5544 19.4271 26.6182 19.7324 26.6182C20.015 26.6182 20.2793 26.5635 20.5254 26.4541C20.776 26.3402 20.9971 26.1875 21.1885 25.9961C21.3844 25.8001 21.5394 25.5791 21.6533 25.333C21.7718 25.0869 21.8402 24.8294 21.8584 24.5605H22.46C22.46 24.9388 22.3848 25.3125 22.2344 25.6816C22.0885 26.0462 21.8835 26.3789 21.6191 26.6797C21.3548 26.9805 21.0449 27.222 20.6895 27.4043C20.334 27.582 19.9466 27.6709 19.5273 27.6709C19.0352 27.6709 18.609 27.5752 18.249 27.3838C17.889 27.1924 17.5928 26.9372 17.3604 26.6182C17.1325 26.2992 16.9616 25.9437 16.8477 25.5518C16.7383 25.1553 16.6836 24.7542 16.6836 24.3486C16.6836 23.8747 16.7497 23.4303 16.8818 23.0156C17.014 22.6009 17.21 22.2363 17.4697 21.9219C17.7295 21.6029 18.0508 21.3545 18.4336 21.1768C18.821 20.999 19.2676 20.9102 19.7734 20.9102C20.3431 20.9102 20.8285 21.0241 21.2295 21.252C21.6305 21.4798 21.9564 21.7852 22.207 22.168C22.4622 22.5508 22.6491 22.9814 22.7676 23.46C22.8861 23.9385 22.9453 24.4307 22.9453 24.9365V25.3945C22.9453 25.9095 22.9111 26.4336 22.8428 26.9668C22.779 27.4954 22.6536 28.0013 22.4668 28.4844C22.2845 28.9674 22.0179 29.4004 21.667 29.7832C21.3161 30.1615 20.8581 30.4622 20.293 30.6855C19.7324 30.9043 19.0397 31.0137 18.2148 31.0137H18.085V29.9404ZM25.0342 30.3301C25.0342 30.1159 25.1003 29.9359 25.2324 29.79C25.3691 29.6396 25.5651 29.5645 25.8203 29.5645C26.0755 29.5645 26.2692 29.6396 26.4014 29.79C26.5381 29.9359 26.6064 30.1159 26.6064 30.3301C26.6064 30.5397 26.5381 30.7174 26.4014 30.8633C26.2692 31.0091 26.0755 31.082 25.8203 31.082C25.5651 31.082 25.3691 31.0091 25.2324 30.8633C25.1003 30.7174 25.0342 30.5397 25.0342 30.3301ZM25.041 24.2939C25.041 24.0798 25.1071 23.8997 25.2393 23.7539C25.376 23.6035 25.5719 23.5283 25.8271 23.5283C26.0824 23.5283 26.276 23.6035 26.4082 23.7539C26.5449 23.8997 26.6133 24.0798 26.6133 24.2939C26.6133 24.5036 26.5449 24.6813 26.4082 24.8271C26.276 24.973 26.0824 25.0459 25.8271 25.0459C25.5719 25.0459 25.376 24.973 25.2393 24.8271C25.1071 24.6813 25.041 24.5036 25.041 24.2939ZM30.4385 25.4014H31.3408C31.7829 25.4014 32.1475 25.3285 32.4346 25.1826C32.7262 25.0322 32.9427 24.8294 33.084 24.5742C33.2298 24.3145 33.3027 24.0228 33.3027 23.6992C33.3027 23.3164 33.2389 22.9951 33.1113 22.7354C32.9837 22.4756 32.7923 22.2796 32.5371 22.1475C32.2819 22.0153 31.9583 21.9492 31.5664 21.9492C31.2109 21.9492 30.8965 22.0199 30.623 22.1611C30.3542 22.2979 30.1423 22.4938 29.9873 22.749C29.8369 23.0042 29.7617 23.305 29.7617 23.6514H28.4971C28.4971 23.1455 28.6247 22.6852 28.8799 22.2705C29.1351 21.8558 29.4928 21.5254 29.9531 21.2793C30.418 21.0332 30.9557 20.9102 31.5664 20.9102C32.168 20.9102 32.6943 21.0173 33.1455 21.2314C33.5967 21.4411 33.9476 21.7555 34.1982 22.1748C34.4489 22.5895 34.5742 23.1068 34.5742 23.7266C34.5742 23.9772 34.515 24.2461 34.3965 24.5332C34.2826 24.8158 34.1025 25.0801 33.8564 25.3262C33.6149 25.5723 33.3005 25.7751 32.9131 25.9346C32.5257 26.0895 32.0609 26.167 31.5186 26.167H30.4385V25.4014ZM30.4385 26.4404V25.6816H31.5186C32.152 25.6816 32.6761 25.7568 33.0908 25.9072C33.5055 26.0576 33.8314 26.2581 34.0684 26.5088C34.3099 26.7594 34.4785 27.0352 34.5742 27.3359C34.6745 27.6322 34.7246 27.9284 34.7246 28.2246C34.7246 28.6895 34.6449 29.1019 34.4854 29.4619C34.3304 29.8219 34.1094 30.1273 33.8223 30.3779C33.5397 30.6286 33.207 30.8177 32.8242 30.9453C32.4414 31.0729 32.0244 31.1367 31.5732 31.1367C31.1403 31.1367 30.7324 31.0752 30.3496 30.9521C29.9714 30.8291 29.6364 30.6514 29.3447 30.4189C29.0531 30.182 28.8252 29.8926 28.6611 29.5508C28.4971 29.2044 28.415 28.8102 28.415 28.3682H29.6797C29.6797 28.7145 29.7549 29.0176 29.9053 29.2773C30.0602 29.5371 30.279 29.7399 30.5615 29.8857C30.8486 30.027 31.1859 30.0977 31.5732 30.0977C31.9606 30.0977 32.2933 30.0316 32.5713 29.8994C32.8538 29.7627 33.0703 29.5576 33.2207 29.2842C33.3757 29.0107 33.4531 28.6667 33.4531 28.252C33.4531 27.8372 33.3665 27.4977 33.1934 27.2334C33.0202 26.9645 32.7741 26.7663 32.4551 26.6387C32.1406 26.5065 31.7692 26.4404 31.3408 26.4404H30.4385ZM42.9658 25.2305V26.748C42.9658 27.5638 42.8929 28.252 42.7471 28.8125C42.6012 29.373 42.3916 29.8242 42.1182 30.166C41.8447 30.5078 41.5143 30.7562 41.127 30.9111C40.7441 31.0615 40.3112 31.1367 39.8281 31.1367C39.4453 31.1367 39.0921 31.0889 38.7686 30.9932C38.445 30.8975 38.1533 30.7448 37.8936 30.5352C37.6383 30.321 37.4196 30.043 37.2373 29.7012C37.055 29.3594 36.916 28.9447 36.8203 28.457C36.7246 27.9694 36.6768 27.3997 36.6768 26.748V25.2305C36.6768 24.4147 36.7497 23.7311 36.8955 23.1797C37.0459 22.6283 37.2578 22.1862 37.5312 21.8535C37.8047 21.5163 38.1328 21.2747 38.5156 21.1289C38.903 20.9831 39.3359 20.9102 39.8145 20.9102C40.2018 20.9102 40.5573 20.958 40.8809 21.0537C41.209 21.1449 41.5007 21.293 41.7559 21.498C42.0111 21.6986 42.2275 21.9674 42.4053 22.3047C42.5876 22.6374 42.7266 23.0452 42.8223 23.5283C42.918 24.0114 42.9658 24.5788 42.9658 25.2305ZM41.6943 26.9531V25.0186C41.6943 24.5719 41.667 24.18 41.6123 23.8428C41.5622 23.501 41.487 23.2093 41.3867 22.9678C41.2865 22.7262 41.1589 22.5303 41.0039 22.3799C40.8535 22.2295 40.6781 22.1201 40.4775 22.0518C40.2816 21.9788 40.0605 21.9424 39.8145 21.9424C39.5137 21.9424 39.2471 21.9993 39.0146 22.1133C38.7822 22.2227 38.5863 22.3981 38.4268 22.6396C38.2718 22.8812 38.1533 23.1979 38.0713 23.5898C37.9893 23.9818 37.9482 24.458 37.9482 25.0186V26.9531C37.9482 27.3997 37.9733 27.7939 38.0234 28.1357C38.0781 28.4775 38.1579 28.7738 38.2627 29.0244C38.3675 29.2705 38.4951 29.4733 38.6455 29.6328C38.7959 29.7923 38.9691 29.9108 39.165 29.9883C39.3656 30.0612 39.5866 30.0977 39.8281 30.0977C40.138 30.0977 40.4092 30.0384 40.6416 29.9199C40.874 29.8014 41.0677 29.6169 41.2227 29.3662C41.3822 29.111 41.5007 28.7852 41.5781 28.3887C41.6556 27.9876 41.6943 27.5091 41.6943 26.9531Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); top: 10px; left: 16px; width: 29px; height: 20px; }
.is-android .app-status::after { --app-sb-m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2246%22 height=%2216%22 viewBox=%22350 18 46 16%22%3E%3Cpath d=%22M350.667 24L358 31.3333L365.333 24C361.28 19.9466 354.72 19.9466 350.667 24Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M378.667 19.3333L365.333 32.6666H378.667V19.3333Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M389.594 18.9167H386.406V20.3334H384.812C384.226 20.3334 383.75 20.8091 383.75 21.3959V32.0209C383.75 32.6077 384.226 33.0834 384.812 33.0834H391.188C391.774 33.0834 392.25 32.6077 392.25 32.0209V21.3959C392.25 20.8091 391.774 20.3334 391.188 20.3334H389.594V18.9167Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); top: 12px; left: auto; right: 16px; width: 46px; height: 16px; }
/* Pasek bez własnego tła robi się pełny dopiero po przewinięciu (klasę ustawia feature-landing.js) */
.app-status.is-scrolled:not(.app-status--clear) { background: var(--app-bg); }
/* Sprzęt: Dynamic Island albo otwór na kamerę */
.app-phone::before { content: ""; position: absolute; z-index: 6; top: 13.67px; left: 50%; width: 125px; height: 37px; margin-left: -62.5px; border-radius: 18.5px; background: #000; pointer-events: none; }
.app-phone.is-android::before { top: 8px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: #2e2e2e; }
.is-android .app-home { bottom: 10px; width: 108px; height: 4px; border-radius: 2px; background: #171d1b; }
/* STATUSBAR:END */
.app-screen { position: absolute; inset: 0; overflow: hidden auto; padding: var(--app-sb) 0 40px; scrollbar-width: none; overscroll-behavior: contain; }
.app-screen::-webkit-scrollbar { display: none; }
.app-screen[hidden] { display: none; }
.app-home { position: absolute; z-index: 5; left: 50%; bottom: 8px; width: 134px; height: 5px; border-radius: 5px; background: var(--app-ink); translate: -50% 0; opacity: .85; }

/* ── Nagłówek ekranu ─────────────────────────────────────────────────── */
.app-topbar { display: flex; align-items: center; gap: 14px; padding: 16px 16px 12px; }
.app-topbar > .app-ico { width: 28px; height: 28px; font-size: 24px; }
.app-topbar-title { flex: 1; min-width: 0; font: 700 18px/24px var(--app-display); }
.app-topbar-title small { display: block; margin-top: 2px; color: var(--app-subtle); font: 500 13px/1.2 var(--app-font); }
.app-btn-sm { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--app-ink); color: #fff; font: 700 14px/1 var(--app-display); transition: background .3s ease; }
.app-btn-sm.is-disabled { background: #d5d3d9; }
.app-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--app-surface); font-size: 18px; }

/* KROK ▬▬ ▬▬ ▬▬ 1/3 */
.app-steps { display: flex; align-items: center; gap: 2px; padding: 6px 16px; color: var(--app-muted); font: 400 10px/16px var(--app-display); text-transform: uppercase; }
.app-steps b { flex: 0 0 65px; height: 3px; border-radius: 3px; background: rgba(20, 19, 22, .16); }
.app-steps b:first-of-type { margin-left: auto; }
.app-steps b:last-of-type { margin-right: auto; }
.app-steps b.is-done { background: var(--app-ink); }

/* ── Zdjęcie ze skanowaniem ───────────────────────────────────────────── */
.app-photo { position: relative; overflow: hidden; margin: 0 12px; border-radius: 16px; background: #eee9e0; aspect-ratio: 4 / 5; }
.app-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform 1.2s var(--app-ease); }
.app-photo > img.is-active { opacity: 1; transform: none; }
.app-photo-badge { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #fff; font-size: 18px; }
.app-scan-corners { position: absolute; z-index: 2; inset: 16%; opacity: 0; transition: opacity .3s ease; background:
  linear-gradient(var(--app-scan), var(--app-scan)) 0 0 / 28px 3px no-repeat, linear-gradient(var(--app-scan), var(--app-scan)) 0 0 / 3px 28px no-repeat,
  linear-gradient(var(--app-scan), var(--app-scan)) 100% 0 / 28px 3px no-repeat, linear-gradient(var(--app-scan), var(--app-scan)) 100% 0 / 3px 28px no-repeat,
  linear-gradient(var(--app-scan), var(--app-scan)) 0 100% / 28px 3px no-repeat, linear-gradient(var(--app-scan), var(--app-scan)) 0 100% / 3px 28px no-repeat,
  linear-gradient(var(--app-scan), var(--app-scan)) 100% 100% / 28px 3px no-repeat, linear-gradient(var(--app-scan), var(--app-scan)) 100% 100% / 3px 28px no-repeat; }
.app-scan-line { position: absolute; z-index: 2; left: 14%; right: 14%; top: 18%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--app-scan), transparent); box-shadow: 0 0 18px 4px rgba(119, 231, 30, .55); opacity: 0; }
.app-scan-pill { position: absolute; z-index: 2; left: 50%; bottom: 12px; translate: -50% 0; padding: 7px 14px; border-radius: 100px; background: rgba(20, 19, 22, .72); color: #fff; font: 600 13px/1 var(--app-font); white-space: nowrap; opacity: 0; transition: opacity .3s ease; }
.app-photo.is-scanning .app-scan-corners, .app-photo.is-scanning .app-scan-pill { opacity: 1; }
.app-photo.is-scanning .app-scan-line { opacity: 1; animation: appScan 1.3s ease-in-out infinite alternate; }
@keyframes appScan { from { top: 18%; } to { top: 80%; } }

/* „Nie wiem, co to jest” / „Wiem, co to jest” */
.app-choice-labels { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 12px 6px; color: var(--app-muted); font: 400 12px/1.2 var(--app-font); text-align: center; }
.app-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
.app-choice > span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--app-line); border-radius: 14px; background: #fff; font: 600 13px/1.2 var(--app-font); text-align: center; transition: box-shadow .3s ease, border-color .3s ease; }
.app-choice .app-ico { font-size: 22px; }
.app-choice .is-ai .app-ico { color: var(--app-scan-2); }
.app-choice .is-ai.is-active { border-color: var(--app-scan-2); box-shadow: 0 0 0 3px rgba(46, 209, 125, .18); }
.app-powered { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 12px 12px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 12px; color: var(--app-muted); font: 400 12px/1.2 var(--app-font); }
.app-powered img { width: 76px; height: auto; }

/* ── Arkusz wyników ───────────────────────────────────────────────────── */
.app-sheet { padding: 10px 14px 14px; background: var(--app-surface); }
.app-sheet-handle { width: 44px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: #d5d3d9; }
.app-sheet-title { margin-bottom: 12px; font: 600 18px/1.2 var(--app-display); text-align: center; }
.app-sheet-head { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--app-subtle); font: 600 10px/1 var(--app-font); letter-spacing: .06em; text-transform: uppercase; }
.app-results { display: grid; gap: 8px; }
.app-result { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 7px 10px 7px 7px; border: 1px solid transparent; border-radius: 14px; background: var(--app-bg); transition: background .25s ease, border-color .25s ease, opacity .45s ease, translate .45s var(--app-ease); }
.app-result.is-selected, .app-result[aria-checked="true"] { border-color: rgba(37, 167, 100, .35); background: var(--app-high-bg); }
.app-results.is-entering .app-result { opacity: 0; translate: 0 10px; }
.app-results .app-result:nth-child(2) { transition-delay: 0s, 0s, .12s, .12s; }
.app-results .app-result:nth-child(3) { transition-delay: 0s, 0s, .24s, .24s; }
.app-thumb { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 10px; background: var(--app-high-bg); color: var(--app-high); font-size: 24px; }
.app-thumb img { width: 100%; height: 100%; object-fit: cover; }
.app-result-name { display: grid; gap: 2px; min-width: 0; }
.app-result-name strong { overflow: hidden; font: 600 15px/1.25 var(--app-font); text-overflow: ellipsis; white-space: nowrap; }
.app-result-name em { overflow: hidden; color: var(--app-subtle); font: italic 400 13px/1.25 var(--app-font); text-overflow: ellipsis; white-space: nowrap; }
.app-result-name small { color: var(--app-muted); font: 400 11px/1.2 var(--app-font); }
.app-conf { align-self: start; padding-top: 3px; font: 700 11px/1 var(--app-font); letter-spacing: .06em; text-transform: uppercase; }
.app-conf--high { color: var(--app-high); }
.app-conf--mid { color: var(--app-mid); }
.app-conf--low { color: var(--app-low); }
.app-skeleton { display: grid; gap: 8px; }
.app-skeleton span { height: 66px; border-radius: 14px; background: linear-gradient(90deg, #f1f0f4 25%, #e6e4ea 50%, #f1f0f4 75%) 0 0 / 300% 100%; animation: appShimmer 1.2s linear infinite; }
@keyframes appShimmer { to { background-position: -300% 0; } }

/* ── Przyciski ─────────────────────────────────────────────────────────── */
.app-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 16px; border-radius: 8px; background: var(--app-ink); color: #fff; font: 500 14px/1 var(--app-display); text-align: center; }
.app-btn--light { background: var(--app-fill); color: var(--app-ink); }
.app-btn--accent { background: var(--app-primary); }
.app-btn--white { border: 1px solid var(--app-line); background: #fff; color: var(--app-ink); box-shadow: 0 1px 1.4px rgba(0, 0, 0, .2); }
.app-chip-btn { padding: 7px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; font: 700 11px/1 var(--app-font); letter-spacing: .04em; text-transform: uppercase; }

/* ── Formularz ─────────────────────────────────────────────────────────── */
.app-label { display: block; margin-bottom: 4px; font: 400 14px/24px var(--app-display); }
.app-input { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 12px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; font: 400 16px/24px var(--app-font); }
.app-input--area { align-items: flex-start; height: 136px; }
.app-input .app-ico { font-size: 18px; }
.app-stepper { display: flex; align-items: center; gap: 6px; }
.app-stepper > span:not(.app-ico) { flex: 1; }
.app-stepper button { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--app-fill); font: 600 16px/1 var(--app-font); }
.app-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Segment z kropkami: Niskie / Normalne / Intensywne, Krytyczny / Słaby / Dobry */
.app-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.app-seg > button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 8px; border: 1px solid transparent; border-radius: 12px; background: rgba(20, 19, 22, .04); font: 400 12px/20px var(--app-display); text-align: center; }
.app-seg > button[aria-pressed="true"] { border-color: var(--app-ink); background: #fff; box-shadow: var(--app-shadow-card); }
.app-dots { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--app-neutral-200); border-radius: 12px; background: #fff; }
.app-dots i { width: 7px; height: 7px; border: 1px solid var(--app-line); border-radius: 50%; background: var(--app-bg); }
.app-dots i.is-on { border-color: var(--app-ink); background: var(--app-ink); }

/* Paski zdrowia (Figma: PART/plant status - health minimal / micro).
   Kolor pasków bierze się z najbliższego [data-level]: 1 krytyczny, 2 słaby, 3 zdrowa. */
.app-health { display: inline-flex; padding: 2px; border-radius: 4px; background: #fff; vertical-align: middle; }
.app-bars { display: inline-flex; gap: 1px; width: 20px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 9999px; background: rgba(20, 19, 22, .08); }
.app-bars i { flex: 1; height: 4px; background: var(--app-bg); }
.app-bars--micro i { height: 5px; }
[data-level="1"] > .app-bars i:nth-child(-n+1) { background: var(--app-low); }
[data-level="2"] > .app-bars i:nth-child(-n+2) { background: var(--app-mid); }
[data-level="3"] > .app-bars i { background: var(--app-high); }
/* Pigułka stanu z etykietą (historia rośliny) */
.app-status-chip { display: inline-flex; align-items: center; border: 1px solid var(--app-neutral-200); border-radius: 12px; background: #fff; }
.app-status-chip > .app-health { margin: 4px; }
.app-status-chip > span:last-child { padding: 0 8px; border-radius: 12px; background: var(--app-bg); font: 400 10px/16px var(--app-display); }

/* Przełącznik i checkbox */
.app-toggle { position: relative; flex: none; width: 50px; height: 30px; border-radius: 30px; background: var(--app-fill-2); transition: background .2s ease; }
.app-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: translate .2s var(--app-ease); }
.app-toggle[aria-checked="true"] { background: var(--app-ink); }
.app-toggle[aria-checked="true"]::after { translate: 20px 0; }
.app-check { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--app-ink); border-radius: 5px; background: #fff; color: #fff; font-size: 14px; }
.app-check[aria-checked="true"] { background: var(--app-ink); }
.app-check[aria-checked="false"] .ph { visibility: hidden; }

/* ── Ekran „Ustaw rutyny” ─────────────────────────────────────────────── */
.app-summary { display: flex; align-items: center; margin: 0 16px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 16px; }
.app-summary img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; box-shadow: var(--app-shadow-card); }
.app-summary div { flex: 1; min-width: 0; padding: 0 16px; text-align: center; }
.app-summary strong { display: block; font: 700 14px/24px var(--app-display); }
.app-summary span { font: 400 12px/20px var(--app-display); }
.app-summary .app-icon-btn { flex: none; width: 42px; height: 42px; margin: 12px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; box-shadow: var(--app-shadow-card); font-size: 22px; }
.app-warn { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 16px 16px; padding: 8px 8px 8px 14px; border: 1px solid var(--app-warn-line); border-radius: 12px; background: var(--app-warn-bg); color: var(--app-mid); font: 400 15px/1.2 var(--app-font); transition: opacity .25s ease; }
.app-warn[hidden] { display: none; }
.app-block { padding: 0 16px 16px; }
.app-block-white { margin-bottom: 14px; padding: 16px; border-radius: 0 0 16px 16px; background: var(--app-grad-surface); box-shadow: var(--app-shadow-card); }
.app-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.app-block-head h3 { font: 700 18px/24px var(--app-display); }
.app-block-head > label, .app-block-head > span { display: flex; align-items: center; gap: 10px; font: 400 15px/1 var(--app-font); }
.app-block-white > * + * { margin-top: 14px; }
.app-mute-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 14px/1.2 var(--app-font); }
.app-group { margin: 0 16px; padding: 6px; border: 1px solid var(--app-line); border-radius: 18px; background: var(--app-bg); }
.app-routine { border-radius: 14px; }
.app-routine + .app-routine { border-top: 1px solid var(--app-line); }
.app-routine.is-open { margin: 4px 0; border: 0; background: #fff; box-shadow: 0 6px 18px -10px rgba(20, 19, 22, .25); }
.app-routine.is-open + .app-routine { border-top: 0; }
.app-routine-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 12px; font: 400 15px/1.2 var(--app-font); }
.app-routine-head .app-ico { font-size: 22px; }
.app-routine-head span:not(.app-ico) { flex: 1; }
.app-routine-body { display: grid; gap: 12px; padding: 0 12px 14px; }
.app-routine:not(.is-open) .app-routine-body { display: none; }
.app-routine-foot { display: flex; align-items: center; justify-content: space-between; margin: 12px 16px 0; color: var(--app-subtle); font: 400 14px/1 var(--app-font); }
.app-routine-foot b { margin-left: auto; margin-right: 12px; font-weight: 400; }
.app-ico--water { color: #3aa0e8; }
.app-ico--feed { color: #c46a2d; }
.app-ico--repot { color: #2e9e6a; }
.app-ico--prune { color: #4a6fe0; }

/* ── Ekran „Uzupełnij profil” ────────────────────────────────────────── */
.app-block-white--top { display: grid; gap: 4px; margin: 12px 0 0; }
.app-block-white--top > * + * { margin-top: 0; }

.app-block-title { margin: 24px 0 12px !important; font: 700 18px/24px var(--app-display) !important; }
.app-block > .app-label { margin-bottom: 8px; }
.app-input input, .app-input textarea { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; resize: none; }
.app-input:focus-within { border-bottom-color: var(--app-ink); }
.app-input--strong { font-weight: 700; }
.app-input--area textarea { height: 100%; min-height: 96px; line-height: 1.4; }
.app-seg--health { margin-bottom: 12px; }
.app-seg--health > button { gap: 8px; }
.app-health--pill { padding: 6px; border: 1px solid var(--app-neutral-200); border-radius: 12px; }

.app-age { gap: 10px; margin-bottom: 16px; }
.app-age .app-ico { font-size: 18px; color: var(--app-subtle); }
.app-age-label { flex: 1; color: var(--app-muted); font: 400 14px/24px var(--app-font); }
.app-age b { font-weight: 400; white-space: nowrap; }
.app-counter { margin: 4px 0 16px !important; color: var(--app-muted); font: 400 12px/20px var(--app-display) !important; text-align: right; }

/* ── Ekran „Profil rośliny” (Figma 331:162102, bez sekcji „O gatunku”) ─── */
/* Nagłówek z kartą, wiekiem, stanem i opisem leży na trzystopniowym gradiencie */
.app-detail-head { overflow: hidden; border-bottom: 1px solid var(--app-line); border-radius: 0 0 24px 24px; background: var(--app-grad-detail); }
.app-plant-hero { margin: 6px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 12px 12px 24px 24px; background: #fff; box-shadow: var(--app-shadow-card); }
.app-plant-hero figure { position: relative; margin: 0; padding: 4px; aspect-ratio: 1; }
.app-plant-hero figure img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.app-plant-hero-body { display: grid; gap: 8px; padding: 12px 16px; text-align: center; }
.app-plant-name { overflow: hidden; font: 700 18px/24px var(--app-display); text-overflow: ellipsis; white-space: nowrap; }
.app-plant-species { font: 400 12px/20px var(--app-display); }
.app-plant-latin { margin-top: -8px; color: var(--app-muted); font: 400 10px/16px var(--app-display); }
.app-stats { display: grid; grid-template-columns: 1fr 1px 1fr; border-bottom: 1px solid var(--app-line); }
.app-stats::before { content: ""; grid-column: 2; grid-row: 1; background: var(--app-line); }
.app-stats > div { grid-row: 1; display: grid; justify-items: center; align-content: center; min-height: 56px; padding: 6px 8px; text-align: center; font: 400 12px/20px var(--app-display); }
.app-stats > div:first-child { grid-column: 1; }
.app-stats > div:last-child { grid-column: 3; }
.app-stats-label { display: inline-flex; align-items: center; gap: 6px; }
.app-stats b { font: 700 14px/24px var(--app-display); }
.app-note { padding: 12px 24px; font: 400 14px/24px var(--app-font); text-align: center; overflow-wrap: anywhere; }
.app-care { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; padding: 8px 12px 8px 8px; border: 1px solid var(--app-bg); border-radius: 16px; background: #fff; box-shadow: var(--app-shadow-card); }
.app-care-ico { display: inline-grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-lavender); color: #7c4ce0; font-size: 24px; }
.app-care-main { display: grid; justify-items: start; gap: 4px; flex: 1; min-width: 0; }
.app-care-main strong { font: 700 18px/24px var(--app-display); }
.app-pill { display: inline-flex; align-items: center; border: 1px solid var(--app-neutral-200); border-radius: 12px; background: #fff; }
.app-pill .app-dots { padding: 4px; border: 0; }
.app-pill > span:last-child { padding: 0 8px; border-radius: 12px; background: var(--app-bg); font: 400 10px/16px var(--app-display); }
.app-care-freq { display: flex; flex-direction: column; align-items: flex-end; font: 400 10px/1.2 var(--app-display); white-space: nowrap; }
.app-care-freq b { font: 700 18px/24px var(--app-display); }
.app-section-label { display: flex; justify-content: space-between; margin: 12px 24px 8px; color: var(--app-muted); font: 500 12px/20px var(--app-font); letter-spacing: .2px; text-transform: uppercase; }
.app-list { display: grid; gap: 8px; margin: 0 24px; }
.app-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font: 400 14px/24px var(--app-display); }
.app-list li .app-ico { font-size: 20px; }
.app-list li span:not(.app-ico) { flex: 1; }
.app-list li > span:not(.app-ico) ~ span { flex: none; text-align: right; }
.app-list li small { flex-basis: 100%; margin: 0 0 0 28px; color: var(--app-muted); font: 400 12px/20px var(--app-font); }

/* ── Karta rośliny (Figma: CARD/PLANT CARD VARIANTS, małe karty) ─────── */
.app-card { border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); text-align: left; }
.app-card-top { display: flex; align-items: center; gap: 6px; padding: 6px; }
.app-avatar { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 50%; background: var(--app-lavender); box-shadow: var(--app-shadow-card); }
.app-avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-card-handle { flex: 1; min-width: 0; overflow: hidden; font: 700 12px/20px var(--app-display); text-overflow: ellipsis; white-space: nowrap; }
.app-more { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(20, 19, 22, .04); font-size: 16px; }
.app-card-main { display: flex; padding: 4px; border-radius: 8px; background: #fff; box-shadow: var(--app-shadow-card); }
.app-card-img { position: relative; flex: none; width: 88px; height: 88px; }
.app-card-img img { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
.app-rarity { position: absolute; top: 0; left: 0; display: inline-grid; place-items: center; padding: 4px; border-radius: 0 0 8px 0; background: #fff; color: #975ff3; font-size: 12px; }
.app-card-info { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-left: 8px; }
.app-card-name { overflow: hidden; font: 700 14px/24px var(--app-display); text-overflow: ellipsis; white-space: nowrap; }
.app-card-species { overflow: hidden; color: var(--app-muted); font: 500 12px/1.2 var(--app-display); text-overflow: ellipsis; white-space: nowrap; }
.app-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: auto; }
.app-health-micro { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 6px; font: 400 10px/16px var(--app-display); }
.app-like { display: inline-flex; align-items: center; gap: 4px; font: 500 10px/16px var(--app-display); }
.app-like-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--app-bg); font-size: 20px; }
.app-like-btn.is-liked { background: #efe8ff; color: #975ff3; }

/* ── Sekcje profilu rośliny: nagłówek sekcji ─────────────────────────── */
.app-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 32px 16px 0; }
.app-sec-head h3 { font: 700 20px/30px var(--app-display); }
.app-sec-head h3.is-sm { font-size: 18px; line-height: 24px; }
.app-sec-head > a, .app-sec-head > span { font: 700 12px/20px var(--app-display); }
.app-sec-sub { padding: 4px 16px 0; font: 400 12px/20px var(--app-font); }
.app-group-label { padding: 6px 0; color: var(--app-muted); font: 500 12px/20px var(--app-font); }

/* Cechy gatunku (PART/plant details bar) */
.app-traits { display: grid; gap: 2px; padding: 12px 16px; }
.app-trait { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: var(--app-shadow-card); }
.app-trait-ico { display: grid; place-items: end start; flex: none; width: 44px; padding: 12px; border-radius: 8px; background: var(--app-grad-detail); font-size: 20px; }
.app-trait div { display: grid; align-content: center; }
.app-trait small { color: var(--app-muted); font: 400 12px/20px var(--app-display); }
.app-trait b { font: 400 14px/24px var(--app-font); }

/* Historia rośliny */
.app-history { padding: 16px; }
.app-mentions { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--app-line); border-radius: 16px; background: #fff; }
.app-mentions > div { display: flex; flex: 1; gap: 12px; }
.app-mentions > div > span { display: grid; flex: 1; text-align: center; font: 400 12px/20px var(--app-display); }
.app-mentions b { font: 700 16px/24px var(--app-display); }
.app-icon-soft { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(20, 19, 22, .04); font-size: 24px; }
.app-timeline { padding: 16px; border: 1px solid var(--app-line); border-radius: 16px; background: #fff; }
.app-tl-row { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.app-tl-rail { display: flex; flex-direction: column; align-items: center; }
.app-tl-rail::after { content: ""; flex: 1; width: 1px; background: #d5d3d9; }
.app-tl-row:has(+ .app-tl-summary) .app-tl-rail::after { display: none; }
.app-tl-ico { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--app-neutral-200); border-radius: 50%; background: #fff; font-size: 16px; }
.app-tl-ico.is-swap { background: #efe8ff; color: #7c4ce0; }
.app-tl-info { display: grid; gap: 2px; padding: 4px 0 16px; min-width: 0; }
.app-tl-title { display: flex; justify-content: space-between; gap: 8px; }
.app-tl-title strong { font: 700 14px/24px var(--app-display); }
.app-tl-title time { color: var(--app-muted); font: 400 12px/24px var(--app-display); white-space: nowrap; }
.app-tl-meta { color: var(--app-muted); font: 400 12px/20px var(--app-font); }
.app-tl-thumb { width: 48px; height: 48px; margin: 2px 0; border-radius: 8px; object-fit: cover; }
.app-tl-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0; font: 400 12px/20px var(--app-font); }
.app-tl-inline .app-avatar { width: 18px; height: 18px; box-shadow: none; }
.app-tl-inline .ph { font-size: 12px; color: var(--app-muted); }
.app-tl-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding: 12px 0; border-top: 1px solid var(--app-line); color: var(--app-muted); font: 400 12px/20px var(--app-font); }
.app-tl-summary b { color: var(--app-ink); font-weight: 400; }
.app-btn--soft { min-height: 44px; background: rgba(20, 19, 22, .04); color: var(--app-ink); }

/* Popularne okazy: poziomy scroll kart */
.app-hscroll { display: flex; gap: 6px; padding: 16px 0 16px 16px; overflow-x: auto; scrollbar-width: none; }
.app-hscroll::-webkit-scrollbar { display: none; }
.app-hscroll .app-card { flex: none; width: 280px; }
.app-hscroll::after { content: ""; flex: none; width: 10px; }

/* Komentarze (ORGANISM/Comment types) */
.app-comment { display: flex; gap: 8px; padding: 16px; border-bottom: 1px solid var(--app-line); }
.app-comment .app-avatar { width: 32px; height: 32px; }
.app-comment-body { display: grid; flex: 1; gap: 12px; padding: 4px 0; min-width: 0; }
.app-comment-author { display: flex; align-items: baseline; gap: 8px; }
.app-comment-author strong { font: 700 14px/24px var(--app-display); }
.app-comment-author strong.is-owner { color: #975ff3; }
.app-comment-author time { color: var(--app-muted); font: 400 12px/20px var(--app-display); }
.app-comment-text { margin-top: -12px !important; font: 400 14px/24px var(--app-font) !important; }
.app-comment-actions { display: flex; gap: 24px; font: 700 12px/20px var(--app-display); }
.app-comment-actions span { display: inline-flex; align-items: center; gap: 4px; }
.app-comment-actions .ph { font-size: 14px; }
.app-comment .app-more { align-self: flex-start; background: none; }
.app-add-comment { padding: 16px; }
.app-add-comment .app-btn { min-height: 41px; }

/* ── Miniatury do teaserów funkcji (post, artykuł, profil, osiągnięcia) ── */
.app-post { overflow: hidden; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; }
.app-post > img { display: block; width: 100%; height: 150px; object-fit: cover; }
.app-post-text { padding: 10px 12px 12px; font: 400 14px/22px var(--app-font); }
.app-post-actions { display: flex; gap: 16px; padding: 0 12px 12px; font: 700 12px/20px var(--app-display); }
.app-post-actions span { display: inline-flex; align-items: center; gap: 4px; }
.app-article { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; }
.app-article small { color: var(--app-lavender-ink); font: 700 11px/1 var(--app-display); letter-spacing: .06em; text-transform: uppercase; }
.app-article strong { font: 700 20px/26px var(--app-display); }
.app-article .app-tl-inline { color: var(--app-muted); }
.app-profile { display: grid; justify-items: center; gap: 6px; padding: 18px 14px 14px; border-radius: 16px; background: var(--app-grad-detail); text-align: center; }
.app-profile .app-avatar { width: 64px; height: 64px; }
.app-profile strong { font: 700 18px/24px var(--app-display); }
.app-profile .app-mentions { width: 100%; margin-top: 6px; }
.app-badges { display: flex; justify-content: center; gap: 8px; }
.app-badge { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--app-neutral-200); border-radius: 16px; background: var(--app-grad-detail); color: #7c4ce0; font-size: 26px; }
.app-badge.is-green { color: var(--app-high); }

/* ── Arkusz „Roślina dodana” (Figma: ACTION SHEET/Added plant success) ── */
.app-dialog { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(0, 0, 0, .24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.app-dialog.is-open { opacity: 1; pointer-events: auto; }
.app-action-sheet { overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .16); border-radius: 24px 24px 0 0; box-shadow: 0 -2px 4px -2px rgba(20, 19, 22, .04), 0 -12px 16px -8px rgba(20, 19, 22, .06); translate: 0 40px; transition: translate .45s var(--app-ease); }
.app-dialog.is-open .app-action-sheet { translate: 0 0; }
.app-as-head { border-top: 1px solid var(--app-neutral-200); border-radius: 24px 24px 0 0; background: var(--app-bg); }
.app-as-handle { display: block; width: 80px; height: 4px; margin: 8px auto; border-radius: 9999px; background: rgba(20, 19, 22, .24); }
.app-as-head p { padding: 12px 16px; font: 700 16px/24px var(--app-display); text-align: center; }
.app-as-body { padding: 12px 16px; background: var(--app-grad-success); }
.app-as-actions { display: flex; gap: 8px; padding: 12px 16px 34px; background: var(--app-mint-200); }
.app-as-actions .app-btn { width: auto; }
.app-as-actions .app-btn--accent { flex: 1; }

/* ==========================================================================
   Ekran „Inspiracje” (Figma: TAB 1 - Inspirations, 312:149749)
   Feed z nagłówkiem na tle z liśćmi, postami, artykułami i insertami.
   ========================================================================== */
.app-phone--insp .app-screen { padding: 0 0 86px; overscroll-behavior: contain; }
.app-status--clear { background: transparent; transition: background .25s ease; }
.app-status--clear.is-solid { background: var(--app-bg); }

/* Tło nagłówka: asset-bg-hobb-theme-01-gradient (wyrenderowane z Figmy do webp) */
.app-insp-top { padding-top: var(--app-sb); background: url("../asset-app-insp-bg.webp") center top / 100% auto no-repeat, var(--app-bg); }

/* APP BAR/MAIN NAVIGATION: h56, px16 */
.app-appbar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; }
.app-glass { display: flex; align-items: center; height: 36px; border: 1px solid #fff; border-radius: 9999px; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.app-appbar-me { position: relative; display: inline-flex; padding: 3px; border-radius: 9999px; background: #fff; }
.app-appbar-me img { width: 34px; height: 34px; border: 1px solid #ad87fe; border-radius: 50%; object-fit: cover; }
.app-appbar-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; font-size: 16px; }
.app-appbar-logo { width: 32px; height: 32px; border-radius: 50%; box-shadow: var(--app-shadow-card); }
.app-appbar-plus { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -3px -3px -3px 0; border-radius: 50%; background: #fff; box-shadow: var(--app-shadow-card); }
.app-appbar-plus img { width: 36px; height: 36px; }

/* widgets - inspiration tab widgets */
.app-widgets { padding: 12px 16px; }
.app-widgets-box { display: grid; gap: 6px; padding: 6px; border: 1px solid #fff; border-radius: 16px; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.app-w-user { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 6px 8px; }
.app-w-user > b { font: 700 14px/24px var(--app-display); }
.app-w-rank { display: inline-flex; align-items: center; gap: 4px; font: 400 12px/20px var(--app-display); }
.app-w-rank b { font-weight: 700; }
.app-rank { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid #fff; border-radius: 50%; background: linear-gradient(160deg, #b9adff, #7d8cf6); font-size: 9px; line-height: 1; box-shadow: var(--app-shadow-card); }
.app-w-row { display: flex; align-items: center; gap: 8px; height: 36px; padding: 6px 6px 6px 12px; border-radius: 8px; background: #fff; box-shadow: var(--app-shadow-card); font: 400 14px/24px var(--app-display); }
.app-w-row > span:first-child { flex: 1; }
.app-w-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--app-line); border-radius: 4px; background: var(--app-mint); color: #125432; font: 400 12px/20px var(--app-display); box-shadow: var(--app-shadow-card); }
.app-w-chip .ph { font-size: 16px; }
.app-w-game { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 4px 8px; font: 400 12px/20px var(--app-display); }
.app-w-game > span { display: inline-flex; align-items: center; gap: 4px; }
.app-w-game .ph { font-size: 16px; }
.app-w-game b { font-weight: 700; }

/* TAB/INSPIRATIONS + QUICK FILTERS (przyklejone pod paskiem statusu) */
.app-feed-head { position: sticky; z-index: 3; top: var(--app-sb); background: var(--app-bg); }
.app-feed-tabs { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 16px; padding-top: 16px; border-bottom: 1px solid var(--app-line); }
.app-feed-tabs > div { display: flex; gap: 12px; }
.app-feed-tab { padding: 8px 0; border-bottom: 2px solid transparent; color: var(--app-muted); font: 400 12px/20px var(--app-display); }
.app-feed-tab.is-active { border-color: var(--app-primary); color: var(--app-ink); font-weight: 700; }
.app-feed-filter { display: flex; align-items: flex-end; justify-content: flex-end; width: 24px; height: 36px; padding-bottom: 8px; font-size: 20px; }
.app-chips { display: flex; gap: 4px; padding: 12px 16px; overflow: hidden; }
.app-chip { flex: none; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: rgba(20, 19, 22, .06); font: 400 12px/20px var(--app-display); }
.app-chip.is-active { border-color: var(--app-line); background: #fff; box-shadow: var(--app-shadow-card); }

/* Feed */
.app-feed { display: grid; gap: 12px; padding-top: 2px; }
.app-av24 { position: relative; display: inline-block; flex: none; width: 24px; height: 24px; border: 1px solid var(--app-line); border-radius: 50%; box-shadow: var(--app-shadow-card); }
.app-av24 img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.app-plus-badge { position: absolute; top: -3px; left: -3px; display: inline-grid; place-items: center; width: 12px; height: 12px; border: 1px solid #61e6c6; border-radius: 2px 6px 2px 6px; background: linear-gradient(180deg, #975ff3, #25a764); color: #fff; font-size: 8px; }
.app-more32 { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; }

/* CARD - POST */
.app-fpost { overflow: hidden; border-radius: 4px 4px 16px 16px; background: #fff; box-shadow: var(--app-shadow-card); }
.app-fpost-top { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; }
.app-fpost-top > span:nth-child(2) { flex: 1; font: 700 14px/20px var(--app-display); }
.app-fpost-top .app-av24 { width: 28px; height: 28px; }
.app-fpost-img { width: 100%; height: auto; aspect-ratio: 375 / 469; object-fit: cover; }
.app-fpost-text { padding: 12px 16px 8px; font: 400 14px/24px var(--app-font); }
.app-liked { display: flex; align-items: center; gap: 4px; padding: 8px 16px; font: 400 12px/20px var(--app-font); }
.app-stack { display: flex; flex: none; }
.app-stack img { width: 24px; height: 24px; margin-right: -8px; border: 2px solid var(--app-bg); border-radius: 50%; background: var(--app-high); object-fit: cover; }
.app-stack img:last-child { margin-right: 0; }
.app-cstatus { display: flex; justify-content: space-between; padding: 8px 16px; font: 400 12px/20px var(--app-display); }
.app-factions { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px; }
.app-factions > span:first-child { display: flex; gap: 4px; }
.app-fbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; background: #fff; font-size: 16px; }
.app-flike { display: inline-flex; align-items: center; gap: 4px; font: 700 12px/20px var(--app-display); }
.app-flike .app-like-btn { font-size: 20px; }
.app-ui [data-app-like], .app-ui [data-app-save], .app-ui [data-app-follow] { cursor: pointer; transition: background .2s ease, color .2s ease; }
.app-ui [data-app-like] i, .app-ui [data-app-save] i { pointer-events: none; }
/* Bez skalowania przy :active: w pochylonym telefonie zmiana geometrii przenosiła click na rodzica */
.app-ui [data-app-like].is-liked i, .app-ui [data-app-save].is-saved i { animation: appPop .3s var(--app-ease); }
@keyframes appPop { 50% { scale: 1.25; } }
.app-fbtn.is-saved { color: var(--app-primary); }

/* Article card - big */
.app-farticle { overflow: hidden; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-grad-surface); box-shadow: var(--app-shadow-card); }
.app-fa-head { display: grid; gap: 8px; padding: 16px 16px 12px; }
.app-fa-authors { display: flex; align-items: center; justify-content: space-between; }
.app-fa-pill { display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px 2px 2px; border-radius: 9999px; background: #fff; font: 500 14px/24px var(--app-display); box-shadow: var(--app-shadow-card); }
.app-fa-pill .app-stack img { border-color: #fff; }
.app-fa-pill b { font-weight: 500; } /* fiolet tylko dla autora = Ty, w mockupach go nie używamy */
.app-fa-opt { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(20, 19, 22, .04); font-size: 20px; }
.app-fa-title { font: 700 20px/30px var(--app-display); }
.app-fa-details { display: flex; align-items: center; justify-content: space-between; }
.app-fa-kicker { color: #125432; font: 500 12px/20px var(--app-font); letter-spacing: .2px; text-transform: uppercase; }
.app-fa-time { color: var(--app-muted); font: 400 12px/20px var(--app-font); }
.app-fa-img { position: relative; margin: 0 16px; overflow: hidden; border-radius: 16px; aspect-ratio: 375 / 210; }
.app-fa-img img { width: 100%; height: 100%; object-fit: cover; }
.app-fa-badge { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; height: 24px; padding: 4px 8px; border: 1.25px solid #f2e6d0; border-radius: 9999px; background: var(--app-mid); color: #fff; font: 500 12px/1 var(--app-display); }
.app-fa-main { display: grid; gap: 12px; padding: 12px 16px; }
.app-fa-textrow { display: flex; align-items: center; gap: 12px; }
.app-fa-text { display: -webkit-box; flex: 1; overflow: hidden; font: 400 16px/24px var(--app-font); -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.app-fa-vbtns { display: grid; gap: 4px; }
.app-fa-vbtns .app-fbtn { background: var(--app-bg); }
.app-fa-main .app-liked, .app-fa-main .app-cstatus { padding: 0; }
.app-fa-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 16px; }
.app-read { display: inline-flex; align-items: center; height: 32px; padding: 8px 12px; border-radius: 8px; background: var(--app-ink); color: #fff; font: 500 14px/1 var(--app-display); }

/* FEED INSERT: wspólny nagłówek */
.app-insert { display: grid; gap: 16px; padding: 48px 0; background: var(--app-bg); }
.app-insert-head { display: grid; gap: 4px; padding: 0 16px; }
.app-insert-label { display: flex; align-items: center; gap: 8px; color: var(--app-high); font: 500 12px/20px var(--app-font); letter-spacing: .2px; text-transform: uppercase; }
.app-insert-label .ph { font-size: 20px; }
.app-insert-title { font: 700 20px/30px var(--app-display); }
.app-insert-meta { font: 400 14px/24px var(--app-display); }
.app-insert-meta b { font-weight: 700; }
.app-insert-meta i { padding: 0 4px; color: var(--app-high); font-style: normal; }
.app-insert .app-hscroll { padding-top: 0; padding-bottom: 0; }
.app-insert-col { display: grid; flex: none; gap: 6px; width: 280px; }
.app-insert-col .app-card { width: auto; }
.app-insert-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 16px; font: 400 14px/24px var(--app-font); }
.app-insert-foot .app-btn-sm { flex: none; gap: 8px; font-weight: 500; white-space: nowrap; }

/* FEED INSERT - Discover creators */
.app-creator { position: relative; display: grid; flex: none; justify-items: center; gap: 12px; width: 180px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: var(--app-shadow-card); }
.app-creator-av { position: relative; width: 100px; height: 100px; }
.app-creator-av img { width: 100%; height: 100%; border: 1px solid var(--app-line); border-radius: 50%; object-fit: cover; }
.app-creator-av .app-plus-badge { top: 0; left: 0; width: 20px; height: 20px; border-radius: 2px 12px 2px 12px; font-size: 12px; }
.app-creator-info { display: grid; gap: 8px; width: 100%; font: 400 12px/20px var(--app-display); text-align: center; }
.app-creator-info strong { display: block; overflow: hidden; font: 700 14px/24px var(--app-display); text-overflow: ellipsis; white-space: nowrap; }
.app-creator-stats { display: flex; gap: 4px; }
.app-creator-stats > span { display: grid; flex: 1; }
.app-creator-stats b, .app-creator-fans b { font-weight: 700; }
.app-creator-info hr { height: 1px; margin: 0; border: 0; background: var(--app-line); }
.app-creator-fans { display: flex; justify-content: center; gap: 4px; }
.app-follow { display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; border-radius: 8px; background: var(--app-ink); color: #fff; font: 500 14px/1 var(--app-display); }
.app-follow-on { display: none; }
.app-follow.is-following .app-follow-on { display: inline; }
.app-follow.is-following .app-follow-off { display: none; }
.app-follow.is-following { background: rgba(20, 19, 22, .04); color: var(--app-ink); }
.app-creator > .app-more-abs { position: absolute; top: 8px; right: 8px; display: inline-grid; place-items: center; width: 24px; height: 24px; font-size: 16px; }

.app-feed-end { display: grid; justify-items: center; gap: 8px; padding: 32px 24px 120px; text-align: center; }
.app-feed-end > span { font-size: 28px; line-height: 1; }
.app-feed-end strong { font: 700 18px/24px var(--app-display); }
.app-feed-end p { color: var(--app-muted); font: 400 14px/22px var(--app-font); }
.app-feed-end .app-btn-sm { margin-top: 6px; text-decoration: none; }

/* Dolna nawigacja (MAIN NAVIGATION/TAB BAR) */
.app-tabbar { position: absolute; z-index: 5; inset: auto 0 0; padding-bottom: 22px; border-top: 1px solid var(--app-line); background: linear-gradient(180deg, rgba(243, 243, 247, .86), rgba(255, 255, 255, .96)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.app-tabbar > div { display: grid; grid-template-columns: repeat(5, 1fr); height: 64px; }
.app-tabbar button { display: grid; justify-items: center; align-content: center; gap: 2px; color: var(--app-ink); font: 500 9px/16px var(--app-display); }
.app-tabbar button > span:first-child { display: inline-grid; place-items: center; width: 36px; height: 28px; border-radius: 9999px; font-size: 20px; transition: background .2s ease; }
.app-tabbar button.is-active > span:first-child { background: #dfd5ff; color: #4e267e; }
.app-tabbar button.is-active { color: #4e267e; }
.app-phone--insp .app-home { bottom: 8px; }

/* Podpowiedź i komunikat trybu gościa */
.app-hint { position: absolute; z-index: 6; left: 50%; bottom: 102px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9999px; background: rgba(20, 19, 22, .82); color: #fff; font: 600 13px/1 var(--app-font); white-space: nowrap; translate: -50% 0; pointer-events: none; transition: opacity .4s ease, translate .4s var(--app-ease); animation: appHint 1.8s ease-in-out infinite; }
.app-hint.is-hidden { opacity: 0; translate: -50% 10px; animation: none; }
@keyframes appHint { 50% { translate: -50% -4px; } }
.app-toast { position: absolute; z-index: 7; left: 16px; right: 16px; bottom: 102px; padding: 12px 14px; border-radius: 12px; background: var(--app-ink); color: #fff; font: 500 13px/18px var(--app-font); text-align: center; opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity .3s ease, translate .3s var(--app-ease); }
.app-toast.is-open { opacity: 1; translate: 0 0; }

/* ── Ekran skanowania na stronie głównej (Nowość) ─────────────────────── */
.app-phone--scan .app-photo { aspect-ratio: 1 / 1; }
.app-scan-sheet { margin: 12px; padding: 12px; border-radius: 16px; background: var(--app-surface); box-shadow: var(--app-shadow-card); }
.app-scan-stack { display: grid; }
.app-scan-stack > * { grid-area: 1 / 1; transition: opacity .35s ease; }
.is-results .app-scan-stack .app-skeleton { opacity: 0; }
:not(.is-results) > .app-phone .app-scan-stack [data-scan-set] { opacity: 0; }

/* Telefon bez przewijania (mockup w sekcji) */
.app-phone--static .app-screen { overflow: hidden; padding-top: var(--app-sb); }
.app-phone--static .app-status { background: var(--app-bg); }

/* ── Ranking (Figma: Centrum osiągnięć, 261:121813) ───────────────────── */
.app-lb { display: grid; gap: 6px; padding: 12px; background: var(--app-bg); }
.app-lb-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 4px 6px; }
.app-lb-head strong { font: 700 18px/24px var(--app-display); }
.app-lb-head span { color: var(--app-muted); font: 400 12px/20px var(--app-display); }
.app-lb-first { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 12px; border-radius: 16px; background: #fff; box-shadow: var(--app-shadow-card); }
.app-lb-first strong { font: 700 20px/28px var(--app-display); }
.app-lb-first.is-sm strong { font-size: 15px; line-height: 22px; }
.app-lb-place { font: 400 14px/20px var(--app-display); text-transform: uppercase; }
.app-lb-medal { position: absolute; top: 10px; right: 12px; font-size: 20px; line-height: 1; }
.app-lb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.app-lb-av { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--app-line); border-radius: 50%; background: var(--c, var(--app-lavender)); font: 700 14px/1 var(--app-display); }
.app-lb-av.is-gold, .app-lb-av.is-silver, .app-lb-av.is-bronze { width: 72px; height: 72px; border: 3px solid; font-size: 28px; }
.app-lb-duo .app-lb-av { width: 56px; height: 56px; font-size: 22px; }
.app-lb-av.is-gold { border-color: #e7b73c; }
.app-lb-av.is-silver { border-color: #b9b7c2; }
.app-lb-av.is-bronze { border-color: #cf8a4f; }
.app-lb-list { display: grid; gap: 6px; }
.app-lb-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #fff; font: 700 14px/24px var(--app-display); }
.app-lb-list li > b { width: 18px; font-weight: 700; }

/* Zmiana zdrowia na karcie rośliny (końcowe CTA) */
.app-health-change { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--app-grad-success); }
.app-health-change-label { color: var(--app-muted); font: 500 12px/20px var(--app-font); }
.app-health-change > div { display: flex; align-items: center; gap: 10px; }
.app-health-change .app-health-micro { padding: 0; font-size: 13px; font-weight: 700; }
.app-health-change .app-health-micro[data-level="1"] { color: var(--app-low); }
.app-health-change .app-health-micro[data-level="3"] { color: var(--app-high); }

/* ── Koniec feedu: większe CTA i liście wysuwające się spod nawigacji ── */
.app-feed-end .app-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 10px; border-radius: 12px; background: linear-gradient(100deg, #25a764 0%, #2ed17d 55%, #77e71e 100%); color: #141316; font: 700 16px/1 var(--app-display); text-decoration: none; box-shadow: 0 14px 30px -14px rgba(37, 167, 100, .75); }
.app-feed-end .app-go .ph { font-size: 20px; }
.app-leaves { position: absolute; z-index: 4; inset: auto 0 64px; height: 130px; pointer-events: none; overflow: hidden; }
.app-leaves img { position: absolute; bottom: -18px; width: 118px; height: auto; opacity: 0; transition: translate .9s var(--app-ease), rotate .9s var(--app-ease), opacity .5s ease; filter: drop-shadow(4px 10px 10px rgba(60, 19, 113, .18)); }
.app-leaves img:nth-child(1) { left: -44px; translate: 0 120%; rotate: 18deg; }
.app-leaves img:nth-child(2) { right: -44px; scale: -1 1; translate: 0 120%; rotate: -18deg; }
.app-leaves img:nth-child(3) { display: none; }
.is-end .app-leaves img { opacity: 1; translate: 0 0; rotate: 0deg; }
.is-end .app-leaves img:nth-child(2) { transition-delay: .12s; }
.is-end .app-leaves img:nth-child(3) { transition-delay: .24s; opacity: .9; }

/* ── Ekrany szczegółów: pasek „Post:” / „Artykuł:” (APP BAR/Post) ── */
.app-dtl-bar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: var(--app-bg); }
.app-dtl-bar > .app-ico { width: 40px; height: 40px; font-size: 24px; }
.app-dtl-bar > div { flex: 1; min-width: 0; }
.app-dtl-bar strong { display: block; font: 700 18px/24px var(--app-display); }
.app-dtl-bar small { display: block; font: 500 12px/1 var(--app-display); }
.app-dtl-bar > .app-fbtn { background: #fff; }
.app-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 32px 16px 0; font: 700 20px/30px var(--app-display); }
.app-sec-h small { font: 700 12px/20px var(--app-display); }
.app-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 16px 16px; }
.app-tags span { padding: 4px 8px; border-radius: 4px; background: #fff; box-shadow: 0 1px 1.41px rgba(0, 0, 0, .2); font: 400 10px/16px var(--app-font); }

/* Pełny artykuł (Figma 261:121812) */
.app-art-head { border-top: 1px solid var(--app-line); border-radius: 16px 16px 0 0; background: var(--app-grad-surface); }
.app-art-head > .app-fa-head { gap: 12px; }
.app-art-title { font: 700 24px/30px var(--app-display); }
.app-art-meta { display: grid; gap: 12px; padding: 12px 16px 0; }
.app-art-meta .app-liked, .app-art-meta .app-cstatus { padding: 0; }
.app-art-cat { display: grid; gap: 4px; padding: 12px 16px; color: var(--app-muted); font: 400 12px/20px var(--app-font); }
.app-art-cat span { display: inline-flex; align-items: center; gap: 4px; color: var(--app-ink); font: 400 14px/24px var(--app-display); }
.app-art-cat .ph { font-size: 16px; }
.app-art-first { padding: 16px; border-bottom: 1px solid var(--app-line); border-radius: 0 0 16px 16px; background: #fff; font: 400 18px/30px var(--app-font); }
.app-art-first p + p { margin-top: 30px; }
.app-art-body { display: grid; gap: 24px; padding: 16px 0 24px; }
.app-art-text { display: grid; gap: 24px; padding: 16px 16px 0; font: 400 16px/24px var(--app-font); }
.app-art-text h4 { font: 700 20px/24px var(--app-display); }
.app-art-gal { display: grid; gap: 8px; padding-left: 16px; }
.app-art-gal > div { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.app-art-gal > div::-webkit-scrollbar { display: none; }
.app-art-gal img { flex: none; width: 280px; height: 360px; border-radius: 16px; object-fit: cover; }
.app-art-gal > div::after { content: ""; flex: none; width: 4px; }
.app-art-cap { color: var(--app-muted); font: 400 12px/20px var(--app-display); }
.app-art-img { display: grid; gap: 8px; padding: 0 16px; }
.app-art-img img { width: 100%; height: 346px; border-radius: 16px; object-fit: cover; }
.app-art-plants { display: grid; gap: 6px; padding: 0 16px; }
.app-art-actionbar { position: sticky; z-index: 3; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 6px 16px; border-top: 1px solid var(--app-line); background: #fff; }
.app-art-actionbar > span:first-child { display: flex; gap: 4px; }

/* Autor (SECTION/Author default) */
.app-author { display: flex; gap: 12px; padding: 16px; border-bottom: 1px solid var(--app-line); }
.app-author > img { flex: none; width: 64px; height: 64px; border: 1px solid var(--app-line); border-radius: 50%; object-fit: cover; }
.app-author > div { display: grid; flex: 1; gap: 12px; min-width: 0; }
.app-author strong { display: block; font: 700 16px/24px var(--app-display); }
.app-author-row { display: flex; align-items: center; justify-content: space-between; font: 400 14px/24px var(--app-display); }
.app-author-row .app-follow { width: auto; height: auto; padding: 6px 8px; font-size: 12px; }
.app-author p { font: 400 14px/24px var(--app-font); }
.app-author-stats { display: flex; gap: 12px; font: 400 12px/20px var(--app-display); }
.app-author-stats span { display: grid; }
.app-author-stats b { font-weight: 700; }

/* Komentarze: przypięty i popularny (ORGANISM/Comment types) */
.app-comment { position: relative; }
.app-comment.is-pinned { background: linear-gradient(-48.7deg, #abedcb 0%, rgba(255, 255, 255, 0) 17.4%); }
.app-comment.is-popular { background: linear-gradient(-48.7deg, #94baef 0%, rgba(255, 255, 255, 0) 17.4%); }
.app-comment-flag { position: absolute; right: 19px; bottom: 21px; display: inline-flex; align-items: center; gap: 4px; color: #3a66d6; font: 500 10px/16px var(--app-display); }
.app-comment.is-pinned .app-comment-flag { color: var(--app-high); }
.app-comment-flag .ph-fill { font-size: 16px; }
.app-comment-stats { display: flex; gap: 24px; font: 700 12px/20px var(--app-display); }
.app-comment-stats span { display: inline-flex; align-items: center; gap: 4px; }
.app-comment-stats .ph { font-size: 14px; }
.app-add-comment .app-btn-dark { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 41px; border-radius: 8px; background: var(--app-ink); color: #fff; font: 500 14px/1 var(--app-display); }
.app-dtl-view[hidden] { display: none; }
.app-next { padding-top: 16px; }
.app-next .app-farticle { flex: none; width: 320px; }
.app-phone--detail .app-screen { padding-bottom: 0; }

/* Karty osiągnięć (CARD/gamification achievement big card, 261:121814) */
.app-achs { display: flex; gap: 6px; }
.app-ach { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; width: 220px; }
.app-ach-pin { position: absolute; z-index: 5; top: 12px; right: 16px; width: 16px; height: 16px; }
.app-ach-badge { position: relative; z-index: 3; display: flex; width: 100px; height: 100px; margin-bottom: -64px; padding: 4px; border-radius: 9999px; background: linear-gradient(180deg, var(--app-bg), #fbefda); }
.app-ach-badge > span { display: grid; flex: 1; place-items: center; padding: 8px; border-radius: 9999px; background: #fff; }
.app-ach-badge img { width: 100%; height: 100%; object-fit: contain; }
.app-ach-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; width: 100%; margin-bottom: -64px; padding: 80px 12px 12px; border-bottom: 1px solid var(--app-line); border-radius: 16px; background: #fff; box-shadow: var(--app-shadow-card); text-align: center; }
.app-ach-card.is-sub { padding-top: 16px; }
.app-ach > .app-ach-card.is-sub:first-child { margin-top: 36px; }
.app-ach-sub { display: inline-flex; align-items: center; gap: 4px; color: var(--app-muted); font: 400 12px/20px var(--app-display); }
.app-ach-sub .ph { font-size: 14px; }
.app-ach-card strong { font: 700 16px/24px var(--app-display); }
.app-ach-card p { font: 400 14px/24px var(--app-font); }
.app-ach-rar { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 9999px; background: var(--app-bg); font: 400 10px/16px var(--app-display); }
.app-ach-rar i { width: 9px; height: 9px; border: 1px solid var(--app-line); border-radius: 50%; background: var(--c, #a7a3b6); }
.app-ach-pts { font: 400 14px/24px var(--app-display); }
.app-ach-pts b { font-weight: 700; }
.app-ach-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; width: 100%; padding: 72px 16px 8px; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-bg); font: 400 14px/24px var(--app-display); }
.app-ach-foot.is-done { background: var(--app-mint); color: #125432; }
.app-ach-foot small { flex: 1; text-align: right; font-size: 12px; }
.app-ach-foot.is-progress { justify-content: center; }

/* ── Profil użytkownika (Figma 261:121823) ── */
.app-prof-top { position: relative; padding-top: var(--app-sb); background: url("../asset-app-profile-bg.webp") center top / 100% auto no-repeat, #ad87fe; }
.app-prof-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; }
.app-prof-bar .app-round { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-size: 24px; }
.app-prof-bar .app-round.is-sm { width: 32px; height: 32px; font-size: 20px; }
.app-prof-head { position: relative; height: 128px; }
.app-prof-actions { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 16px; border-radius: 0; background: #fff; }
.app-prof-actions > span:first-child { display: flex; gap: 8px; }
.app-prof-actions .app-icon-sq { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; font-size: 16px; }
.app-prof-actions .app-follow { width: auto; padding: 0 12px; }
.app-prof-av { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; width: 100px; height: 100px; border: 2.5px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: var(--app-shadow-card); }
.app-prof-info { display: grid; gap: 12px; padding-top: 12px; border-radius: 0 0 24px 24px; background: linear-gradient(180deg, #fff, var(--app-bg)); }
.app-prof-name { display: grid; justify-items: center; padding: 0 16px; }
.app-prof-name strong { display: inline-flex; align-items: center; gap: 8px; font: 700 20px/30px var(--app-display); }
.app-prof-name strong .app-plus-badge { position: static; width: 20px; height: 20px; border-radius: 2px 12px 2px 12px; font-size: 13px; }
.app-prof-name span { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/20px var(--app-display); }
.app-prof-name i.app-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--app-primary); }
.app-prof-name b { color: var(--app-primary); font-weight: 400; }
.app-prof-bio { padding: 0 16px; font: 400 14px/24px var(--app-font); }
.app-prof-widgets { padding: 0 16px 16px; }
.app-prof-widgets .app-widgets-box { gap: 4px; }
.app-prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.app-prof-stats span { display: grid; justify-items: center; padding: 6px; font: 400 10px/16px var(--app-font); }
.app-prof-stats b { font: 700 12px/20px var(--app-display); }
.app-prof-rank { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 8px; background: #fff; }
.app-prof-rank > span:first-child { display: flex; align-items: center; gap: 8px; font: 400 10px/16px var(--app-display); }
.app-prof-rank > i { height: 32px; background: var(--app-line); }
.app-prof-rank > span:last-child { display: grid; justify-items: end; font: 400 12px/20px var(--app-display); }
.app-lvl { position: relative; display: inline-grid; place-items: center; width: 32px; height: 36px; border: 1px solid #fff; border-radius: 12px; background: var(--lvl, #ffbfc4); font-size: 20px; line-height: 30px; }
.app-lvl small { position: absolute; bottom: 2px; display: grid; place-items: center; width: 16px; height: 12px; border-radius: 4px 4px 2px 2px; background: #fff; font: 500 9px/1 var(--app-display); }
.app-prof-ex { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 8px; background: #fff; font: 400 14px/24px var(--app-display); }
.app-prof-ex > span:first-child { flex: 1; }
.app-prof-ex .app-dark-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: var(--app-ink); color: #fff; font: 400 12px/20px var(--app-display); }
.app-prof-follow { display: flex; justify-content: space-between; padding: 0 8px; font: 400 12px/20px var(--app-display); }
.app-prof-follow span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; }
.app-prof-follow b { font-weight: 700; }
.app-prof-follow .ph { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 4px; background: var(--app-line); font-size: 12px; line-height: 16px; text-align: center; }
.app-prof-rows { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; gap: 6px; padding: 16px 0 16px 16px; overflow-x: auto; scrollbar-width: none; }
.app-prof-rows::-webkit-scrollbar { display: none; }
.app-prof-rows .app-card { width: 280px; }
.app-prof-rows::after { content: ""; width: 10px; }
.app-hscroll .app-fpost { flex: none; width: 300px; }

/* ── Centrum osiągnięć (Figma 261:121813, 261:121814) ── */
.app-gm-bar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: var(--app-bg); }
.app-gm-bar > .app-ico { width: 40px; height: 40px; font-size: 24px; }
.app-gm-bar strong { flex: 1; font: 700 18px/24px var(--app-display); }
.app-gm-bar .app-fbtn { background: #fff; font-size: 20px; }
.app-seg-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 16px; padding: 4px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-bg); }
.app-seg-ctl button { padding: 8px 12px; border-radius: 8px; font: 500 12px/1 var(--app-display); text-align: center; }
.app-seg-ctl button[aria-pressed="true"] { background: #fff; box-shadow: var(--app-shadow-card); }
.app-gm-head { display: grid; gap: 8px; margin-top: 8px; padding: 8px 8px 12px; border-bottom: 1px solid var(--app-line); border-radius: 0 0 24px 24px; background: var(--app-grad-surface); }
.app-gm-user { display: flex; align-items: center; gap: 12px; height: 56px; padding: 4px 8px; }
.app-gm-user img { width: 48px; height: 48px; border: 1px solid var(--app-line); border-radius: 50%; object-fit: cover; }
.app-gm-user > div { flex: 1; text-align: center; }
.app-gm-user strong { display: block; font: 700 14px/24px var(--app-display); }
.app-gm-user small { font: 500 12px/1 var(--app-display); }
.app-gm-user > b { font: 700 12px/20px var(--app-display); }
.app-gm-theme { display: grid; gap: 8px; padding: 8px 4px 4px; border-radius: 12px; background: linear-gradient(180deg, #abedcb, #fbefda); }
.app-gm-theme.is-blue { background: linear-gradient(180deg, #b9d1f5, #efe8ff); }
.app-gm-theme > div:first-child { display: flex; justify-content: space-between; padding: 0 12px; font: 400 12px/20px var(--app-display); }
.app-gm-theme > div:last-child { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: #fff; box-shadow: var(--app-shadow-card); font: 400 14px/24px var(--app-display); }
.app-gm-theme b { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.app-gm-link { display: flex; justify-content: space-between; padding: 0 8px; font: 400 12px/20px var(--app-display); }
.app-gm-link b { display: inline-flex; align-items: center; gap: 4px; }
.app-gm-view[hidden] { display: none; }
.app-lb-podium { display: grid; gap: 6px; padding: 8px; }
.app-lb-podium .app-lb-first { border: 1px solid var(--app-line); box-shadow: none; }
.app-lb-rows { display: grid; gap: 6px; padding: 0 8px 70px; }
.app-lb-rows li { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--app-line); border-radius: 9999px; background: #fff; font: 700 14px/24px var(--app-display); }
.app-lb-rows li > b { width: 22px; }
.app-lb-me { position: sticky; z-index: 3; bottom: 14px; display: flex; align-items: center; gap: 8px; margin: -60px 12px 0; padding: 8px 14px; border-radius: 9999px; background: var(--app-ink); color: #fff; font: 700 13px/24px var(--app-display); }
.app-lb-me img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.app-lb-me span:nth-of-type(2) { flex: 1; font-weight: 400; }
.app-ach-group { display: grid; gap: 8px; padding: 32px 16px 0; }
.app-ach-group h4 { font: 700 20px/30px var(--app-display); }
.app-ach-group p { font: 400 12px/20px var(--app-font); }
.app-ach-group small { color: var(--app-muted); font: 400 14px/24px var(--app-display); }
.app-ach-scroll { display: flex; gap: 6px; padding: 16px 0 24px 16px; overflow-x: auto; scrollbar-width: none; }
.app-ach-scroll::-webkit-scrollbar { display: none; }
.app-ach-scroll .app-ach { flex: none; }
.app-pins { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; padding: 6px 6px 6px 16px; border-radius: 9999px; background: #fff; box-shadow: var(--app-shadow-card); }
.app-pins > div { flex: 1; display: grid; font: 700 12px/20px var(--app-display); }
.app-pins small { font: 400 10px/16px var(--app-display); }
.app-pins img { width: 44px; height: 44px; padding: 4px; border: 1px solid var(--app-line); border-radius: 50%; background: #fff; object-fit: contain; }

/* Ekrany dotykowe: zablokowane przewijanie ekranu telefonu do pierwszego stuknięcia (shared-layout.js) */
/* Blokada przewijania na ekranach dotykowych: bez zmiany overflow (iOS nie przywraca wtedy przewijania palcem),
   dotyk po prostu przechodzi do strony, a stuknięcie trafia w telefon i odblokowuje ekran */
.app-phone.is-scroll-locked .app-screen { pointer-events: none; }
.app-scroll-gate { display: none; }
.app-phone.is-scroll-locked .app-scroll-gate { position: absolute; z-index: 9; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 9999px; background: rgba(20, 19, 22, .84); color: #fff; font: 600 15px/1 var(--app-font); white-space: nowrap; translate: -50% -50%; box-shadow: 0 12px 30px -10px rgba(20, 19, 22, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.app-scroll-gate .ph { font-size: 20px; }
.app-phone.is-scroll-locked .app-hint { display: none; }

/* ── Harmonogram (Figma 117:48178 TAB 3 - SCHEDULE VIEW, 221:154692 bez zaległych) ── */
.app-phone--sched .app-insp-top { padding-bottom: 4px; background-size: 375px auto; }
.app-cal { padding: 0 16px 12px; }
.app-cal-box { padding: 4px; border: 1px solid #fff; border-radius: 16px; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.app-cal-month { display: flex; align-items: center; gap: 8px; height: 48px; padding: 8px; }
.app-cal-month b { font: 700 16px/24px var(--app-display); }
.app-cal-nav { display: inline-grid; place-items: center; width: 32px; height: 32px; font-size: 16px; }
.app-cal-full { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 8px; background: #fff; font-size: 16px; box-shadow: 0 8px 16px rgba(20, 19, 22, .04), 0 1px 4px rgba(20, 19, 22, .04); }
.app-cal-heads { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 4px 4px 6px; color: var(--app-muted); font: 400 12px/20px var(--app-font); text-align: center; }
.app-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px 8px 4px; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; }
.app-cal-day { display: grid; justify-items: center; gap: 2px; }
.app-cal-day b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; color: #000; font: 400 12px/20px var(--app-font); }
.app-cal-day small { color: var(--app-muted); font: 600 10px/16px var(--app-font); }
.app-cal-day.has-events b { background: var(--app-bg); color: var(--app-ink); }
.app-cal-day.has-events small, .app-cal-day.is-today small { color: var(--app-high); }
.app-cal-day.is-today b { background: linear-gradient(180deg, #975ff3 0%, #25a764 100%); color: #fff; font-weight: 700; text-shadow: 0 1px 1.41px rgba(0, 0, 0, .2); }
.app-cal-window { padding: 12px 0 0; background: linear-gradient(180deg, #efe8ff, var(--app-bg)); }
.app-cal-window .app-cal-box { background: rgba(255, 255, 255, .7); }

.app-sc-actions { display: flex; gap: 8px; padding: 0 16px 16px; }
.app-sc-actions > span { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; padding: 8px 12px; border-radius: 8px; font: 700 14px/24px var(--app-display); box-shadow: 0 1px 1.41px rgba(0, 0, 0, .2); cursor: pointer; }
.app-sc-actions .ph, .app-sc-actions .ph-duotone { font-size: 20px; }
.app-sc-new { flex: 193 1 0; background: var(--app-ink); color: #fff; }
.app-sc-notif { flex: 142 1 0; background: #fff; color: #000; font-weight: 400 !important; }

.app-sh { padding: 32px 16px 0; }
.app-sh-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-sh-title { margin: 0; font: 700 16px/24px var(--app-display); }
.app-sh--big .app-sh-title { font-size: 20px; line-height: 30px; }
.app-sh-link { color: var(--app-ink); font: 700 12px/20px var(--app-display); white-space: nowrap; }
.app-sh-link:hover { text-decoration: underline; }
.app-sh-sub { margin: 4px 0 0; font: 400 12px/20px var(--app-font); }
.app-sc-list { display: grid; gap: 8px; padding: 16px; }

.app-sc { border: 1px solid var(--app-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 16px rgba(20, 19, 22, .04), 0 1px 4px rgba(20, 19, 22, .04); transition: opacity .35s ease, background .35s ease; }
.app-sc-main { border-radius: 12px; background: #fff; box-shadow: 0 8px 16px rgba(20, 19, 22, .04), 0 1px 4px rgba(20, 19, 22, .04); }
.app-sc-top { display: flex; padding: 4px; }
.app-sc-img { position: relative; flex: none; width: 60px; height: 60px; overflow: hidden; border-radius: 8px; }
.app-sc-img img { width: 100%; height: 100%; object-fit: cover; }
.app-sc-img .app-rarity { padding: 3px; font-size: 11px; }
.app-sc-info { flex: 1; min-width: 0; padding: 8px; }
.app-sc-name { display: block; overflow: hidden; font: 700 14px/24px var(--app-display); white-space: nowrap; text-overflow: ellipsis; }
.app-sc-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-sc-species { overflow: hidden; color: var(--app-muted); font: 400 12px/20px var(--app-display); white-space: nowrap; text-overflow: ellipsis; }
.app-sc-sub .app-status-chip { flex: none; }
.app-sc-extras { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px; }
.app-sc-x { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 4px; border-radius: 9999px; background: rgba(20, 19, 22, .04); font: 500 14px/1 var(--app-display); }
.app-sc-x .ph { font-size: 16px; }
.app-sc-x.is-feed { color: #ab6f33; }
.app-sc-x.is-sun { color: #d98a00; }
.app-sc-x.is-repot { color: #12b493; }
.app-sc-x.is-prune { color: #3a66d6; }
.app-sc-custom { display: grid; gap: 4px; margin: 0 12px; padding: 12px 0 8px; border-top: 1px solid var(--app-line); }
.app-sc-custom strong { display: flex; align-items: center; gap: 4px; font: 500 14px/1 var(--app-display); }
.app-sc-custom strong .ph-duotone { font-size: 16px; }
.app-sc-custom p { margin: 0; font: 400 12px/20px var(--app-display); }
.app-sc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; }
.app-sc-water { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/24px var(--app-display); }
.app-sc-water .app-pill > span:last-child { padding: 0 8px; border-radius: 12px; background: var(--app-bg); font: 400 10px/16px var(--app-display); }
.app-sc-done { display: inline-flex; align-items: center; justify-content: center; height: 28px; margin-left: auto; padding: 0 8px; border-radius: 16px; background: var(--app-ink); color: #fff; font: 700 12px/20px var(--app-display); transition: background .25s ease, width .25s ease; }
.app-ui .app-sc-done .ph { display: none; font-size: 16px; }
.app-sc-done.is-done { width: 28px; padding: 0; background: var(--app-high); color: var(--app-mint); }
.app-sc-done.is-done > span { display: none; }
.app-ui .app-sc-done.is-done .ph { display: inline-block; }
.app-sc.is-done { background: rgba(255, 255, 255, .5); box-shadow: none; }
.app-sc.is-done .app-sc-main { box-shadow: none; opacity: .5; }
.app-sc.is-done .app-sc-water { opacity: .5; }
.app-sc-group { max-height: 2400px; transition: max-height .6s var(--app-ease), opacity .4s ease; }
.app-sc-group.is-cleared { max-height: 0; overflow: hidden; opacity: 0; }
.app-sc-empty { display: flex; align-items: center; gap: 10px; margin: 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--app-mint); color: var(--app-high); font: 600 13px/18px var(--app-font); }
.app-sc-empty .ph-duotone { font-size: 22px; }
.app-sc-empty p { margin: 0; }
.app-toast--guest { background: #4e267e; }

/* Edycja rutyn: ten sam ekran co „Ustaw rutyny”, przycisk „Zapisz” w pasku */
.app-btn-sm--primary { background: var(--app-primary); }
.app-phone--edit .app-screen { padding-bottom: 32px; }

/* Historia rośliny (Figma 141:107781): skrót w oknie */
.app-hist-title { margin: 0 0 10px; font: 700 16px/22px var(--app-display); }
.app-hist-title small { display: block; font: 700 12px/16px var(--app-display); }
.app-hist-filters { display: flex; gap: 4px; margin: 0 -2px 16px; overflow: hidden; }
.app-hist-filters span { flex: none; padding: 6px 10px; border-radius: 8px; background: var(--app-fill); font: 500 12px/1 var(--app-display); }
.app-hist-filters .is-active { background: #dfd5ff; color: #4e267e; }
.app-tl-ico.is-water { color: #3a66d6; }
.app-tl-ico.is-feed { color: #ab6f33; }
.app-tl-ico.is-health { color: #12b493; }
.app-tl-ico.is-repot { color: #cc7217; }
.app-tl-ico.is-added { border-color: var(--app-mint-200); background: var(--app-mint); color: var(--app-high); }
.app-tl-inline .app-status-chip .ph { color: var(--app-ink); }

/* ── Rośliny: Moje / Discover (Figma 117:41618, 117:41636) ── */
.app-phone--plants .app-screen { padding: 0 0 86px; }
.app-phone--plants .app-insp-top { padding-bottom: 0; }
.app-pl-widget { display: grid; gap: 6px; margin: 0 16px 12px; padding: 4px; border: 1px solid #fff; border-radius: 16px; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.app-pl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-bg); }
.app-pl-seg button { display: flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: 8px; color: var(--app-muted); font: 500 12px/1 var(--app-display); transition: background .2s ease, color .2s ease; }
.app-pl-seg button[aria-pressed="true"] { background: #fff; color: var(--app-ink); font-weight: 700; box-shadow: 0 1px 1.41px rgba(0, 0, 0, .2); }
.app-pl-title { margin: 0; padding: 16px 16px 0; font: 700 16px/24px var(--app-display); text-align: center; }
.app-pl-sub { margin: 4px 16px 14px; color: var(--app-subtle); font: 400 12px/18px var(--app-font); text-align: center; }
.app-pl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; }
.app-pl-stat { position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px; border: 1px solid var(--app-line); border-radius: 12px; }
.app-pl-stat b { font: 700 16px/20px var(--app-display); }
.app-pl-stat small { color: var(--app-subtle); font: 400 10px/14px var(--app-font); }
.app-pl-stat-ico { position: absolute; top: -12px; right: 8px; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 9999px; background: var(--app-bg); color: #7c4ce0; font-size: 13px; box-shadow: 0 8px 16px rgba(20, 19, 22, .04), 0 1px 4px rgba(20, 19, 22, .04); }
.app-pl-notes { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 0 8px; color: var(--app-ink); font: 400 11px/16px var(--app-font); text-align: center; }
.app-pl-add { display: flex; align-items: center; justify-content: space-between; height: 40px; margin: 0 16px 16px; padding: 8px 12px; border-radius: 8px; background: var(--app-ink); color: #fff; font: 700 14px/24px var(--app-display); box-shadow: 0 1px 1.41px rgba(0, 0, 0, .2); cursor: pointer; }
.app-pl-add .ph { font-size: 20px; }
.app-pl-tabs { padding-top: 12px; }
.app-pl-tabs button.app-feed-tab { background: none; }
.app-pl-tools { display: inline-flex; gap: 14px; padding: 0 0 8px; font-size: 20px; }
.app-pl-chips { overflow-x: auto; scrollbar-width: none; }
.app-pl-chips button.app-chip { cursor: pointer; }
.app-pl-chips .app-chip[aria-pressed="true"], .app-pl-chips .app-chip.is-active { border-color: var(--app-line); background: #fff; }
.app-pl-list { display: grid; gap: 6px; padding: 0 16px; }
.app-pl-item[hidden] { display: none; }
[data-pl-head="discover"] .app-pl-stats { margin-bottom: 8px; }
.app-pl-empty { margin: 16px; padding: 14px; border-radius: 12px; background: #fff; color: var(--app-muted); font: 500 13px/18px var(--app-font); text-align: center; }
.app-pl-view .app-insert { margin-top: 24px; }

/* ── Wymiana (Figma 141:44337 strona główna, 141:44367 szczegóły, 141:44554 propozycja) ── */
.app-phone--exchange .app-screen { padding: 0 0 86px; }
.app-phone--exchange.is-detail .app-screen { padding: var(--app-sb) 0 0; background: var(--app-bg); }
.app-phone--exchange.is-detail .app-status--clear { background: var(--app-bg); }
.app-ex-widget { display: grid; gap: 6px; margin: 12px 16px; padding: 6px; border: 1px solid #fff; border-radius: 16px; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.app-ex-w-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; font: 400 12px/20px var(--app-display); }
.app-ex-w-user > b { font: 700 14px/24px var(--app-display); }
.app-ex-w-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 8px; background: #fff; font: 400 14px/24px var(--app-display); box-shadow: 0 8px 16px rgba(20, 19, 22, .04), 0 1px 4px rgba(20, 19, 22, .04); }
.app-ex-review { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--app-line); border-radius: 4px; background: var(--app-mint); color: #125432; font: 400 12px/20px var(--app-display); cursor: pointer; }
.app-ex-actions .app-sc-new { flex: 227 1 0; }
.app-ex-actions .app-sc-notif { flex: 108 1 0; }
.app-ex-count { margin: 0; padding: 24px 16px 0; font: 700 18px/24px var(--app-display); }
.app-ex-where { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 12px 16px 0; font: 400 12px/20px var(--app-display); }
.app-ex-list { display: grid; gap: 12px; padding: 16px; }
.app-ex-card { display: block; width: 100%; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); text-align: left; cursor: pointer; transition: transform .2s var(--app-ease); }
.app-ex-card:hover { transform: translateY(-1px); }
.app-ex-card-top { display: flex; align-items: center; gap: 4px; padding: 8px; }
.app-ex-handle { flex: 1; font: 700 12px/20px var(--app-display); }
.app-ex-rep { font: 400 10px/16px var(--app-display); }
.app-ex-rep b { font-weight: 700; }
.app-ex-card-main { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: #fff; box-shadow: 0 8px 16px rgba(20, 19, 22, .04), 0 1px 4px rgba(20, 19, 22, .04); }
.app-ex-pic { position: relative; display: flex; flex: none; gap: 4px; width: 88px; height: 88px; overflow: hidden; border-radius: 4px; }
.app-ex-pic img { width: 100%; height: 100%; object-fit: cover; }
.app-ex-pic.is-multi img { flex: 1; min-width: 0; border-radius: 4px; }
.app-ex-card-info { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 8px 28px 8px 8px; }
.app-ex-title { font: 700 16px/24px var(--app-display); }
.app-ex-sub { font: 400 12px/20px var(--app-font); }
.app-ex-counts { display: flex; flex-wrap: wrap; gap: 8px; font: 400 12px/20px var(--app-font); }
.app-ex-counts .is-exotic { color: #8f5cf0; }
.app-ex-counts .is-rare { color: #3a66d6; }
.app-ex-more { position: absolute; top: 4px; right: 4px; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 9999px; background: #fff; font-size: 14px; }

.app-ex-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; }
.app-ex-bar > span:last-child { display: grid; gap: 2px; }
.app-ex-bar b { font: 700 18px/24px var(--app-display); }
.app-ex-bar small { font: 500 12px/1 var(--app-display); }
.app-ex-close { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 9999px; font-size: 24px; cursor: pointer; }
.app-ex-core { display: grid; gap: 16px; padding: 16px; border-bottom: 1px solid var(--app-line); background: linear-gradient(180deg, var(--app-bg) 0%, #fff 100%); }
.app-ex-kicker { margin: 0; color: var(--app-primary); font: 700 12px/20px var(--app-display); }
.app-ex-quote { margin: 0; font: 700 18px/24px var(--app-display); }
.app-ex-desc { margin: 8px 0 0; font: 400 14px/24px var(--app-font); }
.app-ex-block { display: grid; gap: 4px; padding: 0 4px 4px; border: 1px solid var(--app-line); border-radius: 12px; }
.app-ex-block.is-get { background: #eafaf2; }
.app-ex-block.is-give { background: var(--app-lavender); }
.app-ex-block-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 12px 0; font: 700 16px/24px var(--app-display); }
.app-ex-block.is-get .app-ex-block-head .ph { color: var(--app-high); font-size: 22px; }
.app-ex-block.is-give .app-ex-block-head .ph { color: var(--app-primary); font-size: 22px; }
.app-ex-get { border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); }
.app-ex-get-main { display: flex; gap: 12px; padding: 4px; border-radius: 8px; background: #fff; box-shadow: 0 8px 16px rgba(20, 19, 22, .04), 0 1px 4px rgba(20, 19, 22, .04); }
.app-ex-get-img { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 4px; }
.app-ex-get-img img, .app-ex-give-img img { width: 100%; height: 100%; object-fit: cover; }
.app-ex-get-info { display: grid; flex: 1; min-width: 0; padding-right: 4px; }
.app-ex-get-info b { font: 700 14px/24px var(--app-display); }
.app-ex-sub2 { color: var(--app-muted); font: 500 12px/1.2 var(--app-display); }
.app-ex-get-foot { display: flex; align-items: center; justify-content: space-between; }
.app-ex-give { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-bg); transition: opacity .25s ease, transform .25s ease; }
.app-ex-give.is-removed { opacity: 0; transform: scale(.96); }
.app-ex-give-img { flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 9999px; }
.app-ex-give-info { display: grid; flex: 1; gap: 2px; min-width: 0; }
.app-ex-give-info b { font: 500 13px/1.2 var(--app-display); }
.app-ex-remove { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid var(--app-line); border-radius: 9999px; background: #fff; font-size: 13px; cursor: pointer; }
.app-ex-addmore { justify-self: center; padding: 8px 12px; color: #4e267e; font: 500 14px/24px var(--app-display); text-decoration: underline; cursor: pointer; }
.app-ex-note { display: flex; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--app-line); border-radius: 12px; background: #eef2fd; font: 400 12px/18px var(--app-font); }
.app-ex-note .ph-fill { flex: none; color: #3a66d6; font-size: 16px; }
.app-ex-wish { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; font: 400 14px/24px var(--app-font); }
.app-ex-wish p { display: flex; align-items: center; justify-content: space-between; margin: 0; font: 700 14px/24px var(--app-display); }
.app-ex-pad { padding: 16px 16px 0; }
.app-ex-author { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--app-line); border-radius: 16px; background: #fff; }
.app-ex-author-head { display: flex; justify-content: space-between; gap: 8px; }
.app-ex-author-head > span:first-child { display: grid; }
.app-ex-author-head small { color: var(--app-primary); font: 500 12px/20px var(--app-display); }
.app-ex-author-head b { font: 700 16px/24px var(--app-display); }
.app-ex-reputation { display: grid; justify-items: end; font: 400 12px/18px var(--app-display); }
.app-ex-reputation small { color: var(--app-muted); }
.app-ex-author-body { display: flex; gap: 16px; }
.app-ex-author-av { display: grid; flex: none; justify-items: center; width: 84px; font: 400 12px/18px var(--app-display); }
.app-ex-author-av img { width: 84px; height: 84px; margin-bottom: 4px; border: 1px solid var(--app-line); border-radius: 9999px; object-fit: cover; }
.app-ex-author-av b { font: 700 14px/20px var(--app-display); }
.app-ex-author-bio { display: grid; align-content: start; gap: 12px; }
.app-ex-author-bio p { margin: 0; font: 400 13px/22px var(--app-display); }
.app-ex-follow { justify-self: end; padding: 6px 8px; border-radius: 8px; background: var(--app-ink); color: #fff; font: 500 12px/1 var(--app-display); cursor: pointer; }
.app-ex-h { margin: 0; padding: 20px 16px 8px; font: 700 18px/24px var(--app-display); }
.app-ex-core .app-ex-h { padding: 4px 0 0; }
.app-ex-place { display: flex; gap: 8px; margin: 0 0 12px; font: 400 13px/20px var(--app-display); }
.app-ex-place .ph-fill { flex: none; margin-top: 2px; }
.app-ex-map { position: relative; overflow: hidden; border: 1px solid var(--app-line); border-radius: 12px; }
.app-ex-map svg { display: block; width: 100%; height: auto; aspect-ratio: 343 / 180; }
.app-ex-map-btn { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: #fff; font: 500 12px/18px var(--app-display); box-shadow: 0 1px 4px rgba(20, 19, 22, .12); }
.app-ex-textarea { min-height: 110px; padding: 12px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; color: var(--app-muted); font: 400 15px/24px var(--app-font); }
.app-ex-safety { padding: 8px 0 16px; border-bottom: 1px solid var(--app-line); text-align: center; }
.app-ex-safety .app-ex-kicker { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.app-ex-safety-title { margin: 0 0 16px; font: 700 16px/24px var(--app-display); }
.app-ex-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: left; }
.app-ex-tips > div { display: grid; align-content: start; gap: 6px; }
.app-ex-tips .ph { font-size: 20px; }
.app-ex-tips strong { font: 700 12px/1.2 var(--app-display); }
.app-ex-tips p { margin: 0; font: 400 10px/16px var(--app-font); }
.app-ex-agree { display: flex; align-items: flex-start; gap: 10px; padding: 16px; font: 400 13px/22px var(--app-font); }
.app-ex-agree .app-check { flex: none; margin-top: 2px; }
.app-ex-submit { position: absolute; z-index: 6; inset: auto 0 0; padding: 12px 16px 28px; background: linear-gradient(180deg, rgba(243, 243, 247, 0), var(--app-bg) 30%); }
.app-ex-submit.is-static { position: static; padding: 0 16px 16px; background: none; }
.app-phone--exchange .app-ex-submit { position: sticky; bottom: 0; margin-top: 16px; }
/* Figma Submit Button: Fill × 40, auto layout H, Center / Center, padding 8/16, tekst Hug */
.app-ex-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; padding: 8px 16px; border-radius: 8px; background: var(--app-primary); color: #fff; font: 500 14px/1 var(--app-display); text-align: center; cursor: pointer; }
.app-phone--exchange.is-detail .app-tabbar { display: none; }
.app-phone--offer .app-screen { padding-bottom: 24px; }
.app-ex-mapwin { padding: 14px; }

/* ── Artykuł: cytat (widok czytania; w edytorze Figma: sekcja „Quote”, 141:91401) i lista sekcji ── */
.app-art-quote { position: relative; margin: 8px 16px 20px; padding: 18px 16px 16px 20px; border: 1px solid var(--app-line); border-left: 3px solid var(--app-primary); border-radius: 4px 16px 16px 4px; background: linear-gradient(180deg, var(--app-bg), #fff); }
.app-art-quote-ico { position: absolute; top: -12px; left: 14px; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 9999px; background: var(--app-primary); color: #fff; font-size: 13px; }
.app-art-quote blockquote { margin: 0; font: 500 17px/26px var(--app-display); letter-spacing: -.01em; }
.app-art-quote figcaption { margin-top: 10px; color: var(--app-muted); font: 500 12px/16px var(--app-display); }
.app-art-parts { display: grid; gap: 6px; padding: 12px; background: linear-gradient(180deg, var(--app-bg), #fff); }
.app-art-parts-head { margin: 0 0 4px; font: 700 14px/20px var(--app-display); }
.app-art-part { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; font: 500 12px/20px var(--app-font); }
.app-art-part > .ph { font-size: 18px; }
.app-art-part > span:not(.app-art-part-acts) { flex: 1; }
.app-art-part-acts { display: inline-flex; gap: 4px; }
/* Figma ICON BUTTON 32×32, r8, ikona 16: wyśrodkowuje wrapper, <i> zostaje inline (zasada Phosphor) */
.app-art-part-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; }
.app-art-part-btn .ph { font-size: 14px; line-height: 1; }
.app-art-part.is-add { justify-content: center; border-style: dashed; color: #4e267e; }
.app-art-part.is-add > span { flex: none !important; }

/* ── Profil: warianty i brakujące sekcje (Figma 141:60602–141:60605) ── */
.app-prof-top.is-basic { background: linear-gradient(180deg, #e7ddff 0%, #efe8ff 60%, var(--app-bg) 100%); }
.app-showcase { gap: 8px; }
.app-showcase-pill { display: flex; flex: none; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--app-line); border-radius: 9999px; background: #fff; box-shadow: 0 8px 16px rgba(20, 19, 22, .04), 0 1px 4px rgba(20, 19, 22, .04); }
.app-showcase-pill > span { display: grid; gap: 2px; }
.app-showcase-pill strong { font: 700 12px/16px var(--app-display); white-space: nowrap; }
.app-showcase-pill small { display: flex; align-items: center; gap: 4px; color: var(--app-subtle); font: 400 10px/14px var(--app-display); white-space: nowrap; }
.app-showcase-pill small i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.app-showcase-pill img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.app-friends { display: flex; gap: 12px; padding: 16px 16px 8px; overflow: hidden; }
.app-friend { display: grid; flex: none; justify-items: center; gap: 4px; width: 56px; }
.app-friend img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 16px rgba(20, 19, 22, .06); }
.app-friend small { max-width: 56px; overflow: hidden; font: 500 9px/12px var(--app-display); text-overflow: ellipsis; white-space: nowrap; }
.app-friends-foot { margin: 4px 16px 0; }
.app-disc-off { display: flex; align-items: center; gap: 10px; margin: 16px; padding: 14px 16px; border: 1px dashed var(--app-line); border-radius: 12px; color: var(--app-muted); font: 500 13px/18px var(--app-font); }
.app-disc-off .ph-duotone { font-size: 22px; }
.app-disc-off p { margin: 0; }

/* ── Top-lista: awatary ze zdjęć roślin, punkty, trend, znajomi (Figma 141:115519) ── */
.app-lb-av { overflow: hidden; }
.app-lb-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.app-lb-avwrap { position: relative; display: grid; justify-items: center; padding-bottom: 10px; }
.app-lb-pill { position: absolute; bottom: -2px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; background: var(--app-ink); color: #fff; font: 700 11px/16px var(--app-display); white-space: nowrap; }
.app-lb-first.is-sm .app-lb-pill { font-size: 10px; padding: 1px 6px; }
.app-lb-trend { font-size: 12px; }
.app-lb-trend.is-up { color: #2ed17d; }
.app-lb-trend.is-down { color: #f25c7a; }
.app-lb-trend.is-flat { color: #d9b36a; }
.app-lb-pill .app-lb-trend.is-down { color: #ff8aa1; }
.app-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-lb-pts { font: 700 11px/16px var(--app-display); white-space: nowrap; }
.app-lb-rows li.is-friend, .app-lb-list li.is-friend { border-color: #dfd5ff; background: #f5effe; }
.app-lb-rows li.is-friend > b, .app-lb-list li.is-friend > b { color: #8f5cf0; }
.app-lb-friend { color: #8f5cf0; font-size: 16px; }
.app-lb-tabs { margin-top: 8px; }

/* ── Brakujący gatunek (Figma 360:151468, wybór gatunku 223:160123) ── */
.app-phone--species .app-screen { padding: var(--app-sb) 0 32px; }
.app-sp-search { display: flex; align-items: center; gap: 8px; margin: 4px 16px 12px; padding: 0 12px; height: 40px; border: 1px solid transparent; border-radius: 9999px; background: var(--app-fill); font-size: 16px; }
.app-sp-search:focus-within { border-bottom-color: var(--app-ink); background: #fff; }
.app-sp-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--app-ink); font: 400 14px/20px var(--app-font); outline: none; }
.app-sp-clear { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--app-muted); font-size: 16px; cursor: pointer; }
.app-sp-list { display: grid; gap: 2px; margin: 0; padding: 0 16px; list-style: none; }
.app-sp-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.app-sp-row[hidden] { display: none; }
.app-sp-row img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.app-sp-row span { display: grid; gap: 2px; }
.app-sp-row b { font: 700 14px/20px var(--app-display); }
.app-sp-row small { color: var(--app-subtle); font: 400 12px/16px var(--app-font); }
.app-sp-oops { display: grid; gap: 14px; margin: 8px 16px 0; }
.app-sp-oops-top { display: flex; gap: 12px; }
.app-sp-oops-top strong { display: block; font: 700 16px/24px var(--app-display); }
.app-sp-oops-top p { margin: 4px 0 0; font: 400 12px/19px var(--app-font); }
.app-sp-oops-ico { display: inline-grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--app-lavender); color: #7c4ce0; font-size: 38px; }
.app-sp-add { justify-self: start; flex: none; white-space: nowrap; cursor: pointer; }
.app-sp-verify { overflow: hidden; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-lavender); text-align: center; }
.app-sp-verify p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff; font: 400 13px/19px var(--app-font); text-align: left; }
.app-sp-verify small { display: block; padding: 6px 10px 8px; font: 400 11px/14px var(--app-font); }
.app-sp-back { display: inline-grid; place-items: center; width: 28px; height: 28px; font-size: 24px; cursor: pointer; }
.app-sp-block { display: grid; gap: 12px; padding: 16px; }
.app-sp-block.is-required { border-bottom: 1px solid var(--app-line); background: linear-gradient(180deg, var(--app-bg), #f5effe 80%, #d5f6e5); box-shadow: 0 8px 16px rgba(20, 19, 22, .04), 0 1px 4px rgba(20, 19, 22, .04); }
/* Formularz brakującego gatunku (Figma 360:150553): nagłówki sekcji, rozwijane rutyny i cechy, potwierdzenie IGO */
.app-sp-head { display: grid; gap: 4px; padding: 32px 16px 0; }
.app-sp-head .app-sp-title { margin: 0; font-size: 20px; line-height: 30px; }
.app-sp-water { padding: 16px; }
.app-sp-water .app-block-head { margin: 0; }
.app-sp-water .app-block-head > span { font: 400 14px/24px var(--app-display); text-transform: uppercase; }
.app-sp-water-body { display: grid; gap: 12px; margin-top: 12px; }
.app-sp-water:not(.is-open) .app-sp-water-body { display: none; }
.app-sp-routines { padding: 0 0 16px; }
.app-sp-routines .app-group { border-radius: 16px; }
.app-sp-routines .app-routine-head { font: 400 14px/24px var(--app-display); }
.app-sp-routines .app-routine-body { padding: 0 12px 12px; }
.app-sp-routines .app-input { min-height: 48px; font-size: 14px; }
.app-sp-traits-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 0 16px; }
.app-sp-traits-row b { font: 700 14px/24px var(--app-display); }
.app-sp-traits[hidden] { display: none; }
.app-sp-traits-title { margin: 0; padding: 32px 16px 0; font: 700 18px/24px var(--app-display); }
.app-sp-traits .app-trait { align-items: center; padding-right: 12px; }
.app-sp-traits .app-trait > div { flex: 1; }
.app-sp-trait-go { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; background: #dfd5ff; font-size: 16px; }
.app-sp-source { display: grid; gap: 4px; padding: 12px 16px; }
.app-sp-source .app-label { margin: 0; }
.app-sp-source-input { display: flex; align-items: center; gap: 4px; height: 40px; padding: 8px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; font-size: 20px; }
.app-sp-source-input:focus-within { border-bottom-color: var(--app-ink); }
.app-sp-source-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--app-ink); font: 400 14px/24px var(--app-font); }
.app-sp-source small { color: var(--app-muted); font: 400 12px/20px var(--app-display); }
.app-sp-confirm { padding-top: 24px; }
.app-sp-igo { display: flex; align-items: center; gap: 16px; padding: 16px; }
.app-sp-igo p { flex: 1; margin: 0; font: 400 14px/24px var(--app-font); }
.app-sp-igo-ico { display: inline-grid; place-items: center; flex: none; width: 80px; height: 80px; border-radius: 50%; background: var(--app-lavender); color: #7c4ce0; font-size: 40px; }
.app-sp-conf-body { display: grid; gap: 12px; padding: 16px; }
.app-sp-links { display: grid; gap: 6px; margin: 0; padding-left: 18px; list-style: decimal; font: 400 12px/20px var(--app-font); }
.app-sp-links > li { list-style: decimal; }
.app-sp-links a { color: var(--app-ink); overflow-wrap: anywhere; text-decoration: underline; }
.app-sp-igo-box { display: grid; justify-items: start; gap: 4px; padding: 16px; border: 1px solid var(--app-line); border-radius: 12px; }
.app-sp-igo-box p { margin: 0; font: 400 12px/20px var(--app-font); }
.app-sp-igo-chip { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; border-radius: 8px; background: var(--app-ink); color: #fff; font: 500 12px/1 var(--app-display); text-decoration: none; white-space: nowrap; }
.app-sp-actions { padding: 12px 16px; }
.app-sp-kicker { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--app-muted); font: 500 11px/1 var(--app-display); letter-spacing: .04em; text-transform: uppercase; }
.app-sp-title { margin: 0 0 4px; font: 700 18px/24px var(--app-display); }
.app-sp-field { display: grid; gap: 6px; }
.app-sp-field input { height: 44px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; color: var(--app-ink); font: 400 15px/20px var(--app-font); outline: none; }
.app-sp-field input:focus { border-bottom-color: var(--app-ink); }
.app-sp-typo { margin: 2px 0 0; font: 400 11px/16px var(--app-font); text-align: center; }
.app-sp-thanks { display: grid; justify-items: center; gap: 6px; padding: 6px; border: 1px solid var(--app-line); border-radius: 12px; background: #f5effe; text-align: center; }
.app-sp-thanks > p { margin: 0; font: 400 14px/24px var(--app-display); }
.app-sp-thanks > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 6px 6px 6px 12px; border-radius: 8px; background: #fff; font: 700 14px/24px var(--app-display); }
.app-sp-thanks b { padding: 2px 6px; border-radius: 4px; background: #efe8ff; color: #4e267e; }
.app-sp-thanks small { display: block; font: 400 10px/16px var(--app-font); }
.app-sp-declare { display: flex; align-items: flex-start; gap: 8px; padding-top: 12px; font: 400 14px/24px var(--app-display); }
.app-sp-declare .app-check { flex: none; margin-top: 2px; }
.app-choice > button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--app-line); border-radius: 14px; background: #fff; font: 600 13px/1.2 var(--app-display); cursor: pointer; }
.app-choice > button > .ph, .app-choice > button > .ph-duotone { font-size: 22px; }
.app-choice > button.is-ai > .ph-duotone { color: var(--app-scan-2); }
.app-sp-picked { display: grid; justify-items: center; gap: 4px; margin: -18px 12px 0; padding: 14px 12px; position: relative; border-radius: 0 0 16px 16px; background: #fff; text-align: center; box-shadow: 0 8px 16px rgba(20, 19, 22, .04); }
.app-sp-picked b { font: 700 15px/20px var(--app-display); }
.app-sp-picked i { color: var(--app-subtle); font: italic 400 12px/16px var(--app-font); }
.app-sp-picked .app-sp-status { margin-top: 4px; }
.app-sp-changed { margin: 18px 0 8px; font: 700 14px/20px var(--app-display); text-align: center; }
.app-sp-row { cursor: pointer; }
.app-sp-powered { margin: 28px 12px 0; border-radius: 12px; background: #fff; }
/* Figma „Add next!”: Fill × 40, Center / Center */
.app-sp-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 8px 16px; border-radius: 8px; background: var(--app-ink); color: #fff; font: 500 14px/1 var(--app-display); cursor: pointer; }
.app-sp-done { display: grid; justify-items: center; gap: 12px; margin: 40px 16px 0; padding: 28px 20px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 8px 16px rgba(20, 19, 22, .04), 0 1px 4px rgba(20, 19, 22, .04); }
.app-sp-done-ico { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--app-mint); color: var(--app-high); font-size: 40px; }
.app-sp-done strong { font: 700 20px/28px var(--app-display); }
.app-sp-done-name { display: grid; gap: 2px; margin: 0; }
.app-sp-done-name b { font: 700 15px/20px var(--app-display); }
.app-sp-done-name i { color: var(--app-subtle); font: italic 400 13px/18px var(--app-font); }
.app-sp-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; background: #fcf1e3; color: #cc7217; font: 600 12px/18px var(--app-display); }
.app-sp-done > p { margin: 0; color: var(--app-subtle); font: 400 13px/20px var(--app-font); }

/* ── Dodawanie rośliny: dwie ścieżki (Figma „NEW PLANT” 223:160108, ADD_PLANT_PHONE w add_plant_flow.py) ── */
.app-phone--np .app-screen { padding: var(--app-sb) 0 32px; }
.app-phone--np [data-np-view="start"]:not([hidden]), .app-phone--np [data-np-view="pick"]:not([hidden]) { display: flex; flex-direction: column; min-height: 736px; }
.app-phone--np [data-np-view="pick"] > [data-np-when="assigned"]:not([hidden]) { display: flex; flex-direction: column; flex: 1; }
.app-phone--np [data-np-view="pick"] > [data-np-when="choose working"] { margin-top: auto; padding-top: 16px; }
.app-np-iconbtn { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin: -8px; border-radius: 9999px; font-size: 24px; }
/* Start: MODULE/SELECT IMAGE SOURCE (Fill: dwa przyciski po równo) */
.app-np-start { padding: 16px; border-radius: 0 0 16px 16px; background: var(--app-grad-surface); box-shadow: var(--app-shadow-card); }
.app-np-source-wrap { display: grid; gap: 6px; padding: 4px; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-bg); }
.app-np-source-title { padding: 6px 0; color: var(--app-muted); font: 700 16px/24px var(--app-display); text-align: center; }
.app-np-source { display: flex; gap: 4px; }
.app-np-source > button { display: flex; flex: 1 0 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 100px; padding: 16px 12px; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; box-shadow: var(--app-shadow-card); text-align: center; }
.app-np-source b { font: 700 14px/24px var(--app-display); text-transform: uppercase; }
.app-np-source small { font: 400 10px/16px var(--app-font); }
.app-np-src-ico { font-size: 24px; }
.app-np-src-ico.is-camera { color: var(--app-high); }
.app-np-src-ico.is-gallery { color: var(--app-primary); }
.app-np-hint { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; }
.app-np-hint .app-ico { font-size: 24px; }
.app-np-hint p { font: 400 12px/20px var(--app-font); }
/* SECTION/AI DETECT INFO BOX, bez liczby limitu */
.app-np-powered { display: grid; gap: 4px; padding: 0 16px 8px; }
.app-np-powered-box { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 12px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-bg); }
.app-np-powered-box b { color: var(--app-muted); font: 700 14px/24px var(--app-display); }
.app-np-logo { display: inline-grid; place-items: center; flex: none; width: 116px; height: 32px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 1px 4px -8px rgba(20, 19, 22, .04), 0 8px 16px -32px rgba(20, 19, 22, .04); }
.app-np-logo img { width: 110px; height: auto; }
.app-np-limit { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 8px; color: var(--app-muted); font: 400 12px/20px var(--app-display); }
.app-np-limit .app-ico { font-size: 16px; }
/* Aparat (1 - Camera startup or upload) */
.app-phone--np.is-camera, .app-phone--np.is-camera .app-screen { background: #000; }
.app-phone--np.is-camera .app-status { background: #000; color: #fff; }
.app-phone--np.is-camera .app-home { background: #fff; }
.app-np-cam { display: flex; flex-direction: column; min-height: 736px; color: #fff; }
.app-np-cam-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font: 700 16px/24px var(--app-display); }
.app-np-cam-top .app-np-iconbtn { width: 32px; height: 32px; margin: 0; border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 20px; }
.app-np-cam-info { margin: 8px 12px 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: #1e1d21; }
.app-np-cam-info > div { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; }
.app-np-cam-info b { color: var(--app-scan); font: 600 13px/20px var(--app-display); }
.app-np-cam-info img { width: 64px; height: auto; }
.app-np-cam-info p { margin: 0 4px 4px; padding: 8px; border-radius: 8px; background: #000; font: 400 11px/16px var(--app-font); text-align: center; }
.app-np-cam-view { position: relative; margin: auto 0; overflow: hidden; border-radius: 24px; aspect-ratio: 1; }
.app-np-cam-view img { width: 100%; height: 100%; object-fit: cover; }
.app-np-cam-bar { display: flex; align-items: center; justify-content: space-between; padding: 24px 16px 28px; }
.app-np-cam-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 9999px; background: #1e1d21; color: #fff; font: 500 12px/1 var(--app-font); white-space: nowrap; }
.app-np-cam-btn .ph { font-size: 18px; }
.app-np-shutter { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #000, 0 0 0 7px #fff; }
/* Krok 1/3: zdjęcie w karcie, przetwarzanie (2A), gatunek przypisany (4, 4A) */
.app-np-card { margin: 0 16px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: var(--app-shadow-card); }
.app-np-photo { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 1; }
.app-np-photo > img { width: 100%; height: 100%; object-fit: cover; }
.app-np-badge { position: absolute; z-index: 2; top: 8px; left: 8px; display: inline-grid; place-items: center; padding: 4px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; box-shadow: var(--app-shadow-card); font-size: 24px; }
.app-np-loader { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.app-np-loader::before { content: ""; position: absolute; inset: 0; opacity: .6; background: linear-gradient(210.69deg, rgb(1, 240, 44) 25.046%, rgb(125, 224, 46) 42.018%, rgb(143, 182, 52) 75.963%); animation: appNpPulse 1.2s ease-in-out infinite alternate; }
.app-np-loader .app-ico { position: relative; font-size: 24px; }
.app-np-photo.is-working .app-np-loader { opacity: 1; }
@keyframes appNpPulse { from { opacity: .45; } to { opacity: .7; } }
.app-np-picked { display: grid; justify-items: center; gap: 0; padding: 0 12px 6px; text-align: center; }
.app-np-picked b { font: 700 16px/24px var(--app-display); }
.app-np-picked i { font: 400 12px/20px var(--app-display); }
.app-np-picked .app-sp-status { margin-top: 4px; }
.app-np-picked[hidden], .app-phone--np [data-np-when][hidden], .app-phone--np [data-np-unverified][hidden] { display: none; }
.app-np-working { margin: 6px 16px 0; padding: 4px; border: 1px solid var(--app-line); border-radius: 12px; }
.app-np-working p { padding: 12px; font: 500 14px/1 var(--app-display); text-align: center; }
.app-np-rate { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 16px 0; padding: 4px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-bg); box-shadow: var(--app-shadow-card); }
.app-np-rate[hidden] { display: none; }
.app-np-rate p { font: 400 12px/20px var(--app-display); text-align: center; }
.app-np-rate button { display: inline-grid; place-items: center; flex: none; padding: 8px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; font-size: 16px; }
.app-np-rate button[aria-pressed="true"] { border-color: var(--app-ink); background: var(--app-ink); color: #fff; }
.app-np-foot { margin-top: auto; padding: 12px 16px; }
/* Podgląd i publikacja (8) */
.app-np-hero-status:has(> [hidden]) { display: none; }
.app-np-privacy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 16px 16px; }
.app-np-privacy h3 { font: 700 18px/24px var(--app-display); }
.app-np-publish { display: grid; gap: 6px; padding: 12px 16px; }
.app-np-textbtn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 32px; padding: 8px 12px; font: 500 14px/1 var(--app-display); }
.app-np-soil { display: flex; align-items: center; gap: 6px; margin: 8px 24px 0; color: var(--app-muted); font: 400 12px/18px var(--app-font); }
.app-np-soil .app-ico { font-size: 14px; }
/* Arkusze w telefonie: wyniki (3), informacja o rozpoznawaniu, źródło zdjęcia */
.app-np-sheet { z-index: 7; }
.app-np-sheet-body { padding: 10px 16px 34px; border-radius: 24px 24px 0 0; background: var(--app-bg); box-shadow: 0 -12px 16px -8px rgba(20, 19, 22, .06); translate: 0 40px; transition: translate .45s var(--app-ease); }
.app-dialog.is-open .app-np-sheet-body { translate: 0 0; }
.app-np-sheet .app-result:not([aria-checked="true"]) { background: #fff; }
.app-np-sheet-btn { margin-top: 16px; }
.app-np-info-box { padding: 4px; border-radius: 12px; background: var(--app-lavender); }
.app-np-info-box p { padding: 10px 12px; border-radius: 8px; background: #fff; font: 400 14px/20px var(--app-display); text-align: center; }
.app-np-info-ico { display: grid; width: 88px; height: 88px; margin: 16px auto; border-radius: 50%; background: var(--app-grad-detail); color: #7c4ce0; font-size: 42px; }
.app-np-info-lead { font: 700 14px/20px var(--app-display); }
.app-np-info-note { margin: 8px 0 12px !important; color: var(--app-subtle); font: 400 12px/18px var(--app-font) !important; }

/* ── Nowy post (Figma „NEW POST” 141:94742, post_phone w post_screens.py) ── */
.app-phone--post .app-screen { padding: var(--app-sb) 0 32px; }
.app-phone--post.is-typing .app-screen { padding-bottom: 360px; }
.app-phone--post [data-post-view="compose"]:not([hidden]) { display: flex; flex-direction: column; min-height: calc(812px - var(--app-sb) - 32px); }
.app-phone--post [hidden] { display: none !important; }
.app-post-top { border-radius: 0 0 16px 16px; background: var(--app-grad-surface); box-shadow: var(--app-shadow-card); }
.app-phone--post .app-topbar { padding: 16px; }
.app-post-src { padding: 0 16px 16px; }
/* 141:96309: zdjęcie 4:5 na całą szerokość i pasek „Zmień zdjęcie” (primary-100) */
.app-post-photo > img { display: block; width: 100%; height: 469px; object-fit: cover; }
.app-post-change { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 16px; background: #efe8ff; color: #4e267e; font: 400 14px/20px var(--app-display); }
.app-post-change .ph { font-size: 20px; }
.app-post-photo + .app-post-body { background: #fff; border-radius: 0 0 16px 16px; }
.app-post-body { padding: 16px 16px 8px; }
/* Pole opisu: Inter 16/24, formatowanie widoczne od razu */
.app-post-editor { min-height: 24px; padding-bottom: 4px; border-bottom: 1px solid var(--app-line); outline: 0; font: 400 16px/24px var(--app-font); overflow-wrap: anywhere; caret-color: var(--app-primary); cursor: text; }
.app-post-editor p, .app-post-editor div { margin: 0; }
.app-post-editor p + p { margin-top: 24px; }
.app-post-editor b, .app-post-editor strong { font-weight: 700; }
.app-post-editor ul, .app-post-editor ol { margin: 0; padding-left: 24px; }
.app-post-editor.is-empty::before { content: attr(data-placeholder); color: var(--app-muted); pointer-events: none; }
.app-post-editor.is-preview { cursor: default; }
.app-post-count { margin: 0; padding-top: 4px; color: var(--app-muted); font: 400 12px/20px var(--app-font); text-align: right; }
.app-post-md { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; min-height: 40px; }
.app-post-md > button, .app-post-preview { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/20px var(--app-font); }
.app-post-md > button .ph { font-size: 24px; }
.app-post-preview { gap: 10px; }
.app-phone--post .app-toggle { width: 48px; height: 28px; }
.app-phone--post .app-toggle::after { width: 22px; height: 22px; }
.app-phone--post .app-toggle[aria-checked="true"]::after { translate: 20px 0; }
.app-post-hint { flex: 1; }
.app-post-hint p { max-width: 240px; text-wrap: balance; }
/* Opcje publikacji */
.app-post-opts { padding: 32px 0 0; }
.app-phone--post .app-post-opts > h2 { margin: 0; padding: 0 16px; font: 700 20px/30px var(--app-display); letter-spacing: 0; }
.app-post-sec { padding: 12px 16px 24px; border-bottom: 1px solid var(--app-line); }
.app-post-sec.is-tags { padding-bottom: 0; }
.app-post-sec.is-last { padding-bottom: 12px; border-bottom: 0; }
.app-post-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.app-post-sec-head h3 { font: 700 18px/24px var(--app-display); }
.app-post-sec > p { margin: -4px 0 0; font: 400 14px/24px var(--app-font); }
.app-post-tags { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0 11px; font: 400 14px/24px var(--app-font); }
.app-post-tags .ph { font-size: 16px; }
.app-post-search { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 12px; padding: 0; border: 2px solid #fff; border-radius: 4px; background: #efe8ff; box-shadow: 0 1px 2px rgba(20, 19, 22, .12), 0 0 0 1px var(--app-line); color: #4e267e; font: 400 14px/20px var(--app-display); }
.app-post-search .ph { font-size: 20px; }
.app-post-label { display: grid; gap: 8px; margin-top: 16px; font: 400 14px/20px var(--app-font); }
.app-post-input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; outline: 0; color: var(--app-ink); font: 400 16px/24px var(--app-font); }
.app-post-input::placeholder { color: var(--app-muted); }
.app-post-input:focus { border-bottom-color: var(--app-ink); }
.app-post-editor:focus, .app-ar-edit:focus, .app-ar-author input:focus { border-bottom-color: var(--app-ink); }
.app-post-faq { margin: 15px 12px 0; }
.app-post-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 6px 12px 6px 10px; border-radius: 12px; background: #fff; box-shadow: var(--app-shadow-card); font: 700 14px/20px var(--app-display); list-style: none; cursor: pointer; }
.app-post-faq summary::-webkit-details-marker { display: none; }
.app-post-faq summary .ph { flex: none; font-size: 16px; transition: rotate .2s ease; }
.app-post-faq:not([open]) summary .ph { rotate: 180deg; }
.app-post-faq p { margin: 24px 4px 0; font: 400 14px/24px var(--app-font); }
.app-post-faq p + p { margin-top: 24px; }
.app-post-publish { width: calc(100% - 32px); margin: 24px 16px 0; text-transform: uppercase; }
/* Klawiatura i pasek formatowania (141:96417) */
.app-post-kb { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; background: #fff; translate: 0 100%; transition: translate .3s var(--app-ease); }
.app-phone--post.is-typing .app-post-kb { translate: 0 0; }
.app-post-fmt { display: flex; gap: 6px; padding: 6px 12px; border-top: 1px solid var(--app-line); background: #ececf0; }
.app-post-fmt button { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--app-line); border-radius: 4px; background: #fff; font-size: 20px; }
.app-post-fmt button[aria-pressed="true"] { background: var(--app-ink); color: #fff; }
.app-post-fmt-sp { flex: 1; }
.app-post-fmt .is-head { font: 400 18px/1 var(--app-font); }
.app-post-fmt .is-head { display: inline-flex; align-items: baseline; justify-content: center; }
.app-post-fmt .is-head sub { position: relative; top: 2px; font-size: 11px; line-height: 1; vertical-align: baseline; }
.app-post-keys { padding: 0 3px 34px; background: linear-gradient(180deg, #e5e5ea 0%, #d8d8de 100%); font: 400 22px/1 system-ui, -apple-system, sans-serif; }
.app-post-sugg { display: flex; height: 44px; margin: 0 -3px 6px; }
.app-post-sugg button { flex: 1; text-align: center; font: 400 16px/1 system-ui, -apple-system, sans-serif; }
.app-post-sugg button + button { border-left: 1px solid rgba(20, 19, 22, .16); }
.app-post-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.app-post-row > * { display: grid; place-items: center; flex: 0 1 32px; height: 42px; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); color: #000; text-transform: uppercase; }
.app-post-row.is-mid { padding: 0 18px; }
.app-post-row .is-fn { flex-basis: 42px; background: #fff; font-size: 16px; }
.app-post-row [data-post-shift] { margin-right: 10px; }
.app-post-row [data-post-back] { margin-left: 10px; }
.app-post-row .is-fn.is-on { background: var(--app-ink); color: #fff; }
.app-post-row.is-bottom > span { flex: 0 0 92px; }
.app-post-row .is-space, .app-post-row .is-return { text-transform: none; }
.app-post-row .is-space { flex: 1 1 auto; font-size: 16px; }
.app-post-row .is-return { flex: 0 0 92px; background: var(--app-ink); color: #fff; font-size: 16px; }
.app-post-kb-foot { display: flex; justify-content: space-between; padding: 8px 26px 0; color: #4a4750; font-size: 28px; }
/* Arkusz „Formatowanie” (141:96321) */
.app-phone--post .app-dialog { background: rgba(20, 19, 22, .16); -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-post-sheet .app-np-sheet-body { padding: 12px 16px 8px; }
.app-post-sheet .app-sheet-handle { width: 80px; margin-bottom: 20px; background: rgba(20, 19, 22, .24); }
.app-post-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.app-post-sheet-head p { font: 700 16px/24px var(--app-display); }
.app-post-close { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-size: 24px; }
.app-post-md-card { display: grid; gap: 8px; padding: 16px; border-radius: 12px; background: #fff; }
.app-post-md-row { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; border-top: 1px solid var(--app-line); font: 400 16px/24px var(--app-font); }
.app-post-md-row > span:last-child { text-align: right; }
.app-post-md-row.is-head { padding: 0; border: 0; color: var(--app-primary); font: 700 14px/24px var(--app-display); }
.app-post-md-row b { font-family: var(--app-display); }
.app-post-md-row ul, .app-post-md-row ol { margin: 0; padding: 0; list-style-position: inside; }
.app-post-md-row ul > li, .app-post-editor ul > li { list-style: disc; }
.app-post-md-row ol > li, .app-post-editor ol > li { list-style: decimal; }
.app-post-md-row li { list-style-position: inside !important; }
.app-post-tip { display: grid; gap: 4px; margin-top: 12px; padding: 4px 4px 8px; border: 1px solid var(--app-line); border-radius: 12px; }
.app-post-tip p { padding: 8px 12px; border-radius: 8px; background: #fff; box-shadow: var(--app-shadow-card); font: 400 14px/24px var(--app-font); text-align: center; }
.app-post-tip small { color: var(--app-subtle); font: 400 10px/16px var(--app-font); text-align: center; }
/* Arkusz „Wybierz źródło zdjęcia” (141:96361) */
.app-post-src-sheet .app-np-sheet-body { padding: 8px 16px 34px; }
.app-post-src-sheet .app-sheet-handle { width: 80px; margin-bottom: 20px; background: rgba(20, 19, 22, .24); }
.app-post-src-sheet .app-sheet-title { margin-bottom: 12px; font: 700 16px/24px var(--app-display); }
/* Aparat (141:96295) */
.app-phone--post.is-camera, .app-phone--post.is-camera .app-screen { background: #1b1a1d; }
.app-phone--post.is-camera .app-status { color: #fff; }
.app-phone--post.is-camera .app-home { background: #fff; }
.app-post-cam { display: flex; flex-direction: column; min-height: calc(812px - var(--app-sb) - 32px); color: #fff; }
.app-post-cam-top { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font: 700 16px/24px var(--app-display); }
.app-post-cam-top .app-np-iconbtn { width: 40px; height: 40px; margin: 0; border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 22px; }
.app-post-cam-view { position: relative; height: 492px; margin-top: 31px; overflow: hidden; border-radius: 24px; }
.app-post-cam-view img { width: 100%; height: 100%; object-fit: cover; }
.app-post-cam-zoom { position: absolute; left: 50%; bottom: 16px; display: flex; align-items: center; gap: 6px; translate: -50% 0; }
.app-post-cam-zoom button { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; background: rgba(20, 19, 22, .35); color: #fff; font: 500 12px/1 var(--app-font); }
.app-post-cam-zoom button[aria-pressed="true"] { min-width: 32px; height: 32px; border-radius: 16px; }
.app-post-cam-tools { display: flex; justify-content: space-around; padding: 24px 12px 0; }
.app-post-cam-tools span { display: grid; justify-items: center; gap: 8px; font: 600 11px/16px var(--app-display); }
.app-post-cam-tools .ph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 20px; }
.app-post-cam-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 0; }
.app-post-cam-bar .app-np-cam-btn { background: rgba(255, 255, 255, .14); }

/* ── Drawer, nawigacja boczna (Figma „DRAWER - Default” 117:5011, DRAWER w drawer_screens.py) ── */
.app-drawer { position: absolute; z-index: 5; inset: 0; display: flex; background: rgba(20, 19, 22, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.app-phone.is-drawer .app-drawer { opacity: 1; pointer-events: auto; }
.app-phone.is-drawer .app-hint { display: none; }
/* Status bar zostaje nad drawerem (w Figmie ramka drawera go nie ma, w aplikacji jest widoczny) */
.app-phone.is-drawer .app-status { z-index: 6; background: transparent; }
.app-dr-menu { display: flex; flex-direction: column; width: 290px; height: 100%; overflow: hidden; background: var(--app-bg); box-shadow: 0 0 40px -8px rgba(0, 0, 0, .16); translate: -100% 0; transition: translate .35s var(--app-ease); }
.app-phone.is-drawer .app-dr-menu { translate: 0 0; }
.app-dr-side { flex: 1; display: flex; justify-content: center; padding-top: calc(var(--app-sb) - 20px); }
.app-dr-close { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--app-bg); font-size: 24px; }
/* Nagłówek: tło motywu 290 × 290 (to samo co w Inspiracjach), użytkownik, grywalizacja, HOBB+ */
.app-dr-head { display: grid; gap: 8px; padding: calc(var(--app-sb) + 20px) 16px 16px; border-bottom: 1px solid var(--app-line); background: url("../asset-app-insp-bg.webp") left top / 290px auto no-repeat, var(--app-bg); }
.app-dr-user { display: flex; align-items: center; gap: 8px; }
.app-dr-av { flex: none; box-sizing: border-box; width: 48px; height: 48px; border: 1.5px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: var(--app-shadow-card); }
.app-dr-user div { display: grid; min-width: 0; }
.app-dr-user b { font: 700 14px/24px var(--app-display); }
.app-dr-user span { font: 400 12px/20px var(--app-display); }
.app-dr-game { display: grid; gap: 4px; padding: 3px; border: 1px solid #fff; border-radius: 12px; background: var(--app-bg); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.app-dr-hub { display: flex; align-items: center; justify-content: center; height: 32px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; box-shadow: 0 1px .7px rgba(0, 0, 0, .2); font: 500 14px/1 var(--app-display); }
.app-dr-stats { display: flex; align-items: center; gap: 4px; padding: 4px 8px; font: 400 12px/20px var(--app-display); }
.app-dr-stats > span { display: flex; flex: 1 0 0; align-items: center; justify-content: center; gap: 4px; }
.app-dr-stats > span:first-child { justify-content: flex-start; }
.app-dr-stats > span:last-child { justify-content: flex-end; }
.app-dr-stats b { font-weight: 700; }
.app-dr-hobs { flex: none; }
.app-dr-plus { display: grid; gap: 4px; width: 100%; padding: 5px; border: 1px solid #fff; border-radius: 12px 12px 24px 24px; background: linear-gradient(8.09deg, #ad87fe 18.26%, #efe8ff 58.16%, #abedcb 85.17%); box-shadow: var(--app-shadow-card); }
.app-dr-plus-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; color: #000; font: 400 12px/20px var(--app-display); text-shadow: 1px 1px 1px rgba(255, 255, 255, .32); }
.app-dr-plus-row b { font-weight: 700; }
.app-dr-plus-logo { display: flex; justify-content: center; padding: 8px 12px; border-radius: 32px; background: #fff; box-shadow: var(--app-shadow-card); }
.app-dr-plus-logo img { width: 102px; height: 20px; }
/* Menu */
.app-dr-body { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.app-dr-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; font: 400 14px/24px var(--app-display); text-align: left; }
.app-dr-item .ph-duotone { flex: none; font-size: 20px; }
.app-dr-dot { position: absolute; top: 13px; left: 31px; width: 7px; height: 7px; border: 1px solid #fff; border-radius: 50%; background: var(--app-high); box-sizing: content-box; }
.app-dr-invite { padding: 0 16px; }
.app-dr-invite button { display: grid; gap: 4px; width: 100%; padding: 8px 12px; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; font: 400 12px/20px var(--app-font); text-align: left; }
.app-dr-invite-top { display: flex; align-items: center; justify-content: space-between; }
.app-dr-invite-top b { color: var(--app-high); font: 700 14px/24px var(--app-display); }
.app-dr-invite-top .ph-duotone { color: var(--app-high); font-size: 24px; }
.app-dr-info { flex: 1; }
.app-dr-label { padding: 16px 16px 0; color: var(--app-muted); font: 400 12px/20px var(--app-display); }
.app-dr-foot { display: flex; border: 1px solid var(--app-line); }
.app-dr-switch { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font: 700 12px/20px var(--app-display); }
.app-dr-switch .ph-duotone { font-size: 20px; }
.app-dr-ver { flex: 1; padding: 12px 16px; border-left: 1px solid var(--app-line); font: 400 10px/16px var(--app-font); }

/* ── Nowy artykuł (Figma „NEW ARTICLE” 141:88802, article_phone w article_screens.py; klawiatura i arkusze z Nowego posta) ── */
.app-phone--art .app-screen { padding-bottom: 16px; }
.app-phone--art [data-art-view="compose"]:not([hidden]) { display: flex; flex-direction: column; min-height: calc(812px - var(--app-sb) - 16px); }
.app-ar-next { background: var(--app-primary); }
.app-ar-next.is-disabled { background: var(--app-primary); opacity: .4; }
.app-ar-src { padding: 0 16px 16px; }
/* Zdjęcie główne 343 × 192 w ramce primary-100 z paskiem „Zmień zdjęcie” */
.app-ar-head { margin: 0 16px 16px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 16px; background: #efe8ff; }
.app-ar-head > div { height: 192px; overflow: hidden; border: 1.5px solid var(--app-line); border-radius: 16px; background: #fff; }
.app-ar-head img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-phone--art .app-post-change { gap: 6px; height: auto; padding: 8px 16px; }
.app-phone--art .app-post-change .ph { font-size: 24px; }
/* Tytuł i wstęp */
.app-ar-intro { border-bottom: 1px solid var(--app-line); border-radius: 0 0 16px 16px; background: var(--app-grad-surface); }
.app-ar-field { display: grid; gap: 4px; padding: 16px; }
.app-ar-edit { min-height: 24px; padding-bottom: 4px; border-bottom: 1px solid var(--app-line); outline: 0; font: 400 16px/24px var(--app-font); overflow-wrap: anywhere; caret-color: var(--app-primary); cursor: text; }
.app-ar-edit.is-empty::before { content: attr(data-placeholder); color: var(--app-muted); pointer-events: none; }
.app-ar-edit.is-preview { cursor: default; }
.app-ar-edit :where(p, div) { margin: 0; }
.app-ar-edit > * + * { margin-top: 24px; }
.app-ar-edit h3, .app-ar-edit h4 { font: 700 18px/24px var(--app-display); }
.app-ar-edit h4 { font-size: 16px; }
.app-ar-edit b, .app-ar-edit strong { font-weight: 700; }
.app-ar-edit ul, .app-ar-edit ol { padding-left: 24px; }
.app-ar-edit ul > li { list-style: disc; }
.app-ar-edit ol > li { list-style: decimal; }
.app-ar-field.is-title .app-ar-edit { min-height: 30px; font: 700 24px/30px var(--app-display); }
.app-ar-field.is-lead .app-ar-edit { min-height: 30px; font: 400 20px/30px var(--app-display); }
.app-ar-field.is-lead .app-ar-edit > * + * { margin-top: 30px; }
.app-ar-count { margin: 0; color: var(--app-muted); font: 400 12px/20px var(--app-display); text-align: right; }
.app-ar-edit.is-empty + .app-ar-count { display: none; }
/* Karty sekcji */
.app-ar-secs { display: grid; gap: 16px; padding: 16px 0 0; }
.app-ar-secs:empty { display: none; }
.app-ar-sec { overflow: hidden; padding-bottom: 16px; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-grad-surface); }
.app-ar-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.app-ar-sec-head > span:first-child { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/20px var(--app-font); letter-spacing: .2px; text-transform: uppercase; }
.app-ar-sec-head > span:first-child .ph { font-size: 20px; }
.app-ar-acts { display: flex; gap: 4px; }
.app-ar-acts button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--app-line); border-radius: 8px; background: #fff; font-size: 16px; }
.app-phone--art .app-ar-md { margin: 0; padding: 0 16px; }
/* Galeria: do 4 zdjęć */
.app-ar-gal-head { display: grid; justify-items: center; padding: 6px 4px; text-align: center; }
.app-ar-gal-head b { font: 700 16px/24px var(--app-display); }
.app-ar-gal-head small { color: var(--app-muted); font: 400 12px/20px var(--app-font); }
.app-ar-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
.app-ar-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1.5px solid var(--app-line); border-radius: 12px; background: #fff; box-shadow: var(--app-shadow-card); color: #d5d3d9; font-size: 40px; }
.app-ar-slot-add { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--app-ink); color: #fff; font-size: 16px; }
.app-ar-slot.is-full { border: 0; }
.app-ar-slot.is-full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-ar-slot-x { position: absolute; z-index: 1; top: 6px; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--app-ink); font-size: 20px; }
.app-ar-slot-label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px; overflow: hidden; background: rgba(20, 19, 22, .72); color: #fff; font: 700 12px/20px var(--app-display); white-space: nowrap; text-overflow: ellipsis; }
.app-ar-slot-label .ph { flex: none; font-size: 14px; }
.app-ar-gal-foot { margin: 0; padding: 12px 16px 0; color: var(--app-muted); font: 400 12px/20px var(--app-font); text-align: center; }
.app-ar-gal-foot b { font-weight: 700; }
/* Wstaw post, wstaw rośliny */
.app-ar-pick { padding: 0 16px; }
.app-ar-pick button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border: 2px solid #fff; border-radius: 4px; background: #efe8ff; box-shadow: 0 1px 2px rgba(20, 19, 22, .12), 0 0 0 1px var(--app-line); color: #4e267e; font: 400 14px/20px var(--app-display); }
.app-ar-pick .ph { font-size: 20px; }
.app-ar-postwrap { padding: 8px 16px 0; }
.app-ar-postwrap:empty { display: none; }
.app-ar-postwrap .app-fpost { border-radius: 12px; }
.app-ar-plants { display: grid; gap: 4px; margin: 0 16px; padding: 4px; border-radius: 12px; background: #efe8ff; }
.app-ar-plants [data-art-plantlist] { display: grid; gap: 4px; }
.app-ar-plant { position: relative; }
.app-ar-plant-x { position: absolute; top: 4px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #e4d9ff; color: #4e267e; font-size: 16px; }
.app-ar-plant .app-more { visibility: hidden; }
.app-ar-more { justify-self: center; padding: 8px 0 6px; text-align: center; color: #4e267e; font: 500 14px/20px var(--app-display); text-decoration: underline; text-underline-offset: 3px; }
/* Zdjęcie z podpisem */
.app-ar-photo { position: relative; display: flex; align-items: flex-start; justify-content: space-between; width: calc(100% - 32px); height: 440px; margin: 0 16px; padding: 24px 16px 16px; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; font: 400 16px/24px var(--app-font); text-align: left; }
.app-ar-photo > span { max-width: 140px; }
.app-ar-photo > .ph { position: absolute; right: 16px; bottom: 16px; font-size: 28px; }
.app-ar-photo.is-full { height: auto; padding: 0; overflow: hidden; border: 0; }
.app-ar-photo.is-full img { display: block; width: 100%; height: auto; }
.app-ar-field.is-cap .app-ar-edit { font: 400 14px/20px var(--app-display); color: var(--app-subtle); }
/* Cytat */
.app-ar-author { display: block; padding: 8px 24px 0; }
.app-ar-author input { width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--app-line); outline: 0; background: transparent; color: var(--app-ink); font: 400 16px/24px var(--app-display); }
.app-ar-author input::placeholder { color: var(--app-muted); }
/* Pasek „Wykorzystane sekcje” i DODAJ SEKCJĘ */
.app-ar-bar { display: flex; align-items: center; justify-content: space-between; padding: 24px 16px; }
.app-ar-bar p { margin: 0; color: var(--app-muted); font: 400 12px/20px var(--app-display); }
.app-ar-addbtn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--app-ink); color: #fff; font: 700 14px/1 var(--app-display); text-transform: uppercase; }
.app-ar-addbtn .ph { font-size: 16px; }
/* Lista kontrolna: todo, błąd, gotowe */
.app-ar-check { display: grid; gap: 8px; margin: auto 16px 0; padding: 24px 16px 16px; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; }
.app-ar-check[data-art-check="todo"] [data-when]:not([data-when~="todo"]), .app-ar-check[data-art-check="err"] [data-when]:not([data-when~="err"]), .app-ar-check[data-art-check="ok"] [data-when]:not([data-when~="ok"]) { display: none; }
.app-ar-check-head { display: flex; align-items: center; gap: 8px; }
.app-ar-check-head b { flex: 1; font: 700 18px/24px var(--app-display); }
.app-ar-check-head .ph { font-size: 24px; }
.app-ar-check-head [data-when="err"] { color: #e5484d; }
.app-ar-check > p { margin: 0; font: 400 14px/24px var(--app-display); }
.app-ar-check ul { display: grid; gap: 4px; }
.app-ar-check li { display: flex; align-items: center; gap: 8px; font: 400 14px/24px var(--app-font); }
.app-ar-check li .ph { flex: none; font-size: 16px; color: var(--app-muted); }
.app-ar-check[data-art-check="err"] li:not(.is-ok) .ph { color: #e5484d; }
.app-ar-check li.is-ok { color: #125432; }
.app-ar-check li.is-ok .ph { color: #125432; }
.app-ar-go { display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 0; border-radius: 8px; background: var(--app-ink); color: #fff; font: 500 14px/1 var(--app-display); }
.app-ar-go.is-disabled { opacity: .4; }
.app-ar-check[data-art-check="ok"] { border-color: #c8ecd9; background: #ecf8f1; }
.app-ar-check[data-art-check="ok"] .app-ar-check-head { color: #125432; }
.app-ar-check[data-art-check="ok"] .app-ar-go { background: var(--app-primary); }
/* Arkusz „Dodaj sekcję artykułu” (395:157599) */
.app-ar-inserts { display: flex; margin: 0 -16px; padding: 16px; border-top: 1px solid var(--app-line); border-bottom: 1px solid var(--app-line); }
.app-ar-inserts button { display: grid; flex: 1; justify-items: center; gap: 16px; }
.app-ar-inserts button + button { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--app-line); }
.app-ar-inserts span { display: grid; place-items: center; width: 100%; height: 64px; border-radius: 12px; background: #fff; box-shadow: var(--app-shadow-card); font-size: 28px; }
.app-ar-inserts .is-plants { color: var(--app-high); }
.app-ar-inserts .is-post { color: var(--app-primary); }
.app-ar-inserts b { font: 700 14px/20px var(--app-display); }
.app-ar-inserts button:first-child b { color: var(--app-high); }
.app-ar-inserts button:last-child b { color: var(--app-primary); }
.app-ar-rows { display: grid; gap: 8px; padding-top: 8px; }
.app-ar-row { display: flex; align-items: center; justify-content: space-between; min-height: 56px; text-align: left; }
.app-ar-row > span { display: grid; }
.app-ar-row b { font: 700 16px/24px var(--app-display); }
.app-ar-row small { color: var(--app-muted); font: 400 12px/16px var(--app-font); }
.app-ar-row-ico { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: #fff; box-shadow: var(--app-shadow-card); font-size: 24px; }
/* Podgląd i publikacja (395:157600) */
.app-ar-pbar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; }
.app-ar-pbar > div { display: grid; flex: 1; min-width: 0; }
.app-ar-pbar b { font: 700 18px/24px var(--app-display); }
.app-ar-pbar small { font: 400 12px/14px var(--app-display); }
.app-ar-pinfo { display: grid; gap: 4px; margin: 0 16px 16px; padding: 4px; border: 1px solid var(--app-line); border-radius: 12px; background: #efe8ff; text-align: center; }
.app-ar-pinfo p { margin: 0; font: 400 14px/24px var(--app-display); }
.app-ar-pinfo p + p { padding: 8px; border-radius: 8px; background: #fff; font-family: var(--app-font); }
.app-ar-ptop { padding: 16px 0; border-radius: 0 0 16px 16px; background: var(--app-grad-surface); }
.app-ar-ptitle { padding: 0 16px; font: 700 24px/30px var(--app-display); }
.app-ar-pimg img { display: block; width: calc(100% - 32px); height: 192px; margin: 16px; border-radius: 16px; object-fit: cover; }
.app-ar-pintro { padding: 24px 16px 0; font: 400 18px/30px var(--app-font); }
.app-ar-pintro > * + * { margin-top: 30px; }
.app-ar-pbody { display: grid; gap: 24px; padding: 24px 0; }
.app-ar-pbody .app-art-text > * { margin: 0; }
.app-ar-pbody .app-art-text > * + * { margin-top: 24px; }
.app-ar-pbody .app-art-text :is(h3, h4) { font: 700 18px/24px var(--app-display); }
.app-ar-pbody .app-art-text :is(h3, h4) + * { margin-top: 16px; }
.app-ar-pbody .app-art-insert, .app-ar-pbody .app-art-plants { padding: 0 16px; }
.app-ar-pbody .app-art-plants { display: grid; gap: 4px; }
.app-ar-pquote { margin: 0 16px; padding: 4px 0 4px 16px; border-left: 3px solid var(--app-primary); }
.app-ar-pquote blockquote { margin: 0; font: 500 18px/28px var(--app-display); }
.app-ar-pquote cite { display: block; margin-top: 8px; color: var(--app-muted); font: 400 12px/20px var(--app-display); font-style: normal; }
.app-ar-opts { border-top: 1px solid var(--app-line); }
.app-ar-cat { flex-wrap: wrap; row-gap: 0; padding: 0 0 16px; }
.app-ar-cat > span:first-child { flex: 1 0 100%; }
.app-ar-cat b { display: inline-flex; flex: 1; align-items: center; gap: 4px; font: 700 14px/24px var(--app-display); }
.app-ar-tags .app-tags { padding: 8px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .app-photo > img, .app-result, .app-dialog, .app-action-sheet, .app-toggle::after { transition: none; }
  .app-photo.is-scanning .app-scan-line, .app-skeleton span, .app-hint { animation: none; }
  .app-leaves img { transition: none; }
  .app-np-loader::before { animation: none; }
  .app-np-sheet-body { transition: none; }
  .app-post-kb, .app-post-faq summary .ph { transition: none; }
  .app-drawer, .app-dr-menu { transition: none; }
}