/* ───────── Tokens — dark, szaro-zielony ale ŻYWSZY (mint zamiast wojskowego sage) ───────── */
:root {
    --bg: oklch(0.16 0.013 165);
    --bg-2: oklch(0.20 0.015 165);
    --surface: oklch(0.23 0.016 165);
    --surface-hi: oklch(0.28 0.018 165);
    --border: oklch(0.34 0.018 165);
    --border-hi: oklch(0.44 0.022 165);

    --text: oklch(0.96 0.008 160);
    --text-mute: oklch(0.80 0.012 160);
    --text-dim: oklch(0.68 0.014 160);

    --accent: oklch(0.80 0.17 168);
    --accent-hi: oklch(0.87 0.18 168);
    --accent-dim: oklch(0.48 0.10 168);
    --accent-soft: oklch(0.32 0.08 168);

    --danger: oklch(0.65 0.20 25);
    --danger-hi: oklch(0.76 0.18 25);
    --danger-dim: oklch(0.42 0.10 25);
    --danger-soft: oklch(0.30 0.10 25);
    --warning: oklch(0.80 0.15 85);
    --warning-hi: oklch(0.88 0.15 85);
    --warning-dim: oklch(0.50 0.10 85);
    --warning-soft: oklch(0.32 0.08 85);
    --success: oklch(0.78 0.16 168);
    --success-soft: oklch(0.30 0.07 168);

    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 1px 0 oklch(0.38 0.014 165 / 0.5) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.55);

    --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --container-max: 1400px;
    --container-px: 32px;
    --nav_height: 64px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

button, input, select, textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

/* FocusOnNavigate focuses the h1 after navigation, stamping tabindex="-1" on it.
   Browsers treat that programmatic focus as :focus-visible on a fresh page load,
   so the default focus ring must be suppressed unconditionally on this target.
   tabindex="-1" is unreachable via Tab, so real keyboard focus rings are unaffected. */
h1[tabindex="-1"]:focus {
    outline: none;
}

.app {
    background: radial-gradient(1200px 600px at 80% -200px, oklch(0.28 0.06 168 / 0.35), transparent 60%),
    radial-gradient(900px 500px at -100px 100px, oklch(0.22 0.03 165 / 0.5), transparent 60%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ───────── Container ───────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-px);
    padding-right: var(--container-px);
}

/* ───────── Navbar ───────── */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: oklch(0.15 0.012 165 / 0.85);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border);
}

.nav-inner {
    padding-top: 14px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-logo {
    position: relative;
    width: 40px;
    height: 100%;
}

.nav-logo-image {
    position: absolute;
    width: 48px;
    margin-top: -23px;
}

.nav-logo img {
    display: block;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(160deg, var(--accent), var(--accent-dim));
    color: oklch(0.16 0.012 165);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 1px oklch(0.60 0.08 168 / 0.5) inset;
    font-weight: 800;
}

.brand-accent {
    color: var(--accent-hi);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.nav-link {
    padding: 8px 14px;
    color: var(--text-mute);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: color .15s, background .15s;
    position: relative;
    background: transparent;
    border: 0;
}

.nav-link:hover {
    color: var(--text);
    background: var(--surface);
}

.nav-link.active {
    color: var(--text);
}

.nav-link.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.nav-logout {
    color: var(--text-dim);
    margin-left: 6px;
}

.nav-logout:hover {
    color: var(--text);
}

.nav-logout-form {
    margin: 0;
    padding: 0;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.lang-switch form {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
}

.lang-btn {
    background: transparent;
    border: 0;
    color: var(--text-mute);
    padding: 4px 8px;
    border-radius: 999px;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
}

.lang-btn:hover {
    color: var(--text);
}

.lang-btn.active {
    color: oklch(0.16 0.012 165);
    background: var(--accent);
}

.lang-sep {
    color: var(--text-dim);
}

/* ───────── Hero ───────── */
.hero {
    padding-top: 72px;
    padding-bottom: 16px;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin: 0 0 14px;
    text-transform: uppercase;
}

.hero h1 {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0 0 16px;
    max-width: 18ch;
    text-wrap: balance;
}

.lede {
    font-size: 17px;
    color: var(--text-mute);
    max-width: 56ch;
    margin: 0;
}

/* ───────── Filter ───────── */
.filter-wrap {
    padding-top: 16px;
    padding-bottom: 8px;
}

.filter {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    box-shadow: var(--shadow);
}

.filter.filter-single {
    grid-template-columns: 1fr auto;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="search"],
.field textarea,
.select-wrap select {
    appearance: none;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.select-wrap {
    position: relative;
}

.select-wrap select {
    padding: 12px 36px 12px 14px;
}

.field input:hover:not(:disabled),
.field textarea:hover:not(:disabled),
.select-wrap select:hover:not(:disabled) {
    border-color: var(--border-hi);
}

.field input:focus,
.field textarea:focus,
.select-wrap select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.18);
}

.field input:disabled,
.select-wrap select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.select-chev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
    font-size: 12px;
}

.select-wrap-sm select {
    padding: 8px 30px 8px 12px;
    font-size: 13px;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    transition: transform .08s, background .15s, border-color .15s, color .15s;
    background: var(--bg-2);
    color: var(--text);
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--accent);
    color: oklch(0.15 0.014 165);
    border-color: oklch(0.62 0.10 168);
}

.btn-primary:hover {
    background: var(--accent-hi);
}

.btn-ghost {
    background: transparent;
    color: var(--text-mute);
    border-color: var(--border);
}

.btn-ghost:hover {
    color: var(--text);
    border-color: var(--border-hi);
    background: var(--surface-hi);
}

.btn-danger {
    background: var(--danger);
    color: oklch(0.15 0.014 165);
    border-color: oklch(0.55 0.18 25);
}

.btn-danger:hover {
    filter: brightness(1.08);
}

/* ───────── Chip row ───────── */
.chip-wrap {
    padding-top: 20px;
    padding-bottom: 4px;
}

.chip-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.chip-group-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
    white-space: nowrap;
}

.chip-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.chip-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 4px;
}

.chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-mute);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s, border-color .15s, color .15s, transform .08s;
}

.chip-btn:hover {
    border-color: var(--border-hi);
    color: var(--text);
    background: var(--surface-hi);
}

.chip-btn:active {
    transform: translateY(1px);
}

.chip-btn .chip-count {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-dim);
    background: var(--bg-2);
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    min-width: 22px;
    text-align: center;
}

.chip-btn.active {
    background: var(--accent);
    color: oklch(0.15 0.014 165);
    border-color: var(--accent);
}

.chip-btn.active .chip-count {
    background: oklch(0.15 0.014 165 / 0.25);
    color: oklch(0.15 0.014 165);
    border-color: transparent;
}

.chip-clear {
    background: transparent;
    border: 1px dashed var(--border-hi);
    color: var(--text-mute);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    transition: color .15s, border-color .15s;
}

.chip-clear:hover {
    color: var(--text);
    border-color: var(--text-mute);
}

/* ───────── Results meta ───────── */
.results-meta {
    padding-top: 24px;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
    letter-spacing: 0.04em;
}

.meta-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.meta-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.meta-right label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.active-filters {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    background: var(--accent-soft);
    color: var(--text);
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--accent-dim);
}

.active-chip form {
    margin: 0;
    display: inline-flex;
}

.active-chip button {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: oklch(0.20 0.02 165);
    border: 0;
    color: var(--text-mute);
    font-size: 12px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.active-chip button:hover {
    color: var(--text);
}

/* ───────── Grid ───────── */
.grid-wrap {
    padding-bottom: 24px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: var(--shadow);
    color: var(--text);
}

.card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hi);
    box-shadow: 0 1px 0 oklch(0.42 0.014 165 / 0.5) inset, 0 18px 36px -16px rgba(0, 0, 0, 0.65);
}

.card-photo-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-2);
}

.card-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ───────── Slider ───────── */
.slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider-track {
    display: flex;
    height: 100%;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.slide svg {
    display: block;
    width: 100%;
    height: 100%;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid oklch(1 0 0 / 0.15);
    background: oklch(0.12 0.01 165 / 0.78);
    backdrop-filter: blur(6px);
    color: var(--text);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .2s, background .15s, transform .15s ease-out;
}

.slider-prev {
    left: 10px;
}

.slider-next {
    right: 10px;
}

.card:hover .slider-arrow,
.slider-arrow:focus-visible {
    opacity: 1;
}

.slider-arrow:hover {
    background: oklch(0.18 0.014 165 / 0.92);
}

.slider-arrow:active {
    transform: translateY(-50%) scale(0.94);
}

.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}

.slider-dots .dot {
    pointer-events: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: oklch(1 0 0 / 0.35);
    border: 0;
    padding: 0;
    transition: background .15s, transform .15s, width .2s;
}

.slider-dots .dot.active {
    background: var(--accent);
    width: 18px;
    border-radius: 4px;
}

.slider-dots .dot:hover:not(.active) {
    background: oklch(1 0 0 / 0.6);
}

/* ───────── Card body ───────── */
.card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    justify-content: space-between;
}

.card-head h3 {
    margin: 0;
    font-size: 19px;
    letter-spacing: -0.01em;
    font-weight: 700;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.cat-pill {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    padding: 4px 9px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    white-space: nowrap;
}

.addr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
}

.addr-line {
    font-size: 13.5px;
    color: var(--text);
}

.addr-city {
    font-size: 13.5px;
    color: var(--text-mute);
}

.addr-city .postal {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
}

.addr-city .city {
    color: var(--text);
    font-weight: 500;
}

.addr-region {
    font-size: 12px;
    color: var(--text-mute);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.addr-region .cc {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-mute);
}

.addr-region .sep {
    opacity: 0.5;
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--text-mute);
    /* flex-wrap is set in the verified-organization badge section below — the badge needs a row
       of its own. Keep it wrapping if you refactor this rule. */
}

.author {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.author-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.author-name {
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mute);
}

/* ───────── Verified-organization badge (ADR-0031) ─────────
   Platform-granted marker, never user-entered text: the accent-tinted pill and the shield glyph
   deliberately look nothing like the surrounding free-text fields a caretaker can fill in.
   OrganizationName is only capped at 150 characters, so the pill has to survive a long one. */
.org-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    padding: 3px 9px;
    border: 1px solid var(--accent-dim);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-hi);
    font-size: 11px;
    line-height: 1.35;
    overflow: hidden;
}

.org-badge-ico {
    flex: 0 0 auto;
}

/* The type label is the platform's claim, so it never gives up room: the organization name
   ellipsizes first and the pill itself clips only in the last resort. */
.org-badge-type {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.org-badge-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 600;
}

/* A browse card is ~280px of usable width and the caretaker line already fills it, so the badge
   takes a row of its own underneath rather than fighting the name for the same line — otherwise
   the uppercase type label eats the whole pill and the organization name never renders. */
.card-foot {
    flex-wrap: wrap;
}

.card-foot .org-badge {
    flex: 0 0 100%;
    margin-top: 6px;
}

/* In the hero the badge sits on its own line under the caretaker name: a flex container is
   block-level, so it breaks the line, and fit-content keeps the pill hugging its text. */
.hero-author .org-badge {
    display: flex;
    width: fit-content;
    margin-top: 5px;
}

/* The contact CTA is where the visitor decides to call, so the marker repeats there. */
.cta-handle .org-badge {
    display: flex;
    width: fit-content;
    margin-top: 4px;
}

.card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: auto;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-weight: 600;
    font-size: 13px;
    transition: background .15s, border-color .15s, color .15s;
}

.card-cta:hover {
    background: var(--surface-hi);
    border-color: var(--accent-dim);
    color: var(--accent-hi);
}

/* ───────── Sentinel / loading / end ───────── */
.sentinel {
    min-height: 80px;
    display: grid;
    place-items: center;
    padding: 28px 0;
}

.loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
    letter-spacing: 0.04em;
}

.spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-hi);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.end-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

.empty {
    padding: 80px 24px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--text-mute);
}

/* ───────── Footer ───────── */
.foot {
    margin-top: 40px;
    padding-top: 28px;
    padding-bottom: 40px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.foot-logo {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 12px;
    opacity: 0.75;
}

.foot p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-mute);
}

