/* ============================================
   SRF Component Library — imperiya.by
   SEMrush-style Design System
   ============================================ */

/* ===== RESET ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

html {
    font-family: var(--srf-font-family);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

body {
    background: var(--srf-bg);
    color: var(--srf-text);
    min-height: 100vh;
}

/* ===== LAYOUT ===== */
.srf-layout {
    display: grid;
    grid-template-areas:
        "topbar topbar"
        "sidebar content";
    grid-template-columns: 300px 1fr;
    grid-template-rows: 56px 1fr;
    min-height: 100vh;
}

.srf-layout--public {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.srf-layout__topbar {
    grid-area: topbar;
    background: var(--srf-topbar-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: var(--srf-topbar-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--srf-space-lg);
    gap: var(--srf-space-lg);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 56px;
}

.srf-layout__sidebar {
    grid-area: sidebar;
    background: var(--srf-sidebar-bg);
    border-right: 1px solid var(--srf-border);
    padding: var(--srf-space-md) 0;
    overflow-y: auto;
    height: calc(100vh - 56px);
    position: sticky;
    top: 56px;
}

.srf-layout--public .srf-layout__sidebar {
    display: none;
}

.srf-layout__content {
    grid-area: content;
    padding: var(--srf-space-lg);
    background: var(--srf-bg);
    min-width: 0;
}

/* Public layout content - flex grow to push footer down */
.srf-layout--public .srf-layout__content {
    flex: 1;
}

/* Footer */
.srf-layout__footer {
    margin-top: var(--srf-space-2xl);
    padding: var(--srf-space-xl) var(--srf-space-lg) 0;
    color: var(--srf-text-muted);
    background: var(--srf-surface);
    border-top: 1px solid var(--srf-border);
}

.srf-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--srf-space-xl);
}

.srf-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
}

.srf-footer__brand {
    font-weight: 700;
    font-size: var(--srf-font-18);
    color: var(--srf-text);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.srf-footer__brand:hover {
    color: var(--srf-primary);
}

.srf-footer__desc {
    font-size: var(--srf-font-13);
    line-height: 1.5;
    color: var(--srf-text-muted);
    margin-bottom: var(--srf-space-xs);
    text-wrap: balance;
}

.srf-footer__heading {
    font-size: var(--srf-font-13);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--srf-text);
    margin-bottom: var(--srf-space-xs);
}

.srf-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
}

.srf-footer__link {
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    text-decoration: none;
    transition: color var(--srf-transition-fast);
}

.srf-footer__link:hover {
    color: var(--srf-primary);
}

.srf-footer__bottom {
    margin-top: var(--srf-space-xl);
    padding: var(--srf-space-md) 0;
    border-top: 1px solid var(--srf-border);
    text-align: center;
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
}

@media (max-width: 768px) {
    .srf-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--srf-space-lg);
    }

    .srf-layout__footer {
        padding: var(--srf-space-lg) var(--srf-space-md) 0;
    }
}

/* Container for public pages */
.srf-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
}

/* ===== HEADER ===== */
.srf-header__logo {
    font-weight: 700;
    font-size: var(--srf-font-20);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    gap: 6px;
    align-items: center;
}

.srf-header__logo img {
    width: 32px;
    height: 32px;
}

.srf-header__logo:hover {
    opacity: 1;
}

.srf-header__nav {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
}

.srf-header__menu-link {
    color: var(--srf-topbar-text);
    text-decoration: none;
    padding: var(--srf-space-xs) var(--srf-space-sm);
    border-radius: var(--srf-radius-sm);
    font-size: var(--srf-font-14);
    transition: background var(--srf-transition-fast);
    font-weight: 500;
}

.srf-header__menu-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Header right-side actions */
.srf-header__actions {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    margin-left: auto;
}

/* Icon button (theme toggle, logout) */
.srf-header__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--srf-radius-sm);
    background: transparent;
    color: var(--srf-topbar-text);
    cursor: pointer;
    transition: background var(--srf-transition-fast);
}

.srf-header__icon-btn svg {
    width: 18px;
    height: 18px;
}

.srf-header__icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* User avatar in header */
.srf-header__avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--srf-radius-full);
    border: solid 1.5px #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--srf-primary), #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: var(--srf-font-14);
    text-decoration: none;
    flex-shrink: 0;
    transition: box-shadow var(--srf-transition-fast);
}

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

.srf-header__avatar:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

/* Auth buttons in header (hidden on mobile) */
.srf-header__auth-btn {
    white-space: nowrap;
    color: #fff !important;
}

/* Hamburger button — hidden on desktop */
.srf-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    margin-left: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--srf-radius-sm);
    transition: background var(--srf-transition-fast);
}

.srf-header__burger span {
    display: block;
    height: 2px;
    background: var(--srf-topbar-text);
    border-radius: 1px;
    transition: transform .25s, opacity .25s;
}

.srf-header__burger:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ===== MOBILE MENU ===== */
.srf-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
}

.srf-mobile-menu--open {
    pointer-events: auto;
    visibility: visible;
}

.srf-mobile-menu__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity .25s;
}

.srf-mobile-menu--open .srf-mobile-menu__overlay {
    opacity: 1;
}

.srf-mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 85vw;
    height: 100%;
    background: var(--srf-topbar-bg);
    padding: var(--srf-space-lg);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
}

.srf-mobile-menu--open .srf-mobile-menu__panel {
    transform: translateX(0);
}

.srf-mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
}

.srf-mobile-menu__link {
    display: block;
    padding: var(--srf-space-sm);
    color: var(--srf-topbar-text);
    text-decoration: none;
    border-radius: var(--srf-radius-sm);
    font-size: var(--srf-font-16);
    border: none;
    background: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--srf-transition-fast);
}

.srf-mobile-menu__link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.srf-mobile-menu__link--accent {
    color: var(--srf-warning);
    font-weight: 600;
}

.srf-mobile-menu__link--danger {
    color: var(--srf-danger);
}

/* Divider inside mobile menu */
.srf-mobile-menu__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: var(--srf-space-xs) 0;
}

/* Theme toggle inside mobile menu */
.srf-mobile-menu__theme-toggle {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
}

.srf-mobile-menu__theme-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--srf-topbar-text);
}

/* ===== HEADER RESPONSIVE ===== */
@media (max-width: 768px) {
    .srf-header__nav {
        display: none;
    }

    .srf-header__theme-toggle {
        display: none;
    }

    .srf-header__burger {
        display: flex;
    }

    .srf-layout__topbar {
        padding: 0 var(--srf-space-md);
    }
}

@media (max-width: 500px) {
    .srf-header__actions .srf-header__auth-btn {
        display: none;
    }

    .srf-provider-card__services {
        grid-template-columns: 1fr;
    }
}

/* ===== USER MENU DROPDOWN ===== */
.srf-user-menu {
    position: relative;
    margin-left: 8px;
}

/* Panel — hidden by default */
.srf-user-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    width: 420px;
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    box-shadow: var(--srf-shadow-lg);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.srf-user-menu--open .srf-user-menu__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Backdrop — hidden on desktop */
.srf-user-menu__backdrop {
    display: none;
}

/* Avatar trigger — ensure pointer cursor */
button.srf-header__avatar {
    cursor: pointer;
}

/* Header */
.srf-user-menu__header {
    display: flex;
    align-items: center;
    gap: var(--srf-space-md);
    padding: var(--srf-space-md) var(--srf-space-lg);
    border-bottom: 1px solid var(--srf-border);
}

.srf-user-menu__avatar-lg {
    width: 48px;
    height: 48px;
    border-radius: var(--srf-radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--srf-primary), #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: var(--srf-font-18);
    flex-shrink: 0;
}

.srf-user-menu__avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.srf-user-menu__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.srf-user-menu__name {
    font-weight: 600;
    font-size: var(--srf-font-16);
    color: var(--srf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srf-user-menu__role {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
}

.srf-user-menu__balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--srf-space-lg);
    border-bottom: 1px solid var(--srf-border);
    text-decoration: none;
    transition: background 0.15s ease;
}

.srf-user-menu__balance:hover {
    background: color-mix(in srgb, var(--srf-text) 4%, transparent);
}

.srf-user-menu__balance-left {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    color: var(--srf-text-muted);
}

.srf-user-menu__balance-left svg {
    color: var(--srf-text-muted);
}

.srf-user-menu__balance-value {
    font-size: var(--srf-font-16);
    font-weight: 600;
    color: var(--srf-text);
}

.srf-user-menu__balance-currency {
    font-size: var(--srf-font-14);
    font-weight: 400;
    color: var(--srf-text-muted);
}

.srf-user-menu__balance-action {
    font-size: var(--srf-font-14);
    font-weight: 500;
    color: var(--srf-primary);
    text-decoration: none;
    transition: color var(--srf-transition-fast);
}

.srf-user-menu__balance-action:hover {
    color: var(--srf-accent);
}

.srf-user-menu__balance-actions {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
}

.srf-user-menu__balance-actions .srf-user-menu__balance-action+.srf-user-menu__balance-action::before {
    content: '·';
    margin-right: var(--srf-space-sm);
    color: var(--srf-text-muted);
}

.srf-user-menu__settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--srf-radius-sm);
    color: var(--srf-text-muted);
    transition: background var(--srf-transition-fast), color var(--srf-transition-fast);
    text-decoration: none;
    flex-shrink: 0;
}

.srf-user-menu__settings-btn:hover {
    background: var(--srf-sidebar-bg);
    color: var(--srf-text);
}

/* Sections grid — two columns on desktop */
.srf-user-menu__sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.srf-user-menu__section {
    padding: var(--srf-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
}

/* Vertical divider between columns */
.srf-user-menu__section:first-child {
    border-right: 1px solid var(--srf-border);
}

.srf-user-menu__section-label {
    display: flex;
    align-items: center;
    gap: var(--srf-space-xs);
    font-size: var(--srf-font-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--srf-primary);
    margin-bottom: var(--srf-space-sm);
}

.srf-user-menu__section-label svg {
    color: var(--srf-primary);
}

/* Links */
.srf-user-menu__link {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-xs) var(--srf-space-sm);
    font-size: var(--srf-font-14);
    font-weight: 500;
    color: var(--srf-text);
    text-decoration: none;
    border-radius: var(--srf-radius-sm);
    transition: background var(--srf-transition-fast), color var(--srf-transition-fast);
}

.srf-user-menu__link:hover {
    background: var(--srf-sidebar-bg);
    color: var(--srf-primary);
}

.srf-user-menu__link svg {
    color: var(--srf-text-muted);
    flex-shrink: 0;
    transition: color var(--srf-transition-fast);
}

.srf-user-menu__link:hover svg {
    color: var(--srf-primary);
}

/* Badge (pending count) */
.srf-user-menu__badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--srf-radius-full);
    background: var(--srf-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Footer */
.srf-user-menu__footer {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-md) var(--srf-space-lg);
    border-top: 1px solid var(--srf-border);
}

.srf-user-menu__footer-btn {
    flex: 1;
}

.srf-user-menu__footer form {
    flex: 1;
    display: flex;
}

.srf-user-menu__footer form .srf-button {
    width: 100%;
}

/* Danger ghost button (for logout) */
.srf-button--danger-ghost {
    background: transparent;
    color: var(--srf-danger);
    border-color: transparent;
}

.srf-button--danger-ghost:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

html.dark .srf-button--danger-ghost:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.2);
}

/* ===== USER MENU RESPONSIVE ===== */
@media (max-width: 768px) {
    .srf-user-menu__panel {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
        width: 100%;
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--srf-border);
        overflow-y: auto;
        max-height: calc(100vh - 56px);
    }

    .srf-user-menu__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        top: 56px;
        z-index: 999;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .srf-user-menu--open .srf-user-menu__backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .srf-user-menu__sections {
        grid-template-columns: 1fr;
    }

    .srf-user-menu__section:first-child {
        border-right: none;
        border-bottom: 1px solid var(--srf-border);
    }

    .srf-user-menu__footer {
        flex-direction: column;
    }

    .srf-user-menu__footer-btn {
        width: 100%;
    }

    .srf-user-menu__footer form {
        width: 100%;
    }
}

/* ===== SIDEBAR ===== */

.srf-sidebar__section {
    padding: var(--srf-space-sm) var(--srf-space-md);
}


.srf-sidebar__nav {
    display: flex;
    flex-direction: column;
}

.srf-sidebar__nav-item {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-sm) var(--srf-space-md);
    color: var(--srf-text);
    text-decoration: none;
    font-size: var(--srf-font-14);
    border-radius: var(--srf-radius-sm);
    margin: 0 var(--srf-space-sm);
    transition: background var(--srf-transition-fast);
}

.srf-sidebar__nav-item:hover {
    background: var(--srf-border);
}

.srf-sidebar__nav-item--is-active {
    background: rgba(2, 143, 249, 0.12);
    color: var(--srf-primary);
    font-weight: 500;
}

/* ===== CARDS ===== */
.srf-card {
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.srf-card__header {
    padding: var(--srf-space-md) var(--srf-space-lg);
    border-bottom: 1px solid var(--srf-border);
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.srf-card__body {
    padding: var(--srf-space-lg);
    flex: 1;
}

@media (max-width: 768px) {
    .srf-card__body {
        padding: var(--srf-space-md);
    }
}

.srf-card__footer {
    padding: var(--srf-space-md) var(--srf-space-lg);
    border-top: 1px solid var(--srf-border);
    background: var(--srf-sidebar-bg);
    display: flex;
    gap: var(--srf-space-sm);
    flex-wrap: wrap;
}

/* ===== BUTTONS ===== */
.srf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-sm) var(--srf-space-md);
    font-size: var(--srf-font-14);
    font-weight: 600;
    /* чуть увереннее, semrush-like */
    border-radius: var(--srf-radius-sm);
    border: 1px solid transparent;
    /* чтобы не прыгало при outline */
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    height: 36px;

    transition:
        background var(--srf-transition-fast),
        border-color var(--srf-transition-fast),
        color var(--srf-transition-fast),
        box-shadow var(--srf-transition-fast),
        transform var(--srf-transition-fast);
}

.srf-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.25);
    /* можно вынести в токен */
}

.srf-button:disabled,
.srf-button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state (submit in progress) */
.srf-button--loading {
    pointer-events: none;
    cursor: wait;
}

.srf-button--loading .srf-button__text {
    opacity: 0.5;
}

.srf-button--loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--srf-radius-full);
    animation: srf-spin 0.6s linear infinite;
    margin-left: var(--srf-space-xs);
    flex-shrink: 0;
}

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

/* Primary (accent) */
.srf-button--primary {
    background: var(--srf-accent);
    color: #fff;
    box-shadow: var(--srf-shadow-sm);
}

.srf-button--primary:hover {
    box-shadow: var(--srf-shadow-md);
}

/* Secondary (primary brand) */
.srf-button--secondary {
    background: var(--srf-primary);
    color: #fff;
    box-shadow: var(--srf-shadow-sm);
}

.srf-button--secondary:hover {
    box-shadow: var(--srf-shadow-md);
}

/* Outline (исправлено) */
.srf-button--outline {
    background: transparent;
    color: var(--srf-text-muted);
    border-color: var(--srf-border);
}

.srf-button--outline:hover {
    background: var(--srf-sidebar-bg);
    border-color: var(--srf-primary);
}

/* Ghost (минимализм) */
.srf-button--ghost {
    background: transparent;
    color: var(--srf-text-muted);
}

.srf-button--ghost:hover {
    color: var(--srf-text);
    background: rgba(0, 0, 0, 0.04);
}

html.dark .srf-button--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Accent (лучше по смыслу: warning) */
.srf-button--accent {
    background: var(--srf-accent);
    color: #fff;
    box-shadow: var(--srf-shadow-sm);
}

.srf-button--accent:hover {
    box-shadow: var(--srf-shadow-md);
}

/* Sizes */
.srf-button--sm {
    height: 28px;
    padding: var(--srf-space-xs) var(--srf-space-md);
    font-size: var(--srf-font-13);
}

.srf-button--lg {
    height: 44px;
    padding: var(--srf-space-md) var(--srf-space-lg);
    font-size: var(--srf-font-16);
}

@media (max-width: 600px) {
    .srf-button {
        font-size: var(--srf-font-13);
    }
}

/* ===== FORMS ===== */
.srf-label {
    display: block;
    font-size: var(--srf-font-14);
    font-weight: 500;
    margin-bottom: var(--srf-space-sm);
    color: var(--srf-text);
}

.srf-input {
    width: 100%;
    padding: var(--srf-space-sm) var(--srf-space-md);
    font-size: var(--srf-font-14);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    color: var(--srf-text);
    transition: border-color var(--srf-transition-fast), box-shadow var(--srf-transition-fast);
    height: 36px;
}

.srf-input:focus-visible {
    outline: none;
    border-color: var(--srf-primary);
    box-shadow: 0 0 0 3px rgba(2, 143, 249, 0.15);
}

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

/* Hide number input spinners */
.srf-input[type="number"]::-webkit-inner-spin-button,
.srf-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.srf-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.srf-select {
    width: 100%;
    padding: var(--srf-space-sm);
    padding-right: var(--srf-space-xl);
    font-size: var(--srf-font-14);
    background: var(--srf-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23AAB4C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    color: var(--srf-text);
    cursor: pointer;
    height: 36px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.srf-select:focus-visible {
    outline: none;
    border-color: var(--srf-primary);
    box-shadow: 0 0 0 3px rgba(2, 143, 249, 0.15);
}

.srf-textarea {
    width: 100%;
    padding: var(--srf-space-md);
    font-size: var(--srf-font-14);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    color: var(--srf-text);
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.srf-textarea:focus-visible {
    outline: none;
    border-color: var(--srf-primary);
    box-shadow: 0 0 0 3px rgba(2, 143, 249, 0.15);
}

.srf-textarea-mini {
    width: 100%;
    padding: var(--srf-space-sm) var(--srf-space-md);
    padding-right: 40px;
    font-size: var(--srf-font-14);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    color: var(--srf-text);
    font-family: inherit;
    resize: none;
    min-height: 0;
    max-height: 70px;
    overflow-y: auto;
    line-height: 1.4;
    transition: border-color var(--srf-transition-fast), box-shadow var(--srf-transition-fast);
}

.srf-textarea-mini:focus-visible {
    outline: none;
    border-color: var(--srf-primary);
    box-shadow: 0 0 0 3px rgba(2, 143, 249, 0.15);
}

.srf-textarea-mini::placeholder {
    color: var(--srf-text-muted);
}

/* ===== QA CHAT ===== */

/* Root container — replaces srf-sub-mobile-card__row in chat context */
.srf-qa-chat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--srf-space-xs);
    position: relative;
    --srf-qa-chat-bg: var(--srf-surface);
    /* default background for fades */
}

/* Title label — replaces srf-sub-mobile-card__label in chat context */
.srf-qa-chat__title {
    font-size: var(--srf-font-13);
    font-weight: 600;
    color: var(--srf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Chat header wrapper */
.srf-qa-chat__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: var(--srf-space-sm);
}

/* Scrollable messages container */
.srf-qa-chat__messages {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
    width: 100%;
    max-height: min(440px, calc(100svh - 200px));
    overflow: hidden;
    overflow-y: auto;
}


/* Scroll lock to prevent unwanted scroll hijacking until activated */
.srf-qa-chat[data-scroll-locked="1"] .srf-qa-chat__messages {
    overflow: hidden !important;
}

/* When activated, trap the scroll so it doesn't bleed back to the page */
.srf-qa-chat[data-scroll-locked="0"] .srf-qa-chat__messages {
    overscroll-behavior: contain;
}

/* 
 * Top overlay mask using gradient + sticky.
 * Uses z-index: 2, so sticky date badges (z-index: 3) can overlap it.
 */
.srf-qa-chat__messages::before {
    content: '';
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    height: var(--srf-space-md);
    flex-shrink: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--srf-qa-chat-bg) 0%, transparent 100%);
    margin-bottom: calc(-1 * var(--srf-space-md));
}

