@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');
:root {
    /* Pixel-matched dark UI */
    --bg-primary: #333333;
    --bg: var(--bg-primary);
    --bg-secondary: #202020;
    --bg-tertiary: #2a2a2a;
    
    /* Logo-inspired white gradient: cool white → warm white */
    --text-primary: #ffffff;
    --text-primary-cool: #f0f4ff; /* Cool white with blue tint (from logo) */
    --text-primary-warm: #fff8f0; /* Warm white (from logo) */
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --border-color: #333333;
    
    /* Logo-inspired accent colors from dark gradient background */
    /* Dark blue from logo gradient (left side) */
    --accent-blue: #1a2332; /* Dark blue from logo background */
    --accent-blue-hover: #253447;
    --accent-blue-light: rgba(26, 35, 50, 0.4);
    
    /* Warm dark brown from logo gradient (right side) - subtle, no red */
    --accent-warm: #2a1f1f; /* Dark warm brown from logo */
    --accent-warm-light: rgba(42, 31, 31, 0.3);
    
    /* Status colors */
    --accent-green: #4caf50;
    --accent-yellow: #ffc107;
    
    --sidebar-width: 300px;
    --top-bar-height: 56px;
    /* Centered app layout like on the reference screenshot */
    --layout-max: 1400px;
    --layout-padding: 40px;
    --radius: 8px;
    --btn-radius: 8px;
    --btn-font-weight: 600;

    /* Unified interaction tokens */
    --ease: cubic-bezier(.2,.8,.2,1);
    --t-fast: 140ms;
    --t-med: 220ms;

    /* Inline icon assets */
    --icon-arrow-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b0b0b0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22/%3E%3C/svg%3E");
    --icon-check-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234caf50%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8.5%2012.5l2.5%202.5%204.5-5.5%22/%3E%3C/svg%3E");
    --icon-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b0b0b0%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3C/svg%3E");
    --icon-minus-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b0b0b0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2012h8%22/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012l4%204%2010-10%22/%3E%3C/svg%3E");
    --icon-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b0b0b0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v5l3%202%22/%3E%3C/svg%3E");
    --icon-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b0b0b0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%2010v6%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%221%22/%3E%3C/svg%3E");
    --focus-ring: 0 0 0 3px rgba(26, 35, 50, 0.4);
    --shadow-sm: 0 8px 18px rgba(0,0,0,0.28);
    --shadow-md: 0 18px 50px rgba(0,0,0,0.45);
    
    /* Logo-inspired text gradient */
    --text-gradient: linear-gradient(135deg, var(--text-primary-cool), var(--text-primary-warm));
}

/*
  Native form controls (select / date etc.) in dark UI.
  Some browsers ignore <option> styling unless color-scheme is set.
*/
html{
    color-scheme: dark;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Roboto', sans-serif;
    background-color: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body::before,
body::after {
    content: none;
}

/* Улучшенный фон сайта с анимированным градиентом */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(26, 35, 50, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(42, 31, 31, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(74, 158, 255, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, #1f1f1f 0%, #1a1a1a 50%, #1f1f1f 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: backgroundShift 20s ease infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes backgroundShift {
    0%, 100% {
        background-position: 0% 0%, 100% 100%, 50% 50%, 0% 0%;
    }
    50% {
        background-position: 100% 50%, 0% 0%, 0% 100%, 0% 0%;
    }
}

/* Дополнительный слой с частицами (опционально) */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.05), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(74, 158, 255, 0.05), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.03), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(74, 158, 255, 0.03), transparent),
        radial-gradient(2px 2px at 90% 40%, rgba(255, 255, 255, 0.04), transparent),
        radial-gradient(1px 1px at 33% 60%, rgba(74, 158, 255, 0.02), transparent),
        radial-gradient(2px 2px at 10% 80%, rgba(255, 255, 255, 0.03), transparent);
    background-size: 200% 200%, 150% 150%, 300% 300%, 250% 250%, 180% 180%, 220% 220%, 170% 170%;
    animation: particlesFloat 30s linear infinite;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes particlesFloat {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
    100% {
        background-position: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    }
}

/* ===== Unified interactions (buttons, links, controls) ===== */
button,
input,
select,
textarea {
    font-family: inherit;
}

a,
button,
[role="button"],
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:where(a, button, [role="button"], input, select, textarea):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

:where(a, button, [role="button"]) {
    transition: background-color var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease),
                color var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease),
                transform var(--t-fast) var(--ease),
                filter var(--t-med) var(--ease);
}

:where(input, select, textarea) {
    transition: background-color var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease);
}

/* Consistent disabled state */
:where(button, .btn-primary, .btn-secondary, .btn-danger, .btn-success):disabled,
:where(button, .btn-primary, .btn-secondary, .btn-danger, .btn-success)[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.1);
}

/* Верхняя панель */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--top-bar-height);
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    z-index: 200;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    /* Centered header like the main layout */
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 0 var(--layout-padding);
}

.logo-top {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--text-primary);
    text-transform: uppercase;
}

.user-profile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-profile-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.user-profile-trigger:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.user-profile.active .user-profile-trigger {
    background-color: rgba(74, 158, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.2);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
}

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

.user-name {
    font-size: 13px;
    color: var(--text-primary);
}

.role-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
}

.role-pill--removable{
    position: relative;
    padding-right: 30px;
}
.role-pill__text{
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.role-pill__remove{
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.18);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 16px;
    padding: 0;
    cursor: pointer;
}
.role-pill__remove:hover{
    background: rgba(0,0,0,0.30);
}

/* Кнопка добавления роли (+) */
.role-pill--add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 50%;
    background: rgba(74, 158, 255, 0.1);
    border: 2px dashed rgba(74, 158, 255, 0.4);
    color: var(--accent-blue);
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.role-pill--add svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: transform 0.2s ease;
}

.role-pill--add:not(:has(svg)) {
    font-size: 20px;
}

.role-pill--add:hover {
    background: rgba(74, 158, 255, 0.2);
    border-color: var(--accent-blue);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3);
}

.role-pill--add:active {
    transform: scale(0.95);
}

.role-pill--add::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--accent-blue);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.role-pill--add:hover::before {
    opacity: 0.3;
}

.profile-role-add {
    position: relative;
    display: inline-block;
}

.profile-role-add-pop {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 280px;
    max-width: 400px;
    padding: 0;
    background: rgba(20, 22, 28, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    animation: fadeInDown 0.2s ease;
    display: none;
}

.profile-role-add-pop:not([hidden]) {
    display: block;
}

.profile-role-add-pop-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}

.profile-role-add-pop-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-role-add-pop .form-input {
    margin: 16px 20px;
    width: calc(100% - 40px);
}

.profile-role-add-pop-actions {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}

.profile-role-add-pop-actions .btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
}

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

.profile-role-add-pop .form-input {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
}

.profile-role-add-pop .form-input:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(77, 103, 255, 0.3);
}

.profile-role-add-pop .form-input:focus {
    outline: none;
    background: rgba(255,255,255,0.1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(45, 63, 143, 0.15);
}

.profile-role-add-pop .btn {
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
}

.profile-role-add-pop .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Адаптивность для поповера */
@media (max-width: 480px) {
    .profile-role-add-pop {
        left: 50% !important;
        transform: translateX(-50%);
        min-width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
    }
}

.admin-chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    font-size: 12px;
    font-weight: 600;
}
.admin-chip-remove{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.18);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 16px;
    padding: 0;
    cursor: pointer;
}
.admin-chip-remove:hover{
    background: rgba(0,0,0,0.30);
}

/* Top-bar roles: primary role + "+N" with tooltip */
.topbar-roles{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
}
.role-pill--topbar{
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    font-size: 12px;
}
.role-pill--more{
    position: relative;
    cursor: default;
    user-select: none;
}
.topbar-roles-popover{
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    max-width: 260px;
    background: var(--bg-secondary);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    z-index: 1000;
}
.role-pill--more:hover .topbar-roles-popover,
.role-pill--more:focus .topbar-roles-popover{
    display: block;
}
.topbar-role-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
}
.topbar-role-item:hover{
    background: rgba(255,255,255,0.06);
}
.topbar-role-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--role-color, rgba(255,255,255,0.25));
    box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.topbar-role-name{
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.2;
}

.dropdown-arrow {
    display: block;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.user-profile-trigger:hover .dropdown-arrow {
    color: var(--text-primary);
}

.user-profile.active .dropdown-arrow {
    transform: rotate(180deg);
    color: var(--accent-blue);
}

/* Выпадающее меню пользователя */
.user-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 300;
    overflow: hidden;
    animation: dropdownFadeIn 0.2s ease;
}

.user-profile.active .user-dropdown-menu {
    display: block;
}

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

.dropdown-header {
    padding: 16px;
    background-color: var(--bg-tertiary);
}

.dropdown-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-warm));
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary-cool);
    text-transform: uppercase;
}

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


.dropdown-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.dropdown-user-email {
    font-size: 12px;
    color: var(--text-secondary);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 4px 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background-color: var(--bg-tertiary);
}

.dropdown-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.dropdown-item:hover svg {
    color: var(--accent-blue);
    transform: scale(1.1);
}

.dropdown-item-danger {
    color: #ff6b6b;
}

.dropdown-item-danger:hover {
    background-color: rgba(255, 107, 107, 0.1);
    color: #ff5252;
}

.btn-apply-top {
    padding: 8px 16px;
    background-color: var(--accent-blue);
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apply-top:hover {
    background-color: var(--accent-blue-hover);
}

/* Основной контейнер */
.main-wrapper {
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    margin-top: var(--top-bar-height);
    min-height: calc(100vh - var(--top-bar-height));
}

/* Centers sidebar + content block as a single unit */
.layout-container {
    width: 100%;
    max-width: var(--layout-max);
    display: flex;
}

/* Боковая панель */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-primary);
    border-right: none;
    position: sticky;
    top: var(--top-bar-height);
    height: calc(100vh - var(--top-bar-height));
    /* Modern browsers: avoid visual clipping caused by dynamic browser UI */
    height: calc(100dvh - var(--top-bar-height));
    /* Скролл нужен именно меню, а не всей панели (иначе на некоторых экранах тянет блоки) */
    overflow: hidden;
    z-index: 100;

    /* Important: the sidebar is a flex column so the scroll area (sidebar-nav)
       fits exactly into the available height without being clipped by padding. */
    display: flex;
    flex-direction: column;
}

/* Decorative fades were perceived as "clipping" on long menus (notably on the Apply page). */
.sidebar::before,
.sidebar::after {
    display: none;
}

/* Soft edge fade so the menu doesn't look like it "cuts off" */
.sidebar::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg-primary));
}

.sidebar::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 22px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0), var(--bg-primary));
}

.sidebar-nav {
    padding: 14px 0;
    /* Take remaining sidebar height (prevents bottom clipping on some screens) */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* extra breathing room so last items don't sit under the fade */
    padding-bottom: 48px;

    /* Scroll remains, but scrollbars are hidden */
    scrollbar-width: none; /* Firefox */
}

.sidebar-nav::-webkit-scrollbar{
    width: 0;
    height: 0;
}

.nav-section {
    margin-bottom: 20px;
}

.nav-section-header{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 0 18px;
    margin-bottom: 8px;
    cursor: pointer;
}

.nav-section-header::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 1.5px solid var(--text-secondary);
    border-bottom: 1.5px solid var(--text-secondary);
    transform: translateY(6px) rotate(45deg);
    transition: transform 0.16s ease, opacity 0.16s ease;
    opacity: 0.8;
    margin-left: 8px;
}

.nav-section--collapsed > .nav-section-header::after {
    transform: translateY(6px) rotate(-45deg);
}

.nav-section--collapsed > .nav-list {
    pointer-events: none;
}

.nav-section > .nav-list {
    overflow: hidden;
    opacity: 1;
    max-height: 2000px;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    will-change: max-height, opacity;
}

.nav-section > .nav-list[data-collapsed="true"] {
    opacity: 0;
    max-height: 0;
}

 .nav-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.nav-item {
    margin-bottom: 2px;
}

.nav-item-row {
    display: flex;
    align-items: stretch;
    margin: 0 16px 3px 16px;
    border-radius: 10px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    margin: 0 16px 3px 16px;
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    width: calc(100% - 36px); /* full row minus horizontal margins */
    box-sizing: border-box;
    border-left: 3px solid transparent;

    /* Prevent horizontal scrolling in sidebar due to long titles */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Keep folder chevrons aligned to the right edge consistently */
.nav-link .folder-toggle{
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Title area takes remaining space and can wrap */
.nav-link span:not(.nav-ico):not(.folder-toggle){
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
}

.nav-item-expandable > .nav-item-row > .nav-link {
    width: auto;
    flex: 1 1 auto;
    margin: 0;
    padding-right: 8px;
}

.nav-item-expandable > .nav-item-row > .folder-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 28px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease;
    position: relative;
}

.nav-item-expandable > .nav-item-row > .folder-toggle::before {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(6px) rotate(45deg);
    transition: transform 0.16s ease, opacity 0.16s ease;
    opacity: 0.8;
}

.nav-item.folder-collapsed > .nav-item-row > .folder-toggle::before {
    transform: translateY(6px) rotate(-45deg);
}

.nav-item-expandable > .nav-item-row > .folder-toggle .expand-icon {
    display: none;
}

.nav-item-expandable > .nav-item-row > .folder-toggle:focus-visible,
.nav-section-header:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.45);
    outline-offset: 2px;
}


/* Recent pages */
.nav-recent-dot{
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-warm));
    display: inline-block;
    flex: 0 0 6px;
    opacity: 0.9;
}
.nav-recent-title{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateX(2px);
}

.nav-link.active {
    background: linear-gradient(135deg, var(--accent-blue-light), var(--accent-warm-light));
    border-left: 3px solid var(--accent-blue);
    color: var(--text-primary);
    font-weight: 500;
    padding-left: 11px; /* 14px - 3px border */
    position: relative;
}

.nav-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--text-gradient);
    opacity: 0.05;
    pointer-events: none;
}

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

/* Кастомная жёлтая тема для "Подать заявку" */
.nav-link--apply {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.06));
    border: 1px solid rgba(255, 193, 7, 0.25);
    border-left: 3px solid #FFC107;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.nav-link--apply::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-link--apply:hover::before {
    left: 100%;
}

.nav-link--apply span:last-child {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    font-size: 12px;
    color: #FFC107;
    position: relative;
    z-index: 1;
}

.nav-link--apply .nav-ico--apply {
    color: #FFC107;
    position: relative;
    z-index: 1;
}

.nav-link--apply .nav-ico--apply svg {
    color: #FFC107;
    stroke: #FFC107;
    fill: currentColor;
}

.nav-link--apply .nav-ico--apply svg path {
    stroke: #FFC107;
    fill: currentColor;
}

.nav-link--apply:hover {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.18), rgba(255, 193, 7, 0.10));
    border-color: rgba(255, 193, 7, 0.4);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateX(2px) translateY(-1px);
}

.nav-link--apply.active {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.20), rgba(255, 193, 7, 0.12));
    border-left-color: #FFC107;
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow: 0 2px 10px rgba(255, 193, 7, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #FFC107;
}

.nav-link--apply.active span:last-child {
    color: #FFC107;
}

/* Nav icon: fixed column to prevent "crazy" left offsets */
.nav-ico{
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.nav-ico--apply,
.nav-ico--square{
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    padding: 0;
}

.nav-ico svg,
.nav-ico img{
    width: 18px;
    height: 18px;
    display: block;
    transition: transform 0.2s ease;
}

.nav-link:hover .nav-ico svg {
    transform: scale(1.1);
}

.nav-link.active .nav-ico svg {
    transform: scale(1.05);
}

/* Page icons in navigation (DB value can be Font Awesome class or svg:<id>) */
.nav-page-icon,
.nav-page-icon-svg{
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    opacity: 0.9;
    font-size: 14px;
}

.nav-page-icon-svg {
    color: currentColor;
}

.nav-page-icon-svg svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Folder view (list of pages) */
.pages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#editMemberModal .pages-list{
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
#editMemberModal .pages-list-item{
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
}

/* Admin Groups: page access picker (readable, grouped by categories) */
/* Categories go vertically (not columns). Pages inside a topic are in a 2-column grid. */
.group-pages-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-cat-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    padding: 10px;
}

.group-cat-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.group-topic-block { margin-bottom: 10px; }
.group-topic-block:last-child { margin-bottom: 0; }

.group-topic-title {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 6px 0 6px 0;
    padding-left: 2px;
}

.group-topic-pages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 860px) {
    .group-topic-pages { grid-template-columns: 1fr; }
}

.group-page-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.01);
    cursor: pointer;
    user-select: none;
}

.group-page-item:hover { background: rgba(255,255,255,0.04); }

.group-page-item input[type="checkbox"] { transform: translateY(1px); }

.group-page-title {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pages-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-decoration: none;
}

.pages-list-item:hover {
    background: var(--bg-secondary);
}

.pages-list-meta {
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.pages-list-item .pages-list-title {
    flex: 1;
}

.pages-list-item .pages-list-arrow {
    opacity: 0.65;
}

.nav-ico--square svg{
    opacity: 0.95;
}

.nav-link > svg:first-child {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.nav-link:hover > svg:first-child {
    transform: scale(1.1);
}

.nav-link.active > svg:first-child {
    transform: scale(1.05);
}

.nav-link .category-icon {
    flex-shrink: 0;
    width: 18px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    opacity: 0.95;
}

.nav-link .category-icon svg {
    width: 18px;
    height: 18px;
}

.nav-link--level3 .category-icon {
    margin-right: 8px;
}

.nav-link span:not(.nav-ico) {
    flex: 0 0 auto;
    min-width: 0;
}

.nav-item-expandable .expand-icon {
    margin-left: auto;
    width: 12px;
    height: 12px;
}


/* Folder (topic) collapsing */
.nav-item-expandable .folder-toggle{
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    color: var(--text-secondary);
}
.nav-item-expandable .folder-toggle:hover{
    background: transparent;
    color: var(--text-primary);
}
.nav-item.folder-collapsed > .nav-sublist{
    display: block;
}

.nav-folder-content {
    overflow: hidden;
    opacity: 1;
    max-height: 2000px;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    will-change: max-height, opacity;
}

.nav-folder-content[data-collapsed="true"] {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .nav-section > .nav-list,
    .nav-folder-content,
    .nav-section-header::after,
    .nav-item-expandable > .nav-item-row > .folder-toggle::before {
        transition: none;
    }
}

/* nesting paddings for pages inside folders */
.nav-link--level2 {
    padding-left: 48px;
    color: var(--text-secondary);
    font-size: 13px;
}

.nav-link--level2:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.04);
}

.nav-link--level2.active {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(147, 197, 253, 0.06));
    border-left: 3px solid #60A5FA;
    color: #93C5FD;
    padding-left: 45px;
    font-weight: 500;
}

.nav-link--level3 {
    padding-left: 64px;
    color: var(--text-muted);
    font-size: 12px;
}

.nav-link--level3:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.04);
}

.nav-link--level3.active {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.10), rgba(147, 197, 253, 0.05));
    border-left: 3px solid #60A5FA;
    color: #93C5FD;
    padding-left: 61px;
    font-weight: 500;
}
.nav-sublist {
    list-style: none;
    padding-left: 20px;
    margin-top: 4px;
}

.nav-sublist .nav-link {
    padding-left: 48px;
    color: var(--text-secondary);
    font-size: 13px;
}

.nav-sublist .nav-link:hover {
    color: var(--text-primary);
}

/* Основной контент */
.main-content {
    flex: 1;
    margin-left: 0;
    background-color: var(--bg-primary);
    min-height: calc(100vh - var(--top-bar-height));
    padding: 32px 40px;
}

.content-page {
    max-width: 980px;
    width: 100%;
    margin: 12px auto 20px;
    padding: 12px;
    background: var(--bg-primary); /* same color as app background (like code6 docs) */
    border: none;
    border-radius: 0; /* no card look */
    box-shadow: none;
    overflow-wrap: anywhere;
}

/* Admin pages can use full available width */
.content-page.admin-applications-page {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.content-page.admin-applications-page > .content-section {
    max-width: 100%;
    width: 100%;
}

.content-page.admin-applications-page #adminApplicationsApp,
.content-page.admin-applications-page #applicationsPeriodsAdmin {
    max-width: 100%;
    width: 100%;
}

.content-page.admin-applications-page #adminApplicationsApp > .applications-periods-admin {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.content-page.admin-applications-page .page-title-large {
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}


/* Limit readable text width like on the reference screenshot */
.content-section {
    max-width: 760px;
}

.page-header {
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Градиент применяется только если поддерживается */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .page-title {
        background: var(--text-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent; /* Fallback для современных браузеров */
    }
}

.page-title-large {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Градиент применяется только если поддерживается */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .page-title-large {
        background: var(--text-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent; /* Fallback для современных браузеров */
    }
}

.page-meta{
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.page-meta strong{ color: var(--text-primary); font-weight: 600; }
.page-meta-sep{ opacity: 0.55; }

.page-footer-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 13px;
}
.page-footer-meta strong{ color: var(--text-primary); font-weight: 600; }

.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Breadcrumbs (иерархия) */
.breadcrumbs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.breadcrumbs__link{
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.breadcrumbs__link:hover{ text-decoration: underline; }
.breadcrumbs__sep{ opacity: 0.6; }
.breadcrumbs__current{
    color: var(--text-primary);
    font-weight: 600;
}

/* Кнопка "Назад" внизу страницы */
.page-backbar{
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    display:flex;
    justify-content:flex-start;
}
.page-backbar .btn-secondary{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.page-breadcrumb h1 {
    margin: 0;
}

.page-breadcrumb svg {
    width: 16px;
    height: 16px;
}

/* Breadcrumbs: используем .breadcrumbs */

.content-section {
    margin-bottom: 40px;
}

.content-section h1,
.content-section h2,
.content-section h3,
.content-section h4,
.content-section h5,
.content-section h6,
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    color: var(--text-primary);
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 12px;
    line-height: 1.3;
}

.content-section h1,
.markdown-content h1 {
    font-size: 28px;
    margin-top: 0;
}

.content-section h2,
.markdown-content h2 {
    font-size: 22px;
}

.content-section h3,
.markdown-content h3 {
    font-size: 18px;
}

.content-section h4,
.markdown-content h4 {
    font-size: 16px;
}

.content-section h5,
.markdown-content h5 {
    font-size: 15px;
}

.content-section h6,
.markdown-content h6 {
    font-size: 14px;
    color: var(--text-secondary);
}

.content-section p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.concept-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.concept-list li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-left: 24px;
    position: relative;
}

.concept-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-primary);
    font-size: 20px;
}

.concept-list strong {
    font-weight: 600;
}

/* Сетка фич */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.feature-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}

.feature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    color: var(--accent-blue);
}

.feature-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.feature-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Шаги */
.steps-section {
    margin-bottom: 48px;
}

.steps-section h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.steps-list {
    list-style: none;
    counter-reset: step-counter;
    padding-left: 0;
}

.steps-list li {
    counter-increment: step-counter;
    margin-bottom: 24px;
    padding-left: 48px;
    position: relative;
}

.steps-list li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background-color: var(--accent-blue);
    color: var(--text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.steps-list strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.steps-list p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Форма заявки */
.apply-form-section {
    margin-top: 48px;
}

.apply-form-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--accent-green);
}

.apply-form-title svg {
    width: 20px;
    height: 20px;
}

.apply-form {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px;
}

.apply-form .form-group {
    margin-bottom: 24px;
}

