:root {
    --bg: #1c1e26;
    --bg-elevated: #272a33;
    --surface: #333742;
    --text: #f4f5f7;
    --text-muted: #a8aeb8;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --danger: #ef4444;
    --radius: 16px;
    --tile-size: 140px;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --font: 'Inter', system-ui, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    color-scheme: dark;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.1), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(59, 130, 246, 0.05), transparent);
    color: var(--text);
    line-height: 1.5;
}

body:has(.page--dial),
body.page-shared {
    display: flex;
    flex-direction: column;
}

body.has-board-bg {
    background-color: #050505;
    background-image: none;
}

body.has-board-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: var(--board-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: var(--board-bg-opacity, 100%);
}

body.has-board-bg .nav,
body.has-board-bg .page,
body.has-board-bg .footer {
    position: relative;
    z-index: 1;
}

body.has-board-bg .nav {
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(16px);
}

.page {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 2.5rem 2rem 4rem;
}

.header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.header__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.header__logo {
    font-size: 1.75rem;
}

.header__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.header__subtitle {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}

.btn:link,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active {
    text-decoration: none;
}

.btn:active {
    transform: scale(0.98);
}

.btn--primary {
    background: var(--accent);
    color: #fff;
}

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

.btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--surface);
}

.btn--ghost:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

.btn--danger {
    background: linear-gradient(145deg, #f87171, #dc2626);
    color: #fff;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.28);
}

.btn--danger:hover {
    background: linear-gradient(145deg, #fca5a5, #ef4444);
}

.dial {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-size), 1fr));
    gap: var(--dial-gap, 1.25rem);
    justify-items: stretch;
    width: 100%;
    max-width: var(--dial-max-width, 100%);
    margin-inline: auto;
}

.dial--fixed-columns {
    grid-template-columns: repeat(max(3, var(--dial-columns, 3)), minmax(0, 1fr));
    --tile-cell: calc(
        (var(--dial-max-width, 1000px) - var(--dial-gap, 20px) * (var(--dial-columns, 3) - 1))
        / var(--dial-columns, 3)
    );
    --tile-icon-wrap: clamp(24px, calc(var(--tile-cell) * 0.48), 280px);
    --tile-icon: clamp(18px, calc(var(--tile-cell) * 0.36), 210px);
    --tile-title-size: clamp(0.55rem, calc(var(--tile-cell) * 0.085), 2rem);
    --tile-visit-size: clamp(0.5rem, calc(var(--tile-cell) * 0.06), 0.95rem);
    --tile-fallback-size: clamp(0.7rem, calc(var(--tile-cell) * 0.12), 2.6rem);
    --tile-add-size: clamp(1.1rem, calc(var(--tile-cell) * 0.22), 3.25rem);
    --tile-radius: clamp(6px, calc(var(--tile-cell) * 0.055), 16px);
    --tile-lift: clamp(1px, calc(var(--tile-cell) * 0.012), 4px);
    --tile-shadow: 0 clamp(3px, calc(var(--tile-cell) * 0.02), 8px) clamp(10px, calc(var(--tile-cell) * 0.08), 32px) rgba(0, 0, 0, 0.4);
}

.dial--fixed-columns .tile {
    border-radius: var(--tile-radius);
    box-shadow: var(--tile-shadow);
}

.dial--fixed-columns .tile:hover:not(.dragging) {
    transform: translateY(calc(var(--tile-lift) * -1));
    box-shadow: 0 clamp(4px, calc(var(--tile-cell) * 0.03), 12px) clamp(14px, calc(var(--tile-cell) * 0.1), 40px) rgba(0, 0, 0, 0.45);
}

.dial--fixed-columns .tile.dragging {
    transform: scale(1.03);
}

body.tiles-hide-titles .dial--fixed-columns,
body.tiles-dense .dial--fixed-columns {
    --tile-icon-wrap: clamp(24px, calc(var(--tile-cell) * 0.62), 300px);
    --tile-icon: clamp(18px, calc(var(--tile-cell) * 0.48), 230px);
}

.tile {
    position: relative;
    width: 100%;
    max-width: none;
    aspect-ratio: 1;
    container-type: inline-size;
    background: var(--tile-bg, var(--bg-elevated));
    color: var(--tile-text-color, var(--text));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: grab;
}

.tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--tile-accent, transparent) 70%, transparent) 0%,
        transparent 62%
    );
    opacity: 0.55;
    pointer-events: none;
}

body.tiles-no-gradient .tile::before {
    display: none;
}

body.tiles-hide-titles .tile:not(.tile--add) .tile__title {
    display: none;
}

body.tiles-hide-titles .tile:not(.tile--add) .tile__icon-wrap,
body.tiles-dense .tile__icon-wrap {
    margin-bottom: 0;
}

body.tiles-hide-visits .tile__visits {
    display: none;
}

body.tiles-dense .tile__caption,
body.tiles-dense .tile--add .tile__title,
body.tiles-dense .tile__badge,
body.tiles-dense .tile__flags,
body.tiles-dense .tile__favorite {
    display: none;
}

body.tiles-dense .tile__add-icon {
    margin-bottom: 0;
}

.tile[data-id] {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.5);
}

body.theme-light .tile[data-id] {
    border-color: rgba(100, 116, 139, 0.45);
}

.tile[data-id] {
    cursor: grab;
    -webkit-user-drag: none;
}

body:not(.sort-manual) .tile:not(.tile--add) {
    cursor: grab;
}

.tile:hover:not(.dragging) {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    border-color: rgba(59, 130, 246, 0.45);
}

.tile.dragging {
    opacity: 0.85;
    cursor: grabbing;
    z-index: 5;
    transform: scale(1.03);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    border-style: dashed;
    border-color: var(--accent);
}

body.is-bookmark-dragging,
body.is-bookmark-dragging a,
body.is-bookmark-dragging .tile {
    cursor: grabbing;
}

.tile.drag-over {
    border-color: var(--accent);
    border-style: dashed;
}

.tile.is-moving {
    opacity: 0.45;
    pointer-events: none;
}

.categories-tabs__item--drop {
    border-color: var(--tab-color, var(--accent));
    box-shadow: 0 0 0 2px var(--tab-color, var(--accent));
    background: color-mix(in srgb, var(--tab-color, var(--accent)) 22%, transparent);
    color: var(--text);
    transform: translateY(-1px);
}

.categories-more__btn--drop {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
    color: var(--text);
}

.directory__section--drop {
    outline: 2px dashed var(--accent);
    outline-offset: 8px;
    border-radius: 10px;
}

.directory__item:not(.directory__item--add) {
    cursor: grab;
    touch-action: none;
    -webkit-user-drag: none;
    user-select: none;
}

.directory__item.dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.directory__item.is-moving {
    opacity: 0.4;
}

.tile__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem 0.75rem;
    text-decoration: none;
    color: inherit;
    border-radius: inherit;
    -webkit-user-drag: none;
    user-select: none;
}

.tile__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tile-icon-wrap, 56px);
    height: var(--tile-icon-wrap, 56px);
    margin-bottom: 0.5rem;
    background: var(--tile-icon-bg, var(--surface));
    border-radius: 14px;
}

.tile__icon {
    width: var(--tile-icon, 40px);
    height: var(--tile-icon, 40px);
    object-fit: contain;
    border-radius: 6px;
}

.tile__icon--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tile-icon, 40px);
    height: var(--tile-icon, 40px);
    font-size: var(--tile-fallback-size, 1.25rem);
    font-weight: 700;
    color: var(--accent);
    background: rgba(59, 130, 246, 0.15);
    border-radius: 8px;
}

.tile__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-width: 100%;
    margin-top: 0.15rem;
}

.tile__title {
    font-size: var(--tile-title-size, 0.85rem);
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tile__visits {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 0;
    font-size: var(--tile-visit-size, 0.7rem);
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.tile--featured {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.22), var(--shadow);
}

.tile__flags {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    pointer-events: none;
}

.tile__flag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile__flag--new {
    background: #f59e0b;
    color: #1c1917;
}

[data-context-target] {
    -webkit-touch-callout: none;
    user-select: none;
}

[data-context-target].context-press {
    opacity: 0.85;
    transform: scale(0.97);
}

.context-menu {
    position: fixed;
    z-index: 5000;
    min-width: 196px;
    padding: 0.35rem;
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.context-menu[hidden] {
    display: none;
}

.context-menu__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.context-menu__item[hidden] {
    display: none;
}

.context-menu__item:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.context-menu__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-muted);
}

.context-menu__label {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.context-menu__item:hover {
    background: var(--surface);
}

.context-menu__item:hover .context-menu__icon {
    color: var(--text);
}

.context-menu__item--danger {
    color: #fca5a5;
}

.context-menu__item--danger .context-menu__icon {
    color: #f87171;
}

.context-menu__item--danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.context-menu__item--danger:hover .context-menu__icon {
    color: #fda4af;
}

.context-menu__item--ok {
    color: #86efac;
}

.context-menu__item--ok .context-menu__icon {
    color: #4ade80;
}

.context-menu__sep {
    height: 1px;
    margin: 0.3rem 0.45rem;
    background: rgba(255, 255, 255, 0.08);
}

body.theme-light .context-menu {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.14);
}

body.theme-light .context-menu__sep {
    background: rgba(15, 23, 42, 0.08);
}

body.theme-light .context-menu__item--danger {
    color: #dc2626;
}

body.theme-light .context-menu__item--danger .context-menu__icon {
    color: #ef4444;
}

body.theme-light .context-menu__item--ok {
    color: #15803d;
}

body.theme-light .context-menu__item--ok .context-menu__icon {
    color: #16a34a;
}

.tile--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.12);
    background: transparent;
    box-shadow: none;
}

.tile--add::before {
    display: none;
}

.tile--add:hover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.08);
}

.tile__add-icon {
    font-size: var(--tile-add-size, 2rem);
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1;
    margin-bottom: 0.35rem;
}

.tile--add .tile__title {
    display: block;
    color: var(--text-muted);
    font-weight: 500;
}

@container (max-width: 76px) {
    .tile__caption,
    .tile--add .tile__title,
    .tile__badge,
    .tile__flags,
    .tile__favorite {
        display: none;
    }

    .tile__icon-wrap {
        margin-bottom: 0;
    }

    .tile__add-icon {
        margin-bottom: 0;
    }
}

@supports (width: 1cqi) {
    .tile__link {
        padding: clamp(0.25rem, 6cqi, 1.15rem) clamp(0.18rem, 5cqi, 0.85rem);
        gap: clamp(0.08rem, 3cqi, 0.45rem);
    }

    .tile__icon-wrap {
        width: clamp(24px, 48cqi, 280px);
        height: clamp(24px, 48cqi, 280px);
        margin-bottom: clamp(0.1rem, 3.5cqi, 0.55rem);
        border-radius: clamp(6px, 10cqi, 24px);
    }

    .tile__icon,
    .tile__icon--fallback {
        width: clamp(18px, 36cqi, 210px);
        height: clamp(18px, 36cqi, 210px);
        font-size: clamp(0.7rem, 12cqi, 2.6rem);
        border-radius: clamp(4px, 5cqi, 12px);
    }

    body.tiles-hide-titles .tile:not(.tile--add) .tile__icon-wrap,
    body.tiles-dense .tile__icon-wrap {
        width: clamp(24px, 62cqi, 300px);
        height: clamp(24px, 62cqi, 300px);
    }

    body.tiles-hide-titles .tile:not(.tile--add) .tile__icon,
    body.tiles-hide-titles .tile:not(.tile--add) .tile__icon--fallback,
    body.tiles-dense .tile__icon,
    body.tiles-dense .tile__icon--fallback {
        width: clamp(18px, 48cqi, 230px);
        height: clamp(18px, 48cqi, 230px);
    }

    body.tiles-dense .tile__add-icon {
        font-size: clamp(1.1rem, 28cqi, 3.25rem);
        margin-bottom: 0;
    }

    .tile__caption {
        gap: clamp(0.12rem, 3cqi, 0.4rem);
        margin-top: clamp(0, 2cqi, 0.2rem);
        max-width: 92%;
    }

    .tile__title {
        font-size: clamp(0.55rem, 8.5cqi, 2rem);
    }

    .tile__visits {
        font-size: clamp(0.5rem, 6cqi, 0.95rem);
        padding: clamp(0.06rem, 1.4cqi, 0.18rem) clamp(0.2rem, 3.5cqi, 0.5rem);
    }

    .tile__add-icon {
        font-size: clamp(1.1rem, 22cqi, 3.25rem);
        margin-bottom: clamp(0.08rem, 3cqi, 0.4rem);
    }

    .tile__flags {
        top: clamp(0.12rem, 4cqi, 0.4rem);
        left: clamp(0.12rem, 4cqi, 0.4rem);
        right: clamp(0.12rem, 4cqi, 0.4rem);
        gap: clamp(0.08rem, 2cqi, 0.25rem);
    }

    .tile__flag {
        font-size: clamp(0.42rem, 6.5cqi, 0.62rem);
        padding: clamp(0.04rem, 1.4cqi, 0.12rem) clamp(0.14rem, 4cqi, 0.42rem);
    }

    .tile__badge {
        top: clamp(0.12rem, 4cqi, 0.45rem);
        right: clamp(0.12rem, 4cqi, 0.45rem);
        font-size: clamp(0.4rem, 6.5cqi, 0.65rem);
        padding: clamp(0.04rem, 1.5cqi, 0.15rem) clamp(0.16rem, 4cqi, 0.45rem);
    }

    .tile__favorite {
        top: clamp(0.12rem, 4cqi, 0.45rem);
        right: clamp(0.12rem, 4cqi, 0.45rem);
        width: clamp(1.1rem, 16cqi, 2rem);
        height: clamp(1.1rem, 16cqi, 2rem);
        border-radius: clamp(5px, 6cqi, 9px);
    }

    .tile__favorite svg {
        width: clamp(10px, 10cqi, 16px);
        height: clamp(10px, 10cqi, 16px);
    }

    @container (max-width: 76px) {
        .tile__link {
            padding: clamp(0.12rem, 5cqi, 0.35rem);
            gap: 0;
        }

        .tile__caption,
        .tile--add .tile__title,
        .tile__badge,
        .tile__flags,
        .tile__favorite {
            display: none;
        }

        .tile__icon-wrap {
            width: clamp(20px, 70cqi, 300px);
            height: clamp(20px, 70cqi, 300px);
            margin-bottom: 0;
        }

        .tile__icon,
        .tile__icon--fallback {
            width: clamp(16px, 54cqi, 230px);
            height: clamp(16px, 54cqi, 230px);
            font-size: clamp(0.65rem, 20cqi, 2.6rem);
        }

        .tile__add-icon {
            font-size: clamp(1.05rem, 32cqi, 3.25rem);
            margin-bottom: 0;
        }
    }
}

