/* Page-specific styles */
.page-section--catalog {
    padding-top: var(--space-md);
    padding-bottom: var(--space-xl);
}

.catalog-toolbar-sentinel {
    height: 0;
    margin: 0;
    pointer-events: none;
}

.catalog-toolbar {
    --catalog-toolbar-pad-x: 0px;
    position: sticky;
    top: calc(56px + env(safe-area-inset-top, 0px));
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 var(--space-md);
    padding: var(--space-xs) 0;
    background: transparent;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pinned: same glass chrome as .nav – one continuous bar */
.catalog-toolbar.is-pinned {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

.catalog-toolbar.is-pinned::before {
    content: '';
    position: absolute;
    /* Tuck 1px under nav to erase the double hairline */
    top: -1px;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    z-index: 1;
    pointer-events: none;
    background: var(--nav-bg);
    backdrop-filter: blur(var(--nav-blur, 16px)) saturate(var(--nav-saturate, 1.2));
    -webkit-backdrop-filter: blur(var(--nav-blur, 16px)) saturate(var(--nav-saturate, 1.2));
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 10px 32px -24px rgba(7, 10, 20, 0.7);
}

.catalog-toolbar.is-pinned::after {
    content: '';
    position: absolute;
    top: -1px;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, transparent 42%);
    opacity: 0.55;
}

html[data-theme="dark"] .catalog-toolbar.is-pinned::after,
html.dark-theme .catalog-toolbar.is-pinned::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 48%);
    opacity: 0.35;
}

/* Same aurora as .nav – visible only while the search chrome is pinned */
.catalog-toolbar > .nav-glow {
    top: -1px;
    bottom: 0;
    left: calc(50% - 50vw);
    right: auto;
    width: 100vw;
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.catalog-toolbar.is-pinned > .nav-glow {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-toolbar > .nav-glow {
        transition: none;
    }
}

/* When catalog chrome is pinned, drop nav bottom edge so surfaces merge */
body.catalog-toolbar-is-pinned .nav {
    border-bottom-color: transparent;
}

body.catalog-toolbar-is-pinned .nav::before {
    box-shadow: none;
    inset: 0 0 0 0;
}

.catalog-toolbar.catalog-toolbar--hidden {
    transform: translateY(calc(-100% - 56px - env(safe-area-inset-top, 0px)));
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-toolbar {
        transition: none;
    }
}

.catalog-toolbar__bar {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--space-xs);
    min-width: 0;
    position: relative;
    z-index: 2;
}

.catalog-toolbar__bar > .search-suggest,
.catalog-toolbar__bar > .search-bar {
    flex: 1 1 auto;
    min-width: 0;
}

.catalog-toolbar__bar > .catalog-filters-toggle {
    flex: 0 0 auto;
}

.catalog-toolbar .search-bar--icon-submit {
    gap: 0;
}

.catalog-toolbar .search-bar__field input {
    padding-left: var(--space-md);
    padding-right: 2.75rem;
}

/* Pinned: frosted field so placeholder/value read on nav glass + aurora */
.catalog-toolbar.is-pinned .search-bar__field input {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, transparent 58%),
        color-mix(in srgb, var(--glass-hover) 72%, rgba(255, 255, 255, 0.55));
    border-color: color-mix(in srgb, var(--text) 10%, var(--glass-border));
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 1px 2px rgba(7, 10, 20, 0.06);
}

.catalog-toolbar.is-pinned .search-bar__field input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.catalog-toolbar.is-pinned .search-bar__field input:focus {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, transparent 58%),
        color-mix(in srgb, var(--glass-hover) 88%, #fff);
    border-color: color-mix(in srgb, var(--blue) 35%, var(--glass-border));
}

html[data-theme="dark"] .catalog-toolbar.is-pinned .search-bar__field input,
html.dark-theme .catalog-toolbar.is-pinned .search-bar__field input {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 55%),
        rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .catalog-toolbar.is-pinned .search-bar__field input:focus,
html.dark-theme .catalog-toolbar.is-pinned .search-bar__field input:focus {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
        rgba(255, 255, 255, 0.14);
    border-color: color-mix(in srgb, var(--blue) 40%, rgba(255, 255, 255, 0.2));
}

.catalog-toolbar .search-bar__field:has(.search-bar__clear:not([hidden])) input {
    padding-right: 5rem;
}

.catalog-toolbar .search-bar__clear {
    right: 2.5rem;
}

.catalog-toolbar .search-bar__submit--icon {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.catalog-toolbar .search-bar__submit--icon:hover {
    background: var(--glass-hover);
    color: var(--text);
}

.catalog-toolbar .search-bar__submit--icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.catalog-filters-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.catalog-filters-toggle:hover,
.catalog-filters-toggle.is-active,
.catalog-filters-toggle[aria-expanded="true"] {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.catalog-filters-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.catalog-filters-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: var(--fw-label);
    font-variant-numeric: tabular-nums;
}

.catalog-filters-toggle__count[hidden] {
    display: none !important;
}

/*
 * Filters popover – fixed to viewport (not inside sticky).
 * Visibility ONLY via .is-open; never use HTML [hidden] here:
 * UA [hidden]{display:none!important} beats author !important on mobile.
 */
.catalog-filters {
    display: none;
    position: fixed;
    left: 16px;
    right: 16px;
    top: 112px;
    z-index: 1200;
    max-height: 50vh;
    max-height: 50dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--space-sm);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--popup-bg);
    color: var(--popup-text, var(--text));
    box-shadow: var(--shadow);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.catalog-filters.is-open {
    display: block;
}

.catalog-filters__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.catalog-filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.catalog-filter-tabs::-webkit-scrollbar {
    display: none;
}

.catalog-filter-tab {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    padding: 0.45rem 0.7rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.catalog-filter-tab + .catalog-filter-tab::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: color-mix(in srgb, var(--text) 14%, transparent);
    pointer-events: none;
}

.catalog-filter-tab:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

.catalog-filter-tab[aria-selected="true"] {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 8%, transparent);
    font-weight: var(--fw-ui-strong);
}

.catalog-filter-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.catalog-filter-tab:disabled,
.catalog-filter-tab--soon {
    opacity: 0.42;
    cursor: default;
}

.catalog-filter-tab:disabled:hover,
.catalog-filter-tab--soon:hover {
    color: var(--text-muted);
    background: transparent;
}

.catalog-filter-panel {
    min-height: 2.5rem;
}

.catalog-filter-panel[hidden] {
    display: none !important;
}

.catalog-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    min-width: 0;
}

.catalog-filter-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 0;
    padding: 0.4rem 0.65rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.catalog-filter-option:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

.catalog-filter-option:has(:focus-visible),
.catalog-filter-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.catalog-filter-option:has(input:checked),
.catalog-filter-option.is-selected {
    color: var(--text);
    background: color-mix(in srgb, var(--blue) 14%, transparent);
    font-weight: var(--fw-ui-medium);
}

.catalog-filter-option__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.catalog-filter-option__text {
    min-width: 0;
    text-decoration: none;
}

.catalog-filter-option--more {
    appearance: none;
    -webkit-appearance: none;
}

.filter-row {
    --filter-label-width: 6.75rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    align-items: start;
    min-width: 0;
}

.filter-row__label {
    margin: 0;
    padding-top: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.3;
}

@media (min-width: 560px) {
    .filter-row {
        grid-template-columns: var(--filter-label-width) minmax(0, 1fr);
        gap: var(--space-2xs) var(--space-md);
    }

    .filter-row__label {
        padding-top: 0.55rem;
    }
}

.catalog-main {
    min-width: 0;
}

/* Legacy fieldset filters (other pages / demos) */
.filter-form {
    display: grid;
    gap: var(--space-md);
}

.filter-group {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.filter-group legend {
    font-size: var(--text-xs);
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
    padding: 0;
}

.modal--genres {
    width: min(100%, 720px);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: min(90vh, 720px);
    max-height: min(90dvh, 720px);
    overflow: hidden;
    padding-bottom: var(--space-lg);
}

.genre-picker__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
    padding-right: var(--space-lg);
}

.genre-picker__header h2 {
    margin: 0;
    font-size: var(--text-xl);
}

.genre-picker__meta {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.genre-picker__search {
    width: 100%;
}

.genre-picker__search input {
    width: 100%;
}

.genre-picker__chips {
    align-content: start;
    max-height: min(52vh, 420px);
    max-height: min(52dvh, 420px);
    overflow-y: auto;
    padding: var(--space-2xs);
    margin: 0;
}

.genre-picker__chip .filter-chip__text {
    white-space: normal;
    overflow-wrap: anywhere;
}

.genre-picker__count {
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-medium);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.genre-picker__chip:has(input:checked) .genre-picker__count {
    color: inherit;
    opacity: 0.75;
}

.genre-picker__empty {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.genre-picker__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-2xs);
}

html.modal-open,
html.modal-open body {
    overflow: hidden;
}

.catalog-results__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr));
    gap: var(--space-md) var(--space-sm);
}

#loadMore,
.catalog-load-more {
    margin-top: var(--space-lg);
}

#loadMore.htmx-request,
.catalog-load-more.htmx-request {
    opacity: 0.55;
    pointer-events: none;
}

.catalog-load-skeletons.htmx-indicator {
    display: none;
    margin-top: var(--space-sm);
}

.catalog-load-skeletons.htmx-indicator.htmx-request {
    display: grid;
}

.work-card--skeleton {
    pointer-events: none;
    box-shadow: none;
}

.work-card--skeleton:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.work-card--skeleton .skeleton-cover {
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 0;
}

.work-card--skeleton .skeleton-text {
    max-width: 100%;
}

.work-card--skeleton .work-card__body {
    padding-top: var(--space-sm);
}

.work-card--skeleton .skeleton-btn {
    width: calc(100% - 2 * var(--space-sm));
    height: 36px;
    margin: 0 var(--space-sm) var(--space-sm);
    border-radius: var(--radius-sm);
}

.catalog-empty {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: var(--text-base);
    padding: var(--space-xl) 0;
    text-align: center;
}

/* Catalog work card – cover-forward, quiet chrome */
.work-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    border-radius: calc(var(--radius) + 2px);
    padding: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.work-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: color-mix(in srgb, var(--glass-bg) 88%, #fff);
    transition: background var(--transition-normal);
}

html[data-theme="dark"] .work-card::before,
html.dark-theme .work-card::before {
    background: var(--glass-bg);
}

.work-card:hover {
    border-color: color-mix(in srgb, var(--text) 14%, transparent);
    box-shadow: 0 14px 36px -22px rgba(16, 24, 40, 0.28);
}

@media (hover: hover) and (pointer: fine) {
    .work-card:hover {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-card,
    .work-card__media .cover--card,
    .work-card__link > .cover--card {
        transition: none;
    }

    .work-card:hover {
        transform: none;
    }
}

.work-card:hover::before {
    background: var(--glass-hover);
}

.work-card.is-selected {
    border-color: color-mix(in srgb, var(--blue) 28%, var(--glass-border));
    box-shadow: 0 12px 30px -20px var(--glass-shadow);
}

.work-card.is-selected::before {
    background: color-mix(in srgb, var(--blue-light) 45%, var(--glass-bg));
}

.work-card--in-cart {
    border-color: color-mix(in srgb, var(--btn-primary-bg) 28%, var(--glass-border));
}

.work-card--in-cart::before {
    background: color-mix(in srgb, var(--btn-primary-light) 55%, var(--glass-bg));
}

.work-card__link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    flex: 1;
}

.work-card__link:hover .work-card__title {
    color: var(--blue);
}

.work-card__media {
    display: block;
    width: 100%;
    margin: 0;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 0;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.work-card__media .cover,
.work-card__media .cover--card,
.work-card__link > .cover,
.work-card__link > .cover--card {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: none;
    border-radius: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .work-card:hover .work-card__media .cover--card,
    .work-card:hover .work-card__link > .cover--card {
        transform: scale(1.035);
    }
}

.work-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    padding: var(--space-sm) var(--space-sm) var(--space-xs);
}

.work-card__title {
    font-size: var(--text-base);
    font-weight: var(--fw-ui-strong);
    letter-spacing: -0.015em;
    line-height: 1.28;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    transition: color 0.18s ease;
}

.work-card__author {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
    min-width: 0;
    margin-top: var(--space-xs);
}

.work-card__genre {
    min-width: 0;
    max-width: 62%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui);
    line-height: 1.3;
    color: var(--text-dim);
    letter-spacing: 0.01em;
}

/* Legacy badge genres (tour demo / older markup) still look quiet */
.work-card__genre.badge {
    display: inline-flex;
    max-width: 62%;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-dim);
    font-size: var(--text-xs);
    font-weight: var(--fw-ui);
}

.work-card__link .cover--card.cover--placeholder svg,
.work-card__media .cover--card.cover--placeholder svg {
    width: 36px;
    height: 36px;
}

.work-card__actions {
    margin-top: 0;
    padding: 0 var(--space-sm) var(--space-sm);
}

.work-card__actions .btn-block,
.work-card__actions form {
    width: 100%;
}

.work-card__actions .btn-primary {
    box-shadow: none;
}

@media (min-width: 641px) {
    .work-card__actions .btn-sm {
        min-height: 34px;
        height: 34px;
        padding: 0 var(--space-sm);
        font-size: var(--text-sm);
        border-radius: var(--radius-sm);
    }
}

.work-card__price {
    flex-shrink: 0;
    margin-left: auto;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-medium);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Inline work detail (catalog grid) */
/* Work quick-view: fixed overlay + elevated card */
.work-inline-slot {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    padding: max(var(--space-md), env(safe-area-inset-top, 0px))
        max(var(--space-md), env(safe-area-inset-right, 0px))
        max(var(--space-md), env(safe-area-inset-bottom, 0px))
        max(var(--space-md), env(safe-area-inset-left, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(15, 12, 20, 0.55);
    justify-content: center;
    align-items: flex-start;
}

@media (hover: hover) and (pointer: fine) {
    .work-inline-slot {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        background: rgba(15, 12, 20, 0.5);
    }
}

.work-inline-slot:not([hidden]) {
    display: flex;
}

.work-inline-slot[hidden] {
    display: none !important;
}

.work-inline-slot.htmx-request:empty::after,
.work-inline-slot.htmx-request:not(:has(.work-inline-frame))::after {
    content: '';
    display: block;
    width: min(100%, 42rem);
    height: min(70vh, 28rem);
    margin: min(8vh, 4rem) auto;
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--popup-bg) 88%, transparent) 25%,
        color-mix(in srgb, var(--popup-bg) 70%, var(--border-light)) 50%,
        color-mix(in srgb, var(--popup-bg) 88%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
    box-shadow: var(--shadow);
}

.work-inline-frame {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
    width: min(100%, 56rem);
    margin: min(4vh, 1.25rem) auto min(6vh, 2.5rem);
    animation: modalIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-inline {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    box-shadow: var(--shadow);
}

.work-inline::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--popup-bg);
}

/* Sits just above the card, right-aligned – travels with the article */
.work-inline__close {
    z-index: 3;
    align-self: flex-end;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--popup-bg);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.work-inline__close:hover {
    background: color-mix(in srgb, var(--popup-bg) 88%, var(--text));
    border-color: color-mix(in srgb, var(--text) 14%, var(--glass-border));
    color: var(--text);
}

.work-inline__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--blue-light);
}

.work-inline .product-layout {
    padding: 0;
}

.work-inline .product-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

.work-inline .contributors-accordion--compact {
    margin-top: 0;
}

@media (max-width: 640px) {
    .work-inline-frame {
        margin-top: var(--space-sm);
        gap: var(--space-xs);
    }

    .work-inline__close {
        box-sizing: border-box;
        width: 2.5rem;
        height: 2.5rem;
        min-height: 2.5rem;
        padding: 0;
        gap: 0;
        border-radius: var(--radius-sm);
        align-self: flex-end;
    }

    .work-inline__close-label {
        display: none;
    }

    .work-inline {
        padding: var(--space-md);
    }

    .work-card__body {
        padding: var(--space-xs) var(--space-xs) var(--space-2xs);
    }

    .work-card__actions {
        padding: 0 var(--space-xs) var(--space-xs);
    }

    .work-card__title {
        font-size: var(--text-sm);
    }

    .work-card__author {
        font-size: var(--text-xs);
    }

    .catalog-toolbar__bar {
        gap: 0.25rem;
    }

    .catalog-filters-toggle {
        padding: 0 0.55rem;
        font-size: var(--text-xs);
    }

    .catalog-toolbar .search-bar__field input {
        font-size: 16px; /* prevent iOS/Yandex zoom-on-focus */
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-inline-frame {
        animation: none;
    }

    .work-inline-slot.htmx-request:empty::after,
    .work-inline-slot.htmx-request:not(:has(.work-inline-frame))::after {
        animation: none;
    }
}

.cover {
    display: block;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--surface);
}

.cover--card {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: 0;
    object-fit: cover;
}

.cover--detail {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1;
    border-radius: calc(var(--radius) - 2px);
    border: none;
    box-shadow: 0 12px 28px -18px var(--glass-shadow);
}

.cover--thumb { width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; }

.cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    background: var(--surface);
}

.cover--placeholder svg {
    width: 22px;
    height: 22px;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-weight: var(--fw-label);
}

.avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.avatar--md { width: 40px; height: 40px; font-size: 14px; }
.avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.avatar--placeholder { border: 1px solid var(--border-light); }

.recommendations-block { margin-bottom: var(--space-xl); }

.popular-slider {
    --popular-fade-size: 56px;
    margin-bottom: calc(var(--space-xl) + var(--space-2xs));
}

.popular-slider__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.popular-slider__heading {
    min-width: 0;
}

.popular-slider__title {
    margin: 0;
    font-size: var(--text-xl);
    letter-spacing: -0.02em;
}

.popular-slider__lede {
    margin: 4px 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.35;
}

.popular-slider__nav {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
    padding-bottom: 2px;
}

.popular-slider__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--glass-bg) 80%, #fff);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.popular-slider__btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--text) 18%, transparent);
    background: var(--glass-hover);
    color: var(--text);
}

.popular-slider__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.popular-slider__btn:disabled {
    opacity: 0.32;
    cursor: default;
}

.popular-slider__viewport {
    position: relative;
}

.popular-slider.is-start .popular-slider__viewport,
.popular-slider.is-end .popular-slider__viewport,
.popular-slider.is-start.is-end .popular-slider__viewport {
    -webkit-mask-image: none;
    mask-image: none;
}

/* Soft edge fades only on fine pointers / wider viewports – masks glitch on Yandex Android */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .popular-slider__viewport {
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 var(--popular-fade-size),
            #000 calc(100% - var(--popular-fade-size)),
            transparent 100%
        );
        mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 var(--popular-fade-size),
            #000 calc(100% - var(--popular-fade-size)),
            transparent 100%
        );
    }

    .popular-slider.is-start .popular-slider__viewport {
        -webkit-mask-image: linear-gradient(
            90deg,
            #000 0,
            #000 calc(100% - var(--popular-fade-size)),
            transparent 100%
        );
        mask-image: linear-gradient(
            90deg,
            #000 0,
            #000 calc(100% - var(--popular-fade-size)),
            transparent 100%
        );
    }

    .popular-slider.is-end .popular-slider__viewport {
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 var(--popular-fade-size),
            #000 100%
        );
        mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 var(--popular-fade-size),
            #000 100%
        );
    }

    .popular-slider.is-start.is-end .popular-slider__viewport {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.popular-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(68vw, 168px), 196px);
    gap: var(--space-md);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: var(--space-2xs) 2px calc(var(--space-sm) + 4px);
    margin: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.popular-slider__track::-webkit-scrollbar {
    display: none;
}

.popular-slider__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.popular-slide {
    scroll-snap-align: start;
    height: 100%;
    animation: popular-fade-in 0.45s ease both;
}

.popular-slide:nth-child(2) { animation-delay: 0.04s; }
.popular-slide:nth-child(3) { animation-delay: 0.08s; }
.popular-slide:nth-child(4) { animation-delay: 0.12s; }
.popular-slide:nth-child(5) { animation-delay: 0.16s; }
.popular-slide:nth-child(6) { animation-delay: 0.2s; }

@keyframes popular-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .popular-slider {
        --popular-fade-size: 72px;
    }

    .popular-slider__track {
        grid-auto-columns: minmax(188px, 220px);
        gap: var(--space-md);
        padding-inline: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popular-slide {
        animation: none;
    }

    .popular-slider__track {
        scroll-behavior: auto;
    }
}

/* Product detail */
.product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.product-layout.panel:hover {
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm);
}

.product-media {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
}

.product-media__cover {
    position: relative;
    width: 100%;
    max-width: 220px;
    margin-inline: auto;
    line-height: 0;
}

.product-media__cover .cover--detail {
    max-width: none;
    width: 100%;
}

.product-authors {
    min-width: 0;
    width: 100%;
}

.product-authors:not(:has(.contributors-accordion)) {
    display: none;
}

/* Mobile: authors sit in product-info after chips. Desktop: under cover. */
.product-authors--under-cover {
    display: none;
}

.product-authors--in-info {
    display: block;
}

.product-authors--in-info:not(:has(.contributors-accordion)) {
    display: none;
}

.music-player{
    width: 100%;
    max-width: 200px;
}

.product-media__cover .music-player--yandex {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    width: 50px;
    max-width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 14px -6px var(--glass-shadow);
    background: var(--popup-bg);
}

.music-player__frame{
    display: block;
    width: 100%;
    border: none;
    border-radius: 10px;
    vertical-align: top;
}

.music-player__frame--yandex {
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

.music-player__frame--apple {
    height: 175px;
    max-width: 660px;
    overflow: hidden;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
    width: 100%;
}

.product-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    text-align: center;
}

.product-artist {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1.4;
    color: var(--blue);
    letter-spacing: 0.01em;
}

.product-info .product-title {
    margin: 0;
    font-size: clamp(1.35rem, 4.5vw, 1.75rem);
    font-weight: var(--fw-label);
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
    text-wrap: balance;
}

.product-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs) var(--space-sm);
}

.product-type-chip {
    margin: 0;
}

.product-genre {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1.35;
    color: var(--text-muted);
}

.product-licensor-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
    max-width: 100%;
    color: var(--text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1.35;
    transition: color var(--transition-fast);
}

.product-licensor-link:hover {
    color: var(--blue);
}

.product-licensor-link:hover .product-licensor-link__name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.product-licensor-link__avatar {
    display: inline-flex;
    flex-shrink: 0;
}

.product-licensor-link__avatar .avatar--sm {
    width: 22px;
    height: 22px;
    font-size: 10px;
}

.product-licensor-link__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue);
    font-size: 10px;
    font-weight: var(--fw-label);
    line-height: 1;
}