/* Bottom fade overlay */
.srf-qa-chat__messages::after {
    content: '';
    position: sticky;
    bottom: -1px;
    /* -1px prevents subpixel bleed at bottom */
    z-index: 2;
    display: block;
    height: var(--srf-space-md);
    flex-shrink: 0;
    pointer-events: none;
    background: linear-gradient(to top, var(--srf-qa-chat-bg) 0%, transparent 100%);
    margin-top: calc(-1 * var(--srf-space-md));
}

.srf-qa-chat__messages> :first-child {
    margin-top: var(--srf-space-md);
}

.srf-qa-chat__messages> :last-child {
    margin-bottom: var(--srf-space-md);
}

/* History loader (shown during older messages fetch) */
.srf-qa-chat__history-loader {
    display: flex;
    justify-content: center;
    padding: var(--srf-space-sm) 0;
}

.srf-qa-chat__history-loader[hidden] {
    display: none;
}

.srf-qa-chat__history-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--srf-text-muted);
    border-top-color: transparent;
    border-radius: var(--srf-radius-full);
    animation: srf-spin 0.6s linear infinite;
}

/* Date separator — sticky pill badge between day groups */
.srf-qa-chat__date-sep {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: var(--srf-space-xs) 0;
}

.srf-qa-chat__date-badge {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-full);
    padding: 2px var(--srf-space-sm);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    box-shadow: var(--srf-shadow-sm);
}

/* Single message row */
.srf-qa-chat__msg {
    display: flex;
}

.srf-qa-chat__msg--right {
    justify-content: flex-end;
}

.srf-qa-chat__msg--left {
    justify-content: flex-start;
}

/* Chat form */
.srf-qa-chat__form {
    margin-top: var(--srf-space-sm);
    width: 100%;
    position: relative;
}

/* Message text body */
.srf-qa-chat__text {
    white-space: pre-line;
    line-height: 1.4;
    font-size: var(--srf-font-14);
}

/* Image lightbox link */
.srf-qa-chat__image-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--srf-space-xs);
}

/* New message animation */
@keyframes srf-chat-fadein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.srf-qa-msg--new {
    animation: srf-chat-fadein 0.3s cubic-bezier(0.21, 0.88, 0.5, 1) forwards;
}

.srf-qa-chat__error {
    font-size: var(--srf-font-12);
    color: var(--srf-danger);
    margin-top: var(--srf-space-xs);
}

.srf-qa-notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--srf-space-sm);
    padding: 4px 10px;
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    background: transparent;
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    cursor: pointer;
    transition: color var(--srf-transition-fast), border-color var(--srf-transition-fast);
}

.srf-qa-notify-btn:hover {
    color: var(--srf-primary);
    border-color: var(--srf-primary);
}

.srf-qa-notify-btn[hidden] {
    display: none;
}

/* Chat input wrapper — looks like the text field, contains textarea + buttons */
.srf-qa-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    background: var(--srf-bg);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    padding-right: var(--srf-space-sm);
    transition: border-color var(--srf-transition-fast), box-shadow var(--srf-transition-fast);
}

.srf-qa-input-wrap:focus-within {
    border-color: var(--srf-primary);
    box-shadow: 0 0 0 3px rgba(2, 143, 249, 0.15);
}

/* Textarea inside the wrap — no own border/bg */
.srf-textarea-mini.srf-textarea-mini--infield {
    border: none;
    background: var(--srf-bg);
    box-shadow: none;
    flex: 1;
    padding-right: 0;
}

.srf-textarea-mini.srf-textarea-mini--infield:focus-visible {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

/* Emoji + Send buttons (flex items in chat form) */
.srf-qa-emoji-btn,
.srf-qa-send-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--srf-text);
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}

.srf-qa-emoji-btn:hover {
    opacity: 1;
    color: var(--srf-primary);
}

/* Attach image button (same style as emoji/send) */
.srf-qa-attach-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--srf-text);
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}

.srf-qa-attach-btn:hover {
    opacity: 1;
    color: var(--srf-primary);
}

/* Attach button active state — file is attached */
.srf-qa-attach-btn--has-file {
    opacity: 1;
    color: var(--srf-success);
}


/* QA Chat — Drag and Drop Overlay */
.srf-qa-dropzone {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    border: 2px dashed var(--srf-primary);
    border-radius: var(--srf-radius-sm);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--srf-space-sm);
    color: var(--srf-primary);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

html.dark .srf-qa-dropzone {
    background: rgba(27, 36, 55, 0.9);
}

.srf-qa-dropzone.is-active {
    opacity: 1;
}

.srf-qa-dropzone__icon {
    width: 48px;
    height: 48px;
    animation: srf-bounce 1s infinite;
}

@keyframes srf-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* Image skeleton (processing state) */
.srf-qa-image-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--srf-space-xs);
    background: var(--srf-sidebar-bg);
    border-radius: var(--srf-radius-sm);
    color: var(--srf-text-muted);
    animation: srf-skeleton-pulse 1.5s ease-in-out infinite;
    margin-top: var(--srf-space-xs);
    overflow: hidden;
}

@keyframes srf-skeleton-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Image failed state */
.srf-qa-image-failed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--srf-space-xs);
    background: rgba(239, 68, 68, 0.08);
    border-radius: var(--srf-radius-sm);
    color: var(--srf-danger);
    margin-top: var(--srf-space-xs);
    overflow: hidden;
}

/* Chat bubble styling */
.srf-qa-bubble {
    max-width: 80%;
    padding: var(--srf-space-xs) var(--srf-space-sm) var(--srf-space-sm) var(--srf-space-sm);
    border-radius: var(--srf-radius-sm);
    border: 1px solid var(--srf-border);
}

.srf-qa-bubble--client {
    background: var(--srf-bg-subtle);
}

.srf-qa-bubble--provider {
    background: var(--srf-sidebar-bg);
}

/* Ready image in chat */
.srf-qa-image {
    display: block;
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--srf-radius-sm);
    cursor: pointer;
    object-fit: contain;
    margin-top: var(--srf-space-xs);
}

/* Emoji Popup */
.srf-emoji-popup {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 50;
    width: 195px;
    max-width: 100%;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    background: var(--srf-sidebar-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--srf-shadow);
    display: grid;
    grid-template-columns: repeat(6, auto);
    gap: 8px;
    font-size: var(--srf-font-18);
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.srf-emoji-popup.is-open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.srf-emoji {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, background 0.15s ease;
}

.srf-emoji:hover {
    background: var(--srf-bg-subtle);
    transform: scale(1.3);
}

.srf-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--srf-primary);
    cursor: pointer;
    flex: 0 0 auto;
}

.srf-form-group {
    margin-bottom: var(--srf-space-md);
}

/* Universal disabled state for form elements */
.srf-input:disabled,
.srf-select:disabled,
.srf-textarea:disabled,
.srf-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--srf-sidebar-bg);
}

.srf-stack>.srf-form-group {
    margin-bottom: 0;
}

/* ===== OTP INPUT ROW ===== */
.srf-otp-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.srf-otp-row .otp-digit {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: var(--srf-font-24);
    font-weight: 600;
    padding: 0;
}

@media (max-width: 440px) {
    .srf-otp-row {
        gap: 6px;
    }

    .srf-otp-row .otp-digit {
        width: 36px;
        height: 44px;
        font-size: var(--srf-font-18);
    }
}

/* OTP input — error flash (invalid character) */
.srf-input--error {
    border-color: var(--srf-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    animation: srf-shake 0.3s ease;
}

@keyframes srf-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

/* ===== TABS ===== */
.srf-tabs {
    display: flex;
    gap: var(--srf-space-xs);
    border-bottom: 1px solid var(--srf-border);
}

.srf-tabs__item {
    padding: var(--srf-space-sm) var(--srf-space-md);
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color var(--srf-transition-fast);
}

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

.srf-tabs__item--is-active {
    color: var(--srf-primary);
    font-weight: 500;
}

.srf-tabs__item--is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--srf-primary);
}

/* ===== AVATAR ===== */
.srf-avatar {
    border-radius: var(--srf-radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.srf-avatar--xs {
    width: 28px;
    height: 28px;
    font-size: var(--srf-font-14);
    font-weight: 700;
    border: solid 1.5px #fff;
    box-shadow: none;
    text-decoration: none;
    transition: box-shadow var(--srf-transition-fast);
}

.srf-avatar--xs:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.srf-avatar--sm {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
    font-weight: 600;
    border: 2px solid var(--srf-sidebar-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.srf-avatar--md {
    width: 48px;
    height: 48px;
    font-size: var(--srf-font-18);
    font-weight: 700;
    border: 2px solid var(--srf-sidebar-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.srf-avatar--lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    font-weight: 600;
    border: 3px solid var(--srf-sidebar-bg);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.srf-avatar--xl {
    width: 120px;
    height: 120px;
    font-size: 5rem;
    font-weight: 600;
    border: 5px solid var(--srf-sidebar-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.srf-avatar--placeholder {
    background: var(--srf-primary);
    color: #fff;
}

.srf-avatar__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ===== BADGES ===== */
.srf-badge {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: var(--srf-space-xs) var(--srf-space-sm);
    font-size: var(--srf-font-12);
    font-weight: 500;
    border-radius: var(--srf-radius-sm);
    background: var(--srf-sidebar-bg);
    color: var(--srf-text-muted);
    box-shadow: var(--srf-shadow);
    white-space: nowrap;
    flex-shrink: 0;
    vertical-align: middle;
}

.srf-badge svg {
    flex-shrink: 0;
}

.srf-badge--primary {
    background: rgba(2, 143, 249, 0.12);
    color: var(--srf-primary);
}

.srf-badge--accent {
    background: rgba(255, 101, 46, 0.12);
    color: var(--srf-accent);
}

.srf-badge--success {
    background: rgba(34, 197, 94, 0.12);
    color: var(--srf-success);
}

.srf-badge--warning {
    background: rgba(245, 158, 11, 0.12);
    color: var(--srf-warning);
}

.srf-badge--danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--srf-danger);
}

.srf-badge--muted {
    background: rgba(156, 163, 175, 0.12);
    color: var(--srf-muted);
}

.srf-badge--info {
    background: rgba(0, 143, 248, 0.12);
    color: var(--srf-primary);
}

.srf-badge--pro {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-weight: 600;
    gap: 4px;
    letter-spacing: 0.02em;
}

.dark .srf-badge--pro {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1B1F3B;
}

/* Size modifier — micro (inline contexts, tables) */
.srf-badge--micro {
    font-size: var(--srf-font-10);
    padding: 1px 5px;
    gap: 2px;
    box-shadow: none;
}

/* ===== METRICS ===== */
.srf-metric {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
}

.srf-metric__value {
    font-size: var(--srf-font-24);
    font-weight: 600;
    color: var(--srf-text);
    line-height: 1.2;
}

.srf-metric__label {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
}

.srf-metric--success .srf-metric__value {
    color: var(--srf-success);
}

.srf-metric--danger .srf-metric__value {
    color: var(--srf-danger);
}

/* ===== TABLES ===== */
.srf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--srf-font-14);
    overflow: hidden;
    border-radius: 7px;
}

.srf-table__header {
    background: var(--srf-sidebar-bg);
}

.srf-table__header th {
    text-align: left;
    padding: var(--srf-space-sm) var(--srf-space-md);
    font-weight: 500;
    color: var(--srf-text-muted);
    border-bottom: 1px solid var(--srf-border);
}

.srf-table__row:not(:last-child) {
    border-bottom: 1px solid var(--srf-border);
}

.srf-table__row:hover {
    background: var(--srf-sidebar-bg);
}

.srf-table__cell {
    padding: var(--srf-space-sm) var(--srf-space-md);
    color: var(--srf-text);
    vertical-align: middle;
}

/* ===== BREADCRUMB ===== */
.srf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--srf-space-sm);
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    margin-bottom: var(--srf-space-md);
}

.srf-breadcrumb__item {
    color: var(--srf-text-muted);
    text-decoration: none;
}

.srf-breadcrumb__item:hover {
    color: var(--srf-primary);
}

.srf-breadcrumb__separator {
    color: var(--srf-text-muted);
}

.srf-breadcrumb__current {
    color: var(--srf-text);
}

/* ===== PAGINATION ===== */
.srf-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--srf-space-md);
    padding: var(--srf-space-lg) 0;
    flex-wrap: wrap;
}

.srf-pagination__info {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
}

.srf-pagination__info strong {
    color: var(--srf-text);
    font-weight: 600;
}

.srf-pagination__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.srf-pagination__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--srf-space-xs);
    border-radius: var(--srf-radius-sm);
    font-size: var(--srf-font-14);
    font-weight: 500;
    color: var(--srf-text);
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--srf-transition-fast);
    cursor: pointer;
    user-select: none;
}

.srf-pagination__item:hover {
    background: var(--srf-sidebar-bg);
    border-color: var(--srf-border);
}

.srf-pagination__item--active {
    background: var(--srf-primary);
    color: #FFFFFF;
    border-color: var(--srf-primary);
    pointer-events: none;
}

.srf-pagination__item--active:hover {
    background: var(--srf-primary);
    border-color: var(--srf-primary);
}

.srf-pagination__item--arrow {
    color: var(--srf-text-muted);
}

.srf-pagination__item--arrow:hover {
    color: var(--srf-primary);
    background: rgba(2, 143, 249, 0.08);
    border-color: rgba(2, 143, 249, 0.2);
}

.srf-pagination__item--disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.srf-pagination__item--dots {
    pointer-events: none;
    cursor: default;
    color: var(--srf-text-muted);
    font-size: var(--srf-font-14);
    min-width: 28px;
}

.srf-pagination__item--dots:hover {
    background: none;
    border-color: transparent;
}

/* ===== MODAL ===== */
.srf-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--srf-space-lg);
}

.srf-modal--is-open {
    display: flex;
}

.srf-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.srf-modal__content {
    position: relative;
    background: var(--srf-surface);
    border-radius: var(--srf-radius-lg);
    box-shadow: var(--srf-shadow-lg);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
}

.srf-modal__header {
    padding: var(--srf-space-lg);
    border-bottom: 1px solid var(--srf-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.srf-modal__header-left {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    min-width: 0;
}

.srf-modal__type-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.srf-modal__type-icon:empty {
    display: none;
}

.srf-modal__title {
    font-size: var(--srf-font-18);
    font-weight: 600;
}

.srf-modal__close {
    background: none;
    border: none;
    font-size: var(--srf-font-24);
    color: var(--srf-text-muted);
    cursor: pointer;
    line-height: 1;
}

.srf-modal__body {
    padding: var(--srf-space-lg);
}

.srf-modal__footer {
    padding: var(--srf-space-lg);
    border-top: 1px solid var(--srf-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--srf-space-sm);
}

/* ===== ALERTS ===== */
.srf-alert {
    padding: var(--srf-space-md);
    border-radius: var(--srf-radius-md);
    font-size: var(--srf-font-14);
    margin-bottom: var(--srf-space-lg);
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
}

.srf-alert svg {
    flex-shrink: 0;
}

.srf-alert--success {
    background: rgba(34, 197, 94, 0.12);
    color: var(--srf-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.srf-alert--warning {
    background: rgba(245, 158, 11, 0.12);
    color: var(--srf-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.srf-alert--danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--srf-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.srf-alert--info {
    background: rgba(0, 143, 248, 0.12);
    color: var(--srf-primary);
    border: 1px solid rgba(0, 143, 248, 0.3);
}

/* Alert with inline action button */
.srf-alert--with-action {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
}

.srf-alert--with-action .srf-alert__content {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    flex: 1;
    min-width: 0;
}

.srf-alert--with-action .srf-alert__content svg {
    flex-shrink: 0;
}

.srf-alert--with-action .srf-alert__action {
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .srf-alert--with-action {
        flex-direction: column;
        align-items: flex-start;
    }

    .srf-alert--with-action .srf-alert__action {
        margin-left: 0;
        width: 100%;
    }
}

/* Field validation error */
.srf-error {
    color: var(--srf-danger);
    font-size: var(--srf-font-13);
    margin-top: var(--srf-space-xs);
    padding: var(--srf-space-xs) var(--srf-space-sm);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--srf-radius-sm);
}

/* Universal form message */
.srf-form-message {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--srf-font-13);
    margin-top: var(--srf-space-xs);
    padding: var(--srf-space-xs) var(--srf-space-sm);
    border-radius: var(--srf-radius-sm);
}

.srf-form-message svg {
    flex-shrink: 0;
}

.srf-form-message--danger {
    color: var(--srf-danger);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.srf-form-message--warning {
    color: var(--srf-warning);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.srf-form-message--success {
    color: var(--srf-success);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.srf-form-message--info {
    color: var(--srf-primary);
    background: rgba(0, 143, 248, 0.1);
    border: 1px solid rgba(0, 143, 248, 0.3);
}

/* ===== EMPTY STATE ===== */
.srf-empty {
    text-align: center;
    padding: var(--srf-space-2xl);
    color: var(--srf-text-muted);
}

.srf-empty__icon {
    font-size: 3rem;
    margin-bottom: var(--srf-space-md);
    opacity: 0.5;
}

.srf-empty__title {
    font-size: var(--srf-font-18);
    font-weight: 600;
    color: var(--srf-text);
    margin-bottom: var(--srf-space-sm);
}

.srf-empty__text {
    font-size: var(--srf-font-14);
    max-width: 400px;
    margin: 0 auto;
}


/* ===== GRID ===== */
.srf-grid {
    display: grid;
    gap: var(--srf-space-lg);
}

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

/* Subgrid alignment: children share row tracks (use with cols-2 + 2 stacks) */
.srf-grid--subgrid-rows {
    grid-template-rows: auto auto;
}

.srf-grid--subgrid-rows>.srf-stack {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
}

.srf-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.srf-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.srf-grid--align-start {
    align-items: start;
}

.srf-grid--auto-2 {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.srf-grid--3-1 {
    grid-template-columns: calc(66.667% - var(--srf-space-lg) / 3) 1fr;
}

@media (max-width: 768px) {

    .srf-grid--cols-2,
    .srf-grid--cols-3,
    .srf-grid--cols-4,
    .srf-grid--3-1 {
        grid-template-columns: 1fr;
    }
}

/* ===== LINKS ===== */
.srf-link {
    color: var(--srf-primary);
    text-decoration: none;
}

.srf-link:hover {
    text-decoration: underline;
}

/* ===== TYPOGRAPHY ===== */
.srf-heading {
    font-size: var(--srf-font-32);
    font-weight: 600;
    color: var(--srf-text);
    line-height: 1.3;
}



.srf-heading--lg {
    font-size: var(--srf-font-20);
}

.srf-heading--md {
    font-size: var(--srf-font-18);
}

.srf-heading--sm {
    font-size: var(--srf-font-16);
}

.srf-text--muted {
    color: var(--srf-text-muted);
}

.srf-text--success {
    color: var(--srf-success);
}

.srf-text--danger {
    color: var(--srf-danger);
}

.srf-text--sm {
    font-size: var(--srf-font-14);
}

.srf-text--xs {
    font-size: var(--srf-font-12);
}

.srf-text--2xs {
    font-size: var(--srf-font-10);
}

/* ===== RATING ===== */

/* ===== DASHBOARD ===== */
.srf-dashboard-card {
    text-decoration: none;
    transition: transform var(--srf-transition-fast), box-shadow var(--srf-transition-fast);
}

.srf-dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--srf-shadow-md);
}

.srf-dashboard-card__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--srf-space-sm);
}

.srf-dashboard-card__label {
    margin: 0;
    font-size: var(--srf-font-14);
    color: var(--srf-text);
}

.srf-dashboard-card--highlight {
    border: 2px solid rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.04);
}

.srf-dashboard-card--highlight:hover {
    border-color: rgba(34, 197, 94, 0.5);
}

.srf-dashboard-card--attention {
    border: 2px solid rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.04);
}

.srf-dashboard-card--attention:hover {
    border-color: rgba(245, 158, 11, 0.5);
}

/* Pulsing green dot indicator */
.srf-pulse-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: var(--srf-radius-full);
    background: var(--srf-success);
    animation: srf-pulse 2s infinite;
}

@keyframes srf-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Dashboard section with title */
.srf-dashboard-section__title {
    font-size: var(--srf-font-18);
    font-weight: 600;
    color: var(--srf-text);
    margin-bottom: var(--srf-space-md);
}

/* ===== ATTENTION CARDS (Dashboard Block 2) ===== */
.srf-attention-grid {
    display: grid;
    gap: var(--srf-space-lg);
    grid-template-columns: 1fr;
}

/* ── Desktop (≥1025px): N cards = N columns ── */
@media (min-width: 1025px) {
    .srf-attention-grid--count-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .srf-attention-grid--count-3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

/* ── Tablet (769–1024px): 4→2×2, 3→3×1, 2→2×1, 1→1×1 ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .srf-attention-grid--count-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .srf-attention-grid--count-3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

/* ── Phone (≤768px): always 1 column — handled by base rule ── */

.srf-attention-card {
    --srf-attention-accent: var(--srf-primary);
    display: flex;
    flex-direction: column;
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-lg);
    padding: var(--srf-space-lg);
    transition: box-shadow var(--srf-transition-normal), transform var(--srf-transition-fast);
    min-width: 0;
    overflow: hidden;
}

.srf-attention-card:hover,
.srf-attention-card:focus-within {
    transform: translateY(-1px);
}

/* Color modifiers — set accent + hover shadow */
.srf-attention-card--primary {
    --srf-attention-accent: var(--srf-primary);
}

.srf-attention-card--primary:hover,
.srf-attention-card--primary:focus-within {
    box-shadow: var(--srf-shadow-primary);
}

.srf-attention-card--success {
    --srf-attention-accent: var(--srf-success);
}

.srf-attention-card--success:hover,
.srf-attention-card--success:focus-within {
    box-shadow: var(--srf-shadow-success);
}

.srf-attention-card--warning {
    --srf-attention-accent: var(--srf-warning);
}

.srf-attention-card--warning:hover,
.srf-attention-card--warning:focus-within {
    box-shadow: var(--srf-shadow-warning);
}

.srf-attention-card--danger {
    --srf-attention-accent: var(--srf-danger);
}

.srf-attention-card--danger:hover,
.srf-attention-card--danger:focus-within {
    box-shadow: var(--srf-shadow-danger);
}

.srf-attention-card--muted {
    --srf-attention-accent: var(--srf-text-muted);
}

.srf-attention-card--muted:hover,
.srf-attention-card--muted:focus-within {
    box-shadow: 0 4px 16px rgba(128, 128, 128, 0.15);
}

.srf-attention-card--promo {
    --srf-attention-accent: #e6a817;
    background: linear-gradient(135deg, rgba(230, 168, 23, 0.06) 0%, rgba(255, 101, 46, 0.04) 100%);
    border: 1px solid rgba(230, 168, 23, 0.25);
}

.srf-attention-card--promo:hover,
.srf-attention-card--promo:focus-within {
    box-shadow: 0 4px 16px rgba(230, 168, 23, 0.2);
    border-color: rgba(230, 168, 23, 0.4);
}

/* Promo alert (verification page inline promo) */
.srf-alert--promo {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-sm) var(--srf-space-md);
    background: linear-gradient(135deg, rgba(230, 168, 23, 0.1) 0%, rgba(255, 101, 46, 0.06) 100%);
    color: #b8860b;
    border: 1px solid rgba(230, 168, 23, 0.3);
    border-radius: var(--srf-radius-md);
    font-size: var(--srf-font-14);
}