.apply-form label {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.apply-form textarea {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: all 0.2s ease;
}

.apply-form textarea:focus {
    border-color: var(--accent-blue);
    background-color: var(--bg-primary);
}

.apply-form textarea::placeholder {
    color: var(--text-muted);
}

.btn-submit-apply {
    width: 100%;
    padding: 16px;
    background-color: var(--accent-green);
    color: var(--text-primary);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.btn-submit-apply:hover {
    background-color: #45a049;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.btn-submit-apply svg {
    width: 20px;
    height: 20px;
}

/* Модальные окна */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    width: 90%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: auto;
    max-height: 90vh;
    overflow-y: auto;
    backdrop-filter: blur(20px);
    background: linear-gradient(135deg, rgba(32, 32, 32, 0.95), rgba(42, 42, 42, 0.95));
}

@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal.active .modal-content {
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal:not(.active) .modal-content {
    animation: modalSlideOut 0.3s ease;
}

@keyframes modalSlideOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

.modal-content-enhanced {
    padding: 0;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.modal-content-enhanced.modal-content-large {
    max-width: 900px;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.modal-form {
    padding: 20px 24px 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-section {
    margin-bottom: 24px;
}

.modal-section:last-child {
    margin-bottom: 0;
}

.modal-section__title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.modal-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-label__required {
    color: #f44336;
}

.form-label__hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.form-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* === Profile edit modal (upload + crop) === */
#profileEditModalContent.modal-content-wide{
    max-width: 900px;
    padding: 24px;
}

#profileEditModalContent.modal-content-wide h2{
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Visually consistent layout: banner full width, avatar left, bio right */
.profile-edit-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

/* Profile edit (v2): banner full width; avatar left; actions right; about below avatar */
.profile-edit-layout--v2{
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 20px;
}

.profile-edit-layout--v2 .profile-edit-banner{ grid-column: 1 / -1; }
.profile-edit-layout--v2 .profile-edit-avatar{ grid-column: 1; }
.profile-edit-layout--v2 .profile-edit-actions{ grid-column: 2; }
.profile-edit-layout--v2 .profile-edit-about{ grid-column: 1; }

.profile-edit-banner{
    grid-column: 1 / -1;
}

.profile-media-card{
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 0;
    transition: all var(--t-fast) var(--ease);
}

.profile-media-card:hover{
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
}

.profile-media-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.profile-media-title{ 
    font-weight: 700; 
    font-size: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.profile-media-title svg{
    opacity: 0.7;
    flex-shrink: 0;
}

.profile-media-sub{ 
    font-size: 12px; 
    color: var(--text-muted); 
    margin-top: 4px;
    line-height: 1.4;
}

.profile-crop-row{
    display:grid;
    grid-template-columns: 1fr minmax(0, 240px);
    gap: 12px;
    align-items: start;
}

.profile-crop-row--cover{ grid-template-columns: 1fr minmax(0, 260px); }
.profile-crop-row--avatar{ grid-template-columns: 1fr minmax(0, 260px); }

.profile-about-field{
    margin-top: 8px;
}

.profile-about-field textarea{
    width: 100%;
    min-height: 200px;
    resize: vertical;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.6;
    transition: all var(--t-fast) var(--ease);
}

.profile-about-field textarea:focus{
    outline: none;
    border-color: var(--accent-blue);
    background: rgba(255,255,255,.04);
    box-shadow: 0 0 0 2px rgba(45, 63, 143, 0.15);
}

.profile-about-field textarea::placeholder{
    color: var(--text-muted);
}

.profile-info-readonly{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-info-note{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(45, 63, 143, 0.08);
    border: 1px solid rgba(45, 63, 143, 0.15);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.profile-info-note svg{
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-blue);
    opacity: 0.8;
}

.profile-info-item{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    transition: all var(--t-fast) var(--ease);
}

.profile-info-item:hover{
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
}

.profile-info-item__label{
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.profile-info-item__value{
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
    min-height: 20px;
}

.profile-info-item__value:empty::before{
    content: '—';
    color: var(--text-muted);
    font-weight: 400;
}

.profile-edit-field{
    display: block;
    margin-bottom: 10px;
}

.profile-edit-field:last-child{
    margin-bottom: 0;
}

.profile-edit-field__label{
    display:block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.profile-edit-field input,
.profile-edit-field textarea,
.profile-edit-field select{
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.03);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
}

.profile-edit-field input:focus,
.profile-edit-field textarea:focus,
.profile-edit-field select:focus{
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(45, 63, 143, .2);
}

.profile-actions-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.profile-field span{
    display:block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.profile-crop-caption{
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 10px;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,.02);
}

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

.profile-crop-controls input[type="file"]{
    width: 100%;
}

.profile-range span{ display:block; font-size: 12px; color: var(--text-muted); margin: 10px 0 6px; }

.profile-crop-frame{
    position: relative;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    user-select: none;
    touch-action: none;
    transition: border-color var(--t-fast) var(--ease);
}

.profile-crop-frame:hover{
    border-color: rgba(255,255,255,0.15);
}

.profile-crop-frame img{
    width: auto;
    height: auto;
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.profile-crop-frame--avatar{ aspect-ratio: 1 / 1; min-height: 220px; }
.profile-crop-frame--cover{ aspect-ratio: 16 / 5; min-height: 180px; }

.profile-crop-hint{
    position:absolute;
    right: 10px;
    bottom: 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 6px 8px;
    border-radius: 10px;
    pointer-events:none;
}

.modal-actions--sticky{
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    display:flex;
    justify-content:flex-end;
    gap: 12px;
}

.modal-actions--sticky .btn{
    min-width: 120px;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 10px;
    transition: all var(--t-fast) var(--ease);
}

.modal-actions--sticky .btn-primary{
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.modal-actions--sticky .btn-primary:hover{
    background: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 63, 143, 0.3);
}

@media (max-width: 840px){
    .profile-edit-layout{ grid-template-columns: 1fr; }
    .profile-edit-layout--v2{ grid-template-columns: 1fr; }
    .profile-edit-layout--v2 .profile-edit-actions{ grid-column: 1 / -1; }
    .profile-edit-layout--v2 .profile-edit-about{ grid-column: 1 / -1; }
    .profile-crop-row{ grid-template-columns: 1fr; }
    #profileEditModalContent.modal-content-wide{ 
        max-width: 520px; 
        padding: 20px;
    }
    
    .profile-edit-layout--v2{
        grid-template-columns: 1fr;
    }
    
    .profile-crop-row{
        grid-template-columns: 1fr !important;
    }
    
    .profile-info-readonly{
        gap: 12px;
    }
}

/* Admin member info card */
.info-card{
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 12px;
}
.info-card__title{
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.info-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.info-item{
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-tertiary);
}
.info-label{
    font-size: 12px;
    color: var(--text-muted);
}
.info-value{
    font-weight: 600;
    margin-top: 4px;
    word-break: break-word;
}
.activity-list{
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-tertiary);
    max-height: 160px;
    overflow:auto;
    padding: 8px;
}
.activity-row{
    display:flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}
.activity-row:last-child{border-bottom:none;}
.activity-path{
    flex: 1;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.activity-time{
    color: var(--text-muted);
    white-space: nowrap;
}

@media (max-width: 840px){
    .modal-content-enhanced {
        max-width: 95%;
        max-height: 95vh;
    }

    .modal-content-enhanced.modal-content-large {
        max-width: 95%;
    }

    .modal-header {
        padding: 20px 24px;
    }

    .modal-form {
        padding: 20px 24px 24px;
    }

    .modal-form-2col {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions .btn {
        width: 100%;
    }
}

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

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    padding: 0;
}

.modal-content-enhanced .modal-close {
    position: static;
    top: auto;
    right: auto;
}

.modal-close:hover {
    background-color: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-content h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 32px;
    color: var(--text-primary);
    text-align: center;
    background: linear-gradient(135deg, var(--text-primary-cool), var(--text-primary-warm));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleFadeIn 0.5s ease backwards;
    animation-delay: 0.2s;
    letter-spacing: -0.02em;
}

@keyframes titleFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Two-column layouts inside specific admin modals (folder/group editors) */
.modal-form-2col{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 18px;
}

.modal-card{
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    padding: 20px;
}

.modal-card .modal-section__title {
    margin-top: 0;
}

.modal-card .form-group:last-child {
    margin-bottom: 0;
}

/* Wide card inside 2-column modal grid (spans both columns) */
.modal-card-wide{ grid-column: 1 / -1; }

/* ============================================
   PROFILE PAGE (соцсеточный профиль)
   ============================================ */
.profile-page{ padding-bottom: 18px; }

.profile-header{ 
    position: relative; 
    margin-bottom: 18px;
    overflow: hidden;
}
.profile-cover{
    height: 220px;
    min-height: 180px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background:
        radial-gradient(1200px 420px at 30% 20%, rgba(77, 103, 255, 0.25), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.02));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
}

/* Улучшенное отображение обложки с изображением */
.profile-cover--has-image {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.profile-cover--has-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.profile-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.05);
    pointer-events: none;
    z-index: 0;
}

.profile-headrow{
    display: flex;
    gap: 18px;
    align-items: flex-end;
    margin-top: -54px;
    padding: 0 14px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}

.profile-avatar{
    width: 108px;
    height: 108px;
    min-width: 108px;
    min-height: 108px;
    border-radius: 50%;
    border: 4px solid var(--background-color);
    background: linear-gradient(135deg, rgba(77, 103, 255, 0.2), rgba(76, 175, 80, 0.2));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(0,0,0,0.32), 0 0 0 2px rgba(255,255,255,0.1);
    position: relative;
    flex-shrink: 0;
}

.profile-avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, rgba(77, 103, 255, 0.5), rgba(76, 175, 80, 0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.profile-avatar img{ 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(77, 103, 255, 0.2), rgba(76, 175, 80, 0.2));
} 

.profile-avatar-initials{ 
    font-weight: 700; 
    font-size: 34px; 
    letter-spacing: 0.04em; 
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.profile-title{ 
    flex: 1; 
    min-width: 0;
    padding-left: 0;
}
.profile-name{ 
    margin: 0; 
    font-size: 34px; 
    font-weight: 700; 
    line-height: 1.08;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.profile-tag{ 
    color: var(--text-muted); 
    font-weight: 600; 
    font-size: 18px;
    white-space: nowrap;
}

.profile-chips{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.profile-actions{ margin-top: 12px; }

.profile-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.profile-card{ border-radius: 18px; }
.profile-card .card-header{ display:flex; align-items:center; justify-content: space-between; gap: 14px; }
.profile-card-header-row{ flex-wrap: wrap; }

.profile-bio{ line-height: 1.55; }

.profile-stats{ display:flex; flex-wrap: wrap; gap: 10px 14px; }
.profile-stat{ color: var(--text-muted); font-size: 13px; }
.profile-stat strong{ color: var(--text-primary); font-weight: 700; }

.profile-events{ display:flex; flex-direction: column; gap: 10px; }
.profile-event{
    display:flex;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.profile-event-icon{
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(77, 103, 255, 0.12);
    border: 1px solid rgba(77, 103, 255, 0.22);
    color: var(--text-primary);
    font-weight: 700;
    flex: 0 0 auto;
}
.profile-event-body{ min-width: 0; }
.profile-event-text{ color: var(--text-primary); }
.profile-event-time{ color: var(--text-muted); font-size: 12px; margin-top: 4px; }

.profile-info-row{ display:flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 6px 0; }
.profile-info-section{ margin-top: 14px; }
.profile-info-label{ font-size: 12px; margin-bottom: 8px; }
.profile-side-chips{ display:flex; flex-wrap: wrap; gap: 10px; }

.profile-side-list{ display:flex; flex-direction: column; gap: 8px; }
.profile-side-list-item{
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
    font-size: 13px;
    color: var(--text-primary);
}
.profile-side-list-item--two{
    display:flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* Profile: inline admin edit controls (no duplicate blocks) */
.profile-inline-input{
    width: 130px;
    max-width: 55%;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.03);
    color: var(--text-primary);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 13px;
}

/* Tag editor: fixed 3 chars, centered */
.profile-inline-input--tag{
    width: 64px;
    max-width: none;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}
.profile-info-row--actions{ align-items: center; }

.profile-admin-inline{
    display:flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}
.profile-admin-inline input{
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.03);
    color: var(--text-primary);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 13px;
}

.qual-picker{
    margin-top: 10px;
}

.qual-picker__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.qual-picker__title{
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.qual-picker__add-wrapper{
    display: flex;
    align-items: center;
    gap: 8px;
}

.qual-picker__select{
    min-width: 240px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: var(--text-primary);
    font-size: 13px;
    font-family: Inter, sans-serif;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    outline: none;
}

.qual-picker__select:hover{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.20);
}

.qual-picker__select:focus{
    background: rgba(255,255,255,.1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(45, 63, 143, 0.2);
}

.qual-picker__select option{
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px;
}

.qual-picker__add{
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(135deg, rgba(45, 63, 143, 0.2), rgba(54, 80, 178, 0.3));
    color: var(--accent-blue);
    cursor: pointer;
    font-family: Inter, sans-serif;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast) var(--ease);
    flex-shrink: 0;
}

.qual-picker__add:hover{
    background: linear-gradient(135deg, rgba(45, 63, 143, 0.3), rgba(54, 80, 178, 0.4));
    border-color: var(--accent-blue);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(45, 63, 143, 0.3);
}

.qual-picker__add:active{
    transform: scale(0.98) translateY(1px);
}

.qual-picker__add:disabled{
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.qual-picker__add svg{
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.qual-picker__list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.qual-picker__empty{
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.profile-admin-chips{ display:flex; flex-wrap: wrap; gap: 10px; }
.profile-chip{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
    font-size: 12px;
    line-height: 1;
}
.profile-chip__remove{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    cursor: pointer;
}
.profile-chip__remove:hover{ color: var(--text-primary); background: rgba(255,255,255,0.06); }

.profile-admin-ranks{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (max-width: 980px){
    .profile-layout{ grid-template-columns: 1fr; }
    .profile-side{ order: 2; }
    .profile-main{ order: 1; }
}

/* Адаптивность для профиля */
@media (max-width: 768px){
    .profile-header{ margin-bottom: 16px; }
    .profile-cover{ 
        height: 200px; 
        border-radius: 16px;
        min-height: 160px;
    }
    .profile-headrow{ 
        margin-top: -50px; 
        padding: 0 12px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .profile-avatar{ 
        width: 100px; 
        height: 100px;
        min-width: 100px;
        min-height: 100px;
        border-width: 3px;
    }
    .profile-avatar-initials{ font-size: 30px; }
    .profile-title{ 
        flex: 1;
        min-width: 0;
    }
    .profile-name{ 
        font-size: 28px; 
        line-height: 1.1;
        word-wrap: break-word;
    }
    .profile-tag{ font-size: 16px; }
    .profile-chips{ 
        margin-top: 8px;
        gap: 8px;
    }
    .profile-actions{ 
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 560px){
    .profile-cover{ 
        height: 160px; 
        border-radius: 14px;
        min-height: 140px;
    }
    .profile-headrow{ 
        margin-top: -42px; 
        padding: 0 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .profile-avatar{ 
        width: 88px; 
        height: 88px;
        min-width: 88px;
        min-height: 88px;
        border-width: 3px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 2px rgba(255,255,255,0.1);
    }
    .profile-avatar-initials{ font-size: 26px; }
    .profile-title{ 
        width: 100%;
        padding-left: 0;
    }
    .profile-name{ 
        font-size: 24px; 
        line-height: 1.15;
    }
    .profile-tag{ font-size: 14px; }
    .profile-chips{ 
        margin-top: 6px;
        gap: 6px;
    }
    .profile-chips .role-pill{
        font-size: 11px;
        padding: 4px 10px;
    }
    .profile-actions{ 
        margin-top: 8px;
        width: 100%;
    }
    .profile-actions .btn{
        flex: 1;
        min-width: 0;
        font-size: 13px;
        padding: 8px 12px;
    }
}

@media (max-width: 400px){
    .profile-cover{ 
        height: 140px; 
        border-radius: 12px;
        min-height: 120px;
    }
    .profile-headrow{ 
        margin-top: -38px; 
        padding: 0 8px;
    }
    .profile-avatar{ 
        width: 80px; 
        height: 80px;
        min-width: 80px;
        min-height: 80px;
        border-width: 2px;
    }
    .profile-avatar-initials{ font-size: 22px; }
    .profile-name{ font-size: 22px; }
    .profile-tag{ font-size: 13px; }
}

/* Inline checkbox label (keeps checkbox next to text) */
.inline-check{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* Color picker + editable text value */
.color-input-row{
    display: flex;
    gap: 10px;
    align-items: center;
}

.color-input-row input[type="color"]{
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 38px;
    padding: 0;
    border-radius: 8px;
}

.color-input-row input[type="text"]{
    flex: 1;
}

@media (max-width: 860px){
    .modal-form-2col{ grid-template-columns: 1fr; }
}

.form-group {
    margin-bottom: 24px;
    position: relative;
    animation: formFieldSlideIn 0.4s ease backwards;
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.15s; }
.form-group:nth-child(3) { animation-delay: 0.2s; }
.form-group:nth-child(4) { animation-delay: 0.25s; }
.form-group:nth-child(5) { animation-delay: 0.3s; }
.form-group:nth-child(6) { animation-delay: 0.35s; }

@keyframes formFieldSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.3s ease;
    position: relative;
}

.form-group input {
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.8), rgba(32, 32, 32, 0.8));
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(10px);
}

.form-group input:hover {
    border-color: rgba(74, 158, 255, 0.4);
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.9), rgba(32, 32, 32, 0.9));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.form-group input:focus {
    border-color: var(--accent-blue);
    background: linear-gradient(135deg, rgba(42, 42, 42, 1), rgba(32, 32, 32, 1));
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2), 0 4px 16px rgba(74, 158, 255, 0.15);
    transform: translateY(-2px);
}

.form-group input:focus + label,
.form-group:has(input:focus) label {
    color: var(--accent-blue);
}

.form-group input::placeholder {
    color: var(--text-muted);
    transition: opacity 0.3s ease;
}

.form-group input:focus::placeholder {
    opacity: 0.5;
}

/* Индикатор валидации */
.form-group input:valid:not(:placeholder-shown) {
    border-color: rgba(76, 175, 80, 0.5);
}

.form-group input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: rgba(244, 67, 54, 0.5);
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.btn-submit {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-hover));
    color: var(--text-primary);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.2);
    animation: buttonSlideIn 0.5s ease backwards;
    animation-delay: 0.4s;
}

@keyframes buttonSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-submit:hover::before {
    left: 100%;
}

.btn-submit:hover {
    background: linear-gradient(135deg, var(--accent-blue-hover), var(--accent-blue));
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(74, 158, 255, 0.4);
}

.btn-submit:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Анимация загрузки для кнопки */
.btn-submit.loading {
    pointer-events: none;
    position: relative;
    color: transparent;
}

.btn-submit.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: buttonSpinner 0.6s linear infinite;
}

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

.form-switch {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-secondary);
    animation: formFieldSlideIn 0.4s ease backwards;
    animation-delay: 0.45s;
}

.form-switch a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

.form-switch a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--accent-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.form-switch a:hover {
    color: var(--accent-blue-hover);
    background: rgba(74, 158, 255, 0.1);
    transform: translateY(-1px);
}

.form-switch a:hover::after {
    transform: scaleX(1);
}

/* Скроллбар */
.sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.sidebar::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

/* Уведомления */
.notification {
    position: fixed;
    top: auto;
    bottom: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1001;
    animation: slideInRight 0.3s ease;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.notification-success {
    /* Informational / success toasts in MIRC are blue */
    background-color: var(--accent-blue);
    color: var(--text-primary);
}

.notification-error {
    background-color: #f44336;
    color: var(--text-primary);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding: 24px 20px;
    }

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

    .page-title-large {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
    line-height: 1.2;
}
}

/* ============================================
   СТРАНИЦА УПРАВЛЕНИЯ КОНТЕНТОМ
   ============================================ */

.admin-pages-container {
    padding: 24px;
}

.admin-pages-toolbar {
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
}

/* Unified button baseline */
:where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-view,
    .btn-icon,
    .btn-icon-only,
    .btn-submit,
    .btn-submit-apply,
    .btn-apply-top,
    .apply-btn,
    .btn-primary-large,
    .btn-secondary--small,
    .btn-quick,
    .btn-link,
    .filter-btn,
    .status-actions__btn,
    .final-cta__btn,
    .app-action-btn,
    .applications-filter-action-btn,
    .applications-filter-search-clear,
    .pages-search-clear,
    .active-filters__clear,
    .pagination-btn,
    .tree-btn,
    .markdown-btn
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--btn-radius);
    font-family: inherit;
    line-height: 1.1;
    font-weight: var(--btn-font-weight);
    user-select: none;
    cursor: pointer;
}

:where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-view,
    .btn-icon,
    .btn-icon-only,
    .btn-submit,
    .btn-submit-apply,
    .btn-apply-top,
    .apply-btn,
    .btn-primary-large,
    .btn-secondary--small,
    .btn-quick,
    .btn-link,
    .filter-btn,
    .status-actions__btn,
    .final-cta__btn,
    .app-action-btn,
    .applications-filter-action-btn,
    .applications-filter-search-clear,
    .pages-search-clear,
    .active-filters__clear,
    .pagination-btn,
    .tree-btn,
    .markdown-btn
):active {
    transform: translateY(1px);
}

.btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: var(--accent-blue);
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.btn-primary svg {
    width: 16px;
    height: 16px;
}

.admin-pages-tree {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    min-height: 400px;
}

/* Drag & drop for admin pages tree */
.tree-draggable-page { cursor: grab; }
.tree-draggable-page.tree-dragging { opacity: 0.6; cursor: grabbing; }
.tree-drop-topic.tree-drop-over {
    outline: 2px dashed var(--accent-blue);
    outline-offset: 2px;
}

.tree-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.tree-item {
    margin-bottom: 8px;
}

.tree-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tree-item-header:hover {
    background-color: var(--bg-primary);
}

.tree-item-header.expanded {
    background-color: var(--bg-primary);
}

.tree-item-icon {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.tree-item-header.expanded .tree-item-icon {
    transform: rotate(90deg);
}

.tree-item-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.tree-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tree-item-header:hover .tree-item-actions {
    opacity: 1;
}

.tree-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.tree-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.tree-btn svg {
    width: 14px;
    height: 14px;
}

.tree-btn-danger:hover {
    background-color: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
}

.tree-item-children {
    margin-left: 32px;
    margin-top: 8px;
    padding-left: 16px;
    border-left: 2px solid var(--border-color);
}

.tree-item-protected {
    opacity: 0.7;
}

.tree-item-protected .tree-item-name::after {
    content: " (защищено)";
    font-size: 12px;
    color: var(--text-muted);
    font-weight: normal;
}

.modal-content-large {
    max-width: 1100px;
    width: 92vw;
    margin: auto;
    position: relative;
}

.tree-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
    resize: vertical;
}

.form-group textarea:focus {
    border-color: var(--accent-blue);
    background-color: var(--bg-primary);
}

.form-group select {
    width: 100%;
    padding: 12px 14px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.form-group select:focus {
    border-color: var(--accent-blue);
    background-color: var(--bg-primary);
}

/* ============================================
   MARKDOWN РЕДАКТОР
   ============================================ */

.markdown-editor {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--bg-tertiary);
}

.markdown-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.markdown-btn {
    padding: 6px 10px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.markdown-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.markdown-tabs {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.markdown-tab {
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.markdown-tab.active {
    background-color: var(--accent-blue);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

.markdown-tab:hover:not(.active) {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.markdown-editor textarea {
    border: none;
    border-radius: 0;
    background-color: var(--bg-primary);
    font-family: inherit;
    resize: vertical;
}

.markdown-preview {
    padding: 16px;
    min-height: 300px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-y: auto;
    max-height: 500px;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6 {
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.markdown-preview h1 { font-size: 2em; }
.markdown-preview h2 { font-size: 1.5em; }
.markdown-preview h3 { font-size: 1.25em; }

.markdown-preview p {
    margin-bottom: 12px;
}

.markdown-preview ul,
.markdown-preview ol {
    margin-bottom: 12px;
    padding-left: 24px;
}

.markdown-preview li {
    margin-bottom: 4px;
}

.markdown-preview code {
    background-color: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.9em;
}

.markdown-preview pre {
    background-color: var(--bg-tertiary);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 12px;
}

.markdown-preview pre code {
    background: none;
    padding: 0;
}

.markdown-preview a {
    color: var(--accent-blue);
    text-decoration: none;
}

.markdown-preview a:hover {
    text-decoration: underline;
}

.markdown-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 12px 0;
}

.markdown-preview blockquote {
    border-left: 4px solid var(--accent-blue);
    padding-left: 16px;
    margin: 12px 0;
    color: var(--text-secondary);
    font-style: italic;
}

.markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.markdown-preview table th,
.markdown-preview table td {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
}

.markdown-preview table th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
}

/* ============================================
   СТРАНИЦА УПРАВЛЕНИЯ УЧАСТНИКАМИ
   ============================================ */

.admin-members-container {
    padding: 24px;
}

.admin-members-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: nowrap;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.search-input {
    width: 100%;
    padding: 10px 38px 10px 14px;
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

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

.search-input:focus {
    border-color: rgba(255,255,255,.20);
    background-color: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.toolbar-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-filters select {
    min-width: 240px;
    padding: 10px 36px 10px 14px;
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    background-image: var(--icon-arrow-down);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

.toolbar-filters select:hover {
    border-color: rgba(255,255,255,.20);
    background-color: var(--bg-primary);
}

.toolbar-filters select:focus {
    border-color: rgba(255,255,255,.20);
    background-color: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

.toolbar-filters select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px;
}

.toolbar-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-actions .btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-actions .btn-secondary:hover {
    background-color: var(--bg-primary);
    border-color: rgba(255,255,255,.20);
    transform: translateY(-1px);
}

.toolbar-actions .btn-secondary svg {
    width: 16px;
    height: 16px;
}

.btn-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background-color: var(--bg-primary);
    border-color: var(--accent-blue);
}

.btn-secondary svg {
    width: 16px;
    height: 16px;
}

.members-table-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.members-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.members-table thead {
    background-color: var(--bg-tertiary);
}

.members-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.members-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 14px;
}

.members-table tbody tr:hover {
    background-color: var(--bg-tertiary);
}

.members-table tbody tr:last-child td {
    border-bottom: none;
}

.member-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Роли (группы) в списке участников: слева от аватара */
.member-role-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 2px;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    white-space: nowrap;
}

.role-badge--more {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.member-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.member-avatar-small--image {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.member-avatar-small--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#adminMembersApp .members-overview .test-results-overview__stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#adminMembersApp .members-filters .btn-submit {
    width: auto;
    min-width: 140px;
    margin-top: 0;
}

#adminMembersApp .members-quick-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#adminMembersApp .members-quick-filter {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#adminMembersApp .members-quick-filter:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

#adminMembersApp .members-quick-filter.is-active {
    color: #fff;
    border-color: rgba(70, 172, 235, 0.55);
    background: rgba(70, 172, 235, 0.28);
}

#adminMembersApp .members-problems {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    padding: 12px;
}

#adminMembersApp .members-problems__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#adminMembersApp .members-problems__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

#adminMembersApp .members-problems__count {
    font-size: 12px;
    color: var(--text-muted);
}

#adminMembersApp .members-problems__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

#adminMembersApp .members-problem-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
}

#adminMembersApp .members-problem-item__name {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 7px;
}

#adminMembersApp .members-problem-item__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#adminMembersApp .members-problem-chip {
    border-radius: 999px;
    border: 1px solid rgba(255, 123, 107, 0.35);
    background: rgba(255, 107, 107, 0.14);
    color: #ffc4bc;
    font-size: 11px;
    line-height: 1;
    padding: 5px 8px;
}

#adminMembersApp .members-problems__empty {
    color: var(--text-muted);
    font-size: 13px;
}

#adminMembersApp .members-board {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background:
        radial-gradient(1200px 300px at -10% -120%, rgba(88, 166, 255, .25), transparent 45%),
        radial-gradient(700px 220px at 110% 120%, rgba(87, 242, 135, .16), transparent 46%),
        rgba(255,255,255,.02);
    padding: 12px;
}

#adminMembersApp .members-board__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#adminMembersApp .members-board__title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-primary);
}

#adminMembersApp .members-board__subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

#adminMembersApp .members-board__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 8px;
}

#adminMembersApp .members-board-card {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    padding: 10px;
}

#adminMembersApp .members-board-card__label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

#adminMembersApp .members-board-card__value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.05;
}

#adminMembersApp .members-bulk {
    border: 1px solid rgba(88, 166, 255, .35);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(88,166,255,.11), rgba(88,166,255,.04)),
        rgba(255,255,255,.02);
    padding: 12px;
    margin-bottom: 12px;
}

#adminMembersApp .members-bulk__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

#adminMembersApp .members-bulk__title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
}

#adminMembersApp .members-bulk__hint {
    font-size: 12px;
    color: var(--text-muted);
}

#adminMembersApp .members-bulk__controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

#adminMembersApp .members-bulk__select {
    min-width: 200px;
    max-width: 280px;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.15);
    color: var(--text-primary);
}

#adminMembersApp .members-bulk__selected {
    font-size: 12px;
    color: var(--text-secondary);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    padding: 6px 10px;
    margin-left: auto;
}

#adminMembersApp .members-table .member-row-select,
#adminMembersApp #membersSelectAll {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-blue);
}

#adminMembersApp .member-risk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 6px;
}

#adminMembersApp .member-risk--low {
    border: 1px solid rgba(76,175,80,.35);
    background: rgba(76,175,80,.15);
    color: #b5f3bf;
}

#adminMembersApp .member-risk--medium {
    border: 1px solid rgba(255,193,7,.35);
    background: rgba(255,193,7,.14);
    color: #ffe7a1;
}

#adminMembersApp .member-risk--high {
    border: 1px solid rgba(244,67,54,.35);
    background: rgba(244,67,54,.15);
    color: #ffc4bc;
}

#editMemberModal .member-modal-user {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 6px;
}

#editMemberModal .member-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.16);
    overflow: hidden;
    flex: 0 0 auto;
}

#editMemberModal .member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#editMemberModal .member-modal-user__name {
    font-weight: 700;
    color: var(--text-primary);
}

#editMemberModal .member-modal-user__hint {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

#adminGroupsApp .groups-block-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 14px;
}

#adminGroupsApp .groups-block-title {
    margin: 0;
    font-size: 22px;
}

#adminGroupsApp .groups-block-subtitle {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

#adminGroupsApp .groups-block-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

#adminGroupsApp .groups-overview .test-results-overview__stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#adminGroupsApp .groups-filters {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-bottom: 16px;
    align-items: end;
}

#refreshGroupsBtnMobile {
    display: none;
}

#adminGroupsApp .groups-table td:nth-child(2),
#adminGroupsApp .groups-table td:nth-child(3) {
    font-weight: 600;
}

#adminGroupsApp .groups-table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

#adminGroupsApp .groups-table tbody tr {
    cursor: pointer;
}

#adminGroupsApp .groups-table tbody td {
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    padding-bottom: 12px;
}

#adminGroupsApp .groups-table tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#adminGroupsApp .groups-table tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#adminGroupsApp .groups-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(70, 172, 235, 0.35);
}

@media (max-width: 860px) {
    #adminMembersApp .members-filters {
        grid-template-columns: 1fr;
    }

    #adminGroupsApp .groups-block-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #adminGroupsApp .groups-block-actions {
        width: 100%;
    }

    #adminGroupsApp .groups-block-actions .btn-submit,
    #adminGroupsApp .groups-block-actions .btn-secondary {
        width: 100%;
    }

    #adminGroupsApp .groups-filters {
        grid-template-columns: 1fr;
    }

    #adminGroupsApp .groups-table {
        border-spacing: 0 8px;
    }

    #adminGroupsApp .groups-table tbody td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #refreshGroupsBtnMobile {
        display: inline-flex;
        width: 100%;
    }

    #refreshGroupsBtn {
        display: none;
    }

    #adminMembersApp .members-board__header {
        flex-direction: column;
        align-items: flex-start;
    }

    #adminMembersApp .members-board__grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    #adminMembersApp .members-filters .btn-submit {
        width: 100%;
    }

    #adminMembersApp .members-tools {
        flex-direction: column;
        align-items: stretch;
    }

    #membersExportCsvBtn,
    #membersExportXlsxBtn {
        width: 100%;
    }

    #adminMembersApp .members-bulk__controls {
        flex-direction: column;
        align-items: stretch;
    }

    #adminMembersApp .members-bulk__select {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    #adminMembersApp .members-bulk__selected {
        margin-left: 0;
    }
}