.product-licensor-link__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.licensor-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: calc(var(--radius) + 2px);
    background: color-mix(in srgb, var(--glass-bg) 90%, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

html[data-theme="dark"] .licensor-card,
html.dark-theme .licensor-card {
    background: var(--glass-bg);
}

.licensor-card__identity {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.licensor-card__avatar {
    display: inline-flex;
    flex-shrink: 0;
}

.licensor-card__avatar .avatar--md {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.licensor-card__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue);
    font-size: var(--text-lg);
    font-weight: var(--fw-label);
    line-height: 1;
}

.licensor-card__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.licensor-card__eyebrow {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1.2;
}

.licensor-card__name {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--fw-ui-strong);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.licensor-card__meta {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.licensor-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.licensor-card__reset {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.18s ease;
}

.licensor-card__reset:hover {
    color: var(--blue);
}

.product-cta {
    margin: 0;
    padding: 0;
}

.product-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.product-block__title {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-strong);
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.product-desc {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
    order: 5;
    text-align: center;
    white-space: pre-line;
}

.license-picks {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.license-picks--readonly {
    gap: 0;
    margin: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    overflow: visible;
}

.license-pick {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    cursor: pointer;
    min-height: 56px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.license-pick:hover:not(.is-in-cart) {
    border-color: color-mix(in srgb, var(--text) 12%, var(--border));
    background: var(--glass-hover);
}

.license-pick.is-checked {
    border-color: color-mix(in srgb, var(--blue) 24%, var(--border));
    background: var(--blue-light);
    box-shadow: none;
}

.license-pick.is-in-cart {
    cursor: default;
    opacity: 0.85;
    background: var(--green-light);
    border-color: transparent;
}

.license-pick.is-checked .license-pick__control {
    background: var(--blue);
    border-color: var(--blue);
}

.license-pick.is-checked .license-pick__icon {
    opacity: 1;
    transform: scale(1);
}

.license-pick.is-in-cart .license-pick__control {
    background: var(--green);
    border-color: var(--green);
}

.license-pick.is-in-cart .license-pick__icon {
    opacity: 1;
    transform: scale(1);
}

.license-pick.is-readonly {
    display: block;
    grid-template-columns: none;
    gap: 0;
    min-height: 0;
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: default;
    pointer-events: auto;
    user-select: text;
}

.license-pick.is-readonly:last-child {
    border-bottom: none;
}

.license-pick.is-readonly:hover {
    border-color: transparent;
    border-bottom-color: var(--border-light);
    background: transparent;
    box-shadow: none;
}

.license-pick.is-readonly.is-openable:hover {
    background: color-mix(in srgb, var(--blue-light) 55%, transparent);
}

.license-pick__open {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.license-pick__open:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.license-pick__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.25em;
    height: 1.25em;
    margin-left: 0.2em;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--blue) 55%, transparent);
    border-radius: 50%;
    /* Override UA <sup> (font-size: smaller + vertical-align: super). */
    font-size: 0.72em;
    font-weight: var(--fw-ui-strong);
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    vertical-align: 0.15em;
    color: var(--blue);
    opacity: 0.9;
}

.license-pick__main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.license-pick__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--space-sm);
    row-gap: 0.2rem;
    min-width: 0;
    max-width: 100%;
}

.license-pick.is-readonly .license-pick__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--space-sm);
    row-gap: 0.25rem;
}

.license-pick.is-readonly .license-pick__title {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.license-pick.is-readonly .license-pick__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    min-width: 0;
    max-width: 100%;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.35;
}

.license-pick__term {
    white-space: nowrap;
}

.license-territory {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.35rem;
    padding: 0 0.4rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-muted);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.license-territory--group {
    cursor: pointer;
    color: var(--blue);
    border-color: var(--border-light);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.license-territory--group:hover {
    background: var(--blue-light);
}

.license-pick.is-readonly .license-pick__price {
    margin-left: 0;
    max-width: 100%;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-strong);
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
    text-align: right;
    justify-self: end;
}

.license-pick__title {
    font-weight: var(--fw-ui-medium);
    font-size: var(--text-base);
    line-height: 1.3;
}

.license-pick__meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.license-pick__price {
    font-size: var(--text-lg);
    font-weight: var(--fw-label);
    color: var(--badge-text);
    white-space: nowrap;
}

.way-legal-source {
    display: none !important;
}

.way-legal-dialog {
    position: fixed;
    inset: 0;
    width: min(calc(100vw - 2rem), 560px);
    max-width: calc(100vw - 2 * max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
    max-height: min(85vh, 640px);
    max-height: min(85dvh, 640px);
    margin: auto;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
}

.way-legal-dialog::backdrop {
    background: rgba(15, 12, 20, 0.55);
    animation: wayLegalBackdropIn 0.22s ease-out;
}

.way-legal-dialog[open] .way-legal-dialog__panel {
    animation: modalIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes wayLegalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .way-legal-dialog::backdrop,
    .territory-dialog::backdrop,
    .way-legal-dialog[open] .way-legal-dialog__panel,
    .territory-dialog[open] .territory-dialog__panel {
        animation: none;
    }
}

.way-legal-dialog__panel {
    position: relative;
    width: 100%;
    max-height: inherit;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--popup-bg);
    color: var(--popup-text);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.way-legal-dialog__header {
    margin-bottom: var(--space-md);
    padding-right: var(--space-xl);
}

.way-legal-dialog__eyebrow {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-xs);
    font-weight: var(--fw-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim, var(--text-muted));
}

.way-legal-dialog__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--fw-ui-strong);
    line-height: 1.3;
}

.way-legal-dialog__meta {
    margin: var(--space-2xs) 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

.way-legal-dialog__close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.way-legal-dialog__body {
    display: grid;
    gap: var(--space-sm);
}

.way-legal-dialog__body p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
}

.way-legal-dialog__empty {
    color: var(--text-muted);
}

.territory-dialog {
    position: fixed;
    inset: 0;
    width: min(calc(100vw - 2rem), 360px);
    max-width: calc(100vw - 2 * max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
    max-height: min(70vh, 480px);
    max-height: min(70dvh, 480px);
    margin: auto;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
}

.territory-dialog::backdrop {
    background: rgba(15, 12, 20, 0.55);
    animation: wayLegalBackdropIn 0.22s ease-out;
}

.territory-dialog[open] .territory-dialog__panel {
    animation: modalIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.territory-dialog__panel {
    position: relative;
    width: 100%;
    max-height: inherit;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--space-lg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--popup-bg);
    color: var(--popup-text);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.territory-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-right: var(--space-lg);
}

.territory-dialog__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--fw-ui-strong);
    line-height: 1.3;
}

.territory-dialog__close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.territory-dialog__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.territory-dialog__list li {
    margin: 0;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.territory-dialog__list li:last-child {
    border-bottom: none;
}

.product-info .license-pick-actions,
.product-info .product-cta {
    margin-top: 0;
    gap: var(--space-xs);
}

.product-info .product-cta .btn-primary {
    min-height: 36px;
    padding-inline: var(--space-md);
}

.license-pick-actions .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-work-detail .breadcrumb--work-detail {
    margin-bottom: var(--space-md);
}

.page-work-detail .passport-section.panel {
    padding: var(--space-lg);
}

.page-work-detail .passport-section .section-title {
    margin-bottom: var(--space-md);
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-strong);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.page-work-detail .passport-section.panel:hover {
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm);
}

/* legacy */

.license-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.license-row:last-child { border-bottom: none; }

/* Cart / checkout */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.cart-header__count {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-medium);
}

/* ── Cart: hyperminimal chrome ─────────────────────────────────────── */

.page-cart,
.page-checkout,
.page-order-detail {
    --cart-pad: var(--space-md);
    --cart-gap: var(--space-sm);
    --cart-check: 1.25rem;
    --cart-cover: 56px;
    --cart-rail: calc(var(--cart-check) + var(--cart-gap) + var(--cart-cover) + var(--cart-gap));
    --cart-band: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    /* Same family as .panel / feat surfaces – not opaque popup black */
    --cart-panel-bg: var(--glass-bg);
    --cart-chip-bg: color-mix(in srgb, var(--text) 5%, transparent);
    --cart-dock-h: 7.5rem;
}

.page-cart .order-stepper {
    margin-bottom: var(--space-md);
}

.page-cart .page-header,
.cart-page-header {
    margin-bottom: var(--space-md);
}

.cart-chrome {
    margin-bottom: var(--space-md);
}

.cart-search {
    display: block;
    min-width: 0;
}

.cart-search input {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 var(--space-md);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1;
    box-shadow: 0 8px 28px -16px var(--glass-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cart-search input::placeholder {
    color: var(--text-muted);
}

.cart-search input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--blue) 35%, var(--input-border));
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring), 0 10px 32px -14px var(--glass-shadow);
}

.cart-select-all {
    margin: 0;
    padding: 0 0 var(--space-sm);
    min-height: 2rem;
    display: flex;
    align-items: flex-start;
}

.cart-check--master {
    display: inline-grid;
    grid-template-columns: var(--cart-check) auto;
    gap: 0 0.75rem;
    align-items: center;
    min-height: 1.25rem;
}

.cart-check__slot {
    width: var(--cart-check);
    height: var(--cart-check);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-check__slot .cart-check__input {
    margin: 0;
}

.cart-check__label {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
    font-weight: var(--fw-ui);
    padding-left: 2px;
}

.cart-layout {
    display: grid;
    gap: var(--space-lg);
    position: relative;
}

.cart-list,
.cart-summary {
    min-width: 0;
    padding: var(--cart-pad, var(--space-md));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--text) 5%, transparent) 0%,
            transparent 52%
        ),
        var(--cart-panel-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.cart-list {
    display: grid;
    gap: 0;
    align-content: start;
}

.cart-summary {
    position: sticky;
    top: 80px;
    display: grid;
    gap: var(--space-xs);
    height: fit-content;
    align-content: start;
}

.cart-summary__head {
    display: grid;
    gap: 2px;
    justify-items: start;
    text-align: left;
    min-height: 2rem;
    align-content: start;
}

.cart-summary__label {
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}

.cart-summary__meta {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.3;
}

.page-cart .cart-summary {
    gap: var(--space-xs);
    padding: var(--space-sm) var(--cart-pad);
}

.page-cart .cart-summary__total,
.page-cart .cart-summary__warn,
.page-cart .cart-summary [data-checkout-cta],
.page-cart .cart-summary__continue {
    justify-self: start;
    text-align: left;
}

.cart-summary__total {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--fw-label);
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.cart-summary__warn {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
    max-width: 22ch;
}

.page-cart .cart-summary [data-checkout-cta] {
    width: 100%;
}

.page-cart .cart-summary .btn-primary,
.page-cart .cart-summary .btn-block {
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    font-size: var(--text-sm);
}

.cart-summary__continue {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 1.75rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}

.cart-summary__continue:hover {
    color: var(--text);
}

.cart-work {
    display: grid;
    gap: 0;
    padding: 0;
    background: var(--surface-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

.page-cart .cart-work {
    margin: 0 calc(var(--cart-pad) * -1);
    background: transparent;
    border: 0;
    border-top: var(--cart-band);
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.page-cart .cart-work--incomplete {
    background: color-mix(in srgb, var(--blue) 5%, transparent);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--blue) 45%, transparent);
}

.cart-work__top {
    display: grid;
    grid-template-columns: var(--cart-check) var(--cart-cover) minmax(0, 1fr) auto;
    column-gap: var(--cart-gap);
    align-items: start;
    padding: var(--cart-pad);
}

.page-cart .cart-usages {
    margin: 0;
    padding: var(--space-sm) var(--cart-pad) var(--cart-pad);
    padding-left: calc(var(--cart-pad) + var(--cart-rail));
    border-top: var(--cart-band);
    min-width: 0;
}

.cart-usage {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    max-width: 100%;
}

.cart-usage:has(.cart-usage__legal) .cart-badge {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cart-usage__legal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--cart-chip-bg, var(--cart-panel-bg));
    color: var(--blue);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-strong);
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cart-usage__legal:hover {
    background: var(--blue-light);
}

.cart-usage__legal:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.cart-usage .cart-badge.is-selected + .cart-usage__legal {
    border-color: color-mix(in srgb, var(--blue) 22%, var(--glass-border));
    background: var(--blue-light);
}

.page-cart .cart-badges {
    margin: 0;
    padding: 0;
    gap: 6px;
}

.page-cart .cart-badge {
    min-height: 28px;
    padding: 0 0.55rem;
    gap: 4px;
    background: var(--cart-chip-bg, var(--cart-panel-bg));
    color: var(--text);
}

.page-cart .cart-badge:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text);
}

.page-cart .cart-badge.is-selected {
    background: var(--blue-light);
    border-color: color-mix(in srgb, var(--blue) 28%, var(--glass-border));
    color: var(--text);
}

.page-cart .cart-badge__text {
    font-size: var(--text-xs);
    white-space: nowrap;
    line-height: 1.2;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.page-cart .cart-badge__price {
    font-size: 0.6875rem;
    white-space: nowrap;
    opacity: 0.85;
    color: inherit;
}

.cart-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    user-select: none;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui);
    color: var(--text-muted);
}

/* Must follow .cart-check so grid + gap are not overridden by inline-flex */
.cart-check.cart-check--master {
    display: inline-grid;
    grid-template-columns: var(--cart-check) auto;
    gap: 0 0.75rem;
    align-items: center;
    justify-content: start;
}

.cart-work__check .cart-check {
    width: 100%;
    height: 100%;
}

.cart-check__input {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent);
    border-radius: 5px;
    background-color: var(--input-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.72rem 0.72rem;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cart-check__input:hover {
    border-color: color-mix(in srgb, var(--blue) 55%, var(--text));
}

.cart-check__input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.cart-check__input:checked {
    border-color: var(--blue);
    background-color: color-mix(in srgb, var(--blue) 14%, var(--input-bg));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.2 8.2 6.4 11.4 12.8 4.6' stroke='%235c7a96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cart-check__input:indeterminate {
    border-color: var(--blue);
    background-color: color-mix(in srgb, var(--blue) 14%, var(--input-bg));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8h9' stroke='%235c7a96' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .cart-check__input:checked,
html.dark-theme .cart-check__input:checked,
body.dark-theme .cart-check__input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.2 8.2 6.4 11.4 12.8 4.6' stroke='%23c9a8e0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .cart-check__input:indeterminate,
html.dark-theme .cart-check__input:indeterminate,
body.dark-theme .cart-check__input:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8h9' stroke='%23c9a8e0' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-checkout-cta] > [hidden] {
    display: none !important;
}

.cart-work--unchecked {
    opacity: 0.62;
}

.cart-work__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cart-check);
    height: var(--cart-cover);
    margin: 0;
    padding: 0;
}

.cart-work__cover {
    display: block;
    width: var(--cart-cover);
    height: var(--cart-cover);
    flex-shrink: 0;
}

.cart-work__cover .cover--thumb {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.cart-work__main {
    min-width: 0;
    padding-top: 2px;
    display: grid;
    gap: 2px;
    align-content: start;
}

.cart-work__title {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--fw-label);
    color: inherit;
    text-decoration: none;
    line-height: 1.3;
}

.cart-work__title:hover {
    color: var(--blue);
}

.cart-work__meta {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.3;
}

.cart-work__licensor {
    margin: 0;
    color: var(--text-dim, var(--text-muted));
    font-size: var(--text-xs);
    line-height: 1.3;
}

.cart-work__side {
    display: grid;
    justify-items: end;
    align-content: space-between;
    gap: var(--space-2xs);
    min-height: var(--cart-cover);
    padding-top: 1px;
}

.cart-work__price {
    font-size: var(--text-base);
    font-weight: var(--fw-label);
    color: var(--text);
    white-space: nowrap;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.cart-work__price[hidden] {
    display: none !important;
}

.cart-work__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: color-mix(in srgb, var(--red) 65%, var(--text-muted));
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.cart-work__remove:hover {
    color: var(--red);
    background: var(--red-light);
}

.cart-work__remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.cart-work.is-removing {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.cart-usages__label {
    font-size: var(--text-xs);
    font-weight: var(--fw-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--space-xs);
    color: var(--text-dim, var(--text-muted));
    line-height: 1.2;
}

.cart-usages__hint {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.35;
}

.checkout-layout,
.order-detail-layout {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
}

.checkout-list,
.order-detail-list {
    display: grid;
    gap: 0;
    min-width: 0;
    padding: var(--space-md);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--text) 5%, transparent) 0%,
            transparent 52%
        ),
        var(--cart-panel-bg, var(--glass-bg));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.checkout-work {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-md);
    row-gap: var(--space-xs);
    align-items: start;
    padding: var(--space-md) 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.checkout-list > .checkout-work:first-child,
.order-detail-list > .checkout-work:first-child {
    border-top: 0;
    padding-top: 0;
}

.checkout-list > .checkout-work:last-child,
.order-detail-list > .checkout-work:last-child {
    padding-bottom: 0;
}

.checkout-work__main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.checkout-work__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--fw-label);
    line-height: 1.3;
}

.checkout-work__meta {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.3;
}

.checkout-work__usages {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.checkout-usage {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 1px 0;
    width: 100%;
}

.checkout-usage__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1.3;
    color: var(--text);
}

.checkout-usage__price {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.page-checkout .checkout-usage .cart-usage__legal,
.page-order-detail .checkout-usage .cart-usage__legal {
    flex: 0 0 auto;
    align-self: center;
    box-sizing: border-box;
    width: 1.25rem;
    min-width: 1.25rem;
    max-width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    max-height: 1.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-dim, var(--text-muted));
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-medium);
    line-height: 1;
}

.page-checkout .checkout-usage .cart-usage__legal:hover,
.page-order-detail .checkout-usage .cart-usage__legal:hover {
    background: var(--blue-light);
    color: var(--blue);
}

.checkout-usage .cart-badge.is-selected + .cart-usage__legal {
    border-color: transparent;
    background: transparent;
}

.checkout-work__price {
    font-size: var(--text-base);
    font-weight: var(--fw-label);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    padding-top: 1px;
}

.checkout-work__write {
    justify-self: start;
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    line-height: 1.3;
    color: var(--blue);
    text-decoration: none;
}

.checkout-work__write:hover {
    color: var(--blue-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.checkout-legal {
    margin-bottom: var(--space-lg);
}

.order-detail-actions {
    margin-top: var(--space-xs);
}

.page-checkout .cart-summary,
.page-order-detail .cart-summary {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--text) 5%, transparent) 0%,
            transparent 52%
        ),
        var(--cart-panel-bg, var(--glass-bg));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.page-checkout .cart-summary__label,
.page-order-detail .cart-summary__label {
    margin: 0;
}

.page-checkout .cart-summary__total,
.page-order-detail .cart-summary__total {
    margin: 0;
    font-size: 1.25rem;
}

.page-checkout .cart-summary [data-checkout-cta],
.page-order-detail .cart-summary [data-checkout-cta] {
    width: 100%;
}

.page-checkout .cart-summary .btn-primary,
.page-checkout .cart-summary .btn-ghost,
.page-order-detail .cart-summary .btn-primary,
.page-order-detail .cart-summary .btn-ghost {
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    font-size: var(--text-sm);
    line-height: 1.25;
    white-space: normal;
}

.page-checkout .cart-summary__continue,
.page-order-detail .cart-summary__continue {
    margin: 0;
    min-height: 1.75rem;
    justify-content: flex-start;
    justify-self: start;
    text-align: left;
}

.page-checkout .cart-summary__warn,
.page-order-detail .cart-summary__warn {
    max-width: none;
    text-align: left;
    justify-self: start;
}

/* Removed covers under the cut – shelf to restore */
.cart-removed {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.cart-removed[hidden] {
    display: none !important;
}

.cart-removed__summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    font-size: var(--text-xs);
    color: var(--text-muted);
    user-select: none;
}

.cart-removed__summary::-webkit-details-marker {
    display: none;
}

.cart-removed__summary::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 5px;
    border-color: transparent transparent transparent currentColor;
    transition: transform 0.15s ease;
}

.cart-removed[open] > .cart-removed__summary::before {
    transform: rotate(90deg);
}

.cart-removed__count {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.cart-removed__rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 12px;
    padding: 2px 2px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.cart-removed__item {
    margin: 0;
    flex: 0 0 auto;
}

.cart-removed__thumb {
    display: block;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    cursor: pointer;
    opacity: 0.78;
    transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.cart-removed__thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--blue) 28%, var(--glass-border));
}

.cart-removed__thumb:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

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

.cart-removed__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.85rem;
}


.cart-empty {
    max-width: 28rem;
    padding: clamp(2.5rem, 8vw, 5rem) 0 3rem;
    display: grid;
    gap: clamp(1.25rem, 3vw, 1.75rem);
    justify-items: start;
}

.cart-empty__header {
    display: grid;
    gap: var(--space-sm);
}

.cart-empty__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: var(--fw-ui-strong);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text);
}

.cart-empty__lead {
    margin: 0;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.cart-empty__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.95rem;
    font-weight: var(--fw-ui);
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.cart-empty__link:hover {
    color: var(--text-muted);
}

.cart-empty__link--btn {
    white-space: nowrap;
}

.cart-restore {
    width: 100%;
    margin-top: clamp(0.5rem, 2vw, 1rem);
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    display: grid;
    gap: var(--space-sm);
}

.cart-restore__label {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cart-restore__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.cart-restore__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0.85rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.cart-restore__item:last-child {
    border-bottom: 0;
}

.cart-restore__meta {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.cart-restore__num {
    font-weight: var(--fw-ui-medium);
    letter-spacing: -0.01em;
}

.cart-restore__info {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.cart-empty-filter {
    color: var(--text-muted);
    padding: var(--space-md) 0;
}

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

/* Cabinet */
.cabinet-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    width: 100%;
    min-width: 0;
}

.cabinet-layout > aside,
.cabinet-layout > .admin-content {
    min-width: 0;
    max-width: 100%;
}

.cabinet-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-xs);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    padding-bottom: var(--space-2xs);
    scrollbar-width: none;
}

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

.cabinet-nav a {
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: 44px;
    padding: var(--space-xs) var(--space-md);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: var(--fw-ui-medium);
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.cabinet-nav a.active,
.cabinet-nav a[aria-current="page"] {
    color: var(--text);
    border-color: color-mix(in srgb, var(--blue) 24%, var(--glass-border));
    background: var(--blue-light);
}

.cabinet-user {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0 var(--space-md);
}

.cabinet-user__name { font-weight: var(--fw-label); }
.cabinet-user__email { font-size: var(--text-sm); color: var(--text-muted); }

.cabinet-works-search {
    margin-bottom: var(--space-md);
}

#cabinetWorksResults .panel.list-row {
    padding: var(--space-sm) var(--space-md);
}

.list-row__main--with-cover {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
}

.list-row__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#cabinetWorksResults .list-row__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Auth */
.page-auth .nav--auth .nav-links {
    display: none;
}

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    min-height: calc(100dvh - 120px);
    padding-block: var(--space-xl);
}

.auth-page__container {
    width: 100%;
    max-width: 440px;
}

/* Legacy two-column shell (MFA) */
.auth-shell:has(.auth-shell__intro) {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(300px, 1.2fr);
    padding: 0;
    overflow: visible;
}

.auth-shell__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-2xl) var(--space-xl);
    border-right: 1px solid var(--glass-border);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent 68%);
}

.auth-shell__brand {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--blue);
}

.auth-shell__intro h1 {
    margin: 0;
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    font-weight: var(--fw-label);
    line-height: 1.15;
}

.auth-shell__intro .sub {
    margin: 0;
    max-width: 28ch;
    color: var(--text-muted);
    line-height: 1.45;
}