/* ───────── Loading progress (Blazor boot) ───────── */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--border-hi);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
    color: var(--text);
}

/* ───────── Responsive ───────── */
@media (max-width: 880px) {
    :root {
        --container-px: 20px;
    }

    .nav-inner {
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        margin-left: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        flex: 0 0 auto;
    }

    .hero {
        padding-top: 48px;
        padding-bottom: 24px;
    }

    .filter {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .filter-actions {
        width: 100%;
    }

    .btn-primary {
        flex: 1;
        justify-content: center;
    }

    .slider-arrow {
        opacity: 1;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   LEGACY — old class names still used by non-migrated pages.
   Adapted to the new tokens so dark/mint theme stays consistent.
   ═════════════════════════════════════════════════════════════════════ */

main {
    flex: 1;
    display: block;
}

/* Subpage scaffolding */
.subpage_grid {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 28px;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 32px var(--container-px);
}

.subpage_sidebar {
    display: grid;
    grid-gap: 12px;
    grid-auto-rows: max-content;
}

.subpage_content {
    display: grid;
    grid-gap: 24px;
    grid-auto-rows: max-content;
}

.subpage_header {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr max-content;
    align-items: center;
}

.subpage_header h1 {
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-weight: 700;
}

.subpage_header p {
    font-size: 17px;
    color: var(--text-mute);
}

.listing_header h1 {
    grid-column: 1 / -1;
}

.subpage_main_info {
    display: grid;
    grid-gap: 20px;
}

.subpage_cat_info {
    display: grid;
    grid-auto-rows: max-content;
}

.subpage_cat_info > * {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.subpage_cat_info h2 {
    font-size: 22px;
    letter-spacing: -0.01em;
}

.subpage_cat_info p {
    font-size: 15px;
    color: var(--text-mute);
}

.subpage_cat_info_sentence {
    display: grid;
}

.subpage_cat_info_status {
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
    background: var(--surface-hi);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
}

.subpage_cats_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.subpage_cats_grid_column {
    display: grid;
    grid-gap: 22px;
    grid-auto-rows: max-content;
}

.subpage_cat_tile {
    display: grid;
    grid-gap: 12px;
    padding: 16px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.subpage_cat_tile_header {
    display: grid;
    overflow: hidden;
    padding: 0 16px;
}

.subpage_cat_image_wrapper {
    padding: 0 16px;
}

.subpage_cat_image {
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    justify-content: center;
    background: var(--bg-2);
}

.subpage_cat_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subpage_cat_additional_requirements {
    display: grid;
    grid-gap: 4px;
    padding: 0 16px;
}

.subpage_cat_additional_requirements > strong {
    font-size: 15px;
    color: var(--text);
}

.subpage_cat_additional_requirements > p {
    font-size: 14px;
    color: var(--text-mute);
}

.subpage_cat_actions {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
    padding: 0 16px;
}

.subpage_advertiser {
    display: grid;
    grid-gap: 6px;
}

.subpage_header_action {
    display: inline-flex;
}

/* Listings (legacy index) */
.listing_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    padding: 24px var(--container-px);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

.subpage_advertisements_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.listing_grid_header {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-column: 1 / -1;
    gap: 24px;
    align-items: end;
}

.listing_tile {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    transition: transform .15s, border-color .15s;
}

.listing_tile:hover {
    transform: translateY(-2px);
    border-color: var(--border-hi);
}

.listing_tile_content {
    display: grid;
    grid-gap: 8px;
}

.listing_tile_content strong {
    font-size: 17px;
}

.listing_tile_img_wrapper {
    width: 100%;
    display: grid;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    padding-top: 100%;
    background: var(--bg-2);
}

.listing_tile_img_wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Legacy filter block */
.index_filters {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 18px;
    border-radius: var(--radius);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    align-items: end;
}

.index_filters label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 4px;
    display: block;
}

.index_filters input[type="text"],
.index_filters input[type="email"],
.index_filters input[type="number"] {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    color: var(--text);
    width: 100%;
}

.index_filters input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.18);
}

.index_filters button {
    grid-column: 1 / -1;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: oklch(0.15 0.014 165);
    font-weight: 600;
}

.index_filters button:hover {
    background: var(--accent-hi);
}

/* Listing element (info boxes) */
.listing_element {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 6px;
}

.listing_element_warning {
    border-left-color: var(--warning);
    background: var(--warning-soft);
}

.listing_element > strong {
    font-weight: 600;
}

/* Legacy buttons */
.default_btn {
    display: inline-grid;
    place-items: center;
    padding: 10px 16px;
    min-height: 41px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-hi);
    color: var(--text);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.default_btn:hover {
    background: var(--surface);
    border-color: var(--border-hi);
}

.btn_green {
    background: var(--accent);
    color: oklch(0.15 0.014 165);
    border-color: var(--accent-dim);
}

.btn_green:hover {
    background: var(--accent-hi);
}

.btn_blue {
    background: oklch(0.55 0.16 240);
    color: oklch(0.15 0.014 165);
    border-color: oklch(0.45 0.10 240);
}

.btn_orange {
    background: oklch(0.70 0.16 60);
    color: oklch(0.15 0.014 165);
    border-color: oklch(0.50 0.10 60);
}

.btn_red {
    background: var(--danger);
    color: oklch(0.15 0.014 165);
    border-color: oklch(0.50 0.18 25);
}

button.disabled,
button:disabled,
.btn.disabled,
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Login / Register / forms */
.login_wrapper,
.register_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg);
    min-height: calc(100vh - var(--nav_height));
}

.login_photo,
.register_photo {
    background-color: var(--surface);
}

.login_container,
.register_container {
    padding: 48px var(--container-px);
    display: grid;
    grid-gap: 28px;
    grid-auto-rows: max-content;
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    align-content: center;
}

.login_form,
.register_form,
.subpage_form {
    display: grid;
    grid-gap: 24px;
    grid-template-columns: 1fr;
}

.subpage_form {
    grid-template-columns: repeat(2, 1fr);
}

.login_form > *:not(.login_form_tile),
.register_form > *:not(.login_form_tile) {
    grid-column: 1 / -1;
}

.login_form_tile {
    display: grid;
    grid-gap: 14px;
    grid-auto-rows: max-content;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.login_form_tile h1,
.login_form_tile h2,
.login_form_tile h3,
.login_form_tile h4 {
    margin: 0;
    letter-spacing: -0.01em;
}

.login_form_tile label {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.login_form_tile input:not([type="file"]):not([type="radio"]):not([type="checkbox"]),
.login_form_tile select,
.login_form_tile textarea {
    width: 100%;
    padding: 12px 14px;
    min-height: 44px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.login_form_tile input:focus,
.login_form_tile select:focus,
.login_form_tile textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.18);
}

.login_form_tile button {
    padding: 12px 20px;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: oklch(0.15 0.014 165);
    font-weight: 600;
    cursor: pointer;
}

.login_form_tile button:hover {
    background: var(--accent-hi);
}

.login_form_tile_checkbox {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    grid-gap: 10px;
}

.login_form_tile_checkbox input {
    width: 18px;
    height: 18px;
}

.login_form_tile_buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    grid-column: 1 / -1;
}

.login_form_tile .validation-message,
.login_form_tile .input_error {
    color: var(--danger);
    font-size: 13px;
}

.register_wrapper header {
    display: grid;
    grid-gap: 6px;
}

.register_success {
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Wizard */
.listing_wizard_steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.listing_wizard_steps .step {
    padding: 12px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-mute);
}

.listing_wizard_steps .step.active {
    background: var(--accent);
    color: oklch(0.15 0.014 165);
    border-color: var(--accent);
    font-weight: 700;
}

.cat_panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.cat_panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 16px;
}

.cat_panel h3 {
    margin-bottom: 12px;
    font-size: 18px;
}

.cat_grid,
.cat_selection_grid,
.preview_cats_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
    grid-auto-rows: max-content;
    align-items: center;
}

.cat_selection_tile {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
    background: var(--surface-hi);
    border: 1px solid var(--border);
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    transition: transform .15s, border-color .15s;
}

.cat_selection_tile:hover {
    transform: translateY(-2px);
    border-color: var(--border-hi);
}

.cat_selection_tile.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.cat_selection_tile img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.cat_selection_grid_tile {
    display: grid;
    grid-gap: 8px;
    background: var(--surface-hi);
    border: 1px solid var(--border);
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    height: max-content;
}

.cat_selection_grid_tile input[type="checkbox"] {
    display: none;
}

.cat_selection_grid_tile:has(input[type="checkbox"]:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.cat_selection_grid_tile img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.cat_selection_grid_tile_info {
    display: grid;
    grid-template-columns: 1fr 36px;
    grid-gap: 8px;
    align-items: center;
}

.cat_selection_grid_tile .cat_selection_grid_tile_remove_indicator {
    display: none;
}

.cat_selection_grid_tile:has(input[type="checkbox"]:checked) .cat_selection_grid_tile_select_indicator {
    display: none;
}

.cat_selection_grid_tile:has(input[type="checkbox"]:checked) .cat_selection_grid_tile_remove_indicator {
    display: grid;
}

.select_indicator,
.remove_indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: oklch(0.15 0.014 165);
}

.select_indicator {
    background: var(--accent);
}

.remove_indicator {
    background: var(--danger);
    cursor: pointer;
}

.select_indicator:before {
    content: "+";
    font-size: 18px;
    font-weight: bold;
}

.remove_indicator:before {
    content: "×";
    font-size: 22px;
    font-weight: bold;
}

.cat_selection_grid_tile_select_indicator,
.cat_selection_grid_tile_remove_indicator {
    width: 36px;
    height: 36px;
    display: grid;
    justify-content: center;
    align-content: center;
    border-radius: var(--radius-sm);
}

.cat_selection_grid_tile_select_indicator {
    background: var(--accent);
    color: oklch(0.15 0.014 165);
}

.cat_selection_grid_tile_remove_indicator {
    background: var(--danger);
    color: oklch(0.15 0.014 165);
}

.cat_selection_grid_tile_select_indicator:before {
    content: "+";
    font-size: 22px;
    font-weight: bold;
}

.cat_selection_grid_tile_remove_indicator:before {
    content: "×";
    font-size: 22px;
    font-weight: bold;
}

.empty_selection {
    display: grid;
    place-items: center;
    height: 200px;
    background: var(--bg-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-mute);
}

.grouping_reason {
    padding: 16px;
    background: var(--surface-hi);
    border-radius: var(--radius-sm);
    margin-top: 12px;
}

.other_reason {
    margin-top: 12px;
    padding-left: 32px;
    display: grid;
    gap: 8px;
}

.radio_item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: center;
}

.radio_item label {
    cursor: pointer;
}

.listing_preview {
    padding-top: 12px;
    margin-top: 12px;
}

.listing_warning {
    background: var(--warning-soft);
    border-left: 4px solid var(--warning);
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin: 12px 0;
}

.preview_cat_tile {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    background: var(--surface-hi);
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: var(--radius-sm);
    align-items: start;
}

.preview_cat_tile img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.preview_cat_details {
    display: grid;
    grid-auto-rows: max-content;
    gap: 6px;
    margin-top: 6px;
}

.preview_cat_info strong {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
}

.listing_details {
    margin: 12px 0;
    padding: 14px;
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.cat_selection_container {
    margin: 18px 0;
}

.cats_list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.cat_item,
.listing_cat_chip {
    background: var(--surface-hi);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

/* Gallery */
.manage_gallery_container {
    display: grid;
    grid-gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 18px;
    grid-auto-rows: max-content;
}

.manage_gallery_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    grid-auto-rows: max-content;
    gap: 14px;
}

.manage_gallery_grid_tile {
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 12px;
    display: grid;
    grid-gap: 12px;
}

.manage_gallery_grid_tile_wrapper {
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
}

.manage_gallery_grid_tile_buttons {
    display: grid;
    gap: 6px;
}

.manage_gallery_grid_tile_buttons button {
    width: 100%;
}

/* Form generic */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.form-content {
    padding: 16px 0;
    display: grid;
    gap: 14px;
}

.form-group {
    display: grid;
    gap: 6px;
}

.form-group label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.form-control {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.18);
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.form-hint {
    font-size: 12px;
    color: var(--text-mute);
}

.password-requirements {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-mute);
}