.dark .srf-alert--promo {
    color: #f0c040;
}

/* Header: icon left, count right */
.srf-attention-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--srf-space-md);
}

/* Quote title inside attention card */
.srf-attention-card__quote-title {
    font-size: var(--srf-font-13);
    font-weight: 600;
    color: var(--srf-text);
}

.srf-attention-card__footer .srf-quote {
    font-size: var(--srf-font-13);
    padding: var(--srf-space-xs) var(--srf-space-sm);
    margin: 0;
}

/* Colored icon square */
.srf-attention-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--srf-radius-md);
    background: color-mix(in srgb, var(--srf-attention-accent) 15%, transparent);
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Count badge */
.srf-attention-card__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--srf-space-sm);
    border-radius: var(--srf-radius-full);
    background: var(--srf-attention-accent);
    color: #fff;
    font-size: var(--srf-font-13);
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

/* Title — max 2 lines */
.srf-attention-card__title {
    font-size: var(--srf-font-16);
    font-weight: 600;
    color: var(--srf-text);
    margin: 0 0 var(--srf-space-xs) 0;
    overflow: hidden;
}

/* Meta line: description + status */
.srf-attention-card__meta {
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status label */
.srf-attention-card__status {
    color: var(--srf-attention-accent);
    font-weight: 600;
    font-size: var(--srf-font-12);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Alert text */
.srf-attention-card__alert {
    font-size: var(--srf-font-13);
    color: var(--srf-attention-accent);
    margin: var(--srf-space-sm) 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.srf-attention-card__alert::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--srf-radius-full);
    background: var(--srf-attention-accent);
    margin-right: var(--srf-space-xs);
    flex-shrink: 0;
}

/* Footer — pushed to bottom */
.srf-attention-card__footer {
    /* margin-top: auto; */
    padding-top: var(--srf-space-md);
    border-top: 1px solid var(--srf-border);
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
}

/* Individual link in footer */
.srf-attention-card__link {
    display: block;
    font-size: var(--srf-font-14);
    color: var(--srf-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--srf-transition-fast);
}

.srf-attention-card__link:hover {
    text-decoration: underline;
}

.srf-attention-card__link:focus-visible {
    outline: 2px solid var(--srf-attention-accent);
    outline-offset: 2px;
    border-radius: var(--srf-radius-sm);
}

/* "Ещё N →" and general links — muted style */
.srf-attention-card__link--more {
    color: var(--srf-text-muted);
    font-weight: 500;
}

.srf-attention-card__link--more:hover {
    color: var(--srf-attention-accent);
}

/* Link wrapper (for link + progress bar) */
.srf-attention-card__link-wrap {
    display: flex;
    flex-direction: column;
    border-left: 3px solid var(--srf-attention-accent);
    padding-left: var(--srf-space-sm);
    justify-content: center;
    border-radius: var(--srf-radius-sm) 0 0 var(--srf-radius-sm);
}

/* Progress bar — empty, colored border */
.srf-attention-card__progress {
    height: 9px;
    border: 0.5px solid var(--srf-attention-accent);
    border-radius: var(--srf-radius-sm);
    margin: var(--srf-space-xs) 0;
    background: var(--srf-sidebar-bg);
}

/* Filled progress bar */
.srf-attention-card__progress--filled {
    overflow: hidden;
}

.srf-attention-card__progress-fill {
    height: 100%;
    background: var(--srf-attention-accent);
    border-radius: var(--srf-radius-sm);
    transition: width 0.3s ease;
}

/* Time-ago / sub-info text under link */
.srf-attention-card__time-ago,
.srf-attention-card__sub-info {
    font-size: var(--srf-font-13);
    line-height: 1;
    color: var(--srf-text-muted);
    display: block;
    margin-bottom: var(--srf-space-xs);
}

/* ═══════════════════════════════════════════
   Workspace Progress Block
   ═══════════════════════════════════════════ */
.srf-ws-progress__bar {
    height: 16px;
    border: 1px solid var(--srf-primary);
    border-radius: var(--srf-radius-md);
    background: var(--srf-sidebar-bg);
    overflow: hidden;
    margin-bottom: var(--srf-space-md);
}

.srf-ws-progress__fill {
    height: 100%;
    background: var(--srf-primary);
    border-radius: var(--srf-radius-md);
    transition: width 0.3s ease;
}

.srf-ws-progress__fill--overdue {
    background: var(--srf-danger);
}

.srf-ws-progress__details {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
}

.srf-ws-progress__detail {
    display: flex;
    justify-content: space-between;
    font-size: var(--srf-font-14);
}

.srf-ws-progress__label {
    color: var(--srf-text-muted);
}

.srf-ws-progress__value {
    font-weight: 600;
}

.srf-dashboard-row {
    margin-top: var(--srf-space-lg);
}

/* Dashboard block header (title + link) */
.srf-dashboard-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--srf-space-md);
}

.srf-dashboard-block__header h4 {
    display: flex;
    align-items: center;
    gap: var(--srf-space-xs);
}

.srf-dashboard-block__title {
    font-size: var(--srf-font-16);
    font-weight: 600;
    color: var(--srf-text);
    margin: 0;
}

/* Dashboard stats — compact inline metrics */
.srf-dashboard-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--srf-space-xs) var(--srf-space-md);
}

.srf-dashboard-stat {
    font-size: var(--srf-font-14);
    color: var(--srf-text);
}

/* Dashboard empty state (within cards) */
.srf-dashboard-empty {
    display: flex;
    text-align: center;
    color: var(--srf-text-muted);
    font-size: var(--srf-font-14);
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;
}

/* Activity feed */
.srf-dashboard-activity {
    list-style: none;
    padding: 0;
    margin: 0;
}

.srf-dashboard-activity__item {
    display: flex;
    gap: var(--srf-space-sm);
    align-items: flex-start;
    padding: var(--srf-space-sm) 0;
    position: relative;
    align-items: center;
}


.srf-dashboard-activity__icon {
    flex-shrink: 0;
    font-size: var(--srf-font-16);
    line-height: 1.5;
    z-index: 1;
}

/* Vertical timeline line connecting icons */
.srf-dashboard-activity__item:not(:last-child) .srf-dashboard-activity__icon::after {
    content: '';
    position: absolute;
    left: 22px;
    top: calc(50% + 22px);
    bottom: calc(-50% + 22px);
    transform: translateX(-50%);
    width: 2px;
    background: inherit;
}

.srf-dashboard-activity__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.srf-dashboard-activity__text {
    font-size: var(--srf-font-14);
    color: var(--srf-text);
}

.srf-dashboard-activity__time {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
}

/* Onboarding recommendations */
.srf-dashboard-onboarding {
    list-style: none;
    padding: 0;
    margin: 0;
}

.srf-dashboard-onboarding__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--srf-space-md);
    padding: var(--srf-space-sm) 0;
    border-bottom: 1px solid var(--srf-border);
    font-size: var(--srf-font-14);
    color: var(--srf-text);
}

.srf-dashboard-onboarding__item:last-child {
    border-bottom: none;
}

@media (max-width: 600px) {
    .srf-dashboard-onboarding__item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Compact navigation links */
.srf-dashboard-nav-link {
    display: block;
    padding: var(--srf-space-sm) var(--srf-space-md);
    font-size: var(--srf-font-14);
    color: var(--srf-text);
    text-decoration: none;
    border-radius: var(--srf-radius-sm);
    background: var(--srf-sidebar-bg);
    transition: background var(--srf-transition-fast), color var(--srf-transition-fast);
    white-space: nowrap;
}

.srf-dashboard-nav-link:hover {
    background: var(--srf-border);
    color: var(--srf-primary);
}

/* Dashboard metric card (compact number + label) */
.srf-dashboard-metric {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--srf-space-md);
    position: relative;
}

.srf-dashboard-metric__info {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
}

.srf-dashboard-metric__label {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.srf-dashboard-metric__value {
    font-size: var(--srf-font-28, 1.75rem);
    font-weight: 700;
    color: var(--srf-text);
    line-height: 1;
}

.srf-dashboard-metric__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--srf-radius-full);
    flex-shrink: 0;
    margin-top: 2px;
}

.srf-dashboard-metric__dot--success {
    background: var(--srf-success);
}

.srf-dashboard-metric__dot--warning {
    background: var(--srf-warning);
}

.srf-dashboard-metric__dot--danger {
    background: var(--srf-danger);
}

.srf-dashboard-metric__dot--pulse {
    animation: srf-pulse 2s infinite;
}

/* Stat tiles (mini metric blocks inside a card) */
.srf-dashboard-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--srf-space-lg);
}

.srf-dashboard-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--srf-space-xs);
    padding: var(--srf-space-sm) var(--srf-space-xs);
    background: var(--srf-sidebar-bg);
    border-radius: var(--srf-radius-sm);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.srf-dashboard-tile:hover {
    background: var(--srf-primary);
}

.srf-dashboard-tile:hover .srf-dashboard-tile__value,
.srf-dashboard-tile:hover .srf-dashboard-tile__label {
    color: #fff;
}

.srf-dashboard-tile__value {
    font-size: var(--srf-font-20, 1.25rem);
    font-weight: 700;
    color: var(--srf-primary);
    line-height: 1;
}

.srf-dashboard-tile__label {
    font-size: var(--srf-font-11, 0.6875rem);
    color: var(--srf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* 6-column modifier for admin dashboard */
.srf-dashboard-tiles--cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1024px) {
    .srf-dashboard-tiles--cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .srf-dashboard-tiles--cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 7-column modifier for admin dashboard */
.srf-dashboard-tiles--cols-7 {
    grid-template-columns: repeat(7, 1fr);
}

@media (max-width: 1200px) {
    .srf-dashboard-tiles--cols-7 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .srf-dashboard-tiles--cols-7 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 8-column modifier for admin dashboard */
.srf-dashboard-tiles--cols-8 {
    grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 1200px) {
    .srf-dashboard-tiles--cols-8 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .srf-dashboard-tiles--cols-8 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.srf-dashboard-tile__hint {
    font-size: var(--srf-font-11, 0.6875rem);
    color: var(--srf-text-muted);
    line-height: 1;
}

.srf-dashboard-tile:hover .srf-dashboard-tile__hint {
    color: #fff;
}

/* ═══════════════════════════════════════════
   Admin Dashboard — 3-zone menu (admin/dashboard)
   ═══════════════════════════════════════════ */

/* ── Section (zone) headings ── */
.srf-admin-section__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--srf-space-md);
}

.srf-admin-section__title {
    margin: 0;
    font-size: var(--srf-font-18);
    font-weight: 600;
    color: var(--srf-text);
    line-height: 1.3;
}

.srf-admin-section__subtitle {
    margin: 0;
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
}

/* ── Focus cards — "Requires attention" ── */
.srf-admin-focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--srf-space-md);
}

.srf-admin-focus {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-sm) var(--srf-space-md);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-lg);
    background: var(--srf-sidebar-bg);
    text-decoration: none;
    transition: border-color var(--srf-transition-fast);
}

.srf-admin-focus:hover {
    border-color: var(--srf-primary);
}

.srf-admin-focus__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--srf-radius-full);
    background: rgba(0, 143, 248, 0.12);
    color: var(--srf-primary);
}

.srf-admin-focus__icon--warning {
    background: rgba(245, 158, 11, 0.12);
    color: var(--srf-warning);
}

.srf-admin-focus__icon--success {
    background: rgba(34, 197, 94, 0.12);
    color: var(--srf-success);
}

.srf-admin-focus__icon--primary {
    background: rgba(0, 143, 248, 0.12);
    color: var(--srf-primary);
}

.srf-admin-focus__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.srf-admin-focus__title {
    font-size: var(--srf-font-14);
    font-weight: 600;
    color: var(--srf-text);
    line-height: 1.3;
}

.srf-admin-focus__meta {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
    line-height: 1.4;
}

.srf-admin-focus__arrow {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--srf-text-muted);
    transition: color var(--srf-transition-fast);
}

.srf-admin-focus:hover .srf-admin-focus__arrow {
    color: var(--srf-primary);
}

/* ── Card grid — main & secondary zones ── */
.srf-admin-card-grid {
    display: grid;
    gap: var(--srf-space-md);
}

.srf-admin-card-grid--primary {
    grid-template-columns: repeat(3, 1fr);
}

.srf-admin-card-grid--secondary {
    grid-template-columns: repeat(5, 1fr);
}

/* ── Individual admin card ── */
.srf-admin-card {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-md);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-lg);
    background: var(--srf-sidebar-bg);
    text-decoration: none;
    transition: border-color var(--srf-transition-fast);
}

.srf-admin-card:hover {
    border-color: var(--srf-primary);
}

.srf-admin-card--secondary {
    background: var(--srf-surface);
}

.srf-admin-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--srf-space-sm);
}

.srf-admin-card__brand {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    min-width: 0;
}

.srf-admin-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--srf-radius-full);
    background: rgba(0, 143, 248, 0.10);
    color: var(--srf-primary);
}

.srf-admin-card__title {
    font-size: var(--srf-font-14);
    font-weight: 600;
    color: var(--srf-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srf-admin-card__arrow {
    flex-shrink: 0;
    color: var(--srf-text-muted);
    transition: color var(--srf-transition-fast);
}

.srf-admin-card:hover .srf-admin-card__arrow {
    color: var(--srf-primary);
}

.srf-admin-card__value {
    font-size: var(--srf-font-28);
    font-weight: 700;
    color: var(--srf-text);
    line-height: 1;
    letter-spacing: -0.02em;
}

.srf-admin-card__meta {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
    line-height: 1.4;
}

.srf-admin-card__meta .srf-badge {
    font-size: var(--srf-font-12);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .srf-admin-card-grid--primary {
        grid-template-columns: repeat(2, 1fr);
    }

    .srf-admin-card-grid--secondary {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    .srf-admin-card-grid--primary,
    .srf-admin-card-grid--secondary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {

    .srf-admin-card-grid--primary,
    .srf-admin-card-grid--secondary {
        grid-template-columns: 1fr;
    }
}

/* Secondary stats — compact text row for minor statuses */
.srf-dashboard-secondary-stats {
    display: flex;
    gap: var(--srf-space-md);
    margin-top: var(--srf-space-sm);
    font-size: var(--srf-font-13, 0.8125rem);
    color: var(--srf-text-muted);
}

.srf-dashboard-secondary-stats strong {
    color: var(--srf-text);
}

/* Awaiting review section */
.srf-dashboard-review-section {
    margin-top: var(--srf-space-md);
    padding-top: var(--srf-space-md);
    border-top: 1px solid var(--srf-border);
}

.srf-dashboard-review-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-md);
    background: var(--srf-sidebar-bg);
    border-radius: var(--srf-radius-sm);
    margin-bottom: var(--srf-space-xs);
}

.srf-dashboard-review-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.srf-dashboard-review-item__title {
    font-size: var(--srf-font-14);
    font-weight: 600;
    color: var(--srf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srf-dashboard-review-item__meta {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
}

/* Compact subsection for Favorites / Reviews */
.srf-dashboard-compact-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-sm) 0;
    border-top: 1px solid var(--srf-border);
}

.srf-dashboard-compact-sub__text {
    display: flex;
    align-items: center;
    gap: var(--srf-space-xs);
    font-size: var(--srf-font-14);
    color: var(--srf-text);
}

.srf-dashboard-compact-sub__text strong {
    font-weight: 600;
}

/* Profile card — centered layout */
.srf-dashboard-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--srf-space-sm);
}

.srf-dashboard-profile__name {
    font-size: var(--srf-font-18);
    font-weight: 700;
    color: var(--srf-text);
    margin: 0;
}

.srf-dashboard-profile__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--srf-space-xs);
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
}

.srf-dashboard-profile__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--srf-space-sm);
    width: 100%;
    margin-top: var(--srf-space-xs);
}

.srf-dashboard-profile__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.srf-dashboard-profile__metric-value {
    font-size: var(--srf-font-18);
    font-weight: 700;
    color: var(--srf-text);
}

.srf-dashboard-profile__metric-label {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
}

.srf-dashboard-profile__actions {
    display: flex;
    gap: var(--srf-space-sm);
    width: 100%;
}

.srf-dashboard-profile__actions .srf-button {
    flex: 1;
}



/* Vertical divider between metrics */
.srf-dashboard-profile__metrics--divided {
    position: relative;
}

.srf-dashboard-profile__metrics--divided::after {
    content: '';
    position: absolute;
    top: var(--srf-space-xs);
    bottom: var(--srf-space-xs);
    left: 50%;
    width: 1px;
    background: var(--srf-border);
}