.auth-shell__body {
    padding: var(--space-2xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form-grid > .form-group,
.auth-form-grid > .auth-form-span > .form-group {
    margin-bottom: 0;
}

.auth-form-grid > .auth-form-span{
    grid-column: 1 / -1;
}

.register-progress {
    margin: 0 0 var(--space-xl);
    max-width: none;
}

.register-progress__track {
    height: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 10%, transparent);
    overflow: hidden;
}

.register-progress__bar {
    height: 100%;
    background: var(--text);
    border-radius: inherit;
    transition: width 0.35s ease;
}

.register-progress--busy .register-progress__bar--busy,
.register-progress__bar--busy {
    position: relative;
    width: 40% !important;
    background: color-mix(in srgb, var(--text) 70%, transparent);
    animation: register-progress-busy 1.1s ease-in-out infinite;
}

@keyframes register-progress-busy {
    0% {
        transform: translateX(-30%);
        opacity: 0.55;
    }
    50% {
        transform: translateX(120%);
        opacity: 1;
    }
    100% {
        transform: translateX(270%);
        opacity: 0.55;
    }
}

.page-placement .auth-shell.is-generating .register-actions .btn-primary:disabled {
    opacity: 0.85;
    cursor: wait;
}

.register-wizard__actions .btn-primary {
    flex: 1 1 auto;
}

/* Shared auth shell (login + register) – single column */
.page-register .auth-page__container,
.page-login .auth-page__container,
.page-onboarding .auth-page__container--onboarding,
.page-placement .auth-page__container {
    max-width: 420px;
}

.page-placement .auth-page__container--placement-wide {
    max-width: min(640px, 100%);
}

.page-onboarding .auth-page__container--onboarding {
    max-width: 480px;
}

.auth-shell{
    width: 100%;
    display: block;
    padding: clamp(1.5rem, 4vw, 2.75rem) 0 3rem;
}

.auth-shell__header,
.register-shell__header {
    margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.page-login .auth-shell__header {
    margin-bottom: 1.75rem;
}

.auth-shell__step,
.register-shell__step {
    margin: 0 0 var(--space-md);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.auth-shell__title,
.register-shell__title {
    margin: 0 0 var(--space-sm);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: var(--fw-ui-strong);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text);
}

.page-login .auth-shell__title {
    font-size: clamp(1.85rem, 4.5vw, 2.35rem);
}

.auth-shell__lead,
.register-shell__lead {
    margin: 0;
    max-width: 32ch;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.page-login .auth-shell__lead {
    max-width: none;
    font-size: 0.95rem;
}

.auth-shell__form,
.register-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.page-login .auth-shell__form {
    gap: 1.25rem;
}

.auth-shell__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.auth-shell__meta {
    display: flex;
    justify-content: flex-end;
    margin: -0.35rem 0 0;
}

.auth-shell__meta a,
.auth-shell__footer a,
.register-shell__footer a,
.form-hint a {
    color: var(--text);
    text-underline-offset: 0.18em;
}

.auth-shell__footer,
.register-shell__footer {
    margin: var(--space-xl) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    font-size: 0.92rem;
    color: var(--text-muted);
}

.page-login .register-actions {
    justify-content: stretch;
    padding-top: 0.25rem;
}

.page-login .register-actions .btn-primary {
    width: 100%;
    min-width: 0;
}

.page-register .panel.auth-card,
.page-register .auth-card,
.page-login .panel.auth-card,
.page-login .auth-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: none;
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.register-choice {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.register-choice__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    align-items: start;
    margin: 0;
    padding: 1.15rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    cursor: pointer;
    background: transparent;
    transition: background 0.2s ease;
}

.register-choice__item--link {
    grid-template-columns: 1fr;
    text-decoration: none;
    color: inherit;
}

.register-choice__item:hover {
    background: color-mix(in srgb, var(--text) 3%, transparent);
}

.register-choice__item--soon {
    cursor: default;
    opacity: 0.62;
    pointer-events: none;
}

.register-choice__item--soon:hover {
    background: transparent;
}

.register-choice__item input {
    margin-top: 0.35rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--text);
}

.register-choice__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.register-choice__name {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: var(--fw-ui-strong);
    letter-spacing: -0.01em;
    color: var(--text);
}

.register-choice__soon {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: var(--fw-ui-medium);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    line-height: 1.2;
}

.register-choice__item:has(input:checked) .register-choice__name {
    font-weight: var(--fw-label);
}

.register-choice__hint {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.register-choice__limit {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.55rem;
    padding: 0.65rem 0.75rem 0.7rem;
    border-left: 2px solid color-mix(in srgb, var(--green) 55%, transparent);
    background: color-mix(in srgb, var(--green-light) 70%, transparent);
    border-radius: 0 0.45rem 0.45rem 0;
}

.register-choice__limit-title {
    font-size: 0.84rem;
    font-weight: var(--fw-ui-medium);
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--green);
}

.register-choice__limit-text {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.register-choice__item:has(input:checked) .register-choice__limit {
    border-left-color: var(--green);
    background: var(--green-light);
}

.register-choice--compact .register-choice__item {
    padding: 0.9rem 0;
}

.register-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-sm);
}

.register-fields[hidden],
.register-mchd-block[hidden] {
    display: none !important;
}

.register-fields .form-group--full {
    grid-column: 1 / -1;
}

.register-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.register-section__title {
    margin: 0;
    font-size: 0.76rem;
    font-weight: var(--fw-ui-medium, 600);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.register-section__title span[hidden] {
    display: none;
}

.register-email-status {
    margin-top: 0.35rem;
}

.register-email-status--ok {
    color: var(--success, #1a7f4b);
}

.register-email-status--err {
    color: var(--danger, #c0392b);
}

.register-email-status--pending {
    color: var(--text-muted);
}

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

.register-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    padding-top: var(--space-sm);
}

.register-actions .btn-primary {
    min-width: 9rem;
}

/* Onboarding + legal document */
.page-onboarding .auth-shell__lead {
    max-width: 48ch;
}

.page-onboarding:has(.onboard-terms) .auth-page__container--onboarding {
    max-width: min(920px, 100%);
}

.page-legal__container {
    max-width: min(920px, 100%);
    margin: 0 auto;
}

.page-legal__header {
    margin-bottom: var(--space-lg);
    text-align: center;
}

.page-legal__header h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: var(--fw-ui-medium);
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text);
}

.page-legal__subtitle {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--text-muted);
}

.legal-doc-panel {
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2.25rem);
}

.legal-doc {
    color: var(--text);
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    line-height: 1.7;
}

.legal-doc > p {
    margin: 0 0 1rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.legal-doc__meta {
    margin: 0 0 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.legal-doc__meta--footer {
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, rgba(127, 127, 127, 0.25));
}

.legal-doc__section {
    margin: 1.75rem 0 0;
    counter-reset: clause;
}

.legal-doc__heading {
    margin: 0 0 1rem;
    text-align: center;
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    font-weight: var(--fw-ui-medium);
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--text);
}

.legal-doc__list,
.legal-doc__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.legal-doc__list > li {
    position: relative;
    margin: 0 0 0.85rem;
    padding-left: 4rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    counter-increment: clause;
}

.legal-doc__list > li::before {
    content: var(--n) "." counter(clause) ".";
    position: absolute;
    left: 0;
    top: 0;
    width: 3.65rem;
    font-weight: var(--fw-ui-medium);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text);
}

.legal-doc__sublist {
    margin: 0.55rem 0 0.15rem;
    counter-reset: subclause;
}

.legal-doc__sublist > li {
    position: relative;
    margin: 0 0 0.45rem;
    padding-left: 4.4rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    counter-increment: subclause;
}

.legal-doc__sublist > li::before {
    content: var(--n) "." counter(clause) "." counter(subclause) ".";
    position: absolute;
    left: 0;
    top: 0;
    width: 4.05rem;
    font-weight: var(--fw-ui-medium);
    font-variant-numeric: tabular-nums;
    font-size: 0.95em;
    text-align: right;
    color: var(--text-muted);
}

.legal-doc a {
    color: inherit;
    text-underline-offset: 0.15em;
}

.onboard-terms {
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}

.onboard-terms__scroll {
    max-height: min(62vh, 640px);
    max-height: min(62dvh, 640px);
    overflow: auto;
    padding: 1rem 1.1rem 1.25rem;
    border: 1px solid var(--border, rgba(127, 127, 127, 0.28));
    border-radius: 10px;
    background: var(--surface, transparent);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.onboard-terms__scroll:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

.onboard-terms__end {
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.onboard-terms__hint {
    margin: 0.65rem 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: center;
}

.onboard-terms.is-read .onboard-terms__scroll {
    border-color: color-mix(in srgb, var(--text) 28%, transparent);
}

.onboard-terms__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.onboard-terms__accept {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--text);
    cursor: pointer;
}

.onboard-terms__accept.is-locked {
    cursor: not-allowed;
    opacity: 0.55;
}

.onboard-terms__checkbox {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    accent-color: var(--text);
}

.onboard-terms__checkbox:disabled {
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .legal-doc__list > li {
        padding-left: 3.35rem;
    }

    .legal-doc__list > li::before {
        width: 3rem;
    }

    .legal-doc__sublist > li {
        padding-left: 3.7rem;
    }

    .legal-doc__sublist > li::before {
        width: 3.35rem;
    }

    .onboard-terms__scroll {
        max-height: min(58vh, 520px);
        max-height: min(58dvh, 520px);
        padding: 0.85rem 0.75rem 1rem;
    }
}

.page-onboarding .register-actions {
    justify-content: flex-start;
}

.page-onboarding .stack-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.page-register .panel.auth-card,
.page-register .auth-card,
.page-login .panel.auth-card,
.page-login .auth-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: none;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding: var(--space-2xl) var(--space-xl);
    position: relative;
    overflow: hidden;
}

.auth-page__container .auth-card {
    max-width: none;
}

.page-auth .auth-card::before {
    display: none;
}

.page-auth .auth-card:hover {
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm);
}

.auth-card__title,
.auth-card h1,
.auth-shell__body > h1 {
    margin: 0 0 var(--space-2xs);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: var(--fw-label);
    line-height: 1.2;
}

.auth-card__subtitle,
.auth-card .sub {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.auth-card .sub {
    margin-bottom: var(--space-lg);
}

.auth-link-row{
    margin-top: var(--space-lg);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.auth-link-row a{
    color: var(--blue);
    font-weight: var(--fw-ui-strong);
}

.auth-hint {
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text-dim);
    text-align: center;
}

@media (max-width: 767px) {
    .auth-page {
        min-height: calc(100vh - 100px);
        min-height: calc(100dvh - 100px);
        padding-block: var(--space-md);
    }

    .auth-card {
        padding: var(--space-xl) var(--space-lg);
    }

    .auth-shell:has(.auth-shell__intro) {
        grid-template-columns: 1fr;
    }

    .auth-shell__intro {
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
        padding: var(--space-xl) var(--space-lg);
    }

    .auth-shell__intro .sub {
        max-width: none;
    }

    .auth-shell__body {
        padding: var(--space-xl) var(--space-lg);
    }

}

/* Admin KPI cards – отдельно от .panel, чтобы не ломать grid */
.admin-content {
    min-width: 0;
}

.admin-panel__head .section-title {
    margin: 0;
}

.admin-panel__body {
    padding: 0;
    overflow: hidden;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table-wrap .data-table {
    margin: 0;
}

.admin-table-wrap .data-table th,
.admin-table-wrap .data-table td {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

.admin-mobile-list {
    display: none;
}

.admin-mobile-row {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
}

.admin-mobile-row:last-child {
    border-bottom: none;
}

.admin-empty {
    margin: 0;
    padding: var(--space-lg);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

@media (max-width: 767px) {
    .admin-table-wrap .data-table {
        display: none;
    }

    .admin-mobile-list {
        display: flex;
        flex-direction: column;
    }

}

/* Admin – suggested ways of use */
.admin-suggested-ways {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.admin-suggested-ways__toolbar {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    background: color-mix(in srgb, var(--text) 2.5%, transparent);
}

.admin-suggested-ways__summary {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text);
}

.admin-suggested-ways__summary strong {
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-ui-strong);
}

.admin-suggested-ways__hint {
    margin: 0.35rem 0 0;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--text-muted);
}

.admin-suggested-ways__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-suggested-ways__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: start;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    transition: background 0.15s ease;
}

.admin-suggested-ways__item:last-of-type {
    border-bottom: 0;
}

.admin-suggested-ways__item.is-enabled {
    background: color-mix(in srgb, var(--blue-light, #e8f0fe) 42%, transparent);
}

.admin-suggested-ways__item:not(.is-enabled) .admin-suggested-ways__title,
.admin-suggested-ways__item:not(.is-enabled) .admin-suggested-ways__desc {
    color: var(--text-muted);
}

.admin-suggested-ways__body {
    min-width: 0;
}

.admin-suggested-ways__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 0.65rem;
}

.admin-suggested-ways__title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--text);
}

.admin-suggested-ways__tags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.admin-suggested-ways__tags .badge {
    min-height: 22px;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
}

.admin-suggested-ways__desc {
    margin: 0.45rem 0 0;
    max-width: 44rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.admin-suggested-ways__switch {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.admin-suggested-ways .way-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    user-select: none;
}

.admin-suggested-ways .way-switch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.admin-suggested-ways .way-switch__ui {
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--toggle-bg);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-suggested-ways .way-switch__ui::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(1.4rem - 4px);
    height: calc(1.4rem - 4px);
    border-radius: 50%;
    background: var(--input-bg, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease;
}

.admin-suggested-ways .way-switch__input:checked + .way-switch__ui {
    background: color-mix(in srgb, var(--blue, #2f6fed) 72%, var(--toggle-bg));
    border-color: transparent;
}

.admin-suggested-ways .way-switch__input:checked + .way-switch__ui::after {
    transform: translateX(1.1rem);
}

.admin-suggested-ways .way-switch__input:focus-visible + .way-switch__ui {
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.admin-suggested-ways .way-switch__text {
    min-width: 5.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Подпись синхронна со свитчем через :checked – без ожидания JS. */
.admin-suggested-ways .way-switch__state--on {
    display: none;
}

.admin-suggested-ways .way-switch__input:checked ~ .way-switch__text .way-switch__state--on {
    display: inline;
}

.admin-suggested-ways .way-switch__input:checked ~ .way-switch__text .way-switch__state--off {
    display: none;
}

.admin-suggested-ways__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    background: color-mix(in srgb, var(--text) 2%, transparent);
}

@media (max-width: 640px) {
    .admin-suggested-ways__item {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .admin-suggested-ways__switch {
        justify-self: start;
        margin-top: 0;
    }

    .admin-suggested-ways__footer {
        justify-content: stretch;
    }

    .admin-suggested-ways__footer .btn-primary {
        width: 100%;
    }
}

.admin-suggested-ways__deps {
    margin: 0.4rem 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.admin-suggested-ways__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.admin-suggested-ways__switch-note {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
    padding-top: 0.15rem;
}

.admin-suggested-ways__item.is-archived {
    opacity: 0.72;
}

.admin-suggested-ways__item.is-locked .admin-suggested-ways__title {
    color: var(--text);
}

.admin-way-form .stack-actions {
    margin-top: var(--space-md);
}

.admin-way-form__bounds {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
}

.admin-way-form__bounds legend {
    padding: 0 var(--space-2xs);
    font-weight: 600;
}

.admin-way-form .form-row--triple {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}

@media (max-width: 720px) {
    .admin-way-form .form-row--triple {
        grid-template-columns: 1fr;
    }
}

/* Financial analytics */

.finance-period {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-bottom: var(--space-md);
}

.finance-period__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.finance-period__btn:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--blue) 40%, var(--glass-border));
    background: var(--glass-hover);
}

.finance-period__btn.is-active {
    color: var(--badge-text);
    border-color: color-mix(in srgb, var(--blue) 45%, var(--glass-border));
    background: color-mix(in srgb, var(--blue) 12%, var(--glass-bg));
    font-weight: var(--fw-ui);
}

.finance-panel .section-title {
    margin-bottom: var(--space-sm);
    font-size: var(--text-base);
}

.finance-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.finance-bars__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 0.35rem;
    font-size: var(--text-sm);
}

.finance-bars__label {
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finance-bars__value {
    color: var(--text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.finance-bars__track {
    height: 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-light) 80%, transparent);
    overflow: hidden;
}

.finance-bars__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--skyblue) 70%, var(--blue)));
    min-width: 2px;
    transition: width 0.35s ease;
}

.finance-months {
    display: grid;
    grid-template-columns: repeat(var(--finance-months, 12), minmax(0, 1fr));
    gap: var(--space-xs);
    align-items: end;
    min-height: 9rem;
    padding-top: var(--space-md);
    overflow: visible;
}

.finance-months__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    position: relative;
}

.finance-months__value {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    min-height: 1.15em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.finance-months__col:hover .finance-months__value,
.finance-months__col:focus-within .finance-months__value {
    opacity: 1;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    width: max-content;
    position: relative;
    z-index: 3;
    padding: 0.12rem 0.35rem;
    margin-block: -0.12rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--white) 94%, var(--bg-main));
    color: var(--text);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 12%, transparent);
}

.finance-months__track {
    width: 100%;
    max-width: 2.25rem;
    height: 6.5rem;
    display: flex;
    align-items: flex-end;
    border-radius: 6px 6px 2px 2px;
    background: color-mix(in srgb, var(--border-light) 55%, transparent);
    overflow: hidden;
}

.finance-months__fill {
    width: 100%;
    min-height: 2px;
    border-radius: inherit;
    background: linear-gradient(180deg, color-mix(in srgb, var(--skyblue) 80%, var(--blue)), var(--blue));
    transition: height 0.35s ease;
}

.finance-months__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.15;
    min-width: 0;
}

.finance-months__month {
    white-space: nowrap;
}

.finance-months__year {
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--text));
    white-space: nowrap;
    min-height: 0.85em;
}

.finance-months__year.is-empty {
    visibility: hidden;
    user-select: none;
}

.finance-months__col.is-before-join {
    opacity: 0.38;
    filter: grayscale(0.35);
}

.finance-months__col.is-before-join .finance-months__fill {
    min-height: 0;
    height: 0 !important;
}

.finance-months__col.is-before-join .finance-months__track {
    background: color-mix(in srgb, var(--border-light) 35%, transparent);
}

.finance-months__col.is-before-join:hover .finance-months__value,
.finance-months__col.is-before-join:focus-within .finance-months__value {
    opacity: 1;
}

/* Dense year charts (12 months): keep bars readable in a narrow panel. */
.finance-months[data-months="12"] {
    gap: 0.2rem;
}

.finance-months[data-months="12"] .finance-months__track {
    max-width: 1.1rem;
}

.finance-months[data-months="12"] .finance-months__label {
    font-size: 0.6rem;
    letter-spacing: -0.02em;
}

.finance-months[data-months="12"] .finance-months__year {
    font-size: 0.55rem;
}

.finance-months[data-grain="year"] .finance-months__label {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

@media (max-width: 767px) {
    .finance-table-wrap .data-table {
        display: none;
    }

    .finance-months__value {
        display: none;
    }
}

/* ── Cabinet contracts – hyper-minimal tabs ─────────────────────────── */

.cabinet-contracts {
    display: grid;
    gap: var(--space-md);
}

.cabinet-contracts__toolbar {
    display: grid;
    gap: var(--space-sm);
    align-items: end;
    justify-items: end;
}

.cabinet-contracts__tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--space-2xs);
    width: 100%;
    overflow-x: auto;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    scrollbar-width: none;
}

.cabinet-contracts__tabs::-webkit-scrollbar {
    display: none;
}

.cabinet-contracts__tabs a {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: var(--fw-ui-medium);
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

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

.cabinet-contracts__tabs a.active,
.cabinet-contracts__tabs a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--text) 55%, var(--blue));
    background: transparent;
}

.cabinet-contracts__pane {
    display: grid;
    gap: var(--space-sm);
}