.password-requirements ul {
    margin-top: 4px;
    padding-left: 20px;
}

/* Statuses */
.status-message {
    display: grid;
    gap: 14px;
    padding: 24px;
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid var(--border);
    background: var(--surface);
}

.status-message .login_form_tile_buttons {
    grid-template-columns: 50%;
    justify-content: center;
    margin-top: 8px;
}

.status-success {
    background: var(--accent-soft);
    border-color: var(--accent-dim);
}

.status-error {
    background: var(--danger-soft);
    border-color: var(--danger);
}

.status-warning {
    background: var(--warning-soft);
    border-color: var(--warning-dim);
    color: var(--warning-hi);
    text-align: left;
    padding: 14px 18px;
}

.status-icon {
    font-size: 44px;
    justify-self: center;
}

.status-icon.success {
    color: var(--accent);
}

.status-icon.error {
    color: var(--danger);
}

.confirmation-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.confirmation-status {
    text-align: center;
    padding: 20px;
}

.success-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 28px;
}

.success-icon {
    font-size: 56px;
    color: var(--accent);
    margin-bottom: 18px;
}

.error-message {
    padding: 14px 18px;
    margin-bottom: 18px;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    color: var(--text);
    display: grid;
    gap: 6px;
}

.empty-state-container {
    padding: 32px;
    text-align: center;
    grid-column: 1 / -1;
}

.empty-state-container .listing_element {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

/* Profile tabs / stats */
.profile-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.profile-tabs .tab {
    padding: 10px 18px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-mute);
    transition: background .15s, color .15s, border-color .15s;
}

.profile-tabs .tab:hover {
    color: var(--text);
    border-color: var(--border-hi);
}

.profile-tabs .tab.active {
    background: var(--accent);
    color: oklch(0.15 0.014 165);
    border-color: var(--accent);
    font-weight: 600;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
    margin: 18px 0;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    text-align: center;
    transition: transform .2s;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-hi);
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    color: var(--accent);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.stat-label {
    color: var(--text-mute);
    font-size: 13px;
}

/* User listings */
.advertisements-list {
    display: grid;
    gap: 18px;
}

.user_listing_tile {
    display: grid;
    gap: 12px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.user_listing_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.user_listing_header h3 {
    margin: 0;
    font-size: 18px;
}

.user_listing_content {
    display: grid;
    gap: 12px;
}

.listing_details p {
    margin: 0;
}

.listing_description {
    border-left: 3px solid var(--border-hi);
    padding-left: 14px;
    margin: 6px 0;
    color: var(--text-mute);
}

.listing_cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.user_listing_actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 6px;
    flex-wrap: wrap;
}

.user_listing_actions .default_btn,
.user_listing_actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    width: auto;
}

.user_listing_actions svg {
    width: 18px;
    height: 18px;
}

.listing_status {
    display: flex;
    align-items: center;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.status-active {
    background: var(--accent);
    color: oklch(0.15 0.014 165);
}

.status-draft {
    background: var(--surface-hi);
    color: var(--text-mute);
    border: 1px solid var(--border);
}

.status-inactive {
    background: oklch(0.70 0.16 60);
    color: oklch(0.15 0.014 165);
}

.status-closed {
    background: var(--danger);
    color: oklch(0.15 0.014 165);
}

.sidebar_filter_container {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 18px;
    border-radius: var(--radius);
    display: grid;
    gap: 14px;
}

.sidebar_filter_container h2 {
    font-size: 16px;
    margin: 0;
}

/* Pagination */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.pagination {
    display: flex;
    gap: 6px;
}

.pagination-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.pagination-button:hover {
    background: var(--surface-hi);
    border-color: var(--border-hi);
}

.pagination-button.active {
    background: var(--accent);
    color: oklch(0.15 0.014 165);
    border-color: var(--accent);
    font-weight: 600;
}

/* Misc utilities (kept) */
.p2 {
    padding: 32px;
}

.span2 {
    grid-column: span 2;
}

.tdu {
    text-decoration: underline;
}

.cp {
    cursor: pointer;
}

.tac {
    text-align: center;
}

.mt-2 {
    margin-top: 16px;
}

.warning-text {
    color: var(--warning);
    margin-left: 8px;
}

.input_error {
    color: var(--danger);
}

.two_part_label {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: space-between;
}

.simple_tiles_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    padding: 32px var(--container-px);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

.validation-message {
    color: var(--danger);
    margin-top: 4px;
    font-size: 13px;
}

.validation-summary {
    margin-bottom: 18px;
}

.validation-errors {
    color: var(--danger);
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    gap: 4px;
}

.validation_summary {
    display: grid;
    gap: 8px;
}

.btn_active {
    background: var(--surface-hi);
    cursor: auto;
    grid-template-columns: 1fr max-content;
    user-select: text;
    align-content: center;
    color: var(--text);
}

.btn_active .clickable_link {
    display: block;
}

.btn_active .clickable_link svg {
    height: 18px;
}

.btn_listing_contact_inner {
    display: grid;
    grid-gap: 12px;
    align-items: center;
    grid-template-columns: max-content 1fr max-content;
    grid-column: 1 / -1;
}

.btn_listing_contact_clickable_link {
    background: var(--accent);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    height: 28px;
    align-content: center;
    display: flex;
}

/* Definition lists (account export) */
dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
}

dt {
    font-weight: 600;
    color: var(--text-mute);
}

dd {
    margin: 0;
    color: var(--text);
}

textarea {
    font-family: inherit;
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    width: 100%;
    resize: vertical;
    min-height: 120px;
}

textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.18);
}

.thumbnail-preview {
    margin-top: 10px;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: inline-block;
    background: var(--bg-2);
    border: 1px solid var(--border);
}

.reset-form,
.resend-form {
    margin-top: 18px;
}

.additional-links {
    margin-top: 18px;
    text-align: center;
}

.additional-links a {
    color: var(--accent);
    text-decoration: underline;
}

.action-buttons {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    padding: 32px;
    text-align: center;
}

.loading-container,
.empty-state-container {
    padding: 32px;
    text-align: center;
    grid-column: 1 / -1;
}

/* Responsive — legacy */
@media (max-width: 1400px) {
    .subpage_grid {
        grid-template-columns: 1fr 240px;
        padding: 16px;
    }

    .subpage_sidebar {
        order: 1;
    }

    .login_container, .register_container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .listing_grid_header {
        grid-template-columns: 1fr;
    }

    .listing_wizard_steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1000px) {
    .subpage_grid {
        grid-template-columns: 1fr;
    }

    .login_wrapper, .register_wrapper {
        grid-template-columns: 1fr;
    }

    .login_photo, .register_photo {
        background-attachment: unset;
        height: 200px;
    }

    .login_container, .register_container {
        order: 1;
    }

    .subpage_form {
        grid-template-columns: 1fr;
    }

    .subpage_form .span2 {
        grid-column: span 1;
    }

    .cat_panels {
        grid-template-columns: 1fr;
    }

    .preview_cats_grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .index_filters {
        grid-template-columns: 1fr 1fr;
    }

    .index_filters button {
        grid-column: 1 / -1;
    }

    .listing_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .subpage_advertisements_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .subpage_cats_grid {
        grid-template-columns: 1fr;
    }

    .login_form_tile_buttons {
        grid-template-columns: 1fr;
    }

    .profile-tabs {
        flex-direction: column;
    }

    .action-buttons,
    .form-actions {
        flex-direction: column;
    }

    dl {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }

    dt {
        margin-top: 6px;
    }
}

@media (max-width: 560px) {
    .listing_grid {
        grid-template-columns: 1fr;
    }

    .index_filters {
        grid-template-columns: 1fr;
    }

    .listing_wizard_steps {
        grid-template-columns: 1fr;
    }

    .subpage_cat_actions {
        grid-template-columns: 1fr;
    }

    .btn_listing_contact_inner {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .cat_selection_grid {
        grid-template-columns: 1fr;
    }
}

/* ───────── Profile (Account page) ───────── */
.page-head {
    padding-top: 56px;
    padding-bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.page-head h1 {
    font-size: clamp(32px, 4.2vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 22px;
    padding-bottom: 40px;
    align-items: start;
}

.profile-grid .col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(to bottom,
    oklch(0.25 0.018 165 / 0.6),
    oklch(0.22 0.016 165 / 0));
}

.panel-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.panel-head .panel-num {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--accent);
    letter-spacing: 0.14em;
}

.panel-head .panel-aside {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-mute);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.panel-body {
    padding: 8px 22px 18px;
}

.sim-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sim-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    transition: border-color .15s, background .15s, transform .08s;
}

.sim-item:hover {
    border-color: var(--border-hi);
    background: var(--surface-hi);
    transform: translateX(2px);
}

.sim-item .thumb {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.sim-item .thumb svg,
.sim-item .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sim-item .meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sim-item .meta .t {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sim-item .meta .s {
    font-size: 12px;
    color: var(--text-mute);
}

.sim-item .meta .s .mono {
    font-family: var(--font-mono);
    font-size: 11px;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}

.profile-btn .ava {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--accent), var(--accent-dim));
    color: oklch(0.16 0.012 165);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
}

.profile-btn .pb-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.profile-btn .pb-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}

.profile-btn .pb-sub {
    font-size: 12px;
    color: var(--accent-hi);
    font-weight: 600;
}

.dl-rows {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.dl-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border);
    margin: 0;
}

.dl-row:last-child {
    border-bottom: 0;
}

.dl-row dt {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-mute);
    margin: 0;
}

.dl-row dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.dl-row .value {
    font-size: 15px;
    color: var(--text);
    font-weight: 500;
    word-break: break-word;
}

.dl-row .value.mono {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: -0.005em;
}

.dl-row .value.muted {
    color: var(--text-mute);
}

.dl-row .value-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dl-row .value-block .address-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.dl-row .value-block .address-line {
    font-size: 13.5px;
    color: var(--text-mute);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-success {
    background: var(--success-soft);
    color: var(--accent-hi);
    border-color: var(--accent-dim);
}

.badge-success .dot {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 0 3px oklch(0.78 0.16 168 / 0.18);
}

.badge-neutral {
    background: var(--bg-2);
    color: var(--text-mute);
    border-color: var(--border);
}

.badge-role {
    background: var(--bg-2);
    color: var(--text);
    border-color: var(--border-hi);
    font-weight: 600;
}

.consent-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border);
}

.consent-row:last-child {
    border-bottom: 0;
}

.consent-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.consent-name .label {
    font-size: 14.5px;
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.consent-name .sub {
    font-size: 12.5px;
    color: var(--text-dim);
}

.consent-state {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.consent-state .state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-hi);
    font-size: 13px;
    font-weight: 600;
}

.consent-state .state.state-missing {
    color: var(--text-mute);
}

.consent-state .state svg {
    width: 14px;
    height: 14px;
}

.consent-state .when {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 0.02em;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.stat-tile {
    padding: 22px 20px 18px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.stat-tile .num {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
    font-feature-settings: "tnum" 1;
}

.stat-tile .num.zero {
    color: var(--text-dim);
}

.stat-tile .lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-top: 6px;
}

.stat-tile .lnk {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-mute);
    display: grid;
    place-items: center;
    transition: color .15s, border-color .15s, background .15s;
}

.stat-tile .lnk:hover {
    color: var(--accent-hi);
    border-color: var(--accent-dim);
    background: var(--surface-hi);
}

.stat-tile .sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    text-decoration: underline;
    text-underline-offset: 3px;
    align-self: flex-start;
    transition: color .15s;
}

.stat-tile .sub:hover {
    color: var(--accent-hi);
}

.actions-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.actions-stack form {
    margin: 0;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    color: var(--text);
    font: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, transform .08s;
}

.action-row:hover {
    border-color: var(--border-hi);
    background: var(--surface-hi);
}

.action-row:active {
    transform: translateY(1px);
}

.action-row .ico {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-mute);
    display: grid;
    place-items: center;
}