.table-actions {
    display: flex;
    gap: 4px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--btn-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.btn-icon-only {
    width: auto;
    height: auto;
    padding: 8px;
    min-width: 40px;
    min-height: 40px;
}

.btn-icon:hover {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: var(--text-primary);
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.btn-icon-danger:hover {
    background-color: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.pagination-btn.active {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-dots {
    padding: 0 8px;
    color: var(--text-muted);
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.btn-danger {
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background-color: #d32f2f;
}

/* ============================================
   СТРАНИЦА ПАНЕЛИ АДМИНИСТРАТОРА
   ============================================ */

.admin-panel-container {
    padding: 20px;
}

/* === Новая админ панель === */
.admin-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.admin-panel-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 20px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-panel-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.admin-panel-card--primary {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.admin-panel-card--primary:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}

.admin-panel-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.admin-panel-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.admin-panel-card:hover .admin-panel-card__icon {
    color: var(--text-primary);
    background: rgba(255,255,255,0.08);
}

/* Убираем все цветные варианты иконок - используем единый стиль */
.admin-panel-card__icon--blue,
.admin-panel-card__icon--green,
.admin-panel-card__icon--purple,
.admin-panel-card__icon--orange,
.admin-panel-card__icon--cyan,
.admin-panel-card__icon--red {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
}

.admin-panel-card:hover .admin-panel-card__icon--blue,
.admin-panel-card:hover .admin-panel-card__icon--green,
.admin-panel-card:hover .admin-panel-card__icon--purple,
.admin-panel-card:hover .admin-panel-card__icon--orange,
.admin-panel-card:hover .admin-panel-card__icon--cyan,
.admin-panel-card:hover .admin-panel-card__icon--red {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

.admin-panel-card__info {
    flex: 1;
    min-width: 0;
}

.admin-panel-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.2;
}

.admin-panel-card__description {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.admin-panel-card__stats {
    display: flex;
    gap: 20px;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
}

.admin-panel-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 80px;
}

.admin-panel-stat__label {
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
}

.admin-panel-stat__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

/* Убираем цветные акценты - все значения одного цвета */
.admin-panel-stat__value--success,
.admin-panel-stat__value--warning,
.admin-panel-stat__value--danger {
    color: var(--text-primary);
}

.admin-panel-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-block {
    width: 100%;
    justify-content: space-between;
}

.btn-block svg {
    flex-shrink: 0;
    margin-left: auto;
}

/* Адаптивность админ панели */
@media (max-width: 768px) {
    .admin-panel-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 0;
    }
    
    .admin-panel-card {
        padding: 16px;
    }
    
    .admin-panel-card__stats {
        flex-direction: column;
        gap: 12px;
    }
    
    .admin-panel-stat {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .admin-panel-stat__value {
        font-size: 20px;
    }
}

/* === Улучшенный дашборд статистики === */
.page-header-left {
    flex: 1;
    min-width: 0;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.page-actions--inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.page-actions-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.page-actions-group:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}

.page-actions-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.form-input--year {
    min-width: 120px;
    padding: 8px 32px 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: var(--icon-arrow-down);
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all 0.15s ease;
}

.form-input--year:hover {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}

.form-input--year:focus {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    box-shadow: none;
    outline: none;
}

.page-actions--inline .btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.4;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-stat-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: all 0.2s ease;
    text-align: center;
}

.dashboard-stat-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.dashboard-stat-card--total {
    border-left: 3px solid rgba(255,255,255,0.2);
}

.dashboard-stat-card--pending {
    border-left: 3px solid rgba(255,255,255,0.2);
}

.dashboard-stat-card--reviewed {
    border-left: 3px solid rgba(255,255,255,0.2);
}

.dashboard-stat-card--accepted {
    border-left: 3px solid rgba(255,255,255,0.2);
}

.dashboard-stat-card--rejected {
    border-left: 3px solid rgba(255,255,255,0.2);
}

.dashboard-stat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.dashboard-stat-card:hover .dashboard-stat-card__icon {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

.dashboard-stat-card__content {
    display: none; /* Скрываем контент с метками и описаниями */
}

.dashboard-stat-card__label {
    display: none; /* Скрываем метки */
}

.dashboard-stat-card__value {
    font-size: 44px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.dashboard-stat-card__value--success {
    color: var(--accent-green);
}

.dashboard-stat-card__value--warning {
    color: var(--accent-yellow);
}

.dashboard-stat-card__value--danger {
    color: #f44336;
}

.dashboard-stat-card__note {
    display: none; /* Скрываем описания */
}

.dashboard-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-chart-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.dashboard-chart-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
}

.dashboard-chart-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
}

.dashboard-chart-card__title-group {
    flex: 1;
    min-width: 0;
}

.dashboard-chart-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dashboard-chart-card__subtitle {
    font-size: 13px;
    color: var(--text-muted);
}

.dashboard-chart-card__meta {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}

.dashboard-chart-card__body {
    position: relative;
}

.dashboard-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-info-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
}

.dashboard-info-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
}

.dashboard-info-card__header {
    margin-bottom: 20px;
}

.dashboard-info-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dashboard-info-card__subtitle {
    font-size: 13px;
    color: var(--text-muted);
}

.dashboard-info-card__body {
    min-height: 200px;
}

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

.dashboard-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

.dashboard-user-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.dashboard-user-item--top {
    background: rgba(45, 63, 143, 0.1);
    border-color: rgba(45, 63, 143, 0.2);
}

.dashboard-user-item__rank {
    font-size: 20px;
    font-weight: 700;
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.dashboard-user-item__rank--gold {
    color: #FFD700;
}

.dashboard-user-item__rank--silver {
    color: #C0C0C0;
}

.dashboard-user-item__rank--bronze {
    color: #CD7F32;
}

.dashboard-user-item__info {
    flex: 1;
    min-width: 0;
}

.dashboard-user-item__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.dashboard-user-item__count {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}

.dashboard-dept-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-dept-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

.dashboard-dept-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.dashboard-dept-item__info {
    flex: 1;
    min-width: 0;
}

.dashboard-dept-item__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-dept-item__bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}

.dashboard-dept-item__fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(74, 158, 255, 0.8), rgba(54, 80, 178, 0.9));
    transition: width 0.3s ease;
}

.dashboard-dept-item__count {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    min-width: 50px;
    text-align: right;
}

.dashboard-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.dashboard-danger-zone {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
}

.dashboard-danger-zone__header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.dashboard-danger-zone__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    flex-shrink: 0;
}

.dashboard-danger-zone__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dashboard-danger-zone__description {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.dashboard-danger-zone__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.dashboard-danger-zone__status {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
}

.modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.modal-icon--danger {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.modal-header {
    margin-bottom: 20px;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.modal-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.modal-content-small {
    max-width: 480px;
}

/* Адаптивность дашборда */
@media (max-width: 1200px) {
    .dashboard-charts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .dashboard-info-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-stat-card {
        padding: 16px;
    }
    
    .dashboard-stat-card__value {
        font-size: 24px;
    }
    
    .dashboard-chart-card,
    .dashboard-info-card {
        padding: 16px;
    }
    
    .dashboard-danger-zone {
        padding: 16px;
    }
    
    .dashboard-danger-zone__actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dashboard-danger-zone__status {
        margin-left: 0;
        text-align: center;
    }
}

.admin-panel-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar-left {
    flex: 1;
    min-width: 0;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.status-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    white-space: nowrap;
    position: relative;
}

.filter-btn__icon {
    font-size: 14px;
    line-height: 1;
}

.filter-btn__text {
    flex: 1;
}

.filter-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 11px;
    font-weight: 700;
    margin-left: 2px;
}

.filter-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-blue);
    transform: translateY(-1px);
}

.filter-btn.active {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
    box-shadow: 0 2px 8px rgba(45, 63, 143, 0.3);
}

.filter-btn.active .filter-btn__count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 280px;
}

.toolbar-search__icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 1;
}

.toolbar-search__input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: all var(--t-fast) var(--ease);
}

.toolbar-search__input:focus {
    border-color: var(--accent-blue);
    background-color: var(--bg-primary);
    box-shadow: 0 0 0 2px rgba(45, 63, 143, 0.2);
}

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

.toolbar-search__clear {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    z-index: 1;
}

.toolbar-search__clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.toolbar-search__clear svg {
    width: 14px;
    height: 14px;
}

.toolbar-filters-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-select {
    min-width: 160px;
    padding: 10px 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: all var(--t-fast) var(--ease);
}

.toolbar-select--status {
    min-width: 200px;
    font-weight: 500;
}

.toolbar-select:hover {
    border-color: var(--accent-blue);
    background-color: var(--bg-tertiary);
}

.toolbar-select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(45, 63, 143, 0.2);
}

.toolbar-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px;
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.toolbar-active-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.active-filters__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.active-filters__list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(45, 63, 143, 0.15);
    border: 1px solid rgba(45, 63, 143, 0.3);
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 600;
}

.active-filter-tag__remove {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    transition: all var(--t-fast) var(--ease);
}

.active-filter-tag__remove:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.active-filters__clear {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}

.active-filters__clear:hover {
    background: var(--bg-primary);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

@media (max-width: 960px) {
    .admin-panel-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .toolbar-left,
    .toolbar-right {
        width: 100%;
    }
    
    .toolbar-search {
        min-width: 0;
        width: 100%;
    }
    
    .toolbar-select {
        flex: 1;
        min-width: 0;
    }
}

/* Статистика заявок */
.applications-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: none;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-blue);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card--all::before {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
}

.stat-card--pending::before {
    background: #ffc107;
}

.stat-card--accepted::before {
    background: var(--accent-green);
}

.stat-card--rejected::before {
    background: rgba(255, 255, 255, 0.2);
}

.stat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.stat-card--all .stat-card__icon {
    background: rgba(74, 158, 255, 0.15);
    color: var(--accent-blue);
}

.stat-card--pending .stat-card__icon {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.stat-card--accepted .stat-card__icon {
    background: rgba(76, 175, 80, 0.15);
    color: var(--accent-green);
}

.stat-card--rejected .stat-card__icon {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.stat-card:hover .stat-card__icon {
    transform: scale(1.1) rotate(5deg);
}

.stat-card__content {
    flex: 1;
    min-width: 0;
}

.stat-card__value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 6px;
    transition: all 0.3s ease;
}

.stat-card:hover .stat-card__value {
    transform: scale(1.05);
}

.stat-card__label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .applications-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .stat-card {
        padding: 16px;
    }
    
    .stat-card__value {
        font-size: 24px;
    }
    
    .stat-card__icon {
        width: 40px;
        height: 40px;
    }
}

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

.applications-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
    animation: listFadeIn 0.3s ease-out;
}

.applications-loader {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
}

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

.application-card {
    background-color: var(--bg-secondary);
    border: none;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: cardFadeIn 0.4s ease-out;
    position: relative;
    overflow: hidden;
}

.application-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-blue);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.application-card:hover {
    box-shadow: 0 8px 24px rgba(74, 158, 255, 0.2);
    transform: translateY(-4px);
}

.application-card:hover::before {
    transform: scaleX(1);
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анимация одобрения заявки */
.application-approved-animation {
    animation: approvePulse 2s ease-out;
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3), 0 8px 24px rgba(76, 175, 80, 0.2);
}

.application-approved-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05));
    animation: approveShine 2s ease-out;
    pointer-events: none;
    z-index: 1;
}

.application-approved-animation::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 80px;
    color: var(--accent-green);
    font-weight: 900;
    opacity: 0;
    animation: approveCheckmark 2s ease-out;
    z-index: 2;
    pointer-events: none;
}

@keyframes approvePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes approveShine {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes approveCheckmark {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-180deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5) rotate(0deg);
        opacity: 0;
    }
}

/* Анимация в модальном окне */
.modal-content.application-approval-celebration {
    animation: celebrationModal 3s ease-out;
    position: relative;
}

.modal-content.application-approval-celebration::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.2) 0%, transparent 70%);
    animation: celebrationRipple 3s ease-out;
    pointer-events: none;
    z-index: 1000;
}

@keyframes celebrationModal {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.02);
    }
    20% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.01);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes celebrationRipple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.application-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.application-card-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.application-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.application-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.application-card-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.application-card-id {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.application-card-email {
    font-size: 12px;
    color: var(--text-secondary);
}

.application-card-status {
    flex-shrink: 0;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge.status-pending {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.15));
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-badge.status-reviewed {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.25), rgba(74, 158, 255, 0.15));
    color: #4a9eff;
    border: 1px solid rgba(74, 158, 255, 0.3);
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.15);
}

.status-badge.status-accepted {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.25), rgba(76, 175, 80, 0.15));
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
}

.status-badge.status-rejected {
    background: linear-gradient(135deg, rgba(160, 160, 160, 0.25), rgba(160, 160, 160, 0.15));
    color: #a0a0a0;
    border: 1px solid rgba(160, 160, 160, 0.3);
    box-shadow: 0 2px 8px rgba(160, 160, 160, 0.15);
}

.status-badge.status-failed {
    background: linear-gradient(135deg, rgba(160, 160, 160, 0.25), rgba(160, 160, 160, 0.15));
    color: #a0a0a0;
    border: 1px solid rgba(160, 160, 160, 0.3);
    box-shadow: 0 2px 8px rgba(160, 160, 160, 0.15);
}

.status-badge.status-neutral {
    background: linear-gradient(135deg, rgba(160, 160, 160, 0.25), rgba(160, 160, 160, 0.15));
    color: #a0a0a0;
    border: 1px solid rgba(160, 160, 160, 0.3);
    box-shadow: 0 2px 8px rgba(160, 160, 160, 0.15);
}

.status-badge.status-passed {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.25), rgba(76, 175, 80, 0.15));
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
}

.test-result-status {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.test-result-status.passed {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.25), rgba(76, 175, 80, 0.15));
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
}

.test-result-status.failed,
.test-result-status.neutral {
    background: linear-gradient(135deg, rgba(160, 160, 160, 0.25), rgba(160, 160, 160, 0.15));
    color: #a0a0a0;
    border: 1px solid rgba(160, 160, 160, 0.3);
    box-shadow: 0 2px 8px rgba(160, 160, 160, 0.15);
}

.status-badge.status-deleted {
    background: linear-gradient(135deg, rgba(160, 160, 160, 0.25), rgba(160, 160, 160, 0.15));
    color: #a0a0a0;
    border: 1px solid rgba(160, 160, 160, 0.3);
    box-shadow: 0 2px 8px rgba(160, 160, 160, 0.15);
}

@keyframes statusPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(0.98);
    }
}

.application-card-preview {
    margin-bottom: 16px;
    padding: 12px;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
}

.preview-question {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.preview-question strong {
    color: var(--text-primary);
}

.application-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.application-card-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.application-card-date svg {
    width: 14px;
    height: 14px;
}

.btn-view {
    padding: 6px 12px;
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view:hover {
    background-color: var(--accent-blue-hover);
}

.applications-periods-admin {
    width: 100%;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012));
    box-shadow: 0 10px 24px rgba(0,0,0,0.24);
}

.applications-periods-admin__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 14px;
    align-items: end;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.applications-periods-admin__title {
    margin: 0 0 4px;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.applications-periods-admin__subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
    max-width: 760px;
}

.applications-periods-admin__actions {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(130px, auto);
    gap: 10px;
    align-items: end;
}

.applications-periods-admin__form {
    display: grid;
    grid-template-columns: 110px minmax(240px, 1fr) repeat(2, minmax(210px, 1fr)) 160px auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

.applications-periods-admin__form .form-group {
    margin: 0;
}

.applications-periods-admin__form .form-group > span {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.54);
}

.applications-periods-admin__form input,
.applications-periods-admin__form select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(8,12,18,0.36);
    color: var(--text-primary);
    padding: 9px 11px;
}

.applications-periods-admin__form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.applications-periods-admin__feedback {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    border: 1px solid rgba(76,175,80,.28);
    background: rgba(76,175,80,.1);
    color: #9ae9a0;
}

.applications-periods-admin__feedback.is-error {
    border-color: rgba(244,67,54,.28);
    background: rgba(244,67,54,.1);
    color: #ff9d97;
}

.applications-periods-admin__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 12px;
}

.applications-periods-admin__empty {
    grid-column: 1 / -1;
    padding: 16px;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,0.13);
    color: var(--text-secondary);
    background: rgba(255,255,255,0.02);
}

.applications-period-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
}

.applications-period-row__main {
    min-width: 0;
}

.applications-period-row__title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.applications-period-row__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.applications-period-row__quarter {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(74,158,255,.16);
    color: #9ad3ff;
    font-size: 12px;
    font-weight: 700;
}

.applications-period-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--text-secondary);
    font-size: 12px;
}

.applications-period-row__actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .applications-periods-admin__form {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 980px) {
    .applications-periods-admin {
        padding: 16px;
    }

    .applications-periods-admin__header {
        grid-template-columns: 1fr;
    }

    .applications-periods-admin__actions {
        grid-template-columns: 1fr 1fr;
    }

    .applications-periods-admin__list {
        grid-template-columns: 1fr;
    }

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

    .applications-period-row__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .applications-periods-admin__actions {
        grid-template-columns: 1fr;
    }

    .applications-periods-admin__form {
        grid-template-columns: 1fr;
    }
}

.loading-message,
.empty-message,
.error-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 16px;
}

.error-message {
    color: #f44336;
}

/* Улучшенное пустое состояние */
.empty-message {
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.empty-message::before {
    content: '';
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    background-image: var(--icon-check-circle);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
}

/* Skeleton loading */
.skeleton-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.skeleton-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.skeleton-text {
    flex: 1;
    height: 16px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.skeleton-text--short {
    width: 60%;
    margin-top: 8px;
}

.skeleton-preview {
    height: 60px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 16px;
}

.skeleton-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.skeleton-badge {
    width: 80px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
}

/* Модальное окно просмотра заявки */
.application-view {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

/* Custom scrollbar for application modal (WebKit) */
.application-view::-webkit-scrollbar {
    width: 10px;
}

.application-view::-webkit-scrollbar-track {
    background: transparent;
}

.application-view::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.application-view::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.application-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.application-user-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.application-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
}

.application-user-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.application-user-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.application-user-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.application-user-profile-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    transform: scale(1.05);
}

.application-user-profile-link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.application-user-email {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.application-date {
    font-size: 12px;
    color: var(--text-muted);
}

.application-status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}
.app-review-queue{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin: 0 0 12px;
}
.app-review-pill{
    display:inline-flex;
    align-items:center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}
.app-review-pill--pending{
    border-color: rgba(255, 193, 7, 0.35);
    color: #ffc107;
    background: rgba(255, 193, 7, 0.12);
}

.application-questions {
    margin-bottom: 24px;
}

.application-question {
    margin-bottom: 24px;
    padding: 16px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border-left: 4px solid var(--accent-blue);
}

.application-question h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.application-answer {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
}

.application-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 2px solid var(--border-color);
}

.btn-success {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--accent-green);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-success:hover {
    background-color: #45a049;
}

.btn-success svg {
    width: 16px;
    height: 16px;
}




/* ============================================
   RESPONSIVE + SCROLL FIXES (v26)
   ============================================ */

/* Allow long modals (editor/member info) to scroll inside viewport */
.modal-content{
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Admin pages tree can grow large: keep it scrollable */
.admin-pages-tree{
    max-height: calc(100vh - var(--top-bar-height) - 180px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tables should not break layout on small screens */
.members-table-container{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.members-table{
    min-width: 860px;
}

/* Sidebar navigation should always be scrollable on smaller heights */
.sidebar-nav{
    overscroll-behavior: contain;
}

/* Medium screens: reduce paddings */
@media (max-width: 1024px) {
    .top-bar-inner{
        padding: 0 24px;
    }
    .main-content{
        padding: 36px 28px;
    }
}

/* Small screens: tighten top bar + buttons */
@media (max-width: 480px) {
    .top-bar-inner{
        padding: 0 14px;
    }
    .logo-top{
        font-size: 18px;
    }
    .btn-apply-top{
        padding: 8px 12px;
        font-size: 12px;
    }
    .user-name{
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .admin-pages-toolbar{
        flex-wrap: wrap;
    }
}


/* ===== FIX: границы страницы + перенос длинного текста ===== */
.breadcrumbs,
.page-title,
.page-title-large,
.page-meta,
.card,
.pages-list-item,
.pages-list-title,
.members-table th,
.members-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.members-table th,
.members-table td {
    min-width: 0;
}


/* ===== Apply form (code6-like fields only) ===== */
.apply-steps { margin-bottom: 14px; }
.apply-step-indicator { font-size: 13px; color: var(--text-secondary); font-weight: 600; letter-spacing: .02em; }
.apply-step-counter { color: var(--text-muted); font-weight: 700; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.apply-form input[type="text"],
.apply-form input[type="number"],
.apply-form input[type="url"],
.apply-form select {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
}

.apply-form select { cursor: pointer; }

.hint { margin-top: 6px; font-size: 12px; color: var(--text-muted); }

.apply-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.apply-actions--two { justify-content: space-between; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary:hover { filter: brightness(1.03); }

.apply-legal {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
}

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

/* ===== Admin Applications: announce box ===== */
.admin-announce{margin:0 0 20px;padding:20px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);transition:all var(--t-fast) var(--ease);}
.admin-announce:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05);}
.admin-announce__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 16px;}
.admin-announce__head-left{flex:1;}
.admin-announce__head-right{flex-shrink:0;}
.admin-announce__title-row{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap;}
.admin-announce__title{font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:rgba(255,255,255,.88);}
.admin-announce__status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:.04em;}
.admin-announce__status-badge--open{background:rgba(76,175,80,.15);border:1px solid rgba(76,175,80,.3);color:#4caf50;}
.admin-announce__status-badge--closed{background:rgba(255,152,0,.15);border:1px solid rgba(255,152,0,.3);color:#ff9800;}
.admin-announce__status-indicator{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2s infinite;}
.admin-announce__status-badge--closed .admin-announce__status-indicator{animation:none;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.admin-announce__sub{font-size:13px;color:rgba(255,255,255,.68);margin-top:4px;}
.admin-announce__timer{margin-top:8px;font-size:12px;font-weight:600;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:6px;}
.admin-announce__timer:before{content:"⏱";font-size:14px;}
.admin-announce__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;}
.admin-announce__note{grid-column:1 / -1;}
.admin-announce__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
.admin-announce__quick-actions{display:flex;gap:8px;margin-left:auto;}
.btn-quick{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--t-fast) var(--ease);}
.btn-quick:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.20);color:var(--text-primary);transform:translateY(-1px);}
.btn-quick svg{width:14px;height:14px;stroke:currentColor;}
.admin-announce__actions .btn-primary,.admin-announce__actions .btn-secondary{display:inline-flex;align-items:center;gap:6px;}
.admin-announce__actions .btn-primary svg,.admin-announce__actions .btn-secondary svg{width:16px;height:16px;stroke:currentColor;}
.admin-announce__status{margin-top:12px;font-size:13px;color:rgba(255,255,255,.72);padding-top:12px;border-top:1px solid rgba(255,255,255,.08);}
@media(max-width:720px){.admin-announce__grid{grid-template-columns:1fr;}.admin-announce__actions{justify-content:stretch;flex-direction:column;}.admin-announce__actions .btn-primary,.admin-announce__actions .btn-secondary{flex:1;width:100%;}.admin-announce__quick-actions{width:100%;margin-left:0;}.btn-quick{flex:1;justify-content:center;}}

/* simple switch */
.switch{position:relative;display:inline-block;width:44px;height:26px;}
.switch input{opacity:0;width:0;height:0;}
.switch__slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);transition:.2s;border-radius:999px;}
.switch__slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;top:2px;background:rgba(255,255,255,.92);transition:.2s;border-radius:50%;}
.switch input:checked + .switch__slider{background:rgba(0,91,255,.65);border-color:rgba(0,91,255,.75);}
.switch input:checked + .switch__slider:before{transform:translateX(18px);}

/* ===== Site footer ===== */
.site-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.18));backdrop-filter:blur(12px)}
.site-footer__inner{max-width:var(--layout-max);margin:0 auto;padding:16px var(--layout-padding) 18px;display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap}
.site-footer__links{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.site-footer__link{color:rgba(255,255,255,.74);text-decoration:none;font-size:13px}
.site-footer__link:hover{color:#fff;text-decoration:none}
.site-footer__signature{opacity:.32;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

.content-section h2[id]{scroll-margin-top:calc(var(--top-bar-height) + 24px)}

/* ===== Privacy & Cookies page ===== */
.policy-page{
    animation: policyFadeIn .28s ease;
}

@keyframes policyFadeIn{
    from{ opacity:0; transform: translateY(8px); }
    to{ opacity:1; transform: translateY(0); }
}

.policy-page__header .page-title-large{
    margin-bottom: 10px;
}

.policy-page__subtitle{
    margin: 0;
    color: var(--text-secondary);
    max-width: 760px;
    line-height: 1.55;
}

.policy-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.policy-meta__item{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-size: 13px;
}

.policy-doc{
    display: grid;
    gap: 14px;
}

.policy-card{
    padding: 18px 18px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.policy-card--muted{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

.policy-doc .policy-card h2{
    margin-top: 0;
    margin-bottom: 10px;
}

.policy-doc .policy-card p:last-child,
.policy-doc .policy-card ul:last-child{
    margin-bottom: 0;
}

.policy-doc ul{
    padding-left: 20px;
}

.policy-doc li + li{
    margin-top: 6px;
}

.policy-table-wrap{
    margin: 10px 0 12px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    overflow-x: auto;
    background: rgba(0,0,0,0.16);
}

.policy-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.policy-table th,
.policy-table td{
    padding: 12px 13px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    vertical-align: top;
    font-size: 14px;
    line-height: 1.45;
}

.policy-table th{
    position: sticky;
    top: 0;
    background: rgba(32, 32, 32, 0.96);
    color: var(--text-primary);
    font-weight: 700;
}

.policy-table tbody tr:last-child td{
    border-bottom: 0;
}

.policy-contacts{
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.14);
    color: var(--text-secondary);
}

@media (max-width: 768px){
    .policy-card{
        padding: 14px;
        border-radius: 12px;
    }

    .policy-meta__item{
        width: 100%;
        justify-content: space-between;
    }

    .policy-table{
        min-width: 560px;
    }
}

/* Registration policy agreement */
.form-policy{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.8)}
.form-policy input{margin-top:2px;accent-color:#4ea1ff}
.form-policy a{color:#9fd0ff;text-decoration:none}
.form-policy a:hover{text-decoration:underline}


/* ===== Inline styles moved from pages/apply.php ===== */
/* ===== Apply wizard (scoped). Keeps global theme intact ===== */
.apply-form-section{position:relative;}
.apply-wizard__steps{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 14px;}
.apply-wizard__pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-weight:800;font-size:13px;}
.apply-wizard__progress{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.apply-wizard__bar{height:100%;width:50%;border-radius:999px;background:rgba(0,91,255,.90);transition:width .22s ease;}
.apply-step{display:none;}
.apply-step.is-active{display:block;}
.apply-form .form-group{margin:0 0 14px;}
.apply-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:720px){.apply-form .form-row{grid-template-columns:1fr;}}
.apply-form input[type="text"], .apply-form input[type="date"], .apply-form select, .apply-form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:inherit;
  outline:none;
  font:inherit;
}
.apply-form textarea{resize:vertical;}
.apply-form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:42px;}
.apply-select{position:relative;}
.apply-select:after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:10px;
  height:10px;
  transform:translateY(-50%) rotate(45deg);
  border-right:2px solid rgba(255,255,255,.55);
  border-bottom:2px solid rgba(255,255,255,.55);
  pointer-events:none;
}
.apply-form input:focus, .apply-form textarea:focus, .apply-form select:focus{
  border-color:rgba(0,91,255,.50);
  box-shadow:0 0 0 3px rgba(0,91,255,.18);
}
.apply-error{display:none;margin-top:6px;font-size:12px;font-weight:800;color:rgba(255,120,120,.95);}
.apply-alert{display:none;margin:10px 0 14px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,120,120,.35);background:rgba(255,0,0,.08);font-weight:800;}
.apply-alert.is-show{display:block;}
.apply-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;}
.apply-actions .left{display:flex;gap:10px;}
.field-meta{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:12px;color:rgba(255,255,255,.55);font-weight:700;}
.field-meta__left{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.field-meta__right{white-space:nowrap;color:rgba(255,255,255,.75);}

/* buttons weight */
.btn-submit-apply, .apply-btn{font-weight:600;}
.btn-submit-apply.apply-next, .apply-btn--back{font-weight:500;}

/* submit button gold */
.btn-submit-apply--gold{background:linear-gradient(180deg, rgba(255,214,102,.98), rgba(214,169,55,.98));border-color:rgba(255,214,102,.35);color:#1b1b1b;}
.btn-submit-apply--gold:hover{filter:brightness(1.03);}

/* agreement */
.apply-agree{margin-top:10px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);}
.apply-agree__input{position:absolute;opacity:0;pointer-events:none;}
.apply-agree__label{display:flex;gap:12px;align-items:center;cursor:pointer;user-select:none;}
/* force checkbox square even if some global styles affect nested elements */
.apply-agree .apply-agree__box{display:inline-block !important;width:18px !important;min-width:18px !important;height:18px !important;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);margin-top:0;flex:0 0 auto;position:relative;box-sizing:border-box;}
.apply-agree__box:after{content:"";position:absolute;left:5px;top:2px;width:5px;height:10px;border-right:2px solid rgba(0,0,0,.65);border-bottom:2px solid rgba(0,0,0,.65);transform:rotate(45deg);opacity:0;}
.apply-agree__input:checked + .apply-agree__label .apply-agree__box{background:rgba(214,169,55,.98);border-color:rgba(255,214,102,.45);box-shadow:0 0 0 3px rgba(214,169,55,.22);}
.apply-agree__input:checked + .apply-agree__label .apply-agree__box:after{opacity:1;}
.apply-agree__text{font-weight:600;line-height:1.35;color:rgba(255,255,255,.86);}