.cabinet-contracts__empty {
    margin: 0;
    padding: var(--space-sm) 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.cabinet-contracts__pane > .panel + .panel {
    margin-top: 0;
}

/* ── Cabinet finance – hyper-minimal ────────────────────────────────── */

.cabinet-finance {
    display: grid;
    gap: clamp(1.75rem, 3.5vw, 2.5rem);
    min-width: 0;
    max-width: 100%;
}

.cabinet-finance__head {
    display: grid;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

@media (min-width: 720px) {
    .cabinet-finance__head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: var(--space-lg);
    }
}

.cabinet-finance__intro {
    min-width: 0;
}

.cabinet-finance__title {
    margin: 0;
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: var(--fw-ui);
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.cabinet-finance__period-label {
    margin: 0.35rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.cabinet-finance .finance-period {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    overflow-x: auto;
    border-bottom: 0;
    scrollbar-width: none;
}

.cabinet-finance .finance-period::-webkit-scrollbar {
    display: none;
}

.cabinet-finance .finance-period__btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: var(--fw-ui-medium);
    letter-spacing: -0.01em;
    box-shadow: none;
}

.cabinet-finance .finance-period__btn:hover {
    color: var(--text);
    background: transparent;
    border-color: transparent;
}

.cabinet-finance .finance-period__btn.is-active {
    color: var(--text);
    background: transparent;
    border-bottom-color: color-mix(in srgb, var(--text) 55%, var(--blue));
    font-weight: var(--fw-ui-medium);
}

.cabinet-finance__block {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.cabinet-finance__block--follow {
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.cabinet-finance__block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
}

.cabinet-finance__block-title {
    margin: 0;
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    font-weight: var(--fw-ui);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.cabinet-finance__block-meta {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cabinet-finance__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

@media (min-width: 720px) {
    .cabinet-finance__metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cabinet-finance__metric {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(0.85rem, 2vw, 1.25rem);
    border-right: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}

.cabinet-finance__metric:nth-child(2n) {
    border-right: 0;
}

@media (min-width: 720px) {
    .cabinet-finance__metric {
        border-right: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    }

    .cabinet-finance__metric:nth-child(2n) {
        border-right: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    }

    .cabinet-finance__metric:last-child {
        border-right: 0;
    }
}

.cabinet-finance__metric-label {
    font-size: 0.6875rem;
    font-weight: var(--fw-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.cabinet-finance__metric-value {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: var(--fw-ui-strong);
    letter-spacing: -0.03em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.cabinet-finance__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 768px) {
    .cabinet-finance__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xl);
    }
}

.cabinet-finance__panel,
.cabinet-finance__section {
    min-width: 0;
    max-width: 100%;
    padding: clamp(var(--space-md), 2.2vw, 1.5rem);
}

.cabinet-finance__panel-title {
    margin: 0 0 clamp(var(--space-md), 2vw, 1.25rem);
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cabinet-finance .finance-months {
    min-height: 8.5rem;
    padding-top: var(--space-lg);
    gap: var(--space-sm);
    overflow: visible;
}

.cabinet-finance .finance-months__track {
    max-width: 1.35rem;
    height: 5.75rem;
    border-radius: 0;
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.cabinet-finance .finance-months__fill {
    border-radius: 0;
    background: color-mix(in srgb, var(--text) 55%, var(--blue));
    transition: height 0.3s ease;
}

.cabinet-finance .finance-months__value {
    font-size: 0.625rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.cabinet-finance .finance-months__label {
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.cabinet-finance .finance-months__year {
    text-transform: none;
    letter-spacing: 0.04em;
}

.cabinet-finance .finance-months[data-months="12"] .finance-months__track {
    max-width: 0.95rem;
}

.cabinet-finance .finance-months[data-months="12"] .finance-months__label {
    font-size: 0.55rem;
}

.cabinet-finance .finance-months[data-months="12"] .finance-months__year {
    font-size: 0.5rem;
}

.cabinet-finance .finance-bars {
    gap: 0;
}

.cabinet-finance .finance-bars__row {
    padding: 0.7rem 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}

.cabinet-finance .finance-bars__row:first-child {
    border-top: 0;
    padding-top: 0;
}

.cabinet-finance .finance-bars__row:last-child {
    padding-bottom: 0;
}

.cabinet-finance .finance-bars__meta {
    margin-bottom: 0.4rem;
}

.cabinet-finance .finance-bars__label {
    font-size: var(--text-sm);
    letter-spacing: -0.01em;
}

.cabinet-finance .finance-bars__value {
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.cabinet-finance .finance-bars__track {
    height: 2px;
    border-radius: 0;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

.cabinet-finance .finance-bars__fill {
    border-radius: 0;
    background: color-mix(in srgb, var(--text) 55%, var(--blue));
}

.cabinet-finance__status {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cabinet-finance__status li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    padding: 0.7rem 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    font-size: var(--text-sm);
}

.cabinet-finance__status li:first-child {
    border-top: 0;
    padding-top: 0;
}

.cabinet-finance__status li:last-child {
    padding-bottom: 0;
}

.cabinet-finance__status strong {
    font-weight: var(--fw-ui-strong);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--text);
}

.cabinet-finance__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cabinet-finance__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem var(--space-md);
    padding: 0.85rem 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}

.cabinet-finance__row:first-child {
    border-top: 0;
    padding-top: 0;
}

.cabinet-finance__row:last-child {
    padding-bottom: 0;
}

.cabinet-finance__row-main {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 12rem;
}

.cabinet-finance__row-title {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    letter-spacing: -0.01em;
    text-decoration: none;
}

a.cabinet-finance__row-title:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.cabinet-finance__row-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow-wrap: break-word;
}

.cabinet-finance__row-side {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.55rem;
}

.cabinet-finance__amount {
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-strong);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
}

.cabinet-finance__status-pill {
    font-size: 0.6875rem;
    font-weight: var(--fw-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cabinet-finance__status-pill.is-ok {
    color: color-mix(in srgb, var(--green) 75%, var(--text-muted));
}

.cabinet-finance__empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.cabinet-finance .list-row__meta {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.cabinet-finance__metric--link {
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

.cabinet-finance__metric--link:hover {
    background: color-mix(in srgb, var(--text) 4%, transparent);
}

.cabinet-finance__metric--link.is-alert .cabinet-finance__metric-value {
    color: var(--badge-text);
}

.admin-overview__secondary {
    margin-top: 0;
    border-top: 0;
}

.admin-overview__secondary .cabinet-finance__metric:last-child {
    border-right: 0;
}

@media (min-width: 720px) {
    .admin-overview__secondary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.admin-overview__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 0.35rem;
    min-width: 0;
}

.admin-overview__section-head .cabinet-finance__panel-title {
    margin: 0;
    min-width: 0;
}

.admin-overview__section-head .cabinet-finance__block-meta {
    margin: 0;
    text-decoration: none;
    flex-shrink: 0;
}

.admin-overview__section-head .cabinet-finance__block-meta:hover {
    color: var(--text);
}

.admin-overview__signing-batch {
    margin: 0 0 1rem;
}

.admin-overview__signing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.75rem;
}

.admin-overview__signing-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.admin-overview__audit .cabinet-finance__row {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.35rem var(--space-sm);
}

.admin-overview__audit .cabinet-finance__row-main {
    flex: 1 1 auto;
}

.admin-overview__audit .cabinet-finance__row-main .cabinet-finance__row-meta {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
}

.admin-overview__audit > .cabinet-finance__row > time.cabinet-finance__row-meta {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-top: 0.15rem;
}

@media (max-width: 640px) {
    .cabinet-finance__section {
        padding-inline: 0;
    }
}

/* calendar base moved to components.css (.calendar); audit uses .calendar--compact */

.admin-audit-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-sm);
    margin: 0 0 clamp(var(--space-md), 2vw, 1.25rem);
}

.admin-audit-filters__field {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    flex: 1 1 9rem;
}

.admin-audit-filters__field--date {
    flex: 1 1 11rem;
    max-width: 16rem;
}

.admin-audit-filters__field--search {
    flex: 1 1 12rem;
}

.admin-audit-filters__label {
    font-size: 0.6875rem;
    font-weight: var(--fw-ui-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-audit-filters__control {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
}

.admin-audit-filters__control:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--blue) 45%, var(--text));
}

.admin-audit-filters__submit {
    flex: 0 0 auto;
    min-height: 2.25rem;
}

.admin-audit-date {
    display: flex;
    align-items: stretch;
    gap: var(--space-2xs);
    min-width: 0;
    position: relative;
}

.admin-audit-date__input {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-audit-date__picker {
    position: static;
    flex: 0 0 auto;
}

.admin-audit-date__picker > summary {
    list-style: none;
}

.admin-audit-date__picker > summary::-webkit-details-marker {
    display: none;
}

.admin-audit-date__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    min-height: 2.25rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.admin-audit-date__trigger:hover,
.admin-audit-date__picker[open] > .admin-audit-date__trigger {
    color: var(--text);
    border-color: color-mix(in srgb, var(--blue) 45%, var(--text));
}

.admin-audit-date__icon {
    display: block;
}

.admin-audit-date__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 140;
    width: min(16.5rem, calc(100vw - 2rem));
    max-height: min(22rem, calc(100dvh - 7rem));
    overflow: auto;
    padding: var(--space-sm);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--popup-bg);
    color: var(--popup-text);
    box-shadow: var(--shadow);
}

/* Compact calendar styles live on .calendar--compact in components.css */

.admin-audit-page .pagination {
    margin-top: var(--space-md);
}

@media (min-width: 768px) {
    .admin-audit-page .cabinet-finance__grid {
        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 480px) {
    .admin-audit-date__panel {
        left: 50%;
        right: auto;
        width: min(16.5rem, calc(100vw - 1.5rem));
        transform: translateX(-50%);
    }
}

/* Onboarding */
body.onboarding-open { overflow: hidden; }

.onboarding {
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: hidden;
    pointer-events: none;
}

.onboarding__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    pointer-events: auto;
}

/* Spotlight cutout dims the page; backdrop becomes a click-catcher only */
.onboarding--has-spotlight .onboarding__backdrop {
    background: transparent;
}

.onboarding__highlight {
    position: fixed;
    z-index: 1;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62);
    border: 2px solid var(--blue);
    pointer-events: none;
    box-sizing: border-box;
}

.onboarding__card {
    position: fixed;
    z-index: 2;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    left: auto;
    top: auto;
    width: min(360px, calc(100vw - 32px));
    max-width: min(360px, calc(100vw - 32px));
    margin: 0;
    background: var(--popup-bg);
    color: var(--popup-text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: var(--space-md);
    box-shadow: var(--shadow);
    pointer-events: auto;
    box-sizing: border-box;
}

.onboarding__step {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-xs);
    color: var(--popup-text-muted);
}

.onboarding__title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-lg);
    font-weight: var(--fw-label);
    line-height: 1.3;
    color: var(--popup-text);
}

.onboarding__text {
    margin: 0 0 var(--space-md);
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--popup-text-muted);
}

.onboarding__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

@media (max-width: 640px) {
    .onboarding__card {
        left: 16px;
        right: auto;
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        top: auto;
        width: min(360px, calc(100vw - 32px));
        max-width: min(360px, calc(100vw - 32px));
    }
}

.contract-preview-wrap { padding: 0; overflow: hidden; background: #eef1f5; }
.contract-preview {
    width: 100%;
    min-height: 480px;
    border: none;
    display: block;
    background: #eef1f5;
    color-scheme: only light;
}

@media (min-width: 768px) {
    .catalog-toolbar {
        margin-bottom: var(--space-lg);
    }

    .filter-row {
        --filter-label-width: 7.5rem;
        gap: var(--space-xs) var(--space-lg);
    }

    .catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr));
        gap: var(--space-lg) var(--space-md);
    }

    .product-layout {
        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
        gap: var(--space-xl);
        align-items: start;
        padding: var(--space-xl);
    }

    .product-media {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        align-items: flex-start;
    }

    .product-media__cover {
        max-width: 240px;
        margin-inline: 0;
    }

    .product-authors--under-cover {
        display: block;
        width: 100%;
        max-width: 240px;
    }

    .product-authors--under-cover:not(:has(.contributors-accordion)) {
        display: none;
    }

    .product-authors--in-info {
        display: none !important;
    }

    .product-info {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    .product-head {
        text-align: left;
        gap: var(--space-xs);
        padding-right: var(--space-xl);
    }

    .product-artist {
        font-size: var(--text-sm);
    }

    .product-info .product-title {
        font-size: clamp(1.5rem, 2.2vw, 2rem);
        letter-spacing: -0.035em;
    }

    .product-identity {
        justify-content: flex-start;
    }

    .product-desc {
        text-align: left;
    }

    .product-cta,
    .product-block,
    .product-info > .list-row__meta {
        text-align: left;
    }

    .product-authors .contributors-accordion--minimal,
    .product-authors .contributors-accordion--minimal .accordion-item {
        align-items: flex-start;
    }

    .product-authors .contributors-accordion--minimal .authors-list__row,
    .product-authors .contributors-accordion--minimal .authors-list__line {
        text-align: left;
    }

    .cart-layout,
    .checkout-layout,
    .order-detail-layout {
        grid-template-columns: minmax(0, 1fr) 260px;
        align-items: start;
        gap: var(--space-xl, 32px);
    }

}

@media (max-width: 767px) {
    .page-cart {
        --cart-cover: 48px;
        --cart-pad: var(--space-sm);
        --cart-gap: var(--space-xs);
    }

    .page-cart .cart-usages {
        margin: 0;
        padding: var(--space-sm) var(--cart-pad) var(--cart-pad);
        padding-left: var(--cart-pad);
    }

    .cart-select-all {
        padding: 0 0 var(--space-xs);
        min-height: 2rem;
    }

    .cart-work__top {
        grid-template-columns: var(--cart-check) var(--cart-cover) minmax(0, 1fr) auto;
        column-gap: var(--cart-gap);
        align-items: start;
    }

    .product-layout {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .product-media,
    .product-info,
    .product-media__cover,
    .product-head,
    .product-identity,
    .product-cta,
    .product-block,
    .license-picks,
    .license-picks--readonly,
    .license-pick,
    .license-pick__main {
        min-width: 0;
        max-width: 100%;
    }

    .product-info .product-title {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .license-pick.is-readonly .license-pick__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .license-pick.is-readonly .license-pick__price {
        justify-self: end;
        text-align: right;
    }

    .product-info .license-pick-actions.stack-actions,
    .product-info .product-cta.stack-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .product-info .license-pick-actions .btn-primary,
    .product-info .license-pick-actions .btn-ghost,
    .product-info .license-pick-actions form,
    .product-info .product-cta .btn-primary,
    .product-info .product-cta .btn-ghost,
    .product-info .product-cta form {
        width: auto;
    }

    .list-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .panel.list-row {
        padding: var(--space-md);
    }

    .list-row__actions:not(.list-row__actions--icons) {
        justify-content: flex-start;
    }

    .list-row:has(.list-row__actions:not(.list-row__actions--icons)) {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .cart-work__top {
        grid-template-columns: var(--cart-check) var(--cart-cover) minmax(0, 1fr) auto;
        align-items: start;
    }

    .cart-work__side {
        gap: var(--space-2xs);
    }

    /*
     * Mobile cart/checkout dock:
     * - fixed to visual bottom (avoid 100vh / address-bar traps)
     * - clearance via measured --cart-dock-h (includes safe-area padding)
     * - solid opaque bar above footer (page-main and footer share z-index: 1)
     */
    .page-cart:has([data-cart-summary]),
    .page-checkout:has([data-cart-summary]) {
        --cart-dock-gap: 0.75rem;
        --cart-dock-h: 7.5rem;
    }

    /* Footer must stay under the dock: both siblings of body use z-index: 1,
       so DOM order would otherwise paint footer text over the fixed bar. */
    .page-cart:has([data-cart-summary]) .site-footer,
    .page-checkout:has([data-cart-summary]) .site-footer {
        z-index: 0;
        padding-bottom: calc(
            var(--cart-dock-h, 7.5rem) + var(--space-lg) + env(safe-area-inset-bottom, 0px)
        );
    }

    .page-cart:has([data-cart-summary]) .cart-layout,
    .page-checkout:has([data-cart-summary]) .checkout-layout {
        padding-bottom: calc(var(--cart-dock-h, 7.5rem) + var(--cart-dock-gap));
    }

    .page-cart:has([data-cart-summary]) .cart-work,
    .page-checkout:has([data-cart-summary]) .checkout-work {
        scroll-margin-bottom: calc(var(--cart-dock-h, 7.5rem) + var(--cart-dock-gap));
    }

    .page-cart:has([data-cart-summary]) .cart-removed {
        scroll-margin-bottom: calc(var(--cart-dock-h, 7.5rem) + var(--cart-dock-gap));
        margin-bottom: calc(var(--cart-dock-h, 7.5rem) + var(--cart-dock-gap));
    }

    .page-cart .cart-summary,
    .page-checkout .cart-summary {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 80;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head cta"
            "total cta"
            "link cta";
        column-gap: var(--space-md);
        row-gap: 2px;
        align-items: center;
        padding:
            var(--space-sm)
            max(var(--space-md), env(safe-area-inset-right, 0px))
            max(var(--space-sm), env(safe-area-inset-bottom, 0px))
            max(var(--space-md), env(safe-area-inset-left, 0px));
        border-radius: var(--radius) var(--radius) 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        box-shadow: 0 -10px 28px color-mix(in srgb, var(--text) 12%, transparent);
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--text) 5%, transparent) 0%,
                transparent 52%
            ),
            color-mix(in srgb, var(--bg-main) 78%, var(--glass-bg));
        background-color: color-mix(in srgb, var(--bg-main) 78%, var(--glass-bg));
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        overflow: hidden;
        /* Promote own layer – reduces iOS/Safari fixed jitter */
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }

    .page-cart .cart-summary:has(.cart-summary__warn:not([hidden])),
    .page-checkout .cart-summary:has(.cart-summary__warn:not([hidden])) {
        grid-template-areas:
            "head cta"
            "total cta"
            "warn warn"
            "link link";
    }

    .page-cart .cart-summary__head {
        grid-area: head;
        min-height: 0;
        gap: 0;
        justify-self: start;
    }

    .page-checkout .cart-summary__label {
        grid-area: head;
        justify-self: start;
    }

    .page-cart .cart-summary__total,
    .page-checkout .cart-summary__total {
        grid-area: total;
        justify-self: start;
        text-align: left;
        font-size: 1.25rem;
    }

    .page-cart .cart-summary__warn,
    .page-checkout .cart-summary__warn {
        grid-area: warn;
        max-width: none;
        text-align: left;
        justify-self: start;
    }

    .page-cart .cart-summary__warn[hidden],
    .page-checkout .cart-summary__warn[hidden] {
        display: none !important;
    }

    .page-cart .cart-summary [data-checkout-cta],
    .page-checkout .cart-summary [data-checkout-cta] {
        grid-area: cta;
        align-self: center;
        justify-self: end;
        width: auto;
        min-width: 8.5rem;
    }

    .page-cart .cart-summary [data-checkout-cta] .btn-primary,
    .page-cart .cart-summary [data-checkout-cta] .btn-block,
    .page-checkout .cart-summary [data-checkout-cta] .btn-primary,
    .page-checkout .cart-summary [data-checkout-cta] .btn-block,
    .page-checkout .cart-summary [data-checkout-cta] .btn-ghost {
        width: auto;
        min-width: 8.5rem;
        white-space: nowrap;
    }

    .page-cart .cart-summary__continue,
    .page-checkout .cart-summary__continue {
        grid-area: link;
        justify-self: start;
        justify-content: flex-start;
        text-align: left;
        min-height: 1.5rem;
        margin-top: 0;
    }

    .page-order-detail .cart-summary {
        position: static;
        padding: var(--space-md);
        width: auto;
        transform: none;
        -webkit-transform: none;
        overflow: visible;
        grid-template-areas: none;
    }

    .way-legal-dialog,
    .territory-dialog {
        width: calc(100vw - 1.5rem);
        max-width: calc(100vw - 1.5rem);
        max-height: min(88dvh, calc(100% - 1.5rem));
    }

    .way-legal-dialog__panel,
    .territory-dialog__panel {
        padding: var(--space-md);
        border-radius: calc(var(--radius) - 2px);
    }

    .data-table { display: none; }
}

/* ── Settings grid (account + work editor) ─────────────────────────── */

.settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.settings-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2xs);
    overflow-x: auto;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--glass-border);
    scrollbar-width: none;
}

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

.settings-nav a {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: var(--fw-ui-medium);
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

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

.settings-nav a.active,
.settings-nav a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--text) 55%, var(--blue));
    background: transparent;
}

.settings-panels {
    min-width: 0;
}

.settings-panel {
    display: none;
}

.settings-panel.is-active {
    display: block;
}

.settings-section {
    margin-bottom: var(--space-lg);
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-ui-medium);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--glass-border);
}

/* Package / EDS upload flow (work editor) */

.pkg-panel__header .settings-section__title {
    margin-bottom: var(--space-xs);
    padding-bottom: 0;
    border-bottom: 0;
}

.pkg-step.is-current {
    border-color: color-mix(in srgb, var(--blue) 22%, var(--glass-border));
    background: var(--blue-light);
    color: var(--text);
}

.pkg-step.is-done {
    border-color: color-mix(in srgb, var(--green) 22%, var(--glass-border));
    background: var(--green-light);
    color: var(--text);
}

.pkg-step.is-done .pkg-step__index {
    background: color-mix(in srgb, var(--green) 28%, transparent);
}

.pkg-step.is-current .pkg-step__index {
    background: color-mix(in srgb, var(--blue) 28%, transparent);
}

.pkg-block.is-disabled {
    opacity: 0.55;
}

.pkg-check.is-ready {
    border-color: color-mix(in srgb, var(--green) 22%, var(--glass-border));
    background: var(--green-light);
    color: var(--text);
}

.pkg-check.is-ready .pkg-check__mark {
    background: var(--green);
}

.pkg-actions .btn-primary:disabled,
.pkg-actions .btn-primary[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* License edit cards (work settings → ways of use) */

.license-card-edit__fields .form-group {
    flex: 1 1 8rem;
    margin-bottom: 0;
    min-width: 0;
}

.license-card-edit__form > .form-group {
    margin-bottom: 0;
}

/* ── Profile & Legal Profile ───────────────────────────────────────── */

/* Progress bar */
.legal-progress {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.legal-progress__track {
    flex: 1;
    height: 6px;
    background: var(--border-light);
    border-radius: 99px;
    overflow: hidden;
}

.legal-progress__bar {
    height: 100%;
    width: 0%;
    background: var(--blue);
    border-radius: 99px;
    transition: width 0.35s ease, background 0.35s ease;
}

.legal-progress--complete .legal-progress__bar {
    background: var(--green);
}

.legal-progress__label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    min-width: 2.8rem;
    text-align: right;
}

/* Status selector cards */
.legal-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

@media (max-width: 480px) {
    .legal-status-grid {
        grid-template-columns: 1fr;
    }
}

.legal-status-card {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--input-bg);
    transition: border-color 0.2s, background 0.2s;
    font-size: var(--text-sm);
}

.legal-status-card:hover {
    border-color: color-mix(in srgb, var(--text) 12%, var(--border));
    background: var(--glass-hover);
}

.legal-status-card.is-active {
    border-color: color-mix(in srgb, var(--blue) 24%, var(--border));
    background: var(--blue-light);
    font-weight: var(--fw-ui-medium);
}

/* Field sections */
.legal-section {
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--glass-bg);
}

.legal-section .form-group:last-child {
    margin-bottom: 0;
}

/* Inline validation errors */
.form-error--inline {
    font-size: var(--text-xs);
    color: var(--red);
    margin-top: 3px;
}

/* Hidden field helper */
.legal-fields[hidden]{
    display: none !important;
}

/* Complete badge */

/* Form two-column grid – always grid so row gap separates fields on all widths */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.form-grid-2 > .form-group {
    margin-bottom: 0;
}

.form-grid-2 .form-group--full {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    .form-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.form-hint {
    margin-top: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Image upload – matches form input chrome */
.image-upload-ui {
    position: relative;
    width: 100%;
}

.image-upload-ui--avatar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: auto;
}

.image-upload-field .image-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.image-upload-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    width: 100%;
    min-height: 36px;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--fw-ui);
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.image-upload-trigger:hover {
    border-color: color-mix(in srgb, var(--blue) 35%, var(--input-border));
    background: color-mix(in srgb, var(--blue-light) 40%, var(--input-bg));
}

.image-upload-trigger:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--blue) 35%, var(--input-border));
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.image-upload-trigger__icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.image-upload-trigger:hover .image-upload-trigger__icon {
    color: var(--badge-text);
}

.image-upload-trigger__text {
    color: var(--text-muted);
}

.image-upload-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.image-upload-trigger.has-file .image-upload-trigger__text {
    display: none;
}

.image-upload-drop {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--blue);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--blue-light) 70%, var(--input-bg));
    color: var(--badge-text);
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    pointer-events: none;
}

.image-upload-field.is-dragover .image-upload-trigger {
    opacity: 0;
}

.image-upload-field.has-error .image-upload-trigger {
    border-color: var(--red);
}

.image-upload-field .form-error {
    margin-top: var(--space-xs);
}

/* Circular avatar picker */
.image-upload-field--avatar .form-hint {
    margin-top: var(--space-xs);
}

.image-upload-avatar-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    padding: 0;
    border: 1px dashed var(--input-border);
    border-radius: 50%;
    background: var(--input-bg);
    color: var(--text-muted);
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.image-upload-avatar-btn:hover {
    border-color: color-mix(in srgb, var(--blue) 40%, var(--input-border));
    background: color-mix(in srgb, var(--blue-light) 40%, var(--input-bg));
    color: var(--badge-text);
}

.image-upload-avatar-btn:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--blue) 35%, var(--input-border));
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.image-upload-avatar-btn.has-image {
    border-style: solid;
}

.image-upload-avatar-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.image-upload-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.image-upload-avatar-caption {
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1.2;
    color: var(--text-muted);
}

.image-upload-drop--avatar {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-medium);
    line-height: 1.2;
    color: var(--badge-text);
    text-align: left;
    pointer-events: none;
}

.image-upload-field--avatar.is-dragover .image-upload-avatar-caption {
    display: none;
}

.image-upload-field--avatar.is-dragover .image-upload-avatar-btn {
    border-color: color-mix(in srgb, var(--blue) 35%, var(--input-border));
    background: color-mix(in srgb, var(--blue-light) 70%, var(--input-bg));
    color: var(--badge-text);
}

.image-upload-field--avatar.has-error .image-upload-avatar-btn {
    border-color: var(--red);
}

/* Quiet avatar row (registration) */
.image-upload-ui--quiet {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: 0.85rem 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.image-upload-field--quiet {
    margin: 0;
}

.image-upload-field--quiet .image-upload-avatar-btn {
    width: 56px;
    height: 56px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--text) 14%, transparent);
    background: transparent;
    color: var(--text-muted);
    flex-shrink: 0;
}

.image-upload-field--quiet .image-upload-avatar-btn:hover {
    border-color: color-mix(in srgb, var(--text) 28%, transparent);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    color: var(--text);
}

.image-upload-quiet-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