.empty {
    text-align: center;
    padding: 4rem 1rem;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.empty__text {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.empty__hint {
    margin: 0 0 1.5rem;
    color: var(--text-muted);
}

.modal {
    width: min(480px, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%),
        var(--bg-elevated);
    color: var(--text);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 28px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.modal[open] {
    animation: modal-in 0.22s ease-out;
}

.modal::backdrop {
    background: rgba(6, 10, 16, 0.72);
    backdrop-filter: blur(8px);
    animation: backdrop-in 0.2s ease-out;
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes sheet-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal__form {
    display: flex;
    flex-direction: column;
}

.modal--compose {
    max-height: min(92vh, calc(100vh - 2rem));
}

.modal--compose .modal__form {
    min-height: 0;
    max-height: min(92vh, calc(100vh - 2rem));
    overflow: hidden;
}

.modal--compose .modal__header,
.modal--compose .modal__footer {
    flex-shrink: 0;
}

.modal--compose .modal__footer {
    justify-content: stretch;
}

.modal--compose .modal__footer .btn {
    width: 100%;
    min-width: 0;
}

.modal--compose .modal__body {
    overflow: auto;
    min-height: 0;
}

.modal--share {
    max-height: min(92vh, calc(100vh - 2rem));
}

.modal--share .modal__form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(92vh, calc(100vh - 2rem));
    overflow: hidden;
}

.modal--share .modal__header {
    flex-shrink: 0;
}

.modal--share .modal__body {
    overflow: auto;
    min-height: 0;
    overscroll-behavior: contain;
    padding-bottom: 1.45rem;
}

.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1.45rem 1.45rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal__header-main {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.modal__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.3);
}

.modal__icon--bookmark {
    background: linear-gradient(145deg, #60a5fa, #2563eb);
}

.modal__icon--category {
    background: linear-gradient(145deg, #38bdf8, #0284c7);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.28);
}

.modal__icon--share {
    background: linear-gradient(145deg, #34d399, #059669);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.modal__icon--danger {
    background: linear-gradient(145deg, #fb7185, #e11d48);
    box-shadow: 0 8px 20px rgba(225, 29, 72, 0.3);
}

.modal--confirm {
    width: min(400px, calc(100vw - 2rem));
}

.modal__body--confirm {
    padding-top: 1rem;
    padding-bottom: 0.35rem;
}

.confirm-delete__card {
    padding: 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid rgba(248, 113, 113, 0.18);
    background:
        linear-gradient(135deg, rgba(248, 113, 113, 0.1), transparent 55%),
        rgba(255, 255, 255, 0.03);
}

.confirm-delete__kind {
    display: inline-block;
    margin: 0 0 0.4rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.14);
    color: #fda4af;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.confirm-delete__name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    word-break: break-word;
}

.confirm-delete__hint {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    font-size: 0.825rem;
    line-height: 1.45;
}

.confirm-delete__hint:empty {
    display: none;
}

.confirm-delete__password {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.confirm-delete__password span {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.confirm-delete__password[hidden] {
    display: none;
}

body.theme-light .confirm-delete__card {
    border-color: rgba(220, 38, 38, 0.16);
    background:
        linear-gradient(135deg, rgba(254, 226, 226, 0.9), transparent 55%),
        #fff;
}

body.theme-light .confirm-delete__kind {
    background: #fee2e2;
    color: #b91c1c;
}

body.theme-light .modal {
    border-color: rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(180deg, #fff, #f8fafc 88%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.8) inset,
        0 28px 80px rgba(15, 23, 42, 0.16);
}

body.theme-light .modal__header {
    border-bottom-color: rgba(15, 23, 42, 0.06);
    background: #fff;
}

body.theme-light .modal::backdrop {
    background: rgba(15, 23, 42, 0.38);
}

body.theme-light .modal__close {
    background: rgba(15, 23, 42, 0.05);
    color: #64748b;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

body.theme-light .modal__close:hover {
    color: #b91c1c;
    background: #fee2e2;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.22);
}

body.theme-light .modal__footer {
    border-top-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, #fff, #f8fafc);
}

body.theme-light .modal__kicker {
    color: #64748b;
}

body.theme-light .form-field--icon:focus-within .form-field__icon {
    color: #2563eb;
}

body.theme-light .form-label,
body.theme-light .form-field,
body.theme-light .form-field__label {
    color: #334155;
}

body.theme-light .form-input,
body.theme-light .prefs-select,
body.theme-light .share-link__input {
    background-color: #f8fafc;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

body.theme-light .form-input::placeholder {
    color: #94a3b8;
}

body.theme-light .form-input:hover,
body.theme-light .prefs-select:hover {
    background-color: #fff;
    border-color: rgba(15, 23, 42, 0.2);
}

body.theme-light .form-input:focus,
body.theme-light .prefs-select:focus {
    background-color: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

body.theme-light .form-field__hint {
    color: #64748b;
}

body.theme-light select.form-input option {
    background: #fff;
    color: #0f172a;
}

body.theme-light .color-picker {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.12);
}

body.theme-light .color-picker:hover {
    border-color: rgba(15, 23, 42, 0.2);
}

body.theme-light .form-error {
    color: #b91c1c;
}

body.theme-light .form-error--block {
    background: #fef2f2;
    border-color: rgba(220, 38, 38, 0.16);
    color: #991b1b;
}

body.theme-light .prefs-field {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .prefs-cat-list__row {
    border-color: rgba(15, 23, 42, 0.1);
    background: #fff;
}

body.theme-light .prefs-cat-list__row:hover {
    background: #f8fafc;
    border-color: rgba(37, 99, 235, 0.28);
}

body.theme-light .prefs-cat-list__box {
    border-color: rgba(15, 23, 42, 0.18);
    background: #f8fafc;
}

body.theme-light .prefs-segment {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .settings-card {
    border-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .code-block {
    color: #334155;
    border-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .btn--ghost {
    border-color: rgba(15, 23, 42, 0.12);
}

.modal__heading {
    min-width: 0;
    padding-top: 0.05rem;
}

.modal__kicker {
    margin: 0 0 0.2rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modal__title {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.modal__subtitle {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.modal__close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.modal__close svg {
    display: block;
    width: 13px;
    height: 13px;
}

.modal__close:hover {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.18);
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.4);
    transform: scale(1.06);
}

.modal__close:active {
    transform: scale(0.94);
}

.modal__close:focus-visible {
    outline: none;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.38);
}

.modal__body {
    padding: 1.35rem 1.45rem 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
}

.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 1.15rem 1.45rem 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.16) 28%);
}

.modal__footer .btn {
    min-width: 7.5rem;
    min-height: 2.95rem;
    padding: 0.75rem 1.25rem;
    border-radius: 13px;
    font-size: 0.96rem;
    font-weight: 650;
}

.form-label,
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 0;
}

.form-field__label {
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-muted);
}

.form-field__control {
    position: relative;
    display: block;
}

.form-field__icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.form-field--icon .form-input {
    padding-left: 2.85rem;
}

.form-field--icon select.form-input {
    padding-right: 2.15rem;
}

.form-field--icon:focus-within .form-field__icon {
    color: #60a5fa;
}

.form-field--area .form-field__icon {
    top: 1.05rem;
    transform: none;
}

.form-field__hint {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

.form-row {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 0.85rem;
}

.form-input {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.85rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(15, 20, 25, 0.85);
    color: var(--text);
    font-family: inherit;
    font-size: 1.02rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.form-input::placeholder {
    color: rgba(139, 156, 179, 0.7);
}

.form-input:hover {
    border-color: rgba(255, 255, 255, 0.14);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.form-input--area {
    min-height: 5.6rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    resize: vertical;
    line-height: 1.45;
}

select.form-input {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 11px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
    cursor: pointer;
}

select.form-input option {
    background: var(--bg-elevated);
    color: var(--text);
}

.form-label--color .form-input--color,
.form-field--color .form-input--color {
    width: 46px;
    height: 46px;
    padding: 3px;
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

.color-picker {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 3.15rem;
    padding: 0.4rem 1rem 0.4rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(15, 20, 25, 0.85);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.color-picker:hover {
    border-color: rgba(255, 255, 255, 0.14);
}

.color-picker:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.color-picker .form-input--color {
    width: 46px;
    height: 46px;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.color-picker .form-input--color:hover,
.color-picker .form-input--color:focus {
    border: none;
    box-shadow: none;
    background: transparent;
}

.color-picker .form-input--color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker .form-input--color::-webkit-color-swatch {
    border: none;
    border-radius: 10px;
}

.color-picker .form-input--color::-moz-color-swatch {
    border: none;
    border-radius: 10px;
}

.color-picker__meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.color-picker__caption {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.color-picker__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.form-error {
    color: #fca5a5;
    font-size: 0.8rem;
}

.form-error--block {
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.form-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 500;
}

.form-hint--muted {
    color: var(--text-muted);
    font-weight: 400;
}

.visibility-toggle {
    display: inline-flex;
    padding: 0.2rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 0.15rem;
}

.visibility-toggle__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.visibility-toggle__btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0.5rem 0.95rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.visibility-toggle__btn--active {
    background: var(--accent);
    color: #fff;
}

.visibility-toggle__btn[data-visibility="private"].visibility-toggle__btn--active {
    background: var(--surface);
    color: var(--text);
}

.tile__badge {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.9);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* Вид панели: плитки / список-каталог */
body.view-tiles .view-panel--directory {
    display: none !important;
}

body.view-directory .view-panel--tiles {
    display: none !important;
}

.directory {
    column-count: 3;
    column-gap: 2.75rem;
    width: 100%;
}

.directory.is-masonry {
    display: flex;
    align-items: flex-start;
    column-count: unset;
    gap: 2.75rem;
}

.directory__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.85rem;
}

.directory__section {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 1.85rem;
    contain: style;
}

.directory.is-masonry .directory__section {
    margin: 0;
}

.directory__heading-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.directory__heading {
    margin: 0 0 1rem;
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1.2;
}

.directory__heading-row .directory__heading {
    margin: 0;
}

.directory__add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.directory__add svg {
    display: block;
}

.directory__add:hover {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.12);
}

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

.directory__item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 0.45rem;
    padding: 0;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #fff;
    break-inside: avoid;
}

.directory__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.18rem;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.directory__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.directory__icon--fallback {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.12);
}

.directory__icon--add {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    color: #60a5fa;
    background: transparent;
}

.directory__body {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

.directory__link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s, filter 0.15s, text-decoration-color 0.15s;
}

.directory__link:hover {
    text-decoration: underline;
    text-decoration-color: currentColor;
    filter: brightness(1.08);
}

.directory__link:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    border-radius: 4px;
}

.directory__desc {
    color: #fff;
    font-weight: 400;
}

.directory__empty {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.directory__item--add {
    align-items: center;
}

.directory__add-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: #60a5fa;
    font: inherit;
    font-weight: 500;
    line-height: inherit;
    cursor: pointer;
    transition: color 0.15s, filter 0.15s, text-decoration-color 0.15s;
}

.directory__add-link:hover {
    text-decoration: underline;
    text-decoration-color: currentColor;
    filter: brightness(1.08);
}

.directory__add-link:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    border-radius: 4px;
}

.directory-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.25rem 0 0.75rem;
    padding: 0.85rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.directory-pagination__btn,
.directory-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
}

.directory-pagination__btn:hover,
.directory-pagination__page:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}

.directory-pagination__page--current {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.45);
    color: #93c5fd;
    cursor: default;
}

.directory-pagination__btn--disabled {
    opacity: 0.35;
    pointer-events: none;
}

.directory-pagination__ellipsis {
    min-width: 1.25rem;
    text-align: center;
    color: var(--text-muted);
    user-select: none;
}

body.theme-light .directory-pagination {
    border-top-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .directory-pagination__btn,
body.theme-light .directory-pagination__page {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

body.theme-light .directory-pagination__btn:hover,
body.theme-light .directory-pagination__page:hover {
    background: #eef2ff;
    border-color: rgba(29, 78, 216, 0.25);
}

body.theme-light .directory-pagination__page--current {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}

body.theme-light .directory__link {
    color: #2563eb;
}

body.theme-light .directory__link:focus-visible {
    outline-color: #2563eb;
}

body.theme-light .directory__heading,
body.theme-light .directory__item,
body.theme-light .directory__desc {
    color: #111827;
}

body.theme-light .directory__empty {
    color: #374151;
}

body.theme-light .directory__icon {
    background: rgba(15, 23, 42, 0.06);
}

body.theme-light .directory__icon--fallback {
    color: #334155;
    background: rgba(15, 23, 42, 0.08);
}

body.theme-light .directory__icon--add {
    color: #2563eb;
    background: transparent;
}

body.theme-light .directory__add {
    border-color: rgba(15, 23, 42, 0.2);
    color: #64748b;
}

body.theme-light .directory__add:hover {
    color: #0f172a;
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
}

body.theme-light .directory__add-link {
    color: #2563eb;
}

body.theme-light .directory__add-link:focus-visible {
    outline-color: #2563eb;
}

@media (max-width: 1100px) {
    .directory {
        column-count: 2;
        column-gap: 2rem;
    }

    .directory.is-masonry {
        gap: 2rem;
    }
}

@media (max-width: 700px) {
    .directory {
        column-count: 1;
    }

    .directory__heading {
        font-size: 1.375rem;
    }
}

.form-hint__spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(59, 130, 246, 0.25);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

.form-input--loading {
    opacity: 0.7;
    pointer-events: none;
}

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

    .modal__footer {
        flex-direction: column-reverse;
    }

    .modal__footer .btn {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .modal,
    .prefs-modal {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 20px 20px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        max-height: min(92dvh, calc(100vh - env(safe-area-inset-top, 0px) - 0.5rem));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow: hidden;
        box-shadow:
            0 -8px 40px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    }

    .modal[open],
    .prefs-modal[open] {
        display: flex;
        flex-direction: column;
        animation: sheet-up 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .modal::before,
    .prefs-modal::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: 0.55rem auto 0.15rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        flex-shrink: 0;
    }

    body.theme-light .modal::before,
    body.theme-light .prefs-modal::before {
        background: rgba(15, 23, 42, 0.18);
    }

    .modal[open] {
        height: auto;
    }

    .modal__form {
        min-height: 0;
        max-height: calc(min(92dvh, calc(100vh - env(safe-area-inset-top, 0px) - 0.5rem)) - 1.2rem);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal__header {
        padding-top: 0.65rem;
    }

    .modal__footer {
        position: sticky;
        bottom: 0;
        background: linear-gradient(180deg, transparent, var(--bg-elevated) 28%);
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    }

    .prefs-modal[open] {
        height: min(92dvh, calc(100vh - env(safe-area-inset-top, 0px) - 0.5rem));
        height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 0.5rem));
        max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 0.5rem));
    }
}

.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.messages__item {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--surface);
}

.btn--block {
    width: 100%;
}

/* Auth pages */
.auth-page {
    display: flex;
    justify-content: center;
    padding: clamp(2.5rem, 7vh, 4.5rem) 1.5rem 3rem;
}

.auth-card {
    width: 100%;
    max-width: 28rem;
    padding: 2.15rem 2rem 2.1rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.auth-card--wide {
    max-width: 32rem;
}

.auth-card__kicker {
    margin: 0 0 0.45rem;
    color: #0284c7;
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.auth-card__title {
    margin: 0 0 0.5rem;
    font-family: var(--landing-display, var(--font));
    font-size: clamp(1.85rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    text-align: center;
    color: #0f172a;
}

.auth-card__lead {
    margin: 0 0 1.75rem;
    color: #64748b;
    text-align: center;
    font-size: 1.02rem;
    line-height: 1.55;
}

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

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.auth-field__label {
    font-size: 0.92rem;
    font-weight: 650;
    color: #334155;
}

.auth-input,
.page-auth .form-input {
    min-height: 3.5rem;
    padding: 0.95rem 1.15rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 1.08rem;
}

.auth-input::placeholder,
.page-auth .form-input::placeholder {
    color: #94a3b8;
}

.auth-input:hover,
.page-auth .form-input:hover {
    border-color: rgba(15, 23, 42, 0.2);
    background: #fff;
}

.auth-input:focus,
.page-auth .form-input:focus {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

.auth-form__submit {
    min-height: 3.5rem;
    margin-top: 0.35rem;
    border-radius: 16px;
    font-size: 1.08rem;
    font-weight: 700;
}

.auth-card .plan-pay__price {
    margin: 0 0 1.25rem;
    text-align: center;
}

.auth-legal {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

.auth-legal.is-invalid {
    border-color: rgba(220, 38, 38, 0.35);
    background: #fef2f2;
}

.auth-legal__check {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.15rem;
    border: 2px solid rgba(15, 23, 42, 0.25);
    border-radius: 6px;
    background-color: #fff;
    color-scheme: light;
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}

.auth-legal__check:hover {
    border-color: #2563eb;
}

.auth-legal__check:checked {
    background-color: #2563eb;
    border-color: #2563eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
    background-size: 0.85rem;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-legal__check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.auth-legal.is-invalid .auth-legal__check {
    border-color: #dc2626;
}

.auth-legal__text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #334155;
}

.auth-legal__text a {
    color: #1d4ed8;
    text-underline-offset: 2px;
}

.page-auth .form-error {
    color: #b91c1c;
}

.page-auth .alert--error,
.page-auth .messages__item--error {
    background: #fef2f2;
    color: #991b1b;
    border-color: rgba(220, 38, 38, 0.18);
}

.page-auth .messages__item--success {
    background: #ecfdf5;
    color: #166534;
    border-color: rgba(22, 163, 74, 0.2);
}

.page-auth .messages__item--info,
.page-auth .messages__item--warning {
    background: #fff7ed;
    color: #9a3412;
    border-color: rgba(234, 88, 12, 0.18);
}

.auth-messages {
    margin: 0 0 1.15rem;
}

.auth-card__footer {
    margin: 1.5rem 0 0;
    text-align: center;
    color: #64748b;
    font-size: 0.98rem;
}

.auth-card__footer a {
    color: #1d4ed8;
    font-weight: 650;
    text-decoration: none;
}

.auth-card__footer a:hover {
    text-decoration: underline;
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.75rem 2rem;
    min-height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    position: relative;
    z-index: 200;
}

.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--text);
    text-decoration: none;
    line-height: 1;
}

.nav__brand-mark {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
    flex-shrink: 0;
}

.nav__brand-text {
    line-height: 1;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: nowrap;
    min-width: 0;
}

.nav-search {
    position: relative;
    flex: 1 1 12rem;
    max-width: 26rem;
    min-width: 0;
    z-index: 2;
}

.nav-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.nav-search__bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0.2rem 0.25rem 0.2rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.nav-search__bar:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
}

.nav-search__bar:focus-within {
    border-color: rgba(59, 130, 246, 0.55);
    background: rgba(15, 20, 25, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.nav-search__icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.nav-search__input {
    flex: 1;
    min-width: 0;
    height: 1.85rem;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
}

.nav-search__input::placeholder {
    color: var(--text-muted);
}

.nav-search__input::-webkit-search-cancel-button {
    appearance: none;
}

.nav-search__voice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.nav-search__voice:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
}

.nav-search__voice:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.nav-search__voice:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.nav-search__voice.is-listening {
    color: #fff;
    background: var(--accent);
    animation: nav-search-pulse 1.1s ease-in-out infinite;
}

@keyframes nav-search-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}

.nav-search__results {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    max-height: min(22rem, 70vh);
    overflow: auto;
    padding: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
}

.nav-search__results[hidden] {
    display: none;
}

.nav-search__empty,
.nav-search__status {
    margin: 0;
    padding: 0.85rem 0.85rem 1.15rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.nav-search__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.nav-search__item:hover,
.nav-search__item.is-active {
    background: rgba(59, 130, 246, 0.14);
}

.nav-search__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.nav-search__fav {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

.nav-search__fav img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.nav-search__fav-letter {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}

.nav-search__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.nav-search__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.nav-search__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.nav__add-site {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.nav__add-site svg {
    flex-shrink: 0;
}

.nav__link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
}

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

.nav__user {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
}

.nav-user-menu {
    position: relative;
    z-index: 1;
}

.nav-user-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.nav-prefs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.nav-prefs-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

body.theme-light .nav-search__bar {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.04);
}

body.theme-light .nav-search__bar:hover {
    border-color: rgba(15, 23, 42, 0.16);
    background: rgba(15, 23, 42, 0.06);
}

body.theme-light .nav-search__bar:focus-within {
    border-color: rgba(37, 99, 235, 0.45);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

body.theme-light .nav-search__voice:hover {
    background: rgba(15, 23, 42, 0.06);
}

body.theme-light .nav-search__results {
    border-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .nav-search__item:hover,
body.theme-light .nav-search__item.is-active {
    background: rgba(37, 99, 235, 0.1);
}

body.theme-light .nav-prefs-btn {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.04);
    color: #64748b;
}

body.theme-light .nav-prefs-btn:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.14);
}

.nav-user-menu.is-open {
    z-index: 3000;
}

.nav-user-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 14rem;
    padding: 0.3rem 0.55rem 0.3rem 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.nav-user-menu__btn:hover,
.nav-user-menu.is-open .nav-user-menu__btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.nav-user-menu__avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(145deg, #60a5fa, #2563eb);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.nav-user-menu__avatar--img {
    object-fit: cover;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.nav-user-menu__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user-menu__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1;
    margin-right: 0.15rem;
}

.nav-user-menu__dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 3000;
    min-width: 220px;
    max-width: min(18rem, calc(100vw - 1.25rem));
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: var(--bg-elevated);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.nav-user-menu__dropdown[hidden] {
    display: none;
}

.nav-user-menu__form {
    margin: 0;
}

.nav-user-menu__item .nav__badge {
    margin-left: auto;
}

.nav-user-menu__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s;
}

.nav-user-menu__item:hover {
    background: var(--surface);
}

.nav-user-menu__item-icon {
    display: grid;
    place-items: center;
    color: var(--text-muted);
}

.nav-user-menu__item--danger {
    color: #fca5a5;
}

.nav-user-menu__item--danger .nav-user-menu__item-icon {
    color: #f87171;
}

.nav-user-menu__item--danger:hover {
    background: rgba(239, 68, 68, 0.12);
}

.nav-user-menu__site {
    display: none;
}

.nav-user-menu__divider {
    height: 1px;
    margin: 0.35rem 0.4rem;
    background: rgba(255, 255, 255, 0.08);
}

.nav-user-menu__item--active {
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
}

body.theme-light .nav-user-menu__divider {
    background: rgba(15, 23, 42, 0.08);
}

body.theme-light .nav-user-menu__item--active {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

body.theme-light .nav-user-menu__btn {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.1);
}

body.theme-light .nav-user-menu__btn:hover,
body.theme-light .nav-user-menu.is-open .nav-user-menu__btn {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.16);
}

body.theme-light .nav-user-menu__dropdown {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

.nav__logout {
    margin: 0;
    display: inline;
}

.nav__menu {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
}

.nav__menu.is-open {
    z-index: 3000;
}

.nav__menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.nav__menu-btn:hover {
    border-color: rgba(59, 130, 246, 0.45);
    background: rgba(59, 130, 246, 0.12);
}

.nav__menu-btn:active {
    transform: scale(0.96);
}

.nav__menu.is-open .nav__menu-btn {
    border-color: rgba(59, 130, 246, 0.45);
    background: rgba(59, 130, 246, 0.12);
}

.nav__menu-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 14px;
}

.nav__menu-icon span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav__menu.is-open .nav__menu-icon span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.nav__menu.is-open .nav__menu-icon span:nth-child(2) {
    opacity: 0;
}

.nav__menu.is-open .nav__menu-icon span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

.nav__menu-dropdown {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.nav__menu-dropdown[hidden] {
    display: flex !important;
}

.nav__menu-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.nav__menu-item:hover {
    color: var(--text);
}

.nav__menu-item--active {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 720px) {
    .nav__menu-btn {
        display: inline-flex;
    }

    .nav__menu-dropdown {
        position: absolute;
        top: calc(100% + 0.45rem);
        right: 0;
        z-index: 3000;
        min-width: 11.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        padding: 0.4rem;
        background: var(--bg-elevated);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    }

    .nav__menu-dropdown[hidden] {
        display: none !important;
    }

    .nav__menu-item {
        display: block;
        padding: 0.65rem 0.85rem;
        border-radius: 8px;
        font-size: 0.92rem;
        color: var(--text);
    }

    .nav__menu-item:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .nav__menu-item--active {
        background: rgba(59, 130, 246, 0.14);
        color: #93c5fd;
    }

    body.theme-light .nav__menu-dropdown {
        background: #fff;
        border-color: rgba(15, 23, 42, 0.1);
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    }

    body.theme-light .nav__menu-item:hover {
        background: rgba(15, 23, 42, 0.05);
    }

    body.theme-light .nav__menu-item--active {
        background: rgba(37, 99, 235, 0.1);
        color: #1d4ed8;
    }
}

.btn--sm {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
}

.btn--lg {
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
}

/* Landing */
.page-landing {
    --landing-display: 'Syne', var(--font);
    --landing-ocean: #000000;
    --landing-foam: #7dd3fc;
    overflow-x: hidden;
}

body.page-landing {
    background-color: var(--landing-ocean);
    background-image:
        radial-gradient(ellipse 90% 55% at 50% -15%, rgba(56, 189, 248, 0.12), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 30%, rgba(59, 130, 246, 0.08), transparent 50%),
        radial-gradient(ellipse 45% 35% at 0% 70%, rgba(20, 184, 166, 0.06), transparent 50%),
        linear-gradient(180deg, #000000 0%, #0a0a0a 45%, #000000 100%);
}

.nav--landing {
    position: sticky;
    top: 0;
    z-index: 200;
    border-bottom-color: transparent;
    background: color-mix(in srgb, var(--landing-ocean) 72%, transparent);
}

.landing {
    display: block;
}

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 56px);
    padding: clamp(2.5rem, 6vh, 4.5rem) 1.5rem 0;
    text-align: center;
}

.hero__glow {
    position: absolute;
    inset: 8% 10% auto;
    height: 42%;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.16), transparent 70%);
    pointer-events: none;
    animation: hero-glow 8s ease-in-out infinite alternate;
}

@keyframes hero-glow {
    from { opacity: 0.7; transform: scale(1); }
    to { opacity: 1; transform: scale(1.08); }
}

.hero__copy {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    margin: 0 auto 2.75rem;
    animation: hero-rise 0.7s ease-out both;
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__brand {
    margin: 0 0 0.85rem;
    font-family: var(--landing-display);
    font-size: clamp(1.75rem, 4.5vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(120deg, #e8edf4 20%, var(--landing-foam) 55%, #60a5fa 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__title {
    margin: 0 0 1rem;
    font-family: var(--landing-display);
    font-size: clamp(2.15rem, 6vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--text);
}

.hero__lead {
    margin: 0 auto 1.75rem;
    max-width: 32rem;
    color: var(--text-muted);
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    line-height: 1.6;
}

.hero__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero__actions .btn--primary {
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
}

.hero__stage {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 clamp(1rem, 4vw, 3rem) 0;
    animation: hero-rise 0.85s 0.12s ease-out both;
}

.hero-preview {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    --bg: #1c1e26;
    --bg-elevated: #272a33;
    --surface: #333742;
    --text: #f4f5f7;
    --text-muted: #a8aeb8;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --dial-columns: 6;
    --dial-gap: 14px;
    --dial-max-width: 1080px;
}

.hero-preview.theme-light {
    --bg: #f3f5f8;
    --bg-elevated: #ffffff;
    --surface: #e8edf4;
    --text: #152033;
    --text-muted: #5b6b82;
    --shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.hero-preview__controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 0.15rem;
}

.hero-preview__switch {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 14, 20, 0.55);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.hero-preview__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: transparent;
    color: rgba(232, 237, 244, 0.72);
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.hero-preview__chip:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.hero-preview__chip:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.7);
    outline-offset: 2px;
}

.hero-preview__chip.is-active {
    background: linear-gradient(180deg, #4f8ff7, #3b82f6);
    color: #fff;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}

.hero-preview__chip svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.hero-preview__frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: clamp(420px, 52vw, 540px);
    min-height: clamp(420px, 52vw, 540px);
    max-height: clamp(420px, 52vw, 540px);
    padding: 1.15rem 1.15rem 1.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px 24px 0 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, transparent), transparent 42%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.06) inset,
        0 30px 80px rgba(0, 0, 0, 0.45);
    mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
    color: var(--text);
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-preview.theme-light .hero-preview__frame {
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.85) inset,
        0 24px 60px rgba(15, 23, 42, 0.12);
}

.hero-preview__chrome {
    margin-bottom: 1rem;
}

.hero-preview__tabs {
    margin: 0;
    margin-bottom: 0;
    padding: 0;
    gap: 0.45rem;
    overflow: hidden;
}

.hero-preview__tabs .categories-tabs {
    gap: 0.45rem;
}

.hero-preview .categories-tabs__item {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-drag: none;
    font-family: inherit;
}

.hero-preview .categories-tabs__item--active {
    color: var(--text);
    background: color-mix(in srgb, var(--tab-color, var(--accent)) 20%, transparent);
    border-color: color-mix(in srgb, var(--tab-color, var(--accent)) 55%, transparent);
    box-shadow: inset 0 -2px 0 var(--tab-color, var(--accent));
}

.hero-preview.theme-light .categories-tabs__item:not(.categories-tabs__item--add) {
    border-color: rgba(100, 116, 139, 0.4);
    background: rgba(15, 23, 42, 0.03);
}

.hero-preview.theme-light .categories-tabs__item:hover {
    background: rgba(15, 23, 42, 0.06);
}

.hero-preview .categories-tabs__item--add {
    cursor: default;
    pointer-events: none;
}

.hero-preview__body {
    position: relative;
}

.hero-preview.view-tiles .view-panel--directory,
.hero-preview.view-directory .view-panel--tiles {
    display: none !important;
}

.hero-preview__dial {
    display: none;
    width: 100%;
    margin: 0 auto;
}

.hero-preview__dial.is-active {
    display: grid;
}

.hero-preview .tile,
.hero-preview .tile--add {
    pointer-events: none;
    cursor: default;
}

.hero-preview .tile__link {
    cursor: default;
}

.hero-preview.theme-light .tile {
    border-color: rgba(15, 23, 42, 0.08);
}

.hero-preview.theme-light .tile--add {
    border-color: rgba(100, 116, 139, 0.4);
}

.hero-preview__directory {
    max-height: none;
    text-align: left;
}

.hero-preview__directory .directory__heading,
.hero-preview__directory .directory__item,
.hero-preview__directory .directory__list {
    text-align: left;
}

.hero-preview .directory__link,
.hero-preview .directory__add-link,
.hero-preview .directory__add {
    pointer-events: none;
    cursor: default;
}

/* На лендинге body.theme-light — явно фиксируем цвета списка внутри превью */
.hero-preview.theme-dark .directory__heading,
.hero-preview.theme-dark .directory__item,
.hero-preview.theme-dark .directory__desc {
    color: #fff;
}

.hero-preview.theme-dark .directory__empty {
    color: rgba(255, 255, 255, 0.72);
}

.hero-preview.theme-dark .directory__icon {
    background: rgba(255, 255, 255, 0.08);
}

.hero-preview.theme-dark .directory__icon--fallback {
    color: rgba(255, 255, 255, 0.88);
}

.hero-preview.theme-dark .directory__icon--add {
    color: #60a5fa;
}

.hero-preview.theme-dark .directory__link,
.hero-preview.theme-dark .directory__add-link {
    color: #60a5fa;
}

.hero-preview.theme-dark .directory__add {
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text-muted);
    background: transparent;
}

.hero-preview.theme-light .directory__link,
.hero-preview.theme-light .directory__add-link {
    color: #2563eb;
}

.hero-preview.theme-light .directory__heading,
.hero-preview.theme-light .directory__item,
.hero-preview.theme-light .directory__desc {
    color: #111827;
}

.hero-preview.theme-light .directory__empty {
    color: #374151;
}

.hero-preview.theme-light .directory__icon {
    background: rgba(15, 23, 42, 0.06);
}

.hero-preview.theme-light .directory__icon--fallback {
    color: #334155;
    background: rgba(15, 23, 42, 0.08);
}

.hero-preview.theme-light .directory__icon--add {
    color: #2563eb;
}

.hero-preview.theme-light .directory__add {
    border-color: rgba(15, 23, 42, 0.2);
    color: #64748b;
    background: transparent;
}

.hero-preview__empty {
    display: grid;
    place-items: center;
    min-height: 280px;
    color: var(--text-muted);
    text-align: center;
    padding: 2rem;
}

@media (max-width: 800px) {
    .hero-preview {
        --dial-columns: 4;
        --dial-gap: 10px;
    }

    .hero-preview__frame {
        height: 460px;
        min-height: 460px;
        max-height: 460px;
        padding: 0.95rem 0.95rem 1.35rem;
    }

    .hero-preview__chip {
        padding: 0.45rem 0.75rem;
        font-size: 0.78rem;
    }
}

@media (max-width: 560px) {
    .hero-preview {
        --dial-columns: 3;
    }

    .hero-preview__frame {
        border-radius: 18px 18px 0 0;
        height: 400px;
        min-height: 400px;
        max-height: 400px;
    }

    .hero-preview__controls {
        gap: 0.5rem;
    }

    .hero-preview__switch {
        width: 100%;
        justify-content: stretch;
    }

    .hero-preview__chip {
        flex: 1;
        justify-content: center;
    }
}


.discover {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 5rem) 1.5rem 1rem;
}

.landing--feed {
    min-height: calc(100vh - 140px);
}

.discover--feed {
    max-width: 1080px;
    padding-top: clamp(1.75rem, 4vw, 2.75rem);
    padding-bottom: 2.5rem;
}

.discover__dial {
    width: 100%;
}

.discover--feed .tile,
.discover--feed .tile[data-id] {
    cursor: pointer;
}

.tile__favorite {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.82);
    color: #64748b;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}

.tile__favorite:hover {
    color: #d97706;
    background: #fff;
    transform: translateY(-1px);
}

.tile__favorite--saved,
.tile__favorite--saved:hover {
    color: #d97706;
    background: #fff7ed;
    cursor: default;
    transform: none;
}

.tile__favorite--saved svg {
    fill: currentColor;
}

.tile__favorite--loading {
    opacity: 0.55;
    pointer-events: none;
}

.tile__favorite--guest {
    opacity: 0.85;
}

.discover--feed a.tile--add {
    text-decoration: none;
    color: inherit;
    font: inherit;
}

.discover__messages {
    margin-bottom: 1.25rem;
}




.plan-pay__price {
    margin: 1rem 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 700;
}


.discover--feed .discover__title {
    font-size: clamp(1.75rem, 4vw, 2.35rem);
}

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

.footer a:hover {
    color: var(--text);
    text-decoration: underline;
}

.footer a.btn:hover {
    text-decoration: none;
}

.nav--landing .nav__menu-item--active {
    color: var(--landing-foam, #7dd3fc);
}

.btn-label--short {
    display: none;
}

.discover__submit .btn-label--short {
    display: none;
    line-height: 0;
}

@media (max-width: 720px) {
    .nav--feed {
        align-items: center;
        gap: 0.65rem;
        padding-left: max(0.85rem, env(safe-area-inset-left));
        padding-right: max(0.85rem, env(safe-area-inset-right));
        padding-top: max(0.55rem, env(safe-area-inset-top));
    }

    .nav--feed .nav__brand-text {
        max-width: 7.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav--feed .nav__links {
        gap: 0.45rem;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
    }

    .nav--feed .nav-user-menu__name {
        max-width: 5.5rem;
    }

    .nav--feed .btn--sm {
        padding: 0.4rem 0.7rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .nav--feed .btn-label--full {
        display: none;
    }

    .nav--feed .btn-label--short {
        display: inline;
    }

    .landing--feed {
        min-height: calc(100vh - 120px);
    }

    .discover--feed {
        max-width: none;
        padding: 1.25rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
    }

    .discover--feed .discover__title {
        font-size: clamp(1.45rem, 7vw, 1.85rem);
    }

    .discover--feed .discover__lead {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .discover--feed .discover__intro {
        margin-bottom: 1.15rem;
    }

    .discover--feed .discover__toolbar {
        position: sticky;
        top: 52px;
        z-index: 20;
        margin-bottom: 1.15rem;
        padding: 0.15rem 0 0.25rem;
        background: color-mix(in srgb, #f4f7fb 88%, transparent);
        backdrop-filter: blur(10px);
    }

    .discover--feed .discover__search {
        margin-bottom: 0;
    }

    .discover--feed .discover__search-bar {
        gap: 0.65rem;
        min-height: 3.4rem;
        padding: 0.5rem 0.5rem 0.5rem 1rem;
        border-radius: 18px;
        background: rgba(12, 12, 12, 0.92);
        backdrop-filter: blur(10px);
    }

    .discover--feed .discover__input {
        font-size: 16px; /* без зума iOS */
        min-height: 2.6rem;
    }

    .discover--feed .discover__submit {
        min-width: 3rem;
        width: 3rem;
        height: 3rem;
        padding: 0;
        border-radius: 14px;
    }

    .discover--feed .discover__submit .btn-label--full {
        display: none;
    }

    .discover--feed .discover__submit .btn-label--short {
        display: grid;
        place-items: center;
    }

    .discover--feed .serp {
        gap: 0.15rem;
    }

    .discover--feed .serp__link {
        gap: 0.75rem;
        padding: 0.85rem 0.55rem;
        border-radius: 14px;
        min-height: 4.25rem;
        -webkit-tap-highlight-color: transparent;
    }

    .discover--feed .serp__link:active {
        background: rgba(255, 255, 255, 0.06);
    }

    .discover--feed .serp__icon-wrap {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .discover--feed .serp__icon {
        width: 24px;
        height: 24px;
    }

    .discover--feed .serp__title {
        font-size: 1rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .discover--feed .serp__url,
    .discover--feed .serp__meta {
        font-size: 0.8rem;
        white-space: normal;
        overflow: hidden;
        word-break: break-word;
    }

    .discover--feed .serp__meta {
        line-height: 1.4;
    }

    .footer--feed {
        padding: 1.25rem max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
        font-size: 0.8rem;
    }
}

@media (max-width: 380px) {
    .nav--feed .nav__add-site .btn-label--short {
        display: none;
    }

    .nav--feed .nav__brand-text {
        display: none;
    }

    .nav-user-menu__name {
        display: none;
    }

    .nav-user-menu__chevron {
        display: none;
    }

    .nav-user-menu__btn {
        padding: 0.25rem;
    }
}

.discover__intro {
    margin: 0 0 1.5rem;
}

.discover__title {
    margin: 0 0 0.5rem;
    font-family: var(--landing-display);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.discover__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
}

.discover__toolbar {
    display: block;
    margin: 0 0 1.75rem;
}

.discover__toolbar .discover__search {
    width: 100%;
    margin: 0;
}

.discover__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
}

.discover__topic {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 650;
    text-decoration: none;
}

.discover__topic:hover,
.discover__topic.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.discover__search {
    margin: 0 0 1.75rem;
}

.discover__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.discover__search-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 3.6rem;
    padding: 0.55rem 0.55rem 0.55rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.discover__search-bar:focus-within {
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.discover__submit {
    flex-shrink: 0;
    min-width: 6.5rem;
    min-height: 2.7rem;
    border-radius: 12px;
    font-size: 1rem;
}

.discover__search-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.discover__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 1.15rem;
    outline: none;
}

.discover__input::placeholder {
    color: rgba(138, 138, 138, 0.85);
}

.serp {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.serp__item {
    margin: 0;
}

.serp__row {
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
}

.serp__row .serp__link {
    flex: 1;
    min-width: 0;
}

.serp__favorite {
    flex-shrink: 0;
    align-self: center;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.35rem;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(148, 163, 184, 0.85);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.serp__favorite:hover {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

.serp__favorite:active {
    transform: scale(0.94);
}

.serp__favorite--saved,
.serp__favorite--saved:hover {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.18);
    cursor: default;
}

.serp__favorite--saved .serp__favorite-icon {
    fill: currentColor;
}

.serp__favorite--loading {
    opacity: 0.55;
    pointer-events: none;
}

.serp__favorite--guest {
    opacity: 0.75;
}

.serp__link {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.85rem 0.75rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.serp__link:hover {
    background: rgba(255, 255, 255, 0.04);
}

.serp__icon-wrap {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.serp__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
}

.serp__icon.tile__icon--fallback {
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(59, 130, 246, 0.15);
}

.serp__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.serp__title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #93c5fd;
    line-height: 1.3;
}

.serp__link:hover .serp__title {
    text-decoration: underline;
}

.serp__url {
    font-size: 0.88rem;
    color: #86efac;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.serp__meta {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.serp__author {
    color: #93c5fd;
    font-weight: 500;
}

.discover__toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    max-width: min(34rem, calc(100vw - 1.5rem));
    padding: 0.8rem 1.15rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(253, 230, 138, 0.28);
    color: #fff7d6;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.35);
    pointer-events: none;
    transition: opacity 0.2s;
}

.discover__toast[hidden] {
    display: block;
    opacity: 0;
    visibility: hidden;
}

.discover__empty,
.discover__more {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.discover__infinite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.25rem;
    margin-top: 1.25rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.discover__infinite[hidden] {
    display: none;
}

.discover__infinite-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    opacity: 0;
}

.discover__infinite-text {
    opacity: 0;
}

.discover__infinite.is-loading .discover__infinite-spinner {
    opacity: 1;
    animation: discover-spin 0.7s linear infinite;
}

.discover__infinite.is-loading .discover__infinite-text {
    opacity: 1;
}

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

.lb-tooltip {
    position: fixed;
    z-index: 980;
    max-width: min(22rem, calc(100vw - 1.5rem));
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
    pointer-events: none;
}

.lb-tooltip[hidden] {
    display: none;
}

@media (max-width: 768px), (hover: none), (pointer: coarse) {
    .lb-tooltip {
        display: none !important;
    }
}

.features {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(4rem, 10vw, 6.5rem) 1.5rem 2rem;
}

.features__intro {
    max-width: 36rem;
    margin: 0 0 2.5rem;
}

.features__title {
    margin: 0 0 0.65rem;
    font-family: var(--landing-display);
    font-size: clamp(1.6rem, 3.5vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.features__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

.features__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
}

.feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.35rem 0;
}

.feature__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}

.feature__heading {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.feature__text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.cta {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(3.5rem, 9vw, 5.5rem) 1.5rem;
    text-align: center;
}

.cta__title {
    margin: 0 0 0.75rem;
    font-family: var(--landing-display);
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.cta__text {
    margin: 0 auto 1.75rem;
    max-width: 28rem;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

.hero__kicker {
    display: inline-flex;
    align-items: center;
    margin: 0 0 1rem;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(56, 189, 248, 0.1);
    color: var(--landing-foam);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html:has(body.page-landing) {
    scroll-behavior: smooth;
}

.lp {
    scroll-margin-top: 4.5rem;
}

.lp__inner {
    width: min(1080px, calc(100% - 2.5rem));
    margin: 0 auto;
    padding: clamp(4rem, 8vw, 6.25rem) 0;
}

.lp--band {
    background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.lp--pricing .lp__inner {
    width: min(1100px, calc(100% - 2.5rem));
}

.lp--pricing .pricing__intro {
    margin-bottom: 2rem;
}

.lp-eyebrow {
    margin: 0 0 0.7rem;
    color: var(--landing-foam, #7dd3fc);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-eyebrow--center {
    text-align: center;
}

.lp-title {
    margin: 0 0 0.9rem;
    font-family: var(--landing-display);
    font-size: clamp(1.7rem, 3.6vw, 2.45rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.12;
}

.lp-faq {
    display: grid;
    gap: 0.65rem;
    max-width: 44rem;
}

.lp-faq__item {
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.15rem 1.1rem;
}

.lp-faq__item summary {
    cursor: pointer;
    list-style: none;
    padding: 0.95rem 0;
    font-weight: 600;
    font-size: 1.02rem;
}

.lp-faq__item summary::-webkit-details-marker {
    display: none;
}

.lp-faq__item p {
    margin: 0 0 1rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.lp-lead {
    margin: 0 0 1.4rem;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 36rem;
}

.lp-lead--wide {
    max-width: 40rem;
}

.lp-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.lp-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.lp-checks li {
    position: relative;
    padding-left: 1.55rem;
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.45;
}

.lp-checks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.lp-ram {
    display: grid;
    gap: 0.7rem;
    justify-items: stretch;
}

.lp-ram__window,
.lp-ram__panel {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-elevated);
    padding: 1rem 1.05rem 1.1rem;
    box-shadow: var(--shadow);
}

.lp-ram__bar {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
}

.lp-ram__bar span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #f87171;
}

.lp-ram__bar span:nth-child(2) { background: #fbbf24; }
.lp-ram__bar span:nth-child(3) { background: #34d399; }

.lp-ram__tabs,
.lp-ram__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lp-ram__tabs span,
.lp-ram__tiles span {
    padding: 0.32rem 0.62rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.lp-ram__tabs span {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.lp-ram__load,
.lp-ram__ok,
.lp-ram__panel-label {
    margin: 0.7rem 0 0;
    font-size: 0.82rem;
}

.lp-ram__load { color: #fca5a5; }
.lp-ram__ok { color: #86efac; }
.lp-ram__panel-label {
    margin: 0 0 0.7rem;
    color: var(--text-muted);
}

.lp-ram__tiles span {
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
}

.lp-ram__arrow {
    text-align: center;
    color: var(--landing-foam);
    font-size: 1.15rem;
    line-height: 1;
}

.lp-stats,
.lp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.lp-cards--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-stat,
.lp-card,
.lp-quote,
.lp-browser {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    padding: 1.25rem 1.2rem 1.3rem;
}

.lp-stat strong,
.lp-card__title {
    display: block;
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.lp-stat span,
.lp-card__text,
.lp-quote p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.lp-card__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.9rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

.lp-experts-note {
    margin: 1.45rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.lp-experts-note a {
    color: var(--landing-foam, var(--accent));
    font-weight: 600;
    text-decoration: none;
}

.lp-experts-note a:hover,
.lp-experts-note a:focus-visible {
    text-decoration: underline;
    outline: none;
}

.lp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.5rem;
}

.lp-pills span {
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    font-size: 0.88rem;
    font-weight: 550;
}

.lp-quote {
    font-family: var(--landing-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.35;
}

.lp-quote p {
    color: var(--text);
    font-size: inherit;
}

.lp-steps {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.85rem;
    counter-reset: lp-step;
}

.lp-steps li {
    counter-increment: lp-step;
    position: relative;
    padding-left: 2.1rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.lp-steps li::before {
    content: counter(lp-step);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.lp-browser {
    padding: 1.5rem;
}

.lp-browser__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 12px;
    background: #111;
    color: #f8fafc;
    font-weight: 600;
    font-size: 0.9rem;
}

.lp-browser__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2);
}

.lp-browser__menu {
    margin: 0.85rem 0 0;
    padding: 0.35rem;
    list-style: none;
    border-radius: 14px;
    background: #0b0b0b;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-browser__menu li {
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    color: #cbd5e1;
    font-size: 0.92rem;
}

.lp-browser__menu li.is-active {
    background: rgba(56, 189, 248, 0.16);
    color: #f8fafc;
}

.lp-flow {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.lp-flow li {
    padding: 1.2rem 1.1rem 1.25rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.lp-flow__n {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.85rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-weight: 700;
}

.lp-flow h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.lp-flow p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .lp-split,
    .lp-stats,
    .lp-cards,
    .lp-flow,
    .lp-cards--two {
        grid-template-columns: 1fr;
    }
}

/* Pricing */
.landing--pricing {
    min-height: calc(100vh - 140px);
}

.pricing {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) 1.5rem 3.5rem;
}

.pricing__intro {
    max-width: 36rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.pricing__eyebrow {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--landing-foam, #7dd3fc);
}

.pricing__title {
    margin: 0 0 0.75rem;
    font-family: var(--landing-display);
    font-size: clamp(1.85rem, 4.5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.pricing__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    align-items: stretch;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.35rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.04), transparent 45%),
        rgba(255, 255, 255, 0.02);
}

.plan--featured {
    border-color: rgba(96, 165, 250, 0.45);
    background:
        linear-gradient(165deg, rgba(59, 130, 246, 0.16), transparent 50%),
        rgba(255, 255, 255, 0.03);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    transform: translateY(-6px);
}

.plan__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    margin: 0;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(96, 165, 250, 0.2);
    color: #93c5fd;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.plan__name {
    margin: 0 0 0.35rem;
    font-family: var(--landing-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.plan__desc {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    min-height: 2.6em;
}

.plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1.25rem;
}

.plan__amount {
    font-family: var(--landing-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.plan__period {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.plan__features {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
}

.plan__features li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.4;
}

.plan__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.plan .btn--block {
    width: 100%;
}

.plan__note {
    margin: auto 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.1);
    color: var(--landing-foam, #7dd3fc);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
}

.prefs-pricing__lead {
    margin: 0 0 1.15rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.prefs-pricing .pricing__grid {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 0.85rem;
}

.prefs-pricing .plan {
    padding: 1.15rem 1.1rem 1.05rem;
    border-radius: 16px;
}

.prefs-pricing .plan--featured {
    transform: none;
    order: 0;
}

.prefs-pricing .plan__desc {
    min-height: 0;
    margin-bottom: 0.85rem;
}

.prefs-pricing .plan__amount {
    font-size: 1.65rem;
}

.prefs-pricing .plan__features {
    margin-bottom: 1.1rem;
    gap: 0.45rem;
}

.prefs-pricing .plan__features li {
    font-size: 0.86rem;
}

@media (max-width: 900px) {
    .pricing__grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .plan--featured {
        transform: none;
        order: -1;
    }
}

.footer {
    text-align: center;
    padding: 2rem 1.5rem 2.5rem;
    color: var(--text);
    font-size: 0.85rem;
    background: transparent;
    border-top: 0;
}

.footer p {
    margin: 0;
    font-family: var(--font);
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.footer p::-webkit-scrollbar {
    display: none;
}

.footer__legal {
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
}

.footer--app {
    flex-shrink: 0;
    width: 100%;
    margin-top: auto;
    padding: 1.15rem 1.5rem max(1.35rem, env(safe-area-inset-bottom, 0px));
}

body.has-board-bg .footer,
body.has-board-bg .footer a,
body.has-board-bg .footer a:hover,
body.theme-light.has-board-bg .footer,
body.theme-light.has-board-bg .footer a,
body.theme-light.has-board-bg .footer a:hover {
    color: #fff;
    background: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.45);
}





.lb-form__top {
    position: relative;
    flex-shrink: 0;
    padding: 1.45rem 3.4rem 1rem 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, #0c0c0e 88%, transparent);
    backdrop-filter: blur(12px);
}

.lb-form__kicker {
    margin: 0 0 0.4rem;
    color: #7dd3fc;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lb-form__title {
    margin: 0 0 0.45rem;
    font-family: var(--landing-display, inherit);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.lb-form__lead,
.lb-form__pay-note {
    margin: 0.55rem 0 0;
    max-width: 24rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.lb-form__pay-note {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.7rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    font-size: 0.82rem;
    font-weight: 650;
}

.lb-form__close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 2;
}

.lb-form__body {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    flex: 1;
    min-height: 0;
    padding: 1.35rem 1.35rem 1.15rem 1.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}

.lb-form__body::-webkit-scrollbar {
    width: 8px;
}

.lb-form__body::-webkit-scrollbar-track {
    background: transparent;
    margin: 0.4rem 0;
}

.lb-form__body::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(148, 163, 184, 0.32),
        rgba(125, 211, 252, 0.4)
    );
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.lb-form__body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(148, 163, 184, 0.5),
        rgba(56, 189, 248, 0.55)
    );
    background-clip: padding-box;
}

.lb-field {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.lb-field__label {
    font-size: 0.95rem;
    font-weight: 650;
    color: #e5e7eb;
}

.lb-field__hint {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.lb-input {
    width: 100%;
    min-height: 3.4rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-family: inherit;
    font-size: 1.12rem;
    line-height: 1.3;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.lb-input::placeholder {
    color: rgba(163, 163, 163, 0.75);
}

.lb-input:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.055);
}

.lb-input:focus {
    outline: none;
    border-color: #38bdf8;
    background: rgba(8, 12, 18, 0.9);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
}

.lb-input--area {
    min-height: 6.4rem;
    resize: vertical;
    line-height: 1.45;
}

.lb-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 6.25rem;
    padding: 1.1rem 1.2rem;
    border: 1.5px dashed rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.lb-drop:hover,
.lb-drop.is-over {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
}

.lb-drop.is-ready {
    border-style: solid;
    border-color: rgba(125, 211, 252, 0.35);
}

.lb-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.lb-drop__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    flex-shrink: 0;
}

.lb-drop__preview {
    display: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.lb-drop__preview:not([hidden]) {
    display: block;
}

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

.lb-drop__copy strong {
    font-size: 1.02rem;
    font-weight: 650;
}

.lb-drop__copy small {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.lb-color {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1rem 0.7rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.lb-color__preview {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--tile-accent, #3b82f6) 70%, transparent) 0%,
            transparent 62%
        ),
        #111318;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.lb-color__input {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
}

.lb-color__input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.lb-color__input::-webkit-color-swatch {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
}

.lb-color__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.lb-color__meta strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.lb-color__meta small {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.lb-legal {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.lb-legal__check {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.12rem;
    accent-color: #38bdf8;
}

.lb-legal__text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #d4d4d8;
}

.lb-legal__text a {
    color: #7dd3fc;
    text-underline-offset: 2px;
}

.lb-form__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    gap: 0;
    padding: 0.95rem 1.75rem 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, #0c0c0e 90%, transparent);
    backdrop-filter: blur(12px);
}

.lb-form__pay-hint {
    margin: 0 0 0.65rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 550;
    line-height: 1.35;
}

.lb-form__pay {
    width: 100%;
    min-height: 3.25rem;
    border-radius: 999px;
    font-size: 1.08rem;
    font-weight: 700;
}

.lb-form__consent {
    margin: 0.75rem 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.lb-form__consent a {
    color: #7dd3fc;
    text-underline-offset: 2px;
}

@media (max-width: 600px) {

    .lb-form__top,
    .lb-form__body,
    .lb-form__footer {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .lb-form__title {
        font-size: 1.55rem;
    }

    .lb-form__pay {
        width: 100%;
    }
}

.form-field--check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.form-field--check .form-checkbox {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.form-field__check-text {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.form-field__check-text a {
    color: #93c5fd;
}

.legal {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 46rem);
    gap: 2.5rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) 1.5rem 3rem;
}

.legal__nav {
    position: sticky;
    top: 5rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.legal__nav-title {
    margin: 0 0 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.legal__nav-link {
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.legal__nav-link:hover,
.legal__nav-link--active {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.legal__eyebrow {
    margin: 0 0 0.4rem;
    color: var(--landing-foam, #7dd3fc);
    font-weight: 600;
    font-size: 0.85rem;
}

.legal__title {
    margin: 0 0 0.65rem;
    font-family: var(--landing-display);
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    letter-spacing: -0.03em;
}

.legal__lead {
    margin: 0 0 0.5rem;
    color: var(--text-muted);
    font-size: 1.05rem;
}

.legal__meta {
    margin: 0 0 1.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.legal__body h2 {
    margin: 1.75rem 0 0.65rem;
    font-size: 1.15rem;
}

.legal__body p,
.legal__body li {
    color: #d4d4d8;
    line-height: 1.65;
}

.legal__body a {
    color: #93c5fd;
}

.legal__list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
}

.legal__list li {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.legal__list a {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.legal__list span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.legal__facts {
    display: grid;
    gap: 1rem;
    margin: 1.25rem 0;
}

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

.legal__facts dd {
    margin: 0.2rem 0 0;
}

@media (max-width: 800px) {
    .legal {
        grid-template-columns: 1fr;
        padding-top: 1.5rem;
    }

    .legal__nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

.blog {
    width: min(1080px, calc(100% - 2.5rem));
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) 0 3rem;
}

.blog__intro {
    max-width: 40rem;
    margin: 0 0 2.25rem;
}

.blog__title {
    margin: 0 0 0.75rem;
    font-family: var(--landing-display, var(--font));
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.blog__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

.blog__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
}

.blog-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 2rem 0 0;
}

.blog-pager__btn,
.blog-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
}

.blog-pager__btn:hover,
.blog-pager__page:hover {
    background: #eef2ff;
    border-color: rgba(29, 78, 216, 0.25);
    color: #1d4ed8;
}

.blog-pager__page--current {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
    cursor: default;
}

.blog-pager__btn--disabled {
    opacity: 0.4;
    pointer-events: none;
}

.blog-pager__status {
    margin: 0.85rem 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.blog-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 0 1.2rem;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.blog-card__cover-link {
    display: block;
}

.blog-card__cover {
    display: block;
    width: 100%;
    height: 11.5rem;
    object-fit: cover;
}

.blog-card__date,
.blog-card__title,
.blog-card__excerpt,
.blog-card__more {
    margin-left: 1.3rem;
    margin-right: 1.3rem;
}

.blog-card__date {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.blog-card__title {
    margin: 0.45rem 1.3rem 0.55rem;
    font-size: 1.12rem;
    line-height: 1.35;
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.blog-card__title a:hover {
    color: #1d4ed8;
}

.blog-card__excerpt {
    margin: 0 1.3rem 1rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    flex: 1;
}

.blog-card__more {
    font-weight: 650;
    color: #1d4ed8;
    text-decoration: none;
}

.blog--article {
    display: grid;
    grid-template-columns: minmax(0, 42rem) minmax(14rem, 18rem);
    gap: 2.5rem;
    align-items: start;
}

.blog-article__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
    font-size: 0.88rem;
}

.blog-article__crumbs a {
    color: var(--text-muted);
    text-decoration: none;
}

.blog-article__crumbs a:hover {
    color: #1d4ed8;
}

.blog-article__title {
    margin: 0 0 0.65rem;
    font-family: var(--landing-display, var(--font));
    font-size: clamp(1.7rem, 3.5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.2;
}

.blog-article__meta {
    margin: 0 0 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.blog-article__cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 18px;
    margin: 0 0 1.5rem;
}

.blog-article__body {
    color: #334155;
}

.blog-article__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 2rem 0 0;
}

.blog-related {
    position: sticky;
    top: 5rem;
}

.blog-related__title {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blog-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.blog-related__list a {
    display: block;
    color: inherit;
    text-decoration: none;
    font-weight: 650;
    line-height: 1.35;
}

.blog-related__list a:hover {
    color: #1d4ed8;
}

.blog-related__list time {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

@media (max-width: 800px) {
    .blog__grid,
    .blog--article {
        grid-template-columns: 1fr;
    }

    .blog-related {
        position: static;
    }
}

@media (max-width: 800px) {
}

@media (max-width: 560px) {
    .hero {
        min-height: auto;
        padding-top: 2rem;
    }

    .hero__copy {
        margin-bottom: 2rem;
    }

    .hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .hero__actions .btn {
        width: 100%;
    }






    .lp-title {
        font-size: 1.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:has(body.page-landing) {
        scroll-behavior: auto;
    }

    .hero__copy,
    .hero__stage,
    .hero__glow,
    padding-top: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
    max-width: var(--dial-max-width, 100%);
    margin-inline: auto;
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
}

body.layout-center .page--dial {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Категории и заголовок остаются сверху — по центру только блок закладок */
body.layout-center .page--dial > .categories-bar,
body.layout-center .page--dial > .shared-head,
body.layout-center .page--dial > .alert,
body.layout-center .page--dial > .messages {
    flex-shrink: 0;
}

body.layout-center .page--dial > .main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

/* Список длинный — не центрируем и не обрезаем пагинацию */
body.view-directory.layout-center .page--dial > .main {
    justify-content: flex-start;
    overflow: auto;
}

body.layout-top .page--dial > .main {
    justify-content: flex-start;
}

body.view-directory .view-panel--directory {
    width: 100%;
    padding-bottom: 1.5rem;
}

/* Preferences modal */
.prefs-modal {
    width: min(920px, calc(100vw - 1.5rem));
    height: min(680px, calc(100vh - 2rem), calc(100dvh - 2rem));
    max-height: min(680px, calc(100vh - 2rem), calc(100dvh - 2rem));
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.prefs-modal::backdrop {
    background: rgba(12, 14, 20, 0.55);
    backdrop-filter: blur(6px);
}

.prefs-modal__layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    height: 100%;
    min-height: 0;
}

.prefs-modal__sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.25rem 0.85rem;
    background: var(--bg);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 0;
}

.prefs-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0.75rem 0.7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.prefs-user__avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(145deg, #60a5fa, #2563eb);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}

.prefs-user__avatar--img {
    object-fit: cover;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.prefs-user__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.prefs-user__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prefs-user__plan {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prefs-user__plan--pro {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

body.theme-light .prefs-user {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .prefs-user__plan {
    background: rgba(15, 23, 42, 0.06);
}

body.theme-light .prefs-user__plan--pro {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.prefs-modal__sidebar-title {
    margin: 0 0.65rem 0.75rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.prefs-modal__menu-top {
    display: none;
}

.prefs-nav__chevron {
    display: none;
    margin-left: auto;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.55;
}

.prefs-modal__back {
    display: none;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    margin: 0;
    padding: 0.35rem 0.55rem 0.35rem 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
}

.prefs-modal__back[hidden] {
    display: none !important;
}

.prefs-modal__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.prefs-modal__title {
    margin: 0;
    font-size: 1.25rem;
    flex: 1;
    min-width: 0;
}

.prefs-nav {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.prefs-nav__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.85;
}

.prefs-nav__label {
    min-width: 0;
    line-height: 1.25;
}

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

.prefs-nav:hover .prefs-nav__icon {
    opacity: 1;
}

.prefs-nav--active {
    background: rgba(59, 130, 246, 0.18);
    color: var(--text);
}

.prefs-nav--active .prefs-nav__icon {
    color: #93c5fd;
    opacity: 1;
}

.prefs-nav--danger {
    color: #fca5a5;
}

.prefs-nav--danger .prefs-nav__icon {
    color: #f87171;
}

.prefs-nav--danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
}

.prefs-modal__sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
}

.prefs-modal__content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow: hidden;
}

.prefs-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 0.35rem;
    margin-right: -0.15rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.prefs-panel::-webkit-scrollbar {
    width: 7px;
}

.prefs-panel::-webkit-scrollbar-track {
    background: transparent;
    margin: 0.25rem 0;
}

.prefs-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(148, 163, 184, 0.28),
        rgba(148, 163, 184, 0.42)
    );
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.15s ease;
}

.prefs-panel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(148, 163, 184, 0.5),
        rgba(96, 165, 250, 0.55)
    );
    background-clip: padding-box;
}

.prefs-panel::-webkit-scrollbar-corner {
    background: transparent;
}

body.theme-light .prefs-panel {
    scrollbar-color: rgba(100, 116, 139, 0.4) transparent;
}

body.theme-light .prefs-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(100, 116, 139, 0.28),
        rgba(100, 116, 139, 0.4)
    );
    background-clip: padding-box;
}

body.theme-light .prefs-panel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(100, 116, 139, 0.45),
        rgba(37, 99, 235, 0.45)
    );
    background-clip: padding-box;
}

.prefs-panel--hidden {
    display: none;
}

.prefs-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.prefs-field[hidden] {
    display: none;
}

.prefs-field__label span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-weight: 600;
}

.prefs-field__label small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.prefs-field--stack {
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.prefs-tile-look {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0.35rem 0 0.15rem;
    padding: 1.05rem 1.1rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 46%),
        rgba(15, 18, 24, 0.28);
}

.prefs-tile-look__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.prefs-tile-look__head .prefs-field__label {
    min-width: 0;
}

.prefs-tile-look__head .btn {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.prefs-tile-look__body {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.prefs-tile-preview {
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    padding: 8px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 55%),
        repeating-conic-gradient(rgba(255, 255, 255, 0.035) 0 25%, transparent 0 50%) 0 0 / 14px 14px;
}

.prefs-tile-preview__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    padding: 0.55rem 0.4rem 0.5rem;
    border-radius: 16px;
    background: var(--tile-bg, var(--bg-elevated));
    color: var(--tile-text-color, var(--text));
    border: 1px solid rgba(148, 163, 184, 0.38);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.prefs-tile-preview__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 0.4rem;
    border-radius: 11px;
    background: var(--tile-icon-bg, var(--surface));
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
}

.prefs-tile-preview__title {
    max-width: 100%;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prefs-tile-swatches {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.prefs-swatch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    padding: 0.3rem 2.1rem 0.3rem 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.prefs-swatch__meta {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    cursor: pointer;
}

.prefs-swatch:hover,
.prefs-swatch:focus-within {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(59, 130, 246, 0.08);
}

.prefs-swatch.is-custom {
    border-color: rgba(96, 165, 250, 0.28);
}

.prefs-swatch__chip {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 11px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    background:
        repeating-conic-gradient(#d0d5dd 0 25%, #fff 0 50%) 0 0 / 8px 8px;
}

.prefs-swatch__chip input[type="color"] {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.prefs-swatch__name {
    font-size: 0.88rem;
    font-weight: 650;
}

.prefs-swatch__hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.prefs-swatch__reset {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.prefs-swatch__reset:hover {
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
}

body.theme-light .prefs-tile-look {
    border-color: rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(180deg, #fff, #f7f9fc);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

body.theme-light .prefs-tile-preview {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent 55%),
        repeating-conic-gradient(rgba(15, 23, 42, 0.05) 0 25%, transparent 0 50%) 0 0 / 14px 14px;
}

body.theme-light .prefs-tile-preview__card {
    border-color: rgba(100, 116, 139, 0.28);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

body.theme-light .prefs-swatch {
    border-color: rgba(15, 23, 42, 0.08);
    background: #fff;
}

body.theme-light .prefs-swatch:hover,
body.theme-light .prefs-swatch:focus-within {
    border-color: rgba(37, 99, 235, 0.38);
    background: rgba(37, 99, 235, 0.05);
}

body.theme-light .prefs-swatch.is-custom {
    border-color: rgba(37, 99, 235, 0.22);
}

body.theme-light .prefs-swatch__reset {
    background: rgba(15, 23, 42, 0.06);
}

body.theme-light .prefs-swatch__reset:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.prefs-select {
    width: 100%;
    max-width: 360px;
    min-height: 3.15rem;
    padding: 0.85rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background-color: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 1.02rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.25rem;
}

.prefs-select:focus {
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

body.theme-light .prefs-select {
    background-color: #fff;
    border-color: rgba(15, 23, 42, 0.12);
}

.prefs-range {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 220px;
}

.prefs-range input[type="range"] {
    width: 160px;
    accent-color: var(--accent);
}

.prefs-range output {
    min-width: 3.5rem;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.prefs-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    padding: 0.2rem;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.prefs-segment__btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.prefs-segment__btn--active {
    background: var(--accent);
    color: #fff;
}

.prefs-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
}

.prefs-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.prefs-switch__slider {
    position: absolute;
    inset: 0;
    background: var(--surface);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
}

.prefs-switch__slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s;
}

.prefs-switch input:checked + .prefs-switch__slider {
    background: var(--accent);
}

.prefs-switch input:checked + .prefs-switch__slider::before {
    transform: translateX(20px);
}

.prefs-switch:hover .prefs-switch__slider {
    filter: brightness(1.08);
}

.prefs-switch:has(input:focus-visible) .prefs-switch__slider {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.prefs-switch:has(input:disabled) {
    opacity: 0.45;
    pointer-events: none;
}

.prefs-switch:has(input:disabled) .prefs-switch__slider {
    cursor: default;
}

.prefs-field--cats {
    border-bottom: 0;
    padding-bottom: 0.85rem;
}

.prefs-cat-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prefs-cat-list__item {
    margin: 0;
}

.prefs-cat-list__row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.prefs-cat-list__row:hover {
    background: var(--surface);
    border-color: rgba(255, 255, 255, 0.14);
}

.prefs-cat-list__check {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.prefs-cat-list__box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.15s, border-color 0.15s;
}

.prefs-cat-list__check:checked + .prefs-cat-list__box {
    background: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

.prefs-cat-list__check:focus-visible + .prefs-cat-list__box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.prefs-cat-list__swatch {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.prefs-cat-list__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 500;
}

.prefs-cat-create {
    padding: 0.35rem 0 1.15rem;
}

.prefs-cat-create .btn:hover {
    filter: brightness(1.06);
}

.prefs-cat-create .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.prefs-cat-create .btn:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.prefs-hint {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.prefs-system__lead {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.board-toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: min(36rem, calc(100vw - 1.5rem));
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
    transition: opacity 0.25s, visibility 0.25s;
}

.board-toast[hidden] {
    display: flex;
    opacity: 0;
    visibility: hidden;
}

.board-toast__item {
    pointer-events: auto;
    padding: 0.85rem 1.15rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 550;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.board-toast__item--success {
    background: rgba(6, 78, 59, 0.96);
    border-color: rgba(52, 211, 153, 0.35);
    color: #d1fae5;
}

.board-toast__item--error {
    background: rgba(127, 29, 29, 0.96);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

.board-toast__item--info,
.board-toast__item--warning {
    background: rgba(30, 58, 138, 0.96);
    border-color: rgba(147, 197, 253, 0.3);
    color: #dbeafe;
}

body.theme-light .board-toast__item {
    background: #0f172a;
    color: #f8fafc;
}

body.theme-light .board-toast__item--success {
    background: #065f46;
    color: #ecfdf5;
}

.prefs-profile__block {
    margin: 0 0 1.35rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.prefs-profile__block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

body.theme-light .prefs-profile__block {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.prefs-profile__danger {
    margin-top: 0.4rem;
}

.prefs-profile__danger .prefs-field__label small {
    color: #fca5a5;
}

body.theme-light .prefs-profile__danger .prefs-field__label small {
    color: #b91c1c;
}

.prefs-social {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.prefs-social__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prefs-social__row {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
    gap: 0.45rem 0.45rem;
    align-items: start;
}

.prefs-social__ru-note {
    grid-column: 2 / 3;
    margin: -0.15rem 0 0;
    color: #f59e0b;
    font-size: 0.75rem;
    line-height: 1.35;
}

.prefs-social__ru-note--legal {
    color: var(--text-muted);
}

body.theme-light .prefs-social__ru-note {
    color: #b45309;
}

body.theme-light .prefs-social__ru-note--legal {
    color: #57534e;
}

.prefs-social__ru-note[hidden] {
    display: none;
}

.prefs-social__legal {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.prefs-social__icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    overflow: hidden;
}

.prefs-social__favicon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
}

.shared-social__favicon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.prefs-social__icon svg,
.shared-social svg {
    display: block;
}

.shared-social svg {
    width: 22px;
    height: 22px;
}

.prefs-social__remove {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.prefs-social__remove:hover {
    color: #fda4af;
    border-color: rgba(248, 113, 113, 0.35);
}

.prefs-social__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.theme-light .prefs-social__icon,
body.theme-light .prefs-social__remove {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
}

body.theme-light .prefs-social__remove:hover {
    background: #fff1f2;
}

.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;
}

.prefs-avatar {
    margin: 0;
}

.prefs-avatar__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.15rem;
    padding: 1.1rem 1.15rem;
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    background:
        linear-gradient(145deg, rgba(59, 130, 246, 0.06), transparent 55%),
        rgba(255, 255, 255, 0.02);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.prefs-avatar__card:hover,
.prefs-avatar__card.is-dragover {
    border-color: rgba(96, 165, 250, 0.55);
    background:
        linear-gradient(145deg, rgba(59, 130, 246, 0.12), transparent 55%),
        rgba(59, 130, 246, 0.04);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.prefs-avatar__card.has-file {
    border-style: solid;
    border-color: rgba(96, 165, 250, 0.35);
}

.prefs-avatar__figure {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
}

.prefs-avatar__preview {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(145deg, #60a5fa, #2563eb);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    box-shadow:
        0 0 0 3px rgba(15, 23, 42, 0.35),
        0 10px 28px rgba(37, 99, 235, 0.35);
}

.prefs-avatar__preview--letter {
    line-height: 1;
}

.prefs-avatar__camera {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--bg-elevated);
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    transition: transform 0.15s ease, background 0.15s ease;
}

.prefs-avatar__camera:hover {
    background: #1d4ed8;
    transform: scale(1.06);
}

.prefs-avatar__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.prefs-avatar__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text);
}

.prefs-avatar__hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.prefs-avatar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.55rem;
}

.prefs-avatar__pick {
    cursor: pointer;
    margin: 0;
}

.prefs-avatar__file {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #93c5fd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prefs-avatar__file[hidden] {
    display: none !important;
}

.prefs-avatar__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.prefs-avatar__submit:disabled,
.prefs-avatar [data-avatar-submit]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

body.theme-light .prefs-avatar__card {
    border-color: rgba(100, 116, 139, 0.28);
    background:
        linear-gradient(145deg, rgba(37, 99, 235, 0.05), transparent 55%),
        #fff;
}

body.theme-light .prefs-avatar__card:hover,
body.theme-light .prefs-avatar__card.is-dragover {
    border-color: rgba(37, 99, 235, 0.4);
    background:
        linear-gradient(145deg, rgba(37, 99, 235, 0.08), transparent 55%),
        #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

body.theme-light .prefs-avatar__preview {
    box-shadow:
        0 0 0 3px #fff,
        0 10px 28px rgba(37, 99, 235, 0.28);
}

body.theme-light .prefs-avatar__camera {
    border-color: #fff;
}

body.theme-light .prefs-avatar__file {
    color: #1d4ed8;
}

.prefs-profile__form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.prefs-profile__form--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.prefs-profile__form--row .form-input {
    flex: 1;
    min-width: 180px;
}

.prefs-profile__form--stack .form-label {
    margin: 0;
}

.prefs-profile-link {
    margin: 0;
}

.prefs-profile-link__open {
    align-self: flex-start;
    margin-top: 0.55rem;
    width: fit-content;
}

.prefs-save-status {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #86efac;
}

.prefs-save-status.is-error {
    color: #fca5a5;
}

.prefs-save-status.is-ok,
.prefs-save-status:not(.is-error) {
    color: #86efac;
}

.prefs-save-status[hidden] {
    display: none !important;
}

body.theme-light .prefs-save-status:not(.is-error) {
    color: #15803d;
}

body.theme-light .prefs-save-status.is-error {
    color: #b91c1c;
}

.prefs-profile__resend {
    margin-top: 0.35rem;
}

.prefs-profile__resend[hidden] {
    display: none !important;
}

.prefs-themes {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.prefs-bg-pick {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: center;
}

.prefs-bg-pick__preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 148px;
    height: 92px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(145deg, rgba(59, 130, 246, 0.16), transparent 60%),
        rgba(255, 255, 255, 0.04);
}

.prefs-bg-pick:hover .prefs-bg-pick__preview {
    border-color: rgba(96, 165, 250, 0.55);
}

.prefs-bg-pick__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prefs-bg-pick__img[hidden] {
    display: none;
}

.prefs-bg-pick__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    height: 100%;
    padding: 0.45rem 0.5rem;
    color: #93c5fd;
}

.prefs-bg-pick__empty[hidden] {
    display: none !important;
}

.prefs-bg-pick__plus {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #3b82f6;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
}

.prefs-bg-pick__caption {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}

.prefs-themes__picker[hidden],
.prefs-themes__home[hidden] {
    display: none !important;
}

.prefs-themes__back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.3rem 0.55rem 0.3rem 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    width: fit-content;
}

.prefs-themes__block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.prefs-themes__block:last-child {
    border-bottom: 0;
}

.prefs-themes__heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.prefs-bg-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}

.prefs-bg-upload__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.prefs-bg-upload__card:hover,
.prefs-bg-upload__card.is-dragover {
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(59, 130, 246, 0.08);
}

.prefs-bg-upload.is-locked .prefs-bg-upload__card {
    opacity: 0.78;
}

.prefs-bg-upload__icon {
    color: #93c5fd;
    margin-bottom: 0.2rem;
}

.prefs-bg-upload__title {
    font-weight: 650;
    font-size: 0.92rem;
}

.prefs-bg-upload__hint,
.prefs-bg-upload__file {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.prefs-bg-upload__file[hidden] {
    display: none !important;
}

.prefs-bg-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.prefs-font-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 0.65rem;
    max-height: 22rem;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.prefs-font {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    margin: 0;
    padding: 0.7rem 0.55rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: center;
}

.prefs-font:hover,
.prefs-font.is-selected {
    border-color: rgba(96, 165, 250, 0.7);
    background: rgba(59, 130, 246, 0.1);
}

.prefs-font__sample {
    font-size: 1.55rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.prefs-font__name {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prefs-font.is-selected .prefs-font__name {
    color: var(--text);
    font-weight: 650;
}

.prefs-font.is-locked {
    opacity: 0.72;
}

body.theme-light .prefs-font {
    border-color: rgba(100, 116, 139, 0.22);
    background: #fff;
}

.prefs-themes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 0.7rem;
}

.prefs-theme {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.prefs-theme img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid transparent;
    background: #111;
}

.prefs-theme__caption {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.prefs-theme__name {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prefs-theme:hover img,
.prefs-theme.is-selected img {
    border-color: #60a5fa;
}

.prefs-theme.is-selected .prefs-theme__name {
    color: var(--text);
    font-weight: 650;
}

.prefs-theme.is-locked img {
    filter: saturate(0.85);
}

body.theme-light .prefs-bg-pick__preview {
    border-color: rgba(37, 99, 235, 0.28);
    background:
        linear-gradient(145deg, rgba(37, 99, 235, 0.1), transparent 58%),
        #eef2f7;
}

body.theme-light .prefs-bg-pick:hover .prefs-bg-pick__preview {
    border-color: rgba(37, 99, 235, 0.55);
    background:
        linear-gradient(145deg, rgba(37, 99, 235, 0.16), transparent 58%),
        #e8eef8;
}

body.theme-light .prefs-bg-pick__empty {
    color: #2563eb;
}

body.theme-light .prefs-bg-pick__caption {
    color: var(--text);
}

body.theme-light .prefs-themes__back {
    border-color: rgba(15, 23, 42, 0.12);
    background: #fff;
    color: var(--text);
}

body.theme-light .prefs-themes__back:hover {
    border-color: rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.06);
}

body.theme-light .prefs-bg-upload__card {
    border-color: rgba(37, 99, 235, 0.28);
    background:
        linear-gradient(145deg, rgba(37, 99, 235, 0.08), transparent 55%),
        #f8fafc;
}

body.theme-light .prefs-bg-upload__icon {
    color: #2563eb;
}

body.theme-light .prefs-theme img {
    background: #e2e8f0;
    border-color: transparent;
}

body.theme-light .prefs-theme:hover img,
body.theme-light .prefs-theme.is-selected img {
    border-color: #2563eb;
}

body.theme-light .prefs-themes__block {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.prefs-system__actions {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.prefs-system__exports {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.prefs-system__exports .prefs-action {
    min-width: 0;
}

.prefs-system__exports .prefs-action__chevron {
    display: none;
}

.prefs-action {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 55%),
        rgba(255, 255, 255, 0.02);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

a.prefs-action:hover {
    border-color: rgba(96, 165, 250, 0.35);
    background:
        linear-gradient(145deg, rgba(59, 130, 246, 0.12), transparent 55%),
        rgba(255, 255, 255, 0.03);
    transform: translateY(-1px);
}

.prefs-action--import {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

.prefs-action__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.prefs-action__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
}

.prefs-action--export .prefs-action__icon {
    background: linear-gradient(145deg, #60a5fa, #2563eb);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

.prefs-action--export-html .prefs-action__icon {
    background: linear-gradient(145deg, #a78bfa, #7c3aed);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28);
}

.prefs-action--import .prefs-action__icon {
    background: linear-gradient(145deg, #34d399, #059669);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.28);
}

.prefs-action__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.prefs-action__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.prefs-action__text {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.prefs-action__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 1.1rem;
    opacity: 0.7;
}

a.prefs-action:hover .prefs-action__chevron {
    color: #93c5fd;
    opacity: 1;
}

.prefs-import {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.prefs-import__file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.prefs-import__file input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.prefs-import__file-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.95rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    pointer-events: none;
}

.prefs-import__file:hover .prefs-import__file-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}

.prefs-import__file-name {
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prefs-import__file-name--set {
    color: var(--text);
}

.prefs-import__check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
    cursor: pointer;
}

.prefs-import__check input {
    margin-top: 0.15rem;
}

.prefs-import__submit {
    align-self: flex-start;
    min-width: 9rem;
}

.prefs-import__hint {
    margin: 0;
}

body.theme-light .prefs-action {
    border-color: rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(145deg, rgba(59, 130, 246, 0.04), transparent 55%),
        #fff;
}

body.theme-light a.prefs-action:hover {
    border-color: rgba(37, 99, 235, 0.28);
    background:
        linear-gradient(145deg, rgba(59, 130, 246, 0.08), transparent 55%),
        #fff;
}

body.theme-light .prefs-import {
    border-top-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .prefs-import__file-btn {
    border-color: rgba(15, 23, 42, 0.12);
    background: #f8fafc;
}

.settings-grid--compact {
    margin-bottom: 0;
}

body.theme-light {
    --bg: #f3f5f8;
    --bg-elevated: #ffffff;
    --surface: #e8edf4;
    --text: #152033;
    --text-muted: #5b6b82;
    --shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
    color-scheme: light;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.12), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(99, 102, 241, 0.06), transparent);
}

body.theme-light.has-board-bg {
    background-color: #e8edf4;
    background-image: none;
}

body.theme-light .nav {
    border-bottom-color: rgba(15, 23, 42, 0.08);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
}

body.theme-light .nav__brand-mark {
    background: #000;
}

body.theme-light .nav__menu-btn {
    border-color: rgba(15, 23, 42, 0.1);
    background: #fff;
}

body.theme-light .nav__menu.is-open .nav__menu-btn,
body.theme-light .nav__menu-btn:hover {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.08);
}

body.theme-light .nav__user {
    background: rgba(15, 23, 42, 0.06);
}

@media (max-width: 720px) {
    .prefs-modal,
    .prefs-modal[open] {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 20px 20px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        height: min(92dvh, calc(100vh - env(safe-area-inset-top, 0px) - 0.5rem));
        height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 0.5rem));
        max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 0.5rem));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow:
            0 -8px 40px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    }

    .prefs-modal__layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr);
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    .prefs-modal__sidebar {
        display: flex;
        flex-direction: column;
        border-right: none;
        border-bottom: none;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0.85rem 0.85rem max(1rem, env(safe-area-inset-bottom, 0px));
        gap: 0.25rem;
    }

    .prefs-modal__menu-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin: 0 0 0.85rem;
        flex-shrink: 0;
    }

    .prefs-modal__menu-top .prefs-modal__sidebar-title {
        margin: 0;
        font-size: 1.15rem;
        text-transform: none;
        letter-spacing: -0.02em;
        color: var(--text);
        font-weight: 650;
    }

    .prefs-modal__sidebar-title--desktop {
        display: none;
    }

    .prefs-user {
        display: flex;
        margin-bottom: 0.85rem;
    }

    .prefs-nav {
        width: 100%;
        flex: 0 0 auto;
        padding: 0.85rem 0.9rem;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        margin-bottom: 0.35rem;
    }

    .prefs-nav__chevron {
        display: block;
    }

    .prefs-nav__label {
        white-space: nowrap;
        flex: 1;
    }

    .prefs-modal__sidebar-footer {
        margin-top: auto;
        padding-top: 1rem;
        width: 100%;
    }

    .prefs-modal__sidebar-footer .prefs-nav {
        margin-bottom: 0;
    }

    .prefs-modal__content {
        display: none;
        padding: 0.9rem 1rem max(1.1rem, env(safe-area-inset-bottom, 0px));
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .prefs-modal.prefs-modal--section .prefs-modal__sidebar {
        display: none;
    }

    .prefs-modal.prefs-modal--section .prefs-modal__content {
        display: flex;
    }

    .prefs-modal__back:not([hidden]) {
        display: inline-flex;
        position: relative;
        z-index: 1;
    }

    .prefs-modal__back:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .prefs-modal.prefs-modal--section .prefs-modal__top {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.85rem;
    }

    .prefs-modal.prefs-modal--section .prefs-modal__back {
        justify-self: start;
    }

    .prefs-modal.prefs-modal--section .prefs-modal__title {
        grid-column: 2;
        flex: none;
        margin: 0;
        font-size: 1.1rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: min(14rem, 52vw);
    }

    .prefs-modal.prefs-modal--section .prefs-modal__top > .modal__close {
        justify-self: end;
        position: relative;
        z-index: 1;
    }

    .prefs-modal__top {
        margin-bottom: 0.85rem;
    }

    .prefs-modal__title {
        font-size: 1.1rem;
    }

    body.theme-light .prefs-nav {
        background: rgba(15, 23, 42, 0.03);
        border-color: rgba(15, 23, 42, 0.06);
    }

    .prefs-field {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .prefs-tile-look {
        padding: 0.95rem 0.9rem 1rem;
    }

    .prefs-tile-look__body {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .prefs-tile-swatches {
        width: 100%;
    }

    .prefs-range {
        min-width: 0;
        width: 100%;
    }

    .prefs-range input[type="range"] {
        flex: 1;
        width: auto;
    }

    .prefs-profile__form--row {
        flex-direction: column;
        align-items: stretch;
    }

    .prefs-profile__form--row .form-input {
        min-width: 0;
        width: 100%;
    }

    .prefs-avatar__card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.25rem 1rem;
    }

    .prefs-avatar__actions {
        justify-content: center;
    }

    .prefs-avatar__hint {
        max-width: 22rem;
    }

    .prefs-system__actions {
        gap: 0.75rem;
    }

    .prefs-system__exports {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .prefs-modal__content {
        padding: 0.75rem 0.85rem max(1rem, env(safe-area-inset-bottom, 0px));
    }

    .prefs-modal__sidebar {
        padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
    }

    .prefs-nav__icon {
        width: 18px;
        height: 18px;
    }

    .prefs-nav__icon svg {
        width: 18px;
        height: 18px;
    }
}

.hint-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--text-muted);
    cursor: help;
    border-radius: 999px;
    outline: none;
    z-index: 1;
}

.hint-icon:hover,
.hint-icon:focus-visible {
    color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, 0.12);
    z-index: 2500;
}

.hint-icon__glyph {
    display: block;
}

.hint-icon__tooltip {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    bottom: auto;
    z-index: 2500;
    width: max-content;
    max-width: min(16rem, calc(100vw - 2rem));
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: #1a1a1a;
    color: #f9fafb;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.2rem);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.hint-icon__tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    top: auto;
    right: 0.55rem;
    border: 6px solid transparent;
    border-bottom-color: #1a1a1a;
}

.hint-icon:hover .hint-icon__tooltip,
.hint-icon:focus-visible .hint-icon__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.theme-light .hint-icon__tooltip {
    background: #0f172a;
    border-color: rgba(15, 23, 42, 0.12);
    color: #f8fafc;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
}

body.theme-light .hint-icon__tooltip::after {
    border-bottom-color: #0f172a;
}

.categories-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.categories-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.categories-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--tab-radius, 10px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(148, 163, 184, 0.45);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, border-radius 0.15s, opacity 0.15s, transform 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.categories-tabs__item:active {
    cursor: grabbing;
}

.categories-tabs__item.dragging {
    opacity: 0.45;
    transform: scale(0.97);
}

body.is-category-dragging {
    cursor: grabbing;
    user-select: none;
}

body.is-category-dragging .categories-more__menu .categories-tabs__item {
    cursor: grabbing;
    touch-action: none;
}

.categories-tabs__item.drag-over {
    border-color: var(--tab-color, var(--accent));
    box-shadow: 0 0 0 1px var(--tab-color, var(--accent));
    color: var(--text);
}

.categories-tabs__item:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
}

body.theme-light .categories-tabs__item:not(.categories-tabs__item--add) {
    border-color: rgba(100, 116, 139, 0.4);
}

/* Подсветка: как на главной (подчёркивание) */
body.tabs-underline .categories-tabs__item--active {
    color: var(--text);
    background: color-mix(in srgb, var(--tab-color, var(--accent)) 20%, transparent);
    border-color: color-mix(in srgb, var(--tab-color, var(--accent)) 55%, transparent);
    box-shadow: inset 0 -2px 0 var(--tab-color, var(--accent));
}

/* Подсветка: обводка */
body.tabs-ring .categories-tabs__item:not(.categories-tabs__item--add) {
    background: var(--bg-elevated);
    border: 1px dashed rgba(148, 163, 184, 0.4);
}

body.tabs-ring .categories-tabs__item:hover:not(.categories-tabs__item--add) {
    border-color: rgba(148, 163, 184, 0.65);
}

body.tabs-ring .categories-tabs__item--active {
    color: var(--text);
    background: color-mix(in srgb, var(--tab-color, var(--accent)) 15%, transparent);
    border-style: dashed;
    border-color: var(--tab-color, var(--accent));
    box-shadow: 0 0 0 1px var(--tab-color, var(--accent));
}

/* Подсветка: мягкая заливка */
body.tabs-soft .categories-tabs__item--active {
    color: var(--text);
    background: color-mix(in srgb, var(--tab-color, var(--accent)) 28%, transparent);
    border-color: rgba(148, 163, 184, 0.45);
    box-shadow: none;
}

body.theme-light.tabs-ring .categories-tabs__item:not(.categories-tabs__item--add) {
    border-color: rgba(100, 116, 139, 0.4);
}

body.theme-light.tabs-soft .categories-tabs__item--active {
    border-color: rgba(100, 116, 139, 0.4);
}

body.has-board-bg .categories-tabs__item,
body.has-board-bg .categories-tabs__item:not(.categories-tabs__item--add) {
    background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
    backdrop-filter: blur(12px);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.16);
}

body.has-board-bg .categories-tabs__item:hover,
body.has-board-bg .categories-tabs__item--active,
body.has-board-bg.tabs-underline .categories-tabs__item--active,
body.has-board-bg.tabs-ring .categories-tabs__item--active,
body.has-board-bg.tabs-soft .categories-tabs__item--active {
    color: var(--text);
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
}

body.has-board-bg .categories-tabs__count,
body.has-board-bg .categories-tabs__item--active .categories-tabs__count {
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    color: var(--text);
}

body.has-board-bg .directory__heading,
body.has-board-bg .directory__item,
body.has-board-bg .directory__desc,
body.has-board-bg .shared-head__name,
body.has-board-bg .shared-head__title,
body.has-board-bg .page--profile .shared-head__bio,
body.has-board-bg .page--dial .shared-head__bio {
    color: #fff;
}

body.has-board-bg .directory__empty,
body.has-board-bg .page--shared:not(.page--profile) .shared-head__bio,
body.has-board-bg .shared-head__legal {
    color: rgba(255, 255, 255, 0.82);
}

body.has-board-bg .directory__heading,
body.has-board-bg .directory__item,
body.has-board-bg .directory__desc,
body.has-board-bg .directory__empty,
body.has-board-bg .shared-head__name,
body.has-board-bg .shared-head__title,
body.has-board-bg .shared-head__bio,
body.has-board-bg .shared-head__legal {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72), 0 2px 14px rgba(0, 0, 0, 0.45);
}

body.has-board-bg .directory__link {
    color: #60a5fa;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.35);
}

body.theme-light.has-board-bg .categories-tabs__item,
body.theme-light.has-board-bg .categories-tabs__item:not(.categories-tabs__item--add) {
    border-color: rgba(15, 23, 42, 0.14);
}

body.theme-light.has-board-bg .directory__heading,
body.theme-light.has-board-bg .directory__item,
body.theme-light.has-board-bg .directory__desc,
body.theme-light.has-board-bg .shared-head__name,
body.theme-light.has-board-bg .shared-head__title,
body.theme-light.has-board-bg .page--profile .shared-head__bio,
body.theme-light.has-board-bg .page--dial .shared-head__bio {
    color: #fff;
}

body.theme-light.has-board-bg .directory__empty,
body.theme-light.has-board-bg .page--shared:not(.page--profile) .shared-head__bio,
body.theme-light.has-board-bg .shared-head__legal {
    color: rgba(255, 255, 255, 0.82);
}

body.theme-light.has-board-bg .directory__link {
    color: #60a5fa;
}

body.theme-light.has-board-bg .directory__heading,
body.theme-light.has-board-bg .directory__item,
body.theme-light.has-board-bg .directory__desc,
body.theme-light.has-board-bg .directory__empty,
body.theme-light.has-board-bg .shared-head__name,
body.theme-light.has-board-bg .shared-head__title,
body.theme-light.has-board-bg .shared-head__bio,
body.theme-light.has-board-bg .shared-head__legal {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72), 0 2px 14px rgba(0, 0, 0, 0.45);
}

.categories-tabs__name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.categories-tabs__count {
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: min(999px, calc(var(--tab-radius, 10px) + 4px));
    background: var(--surface);
    color: var(--text-muted);
}

.categories-tabs__item--active .categories-tabs__count {
    background: color-mix(in srgb, var(--tab-color, var(--accent)) 28%, transparent);
    color: var(--text);
}

.categories-tabs__share {
    display: none;
    flex-shrink: 0;
    color: var(--tab-color, var(--accent));
    opacity: 0.85;
}

.categories-tabs__item--shared .categories-tabs__share {
    display: inline-flex;
    align-items: center;
}

.categories-tabs__item--add {
    width: 2.35rem;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-muted);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    background: transparent;
    flex-shrink: 0;
    user-select: auto;
    -webkit-user-drag: none;
}

.categories-tabs__item--add:hover {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: none;
}

.categories-more {
    position: relative;
    flex-shrink: 0;
}

.categories-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    min-width: 6.5rem;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.categories-more__btn:hover,
.categories-more__btn[aria-expanded="true"] {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.12);
}

.categories-more__btn--has-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.categories-more__count {
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
}

.categories-more__chevron {
    font-size: 0.75rem;
    opacity: 0.7;
}

.categories-more__menu {
    position: fixed;
    z-index: 2600;
    box-sizing: border-box;
    display: block;
    width: min(18rem, calc(100vw - 1.5rem));
    min-width: 0;
    max-width: calc(100vw - 1.5rem);
    max-height: min(70vh, 28rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.45rem 0.35rem 0.95rem;
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 156, 179, 0.55) transparent;
}

.categories-more__list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 0;
    overflow: visible;
    padding: 0;
}

.categories-more__list::after {
    content: '';
    display: block;
    height: 0.25rem;
    flex-shrink: 0;
    pointer-events: none;
}

.categories-more__menu::-webkit-scrollbar {
    width: 6px;
}

.categories-more__menu::-webkit-scrollbar-track {
    background: transparent;
    margin: 0.35rem 0;
}

.categories-more__menu::-webkit-scrollbar-thumb {
    background: rgba(139, 156, 179, 0.45);
    border-radius: 999px;
}

.categories-more__menu::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 156, 179, 0.7);
}

.categories-more__menu[hidden] {
    display: none !important;
}

.categories-more__menu .categories-tabs__item {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: auto;
    position: relative;
    z-index: 1;
    touch-action: manipulation;
    cursor: grab;
}

.categories-more__menu .categories-tabs__name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.categories-more__menu .categories-tabs__count {
    flex-shrink: 0;
}

.empty--large {
    margin-top: 3rem;
    padding: 5rem 2rem;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert--error {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.messages__item--success {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.messages__item--info {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.messages__item--error {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

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

/* Settings */
.page--settings {
    padding-top: 1.5rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.settings-card {
    padding: 1.5rem;
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
}

.settings-card--wide {
    margin-bottom: 2rem;
}

.settings-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.settings-card__text {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.settings-card__text code {
    font-size: 0.85em;
    color: #93c5fd;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-input--file {
    padding: 0.5rem;
    cursor: pointer;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
}

.form-checkbox {
    margin-top: 0.2rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

.code-block {
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    overflow-x: auto;
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #cbd5e1;
    font-size: 0.8rem;
    line-height: 1.45;
}

@media (max-width: 768px) {
    :root {
        --tile-size: 100px;
        --dial-gap: 0.75rem !important;
        --dial-max-width: 100% !important;
    }

    /* На мобильных всегда сверху, без вертикального центрирования */
    body.layout-center .page--dial,
    body.layout-top .page--dial,
    body.layout-center .page--shared,
    body.layout-top .page--shared {
        min-height: 0;
        display: block;
    }

    body.layout-center .page--dial > .main,
    body.layout-top .page--dial > .main,
    body.layout-center .page--shared > main,
    body.layout-top .page--shared > main {
        display: block;
        justify-content: flex-start;
        flex: none;
    }

    /* Всегда 3 закладки в ряд */
    .dial,
    .dial--fixed-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .page {
        padding: 1.5rem 1rem 3rem;
    }

    .page--dial,
    .page--shared {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nav {
        padding: 0.65rem 1rem;
        min-height: 52px;
        gap: 0.75rem;
    }

    .nav-search {
        max-width: none;
        order: 3;
        flex-basis: 100%;
    }

    .nav:has(.nav-search) {
        flex-wrap: wrap;
    }

    .nav__brand {
        font-size: 1rem;
    }

    .nav__user {
        max-width: 7rem;
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
    }

    .nav__menu-btn {
        width: 34px;
        height: 34px;
    }

    .categories-more__btn {
        min-width: 0;
        padding: 0.5rem 0.75rem;
    }

}

@media (max-width: 480px) {
    :root {
        --tile-size: 90px;
    }
}

.share-switch {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    cursor: pointer;
}

.share-switch.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.share-switch--profile {
    margin-top: 1.15rem;
    margin-bottom: 0.25rem;
}

.share-ads {
    margin-top: 1.15rem;
    padding: 1rem 1.05rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.08);
    display: grid;
    gap: 0.85rem;
}

.share-ads[hidden] {
    display: none !important;
}

.share-ads__warn-title {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--text);
}

.share-ads__warn-text {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.share-ads__warn-text a {
    color: var(--accent);
}

.share-ads__ack {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text);
    cursor: pointer;
}

.share-ads__ack input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.share-ads__ack.is-attention {
    outline: 2px solid rgba(251, 191, 36, 0.65);
    outline-offset: 4px;
    border-radius: 8px;
    padding: 0.35rem;
}

.share-ads__tip {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.share-ads__config {
    display: grid;
    gap: 0.75rem;
}

.share-ads__config[hidden] {
    display: none !important;
}

.share-ads__fields {
    display: grid;
    gap: 0.65rem;
}

.share-ads__fields[hidden] {
    display: none !important;
}

.ad-mark {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    margin: 0.65rem 0 0.85rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.1);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ad-mark__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.95);
    color: #111;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ad-mark__badge--inline {
    margin-left: 0.35rem;
    vertical-align: middle;
}

.ad-mark__erid {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: var(--text);
}

body.theme-light .share-ads {
    border-color: rgba(217, 119, 6, 0.25);
    background: rgba(254, 243, 199, 0.65);
}

body.theme-light .ad-mark {
    border-color: rgba(217, 119, 6, 0.28);
    background: rgba(254, 243, 199, 0.7);
}

.shared-head__ad {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    color: #111827;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.32);
    vertical-align: middle;
    transform: translateY(0.05em);
    cursor: default;
    outline: none;
}

.shared-head__ad-tip {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.45rem);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 0.45rem;
    width: max-content;
    max-width: min(18rem, 70vw);
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: var(--bg-elevated, var(--surface));
    box-shadow: var(--shadow);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-0.2rem);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.shared-head__ad-tip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 0.55rem;
    height: 0.55rem;
    margin-left: -0.275rem;
    border-left: 1px solid rgba(251, 191, 36, 0.35);
    border-top: 1px solid rgba(251, 191, 36, 0.35);
    background: inherit;
    transform: rotate(45deg) translateY(0.18rem);
}

.shared-head__ad:hover .shared-head__ad-tip,
.shared-head__ad:focus-visible .shared-head__ad-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.shared-head__ad-erid {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text);
}

.shared-head__ad-sep {
    opacity: 0.45;
}

body.theme-light .shared-head__ad {
    color: #111827;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

body.theme-light .shared-head__ad-tip {
    border-color: rgba(217, 119, 6, 0.28);
    background: var(--bg-elevated, #fff);
}

.share-link + .share-switch {
    margin-top: 1.15rem;
}

.share-rotate + .share-switch {
    margin-top: 0.15rem;
}

.share-switch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.share-switch__track {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    margin-top: 0.15rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.15s, border-color 0.15s;
}

.share-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s;
}

.share-switch__input:checked + .share-switch__track {
    background: var(--accent);
    border-color: var(--accent);
}

.share-switch__input:checked + .share-switch__track .share-switch__thumb {
    transform: translateX(18px);
}

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

.pro-need {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.48rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

.pro-need:hover {
    color: #fcd34d;
}

.pro-need--compact {
    padding: 0.08rem 0.38rem;
    font-size: 0.62rem;
}

body.theme-light .pro-need {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

body.theme-light .pro-need:hover {
    color: #92400e;
}

.share-switch__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.share-switch__hint {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.share-link {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.share-link[hidden] {
    display: none;
}

.share-link__input {
    flex: 1;
    min-width: 0;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.share-link__input.is-updated {
    border-color: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
}

.share-rotate {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.share-rotate[hidden] {
    display: none;
}

.share-rotate__btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.share-rotate__btn[hidden] {
    display: none;
}

.share-rotate__btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(251, 191, 36, 0.35);
}

.share-rotate__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
}

.share-rotate__copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.share-rotate__title {
    font-size: 0.9rem;
    font-weight: 650;
}

.share-rotate__hint {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.share-note {
    margin: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    font-size: 0.84rem;
    line-height: 1.45;
}

.share-note[hidden] {
    display: none;
}

.share-note--warn {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.32);
    color: var(--text);
}

.share-note--ok {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.32);
    color: #6ee7b7;
}

.share-note__text {
    margin: 0 0 0.7rem;
}

.share-note__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page--shared {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: var(--dial-max-width, 1000px);
    margin-inline: auto;
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
}

.shared-banner {
    margin: 0 0 1.25rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.shared-banner a {
    color: var(--accent);
}

.shared-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: 0.35rem;
    margin-bottom: 1.75rem;
}

.shared-head__bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    min-width: 0;
}

.shared-head__person {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
}

.shared-head__author {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
}

a.shared-head__author {
    text-decoration: none;
    color: inherit;
}

a.shared-head__author:hover .shared-head__name {
    color: var(--accent);
}

h1.shared-head__name {
    margin: 0;
    font-size: 1.05rem;
}

.shared-head__bio {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 36rem;
}

.page--shared:not(.page--profile) .shared-head__bio {
    color: var(--text-muted);
}

.page--profile .shared-head__bio,
.page--dial .shared-head__bio {
    margin: 0.35rem 0 0;
    color: var(--text);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.3;
    max-width: 40rem;
}

.shared-head__socials-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 0.35rem;
    max-width: min(100%, 22rem);
}

.shared-head__socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shared-head__legal {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: right;
}

.shared-social {
    display: grid;
    place-items: center;
    color: var(--text);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.15s, opacity 0.15s;
}

.shared-social:hover {
    color: var(--accent);
    opacity: 0.75;
}

.shared-head__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
    margin: 0;
    color: var(--text);
    font-size: clamp(1.625rem, 5vw, 2.625rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

body.page-shared {
    overflow-x: hidden;
    font-family: var(--font);
}

body.page-shared .nav,
body.page-shared .page--shared,
body.page-shared .footer,
body.page-shared .footer p,
body.page-shared .footer__legal {
    font-family: var(--font);
}

.shared-head--list {
    margin-bottom: 0;
}

.shared-head--list:not(:has(.shared-cta)) {
    padding-bottom: 1.5rem;
}

.shared-cta {
    justify-self: start;
    margin: 0.85rem 0 1.5rem;
}

.shared-head__save {
    justify-self: start;
    margin: 0.55rem 0 0;
    white-space: nowrap;
}

.shared-rule {
    display: block;
    width: 100vw;
    max-width: none;
    height: 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    margin: 0 calc(50% - 50vw) 1.75rem;
}

.shared-head__avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(145deg, #60a5fa, #2563eb);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.06);
}

.shared-head__avatar--img {
    object-fit: cover;
    padding: 0;
    background: transparent;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

.shared-head__name {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .shared-head__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .shared-head__socials-wrap {
        align-items: flex-start;
        max-width: 100%;
    }

    .shared-head__socials {
        justify-content: flex-start;
    }

    .shared-head__legal {
        text-align: left;
    }
}

body.page-shared .tile {
    cursor: pointer;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.08);
}

body.theme-light.page-shared .tile {
    border-color: rgba(15, 23, 42, 0.1);
}

body.page-profile .categories-tabs__item,
body.page-profile .categories-tabs__item:active {
    cursor: pointer;
}

.page--profile .categories-bar {
    margin-bottom: 1.25rem;
}

.page--profile .shared-head {
    margin-bottom: 1.25rem;
}

.page--dial > .shared-head {
    margin-bottom: 1.15rem;
}

body.layout-center .page--shared {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.layout-center .page--shared > .categories-bar,
body.layout-center .page--shared > .shared-head,
body.layout-center .page--shared > .shared-banner,
body.layout-center .page--shared > .shared-rule,
body.layout-center .page--shared > .alert,
body.layout-center .page--shared > .messages {
    flex-shrink: 0;
}

body.layout-center .page--shared > main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

body.view-directory.layout-center .page--shared > main {
    justify-content: flex-start;
    overflow: auto;
}

body.layout-top .page--shared > main {
    justify-content: flex-start;
}

body.theme-light .share-switch__track {
    background: #e8edf4;
    border-color: rgba(15, 23, 42, 0.1);
}

body.theme-light .share-rotate {
    color: inherit;
}

body.theme-light .share-rotate__btn {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.1);
    color: #0f172a;
}

body.theme-light .share-rotate__btn:hover {
    background: #fffbeb;
    border-color: rgba(217, 119, 6, 0.28);
}

body.theme-light .share-rotate__icon {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

body.theme-light .share-rotate__hint {
    color: #64748b;
}

body.theme-light .share-note--warn {
    background: #fffbeb;
    border-color: rgba(217, 119, 6, 0.22);
    color: #92400e;
}

body.theme-light .share-note--ok {
    background: #ecfdf5;
    border-color: rgba(5, 150, 105, 0.22);
    color: #047857;
}

body.theme-light .share-link__input.is-updated {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.16);
}

.prefs-action--bookmarklet {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
}

.prefs-action--bookmarklet .prefs-action__icon {
    background: linear-gradient(145deg, #fb923c, #ea580c);
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.28);
}

.prefs-bookmarklet__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.prefs-bookmarklet__bar-preview {
    display: flex;
    align-items: center;
    min-height: 2.1rem;
    padding: 0.25rem 0.45rem;
    border-radius: 8px;
    background: #2b2b2b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.prefs-bookmarklet__bar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem 0.2rem 0.3rem;
    border-radius: 6px;
    background: #3a3a3a;
    color: #f3f3f3;
    font-size: 0.8rem;
    font-weight: 500;
}

.prefs-bookmarklet__bar-chip img {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.bookmarklet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem 0.55rem 0.6rem;
    border-radius: 12px;
    border: 1px dashed rgba(251, 146, 60, 0.55);
    background: rgba(234, 88, 12, 0.12);
    color: #fdba74;
    font-weight: 600;
    text-decoration: none;
    cursor: grab;
    user-select: none;
}

.bookmarklet-btn__icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #0b0b0b;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.bookmarklet-btn:hover {
    border-color: #fb923c;
    background: rgba(234, 88, 12, 0.2);
    color: #ffedd5;
}

.bookmarklet-btn:active {
    cursor: grabbing;
}

.prefs-bookmarklet__steps {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.prefs-bookmarklet__steps li + li {
    margin-top: 0.35rem;
}

.prefs-bookmarklet__steps code {
    font-size: 0.8em;
}

.prefs-app {
    display: flex;
    flex-direction: column;
    gap: 1.45rem;
}

.prefs-app__install {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 0 1.15rem;
}

.prefs-app__install:not(:has(:not([hidden]))) {
    display: none;
}

.prefs-app__status {
    margin: 0;
    color: #34d399;
    font-size: 0.88rem;
    line-height: 1.45;
}

.prefs-app__group {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.prefs-app__card {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
}

.prefs-app__icon--chrome {
    background: linear-gradient(145deg, #60a5fa, #2563eb);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

.prefs-app__icon--safari {
    background: linear-gradient(145deg, #38bdf8, #0284c7);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.28);
}

.prefs-app__icon--firefox {
    background: linear-gradient(145deg, #fb923c, #ea580c);
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.28);
}

.prefs-app__icon--android {
    background: linear-gradient(145deg, #34d399, #059669);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.28);
}

.prefs-app__icon--ios {
    background: linear-gradient(145deg, #a78bfa, #7c3aed);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28);
}

.prefs-app__icon--other {
    background: linear-gradient(145deg, #94a3b8, #475569);
    box-shadow: 0 8px 20px rgba(71, 85, 105, 0.28);
}

.prefs-app .prefs-hint {
    margin: 0;
    padding-bottom: 0.35rem;
}

body.theme-light .prefs-app__card {
    border-color: rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.7), transparent 55%),
        rgba(15, 23, 42, 0.02);
}

body.theme-light .prefs-app__status {
    color: #047857;
}

.from-browser__heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.from-browser__site-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-top: 0.1rem;
    border-radius: 8px;
}

.prefs-bookmarklet__hint {
    margin: 0;
}

.prefs-bookmarklet__hint kbd {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.78em;
    font-family: inherit;
}

body.theme-light .bookmarklet-btn {
    color: #c2410c;
    border-color: rgba(234, 88, 12, 0.4);
    background: rgba(234, 88, 12, 0.08);
}

body.theme-light .bookmarklet-btn:hover {
    color: #9a3412;
    background: rgba(234, 88, 12, 0.14);
}

body.page-from-browser {
    min-height: 100vh;
    background: var(--bg);
}

.from-browser {
    box-sizing: border-box;
    min-height: 100vh;
    max-width: 28rem;
    margin: 0 auto;
    padding: 1.15rem 1.15rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.from-browser__head {
    display: flex;
    align-items: center;
}

.from-browser__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.from-browser__card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem 1.2rem 1.3rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(160deg, rgba(59, 130, 246, 0.08), transparent 50%),
        var(--bg-elevated);
}

.from-browser__title {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.from-browser__lead {
    margin: -0.25rem 0 0.15rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.from-browser__card--ok {
    align-items: center;
    text-align: center;
    padding-top: 1.6rem;
    padding-bottom: 1.5rem;
}

.from-browser__ok-icon {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
}

.from-browser__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.from-browser--tabs {
    max-width: 34rem;
}

.from-browser__tabs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.from-browser__tabs-count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.from-browser__tabs {
    max-height: min(46vh, 22rem);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.15rem;
    margin: 0 -0.15rem;
}

.from-browser__tab {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.from-browser__tab-check {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.from-browser__tab-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.from-browser__tab-title {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
}

.from-browser__tab-url {
    color: var(--text-muted);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.from-browser__empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

body.theme-light .from-browser__card {
    border-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .from-browser__tab {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.03);
}

body.page-landing.theme-light {
    --landing-ocean: #f4f7fb;
    --landing-foam: #0284c7;
    background-color: #f4f7fb;
    background-image:
        radial-gradient(ellipse 90% 55% at 50% -12%, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 20%, rgba(59, 130, 246, 0.08), transparent 50%),
        linear-gradient(180deg, #f7f9fc 0%, #eef3f8 55%, #f4f7fb 100%);
}

body.theme-light.page-landing .nav--landing {
    background: color-mix(in srgb, #f4f7fb 78%, transparent);
    border-bottom-color: rgba(15, 23, 42, 0.06);
}

body.theme-light .hero__brand {
    background: linear-gradient(120deg, #0f172a 8%, #0284c7 52%, #2563eb 92%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.theme-light .hero__kicker {
    border-color: rgba(2, 132, 199, 0.18);
    background: rgba(2, 132, 199, 0.08);
    color: #0369a1;
}


body.theme-light .hero-preview__switch {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

body.theme-light .hero-preview__chip {
    color: #64748b;
}

body.theme-light .hero-preview__chip:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.05);
}

body.theme-light .hero-preview__chip.is-active {
    color: #fff;
}













body.theme-light .lp--band {
    background: rgba(255, 255, 255, 0.62);
}

body.theme-light .lp-stat,
body.theme-light .lp-card,
body.theme-light .lp-quote,
body.theme-light .lp-flow li,
body.theme-light .lp-ram__window,
body.theme-light .lp-ram__panel {
    border-color: rgba(15, 23, 42, 0.08);
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

body.theme-light .lp-pills span {
    border-color: rgba(15, 23, 42, 0.08);
    background: #fff;
    color: #1e293b;
}

body.theme-light .lp-ram__tabs span {
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
}

body.theme-light .lp-ram__load {
    color: #b91c1c;
}

body.theme-light .lp-ram__tiles span {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

body.theme-light .lp-ram__ok {
    color: #047857;
}

body.theme-light .lp-browser {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .cta {
    padding-bottom: clamp(4.5rem, 10vw, 6.5rem);
}

body.theme-light .discover__search-bar {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

body.theme-light .lb-tooltip {
    background: #0f172a;
    color: #f8fafc;
}

body.theme-light .discover__input::placeholder {
    color: #94a3b8;
}

body.theme-light .tile {
    border-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .tile--add {
    border-color: rgba(15, 23, 42, 0.16);
    background: #fff;
}

body.theme-light .tile__visits {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

body.theme-light .tile:hover:not(.dragging) {
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
}

body.theme-light .dial--fixed-columns .tile:hover:not(.dragging) {
    box-shadow: 0 clamp(4px, calc(var(--tile-cell) * 0.03), 14px) clamp(14px, calc(var(--tile-cell) * 0.09), 36px) rgba(15, 23, 42, 0.1);
}

body.theme-light .plan {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

body.theme-light .plan--featured {
    border-color: rgba(37, 99, 235, 0.28);
    background: linear-gradient(165deg, rgba(59, 130, 246, 0.08), #fff 48%);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.1);
}

body.theme-light .plan__note {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

body.theme-light .footer {
    background: transparent;
}

body.theme-light .legal__body p,
body.theme-light .legal__body li {
    color: #334155;
}

body.theme-light .legal__nav-link:hover,
body.theme-light .legal__nav-link--active {
    background: rgba(15, 23, 42, 0.05);
}

body.theme-light .legal__list li {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .legal__list a {
    color: #152033;
}


body.theme-light .lb-form__top {
    border-bottom-color: rgba(15, 23, 42, 0.06);
    background: color-mix(in srgb, #fff 92%, transparent);
}

body.theme-light .lb-form__pay-note {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

body.theme-light .lb-form__body {
    scrollbar-color: rgba(100, 116, 139, 0.38) transparent;
}

body.theme-light .lb-form__body::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(148, 163, 184, 0.45),
        rgba(59, 130, 246, 0.4)
    );
    background-clip: padding-box;
}

body.theme-light .lb-form__footer {
    border-top-color: rgba(15, 23, 42, 0.06);
    background: color-mix(in srgb, #fff 94%, transparent);
}

body.theme-light .lb-form__consent a {
    color: #2563eb;
}

body.theme-light .lb-field__label {
    color: #1e293b;
}

body.theme-light .lb-input {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
    color: #152033;
}

body.theme-light .lb-input:hover,
body.theme-light .lb-input:focus {
    background: #fff;
    border-color: #38bdf8;
}

body.theme-light .lb-drop,
body.theme-light .lb-legal,
body.theme-light .lb-color {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.12);
}

body.theme-light .lb-color__preview {
    border-color: rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--tile-accent, #3b82f6) 70%, transparent) 0%,
            transparent 62%
        ),
        #fff;
}

body.theme-light .lb-legal__text {
    color: #334155;
}

body.theme-light .lb-form__lead {
    color: #64748b;
}

.lb-mod-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
}

.lb-mod-tabs__item {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.lb-mod-tabs__item.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.lb-mod-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.25rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.lb-mod-pager a {
    color: var(--accent);
    font-weight: 650;
    text-decoration: none;
}

.lb-mod__badge {
    margin: 0 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.lb-mod__check {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
    font-weight: 650;
    color: #15803d;
}

.lb-mod__check.is-warn {
    color: #b45309;
}

.lb-mod__check.is-bad {
    color: #b91c1c;
}

.lb-mod__card--archive.is-approved .lb-mod__badge {
    color: #15803d;
}

.lb-mod__card--archive.is-rejected .lb-mod__badge {
    color: #b45309;
}

.lb-mod__card--archive {
    grid-template-columns: var(--tile-size, 140px) 1fr;
}

.lb-mod {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lb-mod__card {
    display: grid;
    grid-template-columns: var(--tile-size, 140px) 1fr auto;
    gap: 1.1rem 1.25rem;
    align-items: start;
    padding: 1.1rem 1.2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--tile-accent, #3b82f6) 16%, transparent) 0%,
            transparent 58%
        ),
        rgba(255, 255, 255, 0.04);
}

.lb-mod__dial {
    width: var(--tile-size, 140px);
}

.lb-mod__dial .tile,
.lb-mod__dial .tile[data-id],
body:not(.sort-manual) .lb-mod__dial .tile:not(.tile--add) {
    cursor: pointer;
}

.lb-mod__preview {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    background: #111318;
    display: grid;
    place-items: center;
    font-weight: 700;
}

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

.lb-mod__title {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.lb-mod__url {
    display: inline-block;
    color: var(--accent);
    font-size: 0.88rem;
    word-break: break-all;
}

.lb-mod__desc {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.lb-mod__meta {
    margin: 0.55rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.lb-mod__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 11.5rem;
}

.lb-mod__actions .btn {
    width: 100%;
}

.lb-mod__edit {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.lb-mod__edit-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.lb-mod__edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem 1rem;
}

.lb-mod__edit-desc {
    grid-column: 1 / -1;
}

.lb-mod__edit .btn {
    justify-self: start;
}

@media (max-width: 720px) {
    .lb-mod__card {
        grid-template-columns: var(--tile-size, 140px) 1fr;
    }

    .lb-mod__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        min-width: 0;
    }

    .lb-mod__edit-grid {
        grid-template-columns: 1fr;
    }
}

body.theme-light .plan-pay {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
}

body.theme-light .lb-mod__card {
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--tile-accent, #3b82f6) 14%, transparent) 0%,
            transparent 58%
        ),
        #fff;
    border-color: rgba(15, 23, 42, 0.1);
}

body.theme-light .lb-mod__preview {
    background: #f1f5f9;
}

body.theme-light .lb-mod__edit {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.lb-status {
    max-width: 36rem;
    padding: 1.4rem 1.5rem 1.55rem;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
}

.lb-status__kicker {
    margin: 0 0 0.35rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lb-status__badge {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.lb-status--review .lb-status__badge {
    background: #fef3c7;
    color: #92400e;
}

.lb-status--published .lb-status__badge {
    background: #dcfce7;
    color: #166534;
}

.lb-status--rejected .lb-status__badge,
.lb-status--canceled .lb-status__badge {
    background: #fee2e2;
    color: #991b1b;
}

.lb-status--payment .lb-status__badge {
    background: #dbeafe;
    color: #1d4ed8;
}

.lb-status--expired .lb-status__badge {
    background: #e2e8f0;
    color: #334155;
}

.lb-status--unpublished .lb-status__badge {
    background: #fef3c7;
    color: #92400e;
}

.lb-status__actions,
.lb-status__owner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.1rem;
}

.lb-status__text,
.lb-status__note,
.lb-status__reason {
    margin: 0 0 1rem;
    line-height: 1.5;
}

.lb-status__reason {
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: #fff7ed;
    border: 1px solid rgba(234, 88, 12, 0.16);
}

.lb-field--reject {
    margin-top: 0.85rem;
}

body.theme-light .lb-field--reject .lb-field__label {
    color: #0f172a;
}

body.theme-light .lb-field--reject .lb-input {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

body.theme-light .auth-card {
    border-color: rgba(15, 23, 42, 0.08);
    background: #fff;
}

@media (max-width: 640px) {
    .auth-card,
    .auth-card--wide {
        padding: 1.6rem 1.2rem 1.55rem;
        border-radius: 22px;
    }

    .auth-input,
    .page-auth .form-input,
    .auth-form__submit {
        min-height: 3.25rem;
        font-size: 1.02rem;
    }
}

@media (max-width: 720px) {
    body.theme-light .discover--feed .discover__search-bar {
        background: rgba(255, 255, 255, 0.94);
        border-color: rgba(15, 23, 42, 0.1);
    }
}

/* Error pages */
.page-error {
    min-height: 100vh;
}

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 11rem);
    padding: 3.5rem 1.5rem 4rem;
    text-align: center;
}

.error-page__code {
    margin: 0 0 0.35rem;
    font-family: var(--landing-display, var(--font));
    font-size: clamp(4.5rem, 14vw, 8rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.9;
    background: linear-gradient(120deg, #e8edf4 20%, var(--landing-foam, #7dd3fc) 55%, #60a5fa 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.error-page__title {
    margin: 0 0 0.85rem;
    font-family: var(--landing-display, var(--font));
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.error-page__lead {
    margin: 0 auto 1.75rem;
    max-width: 28rem;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

body.theme-light .error-page__code {
    background: linear-gradient(120deg, #0f172a 8%, #0284c7 52%, #2563eb 92%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.theme-light .error-page__title {
    color: #0f172a;
}

body.theme-light .error-page__lead {
    color: #64748b;
}

/* Cookie banner */
html.cookies-accepted .cookie-banner {
    display: none;
}

.cookie-banner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 400;
    pointer-events: none;
}

.cookie-banner__inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 0.95rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px);
}

.cookie-banner__title {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 650;
}

.cookie-banner__text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.cookie-banner__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

.cookie-banner__btn {
    flex-shrink: 0;
}

body.theme-light .cookie-banner__inner {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

body.theme-light .cookie-banner__title {
    color: #0f172a;
}

body.theme-light .cookie-banner__text {
    color: #64748b;
}

body.theme-light .cookie-banner__text a:hover {
    color: #0f172a;
}

.site-card {
    max-width: 52rem;
    margin: 0 auto 2rem;
    padding: 1.4rem 1.5rem 1.55rem;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
}

.site-card__kicker {
    margin: 0 0 0.85rem;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-card__hero {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr;
    gap: 1.15rem 1.5rem;
    align-items: start;
}

.site-card__title {
    margin: 0 0 0.45rem;
    font-family: var(--landing-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.03em;
}

.site-card__lead,
.site-card__meta {
    margin: 0 0 0.85rem;
    color: #475569;
    line-height: 1.5;
}

.site-card__meta {
    font-size: 0.92rem;
}

.site-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .site-card__hero {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

@media (max-width: 720px) {
    .cookie-banner {
        right: 0.75rem;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        left: 0.75rem;
    }

    .cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
        padding: 0.9rem 1rem;
    }

    .cookie-banner__btn {
        width: 100%;
    }
}

/* Чат поддержки */
.site-chat {
    position: fixed;
    right: 1.15rem;
    bottom: max(1.15rem, env(safe-area-inset-bottom, 0px));
    z-index: 380;
    font-family: inherit;
}

.site-chat[hidden] {
    display: none !important;
}

body.page-from-browser .site-chat {
    display: none !important;
}

.site-chat-launcher {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    overflow: visible;
    box-shadow:
        0 10px 28px rgba(37, 99, 235, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: background 0.15s, transform 0.16s ease, box-shadow 0.16s ease;
}

.site-chat-launcher:hover {
    background: var(--accent-hover);
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 14px 32px rgba(37, 99, 235, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.site-chat-launcher:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.site-chat-launcher:active {
    transform: scale(0.97);
}

.site-chat-launcher[hidden] {
    display: none !important;
}

.site-chat-launcher:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

.site-chat--quiet:not(.is-open) .site-chat-launcher,
.site-chat--quiet:not(.is-open) .site-chat-backdrop {
    display: none !important;
}

.site-chat-panel {
    display: none;
    width: min(380px, calc(100vw - 1.5rem));
    height: min(560px, calc(100vh - 2rem));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
}

.site-chat.is-open .site-chat-panel {
    display: flex;
}

.site-chat-panel[hidden] {
    display: none !important;
}

.site-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.85rem 0.85rem 0.85rem 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-chat-agent {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.site-chat-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    object-position: 50% 18%;
    background: #2f6bff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.site-chat-backdrop {
    display: none;
}

.site-chat-avatar-img[hidden] {
    display: none;
}

.site-chat-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.site-chat-status {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
}

.site-chat-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.site-chat-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.site-chat-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.site-chat-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.85rem 0.35rem;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
}

.site-chat-log {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-bottom: 0.65rem;
}

.site-chat-row--op {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    align-self: flex-start;
    max-width: 92%;
}

.site-chat-row--op.is-grouped {
    margin-top: -0.12rem;
}

.site-chat-row--op.is-grouped .site-chat-msg-avatar {
    visibility: hidden;
}

.site-chat-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 18%;
    background: #2f6bff;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.site-chat-msg-name {
    margin: 0 0 0.28rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-muted);
}

.site-chat-msg-text {
    margin: 0;
}

.site-chat-msg {
    max-width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.site-chat-msg p {
    margin: 0;
}

.site-chat-msg .site-chat-msg-name {
    margin: 0 0 0.28rem;
}

.site-chat-msg--me {
    align-self: flex-end;
    max-width: 88%;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.site-chat-msg--op {
    min-width: 0;
    background: var(--surface);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

.site-chat-msg--note {
    align-self: stretch;
    max-width: none;
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border-radius: 12px;
}

.site-chat-file-link {
    display: inline-block;
    margin-top: 0.3rem;
    color: inherit;
    font-weight: 600;
}

.site-chat-form {
    padding: 0.65rem 0.7rem 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--bg-elevated);
}

.site-chat-compose {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    padding: 0.35rem 0.4rem 0.35rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(15, 20, 25, 0.35);
}

.site-chat-compose:focus-within {
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.site-chat-input {
    flex: 1;
    min-height: 2rem;
    max-height: 96px;
    border: 0;
    resize: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    outline: none;
}

.site-chat-tools {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.site-chat-icon-btn,
.site-chat-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.site-chat-icon-btn:hover,
.site-chat-icon-btn.is-active {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
}

.site-chat-icon-btn:focus-visible,
.site-chat-send:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.site-chat-send {
    background: var(--accent);
    color: #fff;
}

.site-chat-send:hover {
    background: var(--accent-hover);
}

.site-chat-file-name {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.site-chat-emoji-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 0.45rem;
    max-height: 110px;
    overflow: auto;
    padding: 0.35rem;
    border-radius: 12px;
    background: var(--bg);
}

.site-chat-emoji-panel[hidden] {
    display: none !important;
}

.site-chat-emoji {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: var(--surface);
    font-size: 1.15rem;
    cursor: pointer;
}

.site-chat-emoji:hover {
    background: rgba(59, 130, 246, 0.16);
}

body.theme-light .site-chat-close {
    background: rgba(15, 23, 42, 0.06);
}

body.theme-light .site-chat-close:hover {
    background: rgba(15, 23, 42, 0.1);
}

body.theme-light .site-chat-compose {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.12);
}

body.theme-light .site-chat-icon-btn:hover,
body.theme-light .site-chat-icon-btn.is-active {
    background: rgba(15, 23, 42, 0.06);
}

body.theme-light .site-chat-msg-avatar {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

body.theme-light .site-chat-msg-name {
    color: #5b6b82;
}

body.theme-light .site-chat-msg--note {
    background: #fffbeb;
    color: #b45309;
}

body.theme-light .site-chat-status {
    color: #5b6b82;
}

@media (max-width: 720px) {
    body.site-chat-open {
        overflow: hidden;
    }

    .site-chat {
        right: 0.75rem;
    }

    .site-chat.is-open {
        inset: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 420;
    }

    .site-chat.is-open .site-chat-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        border: 0;
        padding: 0;
        width: 100%;
        background: rgba(6, 10, 16, 0.72);
        backdrop-filter: blur(8px);
        animation: backdrop-in 0.2s ease-out;
        cursor: pointer;
    }

    .site-chat.is-open .site-chat-panel {
        display: flex;
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 0.5rem));
        max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 0.5rem));
        border-radius: 20px 20px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow:
            0 -8px 40px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.04) inset;
        animation: sheet-up 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .site-chat-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: 0.55rem auto 0.15rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        flex-shrink: 0;
    }

    .site-chat-head {
        padding-top: 0.35rem;
    }

    .site-chat-form {
        padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
    }
}

body.theme-light .site-chat-launcher {
    box-shadow:
        0 10px 28px rgba(37, 99, 235, 0.28),
        0 0 0 1px rgba(37, 99, 235, 0.08);
}

body.theme-light .site-chat-launcher:hover {
    box-shadow:
        0 14px 32px rgba(37, 99, 235, 0.32),
        0 0 0 1px rgba(37, 99, 235, 0.1);
}

body.theme-light .site-chat-avatar-img {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

@media (max-width: 720px) {
    body.theme-light .site-chat.is-open .site-chat-backdrop {
        background: rgba(15, 23, 42, 0.45);
    }

    body.theme-light .site-chat-panel::before {
        background: rgba(15, 23, 42, 0.18);
    }
}

/* PWA install banner */
.pwa-install {
    position: fixed;
    z-index: 1200;
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 1.15rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
    color: var(--text);
}

.pwa-install[hidden] {
    display: none !important;
}

.pwa-install__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 12rem;
}

.pwa-install__text strong {
    font-size: 0.95rem;
}

.pwa-install__text span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pwa-install__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

body.theme-light .pwa-install {
    border-color: rgba(15, 23, 42, 0.08);
    background: #fff;
}

@media (min-width: 720px) {
    .pwa-install {
        left: auto;
        right: 1.45rem;
        bottom: 1.45rem;
        max-width: 26rem;
    }
}

/* How it works */
.how-steps {
    list-style: none;
    margin: 1.45rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.how-steps__item {
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--surface);
}

.how-steps__item h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.how-steps__item p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.45;
}

body.theme-light .how-steps__item {
    border-color: rgba(15, 23, 42, 0.08);
    background: #fff;
}

/* Showcase */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1rem;
    margin-top: 1.45rem;
}

.showcase-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.25rem 1.15rem 1.3rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(165deg, rgba(59, 130, 246, 0.1), transparent 42%),
        var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.showcase-card--author {
    text-align: left;
}

.showcase-card:hover,
.showcase-card:focus-visible {
    border-color: rgba(96, 165, 250, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    outline: none;
}

.showcase-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.45rem;
    border-radius: 999px;
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
    color: var(--text);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.showcase-card__avatar--img {
    object-fit: cover;
    background: var(--bg-elevated);
}

.showcase-card__display {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.showcase-card__handle {
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.showcase-card__bio {
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.showcase-card__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.85rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.showcase-card__dot {
    opacity: 0.45;
}

body.theme-light .showcase-card {
    border-color: rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(165deg, rgba(59, 130, 246, 0.06), transparent 48%),
        #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

body.theme-light .showcase-card:hover,
body.theme-light .showcase-card:focus-visible {
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
}

body.theme-light .showcase-card__avatar:not(.showcase-card__avatar--img) {
    color: #0f172a;
    background: #eef2ff;
}

/* Onboarding tour */
.tour {
    position: fixed;
    inset: 0;
    z-index: 1400;
    pointer-events: none;
}

.tour[hidden] {
    display: none !important;
}

.tour__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
}

.tour.is-fallback .tour__shade {
    pointer-events: auto;
    background: rgba(6, 10, 16, 0.72);
}

body.theme-light .tour.is-fallback .tour__shade {
    background: rgba(15, 23, 42, 0.48);
}

.tour__spot {
    position: fixed;
    z-index: 1401;
    pointer-events: none;
    border: 2px solid rgba(96, 165, 250, 0.95);
    box-shadow:
        0 0 0 9999px rgba(6, 10, 16, 0.72),
        0 0 0 6px rgba(96, 165, 250, 0.22),
        0 10px 28px rgba(0, 0, 0, 0.35);
    transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
}

.tour__spot[hidden] {
    display: none !important;
}

.tour__card {
    position: fixed;
    z-index: 1403;
    width: min(22.5rem, calc(100vw - 1.5rem));
    padding: 1.05rem 1.15rem 1.15rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: var(--shadow);
    pointer-events: auto;
    animation: tour-card-in 0.18s ease-out;
}

.tour__caret {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: 0;
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
    z-index: 0;
}

.tour__caret[hidden] {
    display: none !important;
}

.tour__card[data-place="bottom"] .tour__caret {
    border-right: none;
    border-bottom: none;
}

.tour__card[data-place="top"] .tour__caret {
    border-left: none;
    border-top: none;
}

.tour__card[data-place="right"] .tour__caret {
    border-right: none;
    border-top: none;
}

.tour__card[data-place="left"] .tour__caret {
    border-left: none;
    border-bottom: none;
}

.tour__card > :not(.tour__caret) {
    position: relative;
    z-index: 1;
}

@keyframes tour-card-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tour__step {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tour__title {
    margin: 0 0 0.45rem;
    font-size: 1.1rem;
    font-weight: 650;
    line-height: 1.3;
}

.tour__text {
    margin: 0 0 1.05rem;
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.45;
}

.tour__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
}

.tour-target-live {
    position: relative;
    z-index: 1402 !important;
    pointer-events: auto;
}

.nav.tour-nav-lift {
    z-index: 1405;
}

body.theme-light .tour__spot {
    border-color: rgba(37, 99, 235, 0.95);
    box-shadow:
        0 0 0 9999px rgba(15, 23, 42, 0.48),
        0 0 0 6px rgba(37, 99, 235, 0.18),
        0 10px 28px rgba(15, 23, 42, 0.18);
}

body.theme-light .tour__card {
    border-color: rgba(15, 23, 42, 0.08);
    background: #fff;
}

body.theme-light .tour__caret {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 720px) {
    .tour__card {
        width: min(100vw - 1.25rem, 24rem);
        padding: 1rem 1rem 1.1rem;
    }

    .tour__title {
        font-size: 1.05rem;
    }

    .tour__text {
        margin-bottom: 0.95rem;
        font-size: 0.92rem;
    }
}

/* Board tools + import progress */
.prefs-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-start;
    width: 100%;
}

.prefs-tools__out {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    max-height: 14rem;
    overflow: auto;
}

.prefs-tools__out ul {
    margin: 0.35rem 0 0;
    padding-left: 1.15rem;
}

.prefs-tools__group + .prefs-tools__group {
    margin-top: 0.85rem;
}

.prefs-import__progress {
    width: 100%;
    margin-top: 0.65rem;
}

.prefs-import__bar {
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.prefs-import__bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
    transition: width 0.2s ease;
}

body.theme-light .prefs-tools__out {
    border-color: rgba(15, 23, 42, 0.08);
    background: #f8fafc;
}

body.theme-light .prefs-import__bar {
    background: rgba(15, 23, 42, 0.08);
}