.srf-dashboard-profile__status {
    font-size: var(--srf-font-14);
    font-weight: 600;
}

/* Activity icon — colored circle background */
.srf-dashboard-activity__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--srf-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--srf-font-20);
    line-height: 1;
    background: var(--srf-sidebar-bg);
}

.srf-dashboard-activity__icon--success {
    background: rgba(34, 197, 94, 0.12);
}

.srf-dashboard-activity__icon--danger {
    background: rgba(239, 68, 68, 0.12);
}

.srf-dashboard-activity__icon--warning {
    background: rgba(245, 158, 11, 0.12);
}

.srf-dashboard-activity__icon--info {
    background: rgba(0, 143, 248, 0.12);
}

/* Onboarding — inline CTA bar */
.srf-dashboard-cta-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--srf-space-md);
}

.srf-dashboard-cta-card {
    display: flex;
    align-items: center;
    gap: var(--srf-space-md);
    padding: var(--srf-space-md);
}

.srf-dashboard-cta-card__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.srf-dashboard-cta-card__content {
    flex: 1;
    min-width: 0;
}

.srf-dashboard-cta-card__title {
    font-size: var(--srf-font-14);
    font-weight: 600;
    color: var(--srf-text);
    margin: 0;
}

.srf-dashboard-cta-card__text {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    margin: 0;
}

/* The card body acts as the container for tiles */
.srf-card__body {
    container-type: inline-size;
    container-name: cardBody;
}

@container cardBody (width <=400px) {
    .srf-dashboard-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container cardBody (width <=200px) {
    .srf-dashboard-tiles {
        grid-template-columns: 1fr;
    }
}

@container cardBody (width <=480px) {
    .srf-dashboard-review-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .srf-dashboard-profile__actions {
        flex-direction: column;
    }
}

/* Badges grid — 4 col with container steps */
.srf-dashboard-badges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--srf-space-sm);
    margin-top: var(--srf-space-sm);
}

.srf-dashboard-badges-grid .srf-badge {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.srf-dashboard-badges-grid .srf-badge:hover {
    background: var(--srf-primary);
    color: #fff;
}

@container cardBody (width <=500px) {
    .srf-dashboard-badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container cardBody (width <=280px) {
    .srf-dashboard-badges-grid {
        grid-template-columns: 1fr;
    }
}

@container cardBody (width <=200px) {
    .srf-dashboard-tiles {
        grid-template-columns: 1fr;
    }
}

/* ===== DESCRIPTION LIST ===== */
.srf-dl {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
}

.srf-dl__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--srf-space-sm) 0;
    border-bottom: 1px solid var(--srf-border);
}

.srf-dl__row:last-child {
    border-bottom: none;
}

.srf-dl__term {
    color: var(--srf-text-muted);
    font-size: var(--srf-font-14);
}

.srf-dl__value {
    font-weight: 500;
    color: var(--srf-text);
}

/* ===== CHECKBOX GRID ===== */
.srf-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    font-size: var(--srf-font-14);
    cursor: pointer;
    break-inside: avoid;
    margin-bottom: var(--srf-space-xs);
    background: var(--srf-sidebar-bg);
    padding: var(--srf-space-xs) var(--srf-space-sm);
    border-radius: var(--srf-radius-sm);
}

/* ===== LIST ===== */
.srf-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.srf-list__item {
    padding: var(--srf-space-sm) 0;
    border-bottom: 1px solid var(--srf-border);
    color: var(--srf-text);
}

.srf-list__item:last-child {
    border-bottom: none;
}

/* ===== CODE ===== */
.srf-code {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: var(--srf-font-13);
    background: var(--srf-sidebar-bg);
    padding: var(--srf-space-xs) var(--srf-space-sm);
    border-radius: var(--srf-radius-sm);
    color: var(--srf-text);
}

/* ===== FILTER BAR ===== */
.srf-filter-bar {
    display: flex;
    gap: var(--srf-space-md);
    align-items: center;
    flex-wrap: wrap;
}

/* ===== STACK ===== */
.srf-stack {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-lg);
    min-width: 0;
}


/* ===== METRIC VARIANTS ===== */
.srf-metric--warning .srf-metric__value {
    color: var(--srf-warning);
}

/* ===== BUTTON DANGER ===== */
.srf-button--danger {
    background: var(--srf-danger);
    color: #FFFFFF;
    border-color: var(--srf-danger);
}

.srf-button--danger:hover {
    background: #c0392b;
    border-color: #c0392b;
}




/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .srf-layout:not(.srf-layout--public) {
        grid-template-columns: 260px 1fr;
    }
}

@media (max-width: 768px) {
    .srf-layout {
        grid-template-areas:
            "topbar"
            "content";
        grid-template-columns: 1fr;
    }

    .srf-layout__sidebar {
        display: none;
    }

    .srf-layout__content {
        padding: var(--srf-space-md);
    }
}

/* ===== PAGE HEADER ===== */
.srf-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--srf-space-lg);
    flex-wrap: nowrap;
    margin-bottom: var(--srf-space-lg);
}

.srf-page-header__info {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
}

.srf-page-header__title {
    font-size: var(--srf-font-32);
}

.srf-page-header__actions {
    display: flex;
    gap: var(--srf-space-md);
}

.srf-inline-group {
    display: flex;
    gap: var(--srf-space-sm);
    align-items: center;
    flex-wrap: wrap;
}

/* ===== TOOLBAR ===== */
.srf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--srf-space-md);
    flex-wrap: wrap;
    padding: var(--srf-space-md);
    border: 1px solid var(--srf-border);
    background: var(--srf-surface);
    border-radius: var(--srf-radius-md);
}

.srf-toolbar__left {
    display: flex;
    align-items: center;
    gap: var(--srf-space-md);
}

.srf-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--srf-space-md);
}

/* ===== SEARCH INLINE ===== */
.srf-search-inline {
    display: flex;
    gap: var(--srf-space-sm);
}

.srf-search-inline__input {
    padding: var(--srf-space-xs) var(--srf-space-sm);
    font-size: var(--srf-font-14);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    color: var(--srf-text);
    height: 28px;
    width: 100%;
}

.srf-search-inline__input:focus-visible {
    outline: none;
    border-color: var(--srf-primary);
}

/* ===== PILLBAR (sort toggle) ===== */
.srf-pillbar {
    display: flex;
    gap: var(--srf-space-xs);
}

.srf-pill {
    padding: var(--srf-space-xs) var(--srf-space-sm);
    font-size: var(--srf-font-12);
    font-weight: 500;
    color: var(--srf-text-muted);
    background: var(--srf-sidebar-bg);
    border: 1px solid transparent;
    border-radius: var(--srf-radius-sm);
    text-decoration: none;
    transition: all var(--srf-transition-fast);
    min-height: 26px;
}

.srf-pill:hover {
    color: var(--srf-text);
    background: var(--srf-border);
}

.srf-pill--is-active {
    color: var(--srf-primary);
    background: rgba(2, 143, 249, 0.12);
    border-color: rgba(2, 143, 249, 0.3);
}

/* ===== CONTENT LAYOUT ===== */
.srf-content-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--srf-space-lg);
    align-items: start;
}

/* Sidebar on the right: content first in DOM, sidebar second */
.srf-content-layout--sidebar-right {
    grid-template-columns: 1fr 300px;
}

@media (max-width: 1024px) {

    .srf-content-layout,
    .srf-content-layout--sidebar-right {
        grid-template-columns: 1fr;
    }
}

/* ===== FILTERS SIDEBAR ===== */
/* sticky positioning now handled by .srf-sidebar-wrapper */

/* ===== DROPDOWN (global SRF component) ===== */
.srf-dropdown {
    position: relative;
}

.srf-dropdown__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--srf-space-sm);
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    background: var(--srf-bg);
    color: var(--srf-text);
    font-size: var(--srf-font-14);
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.2s;
}

.srf-dropdown__toggle:hover {
    border-color: var(--srf-primary, #4f7df9);
}

/* E6: Active filter indicator */
.srf-dropdown__toggle--active {
    border-color: var(--srf-primary, #4f7df9);
    color: var(--srf-primary, #4f7df9);
}

.srf-dropdown__toggle--active span {
    padding: 0 15px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srf-dropdown__arrow {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.srf-dropdown.is-open .srf-dropdown__arrow {
    transform: rotate(180deg);
}

.srf-dropdown__clear {
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--srf-danger);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
    text-decoration: none;
    border-radius: var(--srf-radius-sm);
    transition: color var(--srf-transition-fast), background var(--srf-transition-fast);
}

.srf-dropdown__clear:hover {
    color: #fff;
    background: var(--srf-danger);
}

.srf-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    background: var(--srf-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.srf-dropdown.is-open .srf-dropdown__menu {
    display: block;
}

/* E3: Search input inside dropdown */
.srf-dropdown__search {
    width: 100%;
    padding: 8px 14px;
    border: none;
    border-bottom: 1px solid var(--srf-border);
    background: var(--srf-bg);
    color: var(--srf-text);
    font-size: var(--srf-font-14);
    outline: none;
}

.srf-dropdown__search::placeholder {
    color: var(--srf-text-muted);
}

.srf-dropdown__item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    color: var(--srf-text);
    font-size: var(--srf-font-14);
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 3px 0 0 0 transparent;
    transition: background 0.15s, box-shadow 0.15s;
}

.srf-dropdown__item:hover,
.srf-dropdown__item--focused {
    background: var(--srf-surface);
    box-shadow: inset 3px 0 0 0 var(--srf-primary);
    font-weight: 600;
}

.srf-dropdown__item.is-active {
    font-weight: 600;
    color: var(--srf-primary, #4f7df9);
    background: rgba(79, 125, 249, 0.06);
}

/* ===== CATEGORY PICKER ===== */
.srf-category-picker__back {
    display: flex;
    align-items: center;
    gap: var(--srf-space-xs);
    width: 100%;
    padding: 8px 14px;
    border: none;
    border-bottom: 1px solid var(--srf-border);
    background: var(--srf-sidebar-bg);
    color: var(--srf-primary);
    font-size: var(--srf-font-13);
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.srf-category-picker__back:hover {
    background: var(--srf-border);
}

.srf-dropdown__item--nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.srf-dropdown__item--nav svg {
    flex-shrink: 0;
    opacity: 0.5;
}

.srf-dropdown__item--parent {
    border-bottom: 1px solid var(--srf-border);
    font-style: italic;
    color: var(--srf-text-muted);
}

.srf-category-picker__result-name {
    display: block;
    font-weight: 500;
}

.srf-category-picker__result-path {
    display: block;
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    margin-top: 2px;
}

.srf-category-picker__empty {
    padding: 16px 14px;
    text-align: center;
    color: var(--srf-text-muted);
    font-size: var(--srf-font-14);
}

/* Search highlight */
.srf-dropdown__menu mark {
    background: color-mix(in srgb, var(--srf-primary) 25%, transparent);
    color: inherit;
    font-weight: 600;
    border-radius: 3px;
    padding: 0 1px;
}

/* Fade transition for cascade drill/back */
[data-category-list],
[data-city-list] {
    transition: opacity 0.15s ease;
}

[data-category-list].is-fading,
[data-city-list].is-fading {
    opacity: 0;
}

/* ===== SIDEBAR WRAPPER ===== */
.srf-sidebar-wrapper {
    /* position: sticky; */
    /* top: calc(56px + var(--srf-space-md)); */
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-lg);
}

@media (max-width: 900px) {
    .srf-sidebar-wrapper {
        position: static;
    }
}

/* ===== ACTIVE FILTERS (TAGS) ===== */
.srf-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--srf-space-sm);
}

.srf-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--srf-space-xs);
    padding: var(--srf-space-xs) var(--srf-space-sm);
    background: rgba(2, 143, 249, 0.12);
    color: var(--srf-primary);
    font-size: var(--srf-font-12);
    font-weight: 500;
    border-radius: var(--srf-radius-sm);
}

.srf-filter-tag__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0;
    font-size: var(--srf-font-16);
    line-height: 1;
    opacity: 0.7;
}

.srf-filter-tag__remove:hover {
    opacity: 1;
}

/* ===== TASK/ITEM CARDS ===== */
.srf-item-list {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-md);
}

.srf-item-card {
    position: relative;
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    padding: var(--srf-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.srf-item-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--srf-border) 90%, var(--srf-text-muted));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.srf-item-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--srf-space-md);
}

.srf-item-card__title {
    font-size: var(--srf-font-18);
    font-weight: 600;
    color: var(--srf-text);
    text-decoration: none;
}

.srf-item-card__title:hover {
    color: var(--srf-primary);
}

.srf-item-card__date {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    white-space: nowrap;
}

.srf-item-card__description {
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.srf-item-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--srf-space-md);
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
}

.srf-item-card__meta-item {
    display: flex;
    align-items: center;
    gap: var(--srf-space-xs);
}

.srf-item-card__meta-item svg {
    opacity: 0.6;
}

.srf-item-card__budget {
    color: var(--srf-success);
    font-weight: 500;
}

.srf-item-card__header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.srf-item-card__author {
    display: inline-flex;
    align-items: center;
    gap: var(--srf-space-sm);
    flex-wrap: wrap;
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
}

.srf-item-card__online-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--srf-radius-full);
    background: var(--srf-border);
    flex-shrink: 0;
}

.srf-item-card__online-dot--active {
    background: var(--srf-success);
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.srf-item-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--srf-space-sm);
}


.srf-item-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--srf-space-md);
    padding-top: var(--srf-space-sm);
    border-top: 1px solid var(--srf-border);
    margin-top: var(--srf-space-xs);
}

.srf-item-card__stats {
    display: flex;
    gap: var(--srf-space-md);
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
}

.srf-item-card__stats>span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.srf-item-card__stats svg {
    opacity: 0.6;
}

/* ===== PROVIDER CARD ===== */
.srf-provider-card {
    position: relative;
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    padding: var(--srf-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-width: 0;
    overflow: hidden;
}

.srf-provider-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--srf-border) 60%, var(--srf-text-muted));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* PRO card — premium top accent + warm glow */
.srf-provider-card--pro,
.srf-item-card--pro {
    overflow: hidden;
    border-color: rgba(212, 160, 23, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.srf-provider-card--pro:hover,
.srf-item-card--pro:hover {
    transform: translateY(-1px);
    border-color: rgba(212, 160, 23, 0.4);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);
}

.srf-provider-card--pro::before,
.srf-item-card--pro::before {
    content: '';
    position: absolute;
    top: 0px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(90deg, #d4a017, #f0c040, #d4a017);
    z-index: 0;
}

.srf-provider-card--pro::after,
.srf-item-card--pro::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: radial-gradient(ellipse at top center, rgba(212, 160, 23, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.dark .srf-provider-card--pro,
.dark .srf-item-card--pro {
    border-color: rgba(240, 192, 64, 0.2);
}

.dark .srf-provider-card--pro:hover,
.dark .srf-item-card--pro:hover {
    border-color: rgba(240, 192, 64, 0.35);
    box-shadow: 0 4px 12px rgba(240, 192, 64, 0.08), 0 1px 4px rgba(0, 0, 0, 0.15);
}

.dark .srf-provider-card--pro::after,
.dark .srf-item-card--pro::after {
    background: radial-gradient(ellipse at top center, rgba(240, 192, 64, 0.06) 0%, transparent 70%);
}

.srf-provider-card__top {
    display: flex;
    gap: var(--srf-space-lg);
}

.srf-provider-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
    overflow: hidden;
}



.srf-provider-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
}

.srf-provider-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--srf-space-sm);
    flex-wrap: wrap;
}

.srf-provider-card__name {
    font-size: var(--srf-font-18);
    font-weight: 600;
    color: var(--srf-text);
    text-decoration: none;
    display: flex;
    gap: var(--srf-space-sm);
}

.srf-provider-card__name:hover {
    color: var(--srf-primary);
}

.srf-provider-card__rating {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    flex-wrap: wrap;
}

.srf-provider-card__rating-value {
    font-weight: 700;
    font-size: var(--srf-font-14);
    color: var(--srf-text);
    background: var(--srf-sidebar-bg);
    padding: 2px 8px;
    border-radius: var(--srf-radius-sm);
    box-shadow: var(--srf-shadow);
}

.srf-provider-card__stars {
    color: var(--srf-warning);
    display: flex;
    gap: 2px;
}

.srf-provider-card__reviews {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
}

.srf-provider-card__positive {
    font-size: var(--srf-font-12);
    color: var(--srf-success);
    font-weight: 500;
}

.srf-provider-card__orders {
    display: flex;
    flex-wrap: wrap;
    gap: var(--srf-space-sm);
}

.srf-provider-card__orders .srf-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--srf-space-xs);
}

.srf-provider-card__categories {
    font-size: var(--srf-font-13);
    color: var(--srf-primary);
    font-weight: 500;
}

.srf-provider-card__location {
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
}

.srf-provider-card__about {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.srf-provider-card__portfolio-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: var(--srf-space-sm);
    overflow: hidden;
    border-radius: var(--srf-radius);
    min-width: 0;
}

.srf-provider-card__portfolio {
    display: flex;
    gap: var(--srf-space-xs);
    position: relative;
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
}

.srf-provider-card__portfolio-item {
    display: block;
    flex-shrink: 0;
    height: 48px;
    /* width: auto; */
    width: 64px;
    border-radius: var(--srf-radius-sm);
    overflow: hidden;
    background: var(--srf-bg);
    border: 1px solid var(--srf-border);
    transition: border-color 0.2s;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.srf-provider-card__portfolio-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
    pointer-events: none;
}

.srf-provider-card__portfolio-item:hover {
    border-color: var(--srf-primary);
}

.srf-provider-card__portfolio-item:hover::after {
    opacity: 1;
}

.srf-provider-card__portfolio-zoom {
    position: absolute;
    bottom: 4px;
    right: 4px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--srf-radius-sm);
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
}

.srf-provider-card__portfolio-item:hover .srf-provider-card__portfolio-zoom {
    opacity: 1;
    transform: scale(1);
}

.srf-provider-card__portfolio-img {
    height: 100%;
    /* width: auto; */
    /* object-fit: contain; */
    width: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 0;
}

.srf-provider-card__portfolio-more {
    display: flex;
    align-items: center;
    font-size: var(--srf-font-14);
    font-weight: 500;
    color: var(--srf-text);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    position: sticky;
    right: 0;
    padding-left: var(--srf-space-sm);
    padding-right: var(--srf-space-md);
    background: var(--srf-surface);
    height: 48px;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
}

.srf-provider-card__portfolio-more::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80px;
    width: 80px;
    background: linear-gradient(to right, transparent, var(--srf-surface));
    pointer-events: none;
}

.srf-provider-card__portfolio-more span {
    border-bottom: 1px dashed var(--srf-text-muted);
    transition: color 0.2s, border-color 0.2s;
    line-height: 1.2;
}

.srf-provider-card__portfolio-more:hover span {
    color: var(--srf-primary);
    border-bottom-color: var(--srf-primary);
}

.srf-provider-card__skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--srf-space-sm);
}

.srf-provider-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--srf-space-sm);
}

.srf-provider-card__services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--srf-space-xs) var(--srf-space-lg);
    font-size: var(--srf-font-13);
}

.srf-provider-card__service {
    display: flex;
    justify-content: space-between;
    gap: var(--srf-space-sm);
    padding: 4px 0;
    border-bottom: 1px dashed var(--srf-border);
    min-width: 0;
}

.srf-provider-card__service-name {
    color: var(--srf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srf-provider-card__service-price {
    color: var(--srf-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.srf-provider-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--srf-space-sm);
}

/* ===== EMPTY STATE ===== */
.srf-empty-state {
    text-align: center;
    padding: var(--srf-space-2xl);
    background: var(--srf-sidebar-bg);
    border-radius: var(--srf-radius-md);
}

.srf-empty-state p {
    margin-bottom: var(--srf-space-md);
}

/* ===== BREADCRUMB LINK ===== */
.srf-breadcrumb__link {
    color: var(--srf-text-muted);
    text-decoration: none;
}

.srf-breadcrumb__link:hover {
    color: var(--srf-primary);
}

/* ===== RATING ===== */
.srf-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--srf-space-xs);
}