.image-upload-quiet-action {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1rem;
    font-weight: var(--fw-ui-strong);
    letter-spacing: -0.01em;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.image-upload-quiet-action:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.image-upload-quiet-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.image-upload-field--quiet .image-upload-drop--avatar {
    display: none;
}

.image-upload-field--quiet.is-dragover .image-upload-avatar-btn {
    border-color: var(--text);
}

.image-upload-field--quiet .image-upload-error {
    margin-top: var(--space-xs);
}

/* Avatar crop – fixed circle, pan photo, zoom scales */
.avatar-crop-overlay {
    z-index: 2100;
    background: color-mix(in srgb, var(--text) 40%, transparent);
    backdrop-filter: blur(10px);
}

.avatar-crop-modal {
    width: min(100%, 440px);
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: var(--radius);
    background: var(--popup-bg, #fff);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.avatar-crop-modal__title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.35rem, 3vw, 1.6rem);
    font-weight: var(--fw-ui-strong);
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
}

.avatar-crop-modal__hint {
    margin: 0 0 var(--space-md);
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.avatar-crop-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-height: min(56vh, 380px);
    max-height: min(56dvh, 380px);
    margin: 0 auto;
    border-radius: calc(var(--radius) - 4px);
    background: color-mix(in srgb, var(--text) 9%, transparent);
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.avatar-crop-stage.is-dragging {
    cursor: grabbing;
}

.avatar-crop-image {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

.avatar-crop-frame {
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.16),
        0 0 0 9999px rgba(10, 9, 16, 0.55);
    pointer-events: none;
    box-sizing: border-box;
}

.avatar-crop-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.avatar-crop-zoom {
    width: 100%;
    accent-color: var(--text);
}

.avatar-crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* Declension overrides */
.declension-overrides {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.declension-overrides__title {
    font-size: var(--text-base);
    font-weight: var(--fw-ui-medium);
    margin-bottom: var(--space-xs);
}

.legal-profile-form--settings .declension-overrides--primary {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-requisites-details {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.legal-requisites-details > summary {
    cursor: pointer;
    font-weight: var(--fw-ui-medium);
    font-size: var(--text-base);
    list-style: none;
}

.legal-requisites-details > summary::-webkit-details-marker {
    display: none;
}

.legal-requisites-details > summary::before {
    content: "▸ ";
    color: var(--text-muted);
}

.legal-requisites-details[open] > summary::before {
    content: "▾ ";
}

.legal-requisites-details[open] > summary {
    margin-bottom: var(--space-sm);
}

.declension-override-row {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.declension-override-row input {
    flex: 1;
}

.declension-override-field--secondary {
    opacity: 0.55;
}

.required-mark {
    color: var(--red);
}

/* ── Settings – hyper-minimal ───────────────────────────────────────── */

.settings-stack {
    display: grid;
    gap: var(--space-md);
}

.settings-stack > .panel + .panel {
    margin-top: 0;
}

.settings-section--minimal {
    margin-bottom: 0;
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.settings-section--minimal::before {
    display: none;
}

.settings-section--minimal:hover {
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm);
}

.settings-section--minimal .settings-section__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    font-weight: var(--fw-ui);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.settings-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.settings-section__meta {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.settings-section__meta[data-ready="1"] {
    color: color-mix(in srgb, var(--green) 75%, var(--text-muted));
}

.settings-section__lead {
    margin: 0 0 var(--space-md);
    max-width: 40rem;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
    text-wrap: pretty;
}

.settings-section__email {
    color: var(--text);
    font-weight: var(--fw-ui);
}

.settings-section__hint {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.settings-form {
    display: grid;
    gap: var(--space-md);
}

.settings-form .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg) var(--space-lg);
}

@media (min-width: 640px) {
    .settings-form .form-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.settings-form .form-group {
    margin: 0;
    display: grid;
    gap: 0.2rem;
    align-content: start;
}

.settings-form .form-group > label,
.settings-form .form-group > legend {
    margin-bottom: 0;
    font-size: 0.6875rem;
    font-weight: var(--fw-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}

.settings-form .form-group input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])),
.settings-form .form-group select,
.settings-form .form-group textarea,
.settings-form .form-group .password-field__input {
    min-height: 40px;
    padding: 0.2rem 0 0.45rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--text-base);
    letter-spacing: -0.01em;
    transition: border-color 0.15s ease;
}

.settings-form .form-group input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])):hover,
.settings-form .form-group select:hover,
.settings-form .form-group textarea:hover,
.settings-form .form-group .password-field__input:hover {
    border-bottom-color: color-mix(in srgb, var(--text) 28%, transparent);
}

.settings-form .form-group input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])):focus,
.settings-form .form-group select:focus,
.settings-form .form-group textarea:focus,
.settings-form .form-group .password-field__input:focus {
    outline: none;
    border-bottom-color: color-mix(in srgb, var(--text) 55%, var(--blue));
    box-shadow: none;
}

.settings-form__avatar {
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.settings-form__avatar .image-upload-field {
    margin: 0;
}

.settings-form__avatar .image-upload-ui--quiet {
    padding: 0;
    border: 0;
}

.settings-form__submit {
    justify-self: start;
    margin-top: var(--space-xs);
}

.settings-backup-codes {
    margin: 0 0 var(--space-md);
    padding: var(--space-md) 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.settings-backup-codes__title {
    margin: 0 0 0.35rem;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.settings-backup-codes .settings-section__lead {
    margin-bottom: var(--space-sm);
}

.settings-backup-codes__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--space-xs) var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-backup-codes__list code {
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
}

/* ── Legal settings – hyper-minimal ─────────────────────────────────── */

.settings-section--legal {
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.settings-section--legal:hover {
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm);
}

.settings-section--legal .settings-section__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    font-weight: var(--fw-ui);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.legal-settings-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.legal-settings-head__status {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.legal-settings-head__status[data-ready="1"] {
    color: color-mix(in srgb, var(--green) 75%, var(--text-muted));
}

.legal-settings {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.legal-profile-form--settings .declension-overrides__intro {
    display: grid;
    gap: 0.35rem;
    margin-bottom: var(--space-md);
}

.legal-profile-form--settings .declension-overrides__title {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.legal-profile-form--settings .declension-overrides__hint {
    margin: 0;
    max-width: 36rem;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-muted);
}

.legal-profile-form--settings .declension-overrides__list {
    display: grid;
    gap: 0;
}

.legal-profile-form--settings .declension-override-field {
    margin: 0;
    padding: var(--space-sm) 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}

.legal-profile-form--settings .declension-override-field:first-child {
    border-top: 0;
    padding-top: 0;
}

.legal-profile-form--settings .declension-override-field:last-child {
    padding-bottom: 0;
}

.legal-profile-form--settings .declension-override-field > label {
    margin-bottom: 0.35rem;
    font-size: 0.6875rem;
    font-weight: var(--fw-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.legal-profile-form--settings .declension-override-row {
    gap: var(--space-sm);
}

.legal-profile-form--settings .declension-override-input {
    min-height: 44px;
    padding: 0.55rem 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--text-base);
    letter-spacing: -0.01em;
    transition: border-color 0.15s ease;
}

.legal-profile-form--settings .declension-override-input:hover {
    border-bottom-color: color-mix(in srgb, var(--text) 28%, transparent);
}

.legal-profile-form--settings .declension-override-input:focus {
    outline: none;
    border-bottom-color: color-mix(in srgb, var(--text) 55%, var(--blue));
    box-shadow: none;
}

.legal-profile-form--settings .declension-reset-btn {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 0.65rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--fw-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.legal-profile-form--settings .declension-reset-btn:hover {
    color: var(--text);
}

/* Preview – document fragment, not a card */
.legal-preview {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.legal-preview__kicker {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.legal-preview__stack {
    display: grid;
    gap: var(--space-md);
}

.legal-preview__text {
    margin: 0 0 var(--space-sm);
    line-height: 1.6;
    font-size: var(--text-sm);
}

.legal-preview__role {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.6875rem;
    font-weight: var(--fw-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.legal-profile-form--settings .legal-preview--settings,
.legal-profile-form--settings > .legal-settings > .legal-preview {
    margin: 0;
    padding: var(--space-md) 0 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 0;
    background: transparent;
}

.legal-profile-form--settings .legal-preview .legal-preview,
.legal-preview--settings > .legal-preview {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.legal-profile-form--settings .legal-preview__text,
.legal-preview--settings .legal-preview__text {
    margin: 0;
    max-width: 42rem;
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.65;
    text-wrap: pretty;
}

/* Requisites disclosure */
.legal-profile-form--settings .legal-requisites-details {
    margin: 0;
    padding: 0;
    border: 0;
}

.legal-profile-form--settings .legal-requisites-details > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    min-height: 44px;
    padding: var(--space-sm) 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    font-weight: var(--fw-ui);
    letter-spacing: -0.01em;
}

.legal-profile-form--settings .legal-requisites-details > summary::before {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.15rem;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.legal-profile-form--settings .legal-requisites-details[open] > summary::before {
    content: "";
    transform: rotate(45deg);
}

.legal-profile-form--settings .legal-requisites-details[open] > summary {
    margin-bottom: 0;
    border-bottom-color: transparent;
}

.legal-requisites-details__label {
    color: var(--text);
}

.legal-requisites-details__meta {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
}

.legal-requisites-details__body {
    padding: var(--space-md) 0 var(--space-sm);
}

.legal-profile-form--settings .legal-requisites-details__body .legal-section {
    margin: 0 0 var(--space-sm);
    padding: var(--space-sm) 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
    border-radius: 0;
    background: transparent;
}

.legal-profile-form--settings .legal-requisites-details__body .legal-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.legal-authority-chips {
    margin: 0;
}

.legal-identity-lock-hint {
    margin: 0 0 var(--space-sm);
}

.legal-profile-form--identity-locked input[data-identity-lock][readonly] {
    background: color-mix(in srgb, var(--text) 4%, var(--glass-bg));
    color: color-mix(in srgb, var(--text) 72%, transparent);
    cursor: default;
}

.legal-authority-chips.is-locked,
.filter-chip.is-locked {
    opacity: 0.72;
    pointer-events: none;
}

.legal-settings__actions {
    display: flex;
    justify-content: flex-start;
    padding-top: var(--space-xs);
}

/* MCHD verification status */
.mchd-status {
    display: grid;
    gap: 0.55rem;
    margin: var(--space-sm) 0 0;
    padding: var(--space-sm) 0 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.mchd-status--empty {
    display: none;
}

.mchd-status__file,
.mchd-status__result,
.mchd-status__protocol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
}

.mchd-status__label {
    flex: 0 0 4.5rem;
    font-size: 0.6875rem;
    font-weight: var(--fw-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mchd-status__value {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
}

.mchd-status__badge {
    font-weight: var(--fw-ui);
    color: var(--text-muted);
}

.mchd-status__badge--ok {
    color: color-mix(in srgb, var(--green) 80%, var(--text));
}

.mchd-status__badge--bad {
    color: color-mix(in srgb, var(--red) 85%, var(--text));
}

.mchd-status__meta {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.mchd-status__meta--bad {
    color: color-mix(in srgb, var(--red) 70%, var(--text-muted));
}

.mchd-status__link {
    color: var(--text);
    font-weight: var(--fw-ui);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in srgb, var(--text) 28%, transparent);
}

.mchd-status__link:hover {
    text-decoration-color: color-mix(in srgb, var(--text) 65%, transparent);
}

/* Landing page */
.page-landing .page-main {
    display: flex;
    flex-direction: column;
}

.page-landing .skip-link {
    display: none;
}

.page-landing :is(h2, h3),
.page-about :is(h2, h3) {
    font-size: 1.5em;
    font-weight: var(--fw-ui);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.landing-toolbar {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    /* backwards (not both): do not keep transform after the animation –
       a retained translateY(0) makes position:fixed descendants resolve
       against this narrow toolbar, so the notif panel opens off-screen. */
    animation: landing-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}

.landing-hero {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 0;
    padding: clamp(40px, 8vw, 88px) 0 clamp(var(--space-xl), 5vw, var(--space-2xl));
}

.landing-hero__inner {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
}

.landing-hero__brand {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(var(--space-md), 3vw, 28px);
    animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-hero__logo {
    color: var(--text);
}

.landing-hero__lead {
    margin: 0 auto clamp(28px, 5vw, 40px);
    max-width: 28rem;
    color: var(--text-muted);
    font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
    line-height: 1.55;
    letter-spacing: -0.01em;
    animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.landing-search {
    position: relative;
    width: min(100%, 28rem);
    margin-inline: auto;
    z-index: 80;
    animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}

@media (max-width: 640px) {
    .landing-search {
        width: min(86%, 21rem);
    }

    .landing-search__field input {
        min-height: 48px;
        font-size: var(--text-base);
        border-radius: 14px;
    }

    .landing-search--active .landing-search__field input {
        padding-right: 96px;
    }
}

.landing-search__field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 2;
}

.landing-search__field input {
    width: 100%;
    min-height: 54px;
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-2xl);
    border: 1px solid var(--input-border);
    border-radius: 16px;
    background: var(--input-bg);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-lg);
    box-shadow: 0 8px 28px -16px var(--glass-shadow);
    transition: padding-right 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-search--active .landing-search__field input {
    padding-right: 108px;
}

.landing-search__field input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--blue) 35%, var(--input-border));
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring), 0 10px 32px -14px var(--glass-shadow);
}

.landing-search__submit {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    min-height: 36px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-sm);
    animation: landing-submit-in 0.2s ease;
}

.landing-search__submit[hidden] {
    display: none !important;
}

@keyframes landing-submit-in {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(6px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes landing-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.landing-hero__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    margin-top: clamp(20px, 3.5vw, 28px);
    animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

.landing-search:has(.suggestions.open) ~ .landing-hero__actions {
    display: none;
}

.landing-hero__actions .btn-primary,
.landing-hero__actions .btn-ghost {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: var(--fw-ui);
    line-height: 1;
    box-shadow: none;
}

.landing-search .suggestions {
    text-align: left;
    z-index: 1200;
    background: var(--popup-bg);
}

/* How it works – numbered flow (Songfile-style, site visual language) */
.how-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .how-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg) var(--space-xl);
    }
}

.how-steps__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-sm);
    align-items: start;
    min-width: 0;
}

.how-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--blue-light);
    color: var(--blue);
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-strong);
    letter-spacing: -0.02em;
    line-height: 1;
}

.how-steps__body {
    min-width: 0;
    padding-top: 2px;
}

.how-steps__title {
    margin: 0 0 var(--space-2xs);
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: var(--fw-ui-medium);
    letter-spacing: -0.015em;
    line-height: 1.35;
}

.page-about .how-steps__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-ui-medium);
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.how-steps__text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.55;
}

.landing-info .how-steps {
    margin-top: var(--space-lg);
}

.landing-info {
    padding: clamp(var(--space-lg), 4vw, var(--space-2xl)) 0 clamp(40px, 6vw, 72px);
}

.about-page {
    padding-top: clamp(var(--space-xl), 5vw, 56px);
}

.landing-info__inner {
    max-width: 720px;
    margin-inline: auto;
}

.landing-info__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs) 20px;
    margin-bottom: var(--space-lg);
}

.landing-info__tab {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--text-base);
    cursor: pointer;
    transition: color 0.15s ease;
}

.landing-info__tab:hover,
.landing-info__tab:focus-visible {
    color: var(--text);
}

.landing-info__tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
    border-radius: 2px;
}

.landing-info__panels {
    min-height: 10rem;
}

.landing-info__title {
    margin: 0 0 var(--space-sm);
    color: var(--text);
}

.landing-info__text {
    margin: 0 0 var(--space-sm);
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.6;
}

.landing-info__actions.stack-actions {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

.landing-info__text:last-child {
    margin-bottom: 0;
}

.landing-faq {
    display: grid;
    gap: var(--space-md);
}

.landing-faq__item {
    display: grid;
    gap: var(--space-2xs);
}

.landing-faq__q {
    margin: 0;
    color: var(--text);
}

.landing-faq__a {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.6;
}

.landing-info__legal {
    margin: var(--space-lg) 0 0;
    text-align: center;
}

.landing-info__privacy-link,
.cookies-popup__link {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--blue);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.landing-info__privacy-link:hover,
.cookies-popup__link:hover {
    color: var(--blue-hover);
}

/* Cookies notice – top right, below landing user menu when present */
.cookies-popup {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    z-index: 2100;
    width: min(calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), 340px);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.cookies-popup--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cookies-popup__inner {
    padding: var(--space-md) var(--space-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--popup-bg);
    color: var(--popup-text);
    box-shadow: 0 12px 36px -10px var(--glass-shadow);
}

.cookies-popup__title {
    margin: 0 0 var(--space-xs);
    font-size: 1.5em;
    font-weight: var(--fw-ui);
    line-height: 1.3;
    color: var(--popup-text);
}

.cookies-popup__text {
    margin: 0 0 var(--space-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--popup-text-muted);
}

.cookies-popup__actions {
    display: flex;
    justify-content: flex-end;
}

/* Privacy modal – opaque, theme-aware */
.modal--privacy {
    width: min(100%, 560px);
    background: var(--popup-bg);
    color: var(--popup-text);
}

.modal--privacy__title {
    margin: 0 40px var(--space-md) 0;
    font-size: 1.5em;
    font-weight: var(--fw-ui);
    line-height: 1.3;
    color: var(--popup-text);
}

.modal--privacy__body {
    margin-bottom: 20px;
    max-height: min(55vh, 420px);
    max-height: min(55dvh, 420px);
    overflow-y: auto;
    color: var(--popup-text-muted);
    font-size: var(--text-base);
    line-height: 1.6;
}

.modal--privacy__body h3 {
    margin: var(--space-md) 0 var(--space-xs);
    color: var(--popup-text);
    font-size: 1.5em;
    font-weight: var(--fw-ui);
}

.modal--privacy__body p {
    margin: 0 0 var(--space-xs);
}

.modal--privacy__body p:last-child {
    margin-bottom: 0;
}

/* --- Work editor (create / edit) --- */

.page-section--work-edit .breadcrumb {
    margin-bottom: var(--space-sm);
}

.work-editor-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.work-editor-page-header__main {
    min-width: 0;
    flex: 1 1 16rem;
}

.work-editor-page-header h1 {
    margin: 0;
    font-size: clamp(1.35rem, 3.2vw, 1.75rem);
    font-weight: var(--fw-label);
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text);
}

.work-editor-page-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-xs);
    margin-top: var(--space-xs);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.work-editor-page-header__dot {
    color: var(--text-dim);
}

.work-editor-page-header__meta .badge {
    margin-left: 2px;
}

.work-editor-page-header__note {
    margin: var(--space-sm) 0 0;
    max-width: 40rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.work-editor-page-header__catalog {
    flex-shrink: 0;
    color: var(--blue);
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    text-decoration: none;
    white-space: nowrap;
}

.work-editor-page-header__catalog:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.work-editor-form.panel {
    padding: var(--space-lg);
}

.work-editor-form.panel:hover {
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm);
}

.work-editor-form.settings-section--minimal {
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.work-editor-form.settings-section--minimal:hover {
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm);
}

.work-editor-form.settings-section--minimal > .work-editor {
    margin-top: 0;
}

.work-editor {
    display: grid;
    grid-template-columns: minmax(148px, 200px) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
}

.work-editor__media {
    min-width: 0;
}

.work-editor__cover {
    margin-bottom: 0;
}

.work-editor__cover-ui {
    position: relative;
    width: 100%;
}

.work-editor__cover-hit {
    cursor: pointer;
    display: block;
    width: 100%;
    margin: 0;
}

.work-editor__cover-slot {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: calc(var(--radius) - 4px);
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--text) 3%, var(--glass-bg));
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.work-editor__cover-img,
.work-editor__cover-placeholder,
.work-editor__cover-overlay {
    position: absolute;
    inset: 0;
}

.work-editor__cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    border: 0;
    border-radius: inherit;
}

.work-editor__cover-slot.has-image .work-editor__cover-img {
    display: block;
}

.work-editor__cover-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: var(--text-muted);
    background: transparent;
}

.work-editor__cover-placeholder-text {
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    letter-spacing: -0.01em;
}

.work-editor__cover-slot.has-image .work-editor__cover-placeholder {
    display: none;
}

.work-editor__cover-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(24, 24, 27, 0.48);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.work-editor__cover-overlay-text {
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    letter-spacing: -0.01em;
}

.work-editor__cover-slot:not(.has-image) .work-editor__cover-overlay {
    display: none;
}

.work-editor__cover-hit:hover .work-editor__cover-slot:not(.has-image) {
    border-color: color-mix(in srgb, var(--blue) 28%, var(--glass-border));
    background: color-mix(in srgb, var(--blue-light) 35%, var(--glass-bg));
}

.work-editor__cover-hit:hover .work-editor__cover-slot:not(.has-image) .work-editor__cover-placeholder {
    color: var(--badge-text);
}

.work-editor__cover-hit:hover .work-editor__cover-slot.has-image .work-editor__cover-overlay,
.work-editor__cover-hit:focus-within .work-editor__cover-slot.has-image .work-editor__cover-overlay {
    opacity: 1;
}

.work-editor__cover.is-dragover .work-editor__cover-slot {
    border-color: color-mix(in srgb, var(--blue) 35%, var(--glass-border));
    border-style: dashed;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
    background: color-mix(in srgb, var(--blue-light) 45%, var(--glass-bg));
}

.work-editor__cover.is-dragover .work-editor__cover-placeholder {
    color: var(--badge-text);
}

.work-editor__cover.is-dragover .work-editor__cover-overlay {
    opacity: 0 !important;
}

.work-editor__cover-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.work-editor__cover-hint {
    margin: 0.55rem 0 0;
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--text-muted);
    text-align: center;
}

/* Multi-value tags (authors, genres) – flat chips + compose with + */
.name-tags__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    margin-bottom: 0.35rem;
}

.name-tags__chips[hidden] {
    display: none !important;
}

.name-tags__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--text-sm);
    line-height: 1.3;
    color: var(--text);
}

.name-tags__chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--fw-ui);
    opacity: 0.55;
}

.name-tags__chip-remove {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.name-tags__chip-remove:hover {
    color: var(--red, #b42318);
}

.name-tags__compose {
    position: relative;
    z-index: 3;
    overflow: visible;
}

.name-tags__input {
    width: 100%;
    min-height: 36px;
    padding: var(--space-xs) 2rem var(--space-xs) var(--space-sm);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    font-size: var(--text-base);
}

.name-tags__input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--blue) 35%, var(--input-border));
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.name-tags__add {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    z-index: 2;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--blue) 72%, var(--text-muted));
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.18s ease;
}

.name-tags__add:hover,
.name-tags__add:focus-visible {
    outline: none;
    color: var(--blue);
}

.name-tags__suggest {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 0.2rem);
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: 14rem;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--glass-border, color-mix(in srgb, var(--text) 12%, transparent));
    border-radius: var(--radius-sm, 10px);
    background: var(--popup-bg, var(--input-bg));
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

.name-tags__suggest[hidden] {
    display: none !important;
}

.name-tags__suggest-item {
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.35;
}

.name-tags__suggest-item:hover,
.name-tags__suggest-item.is-active {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .name-tags__suggest {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

.work-editor__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.work-editor__fields {
    display: grid;
    margin: 0;
    gap: var(--space-md) var(--space-lg);
}

.work-editor__fields > .form-group {
    margin-bottom: 0;
}

.work-editor__section {
    padding: 0;
    border: 0;
}

.work-editor__section--extra {
    padding-top: clamp(1rem, 2vw, 1.35rem);
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.work-editor__section-title {
    margin: 0 0 0.85rem;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    letter-spacing: -0.01em;
    color: var(--text-muted);
    text-transform: none;
}

.work-editor__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.work-editor__footer-lead {
    margin: 0;
    max-width: 28rem;
}

.work-editor__footer .form-group--checkbox {
    margin-bottom: 0;
}

.work-editor__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-left: auto;
}

@media (max-width: 640px) {
    .work-editor {
        grid-template-columns: 1fr;
    }

    .work-editor__media {
        max-width: 220px;
        margin-inline: auto;
    }

    .work-editor__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .work-editor__actions {
        margin-left: 0;
        width: 100%;
    }

    .work-editor__actions .btn-primary,
    .work-editor__actions .btn-ghost {
        flex: 1;
    }
}

/* --- Passport grid --- */
.passport-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.passport-grid__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.passport-grid__label {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-ui-medium);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.passport-grid__value {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    line-height: 1.45;
    word-break: break-word;
}

.passport-grid__value.mono {
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .passport-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md) var(--space-xl);
    }
}

/* --- Contributors accordion --- */
.contributors-accordion {
    margin: 0 0 var(--space-md);
}

.contributors-accordion .accordion-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-card);
    overflow: hidden;
}

.contributors-accordion--minimal {
    margin: 0;
}

.contributors-accordion--minimal .accordion-item {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.contributors-accordion--minimal .accordion-header {
    display: inline-flex;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: var(--space-xs);
    grid-template-columns: none;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui);
    color: var(--text-muted);
}

.contributors-accordion--minimal .accordion-header:hover {
    background: transparent;
    color: var(--text);
}

.contributors-accordion--minimal .accordion-header__meta {
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-dim);
    font-weight: var(--fw-ui);
}

.contributors-accordion--minimal .accordion-body {
    padding: var(--space-sm) 0 0;
}

.contributors-accordion--minimal .authors-list {
    gap: 0.15rem var(--space-sm);
}

.contributors-accordion--minimal .authors-list__row {
    display: block;
}

.contributors-accordion--minimal .authors-list__line {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text);
}

.contributors-accordion--minimal .authors-list__names {
    display: inline;
}

.contributors-accordion--minimal .authors-list__mark {
    color: var(--text-dim);
}

.contributors-accordion--minimal .authors-list__icon {
    display: block;
}

.product-authors .contributors-accordion--minimal {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-authors .contributors-accordion--minimal .accordion-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    max-width: 100%;
}

.product-authors .contributors-accordion--minimal .accordion-body {
    width: auto;
    max-width: 100%;
}