.action-row .copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.action-row .copy .t {
    font-size: 14px;
    font-weight: 600;
}

.action-row .copy .s {
    font-size: 12.5px;
    color: var(--text-dim);
}

.action-row .chev {
    color: var(--text-dim);
    transition: transform .15s, color .15s;
}

.action-row:hover .chev {
    color: var(--text);
    transform: translateX(2px);
}

.action-row.danger {
    color: var(--danger-hi);
}

.action-row.danger .ico {
    color: var(--danger-hi);
    border-color: var(--danger-dim);
    background: var(--danger-soft);
}

.action-row.danger:hover {
    border-color: var(--danger-dim);
    background: oklch(0.30 0.07 25 / 0.4);
}

.action-row.danger .copy .s {
    color: oklch(0.72 0.10 25);
}

.verif-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: oklch(0.32 0.08 85 / 0.18);
    border: 1px solid oklch(0.52 0.12 85);
    border-radius: var(--radius);
    color: var(--text);
}

.verif-strip .ico {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--warning);
    color: oklch(0.16 0.012 165);
    display: grid;
    place-items: center;
    flex: 0 0 32px;
}

.verif-strip .copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.verif-strip .t {
    font-size: 14px;
    font-weight: 600;
}

.verif-strip .s {
    font-size: 12.5px;
    color: var(--text-mute);
}

@media (max-width: 880px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .dl-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 0;
    }

    .page-head {
        padding-top: 32px;
    }

    .panel-body {
        padding: 6px 16px 16px;
    }

    .panel-head {
        padding: 14px 16px;
    }

    .consent-row {
        grid-template-columns: 1fr;
    }

    .consent-state {
        align-items: flex-start;
        text-align: left;
    }
}

/* ═══════════ Announcement detail (publiczna podstrona ogłoszenia) ═══════════
   Bazuje na istniejących tokenach i komponentach (.panel, .badge, .action-row).
   Interakcje realizowane czystym SSR — natywne <details>, bez JS. */

/* ───────── Breadcrumb ───────── */
.detail-top {
    padding-top: 24px;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.crumbs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}

.crumbs a {
    color: var(--text-mute);
    transition: color .15s;
}

.crumbs a:hover {
    color: var(--text);
}

.crumbs .sep {
    opacity: 0.5;
}

.crumbs .here {
    color: var(--text);
}

/* ───────── Detail grid (treść + prawy sidebar) ───────── */
.subpage {
    padding-top: 14px;
    padding-bottom: 8px;
}

.subpage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 332px;
    gap: 24px;
    align-items: start;
}

.side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.main-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* ───────── Back button ───────── */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-mute);
    font-size: 13.5px;
    font-weight: 600;
    width: 100%;
    transition: border-color .15s, background .15s, color .15s, transform .08s;
}

.back-btn:hover {
    color: var(--text);
    border-color: var(--border-hi);
    background: var(--surface-hi);
}

.back-btn:active {
    transform: translateY(1px);
}

.back-btn svg {
    transition: transform .15s;
}

.back-btn:hover svg {
    transform: translateX(-2px);
}

/* ───────── Owner banner ───────── */
.owner-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--accent-dim);
    background: oklch(0.32 0.08 168 / 0.16);
    border-radius: var(--radius);
    color: var(--text);
}

.owner-banner .ico {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: var(--accent);
    color: oklch(0.16 0.012 165);
    display: grid;
    place-items: center;
}

.owner-banner .t {
    font-size: 13.5px;
    font-weight: 700;
}

.owner-banner .s {
    font-size: 12px;
    color: var(--text-mute);
}

/* ───────── Hero / cover ───────── */
.hero-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.cover {
    position: relative;
    aspect-ratio: 21 / 9;
    background: var(--bg-2);
    overflow: hidden;
}

.cover img,
.cover svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
    oklch(0.12 0.012 165 / 0.92) 0%,
    oklch(0.14 0.012 165 / 0.45) 38%,
    transparent 72%);
}

.cover-badges {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.cover-meta {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cover-meta h1 {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 800;
    text-wrap: balance;
    text-shadow: 0 2px 18px oklch(0.10 0.01 165 / 0.6);
}

.cover-loc {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--text);
}

.cover-loc .pin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cover-loc .pin svg {
    color: var(--accent-hi);
}

.cover-loc .postal {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
}

.cover-loc .dotsep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-dim);
}

.pill-glass {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: oklch(0.12 0.01 165 / 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid oklch(1 0 0 / 0.14);
    color: var(--text);
}

.pill-paw svg {
    color: var(--accent-hi);
}

.hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: linear-gradient(to bottom, oklch(0.25 0.018 165 / 0.4), transparent);
    flex-wrap: wrap;
}

.hero-author {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hero-author .ava {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--accent), var(--accent-dim));
    color: oklch(0.16 0.012 165);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
}

.hero-author .who-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.hero-author .who-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}

.hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-mute);
}

.stat-chip strong {
    color: var(--text);
    font-weight: 700;
}

.stat-chip .mono {
    font-family: var(--font-mono);
    font-size: 11px;
}

/* ───────── Section header ───────── */
.sec-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 2px 2px 0;
}

.sec-head h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.sec-head .cnt {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 0.08em;
}

/* opis ogłoszenia (lead nad listą kotów) */
.ann-desc {
    margin: 0;
    font-size: 15px;
    color: var(--text-mute);
    line-height: 1.6;
    padding: 0 2px;
    text-wrap: pretty;
}

/* ───────── Cats list (rozbudowane karty) ───────── */
.cats-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.catx {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.catx:hover {
    border-color: var(--border-hi);
    box-shadow: 0 1px 0 oklch(0.42 0.014 165 / 0.5) inset, 0 16px 34px -18px rgba(0, 0, 0, 0.6);
}

.catx-grid {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 0;
}

/* gallery */
.gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-right: 1px solid var(--border);
    background: var(--bg-2);
}

.gallery-main {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: zoom-in;
    border: 1px solid var(--border);
}

.gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-main .zoom-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: oklch(0.12 0.01 165 / 0.74);
    backdrop-filter: blur(6px);
    border: 1px solid oklch(1 0 0 / 0.14);
    color: var(--text);
    font-size: 11px;
    opacity: 0;
    transition: opacity .2s;
}

.gallery-main:hover .zoom-hint {
    opacity: 1;
}

.gallery-thumbs {
    display: flex;
    gap: 8px;
}

.gallery-thumbs a {
    flex: 1;
    aspect-ratio: 1;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 0;
    transition: border-color .15s, transform .1s;
}

.gallery-thumbs a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumbs a:hover {
    border-color: var(--border-hi);
}

.gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-hi);
    background: var(--surface);
    color: var(--text-dim);
    padding: 20px;
}

.gallery-empty .ico {
    color: var(--text-dim);
    opacity: 0.7;
}

.gallery-empty .lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-mute);
}

/* cat body */
.catx-body {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.catx-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.catx-id {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.catx-id h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.catx-id .sub-age {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

.catx-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
}

/* spec chips */
.spec-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spec {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    border-radius: var(--radius-sm);
}

.spec .k {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.spec .v {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.spec .v.mono {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.cat-desc {
    font-size: 14.5px;
    color: var(--text-mute);
    line-height: 1.6;
    margin: 0;
    text-wrap: pretty;
}

/* health / test badge cluster */
.tag-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tag-cluster .lblmini {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: 2px;
}

.badge-warning {
    background: var(--warning-soft);
    color: var(--warning-hi);
    border-color: var(--warning-dim);
}

.badge-warning .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning);
}

.badge-danger {
    background: var(--danger-soft);
    color: var(--danger-hi);
    border-color: var(--danger-dim);
}

.badge-danger .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--danger-hi);
}

.badge-neutral .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-dim);
}

.badge .k {
    opacity: 0.7;
}

/* collapsible block (szczepienia) — natywny <details> */
.collapse {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    overflow: hidden;
}

summary.collapse-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    list-style: none;
}

summary.collapse-trigger::-webkit-details-marker {
    display: none;
}

.collapse-trigger:hover {
    background: var(--surface-hi);
}

.collapse-trigger .left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.collapse-trigger .ttl {
    font-size: 14px;
    font-weight: 700;
}

.collapse-trigger .badge-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: oklch(0.16 0.012 165);
    background: var(--accent);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.collapse-trigger .chev {
    color: var(--text-mute);
    transition: transform .2s;
}

.collapse[open] .collapse-trigger .chev {
    transform: rotate(180deg);
}

.collapse-content {
    padding: 4px 16px 14px;
}

.vax-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
}

.vax-row:last-child {
    border-bottom: 0;
}

.vax-type {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

.vax-sub {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

.vax-date {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-mute);
    white-space: nowrap;
}

/* note blocks (potrzeby specjalne / zwroty) */
.note-block {
    display: flex;
    gap: 13px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--warning-dim);
    background: oklch(0.30 0.06 85 / 0.16);
}

.note-block.empathy {
    border-color: var(--border-hi);
    background: var(--bg-2);
}

.note-block .ico {
    flex: 0 0 auto;
    color: var(--warning);
    margin-top: 1px;
}

.note-block.empathy .ico {
    color: var(--text-mute);
}

.note-block .body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.note-block .nb-head {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}

.note-block .nb-text {
    font-size: 13px;
    color: var(--text-mute);
    line-height: 1.55;
}

.sev {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--warning-dim);
    color: var(--warning-hi);
    background: var(--warning-soft);
}

.sev.sev-high {
    border-color: var(--danger-dim);
    color: var(--danger-hi);
    background: var(--danger-soft);
}

/* ───────── Right sidebar: contact / safety ───────── */
.cta-box {
    padding: 20px;
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.cta-box h3 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.cta-box p {
    font-size: 13.5px;
    color: var(--text-mute);
    line-height: 1.55;
}

.contact-reveal {
    margin: 0;
    display: flex;
    flex-direction: column;
}

summary.cta-main {
    list-style: none;
}

summary.cta-main::-webkit-details-marker {
    display: none;
}

.cta-main {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid oklch(0.62 0.10 168);
    background: linear-gradient(160deg, var(--accent), var(--accent-dim));
    color: oklch(0.15 0.014 165);
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
    transition: filter .15s, transform .08s;
}

.cta-main:hover {
    filter: brightness(1.06);
}

.cta-main:active {
    transform: translateY(1px);
}

.cta-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.5;
}

.cta-note svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--text-mute);
}

.cta-handle {
    border-top: 1px dashed var(--border);
    display: flex;
    align-items: center;
    gap: 11px;
}

.cta-handle .ava {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--accent), var(--accent-dim));
    color: oklch(0.16 0.012 165);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
}

.cta-handle .meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cta-handle .meta .l {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.cta-handle .meta .n {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}

.contact-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: .75rem;
}

.contact-row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    overflow: hidden;
    transition: border-color .15s;
}

.contact-row:hover {
    border-color: var(--border-hi);
}

.cr-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 10px;
}

.cr-ico {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    border: 1px solid var(--accent-dim);
    background: var(--accent-soft);
    color: var(--accent-hi);
    display: grid;
    place-items: center;
}

.cr-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cr-meta .l {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.cr-meta .v {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-row.tel .cr-meta .v {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0;
}

.safety {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.safety li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-mute);
    line-height: 1.5;
}

.safety li svg {
    flex: 0 0 auto;
    color: var(--accent-hi);
    margin-top: 1px;
}

/* empty cats */
.cats-empty {
    border: 1px dashed var(--border-hi);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-mute);
}

.cats-empty .ico {
    color: var(--text-dim);
}

.cats-empty p {
    margin: 0;
    font-size: 14px;
}