/* status card */
.apply-status{margin:10px 0 14px;padding:14px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);}
.apply-status__title{font-weight:900;margin:0 0 6px;}
.apply-status__row{display:flex;flex-wrap:wrap;gap:10px 14px;color:rgba(255,255,255,.78);font-weight:700;font-size:13px;}
.apply-status__badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);font-weight:900;}

/* simple status text (instead of card) */
.apply-info-text{margin:10px 0 14px;color:rgba(255,255,255,.9);font-weight:600;line-height:1.35;}
.apply-info-text .muted{color:rgba(255,255,255,.65);font-weight:700;margin-left:6px;}

.apply-announce{margin:10px 0 14px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.04);}
.apply-announce__title{font-weight:800;letter-spacing:.02em;margin-bottom:6px;}
.apply-announce__row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.apply-announce__text{color:rgba(255,255,255,.85);line-height:1.35;}
.apply-announce__timer{font-variant-numeric:tabular-nums;font-weight:800;color:#ffffff;opacity:.9;white-space:nowrap;}

/* Статус (например, "Заявка одобрена") внутри карточки приёма заявок */
.apply-announce__status{margin-top:10px;}

.apply-approved{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  padding:14px 14px 12px;
}
.apply-approved__head{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.apply-approved__icon{
  width:36px;height:36px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(46, 204, 113, .12);
  border:1px solid rgba(46, 204, 113, .35);
  color:rgba(46, 204, 113, .95);
  flex:0 0 auto;
}
.apply-approved__title{
  font-weight:900;
  font-size:16px;
  margin:0 0 4px;
}
.apply-approved__text{
  margin:0;
  color:rgba(255,255,255,.82);
  font-weight:600;
  line-height:1.35;
}
.apply-approved__meta{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.60);
  font-weight:600;
  font-size:13px;
}


.apply-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font-weight:700;cursor:pointer;user-select:none;}
.apply-btn--primary{background:rgba(0,91,255,.92);border-color:rgba(0,91,255,.92);color:#fff;}
.apply-btn--back{white-space:nowrap;min-width:108px;color:rgba(255,255,255,.92);font-weight:500;}
/* Keep existing submit button size for Next as well */
.btn-submit-apply.apply-next{width:100%;min-height:44px;padding:12px 18px;font-weight:500;}
/* Guest notice (no overlap) */
.apply-guard{
  position:relative;
  margin-top:12px;
  border-radius:18px;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  z-index:0;
}
.apply-guard__card{
  max-width:520px;width:100%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,10,12,.70);
  padding:16px 16px 14px;
}
.apply-guard__title{margin:0 0 6px;font-size:18px;font-weight:900;}
.apply-guard__text{margin:0 0 12px;color:rgba(255,255,255,.78);font-weight:600;line-height:1.35;}
.apply-guard__actions{display:flex;gap:10px;flex-wrap:wrap;}
.apply-guard__actions a{ text-decoration:none; }

#applyStep1 .btn-submit-apply{width:100%;justify-content:center;}
#applyStep1 .apply-actions{display:block;}
#applyStep1 .apply-actions .left{display:none;}



.apply-form select{
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  background:rgba(0,0,0,.22);
}
.apply-form select:hover{
  border-color:rgba(255,255,255,.22);
}
.apply-form select option{
  background:#0b0f1a;
  color:#ffffff;
}

/* Шаги: сдержанный вид (done = зелёный + галочка, next = белый, todo = серый) */
.steps-list li{margin-bottom: 18px;}
.steps-list li::before{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    color: #d9d9d9;
}

.steps-list li.is-done::before{
    content: "✓";
    background: rgba(58, 210, 111, .12);
    border-color: rgba(58, 210, 111, .55);
    color: var(--accent-green);
}

.steps-list li.is-done strong,
.steps-list li.is-done p{
    color: var(--accent-green);
}

.steps-list li.is-next strong{color:#ffffff;}
.steps-list li.is-next p{color: var(--text-secondary);}

.steps-list li.is-todo strong{color: rgba(217,217,217,.6);}
.steps-list li.is-todo p{color: rgba(217,217,217,.45);}


/* --- Fix: wider edit member modal on desktop --- */
#editMemberModal .modal-content{
    max-width: 980px;
    width: 92vw;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
#editMemberModal .modal-content h2{
    flex-shrink: 0;
    margin-bottom: 24px;
}
#editMemberModal .modal-content form{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
#editMemberModal .modal-content .form-group,
#editMemberModal .modal-content .member-profile-card,
#editMemberModal .modal-content .member-qualifications,
#editMemberModal .modal-content .member-ranks,
#editMemberModal .modal-content .member-flags-grid,
#editMemberModal .modal-content .info-card{
    flex-shrink: 0;
}

/* Ensure Inter in the whole member edit card (including buttons) */
#editMemberModal,
#editMemberModal *{
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#editMemberModal button,
#editMemberModal .btn-submit,
#editMemberModal .btn-secondary,
#editMemberModal .btn-danger{
    font-family: inherit;
}
@media (min-width: 900px){
    #editMemberModal .modal-content{
        padding: 28px 32px;
    }
    /* Info cards: 2 columns on desktop */
    #editMemberModal .info-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 14px;
    }
}
/* On small screens keep single column */
@media (max-width: 899px){
    #editMemberModal .modal-content{
        width: calc(100vw - 20px);
        padding: 20px 16px;
    }
    #editMemberModal .info-grid{
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 14px;
    }
}

/* --- Consistent content offsets from sidebar --- */
.content-page,
.dashboard-content,
.page-header,
.table-container,
.chart-card,
.card,
.stats-grid,
.dashboard-grid{
    box-sizing: border-box;
    width: 100%;
}
/* Prevent elements from adding unexpected horizontal offsets */
.content-page > *:first-child{
    margin-top: 0;
}

/* --- Applications review modal: cleaner layout --- */
#viewApplicationModal .modal-content-large{
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#viewApplicationModal .application-view{
    flex: 1;
    overflow: auto;
    padding-right: 6px; /* makes scrollbar not overlap content */
}
#viewApplicationModal .application-header{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}
#viewApplicationModal .application-user-info{
    display: flex;
    gap: 14px;
    align-items: center;
}
#viewApplicationModal .application-questions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 960px){
    #viewApplicationModal .application-questions{
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    #viewApplicationModal .application-questions .application-section{
        grid-column: 1 / -1;
    }
}
#viewApplicationModal .application-section{
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .9;
}
#viewApplicationModal .application-question{
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 12px 14px;
}
#viewApplicationModal .application-question h3{
    font-size: 12px;
    margin: 0 0 6px 0;
    opacity: .7;
    text-transform: uppercase;
    letter-spacing: .06em;
}
#viewApplicationModal .application-answer{
    font-size: 14px;
    line-height: 1.35;
    word-break: break-word;
}
#viewApplicationModal #viewApplicationModal .application-actions .btn{
    min-width: 140px;
}

/* --- Apply page: closer to code6 apply style, adapted to current theme --- */
.apply-wrap{
    max-width: 980px;
    margin: 0 auto;
}
.apply-hero{
    margin-bottom: 18px;
    padding: 18px 18px 10px 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 14px;
}
.apply-hero__title{
    font-size: 36px;
    line-height: 1.1;
    margin: 0 0 8px 0;
    letter-spacing: .01em;
}
.apply-hero__subtitle{
    margin: 0;
    opacity: .75;
    font-size: 14px;
}

/* === Улучшенный дизайн страницы подачи заявки === */
.apply-hero-enhanced {
    background: linear-gradient(135deg, rgba(45, 63, 143, 0.15), rgba(54, 80, 178, 0.2));
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.apply-hero-enhanced::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(74, 158, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.apply-hero-enhanced__content {
    position: relative;
    z-index: 1;
}

.apply-hero-enhanced__title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.9));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.apply-hero-enhanced__subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.apply-hero-enhanced__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-top: 8px;
}

.apply-hero-enhanced__badge svg {
    flex-shrink: 0;
}

/* Улучшенные карточки фич */
.features-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.feature-card-enhanced {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card-enhanced:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(74, 158, 255, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.feature-card-enhanced:hover::before {
    opacity: 1;
}

.feature-card-enhanced--1:hover {
    border-color: rgba(76, 175, 80, 0.4);
}

.feature-card-enhanced--1::before {
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
}

.feature-card-enhanced--2:hover {
    border-color: rgba(255, 193, 7, 0.4);
}

.feature-card-enhanced--2::before {
    background: linear-gradient(90deg, transparent, var(--accent-yellow), transparent);
}

.feature-card-enhanced--3:hover {
    border-color: rgba(156, 39, 176, 0.4);
}

.feature-card-enhanced--3::before {
    background: linear-gradient(90deg, transparent, #9c27b0, transparent);
}

.feature-card-enhanced--4:hover {
    border-color: rgba(255, 152, 0, 0.4);
}

.feature-card-enhanced--4::before {
    background: linear-gradient(90deg, transparent, #ff9800, transparent);
}

.feature-card-enhanced__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.08);
    color: var(--accent-blue);
    transition: all 0.3s ease;
}

.feature-card-enhanced:hover .feature-card-enhanced__icon {
    transform: scale(1.1) rotate(5deg);
    background: rgba(74, 158, 255, 0.2);
}

.feature-card-enhanced--1 .feature-card-enhanced__icon {
    background: rgba(76, 175, 80, 0.15);
    color: var(--accent-green);
}

.feature-card-enhanced--2 .feature-card-enhanced__icon {
    background: rgba(255, 193, 7, 0.15);
    color: var(--accent-yellow);
}

.feature-card-enhanced--3 .feature-card-enhanced__icon {
    background: rgba(156, 39, 176, 0.15);
    color: #9c27b0;
}

.feature-card-enhanced--4 .feature-card-enhanced__icon {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.feature-card-enhanced__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--text-primary);
    line-height: 1.3;
}

.feature-card-enhanced__description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Улучшенная секция формы */
.apply-form-section-enhanced {
    margin-top: 48px;
}

.apply-form-section-enhanced__header {
    margin-bottom: 24px;
}

.apply-form-section-enhanced__title-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apply-form-section-enhanced__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.apply-form-section-enhanced__title svg {
    flex-shrink: 0;
    color: var(--accent-green);
}

.apply-form-section-enhanced__subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    padding-left: 36px;
}

/* Улучшенные статусные карточки */
.apply-status-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 24px;
    border: 1px solid;
    transition: all 0.3s ease;
}

.apply-status-card--success {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.3);
}

.apply-status-card--info {
    background: rgba(74, 158, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.3);
}

.apply-status-card--warning {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
}

.apply-status-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.apply-status-card--success .apply-status-card__icon {
    background: rgba(76, 175, 80, 0.2);
    color: var(--accent-green);
}

.apply-status-card--info .apply-status-card__icon {
    background: rgba(74, 158, 255, 0.2);
    color: var(--accent-blue);
}

.apply-status-card--warning .apply-status-card__icon {
    background: rgba(255, 193, 7, 0.2);
    color: var(--accent-yellow);
}

.apply-status-card__content {
    flex: 1;
    min-width: 0;
}

.apply-status-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.apply-status-card__description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.apply-status-card__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.apply-status-card__meta-item {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Улучшенный announce */
.apply-announce-enhanced {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    margin-bottom: 24px;
}

.apply-announce-enhanced__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 158, 255, 0.15);
    color: var(--accent-blue);
    flex-shrink: 0;
}

.apply-announce-enhanced__content {
    flex: 1;
    min-width: 0;
}

.apply-announce-enhanced__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.apply-announce-enhanced__text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 8px 0;
}

.apply-announce-enhanced__timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-blue);
    font-variant-numeric: tabular-nums;
}

/* Улучшенный guard */
.apply-guard-enhanced {
    text-align: center;
    padding: 48px 32px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    margin-bottom: 24px;
}

.apply-guard-enhanced__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 158, 255, 0.15);
    color: var(--accent-blue);
}

.apply-guard-enhanced__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.apply-guard-enhanced__text {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 24px 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.apply-guard-enhanced__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Улучшенный wizard */
.apply-wizard-enhanced {
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
}

.apply-wizard-enhanced__header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.apply-wizard-enhanced__step-indicator {
    flex-shrink: 0;
}

.apply-wizard-enhanced__step-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.apply-wizard-enhanced__progress {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.apply-wizard-enhanced__progress-bar {
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, var(--accent-blue), rgba(54, 80, 178, 0.9));
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
}

/* Улучшенная форма */
.apply-form-enhanced {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 32px;
    margin-top: 24px;
}

.apply-step-enhanced {
    display: none;
}

.apply-step-enhanced.is-active {
    display: block;
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.apply-step-enhanced__header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.apply-step-enhanced__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.apply-step-enhanced__subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.apply-form-enhanced__fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.apply-form-enhanced__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.apply-form-enhanced__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apply-form-enhanced__label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.apply-form-enhanced__required {
    color: #f44336;
    font-weight: 700;
}

.apply-form-enhanced__input,
.apply-form-enhanced__textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
}

.apply-form-enhanced__input::placeholder,
.apply-form-enhanced__textarea::placeholder {
    color: var(--text-muted);
}

.apply-form-enhanced__input:hover,
.apply-form-enhanced__textarea:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}

.apply-form-enhanced__input:focus,
.apply-form-enhanced__textarea:focus {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(45, 63, 143, 0.2);
}

.apply-form-enhanced__textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.apply-form-enhanced__hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: -4px;
}

.apply-form-enhanced__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.apply-form-enhanced__meta-left {
    flex: 1;
    min-width: 0;
}

.apply-form-enhanced__meta-right {
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.apply-select-enhanced {
    position: relative;
}

.apply-select-enhanced__arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.apply-form-enhanced__input:focus + .apply-select-enhanced__arrow,
.apply-select-enhanced:hover .apply-select-enhanced__arrow {
    transform: translateY(-50%) rotate(180deg);
}

.apply-secret-question {
    padding: 16px;
    background: rgba(74, 158, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
}

.apply-agree-enhanced {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.apply-agree-enhanced:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}

.apply-agree-enhanced__input {
    display: none;
}

.apply-agree-enhanced__label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    cursor: pointer;
    flex-wrap: nowrap;
}

.apply-agree-enhanced__box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.apply-agree-enhanced__input:checked + .apply-agree-enhanced__label .apply-agree-enhanced__box {
    background: var(--accent-green);
    border-color: var(--accent-green);
}

.apply-agree-enhanced__input:checked + .apply-agree-enhanced__label .apply-agree-enhanced__box::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.apply-agree-enhanced__text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    flex: 1;
    white-space: nowrap;
}

.apply-agree-enhanced__text a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.3);
    text-underline-offset: 2px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.apply-agree-enhanced__text a:hover {
    color: var(--text-primary);
    text-decoration-color: rgba(255,255,255,0.6);
}

.apply-error-enhanced {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #f44336;
    padding-left: 4px;
}

.apply-error-enhanced:not(:empty) {
    display: block;
}

.apply-alert-enhanced {
    display: none;
    padding: 16px;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 12px;
    color: #f44336;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}

.apply-alert-enhanced.is-show {
    display: block;
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.apply-form-enhanced__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.btn-large {
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-primary--gold {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FFD700;
    color: #000;
    font-weight: 700;
}

.btn-primary--gold:hover {
    background: linear-gradient(135deg, #FFA500, #FF8C00);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.4);
}

.btn-primary--gold svg {
    color: #000;
    stroke: #000;
}

.btn-primary--gold svg path {
    stroke: #000;
}

/* Адаптивность */
@media (max-width: 900px) {
    .apply-form-enhanced__row {
        grid-template-columns: 1fr;
    }
    
    .features-grid-enhanced {
        grid-template-columns: 1fr;
    }
    
    .apply-hero-enhanced {
        padding: 24px;
    }
    
    .apply-hero-enhanced__title {
        font-size: 32px;
    }
    
    .apply-form-enhanced {
        padding: 24px;
    }
    
    .apply-form-enhanced__actions {
        flex-direction: column-reverse;
    }
    
    .apply-form-enhanced__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .apply-hero-enhanced {
        padding: 20px;
    }
    
    .apply-hero-enhanced__title {
        font-size: 28px;
    }
    
    .apply-form-enhanced {
        padding: 20px;
    }
    
    .feature-card-enhanced {
        padding: 20px;
    }
    
    .apply-status-card {
        flex-direction: column;
        text-align: center;
    }
    
    .apply-status-card__icon {
        margin: 0 auto;
    }
}
.apply-form{
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 20px 20px;
}
.apply-step{
    padding-top: 6px;
}
.apply-wizard{
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 18px 18px;
    margin-bottom: 14px;
}
.apply-wizard__progress{
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
    height: 8px;
}
.apply-wizard__bar{
    height: 8px;
    border-radius: 999px;
}
.apply-form .form-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 860px){
    .apply-form .form-row{
        grid-template-columns: 1fr 1fr;
        gap: 14px 16px;
    }
    .apply-form .form-row.full{
        grid-template-columns: 1fr;
    }
}
.apply-form .form-group{
    margin: 0;
}
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="date"],
.apply-form textarea,
.apply-form select{
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.04);
    padding: 12px 12px;
}
.apply-form textarea{
    min-height: 110px;
    resize: vertical;
}
.apply-form .apply-actions{
    margin-top: 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.apply-form .btn{
    border-radius: 12px;
    padding: 12px 16px;
}


/* --- Member modal: groups & toggles alignment --- */
#editMemberModal .member-modal-meta{
    display:flex;
    align-items:center;
    gap:10px;
    margin: 6px 0 18px;
}
#editMemberModal .member-primary-group{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    font-weight:700;
    font-size:12px;
    color:#fff;
}
#editMemberModal .member-more-groups{
    position:relative;
    display:inline-flex;
    align-items:center;
}
#editMemberModal .member-more-groups__count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:26px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--text);
    font-weight:700;
    cursor:default;
}

/* ===== Apply page restyle ===== */
.apply-wrap{
    max-width: min(1080px, 100%);
    margin: 0 auto;
    padding: 0 16px;
}

.apply-hero-enhanced{
    margin-bottom: 20px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(1200px 240px at 85% -30%, rgba(70,172,235,0.22), transparent 55%),
        linear-gradient(165deg, rgba(16,16,16,0.96), rgba(27,27,27,0.96));
    box-shadow: 0 12px 34px rgba(0,0,0,0.34);
    padding: 28px 30px;
}

.apply-hero-enhanced::before{
    opacity: 0.45;
    background: radial-gradient(circle at top right, rgba(70,172,235,0.26), transparent 58%);
}

.apply-hero-enhanced__title{
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
}

.apply-hero-enhanced__subtitle{
    max-width: 840px;
    color: var(--text-secondary);
    font-size: 15px;
    margin: 0;
}

.apply-hero-enhanced__badge{
    margin-top: 14px;
    border-radius: 999px;
    border: 1px solid rgba(70,172,235,0.38);
    background: rgba(70,172,235,0.16);
    color: #c6e8ff;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
}

.my-applications-showcase{
    margin: 0 0 26px;
    padding: 26px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(circle at top right, rgba(70,172,235,0.16), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

.my-applications-showcase__hero{
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.9fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.my-applications-showcase__eyebrow{
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    font-weight: 800;
    color: #8bc8ff;
}

.my-applications-showcase__title{
    margin: 0 0 8px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.my-applications-showcase__subtitle{
    margin: 0;
    max-width: 700px;
    color: var(--text-secondary);
    line-height: 1.65;
}

.my-applications-showcase__spotlight{
    border-radius: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(7,15,28,0.56);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.my-applications-showcase__spotlight--accepted{
    border-color: rgba(76,175,80,0.35);
    background: linear-gradient(180deg, rgba(34,89,45,0.52), rgba(8,19,12,0.65));
}

.my-applications-showcase__spotlight--rejected{
    border-color: rgba(239,83,80,0.35);
    background: linear-gradient(180deg, rgba(95,29,29,0.5), rgba(25,9,9,0.65));
}

.my-applications-showcase__spotlight--reviewed{
    border-color: rgba(255,193,7,0.35);
    background: linear-gradient(180deg, rgba(94,72,13,0.46), rgba(25,18,5,0.62));
}

.my-applications-showcase__spotlight--pending{
    border-color: rgba(70,172,235,0.35);
    background: linear-gradient(180deg, rgba(20,64,95,0.46), rgba(8,18,28,0.62));
}

.my-applications-showcase__spotlight-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    color: rgba(255,255,255,0.62);
}

.my-applications-showcase__spotlight-status{
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.my-applications-showcase__spotlight-meta{
    color: var(--text-secondary);
    font-size: 13px;
}

.my-applications-timeline{
    display: grid;
    gap: 14px;
}

.my-app-card{
    position: relative;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 16px;
    padding: 0;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(8,15,25,0.62);
    overflow: hidden;
}

.my-app-card--latest{
    box-shadow: 0 16px 32px rgba(0,0,0,0.2);
}

.my-app-card__rail{
    width: 100%;
    background: linear-gradient(180deg, rgba(70,172,235,0.85), rgba(70,172,235,0.22));
}

.my-app-card--accepted .my-app-card__rail{
    background: linear-gradient(180deg, #57d277, rgba(87,210,119,0.18));
}

.my-app-card--rejected .my-app-card__rail{
    background: linear-gradient(180deg, #f26c69, rgba(242,108,105,0.18));
}

.my-app-card--reviewed .my-app-card__rail{
    background: linear-gradient(180deg, #f0c24d, rgba(240,194,77,0.18));
}

.my-app-card__body{
    padding: 18px 20px 20px 0;
}

.my-app-card__header{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.my-app-card__left{
    min-width: 0;
}

.my-app-card__kicker{
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    color: rgba(255,255,255,0.5);
}

.my-app-card__title{
    margin: 0;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.my-app-card__meta-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.my-app-card__meta-item{
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.my-app-card__meta-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: rgba(255,255,255,0.42);
    font-weight: 800;
}

.my-app-card__meta-value{
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
}

.my-app-card__vk{
    color: #8fd0ff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.my-app-card__vk:hover{
    text-decoration: underline;
}

.my-app-card__comments{
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}

.my-app-card__comments-label{
    margin-bottom: 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    color: rgba(255,255,255,0.46);
}

.my-app-card__comment + .my-app-card__comment{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.my-app-card__comment-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.my-app-card__comment-author{
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}

.my-app-card__comment-time{
    color: rgba(255,255,255,0.42);
    font-size: 11px;
}

.my-app-card__comment-text,
.my-app-card__empty{
    color: var(--text-secondary);
    line-height: 1.65;
    white-space: pre-wrap;
}

.my-app-card__empty{
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.02);
}

@media (max-width: 900px){
    .my-applications-showcase__hero{
        grid-template-columns: 1fr;
    }

    .my-app-card__meta-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px){
    .my-applications-showcase,
    .apply-form-section-enhanced{
        padding: 18px;
        border-radius: 20px;
    }

    .my-app-card{
        grid-template-columns: 6px minmax(0, 1fr);
        gap: 12px;
    }

    .my-app-card__body{
        padding: 16px 16px 16px 0;
    }

    .my-app-card__header{
        flex-direction: column;
        align-items: stretch;
    }

    .my-app-card__title{
        font-size: 19px;
    }
}

.apply-form-section-enhanced{
    margin-top: 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
    padding: 24px;
}

.apply-form-section-enhanced__header{
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.apply-form-section-enhanced__title{
    font-size: clamp(24px, 3vw, 30px);
    letter-spacing: -0.01em;
}

.apply-form-section-enhanced__subtitle{
    padding-left: 0;
    color: var(--text-secondary);
    font-size: 14px;
    max-width: 860px;
}

.apply-form-section-enhanced .content-section{
    margin: 10px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
}

.apply-form-section-enhanced .content-section p{
    margin: 0;
    color: var(--text-secondary);
}

.application-form{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.application-form .form-row{
    margin: 0;
}

.application-form .form-row label{
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.application-form input,
.application-form select,
.application-form textarea{
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.045);
    color: var(--text-primary);
    padding: 12px 14px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.application-form input:hover,
.application-form select:hover,
.application-form textarea:hover{
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.07);
}

.application-form input:focus,
.application-form select:focus,
.application-form textarea:focus{
    outline: none;
    border-color: rgba(70,172,235,0.62);
    background: rgba(255,255,255,0.09);
    box-shadow: 0 0 0 3px rgba(70,172,235,0.14);
}

.application-form textarea{
    min-height: 118px;
    line-height: 1.55;
    resize: vertical;
}

.application-form > .btn-primary{
    justify-self: start;
    margin-top: 6px;
    border-radius: 12px;
    border: 1px solid rgba(70,172,235,0.54);
    background: linear-gradient(135deg, rgba(70,172,235,0.92), rgba(58,150,208,0.9));
    color: #fff;
    font-weight: 700;
    padding: 12px 20px;
}

.application-form > .btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(58,150,208,0.3);
}

.application-form .form-row-group{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
}

.application-form .form-row-group .form-row{
    margin: 0;
}

.application-form .form-row-split{
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    gap: 0;
    align-items: end;
}

.application-form .form-row-half{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.application-form .form-row-split .form-row-half:first-child{
    justify-self: start;
    max-width: none;
}

.application-form .form-row-split .form-row-half:last-child{
    justify-self: end;
    width: 240px;
}

.application-form .form-row-split .form-row-half:last-child .form-row-half__label{
    align-items: flex-end;
    text-align: right;
}

.application-form .form-row-split .form-row-half:last-child input[type="date"]{
    width: 240px;
    margin-left: auto;
}

.application-form .form-row-half__label{
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.application-form .form-row-left{
    justify-self: start;
}

.application-form .form-row-right{
    justify-self: end;
}

@media (max-width: 768px) {
    .application-form .form-row-split {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 10px;
        align-items: start;
    }

    .application-form .form-row-split .form-row-half:last-child {
        width: 100%;
        justify-self: stretch;
    }

    .application-form .form-row-split .form-row-half:last-child .form-row-half__label {
        align-items: flex-start;
        text-align: left;
    }

    .application-form .form-row-split .form-row-half:last-child input[type="date"] {
        width: 100%;
        margin-left: 0;
    }
    
    .gender-selector {
        flex-wrap: wrap;
    }
    
    .application-form {
        gap: 10px;
    }
    
    .apply-form-section-enhanced {
        padding: 16px;
    }
    
    .apply-hero-enhanced {
        padding: 16px 20px;
    }
    
    .application-form > .btn-primary {
        width: 100%;
        justify-self: stretch;
    }
    
    .department-selector {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .apply-wrap {
        padding: 0 12px;
    }
    
    .apply-hero-enhanced {
        padding: 12px 14px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    
    .apply-hero-enhanced__title {
        font-size: 24px;
        margin: 0 0 8px;
    }
    
    .apply-hero-enhanced__subtitle {
        font-size: 13px;
    }
    
    .apply-form-section-enhanced {
        padding: 12px;
        border-radius: 12px;
        margin-top: 0;
    }
    
    .apply-form-section-enhanced__header {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    
    .apply-form-section-enhanced__title {
        font-size: 18px;
    }
    
    .application-form {
        gap: 8px;
    }
    
    .application-form input,
    .application-form select,
    .application-form textarea {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .application-form textarea {
        min-height: 100px;
    }
    
    .gender-selector {
        gap: 8px;
    }
    
    .gender-selector .gender-label {
        padding: 8px 10px;
        font-size: 12px;
        gap: 6px;
    }
    
    .department-selector {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .department-selector .dept-label {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .application-form > .btn-primary {
        padding: 10px 16px;
        font-size: 13px;
        width: 100%;
    }
}

/* Gender selector styling */
.gender-selector{
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.gender-selector input[type="radio"]{
    display: none;
}

.gender-selector .gender-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    min-width: 130px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.045);
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: all .2s ease;
}

.gender-selector .gender-label:before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    transition: all .2s ease;
}

.gender-selector input[type="radio"]:checked + .gender-label{
    border-color: rgba(70,172,235,0.62);
    background: rgba(70,172,235,0.15);
}

.gender-selector input[type="radio"]:checked + .gender-label:before{
    border-color: rgba(70,172,235,0.62);
    box-shadow: inset 0 0 0 3px rgba(70,172,235,0.62);
}

/* Department selector styling (radio buttons) */
.department-selector{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.department-selector input[type="radio"]{
    display: none;
}

.department-selector .dept-label{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.045);
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: all .2s ease;
    text-align: center;
}

.department-selector .dept-label:hover{
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.07);
}

.department-selector input[type="radio"]:checked + .dept-label{
    border-color: rgba(70,172,235,0.62);
    background: rgba(70,172,235,0.15);
    color: #c6e8ff;
}

/* Alert messages in form */
#applyAlert{
    display: none;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid;
}

#applyAlert.error{
    display: block;
    background: rgba(220,38,38,0.15);
    color: #fca5a5;
    border-color: rgba(220,38,38,0.4);
}

#applyAlert.success{
    display: block;
    background: rgba(34,197,94,0.15);
    color: #86efac;
    border-color: rgba(34,197,94,0.4);
}

@media (min-width: 920px){
    .application-form{
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
    }

    .application-form .form-row-split{
        grid-column: 1 / -1;
    }

    .application-form .form-row:nth-child(5),
    .application-form .form-row:nth-child(n+6){
        grid-column: 1 / -1;
    }

    .application-form > .btn-primary{
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px){
    .apply-hero-enhanced{
        padding: 22px 18px;
        border-radius: 16px;
    }

    .apply-form-section-enhanced{
        padding: 18px 14px;
        border-radius: 16px;
    }

    .application-form > .btn-primary{
        width: 100%;
        justify-self: stretch;
    }
}

/* ===== Generic content pages restyle ===== */
.content-page > .page-header{
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 16px;
    background:
        radial-gradient(680px 220px at 90% -40%, rgba(70,172,235,0.16), transparent 60%),
        linear-gradient(165deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}

.content-page .breadcrumbs{
    margin-bottom: 8px;
}

.content-page .breadcrumbs__link,
.content-page .breadcrumbs__current{
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.content-page .page-title-large{
    margin: 0;
    font-size: clamp(28px, 3.8vw, 44px);
    line-height: 1.07;
    letter-spacing: -0.015em;
}

.content-page > .content-section,
.content-page > .markdown-content{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    box-shadow: 0 10px 26px rgba(0,0,0,0.24);
}

.content-page .markdown-content h2,
.content-page .markdown-content h3{
    margin-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 16px;
}

.content-page .markdown-content h2:first-of-type,
.content-page .markdown-content h3:first-of-type{
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.content-page--metodic{
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.content-page--metodic > .content-section,
.content-page--metodic > .markdown-content{
    max-width: 100%;
    width: 100%;
}

.content-page--metodic .markdown-content{
    line-height: 1.75;
}

.page-footer-meta{
    margin-top: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    padding: 10px 12px;
}

/* ===== Testing page restyle ===== */
#testingApp{
    display: grid;
    gap: 14px;
}

#testingApp .tests-list-container,
#testingApp .test-container,
#testingApp .test-result{
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    padding: 18px;
}

#testingApp h2,
#testingApp h3{
    margin: 0 0 12px;
    line-height: 1.2;
}

#testingApp .test-description{
    margin-bottom: 14px;
    color: var(--text-secondary);
}

#testingApp .test-timer{
    border: 1px solid rgba(255, 218, 69, 0.38);
    background: rgba(255, 218, 69, 0.12);
    border-radius: 999px;
    padding: 6px 12px;
    color: #ffe991;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#testingApp .test-questions{
    display: grid;
    gap: 12px;
}

#testingApp .question-item,
#testingApp .test-question,
#testingApp .question-card,
#testingApp .question-block{
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    padding: 12px 14px;
}

#testingApp .test-actions{
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#testingApp .test-actions .btn-secondary,
#testingApp .test-actions .btn-submit{
    border-radius: 12px;
    padding: 10px 14px;
}

#testingApp .loading{
    padding: 14px;
    border-radius: 10px;
    border: 1px dashed rgba(255,255,255,0.2);
    color: var(--text-secondary);
}

/* ===== Profile and 404 polish ===== */
.profile-page #profileApp{
    min-height: 160px;
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 14px;
    color: var(--text-secondary);
}

section.content-page .page-header:has(.page-title-large:only-child){
    padding-bottom: 12px;
}

@media (max-width: 760px){
    .content-page > .page-header,
    .content-page > .content-section,
    .content-page > .markdown-content,
    #testingApp .tests-list-container,
    #testingApp .test-container,
    #testingApp .test-result{
        border-radius: 14px;
        padding: 14px;
    }

    .content-page .page-title-large{
        font-size: 30px;
    }

    #testingApp .test-actions .btn-secondary,
    #testingApp .test-actions .btn-submit{
        width: 100%;
    }
}

#editMemberModal .member-more-groups__popover{
    display:none;
    position:absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    max-width: 320px;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(20,20,20,.95);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    z-index: 40;
}
#editMemberModal .member-more-groups:hover .member-more-groups__popover{
    display: flex;}
}
#editMemberModal .group-pop-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 6px;
    border-radius:10px;
}
#editMemberModal .group-pop-item:hover{
    background: rgba(255,255,255,.06);
}
#editMemberModal .group-dot{
    width:10px;height:10px;border-radius:50%;
    background: rgba(255,255,255,.18);
    flex: 0 0 auto;
}
#editMemberModal .group-check{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    cursor:pointer;
    user-select:none;
}
#editMemberModal .group-check:hover{
    background: rgba(255,255,255,.05);
}
#editMemberModal .group-check__name{
    flex:1;
    text-align:left;
}