.product-authors .contributors-accordion--minimal .authors-list__row {
    text-align: center;
}

.product-authors .contributors-accordion--minimal .authors-list__line {
    text-align: center;
}

.accordion-header {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.75rem var(--space-md);
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: var(--fw-ui-strong);
    text-align: left;
    cursor: pointer;
    min-height: 48px;
}

.accordion-header:hover {
    background: var(--glass-hover);
}

.accordion-header__label {
    min-width: 0;
}

.accordion-header__meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--blue-light, rgba(37, 99, 235, 0.12));
    color: var(--blue);
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-strong);
    line-height: 1;
}

.accordion-header__chevron {
    color: var(--text-muted);
    transition: transform 0.18s ease;
}

.accordion-item.open .accordion-header__chevron {
    transform: rotate(180deg);
}

.accordion-body {
    display: none;
    padding: 0 var(--space-md) var(--space-md);
}

.accordion-item.open .accordion-body {
    display: block;
}

.authors-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.authors-list__row {
    display: block;
    min-width: 0;
}

.authors-list__line {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text);
}

.authors-list__names {
    display: inline;
}

.authors-list__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.12em;
    padding: 0;
    vertical-align: super;
    line-height: 0;
    color: var(--text-dim);
    position: relative;
    top: -0.15em;
}

.authors-list__icon {
    display: block;
    width: 0.85em;
    height: 0.85em;
    min-width: 11px;
    min-height: 11px;
}

@media (max-width: 480px) {
    .product-layout {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .product-identity {
        flex-direction: column;
        align-items: center;
    }

    .product-licensor-link__avatar,
    .product-licensor-link__mark {
        display: none;
    }

    .authors-list__row {
        display: block;
    }

    .license-pick.is-readonly {
        padding-inline: var(--space-sm);
    }
}

/* ── Admin table actions ─────────────────── */

.data-table__actions .btn-ghost{
    display: inline-block;
}

/* ── How-it-works cinematic tour (screen recording) ── */

.page-how {
    min-height: 100vh;
    min-height: 100dvh;
}

.page-how .site-footer {
    display: none !important;
}

.page-how .page-main {
    margin-top: calc(56px + env(safe-area-inset-top, 0px));
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.page-how .skip-link {
    z-index: 10001;
}

.nav--tour .how-tour-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.how-tour-seg {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--toggle-bg);
    border: 1px solid var(--border-light);
}

.how-tour-seg__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.how-tour-seg__btn.is-active {
    background: var(--popup-bg);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.how-tour {
    padding: calc(64px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
}

.how-tour__stage {
    position: relative;
    width: min(100%, 980px);
    aspect-ratio: 16 / 10;
    max-height: min(72vh, 640px);
    max-height: min(72dvh, 640px);
    height: min(72vh, 640px);
    height: min(72dvh, 640px);
}

/* Prefer explicit height so iframe/device screens don't collapse */
.page-how:not(.page-how-live) .how-tour__stage {
    height: min(72vh, 640px);
    height: min(72dvh, 640px);
}

.page-how:not(.page-how-live) .how-tour__stage:has(.how-device--mobile.is-active) {
    height: min(78vh, 720px);
    height: min(78dvh, 720px);
}

.how-device {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-card) 92%, white);
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 60px -28px var(--glass-shadow), 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.how-device[hidden] {
    display: none !important;
}

.how-device__chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.how-device__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray);
    opacity: 0.55;
}

.how-device__dot:nth-child(1) { background: #e28b8b; opacity: 0.9; }
.how-device__dot:nth-child(2) { background: #e0c06a; opacity: 0.9; }
.how-device__dot:nth-child(3) { background: #7dbe8e; opacity: 0.9; }

.how-device__url {
    margin-left: 10px;
    flex: 1;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--input-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
}

.how-device__screen {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(145deg, var(--bg-gradient-1), var(--bg-gradient-2) 55%, var(--bg-gradient-3));
}

.how-device--mobile {
    width: min(100%, 360px);
    left: 50%;
    transform: translateX(-50%);
    inset: 0 auto 0 auto;
    aspect-ratio: 9 / 19;
    max-height: min(78vh, 720px);
    max-height: min(78dvh, 720px);
    height: 100%;
    border-radius: 32px;
    border: 2px solid color-mix(in srgb, var(--text) 18%, var(--glass-border));
    box-shadow: 0 28px 64px -24px rgba(15, 12, 20, 0.35);
}

.how-tour__stage:has(.how-device--mobile.is-active) {
    aspect-ratio: auto;
    height: min(78vh, 720px);
    height: min(78dvh, 720px);
    width: min(100%, 400px);
}

.how-device--mobile .how-device__notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 18px;
    border-radius: 12px;
    background: #1a1720;
    z-index: 3;
}

.how-device--mobile .how-device__home {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text) 35%, transparent);
    z-index: 3;
}

.how-device--mobile .how-device__screen {
    border-radius: 28px;
    margin: 0;
}

.how-tour__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.how-tour__spotlight {
    position: absolute;
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--blue) 75%, white);
    box-shadow:
        0 0 0 9999px rgba(15, 18, 28, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.25) inset,
        0 8px 28px rgba(92, 122, 150, 0.25);
    transition: top 0.45s ease, left 0.45s ease, width 0.45s ease, height 0.45s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
}

.how-device--mobile .how-tour__spotlight {
    border-radius: 10px;
}

.how-tour__cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    color: #1f1a24;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    transition: opacity 0.2s ease;
    will-change: transform;
    pointer-events: none;
}

.how-tour__click {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(196, 77, 122, 0.85);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
}

.how-tour__click.is-on {
    animation: how-click 0.42s ease-out;
}

@keyframes how-click {
    0% { opacity: 0.9; transform: scale(0.35); }
    100% { opacity: 0; transform: scale(2.1); }
}

.how-tour__card {
    position: absolute;
    z-index: 4;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--popup-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 16px 40px -18px rgba(15, 12, 20, 0.45);
    color: var(--popup-text);
    transition: top 0.4s ease, left 0.4s ease;
    max-width: 300px;
}

.how-tour__step {
    margin: 0 0 4px;
    font-size: var(--text-xs);
    color: var(--popup-text-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.how-tour__title {
    margin: 0 0 6px;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--popup-text);
}

.how-tour__text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--popup-text-muted);
}

.how-tour__dots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.how-tour__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 18%, transparent);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, width 0.2s ease;
}

.how-tour__dot.is-done {
    background: color-mix(in srgb, var(--green) 70%, transparent);
}

.how-tour__dot.is-active {
    width: 22px;
    border-radius: 999px;
    background: var(--btn-primary-bg);
}

.how-tour__hint {
    margin: 0;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
    max-width: 42rem;
    line-height: 1.45;
}

body.how-tour--record .nav--tour,
body.how-tour--record .how-tour__hint,
body.how-tour--record .how-tour__dots {
    opacity: 0;
    pointer-events: none;
}

body.how-tour--record .how-tour {
    padding-top: 24px;
}

/* Mock UI inside device */

.how-ui {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--text);
}

.how-ui__screen {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.how-ui__screen[hidden] {
    display: none !important;
}

.how-ui__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.how-device--mobile .how-ui__nav {
    padding-top: 28px;
}

.how-ui__logo {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: -0.02em;
}

.how-ui__nav-links {
    display: flex;
    gap: 12px;
    color: var(--text-muted);
    font-size: 11px;
}

.how-ui__nav-links .is-on {
    color: var(--text);
    font-weight: 650;
}

.how-device--mobile .how-ui__nav-links {
    display: none;
}

.how-ui__nav-cart {
    position: relative;
    display: inline-flex;
    color: var(--text);
}

.how-ui__cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.how-ui__stepper {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--text-dim);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.how-ui__stepper .is-on {
    color: var(--blue);
    font-weight: 700;
    border-bottom: 2px solid var(--blue);
}

.how-ui__stepper .is-done {
    color: var(--green);
}

.how-device--mobile .how-ui__stepper {
    display: none;
}

.how-ui__body {
    padding: 12px 14px 16px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.how-ui__h1 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.how-ui__sub {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 11px;
}

.how-ui__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    margin-bottom: 14px;
}

.how-ui__search-icon {
    color: var(--text-muted);
    display: inline-flex;
}

.how-ui__search-text {
    flex: 1;
    min-width: 0;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.how-ui__search-btn {
    flex-shrink: 0;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
}

.how-ui__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.how-device--mobile .how-ui__grid {
    grid-template-columns: 1fr 1fr;
}

.how-device--mobile .how-ui__card--desk {
    display: none;
}

.how-ui__card {
    border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.how-ui__card.is-featured {
    box-shadow: 0 10px 24px -14px var(--glass-shadow);
}

.how-ui__cover {
    aspect-ratio: 1;
    border-radius: 10px;
    background: linear-gradient(145deg, #9eb6c9, #c9a0c4);
}

.how-ui__cover--b { background: linear-gradient(145deg, #7aa8b8, #d4b38a); }
.how-ui__cover--c { background: linear-gradient(145deg, #8faf9a, #b7c4e0); }
.how-ui__cover--sm {
    width: 40px;
    height: 40px;
    aspect-ratio: auto;
    flex-shrink: 0;
}

.how-ui__card-title {
    font-weight: 650;
    font-size: 12px;
    line-height: 1.2;
}

.how-ui__card-meta {
    color: var(--text-muted);
    font-size: 10px;
}

.how-ui__card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
}

.how-ui__pill {
    font-size: 10px;
    color: var(--badge-text);
    background: var(--badge-bg);
    border-radius: 999px;
    padding: 2px 7px;
}

.how-ui__pill--ok {
    color: var(--green);
    background: var(--green-light);
}

.how-ui__add {
    font-size: 10px;
    font-weight: 650;
    color: var(--btn-primary-text);
    background: var(--btn-primary-bg);
    border-radius: 7px;
    padding: 3px 7px;
}

.how-ui__cart-item {
    border-radius: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 12px;
    margin-bottom: 12px;
}

.how-ui__cart-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.how-ui__check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--blue);
    flex-shrink: 0;
    position: relative;
}

.how-ui__check.is-on::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 2px;
    background: var(--blue);
}

.how-ui__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.how-ui__badge {
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface);
}

.how-ui__badge.is-selected {
    background: var(--badge-bg);
    color: var(--badge-text);
    border-color: transparent;
    font-weight: 600;
}

.how-ui__summary,
.how-ui__panel,
.how-ui__doc {
    border-radius: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 12px;
}

.how-ui__summary {
    margin-top: 4px;
}

.how-ui__summary-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
}

.how-ui__summary-row--total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
    font-weight: 650;
}

.how-ui__cta {
    display: block;
    text-align: center;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 650;
    font-size: 12px;
}

.how-ui__cta--ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    margin-top: 12px;
}

.how-ui__panel {
    margin-bottom: 12px;
}

.how-ui__panel-title {
    font-weight: 650;
    margin-bottom: 8px;
}

.how-ui__field {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--border-light);
    font-size: 11px;
    color: var(--text-muted);
}

.how-ui__field strong {
    color: var(--text);
    font-weight: 600;
}

.how-ui__doc {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text);
}

.how-ui__doc p {
    margin: 0 0 8px;
}

.how-ui__doc-kicker {
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 10px;
    color: var(--text-muted);
}

.how-ui__doc-muted {
    color: var(--text-muted);
}

.how-ui__sign-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--border-light);
    font-size: 12px;
}

.how-ui__sign-row:first-child {
    border-top: 0;
}

.how-ui__success {
    margin: 12px 0 0;
    text-align: center;
    color: var(--green);
    font-weight: 650;
    font-size: 12px;
}

.how-ui__bottom {
    display: none;
    border-top: 1px solid var(--border-light);
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    font-size: 10px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--popup-bg) 90%, transparent);
}

.how-ui__bottom .is-on {
    color: var(--text);
    font-weight: 650;
}

.how-device--mobile .how-ui__bottom {
    display: flex;
}

@media (max-width: 720px) {
    .nav--tour .how-tour-controls {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .how-tour__stage:has(.how-device--desktop.is-active) {
        aspect-ratio: 4 / 5;
        max-height: none;
        height: min(70vh, 560px);
        height: min(70dvh, 560px);
    }

    .how-device--desktop .how-ui__grid {
        grid-template-columns: 1fr 1fr;
    }

    .how-device--desktop .how-ui__card--desk {
        display: none;
    }

    .how-device--desktop .how-ui__nav-links {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .how-tour__spotlight,
    .how-tour__card,
    .how-tour__dot {
        transition: none !important;
    }

    .how-tour__click.is-on {
        animation: none;
        opacity: 0;
    }
}

/* ── How-live: real UI tour in device iframe ── */

.page-how-live .how-tour {
    width: 100%;
}

.page-how-live .how-live__stage {
    position: relative;
    width: min(100%, 980px);
    height: min(72vh, 640px);
    height: min(72dvh, 640px);
    aspect-ratio: auto;
    margin: 0 auto;
}

.page-how-live .how-live__stage[data-device="mobile"] {
    width: min(100%, 390px);
    height: min(78vh, 760px);
    height: min(78dvh, 760px);
}

.page-how-live .how-live__device {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: auto;
    left: 0;
    right: 0;
    transform: none;
    max-height: none;
    height: auto;
    aspect-ratio: auto;
}

.page-how-live .how-live__device--desktop {
    border-radius: 18px;
}

.page-how-live .how-live__device--mobile {
    border-radius: 32px;
    border: 2px solid color-mix(in srgb, var(--text) 18%, var(--glass-border));
}

.page-how-live .how-live__device--desktop .how-live__chrome-mob,
.page-how-live .how-live__device--mobile .how-live__chrome-desk {
    display: none !important;
}

.page-how-live .how-live__device--mobile .how-live__chrome-mob.how-device__notch {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.page-how-live .how-live__device--mobile .how-live__chrome-mob.how-device__home {
    display: block;
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.page-how-live .how-live__viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-main);
}

.page-how-live .how-live__device--mobile .how-live__viewport {
    border-radius: 28px;
}

.page-how-live .how-live__frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
    background: var(--bg-main);
}

.page-how-live-app {
    min-height: 100vh;
    min-height: 100dvh;
}

.page-how-live-app .site-footer,
.page-how-live-app .skip-link {
    display: none !important;
}

.page-how-live-app .page-main {
    padding-bottom: 0;
}

/* Keep ambient orbs subtle inside the tour iframe */
.page-how-live-app .elmsflame {
    opacity: 0.55;
}

.page-how-live-app .how-tour__overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    border-radius: 0;
    overflow: hidden;
    pointer-events: none;
}

.page-how-live-app .how-tour__spotlight {
    position: fixed;
    pointer-events: none;
}

.page-how-live-app .how-tour__cursor,
.page-how-live-app .how-tour__card {
    position: fixed;
    pointer-events: none;
}

.how-live-panel[hidden] {
    display: none !important;
}

.how-live-app {
    position: relative;
    min-height: 50vh;
    min-height: 50dvh;
}

.nav-user-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.custom-select-like {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text);
    font-size: var(--text-base);
}

.how-live-doc {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
    max-height: 280px;
    overflow: auto;
    background: color-mix(in srgb, var(--popup-bg) 92%, transparent);
}

.how-live-doc p {
    margin: 0 0 var(--space-sm);
}

.how-live-doc__kicker {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.how-live-success {
    margin-top: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--green);
    font-weight: 650;
    font-size: var(--text-base);
}

.page-how-live-app .contract-preview-wrap {
    margin-bottom: var(--space-md);
}

@media (max-width: 720px) {
    .page-how-live .how-live__stage[data-device="desktop"] {
        height: min(70vh, 560px);
        height: min(70dvh, 560px);
    }
}

/* ── How-it-works landing ── */
.page-how-landing .page-main {
    margin-top: 0;
    display: flex;
    flex-direction: column;
}

.page-how-landing .skip-link {
    display: none;
}

.how-landing-kicker {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
}

.how-landing-kicker--section {
    margin-bottom: var(--space-xs);
}

.how-landing-hero__brand {
    margin-bottom: var(--space-md);
}

.how-landing-hero__logo {
    color: var(--text);
}

.how-landing-hero__title {
    margin: 0 0 var(--space-md);
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    font-weight: var(--fw-label);
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--text);
    animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both;
}

.how-landing-br {
    display: none;
}

.how-landing-hero__lead {
    max-width: 32rem;
}

.how-landing-hero__search {
    max-width: 520px;
    margin-inline: auto;
    text-align: left;
}

.how-landing-hero__actions {
    margin-top: clamp(20px, 3.5vw, 28px);
}

.how-landing-band {
    padding: clamp(var(--space-2xl), 7vw, 88px) 0;
}

.how-landing-band--tint {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--blue-light) 35%, transparent), transparent 100%);
}

.how-landing-band--cta {
    padding-bottom: clamp(56px, 10vw, 112px);
}

.how-landing-head {
    max-width: 640px;
    margin: 0 auto clamp(var(--space-xl), 4vw, var(--space-2xl));
    text-align: center;
}

.how-landing-head--left {
    margin-inline: 0;
    text-align: left;
}

.how-landing-head__title {
    margin: 0 0 var(--space-sm);
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.how-landing-head__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.6;
}

/* Three step cards */
.how-flow-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    max-width: 1040px;
    margin-inline: auto;
    position: relative;
}

.how-flow-card {
    position: relative;
    padding: clamp(var(--space-lg), 3vw, var(--space-xl));
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.how-flow-card:hover {
    box-shadow: 0 10px 24px -20px var(--glass-shadow);
    border-color: color-mix(in srgb, var(--blue) 18%, var(--glass-border));
    background: color-mix(in srgb, var(--blue-light) 10%, var(--popup-bg));
}

.how-flow-card__num {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-md);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: var(--fw-label);
    line-height: 1;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--blue) 12%, transparent);
    pointer-events: none;
    user-select: none;
}

.how-flow-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-md);
    border-radius: 12px;
    background: var(--blue-light);
    color: var(--blue);
}

.how-flow-card__icon svg {
    width: 22px;
    height: 22px;
}

.how-flow-card__title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-xl);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.how-flow-card__text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* Demo feature block */
.how-demo-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
    gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
    align-items: center;
    padding: clamp(var(--space-xl), 4vw, var(--space-2xl));
    max-width: 980px;
    margin-inline: auto;
    overflow: hidden;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--blue-light) 55%, var(--popup-bg)), var(--popup-bg));
}

.how-demo-feature__title {
    margin: 0 0 var(--space-sm);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.how-demo-feature__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: 36ch;
}

.how-demo-feature__actions {
    margin-top: var(--space-lg);
}

.how-demo-feature__visual {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
}

.how-pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs) var(--space-xs);
    padding: var(--space-lg);
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--popup-bg) 92%, transparent);
}

.how-pipeline__node {
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.how-pipeline__node--accent {
    background: var(--btn-primary-bg);
    border-color: transparent;
    color: var(--btn-primary-text);
}

.how-pipeline__line {
    flex: 0 0 12px;
    height: 1px;
    background: linear-gradient(90deg, var(--glass-border), color-mix(in srgb, var(--blue) 40%, var(--glass-border)));
}

.how-demo-feature__caption {
    margin: 0;
    text-align: center;
    color: var(--text-dim);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
}

/* Benefits bento */
.how-benefits-bento {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-md);
    max-width: 980px;
    margin-inline: auto;
}

.how-benefits-bento__item {
    grid-column: span 2;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.how-benefits-bento__item:hover {
    box-shadow: 0 10px 22px -20px var(--glass-shadow);
    background: color-mix(in srgb, var(--blue-light) 10%, var(--popup-bg));
}

.how-benefits-bento__item--wide {
    grid-column: span 3;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--blue-light) 40%, var(--popup-bg)), var(--popup-bg));
}

.how-benefits-bento__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--blue-light);
    color: var(--blue);
    margin-bottom: var(--space-2xs);
}

.how-benefits-bento__icon svg {
    width: 18px;
    height: 18px;
}

.how-benefits-bento__name {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 650;
    letter-spacing: -0.015em;
}

.how-benefits-bento__text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* Detail panel */
.how-detail-panel {
    max-width: 880px;
    margin-inline: auto;
    padding: clamp(var(--space-xl), 4vw, var(--space-2xl));
}

.page-how-landing .how-steps {
    margin-top: var(--space-lg);
    gap: var(--space-sm);
}

.page-how-landing .how-steps__item {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.page-how-landing .how-steps__item:hover {
    background: color-mix(in srgb, var(--blue-light) 35%, transparent);
    border-color: color-mix(in srgb, var(--blue) 12%, var(--glass-border));
}

.page-how-landing .how-steps__num {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
}

/* FAQ */
.how-landing-faq__wrap {
    max-width: 720px;
}

.how-landing-faq {
    display: grid;
    gap: var(--space-xs);
}

.how-landing-faq__item {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--popup-bg);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.how-landing-faq__item[open] {
    border-color: color-mix(in srgb, var(--blue) 22%, var(--glass-border));
    box-shadow: 0 8px 24px -16px var(--glass-shadow);
}

.how-landing-faq__q {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.how-landing-faq__q::-webkit-details-marker {
    display: none;
}

.how-landing-faq__q::after {
    content: '+';
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--blue-light);
    color: var(--blue);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: transform 0.2s ease;
}

.how-landing-faq__item[open] .how-landing-faq__q::after {
    content: '−';
}

.how-landing-faq__a {
    padding: 0 var(--space-lg) var(--space-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.how-landing-faq__a p {
    margin: 0;
}

/* CTA */
.how-landing-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    max-width: 880px;
    margin-inline: auto;
    padding: clamp(var(--space-xl), 4vw, var(--space-2xl));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--blue) 14%, var(--popup-bg)), var(--popup-bg));
}