/* ───────── Responsive ───────── */
@media (max-width: 920px) {
    .subpage-grid {
        grid-template-columns: 1fr;
    }

    .catx-grid {
        grid-template-columns: 1fr;
    }

    .gallery {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .cover {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 540px) {
    .spec-row {
        gap: 6px;
    }

    .catx-body {
        padding: 16px;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   AUTH PAGES — login / register (nowy design system, pure SSR)
   Portowane z szablonu auth.css; korzysta z istniejących tokenów oraz
   .btn/.btn-primary. Funkcje interaktywne (eye-toggle, pasek siły hasła,
   social providers, spinner) celowo pominięte — SSR.
   ═════════════════════════════════════════════════════════════════════ */

.auth-wrap {
    padding-top: 56px;
    padding-bottom: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: start;
}

/* ── Left intro column ── */
.auth-intro {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

.auth-intro h1 {
    font-size: clamp(34px, 4.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0;
    text-wrap: balance;
    max-width: 14ch;
}

.auth-intro .lede {
    font-size: 16px;
    color: var(--text-mute);
    max-width: 42ch;
    margin: 0;
}

.auth-perks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px dashed var(--border);
}

.auth-perks li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border);
}

.auth-perks .ico {
    width: 22px;
    height: 22px;
    color: var(--accent-hi);
    display: grid;
    place-items: center;
}

.auth-perks .copy {
    font-size: 14.5px;
    color: var(--text);
    font-weight: 500;
}

.auth-perks .copy .sub {
    display: block;
    font-size: 12.5px;
    color: var(--text-dim);
    font-weight: 400;
    margin-top: 2px;
}

.auth-perks .num {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-mute);
    letter-spacing: 0.14em;
}

.auth-perks .ico svg {
    width: 20px;
    height: 20px;
}

/* ── Right form panel ── */
.auth-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    width: 100%;
    max-width: 480px;
    justify-self: end;
}

.auth-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(to bottom,
    oklch(0.25 0.018 165 / 0.6),
    oklch(0.22 0.016 165 / 0));
}

.auth-panel-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.auth-panel-head .panel-num {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--accent);
    letter-spacing: 0.14em;
}

.auth-panel-head .panel-aside {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-mute);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.auth-panel-body {
    padding: 22px 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Auth fields ── */
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.auth-field-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-field label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-mute);
}

.auth-input-wrap {
    position: relative;
}

.auth-input-wrap > svg.leading {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.auth-input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: 14.5px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.auth-input::placeholder {
    color: var(--text-dim);
}

.auth-input:hover:not(:disabled) {
    border-color: var(--border-hi);
}

.auth-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.18);
}

.auth-input.is-invalid,
.auth-input.invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px oklch(0.68 0.16 25 / 0.18);
}

/* Validation messages (Blazor emits .validation-message) styled as the
   template's .err — mono, danger, with leading warn icon slot. */
.auth-field .validation-message {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--danger-hi);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Static password requirements checklist (informacyjne, bez stanu .ok) ── */
.pw-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    margin-top: 4px;
    padding: 0;
    list-style: none;
}

.pw-rules li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-dim);
}

.pw-rules li .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--border-hi);
    display: grid;
    place-items: center;
    flex: 0 0 12px;
}

.pw-rules li .dot svg {
    width: 8px;
    height: 8px;
    color: var(--text-mute);
}

/* ── Custom checkbox (consent rows) ── */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--text-mute);
    user-select: none;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox .box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--bg-2);
    border: 1px solid var(--border-hi);
    display: grid;
    place-items: center;
    transition: background .15s, border-color .15s;
    flex: 0 0 18px;
}

.checkbox .box svg {
    width: 12px;
    height: 12px;
    color: oklch(0.15 0.014 165);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity .12s, transform .12s;
}

.checkbox input:checked ~ .box {
    background: var(--accent);
    border-color: var(--accent);
}

.checkbox input:checked ~ .box svg {
    opacity: 1;
    transform: scale(1);
}

.checkbox input:focus-visible ~ .box {
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.25);
}

.checkbox:hover .box {
    border-color: var(--text-mute);
}

/* ── Consent / terms checkbox stack ── */
.auth-consents {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}

.auth-consents .checkbox {
    align-items: flex-start;
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.45;
    gap: 10px;
}

.auth-consents .checkbox .box {
    margin-top: 1px;
}

.auth-consents .checkbox a {
    color: var(--accent-hi);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-consents .checkbox a:hover {
    color: var(--accent);
}

.auth-consents .checkbox .opt {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-mute);
    text-transform: uppercase;
    margin-left: 6px;
}

/* Consent-level validation message (Blazor .validation-message) */
.auth-consents-err .validation-message {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--danger-hi);
    margin: -4px 0 0;
}

/* ── Two-column row ── */
.auth-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 0;
}

/* ── Submit button ── */
.auth-submit {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 14.5px;
    margin-top: 4px;
}

.auth-submit svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* ── Form-level alert (error + success variants) ── */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: oklch(0.30 0.07 25 / 0.4);
    border: 1px solid var(--danger-dim);
    border-radius: var(--radius-sm);
    color: oklch(0.92 0.04 25);
    font-size: 13px;
    line-height: 1.45;
}

.auth-alert > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--danger-hi);
    margin-top: 1px;
}

.auth-alert .t {
    font-weight: 600;
}

.auth-alert .s {
    display: block;
    margin-top: 2px;
    color: oklch(0.82 0.06 25);
    font-size: 12.5px;
}

.auth-alert.success {
    background: oklch(0.28 0.06 165 / 0.4);
    border-color: oklch(0.55 0.13 165 / 0.5);
    color: oklch(0.94 0.04 165);
}

.auth-alert.success > svg {
    color: var(--accent-hi);
}

.auth-alert.success .s {
    color: oklch(0.84 0.05 165);
}

/* ── Validation summary inside the panel ── */
.auth-panel-body .validation-summary {
    margin: 0;
}

.auth-panel-body .validation-errors {
    color: var(--danger-hi);
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    gap: 4px;
    font-size: 13px;
}

/* ── Panel foot (sign-in link) ── */
.auth-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
    margin-top: 8px;
}

.auth-panel-foot .ask {
    font-size: 13px;
    color: var(--text-mute);
}

.auth-panel-foot .ask strong {
    color: var(--text);
    font-weight: 600;
}

.auth-panel-foot .register-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s, color .15s, background .15s;
}

.auth-panel-foot .register-link:hover {
    border-color: var(--accent-dim);
    color: var(--accent-hi);
    background: var(--surface-hi);
}

.auth-panel-foot .register-link svg {
    width: 14px;
    height: 14px;
}

/* ── Secondary info strip (under panel) ── */
.auth-meta {
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

.auth-meta .lock {
    width: 12px;
    height: 12px;
    color: var(--accent-hi);
}

/* ── Post-registration success actions ── */
.auth-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.auth-success-actions form {
    margin: 0;
}

/* ───────── Formularze auth — strony pomocnicze (forgot / change / delete) ─────────
   Delta z auth-forms.css (mockup): para przycisków, alert info, panel danger,
   lista konsekwencji, stan ładowania, intro-note. SSR-safe (zero JS).
   .auth-alert.success oraz .loading-indicator/.li-spin są re-used z sekcji wyżej. */

/* para przycisków (ghost + primary) — wspólna dla 3 stron */
.auth-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-top: 6px;
}
.auth-actions .btn {
    justify-content: center;
    padding: 13px 18px;
    font-size: 14.5px;
}
.auth-actions .btn-ghost { white-space: nowrap; }
.auth-actions .btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
@media (max-width: 560px) { .auth-actions { grid-template-columns: 1fr; } }

/* przycisk pełnej szerokości (np. „Wróć do logowania" w stanie sukcesu) */
.btn-block { width: 100%; justify-content: center; padding: 13px 18px; font-size: 14.5px; }
.btn-block svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* tekst pomocniczy pod polem */
.auth-field-help {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.5;
    margin-top: -1px;
}

/* pole bez wiodącej ikony (np. „Wpisz USUWAM") */
.auth-input.no-leading { padding-left: 14px; }
.auth-input.mono { font-family: var(--font-mono); letter-spacing: 0.18em; }
.auth-input.mono::placeholder { letter-spacing: 0.18em; }

/* wariant .auth-alert.info (domyślny = danger; .success już zdefiniowany wyżej) */
.auth-alert.info {
    background: var(--bg-2);
    border-color: var(--border-hi);
    color: var(--text);
}
.auth-alert.info > svg { color: var(--accent-hi); }
.auth-alert.info .s { color: var(--text-mute); }

/* panel w tonie ostrzegawczym (usunięcie konta) */
.auth-panel.is-danger .auth-panel-head {
    background: linear-gradient(to bottom,
    oklch(0.30 0.07 25 / 0.5),
    oklch(0.24 0.04 25 / 0));
    border-bottom-color: var(--danger-dim);
}
.auth-panel.is-danger .auth-panel-head .panel-num { color: var(--danger-hi); }
.auth-panel.is-danger .auth-panel-head .panel-aside { color: var(--danger-hi); }

/* lista konsekwencji (co się stanie po usunięciu) */
.auth-consequences {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.auth-consequences li {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 12.5px;
    color: var(--text-mute);
    line-height: 1.45;
}
.auth-consequences li svg {
    width: 16px; height: 16px;
    flex: 0 0 16px;
    color: var(--danger-hi);
    margin-top: 1px;
}

/* stan ładowania w panelu */
.auth-loading {
    display: grid;
    place-items: center;
    padding: 42px 0 36px;
}

/* nota pod nagłówkiem intro (label mono) */
.auth-intro .intro-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    width: fit-content;
}
.auth-intro .intro-note svg { width: 15px; height: 15px; color: var(--accent-hi); flex: 0 0 15px; }
.auth-intro .intro-note.danger { border-color: var(--danger-dim); }
.auth-intro .intro-note.danger svg { color: var(--danger-hi); }

/* eyebrow w tonie ostrzegawczym */
.eyebrow.danger { color: var(--danger-hi); }

/* ───────── Responsive — auth ───────── */
@media (max-width: 1100px) {
    .auth-panel-head .panel-aside {
        display: none;
    }
}

@media (max-width: 980px) {
    .auth-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 32px;
        padding-bottom: 40px;
    }

    .auth-panel {
        justify-self: stretch;
        max-width: none;
    }

    .auth-intro h1 {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .auth-panel-body {
        padding: 18px 18px 6px;
    }

    .auth-panel-head {
        padding: 14px 18px;
    }

    .auth-panel-foot {
        padding: 14px 18px;
    }

    .auth-row-2 {
        grid-template-columns: 1fr;
    }

    .pw-rules {
        grid-template-columns: 1fr;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   USER LIST PAGES — Moje koty / Moje ogłoszenia (pure SSR)
   Portowane z user-pages.css. Dokładamy WYŁĄCZNIE klasy, których jeszcze
   nie ma w tym pliku; współdzielone (.results-meta/.meta-left/.count,
   .tag-cluster/.lblmini, .card-photo-wrap/.card-body/.card-head,
   .badge*/.dot, @keyframes spin) są re-used z sekcji powyżej.
   Przełącznik stanów z mockupu (.state-radio/.demo-bar) celowo POMINIĘTY —
   stany pochodzą z logiki renderowania strony.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Akcje w nagłówku strony (re-use .page-head z sekcji Profile) ── */
.page-head .head-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ── Akcje w stopce karty ── */
.card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.card-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 10px 14px;
    font-size: 13.5px;
}

.card-actions .btn-primary {
    flex: 1.4;
}

/* ── Lokalizacja na karcie (Miasto · woj. region) ── */
.card-loc {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    font-size: 13.5px;
    color: var(--text-mute);
}

.card-loc svg {
    flex: 0 0 auto;
    color: var(--accent-hi);
}

.card-loc .city {
    color: var(--text);
    font-weight: 600;
}

.card-loc .dotsep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-dim);
    flex: 0 0 auto;
}

.card-loc .woj {
    color: var(--text-mute);
}

.card-loc.is-empty {
    color: var(--text-dim);
    font-style: italic;
}

/* ── Jednolinijkowa notka na karcie (np. data opróżnienia kosza) ── */
.card-note {
    margin: 0;
    font-size: 13px;
    color: var(--text-mute);
}

/* ── Placeholder „brak zdjęcia" wewnątrz .card-photo-wrap ── */
.photo-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: repeating-linear-gradient(135deg,
    var(--bg-2) 0 11px,
    oklch(0.22 0.015 165) 11px 22px);
    color: var(--text-dim);
}

.photo-empty svg {
    opacity: 0.7;
}

.photo-empty .lbl {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
}