/* Member modal group picker */
/* Индикатор автосохранения */
.auto-save-indicator {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    opacity: 0;
}

.auto-save-indicator.auto-save--saving {
    opacity: 1;
    color: var(--accent-blue);
    background: rgba(74, 158, 255, 0.1);
}

.auto-save-indicator.auto-save--saved {
    opacity: 1;
    color: var(--accent-green);
    background: rgba(76, 175, 80, 0.1);
}

.auto-save-indicator.auto-save--error {
    opacity: 1;
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

#editMemberModal .group-picker{
    width: 100%;
    max-width: none;
    position: relative;
}
#editMemberModal .group-picker__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 8px;
}
#editMemberModal .group-picker__title{
    font-size: 13px;
    color: var(--text-muted);
}
#editMemberModal .group-picker__add{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: var(--text-primary);
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 1;
}
#editMemberModal .group-picker__add:hover{
    background: rgba(255,255,255,.08);
}
#editMemberModal .group-picker__list{
    display:grid;
    grid-template-columns: 1fr; /* one role per row */
    gap: 8px;
}
#editMemberModal .group-picker__empty{
    grid-column: 1 / -1;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--text-muted);
    font-size: 14px;
}

@media (max-width: 720px){
    #editMemberModal .group-picker__list{
        grid-template-columns: 1fr;
    }
}
#editMemberModal .group-pill{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    border-left: 4px solid rgba(255,255,255,.14);
}
#editMemberModal .group-pill[style*="--role-color"],
#editMemberModal .group-pill[data-role-color]{
    border-left-color: var(--role-color);
    border-color: color-mix(in srgb, var(--role-color) 45%, rgba(255,255,255,.12));
    background: color-mix(in srgb, var(--role-color) 14%, rgba(255,255,255,.03));
}
#editMemberModal .group-pill__check{
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(46, 204, 113, .16);
    color: #2ECC71;
    font-size: 12px;
    flex: 0 0 auto;
}
#editMemberModal .group-pill[style*="--role-color"] .group-pill__check,
#editMemberModal .group-pill[data-role-color] .group-pill__check{
    background: color-mix(in srgb, var(--role-color) 18%, transparent);
    color: var(--role-color);
}

#editMemberModal .group-check[style*="--role-color"],
#editMemberModal .group-check[data-role-color]{
    border-color: color-mix(in srgb, var(--role-color) 45%, rgba(255,255,255,.12));
    background: color-mix(in srgb, var(--role-color) 10%, rgba(255,255,255,.03));
}
#editMemberModal .group-pill__name{
    flex:1;
    text-align:left;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.25;
    word-break: break-word;
}
#editMemberModal .group-pill__remove{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    font-family: Inter, sans-serif;
}
#editMemberModal .group-pill__remove:hover{
    background: rgba(255,255,255,.08);
}
#editMemberModal .group-picker__popover{
    position: fixed;
    width: 320px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(20, 22, 28, .98);
    box-shadow: 0 16px 50px rgba(0,0,0,.55);
    padding: 12px;
    z-index: 10000;
    max-height: 400px;
    overflow-y: auto;
}
#editMemberModal .group-picker__pop-title{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
#editMemberModal .group-picker__select{
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font-family: Inter, sans-serif;
    outline: none;
}

/* Group picker popover: simple grid list (same UX as qualifications) */
#editMemberModal .group-picker__grid{
    display:grid;
    grid-template-columns: 1fr; /* one role per row */
    gap: 8px;
    max-height: 320px;
    overflow:auto;
}
#editMemberModal .group-check{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    cursor:pointer;
    user-select:none;
    text-align:left;
    color: var(--text-primary);
}
#editMemberModal .group-check:hover{ background: rgba(255,255,255,.06); }
#editMemberModal .group-check__name{ flex:1; word-break: break-word; }

@media (max-width: 720px){
    #editMemberModal .group-picker__grid{ grid-template-columns: 1fr; }
    #editMemberModal .group-picker__popover{
        width: calc(100vw - 40px);
        max-width: 320px;
        left: 20px !important;
        right: 20px !important;
    }
}

/* Member modal qualification picker (UI only) */
#editMemberModal .qual-picker{
    width: 100%;
    max-width: none;
    position: relative;
}
#editMemberModal .qual-picker__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 8px;
}
#editMemberModal .qual-picker__title{
    font-size: 13px;
    color: var(--text-muted);
}
#editMemberModal .qual-picker__add{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: var(--text-primary);
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 1;
}
#editMemberModal .qual-picker__add:hover{
    background: rgba(255,255,255,.08);
}
#editMemberModal .qual-picker__list{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
#editMemberModal .qual-picker__empty{
    grid-column: 1 / -1;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--text-muted);
    font-size: 14px;
}
@media (max-width: 720px){
    #editMemberModal .qual-picker__list{ grid-template-columns: 1fr; }
}
#editMemberModal .qual-pill{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
}
#editMemberModal .qual-pill__check{
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(52, 152, 219, .16);
    color: #3498DB;
    font-size: 12px;
    flex: 0 0 auto;
}
#editMemberModal .qual-pill__name{
    flex:1;
    text-align:left;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.25;
    word-break: break-word;
}
#editMemberModal .qual-pill__remove{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    font-family: Inter, sans-serif;
}
#editMemberModal .qual-pill__remove:hover{
    background: rgba(255,255,255,.08);
}
#editMemberModal .qual-picker__popover{
    position: fixed;
    left: 0;
    top: 0;
    width: 520px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(20, 22, 28, .98);
    box-shadow: 0 16px 50px rgba(0,0,0,.55);
    padding: 12px;
    z-index: 10;
}
#editMemberModal .qual-picker__pop-title{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
#editMemberModal .qual-picker__section{ margin-bottom: 12px; }
#editMemberModal .qual-picker__section-title{
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
#editMemberModal .qual-picker__grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
#editMemberModal .qual-check{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    cursor:pointer;
    user-select:none;
    text-align:left;
    color: var(--text-primary);
}
#editMemberModal .qual-check:hover{ background: rgba(255,255,255,.06); }
#editMemberModal .qual-check__name{ flex:1; }
#editMemberModal .qual-picker__pop-actions{
    display:flex;
    justify-content:flex-end;
    gap: 8px;
    margin-top: 8px;
}
#editMemberModal .qual-picker__pop-empty{
    color: var(--text-muted);
    padding: 10px 8px;
}

#pageModal .group-picker__pop-title{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

#pageModal .group-picker__search{
    margin-bottom: 10px;
}
#pageModal .group-picker__search-input{
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font-family: Inter, sans-serif;
    outline: none;
}
#pageModal .group-picker__search-input::placeholder{ color: rgba(255,255,255,.45); }
#pageModal .group-picker__search-input:focus{
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
}
#pageModal .group-picker__select{
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font-family: Inter, sans-serif;
    outline: none;
}

/* Удалено - используется общий стиль выше */
#pageModal .group-check{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    cursor:pointer;
    user-select:none;
    text-align:left;
    color: var(--text-primary);
}
#pageModal .group-check:hover{ background: rgba(255,255,255,.06); }
#pageModal .group-check__name{ flex:1; word-break: break-word; }

@media (max-width: 720px){
    #pageModal .group-picker__grid{ grid-template-columns: 1fr; }
}

/* Fix native dropdown list (options) background in dark UI */
#pageModal .group-picker__select option,
#pageModal .group-picker__select optgroup{
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Same fix for member editor group picker */
#editMemberModal .group-picker__select option,
#editMemberModal .group-picker__select optgroup{
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Admin filters: keep native selects, but match dark dropdown list */
select.form-input option,
select.form-input optgroup,
.toolbar-filters select option,
.toolbar-filters select optgroup{
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

#editMemberModal .group-picker__pop-actions{
    display:flex;
    justify-content:flex-end;
    gap: 10px;
    margin-top: 12px;
}
#editMemberModal .group-picker__pop-empty{
    color: var(--text-muted);
    font-size: 14px;
}

/* Page access groups (admin pages modal) */
#pageModal .group-picker{
    width: 100%;
    max-width: none;
    position: relative;
}
#pageModal .group-picker__header,
#topicModal .group-picker__header,
#categoryModal .group-picker__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 8px;
    gap: 10px;
}
#pageModal .group-picker__title,
#topicModal .group-picker__title,
#categoryModal .group-picker__title{
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
#pageModal .group-picker__add-wrapper,
#topicModal .group-picker__add-wrapper,
#categoryModal .group-picker__add-wrapper{
    display: flex;
    align-items: center;
    gap: 8px;
}
#pageModal .group-picker__select,
#topicModal .group-picker__select,
#categoryModal .group-picker__select{
    min-width: 200px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: var(--text-primary);
    font-size: 13px;
    font-family: Inter, sans-serif;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
    outline: none;
}
#pageModal .group-picker__select:hover,
#topicModal .group-picker__select:hover,
#categoryModal .group-picker__select:hover{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.20);
}
#pageModal .group-picker__select:focus,
#topicModal .group-picker__select:focus,
#categoryModal .group-picker__select:focus{
    background: rgba(255,255,255,.1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(45, 63, 143, 0.2);
}
#pageModal .group-picker__select option,
#topicModal .group-picker__select option{
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px;
}
#pageModal .group-picker__add,
#topicModal .group-picker__add{
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(135deg, rgba(45, 63, 143, 0.2), rgba(54, 80, 178, 0.3));
    color: var(--accent-blue);
    cursor: pointer;
    font-family: Inter, sans-serif;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast) var(--ease);
    flex-shrink: 0;
}
#pageModal .group-picker__add:hover,
#topicModal .group-picker__add:hover{
    background: linear-gradient(135deg, rgba(45, 63, 143, 0.3), rgba(54, 80, 178, 0.4));
    border-color: var(--accent-blue);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(45, 63, 143, 0.3);
}
#pageModal .group-picker__add:active,
#topicModal .group-picker__add:active{
    transform: scale(0.98) translateY(1px);
}
#pageModal .group-picker__add:disabled,
#topicModal .group-picker__add:disabled{
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}
#pageModal .group-picker__add svg,
#topicModal .group-picker__add svg{
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

#pageModal .group-picker__search{
    margin-bottom: 10px;
}
#categoryModal .group-picker__search,
#topicModal .group-picker__search,
#pageModal .group-picker__search{
    margin-bottom: 12px;
}

#categoryModal .group-picker__search-input,
#topicModal .group-picker__search-input,
#pageModal .group-picker__search-input{
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.2s ease;
    outline: none;
}

#categoryModal .group-picker__search-input::placeholder,
#topicModal .group-picker__search-input::placeholder,
#pageModal .group-picker__search-input::placeholder{ 
    color: rgba(255,255,255,.45); 
}

#categoryModal .group-picker__search-input:focus,
#topicModal .group-picker__search-input:focus,
#pageModal .group-picker__search-input:focus{
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
}
#pageModal .group-picker__list{
    display:grid;
    grid-template-columns: 1fr; /* one role per row */
    gap: 8px;
}
#pageModal .group-picker__empty{
    grid-column: 1 / -1;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--text-muted);
    font-size: 14px;
}

@media (max-width: 720px){
    #pageModal .group-picker__list{
        grid-template-columns: 1fr;
    }
}

#pageModal .group-pill{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    border-left: 4px solid rgba(255,255,255,.14);
}

#pageModal .group-pill[style*="--role-color"],
#pageModal .group-pill[data-role-color]{
    border-left-color: var(--role-color);
    border-color: color-mix(in srgb, var(--role-color) 45%, rgba(255,255,255,.12));
    background: color-mix(in srgb, var(--role-color) 14%, rgba(255,255,255,.03));
}
#pageModal .group-pill__check{
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(46, 204, 113, .16);
    color: #2ECC71;
    font-size: 12px;
    flex: 0 0 auto;
}

#pageModal .group-pill[style*="--role-color"] .group-pill__check,
#pageModal .group-pill[data-role-color] .group-pill__check{
    background: color-mix(in srgb, var(--role-color) 18%, transparent);
    color: var(--role-color);
}

#pageModal .group-check[style*="--role-color"],
#pageModal .group-check[data-role-color]{
    border-color: color-mix(in srgb, var(--role-color) 45%, rgba(255,255,255,.12));
    background: color-mix(in srgb, var(--role-color) 10%, rgba(255,255,255,.03));
}

/* Same group-picker UI for category/topic modals */
#categoryModal .group-picker__list,
#topicModal .group-picker__list{ display:grid; grid-template-columns: 1fr; gap: 8px; }
#categoryModal .group-picker__popover{
    position: fixed;
    width: 480px;
    max-width: calc(100vw - 40px);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(20, 22, 28, .98);
    box-shadow: 0 16px 50px rgba(0,0,0,.55);
    padding: 16px;
    z-index: 10000;
    max-height: 500px;
    overflow-y: auto;
}

#categoryModal .group-picker__pop-title{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

#categoryModal .group-picker__grid,
#topicModal .group-picker__grid,
#pageModal .group-picker__grid{ 
    display:grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px; 
    max-height: 360px; 
    overflow-y: auto;
    padding: 4px;
}

#categoryModal .group-picker__pop-empty{
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

#categoryModal .group-picker__pop-actions{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 860px){
    #categoryModal .group-picker__grid,
    #topicModal .group-picker__grid,
    #pageModal .group-picker__grid{ 
        grid-template-columns: 1fr; 
    }
    
    #categoryModal .group-picker__popover{
        width: calc(100vw - 20px);
        max-width: 400px;
    }
}
#categoryModal .group-pill,
#topicModal .group-pill{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-left: 4px solid rgba(255,255,255,.14); }
#categoryModal .group-pill[style*="--role-color"],
#categoryModal .group-pill[data-role-color],
#topicModal .group-pill[style*="--role-color"],
#topicModal .group-pill[data-role-color]{
    border-left-color: var(--role-color);
    border-color: color-mix(in srgb, var(--role-color) 45%, rgba(255,255,255,.12));
    background: color-mix(in srgb, var(--role-color) 14%, rgba(255,255,255,.03));
}
#categoryModal .group-pill[style*="--role-color"] .group-pill__check,
#categoryModal .group-pill[data-role-color] .group-pill__check,
#topicModal .group-pill[style*="--role-color"] .group-pill__check,
#topicModal .group-pill[data-role-color] .group-pill__check{ background: color-mix(in srgb, var(--role-color) 18%, transparent); color: var(--role-color); }
#categoryModal .group-check,
#topicModal .group-check,
#pageModal .group-check{ 
    display:flex; 
    align-items:center; 
    justify-content:flex-start; 
    gap:10px; 
    padding:12px 14px; 
    border-radius:10px; 
    border:1px solid rgba(255,255,255,.12); 
    background: rgba(255,255,255,.04); 
    cursor:pointer; 
    user-select:none; 
    text-align:left; 
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.2s ease;
    min-height: 44px;
}

#categoryModal .group-check:hover,
#topicModal .group-check:hover,
#pageModal .group-check:hover{ 
    background: rgba(255,255,255,.08); 
    border-color: rgba(255,255,255,.18);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#categoryModal .group-check[style*="--role-color"],
#categoryModal .group-check[data-role-color],
#topicModal .group-check[style*="--role-color"],
#topicModal .group-check[data-role-color]{ border-color: color-mix(in srgb, var(--role-color) 45%, rgba(255,255,255,.12)); background: color-mix(in srgb, var(--role-color) 10%, rgba(255,255,255,.03)); }
#pageModal .group-pill__name{
    flex:1;
    text-align:left;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.25;
    word-break: break-word;
}
#pageModal .group-pill__remove{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    font-family: Inter, sans-serif;
}
#pageModal .group-pill__remove:hover{
    background: rgba(255,255,255,.08);
}

#pageModal .group-picker__popover{
    position:absolute;
    right: 0;
    top: 0;
    transform: translateY(42px);
    width: 320px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(20, 22, 28, .98);
    box-shadow: 0 16px 50px rgba(0,0,0,.55);
    padding: 12px;
    z-index: 10;
}
#pageModal .group-picker__pop-title{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
#pageModal .group-picker__select{
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font-family: Inter, sans-serif;
    outline: none;
}
#pageModal .group-picker__pop-actions{
    display:flex;
    justify-content:flex-end;
    gap: 10px;
    margin-top: 12px;
}
#pageModal .group-picker__pop-empty{
    color: var(--text-muted);
    font-size: 14px;
}

#editMemberModal .member-toggles{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width: 560px;
}

#editMemberModal .form-group.member-toggle{
    margin: 0;
}

#editMemberModal .form-group.member-toggle .member-toggle-row{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    margin: 0;
    cursor: pointer;
}

#editMemberModal .form-group.member-toggle .member-toggle-text{
    display:flex;
    flex-direction:column;
    gap: 4px;
    text-align:left;
    min-width: 0;
}

#editMemberModal .form-group.member-toggle .member-toggle-title{
    font-weight: 600;
    color: var(--text);
}

#editMemberModal .form-group.member-toggle .member-toggle-desc{
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-muted);
}

#editMemberModal .form-group.member-toggle input[type="checkbox"]{
    justify-self: end;
    transform: scale(1.15);
    cursor: pointer;
}

/* --- Member modal: profile and layout grids --- */
#editMemberModal .member-profile-card{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    padding: 14px;
    box-sizing: border-box;
    overflow: hidden; /* Prevent content overflow */
}
#editMemberModal .member-profile-card__title{
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 10px;
}

#editMemberModal .member-profile-link{
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    transition: all 0.2s ease;
}
#editMemberModal .member-profile-link:hover{
    background: rgba(255,255,255,.07);
    color: #ffffff;
}
#editMemberModal .member-profile-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    box-sizing: border-box;
}
#editMemberModal .member-profile-grid .form-group{
    min-width: 0; /* Prevent grid overflow */
    box-sizing: border-box;
}
#editMemberModal .member-profile-grid .form-group label{
    margin-bottom: 8px;
}
#editMemberModal .member-profile-grid .form-group input,
#editMemberModal .member-profile-grid .form-group select{
    width: 100%;
    box-sizing: border-box;
}

#editMemberModal .input-with-actions{
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
#editMemberModal .input-with-actions input{
    padding-right: 56px; /* space for 1 icon button */
    width: 100%;
    box-sizing: border-box;
}
#editMemberModal .input-with-actions.input-with-actions--double input{
    padding-right: 180px; /* space for eye icon + reset button */
}
#editMemberModal .input-with-actions .input-actions{
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 1;
}
#editMemberModal .input-action-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
}
#editMemberModal .input-action-btn:hover{
    background: rgba(255,255,255,.06);
}
#editMemberModal .input-action-btn svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
    opacity: .9;
}

/* Ensure proper spacing and layout in edit member modal */
#editMemberModal .form-group label{
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}
#editMemberModal .member-qualifications label,
#editMemberModal .member-ranks label{
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}
#editMemberModal .input-action-btn--text{
    min-width: auto;
    padding: 0 12px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}
#editMemberModal .input-action-btn.is-disabled,
#editMemberModal .input-action-btn[aria-disabled="true"]{
    opacity: .55;
    pointer-events: none;
}

#editMemberModal .member-help{
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.3;
}
#editMemberModal .member-app-link,
#editMemberModal .member-reset-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
}
#editMemberModal .member-app-link.is-disabled{
    opacity: .55;
    pointer-events: none;
}

#editMemberModal .member-ranks-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    box-sizing: border-box;
}
#editMemberModal .member-ranks-grid .form-group{
    min-width: 0; /* Prevent grid overflow */
    box-sizing: border-box;
}
#editMemberModal .member-ranks-grid .form-group select{
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 900px){
    #editMemberModal .member-ranks-grid{ grid-template-columns: 1fr; }
}

#editMemberModal .member-flags-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    box-sizing: border-box;
}
#editMemberModal .member-flags-grid .form-group{
    min-width: 0; /* Prevent grid overflow */
    box-sizing: border-box;
}

@media (max-width: 820px){
    #editMemberModal .member-profile-grid,
    #editMemberModal .member-flags-grid{
        grid-template-columns: 1fr;
    }
}

/* --- Applications: approval notice --- */
.approval-notice{
    position: sticky;
    bottom: 14px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(74,158,255,.35);
    background: rgba(74,158,255,.08);
    color: var(--text);
    font-weight: 600;
}

/* --- Mobile nav bottom sheet on MIRC --- */
.mobile-nav-sheet{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(20,20,20,.98);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 -18px 40px rgba(0,0,0,.45);
    transform: translateY(110%);
    transition: transform .22s ease;
    z-index: 9999;
    max-height: 78vh;
    overflow: auto;
    padding: 14px 14px 22px;
}
.mobile-nav-sheet.active{ transform: translateY(0); }
.mobile-nav-sheet__head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 4px 10px;
}
.mobile-nav-sheet__title{
    font-weight: 900;
    letter-spacing: .06em;
}
.mobile-nav-sheet__close{
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
}
.mobile-nav-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 9998;
}
.mobile-nav-overlay.active{
    opacity: 1;
    pointer-events: auto;
}
@media (min-width: 769px){
    .mobile-nav-sheet, .mobile-nav-overlay{ display:none !important; }
}

/* Application comments (chat) */
.application-comments{border:1px solid var(--border-color);border-radius:14px;padding:12px 12px 10px;margin:10px 0 14px;background:rgba(255,255,255,.02);} 
.application-comments__title{font-weight:800;margin-bottom:8px;color:var(--text-secondary);} 
.application-comments__list{display:flex;flex-direction:column;gap:8px;max-height:180px;overflow:auto;padding-right:6px;margin-bottom:10px;} 
.application-comments__msg{border:1px solid var(--border-color);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.03);} 
.application-comments__meta{font-size:12px;color:var(--text-muted);margin-bottom:4px;} 
.application-comments__text{white-space:pre-wrap;} 
.application-comments__form{display:flex;gap:10px;align-items:flex-end;} 
.application-comments__form textarea{flex:1;min-height:42px;max-height:120px;resize:vertical;} 
.application-meta{margin-top:10px;font-size:13px;color:var(--text-muted);} 
.application-meta strong{color:var(--text-secondary);}

/* Application modal actions (non-sticky) */
.application-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    padding-top:20px;
    border-top:2px solid var(--border-color);
    justify-content:flex-end;
}
.app-action-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid transparent;
    font-weight:800;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    cursor:pointer;
    line-height:1;
}
.app-action-btn svg{width:16px;height:16px;display:block;}
.app-action-accept{
    background: rgba(76,175,80,.24);
    border-color: rgba(76,175,80,.45);
    color: #eaffea;
}
.app-action-reject{
    background: rgba(244,67,54,.22);
    border-color: rgba(244,67,54,.45);
    color: #ffecec;
}
.app-action-review{
    background: rgba(255,193,7,.18);
    border-color: rgba(255,193,7,.42);
    color: #fff3cd;
}
.app-action-delete{
    background: rgba(180,180,180,.10);
    border-color: rgba(180,180,180,.28);
    color: #f2f2f2;
}
.app-action-btn:disabled{opacity:.55;cursor:not-allowed;}


/* Application comments (chat) */
.application-comments{
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:12px 12px 10px;
    margin:10px 0 14px;
    background: rgba(255,255,255,.02);
}
.application-comments__title{
    font-weight:900;
    margin-bottom:8px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing:.06em;
}

