* {
        box-sizing: border-box;
      }
      :root {
        --brand: #e69220;
        --navbar-bg: #233946;
        --ink: #233946;
        --page-ink: #233946; /* text on page bg — same as ink in light mode */
        --muted: #6f6f68;
        --page-muted: #6f6f68;
        --line: #e7e4dd;
        --page-line: #e7e4dd;
        --bg: #f6f5f1;
        --navbar-color: #233946;
        --surface: #fff;
        --surface-alt: #f0eeea;
        --input-surface: var(--surface);
        --link-accent: #35546a;
        --ok-text: #15722f;
        --thread-read-title: #8a867c;
        --thread-read-last: #a8a499;
        --thread-unread-last: #4a4a44;
        --thread-peer: #233946;
        --bubble-mine-bg: #233946;
        --bubble-mine-ink: #fff;
        --bubble-system-bg: #f0eeea;
        --bubble-system-ink: #6f6f68;
        --bubble-system-border: #e7e4dd;
        --danger-text: #a3302d;
        --danger-bg: #fff5f4;
        --danger-border: #e8b7b3;
        --action-bg: #35546a;
        --action-ink: #fff;
        --action-border: #35546a;
        --success-bg: #e7f6ec;
        --success-border: #a8d9b7;
        --account-settings-title-bg: #efe7db;
        --account-settings-border: #d9d1c3;
        --shadow-color: rgba(35, 57, 70, 0.12);
        --search-shadow-color: rgba(35, 57, 70, 0.2);
        --search-shadow-near-color: rgba(35, 57, 70, 0.11);
      }
      [data-theme="dark"] {
        --bg: #233945;
        --navbar-color: #182830;
        --page-ink: #e8e4de;
        --page-muted: rgba(232, 228, 222, 0.55);
        --page-line: rgba(255, 255, 255, 0.1);
        --surface: #394b56;
        --surface-alt: #42535c;
        --account-settings-title-bg: #31424d;
        --account-settings-border: #64798a;
        --ink: #e2ddd6;
        --muted: #9a948c;
        --line: #3a4f5e;
        --input-surface: #2d3d46;
        --link-accent: #ffd88e;
        --ok-text: #8ee6a5;
        --thread-read-title: rgba(232, 228, 222, 0.78);
        --thread-read-last: rgba(232, 228, 222, 0.58);
        --thread-unread-last: rgba(232, 228, 222, 0.86);
        --thread-peer: #ffd88e;
        --bubble-mine-bg: #4b6270;
        --bubble-mine-ink: #f4efe8;
        --bubble-system-bg: #31424d;
        --bubble-system-ink: #e8e4de;
        --bubble-system-border: #6f8799;
        --danger-text: #ffb1aa;
        --danger-bg: rgba(255, 116, 106, 0.14);
        --danger-border: rgba(255, 177, 170, 0.34);
        --action-bg: #ffd88e;
        --action-ink: #182830;
        --action-border: #ffd88e;
        --success-bg: rgba(142, 230, 165, 0.16);
        --success-border: rgba(142, 230, 165, 0.42);
        --shadow-color: rgba(0, 0, 0, 0.4);
        --search-shadow-color: rgba(0, 0, 0, 0.34);
        --search-shadow-near-color: rgba(0, 0, 0, 0.2);
      }
      body {
        font-family:
          system-ui,
          -apple-system,
          sans-serif;
        margin: 0;
        color: var(--page-ink);
        background: var(--bg);
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

      /* Navbar — deeper slate, full-width, sticky */
      .navbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        background: var(--navbar-color);
        color: #fff;
        padding: 0.6rem 1.5rem;
        transition: box-shadow 0.2s ease;
      }
      .navbar.scrolled {
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
      }
      .navbar .brand {
        display: inline-flex;
        align-items: center;
      }
      .navbar .brand img {
        height: 44px;
        display: block;
        margin: -2px 0;
      }
      .navbar #nav-auth {
        display: flex;
        align-items: center;
        margin-left: 0;
      }
      .navbar #nav-auth > a {
        color: #c3ccd4;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
        padding: 0.45rem 0.75rem;
        border-radius: 8px;
      }
      .navbar #nav-auth > a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }
      .navbar .nav-how-it-works {
        color: #c3ccd4;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
        padding: 0.45rem 0.75rem;
        border-radius: 8px;
        margin-left: auto;
      }
      .navbar .nav-how-it-works:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }
      .navbar .navlinks {
        margin-left: 0;
        display: flex;
        gap: 0.5rem;
        align-items: center;
      }
      .navbar .navlinks .nav-add {
        margin-left: 0.4rem;
      }
      .navbar .navlinks a {
        color: #c3ccd4;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
        padding: 0.45rem 0.75rem;
        border-radius: 8px;
      }
      .navbar .navlinks a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }
      .navbar .navlinks a.nav-add {
        color: #182830;
        background: var(--brand);
        font-weight: 600;
        padding: 0.45rem 0.85rem;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
      }
      .navbar .navlinks a.nav-add:hover {
        filter: brightness(0.96);
      }
      .navbar .navlinks a.nav-add svg {
        width: 16px;
        height: 16px;
      }
      #footer-theme-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--page-line);
        border-radius: 999px;
        background: transparent;
        color: var(--page-muted);
        padding: 0;
        cursor: pointer;
      }
      #footer-theme-toggle:hover {
        background: var(--surface-alt);
        color: var(--page-ink);
      }
      #footer-theme-toggle svg {
        width: 18px;
        height: 18px;
        display: block;
      }
      .mobile-post-cta {
        display: none;
      }
      .mobile-post-cta .nav-add-mobile.attention-a {
        animation: mobile-post-pulse-a 1.1s ease-out 2;
      }
      .mobile-post-cta .nav-add-mobile.attention-b {
        animation: mobile-post-pulse-b 1.1s ease-out 2;
      }
      @keyframes mobile-post-pulse-a {
        0% {
          transform: scale(1);
          box-shadow: 0 10px 24px rgba(35, 57, 70, 0.16);
        }
        35% {
          transform: scale(1.1);
          box-shadow: 0 0 0 10px rgba(230, 146, 32, 0.18);
        }
        100% {
          transform: scale(1);
          box-shadow: 0 10px 24px rgba(35, 57, 70, 0.16);
        }
      }
      @keyframes mobile-post-pulse-b {
        0% {
          transform: scale(1);
          box-shadow: 0 10px 24px rgba(35, 57, 70, 0.16);
        }
        35% {
          transform: scale(1.1);
          box-shadow: 0 0 0 10px rgba(230, 146, 32, 0.18);
        }
        100% {
          transform: scale(1);
          box-shadow: 0 10px 24px rgba(35, 57, 70, 0.16);
        }
      }

      /* Hero lockup under the navbar — left-aligned with the page content */
      .hero-banner {
        width: 90%;
        max-width: 1560px;
        margin: 0 auto;
        padding: 1.6rem 1.25rem 0.3rem;
      }
      .hero-banner img {
        width: min(416px, 92%);
        height: auto;
        display: block;
      }

      /* Search */
      .searchbar {
        position: relative;
        width: 79%;
        max-width: 1373px;
        margin: 1.65rem auto 0.88rem;
        padding: 0 1.25rem;
      }
      form {
        display: flex;
        gap: 0.5rem;
      }
      .search-input-wrap {
        position: relative;
        flex: 1;
      }
      input[type="search"] {
        width: 100%;
        padding: 0.65rem 2.9rem 0.65rem 1.15rem;
        font-size: 1.1rem;
        border: 2px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--ink);
        box-shadow:
          0 12px 32px var(--search-shadow-color),
          0 3px 10px var(--search-shadow-near-color);
        transition: border-color 150ms ease, box-shadow 150ms ease;
      }
      .search-icon {
        position: absolute;
        right: 1.15rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        pointer-events: none;
        display: flex;
      }
      .search-icon svg {
        display: block;
        width: 1.35rem;
        height: 1.35rem;
      }
      /* brand-coloured focus, not the browser's purple ring */
      .price-row input:focus,
      .price-row select:focus,
      #loc-city:focus,
      .combo-input:focus,
      .radius-row input:focus {
        outline: none;
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(35, 57, 70, 0.22);
      }
      /* Search bar is the primary action on the homepage — a warmer
         focus glow than the other (secondary) filter inputs, muted so it
         doesn't read as harsh in either theme. */
      input[type="search"]:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
        box-shadow:
          0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent),
          0 14px 36px var(--search-shadow-color),
          0 3px 10px var(--search-shadow-near-color);
      }
      /* Hide the browser's built-in search-clear "×" — we have our own
         Vymazat button, no need for a second, redundant clear control. */
      input[type="search"]::-webkit-search-cancel-button,
      input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
      }
      #reset {
        position: absolute;
        left: 0.4rem;
        top: 50%;
        transform: translateY(-50%);
        padding: 0.25rem 0.7rem;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--surface-alt);
        color: var(--muted);
        font-size: 0.8rem;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
      #reset.visible {
        display: flex;
      }
      .search-input-wrap:has(#reset.visible) input[type="search"] {
        padding-left: 5.5rem;
      }
      #reset:hover {
        border-color: #999;
        color: var(--ink);
      }
      button {
        padding: 0.6rem 1.1rem;
        font-size: 1rem;
        cursor: pointer;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--ink);
        white-space: nowrap;
      }
      button:hover {
        border-color: #999;
      }
      .search-suggestion {
        position: absolute;
        top: calc(100% + 0.45rem);
        left: 10%;
        right: 10%;
        z-index: 16;
        display: flex;
        align-items: flex-start;
        gap: 0.45rem;
        padding: 0.5rem 0.65rem;
        border: 1px solid var(--page-line);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: 0 10px 24px var(--shadow-color);
      }
      .search-suggestion[hidden] {
        display: none;
      }
      .search-suggestion-label {
        color: var(--page-muted);
        font-size: 0.83rem;
        white-space: nowrap;
        padding-top: 0.3rem;
      }
      .search-suggestion-list {
        flex: 1;
        display: flex;
        flex-wrap: nowrap;
        gap: 0.4rem;
        min-width: 0;
        overflow: hidden;
      }
      .search-suggestion-chip {
        min-height: 1.6rem;
        padding: 0.1rem 0.6rem;
        border: 1px solid var(--page-line);
        border-radius: 999px;
        background: var(--surface-alt);
        color: var(--page-ink);
        font-size: 0.82rem;
      }
      .search-suggestion-chip:hover {
        border-color: var(--brand);
        color: var(--brand);
      }
      /* Layout: clusters (left) | results (centre) | filters (right) */
      .layout {
        width: 90%;
        max-width: 1560px;
        margin: 0 auto;
        padding: 0.6rem 1.25rem 3rem;
        display: grid;
        grid-template-columns: 220px 1fr 230px;
        gap: 1.6rem;
      }
      .layout.empty {
        grid-template-columns: 1fr;
      }
      .layout.empty #clusters-side,
      .layout.empty #filters-side {
        display: none;
      }
      .layout.empty .mobile-filter-bar,
      .layout.no-results .mobile-filter-bar {
        display: none;
      }
      /* search ran but no clusters → drop the left column */
      .layout.no-clusters {
        grid-template-columns: 1fr 230px;
      }
      .layout.no-clusters #clusters-side {
        display: none;
      }
      /* "Moje inzeráty" — results only, no clusters/filters */
      .layout.solo {
        grid-template-columns: 1fr;
      }
      .layout.solo #clusters-side,
      .layout.solo #filters-side {
        display: none;
      }

      /* Filters */
      .filters {
        margin-bottom: 1.3rem;
      }
      .mobile-filter-bar {
        display: none;
      }
      .filter-drawer-close {
        display: none;
      }
      .filter-drawer-scrim {
        display: none;
      }
      .price-row {
        display: flex;
        gap: 0.4rem;
        margin-bottom: 0.9rem;
      }
      .price-row input,
      .price-row select {
        min-width: 0;
        width: 100%;
        padding: 0.4rem 0.5rem;
        border: 1px solid var(--line);
        border-radius: 6px;
        font-size: 0.85rem;
        font-family: inherit;
        background: var(--surface);
        color: var(--ink);
      }
      .price-row select {
        flex: 0 0 4.5rem;
      }
      .cond-list {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.9rem;
      }
      .cond-list label {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.85rem;
        cursor: pointer;
      }
      .cond-list input[type="checkbox"] {
        accent-color: var(--navbar-bg);
        width: 15px;
        height: 15px;
      }
      #loc-city {
        width: 100%;
        padding: 0.4rem 0.5rem;
        border: 1px solid var(--line);
        border-radius: 6px;
        font-size: 0.85rem;
        background: var(--surface);
        color: var(--ink);
      }
      .combo {
        position: relative;
        width: 100%;
      }
      .combo-source {
        display: none !important;
      }
      .combo-input {
        width: 100%;
        padding: 0.4rem 0.5rem;
        border: 1px solid var(--line);
        border-radius: 6px;
        font-size: 0.85rem;
        font-family: inherit;
        background: var(--surface);
        color: var(--ink);
      }
      .combo-list {
        position: absolute;
        z-index: 20;
        top: calc(100% + 0.25rem);
        left: 0;
        right: 0;
        max-height: 16rem;
        overflow-y: auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: 0 12px 28px rgba(12, 24, 33, 0.16);
      }
      .combo-item {
        display: block;
        width: 100%;
        padding: 0.5rem 0.65rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--ink);
        font-size: 0.9rem;
        text-align: left;
        white-space: normal;
      }
      .combo-item:hover,
      .combo-item:focus {
        background: var(--surface-alt);
        border-color: transparent;
      }
      .combo-empty {
        padding: 0.55rem 0.65rem;
        color: var(--muted);
        font-size: 0.85rem;
      }
      .radius-row {
        margin-top: 0.5rem;
        font-size: 0.85rem;
        color: var(--ink);
      }
      .radius-row input {
        width: 4.5rem;
        padding: 0.3rem 0.4rem;
        border: 1px solid var(--line);
        border-radius: 6px;
        font-size: 0.85rem;
        background: var(--surface);
        color: var(--ink);
      }

      #meta {
        color: var(--page-muted);
        font-size: 0.85rem;
        margin-bottom: 0.35rem;
        min-height: 1.2em;
      }
      #hint {
        font-size: 0.82rem;
        color: #8a6d00;
        background: #fff8e1;
        border: 1px solid #ffe9a8;
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.9rem;
        display: none;
      }
      #hint.show {
        display: block;
      }

      /* Sidebars */
      #clusters-side,
      #filters-side {
        align-self: start;
        position: sticky;
        top: 1rem;
      }
      .sidebar-title {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--page-muted);
        margin: 0.2rem 0 0.55rem 0.2rem;
      }
      .cluster-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0.65rem;
        margin-bottom: 0.25rem;
        border-radius: 8px;
        font-size: 0.9rem;
        cursor: pointer;
        color: var(--ink);
        user-select: none;
      }
      .cluster-item:hover {
        background: var(--surface-alt);
      }
      .cluster-item.active {
        background: var(--navbar-bg);
        color: #fff;
      }
      .cluster-item .count {
        font-size: 0.75rem;
        opacity: 0.7;
        background: rgba(0, 0, 0, 0.06);
        border-radius: 999px;
        padding: 0.05rem 0.45rem;
      }
      .cluster-item.active .count {
        background: rgba(255, 255, 255, 0.2);
        opacity: 0.9;
      }

      /* Result cards: photo (left) + content (title, body, footer) */
      .card {
        position: relative;
        display: flex;
        gap: 1rem;
        align-items: stretch;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 0.9rem 1rem;
        margin-bottom: 0.7rem;
        cursor: pointer;
        transition:
          box-shadow 0.15s ease,
          border-color 0.15s ease,
          transform 0.15s ease;
      }
      .card:hover {
        box-shadow: 0 4px 16px var(--shadow-color);
        border-color: #d7d9d0;
        transform: translateY(-1px);
      }
      .card.flash {
        animation: cardflash 1.8s ease;
      }
      @keyframes cardflash {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(230, 146, 32, 0);
          border-color: var(--line);
        }
        15% {
          box-shadow: 0 0 0 3px rgba(230, 146, 32, 0.55);
          border-color: var(--brand);
        }
      }
      .card-photo {
        flex: 0 0 auto;
        width: 112px;
        height: 90px;
        border-radius: 10px;
        overflow: hidden;
        background: var(--surface-alt);
      }
      .card-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .card-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
      }
      .card-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.45rem;
        margin-bottom: 0.3rem;
      }
      .card-title {
        min-width: 0;
        font-size: 1.03rem;
        font-weight: 600;
      }
      .card-body {
        font-size: 0.9rem;
        color: var(--ink);
        margin: 0;
        opacity: 0.8;
      }
      /* Krok 21: verified seller - tinted border/background */
      .card.card-verified {
        border-color: rgba(13, 158, 92, 0.45);
        background: linear-gradient(
          to left,
          var(--surface) 70%,
          rgba(13, 158, 92, 0.12) 100%
        );
      }
      .card.card-verified:hover {
        border-color: rgba(13, 158, 92, 0.7);
      }
      [data-theme="dark"] .card.card-verified {
        background: linear-gradient(
          to left,
          var(--surface) 64%,
          rgba(13, 158, 92, 0.26) 100%
        );
      }
      /* footer: price badge (left) ........ location + condition tags (right) */
      .card-footer {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: auto;
        padding-top: 0.6rem;
      }
      .price-badge {
        background: var(--navbar-bg);
        color: #fff;
        font-weight: 700;
        font-size: 0.82rem;
        white-space: nowrap;
        padding: 0.24rem 0.55rem;
        border-radius: 6px;
      }
      .card-tags {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-left: auto;
        justify-content: flex-end;
      }
      .tag {
        display: inline-flex;
        align-items: center;
        gap: 0.28rem;
        font-size: 0.76rem;
        font-weight: 600;
        white-space: nowrap;
        padding: 0.18rem 0.5rem;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
      }
      .tag-ico {
        width: 12px;
        height: 12px;
        flex: 0 0 auto;
        opacity: 0.85;
      }
      .tag-loc {
        background: color-mix(in srgb, #e7f0fb 80%, #14508c);
        color: #14508c;
      }
      /* condition grades: green → amber → red */
      .cond-nove {
        background: color-mix(in srgb, #d6f5df 80%, #0f5a26);
        color: #0f5a26;
      }
      .cond-jako-nove {
        background: color-mix(in srgb, #e3f6e7 80%, #15722f);
        color: #15722f;
      }
      .cond-velmi-dobry {
        background: color-mix(in srgb, #eaf6e0 80%, #4a6a16);
        color: #4a6a16;
      }
      .cond-dobry {
        background: color-mix(in srgb, #fdf3da 80%, #8a6d00);
        color: #8a6d00;
      }
      .cond-opotrebene {
        background: color-mix(in srgb, #fde7d6 80%, #9a5500);
        color: #9a5500;
      }
      .cond-poskozene {
        background: color-mix(in srgb, #fde3e3 80%, #9a2222);
        color: #9a2222;
      }
      .cond-default {
        background: color-mix(in srgb, #eef0f2 80%, #555);
        color: #555;
      }

      /* Search loading — pulsing dot centered in the viewport while a query runs */
      .search-loading {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none; /* never block typing in the search bar */
        background: rgba(0, 0, 0, 0.15);
      }
      .search-loading[hidden] {
        display: none;
      }
      .pulse-dot {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--navbar-bg);
        box-shadow: 0 2px 14px rgba(35, 57, 70, 0.25);
        animation: pulse-dot 1s ease-out infinite;
      }
      [data-theme="dark"] .pulse-dot {
        background: #4a7a96;
        box-shadow: 0 2px 14px rgba(74, 122, 150, 0.35);
        animation-name: pulse-dot-dark;
      }
      @keyframes pulse-dot {
        0% {
          transform: scale(0.5);
          box-shadow: 0 0 0 0 rgba(35, 57, 70, 0.6);
        }
        70% {
          transform: scale(1.3);
          box-shadow: 0 0 0 80px rgba(35, 57, 70, 0);
        }
        100% {
          transform: scale(0.5);
          box-shadow: 0 0 0 0 rgba(35, 57, 70, 0);
        }
      }
      @keyframes pulse-dot-dark {
        0% {
          transform: scale(0.5);
          box-shadow: 0 0 0 0 rgba(74, 122, 150, 0.7);
        }
        70% {
          transform: scale(1.3);
          box-shadow: 0 0 0 80px rgba(74, 122, 150, 0);
        }
        100% {
          transform: scale(0.5);
          box-shadow: 0 0 0 0 rgba(74, 122, 150, 0);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .pulse-dot {
          animation-duration: 2.4s;
        }
      }

      /* Relevance divider between exact and semantic-only matches (Krok 9) */
      .rel-divider {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin: 1rem 0 0.9rem;
      }
      .rel-divider::before,
      .rel-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--page-line);
      }
      .rel-divider span {
        font-size: 0.78rem;
        color: var(--page-muted);
        white-space: nowrap;
      }

      /* Explicit notice when there is no exact match at all (only related results) */
      .rel-none {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin: 0.4rem 0 1rem;
        padding: 0.7rem 0.9rem;
        border-radius: 8px;
        border: 1px solid var(--page-line);
        border-left: 3px solid #e0a23a;
        background: rgba(224, 162, 58, 0.08);
      }
      .rel-none strong {
        font-size: 0.9rem;
        color: var(--page-text);
      }
      .rel-none span {
        font-size: 0.8rem;
        color: var(--page-muted);
      }

      /* Partial match: results found, but some query word matched nothing (typo) */
      .rel-partial {
        margin: 0.2rem 0 1rem;
        padding: 0.55rem 0.9rem;
        border-radius: 8px;
        border: 1px solid var(--page-line);
        border-left: 3px solid #e0a23a;
        background: rgba(224, 162, 58, 0.08);
      }
      .rel-partial span {
        font-size: 0.8rem;
        color: var(--page-muted);
      }

      .more-wrap {
        text-align: center;
        margin-top: 1rem;
      }
      #more {
        padding: 0.55rem 1.4rem;
      }

      /* My-adverts management row (status + owner actions) */
      .card-manage {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.6rem;
        padding-top: 0.6rem;
        border-top: 1px solid var(--line);
      }
      .mng-badge {
        font-size: 0.72rem;
        font-weight: 600;
        padding: 0.14rem 0.55rem;
        border-radius: 999px;
      }
      .mng-views {
        color: var(--muted);
        font-size: 0.78rem;
        white-space: nowrap;
      }
      .mng-active {
        background: #e7f6ec;
        color: #15722f;
      }
      .mng-sold {
        background: #fdf0e3;
        color: #9a5500;
      }
      .mng-reserved {
        background: #e7f0fb;
        color: #285b91;
      }
      .card-status {
        display: inline-flex;
        flex: 0 0 auto;
        margin-top: 0.05rem;
        white-space: nowrap;
      }
      .mng-expired {
        background: #eef0f2;
        color: #666;
      }
      .mng-expiring {
        background: #fff7e0;
        color: #8a6600;
      }
      .mng-pending-verify {
        background: #fff7e0;
        color: #8a6600;
        cursor: help;
      }
      .mng-actions {
        margin-left: auto;
        display: flex;
        gap: 0.4rem;
      }
      .mng-btn {
        font-size: 0.82rem;
        font-weight: 700;
        padding: 0.38rem 0.72rem;
        border: 1px solid var(--action-border);
        border-radius: 6px;
        background: var(--action-bg);
        color: var(--action-ink);
        box-shadow: 0 1px 2px var(--shadow-color);
        cursor: pointer;
      }
      .mng-btn:hover {
        filter: brightness(1.06);
      }
      .mng-del {
        color: var(--danger-text);
        background: var(--danger-bg);
        border-color: var(--danger-border);
        box-shadow: none;
      }
      .card-del-corner {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 28px;
        height: 28px;
        padding: 0;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        border-radius: 6px;
        color: var(--page-muted);
        opacity: 0.55;
        cursor: pointer;
        z-index: 1;
      }
      .card-del-corner svg {
        width: 16px;
        height: 16px;
      }
      .card-del-corner:hover {
        opacity: 1;
        color: var(--danger-text);
        background: var(--danger-bg);
      }

      /* Footer */
      /* Sticky footer: pushed to the bottom of the viewport when content is short,
       below the content when it's tall (body is a flex column, min-height 100vh). */
      .site-footer {
        border-top: 1px solid var(--page-line);
        margin-top: auto;
        background: transparent;
      }
      [data-theme="dark"] .site-footer {
        background: #2a4456;
      }
      .footer-inner {
        width: 90%;
        max-width: 1560px;
        margin: 0 auto;
        padding: 1.5rem 1.25rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1.3rem;
      }
      .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.3rem;
      }
      .footer-links a {
        color: var(--page-muted);
        text-decoration: none;
        font-size: 0.85rem;
      }
      .footer-links a:hover {
        color: var(--page-ink);
      }
      .footer-tools {
        display: flex;
        align-items: center;
        gap: 0.65rem;
      }
      .footer-copy {
        margin-left: auto;
        color: var(--page-muted);
        font-size: 0.82rem;
      }
      .floatingchat-container-wrap {
        right: max(1.5rem, env(safe-area-inset-right)) !important;
        bottom: calc(5vh + 1.5rem + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        transform: scale(0.8) !important;
        transform-origin: bottom right !important;
        z-index: 45 !important;
      }

      /* Advert detail */
      .detail {
        width: 90%;
        max-width: 1560px;
        margin: 0 auto;
        padding: 0.8rem 1.25rem 1.4rem;
      }
      /* Grow the detail view to fill the viewport so "Podobné inzeráty" drops
       down tight above the footer, yet stays visible (no gap below footer). */
      .detail:not([hidden]) {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
        gap: 1.2rem;
      }
      .detail-back {
        background: none;
        border: 0;
        color: var(--navbar-bg);
        font-size: 0.92rem;
        font-weight: 500;
        padding: 0.3rem 0;
        margin-bottom: 0;
        cursor: pointer;
        border-radius: 6px;
        align-self: flex-start;
      }
      .detail-back:hover {
        color: #000;
      }
      /* Top bubble: photo left + title/desc/chips right */
      .detail-top-card {
        padding: 0;
        overflow: hidden;
      }
      .detail-top-grid {
        display: grid;
        grid-template-columns: minmax(300px, 578px) minmax(0, 1fr);
        align-items: stretch;
      }
      .detail-media {
        padding: 1rem 1rem 1rem 1rem;
      }
      .detail-photo {
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--surface);
        border-radius: 8px;
      }
      .detail-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .detail-thumbs {
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
        padding: 0.6rem 0.8rem;
        background: var(--surface);
      }
      .detail-thumbs img {
        width: 58px;
        height: 46px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        border: 1px solid var(--line);
      }
      .detail-thumbs img.active {
        border-color: var(--brand);
      }
      .detail-top-info {
        padding: 1.6rem 1.8rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      /* Shared card style */
      .detail-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 14px;
      }
      .detail-info {
        padding: 1.4rem 1.6rem;
      }
      .detail-title {
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0;
        line-height: 1.25;
      }
      .detail-body {
        font-size: 0.98rem;
        line-height: 1.65;
        color: var(--ink);
        margin: 0;
        white-space: pre-wrap;
        opacity: 0.85;
      }
      /* Chips block — sits at the bottom-right of the top-info column.
         Stacks the two chip rows with the same gap that separates chips
         within a row, so vertical and horizontal spacing match. */
      .detail-chips-stack {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        margin-top: auto;
      }
      .detail-priceline {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.55rem;
        flex-wrap: wrap;
        padding-bottom: 0;
      }
      .detail-meta-row {
        display: flex;
        justify-content: flex-end;
      }
      .detail-chip {
        display: inline-flex;
        align-items: baseline;
        gap: 0.35rem;
        background: var(--surface-alt);
        border: 1px solid var(--line);
        border-radius: 7px;
        padding: 0.34rem 0.62rem;
      }
      .detail-chip[hidden] {
        display: none;
      }
      .detail-chip-label {
        font-size: 0.62rem;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .detail-chip-val {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--ink);
      }
      #detail-handover-pref-label {
        margin-left: 0.35rem;
      }
      .detail-contact-zone {
        border-top: 1px solid var(--line);
        padding-top: 1.2rem;
        display: flex;
        justify-content: flex-end;
      }
      .contact-btn {
        background: var(--brand);
        color: #233946;
        font-weight: 600;
        border: 0;
        padding: 0.55rem 1.1rem;
        border-radius: 8px;
        cursor: not-allowed;
        opacity: 0.85;
      }
      @media (max-width: 720px) {
        .detail-top-grid {
          grid-template-columns: 1fr;
        }
      }

      /* "Podobné inzeráty" strip (Krok 9) — embedding nearest neighbours */
      .detail-similar {
        margin-top: auto;
        padding-top: 2.4rem;
      }
      .similar-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0 0 0.9rem;
        color: var(--page-ink);
      }
      .similar-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.9rem;
      }
      .similar-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        transition:
          box-shadow 0.15s ease,
          border-color 0.15s ease,
          transform 0.15s ease;
      }
      .similar-card:hover {
        box-shadow: 0 4px 16px var(--shadow-color);
        border-color: #d7d9d0;
        transform: translateY(-1px);
      }
      .similar-photo {
        width: 100%;
        aspect-ratio: 4 / 3;
        background: var(--surface-alt);
      }
      .similar-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .similar-name {
        font-size: 0.85rem;
        font-weight: 600;
        padding: 0.5rem 0.6rem 0.15rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .similar-price {
        font-size: 0.82rem;
        color: var(--muted);
        padding: 0 0.6rem 0.55rem;
      }

      /* Contact seller (Krok 7) — composer block (460px) sits at the card's right */
      .contact-box {
        width: 100%;
      }
      .detail-share-actions {
        display: flex;
      }
      .detail-share-actions[hidden] {
        display: none;
      }
      .detail-share-btn {
        flex: none;
        width: 32px;
        height: 32px;
        border: 1px solid var(--line);
        background: var(--surface-alt);
        border-radius: 8px;
        color: var(--muted);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
      }
      .detail-share-btn:hover {
        color: var(--link-accent);
        border-color: var(--action-border);
      }
      .detail-share-btn svg {
        width: 18px;
        height: 18px;
        display: block;
      }
      .contact-btn {
        cursor: pointer;
        opacity: 1;
      }
      .contact-note {
        font-size: 0.9rem;
        color: var(--muted);
        margin: 0.2rem 0;
      }
      .contact-note.ok {
        color: var(--ok-text, #15722f);
      }
      .contact-note a {
        color: var(--link-accent);
        font-weight: 600;
        text-decoration: none;
      }
      .contact-note a:hover {
        text-decoration: underline;
      }
      .contact-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
      }
      .contact-form label {
        font-size: 0.92rem;
        color: var(--ink);
        font-weight: 700;
      }
      .contact-label-handle {
        font-weight: 500;
      }
      /* Krok 21: seller frame in detail contact box */
      .contact-label-row {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
      }
      .seller-frame {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: var(--navbar-bg);
        color: #fff;
        padding: 0.25rem 0.55rem 0.25rem 0.25rem;
        border-radius: 50px;
        font-size: 0.85rem;
      }
      .seller-avatar {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.75rem;
      }
      .seller-avatar.unverified {
        color: #e67e22;
      }
      .seller-avatar.verified {
        background: #0d9e5c;
        font-size: 0.7rem;
      }
      .seller-handle {
        font-weight: 500;
      }
      a.seller-handle {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 0.4);
        cursor: pointer;
      }
      a.seller-handle:hover {
        text-decoration-color: rgba(255, 255, 255, 0.9);
      }
      /* Thread list / thread head sit on a light surface, not the dark contact
       box — use currentColor so the underline stays visible there. */
      .thread-who a.seller-handle,
      .thread-head-who a.seller-handle {
        font-weight: inherit;
        text-decoration-color: currentColor;
      }
      .thread-who a.seller-handle:hover,
      .thread-head-who a.seller-handle:hover {
        text-decoration-color: currentColor;
        opacity: 0.8;
      }
      /* Seller profile page (Krok 31) */
      #page-seller {
        width: 90%;
        max-width: 900px;
        margin: 2rem auto 3rem;
        padding: 0 1.25rem;
        color: var(--ink);
      }
      #page-seller[hidden] {
        display: none;
      }
      .seller-profile {
      }
      .seller-header {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin: 1.5rem 0 0.75rem;
      }
      .seller-profile-handle {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--page-ink);
      }
      .seller-header .seller-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        flex-shrink: 0;
      }
      .seller-rep {
        font-size: 1rem;
        color: var(--page-ink);
        margin-bottom: 1.5rem;
      }
      .seller-rep-score {
        font-weight: 700;
        font-size: 1.1rem;
      }
      .seller-rep-count {
        color: var(--muted);
      }
      .seller-rep-empty {
        color: var(--muted);
        font-style: italic;
      }
      .seller-adverts-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--page-ink);
        margin: 0 0 1rem;
      }
      .seller-adverts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 1rem;
      }
      /* .card is built for a full-width list row; inside this narrower grid
         its footer (price + tags) needs to be allowed to wrap regardless of
         viewport width, since the existing wrap rule only triggers below an
         860px *viewport*, not a narrow grid column. */
      .seller-adverts-grid .card-footer {
        flex-wrap: wrap;
      }
      .seller-adverts-grid .card-tags {
        margin-left: 0;
        justify-content: flex-start;
      }
      .seller-no-adverts {
        color: var(--muted);
        font-style: italic;
      }
      .seller-loading,
      .seller-error {
        padding: 2rem 0;
        color: var(--muted);
      }
      #page-expired {
        width: 90%;
        max-width: 760px;
        margin: 2rem auto 3rem;
        padding: 0 1.25rem;
        color: var(--ink);
      }
      #page-expired[hidden] {
        display: none;
      }
      .expired-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: 0 10px 30px var(--shadow-color);
        padding: 1.5rem 1.4rem;
      }
      .expired-title {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--page-ink);
        margin: 0 0 0.7rem;
      }
      .expired-copy {
        font-size: 1rem;
        line-height: 1.6;
        color: var(--muted);
        margin: 0 0 1.1rem;
      }
      .expired-back {
        min-height: 44px;
        padding: 0.7rem 1rem;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--surface-alt);
        color: var(--ink);
        cursor: pointer;
        font: inherit;
        font-weight: 600;
      }
      .expired-back:hover {
        border-color: var(--brand);
        color: #000;
      }
      .contact-form textarea {
        width: 100%;
        padding: 0.55rem 0.65rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: 0.95rem;
        font-family: inherit;
        resize: vertical;
        background: var(--surface-alt);
        color: var(--ink);
      }
      .contact-form textarea:focus {
        outline: none;
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(35, 57, 70, 0.22);
      }
      .contact-form textarea::placeholder {
        color: #a9a9a2;
        opacity: 1;
      }
      .contact-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: 100%;
        justify-content: flex-end;
      }
      .contact-actions .create-msg {
        order: -1;
        margin-right: auto;
      }

      /* Report advert (Krok 12) — flag in the card header (top-right) */
      .detail-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.6rem;
        position: relative;
      }
      .detail-status-note {
        margin: 0;
        padding: 0.75rem 0.9rem;
        border-radius: 10px;
        background: #f6ecd4;
        color: #6b4a09;
        font-size: 0.92rem;
        line-height: 1.45;
      }
      .detail-report {
        margin: 0;
        flex: none;
      }
      .detail-head-actions {
        display: flex;
        align-items: center;
        flex: none;
        gap: 0.55rem;
      }
      .report-link {
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
        color: var(--muted);
        font-size: 0.85rem;
        text-decoration: underline;
      }
      .report-link:hover {
        color: #c0392b;
      }
      .report-note {
        font-size: 0.85rem;
        color: #15722f;
        margin: 0.4rem 0 0;
      }
      .report-btn {
        flex: none;
        width: 32px;
        height: 32px;
        border: 1px solid var(--line);
        background: var(--surface-alt);
        border-radius: 8px;
        color: var(--muted);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
      }
      .report-btn:hover {
        color: #c0392b;
        border-color: #e3c7c3;
      }
      .report-btn svg {
        width: 19px;
        height: 19px;
        display: block;
      }
      .report-menu {
        position: absolute;
        right: 0;
        top: 40px;
        z-index: 6;
        width: 300px;
        max-width: 84vw;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 8px 28px var(--shadow-color);
        padding: 0.7rem;
        text-align: left;
      }
      .report-menu .rm-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--ink);
        margin: 0.1rem 0.15rem 0.55rem;
      }
      .report-opt {
        display: block;
        width: 100%;
        text-align: left;
        border: 1px solid transparent;
        border-radius: 10px;
        padding: 0.6rem 0.7rem;
        cursor: pointer;
        margin-bottom: 0.45rem;
        white-space: normal;
        overflow-wrap: anywhere;
      }
      .report-opt:last-child {
        margin-bottom: 0;
      }
      .report-opt .ro-main {
        font-size: 0.88rem;
        font-weight: 600;
        line-height: 1.3;
      }
      .report-opt .ro-sub {
        font-size: 0.76rem;
        margin-top: 0.2rem;
        line-height: 1.35;
      }
      .report-opt.rules {
        background: #fcebeb;
        border-color: #f0c9c5;
      }
      .report-opt.rules .ro-main {
        color: #7d1f1f;
      }
      .report-opt.rules .ro-sub {
        color: #a32d2d;
      }
      .report-opt.rules:hover {
        background: #f9dede;
      }
      .report-opt.scam {
        background: #faeeda;
        border-color: #f1d39a;
      }
      .report-opt.scam .ro-main {
        color: #6b3f08;
      }
      .report-opt.scam .ro-sub {
        color: #854f0b;
      }
      .report-opt.scam:hover {
        background: #f6e6c6;
      }

      /* Moderation admin page (Krok 12 + Krok 18) */
      .admin-tabs {
        display: flex;
        gap: 0.3rem;
        margin-bottom: 1.2rem;
        flex-wrap: wrap;
      }
      .admin-tab {
        cursor: pointer;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0.4rem 0.85rem;
        font-size: 0.88rem;
        font-weight: 600;
        background: var(--surface-alt);
        color: var(--ink);
      }
      .admin-tab.active {
        background: var(--navbar-bg);
        color: #fff;
        border-color: var(--navbar-bg);
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        column-gap: 2.5rem;
      }
      .stats-group {
        margin-bottom: 1.6rem;
        min-width: 0;
      }
      .stats-title {
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--page-muted);
        margin: 0 0 0.4rem;
      }
      .stats-rows {
        border-top: 1px solid var(--line);
        max-width: none;
      }

      .stat-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.2rem;
        padding: 0.45rem 0;
        border-bottom: 1px solid var(--line);
      }
      .stat-row--alert .stat-row-label {
        color: #b84c00;
      }
      .stat-row--alert .stat-row-val {
        color: #b84c00;
        font-weight: 700;
      }

      .stat-row-label {
        font-size: 0.88rem;
        color: var(--ink);
      }
      .stat-row-dots {
        display: none;
      }
      .stat-row-val {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
      }

      .stat-pct-badge {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--muted);
        background: var(--surface-alt);
        border-radius: 4px;
        padding: 0.1em 0.35em;
        line-height: 1.4;
      }
      .stat-pct-track {
        display: inline-block;
        width: 48px;
        height: 4px;
        background: var(--line);
        border-radius: 2px;
        vertical-align: middle;
        overflow: hidden;
      }
      .stat-pct-fill {
        display: block;
        height: 100%;
        background: var(--navbar-bg);
        border-radius: 2px;
        transition: width 0.3s ease;
      }

      .report-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 0.9rem 1.1rem;
        margin-bottom: 0.8rem;
      }
      .report-card.hidden-adv {
        opacity: 0.6;
      }
      .report-card h3 {
        margin: 0 0 0.35rem;
        font-size: 1rem;
      }
      .report-card h3 a {
        color: var(--navbar-bg);
        text-decoration: none;
      }
      .report-meta {
        font-size: 0.82rem;
        color: var(--muted);
        margin: 0 0 0.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 1rem;
      }
      .report-badge {
        display: inline-block;
        background: #c0392b;
        color: #fff;
        font-weight: 700;
        border-radius: 999px;
        padding: 0.05rem 0.5rem;
        font-size: 0.78rem;
      }
      .report-badge.warn {
        background: #b06a00;
      }
      .report-badge.tag {
        background: #777;
      }
      .report-badge.score {
        background: #5a3e8a;
      }
      .report-reasons {
        margin: 0.3rem 0 0.7rem;
        padding-left: 1.1rem;
        font-size: 0.88rem;
        color: var(--ink);
        opacity: 0.8;
      }
      .report-reasons li {
        margin: 0.1rem 0;
      }
      .report-body {
        font-size: 0.88rem;
        color: var(--ink);
        opacity: 0.75;
        margin: 0 0 0.7rem;
        white-space: pre-wrap;
      }
      .report-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      .report-actions button {
        cursor: pointer;
        white-space: nowrap;
        border-radius: 8px;
        border: 1px solid var(--line);
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
        font-weight: 600;
        background: var(--surface-alt);
        color: var(--ink);
      }
      .report-actions button.danger {
        background: #c0392b;
        color: #fff;
        border-color: #c0392b;
      }
      .report-actions button.danger-strong {
        background: #7d1f14;
        color: #fff;
        border-color: #7d1f14;
      }
      .report-actions button:disabled {
        opacity: 0.5;
        cursor: default;
      }
      .admin-search {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
      }
      .admin-search input {
        flex: 1;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
        background: var(--surface);
        color: var(--ink);
      }
      .audit-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem 0.8rem;
        align-items: baseline;
        padding: 0.55rem 0;
        border-bottom: 1px solid var(--line);
        font-size: 0.88rem;
      }
      .audit-row:last-child {
        border-bottom: none;
      }
      .audit-action {
        font-weight: 700;
        color: var(--ink);
      }
      .audit-ts {
        color: var(--muted);
        font-size: 0.8rem;
      }

      /* Messages / threads (Krok 7) */
      .messages {
        width: 90%;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0.8rem 1.25rem 3rem;
      }
      .messages-overview {
        display: grid;
        grid-template-columns: minmax(12rem, 15rem) 1fr;
        align-items: start;
        gap: 1rem;
      }
      .messages-limit-info {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-alt);
        color: var(--page-muted);
        font-size: 0.88rem;
        line-height: 1.45;
        padding: 0.75rem 0.85rem;
      }
      .messages-thread-groups {
        min-width: 0;
      }
      .thread-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .thread-group-title {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--page-muted);
        margin: 1.1rem 0 0.5rem;
      }
      .thread-group-title:first-child {
        margin-top: 0;
      }
      .thread-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        cursor: pointer;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 0.8rem 1rem;
        transition:
          box-shadow 0.15s ease,
          border-color 0.15s ease;
      }
      .thread-row:hover {
        box-shadow: 0 4px 16px var(--shadow-color);
        border-color: var(--account-settings-border);
      }
      .thread-row-main {
        flex: 1;
        min-width: 0;
      }
      .thread-title {
        font-weight: 600;
        font-size: 1rem;
      }
      .thread-last {
        font-size: 0.87rem;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* Read threads are dimmed so a thread with a new message stands out. */
      .thread-row:not(.unread) .thread-title {
        font-weight: 500;
        color: var(--thread-read-title);
      }
      .thread-row:not(.unread) .thread-last {
        color: var(--thread-read-last);
      }
      .thread-row.unread .thread-title {
        font-weight: 700;
        color: var(--ink);
      }
      .thread-row.unread .thread-last {
        color: var(--thread-unread-last);
      }
      .unread-dot-sm {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand);
        margin-right: 0.45rem;
        vertical-align: middle;
        flex: 0 0 auto;
      }
      .thread-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.2rem;
        flex: 0 0 auto;
      }
      .thread-who {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--thread-peer);
      }
      .thread-time {
        font-size: 0.76rem;
        color: var(--muted);
      }
      .thread-head {
        display: flex;
        align-items: baseline;
        gap: 0.8rem;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--line);
        padding-bottom: 0.8rem;
        margin-bottom: 1rem;
      }
      .thread-head-title {
        font-weight: 600;
        font-size: 1.05rem;
        color: var(--ink);
      }
      a.thread-advert-link {
        color: var(--thread-peer);
        text-decoration: none;
      }
      a.thread-advert-link:hover {
        text-decoration: underline;
      }
      .thread-head-who {
        font-size: 0.85rem;
        color: var(--thread-peer);
        font-weight: 600;
      }
      .thread-block-btn {
        margin-left: auto;
        min-height: 30px;
        padding: 0.28rem 0.62rem;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: transparent;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
      }
      .thread-block-btn:hover {
        border-color: var(--account-settings-border);
        color: var(--ink);
        background: var(--surface-alt);
      }
      .bubbles {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        max-height: 56vh;
        overflow-y: auto;
        padding: 0.2rem;
      }
      .bubble {
        max-width: 72%;
        padding: 0.55rem 0.8rem;
        border-radius: 14px;
      }
      .bubble-body {
        font-size: 0.94rem;
        line-height: 1.45;
        white-space: pre-wrap;
      }
      .bubble-time {
        font-size: 0.72rem;
        opacity: 0.7;
        margin-top: 0.25rem;
      }
      .bubble.mine {
        align-self: flex-end;
        background: var(--bubble-mine-bg);
        color: var(--bubble-mine-ink);
        border-bottom-right-radius: 4px;
      }
      .bubble.theirs {
        align-self: flex-start;
        background: var(--surface);
        border: 1px solid var(--line);
        border-bottom-left-radius: 4px;
      }
      /* System note (e.g. rating nudge) — centered, muted, not a chat bubble */
      .bubble-system {
        align-self: center;
        max-width: 86%;
        text-align: center;
        background: var(--bubble-system-bg);
        border: 1px dashed var(--bubble-system-border);
        border-radius: 10px;
        padding: 0.5rem 0.8rem;
        color: var(--bubble-system-ink);
      }
      .bubble-system-body {
        font-size: 0.86rem;
        line-height: 1.45;
      }
      .bubble-system .bubble-time {
        opacity: 0.6;
      }
      .bubble-system .inline-rate-q,
      .bubble-system .rate-dim-label {
        color: var(--bubble-system-ink);
      }
      /* Inline rating attached to the system note (rate without leaving the thread) */
      .inline-rate {
        margin-top: 0.6rem;
        text-align: left;
      }
      .inline-rate-q {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 0.4rem;
        text-align: center;
      }
      .inline-rate .rate-actions {
        justify-content: center;
      }
      .inline-rate.done {
        font-size: 0.88rem;
        color: var(--ok-text, #15722f);
        margin-top: 0.5rem;
        text-align: center;
      }
      .inline-rate-msg {
        width: 100%;
        text-align: center;
        font-size: 0.82rem;
      }
      .reply-row {
        display: flex;
        gap: 0.6rem;
        align-items: flex-end;
        margin-top: 1rem;
      }
      .reply-row textarea {
        flex: 1;
        padding: 0.55rem 0.65rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: 0.95rem;
        font-family: inherit;
        resize: vertical;
        background: var(--surface);
        color: var(--ink);
      }
      .reply-row textarea:focus {
        outline: none;
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(35, 57, 70, 0.22);
      }

      /* Reputation slider (Krok 8) — red→green track with a position marker next to
       a @handle. No number is shown (reserved for the future seller profile). */
      .rep-wrap {
        display: inline-flex;
        vertical-align: middle;
      }
      .rep-slider {
        position: relative;
        display: inline-block;
        width: 64px;
        height: 8px;
        border-radius: 999px;
        vertical-align: middle;
        background: linear-gradient(
          to right,
          #e0524d 0%,
          #e8c14a 50%,
          #36a85b 100%
        );
      }
      .rep-slider-empty {
        background: #e3e5e8;
      }
      .rep-slider-dot {
        position: absolute;
        top: 50%;
        width: 12px;
        height: 12px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: #fff;
        border: 2px solid #233946;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
      }
      .rep-slider-empty .rep-slider-dot {
        border-color: #9aa0a6;
      }

      /* Inline 1–5 rating dimensions (komunikace, soulad s popisem) */
      .rate-dim {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 0.3rem;
        margin: 0.5rem 0;
      }
      .rate-dim-label {
        font-size: 0.82rem;
        color: var(--muted);
        text-align: center;
      }
      .rate-stars {
        display: inline-flex;
        gap: 0.25rem;
      }
      /* Star rating: position-coloured (1–2 red, 3 yellow, 4–5 green). Outline by
       default, solid when selected. */
      .rate-star {
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        line-height: 0;
      }
      .rate-star svg {
        width: 26px;
        height: 26px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linejoin: round;
        transition: transform 0.1s ease;
      }
      .rate-star.tone-bad {
        color: #c0392b;
      }
      .rate-star.tone-mid {
        color: #e0a400;
      }
      .rate-star.tone-good {
        color: #2e7d32;
      }
      .rate-star:hover svg {
        transform: scale(1.12);
      }
      .rate-star.sel svg {
        fill: currentColor;
      }
      .rate-star:disabled {
        cursor: default;
      }
      .rate-star:disabled:hover svg {
        transform: none;
      }
      .rate-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-top: 0.5rem;
      }
      .rate-save {
        background: var(--brand);
        color: #233946;
        font-weight: 600;
        border: 0;
        padding: 0.4rem 0.9rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.9rem;
      }
      .rate-save:hover {
        filter: brightness(0.96);
      }
      .rate-save:disabled {
        opacity: 0.6;
        cursor: default;
      }

      /* Modal (buyer picker) */
      .modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(20, 28, 35, 0.45);
        padding: 1rem;
      }
      .modal-overlay[hidden] {
        display: none;
      }
      .modal {
        background: var(--surface);
        border-radius: 14px;
        padding: 1.4rem 1.5rem;
        width: min(420px, 100%);
        box-shadow: 0 20px 60px var(--shadow-color);
      }
      .modal h2 {
        font-size: 1.15rem;
        margin: 0 0 0.3rem;
      }
      .modal .modal-sub {
        font-size: 0.88rem;
        color: var(--muted);
        margin: 0 0 1rem;
      }
      .modal .buyer-opt {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.6rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.95rem;
      }
      .modal .buyer-opt:hover {
        background: var(--surface-alt);
      }
      .modal .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.6rem;
        margin-top: 1.2rem;
      }
      .modal .btn-primary {
        background: var(--brand);
        color: #233946;
        font-weight: 600;
        border: 0;
        padding: 0.55rem 1.1rem;
        border-radius: 8px;
        cursor: pointer;
      }
      .modal .btn-ghost {
        background: none;
        border: 1px solid var(--line);
        padding: 0.55rem 1.1rem;
        border-radius: 8px;
        cursor: pointer;
      }
      .modal .btn-danger {
        color: var(--danger-text);
        background: var(--danger-bg);
        border: 1px solid var(--danger-border);
        font-weight: 600;
        padding: 0.55rem 1.1rem;
        border-radius: 8px;
        cursor: pointer;
      }
      .ai-improve-compare {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        margin-bottom: 1rem;
      }
      .ai-improve-compare h3 {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--muted);
        margin: 0 0 0.25rem;
      }
      .ai-improve-compare p {
        margin: 0;
        padding: 0.6rem 0.75rem;
        background: var(--surface-alt);
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: 0.9rem;
        white-space: pre-wrap;
        max-height: 220px;
        overflow-y: auto;
      }

      /* Unread badge (Krok 7 follow-up) */
      .unread-dot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        margin-left: 0.35rem;
        border-radius: 999px;
        background: var(--brand);
        color: #233946;
        font-size: 0.72rem;
        font-weight: 700;
      }
      .nav-menu .unread-dot {
        margin-left: 0.4rem;
      }
      .nav-notifications {
        border-top: 1px solid var(--line);
        margin-top: 0.25rem;
        padding-top: 0.25rem;
      }
      .nav-note,
      .nav-note-empty {
        width: 100%;
        display: block;
        border: 0;
        background: transparent;
        color: var(--ink);
        padding: 0.5rem 0.7rem;
        border-radius: 7px;
        text-align: left;
        font: inherit;
        font-size: 0.85rem;
      }
      .nav-note {
        cursor: pointer;
      }
      .nav-note:hover {
        background: var(--surface-alt);
      }
      .nav-note.unread {
        font-weight: 700;
      }
      .nav-note-empty {
        color: var(--muted);
      }

      /* Create advert */
      .create {
        width: 90%;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0.8rem 1.25rem 3rem;
      }
      .create-title {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0.2rem 0 1.2rem;
        color: var(--page-ink);
      }
      .create-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 2.4rem;
        align-items: start;
      }
      .create-tips {
        font-size: 0.88rem;
        color: var(--muted);
        line-height: 1.6;
      }
      .create-tips h2 {
        font-size: 0.98rem;
        font-weight: 600;
        color: var(--ink);
        margin: 0.1rem 0 0.5rem;
      }
      .create-tips p {
        margin: 0 0 0.9rem;
      }
      .create-tips ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }
      .create-tips li {
        position: relative;
        padding-left: 1.1rem;
      }
      .create-tips li::before {
        content: "–";
        position: absolute;
        left: 0;
        color: #b9c0c7;
      }
      .create-tips b {
        color: var(--ink);
        font-weight: 600;
      }
      @media (max-width: 760px) {
        .create-grid {
          grid-template-columns: 1fr;
          gap: 1.6rem;
        }
      }
      .create-form {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
      }
      .create-form label {
        display: block;
        font-size: 0.85rem;
        color: var(--ink);
        font-weight: 500;
      }
      .create-form label[hidden] {
        display: none;
      }
      .create-form .req {
        color: #c0392b;
      }
      .create-form .opt {
        color: var(--muted);
        font-weight: 400;
        font-size: 0.8rem;
      }
      .create-form .field-hint {
        display: block;
        color: var(--muted);
        font-size: 0.8rem;
        font-weight: 400;
        margin-top: 0.35rem;
      }
      .photo-field {
        display: block;
      }
      .photo-field-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.8rem;
        margin-bottom: 0.4rem;
      }
      .photo-field-label {
        font-size: 0.85rem;
        color: var(--ink);
        font-weight: 500;
      }
      .photo-count {
        flex: 0 0 auto;
        font-size: 0.78rem;
        color: var(--muted);
      }
      .photo-count.full {
        color: #0d7a48;
        font-weight: 700;
      }
      .photo-field input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }
      .photo-picker {
        display: inline-flex;
        width: auto;
        max-width: 100%;
        gap: 0.58rem;
        align-items: center;
        padding: 0.58rem 0.8rem;
        border: 1px dashed color-mix(in srgb, var(--muted) 55%, var(--line));
        border-radius: 8px;
        background: color-mix(in srgb, var(--panel) 86%, white 14%);
        cursor: pointer;
        transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
      }
      .photo-picker:hover,
      .photo-picker.dragover {
        border-color: var(--brand);
        background: color-mix(in srgb, var(--brand) 9%, var(--panel));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 24%, transparent);
      }
      .photo-picker.disabled {
        opacity: 0.68;
        cursor: default;
        pointer-events: none;
      }
      .photo-picker-ico {
        display: inline-grid;
        place-items: center;
        width: 1.35rem;
        height: 1.35rem;
        color: var(--brand-2);
      }
      .photo-picker-ico svg {
        display: block;
        width: 1.2rem;
        height: 1.2rem;
      }
      .photo-picker-title {
        color: var(--ink);
        font-size: 0.92rem;
        font-weight: 700;
        line-height: 1.25;
      }
      .photo-picker-note {
        display: block;
        margin-top: 0.45rem;
        color: var(--muted);
        font-size: 0.8rem;
        line-height: 1.35;
        font-weight: 400;
      }
      .create-form input[type="text"],
      .create-form input[type="password"],
      .create-form input[type="email"],
      .create-form textarea,
      .create-form input[type="number"],
      .create-form .combo-input,
      .create-form select {
        display: block;
        width: 100%;
        margin-top: 0.3rem;
        padding: 0.55rem 0.65rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: 0.95rem;
        font-family: inherit;
        background: var(--input-surface);
        color: var(--ink);
      }
      .create-form input:-webkit-autofill,
      .create-form input:-webkit-autofill:hover,
      .create-form input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--ink);
        box-shadow: 0 0 0 1000px var(--input-surface) inset;
        transition: background-color 9999s ease-out 0s;
      }
      [data-theme="dark"] .create-form input[type="text"],
      [data-theme="dark"] .create-form input[type="password"],
      [data-theme="dark"] .create-form input[type="email"],
      [data-theme="dark"] .create-form textarea,
      [data-theme="dark"] .create-form input[type="number"],
      [data-theme="dark"] .create-form .combo-input,
      [data-theme="dark"] .create-form select {
        border-color: #5f7382;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }
      [data-theme="dark"] .photo-picker {
        background: color-mix(in srgb, var(--panel) 88%, #16232b 12%);
      }
      .field-hint {
        display: block;
        margin-top: 0.3rem;
        font-size: 0.8rem;
        color: var(--muted);
        font-weight: 400;
      }
      .handover-field {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0.9rem;
        margin: 0;
        background: color-mix(in srgb, var(--panel) 82%, white 18%);
      }
      .handover-field legend {
        padding: 0 0.25rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ink);
      }
      .handover-options {
        display: flex;
        flex-direction: column;
        gap: 0.36rem;
      }
      .handover-row {
        display: block;
        cursor: pointer;
      }
      .handover-row input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }
      .handover-row-ui {
        display: flex;
        align-items: baseline;
        gap: 0.45rem;
        padding: 0.64rem 0.86rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
      }
      .handover-row:hover .handover-row-ui {
        border-color: #9db0bf;
        transform: translateX(1px);
      }
      .handover-row input:focus-visible + .handover-row-ui {
        outline: 2px solid color-mix(in srgb, var(--navbar-color) 58%, white 42%);
        outline-offset: 2px;
      }
      .handover-row input:checked + .handover-row-ui {
        border-color: rgba(13, 158, 92, 0.68);
        background: linear-gradient(
          to right,
          var(--panel) 42%,
          rgba(13, 158, 92, 0.08) 62%,
          rgba(13, 158, 92, 0.28) 100%
        );
        box-shadow: inset 0 0 0 1px rgba(13, 158, 92, 0.26);
      }
      [data-theme="dark"] .handover-row input:checked + .handover-row-ui {
        background: linear-gradient(
          to right,
          var(--panel) 38%,
          rgba(13, 158, 92, 0.14) 58%,
          rgba(13, 158, 92, 0.46) 100%
        );
      }
      .handover-row-title {
        font-size: 0.9rem;
        line-height: 1.3;
        color: var(--ink);
        font-weight: 600;
        white-space: nowrap;
      }
      .handover-row-text {
        font-size: 0.8rem;
        line-height: 1.35;
        color: var(--muted);
        font-weight: 400;
      }
      .handover-pref {
        display: flex;
        gap: 0.55rem;
        align-items: center;
        margin-top: 0.8rem;
        justify-content: flex-end;
        font-size: 0.84rem;
        color: var(--muted);
      }
      .handover-pref[hidden] {
        display: none;
      }
      .handover-pref select {
        max-width: 16rem;
        margin-top: 0;
      }
      @media (max-width: 760px) {
        .handover-row-ui {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.18rem;
        }
      }
      .auth-consent {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.55rem;
        align-items: start;
        font-size: 0.84rem;
        line-height: 1.45;
        color: var(--muted);
        font-weight: 400;
      }
      .auth-consent input {
        width: 1rem;
        height: 1rem;
        margin-top: 0.1rem;
        accent-color: var(--brand);
      }
      .auth-consent a {
        color: var(--brand-2);
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 0.16em;
        text-decoration-thickness: 0.08em;
      }
      .auth-consent a:hover {
        color: var(--brand);
      }
      .auth-box {
        max-width: 860px;
      }
      .auth-methods {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(260px, 0.82fr);
        gap: 1rem;
        align-items: stretch;
      }
      .auth-methods.auth-methods-solo {
        grid-template-columns: minmax(0, 1fr);
      }
      .auth-form,
      .auth-oauth {
        padding: 1.2rem;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
      }
      .auth-form {
        gap: 0.95rem;
      }
      .auth-turnstile-row {
        min-height: 65px;
      }
      .auth-submit-wrap {
        display: grid;
        gap: 0.55rem;
        margin-top: 0.15rem;
      }
      .auth-oauth {
        display: grid;
        gap: 0.75rem;
        align-content: start;
      }
      .auth-oauth-title {
        margin: 0;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ink);
      }
      .auth-oauth-copy {
        margin: 0;
        font-size: 0.82rem;
        line-height: 1.5;
        color: var(--muted);
      }
      .auth-oauth[hidden] {
        display: none;
      }
      .auth-oauth-divider {
        margin: 0;
        align-self: center;
        justify-self: center;
        font-size: 0.83rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
      }
      .auth-toggle {
        font-size: 0.88rem;
        color: var(--page-muted);
        margin: 1.1rem 0 0;
      }
      .auth-toggle a {
        color: var(--link-accent);
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 0.14em;
        text-decoration-thickness: 0.08em;
      }
      .auth-inline-link {
        margin: 0.2rem 0 0;
        font-size: 0.88rem;
      }
      .auth-inline-link a {
        color: var(--link-accent);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 0.14em;
        text-decoration-thickness: 0.08em;
      }
      .auth-toggle a:hover,
      .auth-inline-link a:hover {
        color: var(--brand);
      }
      .nowrap {
        white-space: nowrap;
      }
      /* Verify-your-e-mail banner (Krok 11) */
      .verify-banner {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-wrap: wrap;
        background: #fff6e0;
        border-bottom: 1px solid #f0dca0;
        color: #6b5300;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
      }
      .verify-banner button {
        background: none;
        border: 1px solid #c9a94a;
        color: #6b5300;
        font: inherit;
        font-size: 0.85rem;
        padding: 0.25rem 0.6rem;
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
      }
      .verify-banner button:hover {
        background: #fbedc4;
      }
      .verify-banner #verify-banner-text {
        flex: 1;
        min-width: 12rem;
      }
      .verify-banner[hidden] {
        display: none;
      }
      /* Phone verification dialog */
      .phone-dialog {
        position: relative;
        padding: 1.8rem 2rem;
        border: 1px solid var(--line);
        border-radius: 12px;
        max-width: 380px;
        box-shadow: 0 10px 40px rgba(35, 57, 70, 0.2);
        background: var(--surface);
        color: var(--ink);
      }
      .phone-dialog::backdrop {
        background: rgba(0, 0, 0, 0.4);
      }
      .phone-dialog-x {
        position: absolute;
        top: 0.6rem;
        right: 0.6rem;
        width: 28px;
        height: 28px;
        border: none;
        background: none;
        font-size: 1.4rem;
        color: var(--muted);
        cursor: pointer;
        line-height: 1;
      }
      .phone-dialog-x:hover {
        color: var(--ink);
      }
      .phone-dialog h2 {
        margin: 0 0 1rem;
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--ink);
      }
      #account-settings-dialog {
        width: min(920px, calc(100vw - 2rem));
        max-width: none;
        max-height: min(82vh, 820px);
        overflow: auto;
      }
      #account-settings-dialog h2 {
        margin-bottom: 1.2rem;
      }
      .account-settings-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
        gap: 1rem;
        align-items: start;
      }
      .account-settings-column {
        display: grid;
        gap: 1rem;
        min-width: 0;
      }
      .phone-benefits {
        background: var(--surface-alt);
        border-radius: 8px;
        padding: 0.9rem 1rem;
        margin-bottom: 1.2rem;
      }
      .phone-benefits p {
        margin: 0 0 0.5rem;
        font-size: 0.88rem;
        color: var(--ink);
        opacity: 0.8;
      }
      .phone-benefits ul {
        margin: 0;
        padding-left: 1.1rem;
        font-size: 0.88rem;
        color: var(--ink);
      }
      .phone-benefits li {
        margin-bottom: 0.25rem;
      }
      .phone-privacy {
        font-size: 0.8rem !important;
        color: var(--muted) !important;
        margin-top: 0.6rem !important;
        margin-bottom: 0 !important;
      }
      .phone-dialog label {
        display: block;
        margin-bottom: 0.35rem;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--ink);
      }
      .phone-dialog input {
        width: 100%;
        padding: 0.55rem 0.7rem;
        font-size: 0.95rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        margin-bottom: 0.9rem;
        box-sizing: border-box;
        background: var(--surface);
        color: var(--ink);
      }
      .phone-dialog input:focus {
        outline: none;
        border-color: var(--navbar-bg);
      }
      .moderation-dialog {
        width: min(460px, calc(100vw - 2rem));
        max-width: 460px;
      }
      .moderation-dialog form {
        display: block;
        min-width: 0;
      }
      .moderation-dialog textarea {
        width: 100%;
        box-sizing: border-box;
        resize: vertical;
        padding: 0.65rem 0.75rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--ink);
        font: inherit;
      }
      .moderation-dialog textarea:focus {
        outline: none;
        border-color: var(--navbar-bg);
      }
      .moderation-count {
        margin: 0.25rem 0 0.9rem;
        color: var(--muted);
        font-size: 0.78rem;
        text-align: right;
      }
      .phone-dialog .moderation-restore {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        margin: 1rem 0;
        font-weight: 400;
      }
      .phone-dialog .moderation-restore input {
        width: auto;
        margin: 0.15rem 0 0;
      }
      .moderation-dialog-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.65rem;
        margin-top: 1.2rem;
      }
      .moderation-dialog-actions .phone-btn-primary,
      .moderation-dialog-actions .phone-btn-danger {
        width: auto;
        margin: 0;
      }
      .moderation-dialog-actions .btn-ghost {
        padding: 0.5rem 1rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: transparent;
        color: var(--ink);
        cursor: pointer;
      }
      .phone-btn-primary {
        width: 100%;
        padding: 0.6rem 1rem;
        background: var(--navbar-bg);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
      }
      .phone-btn-primary:hover {
        background: #1a3a4a;
      }
      .phone-sent-msg {
        font-size: 0.9rem;
        color: var(--ink);
        opacity: 0.8;
        margin: 0 0 0.8rem;
      }
      .phone-error {
        color: #c00;
        font-size: 0.85rem;
        margin: 0.5rem 0 0;
      }
      .phone-success {
        text-align: right;
        margin-top: 1rem;
      }
      .phone-success p {
        color: #0d9e5c;
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 0.8rem;
      }
      .phone-btn-secondary {
        padding: 0.5rem 1.2rem;
        background: var(--navbar-bg);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        cursor: pointer;
      }
      .phone-btn-secondary:hover {
        background: #1a3a4a;
      }
      .phone-btn-danger {
        padding: 0.5rem 1.2rem;
        background: #c0392b;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        cursor: pointer;
      }
      .phone-btn-danger:hover {
        background: #96281b;
      }
      .account-settings-section {
        padding: 1rem;
        border: 1px solid var(--account-settings-border);
        border-radius: 8px;
        background: var(--surface);
      }
      .account-settings-section.with-title-bar {
        padding: 0;
        overflow: visible;
      }
      .account-settings-section.with-title-bar h3 {
        margin: 0;
        padding: 0.7rem 1rem;
        background: var(--account-settings-title-bg);
        color: var(--ink);
        border-bottom: 1px solid var(--account-settings-border);
        border-radius: 8px 8px 0 0;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.92rem;
        line-height: 1.25;
      }
      .account-settings-section-body {
        padding: 1rem;
        min-width: 0;
      }
      .account-settings-section h3 {
        margin: 0 0 0.5rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--ink);
      }
      .account-settings-section p {
        margin: 0 0 0.8rem;
        font-size: 0.88rem;
        color: var(--ink);
        opacity: 0.8;
      }
      .account-settings-form input,
      #account-delete-input {
        margin-bottom: 0;
      }
      .account-danger-zone h3 {
        color: #c0392b;
      }
      .account-delete-warning {
        font-size: 0.85rem;
        color: #c0392b;
        margin: 0.8rem 0 0.5rem;
      }
      .account-delete-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
      }
      .account-settings-form {
        display: grid;
        gap: 0.65rem;
      }
      .account-settings-form label {
        display: grid;
        gap: 0.35rem;
        font-size: 0.9rem;
        color: var(--ink);
      }
      .account-settings-form input {
        width: 100%;
        padding: 0.68rem 0.8rem;
        border: 1px solid var(--account-settings-border);
        border-radius: 8px;
        box-sizing: border-box;
        font: inherit;
        color: var(--ink);
        background: var(--input-surface);
      }
      .account-settings-note {
        min-height: 1.2rem;
        font-size: 0.85rem;
      }
      #account-handle-msg:empty {
        display: none;
      }
      .account-settings-note.ok {
        color: #0d9e5c;
      }
      .account-settings-note.err {
        color: #c0392b;
      }
      .notification-prefs {
        display: grid;
        gap: 0.55rem;
      }
      .notification-pref-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--account-settings-border);
      }
      .notification-pref-row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
      }
      .notification-pref-row:first-child {
        padding-top: 0;
      }
      .notification-pref-title {
        font-weight: 600;
        font-size: 0.92rem;
        color: var(--ink);
      }
      .notification-pref-desc {
        font-size: 0.84rem;
        color: var(--muted);
      }
      .notification-pref-channels {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
      }
      .notification-pref-channels label {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-height: 2rem;
        padding: 0.35rem 0.55rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-alt);
        font-size: 0.88rem;
        color: var(--ink);
      }
      .notification-pref-channels input {
        width: auto;
        margin: 0;
      }
      #account-delete-input {
        width: 100%;
        padding: 0.5rem 0.7rem;
        font-size: 0.92rem;
        border: 1px solid var(--account-settings-border);
        border-radius: 8px;
        margin-bottom: 0.5rem;
        box-sizing: border-box;
      }
      .auth-oauth-buttons {
        display: grid;
        gap: 0.6rem;
      }
      .auth-passkey-wrap {
        margin-top: 0.2rem;
      }
      .auth-passkey-note {
        margin: 0.45rem 0 0;
        font-size: 0.78rem;
        color: var(--muted);
        text-align: center;
      }
      .auth-passkey-help {
        position: relative;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
      }
      .auth-passkey-help-btn {
        width: 1.1rem;
        height: 1.1rem;
        margin-left: 0.22rem;
        border: 1px solid color-mix(in srgb, var(--muted) 38%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, #5E2D61 12%, var(--surface));
        color: var(--muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
        cursor: help;
      }
      .auth-passkey-help-btn:hover,
      .auth-passkey-help-btn:focus-visible {
        color: var(--ink);
        border-color: color-mix(in srgb, var(--brand) 45%, transparent);
        outline: none;
      }
      .auth-passkey-tooltip {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 0.55rem);
        transform: translateX(-50%) translateY(0.2rem);
        width: min(18rem, calc(100vw - 3rem));
        padding: 0.7rem 0.8rem;
        border-radius: 8px;
        background: color-mix(in srgb, var(--surface) 92%, var(--ink) 8%);
        border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
        color: var(--ink);
        font-size: 0.78rem;
        line-height: 1.45;
        text-align: left;
        opacity: 0;
        pointer-events: none;
        transition: opacity 120ms ease, transform 120ms ease;
        z-index: 10;
        text-wrap: pretty;
      }
      .auth-passkey-tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 0.7rem;
        height: 0.7rem;
        background: inherit;
        border-right: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
        transform: translateX(-50%) rotate(45deg);
      }
      .auth-passkey-help:hover .auth-passkey-tooltip,
      .auth-passkey-help:focus-within .auth-passkey-tooltip {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
      .auth-oauth-btn {
        --aob-bg: #4285f4;
        --aob-border: #4285f4;
        --aob-color: #fff;
        --aob-icon-color: var(--aob-bg);
        --aob-icon-bg: #fff;
        --aob-bg-hover: color-mix(in srgb, var(--aob-bg) 88%, black 12%);
        --aob-border-hover: var(--aob-bg-hover);
        --aob-icon-color-hover: var(--aob-icon-color, var(--aob-bg));
        background: var(--aob-bg);
        border: 1px solid var(--aob-border);
        color: var(--aob-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        width: 100%;
        padding: 0.8rem 1rem;
        border-radius: 8px;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
      }
      .auth-oauth-btn:hover,
      .auth-oauth-btn:focus-visible {
      background: var(--aob-bg-hover);
      border-color: var(--aob-border-hover);
      color: var(--aob-color);
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--aob-bg) 12%, transparent);
      }
      .auth-oauth-btn.google {
          --aob-bg: #4285f4;
          --aob-border: #4285f4;
          --aob-color: #fff;
          --aob-icon-bg: #fff;
          --aob-icon-color: #4285f4;
      }
      .auth-oauth-btn.passkey {
          --aob-bg: #5E2D61;
          --aob-border: #5E2D61;
          --aob-color: #fff;
          --aob-icon-bg: #fff;
          --aob-icon-color: #5E2D61;
          --aob-bg-hover: #4b234f;
          --aob-border-hover: #4b234f;
          --aob-icon-color-hover: #fff; /* if you want the icon glyph to invert on hover */
      }
      .auth-oauth-btn:active {
          transform: translateY(1px);
      }
      .auth-oauth-btn .auth-oauth-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      background: var(--aob-icon-bg);
      color: var(--aob-icon-color);
      font-weight: 700;
      }

      .auth-oauth-icon .auth-oauth-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: #fff;
        color: var(--aob-icon-color, var(--aob-bg, #4285f4));
        font-weight: 700;
      }
      @media (max-width: 640px) {
        .stats-grid {
          grid-template-columns: 1fr;
        }
        .auth-methods {
          grid-template-columns: 1fr;
        }
        .auth-oauth-divider {
          padding: 0.1rem 0;
        }
      }
      @media (max-width: 720px) {
        #account-settings-dialog {
          width: min(420px, calc(100vw - 1rem));
          max-height: calc(100vh - 1rem);
          padding: 1.2rem 1rem;
        }
        .account-settings-grid {
          grid-template-columns: 1fr;
        }
        .account-settings-section-body {
          padding: 0.85rem;
        }
        .notification-pref-row {
          grid-template-columns: 1fr;
          align-items: start;
        }
        .notification-pref-channels {
          justify-content: flex-start;
        }
      }
      /* User menu (handle → dropdown) */
      .nav-user {
        position: relative;
      }
      .nav-user-btn {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        background: rgba(255, 255, 255, 0.08);
        border: 0;
        color: #fff;
        font: inherit;
        font-weight: 500;
        font-size: 0.88rem;
        padding: 0.3rem 0.55rem 0.3rem 0.3rem;
        border-radius: 50px;
        cursor: pointer;
      }
      .nav-user-btn:hover {
        background: rgba(255, 255, 255, 0.15);
      }
      .nav-user-btn .avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.8rem;
      }
      .nav-user-btn .avatar.unverified {
        color: #e67e22;
      }
      .nav-user-btn .avatar.verified {
        background: #0d9e5c;
        font-size: 0.9rem;
      }
      .nav-user-btn .chevron {
        width: 14px;
        height: 14px;
        opacity: 0.7;
        transition: transform 0.15s ease;
      }
      .nav-user-btn[aria-expanded="true"] .chevron {
        transform: rotate(180deg);
      }
      /* Admin handle — distinctive red badge in the navbar (Krok 12) */
      .nav-user-btn.admin {
        background: #c0392b;
      }
      .nav-user-btn.admin:hover {
        background: #a93226;
      }
      .nav-user-btn.admin .avatar {
        background: rgba(255, 255, 255, 0.25);
      }
      .nav-menu {
        position: absolute;
        right: 0;
        top: 100%;
        margin-top: 0.35rem;
        min-width: 170px;
        z-index: 30;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: 0 10px 26px var(--shadow-color);
        padding: 0.3rem;
      }
      .nav-menu[hidden] {
        display: none;
      }
      .navbar .nav-menu a {
        display: block;
        padding: 0.5rem 0.7rem;
        border-radius: 7px;
        color: var(--ink);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
      }
      .navbar .nav-menu a:hover {
        background: var(--surface-alt);
        color: var(--ink);
      }
      /* Krok 21: phone verify menu item */
      .navbar .nav-menu a.nav-verify-phone {
        background: #e8f5e9;
        color: #17462a;
      }
      .navbar .nav-menu a.nav-verify-phone:hover {
        background: #c8e6c9;
        color: #12381f;
      }
      .create-form textarea {
        resize: vertical;
      }
      .create-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.8rem;
      }
      .create-price-wrap {
        position: relative;
        margin-top: 0.3rem;
      }
      .create-price-wrap input[type="number"] {
        margin-top: 0;
        padding-right: 6.1rem;
        -moz-appearance: textfield;
        appearance: textfield;
      }
      .create-price-wrap input[type="number"]::-webkit-outer-spin-button,
      .create-price-wrap input[type="number"]::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none;
      }
      .create-currency-toggle {
        position: absolute;
        top: 50%;
        right: 0.45rem;
        transform: translateY(-50%);
        display: inline-flex;
        gap: 0.18rem;
        padding: 0.16rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: color-mix(in srgb, var(--input-surface) 90%, #ffffff 10%);
      }
      .currency-chip {
        border: 0;
        border-radius: 999px;
        padding: 0.28rem 0.5rem;
        font: inherit;
        font-size: 0.78rem;
        line-height: 1;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
      }
      .currency-chip.is-active {
        background: var(--brand);
        color: #fff;
      }
      .currency-chip:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(35, 57, 70, 0.18);
      }
      [data-theme="dark"] .create-currency-toggle {
        border-color: #5f7382;
        background: color-mix(in srgb, var(--panel) 88%, #16232b 12%);
      }
      .photo-previews {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0 0 1.1rem;
      }
      .photo-previews .thumb {
        position: relative;
        width: 96px;
        height: 76px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--line);
      }
      .photo-previews .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .photo-previews .thumb span {
        position: absolute;
        left: 4px;
        bottom: 4px;
        max-width: calc(100% - 8px);
        padding: 0.12rem 0.32rem;
        border-radius: 5px;
        background: rgba(35, 57, 70, 0.86);
        color: #fff;
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
      }
      .photo-previews .thumb button {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 20px;
        height: 20px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        cursor: pointer;
        line-height: 1;
      }
      .create-verify-hint {
        margin: 0.4rem 0 0;
        font-size: 0.82rem;
        color: var(--muted);
        line-height: 1.4;
      }
      .create-verify-hint[hidden] {
        display: none;
      }
      .create-verify-hint button {
        background: none;
        border: 0;
        padding: 0;
        margin-left: 0.2rem;
        color: var(--brand-2);
        font-weight: 600;
        font-size: inherit;
        font-family: inherit;
        text-decoration: underline;
        cursor: pointer;
      }
      .create-verify-hint button:hover {
        color: var(--brand);
      }
      .create-limit-banner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
        margin: 0 0 0.9rem;
        padding: 0.65rem 0.85rem;
        border-radius: 8px;
        border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
        background: color-mix(in srgb, var(--brand) 9%, var(--panel));
        font-size: 0.88rem;
        color: var(--ink);
      }
      .create-limit-banner[hidden] {
        display: none;
      }
      .create-limit-banner button {
        border: 1px solid color-mix(in srgb, var(--brand) 62%, #233946);
        border-radius: 8px;
        background: var(--panel);
        color: var(--ink);
        padding: 0.48rem 0.72rem;
        font: inherit;
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
      }
      .create-limit-banner button:hover {
        background: var(--brand);
        color: #233946;
      }
      .field-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: wrap;
      }
      .create-ai-inline {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
      }
      .create-ai-inline[hidden] {
        display: none;
      }
      #c-ai-improve {
        border: 1px solid color-mix(in srgb, var(--brand) 62%, #233946);
        border-radius: 8px;
        background: var(--panel);
        color: var(--ink);
        padding: 0.3rem 0.6rem;
        font: inherit;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
      }
      #c-ai-improve:hover:not(:disabled) {
        background: var(--brand);
        color: #233946;
      }
      #c-ai-improve:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .create-ai-status {
        display: block;
        font-size: 0.82rem;
        color: var(--muted);
      }
      .create-ai-status.err {
        color: #c0392b;
      }
      .create-ai-help {
        position: relative;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
      }
      .create-ai-help-btn {
        width: 1.1rem;
        height: 1.1rem;
        border: 1px solid color-mix(in srgb, var(--muted) 38%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, #5E2D61 12%, var(--surface));
        color: var(--muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
        cursor: help;
      }
      .create-ai-help-btn:hover,
      .create-ai-help-btn:focus-visible {
        color: var(--ink);
        border-color: color-mix(in srgb, var(--brand) 45%, transparent);
        outline: none;
      }
      .create-ai-tooltip {
        position: absolute;
        right: 0;
        bottom: calc(100% + 0.55rem);
        transform: translateY(0.2rem);
        width: min(18rem, calc(100vw - 3rem));
        padding: 0.7rem 0.8rem;
        border-radius: 8px;
        background: color-mix(in srgb, var(--surface) 92%, var(--ink) 8%);
        border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
        color: var(--ink);
        font-size: 0.78rem;
        line-height: 1.45;
        text-align: left;
        opacity: 0;
        pointer-events: none;
        transition: opacity 120ms ease, transform 120ms ease;
        z-index: 10;
        text-wrap: pretty;
      }
      .create-ai-tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 0.5rem;
        width: 0.7rem;
        height: 0.7rem;
        background: inherit;
        border-right: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
        transform: rotate(45deg);
      }
      .create-ai-help:hover .create-ai-tooltip,
      .create-ai-help:focus-within .create-ai-tooltip {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }
      .create-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
      }
      .create-form button.primary {
        background: var(--brand);
        color: #233946;
        font-weight: 600;
        border: 0;
        padding: 0.6rem 1.4rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.95rem;
      }
      .create-msg {
        font-size: 0.9rem;
      }
      .create-msg.ok {
        display: inline-block;
        padding: 0.42rem 0.65rem;
        border: 1px solid var(--success-border);
        border-radius: 7px;
        background: var(--success-bg);
        color: var(--ok-text, #15722f);
      }
      .create-msg.err {
        color: #c0392b;
      }
      .create-msg.warn {
        color: #b06a00;
      }
      .create-form.create-complete > :not(.create-success) {
        display: none;
      }
      .create-success {
        padding: 1rem;
        border: 1px solid var(--success-border);
        border-radius: 10px;
        background: var(--success-bg);
        color: var(--ok-text, #15722f);
      }
      .create-success[hidden] {
        display: none;
      }
      .create-success p {
        margin: 0 0 0.85rem;
        font-weight: 600;
      }
      .create-success-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
      }
      .share-copy-dialog {
        position: relative;
        width: min(92vw, 34rem);
        padding: 1.4rem;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        color: var(--ink);
        box-shadow: 0 12px 45px var(--shadow-color);
      }
      .share-copy-dialog::backdrop {
        background: rgba(0, 0, 0, 0.55);
      }
      .share-copy-dialog h2 {
        margin: 0 2rem 1rem 0;
        font-size: 1.2rem;
      }
      .share-copy-dialog input {
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 1rem;
        padding: 0.65rem;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: var(--surface-alt);
        color: var(--ink);
      }
      .share-copy-close {
        position: absolute;
        top: 0.55rem;
        right: 0.7rem;
        border: 0;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        font-size: 1.6rem;
      }
      .thread-limit-notice {
        font-size: 0.9rem;
        padding: 0.4rem 0;
      }
      .msg-blocked-banner,
      .msg-locked-banner {
        font-size: 0.9rem;
        padding: 0.55rem 0.8rem;
        border-radius: 8px;
        margin: 0.5rem 0;
      }
      .msg-blocked-banner {
        background: #fdf0f0;
        color: #c0392b;
        border: 1px solid #f5c6c6;
      }
      [data-theme="dark"] .msg-blocked-banner {
        background: rgba(255, 116, 106, 0.14);
        color: #ffb1aa;
        border-color: rgba(255, 177, 170, 0.32);
      }
      .msg-locked-banner {
        background: #f5f5f0;
        color: #5a5a50;
        border: 1px solid #d8d8cc;
      }
      @media (max-width: 560px) {
        .create-row {
          grid-template-columns: 1fr;
        }
        .photo-field-head {
          align-items: flex-start;
          flex-direction: column;
        }
      }

      /* Homepage intro: Krok 67 discovery carousel + original feature pillars. */
      .intro {
        width: 100%;
        max-width: none;
        margin: 0.4rem 0 0;
        padding: 0.25rem 0 1rem;
      }
      .intro[hidden] {
        display: none;
      }
      .intro-inner {
        width: 90%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 1.25rem;
      }
      .discovery-showcase {
        --discovery-card-width: min(680px, calc(100% - 180px));
        margin: clamp(3rem, 8vh, 5.5rem) auto 0;
        width: 100%;
      }
      .discovery-showcase[hidden] {
        display: none;
      }
      .discovery-showcase h2 {
        align-items: center;
        color: color-mix(in srgb, var(--page-ink) 90%, var(--bg));
        display: flex;
        font-size: 1.08rem;
        font-weight: 600;
        gap: 0.9rem;
        letter-spacing: -0.01em;
        margin: 0 0 0.8rem;
        text-align: center;
      }
      .discovery-showcase h2::before,
      .discovery-showcase h2::after {
        background: linear-gradient(
          to right,
          transparent,
          color-mix(in srgb, var(--page-line) 70%, var(--page-ink))
        );
        content: "";
        flex: 1 1 auto;
        height: 1px;
      }
      .discovery-showcase h2::after {
        background: linear-gradient(
          to left,
          transparent,
          color-mix(in srgb, var(--page-line) 70%, var(--page-ink))
        );
      }
      .discovery-carousel {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 0.55rem;
      }
      .discovery-viewport {
        min-width: 0;
        overflow-x: hidden;
        scroll-behavior: smooth;
        scrollbar-width: none;
        mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
      }
      .discovery-viewport::-webkit-scrollbar {
        display: none;
      }
      .discovery-track {
        box-sizing: border-box;
        display: flex;
        gap: 0.8rem;
        width: 100%;
        padding-inline: calc((100% - var(--discovery-card-width)) / 2);
      }
      .discovery-track .card {
        flex: 0 0 var(--discovery-card-width);
        margin-bottom: 0;
        min-width: 0;
        opacity: 0.34;
        pointer-events: none;
        transform: scale(0.94);
        transition:
          opacity 0.25s ease,
          transform 0.25s ease,
          box-shadow 0.15s ease,
          border-color 0.15s ease;
      }
      .discovery-track .card.is-active {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
      }
      .discovery-track .card-body {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .discovery-arrow {
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--page-ink);
        cursor: pointer;
        display: inline-flex;
        font-size: 1.8rem;
        height: 42px;
        justify-content: center;
        line-height: 1;
        padding: 0 0 0.12rem;
        width: 42px;
        z-index: 1;
      }
      .discovery-arrow:hover:not(:disabled) {
        border-color: var(--brand);
        color: var(--brand);
      }
      .discovery-arrow:disabled {
        cursor: default;
        opacity: 0.28;
      }
      @media (max-width: 760px) {
        .intro {
          margin-top: 0.25rem;
        }
        .intro-inner {
          width: 100%;
          padding: 0 0.75rem;
        }
        .discovery-showcase {
          --discovery-card-width: calc(100% - 72px);
        }
        .discovery-carousel {
          display: block;
          position: relative;
        }
        .discovery-arrow {
          font-size: 1.45rem;
          height: 34px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 34px;
        }
        .discovery-arrow:first-child {
          left: 0;
        }
        .discovery-arrow:last-child {
          right: 0;
        }
        .pillars {
          align-items: center;
          justify-content: center;
        }
        .pillar {
          justify-content: flex-start;
          width: min(100%, 420px);
        }
      }
      @media (max-width: 480px) {
        .discovery-track .card {
          flex-direction: row;
          min-height: 0;
        }
        .discovery-track .card-photo {
          height: 88px;
          width: 88px;
        }
        .discovery-track .card-body {
          display: none;
        }
        .discovery-track .card-footer {
          align-items: center;
          flex-direction: row;
          gap: 0.35rem;
          padding-top: 0.4rem;
        }
        .discovery-track .card-tags {
          gap: 0.3rem;
          justify-content: flex-end;
          margin-left: auto;
        }
      }
      .pillars {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        max-width: 960px;
        margin: 1.2rem auto 0.8rem;
      }
      .pillar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: transparent;
        border-radius: 10px;
        padding: 0.55rem 0.9rem 0.55rem 0.55rem;
        cursor: pointer;
        opacity: 0.72;
        transition:
          background 0.2s ease,
          box-shadow 0.2s ease,
          opacity 0.2s ease;
      }
      .pillar:hover,
      .pillar.active {
        background: var(--surface);
        opacity: 1;
        box-shadow: 0 2px 8px var(--shadow-color);
      }
      .pillar .icon {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-alt);
        color: var(--ink);
        transition:
          background 0.2s ease,
          color 0.2s ease;
      }
      .pillar .icon svg {
        width: 16px;
        height: 16px;
      }
      .pillar h3 {
        font-size: 0.88rem;
        margin: 0;
        letter-spacing: -0.01em;
        font-weight: 500;
        color: var(--page-ink);
      }
      .pillar p {
        display: none;
      }
      .pillar-showcase {
        max-width: 640px;
        margin: 0 auto;
        box-sizing: border-box;
        height: clamp(8.5rem, calc(14rem - 10vw), 12.5rem);
        background: var(--surface);
        border-radius: 14px;
        color: inherit;
        cursor: pointer;
        display: block;
        padding: 1.2rem 1.4rem;
        position: relative;
        overflow: hidden;
        border: 1px solid var(--line);
        text-decoration: none;
        transition:
          border-color 0.15s ease,
          box-shadow 0.15s ease;
      }
      .pillar-showcase:hover,
      .pillar-showcase:focus-visible {
        border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
        box-shadow: 0 3px 12px var(--shadow-color);
      }
      .pillar-showcase:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
        outline-offset: 3px;
      }
      .pillar-showcase-item {
        position: absolute;
        inset: 0;
        padding: 1.2rem 1.4rem;
        opacity: 0;
        transition: opacity 0.4s ease;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .pillar-showcase-item.active {
        opacity: 1;
      }
      .pillar-showcase-item h4 {
        font-size: 1rem;
        margin: 0 0 0.4rem;
        color: var(--ink);
        font-weight: 600;
      }
      .pillar-showcase-item p {
        font-size: 0.9rem;
        color: var(--ink);
        opacity: 0.8;
        margin: 0;
        line-height: 1.55;
      }

      /* Legal / info pages (Pravidla portálu, GDPR, Obchodní podmínky) */
      .legal[hidden] {
        display: none;
      }
      .legal {
        width: 90%;
        max-width: 760px;
        margin: 2rem auto 3rem;
        padding: 0 1.25rem;
        color: var(--ink);
      }
      .legal-hero {
        margin: 0 auto 2rem;
      }
      .legal-hero h1 {
        font-size: 1.9rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--page-ink);
        margin: 0 0 0.5rem;
        text-wrap: balance;
      }
      .legal-hero .legal-meta {
        font-size: 0.85rem;
        color: var(--muted);
        margin: 0;
      }
      .legal h2 {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--page-ink);
        margin: 1.9rem 0 0.55rem;
      }
      .legal h2 .legal-num {
        color: inherit;
        font-weight: 600;
        margin-right: 0.4rem;
      }
      .legal p,
      .legal li {
        font-size: 0.96rem;
        line-height: 1.65;
        color: var(--page-ink);
        text-wrap: pretty;
      }
      .legal p {
        margin: 0 0 0.8rem;
      }
      .legal ul {
        margin: 0 0 0.9rem;
        padding-left: 1.3rem;
      }
      .legal li {
        margin: 0 0 0.35rem;
      }
      .legal a {
        color: var(--brand, #2f6f4f);
      }
      .legal-intro {
        background: var(--surface-alt);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 1rem 1.2rem;
        margin: 0 0 1.4rem;
      }
      .legal-intro p {
        margin: 0;
        color: var(--ink);
      }
      .legal-back {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: none;
        border: 0;
        color: var(--muted);
        font: inherit;
        font-size: 0.9rem;
        cursor: pointer;
        padding: 0;
        margin: 0 0 1.4rem;
      }
      .legal-back:hover {
        color: var(--ink);
      }

      /* How-it-works page ("Jak to u nás chodí") */
      .hiw[hidden] {
        display: none;
      }
      .hiw {
        width: 90%;
        max-width: 1100px;
        margin: 2rem auto 3rem;
        padding: 0 1.25rem;
      }
      .hiw h1,
      .hiw h2,
      .hiw h3,
      .hiw h4 {
        text-wrap: balance;
      }
      .hiw p {
        text-wrap: pretty;
      }
      .hiw-dnode p {
        text-wrap: balance;
      }
      .hiw-block-head p {
        text-wrap: pretty;
      }
      .hiw-hero {
        text-align: center;
        margin: 0 auto 2.6rem;
        max-width: 640px;
      }
      .hiw-hero h1 {
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--page-ink);
        margin: 0 0 0.6rem;
      }
      .hiw-hero p {
        font-size: 1.05rem;
        color: var(--page-muted);
        margin: 0;
        line-height: 1.6;
      }

      .hiw-block {
        margin: 0 0 2.6rem;
      }
      .hiw-block-head {
        max-width: 960px;
        margin: 0 0 1.3rem;
      }
      .hiw-kicker {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--brand);
        background: rgba(230, 146, 32, 0.1);
        border-radius: 999px;
        padding: 0.25rem 0.7rem;
        margin-bottom: 0.7rem;
      }
      .hiw-block-head h2 {
        font-size: 1.45rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--page-ink);
        margin: 0 0 0.4rem;
      }
      .hiw-block-head p {
        font-size: 0.98rem;
        color: var(--page-muted);
        margin: 0;
        line-height: 1.55;
      }

      /* Card grids */
      .hiw-cards {
        display: grid;
        gap: 1.1rem;
      }
      .hiw-cards-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .hiw-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 1.4rem 1.3rem;
        box-shadow: 0 1px 2px var(--shadow-color);
      }
      .hiw-ico {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        margin-bottom: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-alt);
        color: var(--ink);
      }
      .hiw-ico svg {
        width: 22px;
        height: 22px;
      }
      .hiw-card h3 {
        font-size: 1.02rem;
        margin: 0 0 0.4rem;
        letter-spacing: -0.01em;
        color: var(--ink);
      }
      .hiw-card p {
        font-size: 0.9rem;
        color: var(--ink);
        opacity: 0.75;
        margin: 0;
        line-height: 1.55;
      }
      .hiw-search-cards .hiw-card {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 0.85rem;
        align-items: center;
        align-content: start;
      }
      .hiw-search-cards .hiw-ico {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
      }
      .hiw-search-cards h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
      }
      .hiw-search-cards p {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 0.9rem;
      }
      .hiw-category-choice {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
      }
      .hiw-category-head {
        margin-top: 1.8rem;
      }
      .hiw-category-head h2 {
        font-size: 1.3rem;
      }
      .hiw-choice-card {
        border-top: 3px solid var(--line);
      }
      .hiw-choice-benefits {
        border-top-color: var(--brand);
      }
      .hiw-choice-tradeoffs {
        border-top-color: var(--page-muted);
      }
      .hiw-choice-card h3 {
        font-size: 1.08rem;
        margin-bottom: 0.85rem;
      }
      .hiw-choice-card ul {
        display: grid;
        gap: 0.75rem;
        margin: 0;
        padding-left: 1.15rem;
      }
      .hiw-choice-card li {
        color: var(--page-muted);
        font-size: 0.9rem;
        line-height: 1.5;
      }
      .hiw-choice-card li::marker {
        color: var(--brand);
      }
      .hiw-choice-card strong {
        color: var(--ink);
      }
      .hiw-category-mitigation {
        max-width: 960px;
        margin: 1.1rem 0 0;
        color: var(--page-muted);
        font-size: 0.93rem;
        line-height: 1.6;
      }

      /* Flow diagram (buyer / seller) — connected steps */
      .hiw-diagram {
        display: flex;
        align-items: stretch;
        gap: 0.4rem;
        flex-wrap: nowrap;
      }
      .hiw-dnode {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 1.1rem 1rem;
      }
      .hiw-dn {
        display: inline-flex;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--navbar-bg);
        color: #fff;
        font-weight: 700;
        font-size: 0.85rem;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.6rem;
      }
      .hiw-dnode h3 {
        font-size: 0.95rem;
        font-weight: 600;
        margin: 0 0 0.3rem;
        letter-spacing: -0.01em;
        color: var(--ink);
      }
      .hiw-dnode p {
        font-size: 0.82rem;
        color: var(--ink);
        opacity: 0.75;
        margin: 0;
        line-height: 1.45;
      }
      .hiw-darrow {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        color: #c2bcb0;
      }
      .hiw-darrow svg {
        width: 20px;
        height: 20px;
      }
      @media (max-width: 820px) {
        .hiw-diagram {
          flex-direction: column;
          gap: 0.3rem;
        }
        .hiw-darrow {
          transform: rotate(90deg);
          align-self: center;
        }
      }

      .hiw-rules {
        margin-top: 1.3rem;
        padding: 1.1rem 1.3rem;
        background: var(--surface-alt);
        border: 1px solid var(--line);
        border-radius: 12px;
      }
      .hiw-rules h4 {
        margin: 0 0 0.4rem;
        font-size: 0.95rem;
        color: var(--ink);
      }
      .hiw-rules p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--ink);
        opacity: 0.8;
        line-height: 1.6;
      }

      .hiw-note {
        padding: 1rem 1.3rem;
        background: #fff8e1;
        border: 1px solid #ffe9a8;
        border-radius: 10px;
        font-size: 0.88rem;
        color: #6b5300;
        line-height: 1.55;
      }
      .hiw-note + .hiw-note {
        margin-top: 0.8rem;
      }
      .hiw-features-note {
        margin-top: 1.1rem;
      }
      .hiw-note strong {
        color: #4a3800;
      }

      /* Přehled funkcí — screenshot + text řádky */
      .feature-row {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 2rem;
        align-items: center;
        margin: 0 0 2.8rem;
      }
      .feature-media {
        position: relative;
        border-radius: 14px;
        overflow: hidden;
        border: 3px solid var(--navbar-bg);
        background: var(--surface);
        box-shadow: 0 2px 8px var(--shadow-color);
      }
      .feature-media img {
        display: block;
        width: 100%;
        height: auto;
      }
      .feature-highlight {
        position: absolute;
        border: 2px solid var(--brand);
        border-radius: 10px;
        box-shadow:
          0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent),
          0 2px 10px var(--shadow-color);
        pointer-events: none;
      }
      .feature-highlight-label {
        position: absolute;
        top: -1.55rem;
        left: 0;
        background: var(--brand);
        color: var(--navbar-bg);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        white-space: nowrap;
        box-shadow: 0 2px 6px var(--shadow-color);
      }
      .feature-highlight-label.is-inset {
        top: 0.5rem;
        left: 0.5rem;
      }
      .feature-copy .hiw-kicker {
        margin-bottom: 0.6rem;
      }
      .feature-copy h2 {
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--page-ink);
        margin: 0 0 0.5rem;
      }
      .feature-copy p {
        font-size: 0.95rem;
        color: var(--page-muted);
        margin: 0;
        line-height: 1.6;
      }
      @media (max-width: 820px) {
        .feature-row {
          grid-template-columns: 1fr;
          gap: 1rem;
          margin: 0 0 2.2rem;
        }
      }

      @media (max-width: 820px) {
        .hiw-cards-3,
        .hiw-category-choice {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 860px) {
        .navbar {
          padding: 0.55rem 1rem;
          gap: 0.45rem;
        }
        .navbar .brand img {
          height: 38px;
        }
        .navbar .navlinks {
          gap: 0.35rem;
        }
        .navbar .navlinks a {
          padding: 0.42rem 0.55rem;
        }
        .navbar #nav-auth > a,
        .nav-user-btn,
        .navbar .navlinks a.nav-add {
          min-height: 40px;
        }
        .hero-banner,
        .searchbar,
        .layout,
        .mobile-filter-bar,
        .detail,
        .messages,
        .hiw,
        .legal,
        #page-seller,
        #page-expired {
          width: 100%;
          padding-left: 1rem;
          padding-right: 1rem;
        }
        .hero-banner {
          padding-top: 1rem;
        }
        .searchbar {
          position: sticky;
          top: 50px;
          z-index: 15;
          margin-top: 0.99rem;
          padding-top: 0.66rem;
          padding-bottom: 0.66rem;
          background: color-mix(in srgb, var(--bg) 92%, transparent);
          backdrop-filter: blur(8px);
        }
        .layout,
        .layout.no-clusters {
          grid-template-columns: 1fr;
          gap: 0.75rem;
          padding-top: 0.35rem;
        }
        #clusters-side {
          position: static;
          order: 0;
          overflow-x: auto;
          margin: 0 -1rem;
          padding: 0 1rem 0.15rem;
        }
        #clusters-side.has-clusters {
          margin-bottom: 0.15rem;
          padding-bottom: 0.65rem;
          border-bottom: 1px solid var(--page-line);
        }
        #clusters {
          display: flex;
          gap: 0.45rem;
          align-items: center;
          min-height: 0;
        }
        #clusters .sidebar-title {
          display: none;
        }
        .cluster-item {
          flex: 0 0 auto;
          min-height: 42px;
          margin: 0;
          border: 1px solid var(--page-line);
          background: var(--surface);
          white-space: nowrap;
        }
        .cluster-item:hover,
        .cluster-item:active {
          background: var(--surface-alt);
        }
        .cluster-item.active {
          background: var(--navbar-bg);
          border-color: var(--navbar-bg);
        }
        .mobile-filter-bar {
          display: flex;
          grid-column: 1 / -1;
          justify-content: flex-end;
          margin: 0.1rem auto 0.2rem;
        }
        .layout.solo .mobile-filter-bar {
          display: none;
        }
        .mobile-filter-btn {
          min-height: 44px;
          padding: 0.55rem 0.9rem;
          background: var(--surface);
          border: 1px solid var(--page-line);
          color: var(--page-ink);
          font-weight: 600;
        }
        .filter-drawer-scrim {
          position: fixed;
          inset: 0;
          z-index: 48;
          background: rgba(0, 0, 0, 0.38);
        }
        body.filter-drawer-open .filter-drawer-scrim {
          display: block;
        }
        #filters-side {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          z-index: 49;
          width: min(360px, 88vw);
          padding: max(1rem, env(safe-area-inset-top)) 1rem
            max(1rem, env(safe-area-inset-bottom));
          background: var(--surface);
          border-left: 1px solid var(--line);
          box-shadow: -10px 0 30px var(--shadow-color);
          overflow-y: auto;
          transform: translateX(105%);
          transition: transform 0.18s ease;
        }
        body.filter-drawer-open #filters-side {
          transform: translateX(0);
        }
        body.filter-drawer-open .layout.empty #filters-side {
          display: block;
        }
        .filter-drawer-close {
          display: flex;
          width: 100%;
          min-height: 44px;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 0.9rem;
          font-weight: 700;
          background: var(--surface-alt);
        }
        .content {
          min-width: 0;
        }
        .card {
          min-height: 118px;
        }
        .card-manage {
          align-items: flex-start;
          flex-wrap: wrap;
        }
        .mng-actions {
          flex: 1 1 100%;
          margin-left: 0;
          justify-content: flex-start;
          flex-wrap: wrap;
        }
        .mng-btn {
          min-height: 44px;
        }
        .card-del-corner {
          width: 40px;
          height: 40px;
        }
        .detail-top-grid {
          grid-template-columns: 1fr;
        }
        .detail-media {
          padding: 0.8rem;
        }
        .detail-top-info {
          padding: 1rem;
          gap: 0.8rem;
        }
        .detail-chips-stack {
          margin-top: 0;
        }
        .detail-priceline {
          justify-content: flex-start;
        }
        .detail-contact-zone {
          position: sticky;
          bottom: env(safe-area-inset-bottom);
          z-index: 12;
          margin: 0.4rem -1rem -1rem;
          padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
          background: var(--surface);
          border-top: 1px solid var(--line);
          box-shadow: 0 -8px 22px var(--shadow-color);
        }
        .detail-similar {
          padding-top: 1.5rem;
        }
        .messages.thread-mode {
          position: fixed;
          inset: 0;
          z-index: 35;
          width: 100%;
          max-width: none;
          margin: 0;
          padding: max(0.65rem, env(safe-area-inset-top)) 1rem
            max(0.75rem, env(safe-area-inset-bottom));
          background: var(--bg);
          display: flex;
          flex-direction: column;
        }
        .messages.thread-mode #messages-title {
          display: none;
        }
        .messages.thread-mode #messages-body {
          min-height: 0;
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        .messages.thread-mode .thread-head {
          flex: 0 0 auto;
          margin-bottom: 0.6rem;
          padding-bottom: 0.55rem;
        }
        .messages.thread-mode .bubbles {
          flex: 1 1 auto;
          max-height: none;
          min-height: 0;
        }
        .messages.thread-mode .reply-row {
          flex: 0 0 auto;
          position: sticky;
          bottom: 0;
          margin: 0.65rem -1rem 0;
          padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
          background: var(--bg);
          border-top: 1px solid var(--page-line);
        }
      }
      @media (max-width: 640px) {
        .messages-overview {
          grid-template-columns: 1fr;
        }
        .navbar {
          flex-wrap: wrap;
        }
        .navbar .brand {
          order: 0;
        }
        .navbar #nav-auth {
          margin-left: auto;
        }
        .nav-how-it-works {
          order: 1;
          flex: 0 0 100%;
          width: 100%;
          margin-left: 0;
          padding: 0.3rem 0;
          color: #c3ccd4;
          justify-content: flex-end;
          text-align: right;
        }
        .nav-how-it-works:hover {
          background: none;
          color: #fff;
        }
        .navbar .navlinks {
          display: none;
        }
        .hero-banner {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 0.75rem;
        }
        .hero-banner img {
          width: min(320px, calc(100% - 64px));
          max-width: 100%;
          flex: 1 1 auto;
        }
        .mobile-post-cta {
          display: flex;
          justify-content: flex-end;
          flex: 0 0 auto;
          width: auto;
          padding: 0;
          background: none;
          backdrop-filter: none;
        }
        .mobile-post-cta .nav-add-mobile {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: var(--brand);
          color: #182830;
          text-decoration: none;
          font-weight: 600;
          box-shadow: 0 10px 24px rgba(35, 57, 70, 0.16);
        }
        .mobile-post-cta .nav-add-mobile svg {
          width: 18px;
          height: 18px;
        }
        @media (prefers-reduced-motion: reduce) {
          .mobile-post-cta .nav-add-mobile {
            animation: none;
          }
        }
        .footer-copy {
          margin-left: 0;
        }
        .floatingchat-container-wrap {
          display: none !important;
        }
        .nav-user-btn {
          padding: 0.35rem 0.6rem 0.35rem 0.35rem;
          line-height: 1;
        }
        form {
          gap: 0.4rem;
        }
        .search-suggestion {
          top: calc(100% + 0.35rem);
          flex-wrap: wrap;
          padding: 0.45rem 0.55rem;
        }
        .search-suggestion-label {
          white-space: normal;
          font-size: 0.8rem;
          padding-top: 0;
        }
        .search-suggestion-chip {
          font-size: 0.83rem;
        }
        input[type="search"] {
          min-height: 44px;
        }
        form button[type="submit"] {
          min-height: 44px;
          padding: 0.55rem 0.75rem;
        }
        .card {
          gap: 0.75rem;
          padding: 0.75rem;
          border-radius: 8px;
        }
        .card-photo {
          width: 96px;
          height: 82px;
          border-radius: 8px;
        }
        .card-footer {
          align-items: flex-start;
          flex-direction: column;
          gap: 0.45rem;
        }
        .card-tags {
          margin-left: 0;
          justify-content: flex-start;
        }
        .detail {
          padding-bottom: 1rem;
        }
        .detail-title {
          font-size: 1.15rem;
        }
        .detail-body {
          font-size: 0.94rem;
          line-height: 1.55;
        }
        .detail-chip {
          width: 100%;
          justify-content: space-between;
        }
        .contact-actions,
        .reply-row {
          flex-direction: column;
          align-items: stretch;
        }
        .contact-actions .create-msg {
          order: 0;
          margin-right: 0;
        }
        .contact-btn,
        .rate-save,
        .mng-btn,
        .report-btn,
        .rate-star {
          min-height: 44px;
        }
        .thread-row {
          align-items: flex-start;
          gap: 0.6rem;
          padding: 0.75rem;
        }
        .thread-meta {
          align-items: flex-start;
        }
        .bubble {
          max-width: 88%;
        }
        .messages.thread-mode .thread-head {
          align-items: flex-start;
          flex-direction: column;
          gap: 0.45rem;
        }
      }
      /* Cookie consent banner */
      .cookie-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 60;
        background: var(--surface);
        border-top: 1px solid var(--page-line);
        padding: 0.75rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        font-size: 0.88rem;
        color: var(--page-ink);
        box-shadow: 0 -2px 12px var(--shadow-color);
      }
      .cookie-banner p {
        margin: 0;
        flex: 1;
        min-width: 16rem;
      }
      .cookie-banner a {
        color: var(--brand);
      }
      .cookie-banner button {
        background: var(--navbar-bg);
        color: #fff;
        border: none;
        padding: 0.45rem 1rem;
        border-radius: 8px;
        font-size: 0.88rem;
        cursor: pointer;
        white-space: nowrap;
      }
      .cookie-banner button:hover {
        filter: brightness(1.15);
      }
      .cookie-banner button.secondary {
        background: transparent;
        color: var(--page-ink);
        border: 1px solid var(--page-line);
      }
      .cookie-banner[hidden] {
        display: none;
      }

      /* Theme toggle button */
      #footer-theme-toggle .icon-moon {
        display: block;
      }
      #footer-theme-toggle .icon-sun {
        display: none;
      }
      [data-theme="dark"] #footer-theme-toggle .icon-sun {
        display: block;
      }
      [data-theme="dark"] #footer-theme-toggle .icon-moon {
        display: none;
      }