.srf-rating__stars {
    display: flex;
    gap: 1px;
}

.srf-rating__star {
    color: var(--srf-border);
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.srf-rating__star--filled {
    color: var(--srf-warning);
}

.srf-rating__star--half {
    color: var(--srf-warning);
    opacity: 0.5;
}

.srf-rating__value {
    font-size: var(--srf-font-14);
    font-weight: 500;
    color: var(--srf-text);
}

/* (pagination styles consolidated above) */

/* ===== RESPONSIVE ===== */



/* Small tablet / Large mobile (600px - 768px) */
@media (max-width: 768px) {

    /* Content layout - Stack vertically */
    .srf-content-layout {
        grid-template-columns: 1fr;
        gap: var(--srf-space-md);
    }



    /* Sidebar wrapper - remove sticky on mobile */
    .srf-sidebar-wrapper {
        position: static;
    }

    /* Page header */
    .srf-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--srf-space-md);
    }

    .srf-page-header__actions {
        width: 100%;
    }

    .srf-page-header__actions .srf-button {
        width: 100%;
    }

    /* Toolbar - Stack */
    .srf-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--srf-space-sm);
    }

    .srf-toolbar__left,
    .srf-toolbar__right {
        width: 100%;
    }

    .srf-toolbar__right {
        flex-direction: column;
        gap: var(--srf-space-sm);
    }

    /* Search inline - Full width */
    .srf-search-inline {
        width: 100%;
    }

    .srf-search-inline__input {
        flex: 1;
    }

    /* Pillbar - Wrap */
    .srf-pillbar {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* Cards */
    .srf-provider-card {
        flex-direction: column;
    }

    /* Grid */
    .srf-grid--cols-3,
    .srf-grid--cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
    .srf-page-header__info h1 {
        font-size: var(--srf-font-28);
    }

    .srf-item-card {
        padding: var(--srf-space-md);
    }

    .srf-item-card__header {
        flex-direction: column;
        gap: var(--srf-space-xs);
    }

    .srf-item-card__footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--srf-space-sm);
    }

    .srf-provider-card__top {
        flex-direction: column;
    }

    .srf-provider-card__footer {
        gap: var(--srf-space-sm);
    }

    .srf-provider-card__footer .srf-text--sm {
        display: none;
    }

    .srf-provider-card__services {
        grid-template-columns: 1fr;
    }

    .srf-pagination {
        flex-direction: column;
        gap: var(--srf-space-sm);
        text-align: center;
    }
}

/* Mobile (max-width: 440px) */
@media (max-width: 440px) {
    .srf-page-header__actions {
        flex-direction: column;
    }

    .srf-button--sm {
        font-size: var(--srf-font-12);
    }

}

/* ===== SIDEBAR CATEGORY NAVIGATION ===== */
.srf-sidebar-categories {
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    padding: var(--srf-space-md);
}

.srf-sidebar-categories__header {
    margin-bottom: var(--srf-space-md);
    padding-bottom: var(--srf-space-sm);
    border-bottom: 1px solid var(--srf-border);
}

.srf-cat-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.srf-cat-nav__item {
    margin: 0;
}

.srf-cat-nav__link {
    display: flex;
    align-items: center;
    gap: var(--srf-space-xs);
    padding: var(--srf-space-xs) var(--srf-space-sm);
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    text-decoration: none;
    border-radius: var(--srf-radius-sm);
    transition: all var(--srf-transition-fast);
    line-height: 1.4;
}

.srf-cat-nav__link:hover {
    color: var(--srf-primary);
    background: rgba(2, 143, 249, 0.06);
}

.srf-cat-nav__link--active {
    color: var(--srf-primary);
    background: rgba(2, 143, 249, 0.1);
    font-weight: 600;
}

.srf-cat-nav__icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex-shrink: 0;
    opacity: 0.7;
}

.srf-cat-nav__item--back .srf-cat-nav__link {
    color: var(--srf-text-muted);
    font-size: var(--srf-font-13);
}

.srf-cat-nav__item--back .srf-cat-nav__link:hover {
    color: var(--srf-primary);
}

.srf-cat-nav__sub {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--srf-space-sm);
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
    border-left: 2px solid var(--srf-border);
    margin-left: var(--srf-space-sm);
}

.srf-cat-nav__sub .srf-cat-nav__link {
    font-size: var(--srf-font-13);
    padding: var(--srf-space-xs) var(--srf-space-sm);
}

/* E2: Count badge */
.srf-cat-nav__count {
    margin-left: auto;
    font-size: var(--srf-font-10);
    font-weight: 500;
    color: var(--srf-text-muted);
    background: var(--srf-sidebar-bg);
    padding: 1px 6px;
    border-radius: var(--srf-radius-sm);
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
}

.srf-cat-nav__link--active .srf-cat-nav__count {
    background: rgba(2, 143, 249, 0.15);
    color: var(--srf-primary);
}

/* E5: Category level markers — unified sizing */
.srf-cat-nav__link--expandable::before,
.srf-cat-nav__link--child::before {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
}

.srf-cat-nav__link--expandable::before {
    content: '+';
    font-weight: 600;
}



.srf-cat-nav__link--expandable:hover::before,
.srf-cat-nav__link--expandable.srf-cat-nav__link--active::before,
.srf-cat-nav__link--child:hover::before,
.srf-cat-nav__link--child.srf-cat-nav__link--active::before {
    color: var(--srf-primary);
}

.srf-cat-nav__link--leaf {
    font-size: var(--srf-font-13);
}

.srf-cat-nav__link--leaf::before {
    content: '–';
    color: var(--srf-text-muted);
    font-size: var(--srf-font-12);
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.srf-cat-nav__link--leaf:hover::before,
.srf-cat-nav__link--leaf.srf-cat-nav__link--active::before {
    color: var(--srf-primary);
}

/* ===== PROFILE HERO ===== */
.srf-profile-hero {
    display: flex;
    gap: var(--srf-space-xl);
    padding: var(--srf-space-xl);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    position: relative;
}

.srf-card .srf-profile-hero {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.srf-profile-hero__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}



.srf-profile-hero__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
}

.srf-profile-hero__name-row {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    flex-wrap: wrap;
}

.srf-profile-hero__name {
    font-size: var(--srf-font-24);
    font-weight: 700;
    color: var(--srf-text);
    margin: 0;
}

.srf-profile-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--srf-space-sm);
    align-items: center;
}

.srf-profile-hero__meta-item {
    display: flex;
    align-items: center;
    gap: var(--srf-space-xs);
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
}

.srf-profile-hero__meta-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


.srf-profile-hero__actions {
    display: flex;
    gap: var(--srf-space-sm);
    margin-top: var(--srf-space-sm);
    flex-wrap: wrap;
}

.srf-profile-hero__rating {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
}

.srf-profile-hero__rating .srf-rating__stars {
    gap: 2px;
}

.srf-profile-hero__rating-value {
    font-size: var(--srf-font-24);
    font-weight: 700;
    color: var(--srf-text);
}

.srf-profile-hero__rating-count {
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
}

/* Stats row (date + views) */
.srf-profile-hero__stats {
    display: flex;
    align-items: center;
    gap: var(--srf-space-md);
    margin-top: var(--srf-space-xs);
    flex-wrap: wrap;
}

.srf-profile-hero__stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
}

/* ===== PROFILE STATS (fixed 3 cols) ===== */
.srf-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--srf-space-lg);
}

.srf-profile-stats__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

.srf-profile-stats__value {
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--srf-primary);
}

.srf-profile-stats__label {
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
}

@media (max-width: 768px) {
    .srf-profile-stats {
        gap: var(--srf-space-md);
    }

    .srf-profile-stats__item {
        padding: var(--srf-space-md) var(--srf-space-xs);
    }

    .srf-profile-stats__value {
        font-size: 1.5rem;
    }

    .srf-profile-stats__label {
        font-size: var(--srf-font-12);
    }
}

/* ===== PROFILE SCORE WIDGET ===== */
/* ===== QUOTE (universal) ===== */
.srf-quote {
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    line-height: 1.5;
    margin: var(--srf-space-md) 0 0 0;
    padding: var(--srf-space-sm) var(--srf-space-md);
    border-left: 3px solid var(--srf-quote-color, var(--srf-primary));
    border-radius: var(--srf-radius-md);
    background: color-mix(in srgb, var(--srf-quote-color, var(--srf-primary)) 8%, transparent);
}

.srf-profile-score__section-title {
    font-size: var(--srf-font-14);
    font-weight: 600;
    color: var(--srf-text);
    margin: 0 0 var(--srf-space-sm) 0;
}

.srf-profile-score__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--srf-space-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
}

.srf-profile-score__item {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
}

.srf-profile-score__item a {
    color: var(--srf-primary);
    text-decoration: none;
}

.srf-profile-score__item a:hover {
    text-decoration: underline;
}

.srf-profile-score__item--done {
    color: var(--srf-success);
}

.srf-profile-score__item--done svg {
    color: var(--srf-success);
}

.srf-profile-score__item--pending {
    color: var(--srf-text-muted);
}

.srf-profile-score__item--pending svg {
    color: var(--srf-text-muted);
}

/* Progress bar (own block, color via --srf-score-color) */
.srf-profile-score__bar {
    height: 12px;
    border: 1px solid var(--srf-score-color, var(--srf-primary));
    border-radius: var(--srf-radius-md);
    background: var(--srf-sidebar-bg);
    overflow: hidden;
}

.srf-profile-score__fill {
    height: 100%;
    background: var(--srf-score-color, var(--srf-primary));
    border-radius: var(--srf-radius-md);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Right column: trust factors */
.srf-profile-score__factors {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-md);
}

.srf-profile-score__factor {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.srf-profile-score__factor-value {
    font-size: var(--srf-font-20, 1.25rem);
    font-weight: 700;
    color: var(--srf-text);
    line-height: 1;
}

.srf-profile-score__factor-value--empty {
    color: var(--srf-text-muted);
}

.srf-profile-score__factor-label {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
}

/* Review summary banner */
.srf-review-summary {
    display: flex;
    align-items: center;
    gap: var(--srf-space-md);
    padding: var(--srf-space-md) var(--srf-space-lg);
    background: var(--srf-sidebar-bg);
    border-radius: var(--srf-radius);
    margin-bottom: var(--srf-space-lg);
    flex-wrap: wrap;
    margin: -24px -24px 24px -24px;
}


.srf-review-summary__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.srf-review-summary__stat--count {
    min-width: 60px;
}

.srf-review-summary__number {
    font-size: var(--srf-font-28);
    font-weight: 700;
    line-height: 1.2;
    color: var(--srf-text);
}

.srf-review-summary__number--accent {
    color: var(--srf-accent);
}

.srf-review-summary__label {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
    margin-top: 2px;
}

.srf-review-summary__divider {
    width: 1px;
    height: 40px;
    background: var(--srf-border);
    flex-shrink: 0;
}

.srf-review-summary__divider--mobile {
    display: none;
}

.srf-review-summary__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: var(--srf-space-xs);
}

.srf-review-summary__detail {
    font-size: var(--srf-font-14);
    color: var(--srf-text);
}

.srf-review-summary__detail strong {
    color: var(--srf-accent);
    font-weight: 700;
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
    .srf-review-summary {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .srf-review-summary__divider--mobile {
        display: block;
        width: 100%;
        height: 1px;
        background: var(--srf-border);
    }

    .srf-review-summary__details {
        width: 100%;
        padding-left: 0;
        align-items: center;
    }
}

/* Container query for review summary inside dashboard cards */
@container cardBody (width <=400px) {
    .srf-review-summary {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .srf-review-summary__divider--mobile {
        display: block;
        width: 100%;
        height: 1px;
        background: var(--srf-border);
    }

    .srf-review-summary__details {
        width: 100%;
        padding-left: 0;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .srf-profile-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .srf-profile-hero__name-row {
        justify-content: center;
    }

    .srf-profile-hero__meta {
        justify-content: center;
    }



    .srf-profile-hero__actions {
        justify-content: center;
    }
}

/* ===== ONLINE BADGE ===== */
.srf-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--srf-font-13);
    color: var(--srf-success);
    font-weight: 500;
}

.srf-online-badge__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--srf-radius-full);
    background: var(--srf-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: srf-pulse 2s infinite;
}

.srf-online-badge--offline {
    color: var(--srf-text-muted);
}

.srf-online-badge--offline .srf-online-badge__dot {
    background: var(--srf-text-muted);
    box-shadow: none;
    animation: none;
}

@keyframes srf-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ===== PORTFOLIO ===== */
.srf-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--srf-space-sm);
}

.srf-portfolio__item {
    display: block;
    position: relative;
    border-radius: var(--srf-radius-sm);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    background: var(--srf-sidebar-bg);
    transition: transform var(--srf-transition-fast), box-shadow var(--srf-transition-fast);
    text-decoration: none;
    color: inherit;
}

.srf-portfolio__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.srf-portfolio__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.srf-portfolio__item:hover .srf-portfolio__img {
    transform: scale(1.05);
}

.srf-portfolio__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--srf-transition-fast);
    display: flex;
    align-items: flex-end;
    padding: var(--srf-space-sm);
}

.srf-portfolio__item:hover .srf-portfolio__overlay {
    opacity: 1;
}

.srf-portfolio__caption {
    color: #fff;
    font-size: var(--srf-font-13);
    font-weight: 500;
}

/* ===== PORTFOLIO PLACEHOLDER (processing / failed) ===== */
.srf-portfolio__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--srf-space-xs);
    width: 100%;
    height: 100%;
    min-height: 120px;
    background: var(--srf-bg);
    border: 2px dashed var(--srf-border);
    border-radius: var(--srf-radius);
    color: var(--srf-text-muted);
}

.srf-portfolio__placeholder-label {
    font-size: var(--srf-font-xs, 0.7rem);
    color: var(--srf-text-muted);
    text-align: center;
    padding: 0 var(--srf-space-xs);
}

.srf-portfolio__placeholder-label--error {
    color: var(--srf-danger);
}


/* ===== SCROLL LOCK (lightbox / modals) ===== */
html.srf-body--no-scroll {
    overflow: hidden;
}

/* ===== LIGHTBOX ===== */
.srf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

.srf-lightbox--is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.srf-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.srf-lightbox__content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading spinner — shown while image is loading */
.srf-lightbox__content::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #fff;
    border-radius: var(--srf-radius-full);
    animation: srf-spin 0.6s linear infinite;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.srf-lightbox--is-loading .srf-lightbox__content::after {
    opacity: 1;
}

.srf-lightbox__img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--srf-radius-md);
    user-select: none;
    transition: opacity 0.15s ease;
    -webkit-user-drag: none;
}

.srf-lightbox__img--hidden {
    opacity: 0 !important;
}

.srf-lightbox--is-loading .srf-lightbox__img {
    opacity: 0.3;
}

.srf-lightbox__close {
    position: absolute;
    top: var(--srf-space-lg);
    right: var(--srf-space-lg);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: var(--srf-radius-full);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: var(--srf-font-24);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--srf-transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.srf-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.srf-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: var(--srf-radius-full);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--srf-transition-fast);
    -webkit-tap-highlight-color: transparent;
}

/* Невидимая область, значительно расширяющая зону клика вокруг кнопки */
.srf-lightbox__nav::before {
    content: '';
    position: absolute;
    top: -150px;
    bottom: -150px;
    left: -80px;
    right: -80px;
}

.srf-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.srf-lightbox__nav--prev {
    left: var(--srf-space-lg);
}

.srf-lightbox__nav--next {
    right: var(--srf-space-lg);
}

.srf-lightbox__footer {
    position: absolute;
    bottom: var(--srf-space-lg);
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--srf-space-md);
    width: 100%;
}

.srf-lightbox__counter {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--srf-font-14);
    background: rgba(0, 0, 0, 0.5);
    padding: var(--srf-space-xs) var(--srf-space-md);
    border-radius: var(--srf-radius-sm);
}

.srf-lightbox__thumbnails {
    position: relative;
    display: flex;
    gap: var(--srf-space-xs);
    width: 100%;
    max-width: 90vw;
    overflow-x: auto;
    padding: 0 var(--srf-space-sm) 4px var(--srf-space-sm);
    box-sizing: border-box;
    scrollbar-width: none;
}

.srf-lightbox__thumbnails::-webkit-scrollbar {
    display: none;
}

.srf-lightbox__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 54px;
    border-radius: var(--srf-radius-sm);
    padding: 0;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.srf-lightbox__thumb--active,
.srf-lightbox__thumb:hover {
    opacity: 1;
}

.srf-lightbox__thumb--active {
    border-color: #ffffff;
}

.srf-lightbox__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* ===== RATING BAR ===== */
.srf-rating-bars {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
}

.srf-rating-bar {
    display: flex;
    align-items: center;
    gap: var(--srf-space-md);
}

.srf-rating-bar__label {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
    min-width: 160px;
    flex-shrink: 0;
}

.srf-rating-bar__track {
    flex: 1;
    height: 8px;
    background: var(--srf-border);
    border-radius: var(--srf-radius-sm);
    overflow: hidden;
}

.srf-rating-bar__fill {
    height: 100%;
    border-radius: var(--srf-radius-sm);
    background: linear-gradient(90deg, var(--srf-primary), #6366f1);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.srf-rating-bar__value {
    font-size: var(--srf-font-14);
    font-weight: 600;
    color: var(--srf-text);
    min-width: 32px;
    text-align: right;
}

@media (max-width: 480px) {
    .srf-rating-bar {
        flex-wrap: wrap;
    }

    .srf-rating-bar__label {
        min-width: 100%;
    }
}

/* ===== REVIEW ITEM (updated) ===== */
.srf-review-item {
    display: flex;
    gap: var(--srf-space-md);
    padding: var(--srf-space-md) 0;
    border-bottom: 1px solid var(--srf-border);
}

.srf-review-item:last-child {
    border-bottom: none;
}



.srf-review-item__content {
    flex: 1;
    min-width: 0;
}

.srf-review-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--srf-space-sm);
}

.srf-review-item__author {
    font-weight: 600;
    color: var(--srf-text);
}

.srf-review-item__date {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
}

.srf-review-item__ratings {
    display: flex;
    gap: var(--srf-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--srf-space-sm);
}

.srf-review-item__rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    background: var(--srf-sidebar-bg);
    padding: 2px 8px;
    border-radius: var(--srf-radius-sm);
}

.srf-review-item__rating-chip strong {
    color: var(--srf-text);
}

.srf-review-item__text {
    font-size: var(--srf-font-14);
    color: var(--srf-text);
    line-height: 1.6;
}

/* Pending review — blur text, no opacity on card */
.srf-review-item--pending .srf-review-item__text {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
    color: var(--srf-text-muted);
}

/* ===== AVATAR UPLOAD ===== */
.srf-avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--srf-space-md);
}

.srf-avatar-upload__preview {
    width: 120px;
    height: 120px;
    border-radius: var(--srf-radius-full);
    overflow: hidden;
    background: var(--srf-sidebar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--srf-text-muted);
    border: 3px dashed var(--srf-border);
    transition: border-color var(--srf-transition-fast), box-shadow var(--srf-transition-fast);
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    outline: none;
}

.srf-avatar-upload__preview:focus-visible {
    box-shadow: 0 0 0 3px rgba(2, 143, 249, 0.35);
    border-color: var(--srf-primary);
}

.srf-avatar-upload__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.srf-avatar-upload__preview--has-image {
    border-style: solid;
    border-color: var(--srf-primary);
}

/* Hover overlay */
.srf-avatar-upload__overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--srf-radius-full);
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--srf-transition-fast);
    pointer-events: none;
}

.srf-avatar-upload__preview:hover .srf-avatar-upload__overlay,
.srf-avatar-upload__preview:focus-visible .srf-avatar-upload__overlay {
    opacity: 1;
}

.srf-avatar-upload__overlay-icon {
    font-size: var(--srf-font-24);
    color: #fff;
    line-height: 1;
}