/* Home page (Main) — minimal dark UI, no gradients/animations */
.home-hero{
    min-height:70vh;
    display:flex;
    align-items:center;
}
.home-hero__inner{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
}
.home-hero__left{max-width:560px;}
.home-hero__right{flex:1; min-height:260px;}
.home-hero__title{
    font-size:36px;
    line-height:1.2;
    margin:0 0 10px;
    font-weight:800;
}
.home-hero__subtitle{
    margin:0 0 20px;
    color: var(--text-secondary);
    font-size:16px;
    line-height:1.5;
}
.home-hero__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
    border-radius:10px;
    background:#2ECC71;
    color:#0F1115;
    font-weight:900;
    border:1px solid rgba(0,0,0,.18);
}
.home-hero__cta:hover{filter:brightness(.94);}

.home-section{margin-top:20px;}
.home-section__title{font-size:17px; margin:0 0 10px; font-weight:700;}

.how-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
.how-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px;
    border-radius:14px;
    border:1px solid var(--border-color);
    background: rgba(255,255,255,.02);
}
.how-item__icon{
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    color: rgba(255,255,255,.65);
}
.how-item__icon svg{width:24px;height:24px;display:block;}
.how-item__text{color: rgba(255,255,255,.90); line-height:1.35;}

.join-steps{list-style:none; padding:0; margin:0;}
.join-step{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.join-step:last-child{border-bottom:none;}
.join-step__icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;}
.join-step__text{flex:1;color:inherit;}
.join-step.is-done{color:#2ECC71;}
.join-step.is-current{color:#fff;}
.join-step.is-next{color:#6B7280;}
.join-step.is-done .join-step__icon::before{content:'✔';}
.join-step.is-current .join-step__icon::before{content:'●';}
.join-step.is-next .join-step__icon::before{content:'○';}

.stats-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;}
.stat-card{
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:14px 14px 12px;
    background: rgba(255,255,255,.02);
}
.stat-card__value{font-size:28px; font-weight:900; line-height:1; margin-bottom:6px;}
.stat-card__label{font-size:12px; color: var(--text-secondary);}

.events-list{list-style:none; padding:0; margin:0;}
.events-item{display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06);} 
.events-item:last-child{border-bottom:none;}
.events-item__icon{width:18px; text-align:center;}
.events-item__text{color: rgba(255,255,255,.90);}
.events-item__meta{margin-left:auto; padding-left:12px; color: var(--text-secondary); font-size:12px; white-space:nowrap;}

.status-card{
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:14px;
    background: rgba(255,255,255,.02);
}
.status-card__row{display:flex; gap:10px; justify-content:space-between; padding:6px 0;}
.status-card__label{color: var(--text-secondary);}
.status-card__value{color: rgba(255,255,255,.92); font-weight:800;}
.status-actions__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.95);
    font-weight:900;
}
.status-actions__btn:hover{background: rgba(255,255,255,.08);}
.status-actions__btn--secondary{background: rgba(255,255,255,.03);}

.final-cta{
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:16px;
    background: rgba(255,255,255,.02);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.final-cta__text{color: rgba(255,255,255,.90); line-height:1.45;}
.final-cta__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
    border-radius:10px;
    background:#2ECC71;
    color:#0F1115;
    font-weight:900;
    border:1px solid rgba(0,0,0,.18);
    white-space:nowrap;
}
.final-cta__btn:hover{filter:brightness(.94);}

@media (max-width: 980px){
    .home-hero__inner{flex-direction:column; align-items:flex-start;}
    .home-hero__right{display:none;}
    .how-grid{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:1fr;}
    .final-cta{flex-direction:column; align-items:stretch;}
}


/* ============================================
   MOBILE AUDIT (v61)
   Goal: make ALL pages usable on small screens without changing logic.
   Only CSS overrides.
   ============================================ */

/* Admin toolbars (members / groups): search + actions should stack and fill width */
@media (max-width: 720px){
    .admin-members-container{ padding: 16px; }

    .admin-members-toolbar{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .search-box{
        min-width: 0;
        max-width: none;
        width: 100%;
    }
    .toolbar-actions{
        width: 100%;
    }
    .toolbar-actions .btn-primary,
    .toolbar-actions .btn-secondary{
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Admin applications filters: prevent overflow from min-width inline styles */
@media (max-width: 720px){
    #applicationsRoleFilter{
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Admin dashboard inline 12-col grid must collapse on mobile */
@media (max-width: 720px){
    /* Grid container is inline-styled; override with !important */
    .content-page .grid{
        grid-template-columns: 1fr !important;
    }
    .content-page .grid > .card{
        grid-column: span 12 !important;
    }
}

/* Tables: ensure any table wrapper can scroll on narrow screens */
@media (max-width: 720px){
    .table-container{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-container table{
        min-width: 640px;
    }
}

/* Modals: fit viewport on very small screens */
@media (max-width: 480px){
    .modal-content,
    .modal-content-large{
        width: calc(100vw - 28px);
        max-width: calc(100vw - 28px);
        padding: 16px;
    }
    .modal-close{
        top: 10px;
        right: 10px;
    }
}

.application-comments__list{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:180px;
    overflow:auto;
    padding-right:6px;
    margin-bottom:10px;
}
.application-comments__msg{
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:10px 10px;
    background: rgba(255,255,255,.02);
}
.application-comments__meta{display:flex;gap:8px;align-items:baseline;margin-bottom:4px;color:var(--text-muted);font-size:12px;}
.application-comments__name{font-weight:800;color:var(--text-secondary);}
.application-comments__role{
    color: var(--role-color, var(--text-muted));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 1px 6px;
    font-weight: 700;
}
.application-comments__time{
    margin-left: auto;
    color: var(--text-muted);
}
.application-comments__text{white-space:pre-wrap;}
.application-comments__composer{display:flex;gap:10px;align-items:center;}
.application-comments__input{
    flex: 1;
    height: 40px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
    line-height: 1.35;
}

.application-comments__input:focus{
    border-color: var(--accent-blue);
    background-color: var(--bg-primary);
    box-shadow: 0 0 0 2px rgba(45, 63, 143, 0.2);
}

.application-comments__input::placeholder{
    color: var(--text-muted);
}

.application-comments__send{
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.application-comments__send svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.application-comments__send:hover{
    transform: scale(1.05);
}

.application-comments__send:active{
    transform: scale(0.98);
}

.application-meta{margin-top:12px;color:var(--text-muted);font-size:12px;}
.apply-info-text--success{border-color: rgba(76,175,80,.35); background: rgba(76,175,80,.08);}

/* === Новый дизайн фильтров заявок === */
.applications-filters-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.applications-filters-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.applications-filters-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.applications-filter-select {
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
    appearance: none;
    background-image: var(--icon-arrow-down);
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
.applications-filter-select option{
    background-color: #1f1f1f;
    color: var(--text-primary);
}

.applications-filter-select:hover {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(77, 103, 255, 0.3);
}

.applications-filter-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(45, 63, 143, 0.2);
}

.applications-filter-select--active {
    border-color: var(--accent-blue);
    background-color: rgba(45, 63, 143, 0.1);
}

.applications-filter-date-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.applications-filter-date {
    padding: 10px 14px;
    padding-right: 40px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    min-width: 200px;
    transition: all 0.2s ease;
}

.applications-filter-date::placeholder {
    color: var(--text-muted);
}

.applications-filter-date:hover {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(77, 103, 255, 0.3);
}

.applications-filter-date:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(45, 63, 143, 0.2);
}

.applications-filter-date-icon {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.applications-filter-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 300px;
    max-width: 500px;
}

.applications-filter-search-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 1;
}

.applications-filter-search-input {
    width: 100%;
    padding: 10px 14px;
    padding-left: 40px;
    padding-right: 40px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

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

.applications-filter-search-input:hover {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(77, 103, 255, 0.3);
}

.applications-filter-search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(45, 63, 143, 0.2);
}

.applications-filter-search-clear {
    position: absolute;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    z-index: 2;
}

.applications-filter-search-clear:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.applications-filter-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.applications-filter-action-btn:hover {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(77, 103, 255, 0.3);
    color: var(--text-primary);
}

.applications-filter-action-btn:active {
    transform: translateY(1px);
}

/* Адаптивность для фильтров */
@media (max-width: 1024px) {
    .applications-filters-bottom {
        flex-wrap: wrap;
    }
    
    .applications-filter-search {
        min-width: 100%;
        max-width: 100%;
    }
    
    .applications-filter-select {
        min-width: 150px;
        flex: 1;
    }
}

@media (max-width: 768px) {
    .applications-filters-container {
        padding: 16px;
        gap: 12px;
    }
    
    .applications-filters-top {
        gap: 10px;
    }
    
    .applications-filters-bottom {
        gap: 10px;
    }
    
    .applications-filter-select,
    .applications-filter-date {
        min-width: 100%;
        width: 100%;
    }
    
    .applications-filter-action-btn {
        width: 36px;
        height: 36px;
    }
}



/* === Global links style (yellow + no underline + icon) === */
a{
  color:#f5c542;
  text-decoration:none;
}

a:hover{
  text-decoration:none;
  opacity:.9;
}

/* Link icon removed: inline SVG only */

/* Адаптивные стили для toolbar управления участниками */
@media (max-width: 768px){
    .admin-members-toolbar{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .search-box{
        max-width: 100%;
        min-width: 0;
    }
    .toolbar-filters{
        width: 100%;
    }
    .toolbar-filters select{
        width: 100%;
        min-width: 0;
    }
    .toolbar-actions{
        width: 100%;
        justify-content: flex-end;
    }
}

/* === Улучшенный дизайн модального окна редактирования группы === */
.group-modal-content {
    max-width: 1000px;
    width: 95vw;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.group-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.group-modal-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.group-modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

.group-save-indicator {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
    opacity: 0;
    white-space: nowrap;
}

/* === Страница активности администраторов === */
.activity-filters {
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
}

.activity-filters__tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.activity-filter-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.activity-filter-tab:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: var(--text-primary);
}

.activity-filter-tab.active {
    background: rgba(74, 158, 255, 0.15);
    border-color: rgba(74, 158, 255, 0.4);
    color: var(--accent-blue);
}

.activity-filter-tab svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.activity-list-container {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 20px;
    min-height: 400px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.activity-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    transform: translateX(4px);
}

.activity-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 158, 255, 0.15);
    color: var(--accent-blue);
    flex-shrink: 0;
}

.activity-item__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

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

.activity-item__user strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.activity-item__groups {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.activity-user-group {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-item__time {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.activity-item__action {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-item__action-type {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.activity-item__description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
}

.activity-item__meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.activity-loading,
.activity-empty,
.activity-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.activity-loading__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

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

.activity-loading p,
.activity-empty p,
.activity-error p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.activity-error p {
    color: #f44336;
}

.activity-load-more {
    margin-top: 24px;
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.admin-panel-card--activity {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.admin-panel-card--activity:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}

/* Адаптивность */
@media (max-width: 768px) {
    .activity-filters__tabs {
        flex-direction: column;
    }
    
    .activity-filter-tab {
        width: 100%;
        justify-content: center;
    }
    
    .activity-item {
        flex-direction: column;
    }
    
    .activity-item__icon {
        align-self: flex-start;
    }
    
    .activity-item__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.group-save-indicator.group-save--saving {
    opacity: 1;
    color: var(--accent-blue);
    background: rgba(74, 158, 255, 0.1);
}

.group-save-indicator.group-save--saved {
    opacity: 1;
    color: var(--accent-green);
    background: rgba(76, 175, 80, 0.1);
}

.group-save-indicator.group-save--error {
    opacity: 1;
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

.group-modal-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.group-modal-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.group-modal-section-full {
    grid-column: 1 / -1;
}

.group-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.group-section-header svg {
    width: 20px;
    height: 20px;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.group-section-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.form-label-with-hint {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.form-label-with-hint > span:first-child {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

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

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-input-enhanced {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    outline: none;
}

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

.form-input-enhanced:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(77, 103, 255, 0.3);
}

.form-input-enhanced:focus {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(45, 63, 143, 0.15);
}

.form-input-enhanced:invalid:not(:placeholder-shown) {
    border-color: #f44336;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.15);
}

.input-action-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.input-action-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    transform: scale(1.05);
}

.input-validation {
    position: absolute;
    bottom: -20px;
    left: 0;
    font-size: 12px;
    color: #f44336;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.input-validation.show {
    opacity: 1;
}

.input-validation.success {
    color: var(--accent-green);
}

/* Улучшенный цветовой пикер */
.color-picker-enhanced {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.color-picker-preview {
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.color-preview-badge {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.color-picker-controls {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.color-input-native {
    width: 60px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.color-input-native:hover {
    border-color: var(--accent-blue);
    transform: scale(1.05);
}

.color-input-text-wrapper {
    flex: 1;
    position: relative;
}

.color-input-text {
    width: 100%;
    padding: 12px 16px;
    padding-right: 120px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', monospace;
    transition: all 0.2s ease;
    outline: none;
}

.color-input-text:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(77, 103, 255, 0.3);
}

.color-input-text:focus {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(45, 63, 143, 0.15);
}

.color-presets {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    align-items: center;
}

.color-preset {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.color-preset:hover {
    transform: scale(1.2);
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.color-preset:active {
    transform: scale(1.1);
}

/* Улучшенный switch */
.switch-enhanced {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
    transition: all 0.2s ease;
}

.switch-enhanced:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(77, 103, 255, 0.3);
}

.switch-enhanced input[type="checkbox"] {
    display: none;
}

.switch-slider {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.switch-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-muted);
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch-enhanced input[type="checkbox"]:checked + .switch-slider {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.switch-enhanced input[type="checkbox"]:checked + .switch-slider::before {
    transform: translateX(20px);
    background: #fff;
}

.switch-content {
    flex: 1;
    min-width: 0;
}

.switch-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.switch-description {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Улучшенный список страниц */
.pages-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 250px;
}

.pages-search-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 1;
}

.pages-search-input {
    width: 100%;
    padding: 10px 14px;
    padding-left: 38px;
    padding-right: 38px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
    outline: none;
}

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

.pages-search-input:focus {
    background: rgba(255,255,255,0.08);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(45, 63, 143, 0.15);
}

.pages-search-clear {
    position: absolute;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    z-index: 2;
}

.pages-search-clear:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent-blue);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-link:hover {
    background: rgba(74, 158, 255, 0.1);
    color: var(--accent-blue-hover);
}

.pages-list-enhanced {
    max-height: 400px;
    overflow-y: auto;
    padding: 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.pages-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-muted);
}

.loading-spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

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

.group-cat-card {
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.group-cat-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(77, 103, 255, 0.3);
}

.group-cat-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.group-topic-block {
    margin-bottom: 12px;
}

.group-topic-block:last-child {
    margin-bottom: 0;
}

.group-topic-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-topic-pages {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.group-page-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.group-page-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--border-color);
}

.group-page-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-blue);
}

.group-page-item input[type="checkbox"]:checked + .group-page-title {
    color: var(--accent-blue);
    font-weight: 500;
}

.group-page-title {
    font-size: 13px;
    color: var(--text-primary);
    transition: all 0.2s ease;
    flex: 1;
}

.group-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
    position: sticky;
    bottom: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.btn-primary-large {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Адаптивность */
@media (max-width: 900px) {
    .group-modal-content {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .group-modal-body {
        padding: 20px;
        gap: 20px;
    }
    
    .group-pages-grid {
        grid-template-columns: 1fr;
    }
    
    .group-section-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .pages-search-wrapper {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .group-modal-header {
        padding: 16px 20px;
    }
    
    .group-modal-header h2 {
        font-size: 20px;
    }
    
    .group-modal-body {
        padding: 16px;
    }
    
    .color-picker-controls {
        flex-direction: column;
    }
    
    .color-input-native {
        width: 100%;
    }
}

/* Анимации для модального окна */
#groupModal.modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#groupModal.modal.active {
    opacity: 1;
    pointer-events: all;
}

#groupModal .group-modal-content {
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#groupModal.modal.active .group-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Улучшенные карточки категорий */
.group-cat-card {
    animation: fadeInUp 0.3s ease forwards;
    opacity: 0;
}

.group-cat-card:nth-child(1) { animation-delay: 0.05s; }
.group-cat-card:nth-child(2) { animation-delay: 0.1s; }
.group-cat-card:nth-child(3) { animation-delay: 0.15s; }
.group-cat-card:nth-child(4) { animation-delay: 0.2s; }
.group-cat-card:nth-child(5) { animation-delay: 0.25s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Улучшенные элементы страниц */
.group-page-item {
    position: relative;
    overflow: hidden;
}

.group-page-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-blue);
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.group-page-item:hover::before,
.group-page-item input[type="checkbox"]:checked ~ .group-page-title + ::before {
    transform: scaleY(1);
}

.group-page-item input[type="checkbox"]:checked ~ .group-page-title {
    position: relative;
}

.group-page-item input[type="checkbox"]:checked ~ .group-page-title::after {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.3);
}

/* Улучшенный скролл для списка страниц */
.pages-list-enhanced::-webkit-scrollbar {
    width: 8px;
}

.pages-list-enhanced::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.02);
    border-radius: 4px;
}

.pages-list-enhanced::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.pages-list-enhanced::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

/* Улучшенные кнопки */
.btn-primary-large {
    position: relative;
    overflow: hidden;
}

.btn-primary-large::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary-large:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary-large svg {
    position: relative;
    z-index: 1;
}

/* === Страница периодов наборов === */
.recruitment-periods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}

/* Test Results Grid (в стиле периодов наборов) */
.test-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}

.test-results-overview {
    margin-bottom: 24px;
}

.test-results-overview__stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
}

.test-results-stat {
    text-align: center;
    padding: 12px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

.test-results-stat:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.test-results-stat__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 6px;
}

.test-results-stat--pending .test-results-stat__value {
    color: var(--accent-yellow);
}

.test-results-stat--approved .test-results-stat__value {
    color: var(--accent-green);
}

.test-results-stat--passed .test-results-stat__value {
    color: var(--accent-green);
}

.test-results-stat--failed .test-results-stat__value {
    color: var(--text-secondary);
}

.test-results-stat__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    line-height: 1.2;
}

.test-result-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.test-result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.test-result-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(74, 158, 255, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.test-result-card:hover::before {
    opacity: 1;
}

.test-result-card--passed {
    border-color: rgba(76, 175, 80, 0.4);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(76, 175, 80, 0.12));
}

.test-result-card--passed::before {
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
    opacity: 1;
}

.test-result-card--failed {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.02);
}

.test-result-card--pending {
    border-color: rgba(255, 193, 7, 0.4);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.12));
}

.test-result-card--pending::before {
    background: linear-gradient(90deg, transparent, var(--accent-yellow), transparent);
    opacity: 1;
}

.test-result-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.test-result-card__title-group {
    flex: 1;
    min-width: 0;
}

.test-result-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.test-result-card__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.test-result-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.test-result-badge--approved {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: var(--accent-green);
}

.test-result-badge--pending {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: var(--accent-yellow);
}

.test-result-badge--passed {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: var(--accent-green);
}

.test-result-badge--failed {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--text-muted);
}

.test-result-card__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

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

.btn-icon--success:hover {
    background: rgba(76, 175, 80, 0.15);
    color: var(--accent-green);
}

.test-result-card__user {
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
}

.test-result-card__user-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.test-result-card__user-date {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.test-result-card__score {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.test-result-score-item {
    text-align: center;
    padding: 12px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

.test-result-score-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.test-result-score-item--percentage .test-result-score-item__value {
    color: var(--accent-green);
}

.test-result-score-percentage {
    color: var(--accent-green);
    font-weight: 700;
}

/* Новые стили для блоков вопросов */
.test-result-question-block {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 24px;
    margin-bottom: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.test-result-question-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.test-result-question-block:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    border-color: rgba(74, 158, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.test-result-question-block:hover::before {
    background: var(--accent-blue);
    width: 5px;
}

.test-result-question-block--correct {
    border-color: rgba(76, 175, 80, 0.3);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(76, 175, 80, 0.03));
}

.test-result-question-block--correct::before {
    background: var(--accent-green);
    width: 5px;
}

.test-result-question-block--incorrect {
    border-color: rgba(255,255,255,0.15);
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.test-result-question-block--incorrect::before {
    background: rgba(244, 67, 54, 0.5);
}

.test-result-question-block__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.test-result-question-block__info {
    flex: 1;
}

.test-result-question-block__number {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.test-result-question-block__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
}

.test-result-question-block__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.test-result-question-block__points {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.08);
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.test-result-question-block__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.test-result-question-block__status svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.test-result-question-block__status--correct {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.15));
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: var(--accent-green);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

.test-result-question-block__status--incorrect {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.15), rgba(244, 67, 54, 0.08));
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #f44336;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.15);
}

.test-result-question-block__answers {
    margin-top: 20px;
}

.test-result-answers-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.test-result-answers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.test-result-answer-item {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.test-result-answer-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.test-result-answer-item:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border-color: rgba(74, 158, 255, 0.3);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.test-result-answer-item:hover::before {
    background: var(--accent-blue);
    width: 4px;
}

.test-result-answer-item--user-correct {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08));
    border-color: rgba(76, 175, 80, 0.4);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.test-result-answer-item--user-correct::before {
    background: var(--accent-green);
    width: 4px;
}

.test-result-answer-item--user-incorrect {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(244, 67, 54, 0.05));
    border-color: rgba(244, 67, 54, 0.3);
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.15);
}

.test-result-answer-item--user-incorrect::before {
    background: #f44336;
    width: 4px;
}

.test-result-answer-item--correct-not-selected {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.12), rgba(76, 175, 80, 0.06));
    border-color: rgba(76, 175, 80, 0.3);
    opacity: 0.85;
}

.test-result-answer-item--correct-not-selected::before {
    background: var(--accent-green);
    width: 3px;
    opacity: 0.6;
}

.test-result-answer-item--neutral {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.05);
    opacity: 0.6;
}

.test-result-answer-item--neutral::before {
    opacity: 0.3;
}

.test-result-answer-item__content {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.test-result-answer-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.test-result-answer-item--user-correct .test-result-answer-icon {
    color: var(--accent-green);
}

.test-result-answer-item--user-incorrect .test-result-answer-icon {
    color: #f44336;
}

.test-result-answer-item--correct-not-selected .test-result-answer-icon {
    color: var(--accent-green);
    opacity: 0.8;
}

.test-result-answer-item__text {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
}

.test-result-answer-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 8px;
    margin-top: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.2s ease;
}

.test-result-answer-item--user-correct .test-result-answer-label {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.25), rgba(76, 175, 80, 0.15));
    border-color: rgba(76, 175, 80, 0.4);
    color: var(--accent-green);
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.2);
}

.test-result-answer-item--user-incorrect .test-result-answer-label {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.15), rgba(244, 67, 54, 0.1));
    border-color: rgba(244, 67, 54, 0.3);
    color: #f44336;
}

.test-result-answer-item--correct-not-selected .test-result-answer-label {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.12));
    border-color: rgba(76, 175, 80, 0.3);
    color: var(--accent-green);
    opacity: 0.9;
}

.test-result-score-item__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 6px;
}

.test-result-score-item__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    line-height: 1.2;
}

.test-results-loading,
.test-results-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.test-results-loading__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 20px;
}

.test-results-loading p,
.test-results-empty p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

.current-period-box {
    margin-bottom: 20px;
}

.current-period-box__loading {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
}

.recruitment-period-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.recruitment-period-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.recruitment-period-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(74, 158, 255, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.recruitment-period-card:hover::before {
    opacity: 1;
}

.recruitment-period-card--open {
    border-color: rgba(76, 175, 80, 0.4);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(76, 175, 80, 0.12));
}

.recruitment-period-card--open::before {
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
    opacity: 1;
}

.recruitment-period-card--upcoming {
    border-color: rgba(255, 193, 7, 0.4);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.12));
}

.recruitment-period-card--upcoming::before {
    background: linear-gradient(90deg, transparent, var(--accent-yellow), transparent);
    opacity: 1;
}

.recruitment-period-card--inactive {
    opacity: 0.6;
    background: rgba(255,255,255,0.02);
}

.recruitment-period-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.recruitment-period-card__title-group {
    flex: 1;
    min-width: 0;
}

.recruitment-period-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.recruitment-period-card__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.recruitment-period-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recruitment-period-badge--open {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: var(--accent-green);
}

.recruitment-period-badge--upcoming {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: var(--accent-yellow);
}

.recruitment-period-badge--past {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--text-muted);
}

.recruitment-period-badge--inactive {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
}

.recruitment-period-card__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

.btn-secondary--small {
    padding: 8px 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: var(--text-primary);
}

.btn-icon--danger:hover {
    background: rgba(244, 67, 54, 0.15);
    border-color: rgba(244, 67, 54, 0.3);
    color: #f44336;
}

.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.recruitment-period-card__dates {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
}

.recruitment-period-date {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recruitment-period-date--start {
    position: relative;
}

.recruitment-period-date--start::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(147, 197, 253, 0.15));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.recruitment-period-card--open .recruitment-period-date--start::before,
.recruitment-period-card--upcoming .recruitment-period-date--start::before {
    opacity: 1;
}

.recruitment-period-date__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.recruitment-period-date--start .recruitment-period-date__label {
    color: #60A5FA;
    font-size: 12px;
}

.recruitment-period-date__value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.recruitment-period-date--start .recruitment-period-date__value {
    font-size: 18px;
    color: #93C5FD;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.recruitment-period-date__time {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.recruitment-period-date--start .recruitment-period-date__time {
    color: #93C5FD;
    font-weight: 600;
}

.recruitment-period-date__hint {
    font-size: 11px;
    color: var(--accent-yellow);
    font-weight: 600;
    margin-top: 2px;
}

.recruitment-period-date__arrow {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
    flex-shrink: 0;
}

.recruitment-period-card__stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.recruitment-period-stat {
    text-align: center;
    padding: 12px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.recruitment-period-stat:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.recruitment-period-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.7;
}

.recruitment-period-stat--pending .recruitment-period-stat__icon {
    color: var(--accent-yellow);
    opacity: 1;
}

.recruitment-period-stat--reviewed .recruitment-period-stat__icon {
    color: var(--accent-blue);
    opacity: 1;
}

.recruitment-period-stat--accepted .recruitment-period-stat__icon {
    color: var(--accent-green);
    opacity: 1;
}

.recruitment-period-stat--rejected .recruitment-period-stat__icon {
    color: var(--text-secondary);
    opacity: 1;
}

.recruitment-period-stat__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.recruitment-period-stat--pending .recruitment-period-stat__value {
    color: var(--accent-yellow);
}

.recruitment-period-stat--reviewed .recruitment-period-stat__value {
    color: var(--accent-blue);
}

.recruitment-period-stat--accepted .recruitment-period-stat__value {
    color: var(--accent-green);
}

.recruitment-period-stat--rejected .recruitment-period-stat__value {
    color: var(--text-secondary);
}

.recruitment-period-stat__label {
    display: none;
}

.recruitment-periods-loading,
.recruitment-periods-empty,
.recruitment-periods-error {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.recruitment-periods-loading__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 20px;
}

.recruitment-periods-loading p,
.recruitment-periods-empty p,
.recruitment-periods-error p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

.recruitment-periods-error p {
    color: #f44336;
}

/* Модальное окно периода */
.recruitment-period-modal {
    max-width: 700px;
    width: 90vw;
}

.recruitment-period-modal__header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.recruitment-period-modal__header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.recruitment-period-modal__subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.recruitment-period-modal__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.recruitment-period-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-group--highlight {
    position: relative;
}

.form-group--highlight::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.2), rgba(76, 175, 80, 0.2));
    z-index: -1;
    opacity: 0.5;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-label svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.form-label--highlight {
    color: var(--accent-blue);
    font-size: 14px;
}

.form-label--highlight svg {
    color: var(--accent-blue);
}

.form-label-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(74, 158, 255, 0.15);
    border: 1px solid rgba(74, 158, 255, 0.3);
    color: var(--accent-blue);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
}

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

.form-input:focus {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
}

.form-input--highlight {
    border-color: rgba(74, 158, 255, 0.3);
    background: rgba(74, 158, 255, 0.08);
}

.form-input--highlight:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.3);
}

.form-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    padding-left: 24px;
}

.inline-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
}

