:root {
    color-scheme: light;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    --surface: rgb(214, 214, 214);
    --surface-elevated: #ffffff;
    --border: #e4e7ec;
    --text: #111827;
    --muted: #6b7280;
    --primary: #11172b;
    --accent: #60a5fa;
    --warning: #f97316;
    --listing-card-width: 180px;
    --listing-card-gap: clamp(0.5rem, 0.45rem + 0.9vw, 1.35rem);
    --listing-card-padding: clamp(0.6rem, 0.5rem + 0.8vw, 1.35rem);
    --mobile-feed-rail-width: 48px;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--surface);
    color: var(--text);
    min-width: 380px;
}

@media (max-width: 420px) {
    html,
    body {
        min-width: 100%;
    }
}

body {
    --nav-accent-border: rgba(59, 130, 246, 0.6);
    --nav-accent-bg: rgba(198, 220, 255, 0.6);
    --user-accent: var(--accent);
    --page-offset-top: 110px;
    --page-offset-bottom: 110px;
    --catalog-bar-height: 0px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

body.has-wallpaper {
    background-image: var(--user-wallpaper);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
}

main.container {
    padding-top: var(--page-offset-top, 0);
    padding-bottom: var(--page-offset-bottom, 0);
}

body.catalog-page {
    overflow-x: hidden;
}

@media (min-width: 901px) {
    body.catalog-page main.container {
        padding-top: var(--page-offset-top, 0);
    }
    body.catalog-page .category-picker-bar {
        margin-top: 0;
    }
}

@media (min-width: 901px) {
    body.catalog-page:not(.favorites-page) main.container {
        padding-top: calc(var(--page-offset-top, 0) + var(--catalog-bar-height, 0));
    }
    body.catalog-page:not(.favorites-page) .category-picker-bar {
        position: fixed;
        top: var(--page-offset-top, 0);
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
        z-index: 180;
    }
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    z-index: 220;
    height: 80px;
    padding: 0 8px;
    box-sizing: border-box;
    border-bottom: 1px solid transparent;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 901px) {
    .site-header {
        height: 60px;
        padding: 2px 8px 6px;
        display: flex;
        align-items: center;
        background: rgba(198, 220, 255, 0.35);
        border-bottom-color: var(--nav-accent-border);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    }
    body[data-has-category-bar="true"] .site-header .nav-meta-actions {
        display: none;
    }
}

body[data-theme="dark"] {
    color-scheme: dark;
    --surface: #050816;
    --surface-elevated: #0f172a;
    --border: #1f2933;
    --text: #f8fafc;
    --muted: #94a3b8;
    --primary: #f8fafc;
    --nav-accent-border: rgba(148, 163, 184, 0.4);
    --nav-accent-bg: rgba(15, 23, 42, 0.85);
}

.season-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 160px;
    pointer-events: none;
    z-index: 5;
}

.season-hero__inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.season-slide {
    position: absolute;
    inset: 0;
    background-image: var(--season-image);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.9s ease, transform 6s ease;
}

.season-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.season-hero__overlay {
    position: absolute;
    inset: 45% 0 0 0;
    background: linear-gradient(180deg, rgba(247, 248, 251, 0) 0%, rgba(247, 248, 251, 0.75) 70%, rgba(247, 248, 251, 1) 100%);
    z-index: 2;
}

.nav-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.75rem 0;
    flex-wrap: wrap;
}

@media (min-width: 901px) {
    .nav-grid {
        padding: 0.25rem 0;
    }
    .nav-desktop-grid {
        height: 100%;
        display: flex;
        align-items: center;
    }
    .site-header .nav-desktop-grid.container {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding-left: clamp(0.75rem, 2vw, 1.75rem);
        padding-right: clamp(0.75rem, 2vw, 1.75rem);
    }
}

.nav-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-section--left {
    flex: 0 0 260px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.nav-section--center {
    flex: 1;
    align-items: center;
}

.nav-section--right {
    flex: 0 0 260px;
    align-items: flex-end;
    gap: 0.5rem;
    text-align: right;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-favorites-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    color: #be123c;
    border: 1px solid rgba(190, 18, 60, 0.35);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.15);
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    width: -moz-fit-content;
    width: fit-content;
}

.nav-favorites-link::before {
    content: "♥";
    font-size: 0.78rem;
}

.nav-favorites-link:hover {
    color: #9f1239;
    border-color: rgba(159, 18, 57, 0.55);
    transform: translateY(-1px);
}

.nav-meta-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.nav-meta-identity {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
    width: 100%;
    flex-wrap: wrap;
}

.nav-meta-block {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 0.75rem;
    text-align: right;
    min-width: 150px;
}

.nav-meta-block--user,
.nav-meta-block--role {
    min-width: auto;
}

.nav-meta-block--user .nav-meta-value {
    text-align: right;
}

.nav-meta-block--role {
    text-align: left;
}

.nav-meta-block--role .nav-meta-value {
    text-align: left;
}

.nav-meta-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: 0.25rem;
    align-items: center;
}

@media (max-width: 970px) {
    .nav-desktop-grid {
        display: none;
    }
    .nav-mobile-bar {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 970px) {
    .site-header {
        height: auto;
        padding: 0 0 8px;
        display: block;
        background: transparent;
        box-shadow: none;
        border-bottom-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav-mobile-bar {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        align-items: center;
        box-sizing: border-box;
    }
    .mobile-brand-row {
        border-radius: 0;
        box-sizing: border-box;
        max-width: 100%;
    }
}

.site-header {
    border-bottom-color: transparent;
}

.nav-meta-divider {
    width: 100%;
    height: 1px;
    background: rgba(148, 163, 184, 0.6);
    margin: 0.4rem 0 0.2rem;
}

.nav-meta-divider--bottom {
    margin-top: 0.5rem;
}

.nav-meta-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 0.6rem;
    font-size: 0.7rem;
    color: #475569;
}

.nav-meta-stat {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
}

.nav-meta-stat span {
    color: #64748b;
}

.nav-meta-stat strong {
    font-weight: 700;
}

.nav-meta-stat--published strong {
    color: #16a34a;
}

.nav-meta-stat--pending strong {
    color: #d97706;
}

.nav-meta-stat--blocked strong {
    color: #dc2626;
}

.nav-meta-stat--sold strong {
    color: #6b7280;
}

.nav-meta-stat--reserved strong {
    color: #2563eb;
}

.nav-meta-stat--discount strong {
    color: #f97316;
}

.nav-meta-close {
    align-self: flex-end;
}

.nav-watchdog-link {
    position: relative;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    overflow: visible;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.nav-watchdog-link:hover {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.nav-watchdog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #0f172a;
}

.watchdog-svg {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.nav-watchdog-link:hover .watchdog-svg {
    animation: watchdogLook 0.6s ease;
    color: #2563eb;
}

.watchdog-eye {
    transition: opacity 0.2s ease;
}

.nav-watchdog-link:hover .watchdog-eye {
    opacity: 0.9;
}

@keyframes watchdogLook {
    0% { transform: rotate(0) scale(1); }
    20% { transform: rotate(-8deg) scale(1.05); }
    50% { transform: rotate(6deg) scale(1.08); }
    80% { transform: rotate(-3deg) scale(1.03); }
    100% { transform: rotate(0) scale(1); }
}

.nav-watchdog-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    mix-blend-mode: multiply;
    transition: filter 0.2s ease;
}

.nav-watchdog-link:hover .nav-watchdog-icon img {
    box-shadow: none;
}

.nav-badge {
    position: absolute;
    top: -6px;
    right: -3px;
    min-width: 14px;
    height: 14px;
    padding: 0 2px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.nav-meta-panel--guest {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.nav-mobile-bar {
    display: none;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0 max(1rem, env(safe-area-inset-left, 1rem)) 0.5rem
        max(1rem, env(safe-area-inset-right, 1rem));
    background: transparent;
    z-index: 40;
    box-shadow: none;
    border-radius: 0;
    align-items: center;
}

@media (max-width: 970px) {
    .nav-mobile-bar {
        padding-left: 8px;
        padding-right: 8px;
    }
    .mobile-brand-row {
        border-radius: 0;
        width: 100%;
    }
}

.mobile-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.35));
    padding: 0.65rem 0.85rem;
    border-radius: 0 0 22px 22px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(15, 23, 42, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    width: 100%;
}

.mobile-brand-search {
    flex: 1;
    min-width: 0;
    display: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mobile-search-sticky .mobile-brand-search {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.mobile-search-sticky .nav-add-listing--mobile,
.mobile-search-sticky .mobile-brand-row .logo-text {
    display: none;
}

.mobile-brand-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.mobile-brand-row .logo-text {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.mobile-catalog-search {
    display: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    position: relative;
    z-index: 210;
}

@media (max-width: 970px) {
    .mobile-catalog-search {
        display: block;
        padding: 0 12px;
        margin-bottom: 0.6rem;
    }
    .mobile-catalog-search__row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .mobile-catalog-search__field {
        flex: 1;
        min-width: 0;
    }
    .mobile-catalog-search .nav-search {
        width: 100%;
    }
    .mobile-catalog-search .search-suggestions {
        z-index: 215;
    }
    .nav-search .search-suggestions {
        width: 80vw;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .mobile-bottom-popover--search {
        display: none !important;
    }
    .mobile-circle-button--search {
        display: none !important;
    }
}

.mobile-search-sticky .mobile-catalog-search {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.mobile-filter-pill {
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: #fff;
    color: #111827;
    border-radius: 999px;
    padding: 0 0.9rem;
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.mobile-category-pill {
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: #fff;
    color: #111827;
    border-radius: 999px;
    padding: 0 0.55rem;
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    max-width: 120px;
}

.mobile-filter-pill__chevron {
    font-size: 0.8rem;
    opacity: 0.7;
}

.mobile-search-sticky .mobile-filter-pill {
    display: none;
}

.mobile-search-sticky .mobile-category-pill-card {
    display: none;
}

.nav-mobile-bar .mobile-quick-actions {
    margin-top: 0.35rem;
    padding-bottom: 0.2rem;
}

.mobile-panel-placeholder {
    text-align: center;
    padding: 0.75rem 0.5rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.mobile-auth-panel__guest {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
    width: 100%;
}

.mobile-auth-panel__guest .btn {
    width: 100%;
}

.mobile-auth-register {
    align-self: stretch;
    text-align: center;
}

.mobile-auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mobile-auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    color: #0f172a;
}

.mobile-auth-field input {
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.85);
}

.mobile-auth-forgot {
    font-size: 0.78rem;
    color: #0f5cd7;
    text-align: right;
    text-decoration: none;
    margin-top: -0.2rem;
}

.mobile-auth-forgot:hover {
    text-decoration: underline;
}

.mobile-auth-panel .btn {
    box-sizing: border-box;
}


.nav-add-listing--mobile {
    flex: 0 1 auto;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
    text-align: center;
}

.mobile-quick-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.nav-pill--mobile {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.nav-pill--mobile::before {
    font-size: 1rem;
}

.nav-watchdog-link--mobile {
    width: 36px;
    min-width: 36px;
    height: 36px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
}

.nav-watchdog-link--mobile .nav-watchdog-icon {
    width: 32px;
    height: 32px;
}

.mobile-quick-button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-quick-button:hover,
.mobile-quick-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
    outline: none;
}

.mobile-quick-button--inverse {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    flex: 0 0 32px;
    min-width: 32px;
    min-height: 28px;
}
.mobile-quick-button--inverse span {
    color: inherit;
}
.mobile-quick-button--auth {
    font-size: 0.85rem;
}

body[data-is-authenticated="true"] .mobile-quick-button--auth {
    border: 1px solid rgba(34, 197, 94, 0.6);
    box-shadow: 0 18px 40px rgba(34, 197, 94, 0.2);
}

.mobile-quick-button--icon::before {
    content: attr(data-icon);
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.mobile-quick-button--watchdog .mobile-quick-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.mobile-quick-button--watchdog img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mobile-quick-button .nav-badge {
    top: -4px;
    right: -4px;
}

.mobile-bottom-shell {
    display: none;
    background: transparent;
    padding: 0 max(0.5rem, env(safe-area-inset-left, 0.5rem)) 0 max(0.5rem, env(safe-area-inset-right, 0.5rem));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    align-items: flex-end;
    justify-content: center;
    padding-right: max(0.85rem, env(safe-area-inset-right, 0.85rem));
}

.mobile-bottom-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1));
    border: none;
    border-radius: 26px;
    padding: 0;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mobile-bottom-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    padding: 0.35rem 12px;
    margin: 0 auto;
    box-sizing: border-box;
}

.mobile-bottom-shell .mobile-bottom-controls > .mobile-bottom-actions {
    order: 1;
}
.mobile-bottom-shell .mobile-bottom-controls > .mobile-category-card {
    order: 2;
}
.mobile-bottom-shell .mobile-bottom-controls > .mobile-circle-button--filters {
    order: 3;
}
.mobile-bottom-shell .mobile-bottom-controls > .mobile-circle-button--back {
    order: 4;
}

body:not(.mobile-search-sticky) .mobile-bottom-controls {
    justify-content: flex-end;
}

body:not(.mobile-search-sticky) .mobile-bottom-controls > .mobile-category-card,
body:not(.mobile-search-sticky) .mobile-bottom-controls > .mobile-circle-button--filters {
    display: none;
}

body:not(.mobile-search-sticky) .mobile-bottom-controls > .mobile-bottom-actions {
    order: 1;
    margin-left: 0;
}

body:not(.mobile-search-sticky) .mobile-bottom-controls > .mobile-circle-button--back {
    order: 2;
}

body.mobile-search-sticky .mobile-bottom-controls {
    justify-content: space-between;
}

body.mobile-search-sticky .mobile-bottom-controls > .mobile-category-card {
    order: 1;
}

body.mobile-search-sticky .mobile-bottom-controls > .mobile-circle-button--filters {
    order: 2;
}

body.mobile-search-sticky .mobile-bottom-controls > .mobile-bottom-actions {
    order: 3;
    margin-left: auto;
}

body.mobile-search-sticky .mobile-bottom-controls > .mobile-circle-button--back {
    order: 4;
}


.mobile-bottom-shell .mobile-bottom-actions .mobile-circle-button--favorite {
    order: 1;
}
.mobile-bottom-shell .mobile-bottom-actions .mobile-circle-button--messages {
    order: 2;
}
.mobile-bottom-shell .mobile-bottom-actions .mobile-circle-button--search {
    order: 3;
}
body[data-mobile-hand="left"] .mobile-bottom-controls > .mobile-circle-button--back {
    order: 1;
}
body[data-mobile-hand="left"] .mobile-bottom-controls > .mobile-circle-button--filters {
    order: 2;
}
body[data-mobile-hand="left"] .mobile-bottom-controls > .mobile-category-card {
    order: 3;
}
body[data-mobile-hand="left"] .mobile-bottom-controls > .mobile-bottom-actions {
    order: 4;
}
body[data-mobile-hand="left"] .mobile-bottom-actions .mobile-circle-button--search {
    order: 1;
}
body[data-mobile-hand="left"] .mobile-bottom-actions .mobile-circle-button--messages {
    order: 2;
}
body[data-mobile-hand="left"] .mobile-bottom-actions .mobile-circle-button--favorite {
    order: 3;
}

.mobile-bottom-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex: 0 0 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
}

.mobile-circle-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.97);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
    padding: 0;
}

.mobile-circle-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #0f172a;
}

.mobile-circle-button__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.9px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.mobile-circle-button__icon svg path {
    fill: none;
    stroke: currentColor;
}

.mobile-circle-button:focus-visible,
.mobile-circle-button:hover {
    transform: translateY(-2px);
    outline: none;
}

.mobile-circle-button--favorite {
    border-color: rgba(15, 23, 42, 0.2);
    text-decoration: none;
}

.mobile-fav-heart {
    color: #dc2626;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mobile-circle-button--favorite .mobile-circle-button__icon {
    animation: heartPulse 1.8s ease-in-out infinite;
}

.mobile-circle-button--filters .mobile-circle-button__icon svg {
    stroke-width: 2.4px;
}

.mobile-circle-button--filters[data-filters-active="true"] {
    border-color: rgba(248, 113, 113, 0.9);
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.35), 0 8px 24px rgba(185, 28, 28, 0.35);
    background: radial-gradient(circle at 30% 30%, rgba(248, 113, 113, 0.2), rgba(248, 113, 113, 0.1) 50%, rgba(248, 113, 113, 0.04)),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 246, 0.95));
    color: #991b1b;
}

.mobile-circle-button--filters[data-filters-active="true"] .mobile-circle-button__icon {
    color: #991b1b;
}

.mobile-circle-button--messages .mobile-circle-button__icon svg rect {
    fill: transparent;
    stroke: currentColor;
}

.mobile-bottom-popover {
    display: none;
    width: calc(100% - 1rem);
    background: transparent;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 32px;
    padding: 0.6rem;
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.18);
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(100% + 0.45rem);
    z-index: 140;
}

.mobile-bottom-popover.is-open {
    display: block;
}

.mobile-bottom-popover--filters {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 18px;
}

.mobile-filters-panel {
    max-height: min(70vh, 480px);
    overflow-y: auto;
    padding: 0.2rem 0.25rem 0.3rem;
}

.mobile-filters-host {
    width: 100%;
}

.mobile-filters-panel .filter-panel {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.mobile-filters-placeholder {
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
    margin: 0.25rem 0;
}

.mobile-circle-button .nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
}

.mobile-search-shell--footer .nav-search-inner {
    height: 44px;
}

.mobile-search-shell--footer .nav-search-button--icon {
    width: 46px;
    height: 46px;
}

.mobile-bottom-popover--search .search-suggestions {
    top: auto;
    bottom: calc(100% + 0.35rem);
    box-shadow: 0 -15px 40px rgba(15, 23, 42, 0.18);
}

.mobile-bottom-popover--search .mobile-search-shell {
    width: min(420px, calc(100% - 1.25rem));
    margin: 0 auto;
}

.mobile-bottom-popover--search .nav-search {
    width: 100%;
}

.mobile-bottom-popover--search .nav-search-inner {
    height: 38px;
    padding-left: 0.4rem;
}

.mobile-bottom-popover--search .nav-search input {
    font-size: 0.95rem;
    padding: 0 0.65rem;
}

.mobile-bottom-popover--search .nav-search-button--icon {
    width: 38px;
    height: 38px;
}

.mobile-category-card {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.mobile-category-card--inline {
    margin-top: 0;
    padding: 0.2rem;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    background: rgba(249, 251, 255, 0.95);
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.mobile-category-card--inline .mobile-category-field {
    border-radius: 14px;
    min-height: 32px;
    font-size: 0.8rem;
    padding: 0 0.65rem;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.mobile-category-field {
    flex: 1;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    background: #fff;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.95rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mobile-category-field [data-mobile-category-label] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-category-field:hover,
.mobile-category-field:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    outline: none;
}

@media (max-width: 360px) {
    .mobile-bottom-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .mobile-bottom-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
    }
}

.mobile-category-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 220;
    padding: 0.75rem 0.75rem 4.5rem;
    pointer-events: none;
}

.mobile-bottom-shell .mobile-category-card--inline {
    flex: 0 0 auto;
    max-width: 120px;
}

.mobile-bottom-shell .mobile-category-card--inline .mobile-category-field {
    width: 120px;
    min-width: 0;
    padding: 0 0.5rem;
    font-size: 0.78rem;
}

@media (max-width: 430px) {
    .mobile-bottom-shell .mobile-category-card--inline {
        max-width: 108px;
    }
    .mobile-bottom-shell .mobile-category-card--inline .mobile-category-field {
        width: 108px;
        padding: 0 0.45rem;
        font-size: 0.76rem;
    }
    .mobile-bottom-shell .mobile-circle-button {
        width: 34px;
        height: 34px;
    }
}

.mobile-category-overlay:not([hidden]) {
    display: flex;
    pointer-events: auto;
}

.mobile-category-overlay__panel {
    width: 100%;
    max-height: 68vh;
    background: #fff;
    border-radius: 18px 18px 16px 16px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
}

.mobile-category-overlay__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mobile-category-overlay__close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-category-overlay__body {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mobile-category-overlay__placeholder,
.mobile-category-overlay__error {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #6b7280;
    text-align: center;
}

.mobile-category-overlay__error {
    color: #dc2626;
}

.mobile-category-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 22, 0.55);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
}

.mobile-category-backdrop:not([hidden]) {
    display: block;
}

body.mobile-category-overlay-open {
    overflow: hidden;
}

.mobile-category-node {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-category-node.is-child {
    margin-left: 0.95rem;
    padding-left: 0.75rem;
    border-left: 2px dashed rgba(15, 23, 42, 0.3);
}

.mobile-category-featured {
    background: #e2e8f0;
    border-radius: 16px;
    padding: 0.35rem 0.35rem 5px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mobile-category-note {
    margin: 0;
    padding: 0 0.75rem;
    font-size: 0.78rem;
    color: #64748b;
}

.mobile-category-note a {
    color: inherit;
    text-decoration: underline;
}

.mobile-category-option {
    border: none;
    border-radius: 14px;
    padding: 0.25rem 0.75rem;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.mobile-category-option.has-children::after {
    content: "▾";
    font-size: 0.85rem;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
}

.mobile-category-option.is-current {
    box-shadow: none;
    background: #ffffff;
}

.mobile-category-node.is-expanded > .mobile-category-option.has-children::after {
    transform: rotate(180deg);
    color: #2563eb;
}

.mobile-category-option--all {
    background: #ffffff;
    border-color: transparent;
    font-size: 0.92rem;
}

.mobile-category-option:hover,
.mobile-category-option:focus-visible {
    box-shadow: none;
    background: #f1f5f9;
    outline: none;
}

.mobile-category-node {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.35rem;
    margin-bottom: 0.35rem;
}

.mobile-category-node:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.mobile-category-option.is-preferred:not(.has-favorite)::after {
    content: "★";
    color: #fbbf24;
    font-size: 0.85rem;
    margin-left: auto;
}

.mobile-category-option__label {
    flex: 1;
    text-align: left;
}

.mobile-category-option__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.mobile-category-option__count {
    font-size: 0.8rem;
    color: #6b7280;
}

.mobile-category-favorite {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.mobile-category-favorite.is-active {
    color: #f59e0b;
}

.mobile-category-children {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.35rem 0 0.35rem 0.75rem;
    margin-top: 0.35rem;
}

.mobile-category-node.is-expanded > .mobile-category-children {
    display: flex;
    max-height: 320px;
    overflow: auto;
    padding-bottom: 0.2rem;
}

.logo--compact {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mobile-header-toggle,
.mobile-search-expand {
    border: none;
    background: #0f172a;
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.25);
}

.mobile-search-shell {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.mobile-search-shell .nav-search {
    width: 100%;
    margin: 0;
}

.mobile-search-shell .nav-search-inner {
    border-radius: 999px;
    height: 40px;
    padding-left: 0.5rem;
}

.mobile-search-shell .nav-search input {
    padding: 0 0.75rem;
}

.mobile-search-shell .nav-search-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: #0f172a;
    color: #fff;
    padding: 0;
    margin: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.25);
}

.mobile-search-shell .nav-search-button--icon span[aria-hidden="true"] {
    font-size: 1rem;
    line-height: 1;
}

.nav-search-button--icon .search-icon {
    width: 18px;
    height: 18px;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.nav-mobile-panel {
    display: none;
    position: relative;
    z-index: 60;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-mobile-panel__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nav-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 100;
    pointer-events: none;
}

.nav-mobile-overlay.is-visible {
    display: block;
    pointer-events: none;
}

.nav-auth-actions {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.nav-auth-button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.78rem;
    border: 1px solid transparent;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.nav-auth-actions .nav-auth-button {
    width: auto;
    justify-content: center;
    box-sizing: border-box;
}

@media (min-width: 901px) {
    body {
        --page-offset-top: 60px;
    }
}

.nav-auth-actions .nav-auth-button.cta-pill {
    padding: 0.3rem 0.7rem;
}

.nav-auth-button--ghost {
    border-color: rgba(17, 23, 43, 0.4);
    color: #111827;
    background: rgba(255, 255, 255, 0.8);
}

.nav-auth-button--ghost:hover,
.nav-auth-button--ghost:focus-visible {
    border-color: #111827;
    transform: translateY(-1px);
}

.nav-auth-button--primary {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

.nav-auth-button--primary:hover,
.nav-auth-button--primary:focus-visible {
    background: #0f172a;
    border-color: #0f172a;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .nav-auth-actions {
        flex-direction: row;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        justify-content: center;
        flex-wrap: wrap;
    }
}

.nav-meta-separator {
    width: 1px;
    height: 24px;
    background: rgba(15, 23, 42, 0.2);
    display: inline-block;
}

.nav-meta-label {
    text-transform: lowercase;
    color: #6b7280;
    font-weight: 500;
}

.nav-meta-value {
    font-weight: 600;
    color: #111827;
    font-size: 0.92rem;
}

/* Legacy logout icon — kept for mobile panel */
.logout-icon {
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1rem;
}
.logout-icon:hover {
    background: rgba(17, 23, 43, 0.08);
}

/* Nav identity trigger — whole area clickable */
.nav-identity-trigger {
    display: flex; align-items: center; gap: 0.35rem;
    border: 0; padding: 4px 8px;
    border-radius: 10px; cursor: pointer;
    background: transparent;
    color: inherit; font: inherit;
    transition: background 0.12s;
}
.nav-identity-trigger:hover {
    background: rgba(15,23,42,0.06);
}
.nav-avatar-circle {
    width: 34px; height: 34px;
    border-radius: 50%; overflow: hidden;
    flex-shrink: 0;
}
.nav-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}
.nav-avatar-placeholder {
    width: 100%; height: 100%;
    border-radius: 50%;
}

/* Nav user popup */
.nav-meta-identity { position: relative; }
.nav-user-popup {
    position: absolute; top: calc(100% + 6px); right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(15,23,42,0.12);
    min-width: 260px;
    padding: 0;
    animation: navPopupIn 0.12s ease;
}
@keyframes navPopupIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.nav-user-popup__head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.nav-user-popup__avatar {
    width: 40px; height: 40px;
    border-radius: 50%; object-fit: cover;
    flex-shrink: 0;
}
.nav-user-popup__avatar--placeholder {
    width: 40px; height: 40px;
}
.nav-user-popup__info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
    font-size: 0.78rem; line-height: 1.3;
}
.nav-user-popup__info strong {
    font-size: 0.85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-user-popup__logout {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #94a3b8; text-decoration: none;
    transition: color 0.12s, background 0.12s;
}
.nav-user-popup__logout:hover {
    color: #dc2626;
    background: rgba(220,38,38,0.06);
}
.nav-user-popup__links {
    display: flex; flex-direction: column;
    padding: 6px 0;
}
.nav-user-popup__links a {
    display: block; padding: 7px 14px;
    font-size: 0.8rem; color: inherit;
    text-decoration: none;
    transition: background 0.1s;
}
.nav-user-popup__links a:hover {
    background: #f1f5f9;
}

.nav-search-cta {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
}

.nav-search {
    position: relative;
    width: min(360px, 100%);
    margin: 0 auto;
}

.nav-search-inner {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 16px;
    height: 32px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nav-search-inner:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(17, 23, 43, 0.08);
}

.nav-search input[type="search"]::-webkit-search-cancel-button,
.nav-search input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

.nav-search-clear {
    border: none;
    background: transparent;
    color: #1f2937;
    font-size: 1rem;
    line-height: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.nav-search-clear[hidden] {
    display: none !important;
}

.nav-search-clear:hover,
.nav-search-clear:focus-visible {
    background: rgba(15, 23, 42, 0.08);
    outline: none;
}

.nav-add-listing {
    padding: 0 0.85rem;
    height: 32px;
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    border-radius: 12px;
    white-space: nowrap;
    background: #7c3aed !important;
    border: none !important;
    position: relative;
    overflow: hidden;
    z-index: 0;
    box-shadow: 0 2px 14px rgba(124, 58, 237, 0.25);
    transition: box-shadow 0.3s ease, transform 0.15s ease;
}

.nav-add-listing::before {
    content: "";
    position: absolute;
    inset: -80%;
    z-index: -1;
    filter: blur(16px);
    background:
        radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(6, 182, 212, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 50% 30%, rgba(236, 72, 153, 0.85) 0%, transparent 50%),
        radial-gradient(circle at 60% 80%, rgba(234, 179, 8, 0.7) 0%, transparent 50%);
    animation: auroraDrift 8s ease-in-out infinite;
}

.nav-add-listing::after {
    content: "";
    position: absolute;
    inset: -80%;
    z-index: -1;
    filter: blur(18px);
    background:
        radial-gradient(circle at 60% 70%, rgba(59, 130, 246, 0.85) 0%, transparent 50%),
        radial-gradient(circle at 30% 60%, rgba(217, 70, 239, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(20, 184, 166, 0.75) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(251, 191, 36, 0.65) 0%, transparent 50%);
    animation: auroraDrift2 10s ease-in-out infinite;
}

.nav-add-listing:hover {
    box-shadow: 0 4px 24px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}

@keyframes auroraDrift {
    0%   { transform: translate(-20%, -15%) rotate(0deg) scale(1); }
    25%  { transform: translate(15%, 10%) rotate(90deg) scale(1.1); }
    50%  { transform: translate(-10%, 20%) rotate(180deg) scale(0.95); }
    75%  { transform: translate(20%, -10%) rotate(270deg) scale(1.05); }
    100% { transform: translate(-20%, -15%) rotate(360deg) scale(1); }
}

@keyframes auroraDrift2 {
    0%   { transform: translate(15%, 10%) rotate(0deg) scale(1.05); }
    25%  { transform: translate(-20%, 15%) rotate(-90deg) scale(0.9); }
    50%  { transform: translate(10%, -20%) rotate(-180deg) scale(1.1); }
    75%  { transform: translate(-15%, -5%) rotate(-270deg) scale(1); }
    100% { transform: translate(15%, 10%) rotate(-360deg) scale(1.05); }
    align-self: center;
    line-height: 1;
}

.nav-search input {
    flex: 1;
    width: 100%;
    border: none;
    border-radius: 16px;
    height: 100%;
    padding: 0 0.75rem;
    font-size: 0.95rem;
    outline: none;
    background: transparent;
}

.nav-search input:focus {
    box-shadow: none;
}

.nav-search-button {
    border: none;
    height: 26px;
    padding: 0 0.9rem;
    border-radius: 16px;
    background: #d1d5db;
    color: #111827;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-right: 3px;
    transition: background 0.2s ease;
}

.nav-search-button:hover {
    background: #c4c8cf;
}

.nav-center-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.nav-pill--dropdown {
    position: relative;
}

.nav-pill__toggle {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
}

.nav-pill__toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 4px;
}

.nav-pill__menu {
    position: absolute;
    top: calc(100% - 0.15rem);
    left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    padding: 0.35rem 0;
    list-style: none;
    margin: 0;
    min-width: 210px;
    display: none;
    z-index: 25;
}

.nav-pill--dropdown:hover .nav-pill__menu,
.nav-pill--dropdown:focus-within .nav-pill__menu {
    display: block;
}

.nav-pill__menu li a {
    display: block;
    padding: 0.45rem 1rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 0.85rem;
}

.nav-pill__menu li a:hover,
.nav-pill__menu li a:focus-visible {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    outline: none;
}

.nav-market-menu {
    position: relative;
}

.nav-market-toggle {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
}

.nav-market-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 4px;
}

.nav-market-menu__list {
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    padding: 0.35rem 0;
    list-style: none;
    margin: 0;
    min-width: 210px;
    display: none;
    z-index: 20;
}

.nav-market-menu.open .nav-market-menu__list {
    display: block;
}

.nav-market-menu__list li a {
    display: block;
    padding: 0.45rem 1rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 0.85rem;
}

.nav-market-menu__list li a:hover,
.nav-market-menu__list li a:focus-visible {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    outline: none;
}

.nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.nav-pill::before {
    content: attr(data-icon);
    font-size: 0.9rem;
}

.nav-pill--ghost {
    border-color: #0f3a2f;
    color: #0f3a2f;
}

.nav-pill--favorites {
    border-color: transparent;
    background: transparent;
    color: #be123c;
    overflow: visible;
}

.nav-pill--favorites::before {
    color: #be123c;
    display: inline-flex;
    animation: navHeartPulse 1.5s ease-in-out infinite;
    font-size: 1.5rem;
    line-height: 1;
}

@keyframes navHeartPulse {
    0% { transform: scale(1.45); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.8; }
    100% { transform: scale(1.45); opacity: 1; }
}

.nav-pill--favorites:hover,
.nav-pill--favorites:focus-visible {
    border-color: rgba(190, 18, 60, 0.35);
    background: rgba(255, 255, 255, 0.95);
}

.nav-pill--messages {
    border-color: transparent;
    color: #0f172a;
    background: transparent;
}

.nav-pill--messages.has-notifications {
    border-color: #dc2626;
    color: #dc2626;
}

.nav-meta-actions {
    position: relative;
}

.nav-meta-actions .nav-pill--icon {
    border-color: transparent;
    background: transparent;
    color: #0f172a;
    padding: 0;
    width: 38px;
    min-width: 38px;
    height: 38px;
    justify-content: center;
    gap: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.nav-meta-actions .nav-pill--icon:hover,
.nav-meta-actions .nav-pill--icon:focus-visible {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    outline: none;
}

.nav-pill--notifications {
    position: relative;
    cursor: pointer;
    z-index: 6;
}

.nav-pill--notifications::before {
    content: "";
}

.nav-pill--notifications .nav-pill__icon {
    color: #0f172a;
}

.nav-pill__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.nav-pill__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: 0;
}

.nav-pill--messages::before,
.nav-pill--menu::before {
    content: "";
}

.nav-pill--notifications:hover .nav-pill__icon,
.nav-pill--notifications:focus-visible .nav-pill__icon {
    color: #2563eb;
}

.nav-pill--notifications:hover .nav-pill__icon svg,
.nav-pill--notifications:focus-visible .nav-pill__icon svg {
    animation: bellRing 0.6s ease;
    transform-origin: 50% 2px;
}

@keyframes bellRing {
    0% { transform: rotate(0); }
    15% { transform: rotate(12deg); }
    30% { transform: rotate(-10deg); }
    45% { transform: rotate(8deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}

.nav-pill__icon--mail svg {
    width: 24px;
    height: 24px;
}

.nav-pill--messages:hover .nav-pill__icon--mail,
.nav-pill--messages:focus-visible .nav-pill__icon--mail {
    color: #2563eb;
    animation: mailHover 0.5s ease;
}

@keyframes mailHover {
    0% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-2px) rotate(-4deg); }
    50% { transform: translateY(-1px) rotate(3deg); }
    75% { transform: translateY(-2px) rotate(-2deg); }
    100% { transform: translateY(0) rotate(0); }
}

.nav-pill--messages.has-notifications .nav-pill__icon--mail svg {
    animation: mailPulse 1.4s ease-in-out infinite;
    transform-origin: 50% 50%;
}

@keyframes mailPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.06) rotate(-2deg); }
    60% { transform: scale(0.98) rotate(2deg); }
    100% { transform: scale(1); }
}

.nav-pill__icon--menu {
    display: grid;
    gap: 3.5px;
}

.nav-pill__icon--menu .menu-line {
    width: 18px;
    height: 1.8px;
    background: currentColor;
    border-radius: 999px;
    opacity: 0.7;
    transition: opacity 0.15s ease, width 0.15s ease;
}

.nav-pill__icon--menu .menu-line:nth-child(2) {
    width: 13px;
}

.nav-pill--menu:hover .menu-line,
.nav-pill--menu:focus-visible .menu-line,
.nav-actions-menu:hover .menu-line {
    opacity: 1;
    width: 18px;
}

.nav-pill--menu.is-active .menu-line,
.nav-pill--menu.has-notifications .menu-line {
    animation: menuPulse 1.6s ease-in-out infinite;
}

.nav-pill--menu .menu-line:nth-child(1) {
    animation-delay: 0s;
}

.nav-pill--menu .menu-line:nth-child(2) {
    animation-delay: 0.15s;
}

.nav-pill--menu .menu-line:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes menuPulse {
    0% { transform: scaleX(1); opacity: 0.6; }
    40% { transform: scaleX(1.2); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0.6; }
}
.nav-pill--notifications.has-notifications .nav-pill__icon {
    color: #dc2626;
}

.nav-pill--notifications.has-notifications .nav-pill__icon svg {
    animation: bellWiggle 1.6s ease-in-out infinite;
    transform-origin: 50% 0%;
}

@keyframes bellWiggle {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(8deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(6deg); }
    40% { transform: rotate(-6deg); }
    50% { transform: rotate(3deg); }
    60% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

:root {
    --nav-notifications-panel-width: 260px;
    --nav-notifications-panel-gap: 0px;
}

.nav-notifications-panel {
    position: fixed;
    top: calc(var(--site-header-height, 72px) + var(--catalog-bar-height, 0px));
    right: 0;
    max-height: calc(100vh - (var(--site-header-height, 72px) + var(--catalog-bar-height, 0px)) - 48px);
    width: var(--nav-notifications-panel-width);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.7));
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0;
    box-shadow: -12px 0 30px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    padding: 18px 16px 12px;
    z-index: 300;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
}

body.notifications-panel-open .nav-notifications-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.nav-meta-panel,
.nav-meta-actions {
    overflow: visible;
}

.nav-section--right {
    overflow: visible;
}

.nav-notifications-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.95rem;
    padding: 0 2px 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.nav-notifications-panel__head strong {
    font-size: 0.88rem;
}

.nav-notifications-panel__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-notifications-panel__clear {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.76);
    color: #475569;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}

.nav-notifications-panel__clear:hover,
.nav-notifications-panel__clear:focus-visible {
    color: #0f172a;
    border-color: rgba(59, 130, 246, 0.35);
    outline: none;
}

.nav-notifications-panel__close {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.nav-notifications-panel__close:hover,
.nav-notifications-panel__close:focus-visible {
    color: #111827;
    outline: none;
}

.nav-notifications-panel__list {
    display: grid;
    gap: 10px;
    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 0;
    padding-left: 24px;
    padding-right: 2px;
    padding-bottom: 0;
    scroll-padding-bottom: 0;
    position: relative;
}

.nav-notifications-panel__list::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 6px;
    bottom: -22px;
    width: 2px;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.2), rgba(148, 163, 184, 0.5), rgba(148, 163, 184, 0.2));
    border-radius: 999px;
}

.nav-notification-item {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.58);
    color: inherit;
    text-decoration: none;
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.nav-notification-item__main {
    display: block;
    color: inherit;
    text-decoration: none;
}

.nav-notification-item__main:hover,
.nav-notification-item__main:focus-visible {
    outline: none;
}

.nav-notification-item__delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 0;
    background: rgba(15, 23, 42, 0.08);
    color: #64748b;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-notification-item__delete:hover,
.nav-notification-item__delete:focus-visible {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    outline: none;
}

.nav-notification-item.tone-info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
}

.nav-notification-item.tone-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
}

.nav-notification-item.tone-warning {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.3);
}

.nav-notification-item.tone-danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}

.nav-notification-item::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2e8f0;
    border: 2px solid #94a3b8;
}

.nav-notification-item:hover,
.nav-notification-item:focus-visible {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(59, 130, 246, 0.24);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
    outline: none;
}

.nav-notification-item__title {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.88rem;
}

.nav-notification-item__message {
    font-size: 0.78rem;
    color: #4b5563;
}

.nav-notification-item__meta {
    margin-top: 6px;
    font-size: 0.68rem;
    color: #6b7280;
    letter-spacing: 0.02em;
}

.nav-notifications-panel__empty {
    margin-top: 6px;
}

.nav-notifications-panel__loader {
    text-align: center;
    margin: 2px 0 10px;
}

.nav-notifications-panel__footer {
    text-align: center;
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
}

.nav-notifications-panel__all {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.nav-notifications-panel__all:hover {
    text-decoration: underline;
}

.nav-notifications-panel__settings-toggle {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    transition: color 0.12s;
}

.nav-notifications-panel__settings-toggle:hover,
.nav-notifications-panel__settings-toggle.is-active {
    color: #2563eb;
}

.nav-notifications-panel__list {
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.25) transparent;
}

.nav-notifications-panel__list::-webkit-scrollbar {
    width: 4px;
}

.nav-notifications-panel__list::-webkit-scrollbar-track {
    background: transparent;
}

.nav-notifications-panel__list::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.3);
    border-radius: 4px;
}

.nav-notifications-panel__list::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,0.5);
}

.nav-notifications-panel__settings {
    border-top: 1px solid var(--border);
    padding: 0.5rem 0 0.35rem;
    margin-top: 0.35rem;
}

.nav-notif-settings__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.nav-notif-settings__title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nav-notif-settings__close {
    background: none;
    border: none;
    font-size: 1rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 2px;
}

.nav-notif-settings__close:hover {
    color: #0f172a;
}

.nav-notif-settings__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    margin-bottom: 0.4rem;
}

.nav-notif-settings__table th {
    font-weight: 600;
    color: #64748b;
    text-align: center;
    padding: 0.15rem 0.25rem;
    font-size: 0.65rem;
    text-transform: uppercase;
}

.nav-notif-settings__table th:first-child {
    text-align: left;
}

.nav-notif-settings__table td {
    padding: 0.2rem 0.25rem;
    color: #334155;
}

.nav-notif-settings__table td:not(:first-child) {
    text-align: center;
}

.nav-notif-settings__table input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #2563eb;
}

/* ── notification prefs table (settings page) ── */
.notif-prefs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.notif-prefs-table thead th {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem 0.4rem;
}

.notif-prefs-table__ch {
    text-align: center;
    width: 4rem;
}

.notif-prefs-table tbody td {
    padding: 0.35rem 0.5rem;
    border-top: 1px solid #f1f5f9;
    vertical-align: middle;
}

.notif-prefs-table tbody td:first-child {
    padding-left: 0;
}

.notif-prefs-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}

.d-block { display: block; }

/* ── account action confirm ── */
.account-action-confirm {
    margin-top: 0.5rem;
    padding: 0.65rem;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    background: #fef2f2;
}

.account-action-confirm__password {
    margin: 0.4rem 0;
}

.account-action-confirm__password input {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.82rem;
}

.account-action-confirm__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* ── Favorites panel ── */
.nav-favorites-panel {
    position: fixed;
    top: calc(var(--site-header-height, 72px) + var(--catalog-bar-height, 0px));
    left: 0;
    height: calc(100vh - (var(--site-header-height, 72px) + var(--catalog-bar-height, 0px)));
    width: min(300px, 85vw);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.74));
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 12px 0 30px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    padding: 12px 12px 14px;
    z-index: 300;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.nav-favorites-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.nav-favorites-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 0 2px 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    flex: 0 0 auto;
}

.nav-favorites-panel__head strong {
    font-size: 0.88rem;
}

.nav-favorites-panel__close {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.nav-favorites-panel__close:hover {
    color: #111827;
}

.nav-favorites-panel__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

.nav-favorites-section {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.nav-favorites-section + .nav-favorites-section {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding-top: 8px;
}

.nav-favorites-section__title {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 4px;
    padding: 0 4px;
}

.nav-favorites-section__list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.3) transparent;
}
.nav-favorites-section__list::-webkit-scrollbar { width: 4px; }
.nav-favorites-section__list::-webkit-scrollbar-track { background: transparent; }
.nav-favorites-section__list::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.3); border-radius: 4px;
}
.nav-favorites-section__list::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,0.5);
}

.nav-favorites-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid transparent;
    color: inherit;
    text-decoration: none;
    font-size: 0.78rem;
    line-height: 1.2;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.nav-favorites-item:hover {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.12);
    text-decoration: none;
}

.nav-favorites-item__icon {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: #f59e0b;
}

.nav-favorites-item__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-favorites-item__remove {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 0;
    border: 0;
    background: none;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-favorites-item__remove:hover {
    color: #dc2626;
}

.nav-favorites-panel__empty {
    margin-top: 6px;
    padding: 0 4px;
}

/* ── Category bar favorites star ── */
.category-bar-favorites-star {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    line-height: 1;
}

.category-bar-favorites-star svg {
    display: block;
}

.category-bar-favorites-star:hover {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.category-bar-favorites-star:hover svg,
.category-bar-favorites-star.is-panel-open svg {
    fill: currentColor;
}

.category-bar-favorites-star.is-panel-open {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

/* Star with active favorites — yellow outline */
.category-bar-favorites-star.has-favorites {
    color: #f59e0b;
}
.category-bar-favorites-star.has-favorites:hover svg,
.category-bar-favorites-star.has-favorites.is-panel-open svg {
    fill: currentColor;
}

/* Badge counter */
.category-bar-favorites-star {
    position: relative;
}
.category-bar-favorites-star__badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.category-picker-heading {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ── Vendor favorite star ── */
.vendor-favorite-star {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #cbd5e1;
    padding: 0;
    margin-left: 4px;
    vertical-align: middle;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.vendor-favorite-star:hover {
    color: #f59e0b;
}

.vendor-favorite-star.is-active {
    color: #f59e0b;
}

.vendor-favorite-star.is-active svg {
    fill: currentColor;
}

.nav-pill--icon {
    position: relative;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    gap: 0;
    justify-content: center;
}

.nav-pill--icon::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-size: 1.15rem;
    line-height: 1;
}

.nav-pill:hover,
.nav-pill:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.18);
    outline: none;
}

.nav-pill.is-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    color: #1e3a8a;
}

.nav-actions-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-pill--menu {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 50%;
    border: 1.5px solid rgba(15, 23, 42, 0.12);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-pill--menu:hover,
.nav-actions-menu:hover .nav-pill--menu,
.nav-actions-menu:focus-within .nav-pill--menu {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.2);
}

.nav-actions-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 0.4rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    display: none;
    flex-direction: column;
    gap: 0;
    min-width: 190px;
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-actions-menu__panel::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-menu-link {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    color: #334155;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}

.nav-menu-link:hover,
.nav-menu-link:focus-visible {
    background: #eef2ff;
    color: #1e40af;
}

.nav-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    flex-shrink: 0;
    color: #94a3b8;
    transition: color 0.15s ease;
}
.nav-menu-icon svg {
    width: 100%;
    height: 100%;
}
.nav-menu-link:hover .nav-menu-icon {
    color: #3b82f6;
}

.nav-actions-menu:hover .nav-actions-menu__panel,
.nav-actions-menu:focus-within .nav-actions-menu__panel {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-actions-menu__panel.is-open {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-actions-menu__divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.35), rgba(148, 163, 184, 0.08));
}

@keyframes heartPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.12);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
    z-index: 220;
    padding: 0.35rem;
    display: grid;
    gap: 0.25rem;
}

.search-suggestions-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 200;
}

.nav-search {
    position: relative;
    z-index: 240;
}

.search-suggestions {
    z-index: 240;
}

.search-suggestions[hidden] {
    display: none;
}

.search-suggestions button {
    border: none;
    background: transparent;
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.search-history-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1f2937;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    white-space: nowrap;
}

.search-suggestions button:hover,
.search-suggestions button:focus,
.search-suggestions button:focus-visible,
.search-suggestions button:active {
    background: #e5e7eb;
}

.search-separator {
    padding: 0.35rem 1rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
}

.search-result--user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-result__user-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #6b7280;
}

.catalog-search-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #0f3a2f;
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    font-size: 0.85rem;
    color: #0f3a2f;
    background: rgba(15, 58, 47, 0.08);
    white-space: nowrap;
}

.catalog-search-pill button {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.catalog-search-pill[hidden] {
    display: none;
}

.search-page {
    margin: 2rem 0;
    display: grid;
    gap: 1.5rem;
}

.search-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-head h1 {
    margin: 0.2rem 0;
}

.search-head__form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.4rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}

.search-head__form input {
    border: none;
    padding: 0.35rem 0.75rem;
    outline: none;
    font-size: 0.95rem;
}

.search-head__form button {
    border: none;
    background: #10372c;
    color: #fff;
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-head__form button:hover {
    background: #0d2b22;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.search-empty {
    border: 1px dashed var(--border);
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
}

.search-empty p {
    margin: 0.25rem 0;
}

.nav-grid nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-links-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nav-grid nav a {
    color: var(--muted);
    text-decoration: none;
}

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

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: #0f372d;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.logo img {
    height: 44px;
    display: block;
}

.logo-text {
    font-size: 1.1rem;
}

.chip {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.chip.small {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
}
.chip.ghost {
    background: transparent;
    color: var(--text);
    text-decoration: none;
}

.nav-meta-actions .chip {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.15);
    box-shadow: 0 0 0 rgba(15, 23, 42, 0);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nav-meta-actions .chip:hover,
.nav-meta-actions .chip:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
    outline: none;
}

.nav-meta-actions .chip.is-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.remove-discount-chip {
    border-color: rgba(220, 38, 38, 0.45);
    color: #dc2626;
}

.remove-discount-chip:hover,
.remove-discount-chip:focus-visible {
    background: rgba(254, 226, 226, 0.5);
    color: #b91c1c;
    outline: none;
}

.nav-user {
    font-size: 0.9rem;
    color: var(--text);
}

.hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 3rem 0 2rem;
}

.hero.hero-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
    padding-top: 0;
}

.hero-text h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    margin-bottom: 1rem;
}

.lead {
    color: var(--muted);
    max-width: 520px;
}

.hero-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.landing-slider {
    position: relative;
    width: 100%;
    margin: 0 auto 1.5rem;
    padding: 1rem clamp(1rem, 4vw, 3rem);
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
}
.landing-slider::before,
.landing-slider::after {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    width: clamp(2rem, 8vw, 5rem);
    pointer-events: none;
    z-index: 2;
}
.landing-slider::before {
    left: calc(clamp(1rem, 4vw, 3rem) - 0.5rem);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.landing-slider::after {
    right: calc(clamp(1rem, 4vw, 3rem) - 0.5rem);
    background: linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.landing-slider__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.landing-slider__header .eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.22em;
}

.landing-slider__viewport {
    overflow: hidden;
    width: 100%;
    padding-bottom: 0.75rem;
    min-height: calc(var(--listing-card-width) * 1.1);
    background: transparent;
    box-sizing: border-box;
}

.landing-slider__track {
    display: flex;
    gap: 1rem;
    transition: transform 0.6s ease;
    will-change: transform;
    align-items: center;
}

.landing-slider__card {
    flex: 0 0 calc(var(--listing-card-width) * 0.68);
    max-width: calc(var(--listing-card-width) * 0.68);
    border-radius: 0;
    background: #d9dde5;
    border: 1px solid transparent;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.landing-slider__card:hover {
    border-color: #111827;
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.25);
}
.landing-slider__card:hover .landing-slider__link {
    text-decoration: none;
}

.landing-slider__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.landing-slider__image {
    width: 100%;
    height: 88px;
    overflow: hidden;
    background: #e2e8f0;
}

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

.landing-slider__body {
    padding: 0.4rem 0.6rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 90px;
}

.landing-slider__body h3 {
    font-size: 0.68rem;
    margin: 0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.landing-slider__body strong {
    font-size: 0.75rem;
    color: var(--muted);
}

.landing-slider__body p {
    margin: 0;
    font-size: 0.62rem;
    color: var(--muted);
}

.landing-slider__price {
    margin-top: auto;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #047857, #22c55e);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    min-height: 20px;
}

.btn {
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 0 0 rgba(37, 99, 235, 0);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn:hover,
.btn:focus-visible {
    border-color: #2563eb;
    color: #1e3a8a;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    outline: none;
}
.btn.disabled,
.btn:disabled {
    pointer-events: none;
    opacity: 0.6;
}
.btn.ghost.disabled {
    pointer-events: none;
}

.btn.nav-add-listing {
    padding: 0 0.85rem;
    height: 32px;
    line-height: 32px;
}

.btn.primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 6px 14px rgba(17, 23, 43, 0.28);
}
.btn.primary:hover,
.btn.primary:focus-visible {
    color: #fff;
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.4), 0 6px 14px rgba(17, 23, 43, 0.28);
    background: #0d1428;
}

.btn.ghost {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.2);
    color: var(--text);
    padding: 0.15rem 0.8rem;
    min-height: 28px;
}
.btn.ghost:hover,
.btn.ghost:focus-visible {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.btn.small {
    font-size: 0.72rem;
    padding: 0.15rem 0.6rem;
    min-height: 24px;
    font-weight: 500;
}

.messages-divider {
    border: none;
    border-top: 1px solid rgba(15, 23, 42, 0.15);
    margin: 0.25rem 0 0.5rem;
    width: 100%;
}

.hero-panel {
    background: var(--surface-elevated);
    border-radius: 24px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    display: grid;
    gap: 1rem;
}

.hero-points {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
}

.host-cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.host-card {
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.25rem;
    background: var(--surface);
    display: grid;
    gap: 0.5rem;
}

.host-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.25rem;
}

.host-card.accent {
    border-color: var(--primary);
    background: rgba(17, 23, 43, 0.06);
}

.panel-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted);
    margin: 0;
}

.gauge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    justify-items: center;
    padding-bottom: 0.5rem;
}

.gauge {
    width: 160px;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-ring {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 12;
}

.gauge-meter {
    fill: none;
    stroke: var(--accent, #ef4444);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: calc(339.292 * var(--percent, 0) / 100) 339.292;
    transition: stroke-dasharray 0.4s ease;
}

.gauge-value {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-weight: 500;
}

.gauge-value strong {
    font-size: 1.5rem;
    color: var(--accent, #ef4444);
}

.gauge-value span {
    font-size: 0.85rem;
    color: var(--muted);
}

.panel-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    padding: 2rem 0 3rem;
}

.pillars article {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: var(--muted);
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.listing-grid,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 3rem;
}

.card {
    background: var(--surface-elevated);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 1.5rem;
}

.price {
    font-weight: 600;
    margin-top: 1rem;
}

.form-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 2rem;
    max-width: 480px;
    margin: 3rem auto;
}

.form-card.form-card--login {
    max-width: 380px;
    padding: 0.9rem;
    margin: 1.1rem auto;
}

.form-card.form-card--login h2 {
    font-size: 1.15rem;
    margin: 0 0 0.45rem 0;
}

.form-card.form-card--register {
    max-width: 380px;
    padding: 0.85rem;
    margin: 1rem auto;
}

.form-card.form-card--register h2 {
    font-size: 1.05rem;
    margin: 0 0 0.35rem 0;
}

.login-form {
    gap: 0.35rem;
}

.login-form .login-field {
    display: grid;
    gap: 0.12rem;
    font-size: 0.82rem;
}

.login-form .login-field input {
    border-radius: 999px;
    padding: 0.42rem 0.85rem;
    font-size: 0.85rem;
}

.register-form {
    gap: 0.35rem;
}

.register-form .register-field {
    display: grid;
    gap: 0.12rem;
}

.register-form .register-field span {
    font-size: 0.8rem;
}

.register-form .register-field input {
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

.register-form .register-field input.is-valid {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4);
}

.register-form .register-field input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.register-form .register-field.is-valid {
    background: rgba(34, 197, 94, 0.08);
    border-radius: 14px;
    padding: 0.35rem 0.45rem;
}

.register-form .register-field.is-invalid {
    background: rgba(239, 68, 68, 0.08);
    border-radius: 14px;
    padding: 0.35rem 0.45rem;
}

.register-form .register-field .field-message {
    min-height: 0.9rem;
    font-size: 0.72rem;
    color: #ef4444;
}

.register-cookies {
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(186, 206, 230, 0.7);
}

.register-cookies .cookie-switch {
    gap: 0.45rem;
    font-size: 0.7rem;
}

.register-cookies .cookie-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.register-cookies .cookie-switch__track {
    width: 34px;
    height: 18px;
    background: #cbd5e1;
}

.register-cookies .cookie-switch__track::after {
    width: 12px;
    height: 12px;
}

.register-cookies .cookie-switch input:checked + .cookie-switch__track::after {
    transform: translateX(14px);
}

.register-cookies .cookie-switch--ads .cookie-switch__track {
    background: #94a3b8;
}

.register-cookies .cookie-switch--ads input:checked + .cookie-switch__track {
    background: #22c55e;
}

.register-cookies .muted.tiny {
    font-size: 0.7rem;
    line-height: 1.35;
}

.register-cookies .cookie-ads-warning {
    margin: 0.2rem 0 0;
    padding: 0.35rem 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.5);
    background: rgba(254, 226, 226, 0.75);
    color: #b91c1c;
    font-size: 0.7rem;
    font-weight: 600;
}

.register-cookies .cookie-switch--ads.is-declined .cookie-switch__label {
    color: #b91c1c;
    font-weight: 600;
}

.form-card--register .form-switch {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

/* ── Referral Card ── */
.referral-card { margin-top: 0.75rem; }
.referral-card__layout {
    display: flex;
    gap: 0;
    margin-top: 0.5rem;
}
.referral-card__left {
    flex: 3;
    min-width: 0;
}
.referral-card__right {
    flex: 2;
    min-width: 0;
    border-left: 1px solid var(--border);
    padding-left: 1rem;
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.referral-card__right-title {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0;
}
.referral-card__right-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.referral-card__right-detail strong {
    color: var(--text);
}
.referral-card__right-prizes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.75rem;
}
.referral-card__right-prizes li::before {
    content: "🏆 ";
    font-size: 0.7rem;
}
.referral-card__right-countdown {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.referral-card__right-countdown-text {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.referral-card__right-countdown-text strong {
    color: var(--text);
    font-size: 0.78rem;
}
.referral-card__right-countdown-bar {
    height: 4px;
    border-radius: 2px;
    background: #e5e7eb;
    overflow: hidden;
    width: 100%;
}
.referral-card__right-countdown-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    transition: width 0.5s ease;
}
@media (max-width: 700px) {
    .referral-card__layout {
        flex-direction: column;
    }
    .referral-card__right {
        border-left: none;
        border-top: 1px solid var(--border);
        padding-left: 0;
        margin-left: 0;
        padding-top: 0.75rem;
        margin-top: 0.75rem;
    }
}
.referral-card__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.referral-card__text { flex: 1; min-width: 200px; }
.referral-card__text h3 { margin: 0.15rem 0 0.25rem; }
.referral-card__invite-form {
    margin-top: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.referral-card__invite-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.referral-card__email-fields {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}
.referral-card__email-row {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.referral-card__invite-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
    line-height: 1.45;
}
.referral-card__email-row .input {
    width: 280px;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    min-height: 28px;
}
.referral-card__email-row .referral-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: #2563eb;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.referral-card__email-row .referral-row-btn:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.referral-card__email-row .referral-row-btn--remove {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}
.referral-card__email-row .referral-row-btn--remove:hover {
    background: #dc2626;
    border-color: #dc2626;
}
.referral-card__email-row .referral-row-btn--placeholder {
    visibility: hidden;
    pointer-events: none;
}
.referral-card__send-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.referral-card__send-row .btn { flex-shrink: 0; }
.referral-card__send-row .btn.primary:hover,
.referral-card__send-row .btn.primary:focus-visible {
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}
.referral-card__email-status {
    margin-top: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}
.referral-card__email-status--ok { background: #dcfce7; color: #166534; }
.referral-card__email-status--err { background: #fee2e2; color: #991b1b; }
.referral-card__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.6rem 0;
}
.referral-card__divider::before,
.referral-card__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.referral-card__share-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 0.25rem;
}
.referral-card__info-box {
    margin-top: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #1e3a8a;
}
.referral-card__info-box strong { color: #1d4ed8; }
.referral-card__info-box ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}
.referral-card__info-box li { margin-bottom: 0.1rem; }
.referral-card__metrics-group {
    margin-top: 0.5rem;
}
.referral-card__metrics-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem !important;
}
.referral-card__metrics {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.referral-card__metric {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.78rem;
}
.referral-card__metric strong {
    font-size: 0.9rem;
    color: var(--text);
}
.referral-card__metric svg { flex-shrink: 0; }
.referral-card__metric--highlight {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #c4b5fd;
}
.referral-card__success {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: #dcfce7;
    color: #166534;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    animation: risky-fade-in 0.25s ease both;
}
.referral-card__competition-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.7rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 1px solid #fbbf24;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #92400e;
}
.referral-card__competition-badge svg { flex-shrink: 0; }
.referral-card__invites-section {
    margin-top: 0.65rem;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
}
.referral-card__invites-section summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    padding: 0.2rem 0;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
}
.referral-card__invites-section summary::marker,
.referral-card__invites-section summary::-webkit-details-marker {
    display: none;
}
.referral-card__invites-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: var(--text-muted);
}
.referral-card__invites-section[open] .referral-card__invites-chevron {
    transform: rotate(180deg);
}
.referral-card__invites-summary-stats {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.referral-card__invites-list {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.referral-card__invite-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.78rem;
    flex-wrap: wrap;
}
.referral-card__invite-email {
    font-weight: 500;
    color: var(--text);
    min-width: 120px;
    flex: 1;
}
.referral-card__invite-pill {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}
.referral-card__invite-pill--registered { background: #dcfce7; color: #166534; }
.referral-card__invite-pill--visited { background: #e0e7ff; color: #3730a3; }
.referral-card__invite-pill--invited { background: #fef3c7; color: #92400e; }
.referral-card__invite-points {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* ── Competition Floating Widget ── */
.competition-widget {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 900;
}
.competition-widget__toggle {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    color: #f59e0b;
}
.competition-widget__toggle:hover,
.competition-widget__toggle.is-open {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.competition-widget__panel {
    position: absolute;
    bottom: 54px;
    right: 0;
    width: 260px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.85rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    flex-direction: column;
    gap: 0.6rem;
    animation: risky-fade-in 0.2s ease;
    z-index: 2;
}
.competition-widget__panel[hidden] { display: none; }
.competition-widget__panel:not([hidden]) { display: flex; }
.competition-widget__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.competition-widget__logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.competition-widget__title {
    font-size: 0.85rem;
    display: block;
}
.competition-widget__countdown {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.1rem;
}
.competition-widget__countdown-text {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.competition-widget__countdown-text strong {
    color: var(--text);
    font-size: 0.78rem;
}
.competition-widget__countdown-bar {
    height: 4px;
    border-radius: 2px;
    background: #e5e7eb;
    overflow: hidden;
    width: 100%;
}
.competition-widget__countdown-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    transition: width 0.5s ease;
}
.competition-widget__prizes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.competition-widget__prizes li::before {
    content: "🏆 ";
    font-size: 0.75rem;
}

.verified-check {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 2px;
}

.oauth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 0.75rem;
}
.oauth-divider::before,
.oauth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
}
.oauth-btn svg {
    flex-shrink: 0;
}

.form-switch {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}

.form-switch span {
    color: var(--muted);
    font-size: 0.85rem;
}

.form-switch .form-switch-button {
    width: 100%;
    max-width: 200px;
    justify-content: center;
    text-decoration: none;
}

.dashboard {
    display: grid;
    gap: 1rem;
    margin: 0 auto 2rem;
    max-width: 1080px;
}

.dashboard-hero {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1rem;
    background: #fff;
    display: grid;
    gap: 0.75rem;
}

.dashboard-hero__layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(420px, 1.45fr);
    gap: 0.8rem;
    align-items: stretch;
}

.dashboard-hero__left {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}

.dashboard-hero__intro {
    display: grid;
    gap: 0.3rem;
}
.dashboard-greeting {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.4rem;
}

.metric-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.metric-grid--pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.metric-grid--compact {
    gap: 0.45rem;
}

@media (max-width: 640px) {
    .metric-grid--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }
}

.metric-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.6rem;
    background: var(--surface);
    display: grid;
    gap: 0.2rem;
}

.dashboard .metric-card {
    background: #edf1f4;
}

.dashboard .metric-card--compact {
    padding: 0.45rem 0.55rem;
    gap: 0.12rem;
    min-height: 64px;
    align-content: start;
}

.dashboard .metric-card--compact .muted.small {
    font-size: 0.72rem;
    line-height: 1.15;
}

.dashboard .metric-card--compact strong {
    font-size: 0.95rem;
    line-height: 1.1;
}

.metric-card--button {
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--border);
    background: #e6efff;
    font: inherit;
    appearance: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.metric-card--button:hover,
.metric-card--button:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
    transform: translateY(-2px);
    outline: none;
}

.metric-view {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
    display: grid;
    gap: 1.5rem;
}

.metric-view__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.metric-view__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: rgba(15, 23, 42, 0.6);
    margin: 0 0 0.4rem 0;
}

.metric-view__title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: #0f172a;
}

.metric-view__note {
    margin: 0.35rem 0 0;
    color: rgba(15, 23, 42, 0.7);
}

.metric-view__value {
    font-size: clamp(4rem, 12vw, 9rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(14, 116, 144, 0.2));
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
}

.metric-view__refresh {
    margin: 0;
    color: rgba(15, 23, 42, 0.6);
}


.metric-view__ads {
    display: grid;
    gap: 1rem;
}

.metric-view__ads h2 {
    margin: 0;
    font-size: 1.4rem;
}

.metric-view__ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.metric-ad-card {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: #fff;
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.metric-ad-card.is-active {
    border-color: rgba(34, 197, 94, 0.6);
}

.metric-ad-card.is-inactive {
    border-color: rgba(248, 113, 113, 0.6);
}

.metric-ad-card header {
    display: grid;
    gap: 0.2rem;
}

.metric-ad-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.8rem;
}

.metric-ad-card__stats strong {
    font-size: 1.05rem;
}

.metric-card strong {
    font-size: 1.1rem;
}

.metric-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2000;
}

.metric-overlay[hidden] {
    display: none;
}

.metric-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.metric-overlay__card {
    position: relative;
    width: min(720px, 92vw);
    min-height: 320px;
    border-radius: 24px;
    padding: 2.5rem 2.5rem 2rem;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), rgba(226, 232, 240, 0.96) 60%, rgba(226, 232, 240, 0.88));
    border: 1px solid rgba(148, 163, 184, 0.5);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.35);
    display: grid;
    gap: 1rem;
}

.metric-overlay__close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    border: none;
    background: rgba(15, 23, 42, 0.1);
    color: #0f172a;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1.4rem;
    display: grid;
    place-items: center;
}

.metric-overlay__eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(15, 23, 42, 0.6);
}

.metric-overlay__title {
    margin: 0;
    font-size: 1.6rem;
    color: #0f172a;
}

.metric-overlay__value {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    color: #0b1220;
    letter-spacing: -0.04em;
    padding: 1.2rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(14, 116, 144, 0.18));
    border: 1px solid rgba(59, 130, 246, 0.25);
    text-align: center;
}

.metric-overlay__note {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(15, 23, 42, 0.7);
}

body.metric-overlay-open {
    overflow: hidden;
}

.trend-bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.trend-bar__fill {
    display: block;
    height: 100%;
    background: #0b4a6d;
}

.sparkline {
    display: flex;
    align-items: flex-end;
    gap: 0.1rem;
    height: 40px;
}

.sparkline span {
    width: 6px;
    background: #cbd5f5;
    border-radius: 6px;
}

.dashboard-chart-card {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    padding: 0.7rem 0.8rem;
    display: grid;
    gap: 0.45rem;
    min-height: 250px;
}

.dashboard-chart-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.dashboard-chart-card__head h3 {
    margin: 0;
    font-size: 0.9rem;
    color: #0f172a;
}

.dashboard-chart-card__head .eyebrow {
    margin: 0 0 0.12rem;
    font-size: 0.62rem;
}

.dashboard-chart-card__head .muted.tiny {
    margin: 0.16rem 0 0;
    max-width: 52ch;
}

.dashboard-chart-card__years {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
}

.dashboard-year-chip {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 0.16rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
}

.dashboard-year-chip.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.dashboard-chart-card__legend {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem 0.9rem;
    flex-wrap: wrap;
}

.dashboard-chart-card__legend-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.55rem;
    align-items: center;
}

.dashboard-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.67rem;
    color: #475569;
    white-space: nowrap;
}

.dashboard-chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot, #64748b);
    display: inline-block;
}

.dashboard-chart-legend-line {
    width: 16px;
    height: 0;
    border-top: 2px solid rgba(15, 23, 42, 0.75);
    display: inline-block;
}

.dashboard-chart-legend-line[style*="--dash"] {
    border-top-style: solid;
}

.dashboard-chart-card__controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.dashboard-chart-card__canvas-wrap {
    min-height: 200px;
    position: relative;
}

.dashboard-chart-card__canvas {
    width: 100%;
    height: 200px;
    display: block;
}

.dashboard-chart-card__svg {
    width: 100%;
    height: 200px;
    display: block;
}

.dashboard-chart-bg {
    fill: rgba(255, 255, 255, 0.45);
    rx: 10;
    ry: 10;
}

.dashboard-chart-grid-line {
    stroke: rgba(148, 163, 184, 0.25);
    stroke-width: 1;
}

.dashboard-chart-axis-line {
    stroke: rgba(100, 116, 139, 0.35);
    stroke-width: 1;
}

.dashboard-chart-hover-line {
    stroke: rgba(37, 99, 235, 0.22);
    stroke-width: 1;
    pointer-events: none;
}

.dashboard-chart-axis-label {
    fill: #64748b;
    font-size: 10px;
    font-family: Inter, system-ui, sans-serif;
}

.dashboard-chart-line {
    fill: none;
    stroke: var(--line, #64748b);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--dash, none);
    opacity: 0.95;
}

.dashboard-chart-point {
    fill: #fff;
    stroke: var(--line, #64748b);
    stroke-width: 1.4;
    cursor: pointer;
    transition: stroke-width 120ms ease, fill 120ms ease;
}

.dashboard-chart-point.is-hovered {
    fill: color-mix(in srgb, var(--line, #64748b) 18%, #ffffff);
    stroke-width: 2.2;
}

.dashboard-chart-tooltip {
    position: absolute;
    z-index: 3;
    min-width: 150px;
    max-width: 220px;
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.92);
    color: #e5e7eb;
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.28);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.dashboard-chart-tooltip__title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.35rem;
}

.dashboard-chart-tooltip__rows {
    display: grid;
    gap: 0.18rem;
}

.dashboard-chart-tooltip__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.15;
}

.dashboard-chart-tooltip__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--dot, #64748b);
    display: inline-block;
}

.dashboard-chart-tooltip__label {
    color: #cbd5e1;
}

.dashboard-chart-tooltip__value {
    color: #f8fafc;
    font-weight: 700;
}

.dashboard-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard-preparations {
    margin-top: 1.5rem;
    display: grid;
    gap: 0.75rem;
}

.preparation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem;
}

.preparation-card {
    border: 1px solid rgba(15, 23, 42, 0.4);
    border-radius: 18px;
    padding: 1rem 1.15rem;
    background: #0f172a;
    color: #f8fafc;
    box-shadow: 0 18px 28px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.preparation-card__head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: flex-start;
}

.preparation-card__head h3 {
    margin: 0.15rem 0 0.35rem;
    color: #fff;
}

.preparation-card p {
    color: rgba(248, 250, 252, 0.8);
    margin: 0;
}

.preparation-card__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.preparation-card form {
    margin: 0;
}

.preparation-card .btn.ghost {
    border-color: rgba(248, 250, 252, 0.35);
    color: #f8fafc;
}
.dashboard-menu .btn {
    padding: 0.35rem 0.9rem;
    box-shadow: 0 0 0 rgba(37, 99, 235, 0);
}
.dashboard-menu .btn:hover,
.dashboard-menu .btn:focus-visible {
    border-color: #2563eb;
    color: #1e3a8a;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
}
.dashboard-section {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.75rem;
    background: #fff;
}

.listing-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.account-listing-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-elevated);
    display: grid;
    grid-template-rows: 120px auto;
}

.account-listing-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-listing-card .card-body {
    padding: 0.6rem;
    display: grid;
    gap: 0.25rem;
}

.listing-card-head {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    align-items: flex-start;
}

.status-pill {
    display: inline-flex;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: #e5e7eb;
    width: max-content;
}

.status-pill.status-published {
    background: #dcfce7;
    color: #14532d;
    border: 1px solid rgba(21, 83, 45, 0.3);
}

.status-pill.status-draft {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid rgba(153, 27, 27, 0.3);
}

.status-pill.status-reserved {
    background: #ddd6fe;
    color: #5b21b6;
    border: 1px solid rgba(91, 33, 182, 0.35);
}

.status-pill.status-sold {
    background: #fecdd3;
    color: #be123c;
    border: 1px solid rgba(190, 18, 60, 0.5);
}

.status-pill.status-discount {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid rgba(180, 83, 9, 0.4);
}

.status-pill.status-vat {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid rgba(146, 64, 14, 0.35);
}

.status-pill.is-warning {
    background: #fde68a;
    color: #92400e;
}
.status-pill.status-active {
    background: #dcfce7;
    color: #14532d;
    border: 1px solid rgba(21, 83, 45, 0.3);
}
.status-pill.status-inactive {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid rgba(153, 27, 27, 0.3);
}

.listing-status-row {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}

.listing-status-row--compact .status-pill {
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
}

.listing-status-row--compact {
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.listing-status-row .status-pill {
    font-size: 0.68rem;
    padding: 0.08rem 0.45rem;
    line-height: 1.25;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 0;
}

.dashboard-listings {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--listing-card-width), 1fr));
}

.dashboard-listings .listing-card {
    width: 100%;
    max-width: none;
}

.messages {
    margin: 1rem auto 2rem;
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    padding: 0 clamp(0.4rem, 2vw, 0.75rem);
    box-sizing: border-box;
    overflow: visible;
}

.messages-head {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
}

.messages-head__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.messages-head__actions .btn {
    white-space: nowrap;
}

.messages-head__actions .btn {
    white-space: nowrap;
}

.messages-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 2fr;
    gap: 1rem;
    align-items: stretch;
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

.messages-thread-list {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    position: relative;
    overflow: visible;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.thread-section {
    display: grid;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    padding: 0.55rem;
}

.thread-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.thread-section__sort {
    margin: 0;
}

.thread-section__sort-select {
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    background: #fff;
    padding: 0.1rem 0.6rem;
    font-size: 0.76rem;
    color: #334155;
}

.thread-section__actions {
    display: flex;
    justify-content: center;
    margin-top: 0.1rem;
}

.thread-group-list,
.thread-buying-list {
    display: grid;
    gap: 0.45rem;
}

.thread-group {
    border: 1px solid #dbe4f1;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
}

.thread-group__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    list-style: none;
}

.thread-group__summary::-webkit-details-marker {
    display: none;
}

.thread-group__head {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.thread-group__thumb {
    width: 44px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    background: #e2e8f0;
    flex-shrink: 0;
}

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

.thread-group__title {
    font-size: 0.9rem;
    line-height: 1.15;
    color: #0f172a;
}

.thread-group__vendor {
    font-size: 0.76rem;
    color: #64748b;
}

.thread-group__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    color: #64748b;
    white-space: nowrap;
}

.thread-group__badge {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0 4px;
}

.thread-group__items {
    border-top: 1px solid #e2e8f0;
    padding: 0.45rem;
    display: grid;
    gap: 0.4rem;
}

.thread-card {
    border-radius: 14px;
    border: 1px solid transparent;
    padding: 0.6rem;
    background: #f8fafc;
    display: flex;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.thread-card--compact {
    padding: 0.35rem 0.5rem 0.35rem 18px;
    gap: 0.35rem;
    align-items: center;
}

.thread-card--buy {
    padding: 0.42rem 0.5rem 0.42rem 18px;
    gap: 0.45rem;
}

.thread-card--buy .thread-card__avatar {
    width: 46px;
    height: 34px;
}

.thread-card--buy .thread-card__body {
    gap: 0.08rem;
}

.thread-card--buy .thread-card__name {
    font-size: 0.94rem;
    line-height: 1.15;
}

.thread-card.is-deal-selected {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.thread-card.is-deal-selected.is-active {
    background: #e2f8ea;
    border-color: #86efac;
}

.thread-card__deal-badge {
    font-size: 0.68rem;
    font-weight: 600;
    color: #166534;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    line-height: 1.3;
    display: inline-block;
}

.thread-card__deal-badge--done {
    color: #14532d;
    background: rgba(22, 163, 74, 0.15);
}

.thread-card__deal-badge--sm {
    font-size: 0.6rem;
    padding: 0.02rem 0.25rem;
}

.thread-card.is-deal-completed {
    background: #f0fdf4;
    border-color: #a7f3d0;
}

.thread-card.is-deal-completed.is-active {
    background: #e2f8ea;
    border-color: #6ee7b7;
}

.thread-card.is-active {
    border-color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}

.thread-card:hover,
.thread-card:focus-visible {
    border-color: rgba(15, 23, 42, 0.12);
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    outline: none;
    text-decoration: none;
}

.thread-card__avatar {
    width: 44px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e8f0;
}

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

.thread-card__body {
    display: grid;
    gap: 0.2rem;
    width: 100%;
}

.thread-card__order {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
    min-width: 1.1rem;
    text-align: right;
    flex-shrink: 0;
}

.thread-card__row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.thread-card__name {
    font-weight: 600;
    color: #0f172a;
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 0;
}

.thread-card__city {
    margin-left: 0.28rem;
    font-weight: 400;
    font-size: 0.8rem;
    color: #7b8796;
}

.thread-card__unread-dot {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
    flex: none;
}

.thread-card__listing {
    font-size: 0.85rem;
    color: #475467;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

.thread-card__listing--compact {
    font-size: 0.74rem;
    color: #667085;
    line-height: 1.2;
}

.thread-card__rating-inline {
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
}

.thread-card__rating-inline--compact {
    font-size: 0.68rem;
}

.thread-card--compact .thread-card__name {
    font-size: 0.78rem;
    line-height: 1.15;
}

.thread-card--compact .thread-card__meta {
    font-size: 0.68rem;
    padding-left: 0.4rem;
}

.thread-card__rating {
    margin-top: 0.08rem;
}

.thread-card__meta {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: auto;
    padding-left: 0.75rem;
}

.thread-card.has-unread::after {
    content: none;
}

.thread-card.is-not-selected {
    opacity: 0.55;
    background: #f1f5f9;
}
.thread-card.is-not-selected:hover {
    opacity: 0.75;
}

.thread-card__note--dimmed {
    font-size: 0.7rem;
    font-style: italic;
    color: #94a3b8;
    margin-top: 0.15rem;
}

.thread-section--graduated {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid #e2e8f0;
}

.thread-graduated-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.thread-graduated-tab {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    cursor: pointer;
    color: #475569;
    transition: background 0.15s, color 0.15s;
}

.thread-graduated-tab.is-active {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}

.thread-graduated-tab:hover:not(.is-active) {
    background: #e2e8f0;
}

.thread-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.35rem;
    padding: 0.6rem;
    border-radius: 12px;
    background: #0f172a;
    color: #f8fafc;
    min-width: 200px;
    max-width: 280px;
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
}

.thread-card__listing:hover .thread-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.thread-tooltip__title {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.thread-tooltip__summary {
    margin: 0;
    color: #cbd5f5;
}

.thread-preview-card {
    position: absolute;
    right: calc(-1 * (min(320px, 40vw) + 1rem));
    top: 0;
    width: min(320px, 40vw);
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.18);
    background: #fff;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    z-index: 10;
    transition: opacity 0.15s ease, transform 0.15s ease;
    display: none;
}

.thread-preview-card[hidden] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
}

.thread-preview-card__media {
    width: 100%;
    height: 170px;
    border-radius: 14px;
    overflow: hidden;
    background: #f4f4f5;
}

.thread-preview-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thread-preview-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.thread-preview-card__price {
    font-weight: 600;
    color: #059669;
    font-size: 0.95rem;
    margin: 0;
}

.thread-preview-card__summary {
    margin: 0;
    color: #475467;
    font-size: 0.85rem;
    line-height: 1.4;
    max-height: 5.5rem;
    overflow: hidden;
}

.thread-preview-card__actions {
    display: flex;
    justify-content: flex-end;
}

.thread-preview-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    text-decoration: none;
    color: #0f172a;
}

.thread-preview-card__link::after {
    content: "→";
    font-size: 0.85rem;
}

@media (min-width: 1400px) {
    .thread-preview-card {
        display: flex;
    }
}

.messages-chat {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.messages-chat-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    padding: 0.85rem;
    display: grid;
    gap: 0.75rem;
}

/* ── Deal strip (compact bar above chat) ── */
.messages-deal-strip {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f8fafc;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.82rem;
}

.messages-deal-strip.is-selected {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fbbf24;
}

.messages-deal-strip.is-completed {
    background: #e7f6ed;
    border-color: #b7e1c4;
}

.messages-deal-strip.is-cancelled {
    background: #fef2f2;
    border-color: #fca5a5;
}

.deal-strip__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.deal-strip__label {
    font-weight: 700;
    font-size: 0.85rem;
    color: #0f172a;
}

.messages-deal-strip.is-selected .deal-strip__label {
    color: #92400e;
}

.messages-deal-strip.is-completed .deal-strip__label {
    color: #166534;
}

.deal-strip__info {
    font-size: 0.78rem;
    color: #4b5563;
}

.deal-strip__ratings {
    font-size: 0.78rem;
    color: #4b5563;
    margin-left: auto;
}

.deal-strip__report {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.deal-strip__report input {
    flex: 1;
    min-width: 180px;
    padding: 0.2rem 0.5rem;
    font-size: 0.78rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.deal-strip__rating-form {
    display: grid;
    gap: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.deal-strip__rating-title {
    font-weight: 600;
    font-size: 0.78rem;
    margin: 0;
    color: #334155;
}

.deal-strip__rating-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
}

.rating-group--compact {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.rating-group--compact .rating-group__label {
    font-size: 0.72rem;
    min-width: 0;
    text-align: right;
}

.rating-group--compact .rating-stars {
    position: relative;
    z-index: 1;
}

.rating-group--compact .rating-stars label {
    padding: 0.2rem 0.15rem;
    font-size: 1.15rem;
    line-height: 1;
    -webkit-text-stroke: 1px #c8a048;
    color: transparent;
    transition: color 0.1s;
}

.rating-group--compact .rating-stars input:checked ~ label,
.rating-group--compact .rating-stars label:hover,
.rating-group--compact .rating-stars label:hover ~ label {
    color: #f59e0b;
    -webkit-text-stroke: 1px #f59e0b;
}

.deal-strip__rating-bottom {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.deal-strip__rating-bottom textarea {
    flex: 1;
    min-width: 100px;
    min-height: 28px !important;
    height: 28px;
    max-height: 60px;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    resize: vertical;
    line-height: 1.2;
}

.deal-strip__rating-done {
    font-size: 0.78rem;
}

.deal-strip__rating-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.62rem;
    font-weight: 700;
    cursor: help;
    position: relative;
    vertical-align: middle;
    margin-left: 0.2rem;
}

.deal-strip__rating-hint:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 400;
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

.deal-strip__rating-hint:hover::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1e293b;
    z-index: 10;
}

.deal-strip__report-trigger {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-left: 0.3rem;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.deal-strip__report-trigger:hover {
    color: #991b1b;
}

.deal-strip__report-popup {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 0.35rem;
}

.deal-strip__report-form {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.deal-strip__report-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.deal-strip__report-input {
    min-height: 28px !important;
    font-size: 0.72rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.deal-strip__report-actions {
    display: flex;
    gap: 0.3rem;
}

/* ── Contact access strip ── */
.chat-access-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
}

.chat-access-strip__label {
    font-weight: 600;
    font-size: 0.78rem;
    color: #334155;
}

.chat-access-strip__trust {
    font-size: 0.75rem;
    color: #64748b;
}

.chat-access-strip__form {
    margin: 0;
    margin-left: auto;
}

.chat-access-strip__btn {
    padding: 0.1rem 0.5rem !important;
    font-size: 0.72rem !important;
    min-height: 22px !important;
}

.chat-access-strip__blocked {
    font-size: 0.72rem;
    margin-left: auto;
}

/* ── Sidebar interest list ── */
.thread-group__interest-section {
    border-top: 1px solid #e2e8f0;
    margin-top: 0.3rem;
    padding-top: 0.4rem;
}

.thread-group__interest-head {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.3rem 0.3rem;
}

.thread-group__interest-list {
    display: grid;
    gap: 0.3rem;
}

.sidebar-interest {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-size: 0.75rem;
    line-height: 1.25;
}

.sidebar-interest.is-selected {
    background: #fefce8;
    border-color: #f59e0b;
}

.sidebar-interest__info {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    flex: 1;
}

.sidebar-interest__name {
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.sidebar-interest__meta {
    font-size: 0.68rem;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}

.sidebar-interest__badge {
    font-size: 0.66rem;
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
    flex-shrink: 0;
}

.sidebar-interest__actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.sidebar-interest__actions form {
    margin: 0;
}

.sidebar-interest__btn {
    padding: 0.05rem 0.4rem !important;
    font-size: 0.68rem !important;
    min-height: 20px !important;
    line-height: 1 !important;
}

.sidebar-interest__btn--danger {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.sidebar-interest__btn--danger:hover {
    background: #991b1b;
    border-color: #991b1b;
    color: #fff;
}

.chat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.chat-head__title {
    font-size: 1.25rem;
    margin: 0;
    line-height: 1.2;
}

.chat-head__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.chat-sort-form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.chat-sort-form__select {
    min-width: 150px;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: #fff;
    font-size: 0.78rem;
    line-height: 1.2;
    color: #0f172a;
}

/* Legacy chat-deal-card styles kept for archive/other views */
.chat-deal-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.75rem 0.9rem;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chat-deal-card__meta {
    font-size: 0.85rem;
    color: #4b5563;
}

.chat-inline-city {
    margin-left: 0.2rem;
    color: #64748b;
    font-weight: 400;
}
.chat-online-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}
.chat-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.chat-online-status.is-online {
    color: #16a34a;
}
.chat-online-status.is-online .chat-online-dot {
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}
.chat-online-status.is-offline {
    color: #64748b;
}
.chat-online-status.is-offline .chat-online-dot {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}


.chat-access-card__actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.chat-access-card__actions form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.chat-access-card {
    border: 1px solid #dbe4f1;
    border-radius: 12px;
    background: #f8fafc;
    padding: 0.55rem 0.65rem;
}

.chat-access-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.chat-access-card__row .muted.small {
    margin: 0;
}

.chat-access-status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.08rem 0.52rem;
    font-size: 0.9em;
    line-height: 1.25;
    border: 1px solid transparent;
}

.chat-access-status-pill.is-approved {
    color: #166534;
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.34);
}

.chat-access-status-pill.is-pending {
    color: #92400e;
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.35);
}

.chat-access-status-pill.is-reported,
.chat-access-status-pill.is-denied {
    color: #991b1b;
    background: rgba(248, 113, 113, 0.18);
    border-color: rgba(248, 113, 113, 0.35);
}

.chat-access-status-pill.is-none {
    color: #475569;
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.3);
}

.chat-access-card__row .chat-access-card__actions {
    justify-content: flex-end;
}

.chat-access-report {
    min-width: 0;
    padding: 0.14rem 0.62rem;
    min-height: 0;
    height: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1.1;
    vertical-align: middle;
}

.chat-access-approve {
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0.14rem 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1.1;
    vertical-align: middle;
}

.chat-access-approve.is-approved {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.2);
    color: var(--text);
    box-shadow: none;
}

.chat-rating {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.75rem 0.9rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.chat-rating--inline {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.chat-rating__layout {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(260px, 360px);
    gap: 0.9rem;
    align-items: start;
}

.chat-rating__grid {
    display: grid;
    gap: 0.6rem;
}

.rating-group {
    display: grid;
    grid-template-columns: minmax(170px, max-content) max-content;
    align-items: center;
    gap: 0.35rem;
}

.rating-group__label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f2937;
    text-align: right;
}

.rating-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0;
    justify-self: start;
    align-items: center;
}

.rating-stars input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.rating-stars label {
    cursor: pointer;
    font-size: 1rem;
    color: #cbd5f5;
    display: inline-block;
    padding: 0 0.1rem;
    line-height: 1;
    margin: 0;
}

.rating-stars label::before {
    content: "★";
}

.rating-stars input:checked ~ label,
.rating-stars label:hover,
.rating-stars label:hover ~ label {
    color: #f59e0b;
}

.rating-note {
    display: grid;
    gap: 0.35rem;
}

.rating-note textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    resize: vertical;
}

.chat-rating__right {
    display: grid;
    gap: 0.5rem;
    align-content: start;
}

.chat-rating__submit {
    width: auto;
    justify-self: start;
    min-width: 160px;
}

.chat-rating--inline .chat-rating__layout {
    grid-template-columns: minmax(280px, 1fr) minmax(240px, 340px);
    gap: 0.7rem;
}

.chat-rating__stars {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.chat-rating__stars label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.85rem;
}

.chat-rating__stars input {
    margin: 0;
}

.chat-rating__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    font-size: 0.85rem;
}

.chat-rating__note textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    resize: vertical;
}

@media (max-width: 900px) {
    .chat-rating-overview {
        grid-template-columns: 1fr;
    }

    .chat-rating__layout {
        grid-template-columns: 1fr;
    }

    .rating-group {
        grid-template-columns: 1fr;
    }

    .rating-group__label {
        text-align: left;
    }

    .chat-interest-row__actions {
        min-width: 100%;
    }

    .chat-access-card__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .chat-access-card__row .chat-access-card__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .chat-bubble--system {
        width: 92%;
        max-width: 92%;
    }
}

.chat-actions-menu {
    position: relative;
}

.chat-actions-menu__toggle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    list-style: none;
}

.chat-actions-menu__toggle::-webkit-details-marker {
    display: none;
}

.chat-actions-menu__toggle::marker {
    content: "";
}

.chat-actions-menu__toggle svg {
    width: 18px;
    height: 18px;
}

.chat-actions-menu__icon {
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    font-family: Arial, "Helvetica Neue", sans-serif;
}


.chat-actions-menu[open] .chat-actions-menu__toggle,
.chat-actions-menu__toggle:hover,
.chat-actions-menu__toggle:focus-visible {
    border-color: #2563eb;
    color: #1e3a8a;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
    outline: none;
}

.chat-actions-menu__popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #cfd3d8;
    border-radius: 14px;
    padding: 0.5rem;
    width: 240px;
    display: grid;
    align-items: stretch;
    gap: 0.35rem;
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.18);
    z-index: 10;
    box-sizing: border-box;
}

.chat-actions-menu__popover form {
    margin: 0;
}

.chat-head__link {
    font-size: 0.82rem;
    padding: 0.3rem 0.75rem;
    white-space: nowrap;
}

.chat-actions-menu__popover,
.chat-actions-menu__popover * {
    box-sizing: border-box;
}

.chat-actions-menu__popover .chat-head__link {
    width: 100%;
    justify-content: center;
    min-height: 32px;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1;
}

.chat-head__actions form {
    margin: 0;
}

.message-archive-modal {
    position: fixed;
    inset: 0;
    background: rgba(9, 14, 24, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
    padding: 1rem;
}

.message-archive-modal[hidden] {
    display: none;
}

.message-archive-modal__card {
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem;
    max-width: min(480px, 90vw);
    box-shadow: 0 35px 90px rgba(15, 23, 42, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    text-align: left;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.message-archive-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.messages-archive {
    margin: 1rem auto 2rem;
    max-width: min(1100px, 100%);
    display: grid;
    gap: 1rem;
    padding: 0 0.5rem;
}

.messages-archive-table-wrapper {
    border-radius: 18px;
    border: 1px solid var(--border);
    background: #fff;
    overflow-x: auto;
    overflow-y: hidden;
}

.messages-archive-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    background: transparent;
}

.messages-archive-table th,
.messages-archive-table td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.messages-archive-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.messages-archive-table tr:last-child td {
    border-bottom: none;
}

.messages-archive-table tr {
    transition: background 0.15s ease;
}

.messages-archive-table tr.thread-row {
    cursor: pointer;
}

.messages-archive-table tr.thread-row.is-active {
    background: rgba(37, 99, 235, 0.08);
}

.messages-archive-table tr.thread-detail {
    cursor: default;
}

.messages-archive-table tr.thread-detail td {
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.02);
    border-bottom: none;
}

.messages-archive-table a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}

.messages-groups {
    display: grid;
    gap: 0.6rem;
}
.conversation-group {
    border: 1px solid #c7ced8;
    border-radius: 18px;
    background: #eef1f4;
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.conversation-group[data-group-open="true"] {
    background: #e1e6ee;
    border-color: #9aa3af;
    box-shadow: 0 15px 28px rgba(15, 23, 42, 0.35);
}
.conversation-group__head {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
}
.conversation-group__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.conversation-group__row .conversation-group__head {
    flex: 1 1 auto;
}
.drafts-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0 0.4rem;
}
.draft-delete {
    border: 1px solid rgba(185, 28, 28, 0.25);
    background: #fee2e2;
    color: #991b1b;
    width: 28px;
    height: 28px;
    margin-right: 0.4rem;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.draft-delete:hover,
.draft-delete:focus-visible {
    background: #fecaca;
    border-color: rgba(185, 28, 28, 0.5);
    outline: none;
}
.conversation-group__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.conversation-group__count {
    font-weight: 600;
    font-size: 0.95rem;
    color: #0f172a;
}
.conversation-group__body {
    border-top: 1px solid var(--border);
    padding: 0.5rem;
}

.user-management-console .messages-groups {
    gap: 0.75rem;
}

.user-management-group {
    position: relative;
}

.user-management-group.is-dirty {
    background: #fff8c2;
    border-color: #d1a300;
    box-shadow: 0 6px 14px rgba(209, 163, 0, 0.22);
}

.user-management-toggle {
    flex: 1 1 auto;
    padding-right: 0.5rem;
}

.user-management-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    align-items: center;
}

@media (max-width: 970px) {
    .nav-desktop-grid {
        display: none;
    }
    .nav-mobile-bar {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

.user-management-line--primary strong {
    font-size: 1rem;
}

.user-management-main strong {
    font-size: 1rem;
}

.user-management-activity {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.user-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
}

.user-online-dot.is-online {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.user-management-head-meta {
    display: grid;
    grid-template-columns: minmax(140px, 220px) auto minmax(220px, 1fr);
    gap: 0.6rem 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0 0.5rem 0.2rem;
}

.user-management-status {
    position: static;
    width: 100%;
    max-width: 240px;
    display: flex;
    justify-content: flex-start;
}

.user-management-status .status-pill {
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
}

.user-management-toggles {
    display: grid;
    grid-auto-rows: min-content;
    grid-auto-flow: row;
    gap: 0.4rem;
    align-items: start;
}

.user-management-toggles .toggle-field {
    display: grid;
    grid-template-columns: auto 86px;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.1rem;
    justify-items: start;
}

.user-management-toggles .toggle-btn {
    width: 86px;
}

.user-management-toggles .toggle-field .muted.tiny {
    font-size: 0.72rem;
}

.user-management-toggles .toggle-field .toggle-btn {
    display: inline-flex;
}

.user-management-toggles .toggle-field .toggle-btn {
    width: 100%;
    justify-content: center;
}

.user-management-toggles .toggle-field[data-toggle-row] .toggle-btn {
    margin: 0;
}

.toggle-btn:not(.is-on) {
    background: #cbd5e1;
    color: #1f2937;
    border-color: #94a3b8;
}

.user-management-reason--inline textarea {
    font-size: 0.78rem;
}

.user-management-reason--inline {
    margin: 0;
    align-self: stretch;
    min-width: 200px;
}

.user-management-reason--inline textarea {
    min-height: 44px;
}

.toggle-field--compact {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
}

.toggle-field--compact .toggle-btn {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
}

.toggle-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.user-management-detail {
    background: #f7f8fb;
    border-color: #b0b9c6;
    padding: 0.6rem;
    gap: 0.5rem;
}

.user-management-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.35rem;
}

.user-management-card {
    border: 1px solid #c2cad6;
    border-radius: 16px;
    background: #fff;
    padding: 0.35rem 0.45rem;
    display: grid;
    gap: 0.18rem;
    font-size: 0.9rem;
    line-height: 1.3;
}

.user-management-card h3 {
    font-size: 0.9rem;
    margin: 0 0 0.1rem;
}

.user-management-card p {
    margin: 0;
}

.user-management-card p + p {
    margin-top: 0.12rem;
}

.user-management-activity-row {
    margin-top: 0.35rem;
    display: grid;
    gap: 0.35rem;
    justify-items: start;
}

.user-management-activity-row .user-management-card {
    width: 100%;
    max-width: 100%;
}

.user-management-card--activity {
    gap: 0.25rem;
    padding: 0.4rem 0.45rem;
    align-self: start;
    width: min(820px, calc(100% - 24px));
    max-width: calc(100% - 24px);
    margin-right: 12px;
}

.user-management-activity-row .user-management-card--activity {
    width: min(820px, calc(100% - 24px));
    max-width: calc(100% - 24px);
}

.user-activity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.user-activity-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.user-activity-filter label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.user-activity-filter select {
    padding: 0.3rem 0.5rem;
    border-radius: 10px;
    border: 1px solid #cbd5f5;
    background: #f8fafc;
    font-size: 0.85rem;
}

.user-activity-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
}

.user-activity-weekday {
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.user-activity-day {
    background: #f8fafc;
    border: 1px solid #d8e2f0;
    border-radius: 10px;
    padding: 0.35rem;
    min-height: 54px;
    display: grid;
    gap: 0.2rem;
}

.user-activity-day.is-muted {
    opacity: 0.45;
}

.user-activity-day.is-today {
    border-color: #0f172a;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2);
}

.user-activity-day.is-active {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.45);
}

.user-activity-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f172a;
}

.user-activity-time {
    font-size: 0.7rem;
    color: #475569;
}

.user-management-kpis {
    display: grid;
    gap: 0.15rem;
    font-size: 0.88rem;
}

.user-management-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
    position: relative;
}

.user-management-progress__bar {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: #0f172a;
    border-radius: inherit;
}

.user-management-progress-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.7rem;
    font-size: 0.8rem;
}

.user-management-reason {
    margin-top: 0.45rem;
}

.user-management-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0.6rem 0 0.9rem;
}

.user-management-bulk .btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
}

@media (max-width: 720px) {
    .user-management-head-meta {
        grid-template-columns: 1fr;
        width: 100%;
        justify-content: flex-start;
        padding: 0 0.75rem 0.6rem;
    }

    .user-management-status {
        position: static;
        order: -1;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        transform: none;
    }

    .user-management-status .status-pill {
        width: 60%;
        max-width: 240px;
        margin: 0 auto;
    }

    .user-management-toggle {
        padding-right: 0;
    }

    .user-management-group .conversation-group__row {
        flex-direction: column;
        align-items: stretch;
    }

    .user-management-bulk {
        justify-content: flex-start;
    }

    .user-management-toggles {
        width: 100%;
        padding-left: 36%;
    }

    .user-management-toggles .toggle-field {
        grid-template-columns: 1fr;
    }

    .user-management-toggles .toggle-btn {
        width: auto;
        max-width: 72px;
        justify-self: start;
    }

    .user-management-reason--inline {
        width: 100%;
    }

    .user-management-card--activity,
    .user-management-activity-row .user-management-card--activity {
        width: calc(100% - 12px);
        max-width: calc(100% - 12px);
        margin-right: 0;
    }
}

.messages-archive-detail {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Ratings page ── */
.ratings {
    margin: 1rem auto 2rem;
    max-width: min(720px, 100%);
    display: grid;
    gap: 1.2rem;
    padding: 0 0.5rem;
}

.ratings__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ratings__title {
    font-size: 1.3rem;
    margin: 0.1rem 0 0;
}

.ratings__summary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1rem 1.4rem;
}

.ratings__score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 100px;
}

.ratings__score-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.ratings__score-value--empty {
    color: #cbd5e1;
}

.ratings__score-stars {
    display: flex;
    gap: 0.1rem;
    font-size: 1.1rem;
}

.ratings__star {
    color: #e2e8f0;
}

.ratings__star.is-full {
    color: #f59e0b;
}

.ratings__star.is-half {
    color: #fbbf24;
}

.ratings__score-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.15rem;
}

.ratings__stats {
    display: flex;
    gap: 1.2rem;
    margin-left: auto;
}

.ratings__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    min-width: 80px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

a.ratings__stat:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.ratings__stat--active {
    background: #0f3a2f;
    border-color: #0f3a2f;
}

.ratings__stat--active .ratings__stat-number {
    color: #fff;
}

.ratings__stat--active .ratings__stat-label {
    color: rgba(255, 255, 255, 0.75);
}

.ratings__stat-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

.ratings__stat-label {
    font-size: 0.68rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ratings__list {
    display: grid;
    gap: 0.6rem;
}

.rating-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.75rem 1rem;
    display: grid;
    gap: 0.4rem;
    transition: box-shadow 0.15s;
}

.rating-card:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.rating-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rating-card__stars {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    font-size: 1rem;
}

.rating-card__star {
    color: #e2e8f0;
}

.rating-card__star.is-full {
    color: #f59e0b;
}

.rating-card__value {
    font-size: 0.85rem;
    color: #0f172a;
    margin-left: 0.3rem;
}

.rating-card__date {
    font-size: 0.72rem;
    color: #94a3b8;
}

.rating-card__quote {
    margin: 0;
    padding: 0.45rem 0.7rem;
    border-left: 3px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.45;
    font-style: italic;
}

.rating-card__quote p {
    margin: 0;
}

.rating-card__footer {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #64748b;
    flex-wrap: wrap;
}

.rating-card__author {
    font-weight: 600;
    color: #334155;
}

.rating-card__role {
    background: #f1f5f9;
    border-radius: 4px;
    padding: 0.02rem 0.35rem;
    font-size: 0.66rem;
    font-weight: 500;
    color: #64748b;
}

.rating-card__divider {
    color: #cbd5e1;
}

.rating-card__listing {
    color: #475569;
    text-decoration: none;
}

a.rating-card__listing:hover {
    color: #1e40af;
    text-decoration: underline;
}

.rating-card__tags {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.rating-card__tag {
    font-size: 0.66rem;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.ratings__distribution {
    display: grid;
    gap: 0.25rem;
    flex: 1;
    max-width: 220px;
}

.ratings__active-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

/* Page-variant quote cards (wider, more detail) */
.rating-comment-card--page {
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: box-shadow 0.15s;
}

.rating-comment-card--page:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.rating-comment-card--page .rating-comment-card__quote {
    font-size: 0.9rem;
}

.rating-comment-card__listing {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    font-size: 0.78rem;
}

.rating-comment-card__listing svg {
    color: #9ca3af;
    flex-shrink: 0;
}

.rating-comment-card__listing a {
    color: #0f3a2f;
    text-decoration: none;
}

.rating-comment-card__listing a:hover {
    text-decoration: underline;
}

/* Pagination */
.ratings__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;
}

.ratings__pagination-info {
    min-width: 5rem;
    text-align: center;
}

.ratings__empty {
    text-align: center;
    padding: 2rem 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: #64748b;
}

@media (max-width: 560px) {
    .ratings__summary {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
    }
    .ratings__stats {
        margin-left: 0;
    }
    .ratings__distribution {
        max-width: 100%;
    }
}

.thread-detail-card {
    border: 1px solid rgba(15, 23, 42, 0.3);
    border-radius: 16px;
    padding: 0.75rem;
    background: #fff;
    gap: 0.75rem;
    width: min(420px, 80vw);
    max-width: 100%;
    margin: 0 auto 0 0;
    box-sizing: border-box;
}

.thread-detail-card.user-insight-detail {
    width: 100%;
    max-width: none;
    margin: 0;
}
.thread-detail-card.reported-listing-detail {
    width: 100%;
    max-width: none;
    margin: 0;
}
.thread-detail-card.reported-listing-detail--conversations {
    border: 0;
    background: transparent;
    padding: 0;
}

.thread-detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.thread-detail-toolbar--compact {
    justify-content: flex-end;
}

.thread-detail-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #0f172a;
}

.thread-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.thread-detail-card .chat-history {
    max-height: 340px;
}

.chat-history {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: min(480px, 50vh);
    overflow-y: auto;
    padding-right: 0.5rem;
}

.chat-history__load-more {
    display: flex;
    justify-content: center;
    align-self: center;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.chat-bubble {
    border-radius: 16px;
    padding: 0.45rem 0.75rem;
    max-width: 90%;
    background: #f1f5f9;
    margin-block: 0;
}

.chat-bubble--vendor {
    background: #dbeafe;
    margin-left: auto;
}

.chat-bubble--system {
    width: min(70%, 760px);
    max-width: min(70%, 760px);
    margin-left: auto;
    margin-right: auto;
    background: #fef3c7;
    border: 1px solid #fef3c7;
    box-shadow: none;
}

.chat-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: #475467;
    margin-bottom: 0.15rem;
}

.chat-meta strong {
    position: relative;
    padding-right: 0.9rem;
    margin-right: 0.35rem;
}

.chat-meta strong::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 0.85rem;
    background: rgba(15, 23, 42, 0.2);
}

.chat-bubble p {
    margin: 0;
    line-height: 1.35;
}

.chat-system-toggle-wrap {
    width: min(70%, 760px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.chat-system-toggle-wrap::before,
.chat-system-toggle-wrap::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    border-top: 1px dashed rgba(148, 163, 184, 0.7);
}

.chat-system-toggle-btn {
    border: none;
    background: transparent;
    padding: 0.1rem 0.25rem;
    font-size: 0.73rem;
    line-height: 1.2;
    color: #64748b;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}

.chat-system-toggle-btn:hover,
.chat-system-toggle-btn:focus-visible {
    color: #334155;
}

.chat-system-collapsed {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-system-collapsed[hidden] {
    display: none;
}

.chat-reply {
    border: 1.5px solid rgba(37, 99, 235, 0.3);
    border-radius: 14px;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    padding: 0.5rem 0.55rem;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.06);
}

.chat-reply textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: #ffffff;
    padding: 0.5rem 0.6rem;
    font-size: 0.92rem;
    line-height: 1.35;
    min-height: 72px;
    max-height: 150px;
    resize: vertical;
}

.chat-reply textarea:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.chat-reply__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 0.35rem;
}

.chat-reply__counter {
    font-size: 0.72rem;
    color: #94a3b8;
    user-select: none;
}

.chat-reply__actions .btn {
    min-height: 34px;
    padding: 0.34rem 0.9rem;
    font-size: 0.88rem;
    border-radius: 999px;
}

.chat-reply--blocked {
    border-color: rgba(220, 38, 38, 0.28);
    background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
}

.chat-reply--blocked textarea {
    border-color: rgba(220, 38, 38, 0.35);
    background: #fff1f2;
    color: #991b1b;
}
.chat-reply--blocked-extra {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    color: #7f1d1d;
    display: grid;
    gap: 0.35rem;
}
.chat-reply--blocked-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.chat-reply--blocked-actions form {
    margin: 0;
}

.empty-chat {
    text-align: center;
    padding: 3rem 1rem;
}

.seller-message-card.is-highlighted {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
    transition: box-shadow 0.2s ease;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.75rem;
}
.badge--warning { background: #f59e0b; color: #fff; }
.badge--muted { background: #9ca3af; color: #fff; }

/* Reported ratings admin */
.reported-ratings-list { display: flex; flex-direction: column; gap: .5rem; }
.reported-rating-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem;
  padding: .5rem .75rem; font-size: .78rem;
}
.reported-rating-card--resolved { opacity: .5; }
.reported-rating-card__top {
  display: flex; align-items: flex-start; gap: .75rem;
}
.reported-rating-card__content { flex: 1; min-width: 0; }
.reported-rating-card__quote {
  font-style: italic; color: #374151; line-height: 1.35; margin-bottom: .25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reported-rating-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  font-size: .68rem; color: #6b7280;
}
.reported-rating-card__right {
  display: flex; align-items: center; gap: .35rem; flex-shrink: 0;
}
.reported-rating-card__right form { display: inline; }
.reported-rating-card__link { color: #2563eb; text-decoration: none; }
.reported-rating-card__link:hover { text-decoration: underline; }

.message-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1400;
}

.contact-modal {
    align-items: center;
    padding-top: 0;
}

.contact-modal .message-modal__actions {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    align-items: center;
}

.modal-choice-btn {
    height: 31px;
    min-height: 31px;
    min-width: 70px;
    padding: 0 0.78rem;
    line-height: 1;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    background: #fff;
    color: #111827;
    box-shadow: none;
    box-sizing: border-box;
}

.modal-choice-btn:hover,
.modal-choice-btn:focus-visible {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.3);
    color: #111827;
}

.modal-choice-btn--confirm {
    border-color: #dc2626;
    color: #dc2626;
}

.modal-choice-btn--confirm:hover,
.modal-choice-btn--confirm:focus-visible {
    background: #fef2f2;
    border-color: #dc2626;
    color: #b91c1c;
}

.modal-choice-btn--cancel {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.modal-choice-btn--cancel:hover,
.modal-choice-btn--cancel:focus-visible {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.contact-modal .message-modal__actions form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.message-modal[hidden] {
    display: none;
}

.message-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.message-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border-radius: 22px;
    border: 1px solid var(--border);
    padding: 1.5rem;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
}

.message-modal .stack {
    width: 100%;
}

.message-modal textarea {
    max-width: 100%;
    width: 100%;
    resize: none;
    box-sizing: border-box;
}

.message-modal input[type="text"],
.message-modal input[type="number"],
.message-modal input[type="email"],
.message-modal input[type="tel"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.message-modal .modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    left: auto;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #475467;
}

.message-modal form label span {
    font-weight: 500;
}

.message-modal__status {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: #15803d;
}

.message-modal__status.is-error {
    color: #dc2626;
}

body.modal-open {
    overflow: hidden;
}

.admin-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--listing-card-width, 160px), 1fr));
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .admin-listings-grid {
        --listing-card-width: clamp(120px, 45vw, 145px);
        grid-template-columns: repeat(2, minmax(var(--listing-card-width), 1fr));
        gap: 0.35rem;
    }
    .admin-listings-grid .listing-card {
        width: var(--listing-card-width);
        max-width: var(--listing-card-width);
        margin: 0 auto;
    }
}

@media (max-width: 970px) {
    .messages-grid {
        grid-template-columns: 1fr;
    }
    .messages {
        padding: 0 0.35rem;
    }
    .messages-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .messages-head__actions {
        width: 100%;
        justify-content: flex-start;
    }
    .messages-thread-list,
    .messages-chat {
        width: 100%;
    }
    .thread-section__head {
        flex-wrap: wrap;
    }
    .thread-section__sort {
        width: 100%;
    }
    .thread-section__sort-select {
        width: 100%;
    }
    .chat-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .chat-head__actions {
        flex-direction: column;
        align-items: flex-end;
        width: fit-content;
        flex-wrap: nowrap;
        align-self: flex-end;
        margin-left: auto;
    }
    .chat-actions-menu {
        align-self: flex-end;
        margin-left: auto;
    }
    .chat-head__link {
        width: 100%;
        justify-content: flex-start;
    }
    .chat-actions-menu__popover {
        right: 0;
        left: auto;
        width: min(240px, 80vw);
    }
}

.settings {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 0 2.5rem;
}

.glass-shell {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px;
    margin-top: 35px;
}

.settings .form-card {
    max-width: none;
    margin: 0;
    padding: 1.25rem 1.5rem;
    border-radius: 18px;
}

.settings-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: flex-start;
}

.settings-hero h1 {
    font-size: 1.6rem;
    margin: 0;
}

.settings-hero p {
    margin: 0.1rem 0;
    line-height: 1.4;
    font-size: 0.95rem;
}

.settings-hero-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.settings-avatar {
    position: relative;
}

.avatar-trigger {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    min-width: 80px;
}

.avatar-trigger-hint {
    font-size: 0.75rem;
    color: #64748b;
}

.settings-avatar-thumb {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--avatar-fg, #0f172a);
    background: var(--avatar-bg, #dbeafe);
    text-transform: uppercase;
    font-size: 1rem;
    padding: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.settings-avatar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.avatar-emoji {
    font-size: 1.6rem;
    line-height: 1;
}

.avatar-picker-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    padding: 0.75rem;
    width: min(320px, 70vw);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
    z-index: 20;
}

.avatar-picker-head {
    margin-bottom: 0.5rem;
}

.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.4rem;
    max-height: 280px;
    overflow-y: auto;
}

.avatar-option {
    border: none;
    border-radius: 16px;
    padding: 0.35rem;
    height: 70px;
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--avatar-fg, #0f172a);
    background: var(--avatar-bg, #dbeafe);
    text-transform: uppercase;
    text-align: center;
    gap: 0.15rem;
}

.avatar-option:focus-visible,
.avatar-option:hover {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.avatar-option small {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: none;
    color: #0f172a;
}

.avatar-option img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
}

.settings-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.settings-panel header {
    margin-bottom: 0.5rem;
    display: grid;
    gap: 0.15rem;
}

.settings-panel header h2 {
    font-size: 1.05rem;
    margin: 0;
}

.settings-panel header p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.settings-panel .grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.5rem;
}

.settings-panel .toggle {
    display: grid;
    grid-template-columns: 18px 1fr;
    column-gap: 0.55rem;
    align-items: flex-start;
    padding: 0.15rem 0;
    font-size: 0.92rem;
}

.settings-panel .toggle input {
    margin: 0.2rem 0 0 0;
}

.settings-panel .toggle span {
    line-height: 1.35;
    display: block;
}

.mobile-hand-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mobile-hand-options .theme-pill {
    flex: 1 1 120px;
    justify-content: center;
}

.mobile-hand-status {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
}

.settings-panel.danger-zone {
    border-color: #fecaca;
    background: #fff6f6;
}

.settings-panel form label {
    font-size: 0.88rem;
    display: grid;
    gap: 0.2rem;
    line-height: 1.2;
}

.settings-panel form label span {
    font-weight: 500;
}

.settings-panel form input,
.settings-panel form select,
.settings-panel form textarea {
    font-size: 0.9rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    box-sizing: border-box;
    width: 100%;
}

.settings-panel form input[readonly],
.settings-panel form select[readonly] {
    background: #f5f5f5;
    color: #475467;
}

.settings-panel form textarea {
    min-height: 70px;
    resize: none;
}

.settings-panel form .btn {
    margin-top: 0.3rem;
}

.wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.wallpaper-option {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.55rem;
    background: var(--surface);
    display: grid;
    gap: 0.45rem;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

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

.wallpaper-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.wallpaper-thumb--none {
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    color: #64748b;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(226, 232, 240, 0.9));
}

.wallpaper-label {
    font-size: 0.82rem;
    color: #1f2937;
}

.wallpaper-option input:checked + .wallpaper-thumb {
    border-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.wallpaper-option input:checked ~ .wallpaper-label {
    font-weight: 600;
}

.wallpaper-option:hover {
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.wallpaper-option .btn {
    justify-self: flex-start;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
}

.wallpaper-upload {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.45);
}

.admin-console .wallpaper-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.settings-panel .info-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    background: #f8fafc;
}

.info-card.info-card--compact {
    background: #ffffff;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    max-width: 520px;
}

.info-card.info-card--compact.info-card--guest {
    background: rgba(17, 23, 39, 0.95);
    color: #ffffff;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.35);
}

.info-card.info-card--compact.info-card--guest .eyebrow,
.info-card.info-card--compact.info-card--guest .muted,
.info-card.info-card--compact.info-card--guest .muted.small {
    color: #e2e8f0;
}

.info-card.info-card--compact.info-card--guest .form-row__label {
    color: #f8fafc;
    background: transparent;
    border-radius: 0;
    padding: 0;
    display: block;
}

.info-card.info-card--compact.info-card--guest .form-row__control {
    background: rgba(15, 23, 42, 0.65);
    color: #ffffff;
    border-color: rgba(148, 163, 184, 0.4);
    border-radius: 999px;
    padding: 0.55rem 1.05rem;
    font-size: 0.9rem;
}

.info-card.info-card--compact.info-card--guest .form-row__control::placeholder {
    color: rgba(226, 232, 240, 0.6);
}

.info-card.info-card--compact.info-card--guest a.muted {
    color: #e2e8f0;
}

.info-card.info-card--compact .eyebrow {
    margin-bottom: 0.35rem;
}

.info-card.info-card--compact .mobile-hand-options {
    margin-top: 0.5rem;
}

.settings-panel .info-card p {
    margin: 0;
}

.cookie-limitations {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #0f172a;
}

.cookie-limitations li {
    display: flex;
    gap: 0.35rem;
    line-height: 1.4;
}

.cookie-limitations li::before {
    content: "•";
    color: var(--accent, #2563eb);
    font-weight: 700;
}

.cookie-banner .cookie-limitations {
    color: #e2e8f0;
    margin-top: 0;
}

.cookie-banner .cookie-limitations li::before {
    color: #34d399;
}

.cookie-restriction {
    border: 1px dashed rgba(15, 23, 42, 0.2);
    border-radius: 14px;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.03);
    margin-bottom: 0.75rem;
    text-align: left;
}

.cookie-restriction p {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
}

.cookie-restriction a {
    font-weight: 600;
    color: var(--accent, #2563eb);
    text-decoration: none;
}

.cookie-restriction a:hover,
.cookie-restriction a:focus-visible {
    text-decoration: underline;
}

.settings-actions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.settings-actions li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.settings-actions .btn {
    white-space: nowrap;
}

.settings-panel .toggle strong {
    font-weight: 600;
    font-size: 0.95rem;
}

.settings-panel .toggle small {
    font-size: 0.85rem;
}

.settings-collapse summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    gap: 0.75rem;
    padding: 0.3rem 0;
}

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

.settings-collapse .collapse-indicator {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

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

.settings-collapse-body {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.5rem;
}

@media (max-width: 970px) {
    .settings-hero {
        flex-direction: column;
        gap: 1rem;
    }

    .settings-hero-meta {
        width: 100%;
        justify-content: flex-start;
    }
}

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

    .settings-actions li {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Compact account settings layout */
.settings {
    gap: 0.75rem;
    padding-bottom: 1.75rem;
}

.settings .form-card {
    padding: 0.72rem 0.82rem;
    border-radius: 12px;
    box-sizing: border-box;
}

.settings-hero {
    gap: 0.75rem;
}

.settings-hero h1 {
    font-size: 1.28rem;
}

.settings-hero p {
    font-size: 0.84rem;
    line-height: 1.35;
}

.settings-hero-meta {
    gap: 0.75rem;
}

.settings-tags {
    margin-top: 0.2rem;
    gap: 0.25rem;
}

.settings-grid {
    display: block;
    column-width: 320px;
    column-gap: 0.7rem;
}

.settings-grid .settings-panel {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.7rem;
    box-sizing: border-box;
    overflow: hidden;
    break-inside: avoid;
}

.settings-panel > header,
.settings-collapse > summary {
    margin-bottom: 0.45rem;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    position: relative;
    padding-right: 88px;
}

.settings-panel > header h2,
.settings-collapse summary h2 {
    font-size: 0.98rem;
    line-height: 1.2;
    margin: 0;
}

.settings-panel > header p,
.settings-collapse summary p {
    width: 100%;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.3;
}

.settings-panel .stack {
    gap: 0.38rem;
}

.settings-panel .grid-2 {
    gap: 0.45rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.settings-panel form label {
    font-size: 0.76rem;
    gap: 0.18rem;
}

.settings-panel form label span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475467;
}

.settings-panel form input,
.settings-panel form select,
.settings-panel form textarea {
    font-size: 0.81rem;
    border-radius: 10px;
    padding: 0.28rem 0.52rem;
    min-height: 31px;
}

.settings-panel form input::placeholder,
.settings-panel form textarea::placeholder {
    color: #b8c1cf;
}

.settings-panel form input.is-filled:not([type="checkbox"]):not([type="radio"]):not([readonly]),
.settings-panel form textarea.is-filled:not([readonly]),
.settings-panel form select.is-filled:not([readonly]) {
    background: #eaf8ee !important;
    border-color: #7fce9d !important;
}

.settings-panel form input.is-filled:not([type="checkbox"]):not([type="radio"]):not([readonly]):focus,
.settings-panel form textarea.is-filled:not([readonly]):focus,
.settings-panel form select.is-filled:not([readonly]):focus {
    background: #eaf8ee !important;
    border-color: #4fbf7b !important;
}

.settings-panel form textarea {
    min-height: 56px;
}

.settings-panel .toggle {
    grid-template-columns: 16px 1fr;
    column-gap: 0.4rem;
    padding: 0;
    font-size: 0.78rem;
}

.settings-panel .toggle strong {
    font-size: 0.8rem;
}

.settings-panel .toggle small {
    font-size: 0.75rem;
    line-height: 1.25;
}

.settings-panel form .btn {
    margin-top: 0.15rem;
    min-height: 30px;
    padding: 0.2rem 0.62rem;
    font-size: 0.77rem;
    justify-self: start;
    width: auto;
    max-width: 100%;
    box-shadow: none;
    line-height: 1.2;
}

.settings-panel .info-card {
    border-radius: 10px;
    padding: 0.46rem 0.55rem;
}

.settings-panel .info-card p,
.cookie-limitations,
.cookie-limitations li {
    font-size: 0.72rem;
    line-height: 1.3;
}

.settings-actions {
    gap: 0.5rem;
}

.settings-actions li {
    gap: 0.6rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 10px;
}

.settings-actions li strong {
    font-size: 0.84rem;
}

.settings-actions li .muted.tiny {
    font-size: 0.7rem;
}

.settings .theme-pill span {
    padding: 0.14rem 0.55rem;
    font-size: 0.76rem;
    min-height: 28px;
}

.settings-card-state {
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    position: absolute;
    top: 0;
    right: 0;
}

.settings-card-state .dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

.settings-card-state.is-saved {
    color: #0f7a4f;
    background: #dcfce7;
    border-color: #86efac;
}

.settings-card-state.is-dirty {
    color: #9a3412;
    background: #ffedd5;
    border-color: #fdba74;
}

@media (max-width: 840px) {
    .settings-grid {
        column-count: 1;
    }

    .settings .form-card {
        padding: 0.7rem 0.74rem;
    }
}

.listing-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
}

.listing-manage {
    position: relative;
    display: inline-flex;
    margin-left: auto;
}

.action-menu-toggle {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--text);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.action-menu-toggle-shell {
    position: relative;
    display: inline-flex;
}

.listing-manage-shell--detail .action-menu-toggle-shell {
    margin-left: auto;
}

.action-menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 200px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 0.35rem;
    display: grid;
    gap: 0.2rem;
    z-index: 15;
}

.action-menu-dropdown[hidden] {
    display: none;
}

.action-menu-link,
.action-menu-dropdown button {
    border: none;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.25rem;
    border-radius: 8px;
    background: transparent;
    font-size: 0.78rem;
    cursor: pointer;
    color: #0f172a;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    text-decoration: none;
    white-space: normal;
    transition: background 0.15s ease, color 0.15s ease;
}

.action-menu-dropdown button.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-menu-dropdown button:hover,
.action-menu-link:hover,
.action-menu-dropdown button:focus-visible,
.action-menu-link:focus-visible {
    background: rgba(37, 99, 235, 0.12);
    color: #1e3a8a;
    outline: none;
}

.action-menu-dropdown .danger-link {
    color: #7f1d1d;
}

.action-menu-dropdown .danger-link:hover,
.action-menu-dropdown .danger-link:focus-visible {
    background: #fee2e2;
    color: #991b1b;
}

.action-menu-quick {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    display: grid;
    gap: 0.35rem;
}

.action-menu-quick__title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0;
}

.action-menu-quick__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.action-menu-quick__buttons .hero-chip {
    width: 100%;
    justify-content: flex-start;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.4rem 0.25rem;
    border-radius: 8px;
    color: #0f172a;
    transition: background 0.15s ease, color 0.15s ease;
}

.action-menu-quick__buttons .quick-action-form {
    margin: 0;
    width: 100%;
}

.action-menu-quick__buttons .hero-chip:hover,
.action-menu-quick__buttons .hero-chip:focus-visible {
    background: rgba(37, 99, 235, 0.12);
    color: #1e3a8a;
    outline: none;
    box-shadow: none;
}

.action-menu-quick__buttons .hero-chip.is-active {
    background: rgba(37, 99, 235, 0.18);
    color: #1e3a8a;
    box-shadow: none;
}

.danger-link {
    color: #b91c1c;
}

.admin-console {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto 2.5rem;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    gap: 0.75rem;
    overflow-x: hidden;
}

.system-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1rem;
    background: #fff;
    display: grid;
    gap: 0.75rem;
}

@media (max-width: 980px) {
    .dashboard-hero__layout {
        grid-template-columns: 1fr;
    }
    .dashboard-chart-card {
        min-height: 0;
    }
    .dashboard-chart-card__head {
        flex-direction: column;
    }
    .dashboard-chart-card__controls {
        flex-direction: row;
        align-items: center;
    }
    .dashboard-chart-card__years {
        justify-content: flex-start;
    }
}

.admin-notifications-form {
    display: grid;
    gap: 0.95rem;
}

.admin-notifications-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.admin-notifications-form > .admin-notifications-grid {
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.88), rgba(255, 255, 255, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.admin-notifications-form > .admin-notifications-grid > label:nth-child(1),
.admin-notifications-form > .admin-notifications-grid > label:nth-child(2) {
    grid-column: span 6;
}

.admin-notifications-form > .admin-notifications-grid > label:nth-child(3),
.admin-notifications-form > .admin-notifications-grid > label:nth-child(4) {
    grid-column: span 3;
}

.admin-notifications-filters > .admin-notifications-grid > label:nth-child(1),
.admin-notifications-filters > .admin-notifications-grid > label:nth-child(2),
.admin-notifications-filters > .admin-notifications-grid > label:nth-child(3),
.admin-notifications-filters > .admin-notifications-grid > label:nth-child(4) {
    grid-column: span 6;
}

.admin-notifications-filters > .admin-notifications-grid > label:nth-child(6) {
    grid-column: span 4;
}

.admin-notifications-grid__wide {
    grid-column: 1 / -1;
}

.admin-notifications-filters {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.admin-notifications-filters > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "eyebrow sendall"
        "quick sendall";
    align-items: start;
    gap: 0.5rem 0.9rem;
    padding: 0.15rem 0.1rem 0.1rem;
}

.admin-notifications-filters > div:first-child .eyebrow {
    grid-area: eyebrow;
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: #64748b;
}

.admin-notifications-quick {
    grid-area: quick;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.admin-notifications-quick .chip input {
    margin: 0;
    accent-color: #2563eb;
}

.admin-notifications-quick .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    color: #0f172a;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-height: 38px;
    white-space: nowrap;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.admin-notifications-quick .chip:focus-within {
    border-color: rgba(37, 99, 235, 0.35);
    background: #f8fbff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.admin-notifications-form .input,
.admin-notifications-form select,
.admin-notifications-form textarea {
    width: 100%;
    font-size: 0.86rem;
    line-height: 1.35;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #ffffff;
    color: #0f172a;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.admin-notifications-form .input:focus,
.admin-notifications-form select:focus,
.admin-notifications-form textarea:focus {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
    outline: none;
}

.admin-notifications-form textarea {
    min-height: 92px;
    resize: vertical;
}

.admin-notifications-sendall {
    grid-area: sendall;
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8rem;
    color: #334155;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.22);
    white-space: nowrap;
}

.admin-notifications-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 0.2rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.admin-notifications-actions .btn.primary {
    min-width: 180px;
    padding-inline: 1rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.admin-notifications-form .stack.tiny > span:first-child {
    font-size: 0.76rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.2rem;
}

.admin-notifications-filters > .admin-notifications-grid {
    padding-top: 0.25rem;
}

@media (max-width: 980px) {
    .admin-notifications-form > .admin-notifications-grid > label:nth-child(3),
    .admin-notifications-form > .admin-notifications-grid > label:nth-child(4) {
        grid-column: span 6;
    }
    .admin-notifications-sendall {
        white-space: normal;
        text-align: left;
    }
}

@media (max-width: 720px) {
    .admin-notifications-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }
    .admin-notifications-form > .admin-notifications-grid,
    .admin-notifications-filters {
        padding: 0.85rem;
    }
    .admin-notifications-form > .admin-notifications-grid > label,
    .admin-notifications-filters > .admin-notifications-grid > label,
    .admin-notifications-grid__wide {
        grid-column: 1;
    }
    .admin-notifications-filters > div:first-child {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "quick"
            "sendall";
        gap: 0.55rem;
    }
    .admin-notifications-sendall {
        justify-self: stretch;
        white-space: normal;
    }
    .admin-notifications-actions {
        justify-content: stretch;
    }
    .admin-notifications-actions .btn.primary {
        width: 100%;
        min-width: 0;
    }
}

.admin-notifications-page {
    max-width: 1120px;
    gap: 1rem;
}

.admin-notifications-page .system-card {
    border-radius: 18px;
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
    padding: 1.05rem;
    gap: 0.9rem;
}

.admin-notifications-page .section-head.section-head--tight {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.admin-notifications-page .section-head.section-head--tight h2,
.admin-notifications-page .section-head.section-head--tight h3 {
    margin: 0;
    line-height: 1.2;
}

.admin-notifications-page .section-head.section-head--tight h2 {
    font-size: 1.05rem;
}

.admin-notifications-page .section-head.section-head--tight h3 {
    font-size: 0.98rem;
}

.admin-notifications-page .section-head.section-head--tight p {
    margin: 0.2rem 0 0;
    max-width: 68ch;
    color: #64748b;
}

.admin-notifications-composer-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.05), transparent 48%),
        radial-gradient(circle at 0% 100%, rgba(15, 23, 42, 0.04), transparent 56%),
        #fff;
}

.admin-notifications-history-card {
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.65), rgba(255, 255, 255, 1) 34%);
}

.admin-notifications-page .admin-notifications-form {
    gap: 0.85rem;
}

.admin-notifications-page .admin-notifications-form > .admin-notifications-grid {
    gap: 0.7rem;
    padding: 0.95rem;
}

.admin-notifications-page .admin-notifications-filters {
    gap: 0.8rem;
    padding: 0.95rem;
}

.admin-notifications-page .admin-notifications-form .stack.tiny {
    gap: 0.28rem;
}

.admin-notifications-page .admin-notifications-form .stack.tiny > span:first-child {
    font-size: 0.73rem;
    letter-spacing: 0.02em;
}

.admin-notifications-page .admin-notifications-form .input,
.admin-notifications-page .admin-notifications-form select,
.admin-notifications-page .admin-notifications-form textarea {
    min-height: 38px;
    padding: 0.48rem 0.65rem;
    font-size: 0.84rem;
    border-radius: 9px;
}

.admin-notifications-page .admin-notifications-form textarea {
    min-height: 86px;
}

.admin-notifications-page .admin-notifications-quick {
    gap: 0.45rem;
}

.admin-notifications-page .admin-notifications-quick .chip {
    min-height: 34px;
    padding: 0.32rem 0.7rem;
    font-size: 0.77rem;
}

.admin-notifications-page .admin-notifications-sendall {
    min-height: 34px;
    padding: 0.35rem 0.65rem;
    font-size: 0.76rem;
    border-radius: 10px;
}

.admin-notifications-page .admin-notifications-actions {
    padding-top: 0.5rem;
}

.admin-notifications-page .admin-notifications-actions .btn.primary {
    min-width: 168px;
    min-height: 38px;
    border-radius: 10px;
    font-size: 0.86rem;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

.admin-notifications-history-controls {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: end;
    margin: 0;
    padding: 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

.admin-notifications-history-controls .admin-limit-picker {
    display: grid;
    gap: 0.24rem;
    min-width: 0;
    font-size: 0.78rem;
    color: #475569;
}

.admin-notifications-history-controls .admin-limit-picker span {
    font-weight: 600;
    color: #334155;
}

.admin-notifications-history-controls .admin-limit-picker select,
.admin-notifications-history-controls .admin-limit-picker input {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #fff;
    padding: 0.42rem 0.65rem;
    font-size: 0.84rem;
    box-sizing: border-box;
}

.admin-notifications-history-controls .admin-limit-picker select:focus,
.admin-notifications-history-controls .admin-limit-picker input:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.admin-notifications-history-controls .btn {
    min-height: 36px;
    border-radius: 10px;
    padding: 0.35rem 0.85rem;
    align-self: end;
}

.admin-notifications-history-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: end;
}

.admin-notifications-history-pagination--top {
    margin: 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
    min-height: 52px;
    align-self: stretch;
}

.admin-notifications-history-pagination--top .muted.small {
    margin-right: 0;
    white-space: nowrap;
}

.admin-notifications-history-table {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.admin-notifications-history-table .admin-listings-row {
    display: grid;
    grid-template-columns: 150px minmax(200px, 1.25fr) 110px minmax(260px, 2fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.admin-notifications-history-table .admin-listings-row:first-child {
    border-top: none;
}

.admin-notifications-history-table .admin-listings-row > div {
    min-width: 0;
    word-break: break-word;
}

.admin-notifications-history-table .admin-listings-row--head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    border-top: none;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.admin-notifications-history-table .admin-listings-row:not(.admin-listings-row--head):not(.admin-listings-row--empty):hover {
    background: rgba(248, 250, 252, 0.85);
}

.admin-notifications-history-table .admin-listings-row:not(.admin-listings-row--head):not(.admin-listings-row--empty) > div:nth-child(1) {
    font-size: 0.78rem;
    color: #475569;
    white-space: nowrap;
}

.admin-notifications-history-table .admin-listings-row:not(.admin-listings-row--head):not(.admin-listings-row--empty) > div:nth-child(2) {
    font-size: 0.82rem;
    color: #0f172a;
}

.admin-notifications-history-table .admin-listings-row:not(.admin-listings-row--head):not(.admin-listings-row--empty) > div:nth-child(3) {
    justify-self: start;
    align-self: start;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #f8fafc;
    color: #334155;
    font-size: 0.74rem;
    line-height: 1.2;
}

.admin-notifications-history-table .admin-listings-row:not(.admin-listings-row--head):not(.admin-listings-row--empty) > div:nth-child(4) {
    line-height: 1.3;
}

.admin-notifications-history-table .admin-listings-row strong {
    display: inline-block;
    margin-bottom: 0.12rem;
    font-size: 0.86rem;
    line-height: 1.25;
    color: #0f172a;
}

.admin-notifications-history-table .admin-listings-row .muted.tiny {
    display: inline-block;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.35;
}

.admin-notifications-history-table .admin-listings-row--empty {
    grid-template-columns: 1fr;
    padding: 1rem 0.85rem;
    color: #64748b;
}

.admin-notifications-history-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
    margin-top: 0.1rem;
    padding-top: 0.2rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.admin-notifications-history-pagination .btn {
    border-radius: 10px;
}

.admin-notifications-history-pagination .btn.is-current {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
    pointer-events: none;
}

.admin-notifications-history-pagination .btn.is-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.admin-notifications-history-pagination .admin-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 0.2rem;
    color: #64748b;
    font-size: 0.82rem;
    user-select: none;
}

.admin-notifications-history-pagination .muted.small {
    margin-right: auto;
    font-size: 0.8rem;
}

@media (max-width: 980px) {
    .admin-notifications-history-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .admin-notifications-history-pagination--top {
        min-height: 0;
        justify-content: flex-start;
    }
    .admin-notifications-history-controls {
        grid-template-columns: 1fr 1fr;
    }
    .admin-notifications-history-controls .btn {
        grid-column: 1 / -1;
        justify-self: start;
    }
    .admin-notifications-history-table .admin-listings-row {
        grid-template-columns: 132px minmax(170px, 1fr) 96px minmax(180px, 1.4fr);
        gap: 0.6rem;
        padding-inline: 0.7rem;
    }
}

@media (max-width: 760px) {
    .admin-notifications-page .system-card {
        padding: 0.8rem;
        border-radius: 14px;
    }
    .admin-notifications-page .section-head.section-head--tight {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-notifications-history-controls {
        grid-template-columns: 1fr;
        padding: 0.7rem;
    }
    .admin-notifications-history-pagination--top {
        padding: 0.55rem;
    }
    .admin-notifications-history-pagination--top .muted.small {
        width: 100%;
    }
    .admin-notifications-history-controls .btn {
        width: 100%;
        justify-self: stretch;
    }
    .admin-notifications-history-table {
        border-radius: 12px;
        overflow: visible;
        border: none;
        background: transparent;
    }
    .admin-notifications-history-table .admin-listings-row--head {
        display: none;
    }
    .admin-notifications-history-table .admin-listings-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        padding: 0.75rem;
        margin-bottom: 0.55rem;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }
    .admin-notifications-history-table .admin-listings-row:not(.admin-listings-row--head):not(.admin-listings-row--empty) > div:nth-child(1) {
        white-space: normal;
        font-size: 0.76rem;
    }
    .admin-notifications-history-table .admin-listings-row:not(.admin-listings-row--head):not(.admin-listings-row--empty) > div:nth-child(3) {
        justify-self: start;
    }
    .admin-notifications-history-table .admin-listings-row--empty {
        margin-bottom: 0;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 12px;
        background: #fff;
    }
    .admin-notifications-history-pagination {
        justify-content: stretch;
        gap: 0.45rem;
    }
    .admin-notifications-history-pagination .muted.small {
        order: -1;
        width: 100%;
        margin-right: 0;
    }
    .admin-notifications-history-pagination .btn {
        flex: 1 1 0;
        text-align: center;
    }
    .admin-notifications-history-pagination .btn.is-current,
    .admin-notifications-history-pagination .btn.is-disabled {
        flex: 1 1 0;
    }
    .admin-notifications-history-pagination .admin-pagination__ellipsis {
        flex: 0 0 auto;
        padding-inline: 0.1rem;
    }
}

/* notifications page: denser minimalist pass */
.admin-notifications-page .system-card {
    padding: 0.9rem;
    gap: 0.75rem;
}

.admin-notifications-page .section-head.section-head--tight {
    gap: 0.55rem;
    padding-bottom: 0.15rem;
}

.admin-notifications-page .section-head.section-head--tight h2 {
    font-size: 0.96rem;
}

.admin-notifications-page .section-head.section-head--tight h3 {
    font-size: 0.9rem;
}

.admin-notifications-page .section-head.section-head--tight p {
    font-size: 0.76rem;
    line-height: 1.3;
    margin-top: 0.14rem;
}

.admin-notifications-page .section-head.section-head--tight .btn.small {
    min-height: 30px;
    padding: 0.22rem 0.6rem;
    border-radius: 9px;
    font-size: 0.78rem;
}

.admin-notifications-page .admin-notifications-form {
    gap: 0.7rem;
}

.admin-notifications-page .admin-notifications-form > .admin-notifications-grid {
    padding: 0.75rem;
    gap: 0.55rem;
    border-radius: 12px;
}

.admin-notifications-page .admin-notifications-filters {
    padding: 0.75rem;
    gap: 0.65rem;
    border-radius: 12px;
}

.admin-notifications-page .admin-notifications-filters > div:first-child {
    gap: 0.4rem 0.6rem;
}

.admin-notifications-page .admin-notifications-filters > div:first-child .eyebrow {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
}

.admin-notifications-page .admin-notifications-form .stack.tiny {
    gap: 0.2rem;
}

.admin-notifications-page .admin-notifications-form .stack.tiny > span:first-child {
    font-size: 0.67rem;
    margin-bottom: 0;
    color: #475569;
}

.admin-notifications-page .admin-notifications-form .input,
.admin-notifications-page .admin-notifications-form select,
.admin-notifications-page .admin-notifications-form textarea {
    min-height: 32px;
    padding: 0.34rem 0.55rem;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.25;
}

.admin-notifications-page .admin-notifications-form textarea {
    min-height: 72px;
}

.admin-notifications-page .admin-notifications-quick {
    gap: 0.35rem;
}

.admin-notifications-page .admin-notifications-quick .chip {
    min-height: 28px;
    padding: 0.16rem 0.5rem;
    font-size: 0.72rem;
    gap: 0.3rem;
    border-radius: 999px;
    box-shadow: none;
}

.admin-notifications-page .admin-notifications-quick .chip input {
    transform: scale(0.9);
}

.admin-notifications-page .admin-notifications-sendall {
    min-height: 28px;
    padding: 0.18rem 0.5rem;
    font-size: 0.72rem;
    border-radius: 8px;
}

.admin-notifications-page .admin-notifications-actions {
    padding-top: 0.35rem;
}

.admin-notifications-page .admin-notifications-actions .btn.primary {
    min-height: 32px;
    min-width: 148px;
    padding-inline: 0.8rem;
    border-radius: 9px;
    font-size: 0.79rem;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.admin-notifications-page .admin-notifications-history-controls {
    padding: 0.65rem;
    gap: 0.45rem;
    border-radius: 12px;
}

.admin-notifications-page .admin-notifications-history-controls .admin-limit-picker {
    gap: 0.16rem;
    font-size: 0.72rem;
}

.admin-notifications-page .admin-notifications-history-controls .admin-limit-picker span {
    font-size: 0.72rem;
}

.admin-notifications-page .admin-notifications-history-controls .admin-limit-picker select,
.admin-notifications-page .admin-notifications-history-controls .admin-limit-picker input {
    min-height: 32px;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    font-size: 0.78rem;
}

.admin-notifications-page .admin-notifications-history-controls .btn {
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
}

.admin-notifications-page .admin-notifications-history-pagination .btn {
    min-height: 32px;
    min-width: 32px;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    font-size: 0.76rem;
    line-height: 1.1;
}

.admin-notifications-page .admin-notifications-history-pagination .muted.small {
    font-size: 0.75rem;
}

.admin-notifications-page .admin-notifications-history-pagination .admin-pagination__ellipsis {
    min-height: 30px;
    font-size: 0.76rem;
}

.admin-notifications-page .admin-notifications-history-table {
    border-radius: 12px;
}

.admin-notifications-page .admin-notifications-history-table .admin-listings-row {
    grid-template-columns: 132px minmax(220px, 1.45fr) minmax(220px, 1.55fr) 150px;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
}

.admin-notifications-page .admin-notifications-history-table .admin-listings-row--head {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    padding-top: 0.48rem;
    padding-bottom: 0.48rem;
}

.admin-notifications-page .admin-notifications-history-date {
    font-size: 0.73rem;
    color: #475569;
    white-space: nowrap;
}

.admin-notifications-page .admin-notifications-history-message,
.admin-notifications-page .admin-notifications-history-audience {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    align-content: start;
}

.admin-notifications-page .admin-notifications-history-message strong,
.admin-notifications-page .admin-notifications-history-audience strong {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.2;
    color: #0f172a;
}

.admin-notifications-page .admin-notifications-history-message .muted.tiny,
.admin-notifications-page .admin-notifications-history-audience .muted.tiny {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.25;
    color: #64748b;
}

.admin-notifications-page .admin-notifications-history-kind {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    margin-top: 0.12rem;
    padding: 0.08rem 0.38rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #f8fafc;
    color: #334155;
    font-size: 0.66rem;
    line-height: 1.15;
}

.admin-notifications-page .admin-notifications-history-hint {
    display: inline-block;
    margin-top: 0.08rem;
    font-size: 0.68rem;
    color: #475569;
    background: rgba(248, 250, 252, 0.9);
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 7px;
    padding: 0.14rem 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.admin-notifications-page .admin-notifications-history-stats {
    display: grid;
    gap: 0.22rem;
    align-content: start;
    justify-items: start;
}

.admin-notifications-page .admin-notifications-history-stats > span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.22rem;
    font-size: 0.7rem;
    color: #475569;
    padding: 0.14rem 0.4rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.18);
    line-height: 1.1;
}

.admin-notifications-page .admin-notifications-history-stats > span strong {
    font-size: 0.74rem;
    color: #0f172a;
}

.admin-notifications-page .admin-notifications-history-stats > span em {
    font-style: normal;
    color: #64748b;
    font-size: 0.66rem;
}

/* reset old nth-child styling for new history structure */
.admin-notifications-page .admin-notifications-history-table .admin-listings-row:not(.admin-listings-row--head):not(.admin-listings-row--empty) > div:nth-child(2),
.admin-notifications-page .admin-notifications-history-table .admin-listings-row:not(.admin-listings-row--head):not(.admin-listings-row--empty) > div:nth-child(3),
.admin-notifications-page .admin-notifications-history-table .admin-listings-row:not(.admin-listings-row--head):not(.admin-listings-row--empty) > div:nth-child(4) {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
}

@media (max-width: 980px) {
    .admin-notifications-page .admin-notifications-history-table .admin-listings-row {
        grid-template-columns: 116px minmax(160px, 1.25fr) minmax(160px, 1.25fr) 126px;
        gap: 0.45rem;
        padding: 0.5rem 0.55rem;
    }
}

@media (max-width: 760px) {
    .admin-notifications-page .system-card {
        padding: 0.7rem;
    }
    .admin-notifications-page .admin-notifications-form > .admin-notifications-grid,
    .admin-notifications-page .admin-notifications-filters,
    .admin-notifications-page .admin-notifications-history-controls {
        padding: 0.6rem;
    }
    .admin-notifications-page .admin-notifications-form .input,
    .admin-notifications-page .admin-notifications-form select,
    .admin-notifications-page .admin-notifications-form textarea,
    .admin-notifications-page .admin-notifications-history-controls .admin-limit-picker select,
    .admin-notifications-page .admin-notifications-history-controls .admin-limit-picker input {
        min-height: 30px;
        font-size: 0.76rem;
    }
    .admin-notifications-page .admin-notifications-history-table .admin-listings-row {
        padding: 0.6rem;
        gap: 0.28rem;
    }
    .admin-notifications-page .admin-notifications-history-date {
        font-size: 0.7rem;
    }
    .admin-notifications-page .admin-notifications-history-message strong,
    .admin-notifications-page .admin-notifications-history-audience strong {
        font-size: 0.76rem;
    }
    .admin-notifications-page .admin-notifications-history-message .muted.tiny,
    .admin-notifications-page .admin-notifications-history-audience .muted.tiny {
        font-size: 0.7rem;
    }
}

/* notifications composer: extra compact / minimalist tuning */
.admin-notifications-composer-card {
    max-width: 940px;
    width: 100%;
    justify-self: center;
}

.admin-notifications-page .admin-notifications-composer-card .section-head.section-head--tight {
    padding-bottom: 0.1rem;
}

.admin-notifications-page .admin-notifications-composer-card .section-head.section-head--tight h2 {
    font-size: 0.9rem;
}

.admin-notifications-page .admin-notifications-composer-card .section-head.section-head--tight p {
    font-size: 0.72rem;
    line-height: 1.25;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form {
    gap: 0.55rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form > .admin-notifications-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    padding: 0.65rem;
    gap: 0.45rem 0.5rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form > .admin-notifications-grid > label:nth-child(1),
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form > .admin-notifications-grid > label:nth-child(2) {
    grid-column: span 5;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form > .admin-notifications-grid > label:nth-child(3),
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form > .admin-notifications-grid > label:nth-child(4) {
    grid-column: span 2;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form > .admin-notifications-grid > label:nth-child(5) {
    grid-column: 1 / -1;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters {
    padding: 0.65rem;
    gap: 0.55rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > div:first-child {
    gap: 0.32rem 0.5rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > div:first-child .eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.13em;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > .admin-notifications-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0.45rem 0.5rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > .admin-notifications-grid > label:nth-child(1),
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > .admin-notifications-grid > label:nth-child(2),
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > .admin-notifications-grid > label:nth-child(3),
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > .admin-notifications-grid > label:nth-child(4) {
    grid-column: span 5;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > .admin-notifications-grid > label:nth-child(6) {
    grid-column: span 3;
    max-width: 210px;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form .stack.tiny {
    gap: 0.14rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form .stack.tiny > span:first-child {
    font-size: 0.63rem;
    letter-spacing: 0.015em;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form .input,
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form select,
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form textarea {
    min-height: 28px;
    padding: 0.22rem 0.45rem;
    font-size: 0.74rem;
    border-radius: 7px;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form textarea {
    min-height: 58px;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form .muted.tiny {
    font-size: 0.66rem;
    line-height: 1.2;
    margin-top: 0.08rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick {
    gap: 0.28rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick .chip {
    min-height: 24px;
    padding: 0.08rem 0.42rem;
    font-size: 0.68rem;
    gap: 0.22rem;
    border-radius: 999px;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick .chip input {
    transform: scale(0.82);
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-sendall {
    min-height: 24px;
    padding: 0.12rem 0.42rem;
    border-radius: 7px;
    font-size: 0.67rem;
    gap: 0.3rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-sendall input {
    transform: scale(0.88);
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-actions {
    padding-top: 0.28rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-actions .btn.primary {
    min-height: 28px;
    min-width: 136px;
    border-radius: 8px;
    padding-inline: 0.65rem;
    font-size: 0.74rem;
    box-shadow: none;
}

@media (max-width: 980px) {
    .admin-notifications-composer-card {
        max-width: 100%;
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-form > .admin-notifications-grid > label:nth-child(3),
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-form > .admin-notifications-grid > label:nth-child(4) {
        grid-column: span 5;
    }
}

@media (max-width: 760px) {
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-form > .admin-notifications-grid,
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters,
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > .admin-notifications-grid {
        grid-template-columns: 1fr;
        padding: 0.55rem;
        gap: 0.45rem;
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-form > .admin-notifications-grid > label,
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > .admin-notifications-grid > label {
        grid-column: 1;
        max-width: none;
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-filters > div:first-child {
        gap: 0.4rem;
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick .chip {
        min-height: 26px;
        font-size: 0.69rem;
    }
}

.landing-slider-settings {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.landing-slider-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.landing-slider-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: #f8fafc;
}

.landing-slider-option input[type="radio"] {
    accent-color: #0f172a;
}

.admin-live-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.admin-refresh {
    position: relative;
    width: clamp(90px, 20vw, 160px);
    height: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.admin-refresh span {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1d4ed8, #38bdf8);
    transform-origin: right center;
    transform: scaleX(1);
    transition: transform 0.2s linear;
}

.admin-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    animation: adminPulse 1.8s infinite;
}

/* ── Admin shared page components ── */
.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-page-header h1 {
    font-size: 1.25rem;
    margin: 0.15rem 0 0.1rem;
}

.admin-page-header__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.admin-page-header__links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.admin-page-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-page-head-row h1 {
    font-size: 1.25rem;
    margin: 0.15rem 0 0.1rem;
}

.admin-page-head-row__links {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.admin-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.7rem;
}

.admin-metrics-row .metric-card,
.admin-metrics-row .metric-card--button {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: auto;
}

@media (max-width: 640px) {
    .admin-metrics-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Admin automation card ── */
.admin-automation-card {
    margin-top: 0.8rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.admin-automation-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.admin-automation-card__head strong {
    font-size: 0.78rem;
}

.admin-automation-card__head .muted.tiny {
    display: block;
    margin-top: 0.1rem;
}

.admin-automation-card__body {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-automation-card__body .toggle-field {
    gap: 0.4rem;
}

/* ── Admin filter bar ── */
.admin-filter-bar {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 0.6rem 0.75rem;
}

.admin-filter-bar__form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 120px;
}

.admin-filter-field > span {
    font-size: 0.65rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-filter-field input,
.admin-filter-field select,
.admin-filter-field textarea {
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}

.admin-filter-field textarea {
    resize: vertical;
    line-height: 1.4;
}

.admin-filter-field--wide {
    flex-basis: 100%;
    min-width: 100%;
}

.admin-filter-bar__actions {
    display: flex;
    gap: 0.5rem;
    align-self: flex-end;
    align-items: center;
}

.admin-filter-reset {
    font-size: 0.65rem;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.12s;
    white-space: nowrap;
}

.admin-filter-reset:hover {
    color: #ef4444;
    text-decoration: none;
}

.admin-filter-quick {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.admin-filter-quick__link {
    font-size: 0.68rem;
    padding: 0.18rem 0.5rem;
    border-radius: 99px;
    color: #475569;
    text-decoration: none;
    background: #f1f5f9;
    transition: background 0.12s, color 0.12s;
}

.admin-filter-quick__link:hover {
    background: #e0e7ff;
    color: #2563eb;
    text-decoration: none;
}

.admin-filter-quick__link.is-active {
    background: #2563eb;
    color: #fff;
}

/* ── Admin list toolbar ── */
.admin-list-toolbar {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.admin-list-toolbar .btn {
    font-size: 0.68rem;
    padding: 0.15rem 0.55rem;
}

/* ── Admin user list ── */
.admin-user-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.admin-user-row {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-user-row:hover {
    border-color: #cbd5e1;
}

.admin-user-row.is-dirty {
    border-color: #f59e0b;
    box-shadow: inset 3px 0 0 #f59e0b;
}

.admin-user-row__top {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
}

.admin-user-row__toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    padding: 0;
    min-width: 0;
}

.admin-user-row__chevron {
    transition: transform 0.2s;
    color: #94a3b8;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.admin-user-row[data-group-open="true"] .admin-user-row__chevron {
    transform: rotate(180deg);
    color: #2563eb;
}

.admin-user-row__identity {
    min-width: 0;
}

.admin-user-row__identity strong {
    font-size: 0.8rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-user-row__identity .muted.tiny {
    font-size: 0.65rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-user-row__controls {
    display: grid;
    grid-template-columns: 90px 75px 115px auto auto 120px;
    align-items: center;
    gap: 0.35rem 0.45rem;
    font-size: 0.68rem;
}

.admin-user-row__controls > .muted.tiny {
    font-size: 0.65rem;
    white-space: nowrap;
    text-align: right;
}

.admin-user-row__controls .status-pill {
    font-size: 0.62rem;
    padding: 0.12rem 0.5rem;
    min-width: 0;
    width: auto;
    white-space: nowrap;
}

.admin-user-row__toggles {
    display: flex;
    gap: 0.4rem;
}

.admin-user-row__toggles .toggle-field {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.admin-user-row__toggles .muted.tiny {
    font-size: 0.6rem;
    white-space: nowrap;
}

.admin-user-row__toggles .toggle-btn {
    font-size: 0.6rem;
    min-width: 32px;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.admin-user-row__reason {
    flex-shrink: 1;
    min-width: 0;
}

.admin-user-row__reason textarea {
    font: 0.68rem/1.3 system-ui, sans-serif;
    padding: 0.18rem 0.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    resize: none;
    width: 110px;
    min-height: 22px;
    background: #f8fafc;
    transition: border-color 0.15s;
}

.admin-user-row__reason textarea:focus {
    border-color: #2563eb;
    outline: none;
    background: #fff;
}

/* ── Admin user detail (expanded) ── */
.admin-user-detail {
    padding: 0.55rem 0.7rem 0.7rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    border-radius: 0 0 10px 10px;
}

.admin-user-detail__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .admin-user-detail__grid {
        grid-template-columns: 1fr;
    }
    .admin-user-row__top {
        grid-template-columns: 1fr;
    }
    .admin-user-row__controls {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.admin-detail-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    background: #fff;
}

.admin-detail-card--wide {
    margin-top: 0.5rem;
}

.admin-detail-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.admin-detail-card__head h3 {
    margin: 0;
}

.admin-detail-card__actions {
    display: flex;
    gap: 0.2rem;
}

.admin-detail-card__actions .btn {
    font-size: 0.62rem;
    padding: 0.1rem 0.4rem;
}

.admin-detail-card h3 {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin: 0 0 0.35rem;
}

.admin-detail-card__kpis {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.admin-detail-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
}

.admin-detail-kpi .muted.tiny {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-detail-kpi strong {
    font-size: 0.8rem;
}

.admin-detail-progress {
    height: 3px;
    background: #e2e8f0;
    border-radius: 99px;
    margin-bottom: 0.4rem;
    overflow: hidden;
}

.admin-detail-progress__bar {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, #2563eb, #38bdf8);
    border-radius: 99px;
    transition: width 0.6s ease;
}

/* ── Admin list footer ── */
.admin-list-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.7rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

/* ── Admin table card ── */
.admin-table-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    margin-top: 0.75rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.admin-table--compact {
    font-size: 0.72rem;
    line-height: 1.3;
}

.admin-table thead {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.admin-table th {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding: 0.45rem 0.6rem;
    text-align: left;
    white-space: nowrap;
}

.admin-table td {
    padding: 0.4rem 0.6rem;
    border-top: 1px solid #f1f5f9;
    vertical-align: top;
}

.admin-table tbody tr:hover {
    background: #f8fafc;
}

.admin-table .status-pill {
    font-size: 0.62rem;
    padding: 0.1rem 0.4rem;
    width: auto;
}

.admin-sort-link {
    text-decoration: none;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: color 0.12s;
}

.admin-sort-link:hover {
    color: #2563eb;
    text-decoration: none;
}

.admin-sort-link.is-active {
    font-weight: 700;
    color: #1e293b;
}

.admin-code-inline {
    font-size: 0.65rem;
    background: #f1f5f9;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    word-break: break-all;
}

.admin-code-block {
    font-size: 0.65rem;
    max-width: 520px;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    background: #f1f5f9;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
}

/* ── Override old user-management styles for new layout ── */
.user-management-console .admin-user-row .status-pill {
    width: auto;
    max-width: none;
}

.user-management-console .admin-user-row .toggle-field {
    display: flex;
    align-items: center;
}

.user-management-console .admin-user-row .conversation-group__body[hidden] {
    display: none;
}

/* ── Admin dashboard grouped metrics ── */
.admin-metrics-groups {
    display: grid;
    gap: 1.2rem;
    margin-top: 0.8rem;
}

.admin-metrics-group__label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(15, 23, 42, 0.5);
    margin: 0 0 0.35rem 0.15rem;
}

/* ── Admin chart area ── */
.admin-chart-area {
    margin-top: 0.4rem;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.04);
    padding: 0.4rem 0.5rem 0.25rem;
}

.admin-chart-area__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.admin-chart-area__label {
    font-size: 0.68rem;
    font-weight: 500;
    color: #475569;
    margin: 0;
}

.admin-chart-buckets {
    display: flex;
    gap: 1px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
}

.admin-chart-bucket {
    font: 500 0.62rem/1 system-ui, sans-serif;
    padding: 0.22rem 0.45rem;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.admin-chart-bucket:hover {
    background: #e0e7ff;
    color: #3b82f6;
}

.admin-chart-bucket.is-active {
    background: #2563eb;
    color: #fff;
}

.admin-chart-area__wrap {
    position: relative;
}

.admin-chart-area canvas {
    width: 100%;
    display: block;
}

.admin-chart-tooltip {
    position: absolute;
    top: -6px;
    pointer-events: none;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 0.68rem;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.12s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 5;
}

/* ── Admin navigation blocks ── */
.admin-nav-blocks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 960px) {
    .admin-nav-blocks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .admin-nav-blocks {
        grid-template-columns: 1fr;
    }
}

.admin-nav-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.65rem 0.75rem 0.55rem;
}

.admin-nav-block__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.4rem 0;
}

.admin-nav-block__title svg {
    flex-shrink: 0;
    color: #64748b;
}

.admin-nav-block__links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-nav-link {
    display: block;
    padding: 0.28rem 0.45rem;
    border-radius: 6px;
    font-size: 0.76rem;
    color: #334155;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.admin-nav-link:hover {
    background: #e0e7ff;
    color: #1e40af;
    text-decoration: none;
}

/* ── Metric card flash animation ── */
@keyframes metricFlash {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.12); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.metric-card--flash {
    animation: metricFlash 0.6s ease-out;
}

/* notifications composer final layout override */
.admin-notifications-page .admin-notifications-composer-card {
    max-width: 1160px;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    gap: 0.7rem;
    align-items: start;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-composer-main {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 0.45rem 0.5rem;
    padding: 0.7rem;
    border-radius: 12px;
    align-content: start;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-composer-main > label:nth-child(1),
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-composer-main > label:nth-child(2) {
    grid-column: span 3;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-composer-main > label:nth-child(3),
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-composer-main > label:nth-child(4) {
    grid-column: span 3;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-composer-main > label:nth-child(5) {
    grid-column: 1 / -1;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0.55rem;
    padding: 0.7rem;
    border-radius: 12px;
    align-content: start;
    min-height: 0;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "eyebrow sendall"
        "quick sendall";
    gap: 0.3rem 0.5rem;
    align-items: start;
    padding: 0;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head .eyebrow {
    grid-area: eyebrow;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head .admin-notifications-quick {
    grid-area: quick;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head .admin-notifications-sendall {
    grid-area: sendall;
    justify-self: end;
    align-self: start;
    width: auto;
    max-width: 190px;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-target-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.5rem;
    padding-top: 0;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-target-grid > label:nth-child(1),
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-target-grid > label:nth-child(2),
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-target-grid > label:nth-child(3),
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-target-grid > label:nth-child(4) {
    grid-column: span 1;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-target-grid > label:nth-child(5) {
    grid-column: 1 / -1;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-target-grid > label:nth-child(6) {
    grid-column: 1 / 2;
    max-width: 210px;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 0.35rem;
    margin-top: 0.05rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-actions .btn.primary {
    width: auto;
    min-width: 164px;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form .stack.tiny > span:first-child {
    font-size: 0.64rem;
    letter-spacing: 0.01em;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form .input,
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form select,
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form textarea {
    min-height: 30px;
    font-size: 0.76rem;
    padding: 0.26rem 0.5rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-form textarea {
    min-height: 84px;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(112px, 1fr));
    gap: 0.28rem;
    justify-content: stretch;
    width: 100%;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick .chip {
    min-height: 24px;
    padding: 0.1rem 0.45rem;
    font-size: 0.68rem;
    width: 100%;
    justify-content: flex-start;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-sendall {
    min-height: 24px;
    padding: 0.12rem 0.45rem;
    font-size: 0.68rem;
    white-space: normal;
}

.admin-notifications-page .admin-notifications-composer-card .section-head.section-head--tight .btn.ghost.small {
    align-self: flex-start;
}

.admin-notifications-page .admin-notifications-composer-card .section-head.section-head--tight {
    padding: 0.2rem 0.15rem 0.25rem;
    border-radius: 10px;
}

.admin-notifications-page .admin-notifications-composer-card .section-head.section-head--tight > div {
    padding-left: 0.06rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-composer-main,
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting {
    overflow: hidden;
    background-clip: padding-box;
}

@media (max-width: 1080px) {
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-form {
        grid-template-columns: 1fr;
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting {
        min-height: 0;
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "eyebrow sendall"
            "quick sendall";
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-composer-main,
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-target-grid {
        grid-template-columns: 1fr;
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-composer-main > label,
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-target-grid > label {
        grid-column: 1;
        max-width: none;
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick {
        grid-template-columns: 1fr 1fr;
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "quick"
            "sendall";
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head .admin-notifications-sendall {
        justify-self: start;
        max-width: 100%;
    }
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-actions .btn.primary {
        width: 100%;
        min-width: 0;
    }
}

/* notifications right card alignment final fix */
.admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head {
    grid-template-columns: 1fr;
    grid-template-areas:
        "eyebrow"
        "quick"
        "sendall";
    gap: 0.32rem;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head .admin-notifications-sendall {
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0;
    box-sizing: border-box;
    min-width: 0;
    text-align: left;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head .admin-notifications-sendall input {
    margin: 0;
    justify-self: center;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem;
    width: 100%;
    align-items: stretch;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick .chip {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    column-gap: 0.38rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: initial;
    white-space: normal;
    overflow: hidden;
    text-align: left;
    line-height: 1.15;
}

.admin-notifications-page .admin-notifications-composer-card .admin-notifications-quick .chip input {
    margin: 0;
    justify-self: center;
}

@media (max-width: 760px) {
    .admin-notifications-page .admin-notifications-composer-card .admin-notifications-targeting-head .admin-notifications-sendall {
        grid-template-columns: auto 1fr;
    }
}

@keyframes adminPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.system-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
}

.system-stats article {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.6rem;
    display: grid;
    gap: 0.25rem;
}

.system-stats .bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.system-stats .bar span {
    display: block;
    height: 100%;
    background: #0b4a6d;
}

.system-stats .bar.warning span {
    background: #f97316;
}

.system-stats .bar.success span {
    background: #059669;
}

.admin-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.admin-menu form {
    margin: 0;
}
.admin-menu .btn {
    padding: 0.35rem 0.9rem;
    border-color: rgba(15, 23, 42, 0.18);
    box-shadow: 0 0 0 rgba(37, 99, 235, 0);
}
.admin-menu .btn:hover,
.admin-menu .btn:focus-visible {
    border-color: #2563eb;
    color: #1e3a8a;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
    outline: none;
}
.admin-menu .btn:disabled {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.5);
    box-shadow: none;
    background: #f5f7fb;
}
.admin-menu .btn.is-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.admin-menu--chips .admin-chip {
    padding: 0.32rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: rgba(198, 220, 255, 0.35);
    color: #0f172a;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-menu--chips .admin-chip:hover,
.admin-menu--chips .admin-chip:focus-visible {
    background: #e5e7eb;
    border-color: rgba(148, 163, 184, 0.7);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
.admin-menu--chips .admin-chip.is-active {
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(37, 99, 235, 0.6);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}
.admin-listings {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.75rem;
    background: #fff;
}
.admin-listings-controls {
    margin-left: auto;
}
.admin-limit-picker {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.85rem;
}
.admin-limit-picker select {
    border-radius: 999px;
    padding: 0.25rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.2);
    background: #fff;
    font-size: 0.85rem;
    cursor: pointer;
}
.catalog-feed.admin-listings-grid {
    --listing-card-width: clamp(120px, 42vw, 150px);
    overflow: visible;
    padding: 0;
    justify-content: center;
    max-height: none;
}

.admin-menu form {
    margin: 0;
}
@media (max-width: 720px) {
    .admin-console {
        margin: 1rem auto 2rem;
        padding: 0;
    }
    .admin-console > * {
        width: 100%;
        box-sizing: border-box;
    }
    .system-card,
    .admin-listings {
        border-radius: 12px;
    }
    .admin-menu {
        justify-content: flex-start;
    }
    .admin-menu .btn {
        flex: 1 1 auto;
    }
}

.police-console {
    max-width: 1100px;
    margin: 0 auto 2.5rem;
    display: grid;
    gap: 1rem;
}

.police-head {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.75rem 1rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    align-items: flex-start;
}

.police-head h1,
.police-head h2,
.police-head h3 {
    font-size: 1.15rem;
    line-height: 1.25;
    font-weight: 700;
    margin: 0;
}

.police-meta {
    text-align: right;
}

.police-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.5rem 0.6rem;
    background: #fff;
    width: calc(100% - 1rem);
    margin: 0 auto;
    justify-items: stretch;
}
.police-filter--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.6rem;
}
.filter-pill {
    width: 100%;
    position: relative;
}
.filter-pill input,
.filter-pill select {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: 999px;
    font-size: 0.78rem;
    padding: 0.25rem 0.8rem;
    background: rgba(255, 255, 255, 0.88);
    min-height: 30px;
    box-sizing: border-box;
}
.filter-pill--select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
}
.filter-pill--select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.9rem;
    width: 0.35rem;
    height: 0.35rem;
    border-right: 2px solid rgba(15, 23, 42, 0.45);
    border-bottom: 2px solid rgba(15, 23, 42, 0.45);
    transform: translateY(-30%) rotate(45deg);
    pointer-events: none;
}
.police-filter__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.police-filter__actions .btn.primary.micro {
    padding: 6px 12px;
}
.police-filter > button.btn.primary.micro {
    padding: 6px 12px;
    min-height: 34px;
    font-size: 0.9rem;
    justify-self: flex-start;
    border-radius: 12px;
}
.btn-filter {
    min-height: 26px;
    font-size: 0.78rem;
    padding: 0.1rem 1.1rem;
}
.btn-filter--reset {
    background: rgba(15, 23, 42, 0.05);
}

.police-filter label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.police-filter input {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
}
.police-filter select {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    background: #fff;
}
.police-filter__range {
    display: grid;
    gap: 0.2rem;
}
.police-filter__range input {
    min-height: 34px;
}

.filter-quick-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}
.filter-quick-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    text-decoration: none;
    color: #0f172a;
    background: #e2e8f0;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.filter-quick-link:hover,
.filter-quick-link:focus-visible {
    background: #d1d5db;
    color: #0f172a;
}
.filter-quick-link.is-active {
    background: #0f172a;
    color: #fff;
    border-color: rgba(15, 23, 42, 0.3);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.25);
}

.archive-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.85rem auto 0;
    width: 100%;
}
.archive-pagination__button {
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 999px;
    padding: 0.15rem 0.85rem;
    font-size: 0.85rem;
    text-decoration: none;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.88);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.archive-pagination__button:hover,
.archive-pagination__button:focus-visible {
    background: #0f172a;
    color: #fff;
}
.archive-pagination__button.is-disabled {
    pointer-events: none;
    opacity: 0.45;
}
.archive-pagination__status {
    font-size: 0.85rem;
    color: #6b7280;
}


.police-table-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    padding: 0.75rem;
    display: grid;
    gap: 0.75rem;
}

.police-table-wrapper {
    overflow-x: auto;
}

.police-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.police-table-wrapper th,
.police-table-wrapper td {
    border-bottom: 1px solid var(--border);
    padding: 0.45rem 0.5rem;
    vertical-align: top;
}

.police-table-wrapper tr:last-child td {
    border-bottom: none;
}

.police-table-wrapper tr.is-flagged {
    background: #fff4f4;
}

.police-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
}

.police-actions label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.police-actions input {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    min-height: 32px;
}

.police-action-buttons {
    display: flex;
    gap: 0.4rem;
}
.police-report-mode {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 280px;
    flex: 1 1 360px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
}
.police-scope-toggle {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.26rem 0.7rem;
    background: #101828;
    color: #fff;
    font-size: 0.86rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 32px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
.police-scope-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    background: #1e293b;
}
.police-scope-toggle.is-secondary {
    background: #fff;
    color: #101828;
}
.police-scope-toggle span {
    pointer-events: none;
}
.police-section-picker {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.45rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: #fff;
}
.police-section-picker.is-disabled {
    opacity: 0.5;
}
.police-section-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.police-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
}
.police-section-toggle input {
    accent-color: var(--primary);
}
.police-summary-listing {
    display: grid;
    gap: 0.2rem;
    font-size: 0.85rem;
    color: var(--muted);
}
.police-summary-listing input {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    max-width: 320px;
}
.user-insight-console .police-table-card {
    margin-top: 0.5rem;
}
.user-insight-detail {
    display: grid;
    gap: 0.6rem;
}
.user-insight-group {
    border-left: 3px solid transparent;
}
/* ── User-insight grid header + rows ── */
.ui-grid-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 8px 8px 0 0;
    padding: 0.4rem 0.7rem;
}
.ui-grid-header .ui-grid {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}
.ui-grid {
    display: grid;
    grid-template-columns: minmax(130px, 1.5fr) 220px minmax(140px, 1.2fr) 120px 100px;
    gap: 0 0.7rem;
    align-items: center;
    font-size: 0.75rem;
}
.ui-grid__col--name {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}
.ui-grid__col--name strong { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-grid__col--pills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.15rem;
    min-width: 0;
}
.ui-grid__col--email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
}
.ui-grid__col--date {
    color: #64748b;
    white-space: nowrap;
}
.ui-grid__col--score {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
}
.ui-head--grid {
    text-align: left;
    width: 100%;
}
.user-insight-group .conversation-group__head {
    padding: 0.35rem 0.7rem;
}
.user-insight-group .conversation-group__head .ui-grid {
    width: 100%;
}
.user-insight-group {
    border-bottom: 1px solid #d9dee5;
}
.user-insight-group .conversation-group__body {
    padding: 0.4rem 0.6rem;
}
.user-insight-group .thread-detail-toolbar {
    gap: 0.3rem;
}
.user-insight-group .thread-detail-toolbar .btn {
    font-size: 0.66rem;
    padding: 0.2rem 0.5rem;
}
.user-insight-group .thread-detail-meta {
    font-size: 0.62rem;
}
.user-insight-group.is-status-active {
    border-left-color: #22c55e;
}
.user-insight-group.is-status-pending {
    border-left-color: #3b82f6;
}
.user-insight-group.is-status-blocked {
    border-left-color: #ef4444;
}
/* ── User-insight filter ── */
.ui-filter {
    align-items: flex-end;
}
.ui-filter__quick {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-basis: 100%;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid rgba(15,23,42,0.05);
    margin-bottom: 0.1rem;
}
.ui-filter__quick-label {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-right: 0.15rem;
}
.ui-filter__quick-link {
    font-size: 0.62rem;
    font-weight: 500;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    text-decoration: none;
    color: #64748b;
    background: transparent;
    transition: background 0.15s, color 0.15s;
}
.ui-filter__quick-link:hover {
    background: rgba(15,23,42,0.05);
    color: #334155;
}
.ui-filter__quick-link.is-active {
    background: #0f172a;
    color: #fff;
    font-weight: 600;
}
.ui-filter__sections {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}
.ui-filter__sections > span {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.ui-filter__section-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
}
.ui-filter__section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.6rem;
    color: #475569;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    border: 1px solid rgba(15,23,42,0.08);
    background: #fff;
    transition: background 0.15s;
}
.ui-filter__section-toggle:hover {
    background: rgba(15,23,42,0.03);
}
.ui-filter__section-toggle input {
    width: 11px;
    height: 11px;
    accent-color: #4f46e5;
}
.ui-filter__section-toggle span {
    font-size: 0.58rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.user-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.4rem;
}
.insight-card {
    border: 1px solid rgba(15,23,42,0.07);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.insight-card h3 {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.3rem;
}
.insight-card h4 {
    font-size: 0.72rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 0.15rem;
}
.insight-card p {
    font-size: 0.68rem;
    color: #64748b;
    margin: 0.1rem 0;
    line-height: 1.4;
}
.insight-card p strong {
    color: #334155;
    font-weight: 600;
}
.insight-section {
    border: 1px solid rgba(15,23,42,0.07);
    border-radius: 8px;
    padding: 0.6rem;
    background: #fff;
    display: grid;
    gap: 0.5rem;
}
.insight-section h3 {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.reported-conversation-list {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    padding: 0 0.35rem 0.2rem;
    box-sizing: border-box;
}
.reported-conversation-item {
    width: calc(100% - 0.35rem);
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    padding: 0.52rem 0.62rem;
    display: grid;
    gap: 0.22rem;
    box-sizing: border-box;
}
.reported-conversation-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.reported-conversation-item__head h4 {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
}
.reported-conversation-item__date {
    font-size: 0.74rem;
    color: #64748b;
    white-space: normal;
    text-align: right;
    max-width: 180px;
    overflow-wrap: anywhere;
}
.reported-conversation-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    font-size: 0.78rem;
    color: #475569;
    min-width: 0;
}
.reported-conversation-item__meta span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.reported-conversation-item__reason {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.25;
    color: #334155;
    overflow-wrap: anywhere;
}
.reported-conversation-item__actions {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.4rem;
    align-items: center;
    font-size: 0.74rem;
    overflow-wrap: anywhere;
}
.insight-listings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.4rem;
}
.insight-listings .insight-card h4 { font-size: 0.7rem; }
.insight-listings .insight-card p { font-size: 0.64rem; }
.timeline-table {
    border: 1px solid rgba(15,23,42,0.07);
    border-radius: 8px;
    overflow-x: auto;
}
.timeline-row {
    display: grid;
    grid-template-columns: 110px 140px 140px 70px 80px 1fr;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.68rem;
    color: #334155;
}
.timeline-head {
    font-weight: 600;
    background: #f1f5f9;
    font-size: 0.64rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.timeline-row:not(.timeline-head) {
    border-top: 1px solid rgba(15,23,42,0.04);
}
.insight-section--collapsible {
    cursor: default;
}
.insight-section__summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    list-style: none;
    padding: 0.1rem 0;
}
.insight-section__summary::-webkit-details-marker { display: none; }
.insight-section__summary::before {
    content: "▸";
    font-size: 0.55rem;
    color: #64748b;
    flex-shrink: 0;
}
.insight-section--collapsible[open] > .insight-section__summary::before {
    content: "▾";
}
.insight-section__summary h3 { margin: 0; }
.timeline-row--hidden { display: none; }
.timeline-load-more {
    display: block;
    width: 100%;
    background: none;
    border: 1px dashed rgba(15,23,42,0.1);
    border-radius: 6px;
    padding: 0.3rem;
    font-size: 0.64rem;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s;
}
.timeline-load-more:hover {
    background: #e0e7ff;
    color: #1e40af;
    border-color: rgba(30,64,175,0.2);
}
.timeline-note {
    font-size: 0.64rem;
    color: #64748b;
}
.communication-thread {
    border: 1px solid rgba(15,23,42,0.07);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    background: #fff;
    display: grid;
    gap: 0.4rem;
}
.communication-thread header {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.68rem;
}
.communication-thread header strong { font-size: 0.72rem; }
.conversation {
    display: grid;
    gap: 0.35rem;
}
.conversation-bubble {
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    max-width: 320px;
    background: #fff;
}
.conversation-bubble p { font-size: 0.7rem; margin: 0; color: #334155; }
.conversation-bubble.is-visitor {
    margin-left: auto;
    border-color: rgba(239,68,68,0.12);
    background: #fffbf8;
}
.conversation-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: #64748b;
    margin-bottom: 0.2rem;
}
.conversation-meta strong { font-size: 0.66rem; color: #334155; }
.security-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}
.security-list li { font-size: 0.68rem; color: #334155; }
.security-list li strong { font-size: 0.64rem; color: #64748b; margin-right: 0.3rem; }
.security-list li p { margin: 0.1rem 0 0; }
.insight-status-form {
    display: grid;
    gap: 0.3rem;
    max-width: 360px;
}
.insight-status-form label span { font-size: 0.68rem; color: #64748b; font-weight: 600; }
.insight-status-form textarea {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    font-family: inherit;
}
.insight-status-actions {
    display: flex;
    gap: 0.4rem;
}
.police-range-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.police-date-window {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.4rem;
    transition: opacity 0.2s ease;
    }
.police-date-window.is-inactive {
    opacity: 0.5;
}
.police-date-window label {
    min-width: 0;
}
.police-date-window input[type="date"] {
    width: 100%;
    min-width: 0;
    font-size: 0.85rem;
    padding: 0.25rem 0.4rem;
}
.police-report-note {
    font-size: 0.75rem;
    color: var(--muted);
    max-width: 320px;
    line-height: 1.3;
}

.police-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.5rem 0.8rem;
    background: #fff;
}

.police-log-list {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.permissions-table-card .permission-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: flex-end;
}

.permissions-table-card label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.permissions-table-card select {
    min-width: 160px;
}

.accounts-meta__actions {
    margin-top: 0.25rem;
}

.user-management-automation-card {
    margin: 0.3rem 0 0.45rem;
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.94), rgba(220, 252, 231, 0.84));
    display: grid;
    gap: 0.35rem;
}

.user-management-automation-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.user-management-automation-card__title-wrap {
    display: grid;
    gap: 0.08rem;
}

.user-management-automation-card__head strong {
    font-size: 0.84rem;
    line-height: 1.15;
    color: #065f46;
}

.user-management-automation-card__head .muted.tiny {
    font-size: 0.7rem;
    color: #4b635a;
}

.user-management-automation-state {
    display: inline-flex;
    align-items: center;
    gap: 0.26rem;
    border-radius: 999px;
    padding: 0.12rem 0.46rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: #64748b;
    background: rgba(241, 245, 249, 0.75);
    white-space: nowrap;
}

.user-management-automation-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    font-size: 0.68rem;
    border: 1px solid rgba(148, 163, 184, 0.55);
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.9);
}

.user-management-automation-state.is-saved {
    color: #065f46;
    border-color: rgba(16, 185, 129, 0.42);
    background: rgba(236, 253, 245, 0.85);
}

.user-management-automation-state.is-saved .user-management-automation-state__icon {
    color: #047857;
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(220, 252, 231, 0.9);
}

.user-management-automation-card__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
}

.user-management-automation-toggle {
    justify-content: space-between;
    gap: 0.45rem;
    min-height: 28px;
}

.user-management-automation-toggle > span {
    font-size: 0.74rem !important;
    color: #355749 !important;
}

.user-management-automation-toggle .toggle-btn {
    min-width: 76px;
    padding: 0.12rem 0.62rem;
    font-size: 0.72rem;
}

.user-management-automation-actions {
    justify-self: end;
}

.user-management-automation-actions .btn {
    min-height: 26px;
    padding: 0.08rem 0.7rem;
    font-size: 0.73rem;
}

.user-management-console .accounts-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.8rem;
    row-gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.user-management-console .accounts-head h1 {
    font-size: clamp(1.55rem, 2.1vw, 1.95rem);
    line-height: 1.08;
    margin: 0;
}

.user-management-console .accounts-head .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.04rem;
}

.user-management-console .accounts-head .muted.small {
    font-size: 0.74rem;
    margin-top: 0.08rem;
}

.user-management-console .accounts-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: end;
    text-align: right;
}

.user-management-console .accounts-meta strong {
    font-size: 1.05rem;
    line-height: 1.1;
}

.user-management-console .accounts-meta .btn {
    min-height: 26px;
    padding: 0.08rem 0.66rem;
    font-size: 0.75rem;
}

.user-management-console .accounts-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem 0.5rem;
    padding: 0.34rem 0.44rem;
    border-radius: 12px;
    width: 100%;
    margin: 0.2rem 0 0;
}

.user-management-console .accounts-filter label {
    gap: 0.12rem;
}

.user-management-console .accounts-filter label > span {
    font-size: 0.76rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: #5b6472;
}

.user-management-console .accounts-filter .filter-pill input,
.user-management-console .accounts-filter .filter-pill select {
    min-height: 26px;
    padding: 0.08rem 0.62rem;
    font-size: 0.78rem;
}

.user-management-console .accounts-filter .filter-pill--select select {
    padding-right: 1.8rem;
}

.user-management-console .accounts-filter .police-filter__actions {
    margin-top: 0.06rem;
    gap: 0.35rem;
}

.user-management-console .accounts-filter .btn-filter {
    min-height: 25px;
    font-size: 0.74rem;
    padding: 0.06rem 0.72rem;
}

.user-management-console .filter-quick-actions {
    margin-top: 0.36rem;
    gap: 0.28rem;
}

.user-management-console .filter-quick-actions .muted.small {
    font-size: 0.74rem;
}

.user-management-console .filter-quick-link {
    min-height: 24px;
    padding: 0.12rem 0.62rem;
    font-size: 0.74rem;
}

@media (max-width: 980px) {
    .user-management-console .accounts-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .user-management-console .accounts-head {
        grid-template-columns: 1fr;
    }
    .user-management-console .accounts-meta {
        justify-self: start;
        text-align: left;
    }
    .user-management-automation-card__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
    .user-management-automation-card__grid {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .user-management-automation-toggle {
        align-items: center;
    }
    .user-management-automation-actions {
        justify-self: start;
    }
    .user-management-console .accounts-filter {
        grid-template-columns: 1fr;
    }
    .user-management-console .accounts-head h1 {
        font-size: 1.45rem;
    }
}

.permission-reason-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 160px;
}

.permission-reason-cell span {
    font-size: 0.78rem;
    color: var(--muted);
}

.permission-reason-cell textarea {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.45rem;
    width: 180px;
    min-height: 52px;
    resize: none;
}

.permissions-table-card tr.is-dirty {
    background: #fff6e5;
    box-shadow: inset 0 0 0 1px rgba(255, 173, 66, 0.4);
}
.permissions-table-card tr.is-dirty td {
    background: #fff6e5;
}

.permissions-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.permissions-actions__right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.permissions-actions .btn {
    min-width: 180px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.15);
    color: #4c1d95;
    font-size: 0.78rem;
    font-weight: 600;
}
.status-pill.status-active {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}
.status-pill.status-pending {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}
.status-pill.status-suspended {
    background: rgba(248, 113, 113, 0.2);
    color: #b91c1c;
}
.status-pill.status-deleted {
    background: rgba(148, 163, 184, 0.2);
    color: #475569;
}

.user-management-table table {
    font-size: 0.82rem;
}
.user-management-table th {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.user-management-table td {
    font-size: 0.8rem;
}

.switch {
    position: relative;
    display: inline-flex;
    width: 36px;
    height: 18px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5f5;
    border-radius: 999px;
    transition: background 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}
.switch-slider::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}
.switch input:checked + .switch-slider {
    background: #0f62fe;
}
.switch input:checked + .switch-slider::after {
    transform: translate(18px, -50%);
}
.switch.switch-danger input:checked + .switch-slider {
    background: #dc2626;
}

.switch.switch-sale {
    width: 58px;
    height: 26px;
}
.switch.switch-sale .switch-slider {
    background: linear-gradient(135deg, #f87171, #dc2626);
    border-radius: 999px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 -2px 4px rgba(255, 255, 255, 0.15);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.switch.switch-sale .switch-slider::after {
    width: 22px;
    height: 22px;
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.35);
    background: radial-gradient(circle at 30% 30%, #fff7f7, #f87171);
}
.switch.switch-sale input:checked + .switch-slider {
    background: linear-gradient(135deg, #16a34a, #0f8a62);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
}
.switch.switch-sale input:checked + .switch-slider::after {
    background: radial-gradient(circle at 30% 30%, #f0fff4, #16a34a);
    box-shadow: 0 4px 6px rgba(15, 118, 110, 0.35);
    transform: translate(30px, -50%);
}

.toggle-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.toggle-btn {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.15rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: #f4f6fb;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}
.toggle-btn.is-on {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.5);
    color: #047857;
}
.toggle-btn.toggle-block.is-on {
    background: rgba(248, 113, 113, 0.2);
    border-color: rgba(248, 113, 113, 0.6);
    color: #b91c1c;
}

.accounts-meta p {
    margin: 0.2rem 0 0;
}

.score-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.score-pill.score-gold {
    background: #fff8e1;
    color: #7c5700;
}

.score-pill.score-silver {
    background: #eef2ff;
    color: #1e3a8a;
}

.score-pill.score-bronze {
    background: #fff0de;
    color: #92400e;
}

.score-pill.score-new {
    background: #e5e7eb;
    color: #374151;
}

.risk-label {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.edit-placeholder {
    max-width: 840px;
    margin: 0 auto 2rem;
    display: grid;
    gap: 1rem;
}

.category-approvals {
    max-width: 1080px;
    margin: 0 auto 2rem;
    display: grid;
    gap: 1rem;
}

.category-table-wrapper {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow-x: auto;
    background: #fff;
}

.category-risk-toggle {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 0.8rem;
    flex-wrap: wrap;
}

.category-risk-toggle .btn {
    padding: 0.1rem 0.65rem;
    font-size: 0.72rem;
    min-height: 26px;
}

.approval-bulk-actions {
    display: flex;
    gap: 0.35rem;
    padding: 0 0.8rem 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.approval-count {
    flex-basis: 100%;
    text-align: right;
}

.category-table {
    width: 100%;
    border-collapse: collapse;
}

.category-table td:first-child {
    min-width: 60px;
}
.category-table .col-id {
    width: 60px;
    white-space: nowrap;
}

.category-table th,
.category-table td {
    text-align: left;
    padding: 0.6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.category-table tr:last-child td {
    border-bottom: none;
}
.category-row.is-risky {
    background: #fff6f6;
}

.table-input,
.table-select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
}

.category-table-actions {
    display: grid;
    gap: 0.35rem;
    padding: 0.6rem 0.9rem;
    justify-items: start;
}

.category-table-actions .muted {
    justify-self: start;
}

.approval-list {
    display: grid;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem 1rem;
}

.approval-item {
    border: 1px solid #94a3b8;
    border-radius: 12px;
    background: #f9fafb;
    display: grid;
    overflow: hidden;
}

.approval-item--category {
    background: #eaf2ff;
    border-color: #93c5fd;
}

.approval-item--category .approval-item__head {
    background: #dce9ff;
}

.approval-item--category .approval-item__body {
    background: #f3f7ff;
}

.approval-item--param {
    background: #f9fafb;
}

.approval-item--select {
    background: #fff4e5;
    border-color: #fdba74;
}

.approval-item--select .approval-item__head {
    background: #ffedd5;
}

.approval-item--select .approval-item__body {
    background: #fff7ed;
}

.approval-item.is-open {
    overflow: visible;
}

.approval-item.is-risky {
    border-color: #fca5a5;
    background: #fff7f7;
}

.approval-item__head {
    width: 100%;
    border: none;
    background: #eef2f7;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.approval-item__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.approval-item__status {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--muted);
}

.approval-item__body {
    border-top: 1px dashed var(--border);
    padding: 0.7rem 0.85rem;
    display: grid;
    gap: 0.75rem;
    background: #f8fafc;
}

.toggle-pill.is-denied span {
    background: #fca5a5;
    color: #7f1d1d;
}

.approval-item__body[hidden] {
    display: none;
}

.approval-item__section {
    display: grid;
    gap: 0.5rem;
}

.approval-item__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.approval-item__reason {
    display: grid;
    gap: 0.25rem;
}

.approval-item__listing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.approval-item__hint {
    margin: 0;
}

.approval-item__select {
    display: grid;
    gap: 0.5rem;
}

.approval-item__option-list {
    display: grid;
    gap: 0.4rem;
}

.approval-item__option {
    display: grid;
    gap: 0.2rem;
}

.approval-item__option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
}

.category-merge-panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 0.75rem;
}

.category-merge-form select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
    background: #fff;
}

.category-merge-grid {
    display: grid;
    gap: 0.75rem;
}

.category-merge-row {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.category-merge-row label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.merge-arrow {
    font-size: 1.3rem;
    color: var(--muted);
    line-height: 1;
}

.category-merge-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.category-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
}

.category-page-form {
    display: flex;
    gap: 0.35rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.category-page-form .input {
    min-width: 60px;
}

.category-page-form input[name="page"] {
    min-width: 50px;
}

.approval-toggle {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.filter-approval {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}

.filter-approval__details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.filter-approval__hint {
    margin: 0;
    color: var(--muted);
}

.filter-approval:last-child {
    margin-bottom: 0;
}

.proposal-preview {
    position: fixed;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
    padding: 0.45rem;
    width: 240px;
    display: flex;
    gap: 0.4rem;
    pointer-events: none;
    z-index: 50;
}

.proposal-preview[hidden] {
    display: none;
}

.proposal-preview__thumb {
    flex: 0 0 70px;
    height: 60px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border);
}

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

.proposal-preview__body {
    display: grid;
    gap: 0.2rem;
}

.category-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}
.category-field input {
    flex: 1;
}

.toggle-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 26px;
    cursor: pointer;
}
.toggle-pill input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-pill span {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #9ca3af;
    color: #fff;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    font-weight: 600;
}
.toggle-pill[data-state="yes"] span {
    background: #16a34a;
    color: #fff;
}
.toggle-pill span::after {
    content: "---";
}
.toggle-pill[data-state="yes"] span::after {
    content: "Ano";
}
.toggle-pill[data-state="no"] span {
    background: #dc2626;
    color: #fff;
}
.toggle-pill[data-state="no"] span::after {
    content: "Ne";
}
.toggle-pill[data-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}
.category-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
}

.approval-toggle {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.proposal-preview {
    position: fixed;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
    padding: 0.45rem;
    width: 240px;
    display: flex;
    gap: 0.4rem;
    pointer-events: none;
    z-index: 50;
}
.proposal-preview[hidden] {
    display: none;
}
.proposal-preview__thumb {
    flex: 0 0 70px;
    height: 60px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.proposal-preview__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.proposal-preview__body {
    display: grid;
    gap: 0.2rem;
}
.listing-create {
    max-width: 960px;
    margin: 1.2rem auto 1.8rem;
    display: grid;
    gap: 0.85rem;
}

.drafts-strip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 18px;
    padding: 0.85rem;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    color: #0f172a;
    text-align: center;
}

.drafts-strip--empty {
    background: rgba(255, 255, 255, 0.7);
    border: 1px dashed rgba(15, 23, 42, 0.12);
}

.drafts-empty {
    padding: 0.35rem 0.2rem 0.2rem;
}

.drafts-strip__head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.45rem;
}

.listing-split {
    display: grid;
    gap: 1.25rem;
}

.listing-split__preview {
    display: none;
}

.listing-split__form--glass {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1rem;
}

.listing-preview-shell {
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 1.25rem;
    border: none;
}

.listing-head {
    gap: 1.5rem;
}

.listing-head__left {
    display: grid;
    gap: 0.6rem;
}

.glass-pill {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-shadow: none;
    color: #0f172a;
}

.glass-pill--action {
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 901px) {
    .glass-pill--action:hover,
    .glass-pill--action:focus-visible {
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.45), 0 10px 22px rgba(15, 23, 42, 0.18);
    }
}

.listing-head__left .hint-box {
    max-width: none;
    width: 100%;
}

.listing-head__right {
    display: grid;
    gap: 0.3rem;
    align-content: start;
}

.drafts-mini {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.35rem;
    width: max-content;
    min-width: calc(var(--listing-card-width) + 48px);
    max-width: 100%;
    padding: 0;
    margin-bottom: 0.45rem;
    overflow-x: auto;
    overflow-y: visible;
    box-sizing: border-box;
}

.drafts-mini__grid {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    width: max-content;
    max-width: 100%;
    padding: 4px 8px 14px;
}

.drafts-strip__meta {
    margin: 0;
    text-align: center;
    font-size: 0.7rem;
}

.drafts-mini .listing-card {
    --listing-card-width: 140px;
}

.drafts-mini .listing-card::after {
    transform: none;
    inset: -2px;
    border-radius: calc(12px + 2px);
    border-color: rgba(15, 23, 42, 0);
    box-shadow: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.drafts-mini .listing-card.is-active {
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.4);
}

.drafts-mini .listing-card.is-active::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid #0f172a;
    border-radius: calc(12px + 2px);
    pointer-events: none;
    z-index: 6;
}

.drafts-mini .listing-card:hover::after {
    border-color: #0f172a;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.4);
    transform: none;
    z-index: 5;
}

.drafts-mini .listing-card:hover::before {
    opacity: 0;
}

.drafts-mini .draft-delete-form {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 8;
}

.drafts-mini .draft-delete {
    width: 26px;
    height: 26px;
    margin: 0;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.drafts-mini .listing-card__body {
    min-height: 32px;
    padding: 0 0.35rem 0.25rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.drafts-mini .listing-card__content {
    width: 100%;
}

.drafts-mini .listing-card::before {
    height: 6px;
}

.drafts-mini .listing-card__body h3 {
    font-size: 0.78rem;
}

.drafts-mini .listing-card__meta {
    font-size: 0.7rem;
}
.listing-preview-link {
    display: none;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: #f8fafc;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.listing-preview-link:hover,
.listing-preview-link:focus-visible {
    border-color: rgba(37, 99, 235, 0.6);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.listing-preview .detail-card {
    margin-bottom: 1rem;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.page-head h1 {
    margin: 0 0 0.2rem;
}

.hint-box {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    background: #f8fafc;
    max-width: 260px;
    font-size: 0.85rem;
}

.hint-box--dark {
    background: #0f172a;
    color: #fff;
    border-color: rgba(15, 23, 42, 0.4);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.35);
}

.hint-box--dark .muted {
    color: rgba(255, 255, 255, 0.75);
}

.listing-form {
    display: grid;
    gap: 0.65rem;
}

.form-section {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.85rem;
    background: #fff;
    display: grid;
    gap: 0.3rem;
}

.listing-create .form-section {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.listing-create .form-section:focus-within {
    border-color: rgba(15, 23, 42, 0.6);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.2);
}

@media (min-width: 901px) {
    .listing-create,
    .listing-edit {
        max-width: none;
        width: 100%;
    }

    body.listing-form-page main.container {
        max-width: none;
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .listing-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .listing-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .listing-split__form {
        min-width: 0;
    }

    .listing-split__preview {
        display: block;
        position: static;
        min-width: 0;
    }
}

@media (max-width: 1099px) {
    .listing-head__right .eyebrow {
        display: none;
    }
    .listing-preview-link {
        display: inline-flex;
        align-items: center;
    }
    .listing-split {
        grid-template-columns: 1fr;
    }
    .drafts-strip {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        align-self: stretch;
    }
    .drafts-mini {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .drafts-mini__grid {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        padding: 4px 8px 14px;
    }
    .drafts-mini .listing-card {
        width: 140px;
        max-width: 140px;
        flex: 0 0 auto;
    }
    body.listing-form-page--preview .listing-split__form {
        display: none;
    }
    body.listing-form-page--preview .listing-split__preview {
        display: block;
    }
}

.form-section--invite {
    background: #0f172a;
    border-color: rgba(15, 23, 42, 0.75);
    color: #fff;
}

.form-section--invite h2 {
    color: #fff;
}

.form-section--invite .form-row__label,
.form-section--invite .muted {
    color: rgba(255, 255, 255, 0.75);
}

/* ── Suggest category/filter modal ── */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: #2563eb;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-link:hover {
    color: #1d4ed8;
}

.suggest-modal[hidden] {
    display: none !important;
}

.suggest-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggest-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}

.suggest-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
    width: min(480px, calc(100% - 2rem));
    padding: 1.5rem;
    animation: suggest-modal-in 0.2s ease-out;
}

@keyframes suggest-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.suggest-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.suggest-modal__header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.suggest-modal__close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #6b7280;
    padding: 0.2rem;
    line-height: 1;
}

.suggest-modal__close:hover {
    color: #111827;
}

.suggest-modal__textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    font: inherit;
    font-size: 0.85rem;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
    margin-top: 0.5rem;
}

.suggest-modal__textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.suggest-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.suggest-modal__status {
    text-align: center;
    margin-top: 0.6rem;
}

.listing-create .form-section--contact .form-row__label {
    display: flex !important;
    width: 120px !important;
    min-width: 120px !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

.listing-create .form-section--contact .form-row__control {
    min-width: 180px !important;
    width: 180px !important;
    flex: 0 0 180px !important;
    flex-shrink: 0 !important;
}

.form-section--invite .form-row__control {
    background: #fff;
    color: #0f172a;
}

.form-section--invite .form-row__control::placeholder {
    color: rgba(15, 23, 42, 0.55);
}

.form-section--danger {
    border: 1px solid rgba(220, 38, 38, 0.32);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.95), rgba(255, 255, 255, 0.96));
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.1);
}

.listing-blocked-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
    align-items: flex-start;
}

.listing-blocked-terms .status-pill {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-start;
}

.listing-blocked-catalog {
    margin-top: 0.5rem;
}

.listing-blocked-catalog summary {
    cursor: pointer;
    width: fit-content;
}

.listing-blocked-catalog > div {
    margin-top: 0.35rem;
    line-height: 1.45;
    max-height: 160px;
    overflow: auto;
    padding-right: 0.2rem;
}

.theme-mode-switch {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.theme-mode-switch legend {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: var(--muted);
}

.theme-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.theme-pill input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.theme-pill span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.theme-pill input:checked + span {
    border-color: var(--user-accent, var(--accent));
    background: rgba(15, 23, 42, 0.05);
}

.form-section h2 {
    margin: 0;
    font-size: 1.05rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.35rem;
}

.form-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.form-wide {
    grid-column: 1 / -1;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    margin: 0;
    padding: 0.05rem 0;
}

.form-section--contact .form-row {
    flex-wrap: wrap;
}

.form-row__label {
    flex: 0 0 120px;
    color: var(--muted);
    font-size: 0.78rem;
    margin-bottom: 0;
}

.form-row__control {
    flex: 1;
    width: 100%;
}

.listing-create .form-section--contact .form-row__label {
    display: flex;
    width: 120px !important;
    min-width: 120px;
    justify-content: flex-end;
    text-align: right;
}

.listing-create .form-section--contact .form-row__control {
    min-width: 180px !important;
    width: 180px !important;
    flex: 0 0 180px !important;
    flex-shrink: 0;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
}

.listing-form .form-row__control:not(.is-filled) {
    border-color: #64748b;
}

.form-row__control.is-filled {
    border-color: #16a34a;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.2);
    background: #f0fdf4;
}

.listing-price-input {
    min-width: 7ch;
    max-width: 12ch;
}

.listing-price-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.listing-free-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: #4b5563;
}

.listing-free-toggle input {
    accent-color: #2563eb;
}

.listing-price-input--free {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.4);
    color: #1f2937;
}

.listing-currency-label {
    font-weight: 600;
    color: var(--text);
}

.listing-stock-input {
    min-width: 8ch;
    max-width: 12ch;
}

.form-row--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
}

.form-row--stacked .form-row__label {
    flex: none;
    margin-bottom: 0.05rem;
}

.upload-field {
    align-items: flex-start;
}

.upload-field input {
    border-style: dashed;
    cursor: pointer;
}

.listing-basics-grid {
    gap: 1rem;
}

.rich-input {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rich-input__toolbar {
    display: flex;
    gap: 0.35rem;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 0.25rem;
}

.rich-input__btn {
    border: 1px solid var(--border);
    background: #f5f7fb;
    color: var(--text);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.rich-input__btn:hover,
.rich-input__btn:focus-visible {
    background: #e9edf6;
}

.rich-input__btn.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.rich-input--quill textarea {
    display: none;
}

.rich-input--quill .ql-toolbar {
    border: none;
    border-bottom: 1px dashed var(--border);
    padding: 0 0 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rich-input--quill .ql-container,
.rich-input--quill .ql-container.ql-snow {
    border: none;
}

.rich-input--quill .ql-editor {
    min-height: 6.5rem;
    padding: 0.35rem 0;
    color: var(--text);
    border: none;
}

.rich-input--quill.is-filled {
    border-color: #16a34a;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.2);
    background: #f0fdf4;
}

.rich-input--quill .ql-editor ul,
.rich-input--quill .ql-editor ol {
    margin: 0.2rem 0;
    padding-left: 1.1rem;
}

.rich-input--wysiwyg textarea {
    display: none;
}

.rich-input__surface {
    min-height: 6.5rem;
    padding: 0.35rem 0;
    outline: none;
    color: var(--text);
}

.rich-input__surface ul,
.rich-input__surface ol {
    margin: 0.2rem 0;
    padding-left: 1.1rem;
}

.btn-primary--green {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.btn.primary.btn-primary--green,
.btn.primary.btn-primary--green:visited {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.btn-primary--green:hover,
.btn-primary--green:focus-visible {
    background: #15803d;
    border-color: #15803d;
}

.listing-form-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    width: 100%;
    flex: 0 0 100%;
}

.rich-input__surface:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
}

.rich-input textarea {
    border: none;
    background: transparent;
    padding: 0.35rem 0;
    resize: none;
}

.rich-input textarea:focus-visible {
    outline: none;
}

.category-select-grid {
    margin-bottom: 0.4rem;
}

.category-picker {
    position: relative;
}

/* ── Form category tree picker ── */
.category-popup {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    max-height: 380px;
    overflow: auto;
    z-index: 20;
    padding: 0.3rem;
    font-size: 0.84rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}
.category-popup::-webkit-scrollbar { width: 5px; }
.category-popup::-webkit-scrollbar-track { background: transparent; }
.category-popup::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 999px; }

.category-popup__list {
    padding: 0;
}

.category-tree-level {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.category-tree-children {
    margin: 0;
    padding: 0 0 0 0.75rem;
    border-left: 2.5px solid #c7d2fe;
    margin-left: 1.1rem;
    background: transparent;
    position: relative;
}

.category-tree-children::before {
    display: none;
}

.category-tree-children[hidden] {
    display: none;
}

.category-tree-item {
    display: flex;
    flex-direction: column;
    position: relative;
}

.category-tree-header {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0;
    min-height: 0;
    line-height: 1.4;
}

.category-tree-item.is-highlight .category-tree-label {
    background: #eef2ff;
    color: #1e40af;
    border-radius: 8px;
}

.category-tree-toggle {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.15s ease, transform 0.2s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.category-tree-toggle:hover {
    color: #3b82f6;
    background: #eef2ff;
}

.category-tree-toggle.is-open {
    transform: rotate(180deg);
    color: #2563eb;
}

.category-tree-item.is-open > .category-tree-header > .category-tree-toggle {
    transform: rotate(180deg);
    color: #2563eb;
}

.category-tree-item.is-open > .category-tree-children {
    background: #fff;
    border-radius: 0;
    padding: 0 0 0 0.75rem;
    margin-top: 0;
    border-left: 2.5px solid #c7d2fe;
    margin-left: 1.1rem;
}

.category-tree-item.is-open {
    background: transparent;
}

.category-tree-spacer {
    width: 22px;
    flex-shrink: 0;
}

.category-tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 0.3rem;
    flex-shrink: 0;
    color: #94a3b8;
}
.category-tree-icon svg {
    width: 100%;
    height: 100%;
}

.category-tree-label {
    background: none;
    border: none;
    padding: 0.28rem 0.5rem;
    cursor: pointer;
    color: #334155;
    text-align: left;
    font-size: inherit;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.12s ease, color 0.12s ease;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

/* Force consistent sizing on all tree depths */
.category-popup .category-tree-level,
.category-popup .category-tree-children,
.category-popup .category-tree-item,
.category-popup .category-tree-header,
.category-popup .category-tree-label {
    font-size: 0.84rem;
}

.category-tree-label:hover,
.category-tree-label:focus-visible {
    background: #eef2ff;
    color: #1e40af;
}
.category-tree-label:hover .category-tree-icon,
.category-tree-label:focus-visible .category-tree-icon {
    color: #3b82f6;
}

.category-proposal[hidden] {
    display: none !important;
}

.category-proposal {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #f1f5f9;
}

.category-proposal__hint .form-row__control {
    background: #e2e8f0;
    border: none;
    box-shadow: none;
    color: #64748b;
}

.category-proposal__hint .form-row__control::placeholder {
    color: #94a3b8;
}

.category-proposal__inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 1fr);
    gap: 0.6rem;
    align-items: start;
}

.category-proposal__hint input {
    background: #f9fafc;
    color: var(--muted);
    cursor: not-allowed;
}

.custom-proposals {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    display: grid;
    gap: 0.75rem;
}

.custom-proposals__hint {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
}

.custom-proposals__example {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.pill-example {
    width: 28px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #16a34a, #4ade80);
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.6);
}

.custom-proposals__column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.custom-filter-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.custom-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(120px, 0.6fr) auto;
    gap: 0.6rem;
    align-items: start;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 0.6rem 0.65rem;
}

.custom-param-block {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.custom-param-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.custom-param-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.custom-param-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 0.6rem 0.65rem;
}

.preview-param-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.35rem 0 0.6rem;
    font-size: 0.85rem;
}

.preview-filters-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: start;
}

.preview-filters-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 970px) {
    .preview-filters-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.preview-filter-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.preview-filter-table td {
    padding: 0.2rem 0.35rem;
    color: var(--muted);
}

.preview-filter-table td:first-child {
    text-align: right;
    color: var(--text);
    font-weight: 400;
    width: 45%;
}

.preview-filter-table td:last-child {
    text-align: left;
    font-weight: 600;
    color: var(--text);
}

.preview-param-table td {
    padding: 0.2rem 0.35rem;
    color: var(--muted);
}

.preview-param-table td:first-child {
    text-align: right;
    color: var(--text);
    font-weight: 400;
}

.preview-param-table td:last-child {
    text-align: left;
    font-weight: 700;
    color: var(--text);
}

.preview-param-divider {
    width: 1%;
    text-align: center;
    color: var(--muted);
}

.preview-filter-table .is-proposed td,
.preview-param-table .is-proposed td {
    color: #2563eb;
}

.preview-proposed-note {
    margin: 0.6rem 0 0;
    font-size: 0.72rem;
    color: #2563eb;
    text-align: right;
}

.custom-param-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.custom-param-input {
    position: relative;
}

.custom-param-input input[type="text"] {
    padding-right: 48px;
}

.custom-param-actions {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.custom-param-actions .custom-filter-remove {
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
}

.custom-filter-cell {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.custom-filter-label {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.custom-filter-inputs {
    display: grid;
    gap: 0.35rem;
}

.custom-filter-row input,
.custom-filter-row select {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    width: 100%;
    background: #fff;
}

.custom-param-row input[type="text"] {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    width: 100%;
    background: #fff;
}

.custom-param-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--muted);
    justify-content: flex-start;
}

.custom-param-checkbox span {
    white-space: nowrap;
}

.custom-param-checkbox input[type="checkbox"] {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    margin: 0;
}

.custom-filter-remove {
    border: 1px solid rgba(239, 68, 68, 0.6);
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.custom-filter-remove:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.8);
    transform: translateY(-1px);
}

.char-counter {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: var(--muted);
}

.char-counter.is-over {
    color: #b91c1c;
}

@media (max-width: 768px) {
    .custom-filter-row {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 640px) {
    .category-proposal__inputs {
        grid-template-columns: 1fr;
    }
}

.dynamic-fields {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.15rem;
}

.dynamic-group {
    display: grid;
    gap: 0.35rem;
}

.dynamic-group h3 {
    margin: 0;
    font-size: 0.9rem;
}

.dynamic-group .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.dynamic-group--toggles .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.dynamic-group--toggles .form-dynamic-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 0.55rem;
    padding: 0.35rem 0.5rem;
}

.dynamic-group--toggles .form-dynamic-field > span {
    margin: 0;
    line-height: 1.15;
}

.dynamic-group--toggles .form-dynamic-field .ads-toggle {
    justify-self: end;
    margin: 0;
}

.dynamic-group--toggles .form-dynamic-field > small {
    grid-column: 1 / -1;
}

@media (max-width: 980px) {
    .dynamic-group--toggles .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dynamic-group--toggles .form-grid {
        grid-template-columns: 1fr;
    }
}

.form-dynamic-field {
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 0.3rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: #f9fafb;
}

.gallery-upload {
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 0.9rem;
    display: grid;
    gap: 0.8rem;
    background: rgba(15, 23, 42, 0.02);
}

.draft-gallery {
    display: grid;
    gap: 0.35rem;
}

.draft-gallery__grid {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.draft-gallery__grid img {
    width: 84px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: #fff;
}

.gallery-drop {
    position: relative;
    border: 1px dashed rgba(148, 163, 184, 0.8);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.gallery-drop.is-dragover {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.gallery-drop__content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.gallery-input {
    display: none;
}

.gallery-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.gallery-previews {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.gallery-preview-item {
    width: 120px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
}

.gallery-preview-item.is-active .gallery-preview-thumb {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.55);
}

.gallery-preview-item.is-cover .gallery-preview-thumb {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.65);
}

.gallery-preview-thumb {
    width: 100%;
    height: 86px;
    background-color: #0f172a;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

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

.gallery-preview-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.gallery-preview-badge {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #0f172a;
    background: rgba(15, 23, 42, 0.08);
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
}

.gallery-preview-cover {
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: #fff;
    color: #0f172a;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.gallery-preview-cover:disabled {
    cursor: default;
    opacity: 0.6;
}

.gallery-preview-item.is-cover .gallery-preview-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #065f46;
}

.gallery-preview-remove {
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: #fff;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    line-height: 18px;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
}

.gallery-preview-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
    color: #b91c1c;
}

.gallery-crop {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.45);
}

.gallery-crop__head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.gallery-crop__frame {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.85));
    border: 1px solid rgba(148, 163, 184, 0.6);
    touch-action: none;
    cursor: grab;
}

.gallery-crop__frame:active {
    cursor: grabbing;
}

.gallery-crop__frame img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    user-select: none;
}

.gallery-crop__watermark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148, 163, 184, 0.65);
    pointer-events: none;
}

.gallery-crop__frame.has-image .gallery-crop__watermark {
    opacity: 0;
    visibility: hidden;
}

.gallery-crop__controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.gallery-crop__control {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gallery-crop__control input[type="range"] {
    width: 160px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.terms-accept {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.form-actions .terms-accept {
    width: 100%;
    justify-content: center;
    text-align: center;
    flex: 0 0 100%;
}
.terms-accept input {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: #0b4a6d;
    border-radius: 4px;
}
.terms-accept span {
    color: #0f172a;
}
.terms-accept a {
    color: #0b4a6d;
    font-weight: 600;
    text-decoration: none;
}
.terms-accept a:hover,
.terms-accept a:focus-visible {
    text-decoration: underline;
}

.listing-vat-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #0f172a;
    margin-top: 1.4rem;
}

.listing-vat-row input {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: #0b4a6d;
}

@media (max-width: 720px) {
    .form-actions {
        justify-content: center;
        text-align: center;
    }
    .form-actions .btn {
        min-width: 180px;
        justify-content: center;
        margin-top: 10px;
    }
    .form-actions .terms-accept {
        width: 100%;
        justify-content: center;
        text-align: center;
        gap: 0.55rem;
        padding-top: 10px;
    }
    .form-actions .muted.small {
        width: 100%;
        text-align: center;
    }
}

.listing-form input:not([type="file"]),
.listing-form select,
.listing-form textarea {
    padding: 0.35rem 0.6rem;
    border-radius: 9px;
    font-size: 0.88rem;
}

.listing-form textarea {
    min-height: 110px;
}

.stack {
    display: grid;
    gap: 1rem;
}
.stack.tiny {
    padding-top: 15px;
}

label span {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

input {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    box-sizing: border-box;
}

select,
textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
}

textarea {
    min-height: 140px;
    resize: none;
}

.muted {
    color: var(--muted);
}

.small {
    font-size: 0.85rem;
}
.tiny {
    font-size: 0.68rem;
}

.flash-stack {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    width: min(90vw, 520px);
    z-index: 240;
    pointer-events: none;
}


.flash {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    width: fit-content;
    max-width: 100%;
    text-align: center;
    animation: flash-dismiss 0.45s ease forwards;
    animation-delay: 3.5s;
    opacity: 1;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    .flash {
        animation: none;
    }
}

@keyframes flash-dismiss {
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

.flash-error {
    border-color: #fca5a5;
    background: #fee2e2;
}

.flash-success {
    border-color: #86efac;
    background: #dcfce7;
}

.flash-info {
    border-color: #86efac;
    background: #dcfce7;
}

.flash-warning {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.banner-warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}
.banner-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    color: #991b1b;
    font-weight: 600;
}
.banner-danger a {
    color: #dc2626;
    text-decoration: underline;
}

.footer {
    border-top: 1px solid var(--border);
    padding: 2rem 0;
    background: #fff;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-links {
    display: grid;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
}

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

.footer-meta {
    align-self: flex-end;
}

.cookie-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, calc(100% - 2rem));
    background: rgba(17, 23, 39, 0.95);
    color: #fff;
    padding: 1rem 1.35rem;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.45);
    z-index: 999;
}

.cookie-banner[hidden] {
    display: none !important;
}

.cookie-banner__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cookie-banner__section {
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    display: grid;
    gap: 0.5rem;
}

.cookie-banner__section--ads {
    background: rgba(255, 255, 255, 0.1);
}

.cookie-banner__toggles {
    display: grid;
    gap: 0.5rem;
}

.cookie-switch {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.9rem;
}

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

.cookie-switch__track {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    flex-shrink: 0;
    background: transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cookie-switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.cookie-switch input:checked + .cookie-switch__track {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: rgba(34, 197, 94, 0.9);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

.cookie-switch input:checked + .cookie-switch__track::after {
    transform: translateX(20px);
    background: #e0ffe8;
}

.cookie-switch__label {
    flex: 1;
}

.cookie-switch--ads .cookie-switch__track {
    width: 52px;
    height: 30px;
    border-color: rgba(248, 113, 113, 0.5);
}

.cookie-switch--ads .cookie-switch__track::after {
    width: 24px;
    height: 24px;
}

.cookie-switch--ads input:checked + .cookie-switch__track {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: rgba(34, 197, 94, 0.95);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
}

.cookie-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.register-cookies .cookie-switch--ads .cookie-switch__track {
    width: 34px;
    height: 18px;
    background: #94a3b8;
    border-color: #7b879d;
}

.register-cookies .cookie-switch--ads .cookie-switch__track::after {
    width: 12px;
    height: 12px;
}

.register-cookies .cookie-switch--ads input:checked + .cookie-switch__track {
    background: #22c55e;
    border-color: rgba(34, 197, 94, 0.9);
    box-shadow: 0 3px 8px rgba(34, 197, 94, 0.25);
}

.register-cookies .cookie-switch--ads .cookie-switch__label {
    font-size: inherit;
}

.register-cookies .cookie-switch__label {
    font-size: inherit;
}

.cookie-banner__ads-lead {
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
}

.cookie-banner__ads-warning {
    margin: 0;
    font-size: 0.78rem;
    color: #fca5a5;
    padding-left: 2.75rem;
}

/* Reusable pill CTA styling shared with the navigation auth buttons */
.cookie-banner__button,
.cta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.4rem 1.4rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.cookie-banner__button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cookie-banner__button.ghost,
.cta-pill--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.cookie-banner__button.ghost:hover,
.cookie-banner__button.ghost:focus-visible,
.cta-pill--ghost:hover,
.cta-pill--ghost:focus-visible {
    border-color: #fff;
    transform: translateY(-1px);
}

.cookie-banner__button.primary,
.cta-pill--primary {
    background: var(--user-accent, #10b981);
    color: #0f172a;
    border-color: var(--user-accent, #10b981);
}

.cookie-banner__button.primary:hover,
.cookie-banner__button.primary:focus-visible,
.cta-pill--primary:hover,
.cta-pill--primary:focus-visible {
    background: var(--user-accent, #0d9468);
    border-color: var(--user-accent, #0d9468);
    color: #fff;
    transform: translateY(-1px);
}

.cookie-ads-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9, 12, 24, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
}

.cookie-ads-overlay[hidden] {
    display: none !important;
}

.cookie-ads-overlay__card {
    background: #fff;
    color: #0f172a;
    border-radius: 24px;
    padding: 1.5rem;
    max-width: 460px;
    width: min(460px, 100%);
    text-align: center;
    box-shadow: 0 25px 55px rgba(15, 23, 42, 0.35);
    display: grid;
    gap: 0.75rem;
}

.cookie-ads-overlay__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cookie-ads-overlay__button {
    border: none;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-weight: 600;
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.cookie-ads-overlay__button:hover,
.cookie-ads-overlay__button:focus-visible {
    background: #1f2937;
}

.cookie-ads-overlay__link

.terms-overlay .cookie-ads-overlay__card {
    max-width: 760px;
    width: min(760px, 100%);
    text-align: left;
    gap: 1rem;
}

.terms-overlay__content {
    max-height: min(60vh, 440px);
    overflow-y: auto;
    padding-right: 0.35rem;
}

.terms-overlay .cookie-ads-overlay__actions {
    align-items: flex-start;
}

@media (max-width: 600px) {
    .terms-overlay .cookie-ads-overlay__card {
        padding: 1.25rem;
    }

    .terms-overlay__content {
        max-height: 55vh;
    }
}
 {
    border: none;
    background: transparent;
    color: #0f172a;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

body.ads-consent-required {
    overflow: hidden;
}

body.ads-consent-required main,
body.ads-consent-required .site-header,
body.ads-consent-required .mobile-bottom-shell,
body.ads-consent-required footer,
body.consent-blocked main,
body.consent-blocked .site-header,
body.consent-blocked .mobile-bottom-shell,
body.consent-blocked footer {
    pointer-events: none;
    user-select: none;
    filter: blur(1px);
}

body.ads-consent-required .cookie-banner,
body.ui-popup-active:not(.consent-blocked):not(.ads-consent-required) main,
body.ui-popup-active:not(.consent-blocked):not(.ads-consent-required) footer {
    pointer-events: none;
    filter: blur(1px);
}

body.ui-popup-active:not(.consent-blocked):not(.ads-consent-required)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(9, 12, 24, 0.4);
    z-index: 120;
    pointer-events: none;
}

body.ads-consent-required .cookie-ads-overlay,
body.consent-blocked .cookie-banner {
    pointer-events: auto;
    filter: none;
}

body.ads-consent-required::after,
body.consent-blocked::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(9, 12, 24, 0.65);
    z-index: 900;
    pointer-events: none;
}

body.ads-consent-required .cookie-banner,
body.consent-blocked .cookie-banner {
    z-index: 1100;
}

body.ui-popup-active[data-popup-context="category"]:not(.consent-blocked):not(.ads-consent-required)::after {
    display: none;
}

body.ui-popup-active[data-popup-context="footer"]:not(.consent-blocked):not(.ads-consent-required) .site-header {
    pointer-events: none;
    filter: blur(1px);
}

body.ui-popup-active[data-popup-context="footer"]:not(.consent-blocked):not(.ads-consent-required) .mobile-bottom-shell {
    pointer-events: auto;
    filter: none;
    z-index: 240;
}

body.ui-popup-active[data-popup-context="sort"]:not(.consent-blocked):not(.ads-consent-required) main,
body.ui-popup-active[data-popup-context="sort"]:not(.consent-blocked):not(.ads-consent-required) footer {
    pointer-events: auto;
    filter: blur(1px);
}

body.ui-popup-active[data-popup-context="sort"]:not(.consent-blocked):not(.ads-consent-required)::after {
    pointer-events: auto;
}

@media (max-width: 640px) {
    .cookie-banner {
        bottom: 1rem;
        padding: 1rem;
    }

    .cookie-banner__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner__button {
        width: 100%;
        justify-content: center;
    }
}

.auth-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translate(-50%, 20px);
    width: min(420px, calc(100% - 2rem));
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    padding: 1rem 1.35rem;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.45);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.auth-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.auth-toast__surface {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.auth-toast__message {
    margin: 0;
    font-size: 0.95rem;
}

.auth-toast__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.auth-toast__dismiss {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
}

.auth-toast__dismiss:hover,
.auth-toast__dismiss:focus-visible {
    border-color: #fff;
    transform: translateY(-1px);
}

.auth-toast[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .auth-toast__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .auth-toast__actions .cta-pill {
        width: 100%;
        justify-content: center;
    }
}

.empty-state {
    border: 1px dashed var(--border);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    color: var(--muted);
}

.safety-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 2.5rem 0 1.5rem;
}

.safety-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.safety-cards article {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.9rem;
    background: var(--surface-elevated);
    display: grid;
    gap: 0.25rem;
}

.safety-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.safety-steps article {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 1rem;
    background: var(--surface);
    display: grid;
    gap: 0.35rem;
}

body.catalog-page main.container {
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}


body.catalog-page main.container > * {
    width: 100%;
    box-sizing: border-box;
}

body.catalog-page .category-picker-bar {
    order: 0;
}

body.catalog-page .catalog-breadcrumb-bar {
    order: 1;
}

body.messages-page {
    overflow-x: hidden;
}

body.messages-page main.container {
    width: 100%;
    max-width: 100%;
    padding-left: clamp(0.5rem, 3vw, 1.5rem);
    padding-right: clamp(0.5rem, 3vw, 1.5rem);
    box-sizing: border-box;
}

body.messages-page main.container > * {
    width: 100%;
    box-sizing: border-box;
}

body.settings-page main.container {
    width: 100%;
    min-height: calc(100vh - 200px);
}

.catalog-system-bar {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0.5rem 0 0.4rem;
    flex-wrap: wrap;
}

.system-message-card {
    flex: 1 1 240px;
    background: #f7f7f7;
    border: 1px solid #dfe1e4;
    border-radius: 14px;
    padding: 0.4rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: 400;
    color: var(--text);
}

.catalog-system-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
}

.catalog-system-card strong {
    font-size: 0.95rem;
    margin: 0;
}

.system-message-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.catalog-system-bar .system-message-card {
    max-height: 60px;
    min-height: 0;
    padding: 0.2rem 0.45rem;
}

.catalog-system-bar .catalog-system-card strong {
    font-size: 0.9rem;
    line-height: 1.1;
}

.category-picker-bar {
    position: sticky;
    top: var(--page-offset-top, 99px);
    z-index: 145;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    height: 50px;
    padding: 0 clamp(1rem, 2vw, 3rem);
    margin: 0;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.category-picker-intro p {
    font-size: 1.05rem;
    font-weight: 400;
    color: #0f172a;
    margin: 0;
    flex: 0 0 auto;
}

.category-picker-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 280px) minmax(320px, 1.4fr);
    grid-template-areas: "left middle manage";
    align-items: stretch;
    gap: 0.75rem;
    min-width: 0;
    min-height: 50px;
    width: 100%;
}

.category-picker-actions {
    grid-area: manage;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.category-picker-actions .nav-meta-actions {
    width: auto;
    margin-top: 0;
}

.category-picker-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    grid-area: left;
}

.category-picker-heading {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 1rem;
    color: #0f172a;
}

.category-picker-main {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    flex-wrap: nowrap;
    height: 50px;
}

.category-picker-main > * {
    flex-shrink: 0;
}

.category-picker-shell {
    flex: 1 1 auto;
}

.category-picker-main .ribbon-filter-shell {
    flex: 0 0 auto;
}

.category-picker-main .catalog-search-pill {
    flex: 0 0 auto;
    margin-left: auto;
}
.listing-manage-shell[hidden] {
    display: none;
}

.listing-manage-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 0;
}

.listing-manage-status {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-right: auto;
}

.listing-manage-status .listing-status-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.listing-status-row .status-pill {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

@media (min-width: 901px) {
    .listing-manage-banner {
        flex-wrap: nowrap;
    }
    .listing-manage-status {
        flex-wrap: nowrap;
    }
    .listing-manage-status .listing-status-row {
        flex-wrap: nowrap;
    }
}

.listing-manage-status .status-pill {
    flex: 0 0 auto;
    width: max-content;
    min-width: 0;
}

.listing-manage-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .listing-manage-banner {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .listing-manage-status {
        flex: 1 1 100%;
        width: 100%;
        margin-right: 0;
    }
    .listing-manage-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}
.admin-glass-shell {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.2rem;
}

.listing-management-head-meta {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    padding: 0.42rem 0.6rem 0.12rem 0.35rem;
}

.listing-management-toggle {
    flex: 1 1 auto;
    min-width: 260px;
}

.listing-management-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    width: 100%;
    max-width: 420px;
}

.listing-management-controls__row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.listing-management-mail {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    justify-content: flex-end;
}

.listing-management-mail select {
    min-width: 220px;
}

.listing-management-origin,
.listing-management-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.listing-management-origin span,
.listing-management-mail span {
    white-space: nowrap;
}

.listing-management-origin .muted.tiny {
    font-size: 0.72rem;
}

.listing-management-main__actions {
    margin-top: 0.15rem;
    min-height: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.listing-management-mail__select {
    font-size: 0.78rem;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
}

.listing-management-main {
    display: grid;
    gap: 0.08rem;
}

.listing-management-main > strong {
    line-height: 1.15;
    margin-bottom: 0.04rem;
}

.listing-management-main > .muted.tiny {
    line-height: 1.1;
}

.listing-management-actions .btn.small {
    height: 1.72rem;
    min-height: 1.72rem;
    padding: 0 0.7rem;
    line-height: 1;
    font-size: 0.75rem;
    box-sizing: border-box;
}

.listing-management-actions .btn.small,
.listing-management-status .status-pill {
    min-height: 1.72rem;
    display: inline-flex;
    align-items: center;
}

.listing-management-status .status-pill {
    height: 1.72rem;
    line-height: 1;
    padding: 0 0.65rem;
    flex: 0 0 auto;
    min-width: 0;
}

.listing-management-group .conversation-group__row {
    align-items: flex-start;
}

.listing-status-toggle {
    cursor: pointer;
    border: 1px solid transparent;
}

.listing-status-toggle:focus-visible {
    border-color: rgba(37, 99, 235, 0.6);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    outline: none;
}

.listing-status-toggle.status-draft {
    background: #dbeafe;
    color: #1e3a8a;
    border: 1px solid rgba(30, 58, 138, 0.3);
}

.listing-management-group.is-dirty {
    background: #ecfdf3;
    border-color: rgba(22, 163, 74, 0.4);
}

.listing-management-origin {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.listing-management-reason {
    gap: 0.5rem;
}

.listing-management-reason__preset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.listing-management-reason__preset .listing-management-mail__select {
    min-width: 220px;
}

.listing-management-reason textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
}

.listing-management-preview {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.95fr);
    gap: 0.8rem;
    align-items: start;
}

.listing-management-preview__listing {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.listing-management-preview__listing img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
}

.listing-management-preview__meta {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.listing-management-preview__meta > strong {
    line-height: 1.18;
}

.listing-management-preview__stats {
    display: grid;
    gap: 0.25rem;
    font-size: 0.84rem;
    color: #334155;
}

.listing-management-preview__flag {
    font-size: 0.74rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
    padding: 0.3rem 0.45rem;
}

.listing-management-vendor-card {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 0.6rem 0.7rem;
    display: grid;
    gap: 0.45rem;
}

.listing-management-vendor-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.listing-management-vendor-card__head .status-pill {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 0.68rem;
    padding: 0.12rem 0.45rem;
}

.listing-management-vendor-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

.listing-management-vendor-card__metrics > div {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    padding: 0.35rem 0.45rem;
    display: grid;
    gap: 0.08rem;
}

.listing-management-vendor-card__metrics strong {
    font-size: 0.86rem;
    line-height: 1.1;
}

.listing-management-vendor-card__history {
    line-height: 1.25;
}

.listing-management-detail-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.8rem;
    align-items: start;
}

.listing-management-detail-grid img {
    width: 120px;
    height: auto;
    border-radius: 12px;
}

@media (max-width: 980px) {
    .listing-management-preview {
        grid-template-columns: 1fr;
    }
}

.listing-management-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.8rem;
}

.listing-management-scan-results {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid #e5e7eb;
}

.listing-management-scan-results__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    align-items: center;
    font-size: 0.76rem;
}

.listing-management-scan-results__list {
    display: grid;
    gap: 0.4rem;
    max-height: 240px;
    overflow: auto;
    padding-right: 0.15rem;
}

.listing-management-scan-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: start;
    border: 1px solid #d7dee9;
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.45rem 0.55rem;
}

.listing-management-scan-item__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.15rem;
}

.listing-management-scan-item__check input {
    width: 14px;
    height: 14px;
}

.listing-management-scan-item__main {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
    font-size: 0.72rem;
}

.listing-management-scan-item__main > strong {
    font-size: 0.78rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-management-scan-item__matches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.listing-management-scan-item__matches .status-pill {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: max-content;
    font-size: 0.6rem;
    line-height: 1.1;
    padding: 0.08rem 0.32rem;
}

.listing-management-scan-item__email-note {
    font-size: 0.62rem;
    color: #64748b;
}

.listing-management-scan-item__actions {
    display: grid;
    gap: 0.28rem;
    min-width: 160px;
}

.listing-management-scan-item__template {
    display: grid;
    gap: 0.1rem;
}

.listing-management-scan-item__template select {
    width: 100%;
    padding: 0.24rem 0.45rem;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-size: 0.7rem;
    background: #fff;
}

.listing-management-scan-item__action-row {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.listing-management-scan-item__action-row .btn.small {
    padding: 0.24rem 0.52rem;
    font-size: 0.69rem;
}

.listing-management-scan-results__bulk {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

.listing-management-scan-results__bulk .btn.small {
    font-size: 0.71rem;
    padding: 0.32rem 0.72rem;
}

.listing-management-scan-results__paging {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.listing-management-scan-results__paging-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.listing-management-scan-results__paging-actions select {
    padding: 0.2rem 0.4rem;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 0.72rem;
}

.status-pill.status-archived {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid rgba(153, 27, 27, 0.3);
}

.status-pill.status-blocked_review,
.status-pill.status-blocked-review {
    background: linear-gradient(180deg, rgba(254, 226, 226, 0.98), rgba(252, 165, 165, 0.92));
    color: #991b1b;
    border: 1px solid rgba(220, 38, 38, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.status-pill.status-deleted-owner {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid rgba(220, 38, 38, 0.34);
}

.status-pill.status-deleted-owner-meta {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.listing-manage-shell .action-menu-toggle {
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    justify-content: center;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: #111827;
    box-shadow: 0 0 0 rgba(37, 99, 235, 0);
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.listing-manage-shell .action-menu-toggle:hover,
.listing-manage-shell .action-menu-toggle:focus-visible,
.listing-manage-shell .action-menu-toggle[aria-expanded="true"] {
    border-color: #2563eb;
    color: #1e3a8a;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
    outline: none;
}

.action-menu-picker-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-menu-picker-arrow {
    font-size: 0.85rem;
    color: inherit;
    transition: transform 0.2s ease;
}

.action-menu-toggle[aria-expanded="true"] .action-menu-picker-arrow {
    transform: rotate(180deg);
}

.category-stats-card {
    flex: 0 0 auto;
    min-height: 46px;
    background: transparent;
    border: none;
    border-radius: 14px;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    --price-color-0: #6366f1;
    --price-color-1: #0ea5e9;
    --price-color-2: #14b8a6;
    --price-color-3: #84cc16;
    --price-color-4: #f97316;
    --price-color-5: #ec4899;
    --price-color-6: #facc15;
}

.category-stats-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.price-stats {
    position: relative;
    width: 36px;
    height: 36px;
    --price-color-0: #6366f1;
    --price-color-1: #0ea5e9;
    --price-color-2: #14b8a6;
    --price-color-3: #84cc16;
    --price-color-4: #f97316;
    --price-color-5: #ec4899;
    --price-color-6: #facc15;
}

body.ui-popup-active[data-popup-context="price-stats"] .price-stats {
    z-index: 140;
}

.price-stats--mobile {
    display: none;
}

.price-stats__chart {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--pie-background, transparent);
    position: relative;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-stats__chart::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.price-stats__chart.is-empty {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.price-stats__chart.is-empty::after {
    display: none;
}

.price-stats__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #111827;
    font-size: 1rem;
    pointer-events: none;
}

.price-stats__legend {
    list-style: none;
    margin: 0;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    position: absolute;
    top: 58px;
    left: 0;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    display: none;
    min-width: 200px;
    z-index: 25;
    gap: 0.45rem 0.6rem;
}

body.ui-popup-active[data-popup-context="price-stats"] .price-stats__legend {
    z-index: 150;
}

.price-stats:hover .price-stats__legend {
    display: flex;
    flex-direction: column;
}

.price-stats.is-open .price-stats__legend {
    display: flex;
    flex-direction: column;
}

.price-stats__legend li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.price-stats__legend .legend-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.price-stats__legend .legend-count {
    margin-left: auto;
    font-weight: 600;
    color: #0f172a;
}

.price-stats__legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.price-stats__legend strong {
    font-size: 0.85rem;
    color: #0f172a;
}

.category-right-stack {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 46px;
    justify-self: flex-end;
    justify-content: center;
    min-width: 220px;
    max-width: 220px;
    width: 100%;
    align-items: flex-end;
    grid-area: manage;
}

.category-right-stack .category-panel-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 0.15rem 0.6rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 28px;
    height: 28px;
}

.category-panel-card[hidden] {
    display: none !important;
}

.category-panel-card .eyebrow {
    margin-bottom: 0.35rem;
}

.category-picker-info {
    flex: 0 0 320px;
    display: flex;
    justify-content: center;
}

.category-info-card {
    min-height: 80px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px dashed rgba(15, 23, 42, 0.2);
    border-radius: 16px;
    padding: 0.4rem 0.75rem;
    box-sizing: border-box;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    grid-area: middle;
}

.category-info-card.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.category-right-stack .category-manage-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-height: 28px;
    height: 28px;
    align-items: flex-end;
}

.category-right-stack [data-manage-anchor] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.category-picker-shell {
    position: relative;
    flex: 0 0 auto;
    max-width: 100%;
}

.category-picker-toggle {
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: #fff;
    border-radius: 999px;
    padding: 0.45rem 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 240px;
    justify-content: space-between;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    box-shadow: 0 0 0 rgba(37, 99, 235, 0);
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.category-picker-toggle:hover,
.category-picker-toggle:focus-visible,
.category-picker-shell.is-open .category-picker-toggle {
    border-color: #2563eb;
    color: #1e3a8a;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
    outline: none;
}

.category-picker-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-picker-arrow {
    font-size: 0.85rem;
    color: inherit;
    transition: transform 0.2s ease;
}

.category-picker-shell.is-open .category-picker-arrow {
    transform: rotate(180deg);
}

.category-picker-popover {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: min(840px, 92vw);
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
    padding: 0.4rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
}

.category-picker-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
    z-index: -1;
}

.category-picker-shell.is-open .category-picker-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.category-picker-columns {
    display: flex;
    gap: 0.5rem;
    min-height: 260px;
}

.category-picker-column {
    flex: 1;
    min-width: 0;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.2rem;
    padding-right: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}
.category-picker-column::-webkit-scrollbar {
    width: 5px;
}
.category-picker-column::-webkit-scrollbar-track {
    background: transparent;
}
.category-picker-column::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 999px;
}
.category-picker-column::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

.category-picker-divider {
    width: 1px;
    background: #e2e8f0;
}

.category-picker-placeholder {
    display: inline-block;
    font-size: 0.9rem;
    color: #94a3b8;
    padding: 0.5rem 0.25rem;
}

.category-picker-option {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #334155;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0;
}

.category-picker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 0.45rem;
    flex-shrink: 0;
    color: #94a3b8;
    transition: color 0.15s ease;
}
.category-picker-icon svg {
    width: 100%;
    height: 100%;
}

.category-picker-entry {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.category-picker-entry-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.category-picker-entry-row .category-picker-option {
    flex: 1;
}

.category-picker-note {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-left: 0.25rem;
}

.category-picker-note a {
    color: #64748b;
    text-decoration: underline;
}

.category-picker-separator {
    height: 1px;
    background: #e2e8f0;
    margin: 0.35rem 0;
}

.category-picker-virtual-group {
    background: #f8fafc;
    border-radius: 10px;
    padding: 0.35rem 0.4rem;
    margin-bottom: 0.5rem;
    display: grid;
    gap: 0.15rem;
}

.category-picker-virtual-group .category-picker-entry {
    margin: 0;
}

.category-picker-option:hover,
.category-picker-option.is-hover {
    background: #eef2ff;
    color: #1e40af;
}

.category-picker-option:hover .category-picker-icon,
.category-picker-option.is-hover .category-picker-icon {
    color: #3b82f6;
}

.category-picker-option.is-active {
    background: #dbeafe;
    color: #1e40af;
}

.category-picker-option.is-active .category-picker-icon {
    color: #3b82f6;
}

@media (max-width: 900px) {
    .category-picker-option {
        background: transparent;
        outline: none;
    }

    .category-picker-option:hover,
    .category-picker-option.is-hover {
        background: #eef2ff;
    }

    .category-picker-option.is-active {
        background: #dbeafe;
        color: #1e40af;
    }
}

.category-picker-group {
    border-bottom: none;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
}

.category-picker-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.category-picker-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
}

.category-picker-group-header .category-picker-option {
    flex: 1;
}

.category-picker-group {
    margin: 0;
    padding: 0;
}

.category-picker-group:has(.category-picker-subitems) {
    margin-bottom: 1rem;
}

.category-picker-subitems {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0.1rem 0.3rem;
    margin: 0.15rem 0 0 0;
    background: #fff;
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    border-left: 2.5px solid #c7d2fe;
}

.category-picker-subitem {
    display: flex;
    align-items: center;
}

.category-picker-subbutton {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    padding: 0.18rem 0.3rem;
    font-size: 0.74rem;
    font-weight: 400;
    color: #475569;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
}

.category-picker-subbutton:hover {
    background: #eef2ff;
    color: #1e40af;
}

.category-picker-subbutton.is-active {
    background: #dbeafe;
    color: #1e40af;
}

/* ── Category picker star + pin icons ── */
.category-picker-icons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    width: 48px;
    justify-content: flex-end;
}

.category-picker-icons--mini {
    gap: 1px;
    width: 40px;
}

.category-star-toggle,
.category-pin-toggle {
    border: 0;
    background: transparent;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 0;
}

.category-star-toggle svg,
.category-pin-toggle svg {
    display: block;
    fill: none;
    transition: fill 0.15s ease, color 0.15s ease;
}

.category-star-toggle:hover {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

.category-star-toggle.is-active {
    color: #f59e0b;
}

.category-star-toggle.is-active svg {
    fill: currentColor;
}

.category-pin-toggle:hover {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}

.category-pin-toggle.is-active {
    color: #6366f1;
}

.category-pin-toggle.is-active svg {
    fill: currentColor;
}

.category-star-toggle--mini,
.category-pin-toggle--mini {
    width: 18px;
    height: 18px;
}

.category-picker-count {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: 0.5rem;
}

.ribbon-tertiary-cats {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 0 0 320px;
    border-right: 1px solid #cfd3d8;
    padding-right: 0.45rem;
}

.ribbon-filter-shell {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: stretch;
    border-radius: 999px;
}

.ribbon-filter-shell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

.ribbon-row .ribbon-filter-shell {
    margin-left: auto;
}

.ribbon-filter-shell.is-disabled .ribbon-filter-toggle {
    opacity: 0.5;
    cursor: not-allowed;
}

.ribbon-filter-shell.is-disabled .ribbon-filter-popover {
    display: none;
}

.ribbon-filter-toggle {
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 3px 1rem;
    cursor: pointer;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 999px;
    box-shadow: 0 0 0 rgba(37, 99, 235, 0);
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ribbon-filter-toggle:hover,
.ribbon-filter-toggle:focus-visible,
.ribbon-filter-shell:focus-within .ribbon-filter-toggle,
.ribbon-filter-shell:hover .ribbon-filter-toggle {
    border-color: #2563eb;
    color: #1e3a8a;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
    outline: none;
}

.ribbon-filter-toggle::after {
    content: "\25BE";
    font-size: 0.8rem;
    color: inherit;
    margin-left: 0.3rem;
}

.ribbon-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
}

.ribbon-filter-popover {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: auto;
    width: min(640px, 80vw);
    background: #fff;
    border: 1px solid #cfd3d8;
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.22);
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 15;
}

.ribbon-filter-shell:hover .ribbon-filter-popover,
.ribbon-filter-shell:focus-within .ribbon-filter-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ribbon-filter-shell.is-forced-closed .ribbon-filter-popover {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(12px) !important;
}

.filter-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.category-filter-field--autocomplete {
    position: relative;
}

.filter-autocomplete {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
    max-height: 200px;
    overflow-y: auto;
    z-index: 40;
}

.filter-autocomplete[hidden] {
    display: none;
}

.filter-autocomplete li {
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.filter-autocomplete li:hover,
.filter-autocomplete li:focus-visible {
    background: rgba(37, 99, 235, 0.12);
    color: #1e3a8a;
}

.filter-panel__divider {
    border: 0;
    border-top: 1px dashed #d5dbe6;
    margin: 0;
}

@media (min-width: 901px) {
    .ribbon-filter-popover {
        position: fixed;
        top: var(--filter-popover-top, 50%);
        left: var(--filter-popover-left, 50%);
        right: auto;
        width: min(760px, 92vw);
        max-height: 80vh;
        transform: translate(0, 12px);
        z-index: 150;
    }

    .ribbon-filter-shell:hover .ribbon-filter-popover,
    .ribbon-filter-shell:focus-within .ribbon-filter-popover {
        transform: translate(0, 0);
    }

    .filter-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
        grid-template-areas:
            "base divider category"
            "actions actions actions";
        column-gap: 1.25rem;
        row-gap: 1rem;
    }

    .filter-section--base {
        grid-area: base;
    }

    .filter-section--category {
        grid-area: category;
    }

    .filter-panel__divider {
        grid-area: divider;
        align-self: stretch;
        width: 1px;
        border-top: 0;
        border-left: 1px solid #d5dbe6;
        margin: 0;
    }

    .filter-panel__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .filter-section__body {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .filter-section--category .filter-section__body {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .filter-section--category .category-filter-grid--columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-section--category .category-filter-field:not(.category-filter-field--toggle) label {
        display: none;
    }

    .filter-section--category .category-filter-field--toggle {
        grid-column: span 2;
    }

    .filter-section--category .filter-pill-input--select {
        max-width: 100%;
        width: 100%;
        justify-self: start;
    }
}

.filter-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.filter-section__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.filter-section__head p {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f172a;
}

.filter-head-note {
    font-weight: 400;
    font-size: 0.68rem;
    color: #64748b;
}

.filter-section__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.filter-panel__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
    gap: 0.5rem;
}

.filter-panel__actions-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.filter-panel__result-note {
    margin: 0;
    font-size: 0.72rem;
    color: #6b7280;
    line-height: 1.2;
}

.filter-panel__result-note strong {
    font-weight: 700;
    color: inherit;
}

.btn-reset-filters {
    border-color: #f87171;
    color: #b91c1c;
    font-size: 0.75rem;
    padding: 0.25rem 0.8rem;
}

.btn-reset-filters:hover,
.btn-reset-filters:focus-visible {
    border-color: #dc2626;
    color: #7f1d1d;
    box-shadow: 0 6px 18px rgba(185, 28, 28, 0.25);
}

.category-filter-placeholder {
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
    margin: 0;
}

.ribbon-placeholder {
    font-size: 0.8rem;
    color: #64748b;
}

.ribbon-secondary.is-accent,
.ribbon-tertiary.is-accent {
    background: #cfd2d8;
}

.ribbon-filter-shell.is-accent {
    background: transparent;
    padding: 0;
}

.ribbon-filter-shell.is-accent .ribbon-filter-toggle,
.ribbon-filter-shell.has-active .ribbon-filter-toggle {
    background: #fff;
    color: #111827;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.catalog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 3rem);
    margin: 0 0 1.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 10px clamp(1rem, 2vw, 3rem);
    align-items: stretch;
}

.status-pill {
    flex: 1;
    min-width: 32%;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    padding: 0.25rem 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    background: rgba(15, 23, 42, 0.04);
}

.status-pill strong {
    font-size: 0.85rem;
}

body.catalog-page .category-picker-bar,
body.catalog-page .category-right-stack,
body.catalog-page .favorites-hero,
body.catalog-page .favorites-controls {
    padding-left: clamp(1rem, 2vw, 3rem);
    padding-right: clamp(1rem, 2vw, 3rem);
    box-sizing: border-box;
}

body.catalog-page .catalog-column {
    gap: 0.2rem;
}

.catalog-column {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.column-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.category-item.is-expanded > .category-node:not(.is-selected) {
    background: rgba(255, 255, 255, 0.16);
}

.category-item.is-expanded > .category-children {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    margin: 0.2rem 0 0.25rem;
    padding: 0.4rem 0.45rem 0.45rem 0.65rem;
    border-left-color: transparent;
}

.category-filter-box {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

.category-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.4rem 0.65rem;
}

.category-filter-grid--columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0.6rem;
}

.category-filter-grid--base {
    grid-template-columns: 170px minmax(180px, 1fr) minmax(140px, 0.9fr);
    align-items: start;
    row-gap: 0.25rem;
}

.category-filter-grid--base .category-filter-field {
    display: contents;
}

.category-filter-grid--base .category-filter-field input,
.category-filter-grid--base .category-filter-field select {
    border-radius: 999px;
    padding: 0.18rem 0.65rem;
    min-height: 24px;
    min-width: 0;
    width: 60%;
    justify-self: start;
    grid-column: 2;
}

.category-filter-grid--base .category-filter-field label,
.category-filter-grid--base .category-filter-field--toggle .filter-toggle-label {
    grid-column: 1;
    margin: 0;
    white-space: nowrap;
    text-align: right;
    justify-self: end;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0.04em;
}

.category-filter-grid--base .category-filter-field--toggle .filter-toggle {
    justify-self: start;
    width: auto;
    grid-column: 2;
}

.category-filter-grid--base .category-filter-field .filter-value {
    grid-column: 3;
}

.category-filter-grid--base-sections {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    width: 100%;
}

.category-filter-section__title {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.25rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #e2e8f0;
}

.category-filter-section__grid {
    display: grid;
    gap: 0.35rem 0.8rem;
    width: 100%;
}

.category-filter-section__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem 0.6rem;
    width: 100%;
}

.category-filter-section__grid--rows {
    grid-auto-rows: auto;
    gap: 0.35rem;
    width: 100%;
}

.category-filter-range-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1.2rem;
    width: 100%;
    align-items: stretch;
}

.category-filter-grid--category-sections .category-filter-range-row .filter-pill-input {
    width: 100%;
    justify-self: start;
}

.category-filter-grid--category-sections .category-filter-range-row .filter-pill-input {
    width: 100%;
    justify-self: start;
}

.category-filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    min-width: 0;
}

.category-filter-item--pill {
    gap: 0;
    width: 100%;
}

.filter-pill-input {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    border: 1px solid #d6deea;
    padding: 0.1rem 0.35rem;
    background: #fff;
    width: 100%;
    cursor: text;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
    min-height: 20px;
}

.filter-pill-label {
    background: #e2e8f0;
    color: #475569;
    font-size: 0.56rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    min-width: 0;
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    margin: 0;
}

.filter-pill-input input,
.filter-pill-input select {
    border: none;
    background: transparent;
    min-height: 20px;
    min-width: 0;
    width: 100%;
    flex: 1 1 0;
    padding: 0;
    font-size: 0.72rem;
    outline: none;
    line-height: 1.1;
    margin: 0;
    padding-left: 0.15rem;
}

.filter-pill-input input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.filter-pill-input input[type="number"]::-webkit-outer-spin-button,
.filter-pill-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.filter-pill-input.is-clearable {
    position: relative;
}

.filter-pill-input.is-clearable.has-value input[type="number"] {
    padding-right: 0.35rem;
}

.filter-pill-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    border-radius: 999px;
    padding: 0;
    margin: 0 0 0 0.1rem;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    flex: 0 0 auto;
}

.filter-pill-input.has-value .filter-pill-clear {
    opacity: 1;
    pointer-events: auto;
}

.filter-pill-clear:hover,
.filter-pill-clear:focus-visible {
    color: #475569;
    background: rgba(148, 163, 184, 0.14);
    outline: none;
}

.filter-pill-suffix {
    font-size: 0.62rem;
    color: #94a3b8;
    white-space: nowrap;
    pointer-events: none;
    margin-left: 0;
}

.filter-pill-input.has-value .filter-pill-suffix {
    opacity: 0;
    width: 0;
    overflow: hidden;
    margin: 0;
}

.filter-pill-input.has-value {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.08) !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12);
}



.filter-pill-input.has-value .filter-pill-label {
    background: transparent;
    color: #14532d;
}

.filter-pill-input.has-value .filter-pill-label,
.filter-pill-input.has-value .filter-pill-suffix {
    background: transparent;
    box-shadow: none;
}

.filter-pill-input.has-value input,
.filter-pill-input.has-value select,
.filter-pill-input.has-value .filter-pill-label,
.filter-pill-input.has-value .filter-pill-suffix {
    background-color: transparent !important;
}

.filter-pill-input.has-value input,
.filter-pill-input.has-value select {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.filter-pill-input--select {
    position: relative;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    overflow: visible;
}

.filter-pill-input--select:hover {
    border-color: #94a3b8;
}

.filter-pill-input--select:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.filter-pill-input--select::after {
    content: none;
}

.filter-pill-input--select select,
.filter-pill-input--select input[type="text"] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.35rem 1.6rem 0.35rem 0.55rem;
    width: 100%;
    min-width: 0;
    background-color: transparent;
    font-size: 0.72rem;
    color: #334155;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: 8px;
}

/* ── Custom select dropdown ── */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.35rem 0.55rem;
    border: none;
    background: transparent;
    font-size: 0.72rem;
    color: #94a3b8;
    cursor: pointer;
    text-align: left;
    line-height: 1.3;
    gap: 0.3rem;
}

.custom-select.has-value .custom-select__trigger {
    color: #15803d;
    font-weight: 500;
}

.custom-select__text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select__arrow {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #64748b;
    transition: transform 0.2s ease;
}

.custom-select.is-open .custom-select__arrow {
    transform: rotate(180deg);
}

.custom-select.has-value .custom-select__arrow {
    border-top-color: #22c55e;
}

.custom-select__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12), 0 1px 4px rgba(15, 23, 42, 0.06);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
    list-style: none;
    margin: 4px 0 0;
}

.custom-select__dropdown::-webkit-scrollbar {
    width: 5px;
}

.custom-select__dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.custom-select__dropdown::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.custom-select__option {
    padding: 0.4rem 0.7rem;
    font-size: 0.72rem;
    color: #334155;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select__option:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.custom-select__option.is-selected {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 500;
}

.custom-select__option--placeholder {
    color: #94a3b8;
    font-style: italic;
}

.custom-select__option--placeholder:hover {
    background: #fef2f2;
    color: #94a3b8;
}

.filter-pill-input--select.has-value {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.06);
}

.filter-pill-input:focus-within {
    border-color: #0f172a;
    box-shadow: 0 0 0 1px #0f172a;
}

.filter-pill-input.has-value:focus-within {
    background: rgba(34, 197, 94, 0.08);
}

.filter-pill-input.has-value input,
.filter-pill-input.has-value select {
    background: transparent;
    box-shadow: none;
}

.filter-pill-input--select {
    width: 100%;
}

.category-filter-item label,
.category-filter-item .filter-toggle-label {
    margin: 0;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0.04em;
}

.category-filter-item:not(.category-filter-item--pill) input,
.category-filter-item:not(.category-filter-item--pill) select {
    border-radius: 999px;
    padding: 0.18rem 0.65rem;
    min-height: 24px;
    min-width: 0;
    width: 100%;
}

.category-filter-item--toggle .filter-toggle {
    align-self: flex-start;
    width: auto;
}

.category-filter-item--empty {
    visibility: hidden;
}

.category-filter-field--empty {
    visibility: hidden;
}

.category-filter-divider {
    height: 1px;
    background: #d6deea;
    border-radius: 999px;
}

/* ── Aggregated parent category groups ── */
.category-filter-grid--aggregated {
    gap: 0.3rem;
}

.category-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-filter-group__title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e8edf4 100%);
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
}

.category-filter-grid--columns {
    display: grid;
    grid-template-columns: 170px minmax(180px, 1fr);
    align-items: start;
    row-gap: 0.25rem;
}

.category-filter-grid--columns .category-filter-field {
    display: contents;
}

.category-filter-grid--columns .category-filter-field label {
    grid-column: 1;
    margin: 0;
    white-space: nowrap;
    text-align: right;
    justify-self: end;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0.04em;
}

.category-filter-grid--columns .category-filter-field input,
.category-filter-grid--columns .category-filter-field select {
    grid-column: 2;
    border-radius: 999px;
    padding: 0.18rem 0.65rem;
    min-height: 24px;
    min-width: 0;
    width: 60%;
    justify-self: start;
}

.category-filter-grid--columns .category-filter-field--toggle .filter-toggle-label {
    grid-column: 1;
    width: 100%;
    text-align: right;
    justify-self: end;
    margin-left: 0;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0.04em;
}

.category-filter-grid--columns .category-filter-field--toggle .filter-toggle {
    grid-column: 2;
    justify-self: start;
    width: auto;
}


.category-filter-column {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.category-filter-column[data-filter-column="toggle"] {
    align-items: stretch;
}

.category-filter-column[data-filter-column="toggle"] .category-filter-field--toggle {
    background: transparent;
    border-color: transparent;
    padding: 0.15rem 0;
}

.category-filter-column[data-filter-column="toggle"] .filter-toggle-label {
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0;
    color: #334155;
}

.category-filter-column[data-filter-column="toggle"] .filter-toggle {
    margin-left: auto;
}

.category-filter-column__title {
    margin: 0;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.category-filter-empty {
    margin: 0;
    font-size: 0.7rem;
    color: #94a3b8;
}

.category-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.category-filter-field--pill {
    gap: 0;
    min-width: 0;
}

.category-filter-field.is-filled input,
.category-filter-field.is-filled select {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12);
}

.category-filter-field.is-filled label {
    color: #166534;
}

.category-filter-field label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0.04em;
}

.category-filter-field input,
.category-filter-field select {
    border: 1px solid #c1c7d0;
    border-radius: 6px;
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
    background: #fff;
    color: #0f172a;
    width: 100%;
    min-height: 28px;
    box-sizing: border-box;
}

.category-filter-field--pill input,
.category-filter-field--pill select {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    min-height: 20px;
    box-shadow: none;
}

@media (max-width: 970px) {
    .catalog-layout {
        display: block;
        position: relative;
        padding: 0;
    }
    body.catalog-page .catalog-feed {
        overflow: visible;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: auto;
    }
    .category-picker-bar {
        display: none;
    }
    .catalog-column {
        width: 100%;
        padding: 0 1rem 1rem;
    }
    .list-column {
        margin-top: 0;
    }
    .catalog-column.detail-column {
        background: transparent;
    }
    .catalog-layout[data-mobile-view="list"] .detail-column {
        display: none;
    }
    .catalog-layout[data-mobile-view="detail"] .detail-column {
        display: block;
    }
    .catalog-layout[data-mobile-view="detail"] .list-column {
        display: none;
    }
    .catalog-layout[data-mobile-view="detail"] .detail-column {
        display: block;
        padding: 0;
        padding-bottom: calc(var(--page-offset-bottom, 0px) + 2rem);
    }
    .catalog-layout[data-mobile-view="detail"] .listing-manage-status .listing-status-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .catalog-layout[data-mobile-view="detail"] .listing-manage-status .status-pill {
        flex: 0 0 auto;
    }
    .detail-mobile-status {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0.75rem 0.75rem 0;
    }
    .detail-mobile-status .listing-manage-banner {
        justify-content: flex-start;
        width: 100%;
    }
    .detail-mobile-status .listing-manage-status {
        margin-right: 0;
    }
    .mobile-feed-handle {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        width: 48px;
        height: 48px;
        border-radius: 999px;
        border: 2px solid rgba(255, 255, 255, 0.75);
        background: rgba(15, 23, 42, 0.92);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        box-shadow: 0 20px 35px rgba(13, 23, 42, 0.35);
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        padding: 0;
        z-index: 80;
        pointer-events: auto;
    }
    .mobile-feed-handle:focus-visible,
    .mobile-feed-handle:hover {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 25px 45px rgba(15, 23, 42, 0.45);
        outline: none;
    }
    .catalog-layout[data-feed-dock="left"][data-mobile-view="detail"] .mobile-feed-handle {
        left: auto;
        right: 0;
        transform: translate(50%, -50%);
    }
    .catalog-layout[data-feed-dock="left"][data-mobile-view="detail"] .mobile-feed-handle:hover,
    .catalog-layout[data-feed-dock="left"][data-mobile-view="detail"] .mobile-feed-handle:focus-visible {
        transform: translate(50%, -50%) scale(1.05);
    }
    .catalog-layout[data-mobile-view="list"] .mobile-feed-handle {
        display: none;
    }
    [data-category-panel].is-collapsed .category-picker-main,
    [data-category-panel].is-collapsed .category-right-stack {
        display: none;
    }
}

.category-filter-field input::placeholder {
    color: #9ca3af;
}

.category-filter-field select {
    padding-right: 1.5rem;
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    color: #0f172a;
}

.category-filter-field--toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
}

.category-filter-field--toggle > .filter-toggle-label {
    order: 2;
}

.category-filter-field--toggle > .filter-toggle {
    order: 1;
}

.filter-panel--mobile {
    gap: 0.65rem;
}

.filter-panel--mobile .filter-section {
    gap: 0.3rem;
}

.filter-panel--mobile .filter-section__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem 0.65rem;
    align-items: start;
}

.filter-panel--mobile .category-filter-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.filter-panel--mobile .category-filter-field {
    flex: 1 1 auto;
}

.filter-panel--mobile .category-filter-field:not(.category-filter-field--toggle) {
    grid-column: 1;
}

.filter-panel--mobile .category-filter-field--toggle {
    grid-column: 1;
    justify-content: flex-start;
    justify-self: end;
}

.filter-panel--mobile .category-filter-field:not(.category-filter-field--toggle) label {
    display: none;
}

.filter-panel--mobile .category-filter-field input,
.filter-panel--mobile .category-filter-field select {
    border-radius: 999px;
    min-height: 34px;
}

.filter-panel--mobile .category-filter-field--toggle {
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    background: rgba(15, 23, 42, 0.04);
}

.mobile-bottom-popover--filters .mobile-filters-panel {
    padding: 0.1rem 0.1rem 0.35rem;
}

.mobile-bottom-popover--filters .filter-panel__actions {
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mobile-bottom-popover--filters .filter-panel__result-note {
    width: 100%;
    margin-bottom: 0.1rem;
}

.mobile-bottom-popover--filters .filter-panel__actions-buttons {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
}

.filter-toggle-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.category-filter-field--toggle .filter-toggle {
    margin-left: 0;
}
}

/* Desktop popup: toggle fields — switch LEFT, label RIGHT, left-aligned */
.ribbon-filter-popover .filter-panel .category-filter-section__grid--two .category-filter-item--toggle,
.ribbon-filter-popover .filter-panel .category-filter-section__grid--two .category-filter-field--toggle,
.category-filter-section__grid--two .category-filter-item--toggle,
.category-filter-section__grid--two .category-filter-field--toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.ribbon-filter-popover .filter-panel .category-filter-section__grid--two .category-filter-item--toggle .filter-toggle-label,
.ribbon-filter-popover .filter-panel .category-filter-section__grid--two .category-filter-field--toggle .filter-toggle-label,
.category-filter-section__grid--two .category-filter-item--toggle .filter-toggle-label,
.category-filter-section__grid--two .category-filter-field--toggle .filter-toggle-label {
    display: inline-block !important;
    width: auto;
    flex: 1 1 auto;
    text-align: left;
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    order: 2;
}

.ribbon-filter-popover .filter-panel .category-filter-section__grid--two .category-filter-item--toggle .filter-toggle,
.ribbon-filter-popover .filter-panel .category-filter-section__grid--two .category-filter-field--toggle .filter-toggle,
.category-filter-section__grid--two .category-filter-item--toggle .filter-toggle,
.category-filter-section__grid--two .category-filter-field--toggle .filter-toggle {
    display: inline-flex !important;
    margin-left: 0;
    flex: 0 0 auto;
    width: auto;
    order: 1;
}

.category-count {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
}

@media (min-width: 761px) {
    .ribbon-filter-popover .filter-panel .category-filter-item--toggle,
    .ribbon-filter-popover .filter-panel .category-filter-field--toggle {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.45rem !important;
    }

    .ribbon-filter-popover .filter-panel .category-filter-item--toggle > .filter-toggle-label,
    .ribbon-filter-popover .filter-panel .category-filter-field--toggle > .filter-toggle-label {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
        order: 2 !important;
    }

    .ribbon-filter-popover .filter-panel .category-filter-item--toggle > .filter-toggle,
    .ribbon-filter-popover .filter-panel .category-filter-field--toggle > .filter-toggle {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        align-self: center !important;
        order: 1 !important;
    }
}

.filter-panel .category-filter-section__title {
    display: none;
}

.filter-panel .category-filter-section {
    gap: 0.15rem;
}

.list-column {
    padding: 0;
    background: transparent;
    border: none;
    position: relative;
    margin-top: 0;
}

.list-status-shell {
    width: min(1200px, 100%);
    margin: 0 auto 0;
    min-height: 28px;
    display: flex;
    align-items: center;
}

.detail-mobile-status {
    display: none;
}

.detail-status-row {
    margin: 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.detail-status-row .listing-status-row {
    flex: 1 1 auto;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.detail-status-row__favorite {
    margin-left: auto;
    flex: 0 0 auto;
}

.list-status-breadcrumb {
    display: none;
    align-items: center;
    gap: 0.35rem;
    color: #4b5563;
    font-size: 0.78rem;
}

.list-status-breadcrumb .breadcrumb-home {
    background: transparent;
    color: #4b5563;
    width: auto;
    height: auto;
    border-radius: 0;
    font-size: 0.9rem;
}

.list-status-breadcrumb .breadcrumb-sep,
.list-status-breadcrumb .breadcrumb-segment {
    color: #4b5563;
    font-weight: 500;
    text-transform: none;
}

.list-status-shell__banner {
    width: 100%;
    align-items: center;
    justify-content: center;
}

.list-status-shell .listing-manage-banner {
    justify-content: center;
}

.list-status-shell .listing-manage-status {
    margin-right: 0;
}

.list-pane {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0;
    min-height: 0;
    flex: 1;
    position: relative;
    box-shadow: none;
}

body.catalog-page .list-pane {
    gap: 0.35rem;
}

body.catalog-page .list-pane .pane-breadcrumb-block {
    width: 100%;
    margin: 8px auto 0;
    padding: 0 0.5rem 8px;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

body.catalog-page .list-pane .pane-breadcrumb-block .list-breadcrumb {
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}

.list-breadcrumb--pagination {
    position: relative;
    overflow: visible;
    z-index: 30;
}

.list-pane-card {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.list-pane-glass {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 9.6px 0.6rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.list-pane-glass .list-pane-card {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.list-pane-glass .list-pane-card--primary {
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    border-radius: 14px;
}

.list-pane-card--primary {
    padding-bottom: 1rem;
    width: min(1200px, 100%);
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
}

.catalog-column.list-column .list-pane-card {
    margin-left: auto;
    margin-right: auto;
}

/* ── Activity Ticker (single-card crossfade) ── */
.activity-ticker {
    padding: 0.6rem 0.8rem;
}

.activity-ticker__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.activity-ticker__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: ticker-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes ticker-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.activity-ticker__stage {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Ticker card */
.ticker-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(15, 23, 42, 0.04);
    transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.35s ease;
    width: 100%;
    box-sizing: border-box;
}

.ticker-card:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ticker-card--fade-out {
    opacity: 0;
}

.ticker-card__img {
    width: 64px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.ticker-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #64748b;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
}

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

.ticker-card__label {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ticker-card__title {
    font-size: 0.76rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticker-card__price {
    font-size: 0.74rem;
    font-weight: 700;
    color: #22c55e;
}

.ticker-card__old-price {
    color: #94a3b8;
    font-weight: 400;
    margin-right: 0.3rem;
    text-decoration: line-through;
}

.ticker-card__time {
    font-size: 0.6rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── List pane card variants ── */
.list-pane-card--activity-ticker {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    width: min(1200px, 100%);
    margin: 0 auto;
    box-sizing: border-box;
}

.list-pane-card--recent {
    padding: 0 0 1rem;
    gap: 0.5rem;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 24px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: min(1200px, 100%);
    margin: 0 auto;
}

.list-pane-card--category-ad {
    padding: 0 0 0.6rem;
    gap: 0.5rem;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 24px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: min(1200px, 100%);
    margin: 0 auto;
}

.list-pane-card--category-ad[hidden] {
    display: none !important;
}

.list-pane-card--category-ad .recent-panel-body {
    padding-bottom: 0.2rem;
}

.catalog-ad-slot--category-card {
    margin: 0;
}

.catalog-info-banner {
    width: 100%;
    padding: 0 clamp(1rem, 2vw, 3rem);
    box-sizing: border-box;
    margin: 1rem 0 1.5rem;
    overflow: hidden;
}

.contest-info-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.contest-info-card--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.contest-info-card--link:hover strong,
.contest-info-card--link:focus-visible strong {
    text-decoration: underline;
}

.contest-info-card__media {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.contest-info-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contest-info-card__body {
    flex: 1 1 240px;
    display: grid;
    gap: 0.35rem;
}

.contest-winner-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
    font-size: 0.75rem;
    width: fit-content;
}

.competition-winners-preview .email-preview-shell {
    max-width: 360px;
}

.competition-winner-list {
    display: grid;
    gap: 0.35rem;
}

.competition-winner-row {
    display: grid;
    gap: 0.1rem;
}

.catalog-info-banner .category-info-card {
    margin: 0;
    max-width: 100%;
    overflow: hidden;
}

.list-pane-card--primary .catalog-feed,
.list-pane-card--recent .catalog-feed {
    padding-left: 1.25rem;
    padding-right: 0.5rem;
    justify-content: center;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.7) transparent;
    scrollbar-gutter: stable;
}


.catalog-feed::-webkit-scrollbar {
    width: 10px;
}

.catalog-feed::-webkit-scrollbar-track {
    background: transparent;
}

.catalog-feed::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.7);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}


.list-pane__filler {
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: var(--list-pane-filler-top, auto);
    bottom: auto;
    border-radius: 12px;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    padding: 0.6rem 0.9rem;
    font-size: 0.72rem;
    text-align: center;
    color: rgba(14, 116, 144, 0.85);
    background: rgba(240, 249, 255, 0.85);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 12px 28px rgba(15, 23, 42, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: translateY(10px);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
    height: var(--list-pane-filler-height, auto);
}

.list-pane__ghost-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    opacity: 0.65;
}

.list-pane__ghost-card {
    border-radius: 12px;
    padding: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(226, 237, 255, 0.85));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
    display: grid;
    gap: 0.3rem;
}

.ghost-card__media {
    height: 70px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(14, 165, 233, 0.2));
}

.ghost-card__line {
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
}

.ghost-card__line--title {
    width: 90%;
}

.ghost-card__line--meta {
    width: 70%;
}

.list-pane__filler-caption {
    text-align: center;
}

.list-pane__filler-caption span {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(14, 116, 144, 0.7);
    margin-top: 0.35rem;
}

.list-pane--has-room .list-pane__filler {
    opacity: 0.9;
    transform: translateY(0);
}

@media (min-width: 1024px) {
    body.catalog-page .catalog-feed {
        min-height: 640px;
        max-height: clamp(760px, calc(100vh - 200px), 1200px);
    }
}

@media (min-width: 971px) {
    .listing-manage-shell--detail .listing-manage-status {
        display: none;
    }
}

.catalog-pane-head {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.2);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    padding: 0.7rem 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pane-head-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pane-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.pane-breadcrumb-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 8px;
}

.catalog-column.list-column > .pane-breadcrumb-block {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    align-self: center;
    margin: 0;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

.catalog-breadcrumb-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    padding: 0.35rem clamp(0.75rem, 4vw, 1.75rem);
    margin: 0.5rem 0 0.75rem;
    color: #0b4a6d;
}

.catalog-breadcrumb-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.catalog-breadcrumb-bar .pane-breadcrumb-block {
    flex: 1 1 auto;
    min-width: 0;
}

.catalog-breadcrumb-bar .list-breadcrumb {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.3rem;
    color: #0f172a;
}

.catalog-breadcrumb-bar .catalog-counts {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f172a;
    margin-left: 0.5rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.catalog-breadcrumb-bar .catalog-counts [data-listing-count] {
    font-size: inherit;
    font-weight: inherit;
}

body:not(.catalog-page) .catalog-breadcrumb-bar,
body.catalog-detail-active .catalog-breadcrumb-bar {
    display: none;
}

@media (max-width: 720px) {
    .catalog-breadcrumb-bar {
        padding: 0.35rem clamp(0.5rem, 4vw, 1.25rem);
    }
    .catalog-breadcrumb-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width: 970px) {
    .category-stats-card {
        display: none;
    }

}

.catalog-counts {
    display: flex;
    gap: 0.5rem;
    font-size: 0.65rem;
    color: var(--muted);
}

.catalog-counts--inline {
    align-items: center;
    font-size: 0.72rem;
    white-space: nowrap;
}

.pane-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #0b4a6d;
    position: relative;
    z-index: 60;
}

.pane-pagination .pager,
.pane-pagination .pager-controls,
.pane-pagination .sort-toolbar {
    display: inline-flex;
    align-items: center;
}

.pane-pagination .pager-nav,
.pane-pagination .pager-current,
.pane-pagination .pager-input,
.pane-pagination select,
.pane-pagination .sort-toggle,
.list-breadcrumb__count {
    height: 21.6px;
    line-height: 21.6px;
}

.pane-pagination .pager-nav {
    padding: 0 0.4rem;
}

.pane-pagination .pager-current {
    padding: 0 0.3rem;
}

.pane-pagination .pager-input,
.pane-pagination select,
.pane-pagination .sort-toggle {
    padding-top: 0;
    padding-bottom: 0;
}

.list-breadcrumb__count {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: center;
}

.list-breadcrumb__count-text {
    white-space: nowrap;
}

.list-breadcrumb__count-value {
    margin: 0 0.35rem;
}

.pager {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.pager-current {
    font-weight: 600;
    font-size: 0.85rem;
}

.pane-pagination-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
}

.catalog-loading-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--user-accent, var(--accent, #0b4a6d));
    color: #fff;
    font-weight: 600;
    font-size: 0.68rem;
    box-shadow: 0 4px 12px rgba(11, 74, 109, 0.2);
    margin-left: 0.35rem;
}

.catalog-loading-badge[hidden] {
    display: none;
}

.pane-pagination-actions .sort-toolbar {
    flex: 0 0 auto;
}

.pager-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pager-controls input,
.pager-controls select {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    width: 60px;
}

.pager-controls select {
    width: auto;
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    line-height: 1.1;
    min-height: 0;
}
.pager-page,
.pager-nav {
    border: 1px solid rgba(11, 74, 109, 0.35);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 0.12rem 0.45rem;
    font-size: 0.74rem;
    min-width: 32px;
    text-align: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.pager-page.is-active {
    border-color: #0b4a6d;
    color: #fff;
    background: #0b4a6d;
}

.pager-nav {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

.pager-nav.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.page-size {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pager-input {
    width: 56px;
    border: 1px solid rgba(11, 74, 109, 0.35);
    border-radius: 8px;
    padding: 0.1rem 0.35rem;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.85);
    -moz-appearance: textfield;
}

.pager-input::-webkit-outer-spin-button,
.pager-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-size-btn {
    border: 1px solid rgba(11, 74, 109, 0.35);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    cursor: pointer;
}

.page-size-btn.is-active {
    border-color: #0b4a6d;
    color: #fff;
    background: #0b4a6d;
}

.page-size select {
    border: 1px solid rgba(11, 74, 109, 0.35);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

.list-column .filter-panel {
    display: none !important;
}

.list-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    margin: 0;
    color: #0b4a6d;
}

.list-breadcrumb--pagination {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.list-breadcrumb__count strong {
    font-weight: 700;
}

.list-breadcrumb__pagination {
    white-space: nowrap;
}

.list-breadcrumb__pagination .pane-pagination,
.list-breadcrumb__pagination .pane-pagination-actions {
    flex-wrap: nowrap;
}

@media (min-width: 901px) {
    .list-breadcrumb__pagination,
    .list-breadcrumb__count {
        padding: 0.2rem 0.6rem;
        background: rgba(255, 255, 255, 0.32);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: none;
        box-shadow: none;
        color: #334155;
    }
}

.sort-toolbar {
    position: relative;
    font-size: 0.78rem;
    color: #0b4a6d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    z-index: 230;
}

.sort-toggle {
    border: 1px solid rgba(190, 208, 218, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: #0b4a6d;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(11, 74, 109, 0.04), 0 6px 18px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    z-index: 240;
}

.sort-toggle__chevron {
    font-size: 0.65rem;
}

.sort-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    left: auto;
    z-index: 240;
    display: grid;
    gap: 0.2rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #bed0da;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    width: max-content;
}

.sort-menu[hidden] {
    display: none;
}

.sort-menu button {
    border: none;
    background: transparent;
    padding: 0.1rem 0.25rem;
    text-align: left;
    font-size: 0.78rem;
    color: #0b4a6d;
    cursor: pointer;
    border-radius: 6px;
}

.share-modal__social {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 0.7rem 0.4rem;
    margin: 0.2rem 0 0.6rem;
}

.share-icon-item {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
}

.share-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(11, 74, 109, 0.18);
    background: #e6edf5;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.share-icon-link:hover,
.share-icon-link:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.share-icon-link img {
    width: 18px;
    height: 18px;
    display: block;
    filter: brightness(0) invert(1);
}

.share-icon-link--whatsapp {
    background: #25d366;
}

.share-icon-link--facebook {
    background: #1877f2;
}

.share-icon-link--messenger {
    background: #00b2ff;
}

.share-icon-link--email {
    background: #0b4a6d;
}

.share-icon-link--copy {
    background: #5f6b7a;
}

.share-icon-label {
    font-size: 0.66rem;
    color: #5f6b7a;
    font-weight: 600;
    text-align: center;
}

.sort-menu button:hover,
.sort-menu button.is-active {
    background: rgba(11, 74, 109, 0.1);
}
}

.breadcrumb-home {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    background: #0b4a6d;
    color: #fff;
    font-size: 0.72rem;
}

.breadcrumb-sep {
    color: #6c7a89;
}

.breadcrumb-segment {
    color: #0b4a6d;
    font-weight: 600;
    white-space: nowrap;
    text-transform: capitalize;
}

.catalog-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--listing-card-width), var(--listing-card-width)));
    gap: var(--listing-card-gap);
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    padding: var(--listing-card-padding) 0;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    align-content: start;
    padding-bottom: var(--listing-card-padding);
    scroll-padding-bottom: var(--listing-card-padding);
    position: relative;
    z-index: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.7) transparent;
    scrollbar-gutter: stable;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
}

/* Přepis pro admin feed na malých mobilech – dvě karty vedle sebe */
@media (max-width: 480px) {
    .catalog-feed.admin-listings-grid {
        --listing-card-width: 140px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
        justify-content: center;
    }
    .catalog-feed.admin-listings-grid .listing-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
    }
}

.catalog-load-more {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
    position: relative;
}

.catalog-load-more .btn-load-more {
    min-width: 12rem;
    transition: opacity 0.2s ease;
}

.catalog-active-indicator {
    position: absolute;
    left: 6px;
    width: 6px;
    height: 0;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
    transform: translateY(-50%);
    transition: top 0.25s ease, opacity 0.2s ease;
    pointer-events: none;
    z-index: 3;
}

.catalog-active-indicator[hidden] {
    opacity: 0;
}

@media (max-width: 970px) {
    .list-status-shell {
        justify-content: flex-start;
        gap: 0.6rem;
        padding: 0 0.75rem;
    }
    .list-status-breadcrumb {
        display: flex;
    }
    .list-status-shell__banner {
        margin-left: auto;
    }
    .catalog-active-indicator {
        display: none;
    }
}

.catalog-load-more .btn-load-more[aria-busy="true"] {
    position: relative;
    padding-right: 2.5rem;
    pointer-events: none;
}

.catalog-load-more .btn-load-more[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    margin-top: -0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: catalog-load-spin 0.75s linear infinite;
}

@keyframes catalog-load-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.catalog-limit-banner {
    grid-column: 1 / -1;
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: linear-gradient(180deg, rgba(255, 248, 230, 0.95), rgba(253, 242, 199, 0.9));
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.catalog-limit-banner strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.catalog-limit-banner span {
    font-size: 0.85rem;
    color: rgba(15, 23, 42, 0.75);
}

.catalog-ad-slot {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    border: 1px dashed rgba(15, 23, 42, 0.2);
    background: #f8fafc;
}

.ad-slot__placeholder {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #0f172a;
    font-size: 0.85rem;
}

.ad-slot__placeholder span {
    color: rgba(15, 23, 42, 0.6);
    font-size: 0.78rem;
}

.ad-slot--panel {
    margin-top: 0.75rem;
}


.listing-card {
    border-radius: 12px;
    background: #ffffff;
    border: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    width: var(--listing-card-width);
    max-width: var(--listing-card-width);
    align-self: start;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    position: relative;
}

.listing-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    border: 0;
    box-shadow: none;
    transition: none;
    pointer-events: none;
    z-index: 6;
}

.catalog-load-more[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: calc(100% - 6px);
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
    pointer-events: none;
}

.catalog-load-more[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(2px);
}

.listing-card__content {
    position: relative;
    z-index: 5;
}

.listing-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 18px;
    background: inherit;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    pointer-events: none;
    z-index: 4;
}

.listing-card:hover {
    border-color: transparent;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.18), 0 0 0 2px #111827;
}

.listing-card:hover::before {
    background: #ffffff;
}

.listing-card.is-active {
    border-color: transparent;
    background: #e6f1ff;
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.18), 0 0 0 2px #111827;
}

.list-pane-card--recent .listing-card:hover,
.recent-feed .listing-card:hover {
    /* Inset ring avoids clipping in first row inside scroll container. */
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.18), inset 0 0 0 2px #111827;
}

.list-pane-card--recent .listing-card.is-active,
.recent-feed .listing-card.is-active {
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.18), inset 0 0 0 2px #111827;
}

.listing-card.is-active::before {
    background: #e6f1ff;
}

.listing-card--sold {
    background: #ced3dd;
}

.listing-card--sold::before {
    background: #ced3dd;
}

.listing-card--sold .listing-card__media > *:not(.listing-card__badge),
.listing-card--sold .listing-card__body {
    filter: grayscale(1) saturate(0);
    opacity: 0.45;
}

.listing-card--inactive {
    background: transparent;
    cursor: not-allowed;
    pointer-events: none;
    border: 1px solid transparent;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.28);
}

.listing-card--inactive::before {
    background: transparent;
}

.listing-card--inactive .listing-card__content {
    position: relative;
    z-index: 1;
    pointer-events: none;
    filter: grayscale(1) saturate(0);
    opacity: 0.6;
}

.listing-card--inactive.listing-card--inactive-clickable {
    cursor: pointer;
    pointer-events: auto;
}

.listing-card--inactive.listing-card--inactive-clickable .listing-card__content {
    pointer-events: auto;
}

.listing-card__inactive {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.55);
    z-index: 2;
    pointer-events: none;
}

.listing-card--inactive::after {
    inset: 0;
    border-radius: 12px;
    border: 2px solid transparent;
    box-shadow: none;
}

.listing-card--placeholder {
    visibility: hidden;
    pointer-events: none;
}

.listing-card__badge {
    position: absolute;
    left: 0;
    right: 0;
      bottom: 0;
      padding: 0.12rem 0.40rem;
      background: linear-gradient(90deg, rgba(220, 38, 38, 0.85), rgba(220, 38, 38, 0.6));
      color: #fff;
      font-size: 0.53rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      box-shadow: 0 8px 16px rgba(220, 38, 38, 0.2);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transform: none;
      pointer-events: none;
      z-index: 5;
      text-align: left;
}

.listing-card__badge-stack {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    gap: 1px;
    z-index: 5;
    pointer-events: none;
    align-items: stretch;
}

.listing-card__badge-stack .listing-card__badge {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-card__badge-stack .listing-card__badge:first-child {
    border-bottom-left-radius: 12px;
}

.listing-card__badge-stack .listing-card__badge:last-child {
    border-bottom-right-radius: 12px;
}

.listing-card__badge-stack .listing-card__badge:only-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.listing-card__badge--discount {
    background: linear-gradient(90deg, rgba(250, 204, 21, 0.85), rgba(245, 158, 11, 0.65));
    color: #78350f;
    border-color: transparent;
    transform: none;
    box-shadow: 0 8px 16px rgba(245, 158, 11, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.listing-card__badge--blocked {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.9), rgba(190, 24, 93, 0.72));
    color: #fff1f2;
    box-shadow: 0 8px 16px rgba(225, 29, 72, 0.22);
    border: 0;
}

.listing-card__badge--deleted {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.92), rgba(185, 28, 28, 0.82));
    color: #fff1f2;
    border: 0;
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.24);
}

  .listing-card__badge--reserved {
      background: linear-gradient(90deg, rgba(124, 58, 237, 0.85), rgba(109, 40, 217, 0.65));
      color: #f5f3ff;
      box-shadow: 0 6px 14px rgba(124, 58, 237, 0.28);
      border: 0;
      outline: none;
  }

.listing-card__badge--boosted {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.75));
    color: #eff6ff;
    border: 0;
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.3);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.listing-card__badge--highlight {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: #fff;
    border: 0;
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.35);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ── Status dots row ── */
.listing-card__dot-row {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 3px 0;
    z-index: 6;
    pointer-events: none;
}
.listing-card__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.listing-card__dot--sold { background: #dc2626; }
.listing-card__dot--reserved { background: #8b5cf6; }
.listing-card__dot--discount { background: #f59e0b; }
.listing-card__dot--deleted { background: #6b7280; }
.listing-card__dot--blocked { background: #1e293b; }

/* ── Status legend row ── */
.status-legend-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 0 2px;
}
.status-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: #64748b;
    white-space: nowrap;
}
.status-legend__item .listing-card__dot {
    position: static;
}

/* Highlighted listing card – pulsating amber glow */
@keyframes highlight-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #f59e0b, 0 0 20px rgba(245, 158, 11, 0.45), 0 0 40px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 0 0 2px #d97706, 0 0 40px rgba(245, 158, 11, 0.70), 0 0 60px rgba(245, 158, 11, 0.30); }
}

.listing-card--highlight {
    background: linear-gradient(170deg, #fde68a 0%, #fef9e7 35%, #fff 70%);
    animation: highlight-pulse 2s ease-in-out infinite;
    z-index: 2;
}

.listing-card--highlight::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #eab308, #f59e0b);
    border-radius: 12px 12px 0 0;
    z-index: 10;
    inset: auto;
    border: 0;
    box-shadow: none;
}

.listing-card--highlight::before {
    display: none;
}

.listing-card--highlight:hover {
    background: linear-gradient(170deg, #fde68a 0%, #fef9e7 35%, #fff 70%);
    box-shadow: 0 0 0 2px #d97706, 0 0 44px rgba(245, 158, 11, 0.75), 0 0 64px rgba(245, 158, 11, 0.35);
    animation: highlight-pulse 2s ease-in-out infinite;
}

.listing-card--highlight:hover::before {
    display: none;
}

.listing-card--highlight.is-active {
    background: linear-gradient(170deg, #fde68a 0%, #fef3c7 40%, #fffbeb 100%);
    box-shadow: 0 0 0 2.5px #d97706, 0 0 30px rgba(245, 158, 11, 0.50), 0 6px 16px rgba(0,0,0,0.12);
}

.listing-card--highlight.is-active::before {
    display: none;
}

/* Top listing card – blue accent */
.listing-card--top {
    box-shadow: 0 0 0 2px #3b82f6, 0 4px 16px rgba(59, 130, 246, 0.25);
}

.listing-card--top::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
    border-radius: 12px 12px 0 0;
    z-index: 10;
    inset: auto;
    border: 0;
    box-shadow: none;
}

.listing-card--top:hover {
    box-shadow: 0 0 0 2px #2563eb, 0 6px 20px rgba(59, 130, 246, 0.40);
}

.listing-card--top::before,
.listing-card--top:hover::before {
    display: none;
}

.status-pill.status-boosted {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    color: #fff;
    font-weight: 600;
}

/* ---------- Payments pages ---------- */

.payments-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 0;
    color: var(--text, #e2e8f0);
}

.payments-page .banner {
    color: var(--text, #e2e8f0);
}

.payment-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.payment-product-card {
    background: var(--card-bg, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.15s;
    color: var(--text, #e2e8f0);
}

.payment-product-card:hover {
    border-color: var(--accent, #3b82f6);
}

.payment-product-card--featured {
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 1px var(--accent, #3b82f6), 0 8px 24px rgba(59, 130, 246, 0.15);
}

.payment-product-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.payment-product-card__header h3 {
    margin: 0;
    font-size: 1rem;
    color: #fff !important;
}

.payment-product-card__badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--accent, #3b82f6);
    color: #fff;
}

.payment-product-card__price {
    color: #e2e8f0 !important;
}

.payment-product-card__price strong {
    font-size: 1.25rem;
    color: #fff !important;
}

.payment-product-card__price .muted,
.payment-product-card__price .small {
    color: #94a3b8 !important;
}

.payment-product-card__desc {
    flex: 1;
    color: #cbd5e1 !important;
}

.payment-product-card .muted {
    color: #94a3b8 !important;
}

.payment-product-card p {
    color: #cbd5e1 !important;
}

.payment-product-card .btn {
    width: 100%;
    text-align: center;
}

/* Payments success */

.payments-success {
    text-align: center;
    padding: 2rem 0;
}

.payments-success__icon {
    font-size: 3rem;
    color: #22c55e;
    margin-bottom: 0.5rem;
}

.payments-success__details {
    margin: 1.5rem auto;
    max-width: 320px;
    text-align: left;
}

.payments-success__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Payments table */

.payments-page:has(.payments-table-wrap) {
    max-width: 960px;
}

.payments-table-wrap {
    overflow-x: auto;
    margin-top: 1rem;
}

.payments-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    white-space: nowrap;
}

.payments-table th,
.payments-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border, #334155);
}

.payments-table th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #94a3b8);
}

/* Payments active services */

.payments-active-section {
    margin-bottom: 1.5rem;
}

.payments-active-section h2 {
    margin-bottom: 0.75rem;
}

.payments-active-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.04));
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.payments-active-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.payments-active-card__info strong {
    color: var(--text, #e2e8f0);
}

.payments-active-card__remaining {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    white-space: nowrap;
}

.payments-remaining-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #22c55e;
    line-height: 1;
}

.payments-remaining-label {
    font-size: 0.75rem;
    color: var(--muted, #94a3b8);
}

.payments-active-card__warning {
    font-size: 0.7rem;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Payment links */

.payments-active-card a,
.payments-table a {
    color: var(--accent, #60a5fa);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}

.payments-active-card a:hover,
.payments-table a:hover {
    border-bottom-color: var(--accent, #60a5fa);
}

/* Payment status pills */

.status-pill.status-paid {
    background: #dcfce7 !important;
    color: #14532d !important;
    border: 1px solid rgba(21, 83, 45, 0.3);
}

.status-pill.status-created {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid rgba(146, 64, 14, 0.3);
}

.status-pill.status-cancelled {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid rgba(71, 85, 105, 0.25);
}

.status-pill.status-refunded {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid rgba(153, 27, 27, 0.3);
}

/* Utility: text alignment */
.text-right { text-align: right; }

/* ── Payment history — Micro styl ── */

.ph-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.ph-toggle {
    display: flex;
    gap: 2px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    padding: 2px;
}

.ph-toggle__btn {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 5px;
    color: #64748b;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.ph-toggle__btn:hover {
    background: #e0e7ff;
    color: #1e40af;
}

.ph-toggle__btn.is-active {
    background: #334155;
    color: #fff;
}

.ph-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ph-nav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    color: #334155;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.ph-nav__arrow:hover {
    background: #e0e7ff;
    color: #1e40af;
}

.ph-nav__arrow--disabled {
    opacity: 0.25;
    pointer-events: none;
}

.ph-nav__label {
    font-weight: 600;
    font-size: 0.78rem;
    color: #334155;
    min-width: 100px;
    text-align: center;
}

/* Document micro-pills */

.ph-docs {
    display: inline-flex;
    gap: 3px;
}

.ph-doc {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity 0.15s;
}

.ph-doc:hover { opacity: 0.75; }

.ph-doc--pdf {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.ph-doc--xml {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

/* Service status dot */

.ph-status {
    font-size: 0.7rem;
    font-weight: 600;
}

.ph-status::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.ph-status--active { color: #16a34a; }
.ph-status--active::before { background: #16a34a; }
.ph-status--expired { color: #94a3b8; }
.ph-status--expired::before { background: #94a3b8; }

.ph-service { font-size: 0.8rem; }

/* Sum row */

.ph-sum-row td {
    border-top: 1.5px solid rgba(15, 23, 42, 0.12) !important;
    font-weight: 600;
    font-size: 0.72rem;
    color: #334155;
    padding-top: 0.5rem;
}

/* Actions — text links, not buttons */

.ph-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.65rem;
}

.ph-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.ph-action-link:hover {
    background: #e0e7ff;
    color: #1e40af;
}

.ph-action-link svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Email in table — plain text, clickable */

.ph-email {
    color: #334155;
    font-size: 0.75rem;
}

.ph-email:hover {
    color: #1e40af;
}

/* Admin payments — reuse ph-* classes, add send-summary */

.admin-send-summary-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.admin-send-summary-form__row {
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

/* Active subscription info box (ad-free page) */

.sub-active-box {
    display: flex;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.06));
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.sub-active-box__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 50%;
}

.sub-active-box__content {
    flex: 1;
    min-width: 0;
}

.sub-active-box__content h3 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: #22c55e !important;
}

.sub-active-box__details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.75rem;
}

.sub-active-box__row {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
}

.sub-active-box__label {
    font-size: 0.8rem;
    color: var(--muted, #6b7280);
}

.sub-active-box__value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text, #e2e8f0);
}

.sub-active-box__value--remaining {
    color: #22c55e;
}

.sub-active-box__bar-wrap {
    margin-top: 0.25rem;
}

.sub-active-box__bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.sub-active-box__bar-fill {
    height: 100%;
    width: var(--sub-pct, 100%);
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 999px;
    transition: width 1s ease;
    animation: sub-bar-pulse 2s ease-in-out infinite;
}

@keyframes sub-bar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.sub-active-box__bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.2rem;
}

@media (max-width: 480px) {
    .sub-active-box {
        flex-direction: column;
        padding: 1rem;
    }
    .sub-active-box__details {
        flex-direction: column;
        gap: 0.3rem;
    }
}

/* Boost action link in dashboard menu */

.action-menu-link--boost {
    color: var(--accent, #3b82f6) !important;
    font-weight: 600;
}

.hero-chip--boost {
    color: var(--accent, #3b82f6) !important;
    border-color: var(--accent, #3b82f6) !important;
}

/* Výchozí (nevybraný) náhled – tmavší rámeček pro lepší oddělení */
.catalog-feed .listing-card:not(.is-active):not(.listing-card--inactive) {
    border: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.listing-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 3;
    min-height: 100px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: #c7ccd6;
}

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

.listing-card__placeholder {
    background: linear-gradient(135deg, #bfd1ff, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
}

.listing-card__price {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    background: rgba(24, 125, 66, 0.55);
    color: #eafff2;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 0;
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.listing-card__price--discount {
    background: rgba(24, 125, 66, 0.55);
    color: #eafff2;
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.25);
}

.listing-card__fav {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    border: none;
    background: transparent;
    border-radius: 0;
    width: auto;
    height: auto;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    z-index: 4;
}
.listing-card__fav svg {
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.9)) drop-shadow(0 0 8px rgba(255,255,255,0.7)) drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.listing-card__fav .fav-inner {
    stroke: #94a3b8;
    fill: none;
    transition: stroke 0.15s ease;
}
.listing-card__fav:hover {
    transform: scale(1.1);
}
.listing-card__fav:hover .fav-inner {
    stroke: #dc2626;
}
.listing-card__fav.is-active .fav-inner {
    stroke: #dc2626;
}
.listing-card__fav.is-pulse {
    animation: favPulse 0.35s ease;
}

.listing-card__vat {
    position: absolute;
    top: 0;
    left: 0;
    background: #facc15;
    color: #78350f;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 10px 0 10px 0;
    box-shadow: 0 6px 12px rgba(250, 204, 21, 0.25);
    z-index: 3;
}

@keyframes favPulse {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

.listing-card__body {
    padding: 0 0.45rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-height: 120px;
    flex: 1;
}

.recent-panel-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
    padding-bottom: 0.4rem;
    border-bottom: none;
    position: relative;
}

.catalog-feed .listing-card {
    box-shadow: none;
    border: 0;
}

.catalog-feed .listing-card:hover {
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.18), 0 0 0 2px #111827;
    outline: 2px solid #111827;
    outline-offset: 0;
}

.catalog-feed .listing-card.is-active {
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.18), 0 0 0 2px #111827;
}

.recent-panel-head::after {
    content: "";
    width: 70%;
    height: 2px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 999px;
    margin-top: 0.2rem;
}

.recent-panel-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.6rem;
}

.recent-empty {
    text-align: center;
    padding: 0.4rem 0.2rem;
}

.recent-feed {
    padding: 0.3rem 0 0.6rem;
    min-height: 0;
    --listing-card-width: 180px;
    grid-template-columns: repeat(auto-fill, minmax(var(--listing-card-width), var(--listing-card-width)));
    gap: var(--listing-card-gap);
    justify-content: center;
    grid-auto-flow: row;
    scroll-padding-top: 0.3rem;
}

.recent-feed .listing-card:hover,
.recent-feed .listing-card.is-active {
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.18), 0 0 0 2px #111827;
    outline: 2px solid #111827;
    outline-offset: 0;
}

.catalog-feed .listing-card__body h3 {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.catalog-feed .listing-card__rating {
    margin: 0;
    font-size: 0.72rem;
    color: #f97316;
}

.catalog-feed .listing-card__rating span {
    color: var(--muted);
}

.catalog-feed .listing-card__meta,
.catalog-feed .listing-card__info {
    margin: 0;
    font-size: 0.72rem;
    color: var(--muted);
}

.catalog-feed .listing-card__meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.catalog-feed .listing-card__meta--vendor {
    display: flex;
    align-items: center;
    gap: 0.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.catalog-feed .listing-card__meta--vendor .trust-badge {
    flex-shrink: 0;
}

.catalog-feed .listing-card__info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.35rem;
}

.detail-column {
    background: transparent;
    border: none;
    padding: 0;
    min-height: 78vh;
}



.detail {
    display: grid;
    gap: 0.85rem;
    position: relative;
    isolation: isolate;
    align-content: start;
    align-items: start;
}

.detail.detail--sold .detail-card:not(.owner-quick-actions) {
    position: relative;
    overflow: hidden;
    background: #f8fafc;
    border-color: #e5e7eb;
}
.detail.detail--sold .detail-card:not(.owner-quick-actions)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(248, 248, 250, 0.9);
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: color;
    backdrop-filter: grayscale(1) saturate(0.2);
    -webkit-backdrop-filter: grayscale(1) saturate(0.2);
}
.detail.detail--sold .detail-card:not(.owner-quick-actions) > :not(.detail-badge) {
    position: relative;
    z-index: 2;
    filter: grayscale(1) saturate(0);
    opacity: 0.45;
}

.detail.detail--sold .owner-quick-actions {
    opacity: 1;
    filter: none;
}

.detail.detail--sold .detail-card.detail-hero::after {
    content: "PRODÁNO";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-6deg);
    font-size: clamp(1.2rem, 4vw, 3rem);
    letter-spacing: 0.35rem;
    font-weight: 700;
    color: rgba(220, 38, 38, 0.25);
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    z-index: 3;
}

.owner-quick-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.owner-quick-actions__intro {
    flex: 1;
    min-width: 200px;
}

.owner-quick-actions__intro .muted {
    margin: 0;
}

.owner-quick-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.owner-quick-actions .quick-action-form {
    margin: 0;
    display: inline-flex;
}

.owner-quick-actions .hero-chip {
    min-width: 150px;
    justify-content: flex-start;
}

.ribbon-quick-actions__content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-end;
    text-align: right;
}

.ribbon-quick-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.ribbon-quick-actions__meta {
    font-size: 0.75rem;
    color: var(--muted);
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.ribbon-quick-actions__meta strong {
    color: var(--text);
}

.hero-chip[disabled],
.hero-chip.is-disabled {
    opacity: 0.5;
    border-style: dashed;
    cursor: not-allowed;
}

.hero-chip-wrap {
    position: relative;
    display: inline-flex;
}

.hero-chip-wrap[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%) translateY(4px);
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.72rem;
    padding: 0.35rem 0.55rem;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;
}

.hero-chip-wrap[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.quick-modal__dialog {
    max-width: 420px;
}

.detail-admin-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: stretch;
}

.detail-admin-bar .system-message-card {
    min-height: 100%;
}

.detail-admin-bar .admin-action-card {
    margin-top: 0;
}

.detail-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

.detail-card.detail-gallery-card {
      padding: 10px;
  }
  
.detail-gallery-card .detail-gallery {
      margin-top: 0;
      background: transparent;
      box-shadow: none;
      padding: 0;
  }
  
.detail-gallery-card .gallery-main {
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
    width: 100%;
}
  
.detail-gallery-card .gallery-main img {
      box-shadow: none;
      border-radius: 10px;
      max-height: none;
  }

.invite-preview-card {
    background: #0f172a;
    color: #f8fafc;
    border-color: rgba(15, 23, 42, 0.6);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.invite-preview-card h2 {
    margin: 0 0 0.35rem;
    color: #fff;
    font-size: 1.35rem;
}

.invite-preview-card .eyebrow,
.invite-preview-card p {
    color: rgba(248, 250, 252, 0.85);
}

.invite-preview-card blockquote {
    margin: 0.5rem 0 0;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid rgba(16, 185, 129, 0.8);
    background: rgba(15, 23, 42, 0.45);
    font-style: italic;
    border-radius: 10px;
}

.invite-preview-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.detail-card.detail-map-card {
    padding-bottom: 0.85rem;
}

.detail-map-card .detail-map {
    margin-bottom: 0.25rem;
}

.detail-card .eyebrow {
    margin-bottom: 0.25rem;
}

.catalog-detail {
    flex: 1;
    border-radius: 0;
    padding: 0;
    background: transparent;
    min-height: 420px;
    display: grid;
    gap: 0.75rem;
}

.catalog-detail--glass {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.6rem;
    flex: 1;
}

.detail-locked {
    border: 1px dashed #d6d3d1;
    background: #fffaf0;
    display: grid;
    gap: 0.65rem;
    text-align: left;
}

.contact-card ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    gap: 0.35rem;
}

.detail-body {
    display: grid;
    gap: 1rem;
}

.detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.detail-card.detail-hero {
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      position: relative;
      background: var(--surface-elevated);
  }

.detail-badge {
    position: absolute;
    top: 0.9rem;
    right: -0.75rem;
    padding: 0.25rem 1.2rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    border-radius: 999px;
    transform: rotate(12deg);
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 6;
}

.detail-badge--sold {
    background: linear-gradient(135deg, #f97316, #dc2626);
}

.detail-hero-media {
    position: relative;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}

.listing-edit {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 620px;
    width: 100%;
    margin: 0 auto 3rem;
    padding: 0 1rem 3rem;
}

.listing-edit .page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.listing-edit .edit-head-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}


.listing-edit__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.listing-edit .detail-card {
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.listing-edit,
.listing-edit .detail-card {
    box-sizing: border-box;
}

.edit-hero-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.edit-hero-card__main,
.edit-hero-card__side {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

@media (max-width: 640px) {
    .listing-edit {
        padding: 0 0.5rem 2rem;
        max-width: 100%;
    }
.listing-edit .detail-card {
    padding: 1.25rem;
}

.listing-edit .detail-card:focus-within {
    border-color: rgba(15, 23, 42, 0.6);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.2);
}
}
.listing-edit .detail-card:focus-within {
    border-color: rgba(15, 23, 42, 0.6);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.2);
}

.edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.edit-field .edit-field__notes {
    font-size: 0.8rem;
    color: #64748b;
}

.edit-field input,
.edit-field textarea,
.edit-field select {
    max-width: 520px;
    width: 100%;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.edit-field input:focus,
.edit-field textarea:focus,
.edit-field select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    outline: none;
}

.edit-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.edit-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-panel {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #f8fafc;
}

.price-panel__row {
    display: flex;
    gap: 0.5rem;
}

.price-panel__row input,
.price-panel__row select {
    flex: 1;
}

.price-panel__row input,
.price-panel__row select {
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
}

.price-panel__row input:focus,
.price-panel__row select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    outline: none;
}

.price-panel__quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.35rem;
}

.edit-gallery-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.edit-gallery {
    gap: 0.75rem;
}

.edit-gallery .gallery-main {
    min-height: 320px;
}

.edit-gallery-thumbs {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.edit-thumb {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 120px;
}

.edit-thumb__media {
    position: relative;
    width: 120px;
    height: 90px;
}

.edit-thumb .thumb {
    border: 2px solid rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    overflow: hidden;
    width: 120px;
    height: 90px;
    padding: 0;
    background: transparent;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

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

.edit-thumb .thumb.is-active {
    border-color: rgba(59, 130, 246, 0.8);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.thumb-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 38, 38, 0.95);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(220, 38, 38, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.select-dot {
    display: flex;
    justify-content: center;
    margin-top: 0.15rem;
}

.select-dot input {
    display: none;
}

.select-dot span {
    width: 8px;
    height: 8px;
    border: 2px solid #c7d2fe;
    border-radius: 50%;
    display: block;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    margin: 0 auto;
}

.select-dot input:checked + span {
    border-color: #3b82f6;
    background: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.edit-thumb__divider {
    width: 100%;
    height: 1px;
    background: rgba(148, 163, 184, 0.4);
    margin: 0.5rem 0 0.35rem;
}

.edit-thumb__hint {
    text-align: center;
    font-size: 0.78rem;
    color: #475569;
    margin: 0;
}

.rich-text-editor {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.editor-toolbar {
    display: flex;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #f1f5f9;
}

.editor-toolbar button {
    border: none;
    background: transparent;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.85rem;
}

.editor-toolbar button:hover,
.editor-toolbar button:focus-visible {
    background: #e2e8f0;
}

.editor-surface {
    min-height: 200px;
    padding: 0.75rem;
    line-height: 1.6;
}

.params-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.param-actions {
    text-align: right;
}

.detail-toggle-list {
    margin-top: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem;
}

.toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-row input[type="text"] {
    flex: 1;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 0.4rem 0.5rem;
}

.edit-map-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    align-items: flex-start;
}

.map-placeholder {
    border: 2px dashed #d1d5db;
    border-radius: 16px;
    padding: 1rem;
    background: rgba(226, 232, 240, 0.3);
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.edit-suggestions-card .ghost-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.hero-quick-card {
    margin: 0.25rem 0 -0.5rem;
    padding: 0;
}

.detail-hero-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 0.35rem 0 1.25rem;
    min-width: 0;
}

.detail-hero-panels--wide {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
}

.detail-hero-panels--system .detail-system-card {
    grid-column: 2;
}

.detail-hero-panels--system {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    min-width: 0;
}

.detail-hero-panels--system .ad-slot--panel,
.detail-hero-panels--system .detail-system-card {
    grid-column: 1 / -1;
}

.detail-system-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

.system-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.system-card-section {
    padding: 0 1rem;
    min-width: 0;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.system-card-section:first-child {
    padding-left: 0;
}

.system-card-section:last-child {
    padding-right: 0;
}

.system-card-section + .system-card-section {
    border-left: 1px solid var(--border);
}

.system-card-section--chart {
    display: flex;
    align-items: stretch;
}

.system-card-title {
    font-weight: 700;
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
}

.system-card-list {
    display: grid;
    gap: 0.2rem;
    font-size: 0.82rem;
}

.system-card-list > div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.system-card-list > div > .muted {
    font-size: 0.76rem;
}

.system-card-list > div > strong {
    font-size: 0.82rem;
}

.system-extend {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.35rem;
}

.system-extend__wrap {
    display: inline-flex;
    width: fit-content;
    position: relative;
    pointer-events: auto;
}

.system-extend__wrap[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
    pointer-events: none;
}

.system-extend__wrap[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.system-progress {
    height: 6px;
    border-radius: 999px;
    background: #f2b2b2;
    overflow: hidden;
    margin-top: 0.75rem;
}

.system-progress__remaining {
    display: block;
    height: 100%;
    background: #2f9e44;
}

.detail-system-card .table-card {
    margin-top: 0.5rem;
    max-width: 100%;
    overflow-x: auto;
}

.detail-system-card table {
    width: 100%;
    table-layout: fixed;
}

.detail-system-card th,
.detail-system-card td {
    word-break: break-word;
}

/* ── Dispatcher card (admin catalog sidebar) ── */
.dsp {
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
}

.dsp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #334155;
    color: #e2e8f0;
    border-radius: 9px 9px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.dsp-head__left {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: uppercase;
}

.dsp-head__left svg {
    opacity: 0.7;
}

.dsp-head__right {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    font-weight: 400;
    color: #94a3b8;
}

.dsp-head__time {
    display: inline-block;
    min-width: 48px;
    text-align: right;
}

.dsp-head__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10b981;
    animation: dsp-pulse 2s ease-in-out infinite;
}

@keyframes dsp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.dsp-body {
    padding: 0.6rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Donut gauges row */
.dsp-gauges {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.dsp-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.dsp-donut {
    width: 72px;
    height: 72px;
}

.dsp-donut__arc {
    transition: stroke-dasharray 0.6s ease;
}

.dsp-donut__pct {
    font-size: 16px;
    font-weight: 700;
    fill: var(--text, #0f172a);
}

.dsp-donut__label {
    font-size: 8px;
    fill: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dsp-gauge__sub {
    font-size: 0.6rem;
    color: var(--muted, #64748b);
}

/* KPI pills */
.dsp-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
}

.dsp-kpi {
    text-align: center;
    padding: 0.3rem 0.15rem;
    border-radius: 6px;
    background: var(--bg-soft, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    line-height: 1.15;
}

.dsp-kpi__val {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text, #0f172a);
}

.dsp-kpi__lbl {
    font-size: 0.58rem;
    color: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dsp-kpi--warn {
    border-color: #fbbf24;
    background: #fffbeb;
}

.dsp-kpi--warn .dsp-kpi__val {
    color: #b45309;
}

/* Views chart panel */
.dsp-chart-panel {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem;
    border-radius: 6px;
    background: var(--bg-soft, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
}

.dsp-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.3rem;
}

.dsp-buckets {
    display: flex;
    gap: 1px;
}

.dsp-bucket {
    font-size: 0.55rem;
    padding: 1px 5px;
    border: 1px solid var(--border, #e2e8f0);
    background: #fff;
    color: var(--muted, #64748b);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.3;
}

.dsp-bucket:first-child { border-radius: 3px 0 0 3px; }
.dsp-bucket:last-child { border-radius: 0 3px 3px 0; }

.dsp-bucket.is-active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.dsp-chart-wrap {
    position: relative;
    min-height: 70px;
}

.dsp-chart-wrap canvas {
    display: block;
    width: 100%;
}

.dsp-chart-tooltip {
    position: absolute;
    top: -4px;
    left: 0;
    background: rgba(15,23,42,0.9);
    color: #e2e8f0;
    font-size: 0.62rem;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
    z-index: 2;
}

.dsp-chart-tooltip strong {
    color: #fff;
}

/* Sparkline bar charts */
.dsp-sparks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.dsp-spark-cell {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    overflow: visible;
    padding: 0.3rem;
    border-radius: 6px;
    background: var(--bg-soft, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    position: relative;
}

.dsp-spark-cell canvas {
    display: block;
    width: 100%;
}

.dsp-spark-lbl {
    font-size: 0.6rem;
    color: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Footer */
.dsp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

.dsp-footer__note {
    font-size: 0.58rem;
    color: var(--muted, #94a3b8);
    font-style: italic;
}

.dsp-footer__toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.58rem;
    color: var(--muted, #64748b);
    cursor: pointer;
    white-space: nowrap;
}

.dsp-footer__toggle input {
    width: 13px;
    height: 13px;
    margin: 0;
    cursor: pointer;
}

/* Data rows */
.dsp-data {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

.dsp-data__row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--text-secondary, #475569);
    line-height: 1.3;
    flex-wrap: wrap;
}

.dsp-data__row svg {
    flex-shrink: 0;
    color: var(--muted, #94a3b8);
}

.dsp-data__row strong {
    font-weight: 700;
    color: var(--text, #0f172a);
}

.dsp-sep {
    color: var(--border, #cbd5e1);
}

.dsp-warn {
    color: #b45309 !important;
}

/* Tiers section */
.dsp-tiers {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

.dsp-tiers__title {
    font-size: 0.6rem;
    color: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Tier bar */
.dsp-tier-bar {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--border, #e2e8f0);
}

.dsp-tier-seg {
    height: 100%;
    min-width: 2px;
}

.dsp-tier-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.6rem;
    color: var(--muted, #64748b);
}

.dsp-tier-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
}

.dsp-tier-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

.detail-listing-views {
    width: 100%;
    display: grid;
    gap: 0.4rem;
}

.detail-listing-views__head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.detail-listing-views__head .system-card-title {
    font-size: 0.82rem;
    margin: 0;
}

.detail-listing-views__ranges {
    display: inline-flex;
    gap: 0.2rem;
    align-items: center;
    margin-left: auto;
}

.detail-listing-views__canvas-wrap {
    position: relative;
}
.detail-listing-views__canvas-wrap canvas {
    width: 100%;
    display: block;
}
.detail-listing-views__canvas-wrap .dispatch-chart-tooltip {
    position: absolute;
    top: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    background: #1e293b;
    color: #f1f5f9;
    border: none;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.72rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    white-space: nowrap;
    z-index: 5;
}

.system-history-divider {
    margin-top: 0.35rem;
    border-top: 1px solid var(--border);
    width: 100%;
}

.system-history {
    display: grid;
    gap: 0.2rem;
    padding-top: 0.1rem;
}

.system-history > .eyebrow {
    font-size: 0.65rem;
    margin-bottom: 0;
}

.system-history-feed {
    display: grid;
    gap: 0;
}

.system-history-list {
    display: grid;
    gap: 0;
}

.system-history-entry {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.system-history-entry:last-child {
    border-bottom: none;
}

.system-history-entry__date {
    font-size: 0.68rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 6.5rem;
}

.system-history-entry__title {
    font-size: 0.74rem;
    font-weight: 500;
    color: #334155;
}

.system-history-expand {
    display: block;
    width: 100%;
    margin-top: 0.15rem;
    padding: 0.25rem 0;
    background: none;
    border: none;
    border-top: 1px dashed #e2e8f0;
    cursor: pointer;
    font-size: 0.68rem;
    color: #64748b;
    text-align: center;
    transition: color 0.12s;
}

.system-history-expand:hover {
    color: #2563eb;
}

@media (max-width: 970px) {
    .detail-hero-panels--system .detail-system-card {
        grid-column: auto;
    }

    .detail-hero-panels--system {
        grid-template-columns: 1fr;
    }

    .system-card-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .system-card-section {
        padding: 0;
    }

    .system-card-section + .system-card-section {
        border-left: none;
        border-top: 1px solid var(--border);
        padding-top: 0.75rem;
    }

    .detail-listing-views__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-listing-views__ranges {
        margin-left: 0;
    }

    .system-history-entry {
        flex-wrap: wrap;
    }
}

.detail-info-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0.75rem 0;
}

.detail-info-card__description,
.detail-info-card__params {
    flex: 1;
    min-width: 0;
}

.detail-info-card__params {
    display: flex;
    flex-direction: column;
}

.detail-hero-panels .detail-card {
    margin: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    min-width: 0;
    max-width: 100%;
}

.detail-interest-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.detail-interest-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.interest-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.interest-item:first-child {
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 0.55rem;
}

.interest-item:hover,
.interest-item:focus-visible {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    outline: none;
}

.interest-item__order {
    min-width: 1.35rem;
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 700;
    padding-top: 0.12rem;
}

.interest-item__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.interest-item__meta > strong {
    font-size: 0.88rem;
    line-height: 1.2;
    font-weight: 700;
}

.interest-item__subline {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.interest-item__subline .muted.tiny {
    font-size: 0.7rem;
    line-height: 1.2;
}

.interest-item__actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    padding-top: 0.03rem;
}

.interest-item__actions .btn {
    font-size: 0.72rem;
    line-height: 1.1;
    padding: 0.35rem 0.62rem;
    white-space: nowrap;
}

.interest-item__status {
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
}

.interest-item.is-selected .interest-item__status {
    background: #dcfce7;
    color: #166534;
}

.hero-map-card {
    height: auto;
    display: block;
}

.detail-params-table-wrapper {
    overflow-x: auto;
}

.detail-params-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.detail-params-table th,
.detail-params-table td {
    padding: 0.4rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.detail-params-table th {
    font-weight: 600;
    width: 50%;
    color: #475569;
}

.detail-params-table tr:last-child th,
.detail-params-table tr:last-child td {
    border-bottom: 0;
}

.hero-info-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-interest-card {
    background: #e7f7ec;
    border: 1px solid #b8e3c6;
    border-radius: 14px;
    padding: 0.32rem 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
    text-align: center;
}
.contact-interest-card--blocked {
    background: #d3d7de;
    border-color: #dc2626;
}
.contact-interest-card--blocked .muted.small {
    color: #7f1d1d;
}

.contact-interest-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: center;
}
.contact-interest-card__actions:empty {
    display: none;
}

.contact-interest-card .muted.small {
    margin: 0;
}

.btn-interest {
    background: #22c55e;
    border-color: #22c55e;
    color: #ffffff;
}

.btn-interest:hover,
.btn-interest:focus-visible {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.hero-vendor-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.hero-vendor-head__name-row > .vendor-avatar-ring {
    margin-top: 0;
}

.hero-vendor-head__text {
    flex: 1;
    min-width: 0;
}

.hero-vendor-head__text strong {
    font-size: 1.15rem;
}

.hero-vendor-head__text .muted {
    font-size: 0.8rem;
}

.hero-contact .eyebrow {
    margin-bottom: 0.35rem;
}

.hero-contact-table {
    width: auto;
    margin: 0 auto 0.55rem;
    border-collapse: collapse;
}

.hero-contact-table td {
    padding: 0.06rem 0;
    vertical-align: baseline;
}

.hero-contact-table .detail-info-label {
    min-width: 0;
    text-align: right;
    white-space: nowrap;
    padding-right: 0.3rem;
    font-size: 0.76rem;
    line-height: 1.2;
}

.hero-contact-table .detail-info-divider {
    color: #94a3b8;
    text-align: center;
    width: 14px;
}

.hero-contact-table .detail-info-value {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    padding-left: 0.3rem;
    font-size: 0.76rem;
    line-height: 1.2;
}

.hero-contact-table a {
    color: inherit;
    text-decoration: none;
}

.hero-contact-table a:hover,
.hero-contact-table a:focus-visible {
    text-decoration: underline;
}

.hero-chip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 10px;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    box-shadow: 0 10px 26px rgba(11, 18, 32, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hero-chip:hover,
.hero-chip:focus-visible {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 32px rgba(11, 18, 32, 0.45);
    outline: none;
}

.hero-chip__icon {
    margin-right: 0.35rem;
    font-size: 0.95rem;
    line-height: 1;
    color: #475569;
}

.hero-chip__icon--alert {
    color: #f59e0b;
}

.hero-chip__icon--svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.hero-chip__icon--svg svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    stroke: currentColor;
    fill: none;
    opacity: 0.9;
}

.hero-chip--favorite {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.55);
    background: #0b1220;
    color: #fff;
}

.hero-chip--favorite.is-active {
    border-color: rgba(255, 255, 255, 0.9);
}

.hero-quick-card .hero-chip--favorite {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    border: none !important;
    color: #dc2626 !important;
    box-shadow: none !important;
    justify-content: center;
}

.hero-quick-card .hero-chip--favorite .hero-chip__icon {
    margin-right: 0;
}
.hero-quick-card .hero-chip--favorite .fav-inner {
    stroke: #94a3b8;
    fill: none;
    transition: stroke 0.15s ease;
}
.hero-quick-card .hero-chip--favorite:hover .fav-inner {
    stroke: #dc2626;
}

.hero-quick-card .hero-chip--favorite.is-active {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.hero-quick-card .hero-chip--favorite.is-active .fav-inner {
    stroke: #dc2626;
    fill: none;
}

.hero-quick-card .hero-chip {
    background: rgba(229, 231, 235, 0.95) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2) !important;
    cursor: pointer;
}

.hero-quick-card .hero-chip .hero-chip__icon {
    color: #475569;
}

.hero-quick-card .hero-chip:hover,
.hero-quick-card .hero-chip:focus-visible {
    border-color: #2563eb !important;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22) !important;
    outline: none;
}

.hero-quick-card .hero-chip .hero-chip__icon--alert {
    color: #f59e0b;
}

.hero-quick-card .hero-chip svg {
    stroke: currentColor;
    fill: none;
    opacity: 0.9;
}

.detail-card.detail-hero .hero-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin: 0;
  }
  
  
.detail-card.detail-hero .hero-head h1 {
      margin: 0;
      font-size: 1.05rem;
      line-height: 1.2;
  }
  
.detail-card.detail-hero .hero-summary {
      color: rgba(15, 23, 42, 0.82);
      margin-top: 0.2rem;
      font-size: 0.8rem;
  }
  
.detail-card.detail-hero .hero-head__text {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      flex: 1;
      min-width: 0;
  }
  
.detail-card.detail-hero .hero-head__actions {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem 0.4rem;
      min-width: 0;
      width: auto;
      justify-content: flex-end;
      flex-wrap: wrap;
}
.detail-card.detail-hero .hero-head__actions > * {
      flex-shrink: 0;
}

.detail-card.detail-hero .hero-chip--favorite {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    justify-content: center;
    cursor: pointer;
}

.detail-card.detail-hero .hero-chip--favorite .hero-chip__icon {
      margin-right: 0;
      color: #64748b;
      font-size: 1.28rem;
      line-height: 1;
      -webkit-text-stroke: 0.9px #64748b;
      text-stroke: 0.9px #64748b;
  }

.detail-card.detail-hero .hero-chip--favorite.is-active {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.detail-card.detail-hero .hero-chip--favorite.is-active .hero-chip__icon {
      color: #dc2626;
      -webkit-text-stroke: 0.8px #dc2626;
      text-stroke: 0.8px #dc2626;
  }
  
.detail-card.detail-hero .hero-head__actions .price-pill {
      width: auto;
  }

.hero-status-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

  @media (max-width: 720px) {
      .detail-hero-media {
          border-radius: 18px;
      }
  
      .detail-card.detail-hero .hero-head {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.75rem;
      }
  
      .detail-card.detail-hero .hero-head__actions {
          width: 100%;
          align-items: flex-start;
          justify-content: space-between;
          gap: 0.45rem 0.35rem;
      }
  }

/* Zarovnání favoritu (srdce) na spodek a doprava i na mobilu */
.detail-card.detail-hero .hero-head__actions {
    align-self: stretch;
}
.detail-card.detail-hero .hero-chip--favorite {
    margin-left: auto;
    align-self: flex-end;
}
.detail-card.detail-hero .hero-head__actions .price-pill {
    align-self: flex-end;
}


.detail-heading {
    flex: 1;
    min-width: 240px;
    display: grid;
    gap: 0.05rem;
}

.detail-heading h1 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.detail-user-badge {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.15rem;
}

.detail-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    color: var(--muted);
    font-size: 0.68rem;
}

.detail-card.detail-hero .hero-head .detail-meta-line {
      display: inline-flex;
      margin-bottom: 0.15rem;
      gap: 0.25rem;
      font-size: 0.6rem;
      letter-spacing: 0;
      text-transform: none;
      color: rgba(15, 23, 42, 0.4);
      white-space: nowrap;
  }
  
.detail-card.detail-hero .hero-head .detail-meta-line .small {
      font-size: inherit;
      line-height: 1.2;
  }

.price-column {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
    flex: 0 0 clamp(200px, 22vw, 240px);
    width: clamp(200px, 22vw, 240px);
}

.tier-card {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.15rem 0.35rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
    background: #fff;
}

.tier-card.tier-bronze {
    background: #fdf6ec;
    border-color: #f5d0a4;
}

.tier-card.tier-silver {
    background: #f5f7ff;
    border-color: #dce3ff;
}

.tier-card.tier-gold {
    background: #fff9e6;
    border-color: #facc15;
}

.tier-card.tier-new,
.tier-card.tier-host {
    background: #f5f5f5;
    border-color: #e5e7eb;
}

.tier-card.tier-member {
    background: #f8f9fa;
    border-color: #d1d5db;
}

.tier-card.tier-platinum {
    background: #f0f0ff;
    border-color: #a5b4fc;
}

.tier-card.tier-moderator {
    background: #f0f9ff;
    border-color: #7dd3fc;
}

.tier-card.tier-admin {
    background: #fef2f2;
    border-color: #fca5a5;
}

.tier-card__badge-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.1rem;
}
.tier-card__badge-row strong {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.tier-badge svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18)) drop-shadow(0 0 1px rgba(0,0,0,0.08));
}
.tier-badge__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tier-badge--host .tier-badge__label { color: #9ca3af; }
.tier-badge--member .tier-badge__label { color: #6b7280; }
.tier-badge--bronze .tier-badge__label { color: #cd7f32; }
.tier-badge--silver .tier-badge__label { color: #64748b; }
.tier-badge--gold .tier-badge__label { color: #ca8a04; }
.tier-badge--platinum .tier-badge__label { color: #6366f1; }
.tier-badge--moderator .tier-badge__label { color: #0ea5e9; }
.tier-badge--admin .tier-badge__label { color: #dc2626; }
.hero-vendor-head__name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.visitor-actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.4rem;
}

.visitor-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(17, 23, 43, 0.15);
    border-radius: 14px;
    background: rgba(17, 23, 43, 0.05);
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 8px 20px rgba(15, 23, 42, 0.08);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.visitor-action:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 20px rgba(37, 99, 235, 0.22);
}

.visitor-action .action-icon {
    width: 20px;
    text-align: center;
    font-size: 0.9rem;
}

.visitor-action--favorite {
    border-style: dashed;
    color: #be123c;
    background: rgba(254, 226, 226, 0.65);
}

.visitor-action--favorite.is-active {
    background: #fdf2f8;
    border-color: rgba(244, 63, 94, 0.7);
    color: #9f1239;
}

.visitor-action--favorite .action-icon {
    color: currentColor;
}

.tier-card__name {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    margin-bottom: 0.15rem;
}

.tier-stars {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.tier-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
}

.star-strip,
.tier-stars {
    display: inline-flex;
    gap: 0.15rem;
}

.star {
    color: #e5e7eb;
}

.star.is-filled {
    color: #facc15;
}
.admin-action-card {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 0.4rem;
    margin-top: 0.35rem;
    display: grid;
    gap: 0.3rem;
}

.admin-action-card--compact {
    padding: 0.2rem 0.5rem;
    margin-top: 0;
}

.admin-action-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.3rem;
}

.admin-action-buttons--tight {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    max-width: 160px;
    margin: 0 auto;
}

.admin-action-buttons .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    justify-content: center;
}

.admin-action-buttons--tight .btn {
    padding: 0.08rem 0.3rem;
    font-size: 0.64rem;
    line-height: 1.15;
    border-radius: 10px;
    width: 100%;
    min-width: 0;
    display: block;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}

.admin-action-buttons--tight .btn:not(.danger) {
    border-color: #4b5563;
    color: #111827;
}

.btn.danger {
    border-color: #dc2626;
    color: #dc2626;
}

.detail-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.detail-info-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.detail-card.detail-hero .detail-info-list {
    border: none;
    padding: 0;
    margin: 0;
}

.detail-info-label {
    min-width: 90px;
}

.detail-info-value {
    color: var(--text);
    font-weight: 500;
    text-align: right;
}

.price-pill {
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 0.25rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
    flex-direction: column;
    gap: 0.15rem;
}

.price-pill strong {
    font-size: 1.05rem;
    color: #065f46;
}

.price-pill__net {
    font-size: 0.72rem;
    color: #0f172a;
    opacity: 0.75;
}

.price-pill--discount {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    align-items: stretch;
    gap: 0.4rem;
}

.price-pill--discount strong {
    color: #854d0e;
    font-size: 1.15rem;
}

.price-pill__original-tag {
    font-size: 0.85rem;
    text-decoration: line-through;
    color: #6b7280;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.35rem 0.75rem;
    display: inline-flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    font-weight: 600;
}

.price-pill__discount-tag {
    background: #fef9c3;
    border: 1px solid #facc15;
    border-radius: 14px;
    padding: 0.45rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(250, 204, 21, 0.35);
    width: 100%;
    box-sizing: border-box;
}

.price-pill__badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #78350f;
    background: #fcd34d;
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
}

.detail-gallery {
    display: grid;
    gap: 0.1rem;
    margin-top: 0;
}

.detail-vat-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #facc15;
    color: #78350f;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.22rem 0.45rem;
    border-radius: 20px 0 12px 0;
    box-shadow: 0 6px 12px rgba(250, 204, 21, 0.35);
    z-index: 3;
}

.hero-gallery {
    margin-top: 0;
}

.hero-summary {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.25;
}

.hero-gallery .gallery-main {
    min-height: 320px;
}

.hero-gallery .gallery-thumbs {
    gap: 0.2rem;
}

.gallery-main {
    position: relative;
    background: transparent;
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    touch-action: pan-y;
}

.gallery-main--drag {
    touch-action: pan-y;
    overscroll-behavior: auto;
}

.gallery-main.is-animating {
    pointer-events: none;
}

.gallery-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
    border-radius: 18px;
    display: block;
    border: none;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.35);
    background: transparent;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gallery-main--drag.is-dragging .gallery-slide {
    transition: none;
}

.gallery-main--drag.is-swapping .gallery-slide {
    transition: none;
}

@media (max-width: 720px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .rich-input__editor,
    .rich-input__editor .ql-editor,
    .rich-input--quill textarea {
        font-size: 16px !important;
    }
    .detail-gallery-card .gallery-track {
        width: 100%;
        height: 100%;
        margin: 0;
    }
}

.gallery-main img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    border: none;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.35);
    background: transparent;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.gallery-prev {
    left: 6px;
}

.gallery-next {
    right: 6px;
}

.gallery-thumbs-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
}

.gallery-thumbs {
    display: flex;
    gap: 0.25rem;
}

.gallery-thumbs .thumb {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0.2rem;
    background: #ffffff;
    cursor: pointer;
    width: 70px;
    height: 60px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-thumbs .thumb.is-active {
    border-color: transparent;
    box-shadow: none;
    background: #ffffff;
}

.gallery-thumbs .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.gallery-thumb-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: var(--thumb-indicator-w, 0px);
    transform: translateX(var(--thumb-indicator-x, 0px));
    pointer-events: none;
    transition: transform 0.25s ease, width 0.25s ease;
    z-index: 2;
}

.gallery-thumb-indicator::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 3px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.95);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.gallery-thumb-indicator::after {
    bottom: 0;
}

.gallery-thumbs-wrapper.is-dragging .gallery-thumb-indicator {
    transition: none;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
    gap: 1.25rem;
    align-items: flex-start;
}

.detail-main {
    display: grid;
    gap: 1rem;
}

.detail-sidebar {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: stretch;
    min-height: 100%;
}

.detail-sidebar .detail-card:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.detail-sidebar .detail-card:last-child .detail-map {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.detail-sidebar .detail-card:last-child .detail-map__canvas {
    flex: 1;
    min-height: 0;
}

.detail-text {
    display: grid;
    gap: 0.3rem;
}

.detail-text p {
    margin: 0;
}

.detail-text {
    --quill-indent: 1.5em;
}

.detail-text.ql-editor {
    display: block;
    padding: 0;
}

.detail-text p,
.detail-text ul,
.detail-text ol,
.detail-text li {
    margin: 0;
}


.detail-text hr {
    margin: 0.35rem 0;
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.7);
}

.detail-summary {
    font-weight: 600;
    font-size: 1rem;
}

.seller-card {
    border-color: #bbf7d0;
    background: #f0fdf4;
    gap: 1rem;
}

.seller-card__info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.seller-card__info li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.seller-card__contact {
    display: grid;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.seller-card__contact span {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.seller-card__contact small {
    color: var(--muted);
}

.seller-card__contact a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.seller-card__contact a:hover {
    text-decoration: underline;
}

.detail-map {
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #f8fafc;
    padding: 0.5rem;
    display: grid;
    gap: 0.4rem;
}

.detail-map__canvas {
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    background: #e2e8f0;
}

.detail-map--empty {
    border: 1px dashed #d4dae6;
    background: #f3f4f6;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.detail-map--empty p {
    margin: 0;
    color: var(--muted);
}

.detail-card .btn {
    width: auto;
    align-self: flex-start;
    background: #0b1220;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 18px rgba(11, 18, 32, 0.25);
}

.detail-card .btn svg,
.detail-card .btn i,
.detail-card .btn .btn-icon {
    color: currentColor;
    fill: currentColor;
    stroke: currentColor;
}

.detail-map__meta {
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.detail-map__coords {
    text-align: right;
    font-size: 0.75rem;
    color: var(--muted);
}

.detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.35rem;
}

.detail-meta-grid div {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.2rem 0.5rem;
    display: grid;
    gap: 0.2rem;
    background: #fff;
}

.detail-meta-grid--preview div {
    border: none;
    background: transparent;
    padding: 0;
}

.detail-meta-grid--preview {
    display: block;
}

.detail-meta-grid strong {
    font-size: 0.9rem;
}

.contact-card a {
    color: var(--primary);
    text-decoration: none;
}

.contact-card a:hover {
    text-decoration: underline;
}

@media (max-width: 960px) {
    .season-hero {
        height: 140px;
    }
    .detail-layout {
        grid-template-columns: 1fr;
    }
    .price-column {
        width: 100%;
        flex: 1 1 100%;
        max-width: none;
        align-items: flex-start;
    }
    .price-pill {
        width: 100%;
        text-align: left;
        align-items: flex-start;
    }
    .detail-head {
        flex-direction: column;
    }
    .gallery-main img {
        height: 280px;
    }
    .detail-gallery-card .gallery-main img,
    .detail-gallery-card .gallery-slide {
        height: 100%;
        max-height: none;
        border-radius: 10px;
    }
    .detail-card.detail-gallery-card {
        padding: 4px 4px 8px;
    }
    .detail-gallery-card .gallery-main {
        border-radius: 12px;
        overflow: hidden;
        aspect-ratio: 4 / 3;
        min-height: 0;
        padding: 0;
    }
    .gallery-thumbs-wrapper {
        padding-bottom: 0.85rem;
    }
    .gallery-thumb-indicator::after {
        bottom: 8px;
    }
    .hero-gallery .gallery-main {
        min-height: 0;
    }
    .detail-gallery-card .gallery-track {
        border-radius: 12px;
        overflow: hidden;
    }
    .category-picker-controls {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
            "left"
            "middle"
            "manage"
            "quick";
    }
    .category-picker-left {
        min-height: 0;
    }
    .category-picker-main {
        flex-wrap: wrap;
    }
    .category-picker-main .catalog-search-pill {
        margin-left: 0;
    }
    .category-stats-card,
    .category-panel-card {
        min-height: 0;
    }
.category-right-stack {
    flex: 1 1 auto;
}
    .category-picker-shell,
    .category-picker-toggle,
    .category-picker-controls .ribbon-filter-shell,
    .category-picker-controls .ribbon-filter-toggle,
    .listing-manage-shell,
    .listing-manage-shell .action-menu-toggle {
        width: auto;
    }
}

.favorites-page .favorites-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin: 2rem 0 1.5rem;
}

.favorites-page .favorites-hero .muted {
    max-width: 540px;
}

.favorites-counter {
    background: var(--surface-elevated);
    border-radius: 1.25rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    text-align: center;
}

.favorites-counter__value {
    display: block;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--primary);
}

.favorites-counter__label {
    font-size: 0.85rem;
    color: var(--muted);
}

.favorites-controls {
    margin-bottom: 1.5rem;
}

.favorites-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(17, 23, 43, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.favorites-filter-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.favorites-filter-form .form-field--compact {
    max-width: 130px;
}

.favorites-filter-form label {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.favorites-filter-form select {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    background: #fff;
}

.favorites-filter-form .form-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.favorites-filter-form .form-actions .btn {
    min-height: 32px;
    padding: 0.25rem 0.9rem;
    font-size: 0.85rem;
}

.favorites-grid {
    margin: 1.5rem 0;
}

.favorites-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.favorites-grid .empty-state {
    padding: 3rem 2rem;
    border: 1px dashed rgba(17, 23, 43, 0.2);
    border-radius: 18px;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
}

.favorites-page .listing-card {
    height: 100%;
}

.favorites-pagination {
    margin-top: 1rem;
}

.favorites-page .pane-pagination {
    border: 1px solid rgba(17, 23, 43, 0.08);
    border-radius: 18px;
    padding: 0.85rem 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.favorites-page .pane-pagination .pager-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .pane-pagination {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
    }
    .pane-pagination .pager {
        order: 0;
    }
    .pane-pagination-actions {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 0.25rem;
        flex-direction: row;
        align-items: center;
    }
    .pane-pagination-actions .catalog-loading-badge {
        flex: 1 0 100%;
        order: 3;
        margin-top: 0.2rem;
        display: block;
        width: 100%;
        text-align: left;
        margin-left: 0;
    }
    .pane-pagination .pager-controls {
        order: 1;
    }
    .pane-pagination .sort-toolbar {
        order: 2;
    }
    .list-breadcrumb--pagination {
        margin-bottom: 5px;
    }
    .list-breadcrumb__pagination {
        width: 100%;
        order: 1;
        white-space: normal;
    }
    .list-breadcrumb__pagination .pane-pagination,
    .list-breadcrumb__pagination .pane-pagination-actions {
        flex-wrap: wrap;
    }
    .list-breadcrumb__count {
        width: 100%;
        order: 2;
        justify-content: center;
    }
    .pane-pagination-actions .pager-controls {
        order: 1;
    }
    .pane-pagination-actions .sort-toolbar {
        flex: 1 0 100%;
        order: 2;
        justify-content: center;
    }
    .list-pane-card--primary .catalog-feed {
        --listing-card-width: 160px;
        grid-template-columns: repeat(auto-fill, minmax(var(--listing-card-width), var(--listing-card-width)));
        gap: 0.5rem;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        justify-content: center;
    }
    .list-pane-card--primary .catalog-feed .listing-card {
        width: var(--listing-card-width);
        max-width: var(--listing-card-width);
    }
}

@media (max-width: 640px) {
    .season-hero {
        height: 120px;
    }
    .nav-grid nav a {
        margin-left: 0.75rem;
    }
    .nav-search-cta {
        flex-direction: column;
        align-items: stretch;
    }
    .nav-add-listing {
        width: 100%;
        justify-content: center;
    }
    .nav-favorites-link {
        justify-content: center;
        margin: 0.5rem 0 0;
        align-self: flex-start;
    }
    .hero {
        padding-top: 2rem;
    }
    .catalog-layout {
        grid-template-columns: 1fr;
    }
    .catalog-feed {
        --listing-card-width: 160px;
        grid-template-columns: repeat(auto-fill, minmax(var(--listing-card-width), var(--listing-card-width)));
        justify-content: center;
        gap: 0.65rem;
    }
    .listing-card {
        width: var(--listing-card-width);
        max-width: var(--listing-card-width);
        margin-left: auto;
        margin-right: auto;
    }
    .recent-feed {
        --listing-card-width: 180px;
        grid-template-columns: repeat(auto-fill, minmax(var(--listing-card-width), var(--listing-card-width)));
        gap: var(--listing-card-gap);
    }
.recent-feed .listing-card {
    width: var(--listing-card-width);
    max-width: var(--listing-card-width);
    margin-left: 0;
    margin-right: 0;
}
    .category-picker-bar {
        position: static;
        top: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 clamp(1rem, 2vw, 3rem);
        margin: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .category-picker-controls {
        flex-direction: row;
        align-items: center;
        width: 100%;
        gap: 0.75rem;
        justify-content: flex-end;
    }
    .category-picker-left {
        display: none;
    }
    .category-picker-shell,
    .category-picker-toggle {
        width: 100%;
    }
    .category-picker-controls .ribbon-filter-shell,
    .category-picker-controls .ribbon-filter-toggle {
        width: 100%;
    }
    .listing-manage-shell,
    .listing-manage-shell .action-menu-toggle {
        width: auto;
    }
    .category-right-stack {
        width: 100%;
    }
    .listing-manage-banner {
        flex-wrap: nowrap;
        width: 100%;
    }
    .listing-manage-banner .listing-status-row {
        flex: 1 1 auto;
        justify-content: flex-start;
        margin-right: 1rem;
    }
    .listing-manage-shell .action-menu-toggle {
        margin-left: auto;
        flex-shrink: 0;
    }
    .favorites-page .favorites-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .favorites-filter-form {
        grid-template-columns: 1fr;
    }
    .favorites-filter-form .form-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 970px) {
    body {
        --page-offset-top: 150px;
        --page-offset-bottom: 160px;
    }
    .nav-desktop-grid {
        display: none;
    }
    .nav-mobile-bar {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .mobile-brand-row {
        border-radius: 0 !important;
        width: 100%;
    }
    .mobile-bottom-shell {
        display: flex;
        padding-left: 0;
        padding-right: 0;
    }
    .mobile-bottom-card {
        border-radius: 0;
    }
    .mobile-bottom-controls {
        width: 100%;
        margin: 0;
        padding-left: 12px;
        padding-right: 12px;
    }
    .nav-mobile-panel {
        display: none;
        position: relative;
        background: rgba(255, 255, 255, 0.98);
        padding: 0.5rem 0.75rem 0.75rem;
        margin-top: 0;
        border-radius: 18px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
    }
    .nav-mobile-panel.is-open {
        display: block;
        margin-top: 0.5rem;
        max-height: calc(100vh - 110px);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        overflow-y: auto;
    }
    .nav-mobile-panel__inner {
        max-width: 100%;
        padding: 0;
    }
    .nav-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 1.2rem;
    }
    .nav-section--left,
    .nav-section--center,
    .nav-section--right {
        align-items: stretch;
        text-align: left;
        flex: 1;
    }
    .nav-center-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .nav-meta-panel {
        width: 100%;
        align-items: stretch;
    }
    .nav-meta-identity {
        justify-content: space-between;
        flex-wrap: nowrap;
        border: none;
        border-radius: 0;
        padding: 0.25rem 0;
        background: transparent;
        gap: 0.35rem;
        align-items: center;
    }
    .nav-meta-block {
        min-width: 0;
        text-align: left;
    }
    .nav-meta-block,
    .nav-meta-block--user,
    .nav-meta-block--role {
        text-align: left;
        min-width: 0;
        flex: 1;
        white-space: nowrap;
    }
    .nav-meta-block .nav-meta-value,
    .nav-meta-block--user .nav-meta-value,
    .nav-meta-block--role .nav-meta-value {
        text-align: left;
    }
    .nav-meta-separator {
        height: 32px;
    }
    .nav-meta-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.5rem;
    }
    .list-pane-card--recent {
        box-sizing: border-box;
    }
    .recent-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 0.6rem;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .recent-feed .listing-card {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .category-right-stack {
        width: 100%;
    }
    .listing-manage-banner {
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }
    .listing-manage-banner .listing-status-row {
        flex: 1 1 auto;
        margin-right: 1rem;
        justify-content: flex-start;
    }
    .listing-manage-shell .action-menu-toggle {
        margin-left: auto;
        flex-shrink: 0;
    }
}

@media (max-width: 970px) {
    .category-picker-actions {
        display: none;
    }
}

.listing-card__manage {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
}
.settings-collapse summary h2 {
    font-size: 1rem;
}

.settings-collapse.form-card {
    padding: 0.75rem 1rem;
}
.nav-messages-link {
    position: relative;
    padding-right: 0;
}

.listing-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.rich-text-editor:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.detail-params-table input[type="text"] {
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    width: 100%;
}

.detail-params-table input[type="text"]:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    outline: none;
}
.select-chip input {
    margin-right: 0.35rem;
}
.site-settings-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.site-tier-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.6rem;
}

.site-tier-card .input {
    border: 1px solid rgba(15, 23, 42, 0.2);
    border-radius: 10px;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    background: #fff;
}

.site-settings-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.site-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
}

.site-settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem 0 0;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.site-settings-row--wallpapers {
    align-items: stretch;
}

.site-settings-row--wallpapers .wallpaper-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.site-pill-group {
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.site-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 999px;
    background: #f8fafc;
    font-size: 0.72rem;
    line-height: 1.1;
    white-space: nowrap;
}

.site-settings-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}
body[data-is-authenticated="true"] .mobile-quick-button--auth {
    border: 2px solid rgba(34, 197, 94, 0.85);
    box-shadow: 0 20px 45px rgba(34, 197, 94, 0.35), 0 0 12px rgba(34, 197, 94, 0.35);
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(187, 247, 208, 0.9));
    color: #065f46;
}
.listing-manage-shell--detail .action-menu-toggle {
    margin-left: auto;
    align-self: flex-end;
}

.listing-manage-shell--detail {
    margin-bottom: 0;
    min-height: 28px;
}

.listing-manage-shell--detail.is-empty {
    visibility: hidden;
    pointer-events: none;
}

.listing-status-row .status-pill {
    flex: 0 0 auto;
}
.automation-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.automation-sender {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.automation-sender-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

/* compact config row: two cards side by side */
.automation-config-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 6px;
}
@media (max-width: 720px) {
    .automation-config-row {
        grid-template-columns: 1fr;
    }
}
.automation-config-card {
    background: var(--color-surface-raised, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(148,163,184,0.12));
    border-radius: 10px;
    overflow: hidden;
}
.automation-config-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.automation-config-card__head::-webkit-details-marker {
    display: none;
}
.automation-config-card__head strong {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}
.automation-config-card__head .muted {
    margin-left: auto;
}
.automation-config-card[open] > .automation-config-card__head {
    border-bottom: 1px solid var(--color-border, rgba(148,163,184,0.12));
}
.automation-config-card__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    padding: 10px 14px 12px;
}
.automation-config-card__body .stack.tiny {
    gap: 1px;
}
.automation-config-card__body .stack.tiny > span {
    font-size: 0.68rem;
    opacity: 0.65;
}
.automation-config-card__toggles {
    grid-column: 1 / -1;
    display: flex;
    gap: 16px;
    padding-top: 2px;
}
.input--compact {
    padding: 4px 8px;
    font-size: 0.78rem;
    min-height: unset;
    height: 28px;
}

.automation-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.automation-toolbar--compact {
    padding: 6px 0 2px;
    border-top: 1px solid var(--color-border, rgba(148,163,184,0.08));
}

.automation-toolbar__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.automation-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.automation-item {
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    overflow: hidden;
}
.ads-item.is-active {
    border-color: rgba(34, 197, 94, 0.65);
}

.automation-item summary {
    cursor: pointer;
    padding: 16px 18px;
    list-style: none;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.automation-item summary::-webkit-details-marker {
    display: none;
}

.automation-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ads-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 50%;
}

.ads-summary-counts {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(15, 23, 42, 0.7);
    font-size: 0.7rem;
    line-height: 1.2;
}
.ads-summary-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 50%;
}
.ads-summary-title {
    font-size: 0.95rem;
}
.ads-summary-desc {
    display: block;
}

.admin-ads-page {
    position: relative;
    padding-top: 1.1rem;
}

/* (admin-back-inline removed — now using admin-back-strip) */

.ads-category-box {
    margin-top: 10px;
}

.ads-category-box__toolbar {
    margin-bottom: 0.55rem;
}

.ads-category-list {
    display: grid;
    gap: 0.7rem;
}

.ads-category-row {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.6);
    display: grid;
    gap: 0.5rem;
}

.ads-category-row .stack.tiny {
    gap: 0.16rem;
}

.ads-category-row .stack.tiny > span:first-child {
    font-size: 0.68rem;
    color: #64748b;
    line-height: 1.15;
}

.ads-category-row > .automation-row {
    grid-template-columns: minmax(220px, 1.25fr) minmax(220px, 1fr) 140px 128px;
    gap: 0.55rem 0.75rem;
    align-items: end;
}

.ads-category-row .input,
.ads-category-row textarea.input--area,
.ads-category-row .btn.small {
    min-height: 34px;
    border-radius: 10px;
    font-size: 0.78rem;
}

.ads-category-row .input[type="text"] {
    padding: 0.35rem 0.6rem;
}

.ads-category-row textarea.input--area {
    min-height: 92px;
    padding: 0.45rem 0.6rem;
    line-height: 1.3;
}

.ads-category-row [data-category-ad-remove] {
    width: 100%;
    min-height: 34px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
}

.ads-category-row .stack.tiny.toggle {
    justify-content: end;
}

.ads-category-row .stack.tiny.toggle .ads-toggle {
    min-height: 34px;
}

.ads-category-picker {
    position: relative;
}

.ads-category-picker__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    text-align: left;
    min-height: 34px;
    padding: 0.32rem 0.55rem;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1.15;
}

.ads-category-picker__trigger > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ads-category-picker__popup {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    width: min(520px, 92vw);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.45rem;
}

.ads-category-picker__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-bottom: 0.35rem;
}

.ads-category-picker__quick-btn {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #fff;
    border-radius: 999px;
    padding: 0.16rem 0.45rem;
    font-size: 0.68rem;
    cursor: pointer;
}

.ads-category-picker__quick-btn:hover {
    border-color: rgba(59, 130, 246, 0.45);
}

.ads-category-picker__tree-scroll {
    max-height: 280px;
    overflow: auto;
    padding-right: 0.15rem;
    display: grid;
    gap: 0.12rem;
}

.ads-category-picker__node,
.ads-category-picker__group {
    margin: 0;
}

.ads-category-picker__option {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 7px;
    padding: 0.2rem 0.4rem 0.2rem calc(0.4rem + var(--depth, 0) * 0.58rem);
    text-align: left;
    font-size: 0.72rem;
    color: #0f172a;
    cursor: pointer;
    line-height: 1.15;
}

.ads-category-picker__option:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.14);
}

.ads-category-picker__group > summary {
    list-style: none;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.35rem;
    border-radius: 7px;
    padding: 0.18rem 0.3rem 0.18rem calc(0.3rem + var(--depth, 0) * 0.58rem);
    cursor: pointer;
}

.ads-category-picker__group > summary::-webkit-details-marker {
    display: none;
}

.ads-category-picker__group > summary::before {
    content: "▸";
    color: #64748b;
    font-size: 0.62rem;
    margin: 0;
    grid-column: 1;
    justify-self: center;
}

.ads-category-picker__group[open] > summary::before {
    content: "▾";
}

.ads-category-picker__group-label {
    font-size: 0.72rem;
    color: #0f172a;
    min-width: 0;
    line-height: 1.15;
    grid-column: 2;
}

.ads-category-picker__pick-this {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #fff;
    border-radius: 999px;
    padding: 0.08rem 0.36rem;
    font-size: 0.62rem;
    color: #334155;
    cursor: pointer;
    flex: 0 0 auto;
    line-height: 1.15;
    grid-column: 3;
}

.ads-category-picker__children {
    display: grid;
    gap: 0.08rem;
    margin: 0.05rem 0 0.12rem;
}

.ads-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #0f172a;
    position: relative;
}
.ads-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ads-toggle__pill {
    width: 38px;
    height: 20px;
    border-radius: 999px;
    background: #e5e7eb;
    position: relative;
    transition: background 0.2s ease;
}
.ads-toggle__pill::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
    transition: transform 0.2s ease;
}
.ads-toggle input:checked + .ads-toggle__pill {
    background: #16a34a;
}
.ads-toggle input:checked + .ads-toggle__pill::after {
    transform: translateX(18px);
}
.ads-toggle__label {
    color: inherit;
    line-height: 1.1;
}

@media (max-width: 980px) {
    .ads-category-row > .automation-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem;
    }
    .ads-category-row .stack.tiny.toggle {
        justify-content: start;
    }
}

@media (max-width: 640px) {
    .ads-category-row > .automation-row {
        grid-template-columns: 1fr;
    }
    .ads-category-picker__popup {
        width: min(92vw, 520px);
    }
}

.automation-content {
    padding: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.automation-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 18px;
}

.automation-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.automation-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.automation-fields .input--area {
    resize: vertical;
}

.automation-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.automation-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.automation-variables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 1rem;
}

.automation-variables-group {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 0.85rem;
}

.automation-variables-group h3 {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
}

.automation-variables-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}

.automation-variables-row code {
    background: rgba(15, 23, 42, 0.08);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.78rem;
}

.email-preview-shell {
    overflow-x: auto;
    padding: 10px;
    background: linear-gradient(135deg, #f7f5f2, #f0f4f8);
    border-radius: 16px;
    border: 1px dashed rgba(15, 23, 42, 0.12);
}

.email-preview {
    min-width: 620px;
    --email-bg: #f6f8fb;
    --email-border: #dbe2ee;
    --email-card-bg: #ffffff;
    --email-card-border: #e2e8f0;
    --email-text: #1f2937;
    --email-muted: #64748b;
    --email-accent: #1f6feb;
    --email-header-bg: rgba(255, 255, 255, 0.7);
    --email-header-text: #1f2937;
    --email-tag-bg: rgba(31, 111, 235, 0.12);
    --email-tag-text: #1f6feb;
}

.email-preview[data-template="soft-card"] {
    --email-bg: #f6f8fb;
    --email-border: #dbe2ee;
    --email-accent: #1f6feb;
}

.email-preview[data-template="skyline"] {
    --email-bg: #f0fbf8;
    --email-border: #c9eae2;
    --email-card-border: #e2f4ef;
    --email-accent: #0f766e;
    --email-header-bg: #0f766e;
    --email-header-text: #f8fafc;
    --email-tag-bg: rgba(255, 255, 255, 0.2);
    --email-tag-text: #ffffff;
}

.email-preview[data-template="sunrise"] {
    --email-bg: linear-gradient(135deg, #fff7f0, #fff4da);
    --email-border: #f1d6c8;
    --email-accent: #c25a2b;
    --email-header-bg: linear-gradient(120deg, #ffe6d5, #fff4d1);
    --email-header-text: #5c2d1d;
    --email-tag-bg: rgba(194, 90, 43, 0.12);
    --email-tag-text: #c25a2b;
}

.email-preview__frame {
    width: 600px;
    margin: 0 auto;
    background: var(--email-bg);
    border-radius: 18px;
    padding: 16px;
    border: 1px solid var(--email-border);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.email-preview__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--email-header-bg);
    color: var(--email-header-text);
}

.email-logo {
    font-weight: 700;
    letter-spacing: 0.4px;
    display: block;
}

.email-contact {
    display: block;
    font-size: 12px;
    opacity: 0.85;
}

.email-tag {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--email-tag-bg);
    color: var(--email-tag-text);
    font-weight: 600;
}

.email-preview__card {
    background: var(--email-card-bg);
    border-radius: 14px;
    padding: 18px;
    border: 1px solid var(--email-card-border);
}

.email-preheader {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--email-muted);
    margin: 0 0 8px;
}

.email-preview__card h3 {
    margin: 0 0 12px;
}

.email-preview__card p {
    margin: 0 0 12px;
    color: var(--email-text);
}

.email-details {
    font-size: 14px;
    color: var(--email-muted);
}

.email-cta {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--email-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    margin: 6px 0 12px;
}

.email-closing {
    font-weight: 600;
}

.email-preview__footer {
    margin-top: 14px;
    font-size: 12px;
    color: var(--email-muted);
}

.email-note {
    margin: 0 0 8px;
}

.email-signature {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 8px;
}

.email-footer-note {
    margin: 0;
}

.email-preview [data-preview].is-empty {
    display: none;
}

@media (max-width: 1000px) {
    .automation-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .automation-content {
        padding: 14px;
    }
    .automation-item summary {
        padding: 14px;
    }
}

.filter-toggle .ads-toggle__pill {
    width: 30px;
    height: 16px;
}

.filter-toggle .ads-toggle__pill::after {
    width: 12px;
    height: 12px;
    top: 2px;
    left: 2px;
}

.filter-toggle input:checked + .ads-toggle__pill::after {
    transform: translateX(14px);
}

.wishlist-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.wishlist-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.wishlist-row input[type="text"] {
    flex: 1;
}

.wishlist-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}


/* Add-listing choice */
.create-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.create-choice-card {
    padding: 1rem 1.25rem;
    border-radius: 18px;
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
    background: rgba(255,255,255,0.86);
}
.create-choice-card h2 {
    margin: 0 0 0.35rem 0;
}
.create-choice-card p {
    margin: 0 0 0.75rem 0;
}
.create-choice-login {
    display: grid;
    gap: 0.5rem;
}
.create-choice-login label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.9rem;
}
.create-choice-login input {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}

.invite-input-card {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background: #f7f9fc;
    box-shadow: 0 14px 30px rgba(23, 32, 56, 0.08);
}

.invite-input-card label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.invite-input-card textarea {
    width: 100%;
    min-height: 120px;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid #d7dce5;
    background: #ffffff;
    font-size: 0.95rem;
    resize: vertical;
}

.invite-input-actions {
    margin-top: 0.85rem;
    display: flex;
    justify-content: flex-end;
}

.invite-table-card {
    margin-top: 1.5rem;
}

.invite-row.is-registered {
    background: #e7f5ed;
}

.invite-table-card .status-pill.status-pending {
    background: #f6f0da;
    color: #7a5b19;
}

.invite-table-card .status-pill.status-sent {
    background: #e8eefb;
    color: #2a4c9d;
}

.invite-table-card .status-pill.status-registered {
    background: #d9f2e3;
    color: #1f6b3b;
}

.invite-table-card .status-pill.status-failed {
    background: #fbe3e3;
    color: #a53232;
}

.invite-table-card .toggle-invite {
    min-width: 64px;
}

.invite-actions {
    margin-top: 1rem;
}

.invite-template-card {
    margin-top: 1.5rem;
    display: grid;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background: #f7f9fc;
    box-shadow: 0 14px 30px rgba(23, 32, 56, 0.08);
}

.invite-template-fields {
    display: grid;
    gap: 0.85rem;
    order: 1;
}

.invite-template-head h3 {
    margin: 0 0 0.25rem 0;
}

.invite-template-head p {
    margin: 0;
}

.invite-template-fields label {
    display: grid;
    gap: 0.35rem;
    font-weight: 600;
}

.invite-template-fields input,
.invite-template-fields textarea {
    border: 1px solid #d7dce5;
    border-radius: 0.85rem;
    padding: 0.7rem 0.85rem;
    background: #ffffff;
    font-size: 0.95rem;
}

.invite-template-row {
    display: grid;
    gap: 0.75rem;
}

.invite-template-preview h4 {
    margin: 0 0 0.6rem 0;
}

.invite-template-preview {
    order: 2;
}

.invite-template-card--stacked .invite-template-preview {
    margin-top: 0.35rem;
}

.invite-preview-box {
    background: #ffffff;
    border: 1px solid #dde3ee;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    display: grid;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.invite-preview-line {
    white-space: pre-wrap;
}

.invite-preview-card {
    background: linear-gradient(135deg, #e8f0ff 0%, #ffffff 45%, #eef8e6 100%);
    border: 1px solid #c8daf5;
    box-shadow: 0 12px 26px rgba(23, 32, 56, 0.12);
    color: #1f2e45;
}

.invite-preview-header {
    display: grid;
    gap: 0.35rem;
    padding: 0.4rem 0 0.2rem 0;
}

.invite-preview-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #0f2f5b;
    color: #ffffff;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.invite-preview-subject {
    font-weight: 700;
    font-size: 1.05rem;
    color: #15233a;
}

.invite-preview-body {
    display: grid;
    gap: 0.6rem;
    color: #253a5e;
}

.invite-preview-line {
    color: #1f2e45;
}

.invite-preview-cta {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: #2a5bd7;
    color: #ffffff;
    font-weight: 600;
}

.invite-preview-cta--secondary {
    background: #e2e8f0;
    color: #1b2b44;
}

.invite-preview-cta--ghost {
    background: #f1f5f9;
    color: #1b2b44;
}

.invite-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.invite-preview-cta-link {
    font-size: 0.85rem;
    color: #1d4ed8;
    word-break: break-all;
}

.invite-preview-listing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0;
    border-radius: 0.85rem;
    background: #f3f7ff;
    border: 1px solid #d7e2f5;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 18px rgba(18, 32, 58, 0.08);
    overflow: hidden;
    min-width: 160px;
    grid-template-rows: 110px auto 1fr;
}

.invite-preview-listing__media {
    border-radius: 0.85rem 0.85rem 0 0;
    background: linear-gradient(135deg, #cad6ef, #eff4ff);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 110px;
}

.invite-preview-listing__price {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: #2f855a;
    color: #ffffff;
    font-size: 0.8rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
}

.invite-preview-listing__rating {
    font-size: 0.78rem;
    color: #f59e0b;
    margin-top: 0.2rem;
    font-weight: 700;
}

.invite-preview-listing__content {
    padding: 0.6rem 0.65rem 0;
}

.invite-preview-listing__content strong {
    font-size: 0.88rem;
}

.invite-preview-listing__desc {
    font-size: 0.78rem;
    color: #5a667a;
    margin-top: 0.25rem;
}

.invite-preview-listing__status {
    background: #7c3aed;
    color: #ffffff;
    font-size: 0.56rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.14rem 0.42rem;
    margin: 0;
    border-radius: 999px;
    width: fit-content;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    align-self: end;
    margin-bottom: 0.45rem;
    margin-left: 0.65rem;
}

.invite-preview-listings {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    overflow-x: auto;
    padding-bottom: 0.4rem;
}

.invite-preview-listing--empty {
    grid-template-columns: 1fr;
    text-align: center;
}

.invite-preview-footer {
    font-size: 0.85rem;
    color: #2e3f5f;
    white-space: pre-wrap;
}

.invite-action-buttons {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.input-match-good {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.input-match-bad {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.reset-expired {
    opacity: 0.7;
}

@media (min-width: 900px) {
    .invite-template-card {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    .invite-template-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.listing-form .form-row__control.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.18);
  background: #fff7f7;
}

.listing-form .rich-input.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.16);
  border-radius: 14px;
  background: #fff7f7 !important;
}

.listing-form .rich-input.is-invalid .rich-input__toolbar,
.listing-form .rich-input.is-invalid .rich-input__editor {
  background: #fff9f9 !important;
}

.listing-form .rich-input--quill.is-filled.is-invalid,
.listing-form .rich-input--quill.is-invalid.is-filled {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.18) !important;
  background: #fff7f7 !important;
}

/* ===== ADMIN COMPACT OVERRIDES ===== */

/* -- Headers: smaller titles, tighter spacing -- */
.admin-console .section-head,
.admin-console .section-head--tight {
  gap: 0.4rem;
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
}
.admin-console .section-head h2,
.police-console .police-head h1,
.police-console .police-head h2,
.police-console .police-head h3,
.accounts-console .accounts-head h1,
.messages-archive .messages-head h2,
.permission-log .police-head h1,
.category-approvals .section-head h1,
.metric-view .metric-view__header h1 {
  font-size: 1.05rem;
  line-height: 1.15;
  margin: 0;
}
.admin-console .section-head p.muted,
.police-console .police-head p.muted,
.accounts-console .accounts-head p.muted,
.messages-archive .messages-head p.muted,
.permission-log .police-head p.muted,
.category-approvals .section-head p.muted {
  font-size: 0.72rem;
  margin: 0;
  line-height: 1.3;
}

/* -- Police head (audit, reports, etc): tighter -- */
.police-head {
  padding: 0.5rem 0.75rem;
  gap: 0.3rem;
  border-radius: 12px;
}
.police-meta {
  font-size: 0.75rem;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}
.police-meta strong {
  font-size: 0.9rem;
}

/* -- Filter forms: compact inputs -- */
/* ── Police filter — Micro styl override ── */
.police-filter-collapsible {
  border: 1px solid rgba(15,23,42,0.07);
  border-radius: 8px;
  background: #fff;
}
.police-filter-collapsible__summary,
.police-filter-collapsible > summary {
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  list-style: none;
}
.police-filter-collapsible__summary::-webkit-details-marker,
.police-filter-collapsible > summary::-webkit-details-marker { display: none; }
.police-filter-collapsible__summary::before,
.police-filter-collapsible > summary::before {
  content: "▸ ";
  font-size: 0.6rem;
}
.police-filter-collapsible[open] > summary::before,
.police-filter-collapsible[open] > .police-filter-collapsible__summary::before {
  content: "▾ ";
}
.police-filter {
  padding: 0.35rem 0.5rem;
  gap: 0.3rem 0.5rem;
  border-radius: 0 0 8px 8px;
  border: none;
}
.police-filter label {
  font-size: 0.68rem;
  gap: 1px;
  color: #64748b;
}
.police-filter label span {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.police-filter input,
.police-filter select {
  padding: 0.22rem 0.4rem;
  font-size: 0.7rem;
  min-height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,0.1);
}
.police-filter input::placeholder { font-size: 0.64rem; color: #94a3b8; }
.police-section-picker {
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
}
.police-section-picker > span {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
}
.police-section-options { gap: 0.2rem; }
.police-section-toggle {
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
  font-size: 0.62rem;
  gap: 0.2rem;
}
.police-section-toggle input { width: 13px; height: 13px; }
.police-filter > button.btn {
  font-size: 0.68rem;
  padding: 0.2rem 0.6rem;
  min-height: 24px;
  border-radius: 6px;
}
.police-filter__actions {
  margin-top: 0.1rem;
  gap: 0.3rem;
}
.police-filter__actions .btn,
.police-filter > button.btn {
  padding: 4px 10px;
  min-height: 26px;
  font-size: 0.75rem;
  border-radius: 8px;
}

/* -- Filter inline (audit_log, system_logs) -- */
.filter-inline {
  gap: 0.3rem 0.5rem;
  padding: 0.35rem 0.5rem;
}
.filter-inline label {
  font-size: 0.72rem;
  gap: 1px;
}
.filter-inline input,
.filter-inline select {
  padding: 0.25rem 0.5rem;
  font-size: 0.78rem;
  min-height: 28px;
}

/* -- Automation toolbar (emails, ads, payments, etc) -- */
.automation-toolbar {
  padding: 0.3rem 0;
  gap: 8px;
}
.automation-toolbar .btn.small {
  padding: 3px 10px;
  min-height: 26px;
  font-size: 0.75rem;
}

/* -- Eyebrow labels -- */
.admin-console .eyebrow,
.automation-sender .eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  margin-bottom: 0;
}

/* -- System card spacing -- */
.admin-console .system-card {
  padding: 0.6rem 0.8rem;
}

/* -- Messages head (message_archive, vendor_invites, listings_manage) -- */
.messages-head {
  gap: 0.35rem;
}
.messages-head .eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  margin-bottom: 0;
}

/* -- Accounts meta (user management style) -- */
.accounts-meta {
  font-size: 0.75rem;
}
.accounts-meta strong {
  font-size: 0.9rem;
}
.accounts-meta__actions .btn {
  min-height: 24px;
  padding: 2px 10px;
  font-size: 0.72rem;
}

/* -- Pagination compact -- */
.pagination,
.police-pagination {
  gap: 0.2rem;
  font-size: 0.75rem;
  margin-top: 0.4rem;
}
.pagination .btn,
.police-pagination .btn,
.pagination a,
.police-pagination a {
  padding: 2px 8px;
  min-height: 24px;
  font-size: 0.72rem;
}

/* ── Police micro — full rewrite ── */
.police-micro {
  max-width: 1100px;
  margin: 0 auto 2rem;
  display: grid;
  gap: 0.5rem;
}
.police-head__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}
.police-head__counter {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}
.police-head__num {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
}
/* ── Police table grid ── */
.pol-table {
  border: 1px solid rgba(15,23,42,0.07);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.pol-row {
  display: grid;
  grid-template-columns: 28px minmax(110px,1.3fr) minmax(130px,1.4fr) minmax(100px,1fr) 65px 130px 120px 40px;
  gap: 0 0.5rem;
  padding: 0.3rem 0.6rem;
  align-items: center;
  font-size: 0.72rem;
  border-bottom: 1px solid #e9ecf1;
}
.pol-row--head {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid #d9dee5;
}
.pol-row:last-child { border-bottom: none; }
.pol-row--flagged { background: #fef2f2; }
.pol-row--empty { grid-template-columns: 1fr; text-align: center; padding: 1rem; }
.pol-col { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pol-col--check { display: flex; justify-content: center; }
.pol-col--check input { width: 13px; height: 13px; accent-color: #4f46e5; }
.pol-col--name {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.pol-col--name strong { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pol-col--email,
.pol-col--vendor,
.pol-col--login {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.25;
}
.pol-col--score {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.pol-col--role {
  display: flex;
  flex-wrap: wrap;
  gap: 0.12rem;
}
.pol-col--count {
  text-align: center;
  font-weight: 600;
  color: #475569;
}
.pol-risk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fecaca;
  color: #b91c1c;
  font-size: 0.55rem;
  font-weight: 700;
}
/* ── Protistrana card ── */
.pol-contact-card {
  border: 1px solid rgba(15,23,42,0.07);
  border-radius: 8px;
  background: #fff;
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  justify-content: center;
  align-items: flex-end;
}
.pol-contact-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 180px;
  max-width: 380px;
}
.pol-contact-field > span {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.pol-contact-field input {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  min-height: 24px;
  border: 1px solid rgba(15,23,42,0.1);
  border-radius: 5px;
  background: #fff;
}
.pol-contact-field input::placeholder { font-size: 0.62rem; color: #94a3b8; }
/* ── Scope card ── */
.pol-scope-card {
  border: 1px solid rgba(15,23,42,0.07);
  border-radius: 8px;
  background: #fff;
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pol-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: flex-start;
  justify-content: center;
}
.pol-scope-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 140px;
}
.pol-scope-block--dates {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  align-items: flex-end;
  transition: opacity 0.2s;
}
.pol-scope-block--dates.is-inactive { opacity: 0.4; pointer-events: none; }
.pol-scope-label {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
/* ── Pill switch toggle ── */
.pol-pill-switch {
  display: inline-flex;
  border: 1px solid rgba(15,23,42,0.1);
  border-radius: 5px;
  overflow: hidden;
}
.pol-pill-switch__opt {
  padding: 0.15rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 500;
  color: #64748b;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  user-select: none;
}
.pol-pill-switch__opt + .pol-pill-switch__opt {
  border-left: 1px solid rgba(15,23,42,0.1);
}
.pol-pill-switch__opt:hover { background: #f1f5f9; color: #334155; }
.pol-pill-switch__opt.is-active {
  background: #0f172a;
  color: #fff;
  font-weight: 600;
}
/* ── Section picker ── */
.pol-sections {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-top: 1px solid rgba(15,23,42,0.05);
  padding-top: 0.35rem;
  align-items: center;
}
.pol-sections.is-disabled { opacity: 0.4; pointer-events: none; }
.pol-sections__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  justify-content: center;
}
.pol-sections__listing {
  max-width: 220px;
  margin-top: 0.15rem;
}
/* ── Action buttons centered ── */
.pol-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  padding: 0.3rem 0;
}

/* -- Admin back strip: subtle link above main card -- */
.admin-back-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.64rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: none;
  padding: 0.15rem 0;
  margin-bottom: 0.25rem;
  transition: color 0.12s;
}
.admin-back-strip:hover {
  color: #6366f1;
  text-decoration: none;
}
.admin-back-strip svg {
  flex-shrink: 0;
}
/* legacy: hide any leftover admin-back-inline */
.admin-back-inline { display: none !important; }

/* -- Automation items: compact inner content -- */
.automation-item {
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.automation-item summary {
  padding: 8px 12px;
}
.automation-summary {
  gap: 8px;
}
.automation-summary strong {
  font-size: 0.8rem;
}
.automation-summary .muted.tiny {
  font-size: 0.68rem;
}
.automation-summary .status-pill {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0.1rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  background: #dcfce7;
  color: #14532d;
  border: 1px solid rgba(21, 83, 45, 0.25);
}
.automation-summary .status-pill.is-warning {
  background: #fde68a;
  color: #92400e;
  border: 1px solid rgba(146, 64, 14, 0.25);
}
.automation-content {
  padding: 10px 12px;
}
.automation-grid {
  gap: 10px;
}
.automation-fields {
  gap: 6px;
}
.automation-row {
  gap: 6px 8px;
}
.automation-fields .stack.tiny {
  gap: 1px;
}
.automation-fields .stack.tiny > span {
  font-size: 0.68rem;
  opacity: 0.65;
}
.automation-fields .input {
  padding: 4px 8px;
  font-size: 0.78rem;
  min-height: 28px;
  height: 28px;
  border-radius: 6px;
}
.automation-fields select.input {
  padding: 3px 8px;
  font-size: 0.78rem;
  min-height: 28px;
  height: 28px;
  border-radius: 6px;
}
.automation-fields textarea.input,
.automation-fields .input--area {
  height: auto;
  min-height: 48px;
  padding: 4px 8px;
  font-size: 0.78rem;
  border-radius: 6px;
}
.automation-fields .toggle span,
.automation-fields .site-switch span {
  font-size: 0.72rem;
}
.automation-meta {
  margin-top: 2px;
  gap: 6px;
}
.automation-meta p {
  font-size: 0.65rem;
}
.automation-meta .btn {
  font-size: 0.7rem;
  padding: 2px 8px;
  min-height: 22px;
}

/* --- Vendor profile --- */

.vendor-profile {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vendor-profile__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.vendor-profile__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.vendor-profile__avatar-initials {
  font-size: 1.4rem;
  font-weight: 600;
  color: #0f3a2f;
}

.vendor-profile__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vendor-profile__name {
  font-size: 1.2rem;
  margin: 0;
}

.vendor-profile__headline {
  color: #6b7280;
  font-size: 0.85rem;
  margin: 0;
}

.vendor-profile__rating {
  padding: 0.75rem;
  border-radius: 8px;
}

.vendor-profile__bio {
  font-size: 0.9rem;
  line-height: 1.5;
}

.vendor-profile__bio p {
  margin: 0.25rem 0 0;
}

.vendor-profile__since {
  margin: 0;
}

.vendor-profile-link {
  color: inherit;
  text-decoration: none;
}

.vendor-profile-link:hover {
  text-decoration: underline;
  color: #0f3a2f;
}

.vendor-profile-btn {
  margin-top: 0.5rem;
  display: inline-block;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: transparent;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  color: #374151;
  transition: background 0.15s, color 0.15s;
}

.vendor-profile-btn:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.vendor-profile-btn + .vendor-profile-btn {
  margin-left: 0.35rem;
}

.vendor-profile__avatar--ringed {
  border-radius: 50%;
  border: 3px solid #94a3b8;
  padding: 2px;
}

.vendor-profile__avatar--online {
  border-color: #22c55e;
}

.vendor-profile__avatar--offline {
  border-color: #94a3b8;
}


.vendor-profile-side-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
  flex: 0 0 auto !important;
}

@media (max-width: 600px) {
  .vendor-profile-side-row {
    grid-template-columns: 1fr;
  }
}

.vendor-profile-side-card {
  min-width: 0;
}

.vendor-profile__map-wrap {
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}

.vendor-profile__map-iframe {
  width: 100%;
  height: 160px;
  border: 0;
  border-radius: 6px;
}

/* --- Vendor avatar ring (online/offline indicator) --- */

.vendor-avatar-ring {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: #e5e7eb;
  position: relative;
}

.vendor-avatar-ring__tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 0.6rem;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.vendor-avatar-ring__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1e293b;
}

.vendor-avatar-ring:hover .vendor-avatar-ring__tooltip {
  display: block;
}

.vendor-avatar-ring--online {
  border-color: #22c55e;
}

.vendor-avatar-ring--offline {
  border-color: #94a3b8;
}

.vendor-avatar-ring__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.vendor-avatar-ring__placeholder {
  width: 20px;
  height: 20px;
  color: #6b7280;
}

/* --- Profile cards --- */

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, #94a3b8);
  margin-right: 0.3rem;
}

/* Profile tabs */
.profile-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 0.75rem;
}

.profile-tabs__btn {
  background: none;
  border: none;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.profile-tabs__btn:hover {
  color: #0f3a2f;
}

.profile-tabs__btn.active {
  color: #0f3a2f;
  border-bottom-color: #0f3a2f;
  font-weight: 600;
}

.profile-tab-pane {
  display: none;
}

.profile-tab-pane.active {
  display: block;
}

/* Quick info row with icons */
.profile-quick-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.profile-quick-info__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.profile-quick-info__item svg {
  flex-shrink: 0;
  color: #94a3b8;
}

/* Profile fields */
.profile-field {
  padding: 0.65rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.profile-field:last-child {
  border-bottom: none;
}

.profile-field__label {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.profile-field__value {
  font-size: 0.9rem;
  color: inherit;
}

.profile-field__value--bio {
  line-height: 1.55;
  white-space: pre-line;
}

.profile-field__value a {
  color: #0f3a2f;
  text-decoration: underline;
}

/* Contact list */
.profile-contact-list {
  display: grid;
  gap: 0.15rem;
}

.profile-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  background: #f9fafb;
  border-radius: 8px;
}

.profile-contact-row svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: #6b7280;
}

.profile-contact-row .profile-field__label {
  margin-bottom: 0.1rem;
}

/* Empty state in tabs */
.profile-empty-state {
  text-align: center;
  padding: 1.5rem 1rem;
  color: #94a3b8;
}

.profile-empty-state svg {
  margin-bottom: 0.5rem;
}

.profile-empty-state p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}

/* Rating header - big number + tier badge */
.profile-rating-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.profile-rating-big {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.profile-rating-big__number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: #0f3a2f;
}

.profile-rating-big__stars {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.profile-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.profile-tier-badge--bronze {
  background: #fef3c7;
  color: #92400e;
}

.profile-tier-badge--silver {
  background: #f1f5f9;
  color: #475569;
}

.profile-tier-badge--gold {
  background: #fef9c3;
  color: #854d0e;
}

.profile-tier-badge__icon {
  font-size: 0.9rem;
}

/* Rating distribution bars */
.rating-dist {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.rating-dist-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.rating-dist-row__label {
  width: 0.7rem;
  text-align: right;
  font-weight: 600;
  color: #374151;
}

.rating-dist-row svg {
  flex-shrink: 0;
}

.rating-dist-row__bar {
  flex: 1;
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}

.rating-dist-row__fill {
  height: 100%;
  background: #f59e0b;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.rating-dist-row__count {
  width: 1.5rem;
  text-align: right;
  color: #6b7280;
  font-size: 0.75rem;
}

/* Trust progress bar */
.profile-trust-bar {
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid #f3f4f6;
}

.profile-trust-bar__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.profile-trust-bar__track {
  height: 6px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}

.profile-trust-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 999px;
  transition: width 0.5s ease;
}

/* Metric tiles grid */
.profile-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.profile-metric-tile {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 10px;
  padding: 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.profile-metric-tile__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f3a2f;
  line-height: 1.1;
}

.profile-metric-tile__label {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Charts row */
.profile-charts-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.profile-chart-block {
  min-width: 0;
}

.profile-chart-block--wide {
  flex: 1;
  min-width: 0;
}

.profile-donut-wrap {
  display: flex;
  justify-content: center;
  padding: 0.35rem 0;
}

.profile-spark-wrap {
  margin-top: 0.35rem;
}

/* Interactive sparkline */
.profile-spark-interactive {
  position: relative;
  display: flex;
  gap: 0;
  flex-direction: column;
}

.spark-chart-area {
  position: relative;
  height: 100px;
  flex: 1;
}

.profile-spark-interactive svg.profile-sparkline {
  display: block;
  width: 100%;
  height: 100%;
}

/* Y-axis */
.spark-y-axis {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 1rem;
  width: 2rem;
  z-index: 2;
  pointer-events: none;
}

.spark-y-label {
  position: absolute;
  right: 0.3rem;
  transform: translateY(-50%);
  font-size: 0.6rem;
  color: #9ca3af;
  line-height: 1;
}

.profile-spark-interactive {
  padding-left: 2rem;
  position: relative;
}

.profile-spark-interactive > .spark-y-axis {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 1.2rem;
}

/* Cursor (HTML, not SVG — no distortion) */
.spark-cursor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.spark-cursor__line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #0f3a2f;
  opacity: 0.5;
  border-left: 1px dashed #0f3a2f;
  background: none;
}

.spark-cursor__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0f3a2f;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #fff;
}

/* X-axis */
.spark-x-axis {
  position: relative;
  height: 1rem;
  margin-top: 0.2rem;
}

.spark-x-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: #9ca3af;
  white-space: nowrap;
}

/* Tooltip */
.spark-tooltip {
  position: absolute;
  top: -0.2rem;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 0.72rem;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

/* Inline editing */
.profile-editable {
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
  padding: 0.1rem 0.2rem;
  margin: -0.1rem -0.2rem;
}

.profile-editable:hover {
  background: #f3f4f6;
}

.profile-inline-edit {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.9rem;
  outline: none;
  background: #fff;
}

.profile-inline-edit:focus {
  border-color: #0f3a2f;
  box-shadow: 0 0 0 2px rgba(15, 58, 47, 0.15);
}

.profile-inline-edit--ta {
  resize: vertical;
  min-height: 3rem;
}

/* Add tab button */
.profile-tabs__btn--add {
  color: #94a3b8;
  font-size: 1.1rem;
  font-weight: 400;
  padding: 0.4rem 0.6rem;
  line-height: 1;
}

.profile-tabs__btn--add:hover {
  color: #0f3a2f;
  background: #f3f4f6;
  border-radius: 4px;
}

/* Custom tab header */
.profile-custom-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.profile-tab-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #ef4444;
  opacity: 0.5;
  padding: 0 0.3rem;
  line-height: 1;
}

.profile-tab-delete-btn:hover {
  opacity: 1;
}

.detail-system-card.profile-card {
  gap: 0.35rem;
  flex: 0 0 auto !important;
}

.profile-report-btn {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #94a3b8;
  transition: color 0.15s, border-color 0.15s;
}

.profile-report-btn:hover {
  color: #ef4444;
  border-color: #ef4444;
}

.profile-report-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-report-modal {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  width: 340px;
  max-width: 90vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.profile-report-modal__title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.profile-report-modal textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.75rem;
  resize: vertical;
  box-sizing: border-box;
}

.profile-report-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.profile-report-modal__actions button {
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  font-size: 0.7rem;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: transparent;
}

.profile-report-modal__actions button.primary {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* Contact grid */
.profile-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.profile-contact-grid .profile-field {
  padding: 0.5rem 0.65rem;
  background: #f9fafb;
  border-radius: 8px;
  border-bottom: none;
}

.profile-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 0.35rem;
}

/* Category bar chart */
.cat-bar-chart {
  display: grid;
  gap: 0.3rem;
}

.cat-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.cat-bar-row__label {
  width: 5.5rem;
  text-align: right;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.cat-bar-row__bar {
  flex: 1;
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}

.cat-bar-row__fill {
  height: 100%;
  background: #0f3a2f;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.cat-bar-row__count {
  width: 1.5rem;
  text-align: right;
  color: #6b7280;
  font-size: 0.75rem;
}

.profile-donut {
  flex-shrink: 0;
}

.profile-sparkline {
  display: block;
}

.profile-legend {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.profile-legend__item {
  display: flex;
  align-items: center;
}

/* Rating comment cards */
.rating-comments-list {
  display: grid;
  gap: 0.35rem;
}

.rating-comment-card {
  background: #f9fafb;
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  position: relative;
}

.rating-comment-card__quote {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #374151;
  font-style: italic;
}

.rating-comment-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.rating-comment-card__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rating-comment-card__meta {
  font-size: 0.7rem;
  color: #9ca3af;
  white-space: nowrap;
}

/* Report button */
.rating-report-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #ef4444;
  opacity: 0.45;
  padding: 0.15rem;
  line-height: 1;
  border-radius: 4px;
  transition: opacity 0.15s;
}

.rating-report-btn:hover {
  opacity: 1;
}

.rating-report-btn:hover svg {
  fill: #ef4444;
}

.rating-report-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rating-reported-label {
  font-size: 0.7rem;
  color: #ef4444;
  font-style: italic;
  white-space: nowrap;
}

/* Filter chips */
.rating-filters {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.rating-filter-chip {
  background: #f3f4f6;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.15s;
}

.rating-filter-chip:hover {
  background: #e5e7eb;
  color: #374151;
}

.rating-filter-chip--active {
  background: #0f3a2f;
  color: #fff;
  border-color: #0f3a2f;
}

.rating-filter-chip--active:hover {
  background: #1a5a45;
  color: #fff;
}

/* Load more button */
.rating-load-more-btn {
  display: block;
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.35rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #6b7280;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}

.rating-load-more-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.rating-load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tier-stars--small .star-icon {
  width: 14px;
  height: 14px;
}

/* --- Admin dashboard in catalog --- */

.admin-dashboard {
  padding: 0.75rem;
  background: rgba(15, 58, 47, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(15, 58, 47, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
}

.admin-metric-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.1rem;
}

.admin-metric-grid__value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f3a2f;
}

.admin-metric-grid__label {
  font-size: 0.65rem;
  color: #6b7280;
}

.admin-chart {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-chart__svg {
  display: block;
}

/* ── Admin Ads page (redesigned) ── */
.admin-ads-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.admin-ads-toolbar__actions {
    display: flex;
    gap: 0.4rem;
}

.admin-ads-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.admin-ads-item,
.admin-ads-category-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.admin-ads-item.is-active {
    border-color: rgba(59, 130, 246, 0.3);
}

.admin-ads-item__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    list-style: none;
}

.admin-ads-item__summary::-webkit-details-marker {
    display: none;
}

.admin-ads-item__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.admin-ads-item__info strong {
    font-size: 0.82rem;
}

.admin-ads-item__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.admin-ads-item__stats {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-ads-item__body {
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    background: #f8fafc;
    display: grid;
    gap: 0.5rem;
}

.admin-ads-item__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: end;
}

.admin-ads-category-row__fields {
    display: grid;
    grid-template-columns: minmax(200px, 1.2fr) minmax(200px, 1fr) 140px 120px;
    gap: 0.5rem 0.75rem;
    align-items: end;
}

@media (max-width: 900px) {
    .admin-ads-category-row__fields {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Admin Notification composer ── */
.admin-notification-composer {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.admin-notification-composer__card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 0.75rem;
}

.admin-notification-composer__card h3 {
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}

.admin-notification-composer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.admin-notification-quick-filters {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.admin-notification-quick-filters .admin-filter-quick__link {
    cursor: pointer;
}

.admin-notification-quick-filters .admin-filter-quick__link input[type="radio"] {
    display: none;
}

.admin-notification-quick-filters .admin-filter-quick__link:has(input:checked) {
    background: rgba(59, 130, 246, 0.1);
    color: #1e40af;
}

.admin-notification-sendall {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #64748b;
    margin-left: auto;
}

.admin-notification-composer__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
}

/* ── Admin Invite page (redesigned) ── */
.admin-invite-input-card {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 0.75rem;
}

.admin-invite-input-card h3 {
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}

.admin-invite-input-card__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.admin-invite-table-card {
    margin-top: 0.75rem;
}

.admin-invite-bulk {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.admin-invite-send-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.admin-invite-template-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 0.75rem;
}

.admin-invite-template-fields h3 {
    font-size: 0.85rem;
    margin: 0 0 0.3rem;
}

.admin-invite-template-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

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

/* ── Admin Moderation panel (listings manage) ── */
.admin-moderation-panel {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.admin-moderation-panel__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 0.82rem;
}

.admin-moderation-panel__summary::-webkit-details-marker {
    display: none;
}

.admin-moderation-panel__body {
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    background: #f8fafc;
}

.admin-moderation-panel__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
    align-items: start;
}

.admin-moderation-panel__left,
.admin-moderation-panel__right {
    display: grid;
    gap: 0.5rem;
}

.admin-moderation-panel__right {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 0.6rem;
}

.admin-moderation-panel__action-row {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    flex-wrap: wrap;
}

.admin-moderation-panel__save {
    display: flex;
    justify-content: flex-end;
}

.admin-moderation-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.78rem;
}

.admin-moderation-results {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 0.6rem;
}

.admin-moderation-results__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.admin-moderation-results__list {
    display: grid;
    gap: 0.4rem;
}

.admin-moderation-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: start;
    padding: 0.5rem;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
}

.admin-moderation-item__check {
    padding-top: 0.15rem;
}

.admin-moderation-item__main {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.admin-moderation-item__matches {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.admin-moderation-item__actions {
    display: grid;
    gap: 0.35rem;
}

.admin-moderation-item__btns {
    display: flex;
    gap: 0.3rem;
}

.admin-moderation-results__bulk {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.admin-moderation-results__paging {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

.admin-moderation-results__paging-controls {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

/* ── Admin Rejection templates ── */
.admin-rejection-templates {
    display: grid;
    gap: 0.4rem;
}

.admin-rejection-template-row {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 0.5rem;
    align-items: start;
}

.admin-rejection-templates__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* ── Admin Listing management (redesigned) ── */
.admin-listing-bulk {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.admin-listing-groups {
    display: grid;
    gap: 0.35rem;
}

.admin-listing-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

@media (max-width: 800px) {
    .admin-moderation-panel__grid {
        grid-template-columns: 1fr;
    }
    .admin-rejection-template-row {
        grid-template-columns: 1fr;
    }
    .admin-moderation-item {
        grid-template-columns: auto 1fr;
    }
    .admin-moderation-item__actions {
        grid-column: 1 / -1;
    }
}

/* ── Admin Site Settings (redesigned) ── */
/* ── Site-settings micro cards (ss-*) ── */
.ss-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin: 1rem 0 0.35rem 0.1rem;
}
.ss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem;
}
.ss-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    font-size: 0.68rem;
}
.ss-card--wide {
    grid-column: 1 / -1;
}
.ss-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.6rem 0.3rem;
}
.ss-card__head .eyebrow {
    margin: 0;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
}
.ss-card__body {
    padding: 0.3rem 0.6rem 0.45rem;
    border-top: 1px solid #f1f5f9;
    flex: 1;
}
.ss-card__foot {
    display: flex;
    justify-content: flex-end;
    padding: 0.3rem 0.6rem;
    border-top: 1px solid #f1f5f9;
}
.ss-save {
    font-size: 0.62rem;
    font-weight: 600;
    color: #4f46e5;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem 0;
}
.ss-save:hover {
    color: #3730a3;
    text-decoration: underline;
}
.ss-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    cursor: pointer;
}
.ss-card input[type="checkbox"],
.ss-card input[type="radio"] {
    width: 12px;
    height: 12px;
    margin: 0;
}
.ss-label {
    font-size: 0.65rem;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}
.ss-input {
    font-size: 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 0.2rem 0.35rem;
    background: #fff;
    min-width: 0;
    flex: 1;
}
.ss-input:focus {
    outline: none;
    border-color: #a5b4fc;
}
.ss-input--short {
    max-width: 72px;
    flex: 0 0 auto;
}
.ss-input--mid {
    max-width: 200px;
}
textarea.ss-input {
    resize: vertical;
    font-family: inherit;
}
.ss-input-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.2rem;
}
.ss-input-row--full {
    grid-column: 1 / -1;
}
.ss-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.ss-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.5rem;
}
.ss-field-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}
.ss-pills {
    display: inline-flex;
    gap: 0.2rem;
}
.ss-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.12rem 0.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    font-size: 0.62rem;
    background: #f8fafc;
    white-space: nowrap;
    cursor: pointer;
}
.ss-pill input:checked + span {
    color: #4f46e5;
    font-weight: 600;
}
.ss-tier-row {
    display: flex;
    gap: 0.5rem;
}
.ss-divider {
    border-top: 1px solid #f1f5f9;
    margin: 0.35rem 0;
}
.ss-stat-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}
.ss-stat {
    font-size: 0.68rem;
}
.ss-stat strong {
    font-size: 0.78rem;
}
.ss-wallpaper-upload {
    display: flex;
    flex-direction: column;
}
.ss-wallpaper-grid {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.ss-wallpaper-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.ss-wallpaper-thumb {
    width: 48px;
    height: 28px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    border: 1px solid #e2e8f0;
}
.ss-delete {
    font-size: 0.6rem;
    color: #ef4444;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.2rem;
}
.ss-delete:hover {
    color: #dc2626;
}
.ss-dirty-hint {
    font-size: 0.58rem;
    color: #f59e0b;
    font-weight: 600;
    margin-right: auto;
}
.ss-card.is-dirty {
    border-color: #fbbf24;
}
@media (max-width: 700px) {
    .ss-grid { grid-template-columns: 1fr; }
    .ss-field-grid--4 { grid-template-columns: 1fr 1fr; }
    .ss-tier-row { flex-direction: column; }
}

/* ── Legacy compat (keep for other pages referencing these) ── */
.admin-settings-sections { display: grid; gap: 0.6rem; margin-top: 0.75rem; }
.admin-settings-section { border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
.admin-settings-section__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.45rem 0.6rem; }
.admin-settings-section__body { padding: 0.3rem 0.6rem; border-top: 1px solid #f1f5f9; }
.admin-settings-section__footer { display: flex; justify-content: flex-end; padding: 0.3rem 0.6rem; border-top: 1px solid #f1f5f9; }
.admin-settings-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.2rem 0; }
.admin-settings-option > .muted { min-width: 100px; flex-shrink: 0; }
.admin-settings-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.4rem; margin-bottom: 0.3rem; }
.admin-settings-grid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 700px) { .admin-settings-grid-row { grid-template-columns: 1fr; } }

/* ── Dashboard console (user dashboard in admin style) ── */
.dashboard-console .dashboard-chart-card {
    margin-top: 0.75rem;
}

.dashboard-console .dashboard-listings {
    margin-top: 0.5rem;
}

.dashboard-console .dashboard-nav-blocks {
    margin-top: 0.75rem;
}

.dashboard-console .dashboard-preparations {
    margin-top: 0.75rem;
}

.dashboard-console .admin-metrics-row .metric-card--button {
    cursor: default;
}

/* ── Trust Badges ── */
.trust-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 1;
}
.trust-badge--inline {
    display: inline-flex;
    margin-left: 0.2em;
}
.trust-badge--xs { width: 12px; height: 12px; }
.trust-badge--sm { width: 16px; height: 16px; }
.trust-badge--md { width: 20px; height: 20px; }
.trust-badge--lg { width: 24px; height: 24px; }

.trust-badge--high,
.trust-badge--verified {
    color: #16a34a;
}
.trust-badge--top_verified {
    color: #16a34a;
}
.trust-badge--medium {
    color: #a3a3a3;
}
.trust-badge--low {
    color: #f59e0b;
}
.trust-badge--reported {
    color: #f59e0b;
}
.trust-badge--blocked {
    color: #ef4444;
}

/* User avatar with badge overlay */
.user-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
}
.user-avatar--xs { width: 24px; height: 24px; }
.user-avatar--sm { width: 32px; height: 32px; }
.user-avatar--md { width: 40px; height: 40px; }
.user-avatar--lg { width: 48px; height: 48px; }

.user-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--border, #e5e7eb);
}
.user-avatar__initial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    background: #94a3b8;
    font-size: 0.75em;
}
.user-avatar__badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #fff;
    border-radius: 50%;
    padding: 1px;
    line-height: 1;
    box-shadow: 0 0 0 1.5px #fff;
}

/* Trust bar (horizontal color bar for scoring) */
.trust-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
}
.trust-bar__track {
    width: 40px;
    height: 5px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #d1d5db;
}
.trust-bar__fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s;
}
.trust-bar__fill--high { background: #16a34a; }
.trust-bar__fill--medium { background: #f59e0b; }
.trust-bar__fill--low { background: #ef4444; }
.trust-bar__label {
    color: #64748b;
    white-space: nowrap;
}
.trust-bar__label-text {
    white-space: nowrap;
}
.trust-bar__track--wide {
    width: 60px;
}
.trust-bar--compact {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
}
.trust-bar--compact .trust-bar__track {
    width: 32px;
    height: 4px;
}
.trust-bar--compact .trust-bar__label {
    font-size: 0.6rem;
}

/* Trust bar in thread cards */
.thread-card__trust-bar {
    display: inline-flex;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Trust bar in chat head */
.chat-head__trust {
    margin-top: 0.25rem;
}

/* ── Fraud Ring ── */
.fraud-ring-console {
    display: grid;
    gap: 1rem;
    overflow: hidden;
    min-width: 0;
}
.fraud-ring-console .police-head {
    flex-direction: row;
    align-items: flex-start;
}
.fraud-ring-console .police-meta {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* Graph nodes */
.fraud-ring-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.72rem;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.fraud-ring-node--seed { background: #0f172a; color: #fff; border: 2px solid #0f172a; }
.fraud-ring-node--strong { background: #fff; color: #991b1b; border: 2px solid #ef4444; }
.fraud-ring-node--medium { background: #fff; color: #92400e; border: 2px solid #f59e0b; }
.fraud-ring-node--weak { background: #fff; color: #64748b; border: 2px solid #94a3b8; }

/* Tree view */
.fr-tree {
    padding: 0.5rem 0;
}
.fr-tree__node {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.07);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
}
.fr-tree__node--seed {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: rgba(15,23,42,0.1);
}
.fr-tree__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.fr-tree__head strong { font-size: 0.74rem; }
.fr-tree__head .muted.tiny { font-size: 0.62rem; }
.fr-tree__head .fr-pill { font-size: 0.58rem; }
.fr-tree__head .fr-strength { font-size: 0.58rem; }
.fr-tree__children {
    padding: 0.3rem 0 0 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.4rem;
    border-left: 2px solid #e2e8f0;
}
.fr-tree__branch {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.fr-tree__line {
    width: 16px;
    height: 2px;
    margin-top: 14px;
    flex-shrink: 0;
    border-radius: 1px;
}
.fr-tree__line--strong { background: #ef4444; }
.fr-tree__line--medium { background: #f59e0b; }
.fr-tree__line--weak { background: #94a3b8; }
.fr-tree__node--strong { border-left: 3px solid #ef4444; }
.fr-tree__node--medium { border-left: 3px solid #f59e0b; }
.fr-tree__node--weak { border-left: 3px solid #94a3b8; }
.fr-tree__sub {
    padding: 0.3rem 0 0 1.2rem;
    border-left: 2px solid #e2e8f0;
    margin-top: 0.3rem;
}
.fr-tree__sub[hidden] { display: none; }
.fr-tree__sub .fr-tree__branch { margin-bottom: 0.2rem; }
.fr-tree__sub .fr-tree__node {
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}
.fr-tree__sub .fr-tree__head strong { font-size: 0.68rem; }
.fr-link--tree-expand {
    margin-left: auto;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.fr-link--tree-expand:hover { opacity: 1; }
.fr-link--tree-expand svg { transition: transform 0.15s; }
.fr-link--tree-expand.is-open svg { transform: rotate(180deg); }

/* Legacy graph canvas (unused, kept for compat) */
.fraud-ring-canvas-el {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

/* Graph tooltip */
.fr-tooltip {
    position: absolute;
    z-index: 10;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-size: 0.68rem;
    line-height: 1.5;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
}
.fr-tooltip.is-visible { opacity: 1; }
.fr-tooltip strong { font-size: 0.72rem; }
.fr-tooltip__row { display: flex; gap: 0.4rem; align-items: center; }
.fr-tooltip__label { color: #94a3b8; min-width: 50px; }
.fr-tooltip__val { color: #1e293b; }

/* ── Fraud Ring: Shared Components ── */
.fr-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.65rem;
    flex-shrink: 0;
}
.fr-avatar--high { background: #dcfce7; color: #166534; }
.fr-avatar--medium { background: #fef3c7; color: #92400e; }
.fr-avatar--low { background: #fee2e2; color: #991b1b; }

.fr-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.fr-pill--active { background: rgba(16,185,129,0.1); color: #047857; }
.fr-pill--pending { background: rgba(59,130,246,0.08); color: #1d4ed8; }
.fr-pill--suspended { background: rgba(239,68,68,0.08); color: #b91c1c; }
.fr-pill--deleted { background: rgba(148,163,184,0.12); color: #475569; }
.fr-pill--warning { background: rgba(245,158,11,0.1); color: #92400e; }

.fr-trust { display: inline-flex; align-items: center; gap: 0.25rem; }
.fr-trust__bar {
    width: 40px;
    height: 3px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
}
.fr-trust__fill {
    height: 100%;
    border-radius: 99px;
}
.fr-trust__fill--high, .fr-trust__fill--gold, .fr-trust__fill--platinum { background: #16a34a; }
.fr-trust__fill--medium, .fr-trust__fill--silver { background: #f59e0b; }
.fr-trust__fill--low, .fr-trust__fill--bronze, .fr-trust__fill--new { background: #ef4444; }

.fr-strength {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.04rem 0.35rem;
    border-radius: 4px;
}
.fr-strength--strong { background: rgba(239,68,68,0.08); color: #dc2626; }
.fr-strength--medium { background: rgba(245,158,11,0.08); color: #d97706; }
.fr-strength--weak { background: rgba(148,163,184,0.1); color: #64748b; }

.fr-signal {
    font-size: 0.58rem;
    padding: 0.02rem 0.3rem;
    border-radius: 3px;
    background: #f1f5f9;
    color: #475569;
}

.fr-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: #64748b;
    text-decoration: none;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.fr-link:hover {
    background: #e0e7ff;
    color: #1e40af;
    text-decoration: none;
}
.fr-link svg { flex-shrink: 0; }

.fr-actions-sep {
    width: 1px;
    height: 14px;
    background: var(--border);
    flex-shrink: 0;
}

.fr-sep {
    width: 1px;
    height: 14px;
    background: var(--border);
    flex-shrink: 0;
    align-self: center;
}

/* ── Fraud Ring: Seed Row ── */
.fr-row--seed {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 8px;
}

/* ── Fraud Ring: Stat Chips ── */
.fr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.fr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.7);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.fr-chip strong { font-size: 0.76rem; color: var(--text); }

/* ── Fraud Ring: Table ── */
.fr-table { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }

.fr-row {
    background: #fff;
    border-bottom: 1px solid rgba(15,23,42,0.05);
    transition: background 0.1s;
}
.fr-row:first-child { border-radius: 8px 8px 0 0; }
.fr-row:last-child { border-radius: 0 0 8px 8px; border-bottom: none; }
.fr-row:only-child { border-radius: 8px; }
.fr-row:hover { background: #f8fafc; }

/* Single-line row (legacy) */
.fr-row:not(.fr-row--2line) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
}

/* Two-line row */
.fr-row--2line { padding: 0.35rem 0.6rem; }

.fr-row__line1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fr-row__line2 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0 0 2.5rem;
    flex-wrap: wrap;
}
/* When row has checkbox, shift line2 further right */
.fr-row--2line:has(.fr-row__check) .fr-row__line2 {
    padding-left: 3.9rem;
}

.fr-row__check {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

.fr-row__main {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
    flex: 1 1 120px;
    overflow: hidden;
}
.fr-row__main strong { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-row__main .muted.tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-row .muted.tiny { font-size: 0.68rem; }

.fr-row__tags {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.fr-row__trust {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    min-width: 60px;
}
.fr-row__trust .muted.tiny { font-size: 0.66rem; }

.fr-row__info {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.fr-row__signals {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.fr-row__actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(15,23,42,0.06);
}

/* Expandable panel */
.fr-row__expand {
    border-top: 1px solid rgba(15,23,42,0.04);
    padding: 0.4rem 0.6rem 0.4rem 2.2rem;
    background: #f8fafc;
}
.fr-row__expand[hidden] { display: none; }
.fr-expand__loading,
.fr-expand__empty { padding: 0.3rem 0; }
.fr-expand__stats {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
.fr-expand__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(15,23,42,0.03);
    flex-wrap: wrap;
}
.fr-expand__row--grid {
    display: grid;
    grid-template-columns: 22px minmax(80px,1fr) minmax(120px,1.5fr) 56px 42px 48px 100px 100px 40px;
    align-items: center;
    gap: 0 0.4rem;
}
.fr-expand__strength { font-size: 0.62rem; font-weight: 600; }
.fr-expand__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-expand__row:last-child { border-bottom: none; }
.fr-expand__name { font-size: 0.68rem; }
.fr-expand__row .muted.tiny { font-size: 0.6rem; }
.fr-expand__row .fr-pill { font-size: 0.56rem; }

/* Chevron transition + active state */
.fr-link--expand svg { transition: transform 0.15s; }
.fr-link--expand.is-open svg { transform: rotate(180deg); }
.fr-link--expand.is-open {
    color: #fff;
    background: #2563eb;
    border-radius: 4px;
}

/* Pagination */
.fr-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0;
    flex-wrap: wrap;
}
.fr-pagination__pages,
.fr-pagination__perpage {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.fr-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.3rem;
    border-radius: 6px;
    font-size: 0.68rem;
    color: #64748b;
    text-decoration: none;
    transition: background 0.1s;
}
.fr-pagination__link:hover { background: #e0e7ff; color: #1e40af; }
.fr-pagination__link.is-active { background: #1e40af; color: #fff; font-weight: 600; }

/* ── Fraud Ring: Table head / Bulk ── */
.fr-table-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}
.fr-table-head__check {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.fr-bulk {
    padding: 0.5rem 0.6rem;
    background: #fafbfc;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 8px;
    margin-top: 0.5rem;
}
.fr-bulk__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.fr-bulk__label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.fr-bulk__template {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    margin: 0 0 0.3rem;
}
.fr-bulk__input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font: inherit;
    font-size: 0.72rem;
    resize: vertical;
    margin-bottom: 0.35rem;
}
.fr-bulk__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fr-bulk__opt {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* ── Fraud Ring: Toggle Pill ── */
.fr-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: 0.68rem;
    color: var(--text-muted);
    user-select: none;
}
.fr-toggle-pill__track {
    width: 28px;
    height: 16px;
    border-radius: 99px;
    background: #d1d5db;
    position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
}
.fr-toggle-pill__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: transform 0.15s;
}
.fr-toggle-pill input:checked + .fr-toggle-pill__track {
    background: #2563eb;
}
.fr-toggle-pill input:checked + .fr-toggle-pill__track .fr-toggle-pill__knob {
    transform: translateX(12px);
}

.fr-table-head__count {
    font-size: 0.68rem;
    color: var(--text-muted);
}

@media (max-width: 800px) {
    .fr-row:not(.fr-row--2line) { flex-wrap: wrap; }
    .fr-row__line2 { padding-left: 0.6rem; }
    .fr-row__actions { margin-left: 0; }
    .fr-pagination { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 540px) {
    .fr-seed { flex-direction: column; align-items: flex-start; }
    .fr-row__line1 { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   Micro styl — Admin Dashboard
   ══════════════════════════════════════════════════════════ */

/* Live strip */
.admin-live-strip {
  gap: 0.35rem;
  font-size: 0.7rem;
}
.admin-live-strip > span:first-of-type {
  font-size: 0.72rem;
  font-weight: 600;
}
.admin-live-dot {
  width: 7px;
  height: 7px;
}
.admin-refresh {
  height: 3px;
  width: clamp(60px, 14vw, 110px);
}
.admin-console .status-pill {
  font-size: 0.6rem;
  padding: 1px 6px;
}

/* Metric cards — Micro */
.admin-console .metric-card,
.admin-console .metric-card--button {
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  gap: 0.1rem;
}
.admin-console .metric-card .muted.small {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.admin-console .metric-card strong {
  font-size: 0.95rem;
  line-height: 1.15;
}
.admin-console .metric-card .muted.tiny {
  font-size: 0.58rem;
}
.admin-console .metric-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.35rem;
}
.admin-console .metric-card--button:hover,
.admin-console .metric-card--button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.14);
}

/* Metric groups */
.admin-metrics-groups {
  gap: 0.8rem;
  margin-top: 0.4rem;
}
.admin-metrics-group__label {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

/* Chart area — tighter */
.admin-chart-area {
  padding: 0.3rem 0.4rem 0.2rem;
  border-radius: 6px;
}
.admin-chart-area__label {
  font-size: 0.62rem;
}
.admin-chart-bucket {
  font-size: 0.58rem;
  padding: 0.18rem 0.35rem;
}
.admin-chart-tooltip {
  font-size: 0.62rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

/* Nav blocks — Micro */
.admin-nav-blocks {
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.admin-nav-block {
  border-radius: 8px;
  padding: 0.5rem 0.6rem 0.4rem;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}
.admin-nav-block__title {
  font-size: 0.68rem;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}
.admin-nav-block__title svg {
  width: 13px;
  height: 13px;
  color: #94a3b8;
}
.admin-nav-block__links {
  gap: 0.1rem;
}
.admin-nav-link {
  font-size: 0.68rem;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
}

/* Recent listings section */
.admin-console .admin-listings {
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}
.admin-console .section-head h2 {
  font-size: 0.85rem;
}
.admin-console .section-head p.muted {
  font-size: 0.62rem;
}
.admin-limit-picker {
  font-size: 0.68rem;
}
.admin-limit-picker select {
  font-size: 0.68rem;
  padding: 0.18rem 0.6rem;
  border-radius: 6px;
}
.catalog-feed.admin-listings-grid {
  --listing-card-width: clamp(110px, 36vw, 140px);
}
.admin-console .listing-card__body h3 {
  font-size: 0.7rem;
  line-height: 1.2;
}
.admin-console .listing-card__body .listing-card__rating,
.admin-console .listing-card__body .listing-card__meta,
.admin-console .listing-card__body .listing-card__info {
  font-size: 0.6rem;
}
.admin-console .listing-card__price {
  font-size: 0.68rem;
  padding: 1px 5px;
}
.admin-console .listing-card__badge {
  font-size: 0.56rem;
  padding: 1px 5px;
}

/* System card — gradient bg */
.admin-console .system-card {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border-radius: 10px;
  border-color: rgba(15,23,42,0.06);
}
.automation-page .system-card,
.automation-log-page .system-card {
  background: #fff;
}

.admin-console .system-card.dispatch-card {
  padding: 0;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   Micro styl — Admin shared: tables, rows, cards
   ══════════════════════════════════════════════════════════ */

/* Table rows used across admin pages */
.admin-table th {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  padding: 0.3rem 0.5rem;
}
.admin-table td {
  font-size: 0.72rem;
  padding: 0.3rem 0.5rem;
}

/* Status pills — Micro everywhere */
.status-pill {
  font-size: 0.62rem;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.4;
}

/* Common admin cards with gradient */
.police-console .system-card,
.accounts-console .system-card {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 10px;
  border-color: rgba(15,23,42,0.06);
}

/* Admin page headers — Micro */
.admin-page-header h1,
.admin-page-head-row h1 {
  font-size: 1rem;
}

/* ══════════════════════════════════════════════════════════
   Micro styl — User Management
   ══════════════════════════════════════════════════════════ */
.accounts-console .accounts-head h1 {
  font-size: 0.9rem;
}
.accounts-console .accounts-head p.muted {
  font-size: 0.62rem;
}

/* ══════════════════════════════════════════════════════════
   Micro styl — Automation page
   ══════════════════════════════════════════════════════════ */
.automation-summary .status-pill {
  font-size: 0.58rem;
  padding: 1px 5px;
}
.automation-item__body {
  font-size: 0.72rem;
}
.automation-item__body .muted {
  font-size: 0.64rem;
}

/* ══════════════════════════════════════════════════════════
   Micro styl — System Logs
   ══════════════════════════════════════════════════════════ */
.system-logs-table th {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.system-logs-table td {
  font-size: 0.68rem;
}

/* ══════════════════════════════════════════════════════════
   Micro styl — Listings Manage
   ══════════════════════════════════════════════════════════ */
.listings-manage-table th {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.listings-manage-table td {
  font-size: 0.72rem;
}
.listings-manage-table .muted.tiny {
  font-size: 0.6rem;
}

/* ══════════════════════════════════════════════════════════
   Micro styl — Shared admin filter bar tighter
   ══════════════════════════════════════════════════════════ */
.admin-filter-bar {
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-color: rgba(15,23,42,0.06);
}
.admin-filter-bar__form {
  gap: 0.35rem;
}
.admin-filter-field {
  gap: 0.1rem;
  min-width: 100px;
}
.admin-filter-field > span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.admin-filter-field input,
.admin-filter-field select,
.admin-filter-field textarea {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  min-height: 24px;
  border-radius: 5px;
}
.admin-filter-field input::placeholder {
  font-size: 0.62rem;
  color: #94a3b8;
}
.admin-filter-bar__actions .btn {
  font-size: 0.68rem;
  padding: 0.18rem 0.5rem;
  min-height: 24px;
  border-radius: 5px;
}
.admin-filter-reset {
  font-size: 0.6rem;
}

/* Quick filter links — Micro */
.admin-filter-quick__link {
  font-size: 0.62rem;
  padding: 0.14rem 0.4rem;
}

/* Table card — tighter */
.admin-table-card {
  border-radius: 8px;
  margin-top: 0.5rem;
}
.admin-table {
  font-size: 0.72rem;
}
.admin-table--compact {
  font-size: 0.68rem;
}
.admin-table th {
  padding: 0.25rem 0.45rem;
  font-size: 0.6rem;
}
.admin-table td {
  padding: 0.25rem 0.45rem;
  font-size: 0.7rem;
}
.admin-code-inline {
  font-size: 0.6rem;
}

/* Eyebrow — Micro across admin */
.admin-console .eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #94a3b8;
}

/* Admin metrics row (used in user_management etc) */
.admin-metrics-row {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.admin-metrics-row .metric-card {
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  gap: 0.1rem;
}
.admin-metrics-row .metric-card .muted.small {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.admin-metrics-row .metric-card strong {
  font-size: 0.9rem;
  line-height: 1.15;
}
.admin-metrics-row .metric-card .muted.tiny {
  font-size: 0.56rem;
}

/* Automation card — Micro */
.admin-automation-card {
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  margin-top: 0.4rem;
}
.admin-automation-card__head strong {
  font-size: 0.72rem;
}
.admin-automation-card__head .muted.tiny {
  font-size: 0.6rem;
}

/* Admin head row — Micro */
.admin-page-head-row {
  gap: 0.5rem;
}
.admin-page-head-row h1 {
  font-size: 0.9rem;
  margin: 0.05rem 0 0;
}
.admin-page-head-row p.muted.small {
  font-size: 0.62rem;
}
.admin-page-head-row__links {
  gap: 0.3rem;
}
.admin-page-head-row__links .admin-nav-link {
  font-size: 0.62rem;
  padding: 0.15rem 0.35rem;
}

/* Admin user list items (user_management) */
.admin-user-row {
  font-size: 0.72rem;
}
.admin-user-row .muted.tiny {
  font-size: 0.6rem;
}

/* Admin list toolbar */
.admin-list-toolbar {
  margin-top: 0.4rem;
}
.admin-list-toolbar .btn {
  font-size: 0.62rem;
  padding: 0.12rem 0.45rem;
  min-height: 22px;
}

/* ══════════════════════════════════════════════════════════
   Micro styl — Accounts & Permissions (card layout)
   ══════════════════════════════════════════════════════════ */
.perm-console {
  max-width: 1080px;
}

/* Head meta — counter + links */
.perm-head__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  text-align: right;
}
.perm-head__counter {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.perm-head__num {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  color: #1e293b;
}
.perm-link {
  font-size: 0.62rem;
  color: #6366f1;
  text-decoration: none;
  transition: color 0.12s;
}
.perm-link:hover { color: #4338ca; text-decoration: none; }
.perm-link--reset { color: #94a3b8; font-size: 0.72rem; font-weight: 600; }
.perm-link--reset:hover { color: #ef4444; }

/* Filter */
.perm-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  padding: 0.35rem 0.55rem 0.45rem;
  align-items: flex-end;
}
.perm-filter__field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 90px;
}
.perm-filter__field > span {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.perm-filter__field input,
.perm-filter__field select {
  font-size: 0.68rem;
  padding: 0.18rem 0.35rem;
  min-height: 22px;
  border: 1px solid rgba(15,23,42,0.1);
  border-radius: 5px;
  background: #fff;
}
.perm-filter__field input::placeholder { font-size: 0.6rem; color: #94a3b8; }
.perm-filter__actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.perm-filter__actions .btn {
  font-size: 0.64rem;
  padding: 0.15rem 0.45rem;
  min-height: 22px;
}

/* ── Card list ── */
.perm-list {
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

/* Single user card */
.perm-card {
  padding: 0.35rem 0.7rem;
  border-bottom: 1px solid #d9dee5;
  transition: background 0.12s;
}
.perm-card:last-of-type { border-bottom: none; }
.perm-card:nth-child(even) { background: #f8fafc; }
.perm-card:hover:not(.perm-card--head) { background: #f1f5f9; }
.perm-card.is-dirty {
  background: #fffbeb;
  box-shadow: inset 3px 0 0 #f59e0b;
}
.perm-card--empty {
  padding: 2rem;
  text-align: center;
}

/* Grid header */
.perm-card--head {
  background: linear-gradient(135deg, #f8fafc, #eef2ff) !important;
  border-bottom: 1px solid #c9d0da;
  padding: 0.25rem 0.7rem;
}
.perm-card--head .perm-gcol {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

/* Aligned grid — 5 columns, generous widths */
.perm-grid {
  display: grid;
  grid-template-columns: minmax(130px, 1.5fr) 220px minmax(140px, 1.2fr) 120px 70px;
  gap: 0 0.7rem;
  align-items: center;
  font-size: 0.75rem;
}
.perm-gcol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.perm-gcol > span,
.perm-gcol > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Col: name — single line */
.perm-gcol--name {
  flex-direction: row;
  align-items: baseline;
  gap: 0;
}
.perm-gcol__nameline {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
}
.perm-gcol__nameline strong {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perm-gcol__nameline .muted.tiny {
  font-size: 0.68rem;
  flex-shrink: 0;
}

/* Col: pills — horizontal row */
.perm-gcol--pills {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.15rem;
  align-items: center;
}
.perm-gcol--pills .fr-pill {
  font-size: 0.56rem;
  padding: 0 6px;
  line-height: 1.55;
}

/* Tier badge */
.perm-tier-badge {
  display: inline-block;
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 6px;
  border-radius: 3px;
  line-height: 1.55;
  white-space: nowrap;
  background: #f1f5f9;
  color: #475569;
}
.perm-tier-badge--master { background: rgba(168,85,247,0.15); color: #7c3aed; }
.perm-tier-badge--admin { background: rgba(99,102,241,0.15); color: #4338ca; }
.perm-tier-badge--moderator { background: rgba(14,165,233,0.15); color: #0369a1; }
.perm-tier-badge--editor { background: rgba(16,185,129,0.15); color: #065f46; }
.perm-tier-badge--user,
.perm-tier-badge--basic { background: rgba(148,163,184,0.1); color: #94a3b8; }

/* Col: email */
.perm-gcol--email {
  font-size: 0.75rem;
  color: #475569;
}

/* Col: date — single line */
.perm-gcol--date {
  font-size: 0.72rem;
  color: #64748b;
}

/* Col: score */
.perm-gcol--score {
  font-size: 0.72rem;
  color: #64748b;
}
.perm-score-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.fr-trust__bar--sm {
  width: 36px;
  height: 3px;
  flex-shrink: 0;
}

/* Controls row — select + reason inline */
.perm-card__controls {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px dashed #e2e8f0;
}
.perm-card__select-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 0 0 auto;
}
.perm-card__select-wrap > span {
  font-size: 0.54rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
.perm-card__select-wrap select {
  font-size: 0.68rem;
  padding: 0.15rem 0.3rem;
  min-height: 22px;
  min-width: 130px;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.perm-card__select-wrap select:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
}
.perm-card__reason-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.perm-card__reason-wrap > span {
  font-size: 0.54rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
.perm-card__reason-wrap input {
  font-size: 0.66rem;
  padding: 0.15rem 0.3rem;
  min-height: 22px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 5px;
  background: #fff;
  font-family: inherit;
  width: 100%;
}
.perm-card__reason-wrap input::placeholder { font-size: 0.6rem; color: #cbd5e1; }
.perm-card__reason-wrap input:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
}

/* Save bar */
.perm-save-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-top: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border-radius: 0 0 8px 8px;
}
.perm-save-bar .btn {
  font-size: 0.66rem;
  padding: 0.18rem 0.7rem;
  min-height: 24px;
}
.perm-save-bar .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* fr-pill status colors */
.fr-pill--admin { background: rgba(99,102,241,0.15); color: #4338ca; }
.fr-pill--moderator { background: rgba(14,165,233,0.15); color: #0369a1; }
.fr-pill--user { background: rgba(148,163,184,0.12); color: #64748b; }
.fr-pill--active { background: rgba(16,185,129,0.15); color: #065f46; }
.fr-pill--suspended { background: rgba(239,68,68,0.15); color: #b91c1c; }
.fr-pill--pending { background: rgba(245,158,11,0.15); color: #92400e; }
.fr-pill--new { background: rgba(14,165,233,0.12); color: #0284c7; }
.fr-pill--bronze { background: rgba(180,83,9,0.12); color: #92400e; }
.fr-pill--silver { background: rgba(148,163,184,0.15); color: #475569; }
.fr-pill--gold { background: rgba(245,158,11,0.15); color: #92400e; }
.fr-pill--platinum { background: rgba(168,85,247,0.12); color: #7c3aed; }
.fr-pill--banned { background: rgba(127,29,29,0.15); color: #7f1d1d; }
.fr-pill--banned { background: rgba(127,29,29,0.2); color: #7f1d1d; }

/* Responsive */
@media (max-width: 900px) {
  .perm-grid {
    grid-template-columns: minmax(120px, 1.4fr) 160px minmax(120px, 1.2fr);
  }
  .perm-gcol--date,
  .perm-gcol--score { display: none; }
  .perm-card--head .perm-gcol:nth-child(4),
  .perm-card--head .perm-gcol:nth-child(5) { display: none; }
}
@media (max-width: 640px) {
  .perm-grid { grid-template-columns: 1fr auto; }
  .perm-gcol--email { display: none; }
  .perm-card--head .perm-gcol:nth-child(3) { display: none; }
  .perm-card__controls { flex-direction: column; gap: 0.25rem; }
  .perm-card__select-wrap { width: 100%; }
  .perm-card__select-wrap select { width: 100%; }
  .perm-head__meta { align-items: flex-start; text-align: left; }
}

/* ══════════════════════════════════════════════════════════
   Permission Log — clean readable layout
   ══════════════════════════════════════════════════════════ */
.permlog { max-width: 1080px; }

/* Stats row */
.permlog-stats {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.permlog-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: #f1f5f9;
  min-width: 52px;
}
.permlog-stat__num {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #1e293b;
}
.permlog-stat--up { background: rgba(16,185,129,0.1); }
.permlog-stat--up .permlog-stat__num { color: #059669; }
.permlog-stat--down { background: rgba(239,68,68,0.08); }
.permlog-stat--down .permlog-stat__num { color: #dc2626; }

/* List container */
.permlog-list {
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

/* Row grid — 5 columns, generous widths */
.permlog-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.6fr) minmax(170px, 1.5fr) minmax(120px, 2fr) minmax(120px, 1fr) 110px;
  gap: 0 0.7rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid #f1f5f9;
  align-items: center;
  font-size: 0.75rem;
}
.permlog-row--alt { background: #f8fafc; }
.permlog-row:hover:not(.permlog-row--head):not(.permlog-row--empty) {
  background: #f1f5f9;
}

/* Header */
.permlog-row--head {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border-bottom: 1px solid #e2e8f0;
  padding: 0.3rem 0.7rem;
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 0.75rem;
}
.permlog-row--head .permlog-gcol {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

/* Empty */
.permlog-row--empty {
  padding: 2rem;
  text-align: center;
  grid-column: 1 / -1;
}

/* Columns — shared */
.permlog-gcol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.permlog-gcol > span,
.permlog-gcol > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* User col */
.permlog-gcol--user strong {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}
.permlog-gcol--user .muted.tiny {
  font-size: 0.72rem;
  color: #64748b;
}

/* Change column — from → to with arrow */
.permlog-change {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.permlog-arrow {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  color: #94a3b8;
}
.permlog-arrow--up { color: #059669; }
.permlog-arrow--down { color: #dc2626; }

/* Reason */
.permlog-reason {
  font-size: 0.75rem;
  color: #475569;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* By column */
.permlog-gcol--by .muted.tiny {
  font-size: 0.72rem;
  color: #64748b;
}

/* Date column — single line */
.permlog-gcol--date {
  text-align: right;
  align-items: flex-end;
  flex-direction: row;
  gap: 0.3rem;
  justify-content: flex-end;
  font-size: 0.72rem;
  color: #64748b;
}

/* Responsive */
@media (max-width: 900px) {
  .permlog-row {
    grid-template-columns: minmax(130px, 1.4fr) minmax(140px, 1.3fr) minmax(100px, 1.6fr) 100px;
  }
  .permlog-gcol--by { display: none; }
  .permlog-row--head .permlog-gcol:nth-child(4) { display: none; }
  .permlog-stats { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .permlog-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 0.4rem;
  }
  .permlog-gcol--reason,
  .permlog-gcol--date { display: none; }
  .permlog-row--head .permlog-gcol:nth-child(3),
  .permlog-row--head .permlog-gcol:nth-child(5) { display: none; }
}

/* ══════════════════════════════════════════════
   Admin Dispatch Card — Micro styl
   ══════════════════════════════════════════════ */
.dispatch-card {
  background: linear-gradient(170deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(15,23,42,0.07);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}

/* ── Header strip ── */
.dispatch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: #334155;
  color: #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
}
.dispatch-header__left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dispatch-header__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
}
.dispatch-header__expand {
  color: rgba(255,255,255,0.45);
  display: inline-flex;
  align-items: center;
  transition: color 0.12s;
  text-decoration: none;
}
.dispatch-header__expand:hover {
  color: #fff;
}
.dispatch-fullscreen-wrap {
  padding: 0;
}
.dispatch-fullscreen .dispatch-card {
  border-radius: 0;
  min-height: calc(100vh - var(--site-header-height, 72px) - var(--catalog-bar-height, 0px));
}
.dispatch-header__right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
}
.dispatch-header__right .muted.tiny { color: #94a3b8; }
.dispatch-header__right strong { color: #e2e8f0; font-weight: 600; }
.dispatch-sep { color: #475569; font-size: 0.6rem; }
.dispatch-refresh-label { display: inline-block; width: 24px; text-align: right; }
.dispatch-header .admin-refresh {
  width: 40px;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.dispatch-header .admin-refresh span {
  display: block;
  height: 100%;
  background: #3b82f6;
  transform-origin: left;
  transition: transform 0.25s linear;
}
.dispatch-header .status-pill {
  font-size: 0.58rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(34,197,94,0.2);
  color: #22c55e;
  font-weight: 600;
}
.dispatch-header .status-pill.is-warning {
  background: rgba(245,158,11,0.2);
  color: #f59e0b;
}

/* ── Donut gauges ── */
.dispatch-donuts {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.75rem 1rem 0.25rem;
}

.dispatch-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.dispatch-donut-svg {
  width: 80px;
  height: 80px;
}

.dispatch-donut-arc {
  transition: stroke-dasharray 0.8s ease, stroke 0.4s ease;
}

.dispatch-donut-pct {
  font-size: 16px;
  font-weight: 700;
  fill: #0f172a;
}

.dispatch-donut-label {
  font-size: 7.5px;
  fill: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dispatch-donut-sub {
  font-size: 0.62rem;
  color: #64748b;
}

.dispatch-donut-sub strong {
  font-weight: 600;
  color: #334155;
}

/* ── Metric grid ── */
.dispatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 8px 12px 4px;
  border-top: 1px solid rgba(15,23,42,0.06);
}
.dispatch-section {
  flex: 1 1 180px;
  min-width: 0;
  padding: 4px 6px 6px;
}
.dispatch-section__label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 0 0 4px 2px;
}
.dispatch-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
.dispatch-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 8px 4px;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.dispatch-metric:hover {
  border-color: rgba(15,23,42,0.15);
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.dispatch-metric__val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}
.dispatch-metric__label {
  font-size: 0.62rem;
  color: #94a3b8;
  white-space: nowrap;
  margin-top: 2px;
}

/* Live pulse dot on metric */
.dispatch-metric--live {
  border-color: rgba(37,99,235,0.15);
}
.dispatch-metric--live .dispatch-metric__val {
  color: #2563eb;
}

/* Warning state */
.dispatch-metric--warn .dispatch-metric__val {
  color: #f59e0b;
}

/* Alert state (reports pending) */
.dispatch-metric--alert {
  border-color: rgba(220,38,38,0.15);
  background: rgba(254,242,242,0.5);
}
.dispatch-metric--alert .dispatch-metric__val {
  color: #dc2626;
}

/* Flash animation on value change */
.dispatch-metric--flash {
  animation: dispatchFlash 0.5s ease;
}
@keyframes dispatchFlash {
  0% { background: #dbeafe; }
  100% { background: #fff; }
}

/* ── Charts row ── */
.dispatch-charts {
  display: flex;
  gap: 1px;
  padding: 6px 12px 10px;
  flex-wrap: wrap;
}
.dispatch-chart-panel {
  flex: 2 1 260px;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 6px;
  padding: 6px 8px;
}
.dispatch-chart-panel--small {
  flex: 1 1 120px;
}
.dispatch-chart-panel__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.dispatch-chart-panel__title {
  font-size: 0.65rem;
  font-weight: 600;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dispatch-chart-buckets {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.dispatch-bucket {
  font-size: 0.55rem;
  padding: 1px 5px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 3px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.12s;
}
.dispatch-bucket:hover { background: #f1f5f9; }
.dispatch-bucket.is-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.dispatch-chart-panel__wrap {
  position: relative;
}
.dispatch-chart-panel__wrap canvas {
  width: 100%;
  display: block;
}
.dispatch-chart-tooltip {
  position: absolute;
  top: -2px;
  padding: 2px 6px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}

/* ── Spark bars (registrations / activity) ── */
.dispatch-sparkbars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3px;
  height: 58px;
  padding-top: 4px;
}
.dispatch-sparkbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.dispatch-sparkbar__bar {
  width: 100%;
  max-width: 18px;
  min-height: 2px;
  background: #2563eb;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}
.dispatch-sparkbar__bar--green {
  background: #22c55e;
}
.dispatch-sparkbar__label {
  font-size: 0.5rem;
  color: #94a3b8;
  text-transform: uppercase;
}

/* ── Tier distribution ── */
.dispatch-tier-dist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}
.dispatch-tier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 4px;
  font-size: 0.62rem;
}
.dispatch-tier-row__label {
  color: #64748b;
}
.dispatch-tier-row__val {
  font-weight: 700;
  color: #334155;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .dispatch-header { flex-direction: column; align-items: flex-start; }
  .dispatch-grid { flex-direction: column; }
  .dispatch-charts { flex-direction: column; }
}

/* ===== Print overlay (listing detail) ===== */
#print-overlay {
  display: none;
}
body.is-printing #print-overlay {
  display: block;
}

@media print {
  body > *:not(#print-overlay) { display: none !important; }
  body.is-printing #print-overlay { display: block !important; }

  @page { margin: 12mm 10mm; }

  #print-overlay {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b; line-height: 1.5; font-size: 10pt;
  }

  /* Header */
  #print-overlay .p-header {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid #cbd5e1; padding-bottom: 10px; margin-bottom: 14px;
  }
  #print-overlay .p-header__brand {
    display: flex; align-items: center; gap: 8px;
  }
  #print-overlay .p-header__brand img { height: 28px; }
  #print-overlay .p-header__name {
    font-size: 14pt; font-weight: 700; color: #1e293b;
  }
  #print-overlay .p-url { font-size: 7.5pt; color: #94a3b8; }

  /* Cards */
  #print-overlay .p-card {
    background: #fff; border: 1px solid #d1d5db;
    border-radius: 10px; padding: 14px 16px;
    margin-bottom: 10px;
    break-inside: avoid;
  }

  /* Two-column layout: left = title/specs, right = price/detail/vendor */
  #print-overlay .p-columns {
    display: flex; gap: 10px; margin-bottom: 10px;
  }
  #print-overlay .p-col-left { flex: 1; min-width: 0; }
  #print-overlay .p-col-left > .p-card { margin-bottom: 0; }
  #print-overlay .p-col-right {
    flex: 0 0 220px; display: flex; flex-direction: column; gap: 10px;
  }
  #print-overlay .p-col-right > .p-card { margin-bottom: 0; }
  #print-overlay .p-card--price {
    display: flex; align-items: center; justify-content: center;
    background: #dcfce7 !important; border-color: #bbf7d0;
    border-radius: 10px; padding: 14px 20px;
  }

  #print-overlay .p-title {
    font-size: 14pt; font-weight: 700; margin: 0 0 4px;
  }
  #print-overlay .p-summary {
    font-size: 9.5pt; color: #475569; margin: 0 0 10px;
    line-height: 1.5;
  }
  #print-overlay .p-price {
    font-size: 15pt; font-weight: 700; color: #1e293b;
    white-space: nowrap;
  }

  /* Meta table */
  #print-overlay .p-meta {
    border-collapse: collapse; font-size: 9pt; width: 100%;
  }
  #print-overlay .p-meta td {
    padding: 3px 0; border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
  }
  #print-overlay .p-meta .pl {
    font-weight: 600; color: #475569;
    white-space: nowrap; padding-right: 14px; width: 1%;
  }

  /* Gallery grid — all same size */
  #print-overlay .p-gallery {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  #print-overlay .pg-item img {
    width: 100%; height: 100px;
    object-fit: cover; border-radius: 6px; display: block;
  }

  /* Description */
  #print-overlay .p-label {
    font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.05em;
    color: #64748b; font-weight: 600; margin-bottom: 6px;
  }
  #print-overlay .p-desc {
    font-size: 9.5pt; line-height: 1.65; color: #334155;
  }
  #print-overlay .p-desc p { margin: 0 0 6px; }
  #print-overlay .p-desc br + br { display: none; }

  /* Footer */
  #print-overlay .p-footer {
    border-top: 1px solid #e2e8f0; padding-top: 8px; margin-top: 12px;
    font-size: 7pt; color: #94a3b8;
    display: flex; justify-content: space-between;
  }
}