.how-landing-cta__title {
    margin: 0 0 var(--space-xs);
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.how-landing-cta__text {
    margin: 0;
    max-width: 36ch;
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.55;
}

@media (min-width: 640px) {
    .how-landing-br {
        display: inline;
    }
}

@media (max-width: 900px) {
    .how-flow-cards {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .how-benefits-bento {
        grid-template-columns: 1fr;
    }

    .how-benefits-bento__item,
    .how-benefits-bento__item--wide {
        grid-column: auto;
    }

    .how-demo-feature {
        grid-template-columns: 1fr;
    }

    .how-demo-feature__visual {
        order: -1;
    }
}

@media (max-width: 767px) {
    .how-landing-head--left {
        text-align: center;
    }

    .how-landing-cta {
        flex-direction: column;
        text-align: center;
    }

    .how-landing-cta__actions {
        justify-content: center;
        width: 100%;
    }

    .how-demo-feature__actions {
        justify-content: center;
    }
}

/* ── Contract template editor ───────────────────────────────────── */

.cte-page .cte-container {
    max-width: none;
}

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

.cte-bar {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
}

.cte-bar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.cte-bar__hint {
    margin: var(--space-sm) 0 0;
}

.cte-toolbar__tabs {
    display: flex;
    gap: 4px;
}

.cte-tab {
    appearance: none;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.cte-tab.is-active {
    background: var(--surface-raised, var(--bg));
    color: var(--text);
    border-color: var(--text-muted);
}

.cte-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.cte-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.cte-select {
    font: inherit;
    font-size: var(--text-sm);
    padding: 4px 8px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}

.cte-layout {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

@media (max-width: 960px) {
    .cte-layout {
        grid-template-columns: 1fr;
    }
}

.cte-hints {
    padding: var(--space-md);
    position: sticky;
    top: var(--space-md);
    max-height: calc(100vh - 120px);
    overflow: auto;
}

.cte-hints__title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-md);
}

.cte-hints__lead {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.cte-hints__search {
    width: 100%;
    margin-bottom: var(--space-sm);
    font: inherit;
    font-size: var(--text-sm);
    padding: 6px 8px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}

.cte-hint-group {
    margin-bottom: var(--space-md);
}

.cte-hint-group__title {
    margin: 0 0 6px;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.cte-hint {
    display: block;
    width: 100%;
    text-align: left;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.cte-hint:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.cte-main {
    min-width: 0;
}

.cte-pane[hidden] {
    display: none !important;
}

.cte-source--main {
    width: 100%;
    min-height: min(70vh, 820px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.45;
    padding: var(--space-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--text);
    resize: vertical;
    tab-size: 2;
}

.cte-err {
    margin-bottom: var(--space-sm);
    color: #b42318;
    font-size: var(--text-sm);
}

.cte-preview-status {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-muted);
    min-height: 1.2em;
}

.cte-desk--preview {
    padding: var(--space-sm);
    min-height: min(70vh, 820px);
    overflow: auto;
    background: #eef1f5;
}

.cte-preview-frame {
    width: 100%;
    min-height: min(68vh, 780px);
    border: 0;
    background: #eef1f5;
}

/* ── Internal messages ─────────────────────────────────────────── */

.msg-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.msg-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.msg-list__search {
    margin-bottom: var(--space-sm);
}

.msg-list__search input {
    width: 100%;
    min-height: 36px;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-base);
}

.msg-list__item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
}

.msg-list__item:hover {
    background: var(--glass-hover);
}

.msg-list__item.is-active {
    background: var(--blue-light);
    border-color: color-mix(in srgb, var(--blue) 24%, var(--glass-border));
}

.msg-list__item.is-unread .msg-list__name,
.msg-list__item.is-unread .msg-list__preview {
    font-weight: 700;
    color: var(--text);
}

.msg-list__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.msg-list__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    align-items: baseline;
}

.msg-list__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-list__time {
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-shrink: 0;
}

.msg-list__work,
.msg-list__preview,
.msg-list__empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-list__empty {
    padding: var(--space-sm) 0;
    white-space: normal;
}

.msg-pane {
    min-width: 0;
    padding: var(--space-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--surface);
}

.msg-pane__header {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-light);
}

.msg-pane__back {
    display: none;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.msg-pane__who {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.msg-pane__name {
    font-weight: 700;
}

.msg-pane__role,
.msg-pane__context {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.msg-pane__context {
    margin: var(--space-xs) 0 0;
}

.msg-pane__empty {
    color: var(--text-muted);
    padding: var(--space-lg) 0;
}

.msg-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 8rem;
}

.msg-thread__empty {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.msg {
    max-width: 40rem;
}

.msg--own {
    margin-left: auto;
}

.msg__meta {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.msg--own .msg__meta {
    justify-content: flex-end;
}

.msg__body {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    white-space: normal;
    overflow-wrap: anywhere;
}

.msg--own .msg__body {
    background: var(--blue-light);
    border-color: color-mix(in srgb, var(--blue) 20%, var(--glass-border));
}

.msg-compose {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}

.msg-compose .form-group {
    margin-bottom: var(--space-sm);
}

.msg-compose textarea {
    min-height: 6rem;
    resize: vertical;
}

.cabinet-nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}

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

    .msg-layout--open .msg-list {
        display: none;
    }

    .msg-layout:not(.msg-layout--open) .msg-pane {
        display: none;
    }

    .msg-pane__back {
        display: inline-block;
    }

    .msg-pane {
        padding: 0;
        border: 0;
        background: transparent;
        border-radius: 0;
    }
}

/* ── Placement reuses auth/register shell ─────────────────────── */
.page-placement .register-actions {
    justify-content: space-between;
    width: 100%;
}

.page-placement .register-actions--start {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-sm);
}

/* Form wrapper must not become its own flex row – only the controls matter. */
.page-placement .register-actions--start .register-form--inline {
    display: contents;
}

.page-placement .register-actions--start .btn-primary,
.page-placement .register-actions--start .btn-ghost {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

@media (max-width: 420px) {
    .page-placement .register-actions--start {
        flex-wrap: wrap;
    }
}

.page-placement .register-actions [hidden] {
    display: none !important;
}

.page-placement .register-actions .btn-primary,
.page-placement .register-actions .btn-ghost {
    flex: 0 1 auto;
    min-width: 0;
}

.page-placement .placement-single-form {
    gap: var(--space-xl);
}

.page-placement .placement-single-form__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.page-placement .placement-single-form__stack[hidden] {
    display: none !important;
}

.page-placement .placement-single-form__stack > .form-group,
.page-placement .placement-single-form__stack > [data-work-types] > .form-group {
    margin-bottom: 0;
}

.page-placement .placement-cover {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    width: 100%;
}

.page-placement .placement-cover .work-editor__cover-ui,
.page-placement .placement-cover .work-editor__cover-hit,
.page-placement .placement-cover .work-editor__cover-slot {
    width: 100%;
    height: auto;
}

.page-placement .placement-cover .work-editor__cover-slot {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
}

.page-placement .placement-cover .form-hint {
    display: none;
}

.page-placement .placement-cover__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.page-placement .placement-cover__caption {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.page-placement .placement-cover__hint {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    opacity: 0.75;
}

.page-placement .placement-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.page-placement .placement-type-chips .filter-chip {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

/* Ways editor – placement: chips + one open panel */
.page-placement .placement-ways {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.page-placement .placement-ways__hint {
    margin: 0;
}

/* Ways chips – magma blobs under glass */
@keyframes ways-chip-magma {
    0%,
    100% {
        transform: translate(12%, -8%) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(-6%, 14%) scale(1.18) rotate(28deg);
    }
    66% {
        transform: translate(22%, 6%) scale(0.9) rotate(-18deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-placement .placement-ways__chip::before,
    .page-work-edit .work-ways__chip::before {
        animation: none;
    }
}

.page-placement .placement-ways__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 0.55rem 0.65rem;
    width: 100%;
    max-width: 36rem;
    margin: 0;
    padding: 0.35rem;
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
}

.page-placement .placement-ways__chip {
    --ways-chip-magma: color-mix(in srgb, var(--ways-chip-accent, transparent) 55%, #ff9f5a);
    position: relative;
    isolation: isolate;
    min-height: 30px;
    padding: 0.28rem 0.8rem;
    border-radius: 999px;
    max-width: 100%;
    overflow: hidden;
    border: 0 !important;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--font-sans);
    font-weight: var(--fw-ui);
    transition: opacity 0.15s ease;
}

.page-placement .placement-ways__chip:hover,
.page-placement .placement-ways__chip.is-selected,
.page-placement .placement-ways__chip.is-selected:hover,
.page-placement .placement-ways__chip:focus-visible {
    border: 0 !important;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
}

/* Magma under glass – soft blobs inset (no filter:blur = no clip-edge halo) */
.page-placement .placement-ways__chip::before {
    content: "";
    position: absolute;
    inset: 18% 10% 18% 40%;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 30% 40%,
            color-mix(in srgb, #fff 70%, var(--ways-chip-accent, transparent)) 0%,
            transparent 55%
        ),
        radial-gradient(
            circle at 70% 60%,
            color-mix(in srgb, var(--ways-chip-accent, transparent) 65%, var(--ways-chip-magma)) 0%,
            transparent 60%
        ),
        radial-gradient(
            circle at 55% 25%,
            color-mix(in srgb, var(--ways-chip-magma) 50%, transparent) 0%,
            transparent 62%
        );
    opacity: 0.55;
    transform-origin: 60% 40%;
    animation: ways-chip-magma 10s ease-in-out infinite;
}

.page-placement .placement-ways__chip:nth-child(3n + 1)::before {
    animation-delay: -2.4s;
}

.page-placement .placement-ways__chip:nth-child(3n + 2)::before {
    animation-delay: -6.1s;
}

html[data-theme="dark"] .page-placement .placement-ways__chip::before {
    opacity: 0.7;
}

/* Nav-like glass plate – soft sheen, no outer shadow */
.page-placement .placement-ways__chip::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
        linear-gradient(
            color-mix(in srgb, var(--text) 8%, transparent),
            color-mix(in srgb, var(--text) 8%, transparent)
        ),
        var(--nav-bg);
    backdrop-filter: blur(var(--nav-blur, 16px)) saturate(var(--nav-saturate, 1.2));
    -webkit-backdrop-filter: blur(var(--nav-blur, 16px)) saturate(var(--nav-saturate, 1.2));
    box-shadow: none;
    opacity: 0.94;
}

.page-placement .placement-ways__chip.is-selected::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 58%),
        linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)),
        var(--nav-bg);
    opacity: 1;
}

html[data-theme="dark"] .page-placement .placement-ways__chip::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 58%),
        linear-gradient(
            color-mix(in srgb, #000 22%, transparent),
            color-mix(in srgb, #000 22%, transparent)
        ),
        var(--nav-bg);
    opacity: 0.92;
}

html[data-theme="dark"] .page-placement .placement-ways__chip.is-selected::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 58%),
        linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)),
        var(--nav-bg);
    opacity: 1;
}

.page-placement .placement-ways__chip > * {
    position: relative;
    z-index: 1;
}

.page-placement .placement-ways__chip--short {
    padding-inline: 0.95rem;
    font-size: 0.8125rem;
}

.page-placement .placement-ways__chip--long {
    padding-inline: 0.7rem;
}

.page-placement .placement-ways__chip .filter-chip__text {
    max-width: min(16rem, 72vw);
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: inherit;
    font-weight: inherit;
}

.page-placement .placement-ways__chip--locked {
    --ways-chip-accent: var(--skyblue, #055096);
    --ways-chip-magma: #7dd3fc;
    font-weight: var(--fw-ui-strong);
}

html[data-theme="dark"] .page-placement .placement-ways__chip--locked {
    --ways-chip-accent: var(--skyblue-light, #36a2d3);
    --ways-chip-magma: #bae6fd;
}

.page-placement .placement-ways__chip--on {
    --ways-chip-accent: var(--green, #3f8f63);
    --ways-chip-magma: #86efac;
}

.page-placement .placement-ways__chip--off {
    --ways-chip-accent: var(--red, #b65c5c);
    --ways-chip-magma: #fb923c;
}

.page-placement .placement-way--draft {
    opacity: 0.72;
}

.page-placement .placement-way--draft .placement-way__controls {
    opacity: 0.55;
}

.page-placement .placement-ways__list {
    display: block;
    overflow: visible;
}

.page-placement .placement-way {
    padding: 0.9rem 0 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    overflow: visible;
}

.page-placement .placement-way__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.page-placement .placement-way__top--with-switch {
    align-items: flex-end;
}

.page-placement .placement-way__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 0.75rem;
    margin: 0;
    min-height: 1.4rem;
}

.page-placement .placement-way__name {
    font-weight: 600;
    font-size: 0.95rem;
}

.page-placement .placement-way__name-input {
    width: 100%;
}

.page-placement .placement-way__locked {
    flex-shrink: 0;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    padding-top: 0.2rem;
}

.page-placement .placement-way__remove {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.35rem;
}

.page-placement .placement-way__remove:hover {
    color: var(--red, #b42318);
}

.page-placement .placement-way__desc {
    margin: 0.45rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.page-placement .placement-way__cond-hint {
    margin: 0;
    max-width: 36rem;
}

.page-placement .placement-way__value-hint,
.page-placement .placement-way__duration-hint {
    margin: var(--space-2xs) 0 0;
    max-width: 16rem;
}

.page-placement .placement-way__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.85rem;
    align-items: start;
    overflow: visible;
}

.page-placement .placement-way__metric {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.page-placement .placement-way__metric--wide {
    grid-column: 1 / -1;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.page-placement .placement-way__value-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.page-placement .placement-way__value-wrap--territory {
    gap: 0.45rem;
    overflow: visible;
    position: relative;
}

.page-placement .placement-way__value-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.page-placement .placement-way__kind,
.page-placement .placement-way__value,
.page-placement .placement-way__duration,
.page-placement .placement-way__territory,
.page-placement .way-territory__search {
    width: 100%;
    min-width: 0;
    min-height: 40px;
}

.page-placement .placement-way__metric > .custom-select {
    width: 100%;
}

.page-placement .placement-way__metric .custom-select__trigger {
    min-height: 40px;
    border-radius: 10px;
}

.page-placement .way-territory {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: relative;
    z-index: 2;
    overflow: visible;
}

.page-placement .way-territory__selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
}

.page-placement .way-territory__selected[hidden] {
    display: none !important;
}

.page-placement .way-territory__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    font-size: var(--text-sm);
    line-height: 1.3;
    color: var(--text);
}

.page-placement .way-territory__chip-text {
    font-weight: 550;
}

.page-placement .way-territory__chip-remove {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.page-placement .way-territory__chip-remove:hover {
    color: var(--red, #b42318);
}

.page-placement .way-territory__compose {
    position: relative;
    z-index: 3;
    overflow: visible;
}

.page-placement .way-territory__suggest {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 0.2rem);
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: 14rem;
    overflow: auto;
    border: 1px solid var(--glass-border, color-mix(in srgb, var(--text) 12%, transparent));
    border-radius: var(--radius-sm);
    background: var(--popup-bg);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

.page-placement .way-territory__suggest[hidden] {
    display: none !important;
}

.page-placement .way-territory__suggest-item {
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    font-size: var(--text-sm);
}

.page-placement .way-territory__suggest-item:hover,
.page-placement .way-territory__suggest-item.is-active {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

.page-placement .way-territory-chips {
    margin-bottom: 0.15rem;
}

.page-placement .way-territory-chips .filter-chip {
    min-height: 32px;
    padding: 0.3rem 0.7rem;
}

.page-placement .placement-way__kind-label {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--text) 3%, var(--input-bg));
    color: var(--text);
    font-size: 0.875rem;
}

.page-placement .placement-way__affix {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    overflow: hidden;
}

.page-placement .placement-way__affix:focus-within {
    border-color: color-mix(in srgb, var(--blue) 35%, var(--input-border));
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.page-placement .placement-way__affix-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-variant-numeric: tabular-nums;
}

.page-placement .placement-way__affix-input:focus {
    outline: none;
}

.page-placement .placement-way__affix-suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0 0.65rem;
    border-left: 1px solid var(--input-border);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.page-placement .placement-ways__add,
.page-placement .placement-ways__save {
    align-self: flex-start;
    margin-top: 0.15rem;
}

.page-placement .placement-ways__save-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.page-placement .placement-ways__save-wrap[hidden] {
    display: none !important;
}

.page-placement .placement-ways__save-hint {
    margin: 0;
    max-width: 28rem;
}

.page-placement .placement-ways__save.is-saved {
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 36%, var(--input-border));
}

.page-placement .placement-ways__save.is-flash {
    transform: scale(1.02);
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.page-placement .placement-ways__chip--add {
    --ways-chip-accent: transparent;
    border: 1px dashed color-mix(in srgb, var(--text) 28%, transparent) !important;
    color: var(--text-muted);
}

.page-placement .placement-ways__chip--add::before,
.page-placement .placement-ways__chip--add::after {
    display: none;
}

.page-placement .placement-ways__chip--add:hover,
.page-placement .placement-ways__chip--add.is-selected {
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 45%, transparent) !important;
}

.page-placement .placement-way__legal {
    margin: 0.65rem 0 0;
}

.page-placement .placement-way__legal-input {
    width: 100%;
    min-height: 6rem;
    resize: vertical;
}

.page-placement .register-actions {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.page-placement .register-actions [data-placement-back]:not([hidden]) + [data-placement-submit],
.page-placement .register-actions [data-placement-next] {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 520px) {
    .page-placement .placement-way__controls {
        grid-template-columns: 1fr;
    }

    .page-placement .placement-way__metric--wide {
        grid-column: auto;
    }
}

/* Ways editor – work edit: chips switcher + single open editor */
.page-work-edit .work-ways__nav {
    margin-bottom: var(--space-lg);
}

.page-work-edit .work-ways__hint {
    margin: 0 0 var(--space-sm);
}

.page-work-edit .work-ways .settings-section__head {
    margin-bottom: var(--space-xs);
}

.page-work-edit .work-ways__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.65rem;
    width: 100%;
    max-width: 40rem;
    margin: 0;
    padding: 0.35rem;
    overflow: visible;
}

.page-work-edit .work-ways__chip {
    --ways-chip-magma: color-mix(in srgb, var(--ways-chip-accent, transparent) 55%, #ff9f5a);
    position: relative;
    isolation: isolate;
    min-height: 30px;
    padding: 0.28rem 0.8rem;
    max-width: 100%;
    overflow: hidden;
    border: 0 !important;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--font-sans);
    font-weight: var(--fw-ui);
    transition: opacity 0.15s ease;
}

.page-work-edit .work-ways__chip:hover,
.page-work-edit .work-ways__chip.is-selected,
.page-work-edit .work-ways__chip.is-selected:hover,
.page-work-edit .work-ways__chip:focus-visible {
    border: 0 !important;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
}

.page-work-edit .work-ways__chip::before {
    content: "";
    position: absolute;
    inset: 18% 10% 18% 40%;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 30% 40%,
            color-mix(in srgb, #fff 70%, var(--ways-chip-accent, transparent)) 0%,
            transparent 55%
        ),
        radial-gradient(
            circle at 70% 60%,
            color-mix(in srgb, var(--ways-chip-accent, transparent) 65%, var(--ways-chip-magma)) 0%,
            transparent 60%
        ),
        radial-gradient(
            circle at 55% 25%,
            color-mix(in srgb, var(--ways-chip-magma) 50%, transparent) 0%,
            transparent 62%
        );
    opacity: 0.55;
    transform-origin: 60% 40%;
    animation: ways-chip-magma 10s ease-in-out infinite;
}

.page-work-edit .work-ways__chip:nth-child(3n + 1)::before {
    animation-delay: -2.4s;
}

.page-work-edit .work-ways__chip:nth-child(3n + 2)::before {
    animation-delay: -6.1s;
}

html[data-theme="dark"] .page-work-edit .work-ways__chip::before {
    opacity: 0.7;
}

.page-work-edit .work-ways__chip::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
        linear-gradient(
            color-mix(in srgb, var(--text) 8%, transparent),
            color-mix(in srgb, var(--text) 8%, transparent)
        ),
        var(--nav-bg);
    backdrop-filter: blur(var(--nav-blur, 16px)) saturate(var(--nav-saturate, 1.2));
    -webkit-backdrop-filter: blur(var(--nav-blur, 16px)) saturate(var(--nav-saturate, 1.2));
    box-shadow: none;
    opacity: 0.94;
}

.page-work-edit .work-ways__chip.is-selected::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 58%),
        linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)),
        var(--nav-bg);
    opacity: 1;
}

html[data-theme="dark"] .page-work-edit .work-ways__chip::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 58%),
        linear-gradient(
            color-mix(in srgb, #000 22%, transparent),
            color-mix(in srgb, #000 22%, transparent)
        ),
        var(--nav-bg);
    opacity: 0.92;
}

html[data-theme="dark"] .page-work-edit .work-ways__chip.is-selected::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 58%),
        linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)),
        var(--nav-bg);
    opacity: 1;
}

.page-work-edit .work-ways__chip > * {
    position: relative;
    z-index: 1;
}

.page-work-edit .work-ways__chip .filter-chip__text {
    max-width: min(16rem, 72vw);
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: inherit;
    font-weight: inherit;
}

.page-work-edit .work-ways__chip--on {
    --ways-chip-accent: var(--green, #3f8f63);
    --ways-chip-magma: #86efac;
}

.page-work-edit .work-ways__chip--off {
    --ways-chip-accent: var(--red, #b65c5c);
    --ways-chip-magma: #fb923c;
}

.page-work-edit .work-ways__chip--add {
    --ways-chip-accent: transparent;
    border: 1px dashed color-mix(in srgb, var(--text) 28%, transparent) !important;
    color: var(--text-muted);
}

.page-work-edit .work-ways__chip--add::before,
.page-work-edit .work-ways__chip--add::after {
    display: none;
}

.page-work-edit .work-ways__chip--add:hover,
.page-work-edit .work-ways__chip--add.is-selected {
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 45%, transparent) !important;
}

.page-work-edit .work-ways__add-lead {
    margin: 0 0 var(--space-md);
    max-width: 40rem;
}

.page-work-edit .work-ways__add-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: var(--space-sm);
}

.page-work-edit .work-way__scope-locked,
.page-placement .work-way__scope-locked {
    margin: 0.15rem 0 0;
    font-size: var(--text-sm);
    line-height: 1.35;
    color: color-mix(in srgb, var(--text) 82%, transparent);
}

.page-work-edit .way-scope-chips,
.page-placement .way-scope-chips {
    margin: 0;
    flex-wrap: wrap;
}

.page-work-edit .way-code,
.page-placement .way-code {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    width: 100%;
    max-width: 40rem;
    min-width: 0;
    column-gap: 0.35rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}

.page-work-edit .way-code__input,
.page-placement .way-code__input {
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.45rem 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: var(--text-base);
    letter-spacing: -0.01em;
    color: var(--text);
}

.page-work-edit .way-code__input:focus,
.page-placement .way-code__input:focus {
    outline: none;
}

.page-work-edit .way-code:focus-within,
.page-placement .way-code:focus-within {
    border-bottom-color: color-mix(in srgb, var(--text) 55%, var(--blue));
}

.page-work-edit .way-code__salt,
.page-placement .way-code__salt {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.45rem 0 0.45rem 0.15rem;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    color: var(--text-muted);
    white-space: nowrap;
    user-select: all;
}

.page-work-edit .way-code--locked,
.page-placement .way-code--locked {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.25rem;
    min-height: 0;
    padding: 0.35rem 0 0.45rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.page-work-edit .way-code--locked .way-code__user,
.page-placement .way-code--locked .way-code__user {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--text-base);
    letter-spacing: 0.02em;
    color: var(--text);
}

.page-work-edit .way-code--locked .way-code__salt,
.page-placement .way-code--locked .way-code__salt {
    min-height: 0;
    padding: 0;
}

.page-work-edit .work-ways__stage {
    position: relative;
    z-index: 0;
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    overflow: visible;
}

.page-work-edit .work-ways__list {
    display: block;
}

.page-work-edit .work-way {
    padding: 0;
    border: 0;
}

.page-work-edit .work-way__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    width: 100%;
    max-width: 40rem;
    margin-bottom: var(--space-md);
}

.page-work-edit .work-way__top--switch-only {
    justify-content: flex-end;
}

.page-work-edit .work-way__name {
    flex: 1 1 auto;
    min-width: 0;
}

.page-work-edit .work-way__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 0.75rem;
    margin: 0;
    min-height: 44px;
}

.page-work-edit .work-way__heading {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 550;
    letter-spacing: -0.01em;
}

.page-work-edit .work-way__desc {
    margin: 0 0 var(--space-sm);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.page-work-edit .way-switch,
.page-placement .way-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    user-select: none;
}

.page-work-edit .way-switch__input,
.page-placement .way-switch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.page-work-edit .way-switch__ui,
.page-placement .way-switch__ui {
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--toggle-bg);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.page-work-edit .way-switch__ui::after,
.page-placement .way-switch__ui::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(1.4rem - 4px);
    height: calc(1.4rem - 4px);
    border-radius: 50%;
    background: var(--input-bg, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease;
}