.srf-avatar-upload__overlay-text {
    font-size: var(--srf-font-12);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Dragover state */
.srf-avatar-upload__preview--dragover {
    border-color: var(--srf-primary);
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(2, 143, 249, 0.2);
}

/* Error state */
.srf-avatar-upload__preview--has-error {
    border-color: var(--srf-danger);
    border-style: solid;
}

.srf-avatar-upload__error {
    font-size: var(--srf-font-13);
    color: var(--srf-danger);
    font-weight: 500;
    text-align: center;
    outline: none;
}

.srf-avatar-upload__hint {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
    text-align: center;
}

.srf-avatar-upload__actions {
    display: flex;
    gap: var(--srf-space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

/* ===== VERTICAL ACCORDION ===== */
.srf-vertical-accordion {
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    overflow: hidden;
}

.srf-vertical-accordion+.srf-vertical-accordion {
    margin-top: -1px;
}

.srf-vertical-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--srf-space-sm) var(--srf-space-md);
    background: var(--srf-sidebar-bg);
    border: none;
    width: 100%;
    cursor: pointer;
    font-size: var(--srf-font-14);
    font-weight: 600;
    color: var(--srf-text);
    transition: background var(--srf-transition-fast);
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.srf-vertical-accordion__header::before {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--progress, 0%);
    background: rgba(2, 143, 249, 0.18);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    pointer-events: none;
}

.srf-vertical-accordion__header:hover {
    background: var(--srf-border);
}

.srf-vertical-accordion__arrow {
    transition: transform var(--srf-transition-fast);
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    display: flex;
    align-items: center;
}

.srf-vertical-accordion--is-open .srf-vertical-accordion__arrow {
    transform: rotate(180deg);
}

.srf-vertical-accordion__body {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--srf-space-sm);
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.srf-vertical-accordion--is-open .srf-vertical-accordion__body {
    padding: var(--srf-space-sm);
}

.srf-vertical-accordion__grid {
    /*display: grid;*/
    /*grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));*/
    /*gap: var(--srf-space-xs);*/
    column-width: 240px;
    column-gap: var(--srf-space-sm);
}

/* Select-all checkbox inside accordion */
.srf-checkbox-label--select-all {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-xs) var(--srf-space-sm);
    margin-bottom: var(--srf-space-xs);
    border-bottom: 1px solid var(--srf-border);
    color: var(--srf-primary);
}



.srf-portfolio-manage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--srf-space-sm);
    margin-top: var(--srf-space-md);
}

.srf-file-upload {
    margin-top: var(--srf-space-md);
}

.srf-portfolio-manage__item {
    position: relative;
    border-radius: var(--srf-radius-sm);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.srf-portfolio-manage__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.srf-portfolio-manage__delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: var(--srf-radius-full);
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--srf-font-14);
    transition: background var(--srf-transition-fast);
    z-index: 3;
}

.srf-portfolio-manage__delete:hover {
    background: rgba(239, 68, 68, 1);
}

/* Lightbox link inside portfolio-manage */
.srf-portfolio-manage__item>a[data-lightbox] {
    display: block;
    width: 100%;
    height: 100%;
}

.srf-portfolio-manage__item>a[data-lightbox] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== PORTFOLIO DRAG & DROP ===== */
[data-portfolio-sortable] [draggable="true"] {
    cursor: grab;
}

[data-portfolio-sortable] [draggable="true"]:active {
    cursor: grabbing;
}

.srf-portfolio-drag--dragging {
    opacity: 0.4;
}

.srf-portfolio-drag--over {
    box-shadow: 0 0 0 2px var(--srf-primary);
    border-radius: var(--srf-radius-sm);
}

.srf-portfolio-drag--saving {
    cursor: wait !important;
    opacity: 0.6;
    pointer-events: none;
}

/* Drag handle icon overlay */
.srf-portfolio__drag-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border-radius: var(--srf-radius-sm);
    transition: opacity var(--srf-transition-fast);
    pointer-events: none;
    z-index: 1;
}

.srf-portfolio__item:hover .srf-portfolio__drag-icon,
.srf-portfolio-manage__item:hover .srf-portfolio__drag-icon {
    opacity: 1;
}

.srf-portfolio__item:hover .srf-portfolio__drag-icon svg,
.srf-portfolio-manage__item:hover .srf-portfolio__drag-icon svg {
    animation: srf-drag-hint 0.8s ease-in-out infinite;
}

@keyframes srf-drag-hint {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* ===== PORTFOLIO BULK SELECT ===== */
.srf-portfolio__check {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--srf-primary);
}

.srf-portfolio-bulk--is-active .srf-portfolio__check {
    display: block;
}

.srf-portfolio-bulk--deleting {
    pointer-events: none;
    opacity: 0.6;
}

.srf-portfolio-bulk__bar {
    display: none;
    align-items: center;
    justify-content: center;
    position: sticky;
    bottom: 0;
    padding: var(--srf-space-sm) var(--srf-space-md);
    background: var(--srf-surface);
    border-top: 1px solid var(--srf-border);
    border-radius: 0 0 var(--srf-radius-sm) var(--srf-radius-sm);
    margin-top: var(--srf-space-sm);
}

/* ===== STAR RATING INPUT ===== */
.srf-star-rating {
    display: flex;
    gap: 4px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.srf-star-rating input[type="radio"] {
    display: none;
}

.srf-star-rating label {
    cursor: pointer;
    color: var(--srf-border);
    transition: transform var(--srf-transition-fast), color var(--srf-transition-fast);
    line-height: 1;
    position: relative;
}

/* Default: show outline, hide filled */
.srf-star-rating__icon--full {
    display: none;
}

.srf-star-rating__icon--empty {
    display: block;
}

/* Selected (checked) state — show filled, hide outline */
.srf-star-rating input[type="radio"]:checked~label {
    color: #f59e0b;
}

.srf-star-rating input[type="radio"]:checked~label .srf-star-rating__icon--empty {
    display: none;
}

.srf-star-rating input[type="radio"]:checked~label .srf-star-rating__icon--full {
    display: block;
}

/* Hover — scale only hovered star, color all siblings */
.srf-star-rating label:hover {
    color: #fff;
    transform: scale(1.4);
}

.srf-star-rating label:hover~label {
    color: #fff;
}

.srf-star-rating label:hover .srf-star-rating__icon--empty,
.srf-star-rating label:hover~label .srf-star-rating__icon--empty {
    display: none;
}

.srf-star-rating label:hover .srf-star-rating__icon--full,
.srf-star-rating label:hover~label .srf-star-rating__icon--full {
    display: block;
}

/* ===== PROFILE TWO-COLUMN LAYOUT (modifier) ===== */
.srf-content-layout--profile {
    grid-template-columns: 1fr 360px;
}

@media (max-width: 1024px) {
    .srf-content-layout--profile {
        grid-template-columns: 1fr;
    }
}

/* ===== DATE SLIDER (order form) ===== */
.srf-date-slider {
    display: flex;
    align-items: center;
    gap: var(--srf-space-xs);
    position: relative;
}

.srf-date-slider__track {
    display: flex;
    gap: var(--srf-space-sm);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding: 4px 0;
}

.srf-date-slider__track::-webkit-scrollbar {
    display: none;
}

.srf-date-slider__arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--srf-radius-sm);
    background: var(--srf-card-bg);
    color: var(--srf-text-muted);
    font-size: 4rem;
    cursor: pointer;
    transition: border-color var(--srf-transition-fast), color var(--srf-transition-fast), background var(--srf-transition-fast);
    line-height: 1;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.srf-date-slider__arrow:hover {
    border-color: var(--srf-primary);
    color: var(--srf-primary);
    background: rgba(0, 143, 248, 0.04);
}

.srf-date-slider__item {
    flex: 0 0 auto;
    min-width: 110px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--srf-space-sm);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-lg);
    cursor: pointer;
    transition:
        border-color var(--srf-transition-fast),
        background var(--srf-transition-fast),
        color var(--srf-transition-fast),
        box-shadow var(--srf-transition-fast);
    text-align: center;
    position: relative;
    user-select: none;
    background: var(--srf-card-bg);
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
}

.srf-date-slider__item:hover {
    border: 3px solid var(--srf-primary);
}

.srf-date-slider__item--selected {
    border: solid 3px var(--srf-primary);
    background: var(--srf-primary);
    color: #fff;
}

.srf-date-slider__item--selected .srf-date-slider__month,
.srf-date-slider__item--selected .srf-date-slider__day,
.srf-date-slider__item--selected .srf-date-slider__weekday {
    color: #fff;
}

.srf-date-slider__item--weekend .srf-date-slider__weekday {
    color: var(--srf-danger);
}

.srf-date-slider__item--selected.srf-date-slider__item--weekend .srf-date-slider__weekday {
    color: #fff;
}

.srf-date-slider__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.srf-date-slider__month {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    font-weight: 400;
}

.srf-date-slider__day {
    font-size: var(--srf-font-28);
    font-weight: 700;
    color: var(--srf-text);
    line-height: 1.1;
}

.srf-date-slider__weekday {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    font-weight: 500;
}

@media (max-width: 768px) {
    .srf-date-slider__item {
        min-width: 100px;
        height: 80px;
    }

    .srf-date-slider__day {
        font-size: var(--srf-font-20);
    }

    .srf-date-slider__month,
    .srf-date-slider__weekday {
        font-size: var(--srf-font-10);
    }
}

@media (max-width: 480px) {
    .srf-date-slider__item {
        min-width: 85px;
        height: 70px;
        padding: var(--srf-space-xs);
    }

    .srf-date-slider__day {
        font-size: var(--srf-font-18);
    }

    .srf-date-slider__arrow {
        width: 28px;
        height: 28px;
        font-size: 3rem;
    }
}

/* ===== TIME PICKER (order form) ===== */
.srf-time-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--srf-space-sm);
}

.srf-time-picker__item {
    flex: 1 1 auto;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--srf-space-sm);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    cursor: pointer;
    transition:
        border-color var(--srf-transition-fast),
        background var(--srf-transition-fast),
        box-shadow var(--srf-transition-fast);
    user-select: none;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.srf-time-picker__item:hover {
    border-color: var(--srf-primary);
    background: rgba(0, 143, 248, 0.04);
}

.srf-time-picker__item--selected {
    border-color: var(--srf-primary);
    background: rgba(0, 143, 248, 0.10);
    box-shadow: 0 0 0 2px rgba(0, 143, 248, 0.20);
}

.srf-time-picker__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.srf-time-picker__label {
    font-size: var(--srf-font-14);
    font-weight: 500;
    color: var(--srf-text);
}

@media (max-width: 480px) {
    .srf-time-picker {
        flex-direction: column;
    }

    .srf-time-picker__item {
        min-width: 0;
    }
}

/* ===== FILE UPLOAD (order form) ===== */
.srf-file-upload__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--srf-space-xs);
    padding: var(--srf-space-xl) var(--srf-space-lg);
    border: 2px dashed var(--srf-border);
    border-radius: var(--srf-radius-md);
    cursor: pointer;
    transition:
        border-color var(--srf-transition-fast),
        background var(--srf-transition-fast);
    text-align: center;
}

.srf-file-upload__zone:hover,
.srf-file-upload__zone--dragover {
    border-color: var(--srf-primary);
    background: rgba(0, 143, 248, 0.04);
}

.srf-file-upload__icon {
    font-size: 2rem;
    opacity: 0.6;
}

.srf-file-upload__text {
    font-size: var(--srf-font-14);
    color: var(--srf-text);
    margin: 0;
}

.srf-file-upload__link {
    color: var(--srf-primary);
    font-weight: 500;
    cursor: pointer;
}

.srf-file-upload__hint {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    margin: 0;
}

.srf-file-upload__input {
    display: none;
}

.srf-file-upload__list {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
    margin-top: var(--srf-space-sm);
}

.srf-file-upload__item {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-sm) var(--srf-space-md);
    background: var(--srf-sidebar-bg);
    border-radius: var(--srf-radius-sm);
    font-size: var(--srf-font-13);
}

.srf-file-upload__item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.srf-file-upload__item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--srf-text);
}

.srf-file-upload__item-size {
    flex-shrink: 0;
    color: var(--srf-text-muted);
    font-size: var(--srf-font-12);
}

.srf-file-upload__item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--srf-text-muted);
    cursor: pointer;
    font-size: var(--srf-font-14);
    padding: 2px;
    line-height: 1;
    border-radius: var(--srf-radius-sm);
    transition: color var(--srf-transition-fast), background var(--srf-transition-fast);
}

.srf-file-upload__item-remove:hover {
    color: var(--srf-danger);
    background: rgba(239, 68, 68, 0.08);
}

.srf-file-upload__item-download {
    flex-shrink: 0;
    text-decoration: none;
    color: var(--srf-text-muted);
    font-size: var(--srf-font-14);
    padding: 2px;
    line-height: 1;
    border-radius: var(--srf-radius-sm);
    transition: color var(--srf-transition-fast), background var(--srf-transition-fast);
}

.srf-file-upload__item-download:hover {
    color: var(--srf-primary);
    background: rgba(59, 130, 246, 0.08);
}

.srf-file-upload__item-name--preview {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.srf-file-upload__item-name--preview:hover {
    color: var(--srf-primary);
}

.srf-file-upload__preview {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    border-radius: var(--srf-radius-sm);
}

.srf-file-upload__preview--open {
    max-height: 300px;
    padding-left: var(--srf-space-md);
    padding-bottom: var(--srf-space-sm);
}

.srf-file-upload__preview img {
    max-width: 200px;
    max-height: 280px;
    border-radius: var(--srf-radius-sm);
    border: 1px solid var(--srf-border);
    object-fit: contain;
}

.srf-file-upload__item-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--srf-sidebar-bg);
    border-radius: var(--srf-radius-sm);
}

.srf-file-upload__item-wrapper .srf-file-upload__item {
    background: transparent;
    border-radius: 0;
}

/* ===== VERIFICATION FILE UPLOAD (modal) ===== */
.srf-file-upload__area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--srf-space-xs);
    padding: var(--srf-space-lg) var(--srf-space-md);
    border: 2px dashed var(--srf-border);
    border-radius: var(--srf-radius-md);
    cursor: pointer;
    transition:
        border-color var(--srf-transition-fast),
        background var(--srf-transition-fast);
    text-align: center;
    min-height: 100px;
}

.srf-file-upload__area:hover,
.srf-file-upload__area--dragover {
    border-color: var(--srf-primary);
    background: rgba(0, 143, 248, 0.04);
}

.srf-file-upload__placeholder {
    color: var(--srf-text-muted);
}

.srf-file-upload__placeholder p {
    margin: 0;
}

/* ===== VERIFICATION SECTION ===== */
.srf-verification {
    margin-bottom: var(--srf-space-lg);
}

/* ===== CONFIDENTIAL MARKER ===== */
.srf-confidential {
    font-size: var(--srf-font-12);
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.7;
}

/* ===== NO-SPIN INPUT (hides number arrows) ===== */
.srf-input--no-spin {
    -moz-appearance: textfield;
    appearance: textfield;
}

.srf-input--no-spin::-webkit-outer-spin-button,
.srf-input--no-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===== PRICE GROUP (order form) ===== */
.srf-price-group {
    display: flex;
    gap: var(--srf-space-md);
    flex-wrap: wrap;
}

.srf-price-group__input {
    max-width: 155px;
}

.srf-price-group__checkbox {
    white-space: nowrap;
    height: 36px;
    border: 1px solid var(--srf-border);
}

/* ===== ORDER DETAILS (show page) ===== */
.srf-order-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.srf-order-detail {
    display: flex;
    gap: var(--srf-space-lg);
    padding: var(--srf-space-sm) 0;
    border-bottom: 1px solid var(--srf-border);
}

.srf-order-detail:last-child {
    border-bottom: none;
}

.srf-order-detail__label {
    flex: 0 0 160px;
    font-size: var(--srf-font-14);
    font-weight: 500;
    color: var(--srf-text-muted);
}

.srf-order-detail__value {
    flex: 1;
    font-size: var(--srf-font-14);
    color: var(--srf-text);
}

.srf-order-detail__value--text {
    white-space: pre-line;
    line-height: 1.6;
}

.srf-order-detail--confidential {
    background: rgba(245, 158, 11, 0.04);
}

@media (max-width: 600px) {
    .srf-order-detail {
        flex-direction: column;
        gap: var(--srf-space-xs);
    }

    .srf-order-detail__label {
        flex: none;
    }
}

/* ===== FILE LIST (show page) ===== */
.srf-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
}

.srf-file-list__item {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-sm) var(--srf-space-md);
    background: var(--srf-sidebar-bg);
    border-radius: var(--srf-radius-sm);
    text-decoration: none;
    color: var(--srf-text);
    font-size: var(--srf-font-13);
    transition: background var(--srf-transition-fast);
}

.srf-file-list__item:hover {
    background: var(--srf-border);
}

.srf-file-list__icon {
    flex-shrink: 0;
}

.srf-file-list__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srf-file-list__size {
    flex-shrink: 0;
    color: var(--srf-text-muted);
    font-size: var(--srf-font-12);
}

/* ===== ACTION BUTTONS (Orders List) ===== */
.srf-action-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.srf-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    background: var(--srf-bg);
    color: var(--srf-text);
    font-size: var(--srf-font-12);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--srf-transition-fast);
    font-family: inherit;
}

.srf-action-btn:hover {
    background: var(--srf-sidebar-bg);
    border-color: var(--srf-text-muted);
}

.srf-action-btn svg,
.srf-action-btn__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.srf-action-btn__label {
    font-size: var(--srf-font-12);
}

.srf-action-btn__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--srf-radius-md);
    background: var(--srf-accent);
    color: #fff;
    font-size: var(--srf-font-10);
    font-weight: 700;
    line-height: 1;
}

.srf-action-btn--success {
    color: var(--srf-success);
    border-color: var(--srf-success);
}

.srf-action-btn--success:hover {
    background: rgba(34, 197, 94, 0.08);
}

.srf-action-btn--danger {
    color: var(--srf-danger);
    border-color: var(--srf-danger);
}

.srf-action-btn--danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* ===== ACTION MENU (universal dropdown) ===== */
.srf-action-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--srf-space-sm);
}

.srf-action-menu__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    background: var(--srf-bg);
    color: var(--srf-text-muted);
    cursor: pointer;
    transition: all var(--srf-transition-fast);
    font-family: inherit;
}

.srf-action-menu__trigger:hover {
    background: var(--srf-sidebar-bg);
    border-color: var(--srf-text-muted);
    color: var(--srf-text);
}

.srf-action-menu__trigger:disabled,
.srf-action-menu__trigger[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.srf-action-menu__trigger svg,
.srf-action-menu__trigger-icon {
    width: 18px;
    height: 18px;
}

/* Highlight button (e.g. «Оставить отзыв» next to trigger) */
.srf-action-menu__highlight {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--srf-success);
    border-radius: var(--srf-radius-sm);
    background: var(--srf-bg);
    color: var(--srf-success);
    cursor: pointer;
    transition: all var(--srf-transition-fast);
    font-family: inherit;
}

.srf-action-menu__highlight:hover {
    background: rgba(34, 197, 94, 0.08);
    border-color: var(--srf-success);
}

.srf-action-menu__highlight:disabled,
.srf-action-menu__highlight[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.srf-action-menu__highlight svg,
.srf-action-menu__highlight-icon {
    width: 14px;
    height: 14px;
}

/* Backdrop (mobile only) */
.srf-action-menu__backdrop {
    display: none;
}

/* Dropdown panel — position:absolute keeps it out of flow when closed;
   JS overrides to position:fixed on open for viewport-aware placement */
.srf-action-menu__panel {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 6px;
    min-width: 160px;
    white-space: nowrap;
    z-index: 9999;
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    box-shadow: var(--srf-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transform-origin: top right;
    transition:
        opacity var(--srf-transition-fast),
        transform var(--srf-transition-fast);
    padding: var(--srf-space-xs) 0;
}

.srf-action-menu--open .srf-action-menu__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Upward animation direction */
.srf-action-menu--up .srf-action-menu__panel {
    transform-origin: bottom right;
}

.srf-action-menu--up:not(.srf-action-menu--open) .srf-action-menu__panel {
    transform: translateY(-4px);
}

.srf-action-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--srf-text);
    font-size: var(--srf-font-13);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--srf-transition-fast);
}