.inline-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.recruitment-period-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Адаптивность */
@media (max-width: 1200px) {
    .recruitment-periods-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .recruitment-periods-grid {
        grid-template-columns: 1fr;
    }
    
    .recruitment-period-card__dates {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .recruitment-period-date__arrow {
        transform: rotate(90deg);
        align-self: center;
        margin: 8px 0;
    }
    
    .recruitment-period-card__stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .recruitment-period-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .recruitment-period-card {
        padding: 20px;
    }
    
    .recruitment-period-card__stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .recruitment-period-date {
        width: 100%;
    }
    
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .page-actions--inline {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .page-actions-group {
        width: 100%;
    }
    
    .form-input--year {
        flex: 1;
        min-width: 0;
    }
    
    #addPeriodBtn {
        width: 100%;
        justify-content: center;
    }
}

.btn-primary-large span {
    position: relative;
    z-index: 1;
}

/* Улучшенный индикатор сохранения */
.group-save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.group-save-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 1.5s ease infinite;
}

.group-save-indicator.group-save--saved::before {
    animation: none;
    background: var(--accent-green);
}

.group-save-indicator.group-save--error::before {
    animation: none;
    background: #f44336;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* Улучшенный цветовой пикер - пресеты */
.color-presets {
    flex-wrap: wrap;
    gap: 4px;
}

.color-preset {
    position: relative;
}

.color-preset::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    pointer-events: none;
}

.color-preset:hover::after {
    border-color: rgba(255,255,255,0.3);
}

/* Улучшенный switch с анимацией */
.switch-slider {
    position: relative;
}

.switch-slider::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.2), rgba(54, 80, 178, 0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.switch-enhanced input[type="checkbox"]:checked + .switch-slider::after {
    opacity: 1;
}

/* Улучшенные подсказки */
.form-hint {
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-hint::before {
    content: 'ℹ';
    font-size: 10px;
    opacity: 0.6;
}

/* ============================================
   СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА РЕЗУЛЬТАТОВ ТЕСТИРОВАНИЯ
   ============================================ */

#viewTestResultModal .modal-content h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-primary);
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(74, 158, 255, 0.2);
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.05), transparent);
    padding: 20px 24px;
    margin: -24px -24px 24px -24px;
    border-radius: 16px 16px 0 0;
}

.test-result-view {
    padding: 0;
    max-height: calc(90vh - 180px);
    overflow-y: auto;
    padding-right: 8px;
}

.test-result-view::-webkit-scrollbar {
    width: 8px;
}

.test-result-view::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.test-result-view::-webkit-scrollbar-thumb {
    background: rgba(74, 158, 255, 0.3);
    border-radius: 4px;
}

.test-result-view::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 158, 255, 0.5);
}

/* Карточка заголовка результата */
.test-result-header-card {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.08), rgba(74, 158, 255, 0.04));
    border: 1px solid rgba(74, 158, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.test-result-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
    opacity: 0.6;
}

.test-result-header-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.test-result-header-card__user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.test-result-header-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
}

.test-result-header-card__user-details {
    flex: 1;
    min-width: 0;
}

.test-result-header-card__user-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.test-result-header-card__test-name {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.test-result-header-card__status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.test-result-header-card__status-badge--passed {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.15));
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: var(--accent-green);
}

.test-result-header-card__status-badge--failed {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2), rgba(244, 67, 54, 0.15));
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #f44336;
}

.test-result-header-card__status-badge svg {
    flex-shrink: 0;
}

/* Секция с результатами */
.test-result-header-card__score-section {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-bottom: 20px;
}

.test-result-header-card__score-main {
    text-align: center;
}

.test-result-header-card__score-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.test-result-header-card__score-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.test-result-header-card__score-current {
    font-size: 32px;
    font-weight: 700;
    color: var(--accent-blue);
    line-height: 1;
}

.test-result-header-card__score-separator {
    font-size: 24px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0 2px;
}

.test-result-header-card__score-max {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-secondary);
}

.test-result-header-card__score-divider {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
}

.test-result-header-card__percentage-section {
    text-align: center;
}

.test-result-header-card__percentage-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-green);
    line-height: 1;
    margin-bottom: 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.test-result-header-card__percentage-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* Мета-информация */
.test-result-header-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.test-result-header-card__meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.test-result-header-card__meta-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(74, 158, 255, 0.3);
    transform: translateY(-2px);
}

.test-result-header-card__meta-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 158, 255, 0.1);
    color: var(--accent-blue);
    flex-shrink: 0;
}

.test-result-header-card__meta-icon--approved {
    background: rgba(76, 175, 80, 0.1);
    color: var(--accent-green);
}

.test-result-header-card__meta-icon--pending {
    background: rgba(255, 193, 7, 0.1);
    color: var(--accent-yellow);
}

.test-result-header-card__meta-icon svg {
    width: 18px;
    height: 18px;
}

.test-result-header-card__meta-content {
    flex: 1;
    min-width: 0;
}

.test-result-header-card__meta-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.test-result-header-card__meta-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.test-result-header-card__meta-value--approved {
    color: var(--accent-green);
}

.test-result-header-card__meta-value--pending {
    color: var(--accent-yellow);
}

/* Секция с вопросами */
.test-result-questions {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.test-result-questions-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(74, 158, 255, 0.3);
    position: relative;
    padding-left: 16px;
}

.test-result-questions-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, var(--accent-blue), var(--accent-purple));
    border-radius: 2px;
}

.test-result-questions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.test-result-questions-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Действия */
.test-result-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.test-result-actions .btn {
    min-width: 180px;
    justify-content: center;
}

/* Адаптивность */
@media (max-width: 768px) {
    .test-result-header-card__top {
        flex-direction: column;
        align-items: stretch;
    }
    
    .test-result-header-card__status-badge {
        align-self: flex-start;
    }
    
    .test-result-header-card__score-section {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .test-result-header-card__score-divider {
        width: 100%;
        height: 1px;
    }
    
    .test-result-header-card__meta {
        grid-template-columns: 1fr;
    }
    
    .test-result-actions {
        flex-direction: column;
    }
    
    .test-result-actions .btn {
        width: 100%;
    }
}

/* ===== GitBook-like overrides ===== */
:root{
    --bg-primary: #333333;
    --bg: var(--bg-primary);
    --bg-secondary: #151a21;
    --bg-tertiary: #1b212b;
    --text-primary: #e7ebf2;
    --text-secondary: #9aa4b2;
    --text-muted: #6b7280;
    --border-color: #242c37;
    --accent-blue: #2ecc71;
    --accent-blue-hover: #27b160;
    --accent-blue-light: rgba(46, 204, 113, 0.22);
    --accent-warm: #2ecc71;
    --accent-warm-light: rgba(46, 204, 113, 0.18);
    --sidebar-width: 280px;
    --top-bar-height: 56px;
    --layout-padding: 36px;
    --radius: 10px;
    --block-gap: 24px;
    --shadow-sm: 0 6px 16px rgba(5, 8, 14, 0.45);
    --shadow-md: 0 18px 44px rgba(5, 8, 14, 0.55);
    --focus-ring: 0 0 0 3px rgba(46, 204, 113, 0.28);
}

body{
    background: var(--bg);
}

body::before,
body::after{
    content: none;
    display: none;
}

.top-bar{
    background-color: var(--bg-secondary);
}

.sidebar{
    background-color: var(--bg-primary);
}

.content-page{
    margin: 18px auto 28px;
    padding: 18px;
}

.content-page > * + *{
    margin-top: var(--block-gap);
}

.page-header{
    margin-bottom: 36px;
}

.content-section{
    margin-bottom: 48px;
}

.nav-link{
    border-left: 3px solid transparent;
    transition: background-color var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease),
                color var(--t-med) var(--ease);
    transform: none;
}

.nav-link:hover{
    background-color: rgba(255, 255, 255, 0.05);
    transform: none;
}

.nav-link.active{
    background: rgba(46, 204, 113, 0.12);
    border-left-color: var(--accent-blue);
    color: var(--text-primary);
    font-weight: 600;
}

.nav-link.active::before{
    display: none;
}

.profile-layout{
    gap: 28px;
}

.profile-main .profile-card + .profile-card,
.profile-side .profile-card + .profile-card{
    margin-top: var(--block-gap);
}

.profile-main .profile-card:first-child{
    border: 1px solid rgba(46, 204, 113, 0.3);
    background: rgba(46, 204, 113, 0.08);
    box-shadow: var(--shadow-sm);
}

.profile-main .profile-card:first-child .card-header{
    border-bottom: 1px solid rgba(46, 204, 113, 0.2);
    padding-bottom: 10px;
}

.profile-main .profile-card:first-child .profile-bio{
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(15, 17, 21, 0.6);
    border: 1px solid rgba(46, 204, 113, 0.18);
}

a{
    color: #7fdc9a;
}

a[href]:not([role="button"]):not(.btn):not(.button):not([class*="btn"]):not([class*="button"]):not([class*="icon"]):not([class*="nav"]):not([class*="menu"]):not([class*="action"]):not([class*="control"])::after{
    content: "";
}

@media (max-width: 900px){
    :root{
        --layout-padding: 24px;
        --sidebar-width: 260px;
    }
}

/* ===== Apply page: GitBook-like polish ===== */
.apply-hero-enhanced{
    background: linear-gradient(180deg, rgba(21, 26, 33, 0.95), rgba(15, 17, 21, 0.95));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    border-radius: 16px;
}

.apply-hero-enhanced::before{
    display: none;
}

.apply-hero-enhanced__title{
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.apply-hero-enhanced__subtitle{
    color: var(--text-secondary);
}

.apply-project-card{
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.apply-project-card__head{
    max-width: 720px;
    margin-bottom: 18px;
}

.apply-project-card__eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}

.apply-project-card__title{
    margin: 10px 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.apply-project-card__text{
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.apply-project-card__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.apply-project-card__item{
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}

.apply-project-card__item h3{
    font-size: 15px;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.apply-project-card__item p{
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.features-grid-enhanced{
    gap: 16px;
}

.feature-card-enhanced{
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    box-shadow: none;
    transform: none;
}

.feature-card-enhanced:hover{
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.16);
    transform: none;
    box-shadow: none;
}

.feature-card-enhanced::before{
    opacity: 0.25;
}

.steps-section{
    margin: 10px 0 32px;
}

.steps-list li{
    margin-bottom: 20px;
    padding-left: 44px;
}

.steps-list li::before{
    width: 26px;
    height: 26px;
    font-size: 13px;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.35);
}

.apply-form-enhanced{
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    border-radius: 18px;
}

.apply-form-enhanced__input,
.apply-form-enhanced__textarea{
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
}

.apply-form-enhanced__input:focus,
.apply-form-enhanced__textarea:focus{
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18);
}

@media (max-width: 720px){
    .apply-project-card{
        padding: 18px;
    }
}

/* ===== Icon fixes (avoid broken glyphs) ===== */
.concept-list li::before{
    content: "*";
}

.profile-info-item__value:empty::before{
    content: "-";
}

.steps-list li.is-done::before{
    content: counter(step-counter);
}

.form-hint::before{
    content: "i";
}

.admin-announce__timer:before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--text-muted);
    display: inline-block;
    margin-right: 6px;
}

.join-step.is-done .join-step__icon::before{
    content: "v";
}
.join-step.is-current .join-step__icon::before{
    content: "o";
}
.join-step.is-next .join-step__icon::before{
    content: ".";
}

.apply-agree-enhanced__input:checked + .apply-agree-enhanced__label .apply-agree-enhanced__box::after{
    content: "v";
}

.apply-agree__input:checked + .apply-agree__label .apply-agree__box:after{
    content: "v";
}

.application-approved-animation::after{
    content: "v";
}

.tree-item-protected .tree-item-name::after{
    content: " (защищено)";
}

/* ===== Unified palette (max 4 colors) ===== */
:root{
    --accent-green: var(--accent-blue);
    --accent-yellow: var(--accent-blue);
    --accent-warm: var(--accent-blue);
    --accent-warm-light: rgba(46, 204, 113, 0.18);
}

.btn-success,
.btn-danger{
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.btn-success:hover,
.btn-danger:hover{
    background: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
}

.status-badge,
.test-result-status,
.apply-status-card--success,
.apply-status-card--info,
.apply-status-card--warning,
.admin-announce__status-badge--open,
.admin-announce__status-badge--closed{
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.3);
    color: var(--accent-blue);
    box-shadow: none;
}

.status-badge.status-rejected,
.status-badge.status-failed,
.status-badge.status-neutral,
.status-badge.status-deleted,
.test-result-status.failed,
.test-result-status.neutral{
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
    color: var(--text-secondary);
}

.dashboard-stat-card__value--success,
.dashboard-stat-card__value--warning,
.dashboard-stat-card__value--danger{
    color: var(--accent-blue);
}

.apply-status-card__icon,
.apply-status-card__meta-item,
.apply-announce-enhanced__timer,
.apply-announce-enhanced__icon{
    color: var(--accent-blue);
}

/* ===== Unified spacing for cards ===== */
.card,
.status-card,
.stat-card,
.application-card,
.admin-panel-card,
.dashboard-chart-card,
.dashboard-info-card,
.info-card,
.feature-card,
.feature-card-enhanced{
    border-radius: 14px;
    border-color: var(--border-color);
    background: var(--bg-secondary);
    box-shadow: none;
}

/* Deeper inner spacing inside cards */
.card{
    padding: 18px 20px;
}

.card .card-header{
    margin-bottom: 12px;
}

.card .card-content{
    padding: 0;
}

/* ===== No blue on dark background ===== */
.nav-link--level2.active,
.nav-link--level3.active{
    border-left-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(46, 204, 113, 0.12);
}

.status-badge.status-reviewed{
    color: var(--accent-blue);
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.3);
}

.switch input:checked + .switch__slider{
    background: rgba(46, 204, 113, 0.65);
    border-color: rgba(46, 204, 113, 0.75);
}

.apply-wizard__bar{
    background: rgba(46, 204, 113, 0.9);
}

.apply-form input:focus,
.apply-form textarea:focus,
.apply-form select:focus{
    border-color: rgba(46, 204, 113, 0.5);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18);
}

.apply-btn--primary{
    background: rgba(46, 204, 113, 0.92);
    border-color: rgba(46, 204, 113, 0.92);
}

.recruitment-period-date--start::before{
    background: rgba(46, 204, 113, 0.15);
}

.recruitment-period-date--start .recruitment-period-date__label,
.recruitment-period-date--start .recruitment-period-date__value,
.recruitment-period-date--start .recruitment-period-date__time{
    color: var(--accent-blue);
}

/* ===== Theme + spacing fixes (global overrides) ===== */
:root{
    --accent-blue: #2ecc71;
    --accent-blue-hover: #26b861;
    --accent-blue-light: rgba(46, 204, 113, 0.2);
    --focus-ring: 0 0 0 3px rgba(46, 204, 113, 0.25);
    --text-gradient: linear-gradient(135deg, #f5f5f5, #e7e7e7);
}

/* Deeper padding inside profile cards and lists */
.profile-card{
    padding: 22px 24px;
}
.profile-card .card-header{
    margin-bottom: 14px;
}
.profile-bio{
    padding-top: 6px;
}
.profile-event,
.profile-side-list-item,
.profile-info-item,
.profile-info-note{
    padding: 14px 16px;
}

/* Keep text inside inputs and action buttons */
#editMemberModal .input-with-actions .input-actions{
    max-width: calc(100% - 12px);
}
#editMemberModal .input-with-actions.input-with-actions--double input{
    padding-right: 210px;
}
#editMemberModal .input-action-btn--text{
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Remove green validation outlines on inputs */
.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown),
.form-group select:valid:not(:placeholder-shown){
    border-color: var(--border-color);
    box-shadow: none;
}

/* Neutral hint badges (no yellow blocks) */
.form-label-inline__hint{
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--text-muted) !important;
}

/* Admin testing inline inputs: remove blue focus ring */
.form-input-inline:focus{
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15) !important;
}

/* Floating popovers for member editor (outside modal flow) */
#memberGroupPickerPopover,
#memberQualificationPickerPopover{
    position: fixed;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(20, 22, 28, 0.98);
    box-shadow: 0 16px 50px rgba(0,0,0,0.55);
    padding: 12px;
    z-index: 12000;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}
#memberGroupPickerPopover{
    width: 320px;
    max-width: calc(100vw - 24px);
}
#memberQualificationPickerPopover{
    width: 520px;
    max-width: calc(100vw - 24px);
}