.page-work-edit .way-switch__input:checked + .way-switch__ui,
.page-placement .way-switch__input:checked + .way-switch__ui {
    background: color-mix(in srgb, var(--blue, #2f6fed) 72%, var(--toggle-bg));
    border-color: transparent;
}

.page-work-edit .way-switch__input:checked + .way-switch__ui::after,
.page-placement .way-switch__input:checked + .way-switch__ui::after {
    transform: translateX(1.1rem);
}

.page-work-edit .way-switch__input:focus-visible + .way-switch__ui,
.page-placement .way-switch__input:focus-visible + .way-switch__ui {
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.page-work-edit .way-switch__text,
.page-placement .way-switch__text {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.page-work-edit .way-territory {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: relative;
    z-index: 2;
    overflow: visible;
}

.page-work-edit .way-territory__selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
}

.page-work-edit .way-territory__selected[hidden] {
    display: none !important;
}

.page-work-edit .way-territory__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    font-size: var(--text-sm);
    line-height: 1.3;
    color: var(--text);
}

.page-work-edit .way-territory__chip-text {
    font-weight: 550;
}

.page-work-edit .way-territory__chip-remove {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.page-work-edit .way-territory__chip-remove:hover {
    color: var(--red, #b42318);
}

.page-work-edit .way-territory__compose {
    position: relative;
    z-index: 3;
    overflow: visible;
}

.page-work-edit .way-territory__suggest {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 0.2rem);
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: 14rem;
    overflow: auto;
    border: 1px solid var(--glass-border, color-mix(in srgb, var(--text) 12%, transparent));
    border-radius: var(--radius-sm);
    background: var(--popup-bg);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

.page-work-edit .way-territory__suggest[hidden] {
    display: none !important;
}

.page-work-edit .way-territory__suggest-item {
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    font-size: var(--text-sm);
}

.page-work-edit .way-territory__suggest-item:hover,
.page-work-edit .way-territory__suggest-item.is-active {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

.page-work-edit .work-ways__save {
    align-self: flex-start;
    width: auto;
    min-width: 0;
}

.page-work-edit .placement-ways__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.page-work-edit .placement-way {
    padding: 1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.page-work-edit .placement-way:first-child {
    border-top: none;
    padding-top: 0;
}

.page-work-edit .placement-way__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.page-work-edit .placement-way__name {
    font-weight: 550;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.page-work-edit .placement-way__name-input {
    width: 100%;
}

.page-work-edit .placement-way__locked {
    flex-shrink: 0;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    padding-top: 0.2rem;
}

.page-work-edit .placement-way__remove {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.35rem;
}

.page-work-edit .placement-way__remove:hover {
    color: var(--red, #b42318);
}

.page-work-edit .placement-way__desc {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.page-work-edit .placement-way__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.65rem 1rem;
    margin-top: 0.65rem;
}

.page-work-edit .placement-way__kind-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    padding-bottom: 0.55rem;
}

.page-work-edit .placement-way__kind {
    min-width: 11rem;
}

.page-work-edit .placement-way__value-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8rem;
}

.page-work-edit .placement-way__value-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.page-work-edit .placement-way__value {
    min-width: 7.5rem;
}

.page-work-edit .placement-way__duration {
    min-width: 5.5rem;
}

.page-work-edit .placement-way__value-wrap--territory {
    flex: 1 1 12rem;
    min-width: 10rem;
}

.page-work-edit .placement-way__territory {
    width: 100%;
}

.page-placement .register-choice--compact {
    margin-bottom: var(--space-sm);
}

/* Work edit – chip section nav + hyper-minimal panels */
.page-work-edit .work-edit-nav {
    margin: 0;
    padding-bottom: 2px;
    border-bottom: none;
    overflow: visible;
}

.page-work-edit .work-edit-nav .filter-chip {
    text-decoration: none;
}

.page-work-edit .settings-grid {
    gap: var(--space-md);
}

.page-work-edit .settings-section--minimal .settings-section__head {
    margin-bottom: clamp(1.35rem, 3vw, 1.85rem);
}

.page-work-edit .settings-section--minimal .settings-section__lead {
    margin-bottom: var(--space-md);
}

.page-work-edit .settings-section--minimal .form-group > label,
.page-work-edit .settings-section--minimal .form-group > legend,
.page-work-edit .settings-section--minimal .way-field__label {
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text);
}

.page-work-edit .settings-section--minimal .work-editor__section-title {
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--text);
}

.page-work-edit .settings-section--minimal .form-group input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])),
.page-work-edit .settings-section--minimal .form-group select,
.page-work-edit .settings-section--minimal .form-group textarea,
.page-work-edit .settings-section--minimal .way-field__control,
.page-work-edit .settings-section--minimal .name-tags__input {
    min-height: 44px;
    padding: 0.55rem 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: var(--text-base);
    letter-spacing: -0.01em;
    transition: border-color 0.15s ease;
}

.page-work-edit .settings-section--minimal .name-tags__input {
    padding-right: 2rem;
}

.page-work-edit .settings-section--minimal .form-group input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])):hover,
.page-work-edit .settings-section--minimal .form-group select:hover,
.page-work-edit .settings-section--minimal .form-group textarea:hover,
.page-work-edit .settings-section--minimal .way-field__control:hover,
.page-work-edit .settings-section--minimal .name-tags__input:hover {
    border-bottom-color: color-mix(in srgb, var(--text) 28%, transparent);
}

.page-work-edit .settings-section--minimal .form-group input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"])):focus,
.page-work-edit .settings-section--minimal .form-group select:focus,
.page-work-edit .settings-section--minimal .form-group textarea:focus,
.page-work-edit .settings-section--minimal .way-field__control:focus,
.page-work-edit .settings-section--minimal .name-tags__input:focus {
    outline: none;
    border-bottom-color: color-mix(in srgb, var(--text) 55%, var(--blue));
    box-shadow: none;
}

.page-work-edit .settings-section--minimal .form-group--checkbox > label {
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
}

.page-work-edit .settings-section--minimal .name-tags__add {
    right: 0;
}

.page-work-edit .settings-section--minimal .name-tags__chip {
    font-size: 0.875rem;
}

.page-work-edit .work-way__meta {
    display: block;
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.4;
}

.page-work-edit .work-way--off .work-way__heading,
.page-work-edit .work-way--off .placement-way__name {
    color: var(--text-muted);
}

.page-work-edit .work-way__toggle {
    flex-shrink: 0;
}

.page-work-edit .work-way__form,
.page-work-edit .work-ways__edit-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    width: 100%;
    max-width: 40rem;
}

.page-work-edit .work-way__extras {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.page-work-edit .work-way__extras .form-group {
    margin-bottom: 0;
}

.page-work-edit .work-way__legal-extra {
    margin: 0;
}

.page-work-edit .work-way__legal-extra-summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--text-sm);
    font-weight: 550;
    color: color-mix(in srgb, var(--blue) 78%, var(--text-muted));
    user-select: none;
}

.page-work-edit .work-way__legal-extra-summary::-webkit-details-marker {
    display: none;
}

.page-work-edit .work-way__legal-extra-summary:hover,
.page-work-edit .work-way__legal-extra-summary:focus-visible {
    color: var(--blue);
    outline: none;
}

.page-work-edit .work-way__legal-extra[open] > .work-way__legal-extra-summary {
    margin-bottom: 0.4rem;
}

.page-work-edit .work-way__locked {
    margin: 0.5rem 0 0;
}

.page-work-edit .way-field {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.page-work-edit .way-field--wide {
    width: 100%;
}

.page-work-edit .way-field__control {
    width: 100%;
    font-family: inherit;
}

.page-work-edit .way-pricing-chips,
.page-work-edit .way-type-chips {
    margin: 0;
}

.page-work-edit .filter-chip--soon {
    cursor: default;
    opacity: 0.62;
    pointer-events: none;
}

.page-work-edit .filter-chip--soon:hover {
    border-color: var(--glass-border);
    background: var(--glass-bg);
}

.page-work-edit .filter-chip__soon {
    margin-left: 0.15rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    line-height: 1.2;
}

.page-work-edit .way-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md);
    align-items: end;
}

.page-work-edit .way-metrics--type {
    grid-template-columns: minmax(10rem, 14rem) 1fr;
}

.page-work-edit .way-affix {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 44px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 0;
    background: transparent;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.page-work-edit .way-affix:hover {
    border-bottom-color: color-mix(in srgb, var(--text) 28%, transparent);
}

.page-work-edit .way-affix:focus-within {
    border-bottom-color: color-mix(in srgb, var(--text) 55%, var(--blue));
    box-shadow: none;
}

.page-work-edit .way-affix__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 0.55rem 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-variant-numeric: tabular-nums;
}

.page-work-edit .way-affix__input:focus {
    outline: none;
}

.page-work-edit .way-affix__suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0 0 0 0.5rem;
    border-left: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 550;
}

.page-work-edit .way-territory-chips {
    margin-bottom: 0.15rem;
}

.page-work-edit .way-territory-chips .filter-chip {
    min-height: 32px;
    padding: 0.3rem 0.7rem;
}

@media (max-width: 640px) {
    .page-work-edit .way-metrics,
    .page-work-edit .way-metrics--type {
        grid-template-columns: 1fr;
    }
}

.page-work-edit .work-ways__add {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.page-work-edit .work-ways__add-summary {
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--text);
    list-style: none;
}

.page-work-edit .work-ways__add-summary::-webkit-details-marker {
    display: none;
}

.page-work-edit .work-ways__add-form,
.page-work-edit .work-ways__edit-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    margin-top: 0;
    max-width: 40rem;
}

.page-work-edit .work-ways__add-form,
.page-work-edit .work-ways__edit-form,
.page-work-edit .way-field--wide[data-territory-picker] {
    overflow: visible;
    position: relative;
}

.page-work-edit .work-ways__add-form {
    z-index: 1;
    margin-top: var(--space-md);
}

.page-work-edit .work-ways__add-form:focus-within,
.page-work-edit .work-ways__edit-form:focus-within {
    z-index: 5;
}

.page-work-edit .work-ways__add-form .form-group,
.page-work-edit .work-ways__edit-form .form-group {
    margin-bottom: 0;
}

.page-work-edit .work-ways__add-form .placement-way__controls {
    width: 100%;
    margin-top: 0;
}

.page-work-edit .work-files__head {
    align-items: flex-start;
}

.page-work-edit .work-files__heading {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 12rem;
}

.page-work-edit .work-files__heading .settings-section__lead {
    margin: 0;
    max-width: 36rem;
}

.page-work-edit .work-files__form {
    max-width: 40rem;
}

.page-work-edit .work-files__form .form-group {
    width: 100%;
}

.page-work-edit .work-files__form textarea#lyrics_text {
    min-height: 14rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text) 4%, var(--glass-bg));
    box-shadow: none;
    font-size: var(--text-base);
    line-height: 1.55;
    letter-spacing: -0.01em;
    resize: vertical;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.page-work-edit .work-files__form textarea#lyrics_text:hover {
    border-color: color-mix(in srgb, var(--text) 20%, transparent);
}

.page-work-edit .work-files__form textarea#lyrics_text:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--text) 28%, transparent);
    background: color-mix(in srgb, var(--text) 2.5%, var(--glass-hover));
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

.page-work-edit .work-files__file {
    margin-top: var(--space-md);
    max-width: 40rem;
}

.page-work-edit .work-files__file-toggle {
    width: fit-content;
    max-width: 100%;
    list-style: none;
    white-space: normal;
    text-align: left;
}

.page-work-edit .work-files__file-toggle::-webkit-details-marker {
    display: none;
}

.page-work-edit .work-files__file[open] > .work-files__file-toggle {
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 18%, var(--glass-border));
    background: var(--glass-hover);
}

.page-work-edit .work-files__file .stack-actions {
    margin-top: var(--space-sm);
}

.page-work-edit .work-files__actions {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.page-work-edit .work-transfer__form {
    max-width: 28rem;
}

.page-work-edit .work-transfer__form .form-group {
    width: 100%;
}

.page-work-edit .work-transfer__pending {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.page-work-edit .work-transfer__pending-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.page-work-edit .work-transfer__pending-text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
}

.page-work-edit .work-transfer__pending-meta {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-weight: 400;
}

.page-work-edit .work-type-chips .filter-chip {
    flex: 0 1 auto;
}

.pkg-lyrics-form .form-group {
    margin-bottom: 0;
}

.pkg-lyrics-file .stack-actions {
    margin-top: var(--space-sm);
}

.placement-works {
    margin: var(--space-xl) 0 0;
}

.placement-save-status {
    margin: var(--space-sm) 0 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.placement-save-status.is-saving {
    color: var(--text-muted);
}

.placement-save-status.is-saved {
    color: var(--green);
}

.placement-save-status.is-error {
    color: var(--red);
}

.placement-works--recent {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.placement-works__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.placement-works__list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    align-items: baseline;
    padding: 0.95rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    font-size: 0.95rem;
}

.placement-works__list a {
    color: var(--text);
    text-decoration: none;
}

.placement-works__list a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.placement-works__list span:last-child {
    color: var(--text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.placement-works__meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.placement-works__status {
    color: inherit;
}

.placement-works__remove-form {
    display: inline;
    margin: 0;
}

.placement-works__remove {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: color-mix(in srgb, var(--text) 55%, transparent);
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.placement-works__remove:hover,
.placement-works__remove:focus-visible {
    color: var(--red);
}

.placement-works__list li.is-fail .placement-works__status {
    color: var(--red);
}

.placement-works__list li.is-ok .placement-works__status {
    color: var(--green);
}

.placement-report {
    margin-top: var(--space-xl);
}

.placement-report .placement-works__list {
    max-height: 16rem;
    overflow: auto;
}

.upload-progress {
    margin: var(--space-md) 0 0;
    display: grid;
    gap: var(--space-xs);
}

.upload-progress[hidden] {
    display: none;
}

.upload-progress__track {
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 10%, transparent);
    overflow: hidden;
}

.upload-progress__bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--text);
    transition: width 0.15s linear;
}

.upload-progress.is-processing .upload-progress__bar {
    background: color-mix(in srgb, var(--text) 55%, transparent);
    background-size: 200% 100%;
    animation: upload-progress-pulse 1.2s ease-in-out infinite;
}

.upload-progress.is-error .upload-progress__bar {
    background: var(--red);
    width: 100%;
}

.upload-progress__label {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.upload-progress.is-error .upload-progress__label {
    color: var(--red);
}

@keyframes upload-progress-pulse {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

.import-job-status {
    margin: 0 0 var(--space-lg);
    padding: var(--space-md);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 10px;
    display: grid;
    gap: var(--space-xs);
}

.import-job-status__label {
    margin: 0;
    font-size: var(--text-sm);
}

.import-job-status__link {
    font-size: var(--text-xs);
}

.import-dedup-protocol {
    margin: 0 0 var(--space-xl);
    text-align: left;
}

.import-dedup-protocol .section-title {
    margin-bottom: var(--space-sm);
}

.import-dedup-protocol__summary {
    margin-bottom: var(--space-sm);
}

.import-dedup-protocol__subtitle {
    margin: var(--space-md) 0 var(--space-xs);
    font-size: 1rem;
    font-weight: 600;
}

.import-dedup-protocol__table-wrap {
    overflow-x: auto;
    margin-bottom: var(--space-md);
}

.import-job-banner {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    z-index: 1500;
    width: min(28rem, calc(100vw - 2 * var(--space-md)));
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    background: var(--popup-bg);
    color: var(--popup-text);
    box-shadow:
        0 12px 36px -12px var(--glass-shadow),
        0 0 0 1px color-mix(in srgb, var(--glass-bg) 40%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateX(-50%);
    isolation: isolate;
}

.import-job-banner[hidden] {
    display: none;
}

.import-job-banner__pulse {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent);
    animation: import-job-banner-pulse 1.6s ease-out infinite;
}

.import-job-banner__text {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.35;
    color: var(--popup-text);
}

.import-job-banner__link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--blue);
    background: var(--blue-light);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.import-job-banner__link:hover {
    color: var(--blue-hover);
    background: color-mix(in srgb, var(--blue-light) 70%, var(--glass-hover));
}

.import-job-banner__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
}

@keyframes import-job-banner-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent);
    }
    70% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--blue) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .import-job-banner__pulse {
        animation: none;
        box-shadow: none;
    }
}

.placement-doc {
    margin: var(--space-xl) 0;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 12px;
    overflow: hidden;
    /* Превью договора всегда на светлой «бумаге», независимо от темы кабинета */
    background: #eef1f5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.placement-doc__frame {
    display: block;
    width: 100%;
    height: min(70vh, 52rem);
    height: min(70dvh, 52rem);
    border: 0;
    background: #eef1f5;
    color-scheme: only light;
}

/* Signature step – equal-height controls, even grid */
.placement-sign {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.placement-sign__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: 0;
}

.placement-sign__form .form-group {
    margin-bottom: 0;
}

.placement-sign__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.placement-sign__actions:has(> :only-child) {
    grid-template-columns: 1fr;
}

.placement-sign__secondary {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.placement-sign__control {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    flex: none;
}

.placement-sign .custom-file__trigger {
    box-sizing: border-box;
    min-height: 40px;
}

.placement-sign .custom-file__btn {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 520px) {
    .placement-sign__actions {
        grid-template-columns: 1fr;
    }
}

/* Signature verify progress + protocol */
.placement-sig-verify {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.placement-sig-verify__label {
    margin: 0 0 var(--space-xs);
    font-size: 0.92rem;
    color: var(--text-muted);
}

.placement-sig-verify__track {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    overflow: hidden;
}

.placement-sig-verify__bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent, #2f6fed);
    transition: width 0.35s ease;
}

.placement-sig-protocol {
    margin-top: var(--space-md);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface, var(--bg)) 92%, transparent);
    overflow: hidden;
}

.placement-sig-protocol__toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.placement-sig-protocol__toggle::-webkit-details-marker {
    display: none;
}

.placement-sig-protocol__toggle::after {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: auto;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.placement-sig-protocol[open] > .placement-sig-protocol__toggle::after {
    transform: rotate(-135deg);
}

.placement-sig-protocol__toggle:hover {
    background: color-mix(in srgb, var(--text) 3%, transparent);
}

.placement-sig-protocol__toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--focus-ring-width, 2px) var(--blue-light, #d6e4ff);
}

.placement-sig-protocol__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.placement-sig-protocol__icon.is-ok {
    color: var(--success, var(--green, #1f7a4d));
}

.placement-sig-protocol__icon.is-fail {
    color: var(--danger, #b42318);
}

.placement-sig-protocol__icon svg {
    display: block;
}

.placement-sig-protocol__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.placement-sig-protocol__badge {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    color: var(--text-muted);
}

.placement-sig-protocol__badge.is-ok {
    color: var(--success, var(--green, #1f7a4d));
    border-color: color-mix(in srgb, var(--success, var(--green, #1f7a4d)) 35%, transparent);
    background: color-mix(in srgb, var(--success, var(--green, #1f7a4d)) 10%, transparent);
}

.placement-sig-protocol__badge.is-fail {
    color: var(--danger, #b42318);
    border-color: color-mix(in srgb, var(--danger, #b42318) 35%, transparent);
    background: color-mix(in srgb, var(--danger, #b42318) 10%, transparent);
}

.placement-sig-protocol__panel {
    padding: 0 1rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.placement-sig-protocol__summary {
    margin: var(--space-sm) 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.placement-sig-protocol__summary.is-ok {
    color: var(--success, #1f7a4d);
}

.placement-sig-protocol__summary.is-fail {
    color: var(--danger, #b42318);
}

.placement-sig-protocol__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.placement-sig-protocol__step {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--space-sm);
    align-items: start;
}

.placement-sig-protocol__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}

.placement-sig-protocol__step.is-ok .placement-sig-protocol__mark {
    color: var(--success, #1f7a4d);
}

.placement-sig-protocol__step.is-fail .placement-sig-protocol__mark {
    color: var(--danger, #b42318);
}

.placement-sig-protocol__step.is-skip .placement-sig-protocol__mark,
.placement-sig-protocol__step.is-pending .placement-sig-protocol__mark {
    color: var(--text-muted);
}

.placement-sig-protocol__step-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.placement-sig-protocol__step-msg {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.placement-sig-protocol__pdf {
    margin: var(--space-sm) 0 0;
}

.admin-placement__section.placement-sig-protocol {
    margin-bottom: var(--space-xl);
}

.placement-sign__control:disabled,
.placement-sign__control[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* –– Admin: модерация договора размещения –– */
.admin-placement {
    max-width: 1120px;
}

.admin-placement__nav {
    margin-bottom: var(--space-md);
}

.admin-placement__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.admin-placement__kicker {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-placement__heading h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.admin-placement__party {
    margin: var(--space-xs) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.admin-placement__party a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.admin-placement__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    justify-content: flex-end;
}

.admin-placement__note {
    margin: 0 0 var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border-radius: 10px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.admin-placement__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
}

.admin-placement__aside {
    min-width: 0;
}

.admin-placement__decision {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 26rem;
    padding: var(--space-md) var(--space-md) var(--space-lg);
}

.admin-placement__decision:hover {
    box-shadow: var(--shadow-sm);
}

.admin-placement__decision-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.admin-placement__decision-head .section-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 650;
    letter-spacing: -0.02em;
}

.admin-placement__decision-hint {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-muted);
}

.admin-placement__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
}

.admin-placement__form .form-group {
    margin: 0;
}

.admin-placement__form .form-group label {
    margin-bottom: 0.3rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

.admin-placement__form .form-group input,
.admin-placement__form .form-group textarea {
    min-height: 2.25rem;
    font-size: var(--text-sm);
}

.admin-placement__form .form-group textarea {
    min-height: 4.5rem;
    resize: vertical;
}

.admin-placement__form--reject {
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.admin-placement__form .btn-primary,
.admin-placement__form .btn-ghost {
    width: 100%;
    justify-content: center;
}

@media (min-width: 960px) {
    .admin-placement__layout:has(.admin-placement__aside) {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
        align-items: start;
        gap: var(--space-lg);
    }

    .admin-placement__aside {
        position: sticky;
        top: calc(var(--nav-height, 64px) + var(--space-md));
    }

    .admin-placement__decision {
        max-width: none;
    }
}

.admin-placement__section {
    margin-bottom: var(--space-xl);
}

.admin-placement__section-head {
    margin-bottom: var(--space-md);
}

.admin-placement__section-head .section-title {
    margin-bottom: var(--space-2xs);
}

.admin-placement-works {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.admin-placement-work {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-sm) var(--space-md);
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface, var(--bg)) 88%, transparent);
}

.admin-placement-work--empty {
    grid-template-columns: 1fr;
}

.admin-placement-work__cover {
    display: block;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
}

.admin-placement-work__cover .cover--thumb {
    width: 56px;
    height: 56px;
}

.admin-placement-work__title {
    display: inline-block;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.admin-placement-work__title:hover {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.admin-placement-work__meta {
    margin: 0.15rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.admin-placement-work__flags {
    margin: 0.4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.admin-placement-work__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.admin-placement-work__chip--warn {
    color: #8a4b1a;
    background: color-mix(in srgb, #d97706 16%, transparent);
}

.admin-placement-work__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
}

@media (min-width: 720px) {
    .admin-placement-work {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .admin-placement-work__actions {
        grid-column: auto;
        justify-content: flex-end;
    }
}

/* Signing method picker (checkout) + CryptoPro plugin UI */
.signing-method {
    border: 0;
    margin: 0 0 var(--space-md);
    padding: 0;
    text-align: left;
}

.signing-method__legend {
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-medium);
    margin-bottom: var(--space-sm);
    color: var(--text);
}

.signing-method__option {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm) 0;
    cursor: pointer;
}

.signing-method__option + .signing-method__option {
    border-top: 1px solid var(--glass-border);
}

.signing-method__title {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-medium);
}

.signing-method__hint {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.form-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: var(--space-sm) 0;
}

.panel-divider {
    border: 0;
    border-top: 1px solid var(--glass-border);
    margin: var(--space-md) 0;
}

.cryptopro-sign .section-title {
    font-size: var(--text-base);
    margin-bottom: var(--space-xs);
}

.cryptopro-status {
    margin: var(--space-sm) 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.cryptopro-status.is-ok {
    color: var(--text);
}

.cryptopro-status.is-fail {
    color: #b42318;
}

.cryptopro-status.is-pending {
    color: var(--text-muted);
}

.ep-cert-list {
    list-style: none;
    margin: var(--space-sm) 0 0;
    padding: 0;
}

.ep-cert-item {
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--glass-border);
}

.ep-cert-item__title {
    font-size: var(--text-sm);
    font-weight: var(--fw-ui-medium);
}

.ep-cert-item__meta {
    margin-top: 0.2rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ep-cert-item.is-expired .ep-cert-item__title {
    color: var(--text-muted);
}