/* ── Rich error message (.em-ico/.em-body/.em-retry).
      Bazowy .error-message (danger box) jest re-used z sekcji wyżej;
      flex-layout dokładamy tylko gdy karta ma .em-body, by nie ruszać
      prostych boksów <strong>+<div> na innych stronach. ── */
.error-message:has(.em-body) {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 0;
    border: 1px solid var(--danger-dim);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.error-message .em-ico {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    border: 1px solid var(--danger-dim);
    background: oklch(0.30 0.07 25 / 0.5);
    color: var(--danger-hi);
    display: grid;
    place-items: center;
}

.error-message .em-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.error-message .em-body .t {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}

.error-message .em-body .s {
    font-size: 13px;
    color: var(--text-mute);
    line-height: 1.5;
}

.error-message .em-retry {
    flex: 0 0 auto;
    margin: 0;
}

/* ── Wskaźnik ładowania z animowanym spinnerem (.li-spin).
      Bazowy .loading-indicator jest re-used; inline-flex layout dokładamy
      tylko gdy wewnątrz jest .li-spin, by nie ruszać wyśrodkowanych użyć. ── */
.loading-indicator:has(.li-spin) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    min-height: 0;
    padding: 4px 2px 22px;
    text-align: left;
}

.loading-indicator .li-spin {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border-radius: 50%;
    border: 2px solid var(--border-hi);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
}

/* ── Skeleton karty (stan ładowania) ── */
.sk {
    background: linear-gradient(100deg,
    var(--surface-hi) 30%,
    oklch(0.32 0.018 165) 50%,
    var(--surface-hi) 70%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.3s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes sk-shimmer {
    to {
        background-position: -200% 0;
    }
}

.sk-line {
    height: 14px;
    border-radius: 6px;
}

.sk-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.sk-thumb {
    aspect-ratio: 4 / 3;
    border-radius: 0;
}

.sk-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.sk-row {
    display: flex;
    gap: 8px;
}

/* ── Stan pusty — ikona/nagłówek/akcja dopięte do istniejącego .empty ── */
.empty .empty-glyph {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-hi);
    background: var(--bg-2);
    color: var(--accent-hi);
}

.empty h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.empty p {
    margin: 0;
    font-size: 14px;
    color: var(--text-mute);
    max-width: 40ch;
    line-height: 1.6;
}

.empty .empty-cta {
    margin-top: 4px;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .error-message:has(.em-body) {
        flex-wrap: wrap;
    }

    .error-message .em-retry {
        width: 100%;
    }

    .error-message .em-retry .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   USER MANAGE PAGES — Szczegóły kota / Zarządzanie ogłoszeniem (pure SSR)
   Portowane z manage-pages.css. Dokładamy WYŁĄCZNIE klasy, których jeszcze
   nie ma w tym pliku; współdzielone (.hero-card/.cover*/.pill-*, .panel*,
   .action-row + .danger, .owner-banner (baza), .sec-head/.cats-list/.cats-empty,
   .note-block/.spec-row/.collapse, .badge*/.dot, .crumbs/.subpage-grid/.back-btn,
   .error-message/.em-*, .loading-indicator/.li-spin) są re-used z sekcji powyżej.
   Maszyna stanów + pasek demo z mockupu (.state-radio/.state-view/.state-screen/
   .demo-bar) celowo POMINIĘTE — stany pochodzą z logiki renderowania strony,
   spójnie z pominięciem przy listach (~linia 4931).
   Reguła .actions-stack form { margin: 0 } również pominięta — już istnieje wyżej.
   ═════════════════════════════════════════════════════════════════════ */

/* ───────── Nagłówek treści w main-col (imię + status + link) ───────── */
.detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 20px;
    flex-wrap: wrap;
    padding: 2px 2px 0;
}

.detail-head .dh-id {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.detail-head h1 {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.04;
}

.detail-head .dh-sub {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--text-dim);
}

.detail-head .dh-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.ann-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--accent-dim);
    background: oklch(0.32 0.08 168 / 0.16);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-hi);
    transition: background .15s, border-color .15s, transform .08s;
}

.ann-link:hover {
    background: oklch(0.32 0.08 168 / 0.28);
    border-color: var(--accent);
}

.ann-link:active {
    transform: translateY(1px);
}

.ann-link svg {
    transition: transform .15s;
}

.ann-link:hover svg {
    transform: translateX(2px);
}

/* Większy wariant badge (status w nagłówku detalu) */
.badge-lg {
    font-size: 11.5px;
    padding: 5px 13px 5px 11px;
    letter-spacing: 0.08em;
}

.badge-lg .dot {
    width: 7px;
    height: 7px;
}

/* ───────── Duże zdjęcie pojedynczego kota ───────── */
.photo-frame {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-2);
    aspect-ratio: 16 / 10;
    box-shadow: var(--shadow);
}

.photo-frame svg {
    display: block;
    width: 100%;
    height: 100%;
}

.photo-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-frame .pf-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: oklch(0.12 0.01 165 / 0.74);
    backdrop-filter: blur(6px);
    border: 1px solid oklch(1 0 0 / 0.14);
    color: var(--text);
    font-size: 11.5px;
}

.photo-frame .pf-count .mono {
    font-family: var(--font-mono);
}

.photo-frame-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    aspect-ratio: 16 / 10;
    border: 1px dashed var(--border-hi);
    border-radius: var(--radius);
    color: var(--text-dim);
    text-align: center;
    padding: 24px;
    background:
        repeating-linear-gradient(135deg,
            var(--bg-2) 0 12px,
            oklch(0.22 0.015 165) 12px 24px);
}

.photo-frame-empty svg {
    opacity: 0.7;
}

.photo-frame-empty .lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.photo-frame-empty .sub {
    font-size: 12.5px;
    color: var(--text-dim);
    max-width: 32ch;
}

/* ───────── Formularz uploadu zdjęcia / okładki ───────── */
.upload-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.upload-hint {
    display: flex;
    gap: 11px;
    margin: 0;
    font-size: 13px;
    color: var(--text-mute);
    line-height: 1.55;
}

.upload-hint svg {
    flex: 0 0 auto;
    color: var(--accent-hi);
    margin-top: 2px;
}

/* ───────── Share kit — gotowy post do skopiowania (panel „Udostępnij ogłoszenie") ───────── */
.share-kit {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.share-kit textarea {
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
}

.file-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.file-field:hover {
    border-color: var(--border-hi);
}

/* Keyboard focus lands on the real input; the wrapper draws the ring, like .field does. */
.file-field:has(input[type="file"]:focus-visible) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.18);
}

/* The chosen file name is drawn by the browser, not by us. Static SSR never learns what the
   user picked, so a hand-rolled label could only ever keep saying "no file chosen" (#608).
   Only the native button is hidden, so the visible button stays ours and localized. */
.file-field input[type="file"] {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text);
    cursor: pointer;
}

.file-field input[type="file"]:focus {
    outline: none;
}

/* Collapsed, not display:none — WebKit drops the whole control, file name included, when the
   button is display:none, which would leave the field blank on Safari. Zero-sizing it renders
   the same in Chrome, Firefox and Safari: our button on the left, the browser's name on the right. */
.file-field input[type="file"]::file-selector-button {
    width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    visibility: hidden;
}

.file-field .fake-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: var(--surface-hi);
    border-right: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.file-field .fake-btn svg {
    color: var(--accent-hi);
}

.upload-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* status formularza (sukces / błąd) — inline pod akcją */
.upload-status {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
}

.upload-status svg {
    flex: 0 0 auto;
}

.upload-status.ok {
    background: var(--success-soft);
    color: var(--accent-hi);
    border-color: var(--accent-dim);
}

.upload-status.err {
    background: var(--danger-soft);
    color: var(--danger-hi);
    border-color: var(--danger-dim);
}

/* ───────── Wariant ostrzegawczy banera właściciela ───────── */
.owner-banner.warn {
    border-color: var(--warning-dim);
    background: oklch(0.30 0.06 85 / 0.16);
}

.owner-banner.warn .ico {
    background: var(--warning);
    color: oklch(0.16 0.012 165);
}

/* ───────── Tonalne warianty action-row (akcje jako <form method="post">) ───────── */
.action-row.warning {
    color: var(--warning-hi);
}

.action-row.warning .ico {
    color: oklch(0.16 0.012 165);
    border-color: var(--warning-dim);
    background: var(--warning);
}

.action-row.warning:hover {
    border-color: var(--warning-dim);
    background: oklch(0.30 0.06 85 / 0.4);
}

.action-row.warning .copy .s {
    color: oklch(0.74 0.10 85);
}

.action-row.success {
    color: var(--accent-hi);
}

.action-row.success .ico {
    color: oklch(0.16 0.012 165);
    border-color: var(--accent-dim);
    background: var(--accent);
}

.action-row.success:hover {
    border-color: var(--accent-dim);
    background: oklch(0.32 0.08 168 / 0.4);
}

.action-row.success .copy .s {
    color: oklch(0.74 0.10 168);
}

.action-row.primary .ico {
    color: oklch(0.16 0.012 165);
    border-color: var(--accent-dim);
    background: linear-gradient(150deg, var(--accent), var(--accent-dim));
}

/* przycisk wewnątrz action-row resetujemy do natywnego (gdy to <button>) */
button.action-row {
    font: inherit;
}

/* ───────── Panel "Powiązane" — mini-statystyki ───────── */
.mini-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mini-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}

.mini-stat .ico {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 9px;
    border: 1px solid var(--accent-dim);
    background: var(--accent-soft);
    color: var(--accent-hi);
    display: grid;
    place-items: center;
}

.mini-stat .meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mini-stat .num {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text);
}

.mini-stat .lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-top: 4px;
}

.panel-hint {
    margin: 12px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
}

.panel-hint svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--text-mute);
}

/* opis ogłoszenia */
.desc-prose {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-mute);
    text-wrap: pretty;
}

/* ───────── Pasek błędu akcji nad treścią ───────── */
.action-error {
    margin-bottom: 2px;
}

/* ───────── Responsive (manage) ───────── */
@media (max-width: 920px) {
    .photo-frame,
    .photo-frame-empty {
        aspect-ratio: 16 / 11;
    }
}

@media (max-width: 540px) {
    .mini-stats {
        grid-template-columns: 1fr;
    }

    .file-field {
        flex-direction: column;
        align-items: stretch;
    }

    .file-field .fake-btn {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        justify-content: center;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   FORM PAGES — Edytuj kota / Dodaj kota (pure SSR)
   Portowane z form-pages.css. Dokładamy WYŁĄCZNIE klasy, których jeszcze
   nie ma w tym pliku; współdzielone (.detail-head/.dh-id/.dh-sub/.dh-badges,
   .crumbs/.subpage/.subpage-grid/.main-col/.side/.back-btn, .panel*, .badge*,
   .select-wrap/.select-chev, .error-message/.em-*, .loading-indicator/.li-spin,
   .btn*) są re-used z sekcji powyżej.
   Maszyna stanów + pasek demo + skeleton z mockupu (.state-radio/.state-view/
   .demo-bar/.sk-form) celowo POMINIĘTE — stany pochodzą z logiki renderowania
   strony; ładowanie korzysta z .loading-indicator/.li-spin jak Szczegóły kota.
   Wyjście walidacji Blazora (.invalid/.modified na inputach + .validation-message
   /.validation-errors) mostkujemy CSS-em do wyglądu .has-error/.field-error/
   .validation-summary — bez zmiany struktury renderowanej przez Blazora.
   ═════════════════════════════════════════════════════════════════════ */

/* ───────── Nagłówek formularza (re-use .detail-head, dokładamy odcień kicker) ───────── */
.form-head .dh-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 2px;
}

/* ───────── Element <form> jako kontener paneli ───────── */
.cat-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
}

/* ───────── Siatka pól wewnątrz .panel-body ───────── */
.cat-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    padding-top: 8px;
}

.cat-form .form-grid .full {
    grid-column: 1 / -1;
}

/* ───────── Pole: label nad kontrolką (rozszerza .field z sekcji wyżej) ─────────
   Bazowy .field label jest mono/uppercase (filtry/legacy) — w formularzu danych
   kota chcemy zwykłe, czytelne etykiety zdaniowe zgodnie z mockupem. */