.srf-action-menu__item:hover {
    background: var(--srf-sidebar-bg);
}

.srf-action-menu__item svg,
.srf-action-menu__item-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.srf-action-menu__item-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--srf-radius-md);
    background: var(--srf-accent);
    color: #fff;
    font-size: var(--srf-font-10);
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
}

.srf-action-menu__item--success {
    color: var(--srf-success);
}

.srf-action-menu__item--success:hover {
    background: rgba(34, 197, 94, 0.08);
}

.srf-action-menu__item--danger {
    color: var(--srf-danger);
}

.srf-action-menu__item--danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* Dark theme */
html.dark .srf-action-menu__panel {
    background: var(--srf-surface);
    border-color: var(--srf-border);
}

html.dark .srf-action-menu__item:hover {
    background: var(--srf-sidebar-bg);
}

/* Mobile backdrop */
@media (max-width: 768px) {
    .srf-action-menu--open .srf-action-menu__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9998;
        background: rgba(0, 0, 0, 0.2);
    }

    .srf-action-menu__panel {
        z-index: 9999;
    }
}

/* ===== STATUS DOT (inside action buttons) ===== */
.srf-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--srf-radius-full);
    flex-shrink: 0;
}

.srf-status-dot--active {
    background: var(--srf-success);
}

.srf-status-dot--pulse {
    background: var(--srf-success);
    animation: srf-pulse 2s infinite;
}

/* ===== CTA Banner ===== */
.srf-cta-banner-wrap {
    container: card / inline-size;
}

.srf-cta-banner {
    display: flex;
    align-items: center;
    gap: var(--srf-space-lg);
    padding: var(--srf-space-lg);
    background: color-mix(in srgb, var(--srf-warning) 10%, var(--srf-surface));
    border-radius: var(--srf-radius-md);
    border: solid 1px color-mix(in srgb, var(--srf-warning) 50%, var(--srf-surface));
}

.srf-cta-banner__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.srf-cta-banner__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.srf-cta-banner__text {
    flex: 1;
    font-size: var(--srf-font-28);
    font-weight: 400;
    color: var(--srf-text);
    line-height: 1.3;
}

.srf-cta-banner__text .srf-heading {
    text-wrap: balance;
    margin: 0 0 var(--srf-space-xs) 0;
    font-size: var(--srf-font-28);
    font-weight: 500;
}

.srf-cta-banner__list {
    margin: 0;
    padding-left: var(--srf-space-lg);
    font-size: var(--srf-font-14);
    color: var(--srf-text);
    line-height: 1.6;
}

.srf-cta-banner__button {
    flex-shrink: 0;
    padding: var(--srf-space-sm) var(--srf-space-xl);
    border: 1px solid var(--srf-accent);
    border-radius: var(--srf-radius-md);
    color: var(--srf-accent);
    font-weight: 600;
    font-size: var(--srf-font-16);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--srf-transition-normal), color var(--srf-transition-normal);
}

.srf-cta-banner__button:hover {
    background: var(--srf-accent);
    color: var(--srf-surface);
}

@container card (max-width: 640px) {
    .srf-cta-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: var(--srf-space-md);
        padding: var(--srf-space-md);
    }

    .srf-cta-banner__icon {
        display: none;
    }

    .srf-cta-banner__text .srf-heading {
        font-size: var(--srf-font-24);
    }

    .srf-cta-banner__text {
        font-size: var(--srf-font-24);
    }

    .srf-cta-banner__list {
        padding-left: var(--srf-space-md);
    }

    .srf-cta-banner__button {
        width: 100%;
        text-align: center;
        font-size: var(--srf-font-14);
        padding: var(--srf-space-sm) var(--srf-space-lg);
    }
}

/* ===== FAVORITE BUTTON ===== */
.srf-favorite-btn {
    position: absolute;
    top: 0;
    right: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.35);
    transition:
        color var(--srf-transition-fast),
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

/* Bookmark shape SVG — fills the entire button */
.srf-favorite-btn__shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Heart icon — centered on top of bookmark */
.srf-favorite-btn__icon {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin-top: -4px;
    color: #fff;
    pointer-events: none;
}

/* Hover */
.srf-favorite-btn:hover {
    color: rgba(0, 0, 0, 0.5);
}

/* Active state (favorited — red) */
.srf-favorite-btn--active {
    color: var(--srf-danger);
}

.srf-favorite-btn--active:hover {
    color: #dc2626;
}

/* Click bounce */
.srf-favorite-btn:active {
    transform: scale(0.88);
}

/* Focus visible for keyboard navigation */
.srf-favorite-btn:focus-visible {
    outline: 2px solid var(--srf-primary);
    outline-offset: 4px;
}

/* Busy/loading state */
.srf-favorite-btn[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.7;
}

/* Dark theme adjustments */
html.dark .srf-favorite-btn {
    color: rgba(255, 255, 255, 0.15);
}

html.dark .srf-favorite-btn:hover {
    color: rgba(255, 255, 255, 0.25);
}

html.dark .srf-favorite-btn--active {
    color: var(--srf-danger);
}

html.dark .srf-favorite-btn--active:hover {
    color: #ef5555;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .srf-favorite-btn {
        transition: color var(--srf-transition-fast);
    }

    .srf-favorite-btn:active {
        transform: none;
    }
}

/* ===== HOMEPAGE ===== */
.srf-home {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-2xl);
}

.srf-home__hero {
    text-align: center;
    padding: clamp(var(--srf-space-xl), 5vw, var(--srf-space-3xl)) 0 var(--srf-space-xl);
}

.srf-home__subtitle {
    max-width: 680px;
    margin: var(--srf-space-md) auto var(--srf-space-lg);
    font-size: clamp(16px, 1.5vw, 18px);
}

.srf-home__search {
    justify-content: center;
    margin-bottom: var(--srf-space-lg);
}

.srf-home__search-input {
    max-width: 520px;
}

.srf-home__actions {
    display: flex;
    gap: var(--srf-space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.srf-home__section-title {
    margin-bottom: var(--srf-space-lg);
}

.srf-home__section-desc {
    margin-top: calc(-1 * var(--srf-space-sm));
    margin-bottom: var(--srf-space-lg);
    font-size: var(--srf-font-14);
    max-width: 640px;
}

.srf-home__cities,
.srf-home__popular {
    flex-wrap: wrap;
}

.srf-home__stats {
    text-align: center;
}

.srf-home__cta {
    text-align: center;
}

.srf-home__cta-title {
    margin-bottom: var(--srf-space-sm);
}

.srf-home__cta-text {
    max-width: 540px;
    margin: 0 auto var(--srf-space-lg);
}

/* ── Homepage category grid (3 → 2 → 1) ── */
.srf-grid--home-categories {
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 769px) and (max-width: 1024px) {
    .srf-grid--home-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .srf-grid--home-categories {
        grid-template-columns: 1fr;
    }
}

/* ── Category card ── */
.srf-category-card {
    transition: transform var(--srf-transition-fast), box-shadow var(--srf-transition-fast);
}

.srf-category-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--srf-shadow-md);
}

.srf-category-card__header {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    margin-bottom: var(--srf-space-sm);
}

.srf-category-card__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--srf-primary);
}

.srf-category-card__title {
    text-decoration: none;
    color: var(--srf-text);
    transition: color var(--srf-transition-fast);
}

.srf-category-card__title:hover {
    color: var(--srf-primary);
}

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

.srf-category-card__sub-link {
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    text-decoration: none;
    transition: color var(--srf-transition-fast);
}

.srf-category-card__sub-link:hover {
    color: var(--srf-primary);
}

.srf-category-card__more {
    display: inline-block;
    margin-top: var(--srf-space-sm);
    font-size: var(--srf-font-13);
    color: var(--srf-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--srf-transition-fast);
}

.srf-category-card__more:hover {
    text-decoration: underline;
}

/* ===== STEP CARDS (How it works) ===== */
.srf-grid--steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--srf-space-lg);
}

@media (min-width: 769px) and (max-width: 1024px) {
    .srf-grid--steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .srf-grid--steps {
        grid-template-columns: 1fr;
    }
}

.srf-step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--srf-space-xl);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-lg);
    transition: transform var(--srf-transition-fast), box-shadow var(--srf-transition-fast);
}

.srf-step-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--srf-shadow-md);
}

.srf-step-card__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 5vw, 52px);
    height: clamp(40px, 5vw, 52px);
    border-radius: var(--srf-radius-full);
    background: var(--srf-primary);
    color: #fff;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    margin-bottom: var(--srf-space-md);
    flex-shrink: 0;
}

.srf-step-card__title {
    font-size: clamp(16px, 1.5vw, 18px);
    font-weight: 600;
    color: var(--srf-text);
    margin-bottom: var(--srf-space-xs);
}

.srf-step-card__desc {
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    line-height: 1.5;
}

/* ===== FAQ ACCORDION (card-style, native details/summary) ===== */
.srf-faq {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-md);
}

.srf-faq__item {
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    transition: background var(--srf-transition-fast), box-shadow var(--srf-transition-fast);
}

.srf-faq__item[open] {
    background: var(--srf-sidebar-bg);
    box-shadow: var(--srf-shadow-sm);
}

.srf-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--srf-space-md) var(--srf-space-lg);
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 600;
    color: var(--srf-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color var(--srf-transition-fast);
}

.srf-faq__question::-webkit-details-marker {
    display: none;
}

.srf-faq__question::marker {
    content: '';
}

.srf-faq__icon {
    flex-shrink: 0;
    margin-left: var(--srf-space-md);
    color: var(--srf-text-muted);
    transition: transform var(--srf-transition-fast);
}

.srf-faq__item[open] .srf-faq__icon {
    transform: rotate(180deg);
}

.srf-faq__answer {
    padding: 0 var(--srf-space-lg) var(--srf-space-md);
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    line-height: 1.6;
}

/* ===== PROSE (content pages) ===== */
.srf-prose h2 {
    margin-top: var(--srf-space-lg);
    margin-bottom: var(--srf-space-sm);
}

.srf-prose h2:first-child {
    margin-top: 0;
}

.srf-prose p {
    margin-bottom: var(--srf-space-sm);
    line-height: 1.65;
}

.srf-prose ul,
.srf-prose ol {
    margin-bottom: var(--srf-space-sm);
    padding-left: var(--srf-space-lg);
}

.srf-prose li {
    margin-bottom: var(--srf-space-xs);
    line-height: 1.6;
}

.srf-prose strong {
    font-weight: 600;
    color: var(--srf-text);
}

/* ===== NOTIFICATION BADGE (bell icon) ===== */
.srf-header__icon-btn {
    position: relative;
}

.srf-header__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--srf-radius-full);
    background: var(--srf-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* ===== NOTIFICATION PANEL (slide-in drawer) ===== */
.srf-notification-panel__overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--srf-transition-normal);
}

.srf-notification-panel__overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

.srf-notification-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    width: 380px;
    max-width: 100vw;
    transform: translateX(100%);
    transition: transform var(--srf-transition-normal);
}

.srf-notification-panel--open {
    transform: translateX(0);
}

.srf-notification-panel__drawer {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--srf-surface);
    box-shadow: var(--srf-shadow-lg);
    overflow: hidden;
}

.srf-notification-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--srf-space-md) var(--srf-space-lg);
    border-bottom: 1px solid var(--srf-border);
    flex-shrink: 0;
}

.srf-notification-panel__title {
    font-size: var(--srf-font-16);
    font-weight: 600;
    color: var(--srf-text);
}

.srf-notification-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--srf-text-muted);
    font-size: 20px;
    cursor: pointer;
    border-radius: var(--srf-radius-sm);
    transition: background var(--srf-transition-fast);
}

.srf-notification-panel__close:hover {
    background: var(--srf-sidebar-bg);
    color: var(--srf-text);
}

.srf-notification-panel__actions {
    padding: var(--srf-space-sm) var(--srf-space-lg);
    border-bottom: 1px solid var(--srf-border);
    flex-shrink: 0;
}

.srf-notification-panel__list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.srf-notification-panel__loading,
.srf-notification-panel__empty {
    padding: var(--srf-space-2xl) var(--srf-space-lg);
    text-align: center;
    color: var(--srf-text-muted);
    font-size: var(--srf-font-14);
}

.srf-notification-panel__item {
    display: block;
    padding: var(--srf-space-md) var(--srf-space-lg);
    border-bottom: 1px solid var(--srf-border);
    text-decoration: none;
    color: var(--srf-text);
    transition: background var(--srf-transition-fast);
}

.srf-notification-panel__item:hover {
    background: var(--srf-sidebar-bg);
}

.srf-notification-panel__item--unread {
    border-left: 3px solid var(--srf-primary);
    background: color-mix(in srgb, var(--srf-primary) 4%, var(--srf-surface));
}

.srf-notification-panel__item-header {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    margin-bottom: 2px;
}

.srf-notification-panel__item-title {
    font-size: var(--srf-font-14);
    font-weight: 600;
    color: var(--srf-text);
}

.srf-notification-panel__tag {
    font-size: var(--srf-font-10);
    padding: 1px 6px;
}

.srf-notification-panel__item-body {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
    line-height: 1.4;
    margin-bottom: 4px;
}

.srf-notification-panel__item-time {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    opacity: 0.7;
}

/* Dark theme */
html.dark .srf-notification-panel__item--unread {
    background: color-mix(in srgb, var(--srf-primary) 8%, var(--srf-surface));
}

/* Mobile */
@media (max-width: 480px) {
    .srf-notification-panel {
        width: 100vw;
    }
}

/* ===== SKILLS PICKER ===== */
.srf-skills-picker {
    position: relative;
}

.srf-skills-picker__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--srf-space-sm);
    margin-bottom: var(--srf-space-sm);
}

.srf-skills-picker__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: var(--srf-font-13);
}

.srf-skills-picker__tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    transition: opacity var(--srf-transition-fast);
}

.srf-skills-picker__tag-remove:hover {
    opacity: 1;
}

/* Input uses srf-dropdown__search; this adds full-width */
.srf-skills-picker__input {
    width: 100%;
    border-radius: var(--srf-radius-sm);
    border: 1px solid var(--srf-border);
}

/* "Create" item accent */
.srf-skills-picker__item--create {
    color: var(--srf-primary);
    font-weight: 500;
}

.srf-skills-picker__limit {
    margin-top: var(--srf-space-xs);
}

/* ===== AI GENERATION BUTTON ===== */
.srf-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: none;
    border-radius: var(--srf-radius-sm);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: var(--srf-font-12);
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--srf-transition-fast), background var(--srf-transition-fast);
    position: relative;
    flex-shrink: 0;
}

.srf-ai-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #d97706, #b45309);
}

.srf-ai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: linear-gradient(135deg, #9ca3af, #6b7280);
}

.srf-ai-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.srf-ai-btn__text {
    transition: opacity var(--srf-transition-fast);
}

.srf-ai-btn__remaining {
    font-weight: 400;
    opacity: 0.85;
}

/* Loading state */
.srf-ai-btn--loading {
    pointer-events: none;
}

.srf-ai-btn--loading .srf-ai-btn__text,
.srf-ai-btn--loading .srf-ai-btn__remaining,
.srf-ai-btn--loading svg {
    opacity: 0.4;
}

.srf-ai-btn--loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: srf-ai-spin 0.6s linear infinite;
}

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

/* Cooldown state */
.srf-ai-btn--cooldown {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    cursor: wait;
    pointer-events: none;
}

/* Exhausted (limit = 0) */
.srf-ai-btn--exhausted {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: linear-gradient(135deg, #9ca3af, #6b7280);
}

/* Inline error container */
.srf-ai-error {
    color: var(--srf-danger);
    font-size: var(--srf-font-12);
    line-height: 1.4;
    margin-top: var(--srf-space-xs);
}

/* Dark theme */
html.dark .srf-ai-btn:disabled,
html.dark .srf-ai-btn--cooldown,
html.dark .srf-ai-btn--exhausted {
    background: linear-gradient(135deg, #4b5563, #374151);
}

/* ===== PRO SUBSCRIPTION PAGE ===== */

/* Hero card — PRO active */
.srf-card--pro-hero {
    position: relative;
    overflow: hidden;
    border-color: rgba(212, 160, 23, 0.25);
    background: linear-gradient(135deg, rgba(180, 155, 100, 0.08), rgba(180, 155, 100, 0.02));
}

.srf-card--pro-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(90deg, #d4a017, #f0c040, #d4a017);
    z-index: 1;
}

.srf-card--pro-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: radial-gradient(ellipse at top center, rgba(212, 160, 23, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.dark .srf-card--pro-hero {
    border-color: rgba(240, 192, 64, 0.2);
    background: radial-gradient(ellipse at top center, rgba(212, 160, 23, 0.05) 0%, transparent 70%);
}

.dark .srf-card--pro-hero::after {
    background: radial-gradient(ellipse at top center, rgba(240, 192, 64, 0.08) 0%, transparent 70%);
}

/* Hero layout */
.srf-sub-hero__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--srf-space-md);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.srf-sub-hero__title-row {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
}

.srf-sub-hero__info {
    position: relative;
    z-index: 1;
}

.srf-sub-hero__meta {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
    position: relative;
    z-index: 1;
}

/* Subscription indicator */
.srf-sub-indicator {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
    position: relative;
    z-index: 1;
}

.srf-sub-indicator__bar {
    width: 100%;
    height: 6px;
    background: var(--srf-border);
    border-radius: var(--srf-radius-full);
    overflow: hidden;
}

.srf-sub-indicator__fill {
    height: 100%;
    border-radius: var(--srf-radius-full);
    transition: width 0.4s ease;
}

.srf-sub-indicator__fill--success {
    background: var(--srf-success);
}

.srf-sub-indicator__fill--warning {
    background: var(--srf-warning);
}

.srf-sub-indicator__fill--danger {
    background: var(--srf-danger);
}

.srf-sub-indicator__text {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
}

/* Alerts */
.srf-alert {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-sm) var(--srf-space-md);
    border-radius: var(--srf-radius-md);
    font-size: var(--srf-font-14);
    line-height: 1.5;
}

.srf-alert svg {
    flex-shrink: 0;
}

.srf-alert--warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--srf-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.srf-alert--danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--srf-danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.dark .srf-alert--warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.15);
}

.dark .srf-alert--danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.15);
}

/* ===== PLAN SELECTOR PILLBAR ===== */
.srf-plan-section {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-lg);
}

.srf-plan-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--srf-space-lg);
}

.srf-plan-selector__btn {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--srf-space-sm) var(--srf-space-md);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    min-width: 0;
    flex: 1;
}

.srf-plan-selector__btn:hover {
    border-color: rgba(212, 160, 23, 0.4);
}

.srf-plan-selector__btn--active {
    overflow: hidden;
    border: 1px solid rgba(212, 160, 23, 0.25);
    background: radial-gradient(ellipse at top center, rgba(212, 160, 23, 0.05) 0%, transparent 70%);
}

.srf-plan-selector__btn--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(90deg, #d4a017, #f0c040, #d4a017);
    z-index: 1;
}

.dark .srf-plan-selector__btn--active {
    border-color: rgba(240, 192, 64, 0.2);
    background: radial-gradient(ellipse at top center, rgba(240, 192, 64, 0.06) 0%, transparent 70%);
}