/* ===== Home page redesign ===== */
.home-page{
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.home-hero{
    padding: 28px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.12), rgba(20, 20, 20, 0.1));
    border: 1px solid rgba(255,255,255,0.08);
}
.home-hero__inner{
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 24px;
    align-items: stretch;
}
.home-hero__eyebrow{
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.home-hero__title{
    font-size: 36px;
    line-height: 1.1;
    margin: 0 0 12px;
    font-weight: 800;
}
.home-hero__subtitle{
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 18px;
}
.home-hero__actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.home-hero__cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--accent-blue);
    color: #0f1115;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.2);
}
.home-hero__cta--ghost{
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.12);
}
.home-hero__cta:hover{ filter: brightness(0.95); }
.home-hero__panel{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    padding: 16px;
}
.home-hero__panel--accent{
    border-color: rgba(46,204,113,0.25);
    background: rgba(46,204,113,0.08);
}
.home-hero__panel-title{
    font-weight: 700;
    margin-bottom: 8px;
}
.home-hero__panel-text{
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}
.home-hero__list{
    margin: 0;
    padding-left: 16px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.home-section{
    padding: 0;
}
.home-section__head{
    margin-bottom: 14px;
}
.home-section__title{
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
}
.home-section__subtitle{
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.home-principles{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.home-principle{
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    border-radius: 14px;
    padding: 16px;
}
.home-principle__icon{
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
    opacity: 0.8;
}
.home-principle__title{
    font-weight: 700;
    margin-bottom: 6px;
}
.home-principle__text{
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.home-world{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.home-world__card{
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    border-radius: 14px;
    padding: 16px;
}
.home-world__title{
    font-weight: 700;
    margin-bottom: 6px;
}
.home-world__text{
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}
.home-world__list{
    margin: 10px 0 0;
    padding-left: 16px;
    color: var(--text-secondary);
    font-size: 13px;
}
.home-world__wide{
    grid-column: 1 / -1;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    border-radius: 14px;
    padding: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.home-world__wide p{ margin: 0 0 8px; }
.home-world__wide p:last-child{ margin-bottom: 0; }

.home-start{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    gap: 14px;
}
.home-start__steps{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.home-start__step{
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.home-start__num{
    font-weight: 800;
    color: var(--accent-blue);
    font-size: 14px;
    min-width: 36px;
}
.home-start__title{
    font-weight: 700;
}
.home-start__text{
    font-size: 13px;
    color: var(--text-secondary);
}
.home-start__note{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(46,204,113,0.08);
    padding: 16px;
    color: var(--text-secondary);
}
.home-start__note-title{
    font-weight: 700;
    margin-bottom: 6px;
}

.home-systems{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
.home-system{
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    border-radius: 14px;
    padding: 16px;
}
.home-system__title{
    font-weight: 800;
    margin-bottom: 6px;
}
.home-system__text{
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}
.home-system__meta{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.home-system__tag{
    border-radius: 999px;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    font-size: 11px;
    font-weight: 700;
}
.home-system__tag--muted{
    opacity: 0.7;
}

.home-stats{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.home-stat{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    padding: 14px;
}
.home-stat__value{
    font-size: 24px;
    font-weight: 800;
}
.home-stat__label{
    color: var(--text-muted);
    font-size: 12px;
}

.home-events{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.home-events__item{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.home-events__icon{ opacity: 0.7; }
.home-events__text{
    color: var(--text-primary);
}
.home-events__meta{
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.home-status{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    padding: 16px;
}
.home-status__row{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
}
.home-status__label{ color: var(--text-muted); }
.home-status__value{ font-weight: 700; }
.home-status__actions{
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.home-cta{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    padding: 18px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}
.home-cta__title{
    font-weight: 800;
    margin-bottom: 6px;
}
.home-cta__text{
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 1024px){
    .home-hero__inner{ grid-template-columns: 1fr; }
    .home-principles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-start{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
    .home-principles{ grid-template-columns: 1fr; }
    .home-world{ grid-template-columns: 1fr; }
    .home-stats{ grid-template-columns: 1fr; }
    .home-cta{ flex-direction: column; align-items: stretch; }
}

/* ===== Apply page redesign ===== */
.apply-hero-enhanced{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(135deg, rgba(46,204,113,0.12), rgba(20,20,20,0.1));
    padding: 28px;
}
.apply-hero-enhanced__title{
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 10px;
}
.apply-hero-enhanced__subtitle{
    color: var(--text-secondary);
    font-size: 14px;
}
.apply-project-card{
    margin-top: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    padding: 20px;
}
.apply-project-card__eyebrow{
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
}
.apply-project-card__title{
    margin: 8px 0 8px;
    font-size: 22px;
}
.apply-project-card__text{
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}
.apply-project-card__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.apply-project-card__item{
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    padding: 14px;
}
.apply-project-card__item h3{
    margin: 0 0 6px;
    font-size: 14px;
}
.apply-project-card__item p{
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.features-grid-enhanced{
    margin-top: 18px;
}
.feature-card-enhanced{
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    box-shadow: none;
}
.feature-card-enhanced__icon{
    background: rgba(46,204,113,0.12);
    color: var(--accent-blue);
}
.feature-card-enhanced__icon img{
    width: 28px;
    height: 28px;
    display: block;
}
.apply-status-card--success,
.apply-status-card--warning{
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
}
.apply-status-card__icon{
    background: rgba(46,204,113,0.12);
    color: var(--accent-blue);
}
.apply-announce-enhanced{
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.apply-wizard-enhanced{
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.apply-wizard-enhanced__progress-bar{
    background: rgba(46,204,113,0.9);
    box-shadow: 0 0 10px rgba(46,204,113,0.4);
}
.apply-form-enhanced{
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.apply-form-enhanced__input:focus,
.apply-form-enhanced__textarea:focus{
    border-color: rgba(46,204,113,0.5);
    box-shadow: 0 0 0 3px rgba(46,204,113,0.18);
}
.apply-select-enhanced__arrow{
    color: var(--text-muted);
}
.btn-primary--gold{
    background: linear-gradient(135deg, #d6a937, #c7962c);
    border-color: #d6a937;
    color: #1b1b1b;
}

@media (max-width: 900px){
    .apply-project-card__grid{ grid-template-columns: 1fr; }
}

/* Remove remaining blue accents in key UI blocks */
.profile-cover{
    background:
        radial-gradient(1200px 420px at 30% 20%, rgba(46, 204, 113, 0.22), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.02));
}
.profile-event-icon{
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.22);
}
.apply-hero-enhanced{
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(24, 32, 24, 0.2));
    border-color: rgba(46, 204, 113, 0.3);
}
.apply-hero-enhanced::before{
    background: radial-gradient(circle, rgba(46, 204, 113, 0.12) 0%, transparent 70%);
}
.apply-announce-enhanced__icon,
.apply-announce-enhanced__timer{
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.25);
    color: var(--accent-blue);
}
.apply-status-card--info{
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
}
.apply-status-card--info .apply-status-card__icon{
    background: rgba(46, 204, 113, 0.14);
    color: var(--accent-blue);
}

/* === Theme overrides: unified palette + minimal motion === */
:root{
    --bg-primary: #333333;
    --bg: var(--bg-primary);
    --bg-secondary: #333333;
    --bg-tertiary: #333333;
    --text-primary: #FFFFFF;
    --text-secondary: #C9C9C9;
    --text-muted: #C9C9C9;
    --border-color: #505050;
    --accent-blue: #46ACEB;
    --accent-blue-hover: #3A96D0;
    --accent-green: #3BC43B;
    --accent-yellow: #FFDA45;
    --accent-red: #EB5959;
    --radius: 20px;
}

body{
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.top-bar,
.sidebar{
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.main-content{
    background: var(--bg-primary);
}

body::before,
body::after{
    content: none !important;
    animation: none !important;
}

:where(.card, .info-card, .modal-content, .modal-content-enhanced, .modal-content-large, .modal-content-small,
       .apply-form-enhanced, .apply-wizard-enhanced, .apply-hero-enhanced, .apply-project-card, .feature-card-enhanced,
       .apply-status-card, .apply-announce-enhanced, .apply-guard-enhanced, .admin-panel-card, .dashboard-stat-card,
       .application-card, .stat-card, .status-card, .final-cta, .profile-card, .profile-event, .profile-side-list-item,
       .profile-info-item, .pages-list-item, .group-cat-card, .group-page-item, .tree-item-header, .members-table-container,
       .activity-item, .test-result-card, .recruitment-period-card, .home-hero__panel, .home-world__card, .home-world__wide){
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

input,
select,
textarea,
.form-input,
.form-select,
.form-textarea{
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.apply-icon{
    width: 20px;
    height: 20px;
    display: inline-block;
    object-fit: contain;
}
.apply-icon--sm{ width: 16px; height: 16px; }
.apply-icon--lg{ width: 32px; height: 32px; }
.apply-btn-icon{ width: 18px; height: 18px; }
.apply-btn-icon--back{ transform: rotate(180deg); }

.apply-select-enhanced{ position: relative; }
.apply-select-enhanced__arrow-icon{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    opacity: 0.7;
    pointer-events: none;
}

.home-principle__icon{
    width: 28px;
    height: 28px;
    display: inline-block;
    object-fit: contain;
}

.admin-announce__timer:before{
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 6px;
    background: var(--icon-clock) center/14px no-repeat;
}

.form-hint::before{
    content: "";
    width: 12px;
    height: 12px;
    display: inline-block;
    background: var(--icon-info) center/12px no-repeat;
    opacity: 0.7;
}

.join-step__icon::before{
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    background: var(--icon-circle) center/16px no-repeat;
}
.join-step.is-done .join-step__icon::before{ background-image: var(--icon-check-circle); }
.join-step.is-current .join-step__icon::before{ background-image: var(--icon-circle); }
.join-step.is-next .join-step__icon::before{ background-image: var(--icon-minus-circle); }

.apply-agree-enhanced__input:checked + .apply-agree-enhanced__label .apply-agree-enhanced__box,
.apply-agree__input:checked + .apply-agree__label .apply-agree__box{
    background-color: var(--accent-green);
    border-color: var(--accent-green);
    background-image: var(--icon-check);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

.apply-agree-enhanced__input:checked + .apply-agree-enhanced__label .apply-agree-enhanced__box::after,
.apply-agree__input:checked + .apply-agree__label .apply-agree__box:after{
    content: "";
}

a{
    color: var(--accent-yellow);
    text-decoration: none;
}
a:hover{
    opacity: 0.9;
}

.apply-announce-enhanced__icon,
.apply-announce-enhanced__timer{
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.apply-hero-enhanced::before{
    content: none;
}

.apply-hero-enhanced__badge{
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

/* Unified button styling */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-view,
.btn-submit,
.btn-submit-apply,
.btn-apply-top,
.apply-btn,
.btn-primary-large,
.btn-secondary--small,
.btn-icon,
.btn-icon-only,
.btn-quick,
.btn-link,
.filter-btn,
.status-actions__btn,
.final-cta__btn,
.app-action-btn,
.applications-filter-action-btn,
.applications-filter-search-clear,
.pages-search-clear,
.active-filters__clear,
.pagination-btn,
.tree-btn,
.markdown-btn{
    border-radius: var(--btn-radius);
    font-weight: var(--btn-font-weight);
}

/* === 4CAST theme overrides === */
:root{
    --bg-0: #0a0a0a;
    --bg-1: #111111;
    --bg-2: #1e1e1e;
    --text-0: #ffffff;
    --text-1: #d7d7d7;
    --text-2: #a9a9a9;
    --border: #2b2b2b;
    --accent-red: #ff2e2e;
    --accent-blue: #3aa0ff;
    --accent-yellow: #ffcc00;
    --ok: #3bd671;
    --warn: #ffb020;
    --bad: #ff3b3b;
    --bg-primary: var(--bg-0);
    --bg: var(--bg-0);
    --bg-secondary: var(--bg-1);
    --bg-tertiary: var(--bg-2);
    --text-primary: var(--text-0);
    --text-secondary: var(--text-1);
    --text-muted: var(--text-2);
    --border-color: var(--border);
    --accent-primary: var(--accent-red);
    --accent-primary-hover: #e32626;
    --accent-primary-light: rgba(255, 46, 46, 0.2);
    --accent-blue-hover: #2f89db;
    --accent-blue-light: rgba(58, 160, 255, 0.2);
    --accent-warm: var(--accent-red);
    --accent-warm-light: rgba(255, 46, 46, 0.18);
    --accent-green: var(--ok);
    --accent-yellow-soft: rgba(255, 204, 0, 0.2);
    --shadow-sm: none;
    --shadow-md: none;
    --focus-ring: 0 0 0 2px rgba(255, 46, 46, 0.35);
    --text-gradient: none;
}

body{
    background: var(--bg);
    color: var(--text-primary);
}

body::before,
body::after{
    content: none !important;
    background: none !important;
    animation: none !important;
}

a{ color: inherit; }

/* ===== Sidebar + Auth refresh ===== */
.sidebar{
    border-right: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.sidebar-nav{
    padding: 16px 12px 54px;
}

.nav-section{
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    background: rgba(255,255,255,0.02);
    padding: 10px 8px;
}

.nav-section-header{
    padding: 2px 10px 8px;
    margin-bottom: 6px;
}

.nav-section-title{
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.nav-link{
    width: 100%;
    margin: 0 0 4px;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: 12px;
    padding: 9px 12px;
    background: transparent;
}

.nav-link:hover{
    transform: none;
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
}

.nav-link.active{
    border-left-color: var(--accent-blue);
    border-color: rgba(70, 172, 235, 0.3);
    background: rgba(70, 172, 235, 0.16);
    padding-left: 12px;
}

.nav-link--apply{
    border-color: rgba(255, 218, 69, 0.32);
    border-left-color: #ffda45;
    background: rgba(255, 218, 69, 0.12);
    box-shadow: none;
}

.nav-link--apply:hover{
    background: rgba(255, 218, 69, 0.18);
    border-color: rgba(255, 218, 69, 0.45);
}

.btn-apply-top{
    border-radius: 12px;
    border: 1px solid rgba(70, 172, 235, 0.44);
    background: linear-gradient(135deg, rgba(70,172,235,0.26), rgba(58,150,208,0.2));
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 10px 16px;
}

.btn-apply-top:hover{
    background: linear-gradient(135deg, rgba(70,172,235,0.34), rgba(58,150,208,0.26));
    border-color: rgba(70, 172, 235, 0.62);
    transform: translateY(-1px);
}

#loginModal,
#registerModal{
    background: rgba(5, 8, 14, 0.72);
    backdrop-filter: blur(8px);
}

#loginModal .modal-content,
#registerModal .modal-content{
    width: min(460px, 92vw);
    max-width: 460px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(165deg, rgba(17,17,17,0.96), rgba(30,30,30,0.96));
    box-shadow: 0 26px 64px rgba(0,0,0,0.5);
    padding: 28px 24px 24px;
}

#loginModal .modal-content h2,
#registerModal .modal-content h2{
    margin: 0 0 20px;
    padding: 0;
    border: none;
    text-align: left;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

#loginModal .form-group,
#registerModal .form-group{
    margin-bottom: 14px;
    animation: none;
}

#loginModal .form-group label,
#registerModal .form-group label{
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

#loginModal .form-group input,
#registerModal .form-group input{
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    padding: 12px 14px;
    transform: none;
    box-shadow: none;
}

#loginModal .form-group input:hover,
#registerModal .form-group input:hover,
#loginModal .form-group input:focus,
#registerModal .form-group input:focus{
    transform: none;
    border-color: rgba(70, 172, 235, 0.52);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 3px rgba(70, 172, 235, 0.14);
}

#loginModal .btn-submit,
#registerModal .btn-submit{
    margin-top: 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(70,172,235,0.92), rgba(58,150,208,0.9));
    box-shadow: none;
}

#loginModal .btn-submit:hover,
#registerModal .btn-submit:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(58,150,208,0.3);
}

#loginModal .form-switch,
#registerModal .form-switch{
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

#loginModal .form-switch a,
#registerModal .form-switch a{
    color: #8ecbff;
    padding: 0;
    background: none;
}

#loginModal .form-policy,
#registerModal .form-policy{
    margin-top: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    padding: 10px 12px;
}

#loginModal .modal-close,
#registerModal .modal-close{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
}

#loginModal .modal-close:hover,
#registerModal .modal-close:hover{
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

/* ===== Full-width desktop layout override ===== */
@media (min-width: 769px){
    :root{
        --layout-max: 100%;
    }

    .top-bar-content,
    .layout-container,
    .main-wrapper{
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .main-wrapper{
        justify-content: flex-start;
    }

    .site-footer__inner{
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .main-content{
        width: 100%;
        min-width: 0;
    }

    .content-page{
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px){
    .site-footer__inner{
        padding: 14px 18px 18px;
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer__links{
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.btn-primary,
.home-hero__cta{
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}
.btn-primary:hover,
.home-hero__cta:hover{
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

.btn-secondary,
.home-hero__cta--ghost{
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.apply-hero-enhanced,
.apply-project-card,
.apply-announce-enhanced,
.apply-guard-enhanced,
.apply-wizard-enhanced,
.apply-form-enhanced,
.apply-status-card,
.feature-card-enhanced,
.home-hero,
.home-hero__panel,
.home-card,
.home-shellit-card,
.competency-card,
.debrief-card{
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.apply-hero-enhanced::before{
    content: none;
}

.apply-wizard-enhanced__progress-bar{
    background: var(--accent-primary);
    box-shadow: none;
}

.home-page{
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.home-hero{
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(255, 46, 46, 0.18), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(58, 160, 255, 0.14), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
        var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.home-hero::before,
.home-hero::after{
    content: "";
    position: absolute;
    pointer-events: none;
}
.home-hero::before{
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02));
    opacity: 0.8;
}
.home-hero::after{
    top: -110px;
    right: -70px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 46, 46, 0.18), transparent 68%);
}
.home-hero__inner{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    gap: 32px;
    align-items: stretch;
}
.home-hero__left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-width: 0;
}
.home-hero__right{
    display: grid;
    gap: 18px;
    align-content: center;
}
.home-hero__eyebrow{
    display: inline-flex;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(6, 8, 12, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    font-weight: 700;
    color: #d8dde6;
}
.home-hero__title{
    max-width: 9ch;
    margin: 0;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-weight: 800;
    text-wrap: balance;
}
.home-hero__subtitle{
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.8;
}
.home-hero__actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}
.home-hero__cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.home-hero__cta:hover{
    transform: translateY(-1px);
}
.home-hero__cta--ghost{
    background: rgba(8, 10, 15, 0.46);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.home-hero__panel{
    position: relative;
    overflow: hidden;
    min-height: 164px;
    border-radius: 20px;
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        rgba(10, 13, 18, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.home-hero__panel::before{
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent-primary), transparent 86%);
}
.home-hero__panel--accent{
    background:
        linear-gradient(160deg, rgba(255, 46, 46, 0.12), rgba(255, 255, 255, 0.02) 38%),
        rgba(10, 13, 18, 0.88);
    border-color: rgba(255, 46, 46, 0.28);
}
.home-hero__panel-title{
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c9d0db;
}
.home-hero__panel-text{
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.75;
}
.home-hero__list{
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-hero__list li{
    position: relative;
    padding-left: 18px;
    color: var(--text-secondary);
}
.home-hero__list li::before{
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 0 5px rgba(255, 46, 46, 0.12);
}

.home-section{
    position: relative;
    padding: 4px 0 0;
}
.home-section__head{
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.home-section__title{
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.home-section__subtitle{
    max-width: 48ch;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
}

.home-forecast-grid,
.home-shellit-grid,
.competency-grid{
    display: grid;
    gap: 20px;
}
.home-forecast-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-shellit-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-card,
.home-shellit-card,
.competency-card{
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)),
        var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.home-card::before,
.home-shellit-card::before,
.competency-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 75%);
}
.home-card:hover,
.home-shellit-card:hover,
.competency-card:hover{
    transform: translateY(-4px);
    border-color: rgba(255, 46, 46, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 46, 46, 0.08), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
        var(--bg-secondary);
}
.home-card:nth-child(2)::after,
.home-shellit-card:nth-child(2)::after,
.competency-card:nth-child(2)::after{
    content: "";
    position: absolute;
    inset: auto -40px -50px auto;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(58, 160, 255, 0.12), transparent 68%);
}
.home-card__title,
.home-shellit-card__title,
.competency-card__title{
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: -0.02em;
}
.home-card__text,
.home-shellit-card__text{
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.75;
}
.home-card__list{
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
    font-size: 13px;
}
.home-card__list li{
    position: relative;
    padding-left: 18px;
}
.home-card__list li::before{
    content: "";
    position: absolute;
    top: 0.68em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--accent-primary), #ff8b8b);
}

.home-shellit-card__meta{
    display: inline-flex;
    align-self: flex-start;
    margin-top: 16px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #ced4df;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.home-shellit-card__action{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}
.home-shellit-card__action::after{
    content: "→";
    color: var(--accent-primary);
    transition: transform 180ms ease;
}
.home-shellit-card__action:hover::after{
    transform: translateX(3px);
}

.error-page{
    gap: 28px;
    --error404-mouse-x: 0;
    --error404-mouse-y: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body.error-page-mode{
    overflow: hidden;
}

body.error-page-mode .main-wrapper{
    min-height: calc(100dvh - var(--top-bar-height));
}

body.error-page-mode .main-content{
    min-height: calc(100dvh - var(--top-bar-height));
    padding-block: 24px;
    overflow: hidden;
}

body.error-page-mode .content-page.error-page{
    height: 100%;
}

body.error-page-mode .site-footer{
    display: none;
}

.error-page .home-hero__eyebrow,
.error-page .error404-code,
.error-page .error404-hero__title,
.error-page .error404-hero__subtitle,
.error-page .error404-hero__actions,
.error-page .error404-status,
.error-page .error-page__summary,
.error-page .error-page__brief{
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.error-page .home-hero__eyebrow{
    animation-name: error404RevealUp;
    animation-duration: 700ms;
    animation-delay: 80ms;
}

.error-page .error404-code{
    animation-name: error404RevealScale;
    animation-duration: 950ms;
    animation-delay: 140ms;
}

.error-page .error404-hero__title{
    animation-name: error404RevealUp;
    animation-duration: 760ms;
    animation-delay: 260ms;
}

.error-page .error404-hero__subtitle{
    animation-name: error404RevealUp;
    animation-duration: 760ms;
    animation-delay: 360ms;
}

.error-page .error404-hero__actions{
    animation-name: error404RevealUp;
    animation-duration: 760ms;
    animation-delay: 460ms;
}

.error-page .error404-status{
    animation-name: error404RevealUp;
    animation-duration: 760ms;
    animation-delay: 560ms;
}

.error-page .error-page__summary{
    animation-name: error404RevealRight, error404PanelFloat;
    animation-duration: 900ms, 6.4s;
    animation-delay: 280ms, 1.3s;
    animation-iteration-count: 1, infinite;
}

.error-page .error-page__brief{
    animation-name: error404RevealRight, error404PanelFloat;
    animation-duration: 900ms, 7.2s;
    animation-delay: 420ms, 1.5s;
    animation-iteration-count: 1, infinite;
}

.error404-hero{
    min-height: clamp(460px, 68vh, 720px);
    height: 100%;
    transform: perspective(1200px) rotateX(calc(var(--error404-mouse-y) * -1.2deg)) rotateY(calc(var(--error404-mouse-x) * 1.8deg));
    transform-style: preserve-3d;
    transition: transform 180ms ease-out;
}

.error404-hero::after{
    width: 360px;
    height: 360px;
    top: -130px;
    right: -120px;
    background: radial-gradient(circle, rgba(255, 46, 46, 0.22), transparent 70%);
    animation: error404Pulse 7s ease-in-out infinite;
}

.error403-page .error404-hero::after{
    background: radial-gradient(circle, rgba(255, 180, 64, 0.22), transparent 70%);
}

.error419-page .error404-hero::after{
    background: radial-gradient(circle, rgba(95, 190, 255, 0.22), transparent 70%);
}

.error500-page .error404-hero::after{
    background: radial-gradient(circle, rgba(255, 84, 84, 0.24), transparent 70%);
}

.error404-hero__title{
    max-width: 11ch;
}

.error404-hero__subtitle{
    max-width: 58ch;
}

.error404-hero__actions{
    margin-top: 4px;
}

.error404-code{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 18px);
    font-size: clamp(84px, 15vw, 180px);
    line-height: 0.84;
    font-weight: 800;
    letter-spacing: -0.08em;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 10px 40px rgba(255, 46, 46, 0.18);
    transform: translate3d(calc(var(--error404-mouse-x) * 10px), calc(var(--error404-mouse-y) * 10px), 30px);
    will-change: transform;
}

.error404-code::before,
.error404-code::after{
    content: attr(data-text);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: inherit;
    opacity: 0;
    pointer-events: none;
}

.error404-code::before{
    color: rgba(255, 84, 84, 0.75);
}

.error404-code::after{
    color: rgba(95, 190, 255, 0.7);
}

.error404-code.is-glitching::before{
    opacity: 0.9;
    animation: error404GlitchBefore 420ms steps(2, end) 2;
}

.error404-code.is-glitching::after{
    opacity: 0.85;
    animation: error404GlitchAfter 420ms steps(2, end) 2;
}

.error404-code__zero{
    position: relative;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.58);
    text-shadow: none;
}

.error404-code__zero::before,
.error404-code__zero::after{
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.error404-code__zero::before{
    width: 0.74em;
    height: 0.74em;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 10px rgba(58, 160, 255, 0.08);
}

.error404-code__zero::after{
    width: 0.12em;
    height: 0.12em;
    background: var(--accent-primary);
    box-shadow: 0 0 16px rgba(255, 46, 46, 0.6);
    animation: error404CorePulse 2.4s ease-in-out infinite;
}

.error404-status{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(7, 11, 17, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 13px;
}

.error404-hero__title,
.error404-hero__subtitle,
.error404-status,
.error-page__summary,
.error-page__brief{
    transform: translate3d(calc(var(--error404-mouse-x) * 6px), calc(var(--error404-mouse-y) * 6px), 0);
    transition: transform 180ms ease-out;
}

.error-page__summary{
    transform: translate3d(calc(var(--error404-mouse-x) * 12px), calc(var(--error404-mouse-y) * 12px), 24px);
}

.error-page__brief{
    transform: translate3d(calc(var(--error404-mouse-x) * 8px), calc(var(--error404-mouse-y) * 8px), 18px);
}

.error404-status__dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #58d68d;
    box-shadow: 0 0 0 6px rgba(88, 214, 141, 0.16);
    animation: error404Dot 1.8s ease-in-out infinite;
}

.error-page__summary-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.error-page__metric{
    min-height: 110px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.error-page__metric-label{
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.error-page__metric-value{
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--text-primary);
    text-wrap: balance;
}

.error404-brief__list li::before{
    box-shadow: 0 0 0 5px rgba(58, 160, 255, 0.1);
}

@keyframes error404RevealUp{
    from{
        opacity: 0;
        transform: translateY(26px);
        filter: blur(10px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes error404RevealRight{
    from{
        opacity: 0;
        transform: translateX(32px) scale(0.98);
        filter: blur(12px);
    }
    to{
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes error404RevealScale{
    from{
        opacity: 0;
        transform: scale(0.9);
        filter: blur(12px);
    }
    60%{
        opacity: 1;
        transform: scale(1.03);
        filter: blur(0);
    }
    to{
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes error404PanelFloat{
    0%, 100%{
        opacity: 1;
        transform: translateY(0);
    }
    50%{
        opacity: 1;
        transform: translateY(-8px);
    }
}

@keyframes error404CorePulse{
    0%, 100%{
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 16px rgba(255, 46, 46, 0.6);
    }
    50%{
        transform: translate(-50%, -50%) scale(1.18);
        box-shadow: 0 0 26px rgba(255, 46, 46, 0.85);
    }
}

@keyframes error404Pulse{
    0%, 100%{
        transform: scale(1);
        opacity: 1;
    }
    50%{
        transform: scale(1.08);
        opacity: 0.76;
    }
}

@keyframes error404Dot{
    0%, 100%{
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(88, 214, 141, 0.16);
    }
    50%{
        transform: scale(1.18);
        box-shadow: 0 0 0 10px rgba(88, 214, 141, 0.08);
    }
}

@keyframes error404GlitchBefore{
    0%{
        opacity: 0;
        transform: translate(0, 0);
        clip-path: inset(0 0 100% 0);
    }
    20%{
        opacity: 0.9;
        transform: translate(-6px, -2px);
        clip-path: inset(8% 0 62% 0);
    }
    45%{
        opacity: 0.7;
        transform: translate(5px, 1px);
        clip-path: inset(42% 0 24% 0);
    }
    70%{
        opacity: 0.85;
        transform: translate(-3px, 3px);
        clip-path: inset(72% 0 8% 0);
    }
    100%{
        opacity: 0;
        transform: translate(0, 0);
        clip-path: inset(0 0 100% 0);
    }
}

@keyframes error404GlitchAfter{
    0%{
        opacity: 0;
        transform: translate(0, 0);
        clip-path: inset(100% 0 0 0);
    }
    18%{
        opacity: 0.8;
        transform: translate(7px, 0);
        clip-path: inset(16% 0 58% 0);
    }
    52%{
        opacity: 0.7;
        transform: translate(-5px, -2px);
        clip-path: inset(54% 0 20% 0);
    }
    78%{
        opacity: 0.85;
        transform: translate(4px, 2px);
        clip-path: inset(80% 0 4% 0);
    }
    100%{
        opacity: 0;
        transform: translate(0, 0);
        clip-path: inset(100% 0 0 0);
    }
}

.competency-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.competency-table th,
.competency-table td{
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
    text-align: left;
    color: var(--text-secondary);
}
.competency-table th{
    color: var(--text-muted);
    font-weight: 600;
}
.competency-level{
    display: inline-flex;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.competency-level--admitted{ color: var(--text-muted); }
.competency-level--reliable{ color: var(--text-secondary); }
.competency-level--lead{ color: var(--accent-blue); border-color: var(--accent-blue); }

.competency-form__label,
.debrief-form__label{
    display: block;
    margin: 12px 0 6px;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.competency-form__input,
.competency-form__textarea,
.debrief-form__input,
.debrief-form__textarea{
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.competency-levels{
    display: flex;
    gap: 12px;
    margin-top: 10px;
}
.competency-radio{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.competency-radio input{
    accent-color: var(--accent-blue);
}

.debrief-card{
    margin-top: 22px;
    padding: 20px;
    border-radius: 12px;
}
.debrief-card__subtitle{
    color: var(--text-muted);
    font-size: 13px;
}
.debrief-form__row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.debrief-form__actions{
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

@media (max-width: 980px){
    .home-page{
        gap: 28px;
    }
    .home-hero__inner{
        grid-template-columns: 1fr;
    }
    .home-forecast-grid,
    .home-shellit-grid{
        grid-template-columns: 1fr;
    }
    .home-section__head{
        align-items: flex-start;
        flex-direction: column;
    }
    .error404-hero,
    .error404-code,
    .error404-hero__title,
    .error404-hero__subtitle,
    .error404-status,
    .error-page__summary,
    .error-page__brief,
    .error-page{
        transform: none;
    }
    .error-page__summary-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px){
    .home-hero{
        padding: 22px;
        border-radius: 22px;
    }
    .home-hero__title{
        max-width: none;
    }
    .error404-code{
        font-size: clamp(68px, 24vw, 116px);
    }
    .error404-status{
        width: 100%;
        justify-content: center;
        text-align: center;
        border-radius: 18px;
    }
    .error-page__metric{
        min-height: auto;
    }
    .error404-code::before,
    .error404-code::after{
        display: none;
    }
    .home-hero__actions{
        flex-direction: column;
        align-items: stretch;
    }
    .home-hero__cta{
        width: 100%;
    }
    .home-hero__panel,
    .home-card,
    .home-shellit-card,
    .error404-radar{
        padding: 20px;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce){
    *{
        animation: none !important;
        transition: none !important;
    }
    .error404-hero,
    .error404-code,
    .error404-hero__title,
    .error404-hero__subtitle,
    .error404-status,
    .error-page__summary,
    .error-page__brief,
    .error-page{
        transform: none !important;
    }
}

/* ===== Admin pages: full-width hotfix ===== */
@media (min-width: 1024px){
    .main-content{
        padding: 22px 28px;
    }

    .content-page.admin-page{
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .content-page.admin-page > .page-header{
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 4px 6px 8px;
    }

    .content-page.admin-page > .content-section{
        width: 100% !important;
        max-width: none !important;
        margin: 0;
        padding: 20px !important;
        border-radius: 18px;
    }

    #adminDashboardApp .admin-stats-grid{
        grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
    }

    #adminDashboardApp .admin-charts-grid,
    #adminDashboardApp .admin-lists-grid{
        grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
    }

    #adminApplicationsApp .applications-filters{
        grid-template-columns: repeat(6, minmax(150px, 1fr)) !important;
        gap: 12px !important;
    }

    #adminApplicationsApp .applications-list{
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
        gap: 18px;
    }

    #adminMembersApp .table-container,
    #adminGroupsApp .table-container{
        width: 100%;
        overflow: auto;
    }

    #adminMembersApp table,
    #adminGroupsApp table{
        width: 100%;
        min-width: 980px;
    }

    #adminPagesApp .pages-tree{
        width: 100%;
        min-height: 420px;
    }
}

@media (max-width: 1023px){
    .content-page.admin-page > .content-section{
        padding: 14px !important;
    }
}

/* ===== Documentation pages layout ===== */
.content-page.content-page--doc{
    width: 100%;
    max-width: none;
    margin: 16px 0 28px;
    padding: 0 clamp(16px, 2.2vw, 34px);
}

.content-page.content-page--doc > .page-header,
.content-page.content-page--doc > .content-section,
.content-page.content-page--doc > .markdown-content,
.content-page.content-page--doc > .page-footer-meta{
    width: 100%;
    max-width: none;
}

.content-page.content-page--doc > .content-section,
.content-page.content-page--doc > .markdown-content{
    padding: clamp(18px, 2vw, 28px);
}

.content-page.content-page--doc .markdown-content{
    line-height: 1.72;
}

@media (max-width: 768px){
    .content-page.content-page--doc{
        margin-top: 10px;
        padding: 0 12px;
    }

    .content-page.content-page--doc > .content-section,
    .content-page.content-page--doc > .markdown-content{
        padding: 14px;
    }
}

/* ===== Documentation pages visual polish ===== */
.content-page.content-page--doc > .page-header{
    padding: clamp(14px, 1.5vw, 22px) clamp(16px, 1.8vw, 26px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.14);
    background:
        radial-gradient(900px 280px at 100% -40%, rgba(70,172,235,0.14), transparent 58%),
        linear-gradient(165deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
}

.content-page.content-page--doc .page-title-large{
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.content-page.content-page--doc .breadcrumbs{
    margin-bottom: 10px;
}

.content-page.content-page--doc .markdown-content{
    font-size: clamp(15px, 1.08vw, 18px);
    color: var(--text-primary);
}

.content-page.content-page--doc .markdown-content > :first-child{
    margin-top: 0;
}

.content-page.content-page--doc .markdown-content p,
.content-page.content-page--doc .markdown-content ul,
.content-page.content-page--doc .markdown-content ol,
.content-page.content-page--doc .markdown-content table,
.content-page.content-page--doc .markdown-content blockquote,
.content-page.content-page--doc .markdown-content pre{
    margin: 0 0 16px;
}

.content-page.content-page--doc .markdown-content ul,
.content-page.content-page--doc .markdown-content ol{
    padding-left: 1.2em;
}

.content-page.content-page--doc .markdown-content li + li{
    margin-top: 6px;
}

.content-page.content-page--doc .markdown-content a{
    color: #9fd9ff;
    text-underline-offset: 3px;
}

.content-page.content-page--doc .markdown-content a:hover{
    color: #c2e7ff;
}

.content-page.content-page--doc .markdown-content table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}

.content-page.content-page--doc .markdown-content th,
.content-page.content-page--doc .markdown-content td{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: left;
    vertical-align: top;
}

.content-page.content-page--doc .markdown-content th{
    background: rgba(255,255,255,0.06);
    font-weight: 700;
}

.content-page.content-page--doc .markdown-content tr:last-child td{
    border-bottom: 0;
}

.content-page.content-page--doc .markdown-content code{
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    font-size: 0.92em;
}

.content-page.content-page--doc .markdown-content pre{
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    background: rgba(0,0,0,0.28);
    overflow-x: auto;
}

.content-page.content-page--doc .markdown-content pre code{
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.9em;
}

.content-page.content-page--doc .markdown-content blockquote{
    padding: 10px 14px;
    border-left: 4px solid rgba(70,172,235,0.6);
    border-radius: 12px;
    background: rgba(70,172,235,0.12);
    color: var(--text-secondary);
}

.content-page.content-page--doc .markdown-content img{
    display: block;
    max-width: min(100%, 1200px);
    height: auto;
    margin: 14px auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
}

@media (max-width: 768px){
    .content-page.content-page--doc .page-title-large{
        font-size: clamp(26px, 7.5vw, 34px);
    }

    .content-page.content-page--doc .markdown-content{
        font-size: 15px;
    }

    .content-page.content-page--doc .markdown-content table{
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ADMIN ACTIVITY PAGE - ЛОГИ ДЕЙСТВИЙ                                         */
/* ═══════════════════════════════════════════════════════════════════════════ */

.admin-activity-page {
    /* Parent uses standard admin-page styles */
}

.activity-block-header {
    margin-bottom: 20px;
}

.activity-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.activity-stats .content-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
}

.activity-stats strong {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-stats #activityStatTotal {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}

.activity-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.activity-filters .form-group {
    display: flex;
    flex-direction: column;
}

.activity-filters label span {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.activity-filters input,
.activity-filters select {
    padding: 8px 10px;
    background: var(--section-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.activity-filters input:focus,
.activity-filters select:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.activity-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}

.activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--section-bg);
}

.activity-table thead {
    background: var(--section-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.activity-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-color);
}

.activity-table th:last-child {
    border-right: none;
}

.activity-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
    cursor: pointer;
}

.activity-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.activity-table tbody tr:last-child {
    border-bottom: none;
}

.activity-table td {
    padding: 10px 12px;
    border-right: 1px solid var(--border-color);
    word-break: break-word;
}

.activity-table td:last-child {
    border-right: none;
}

.activity-table tbody tr[data-log-id]:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Action type badge */
.activity-table .action-badge {
    display: inline-block;
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
}

/* User info column */
.activity-table .user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-table .user-name {
    font-weight: 500;
    color: var(--text-primary);
}

.activity-table .user-email {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* IP address (monospace) */
.activity-table .ip-address {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.activity-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    flex-wrap: wrap;
}

.activity-pagination button {
    min-width: 140px;
}

.activity-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#activityPageInfo {
    min-width: 120px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Modal for activity details */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--section-bg);
    border-radius: 8px;
    padding: 24px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.3s ease;
}

.modal-content h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: var(--text-primary);
}

.modal-content strong {
    display: block;
    margin: 12px 0 6px 0;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.modal-content span {
    display: block;
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.5;
}

.modal-content pre {
    margin: 8px 0 0 0;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-size: 11px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--text-secondary);
}

/* Modal close button */
#activityModalClose {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

#activityModalClose:hover {
    color: var(--text-primary);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive design */
@media (max-width: 1024px) {
    .activity-filters {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .activity-filters {
        grid-template-columns: 1fr;
    }
    
    .activity-filters div:nth-child(3) {
        display: flex;
        gap: 8px;
    }
    
    .activity-filters button {
        flex: 1;
    }
    
    .activity-table-wrapper {
        font-size: 12px;
    }
    
    .activity-table th,
    .activity-table td {
        padding: 8px;
    }
    
    .activity-table td:nth-child(4),
    .activity-table td:nth-child(5) {
        display: none;
    }
    
    .activity-table th:nth-child(4),
    .activity-table th:nth-child(5) {
        display: none;
    }
}

/* ===== Global mobile UX polish ===== */
.top-bar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-nav-trigger {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    padding: 8px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-direction: column;
    cursor: pointer;
    color: var(--text-primary);
}

.mobile-nav-trigger__line {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

@media (max-width: 768px) {
    .mobile-nav-trigger {
        display: inline-flex;
    }

    .top-bar-content {
        padding: 0 12px;
        gap: 10px;
    }

    .main-content {
        padding: 18px 14px;
    }

    .content-page {
        margin: 8px 0 16px;
        padding: 8px;
    }

    .user-profile-trigger {
        padding: 4px 8px;
        gap: 8px;
    }

    .topbar-roles {
        display: none;
    }

    .user-name {
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-submit,
    button,
    input,
    select,
    textarea {
        min-height: 42px;
    }

    .table-container,
    .members-table-container,
    .activity-table-wrapper {
        scrollbar-width: thin;
    }

    .mobile-nav-sheet {
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    .top-bar-content {
        padding: 0 10px;
    }

    .logo-top {
        font-size: 17px;
    }

    .btn-apply-top {
        padding: 8px 10px;
        font-size: 11px;
    }

    .main-content {
        padding: 14px 10px;
    }

    .content-page {
        padding: 6px;
    }
}