.cat-form .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cat-form .field .lbl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cat-form .field label {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--text);
}

.cat-form .field .req {
    color: var(--accent-hi);
    margin-left: 1px;
}

.cat-form .field .opt {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ───────── Kontrolki tekstowe / liczbowe / daty / textarea ───────── */
.ctrl {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: 14.5px;
    color-scheme: dark;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.ctrl::placeholder {
    color: var(--text-dim);
}

.ctrl:hover:not(:disabled) {
    border-color: var(--border-hi);
}

.ctrl:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.18);
}

.ctrl:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

textarea.ctrl {
    resize: vertical;
    min-height: 96px;
    line-height: 1.55;
}

/* selecty re-use .select-wrap/.select-chev z sekcji wyżej; tu spinamy wysokość z .ctrl */
.cat-form .select-wrap select {
    font-size: 14.5px;
    padding-top: 11px;
    padding-bottom: 11px;
}

/* dopisek jednostki po prawej stronie pola liczbowego (waga) */
.ctrl-suffix {
    position: relative;
}

.ctrl-suffix .ctrl {
    padding-right: 52px;
}

.ctrl-suffix .unit {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
    pointer-events: none;
}

/* ───────── Podpowiedź / błąd pod polem ───────── */
.field-hint {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.45;
}

.field-error {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    color: oklch(0.80 0.13 25);
}

.field-error svg {
    flex: 0 0 auto;
}

/* ── Most do wyjścia walidacji Blazora ──
   Blazor dokłada .invalid na nieprawidłowy <input>/<select> oraz renderuje
   <div class="validation-message"> tuż pod kontrolką. Odwzorowujemy wygląd
   .has-error + .field-error bez zmiany struktury markupu. */
.cat-form .field.has-error .ctrl,
.cat-form .field.has-error .select-wrap select,
.cat-form .field:has(.invalid) .ctrl,
.cat-form .field:has(.ctrl.invalid),
.cat-form .field:has(.select-wrap select.invalid) .select-wrap select {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px oklch(0.68 0.16 25 / 0.16);
}

.cat-form .field .ctrl.invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px oklch(0.68 0.16 25 / 0.16);
}

.cat-form .field .validation-message {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    color: oklch(0.80 0.13 25);
}

/* ───────── Pole typu checkbox (cała klikalna karta z tytułem + opisem) ───────── */
.check-field {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.check-field:hover {
    border-color: var(--border-hi);
    background: var(--surface-hi);
}

.check-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.check-field .box {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 1px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border-hi);
    display: grid;
    place-items: center;
    transition: background .15s, border-color .15s;
}

.check-field .box svg {
    width: 13px;
    height: 13px;
    color: oklch(0.15 0.014 165);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity .12s, transform .12s;
}

.check-field input:checked ~ .box {
    background: var(--accent);
    border-color: var(--accent);
}

.check-field input:checked ~ .box svg {
    opacity: 1;
    transform: scale(1);
}

.check-field input:focus-visible ~ .box {
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.25);
}

.check-field .cf-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.check-field .cf-copy .t {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.check-field .cf-copy .s {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.45;
}

/* ───────── Podsumowanie błędów walidacji u góry (Blazor ValidationSummary) ──
   Blazor renderuje pojedynczy <ul class="validation-errors …"> bez wrappera.
   Stylizujemy SAM <ul> na czerwoną kartę z mockupu (akcent z lewej + lista
   pozycji), bez przebudowy markupu generowanego przez Blazora. ── */
.cat-form-summary.validation-summary {
    margin: 0 0 22px;
    padding: 16px 18px 16px 46px;
    position: relative;
    list-style: none;
    border: 1px solid var(--danger-dim);
    border-radius: var(--radius);
    background: var(--danger-soft);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cat-form-summary.validation-summary::before {
    content: "!";
    position: absolute;
    left: 16px;
    top: 16px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1px solid var(--danger-dim);
    background: oklch(0.30 0.07 25 / 0.5);
    color: var(--danger-hi);
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
}

.cat-form-summary.validation-summary li {
    color: var(--danger-hi);
    font-weight: 600;
    font-size: 13px;
}

/* ───────── Stopka akcji formularza ───────── */
.form-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}

.form-foot .save-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--text-dim);
    min-width: 0;
}

.form-foot .save-note svg {
    flex: 0 0 auto;
    color: var(--text-mute);
}

.form-foot .acts {
    display: inline-flex;
    gap: 10px;
    margin-left: auto;
}

/* ───────── Boczna kolumna: krótka pomoc / wymagane pola ───────── */
.side-help {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.side-help li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-mute);
    line-height: 1.5;
}

.side-help li svg {
    flex: 0 0 auto;
    color: var(--accent-hi);
    margin-top: 1px;
}

.side-help li b {
    color: var(--text);
    font-weight: 600;
}

/* ───────── Stan pełnoekranowy (brak uprawnień do edycji) ───────── */
.state-screen {
    max-width: 560px;
    margin: 0 auto;
    padding: 64px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.state-screen .glyph {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-hi);
    background: var(--surface);
    color: var(--text-mute);
}

.state-screen.err .glyph {
    color: var(--danger-hi);
    border-color: var(--danger-dim);
    background: var(--danger-soft);
}

.state-screen h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.state-screen p {
    margin: 0;
    font-size: 15px;
    color: var(--text-mute);
    max-width: 42ch;
    line-height: 1.6;
}

.state-screen .err-detail {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    word-break: break-all;
}

.state-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

/* ───────── Responsive (formularz) ───────── */
@media (max-width: 600px) {
    .cat-form .form-grid {
        grid-template-columns: 1fr;
    }

    .form-foot .acts {
        width: 100%;
    }

    .form-foot .acts .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT WIZARD — Kreator ogłoszenia (pure SSR)
   Portowane z form-pages.css (sekcja kreatora). Dokładamy WYŁĄCZNIE klasy,
   których jeszcze nie ma w tym pliku; współdzielone (.subpage*/.subpage-grid/
   .main-col/.side/.back-btn/.crumbs/.detail-top, .detail-head/.form-head/.dh-*,
   .panel*/.panel-num/.panel-aside, .badge*/.dot, .form-foot/.save-note/.acts,
   .form-grid/.field/.full/.lbl-row/.req/.opt/.ctrl/.select-wrap/.select-chev/
   .field-hint, .empty/.empty-glyph/.empty-cta, .note-block, .auth-alert(.success),
   .mini-stats/.mini-stat/.panel-hint, .btn/.btn-primary/.btn-ghost,
   .error-message/.em-*, .loading-indicator/.li-spin) są re-used z sekcji wyżej.
   Maszyna stanów + pasek demo + paskowane placeholdery z mockupu celowo POMINIĘTE —
   krok pochodzi z logiki renderowania strony, a miniatury to prawdziwe zdjęcia.
   ═════════════════════════════════════════════════════════════════════ */

/* ───────── Pasek kroków (stepper) ───────── */
.wizard-bar {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 22px 26px 20px;
}

.wizard-steps {
    display: flex;
}

.wstep {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 11px;
    min-width: 0;
}

/* linia łącząca (prowadzi do kroku z lewej) */
.wstep::before {
    content: "";
    position: absolute;
    top: 19px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.wstep:first-child::before {
    display: none;
}

.wstep .wnum {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid var(--border-hi);
    background: var(--bg-2);
    color: var(--text-mute);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.wstep .wnum svg {
    width: 16px;
    height: 16px;
}

.wstep .wlabel {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-mute);
}

/* stan: ukończony */
.wstep.is-done::before {
    background: var(--accent-dim);
}

.wstep.is-done .wnum {
    background: var(--success-soft);
    border-color: var(--accent-dim);
    color: var(--accent-hi);
}

.wstep.is-done .wlabel {
    color: var(--text);
}

/* stan: aktywny */
.wstep.is-active::before {
    background: var(--accent-dim);
}

.wstep.is-active .wnum {
    background: var(--accent);
    border-color: var(--accent);
    color: oklch(0.16 0.012 165);
    box-shadow: 0 0 0 4px oklch(0.80 0.17 168 / 0.16);
}

.wstep.is-active .wlabel {
    color: var(--text);
}

/* ───────── Karty-checkboxy wyboru kota ───────── */
.cat-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px;
    padding-top: 8px;
}

.cat-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 15px 15px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.cat-pick:hover {
    border-color: var(--border-hi);
    background: var(--surface-hi);
}

.cat-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cat-pick .pick-check {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-hi);
    background: var(--surface);
    display: grid;
    place-items: center;
    transition: background .15s, border-color .15s;
}

.cat-pick .pick-check svg {
    width: 12px;
    height: 12px;
    color: oklch(0.16 0.012 165);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity .12s, transform .12s;
}

.cat-pick input:checked ~ .pick-check {
    background: var(--accent);
    border-color: var(--accent);
}

.cat-pick input:checked ~ .pick-check svg {
    opacity: 1;
    transform: scale(1);
}

.cat-pick input:focus-visible ~ .pick-check {
    box-shadow: 0 0 0 3px oklch(0.80 0.17 168 / 0.25);
}

.cat-pick:has(input:checked) {
    border-color: var(--accent);
    background: var(--surface-hi);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

.cat-pick .cp-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding-right: 24px;
}

.cat-pick .cp-thumb {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
}

.cat-pick .cp-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-pick .cp-thumb.empty {
    display: grid;
    place-items: center;
    color: var(--text-dim);
    background: repeating-linear-gradient(135deg, var(--bg-2) 0 8px, oklch(0.22 0.015 165) 8px 16px);
}

.cat-pick .cp-id {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.cat-pick .cp-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-pick .cp-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-pick .cp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* karta nieaktywna (kot bez zdjęcia) */
.cat-pick.is-disabled {
    cursor: not-allowed;
    background: var(--surface);
    border-style: dashed;
}

.cat-pick.is-disabled:hover {
    border-color: var(--border);
    background: var(--surface);
}

.cat-pick.is-disabled .cp-name,
.cat-pick.is-disabled .cp-meta {
    opacity: 0.6;
}

.cat-pick .cp-addphoto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-hi);
    transition: color .15s;
}

.cat-pick .cp-addphoto:hover {
    color: var(--accent);
}

.cat-pick .cp-addphoto svg {
    width: 13px;
    height: 13px;
    transition: transform .15s;
}

.cat-pick .cp-addphoto:hover svg {
    transform: translateX(2px);
}

/* wariant statyczny (podgląd w Podsumowaniu — bez interakcji) */
.cat-pick.is-static {
    cursor: default;
}

.cat-pick.is-static:hover {
    border-color: var(--border);
    background: var(--bg-2);
}

/* ───────── Wynik (krok 4) ───────── */
.result-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.result-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}

.result-row .ri {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    border: 1px solid var(--accent-dim);
    background: var(--success-soft);
    color: var(--accent-hi);
}

.result-row.err .ri {
    border-color: var(--danger-dim);
    background: var(--danger-soft);
    color: var(--danger-hi);
}

.result-row .rmeta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.result-row .rname {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}

.result-row .rsub {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.45;
}

.result-row.err .rsub {
    color: oklch(0.74 0.10 25);
}

.result-row .rlink {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-hi);
    transition: color .15s, transform .08s;
}

.result-row .rlink svg {
    width: 14px;
    height: 14px;
    transition: transform .15s;
}

.result-row .rlink:hover {
    color: var(--accent);
}

.result-row .rlink:hover svg {
    transform: translateX(2px);
}

/* baner z akcją (re-use .note-block; dokładamy stopkę akcji) */
.note-block .nb-act {
    margin-top: 10px;
}

/* ───────── Warianty przycisków (w tej samej konwencji co .btn-primary/.btn-ghost) ───────── */
.btn-secondary {
    background: var(--surface-hi);
    color: var(--text);
    border-color: var(--border-hi);
}

.btn-secondary:hover {
    background: var(--surface);
    border-color: var(--accent-dim);
    color: var(--accent-hi);
}

.btn-warning {
    background: var(--warning);
    color: oklch(0.16 0.012 165);
    border-color: var(--warning-dim);
}

.btn-warning:hover {
    filter: brightness(1.06);
}