.srf-plan-selector__btn--active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: radial-gradient(ellipse at top center, rgba(212, 160, 23, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.dark .srf-plan-selector__btn--active::after {
    background: radial-gradient(ellipse at top center, rgba(240, 192, 64, 0.06) 0%, transparent 70%);
}

.srf-plan-selector__label {
    font-size: var(--srf-font-13);
    font-weight: 600;
    color: var(--srf-text);
    white-space: nowrap;
}

.srf-plan-selector__price {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    white-space: nowrap;
}

.srf-plan-selector__saving {
    font-size: var(--srf-font-11);
    font-weight: 600;
    color: var(--srf-success);
}

@media (max-width: 768px) {

    .srf-plan-selector {
        gap: var(--srf-space-md);
    }

    .srf-plan-selector__btn {
        padding: var(--srf-space-xs) var(--srf-space-sm);
        flex: 0 0 calc(33.333% - var(--srf-space-md) * 2 / 3);
    }

    .srf-plan-selector__label {
        font-size: var(--srf-font-12);
    }
}

/* ===== BENEFITS — Comparison cards (FREE vs PRO) ===== */
.srf-benefits__compare {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--srf-space-lg);
}

.srf-benefits__plan-card {
    position: relative;
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    padding: var(--srf-space-lg);
    display: flex;
    flex-direction: column;
}

.srf-benefits__plan-card--pro {
    overflow: hidden;
    border-color: rgba(212, 160, 23, 0.25);
    background: linear-gradient(135deg, rgba(180, 155, 100, 0.06), rgba(180, 155, 100, 0.01));
}

.srf-benefits__plan-card--pro::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(90deg, #d4a017, #f0c040, #d4a017);
    z-index: 1;
}

.srf-benefits__plan-card--pro::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: radial-gradient(ellipse at top center, rgba(212, 160, 23, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.dark .srf-benefits__plan-card--pro {
    border-color: rgba(240, 192, 64, 0.2);
    background: radial-gradient(ellipse at top center, rgba(212, 160, 23, 0.05) 0%, transparent 70%);
}

.dark .srf-benefits__plan-card--pro::after {
    background: radial-gradient(ellipse at top center, rgba(240, 192, 64, 0.06) 0%, transparent 70%);
}

/* Corner pill badge */
.srf-corner-badge {
    position: absolute;
    top: var(--srf-space-lg);
    right: var(--srf-space-lg);
    padding: 4px 12px;
    background: var(--srf-success);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.srf-benefits__plan-header {
    margin-bottom: var(--srf-space-md);
}

.srf-benefits__plan-price {
    display: flex;
    align-items: baseline;
    gap: var(--srf-space-sm);
    margin-bottom: var(--srf-space-md);
}

.srf-benefits__plan-amount {
    font-size: var(--srf-font-36, 2.25rem);
    font-weight: 700;
    color: var(--srf-text);
    line-height: 1;
}

.srf-benefits__plan-currency {
    font-size: var(--srf-font-16);
    color: var(--srf-text-muted);
    font-weight: 400;
}

.srf-benefits__plan-period {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
}

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

.srf-benefits__plan-item {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    font-size: var(--srf-font-14);
    color: var(--srf-text);
}

.srf-benefits__plan-item--active svg {
    color: var(--srf-success);
}

.srf-benefits__plan-item--disabled {
    color: var(--srf-text-muted);
    opacity: 0.55;
}

.srf-benefits__plan-item--disabled svg {
    color: var(--srf-text-muted);
}

.srf-benefits__plan-btn {
    margin-top: var(--srf-space-lg);
    width: 100%;
}



@media (max-width: 600px) {
    .srf-benefits__compare {
        grid-template-columns: 1fr;
    }

    .srf-benefits__plan-card--pro {
        order: -1;
    }
}


/* ===== SUBSCRIPTION TABLE: MOBILE CARDS ===== */
.srf-sub-table-desktop {
    display: block;
    overflow-x: auto;
}

.srf-sub-table-mobile {
    display: none;
}

.srf-sub-mobile-card {
    background: var(--srf-bg);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    padding: var(--srf-space-sm) var(--srf-space-md);
    margin-bottom: var(--srf-space-sm);
}

.srf-sub-mobile-card:last-child {
    margin-bottom: 0;
}

.srf-sub-mobile-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--srf-space-xs) 0;
    font-size: var(--srf-font-14);
    gap: var(--srf-space-md);
}

.srf-sub-mobile-card__row:not(:last-child) {
    border-bottom: 1px solid var(--srf-border);
}

.srf-sub-mobile-card__label {
    color: var(--srf-text-muted);
    font-size: var(--srf-font-13);
    font-weight: 500;
}

@media (max-width: 768px) {
    .srf-sub-table-desktop {
        display: none;
    }

    .srf-sub-table-mobile {
        display: block;
    }

    .srf-card>.srf-sub-table-mobile {
        padding: var(--srf-space-md);
    }
}

/* ===== ACTIVITY LOG ===== */
.srf-activity-log-item {
    position: relative;
    padding: var(--srf-space-sm) 0;
}

.srf-activity-log-item:not(:last-child) {
    border-bottom: 1px solid var(--srf-border);
}

.srf-activity-log-item--admin::before {
    content: '';
    position: absolute;
    left: calc(var(--srf-space-sm) * -1);
    top: var(--srf-space-sm);
    bottom: var(--srf-space-sm);
    width: 2px;
    background-color: var(--srf-primary);
    border-radius: 2px;
}

/* ===== PAYMENT PICKER (modal) ===== */
.srf-payment-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--srf-space-sm);
    margin-bottom: var(--srf-space-lg);
}

.srf-payment-picker__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.srf-payment-picker__option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--srf-space-sm) var(--srf-space-xs);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    text-align: center;
}

.srf-payment-picker__option:hover {
    border-color: rgba(212, 160, 23, 0.4);
}

.srf-payment-picker__option--checked {
    overflow: hidden;
    border-color: rgba(212, 160, 23, 0.5);
    background: radial-gradient(ellipse at top center, rgba(212, 160, 23, 0.06) 0%, transparent 70%);
    box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.15);
}

.srf-payment-picker__option--checked::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(90deg, #d4a017, #f0c040, #d4a017);
    z-index: 1;
}

.dark .srf-payment-picker__option--checked {
    border-color: rgba(240, 192, 64, 0.3);
    background: radial-gradient(ellipse at top center, rgba(240, 192, 64, 0.08) 0%, transparent 70%);
}

.srf-payment-picker__label {
    font-size: var(--srf-font-13);
    font-weight: 600;
    color: var(--srf-text);
    white-space: nowrap;
}

.srf-payment-picker__price {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
    white-space: nowrap;
}

/* Payment total */
.srf-payment-total {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
    margin-top: var(--srf-space-lg);
    font-size: var(--srf-font-16);
    font-weight: 600;
    color: var(--srf-text);
}

.srf-payment-total__usd {
    font-size: var(--srf-font-13);
    font-weight: 400;
    color: var(--srf-text-muted);
}

@media (max-width: 768px) {
    .srf-payment-picker {
        grid-template-columns: repeat(3, 1fr);
    }

    .srf-payment-picker__option {
        padding: var(--srf-space-xs);
    }

    .srf-payment-picker__label {
        font-size: var(--srf-font-12);
    }
}

/* ===== BALANCE PAGE ===== */

/* Hero card */
.srf-balance-hero__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--srf-space-lg);
    flex-wrap: wrap;
}

.srf-balance-hero__info {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
}

.srf-balance-hero__actions {
    display: flex;
    flex-direction: row;
    gap: var(--srf-space-md);
}

.srf-balance-hero__amount {
    display: flex;
    align-items: baseline;
    gap: var(--srf-space-sm);
}

.srf-balance-hero__value {
    font-size: var(--srf-font-36, 2.25rem);
    font-weight: 700;
    color: var(--srf-text);
    line-height: 1.2;
}

.srf-balance-hero__currency {
    font-size: var(--srf-font-16);
    color: var(--srf-text-muted);
    font-weight: 400;
}

/* Pending deposits */
.srf-balance-pending {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--srf-space-sm);
    padding: var(--srf-space-sm) 0;
    flex-wrap: wrap;
}

.srf-balance-pending:not(:last-child) {
    border-bottom: 1px solid var(--srf-border);
}

.srf-balance-pending__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.srf-balance-pending__status {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
}

/* Amount coloring */
.srf-balance-amount--plus {
    color: var(--srf-success);
    font-weight: 600;
}

.srf-balance-amount--minus {
    color: var(--srf-danger);
    font-weight: 600;
}

.srf-balance-amount--hold {
    color: var(--srf-text-muted);
    font-weight: 600;
}

/* ===== DEPOSIT MODAL ===== */
.srf-balance-deposit {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-md);
}

.srf-balance-deposit__subtitle {
    font-size: var(--srf-font-14);
    color: var(--srf-text-muted);
    margin: 0;
    line-height: 1.4;
}

.srf-balance-deposit__field {
    position: relative;
    display: flex;
    align-items: center;
}

.srf-balance-deposit__input {
    width: 100%;
    font-size: var(--srf-font-24, 1.5rem);
    font-weight: 600;
    color: var(--srf-text);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    padding: var(--srf-space-sm) var(--srf-space-md);
    padding-right: 64px;
    outline: none;
    transition: border-color 0.2s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}

.srf-balance-deposit__input::-webkit-outer-spin-button,
.srf-balance-deposit__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.srf-balance-deposit__input:focus {
    border-color: var(--srf-primary);
}

.srf-balance-deposit__input::placeholder {
    color: var(--srf-text-muted);
    opacity: 0.4;
    font-weight: 400;
}

.srf-balance-deposit__currency {
    position: absolute;
    right: var(--srf-space-md);
    font-size: var(--srf-font-16);
    font-weight: 400;
    color: var(--srf-text-muted);
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

.srf-balance-deposit__chips {
    display: flex;
    gap: var(--srf-space-sm);
}

.srf-balance-deposit__chip {
    flex: 1;
    padding: var(--srf-space-xs);
    font-size: var(--srf-font-16);
    font-weight: 600;
    color: var(--srf-text-muted);
    background: transparent;
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.srf-balance-deposit__chip:hover {
    border-color: var(--srf-primary);
    color: var(--srf-primary);
}

.srf-balance-deposit__chip--active {
    background: color-mix(in srgb, var(--srf-primary) 10%, var(--srf-surface));
    border-color: var(--srf-primary);
    color: var(--srf-primary);
}

.srf-balance-deposit__helpers {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
}

.srf-balance-deposit__helper {
    font-size: var(--srf-font-13);
    color: var(--srf-text-muted);
}

/* ===== PAYMENT METHOD SELECTOR (subscription modal) ===== */
.srf-payment-method {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
    margin-top: var(--srf-space-lg);
}

.srf-payment-method__title {
    font-size: var(--srf-font-13);
    font-weight: 600;
    color: var(--srf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.srf-payment-method__options {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-sm);
}

.srf-payment-method__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.srf-payment-method__option {
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-xs);
    padding: var(--srf-space-sm) var(--srf-space-md);
    background: var(--srf-surface);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.srf-payment-method__option:hover {
    border-color: var(--srf-primary);
}

.srf-payment-method__option--checked {
    border-color: var(--srf-primary);
    background: color-mix(in srgb, var(--srf-primary) 5%, var(--srf-surface));
}

.srf-payment-method__option--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.srf-payment-method__option--disabled:hover {
    border-color: var(--srf-border);
}

.srf-payment-method__label {
    display: flex;
    align-items: center;
    gap: var(--srf-space-sm);
    font-size: var(--srf-font-14);
    font-weight: 500;
    color: var(--srf-text);
}

.srf-payment-method__hint {
    color: var(--srf-danger);
    font-size: var(--srf-font-12);
    padding-left: calc(16px + var(--srf-space-sm));
    margin-top: 2px;
}

.srf-payment-method__hint a {
    color: var(--srf-primary);
    text-decoration: underline;
}

.srf-payment-method__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.srf-payment-method__name {
    font-size: var(--srf-font-14);
    font-weight: 600;
    color: var(--srf-text);
}

.srf-payment-method__desc {
    font-size: var(--srf-font-12);
    color: var(--srf-text-muted);
}

.srf-payment-method__desc--warn {
    color: var(--srf-danger);
}

.srf-payment-method__desc--warn a {
    color: var(--srf-primary);
    text-decoration: underline;
}

.srf-payment-total__balance {
    font-size: var(--srf-font-13);
    font-weight: 400;
    color: var(--srf-success);
}

/* Dark theme adjustments */
.dark .srf-payment-method__option--checked {
    background: color-mix(in srgb, var(--srf-primary) 8%, var(--srf-surface));
}

@media (max-width: 480px) {
    .srf-balance-hero__value {
        font-size: var(--srf-font-28, 1.75rem);
    }

    .srf-balance-deposit__chips {
        gap: var(--srf-space-xs);
    }
}

/* ===== WALLET ICON (coin + network badge) ===== */
.srf-wallet-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.srf-wallet-icon__coin {
    display: block;
    border-radius: var(--srf-radius-full);
}

.srf-wallet-icon__network {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: block;
    border-radius: var(--srf-radius-full);
    border: 2px solid var(--srf-surface);
}

/* ===== WALLET FORM (account settings) ===== */
.srf-wallet-form {
    display: flex;
    gap: var(--srf-space-md);
    align-items: center;
}

.srf-wallet-form__address {
    flex: 1;
    min-width: 0;
}

.srf-wallet-form__actions {
    display: flex;
    gap: var(--srf-space-md);
    align-items: center;
    flex-shrink: 0;
}

.srf-wallet-form__actions input {
    width: 160px;
}

@media (max-width: 768px) {
    .srf-wallet-form {
        flex-wrap: wrap;
    }

    .srf-wallet-form__address {
        flex: 0 0 100%;
    }

    .srf-wallet-form__actions {
        flex: 1;
    }

    .srf-wallet-form__actions input {
        flex: 1;
    }
}

/* ===== ADMIN FINANCE PAGE ===== */

/* Summary metrics row */
.srf-finance-summary {
    margin-bottom: var(--srf-space-lg);
}

.srf-finance-metric {
    text-align: center;
    padding: var(--srf-space-lg);
}

/* Period filter card */
.srf-finance-period {
    margin-bottom: var(--srf-space-lg);
}

/* Filter form */
.srf-finance-filter {
    display: flex;
    gap: var(--srf-space-md);
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: var(--srf-space-lg);
}

.srf-finance-filter__date {
    width: 160px;
}

/* Source breakdown cards */
.srf-finance-source {
    padding: var(--srf-space-sm) var(--srf-space-md);
    border: 1px solid var(--srf-border);
    border-radius: var(--srf-radius-md);
}

.srf-finance-source--total {
    border: 2px solid var(--srf-primary);
    background: var(--srf-sidebar-bg);
}

.srf-finance-source__title {
    font-weight: 600;
    margin-bottom: var(--srf-space-xs);
}

.srf-finance-source__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--srf-success);
}

.srf-finance-source__value--neutral {
    color: var(--srf-text);
}

/* Journal header */
.srf-finance-journal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--srf-space-sm);
}

.srf-finance-journal__actions {
    display: flex;
    gap: var(--srf-space-sm);
    align-items: center;
}

/* Filter tabs */
.srf-finance-tabs {
    display: flex;
    gap: var(--srf-space-sm);
    flex-wrap: wrap;
    padding: var(--srf-space-lg) var(--srf-space-lg) 0 var(--srf-space-lg);
    margin-bottom: var(--srf-space-lg);
}

/* Table rows */
.srf-finance-row {
    cursor: pointer;
}

/* Expandable details row */
.srf-finance-details-row {
    background: var(--srf-bg);
}

.srf-finance-details-cell {
    padding: var(--srf-space-md) var(--srf-space-lg);
}

.srf-finance-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--srf-space-sm);
}

/* Amount coloring */
.srf-finance-amount--positive {
    font-weight: 600;
    color: var(--srf-success);
}

.srf-finance-amount--negative {
    font-weight: 600;
    color: var(--srf-danger);
}

/* Badge links (tabs) */
.srf-finance-badge-link {
    text-decoration: none;
    cursor: pointer;
}

/* Empty state padding */
.srf-finance-empty {
    padding: var(--srf-space-md) 0;
}

@media (max-width: 768px) {
    .srf-finance-summary.srf-grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--srf-space-md);
    }

    .srf-finance-metric {
        padding: var(--srf-space-md);
    }

    .srf-finance-metric .srf-metric__value {
        font-size: var(--srf-font-18, 1.125rem);
    }

    .srf-finance-metric .srf-metric__label {
        font-size: var(--srf-font-12);
    }

    .srf-finance-tabs {
        margin-bottom: 0;
        padding: var(--srf-space-md) var(--srf-space-md) 0 var(--srf-space-md);
    }

    .srf-finance-filter {
        flex-direction: column;
        align-items: stretch;
    }

    .srf-finance-filter__date {
        width: 100%;
    }
}

/* ===== TEXT EXPANDER ===== */
.srf-text-expander {
    position: relative;
    width: 100%;
}

.srf-text-expander__content {
    overflow: hidden;
    position: relative;
}

.srf-text-expander__content--collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 15;
    line-clamp: 15;
}

.srf-text-expander__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--srf-bg));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* If inside a regular card with surface bg */
.srf-card__body .srf-text-expander__fade {
    background: linear-gradient(to bottom, transparent, var(--srf-surface));
}

.srf-sub-mobile-card .srf-text-expander__fade {
    background: linear-gradient(to bottom, transparent, var(--srf-bg));
}

.srf-text-expander__btn {
    display: inline-flex;
    margin-top: var(--srf-space-sm);
    font-size: var(--srf-font-14);
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--srf-primary);
}

.srf-text-expander__btn:hover {
    text-decoration: underline;
}

/* ===== WORKSPACE GRID ===== */
.srf-ws-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--srf-space-lg);
    align-items: start;
    margin-top: var(--srf-space-lg);
}

@media (min-width: 1025px) {
    .srf-ws-grid--has-sidebar {
        grid-template-columns: 1fr 420px;
    }
}

.srf-ws-grid__left-top {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-lg);
}

.srf-ws-grid__left-bottom {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--srf-space-lg);
}

.srf-ws-grid__sidebar {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(56px + var(--srf-space-lg));
}

@media (min-width: 1025px) {
    .srf-ws-grid__sidebar {
        /*
         * Базовая высота на начальном экране (Вариант 1).
         * Гарантирует, что чат помещается во вьюпорт до любой прокрутки.
         */
        max-height: min(760px, calc(100svh - 226px));
        transition: max-height 0.2s ease-out;
        display: flex;
        flex-direction: column;
    }

    /* Когда сайдбар прилип к верху экрана (добавляется через JS) */
    .srf-ws-grid__sidebar.is-stuck {
        /* Высота когда прокрутили (Вариант 2), использует всё доступное место */
        max-height: min(760px, calc(100svh - 104px));
    }

    /* Allow the card inside sidebar to fill available viewport height */
    .srf-ws-grid__sidebar>.srf-card {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .srf-ws-grid__sidebar>.srf-card>.srf-card__body,
    .srf-ws-grid__sidebar .srf-qa-chat {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Override default max-height on messages to fill sidebar */
    .srf-ws-grid__sidebar .srf-qa-chat__messages {
        max-height: none;
        flex: 1;
        min-height: 0;
    }

    .srf-ws-grid__sidebar .srf-card__body {
        padding: 0;
    }

    .srf-ws-grid__sidebar .srf-qa-chat {
        --srf-qa-chat-bg: var(--srf-surface);
        /* Use base bg color in sidebar context */
        background: var(--srf-qa-chat-bg);
        border: none;
        border-radius: 0;
        padding: var(--srf-space-md);
    }

    /* Desktop workspace chat is never trapped beneath the page, keep it unlocked */
    .srf-ws-grid__sidebar .srf-qa-chat[data-scroll-locked="1"] .srf-qa-chat__messages {
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}

@media (max-width: 1024px) {
    .srf-ws-grid {
        grid-template-columns: 1fr;
    }

    .srf-ws-grid__left-top {
        grid-column: 1;
        grid-row: 1;
    }

    .srf-ws-grid__sidebar {
        grid-column: 1;
        grid-row: 2;
        position: static;
    }

    .srf-ws-grid__sidebar .srf-qa-chat {
        margin-top: -16px;
    }

    .srf-ws-grid__left-bottom {
        grid-column: 1;
        grid-row: 3;
    }
}