/* ───────── Responsive (kreator) ───────── */
@media (max-width: 920px) {
    .cat-pick-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 600px) {
    .wizard-bar {
        padding: 18px 14px 16px;
    }

    .wstep .wlabel {
        font-size: 11px;
    }

    .wstep .wnum {
        width: 34px;
        height: 34px;
        font-size: 12.5px;
    }

    .wstep::before {
        top: 17px;
    }

    .cat-pick-grid {
        grid-template-columns: 1fr;
    }
}

/* ───────── Strony statusowe (404 / 403 / 400 / 500) ─────────
   Jeden szablon „status-card", warianty tonu przez modyfikator złożony
   (.status-card.status-danger / .status-card.status-warning), żeby nie
   kolidować z istniejącym samodzielnym alertem .status-warning.
   Tokeny (--accent*, --danger*, --warning*) są już w :root. */

/* wyśrodkowanie karty w <main> (zamiast mockupowego .screen-stage) */
.status-stage {
    display: grid;
    place-items: center;
    padding: 72px var(--container-px);
    min-height: 60vh;
}

.status-card {
    /* domyślny ton — neutralny/akcentowy (mint) */
    --tone: var(--accent);
    --tone-hi: var(--accent-hi);
    --tone-dim: var(--accent-dim);
    --tone-soft: var(--accent-soft);

    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 42px 38px 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}

.status-card.status-danger {
    --tone: var(--danger);
    --tone-hi: var(--danger-hi);
    --tone-dim: var(--danger-dim);
    --tone-soft: var(--danger-soft);
}

.status-card.status-warning {
    --tone: var(--warning);
    --tone-hi: var(--warning-hi);
    --tone-dim: var(--warning-dim);
    --tone-soft: var(--warning-soft);
}

/* ikona w kółku */
.status-glyph {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: var(--tone-hi);
    background: var(--tone-soft);
    border: 1px solid var(--tone-dim);
    box-shadow: 0 0 0 6px color-mix(in oklch, var(--tone) 12%, transparent);
}

/* duży kod statusu — monospace */
.status-code {
    font-family: var(--font-mono);
    font-size: clamp(46px, 9vw, 60px);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--tone-hi);
    font-feature-settings: "tnum" 1;
}

.status-card h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.15;
    text-wrap: balance;
}

.status-desc {
    margin: 0;
    font-size: 15px;
    color: var(--text-mute);
    line-height: 1.6;
    max-width: 44ch;
    text-wrap: pretty;
}

/* opcjonalny blok szczegółów (np. 500) */
.status-detail {
    width: 100%;
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    padding: 4px 16px;
    text-align: left;
}

.status-detail .det-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
}

.status-detail .det-row:last-child {
    border-bottom: 0;
}

.status-detail .det-k {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
    white-space: nowrap;
}

.status-detail code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    margin-left: auto;
    text-align: right;
}

.status-detail .maillink {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--accent-hi);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .15s;
}

.status-detail .maillink:hover {
    color: var(--accent);
}

.status-detail .maillink svg {
    flex: 0 0 auto;
}

.status-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.status-actions .btn {
    white-space: nowrap;
}

.status-actions .btn svg {
    transition: transform .15s;
}

.status-actions .btn-primary:hover svg {
    transform: translateX(-2px);
}

/* wąsko / mobile */
@media (max-width: 480px) {
    .status-card {
        padding: 32px 22px 28px;
        gap: 16px;
    }

    .status-glyph {
        width: 66px;
        height: 66px;
        border-radius: 19px;
    }

    .status-stage {
        padding: 48px 16px;
        min-height: 56vh;
    }

    .status-detail .det-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .status-detail code {
        text-align: left;
    }
}

/* ───────── Address management (Addresses / AddressOnboarding) ─────────
   Builds on existing tokens and components (.panel, .badge, .action-row, .note-block,
   .btn*, .cat-form fields). Address rows are a lightweight card list, not .action-row,
   because each row hosts several inline actions and expandable edit/confirm regions. */
.addr-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}

.addr-card.is-default {
    border-color: var(--border-hi);
    background: var(--surface-hi);
}

.addr-card-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.addr-card-id {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.addr-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.addr-card-line {
    font-size: 13.5px;
    color: var(--text-mute);
}

.addr-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.addr-card-actions form {
    margin: 0;
}

.btn-sm {
    padding: 7px 12px;
    font-size: 13px;
    gap: 6px;
}

.btn-ghost.btn-sm.danger {
    color: var(--danger);
}

.btn-ghost.btn-sm.danger:hover {
    border-color: oklch(0.55 0.18 25);
    color: var(--danger);
}

.addr-card-confirm,
.addr-card-edit {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.confirm-acts {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.confirm-acts form {
    margin: 0;
}

/* Saved-address picker row in the announcement wizard (select + apply button). */
.addr-pick-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

.addr-pick-row .select-wrap {
    flex: 1;
    min-width: 200px;
}

.addr-pick-row .btn {
    flex: 0 0 auto;
}

/* ───────── Cat vaccinations (CatDetails) ─────────
   Reuses the address-card list shell (.addr-card / .addr-card-* / .confirm-acts / .btn-sm)
   for the vaccination rows; only the row meta (date + note) and the add-form wrapper are new. */
.addr-card.is-archived {
    opacity: 0.72;
}

.addr-card-line .vac-date {
    font-weight: 600;
    color: var(--text);
}

.addr-card-line .vac-note {
    display: block;
    margin-top: 2px;
    color: var(--text-mute);
}

.vac-add {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

/* ───────── Cat gallery (CatDetails) ─────────
   Responsive thumbnail grid; each tile hosts the photo, its display-order badge and a row of
   pure-SSR action forms (reorder up/down + delete). Built on the existing tokens and .btn-sm. */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.gallery-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}

.gt-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-hi);
}

.gt-photo a,
.gt-photo img {
    display: block;
    width: 100%;
    height: 100%;
}

.gt-photo img {
    object-fit: cover;
}

.gt-broken {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--text-dim);
}

.gt-order {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: oklch(0.12 0.01 165 / 0.74);
    backdrop-filter: blur(6px);
    border: 1px solid oklch(1 0 0 / 0.14);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
}

.gt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.gt-actions .gt-act-form {
    margin: 0;
}

.gt-confirm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.gt-confirm-text {
    font-size: 12.5px;
    color: var(--text-mute);
    line-height: 1.45;
}

/* Inline thumbnail delete form (CatDetails thumbnail panel). */
.thumb-delete-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

/* Takes the seat the delete form leaves empty on a published cat (#664). */
.thumb-delete-blocked {
    margin-top: 14px;
}

/* Wynik usuwania miniatury — poza formularzem, bo po udanym usunięciu rel znika razem ze zdjęciem. */
.thumb-delete-status {
    margin-top: 14px;
}

/* Ghost button danger variant (used without .btn-sm by the thumbnail delete action). */
.btn-ghost.danger {
    color: var(--danger);
}

.btn-ghost.danger:hover {
    border-color: oklch(0.55 0.18 25);
    color: var(--danger);
}

/* Soft onboarding CTA banner on the account page (logged-in, zero addresses). */
.cta-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-sm);
    background: var(--surface-hi);
}

.cta-banner .ico {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--bg-2);
    color: var(--accent);
}

.cta-banner .copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cta-banner .copy .t {
    font-weight: 700;
    color: var(--text);
}

.cta-banner .copy .s {
    font-size: 13.5px;
    color: var(--text-mute);
}

.cta-banner .btn {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .cta-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-banner .btn {
        width: 100%;
    }
}

/* ───────── Footer links ───────── */
.foot-links {
    margin-top: 10px !important;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.foot-links a {
    color: var(--text-dim);
    transition: color .15s;
}

.foot-links a:hover {
    color: var(--accent-hi);
}

.foot-build {
    margin-top: 10px !important;
    opacity: 0.7;
}

.foot-locale {
    margin-top: 8px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.foot-locale a {
    color: var(--text-dim);
    transition: color .15s;
}

.foot-locale a:hover {
    color: var(--accent-hi);
}

.foot-locale-active {
    color: var(--text);
}

/* ───────── Cookie consent bar ───────── */
/* Sticky, not fixed: the bar is the last element in the flow, so it pins itself to the bottom of
   the viewport while there is page left to scroll and then settles below the footer at the end of
   the document. A fixed bar reserves no space and lands on the footer links (#567); padding that
   compensates for it would have to guess a height the bar does not have once the copy wraps.
   Never give .app — or any ancestor — an overflow other than visible, overflow-x: hidden included:
   it un-pins the bar with no error and no layout shift, and because the bar still clears the footer
   the only symptom is that the consent button becomes unreachable without scrolling to the end of
   every page. The same declaration on body is harmless, since overflow propagates to the viewport. */
.cookie-bar {
    position: sticky;
    bottom: 0;
    z-index: 60;
    border-top: 1px solid var(--border-hi);
    background: oklch(0.20 0.015 165 / 0.94);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, 0.6);
}

.cookie-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-wrap: wrap;
}

.cookie-bar-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 420px;
}

.cookie-bar-ico {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--accent);
}

.cookie-bar-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-mute);
}

.cookie-bar-text a {
    color: var(--accent-hi);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-bar-text a:hover {
    color: var(--accent);
}

.cookie-bar-form {
    flex: 0 0 auto;
}

.cookie-bar-form .btn {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .cookie-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cookie-bar-form .btn {
        width: 100%;
    }
}

/* ───────── Legal document (privacy policy) ───────── */
.legal-doc .panel-body {
    padding: 22px 26px 28px;
}

.legal-lede {
    margin: 0 0 6px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text-mute);
}

.legal-sec {
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid var(--border);
    scroll-margin-top: calc(var(--nav_height) + 16px);
}

.legal-sec h2 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.legal-sec > p {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-mute);
}

.legal-prose p {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-mute);
}

.legal-prose p:last-child {
    margin-bottom: 0;
}

.legal-prose ul {
    margin: 4px 0 10px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.legal-prose li {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-mute);
}

.legal-prose strong {
    color: var(--text);
    font-weight: 600;
}

.legal-prose a {
    color: var(--accent-hi);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-prose a:hover {
    color: var(--accent);
}

.legal-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.legal-toc {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legal-toc a {
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-mute);
    transition: color .15s, background .15s;
}

.legal-toc a:hover {
    color: var(--text);
    background: var(--surface-hi);
}

/* ── Flash (one-shot toast after redirect-after-POST) ── */
.flash-toast {
    margin-top: 16px;
    text-align: left;
    padding: 14px 18px;
    max-height: 240px;
    overflow: hidden;
    /* CSS-only auto-dismiss (strict SSR, no JS): hold for 5s, then fade + collapse. */
    animation: flash-dismiss 0.45s ease-in 5s forwards;
}

/* Toast z akcją NIE znika sam: auto-dismiss kończy się na visibility: hidden i max-height: 0,
   więc po 5 s zabierałby ze sobą jedyne oferowane wyjście („Otwórz kosz"), zanim użytkownik
   zdąży w nie kliknąć. Klasę dokłada komponent FlashMessages, gdy wiadomość niesie link. */
.flash-toast.is-persistent {
    animation: none;
}

/* Jedno wyjście oferowane przez toast (np. „Otwórz kosz") — inline, obok treści. */
.flash-action {
    margin-left: 8px;
    font-weight: 600;
    text-decoration: underline;
    color: inherit;
}

.status-info {
    background: var(--surface-hi);
    border-color: var(--border-hi);
}

@keyframes flash-dismiss {
    to {
        opacity: 0;
        max-height: 0;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flash-toast {
        animation: none;
    }
}

/* ───────── Share media downloads (panel „Udostępnij ogłoszenie") ─────────
   Self-contained block: cover download → <details> per-item list → ZIP; markup is
   page-agnostic so the public share panel (#260) can reuse it without divergence. */
.share-media {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.share-media-group + .share-media-group {
    margin-top: 12px;
}

.share-media-group-name {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.share-media-items {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.share-media-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.share-media-thumb {
    display: block;
    width: 84px;
    height: 84px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}

/* Neutral tile for a video item — never an <img> (a video path would render broken). */
.share-media-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-mute);
}