@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');

.modal-form input,
.modal-form select,
.modal-form textarea {
    appearance: none;
}

/* Stronger selectors to override any conflicting styles */
#addGroupModal input[type="text"],
#addGroupModal input[type="time"],
#addGroupModal input[type="number"],
#addGroupModal textarea,
#clubSettingsModal input[type="text"],
#clubSettingsModal input[type="time"],
#clubSettingsModal input[type="number"],
#clubSettingsModal textarea,
#editGroupModal input[type="text"],
#editGroupModal input[type="time"],
#editGroupModal input[type="number"],
#editGroupModal textarea {
    width: 100% !important;
    height: 46px !important;
    padding: 10px 14px !important;
    border: 1px solid #dfe3ec !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    background: #fff !important;
    line-height: 1.4 !important;
}

#addGroupModal textarea,
#editGroupModal textarea,
#clubSettingsModal textarea {
    min-height: 120px !important;
    height: auto !important;
    resize: vertical !important;
}

#addGroupModal input:focus,
#addGroupModal textarea:focus,
#addGroupModal select:focus,
#clubSettingsModal input:focus,
#clubSettingsModal textarea:focus,
#clubSettingsModal select:focus,
#editGroupModal input:focus,
#editGroupModal textarea:focus,
#editGroupModal select:focus {
    border-color: #ff8a00 !important;
    box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.14) !important;
    outline: none !important;
}

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

/* CSS Variables for Theme */
:root {
    --ui-font-family: 'Onest', Arial, "Helvetica Neue", Helvetica, sans-serif;
    /* Light Theme (Forced Default) */
    --theme-bg-primary: #f4f1ee;
    --theme-bg-secondary: #ffffff;
    --theme-bg-tertiary: #f8f7f6;
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-tertiary: #94a3b8;
    --theme-border: #e4ddd6;
    --theme-card-bg: #ffffff;
    --theme-input-bg: #ffffff;
    --theme-input-border: #d8d0c8;
    --theme-table-bg: #ffffff;
    --theme-table-header-bg: linear-gradient(135deg, #ff8a00 0%, #d96f00 100%);
    --theme-table-border: #f4f1ee;
    --theme-sidebar-bg: #ffffff;
    --theme-sidebar-hover: #f4f1ee;
}

body.theme-light {
    /* Premium Light theme */
    --theme-bg-primary: #f4f1ee;
    /* Мягкий серовато-голубой фон */
    --theme-bg-secondary: #ffffff;
    /* Чистый белый для карточек */
    --theme-bg-tertiary: #f8f7f6;
    /* Очень светлый для выделения */
    --theme-text-primary: #1e293b;
    /* Глубокий синий для текста */
    --theme-text-secondary: #475569;
    --theme-text-tertiary: #94a3b8;
    --theme-border: #e4ddd6;
    --theme-card-bg: #ffffff;
    --theme-input-bg: #ffffff;
    --theme-input-border: #d8d0c8;
    --theme-table-bg: #ffffff;
    --theme-table-header-bg: linear-gradient(135deg, #ff8a00 0%, #d96f00 100%);
    --theme-table-border: #f4f1ee;
    --theme-sidebar-bg: #ffffff;
    --theme-sidebar-hover: #f4f1ee;
}

body {
    font-family: var(--ui-font-family);
    background: var(--theme-bg-primary);
    color: var(--theme-text-primary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Предотвращаем горизонтальный скролл и эластичность на iOS */
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

/* Предотвращаем эластичность и горизонтальный скролл на iOS */
html {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

/* Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    height: 100vh;
    background: var(--theme-sidebar-bg);
    color: var(--theme-text-primary);
    padding: 0;
    padding-bottom: 24px;
    box-shadow: 2px 0 12px rgba(15, 23, 42, 0.04);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 1000;
    border-right: 1px solid #e4ddd6;
    display: flex;
    flex-direction: column;
}

.sidebar-bg-video {
    position: absolute;
    top: 88px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: none;
    display: block;
    object-fit: fill;
    object-position: center top;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.sidebar-header,
.sidebar nav,
.sidebar-footer {
    position: relative;
    z-index: 1;
}

.sidebar.collapsed {
    width: 80px;
}

/* ЕДИНЫЙ СТИЛЬ ДЛЯ SIDEBAR-HEADER - ОДИНАКОВЫЙ ВО ВСЕХ ОКНАХ */
.sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    border-bottom: none !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}


.sidebar-theme-toggle {
    background: var(--theme-sidebar-hover);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

.sidebar-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.sidebar-theme-toggle svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-icon-sun {
    opacity: 0;
    transform: rotate(90deg);
}

.theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg);
}

body.theme-light .theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg);
}

body.theme-light .theme-icon-moon {
    opacity: 0;
    transform: rotate(-90deg);
}

.sidebar.collapsed .sidebar-theme-toggle {
    margin: 0;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center !important;
    padding: 20px 16px !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    box-sizing: border-box !important;
}

/* ЕДИНЫЙ СТИЛЬ ДЛЯ H2 В SIDEBAR-HEADER */
.sidebar-header h2 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    transition: opacity 0.2s ease !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: var(--theme-text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

.sidebar-header h2.sidebar-brand {
    min-width: 0 !important;
    max-width: 168px !important;
    overflow: hidden !important;
}

/* ЕДИНЫЙ СТИЛЬ ДЛЯ ЛОГОТИПА */
.sidebar-logo-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0 !important;
    color: #ff8a00 !important;
    display: block !important;
    object-fit: contain !important;
}

.sidebar-logo-icon.sidebar-logo-horizontal {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.sidebar.collapsed h2 {
    opacity: 0;
    width: 0;
}

/* ЕДИНЫЙ СТИЛЬ ДЛЯ КНОПКИ TOGGLE */
.sidebar-toggle {
    background: #f4f1ee !important;
    border: 1px solid #e4ddd6 !important;
    color: var(--theme-text-primary) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    z-index: 1001 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 0 !important;
}

.sidebar-toggle svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
}

.sidebar-toggle:hover {
    background: #e4ddd6;
    border-color: #ffc978;
    transform: none;
}

.sidebar.collapsed .sidebar-toggle {
    margin: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sidebar nav {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar.collapsed nav {
    padding: 0 12px;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--theme-text-secondary);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    position: relative;
    border: 1px solid transparent;
}

.sidebar-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: currentColor;
}

/* Иконка финансов использует stroke */
.sidebar nav a[href*="finances"] .sidebar-icon {
    fill: none;
    stroke: currentColor;
}

.sidebar nav a.active .sidebar-icon {
    stroke: #334155;
    color: #334155;
}

.sidebar nav a.active[href*="finances"] .sidebar-icon {
    fill: none;
    stroke: #334155;
    color: #334155;
}

.sidebar nav a::before {
    display: none !important;
}

.sidebar.collapsed nav a {
    justify-content: center;
    padding: 14px;
}

.sidebar.collapsed nav a span {
    display: none;
}

.sidebar nav a:hover {
    background: #f4f1ee;
    color: var(--theme-text-primary);
    transform: none;
}

.sidebar nav a:hover::before {
    display: none !important;
}

.sidebar.collapsed nav a:hover {
    transform: translateX(0);
}

.sidebar nav a.active {
    background: #eef2f7;
    color: #0f172a;
    box-shadow: none;
    border-color: #e4ddd6;
    transform: none;
    font-weight: 600;
}

.sidebar nav a.active::before {
    display: none !important;
}

.sidebar.collapsed nav a.active {
    transform: translateX(0);
}

.sidebar nav a span {
    font-weight: 500;
    letter-spacing: 0;
    transition: all 0.3s ease;
}

.sidebar nav a:hover span {
    transform: none;
}

/* Footer с кнопкой выхода */
.sidebar nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Кастомный скроллбар для nav */
.sidebar nav::-webkit-scrollbar {
    width: 6px;
}

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

.sidebar nav::-webkit-scrollbar-thumb {
    background: var(--theme-border);
    border-radius: 3px;
}

.sidebar nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sidebar-footer {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid #e4ddd6;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.sidebar-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sidebar-footer-actions .sidebar-theme-toggle {
    flex: 0 0 auto;
}

.sidebar-footer-actions .sidebar-logout-btn {
    flex: 1;
}

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ef4444;
    text-decoration: none;
    padding: 0 12px;
    height: 38px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    box-sizing: border-box;
}

.sidebar-logout-btn .sidebar-icon {
    stroke: #ef4444;
}

.sidebar-logout-btn:hover .sidebar-icon {
    stroke: #ffffff;
}

.sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: none;
    transform: none;
}

.sidebar.collapsed .sidebar-footer {
    padding: 16px 12px;
}

.sidebar.collapsed .sidebar-footer-actions {
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.sidebar.collapsed .sidebar-footer-actions .sidebar-theme-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

.sidebar.collapsed .sidebar-footer-actions .sidebar-logout-btn {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
}

.sidebar.collapsed .sidebar-logout-btn span:last-child {
    display: none;
}

.sidebar.collapsed .sidebar-logout-btn .sidebar-icon {
    margin: 0;
}

.sidebar.collapsed .sidebar-logout-btn:hover {
    transform: translateX(0);
}

/* Tooltip для кнопки выхода в свернутом состоянии */
.sidebar.collapsed .sidebar-logout-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-left: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10000;
}

.sidebar.collapsed .sidebar-logout-btn {
    position: relative;
}

.sidebar.collapsed .sidebar-logout-btn:hover::after {
    opacity: 1;
}

/* Стили для иконок в меню */
.sidebar nav a {
    font-size: 0.9rem;
}

.sidebar nav a:hover {
    font-size: 0.9rem;
}

.sidebar nav a.active {
    font-size: 0.9rem;
}

/* Tooltip for collapsed state */
.sidebar.collapsed nav a::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    margin-left: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    font-weight: 500;
}

.sidebar.collapsed nav a:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(4px);
}

/* Main Content */
.main-content {
    margin-left: 280px;
    padding: 40px;
    min-height: 100vh;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    background: linear-gradient(135deg, #f4f1ee 0%, #e8e1da 100%);
    /* Force gradient */
    color: var(--theme-text-primary);
}

body.theme-light .main-content {
    background: linear-gradient(135deg, #f4f1ee 0%, #e8e1da 100%);
}

body.sidebar-collapsed .main-content {
    margin-left: 80px;
}

/* Game Layout - структура как в окне Ученики */
.game-main-content {
    background: linear-gradient(135deg, #f4f1ee 0%, #e8e1da 100%);
    /* Force gradient */
    min-height: 100vh;
    padding: 0 !important;
    margin-left: 280px !important;
    width: calc(100% - 280px) !important;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

body.theme-light .game-main-content {
    background: linear-gradient(135deg, #f4f1ee 0%, #e8e1da 100%);
}

body:has(.sidebar.collapsed) .game-main-content,
.sidebar.collapsed~.main-content.game-main-content {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
}

.game-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100vh;
    background: linear-gradient(135deg, #f4f1ee 0%, #e8e1da 100%);
    /* Force gradient */
    overflow: hidden;
    transition: background-color 0.3s ease;
}

body.theme-light .game-layout {
    background: linear-gradient(135deg, #f4f1ee 0%, #e8e1da 100%);
}

.game-top-bar {
    padding: 0;
    background: var(--theme-bg-secondary);
    border-bottom: 2px solid var(--theme-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    box-sizing: border-box;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px 0;
}

.page-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--theme-text-primary);
    letter-spacing: -0.02em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s ease;
}

h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.03em;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}

.stat-card {
    background: white;
    padding: 16px 20px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    display: none !important;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.stat-card.success::before {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.stat-card.warning::before {
    background: linear-gradient(180deg, #ff8a00 0%, #d96f00 100%);
}

.stat-card.danger::before {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

.stat-card h3 {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.stats-grid .stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 12px 14px;
    border-radius: 12px;
}

.stat-card-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ff8a00;
    background: #f7f4f1;
    border: 1px solid #ffe1b8;
}

.stat-card-icon svg,
.stat-card-icon i {
    width: 18px;
    height: 18px;
}

.stats-grid .stat-card h3 {
    margin: 0 0 4px;
    font-size: 0.68rem;
    line-height: 1.15;
}

.stats-grid .stat-number {
    font-size: 1.25rem;
    line-height: 1.05;
    white-space: nowrap;
}

/* Rating - Minimalist (Dashboard) */
.rating-group-card {
    background: #ffffff;
    border: 1px solid #e4ddd6;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.rating-accordion {
    padding: 0;
    overflow: hidden;
}

.rating-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.rating-accordion-icon {
    font-size: 14px;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.rating-accordion-body {
    display: none;
    padding: 0 16px 16px 16px;
}

.rating-accordion.is-open .rating-accordion-body {
    display: block;
}

.rating-accordion.is-open .rating-accordion-icon {
    transform: rotate(180deg);
}

.rating-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rating-group-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.rating-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.rating-month-card {
    border: 1px solid #e4ddd6;
    border-radius: 12px;
    padding: 10px;
    background: #f8f7f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
}

.rating-month-card.is-empty {
    background: #ffffff;
    border-style: dashed;
    color: #94a3b8;
}

.rating-month-name {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    font-weight: 600;
}

.rating-empty {
    font-size: 0.78rem;
    color: #94a3b8;
    text-align: center;
    padding: 6px 0;
}

.rating-student-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rating-student {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
}

.rating-month-card .rating-student-name {
    font-size: 0.72rem;
    color: #475569;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    word-break: break-word;
}

.rating-student-avatar,
.rating-current-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #e4ddd6;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4ddd6;
    color: #64748b;
}

.rating-current-avatar {
    width: 64px;
    height: 64px;
    font-size: 22px;
}

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

.rating-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.rating-student-name {
    font-size: 0.8rem;
    color: #0f172a;
    font-weight: 600;
    line-height: 1.2;
}

.rating-student-points {
    font-size: 0.75rem;
    color: #64748b;
}

.rating-current-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.rating-current-card {
    border: 1px solid #e4ddd6;
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.rating-current-card.is-top {
    background: #f8f7f6;
    border-color: #ffc978;
}

.rating-current-rank {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    background: #eef2ff;
    border-radius: 999px;
    padding: 2px 8px;
}

.rating-current-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    text-align: center;
    line-height: 1.2;
}

.rating-current-points {
    font-size: 0.8rem;
    color: #475569;
}

.rating-empty-block {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px;
    color: #94a3b8;
    background: #ffffff;
    border: 1px dashed #e4ddd6;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .rating-group-card {
        padding: 12px;
        border-radius: 12px;
    }

    .rating-month-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rating-current-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rating-month-card {
        min-height: 110px;
        padding: 8px;
    }
}

.stats-grid.is-hidden {
    display: none !important;
}

/* Buttons */
.btn-primary,
.btn-success,
.btn-info,
.btn-danger,
.btn-small,
.btn-secondary,
.btn-ghost {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #ff8a00 0%, #d96f00 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(255, 138, 0, 0.3);
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 138, 0, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25);
}

.btn-info:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
}

.btn-secondary {
    background: #f4f1ee;
    color: #475569;
    border: 1px solid #e4ddd6;
}

.btn-secondary:hover {
    background: #e4ddd6;
    border-color: #d8d0c8;
}

.btn-ghost {
    background: transparent;
    color: #475569;
    border: 1px solid #e4ddd6;
}

.btn-ghost:hover {
    background: #f8f7f6;
    border-color: #d8d0c8;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

/* Квадратные кнопки для действий в таблицах */
.edit-transfer-btn,
.delete-transfer-btn,
.edit-user-btn,
.delete-user-btn,
.edit-role-btn,
.delete-role-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    min-width: 40px;
}

.btn-delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.btn-delete:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.btn-small {
    padding: 10px;
    font-size: 0.875rem;
    border-radius: 10px;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
    width: 100%;
    margin-top: 20px;
    border-radius: 14px;
}

/* Tables */
.data-table {
    width: 100%;
    background: var(--theme-table-bg);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--theme-border);
    margin-bottom: 24px;
}

body.theme-light .data-table {
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
}

.data-table thead {
    background: var(--theme-table-header-bg);
    color: white;
    border-radius: 0;
}

.data-table th,
.data-table td {
    padding: 18px 20px;
    text-align: left;
    font-size: 0.95rem;
    vertical-align: middle;
}

/* Выравнивание колонок "Баланс" и "Баллы" по центру */
.data-table th:nth-child(9),
.data-table td:nth-child(9),
.data-table th:nth-child(10),
.data-table td:nth-child(10) {
    text-align: center;
}

.data-table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: white;
    border-radius: 0;
}

.data-table thead th:first-child {
    border-top-left-radius: 0;
}

.data-table thead th:last-child {
    border-top-right-radius: 0;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--theme-table-border);
    transition: all 0.2s ease;
    color: var(--theme-text-primary);
}

.data-table tbody tr:hover {
    background: rgba(255, 138, 0, 0.1);
    transform: scale(1.001);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.theme-light .data-table tbody tr {
    border-bottom: 1px solid #e4ddd6;
}

body.theme-light .data-table tbody tr:hover {
    background: #f8f7f6;
}

.data-table tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.5);
}

body.theme-light .data-table tr:nth-child(even) {
    background: #fafbfc;
}

.data-table tr:nth-child(even):hover {
    background: rgba(255, 138, 0, 0.15);
}

body.theme-light .data-table tr:nth-child(even):hover {
    background: #f8f7f6;
}

.data-table tr.low-balance {
    background: rgba(239, 68, 68, 0.1);
    border-left: none;
}

body.theme-light .data-table tr.low-balance {
    background: #fef2f2;
}

.data-table tr.low-balance:hover {
    background: rgba(239, 68, 68, 0.15);
}

body.theme-light .data-table tr.low-balance:hover {
    background: #fee2e2;
}

.data-table tr.blacklisted {
    background: rgba(239, 68, 68, 0.1);
    border-left: none;
}

body.theme-light .data-table tr.blacklisted {
    background: #fef2f2;
}

/* Минималистичный стиль таблиц и действий для Финансов */
.finances-page .data-table {
    background: #ffffff;
    border: 1px solid #e4ddd6;
    border-radius: 12px;
    box-shadow: none;
}

.finances-page .data-table thead {
    background: #f8f7f6;
    color: #64748b;
}

.finances-page .data-table th {
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.finances-page .data-table td {
    padding: 14px 16px;
    font-size: 0.9rem;
    color: #0f172a;
}

.finances-page .data-table tbody tr {
    border-bottom: 1px solid #eef2f7;
    box-shadow: none;
}

.finances-page .data-table tbody tr:hover {
    background: #f8f7f6;
    transform: none;
    box-shadow: none;
}

.finances-page .data-table tr:nth-child(even) {
    background: #fcfdff;
}

.finances-page .data-table tr:nth-child(even):hover {
    background: #f8f7f6;
}

.finances-page .data-table .btn-small {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 6px;
    border-radius: 8px;
    box-shadow: none;
}

.finances-page .data-table .btn-small.btn-info,
.finances-page .data-table .btn-small.btn-danger {
    background: #ffffff;
    border: 1px solid #e4ddd6;
}

.finances-page .data-table .btn-small.btn-info {
    color: #0ea5e9;
    border-color: #bae6fd;
}

.finances-page .data-table .btn-small.btn-danger {
    color: #ef4444;
    border-color: #fecaca;
}

.finances-page .data-table .btn-small.btn-info:hover,
.finances-page .data-table .btn-small.btn-danger:hover {
    background: #f8f7f6;
}

/* Касса: минималистичные кнопки действий */
.finances-page .data-table .edit-transfer-btn,
.finances-page .data-table .delete-transfer-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 6px;
    border-radius: 8px;
    box-shadow: none;
    background: #ffffff;
    border: 1px solid #e4ddd6;
}

.finances-page .data-table .edit-transfer-btn {
    color: #0ea5e9;
    border-color: #bae6fd;
}

.finances-page .data-table .delete-transfer-btn {
    color: #ef4444;
    border-color: #fecaca;
}

.finances-page .data-table .edit-transfer-btn:hover,
.finances-page .data-table .delete-transfer-btn:hover {
    background: #f8f7f6;
}

/* Сотрудники: минималистичный стиль таблиц и действий */
.users-page .data-table {
    background: #ffffff;
    border: 1px solid #e4ddd6;
    border-radius: 12px;
    box-shadow: none;
}

.users-page .data-table thead {
    background: #f8f7f6;
    color: #64748b;
}

.users-page .data-table th {
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.users-page .data-table td {
    padding: 14px 16px;
    font-size: 0.9rem;
    color: #0f172a;
}

.users-page .data-table tbody tr {
    border-bottom: 1px solid #eef2f7;
}

.users-page .data-table tbody tr:hover {
    background: #f8f7f6;
    transform: none;
    box-shadow: none;
}

.users-page .data-table tr:nth-child(even) {
    background: #fcfdff;
}

.users-page .data-table tr:nth-child(even):hover {
    background: #f8f7f6;
}

.users-page .data-table .edit-user-btn,
.users-page .data-table .delete-user-btn,
.users-page .data-table .edit-role-btn,
.users-page .data-table .delete-role-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 6px;
    border-radius: 8px;
    box-shadow: none;
    background: #ffffff;
    border: 1px solid #e4ddd6;
}

.users-page .data-table .edit-user-btn,
.users-page .data-table .edit-role-btn {
    color: #0ea5e9;
    border-color: #bae6fd;
}

.users-page .data-table .delete-user-btn,
.users-page .data-table .delete-role-btn {
    color: #ef4444;
    border-color: #fecaca;
}

.users-page .data-table .edit-user-btn:hover,
.users-page .data-table .delete-user-btn:hover,
.users-page .data-table .edit-role-btn:hover,
.users-page .data-table .delete-role-btn:hover {
    background: #f8f7f6;
}

/* Настройки: минималистичный стиль таблиц и действий */
.settings-page .data-table {
    background: #ffffff;
    border: 1px solid #e4ddd6;
    border-radius: 12px;
    box-shadow: none;
}

.settings-page .data-table thead {
    background: #f8f7f6;
    color: #64748b;
}

.settings-page .data-table th {
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.settings-page .data-table td {
    padding: 14px 16px;
    font-size: 0.9rem;
    color: #0f172a;
}

.settings-page .data-table tbody tr {
    border-bottom: 1px solid #eef2f7;
}

.settings-page .data-table tbody tr:hover {
    background: #f8f7f6;
    transform: none;
    box-shadow: none;
}

.settings-page .data-table tr:nth-child(even) {
    background: #fcfdff;
}

.settings-page .data-table tr:nth-child(even):hover {
    background: #f8f7f6;
}

.settings-page .data-table .btn-small,
.settings-page .data-table .btn-small.btn-info,
.settings-page .data-table .btn-small.btn-danger,
.settings-page .data-table .btn-small.btn-success {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 6px;
    border-radius: 8px;
    box-shadow: none;
    background: #ffffff;
    border: 1px solid #e4ddd6;
}

.settings-page .data-table .btn-small.btn-info {
    color: #0ea5e9;
    border-color: #bae6fd;
}

.settings-page .data-table .btn-small.btn-danger {
    color: #ef4444;
    border-color: #fecaca;
}

.settings-page .data-table .btn-small.btn-success {
    color: #10b981;
    border-color: #bbf7d0;
}

.settings-page .data-table .btn-small:hover {
    background: #f8f7f6;
}

.student-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e4ddd6;
}

.avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f4f1ee 0%, #e4ddd6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 2px solid #e4ddd6;
}

.balance-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 0.8rem;
    font-size: 0.875rem;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
    display: inline-block;
    text-align: center;
}

.balance-badge.low {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
}

/* Camera */
.camera-container {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    /* уменьшили camera-box, увеличили today-list */
    gap: 20px;
    margin-bottom: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.camera-container.maximized {
    grid-template-columns: 1fr;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.camera-container.maximized .camera-box {
    transform: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.camera-container.maximized #cameraFeed {
    max-height: 80vh;
}

.camera-box {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#camera {
    width: 100%;
    max-width: 640px;
    border-radius: 8px;
    background: #000;
}

.camera-controls {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

#toggleResize {
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-bg-secondary);
    color: var(--theme-text);
    border: 1px solid var(--theme-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

#toggleResize:hover {
    background: #ff8a00;
    color: white;
    border-color: #ff8a00;
}

.camera-container.maximized #toggleResize {
    background: #ff8a00;
    color: white;
}

.recognition-panel {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#studentPhoto {
    width: 100%;
    max-width: 200px;
    border-radius: 8px;
    margin: 15px 0;
}

.alert-danger {
    background: #e74c3c;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.info-text {
    color: #7f8c8d;
    text-align: center;
    padding: 20px;
}

.today-list {
    background: white;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    margin-bottom: 24px;
}

.today-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.today-header h2 {
    margin: 0;
}

.today-counter {
    color: #7f8c8d;
    font-size: 0.95rem;
}

.today-columns {
    display: grid;
    grid-template-columns: 60px 100px 2fr 1fr 120px 50px;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    font-weight: 600;
    color: #94a3b8;
    border-bottom: 1px solid var(--theme-border);
    margin-bottom: 10px;
}

.today-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.today-item {
    display: grid;
    grid-template-columns: 60px 100px 2fr 1fr 120px 50px;
    align-items: center;
    padding: 12px 15px;
    gap: 15px;
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.today-item:hover {
    transform: translateX(6px);
    border-color: #ff8a00;
    background: var(--theme-bg-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.today-time {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #ff8a00;
    font-size: 1.1rem;
}

.today-name {
    font-weight: 600;
    color: var(--theme-text);
}

.today-group {
    color: #94a3b8 !important;
    font-size: 0.9rem !important;
}

.today-balance {
    font-weight: 700;
    text-align: right;
    padding-right: 15px;
}

.today-avatar {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--theme-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-border);
}

.today-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.today-avatar .avatar-placeholder {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    background: #ecf0f1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.today-info {
    display: flex;
    flex-direction: column;
}

.today-name {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 0.85rem;
    line-height: 1.3;
    word-wrap: break-word;
}

.today-meta {
    color: #95a5a6;
    font-size: 0.85rem;
}

.today-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.today-delete {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

.today-delete svg {
    width: 18px;
    height: 18px;
    fill: white;
    transition: fill 0.3s ease;
}

.today-delete:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.5);
}

.today-delete:hover svg {
    fill: #ffffff;
}

@media (max-width: 900px) {
    .today-columns {
        display: none;
    }

    .today-item {
        grid-template-columns: 70px 1fr;
        grid-template-rows: repeat(4, auto);
    }

    .today-time,
    .today-group,
    .today-actions {
        grid-column: 1 / -1;
    }

    .today-time {
        font-size: 0.85rem;
        margin-top: 4px;
    }

    .today-actions {
        justify-content: flex-start;
    }
}

/* Card - общий стиль для карточек */
.card {
    background: var(--theme-card-bg);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    margin-bottom: 24px;
}

.card:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--theme-card-bg);
    margin: 2% auto;
    padding: 30px;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 24px;
    position: relative;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.2);
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-input-border);
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
    border-color: #ff8a00;
    outline: none;
}

.modal-content.simple-modal {
    padding: 30px;
}

.modal-content.modern-modal {
    max-width: 900px;
    padding: 30px;
}

/* Модальные окна для учеников - увеличенная ширина */
.edit-student-modal-content,
.add-student-modal-content {
    max-width: 1600px !important;
    width: 95%;
    max-height: 95vh;
    overflow-y: auto;
    padding: 32px;
}

/* Красивый скроллбар для модальных окон */
.edit-student-modal-content::-webkit-scrollbar,
.add-student-modal-content::-webkit-scrollbar {
    width: 10px;
}

.edit-student-modal-content::-webkit-scrollbar-track,
.add-student-modal-content::-webkit-scrollbar-track {
    background: #f4f1ee;
    border-radius: 10px;
}

.edit-student-modal-content::-webkit-scrollbar-thumb,
.add-student-modal-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ff8a00 0%, #d96f00 100%);
    border-radius: 10px;
}

.edit-student-modal-content::-webkit-scrollbar-thumb:hover,
.add-student-modal-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #d96f00 0%, #ff8a00 100%);
}

.modal-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 36px 20px;
    border-bottom: 1px solid var(--theme-border);
    transition: border-color 0.3s ease;
}

.modal-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-tertiary);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.modal-subtitle {
    color: var(--theme-text-tertiary);
    margin-top: 8px;
    font-size: 0.95rem;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.modal-close {
    background: var(--theme-bg-tertiary);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.25rem;
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: #e4ddd6;
    transform: rotate(90deg);
}

.modal-body {
    padding: 24px 36px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.modal-footer {
    padding: 20px 36px 32px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #f4f1ee;
    background: #fafbfc;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

/* Стандартизированная структура модальных окон */
.modal-content {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.modal-header-fixed {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--theme-card-bg);
    border-bottom: 1px solid var(--theme-border);
    flex-shrink: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.modal-header-fixed h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    transition: color 0.3s ease;
}

.modal-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.modal-body-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    min-height: 0;
}

/* Прокрутка только при необходимости */
.modal-body-scrollable:not(:has(*)) {
    overflow-y: hidden;
}

/* Кастомный скроллбар для области контента */
.modal-body-scrollable::-webkit-scrollbar {
    width: 8px;
}

.modal-body-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255, 138, 0, 0.3);
    border-radius: 4px;
}

.modal-body-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 138, 0, 0.5);
}

body.theme-light .modal-body-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255, 138, 0, 0.2);
}

body.theme-light .modal-body-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 138, 0, 0.4);
}

.close {
    position: absolute;
    right: 24px;
    top: 24px;
    font-size: 2rem;
    cursor: pointer;
    color: #64748b;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close:hover {
    background: #f4f1ee;
    color: #1a202c;
    transform: rotate(90deg);
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e4ddd6;
    border-radius: 12px;
    font-size: 0.95rem;
    background: white;
    transition: all 0.2s ease;
    color: #1a202c;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    outline: none;
}

.form-group small {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 6px;
    display: block;
}

/* Form Blocks */
.form-block {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: none;
}

.form-block h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #2c3e50;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

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

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.form-row.three-col {

    .form-card {
        background: white;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 20px;
        padding: 32px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        transition: all 0.3s ease;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    }

    .form-card:hover {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .form-card.split-card {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
    }

    .form-card.two-col {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }

    .form-card.three-field {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 20px;
    }

    .field-label {
        font-weight: 600;
        color: #334155;
        font-size: 0.9rem;
        margin-bottom: 8px;
        display: block;
    }

    .field-hint {
        display: block;
        margin-top: 6px;
        color: #64748b;
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .form-card input,
    .form-card select,
    .form-card textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #e4ddd6;
        border-radius: 12px;
        font-size: 0.95rem;
        background: #fff;
        transition: all 0.2s ease;
        font-family: var(--ui-font-family);
    }

    .form-card select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
        padding-right: 40px;
        cursor: pointer;
    }

    .form-card select::-ms-expand {
        display: none;
    }

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

    .form-card input:focus,
    .form-card textarea:focus,
    .form-card select:focus {
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        outline: none;
    }

    /* Force consistent field styling inside modals */
    .modal-form input[type="text"],
    .modal-form input[type="time"],
    .modal-form input[type="number"],
    .modal-form textarea,
    .modal-form select {
        width: 100%;
        height: 44px;
        padding: 10px 14px;
        border: 1px solid #dfe3ec;
        border-radius: 10px;
        font-size: 1rem;
        background: #fff;
        line-height: 1.2;
    }

    .modal-form textarea {
        min-height: 120px;
        height: auto;
    }

    .modal-form input[type="text"]:focus,
    .modal-form input[type="time"]:focus,
    .modal-form input[type="number"]:focus,
    .modal-form textarea:focus,
    .modal-form select:focus {
        border-color: #ff8a00;
        box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.14);
        outline: none;
    }

    .form-alert {
        background: #fdecea;
        border: 1px solid #f5c6cb;
        border-radius: 10px;
        padding: 12px 14px;
        color: #c0392b;
        font-weight: 500;
    }

    grid-template-columns: repeat(3, 1fr);
}

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

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    transform: scale(1.2);
}

.checkbox-label span {
    font-weight: normal;
}

.weekdays-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 6px;
}

.weekday-pill {
    position: relative;
    display: block;
}

.weekday-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.weekday-pill span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid #dfe6f3;
    background: #fff;
    font-weight: 600;
    color: #556070;
    transition: all 0.2s ease;
}

.weekday-pill input:checked+span {
    background: #27ae60;
    border-color: #27ae60;
    color: #fff;
    box-shadow: 0 15px 30px rgba(39, 174, 96, 0.25);
}

/* Schedule Visualization */
.selected-slots-display {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(135deg, #f8f7f6, #eef2ff);
    border: 1px solid #d9e1f2;
    border-radius: 14px;
    min-height: 54px;
    align-items: center;
}

.selected-slots-display:empty::before {
    content: 'Выбранные занятия появятся здесь...';
    color: #94a3b8;
    font-size: 0.875rem;
}

.selected-slot-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    color: #0f172a;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #d8d0c8;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    position: relative;
}

.selected-slot-badge .remove-slot {
    cursor: pointer;
    margin-left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fee2e2;
    border: 1px solid #fecdd3;
    color: #b91c1c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    transition: opacity 0.2s, transform 0.2s, background 0.2s, border-color 0.2s;
}

.selected-slot-badge .remove-slot:hover {
    opacity: 1;
    transform: scale(1.06);
    background: #fecdd3;
    border-color: #fda4af;
}

/* Tweaks for edit modal selected slots */
#editSelectedSlotsDisplay {
    background: linear-gradient(135deg, #fdf4ff, #eef2ff);
    border: 1px solid #e9d5ff;
    border-radius: 14px;
    padding: 14px;
    min-height: 60px;
}

#editSelectedSlotsDisplay .selected-slot-badge {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e9d5ff;
    box-shadow: 0 6px 18px rgba(217, 111, 0, 0.12);
    border-radius: 12px;
    padding: 10px 12px;
}

#editSelectedSlotsDisplay .selected-slot-badge .remove-slot {
    color: #ef4444;
    opacity: 0.85;
}

/* Edit modal badges (slot-badge) */
#editSelectedSlotsDisplay .selected-slots-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

#editSelectedSlotsDisplay .slot-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    color: #0f172a;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #e9d5ff;
    box-shadow: 0 6px 18px rgba(217, 111, 0, 0.12);
}

#editSelectedSlotsDisplay .slot-badge-remove {
    cursor: pointer;
    margin-left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fee2e2;
    border: 1px solid #fecdd3;
    color: #b91c1c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    transition: opacity 0.2s, transform 0.2s, background 0.2s, border-color 0.2s;
}

#editSelectedSlotsDisplay .slot-badge-remove:hover {
    opacity: 1;
    transform: scale(1.06);
    background: #fecdd3;
    border-color: #fda4af;
}

.schedule-visualization {
    background: #f8f7f6;
    border-radius: 12px;
    padding: 16px;
    min-height: 200px;
}

.schedule-loading {
    text-align: center;
    color: #94a3b8;
    padding: 40px 0;
}

.schedule-grid {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    gap: 4px;
}

.schedule-header {
    font-weight: 700;
    font-size: 0.875rem;
    color: #475569;
    padding: 8px 4px;
    text-align: center;
    background: #e4ddd6;
    border-radius: 8px;
}

.schedule-time-label {
    font-size: 0.75rem;
    color: #64748b;
    padding: 8px 4px;
    text-align: right;
    font-weight: 600;
}

.schedule-slot {
    background: #fff;
    border: 2px solid #e4ddd6;
    border-radius: 6px;
    padding: 8px 4px;
    font-size: 0.7rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.schedule-slot.disabled {
    background: #f4f1ee;
    border-color: #d8d0c8;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.5;
}

.schedule-slot.inactive {
    background: #f8f7f6;
    border-color: #e4ddd6;
    color: #d8d0c8;
    cursor: not-allowed;
    opacity: 0.4;
}

.schedule-slot.free {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

.schedule-slot.occupied {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
    cursor: not-allowed;
}

.schedule-slot.partial {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.schedule-slot.selected {
    background: linear-gradient(135deg, #ff8a00 0%, #ff8a00 100%);
    border-color: #ff8a00;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 138, 0, 0.35);
}

.schedule-slot.free:hover:not(.disabled):not(.inactive):not(.selected) {
    background: #dcfce7;
    border-color: #4ade80;
    transform: scale(1.05);
}

.schedule-slot.partial:hover:not(.disabled):not(.inactive):not(.selected) {
    background: #fef3c7;
    border-color: #fbbf24;
    transform: scale(1.05);
}

.schedule-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.schedule-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #64748b;
}

.schedule-legend-box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid;
}

.schedule-legend-box.free {
    background: #f0fdf4;
    border-color: #86efac;
}

.schedule-legend-box.partial {
    background: #fffbeb;
    border-color: #fcd34d;
}

.schedule-legend-box.occupied {
    background: #fef2f2;
    border-color: #fca5a5;
}

/* Login Page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 100vh;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

body.login-page,
.login-page {
    background-color: #ffffff !important;
}

.login-bg-image {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(100% - 430px);
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: clamp(18px, 4vw, 72px);
    opacity: 1;
    z-index: 0;
}

.login-container {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    padding: 0;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: stretch;
}

.login-box {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    padding: 48px 44px 72px;
    border-radius: 0;
    border-left: 1px solid rgba(226, 232, 240, 0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-box form {
    display: flex;
    flex-direction: column;
}

.login-box label,
.login-box h2,
.login-box .login-brand {
    color: #0f172a;
}

.login-box h2 {
    color: #475569;
}

.login-box input {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #d8d0c8;
}

.login-box input::placeholder {
    color: #64748b;
}

.login-box input:focus {
    background: #ffffff;
    border-color: #ff8a00;
    box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.14);
    outline: none;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #334155;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
    outline: none;
}

body.login-page .password-field .password-toggle,
body.login-page button.password-toggle[type="button"]:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #334155 !important;
}

body.login-page .password-field .password-toggle:hover,
body.login-page .password-field .password-toggle:focus-visible {
    background: transparent !important;
    color: #0f172a !important;
}

.login-box .btn-primary {
    align-self: center;
    min-width: 176px;
    height: 52px;
    margin-top: 4px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(124, 45, 18, 0.18)),
        linear-gradient(135deg, #ff8a1f 0%, #d96f00 52%, #d95f00 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 183, 102, 0.95);
    border-radius: 8px;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    box-shadow:
        0 14px 30px rgba(255, 115, 1, 0.32),
        0 0 0 1px rgba(255, 237, 213, 0.24) inset,
        0 0 22px rgba(255, 115, 1, 0.24);
    font-family: var(--ui-font-family) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
}

.login-box .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 237, 213, 0.56) 42%, transparent 62%);
    transform: translateX(-130%);
    transition: transform 0.55s ease;
}

.login-box .btn-primary:hover {
    transform: translateY(-2px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(124, 45, 18, 0.22)),
        linear-gradient(135deg, #ff8a00 0%, #d96f00 52%, #d96f00 100%);
    box-shadow:
        0 18px 36px rgba(255, 115, 1, 0.42),
        0 0 0 1px rgba(255, 237, 213, 0.28) inset,
        0 0 32px rgba(255, 115, 1, 0.32);
}

.login-box .btn-primary:hover::before {
    transform: translateX(130%);
}

.login-ticker {
    position: fixed;
    left: 0;
    right: 430px;
    bottom: 18px;
    z-index: 3;
    overflow: hidden;
    pointer-events: auto;
}

.login-ticker-track {
    display: inline-block;
    white-space: nowrap;
    animation: loginTicker 28s linear infinite;
    color: #334155;
    font-family: var(--ui-font-family);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    padding-left: 100%;
    will-change: transform;
}

.login-ticker:hover .login-ticker-track {
    animation-play-state: paused;
}

.login-ticker a {
    color: #ff8a00;
    text-decoration: none;
    font-weight: 500;
}

.login-ticker a:hover {
    text-decoration: underline;
}

@keyframes loginTicker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: #0f172a;
}

.login-logo {
    width: 190px;
    height: 82px;
    object-fit: contain;
    flex-shrink: 0;
}

.login-box h2 {
    text-align: center;
    margin-bottom: 36px;
    color: #64748b;
    font-size: 1rem;
    font-weight: 500;
}

.error {
    color: #ef4444;
    margin-top: 12px;
    text-align: center;
    padding: 12px;
    background: #fef2f2;
    border-radius: 10px;
    font-weight: 500;
}

.error:empty {
    display: none;
}

@media (max-width: 860px) {
    .login-page {
        justify-content: center;
        overflow-y: auto;
    }

    .login-container {
        max-width: 440px;
        min-height: 100vh;
        padding: 24px;
        align-items: center;
    }

    .login-bg-image {
        width: 100%;
        opacity: 0.22;
        padding: 18px;
    }

    .login-box {
        min-height: auto;
        padding: 40px 32px;
        border-radius: 24px;
        border: 1px solid rgba(226, 232, 240, 0.95);
    }

    .login-ticker {
        right: 0;
    }
}

/* OK-inspired quiet UI normalization */
:root,
body.theme-light {
    --theme-bg-primary: #f5f3f1;
    --theme-bg-secondary: #ffffff;
    --theme-bg-tertiary: #f8f7f6;
    --theme-text-primary: #111827;
    --theme-text-secondary: #4b5563;
    --theme-text-tertiary: #9ca3af;
    --theme-border: #e7e2dd;
    --theme-card-bg: #ffffff;
    --theme-input-bg: #ffffff;
    --theme-input-border: #ddd6cf;
    --theme-table-bg: #ffffff;
    --theme-table-header-bg: #f8f7f6;
    --theme-table-border: #ece7e2;
    --theme-sidebar-bg: #f5f3f1;
    --theme-sidebar-hover: #ebe6e1;
    --ui-accent: #ff8a00;
    --ui-accent-hover: #e96f00;
    --ui-accent-soft: #fff2e6;
    --ui-blue: #ff8a00;
    --ui-radius: 10px;
    --ui-radius-sm: 8px;
    --ui-shadow: none;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--ui-font-family) !important;
}

body {
    background: var(--theme-bg-primary) !important;
    color: var(--theme-text-primary);
    font-size: 14px;
    line-height: 1.35;
}

h1,
h2,
h3,
h4,
.page-title,
.sidebar-brand,
.panel-title-row h2,
.workspace-card h3,
.tournament-header h1,
.settings-card-title {
    color: var(--theme-text-primary) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

h1,
.tournament-header h1 {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

h2,
.panel-title-row h2,
.workspace-card h3,
.settings-card-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
}

h3,
h4 {
    font-size: 14px !important;
}

p,
small,
.entity-meta,
.entity-bottom,
.tournament-header p,
.sidebar-user-role,
.sidebar-user-system {
    color: var(--theme-text-secondary) !important;
    font-weight: 400 !important;
}

.main-content,
.game-main-content,
.tournaments-page,
.settings-page,
.finances-page,
.users-page {
    background: var(--theme-bg-primary) !important;
}

.tournament-header,
.tournament-panel,
.workspace-card,
.data-table,
.settings-card,
.bridge-metric-card,
.entity-item,
.tournament-team-card,
.modal-content,
.sidebar-user-card {
    background: var(--theme-bg-secondary) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}

.sidebar {
    background: var(--theme-sidebar-bg) !important;
    border-right: 1px solid var(--theme-border) !important;
    box-shadow: none !important;
}

.sidebar nav a,
.sidebar-logout-btn,
.mobile-nav-item,
.more-menu-item {
    color: var(--theme-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    border-radius: var(--ui-radius-sm) !important;
}

.sidebar nav a:hover,
.sidebar nav a.active,
.sidebar-logout-btn:hover {
    background: var(--theme-sidebar-hover) !important;
    color: var(--theme-text-primary) !important;
    font-weight: 500 !important;
}

.sidebar nav a.active::before {
    background: var(--ui-accent) !important;
}

button,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-danger,
.btn-warning,
.icon-btn,
.game-btn,
.settings-page .btn-primary,
.finances-page .btn-primary,
.users-page .btn-primary,
.tournaments-page .btn-primary,
.tournaments-page .btn-secondary {
    min-height: 36px !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-primary,
.btn-success,
.game-btn-primary,
.settings-page .btn-primary,
.finances-page .btn-primary,
.users-page .btn-primary,
.tournaments-page .btn-primary {
    background: var(--ui-accent) !important;
    border-color: var(--ui-accent) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-success:hover,
.game-btn-primary:hover,
.settings-page .btn-primary:hover,
.finances-page .btn-primary:hover,
.users-page .btn-primary:hover,
.tournaments-page .btn-primary:hover {
    background: var(--ui-accent-hover) !important;
    border-color: var(--ui-accent-hover) !important;
}

.btn-secondary,
.tournaments-page .btn-secondary,
.icon-btn,
.sidebar-theme-toggle,
.sidebar-toggle {
    background: #f2efec !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text-primary) !important;
}

input,
select,
textarea,
.form-input-modern,
.tournament-select,
.quick-tournament-form input,
.quick-tournament-form select,
.tournaments-page .compact-form input,
.tournaments-page .compact-form select,
.tournaments-page .compact-form textarea,
.tournaments-page .event-form input,
.tournaments-page .event-form select,
.tournaments-page .event-form textarea {
    min-height: 36px !important;
    border: 1px solid var(--theme-input-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--theme-input-bg) !important;
    color: var(--theme-text-primary) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input-modern:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.14) !important;
    outline: none !important;
}

.data-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.data-table thead,
.tournament-table thead {
    background: var(--theme-table-header-bg) !important;
}

.data-table th,
.tournament-table th,
.access-table th {
    background: var(--theme-table-header-bg) !important;
    color: var(--theme-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.data-table td,
.tournament-table td,
.access-table td {
    color: var(--theme-text-primary) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    border-color: var(--theme-table-border) !important;
}

.data-table tbody tr:hover,
.entity-item:hover,
.bracket-match:hover {
    background: #faf8f6 !important;
    box-shadow: none !important;
}

.entity-item.active,
.bracket-match.active,
.tournament-tab.active,
.users-tab.active,
.settings-tab.active {
    background: var(--ui-accent-soft) !important;
    border-color: #ffd0a3 !important;
    color: var(--theme-text-primary) !important;
}

.entity-title,
.entity-title b,
.bracket-match strong,
.scoreboard strong {
    color: var(--theme-text-primary) !important;
    font-weight: 600 !important;
}

.status-pill,
.user-status-badge,
.access-pill,
.access-status,
.team-mini-roster span {
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.modal-header-fixed {
    border-bottom: 1px solid var(--theme-border) !important;
}

.modal-header-fixed h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.quick-actions {
    background: white;
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e4ddd6;
    margin-top: 36px;
}

.quick-actions h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.action-buttons .btn-small {
    padding: 10px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

/* Month column chart */
.month-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.month-cell {
    background: #ffffff;
    border: 1px solid #e3e9f4;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.month-title {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.bars {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    align-items: end;
    height: 82px;
    margin-bottom: 4px;
    padding-top: 14px;
    overflow: visible;
}

.bar {
    width: 100%;
    border-radius: 6px 6px 0 0;
    background: #ecf0f1;
    position: relative;
    min-height: 2px;
}

.bar .bar-value {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 3px);
    color: #1f2937;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.bar.income {
    background: #27ae60;
}

.bar.expense {
    background: #e74c3c;
}

.bar.balance {
    background: #ff8a00;
}

.bar.debt {
    background: #ff8a00;
}

.bar.expected {
    background: #64748b;
}

.month-students-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.68rem;
    line-height: 1;
}

.month-students-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.month-students-meta svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.month-students-meta b {
    font-weight: 600;
    color: #334155;
}

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

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #556070;
}

.legend-item::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-item.income::before {
    background: #27ae60;
}

.legend-item.expense::before {
    background: #e74c3c;
}

.legend-item.balance::before {
    background: #ff8a00;
}

.legend-item.debt::before {
    background: #ff8a00;
}

.legend-item.expected::before {
    background: #64748b;
}

@media (max-width: 1200px) {
    .month-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

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

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

    .bars {
        height: 70px;
    }
}

/* Анимация сканирования */
@keyframes scan {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.scanning {
    animation: scan 2s ease-in-out infinite;
    border: 3px solid #27ae60 !important;
}

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

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

/* === MONTH PAYMENT CARDS === */
.month-payment-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.month-payment-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
}

.month-payment-card:active {
    transform: translateY(-1px) !important;
}

/* === FIELD BLOCKS VISUALIZATION === */
.field-blocks-container {
    padding: 24px;
    background: white;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

/* ==================== PAYMENT MODAL STYLES ==================== */
.payment-modal-content {
    max-width: 1000px;
    padding: 0;
    overflow: hidden;
}

.payment-modal-header {
    background: linear-gradient(135deg, #ff8a00 0%, #d96f00 100%);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: white;
}

.payment-modal-icon {
    font-size: 36px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.payment-modal-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.payment-modal-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

.payment-year-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px 32px;
    background: #f8f7f6;
    border-bottom: 1px solid #e4ddd6;
}

.payment-year-btn {
    padding: 10px 20px;
    background: white;
    border: 2px solid #e4ddd6;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-year-btn:hover {
    border-color: #ff8a00;
    color: #ff8a00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 138, 0, 0.2);
}

.payment-year-btn:active {
    transform: translateY(0);
}

.year-arrow {
    font-size: 18px;
    font-weight: bold;
}

.payment-year-display {
    min-width: 120px;
    text-align: center;
}

.current-year-text {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    padding: 8px 24px;
    background: linear-gradient(135deg, #ff8a00 0%, #d96f00 100%);
    color: white;
    border-radius: 12px;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(255, 138, 0, 0.3);
}

/* Layout для контента оплаты */
.payment-content-layout {
    display: flex;
    gap: 24px;
    padding: 32px;
    padding-bottom: 40px;
    background: white;
    min-height: 500px;
}

.payment-months-container {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
}

.payment-months-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    padding-bottom: 20px;
}

/* Красивый скроллбар для списка месяцев */
.payment-months-list::-webkit-scrollbar {
    width: 8px;
}

.payment-months-list::-webkit-scrollbar-track {
    background: #f4f1ee;
    border-radius: 10px;
}

.payment-months-list::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ff8a00 0%, #d96f00 100%);
    border-radius: 10px;
}

.payment-months-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #d96f00 0%, #ff8a00 100%);
}

.payment-input-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f8f7f6 0%, #ffffff 100%);
    padding: 28px 32px;
    border-radius: 16px;
    border: 2px solid #e4ddd6;
    max-height: 600px;
    overflow-y: auto;
}

.payment-input-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e4ddd6;
}

.payment-input-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.selected-month-name {
    color: #ff8a00;
    font-weight: 700;
}

.partial-payments-history {
    margin-bottom: 20px;
    padding: 20px;
    background: white;
    border-radius: 16px;
    border: 2px solid #e4ddd6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.payment-history-row {
    transition: all 0.3s ease;
}

.payment-history-row:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(255, 138, 0, 0.15);
    border-left-color: #d96f00;
}

.payment-form-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid #e4ddd6;
}

.btn-payment-submit {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.btn-payment-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(16, 185, 129, 0.4);
}

.btn-payment-submit:active {
    transform: translateY(0);
}

.payment-no-selection {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    color: #64748b;
    background: linear-gradient(135deg, #f8f7f6 0%, #ffffff 100%);
    border-radius: 16px;
    border: 2px dashed #e4ddd6;
}

.no-selection-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.6;
}

.payment-no-selection p {
    font-size: 18px;
    font-weight: 500;
    color: #94a3b8;
}

/* Улучшенные стили для карточек месяцев */
.month-payment-card {
    border-radius: 14px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: white;
    border: 2px solid #e4ddd6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    width: 100%;
}

.month-payment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #e4ddd6;
    transition: all 0.3s ease;
}

.month-payment-card:hover::before {
    background: linear-gradient(180deg, #ff8a00 0%, #d96f00 100%);
    width: 4px;
}

.month-payment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: #ff8a00;
}

.month-payment-card.selected {
    border-color: #ff8a00;
    background: linear-gradient(135deg, #f8f7f6 0%, #ffffff 100%);
    box-shadow: 0 8px 24px rgba(255, 138, 0, 0.3);
}

.month-payment-card.selected::before {
    background: linear-gradient(180deg, #ff8a00 0%, #d96f00 100%);
    width: 4px;
}

.month-payment-card.paid {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
}

.month-payment-card.paid::before {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    width: 4px;
}

.month-payment-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
}

.month-payment-card.disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: #e0e0e0;
}

/* ==================== FILTER PANEL STYLES ==================== */
.filter-panel {
    background: white;
    border-radius: 16px;
    padding: 0;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 500px;
    }
}

.filter-panel-content {
    padding: 24px 32px;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label {
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e4ddd6;
    border-radius: 12px;
    font-size: 0.95rem;
    background: white;
    transition: all 0.3s ease;
    color: #1a202c;
    font-family: inherit;
}

.filter-group input:focus,
.filter-group select:focus {
    border-color: #ff8a00;
    box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.filter-group input::placeholder {
    color: #94a3b8;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 2px solid #f4f1ee;
}

#filterToggleBtn.active {
    background: linear-gradient(135deg, #ff8a00 0%, #d96f00 100%);
    color: white;
    border-color: #ff8a00;
}

#filterToggleBtn.active:hover {
    background: linear-gradient(135deg, #d96f00 0%, #ff8a00 100%);
}

@media (max-width: 768px) {
    .payment-content-layout {
        flex-direction: column;
        padding: 20px;
    }

    .payment-months-container {
        flex: 1;
        width: 100%;
    }

    .payment-months-list {
        max-height: 300px;
    }

    .payment-input-section {
        max-height: none;
    }

    .payment-modal-header {
        flex-direction: column;
        text-align: center;
    }

    .payment-modal-icon {
        margin: 0 auto;
    }

    .payment-year-navigation {
        flex-direction: column;
        gap: 12px;
    }

    .filter-row {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        flex-direction: column;
    }

    .filter-actions button {
        width: 100%;
    }
}

.field-loading {
    text-align: center;
    color: #64748b;
    padding: 40px 20px;
    font-size: 0.95rem;
}

.field-stadium {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #0b3a1b;
    border-radius: 24px;
    padding: 32px 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}

.field-title {
    text-align: center;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.field-blocks-grid {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: stretch;
    padding: 26px 24px;
    background:
        /* центральная линия */
        linear-gradient(to right, transparent 49.5%, rgba(255, 255, 255, 0.7) 50%, transparent 50.5%),
        /* центральный круг */
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 33%, rgba(255, 255, 255, 0.65) 34%, rgba(255, 255, 255, 0.65) 36%, rgba(0, 0, 0, 0) 37%),
        /* левое штрафное */
        linear-gradient(to right, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 2px, transparent 2px),
        linear-gradient(to top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 2px, transparent 2px),
        /* правое штрафное */
        linear-gradient(to left, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 2px, transparent 2px),
        linear-gradient(to top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 2px, transparent 2px),
        /* трава */
        repeating-linear-gradient(90deg,
            #0f9f4a 0,
            #0f9f4a 14px,
            #0b7c39 14px,
            #0b7c39 28px);
    background-size:
        100% 2px,
        40% 80%,
        30% 100%,
        30% 60%,
        30% 60%,
        30% 100%,
        30% 60%,
        30% 60%,
        100% 100%;
    background-position:
        0 50%,
        50% 50%,
        0 50%,
        0 20%,
        0 80%,
        100% 50%,
        100% 20%,
        100% 80%,
        0 0;
    background-repeat: no-repeat;
    border-radius: 18px;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6), inset 0 0 18px rgba(0, 0, 0, 0.45);
    position: relative;
}

.field-blocks-grid::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
}

.field-block {
    flex: 1;
    min-height: 160px;
    background: rgba(15, 23, 42, 0.18);
    border: 2px solid rgba(148, 163, 184, 0.7);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    backdrop-filter: blur(4px);
}

.field-block:hover:not(.occupied):not(.disabled) {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.field-block.selected {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #15803d;
    color: #ecfdf5;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 138, 0, 0.5);
}

.field-block.occupied {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.5);
}

.field-block.partially-occupied {
    background: rgba(255, 138, 0, 0.3);
    border-color: rgba(255, 138, 0, 0.6);
    color: rgba(255, 255, 255, 0.8);
}

.field-block.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.field-block-number {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.3);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.field-blocks-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f4f1ee;
    border-radius: 8px;
    font-size: 0.95rem;
}

.field-info-label {
    color: #475569;
    font-weight: 500;
}

.field-info-value {
    color: #0f172a;
    font-weight: 700;
    font-size: 1.1rem;
}

.field-info-separator {
    color: #94a3b8;
    font-weight: 600;
}

.field-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}

.field-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: white;
}

.field-legend-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.field-legend-box.available {
    background: rgba(255, 255, 255, 0.15);
}

.field-legend-box.selected {
    background: linear-gradient(135deg, #ff8a00 0%, #ff8a00 100%);
    border-color: #d96f00;
}

.field-legend-box.partially {
    background: rgba(255, 138, 0, 0.3);
    border-color: rgba(255, 138, 0, 0.6);
}

.field-legend-box.occupied {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
}

/* Кнопка выдачи вознаграждения */
.btn-warning {
    background: linear-gradient(135deg, #ff8a00 0%, #d96f00 100%);
    color: white;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d96f00 0%, #d35400 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
}

/* Стили для камеры и удаления фиксации */
.today-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--theme-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--theme-border);
    transition: all 0.2s ease;
}

.today-item:hover {
    transform: translateX(4px);
    border-color: #ff8a00;
}

.today-actions {
    margin-left: auto;
}

.btn-delete-small {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn-delete-small:hover {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.camera-box {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#cameraFeed {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Бейдж баллов */
.points-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    border: 1px solid #ff8a00;
    transition: all 0.2s ease;
    text-align: center;
}

.points-badge:hover {
    background: linear-gradient(135deg, #ffe69c 0%, #ffd700 100%);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
}

/* Компонент загрузки фото */
.photo-upload-container {
    position: relative;
    width: 100%;
    outline: none;
}

.photo-upload-area {
    width: 100%;
    min-height: 200px;
    border: 2px dashed #dfe3ec;
    border-radius: 12px;
    background: #fafbfc;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.photo-upload-area:hover {
    border-color: #27ae60;
    background-color: #f8fff9;
}

.photo-preview {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.photo-preview img {
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.photo-preview img.photo-placeholder-avatar,
.photo-placeholder-avatar {
    width: 132px;
    height: 132px;
    max-width: 132px;
    max-height: 132px;
    object-fit: contain;
    opacity: 0.72;
    filter: saturate(0.82);
}

.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.photo-select-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.2);
}

.photo-select-btn:hover {
    background: #229954;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.photo-select-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.2);
}

.photo-select-icon {
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
}

.photo-select-text {
    font-size: 16px;
}

.photo-hint {
    font-size: 12px;
    color: #95a5a6;
    margin-top: 8px;
}

.photo-delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 16px;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.photo-delete-btn:hover {
    background: #e74c3c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.photo-upload-container.error .photo-upload-area {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
    background-color: #fef5f5;
    animation: shake 0.3s;
}

@keyframes shake {

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

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

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

/* Иконки для типов оплаты */
.finances-payment-type-btn,
.payment-type-btn,
.edit-payment-type-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Добавляем padding-left только для кнопок с иконками */
.finances-payment-type-btn[data-payment-type="card"],
.finances-payment-type-btn[data-payment-type="click"],
.finances-payment-type-btn[data-payment-type="payme"],
.finances-payment-type-btn[data-payment-type="uzum"],
.payment-type-btn[data-payment-type="card"],
.payment-type-btn[data-payment-type="click"],
.payment-type-btn[data-payment-type="payme"],
.payment-type-btn[data-payment-type="uzum"],
.edit-payment-type-btn[data-payment-type="card"],
.edit-payment-type-btn[data-payment-type="click"],
.edit-payment-type-btn[data-payment-type="payme"],
.edit-payment-type-btn[data-payment-type="uzum"] {
    padding-left: 32px !important;
}

/* Иконка для карты */
.finances-payment-type-btn[data-payment-type="card"]::before,
.payment-type-btn[data-payment-type="card"]::before,
.edit-payment-type-btn[data-payment-type="card"]::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url('/static/uploads/card.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

/* Иконка для Click */
.finances-payment-type-btn[data-payment-type="click"]::before,
.payment-type-btn[data-payment-type="click"]::before,
.edit-payment-type-btn[data-payment-type="click"]::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url('/static/uploads/click.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

/* Иконка для Payme */
.finances-payment-type-btn[data-payment-type="payme"]::before,
.payment-type-btn[data-payment-type="payme"]::before,
.edit-payment-type-btn[data-payment-type="payme"]::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url('/static/uploads/payme.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

/* Иконка для Uzum */
.finances-payment-type-btn[data-payment-type="uzum"]::before,
.payment-type-btn[data-payment-type="uzum"]::before,
.edit-payment-type-btn[data-payment-type="uzum"]::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url('/static/uploads/uzum.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

/* --- GLOBAL CLEANUP OVERRIDES --- */

/* 1. Remove ALL tab underlines */
.tab,
.student-tab,
.form-tab,
.details-tab,
.users-tab,
.settings-tab,
.nav-tab,
.form-tabs .tab {
    border-bottom: none !important;
    border-bottom-color: transparent !important;
    text-decoration: none !important;
    min-height: 48px !important;
    height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.9rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.tab svg,
.student-tab svg,
.form-tab svg,
.details-tab svg,
.users-tab svg,
.settings-tab svg,
.nav-tab svg,
.form-tabs .tab svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin-right: 0 !important;
}

.tab.active,
.student-tab.active,
.form-tab.active,
.details-tab.active,
.users-tab.active,
.settings-tab.active,
.nav-tab.active,
.form-tabs .tab.active {
    border-bottom: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

/* 2. Remove ALL thick accent lines (left bars) */
.stat-card,
.stat-card.success,
.stat-card.warning,
.stat-card.danger,
.stat-card.income,
.stat-card.expense,
.stat-card.balance,
.stat-card.debt {
    border-left: none !important;
}

/* Ensure pseudo elements don't create lines */
.stat-card::before,
.sidebar nav a::before,
.sidemenu-item::before,
.tab::after,
.student-tab::after,
.form-tab::after,
.details-tab::after,
.users-tab::after,
.settings-tab::after,
.nav-tab::after {
    display: none !important;
    content: none !important;
}

/* 3. Standardize active state visibility */
.tab.active,
.student-tab.active,
.form-tab.active,
.users-tab.active,
.settings-tab.active {
    font-weight: 600 !important;
}

/* Global Responsive Fixes */
@media (max-width: 768px) {

    .main-content,
    .game-main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .hide-mobile {
        display: none !important;
    }

    .data-table {
        border-radius: 12px;
        box-shadow: none;
        border: 1px solid #e4ddd6;
        background: #ffffff;
    }

    .data-table thead {
        background: #f4f1ee;
    }

    .data-table th,
    .data-table td {
        padding: 10px 12px;
        font-size: 0.82rem;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .data-table th {
        color: #475569;
        font-weight: 600;
    }

    .data-table tbody tr,
    .data-table tbody tr:hover,
    .data-table tr:nth-child(even),
    .data-table tr:nth-child(even):hover {
        background: #ffffff;
        box-shadow: none;
        transform: none;
    }

    .data-table tbody tr {
        border-bottom: 1px solid #f4f1ee;
    }

    .analytics-table thead th {
        background: #eef2f7;
        color: #334155;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .analytics-table tbody .analytics-total-row {
        background: #f8f7f6;
        border-top: 1px solid #e4ddd6;
    }

    .analytics-table tbody .analytics-total-row td {
        font-weight: 700;
        color: #0f172a;
    }
}

/* Main income/expense overlay chart */
.main-income-expense-chart {
    margin-top: 16px;
    background: #ffffff;
    border: 1px solid #e4ddd6;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    padding: 12px;
    height: 190px;
}

.main-income-expense-chart canvas {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 768px) {
    .main-income-expense-chart {
        height: 160px;
    }
}
/* Access log */
.access-log-page {
    min-height: 100vh;
    background: #f4f1ee;
    padding: 28px;
}

.access-log-shell {
    max-width: 1380px;
    margin: 0 auto;
}

.access-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.access-log-header h1 {
    margin: 0;
    font-size: 1.25rem;
    color: #0f1f35;
}

.access-log-header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: .82rem;
}

.access-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #d7e2ef;
    border-radius: 8px;
    background: #fff;
    color: #24364f;
    font-weight: 700;
    cursor: pointer;
}

.access-filters {
    display: grid;
    grid-template-columns: 160px 180px 160px minmax(260px, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.access-filters input,
.access-filters select {
    height: 42px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    background: #fff;
    color: #0f1f35;
    padding: 0 12px;
    font-size: .9rem;
}

.access-table-card {
    overflow: hidden;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 31, 53, .08);
}

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

.access-table th {
    height: 40px;
    background: #f6f8fb;
    color: #506784;
    font-size: .68rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: left;
    padding: 0 10px;
    font-weight: 600;
}

.access-table td {
    padding: 9px 10px;
    border-top: 1px solid #eef2f7;
    color: #17243a;
    font-size: .8rem;
    font-weight: 400;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.access-table strong {
    font-weight: 500;
}

.access-table th:nth-child(1),
.access-table td:nth-child(1) {
    width: 170px;
}

.access-table th:nth-child(2),
.access-table td:nth-child(2) {
    width: 120px;
}

.access-table th:nth-child(3),
.access-table td:nth-child(3) {
    width: 90px;
}

.access-table th:nth-child(5),
.access-table td:nth-child(5) {
    width: 180px;
}

.access-table th:nth-child(6),
.access-table td:nth-child(6) {
    width: 180px;
}

.access-table th:nth-child(7),
.access-table td:nth-child(7) {
    width: 120px;
}

.access-id {
    font-family: Consolas, 'Courier New', monospace;
}

.access-muted {
    margin-top: 3px;
    color: #8090a6;
    font-size: .7rem;
}

.access-pill,
.access-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}

.access-entry {
    color: #0d5edb;
    background: #eaf2ff;
}

.access-exit {
    color: #d96f00;
    background: #f2ecff;
}

.access-status-granted {
    color: #07843d;
    background: #e9f9ef;
}

.access-status-denied {
    color: #b45309;
    background: #fff3df;
}

.access-status-error {
    color: #c51616;
    background: #ffe8e8;
}

.access-empty {
    padding: 44px 16px !important;
    text-align: center;
    color: #6b7f99 !important;
}

.access-error {
    color: #c51616 !important;
}

.access-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    color: #52667f;
    font-size: .8rem;
}

.access-pagination-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.access-page-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #d7e2ef;
    border-radius: 8px;
    background: #fff;
    color: #24364f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.access-page-btn:disabled {
    opacity: .45;
    cursor: default;
}

@media (max-width: 900px) {
    .access-log-page {
        padding: 16px 12px 86px;
    }

    .access-log-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .access-filters {
        grid-template-columns: 1fr;
    }

    .access-table-card {
        overflow-x: auto;
    }

    .access-table {
        min-width: 900px;
    }
}

/* Unified polish: tables, buttons and sidebar footer */
.sidebar-user-card {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid #e4ddd6;
    border-radius: 12px;
    background: #f8f7f6;
    min-width: 0;
}

.sidebar-user-system,
.sidebar-user-name,
.sidebar-user-role {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-system {
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sidebar-user-name {
    margin-top: 4px;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 600;
}

.sidebar-user-role {
    margin-top: 2px;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 400;
}

.sidebar.collapsed .sidebar-user-card {
    display: none;
}

.btn-primary,
.btn-success,
.settings-page .btn-primary,
.settings-page .btn-success,
.finances-page .btn-primary,
.users-page .btn-primary,
.game-btn-primary {
    background: #ff8a00 !important;
    border: 1px solid #ff8a00 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-primary:hover,
.btn-success:hover,
.settings-page .btn-primary:hover,
.settings-page .btn-success:hover,
.finances-page .btn-primary:hover,
.users-page .btn-primary:hover,
.game-btn-primary:hover {
    background: #d96f00 !important;
    border-color: #d96f00 !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-info,
.btn-danger,
.btn-warning,
.btn-delete,
.btn-small.btn-info,
.btn-small.btn-danger,
.btn-small.btn-success,
.btn-small.btn-warning,
.action-btn.btn-info,
.action-btn.btn-danger,
.edit-transfer-btn,
.delete-transfer-btn,
.edit-user-btn,
.delete-user-btn,
.edit-role-btn,
.delete-role-btn,
.edit-tariff-btn,
.delete-tariff-btn,
.edit-reward-btn,
.delete-reward-btn,
.edit-expense-btn,
.delete-expense-btn,
.edit-income-btn,
.delete-income-btn,
.payment-edit-btn,
.payment-delete-btn,
.settings-page .data-table .btn-small,
.settings-page .data-table .btn-small.btn-info,
.settings-page .data-table .btn-small.btn-danger,
.settings-page .data-table .btn-small.btn-success,
.finances-page .data-table .btn-small.btn-info,
.finances-page .data-table .btn-small.btn-danger,
.users-page .data-table .edit-user-btn,
.users-page .data-table .delete-user-btn,
.users-page .data-table .edit-role-btn,
.users-page .data-table .delete-role-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    background: #f8f7f6 !important;
    border: 1px solid #e4ddd6 !important;
    color: #334155 !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-info:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-delete:hover,
.btn-small.btn-info:hover,
.btn-small.btn-danger:hover,
.btn-small.btn-success:hover,
.btn-small.btn-warning:hover,
.action-btn.btn-info:hover,
.action-btn.btn-danger:hover,
.edit-transfer-btn:hover,
.delete-transfer-btn:hover,
.edit-user-btn:hover,
.delete-user-btn:hover,
.edit-role-btn:hover,
.delete-role-btn:hover {
    background: #eef2f7 !important;
    border-color: #d8d0c8 !important;
    color: #0f172a !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-info svg,
.btn-danger svg,
.btn-warning svg,
.btn-delete svg,
.btn-small svg,
.action-btn svg,
.edit-transfer-btn svg,
.delete-transfer-btn svg,
.edit-user-btn svg,
.delete-user-btn svg,
.edit-role-btn svg,
.delete-role-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.data-table tbody td,
.data-table tbody td *,
.analytics-table tbody td,
.access-table tbody td,
.access-table tbody td *,
.finances-page .data-table tbody td,
.finances-page .data-table tbody td *,
.users-page .data-table tbody td,
.users-page .data-table tbody td *,
.settings-page .data-table tbody td,
.settings-page .data-table tbody td * {
    font-weight: 400 !important;
}

.data-table tbody strong,
.analytics-table tbody strong,
.finances-page .data-table tbody strong,
.users-page .data-table tbody strong,
.settings-page .data-table tbody strong {
    font-weight: 400 !important;
}

.bridge-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.bridge-metric-card {
    min-height: 90px;
    padding: 8px 10px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-bg-secondary);
    overflow: hidden;
}

.bridge-metric-label {
    color: var(--theme-text-secondary);
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bridge-metric-value {
    margin-top: 5px;
    color: var(--theme-text-primary);
    font-size: 17px;
    line-height: 1.1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bridge-metric-detail {
    margin-top: 4px;
    color: var(--theme-text-secondary);
    font-size: 10.25px;
    line-height: 1.3;
    display: block;
    overflow: hidden;
}

.bridge-metric-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.bridge-metric-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--theme-text-secondary);
}

.bridge-metric-line strong {
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--theme-text-primary);
    font-weight: 500;
}

/* Tournaments */
.tournaments-page {
    padding: 22px;
}

.tournament-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tournament-header,
.tournament-panel {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
}

.tournament-header {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
}

.tournament-header h1 {
    margin: 0;
    color: var(--theme-text-primary);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
}

.tournament-header p {
    margin: 4px 0 0;
    color: var(--theme-text-secondary);
    font-size: 13px;
}

.tournament-topbar {
    align-items: flex-start;
}

.tournament-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 980px;
}

.tournament-actions .tournament-select {
    display: none;
}

.tournament-select {
    min-width: 260px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #fff;
    color: var(--theme-text-primary);
    font-size: 13px;
}

.tournament-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.tournament-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 14px;
}

.tournament-sidebar-panel {
    position: sticky;
    top: 8px;
    min-height: calc(100vh - 32px);
    max-height: calc(100vh - 24px);
    padding: 14px;
    overflow: hidden;
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
}

.tournament-sidebar-panel .panel-title-row {
    margin-bottom: 12px;
}

.tournament-list {
    display: grid;
    gap: 8px;
    max-height: calc(100vh - 190px);
    overflow: auto;
    padding-right: 2px;
}

.tournament-list-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: center;
    min-height: 74px;
    padding: 11px 12px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #f8f7f6;
    color: var(--theme-text-primary);
    text-align: left;
    cursor: pointer;
}

.tournament-list-item.active {
    border-color: #ff8a00;
    background: #fffaf4;
}

.tournament-list-title {
    min-width: 0;
    overflow: hidden;
    color: var(--theme-text-primary);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tournament-list-status {
    color: #ff8a00;
    font-size: 12px;
    font-weight: 600;
}

.tournament-list-meta {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    color: var(--theme-text-secondary);
    font-size: 12px;
}

.tournament-list-count {
    min-width: 42px;
    justify-self: end;
    color: var(--theme-text-secondary);
    font-size: 12px;
    text-align: right;
}

.tournament-tabs {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    gap: 8px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-bg-secondary);
}

.tournament-tab {
    position: relative;
    min-height: 44px;
    padding: 0 16px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--theme-text-secondary) !important;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    box-shadow: none !important;
}

.tournament-tab.active {
    border: 0 !important;
    background: transparent !important;
    color: #ff8a00 !important;
    font-weight: 600;
}

.tournament-tab-panel {
    display: none;
    min-height: 0 !important;
}

.tournament-tab-panel.active {
    display: block;
}

.tournament-main-bracket {
    min-height: 260px;
}

.tournament-match-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.tournament-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.tournament-team-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #f8f7f6;
}

.tournament-team-logo,
.score-team-logo,
.bracket-team-logo,
.team-logo-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--theme-border);
    flex: 0 0 auto;
}

.tournament-team-logo {
    width: 42px;
    height: 42px;
}

.score-team-logo {
    width: 112px;
    height: 112px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.tournament-team-card strong,
.tournament-team-card span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tournament-team-card strong {
    color: var(--theme-text-primary);
    font-size: 14px;
    font-weight: 700;
}

.tournament-team-card span {
    color: var(--theme-text-secondary);
    font-size: 12px;
}

.team-mini-roster {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.team-logo-picker {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #f8f7f6;
    cursor: pointer;
}

.team-logo-picker[hidden] {
    display: none !important;
}

.team-logo-picker input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
}

.team-logo-copy {
    min-width: 0;
}

.team-logo-picker strong,
.team-logo-picker small {
    display: block;
}

.team-logo-picker strong {
    color: var(--theme-text-primary);
    font-size: 13px;
    font-weight: 600;
}

.team-logo-picker small {
    margin-top: 2px;
    color: var(--theme-text-secondary);
    font-size: 12px;
}

.team-logo-action {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.team-logo-picker:hover .team-logo-action {
    border-color: #ff8a00;
    color: #ff8a00;
}

.team-logo-file-name {
    grid-column: 2 / -1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-logo-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-secondary);
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
}

.team-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-mini-roster span {
    max-width: 180px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e4ddd6;
    color: #334155;
    white-space: nowrap;
}

.tournament-modal {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.52);
}

.tournament-modal .modal-content {
    display: flex;
    flex-direction: column;
    width: min(620px, 100%);
    max-height: 88vh;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.tournament-modal .modal-content.wide {
    width: min(860px, 100%);
}

.tournament-modal .modal-header-fixed {
    flex: 0 0 auto;
    padding: 16px 18px;
    border-bottom: 1px solid var(--theme-border);
}

.tournament-modal .modal-header-fixed h2 {
    font-size: 20px;
}

.tournament-modal .modal-body-scrollable {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
}

.team-player-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    max-height: 280px;
    overflow: auto;
}

.team-player-option {
    display: grid;
    grid-template-columns: 16px 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #e4ddd6;
    border-radius: 8px;
    background: #fff;
}

.team-player-option img,
.team-player-option .avatar-fallback {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.team-player-option strong,
.team-player-option small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-player-option strong {
    color: var(--theme-text-primary);
    font-size: 12px;
}

.team-player-option small {
    color: var(--theme-text-secondary);
    font-size: 11px;
}

.quick-tournament-card {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    min-height: 0 !important;
    padding: 16px;
}

.quick-tournament-copy h2 {
    margin: 0;
    color: var(--theme-text-primary);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 600;
}

.quick-tournament-copy p {
    margin: 5px 0 0;
    color: var(--theme-text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.quick-tournament-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    align-items: center;
}

.quick-tournament-form input,
.quick-tournament-form select {
    width: 100%;
    min-height: 38px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #fff;
    color: var(--theme-text-primary);
    font-size: 13px;
}

.quick-tournament-form .btn-primary {
    width: 100%;
    min-width: 180px;
    white-space: nowrap;
}

.tournament-panel {
    padding: 14px;
    min-height: 360px;
}

.tournament-list-panel,
.match-list-panel {
    max-height: calc(100vh - 135px);
    overflow: auto;
}

.panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.panel-title-row h2,
.workspace-card h3 {
    margin: 0;
    color: var(--theme-text-primary);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
}

.tournaments-page .icon-btn,
.tournaments-page .btn-primary,
.tournaments-page .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid #ffe1b8;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tournaments-page .icon-btn {
    width: 38px;
    padding: 0;
    background: #f7f4f1;
    color: #ff8a00;
}

.tournaments-page .icon-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.tournaments-page .btn-primary {
    padding: 0 14px;
    background: #ff8a00;
    border-color: #ff8a00;
    color: #fff;
}

.tournaments-page .btn-secondary {
    padding: 0 12px;
    background: #f8f7f6;
    color: #d96f00;
}

.tournaments-page .btn-primary.small,
.tournaments-page .btn-secondary.small {
    min-height: 34px;
    font-size: 12px;
}

.tournaments-page .compact-form {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px;
    background: #f8f7f6;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
}

.tournaments-page .compact-form input,
.tournaments-page .compact-form select,
.tournaments-page .compact-form textarea,
.tournaments-page .lineup-form input,
.tournaments-page .lineup-form select,
.tournaments-page .event-form input,
.tournaments-page .event-form select,
.tournaments-page .event-form textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    font-size: 13px;
}

.tournaments-page .compact-form textarea,
.tournaments-page .event-form textarea {
    min-height: 58px;
    resize: vertical;
}

.form-grid-2,
.form-grid-3 {
    display: grid;
    gap: 8px;
}

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

.form-grid-3 {
    grid-template-columns: 1fr 1fr 92px;
}

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

.entity-item {
    width: 100%;
    display: grid;
    gap: 5px;
    padding: 11px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #f8f7f6;
    color: var(--theme-text-primary);
    text-align: left;
    cursor: pointer;
}

.entity-item.active {
    border-color: #ff8a00;
    background: #f7f4f1;
}

.entity-title {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
}

.entity-title b {
    font-weight: 600;
    color: #ff8a00;
}

.entity-meta,
.entity-bottom {
    color: var(--theme-text-secondary);
    font-size: 12px;
    line-height: 1.3;
}

.entity-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.empty-state,
.empty-cell {
    padding: 18px;
    border: 1px dashed var(--theme-border);
    border-radius: 8px;
    color: var(--theme-text-secondary);
    text-align: center;
    font-size: 13px;
}

.match-workspace {
    min-width: 0;
}

.tournaments-page [hidden] {
    display: none !important;
}

.workspace-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    color: var(--theme-text-secondary);
    border: 1px dashed var(--theme-border);
    border-radius: 8px;
}

.scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 8px;
    background: #f8f7f6;
    border: 1px solid var(--theme-border);
}

.score-team {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--theme-text-primary);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-team.left {
    justify-content: flex-end;
    text-align: center;
}

.score-team.right {
    justify-content: flex-start;
    text-align: center;
}

.score-team-name {
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--theme-text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.score-center {
    min-width: 160px;
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
}

.scoreboard span,
.score-center span {
    color: var(--theme-text-secondary);
    font-size: 12px;
}

.scoreboard strong {
    display: block;
    color: #ff8a00;
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
}

.status-pill {
    padding: 7px 10px;
    border-radius: 999px;
    background: #f7f4f1;
    color: #d96f00 !important;
    border: 1px solid #ffe1b8;
}

.workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 12px;
}

.workspace-grid.lineup-workspace {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-grid.lower {
    margin-top: 12px;
}

.workspace-grid.visual-row {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #fff;
}

.avatar-fallback {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-fallback {
    display: grid;
    place-items: center;
    background: #e4ddd6;
    color: #475569;
    font-size: 12px;
}

.timeline-item button {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.event-form {
    display: grid;
    gap: 8px;
}

.event-timeline {
    display: grid;
    gap: 8px;
    max-height: 240px;
    overflow: auto;
}

.timeline-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    background: #f8f7f6;
    border-left: 3px solid #ff8a00;
}

.timeline-item.goal {
    border-left-color: #16a34a;
}

.timeline-item.yellow-card {
    border-left-color: #ff8a00;
}

.timeline-item.red-card {
    border-left-color: #ef4444;
}

.timeline-item strong,
.timeline-item span,
.timeline-item small {
    display: block;
    font-size: 12px;
    line-height: 1.35;
}

.timeline-item strong {
    color: var(--theme-text-primary);
    font-weight: 600;
}

.timeline-item span,
.timeline-item small {
    color: var(--theme-text-secondary);
}

.analytics-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.analytics-summary span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f4f1ee;
    color: var(--theme-text-secondary);
    font-size: 12px;
}

.table-scroll {
    max-height: 310px;
    overflow: auto;
}

.tournament-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tournament-table th,
.tournament-table td {
    padding: 8px;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    text-align: left;
    font-weight: 400;
}

.tournament-table th {
    color: var(--theme-text-secondary);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #f8f7f6;
}

.tournament-table small {
    display: block;
    margin-top: 2px;
    color: var(--theme-text-secondary);
}

.compact-select {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #fff;
    color: var(--theme-text-primary);
    font-size: 12px;
}

.pitch-poster {
    min-height: 520px;
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 138, 0, .24), transparent 34%),
        linear-gradient(160deg, #06172f 0%, #0b2444 48%, #071426 100%);
    color: #fff;
    border: 1px solid #1e3a5f;
    position: relative;
}

.pitch-empty {
    min-height: 520px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
}

.pitch-title {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(15, 23, 42, .72);
    border-bottom: 1px solid rgba(125, 211, 252, .22);
}

.pitch-title-main {
    min-width: 178px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pitch-title-main span,
.pitch-title-main strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pitch-title-main span {
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

.pitch-title-main strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #38bdf8;
    font-size: 18px;
    letter-spacing: 0;
}

.pitch-title-logo {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
}

.pitch-title-controls {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(170px, 1.25fr) minmax(132px, .85fr) minmax(132px, .85fr) 64px 96px 38px 38px;
    gap: 8px;
    align-items: center;
}

.pitch-title-controls input,
.pitch-title-controls select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 8px;
    background: rgba(11, 31, 58, .82);
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    line-height: 40px;
}

.pitch-title-controls input::placeholder {
    color: rgba(255, 255, 255, .48);
}

.pitch-title-controls input:focus,
.pitch-title-controls select:focus {
    border-color: rgba(255, 138, 0, .72);
    background: rgba(13, 37, 70, .94);
    box-shadow: 0 0 0 2px rgba(255, 138, 0, .12);
    outline: none;
}

.pitch-icon-button {
    width: 38px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .9);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.pitch-icon-button:hover:not(:disabled) {
    background: rgba(255, 138, 0, .22);
    color: #ff8a00;
}

.pitch-icon-button:disabled {
    opacity: .34;
    cursor: default;
}

.pitch-lines {
    min-height: 462px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-around;
    gap: 8px;
    padding: 24px 18px;
    position: relative;
    background:
        linear-gradient(rgba(125, 211, 252, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .18) 1px, transparent 1px);
    background-size: 100% 50%, 50% 100%;
}

.pitch-lines::before,
.pitch-lines::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 72px;
    border: 1px solid rgba(125, 211, 252, .22);
    pointer-events: none;
}

.pitch-lines::before {
    bottom: 0;
    border-bottom: 0;
}

.pitch-lines::after {
    top: 0;
    border-top: 0;
}

.pitch-center-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 50%;
}

.pitch-row {
    display: grid;
    gap: 12px;
    align-items: center;
    justify-items: center;
    position: relative;
    z-index: 1;
}

.pitch-player {
    width: min(112px, 100%);
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
}

.pitch-player img,
.pitch-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(56, 189, 248, .75);
    background: #e4ddd6;
}

.pitch-avatar {
    display: grid;
    place-items: center;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
}

.pitch-player strong {
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(248, 250, 252, .92);
    color: #0f172a;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pitch-player span {
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    line-height: 1.2;
}

.lineup-board {
    display: block;
}

.lineup-stadium {
    width: 100%;
    min-height: 0;
    overflow: visible;
    margin: 0 auto;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 138, 0, .2), transparent 32%),
        linear-gradient(160deg, #071530 0%, #0b2444 50%, #06111f 100%);
    color: #fff;
}

.lineup-pitch-lines {
    width: min(760px, calc(100% - 28px));
    aspect-ratio: 7 / 9;
    min-height: 680px;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 36px 26px;
    margin: 14px auto;
    border: 2px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
    background:
        linear-gradient(180deg, transparent calc(50% - 1px), rgba(255, 255, 255, .22) calc(50% - 1px), rgba(255, 255, 255, .22) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 18%, transparent 82%, rgba(255, 255, 255, .06));
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lineup-pitch-lines::before,
.lineup-pitch-lines::after {
    width: 46%;
    height: 118px;
    border-color: rgba(255, 255, 255, .24);
}

.lineup-pitch-lines::before {
    bottom: 0;
}

.lineup-pitch-lines::after {
    top: 0;
}

.lineup-pitch-lines .pitch-center-circle {
    border-color: rgba(255, 255, 255, .22);
    width: 132px;
    height: 132px;
}

.lineup-pitch-lines.lineup-focus-mode {
    background:
        linear-gradient(rgba(3, 10, 24, .5), rgba(3, 10, 24, .5)),
        linear-gradient(180deg, transparent calc(50% - 1px), rgba(255, 255, 255, .2) calc(50% - 1px), rgba(255, 255, 255, .2) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 18%, transparent 82%, rgba(255, 255, 255, .06));
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lineup-slot {
    position: relative;
    width: min(112px, 100%);
    min-height: 96px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    padding: 6px;
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    outline: none;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    z-index: 5;
}

.lineup-slot.active {
    z-index: 90;
}

.lineup-pitch-lines.lineup-focus-mode .lineup-slot:not(.active) {
    opacity: .28;
    filter: saturate(.7);
}

.lineup-pitch-lines.lineup-focus-mode .lineup-slot.active {
    opacity: 1;
    filter: none;
}

.lineup-slot:hover,
.lineup-slot.active {
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 1px rgba(255, 138, 0, .55);
    transform: translateY(-1px);
}

.lineup-slot img,
.lineup-slot .pitch-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ff2b67;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
    background: #f8f7f6;
}

.lineup-avatar-wrap {
    position: relative;
    display: grid;
    place-items: center;
}

.lineup-event-badges {
    position: absolute;
    top: -7px;
    right: -9px;
    display: flex;
    gap: 3px;
    align-items: center;
}

.lineup-event-badge {
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: 999px;
    color: #fff;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.lineup-event-badge.goal {
    background: #16a34a;
}

.lineup-event-badge.yellow {
    background: #facc15;
    color: #1f2937;
}

.lineup-event-badge.red {
    background: #ef4444;
}

.lineup-slot.empty {
    color: rgba(255, 255, 255, .72);
}

.lineup-slot-plus {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 2px dashed rgba(255, 255, 255, .45);
    border-radius: 50%;
    color: #fff;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}

.lineup-slot strong {
    max-width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(8, 18, 45, .86);
    color: #fff;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lineup-system-logo {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain;
}

.lineup-slot.empty strong {
    background: transparent;
    color: rgba(255, 255, 255, .85);
}

.lineup-slot span:last-child {
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    line-height: 1.2;
}

.lineup-slot-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(5, 16, 35, .48);
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    opacity: .78;
    backdrop-filter: blur(5px);
}

.lineup-slot-remove:hover {
    background: rgba(5, 16, 35, .72);
    color: #fff;
    opacity: 1;
}

.lineup-event-panel {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    z-index: 120;
    width: min(250px, 74vw);
    display: grid;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(255, 138, 0, .45);
    border-radius: 10px;
    background: rgba(8, 18, 45, .96);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .34);
    transform: translateX(-50%);
    cursor: default;
}

.lineup-slot.panel-up .lineup-event-panel {
    top: auto;
    bottom: calc(100% + 8px);
}

.lineup-event-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, 1fr) 28px;
    gap: 6px;
}

.lineup-event-actions button,
.lineup-event-form button {
    min-height: 30px !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .1) !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.lineup-event-actions button.active,
.lineup-event-form button {
    background: #ff8a00 !important;
    color: #fff !important;
}

.lineup-event-actions button[data-close-lineup-event],
.lineup-event-actions button[data-close-lineup-event]:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    width: 28px !important;
    min-width: 28px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(5, 16, 35, .64) !important;
    color: rgba(255, 255, 255, .78) !important;
    box-shadow: none !important;
}

.lineup-event-actions button[data-close-lineup-event]:hover,
.lineup-event-actions button[data-close-lineup-event]:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn):hover {
    background: rgba(5, 16, 35, .86) !important;
    color: #fff !important;
}

.lineup-event-form {
    display: grid;
    gap: 6px;
}

.lineup-event-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px;
    gap: 6px;
}

.lineup-event-form input,
.lineup-event-form select,
.lineup-event-form textarea {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 7px;
    background: rgba(255, 255, 255, .95);
    color: #17191f;
    font-size: 11px;
}

.lineup-event-form textarea {
    resize: vertical;
}

.lineup-player-popover {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #fff;
}

.lineup-picker-modal .modal-content {
    max-width: 760px;
    min-height: 620px;
    max-height: 88vh;
}

.lineup-picker-modal .modal-body-scrollable {
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.lineup-modal-search {
    flex: 0 0 auto;
    width: 100%;
    min-height: 38px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #fff;
    color: var(--theme-text-primary);
    font-size: 13px;
}

.lineup-popover-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--theme-border);
}

.lineup-popover-head strong {
    color: #ff8a00;
    font-size: 12px;
    font-weight: 600;
}

.lineup-popover-head span {
    min-width: 0;
    overflow: hidden;
    color: var(--theme-text-secondary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lineup-popover-head button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #5f6673;
    cursor: pointer;
}

.lineup-popover-list {
    display: grid;
    gap: 12px;
    height: 100%;
    max-height: none;
    overflow: auto;
    padding: 10px;
}

.lineup-alpha-group {
    display: grid;
    gap: 8px;
}

.lineup-alpha-group h3 {
    position: sticky;
    top: -10px;
    z-index: 1;
    margin: 0;
    padding: 5px 2px;
    background: #fff;
    color: #ff8a00;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}

.lineup-alpha-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.lineup-player-choice {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #f8f7f6;
    color: var(--theme-text-primary);
    text-align: left;
    cursor: pointer;
}

.lineup-player-choice:hover {
    border-color: #ff8a00;
    background: #fffaf4;
}

.lineup-player-choice img,
.lineup-player-choice .avatar-fallback {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.lineup-player-choice strong,
.lineup-player-choice small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lineup-player-choice strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
}

.lineup-player-choice small {
    margin-top: 2px;
    color: var(--theme-text-secondary);
    font-size: 11px;
}

.bracket-board {
    min-height: 300px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 10px;
}

.bracket-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

.bracket-column h4 {
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bracket-match {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 4px 8px;
    align-items: center;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: #f8f7f6;
    color: var(--theme-text-primary);
    cursor: pointer;
    text-align: left;
}

.bracket-card {
    margin-top: 12px;
}

.bracket-match::after {
    content: "";
    position: absolute;
    right: -11px;
    top: 50%;
    width: 10px;
    border-top: 1px solid #d8d0c8;
}

.bracket-column:last-child .bracket-match::after {
    display: none;
}

.bracket-match.active {
    border-color: #ff8a00;
    background: #f7f4f1;
}

.bracket-match span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.bracket-team-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bracket-team-logo {
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

.bracket-match strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: #ff8a00;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 1280px) {
    .quick-tournament-card {
        grid-template-columns: 1fr;
    }

    .tournament-layout {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .tournaments-page {
        padding: 12px;
    }

    .tournament-topbar,
    .tournament-actions,
    .tournament-tabs {
        align-items: stretch;
        flex-direction: column;
    }

    .tournament-actions,
    .tournament-select,
    .tournament-tabs button {
        width: 100%;
        max-width: none;
    }

    .tournament-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .quick-tournament-card {
        gap: 12px;
    }

    .tournament-layout,
    .workspace-grid,
    .workspace-grid.visual-row,
    .form-grid-2,
    .form-grid-3,
    .lineup-form {
        grid-template-columns: 1fr;
    }

    .pitch-title {
        align-items: stretch;
        flex-direction: column;
    }

    .pitch-title-controls {
        grid-template-columns: 1fr 1fr;
    }

    .pitch-title-controls input[type="search"] {
        grid-column: 1 / -1;
    }

    .tournament-list-panel,
    .match-list-panel {
        max-height: none;
    }

    .tournament-sidebar-panel {
        position: static;
        min-height: auto;
        max-height: none;
    }

    .tournament-list {
        max-height: 260px;
    }
}

/* Final OK-style cascade guard: keep the quiet system above old page-specific rules. */
body,
.main-content,
.game-main-content,
.tournaments-page,
.settings-page,
.finances-page,
.users-page {
    background: var(--theme-bg-primary) !important;
    font-family: var(--ui-font-family) !important;
}

.tournament-header,
.tournament-panel,
.workspace-card,
.settings-card,
.data-table,
.entity-item,
.modal-content,
.sidebar,
.sidebar-user-card {
    border-color: var(--theme-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}

.btn-primary,
.btn-success,
.game-btn-primary,
.settings-page .btn-primary,
.finances-page .btn-primary,
.users-page .btn-primary,
.tournaments-page .btn-primary {
    background: var(--ui-accent) !important;
    border-color: var(--ui-accent) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover,
.game-btn-primary:hover,
.settings-page .btn-primary:hover,
.finances-page .btn-primary:hover,
.users-page .btn-primary:hover,
.tournaments-page .btn-primary:hover {
    background: var(--ui-accent-hover) !important;
    border-color: var(--ui-accent-hover) !important;
}

.btn-secondary,
.icon-btn,
.tournaments-page .btn-secondary {
    background: #f2efec !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text-primary) !important;
}

.data-table th,
.tournament-table th,
.access-table th {
    background: var(--theme-table-header-bg) !important;
    color: var(--theme-text-secondary) !important;
    font-size: 11px !important;
    text-transform: none !important;
}

.data-table td,
.tournament-table td,
.access-table td,
input,
select,
textarea {
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Tournament modal form polish: modals live outside .tournaments-page. */
.tournament-modal .modal-content {
    width: min(640px, calc(100vw - 32px)) !important;
    max-height: min(88vh, 760px) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
}

.tournament-modal .modal-content.wide {
    width: min(900px, calc(100vw - 32px)) !important;
}

.tournament-modal .modal-header-fixed {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--theme-border) !important;
    background: #fff !important;
}

.tournament-modal .modal-header-fixed h2 {
    margin: 0 !important;
    color: var(--theme-text-primary) !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

.tournament-modal .modal-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.tournament-modal .modal-header-actions .btn-primary,
.tournament-modal .modal-header-actions .btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 116px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
}

.tournament-modal .modal-body-scrollable {
    padding: 18px 20px 22px !important;
    background: #fff !important;
}

.tournament-modal .compact-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.tournament-modal .form-grid-2,
.tournament-modal .form-grid-3 {
    display: grid !important;
    gap: 12px !important;
    align-items: start !important;
}

.tournament-modal .form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.tournament-modal .form-grid-3 {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 96px !important;
}

.tournament-modal input,
.tournament-modal select,
.tournament-modal textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--theme-text-primary) !important;
    font-family: var(--ui-font-family) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    outline: none !important;
}

.tournament-modal input::placeholder,
.tournament-modal textarea::placeholder {
    color: var(--theme-text-muted) !important;
}

.tournament-modal input:focus,
.tournament-modal select:focus,
.tournament-modal textarea:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 3px rgba(255, 138, 0, .12) !important;
}

.tournament-modal textarea {
    min-height: 86px !important;
    padding: 10px 12px !important;
    resize: vertical !important;
}

.tournament-modal select[multiple] {
    min-height: 142px !important;
    padding: 8px !important;
    overflow: auto !important;
}

.tournament-modal select[multiple] option {
    padding: 7px 8px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}

.tournament-modal select[multiple] option:checked {
    background: #fff3e3 linear-gradient(#fff3e3, #fff3e3) !important;
    color: var(--theme-text-primary) !important;
}

.tournament-modal .team-player-picker {
    margin-top: 2px !important;
    padding: 8px !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 10px !important;
    background: var(--theme-bg-secondary) !important;
}

.tournament-modal .team-player-option {
    border-color: var(--theme-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
}

@media (max-width: 720px) {
    .tournament-modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .tournament-modal .modal-content,
    .tournament-modal .modal-content.wide {
        width: 100% !important;
        max-height: 92dvh !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .tournament-modal .modal-header-fixed {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .tournament-modal .modal-header-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .tournament-modal .modal-header-actions .btn-primary,
    .tournament-modal .modal-header-actions .btn-secondary {
        min-width: 0 !important;
    }

    .tournament-modal .modal-body-scrollable {
        padding: 14px 16px 18px !important;
    }

    .tournament-modal .form-grid-2,
    .tournament-modal .form-grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* App-wide OK-style cleanup. Keep this last to neutralize legacy blue/purple UI islands. */
:root,
body.theme-light {
    --theme-bg-primary: #f5f3f1 !important;
    --theme-bg-secondary: #ffffff !important;
    --theme-bg-tertiary: #f8f7f6 !important;
    --theme-text-primary: #17191f !important;
    --theme-text-secondary: #5f6673 !important;
    --theme-text-tertiary: #8b93a1 !important;
    --theme-text-muted: #8b93a1 !important;
    --theme-border: #e8e3de !important;
    --theme-card-bg: #ffffff !important;
    --theme-input-bg: #ffffff !important;
    --theme-input-border: #ddd7d1 !important;
    --theme-table-bg: #ffffff !important;
    --theme-table-header-bg: #f8f7f6 !important;
    --theme-table-border: #eee9e4 !important;
    --theme-sidebar-bg: #ffffff !important;
    --theme-sidebar-hover: #f2efec !important;
    --ui-accent: #ff8a00 !important;
    --ui-accent-hover: #d96f00 !important;
    --ui-accent-soft: #fff3e3 !important;
    --ui-radius: 10px !important;
    --ui-radius-sm: 8px !important;
}

html,
body,
.main-content,
.game-main-content,
.dashboard-container,
.settings-page,
.finances-page,
.users-page,
.tournaments-page,
.attendance-page,
.access-log-page,
.cash-page,
.expenses-page,
.tariffs-page {
    background: var(--theme-bg-primary) !important;
    color: var(--theme-text-primary) !important;
    font-family: var(--ui-font-family) !important;
    letter-spacing: 0 !important;
}

h1,
h2,
h3,
h4,
.page-title,
.section-title,
.modal-title,
.panel-title,
.card-title,
.settings-card-title,
.panel-title-row h2,
.workspace-card h3 {
    color: var(--theme-text-primary) !important;
    font-family: var(--ui-font-family) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

h1,
.page-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
}

h2,
.section-title,
.modal-header-fixed h2,
.modal-header h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
}

h3,
.card-title,
.panel-title,
.settings-card-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
}

p,
label,
small,
.hint,
.description,
.subtitle,
.modal-subtitle,
.empty-state,
.table-subtitle {
    color: var(--theme-text-secondary) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

.card,
.stat-card,
.form-card,
.settings-card,
.workspace-card,
.tournament-panel,
.dashboard-card,
.analytics-card,
.payment-card,
.month-payment-card,
.recognition-panel,
.access-card,
.filter-panel,
.table-container,
.data-table,
.simple-modal,
.modern-modal,
.modal-content,
.entity-item,
.student-card,
.group-card,
.lesson-card,
.today-card,
.camera-panel,
.video-card,
.cash-card,
.expense-card,
.tariff-card {
    background: var(--theme-card-bg) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
    color: var(--theme-text-primary) !important;
}

.card:hover,
.stat-card:hover,
.form-card:hover,
.settings-card:hover,
.workspace-card:hover,
.entity-item:hover,
.student-card:hover,
.group-card:hover,
.lesson-card:hover,
.month-payment-card:hover {
    box-shadow: none !important;
    transform: none !important;
}

.modal,
.modal-overlay,
.filter-modal-overlay,
[id$="Modal"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal,
.filter-modal-overlay,
.mobile-more-overlay,
[id$="Modal"][style*="display: flex"],
[id$="Modal"][style*="display: block"] {
    background: rgba(23, 25, 31, .48) !important;
}

.modal-content,
.simple-modal,
.modern-modal,
.add-student-modal-content,
.edit-student-modal-content,
.payment-modal-content,
.filter-bottom-sheet,
.mobile-more-menu {
    width: min(680px, calc(100vw - 32px)) !important;
    max-height: min(90vh, 780px) !important;
    margin: 32px auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.add-student-modal-content,
.edit-student-modal-content,
.modal-content.wide,
.modal-content.modern-modal {
    width: min(1080px, calc(100vw - 32px)) !important;
}

.modal-header,
.modal-header-fixed,
.filter-bottom-sheet-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--theme-border) !important;
}

.modal-body,
.modal-body-scrollable,
.filter-bottom-sheet-content {
    padding: 18px 20px 22px !important;
    background: #fff !important;
    color: var(--theme-text-primary) !important;
}

.modal-footer {
    padding: 14px 20px 18px !important;
    background: #fff !important;
    border-top: 1px solid var(--theme-border) !important;
    border-radius: 0 !important;
}

.modal-close,
.filter-bottom-sheet-close,
.mobile-more-close,
.close-btn,
.close,
button[aria-label="Close"],
button[aria-label="Закрыть"] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 50% !important;
    background: #f8f7f6 !important;
    color: var(--theme-text-secondary) !important;
    box-shadow: none !important;
}

.modal-close:hover,
.filter-bottom-sheet-close:hover,
.mobile-more-close:hover,
.close-btn:hover,
.close:hover {
    background: var(--ui-accent-soft) !important;
    color: var(--ui-accent) !important;
    transform: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea,
.form-input,
.form-select,
.form-textarea,
.form-input-modern,
.search-input,
.filter-input,
.date-input,
[contenteditable="true"] {
    width: 100%;
    min-height: 40px !important;
    padding: 9px 12px !important;
    border: 1px solid var(--theme-input-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: #fff !important;
    color: var(--theme-text-primary) !important;
    font-family: var(--ui-font-family) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

textarea {
    min-height: 86px !important;
    resize: vertical !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--theme-text-tertiary) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
select:focus,
textarea:focus,
.form-input-modern:focus,
.search-input:focus,
.filter-input:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 3px rgba(255, 138, 0, .12) !important;
}

.form-group,
.input-group,
.field-group,
.form-row,
.filters-row,
.filter-row {
    gap: 10px !important;
}

button,
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-small,
.btn-large,
.btn-ghost,
.game-btn-primary,
.submit-btn,
.save-btn,
.action-btn,
.filter-btn,
.add-btn {
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: none !important;
    font-family: var(--ui-font-family) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}

.btn-primary,
.btn-success,
.btn-info,
.game-btn-primary,
.submit-btn,
.save-btn,
.add-btn,
button[type="submit"],
button.primary {
    background: var(--ui-accent) !important;
    border-color: var(--ui-accent) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.game-btn-primary:hover,
.submit-btn:hover,
.save-btn:hover,
.add-btn:hover,
button[type="submit"]:hover,
button.primary:hover {
    background: var(--ui-accent-hover) !important;
    border-color: var(--ui-accent-hover) !important;
    color: #fff !important;
    transform: none !important;
}

.btn-secondary,
.btn-ghost,
.filter-btn,
button.secondary,
button[type="button"]:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn):not(.pitch-icon-button) {
    background: #f8f7f6 !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text-primary) !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
.filter-btn:hover,
button.secondary:hover {
    background: var(--ui-accent-soft) !important;
    border-color: #ffc978 !important;
    color: var(--ui-accent) !important;
    transform: none !important;
}

.btn-danger,
.delete-btn,
.remove-btn,
.logout-btn {
    background: #fff5f5 !important;
    border-color: #ffd8d8 !important;
    color: #d92d20 !important;
}

.btn-danger:hover,
.delete-btn:hover,
.remove-btn:hover,
.logout-btn:hover {
    background: #ffe8e8 !important;
    border-color: #ffc4c4 !important;
    color: #b42318 !important;
    transform: none !important;
}

.data-table,
.tournament-table,
.access-table {
    background: #fff !important;
    border: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}

.data-table thead,
.tournament-table thead,
.access-table thead {
    background: var(--theme-table-header-bg) !important;
}

.data-table th,
.tournament-table th,
.access-table th {
    background: var(--theme-table-header-bg) !important;
    color: var(--theme-text-secondary) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.data-table td,
.tournament-table td,
.access-table td {
    color: var(--theme-text-primary) !important;
    border-bottom: 1px solid var(--theme-table-border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.data-table tbody tr,
.tournament-table tbody tr,
.access-table tbody tr {
    background: #fff !important;
}

.data-table tbody tr:hover,
.tournament-table tbody tr:hover,
.access-table tbody tr:hover {
    background: #fffaf5 !important;
}

.badge,
.status-badge,
.status-pill,
.user-status-badge,
.access-status,
.balance-badge,
.role-badge,
.tag,
.chip,
.pill {
    border-radius: 999px !important;
    background: #f8f7f6 !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.badge.active,
.status-badge.active,
.status-pill.active,
.user-status-badge.active,
.access-status.active,
.badge.paid,
.status-badge.paid,
.status-pill.paid,
.user-status-badge.paid,
.status-active {
    background: #eaf8ef !important;
    border-color: #d4f0dd !important;
    color: #20894d !important;
}

.badge.warning,
.status-badge.warning,
.status-pill.warning,
.user-status-badge.warning,
.badge.partial,
.status-badge.partial,
.status-pill.partial,
.user-status-badge.partial,
.status-pending {
    background: #fff7e8 !important;
    border-color: #ffe1ad !important;
    color: #a85d00 !important;
}

.badge.danger,
.status-badge.danger,
.status-pill.danger,
.user-status-badge.danger,
.badge.unpaid,
.status-badge.unpaid,
.status-pill.unpaid,
.user-status-badge.unpaid,
.status-inactive,
.status-danger {
    background: #fff0f0 !important;
    border-color: #ffd6d6 !important;
    color: #c02626 !important;
}

.tabs,
.tab-nav,
.nav-tabs,
.tournament-tabs,
.segmented-control {
    background: #fff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}

.tabs button,
.tab-button,
.nav-tab,
.tournament-tabs button,
.segmented-control button {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--theme-text-secondary) !important;
    font-weight: 500 !important;
}

.tabs button.active,
.tab-button.active,
.nav-tab.active,
.tournament-tabs button.active,
.segmented-control button.active {
    background: var(--ui-accent-soft) !important;
    border-color: #ffc978 !important;
    color: var(--ui-accent) !important;
}

::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: #f2efec !important;
}

::-webkit-scrollbar-thumb {
    background: #d8d0c8 !important;
    border-radius: 999px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #c9bfb6 !important;
}

@media (max-width: 760px) {
    .modal-content,
    .simple-modal,
    .modern-modal,
    .add-student-modal-content,
    .edit-student-modal-content,
    .payment-modal-content,
    .filter-bottom-sheet,
    .mobile-more-menu {
        width: 100% !important;
        max-height: 92dvh !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal-header,
    .modal-header-fixed,
    .filter-bottom-sheet-header {
        padding: 16px !important;
    }

    .modal-body,
    .modal-body-scrollable,
    .filter-bottom-sheet-content {
        padding: 14px 16px 18px !important;
    }
}

/* Visual audit fixes: keep legacy layouts readable after the global cleanup. */
:root,
body.theme-light {
    --ui-accent: #d96f00 !important;
    --ui-accent-hover: #a85400 !important;
    --ui-accent-soft: #fff3e3 !important;
}

.btn-primary,
.btn-success,
.btn-info,
.game-btn-primary,
.submit-btn,
.save-btn,
.add-btn,
button[type="submit"],
button.primary {
    background: var(--ui-accent) !important;
    border-color: var(--ui-accent) !important;
    color: #fff !important;
}

.tabs button.active,
.tab.active,
.tab-button.active,
.nav-tab.active,
.settings-tab.active,
.tournament-tabs button.active,
.segmented-control button.active {
    background: var(--ui-accent-soft) !important;
    border-color: #ffc978 !important;
    color: #8f3600 !important;
}

.game-top-bar {
    max-width: 100% !important;
    overflow: hidden !important;
}

.game-top-bar .tabs,
.game-top-bar .settings-tabs,
.settings-tabs,
.tabs {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: thin !important;
}

.game-top-bar .tabs,
.game-top-bar .settings-tabs {
    flex-wrap: nowrap !important;
}

table thead,
table thead tr,
.data-table thead,
.data-table thead tr,
.tournament-table thead,
.tournament-table thead tr,
.access-table thead,
.access-table thead tr {
    color: var(--theme-text-secondary) !important;
}

.student-details-placeholder .placeholder-icon,
.student-photo-placeholder-main .placeholder-icon {
    font-size: 42px !important;
    line-height: 1 !important;
}

.student-group-schedule-chips,
.group-schedule-chip,
.group-schedule-chip span,
.group-schedule-chip strong {
    color: var(--theme-text-secondary) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

.group-schedule-chip {
    background: #f8f7f6 !important;
    border: 1px solid var(--theme-border) !important;
}

.camera-dashboard {
    grid-template-columns: minmax(0, 1fr) 380px !important;
    width: 100% !important;
    max-width: 1800px !important;
    min-width: 0 !important;
}

.camera-dashboard .video-section,
.camera-dashboard .video-card,
.camera-dashboard .result-card,
.camera-dashboard .sidebar-section {
    min-width: 0 !important;
}

.camera-dashboard .video-card {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #000 !important;
}

.camera-dashboard .video-controls-overlay {
    max-width: calc(100% - 40px) !important;
    overflow-x: auto !important;
}

@media (max-width: 900px) {
    .camera-dashboard {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: calc(100vh - 78px) !important;
        padding: 12px !important;
        gap: 12px !important;
    }

    .camera-dashboard .video-card {
        min-height: 220px !important;
    }

    .camera-dashboard .video-controls-overlay {
        position: static !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        max-width: none !important;
        margin-top: 10px !important;
        background: #17191f !important;
        opacity: 1 !important;
    }

    .camera-dashboard .quality-group {
        flex-wrap: wrap !important;
    }

    .camera-dashboard .sidebar-section {
        min-height: 260px !important;
    }
}

@media (max-width: 760px) {
    .main-content > table,
    #groupsTable {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    .page-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .page-header .btn-primary,
    .page-header .btn-success,
    .page-header button {
        width: 100% !important;
    }

    .staff-timesheet-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .staff-timesheet-header select,
    .staff-timesheet-header button {
        width: 100% !important;
    }
}

#addStudentModal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
#addStudentModal select,
#addStudentModal textarea,
#editStudentModal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
#editStudentModal select,
#editStudentModal textarea {
    height: auto !important;
    min-height: 38px !important;
    font-size: 13px !important;
}

.balance-badge,
.counter-badge,
.success-text,
.student-count,
tbody#groupsTableBody td span {
    color: #1f7a45 !important;
}

.empty-state,
.empty-message,
.salary-muted,
#todayList > div,
#ratingContent > div,
#recognitionResult {
    color: #6f7785 !important;
}

/* Repair over-broad cleanup: native controls and nested headers stay compact. */
input[type="checkbox"],
input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 3px !important;
    background: initial !important;
    color: initial !important;
    box-shadow: none !important;
    accent-color: #d96f00 !important;
    flex: 0 0 auto !important;
}

.settings-card-header,
.settings-section-header,
.card-header,
.panel-header,
.section-header,
.form-section-header {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.settings-section,
.form-section,
.settings-card,
.card,
.workspace-card,
.dashboard-card {
    border-radius: 10px !important;
}

.settings-card-title,
.settings-section-title,
.card-title,
.panel-title,
.section-title,
.workspace-card h3 {
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #17191f !important;
}

.settings-card-subtitle,
.settings-section-subtitle,
.card-subtitle,
.section-subtitle,
.modal-subtitle,
.description {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #5f6673 !important;
}

.settings-card-icon,
.settings-section-icon,
.card-icon,
.section-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #17191f !important;
    box-shadow: none !important;
}

.tabs,
.settings-tabs,
.tournament-tabs,
.users-tabs,
.nav-tabs,
.segmented-control {
    min-height: 40px !important;
}

.tabs button,
.tab,
.settings-tab,
.tournament-tabs button,
.tournament-tab,
.users-tab,
.nav-tab,
.tab-button,
.segmented-control button {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
}

.game-top-bar {
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
}

.game-top-bar .tabs button,
.game-top-bar .tab,
.game-top-bar .settings-tab,
.game-top-bar .nav-tab {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#main-settings-tab input[type="checkbox"],
.settings-tab-content input[type="checkbox"],
.settings-form .checkbox-label input[type="checkbox"],
.settings-section-content .checkbox-label input[type="checkbox"],
#settingsForm .checkbox-label input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    border-radius: 3px !important;
    accent-color: #ff8a00 !important;
}

/* Final palette pass: blue accent, warm OK-like background, flat text tabs. */
:root,
body.theme-light {
    --theme-bg-primary: #f4f1ee !important;
    --theme-bg-secondary: #ffffff !important;
    --theme-bg-tertiary: #f8f7f6 !important;
    --theme-card-bg: #ffffff !important;
    --theme-input-bg: #ffffff !important;
    --theme-border: #e4ddd6 !important;
    --theme-input-border: #d8d0c8 !important;
    --theme-table-header-bg: #f8f7f6 !important;
    --theme-table-border: #ece7e2 !important;
    --theme-sidebar-bg: #ffffff !important;
    --theme-sidebar-hover: #f2efec !important;
    --theme-text-primary: #17191f !important;
    --theme-text-secondary: #5f6673 !important;
    --theme-text-tertiary: #8b93a1 !important;
    --ui-accent: #ff8a00 !important;
    --ui-accent-hover: #d96f00 !important;
    --ui-accent-soft: #fff3e3 !important;
}

html,
body,
.main-content,
.game-main-content,
.game-layout,
.dashboard-container,
.settings-page,
.finances-page,
.users-page,
.tournaments-page,
.attendance-page,
.staff-timesheet-page,
.cash-page,
.expenses-page,
.tariffs-page {
    background: #f4f1ee !important;
    background-image: none !important;
}

body.theme-light .game-main-content,
body.theme-light .game-layout,
.game-main-content,
.game-layout {
    background: #f4f1ee !important;
    background-image: none !important;
}

body.settings-page,
body.settings-page .main-content,
body.settings-page .game-main-content,
body.settings-page .game-layout,
body.settings-page .settings-tab-content,
body.settings-page .settings-page,
body.settings-page .settings-main-card,
body.settings-page .game-layout > div[style*="overflow-y"] {
    background: #f4f1ee !important;
    background-color: #f4f1ee !important;
    background-image: none !important;
}

body.settings-page .settings-main-card,
body.settings-page .card.settings-main-card {
    background: #fff !important;
}

.sidebar-menu a,
.sidebar-menu button,
.mobile-nav-item,
.bottom-nav-item {
    color: #5f6673 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.sidebar-menu a.active,
.sidebar-menu button.active,
.bottom-nav-item.active {
    color: #17191f !important;
    background: #f2efec !important;
    font-weight: 600 !important;
}

.mobile-nav-item.active,
.mobile-nav-item.active svg {
    color: #ff8a00 !important;
    background: transparent !important;
    font-weight: 600 !important;
}

.tabs,
.settings-tabs,
.tournament-tabs,
.users-tabs,
.nav-tabs,
.tab-nav,
.segmented-control,
.game-top-bar .tabs,
.game-top-bar .settings-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ddd6 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.tournaments-page .tournament-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ddd6 !important;
    border-radius: 0 !important;
}

.tabs button,
.tab,
.settings-tab,
.tournament-tabs button,
.users-tab,
.nav-tab,
.tab-button,
.segmented-control button,
.game-top-bar .tabs button,
.game-top-bar .settings-tab,
.game-top-bar .tab {
    position: relative !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5f6673 !important;
    font-size: 13px !important;
    line-height: 44px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.tournaments-page .tournament-tabs button {
    position: relative !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5f6673 !important;
    font-size: 13px !important;
    line-height: 44px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.tournaments-page .tournament-tab {
    position: relative !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5f6673 !important;
    font-size: 13px !important;
    line-height: 44px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.tabs button.active,
.tab.active,
.settings-tab.active,
.tab-button.active,
.nav-tab.active,
.users-tab.active,
.tournament-tabs button.active,
.tournament-tab.active,
.segmented-control button.active,
.game-top-bar .tabs button.active,
.game-top-bar .settings-tab.active,
.game-top-bar .tab.active {
    background: transparent !important;
    border: 0 !important;
    color: #ff8a00 !important;
    font-weight: 600 !important;
}

.tournaments-page .tournament-tabs button.active {
    background: transparent !important;
    border: 0 !important;
    color: #ff8a00 !important;
    font-weight: 600 !important;
}

.tournaments-page .tournament-tab.active {
    background: transparent !important;
    border: 0 !important;
    color: #ff8a00 !important;
    font-weight: 600 !important;
}

.tabs button.active::after,
.tab.active::after,
.settings-tab.active::after,
.tab-button.active::after,
.nav-tab.active::after,
.users-tab.active::after,
.tournament-tabs button.active::after,
.tournament-tab.active::after,
.segmented-control button.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    border-radius: 2px 2px 0 0 !important;
    background: #ff8a00 !important;
}

.tournaments-page .tournament-tabs button.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    border-radius: 2px 2px 0 0 !important;
    background: #ff8a00 !important;
}

.tournaments-page .tournament-tab.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    border-radius: 2px 2px 0 0 !important;
    background: #ff8a00 !important;
}

.tournaments-page .tournament-tabs button[type="button"].tournament-tab {
    background: transparent !important;
    border: 0 !important;
    color: #5f6673 !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 44px !important;
}

main.main-content.tournaments-page .tournament-tabs button[type="button"].tournament-tab {
    background: transparent !important;
    border: 0 !important;
    color: #5f6673 !important;
}

.tournaments-page .tournament-tabs button[type="button"].tournament-tab.active {
    background: transparent !important;
    border: 0 !important;
    color: #ff8a00 !important;
    font-weight: 600 !important;
}

main.main-content.tournaments-page .tournament-tabs button[type="button"].tournament-tab.active {
    background: transparent !important;
    border: 0 !important;
    color: #ff8a00 !important;
}

main.main-content.tournaments-page .tournament-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--theme-border) !important;
    border-radius: 0 !important;
    background: var(--theme-bg-secondary) !important;
    box-shadow: none !important;
}

main.main-content.tournaments-page .tournament-tabs button[type="button"].tournament-tab,
main.main-content.tournaments-page .tournament-tabs button[type="button"].tournament-tab:hover,
main.main-content.tournaments-page .tournament-tabs button[type="button"].tournament-tab.active {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.btn-primary,
.btn-success,
.btn-info,
.game-btn-primary,
.submit-btn,
.save-btn,
.add-btn,
button[type="submit"],
button.primary {
    background: #ff8a00 !important;
    border-color: #ff8a00 !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.game-btn-primary:hover,
.submit-btn:hover,
.save-btn:hover,
.add-btn:hover,
button[type="submit"]:hover,
button.primary:hover {
    background: #d96f00 !important;
    border-color: #d96f00 !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
    border-color: #ff8a00 !important;
    box-shadow: 0 0 0 3px rgba(255, 138, 0, .12) !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #ff8a00 !important;
}

::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: #f2efec !important;
}

::-webkit-scrollbar-thumb {
    background: #d8d0c8 !important;
    border: 2px solid #f2efec !important;
    border-radius: 999px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #c9bfb6 !important;
}

* {
    scrollbar-color: #d8d0c8 #f2efec !important;
    scrollbar-width: thin;
}

/* Keep legacy game pages on the warm OK-like surface. */
body.theme-light .main-content,
body.theme-light .main-content.game-main-content,
body.theme-light .game-main-content,
body.theme-light .game-layout,
body.settings-page .main-content.game-main-content,
body.finances-page .main-content.game-main-content,
body.users-page .main-content.game-main-content {
    background: #f4f1ee !important;
    background-color: #f4f1ee !important;
    background-image: none !important;
}

/* Final OK-style normalization: tabs, selects, headings and icon tone. */
.btn-plus {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

select,
.form-input-modern:is(select),
.modal-content select,
.form-group select,
.filter-group select,
.access-filters select,
.tournament-select,
.quick-tournament-form select,
.tournaments-page select,
.settings-page select,
.finances-page select,
.users-page select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    min-height: 36px !important;
    padding: 0 42px 0 12px !important;
    border: 1px solid #d8d0c8 !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%235f6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 14px !important;
    color: #17191f !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

select:focus,
.form-input-modern:is(select):focus,
.modal-content select:focus,
.form-group select:focus,
.filter-group select:focus,
.access-filters select:focus,
.tournament-select:focus,
.quick-tournament-form select:focus,
.tournaments-page select:focus,
.settings-page select:focus,
.finances-page select:focus,
.users-page select:focus {
    border-color: #ff8a00 !important;
    box-shadow: 0 0 0 3px rgba(255, 138, 0, .14) !important;
    outline: none !important;
}

select option {
    background: #fff !important;
    color: #17191f !important;
}

select option:checked {
    background: #fff3e3 !important;
    color: #17191f !important;
}

.tabs,
.settings-tabs,
.users-tabs,
.student-tabs,
.form-tabs,
.tournament-tabs,
.nav-tabs,
.tab-nav,
.segmented-control {
    border-radius: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ddd6 !important;
    box-shadow: none !important;
}

.tabs button,
.tab,
.settings-tab,
.users-tab,
.student-tab,
.form-tab,
.tournament-tab,
.nav-tab,
.tab-button,
.segmented-control button,
.form-tabs .tab,
.student-tabs .student-tab,
.form-tabs button[type="button"].form-tab {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5f6673 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 44px !important;
    box-shadow: none !important;
}

.modal .form-tabs button[type="button"].form-tab,
#addStudentModal .form-tabs button[type="button"].form-tab,
#editStudentModal .form-tabs button[type="button"].form-tab {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #5f6673 !important;
    box-shadow: none !important;
}

.tabs button.active,
.tab.active,
.settings-tab.active,
.users-tab.active,
.student-tab.active,
.form-tab.active,
.tournament-tab.active,
.nav-tab.active,
.tab-button.active,
.segmented-control button.active,
.student-tabs .student-tab.active,
.form-tabs button[type="button"].form-tab.active {
    background: transparent !important;
    border: 0 !important;
    color: #ff8a00 !important;
    font-weight: 600 !important;
}

.modal .form-tabs button[type="button"].form-tab.active,
#addStudentModal .form-tabs button[type="button"].form-tab.active,
#editStudentModal .form-tabs button[type="button"].form-tab.active {
    background: transparent !important;
    border: 0 !important;
    color: #ff8a00 !important;
    font-weight: 600 !important;
}

.tabs button.active::after,
.tab.active::after,
.settings-tab.active::after,
.users-tab.active::after,
.student-tab.active::after,
.form-tab.active::after,
.tournament-tab.active::after,
.nav-tab.active::after,
.tab-button.active::after,
.segmented-control button.active::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: #ff8a00 !important;
}

h1,
h2,
h3,
h4,
.modal-header-fixed h2,
.game-filter-header h3,
.info-group-title,
.settings-card-title,
.panel-title-row h2,
.workspace-card h3,
.tournament-header h1,
.section-title,
.card-title {
    color: #5f6673 !important;
    font-family: var(--ui-font-family) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

label,
.form-group label,
.game-filter-group label,
.info-item-label {
    color: #5f6673 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.settings-card-title svg,
.panel-title-row svg,
.workspace-card h3 svg,
.info-group-title svg,
.form-tab svg,
.student-tab svg,
.tab svg,
.settings-tab svg,
.users-tab svg,
.sidebar nav svg,
.lucide {
    color: #5f6673 !important;
    stroke: currentColor !important;
}

.settings-card-title .icon-box,
.panel-title-row .icon-box,
.section-title .icon-box,
.info-group-title .icon-box {
    border: 0 !important;
    background: transparent !important;
    color: #5f6673 !important;
}

/* Final polish for PWA menu, primary button icons, tags and sidebar tone. */
.btn-primary .btn-plus,
.btn-success .btn-plus,
.game-btn-primary .btn-plus,
.submit-btn .btn-plus,
.save-btn .btn-plus,
.add-btn .btn-plus,
button[type="submit"].btn-primary .btn-plus,
button.primary .btn-plus {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.btn-primary svg,
.btn-success svg,
.game-btn-primary svg,
.submit-btn svg,
.save-btn svg,
.add-btn svg,
button[type="submit"].btn-primary svg,
button.primary svg {
    color: #fff !important;
    stroke: currentColor !important;
}

.expense-category-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    max-width: 100% !important;
    padding: 0 8px 0 12px !important;
    border: 1px solid #e4ddd6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #17191f !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.expense-category-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-category-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #5f6673 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.expense-category-remove:hover {
    background: #fff3e3 !important;
    color: #dc2626 !important;
}

.sidebar-toggle {
    color: #8a9099 !important;
    background: #f8f7f6 !important;
    border-color: #e4ddd6 !important;
}

.sidebar-toggle svg {
    color: #8a9099 !important;
    stroke: currentColor !important;
}

.sidebar-toggle:hover {
    color: #5f6673 !important;
    background: #f2efec !important;
}

.sidebar-icon,
.sidebar nav a .sidebar-icon,
.sidebar-logout-btn .sidebar-icon {
    color: #6b7280 !important;
    stroke: currentColor !important;
}

.sidebar nav a.active .sidebar-icon,
.sidebar nav a.active[href*="finances"] .sidebar-icon {
    color: #5f6673 !important;
    stroke: currentColor !important;
}

.mobile-more-menu {
    border: 1px solid #e4ddd6 !important;
}

.more-menu-item {
    color: #5f6673 !important;
}

.more-menu-item .item-icon {
    box-shadow: none !important;
}

.settings-page .day-toggle-group {
    gap: 8px !important;
}

.settings-page .day-toggle,
.settings-page .day-toggle[type="button"]:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid #d8d0c8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #5f6673 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 38px !important;
    box-shadow: none !important;
    transform: none !important;
}

.settings-page .day-toggle:hover,
.settings-page .day-toggle[type="button"]:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn):hover {
    border-color: #ff8a00 !important;
    color: #ff8a00 !important;
    background: #fff8ef !important;
}

.settings-page .day-toggle.active,
.settings-page .day-toggle[type="button"].active:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    border-color: #ff8a00 !important;
    background: #ff8a00 !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28) !important;
}

.settings-page .day-toggle.active:hover,
.settings-page .day-toggle[type="button"].active:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn):hover {
    background: #d96f00 !important;
    border-color: #d96f00 !important;
    color: #fff !important;
}

.mobile-more-overlay .mobile-more-menu {
    left: 50% !important;
    width: calc(100% - 24px) !important;
    max-width: 430px !important;
    padding: 18px 18px calc(22px + env(safe-area-inset-bottom)) !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
}

.mobile-more-overlay .mobile-more-header {
    padding: 0 0 14px !important;
    margin-bottom: 18px !important;
}

.mobile-more-overlay .mobile-more-header h3 {
    color: #5f6673 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

.mobile-more-overlay .mobile-more-header button {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
}

.mobile-more-overlay .mobile-more-grid {
    gap: 14px !important;
}

.mobile-more-overlay .more-menu-item {
    min-width: 0 !important;
    padding: 0 !important;
}

.expense-category-chip button[type="button"].expense-category-remove,
.expense-category-chip button[type="button"].expense-category-remove:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #5f6673 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.expense-category-chip button[type="button"].expense-category-remove:hover {
    background: #fff3e3 !important;
    color: #dc2626 !important;
}

button.sidebar-toggle,
button[type="button"].sidebar-toggle:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    color: #8a9099 !important;
}

/* Final unified scrollbar and student modal tab polish. */
html,
body,
* {
    scrollbar-color: rgba(216, 208, 200, .46) transparent !important;
    scrollbar-width: thin !important;
}

::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background: transparent !important;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    min-height: 36px !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(216, 208, 200, .42) !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background: rgba(138, 144, 153, .45) !important;
    background-clip: padding-box !important;
}

.modal-content::-webkit-scrollbar,
.simple-modal::-webkit-scrollbar,
.modal-body-scrollable::-webkit-scrollbar,
.edit-student-modal-content::-webkit-scrollbar,
.add-student-modal-content::-webkit-scrollbar,
.student-list-content::-webkit-scrollbar,
.student-details-content::-webkit-scrollbar,
.history-list::-webkit-scrollbar,
.sidebar nav::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background: transparent !important;
}

.modal-content::-webkit-scrollbar-track,
.simple-modal::-webkit-scrollbar-track,
.modal-body-scrollable::-webkit-scrollbar-track,
.edit-student-modal-content::-webkit-scrollbar-track,
.add-student-modal-content::-webkit-scrollbar-track,
.student-list-content::-webkit-scrollbar-track,
.student-details-content::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track,
.sidebar nav::-webkit-scrollbar-track {
    background: transparent !important;
}

.modal-content::-webkit-scrollbar-thumb,
.simple-modal::-webkit-scrollbar-thumb,
.modal-body-scrollable::-webkit-scrollbar-thumb,
.edit-student-modal-content::-webkit-scrollbar-thumb,
.add-student-modal-content::-webkit-scrollbar-thumb,
.student-list-content::-webkit-scrollbar-thumb,
.student-details-content::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb,
.sidebar nav::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(216, 208, 200, .42) !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
}

.modal-content::-webkit-scrollbar-thumb:hover,
.simple-modal::-webkit-scrollbar-thumb:hover,
.modal-body-scrollable::-webkit-scrollbar-thumb:hover,
.edit-student-modal-content::-webkit-scrollbar-thumb:hover,
.add-student-modal-content::-webkit-scrollbar-thumb:hover,
.student-list-content::-webkit-scrollbar-thumb:hover,
.student-details-content::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover,
.sidebar nav::-webkit-scrollbar-thumb:hover {
    background: rgba(138, 144, 153, .45) !important;
    background-clip: padding-box !important;
}

#addStudentModal .form-tabs,
#editStudentModal .form-tabs {
    gap: 14px !important;
    padding: 0 20px !important;
}

#addStudentModal .form-tabs button[type="button"].form-tab,
#editStudentModal .form-tabs button[type="button"].form-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    line-height: 44px !important;
}

#addStudentModal .form-tabs button[type="button"].form-tab svg,
#editStudentModal .form-tabs button[type="button"].form-tab svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    color: currentColor !important;
    stroke: currentColor !important;
}

.student-details-header .student-tabs,
.student-tabs {
    gap: 14px !important;
}

.student-tabs .student-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
}

.student-tabs .student-tab svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    color: currentColor !important;
    stroke: currentColor !important;
}

.stats-grid .stat-card {
    align-items: flex-start !important;
    gap: 9px !important;
}

.stat-card-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    flex: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #5f6673 !important;
    margin-top: 1px !important;
}

.stat-card-icon svg,
.stat-card-icon i {
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
    stroke: currentColor !important;
}

.stats-grid .stat-card h3 {
    margin: 0 0 3px !important;
    color: #5f6673 !important;
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.stats-grid .stat-number {
    color: #4f5867 !important;
    font-size: 16px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
}

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

.modal-header-fixed h2,
.modal-content h2,
.simple-modal h2,
.filter-bottom-sheet-header h3,
.game-filter-header h3 {
    color: #5f6673 !important;
    font-family: var(--ui-font-family) !important;
    font-size: 18px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

#incomeFilterToggleBtn,
#expenseFilterToggleBtn,
#cashFilterToggleBtn,
button[id$="FilterToggleBtn"] {
    width: 40px !important;
    min-width: 40px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
}

.filter-toggle-icon {
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
    stroke: currentColor !important;
}

.finances-page .balance-card-minimal {
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
    border-color: #e4ddd6 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.finances-page .balance-card-minimal>div {
    gap: 10px !important;
    align-items: flex-start !important;
}

.finances-page .balance-card-minimal>div>div:first-child {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5f6673 !important;
}

.finances-page .balance-card-minimal svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}

.finances-page .balance-card-minimal svg * {
    stroke: currentColor !important;
}

.finances-page .balance-label-minimal {
    color: #5f6673 !important;
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    margin-bottom: 3px !important;
}

.finances-page .balance-value-minimal,
.finances-page #cumulativeBalance {
    color: #111827 !important;
    font-family: var(--ui-font-family) !important;
    font-size: 22px !important;
    line-height: 26px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.finances-page .balance-breakdown {
    color: #5f6673 !important;
    font-size: 12px !important;
    line-height: 16px !important;
}

.finances-page #debtors-tab h2 {
    color: #5f6673 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
}

.finances-page .stat-card h3 {
    color: #5f6673 !important;
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.finances-page .stat-card .value {
    color: #4f5867 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
}

*:not(#app-scrollbar-override) {
    scrollbar-color: rgba(216, 208, 200, .46) transparent !important;
    scrollbar-width: thin !important;
}

*:not(#app-scrollbar-override)::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background: transparent !important;
}

*:not(#app-scrollbar-override)::-webkit-scrollbar-track,
*:not(#app-scrollbar-override)::-webkit-scrollbar-corner {
    background: transparent !important;
}

*:not(#app-scrollbar-override)::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(216, 208, 200, .42) !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
}

*:not(#app-scrollbar-override)::-webkit-scrollbar-thumb:hover,
*:not(#app-scrollbar-override)::-webkit-scrollbar-thumb:active {
    background: rgba(138, 144, 153, .45) !important;
    background-clip: padding-box !important;
}

.lineup-slot button[type="button"].lineup-slot-remove,
.lineup-slot button[type="button"].lineup-slot-remove:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(5, 16, 35, .48) !important;
    color: rgba(255, 255, 255, .72) !important;
    opacity: .78 !important;
    box-shadow: none !important;
}

.lineup-slot button[type="button"].lineup-slot-remove:hover,
.lineup-slot button[type="button"].lineup-slot-remove:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn):hover {
    background: rgba(5, 16, 35, .72) !important;
    color: #fff !important;
    opacity: 1 !important;
}

.lineup-picker-modal .modal-content {
    height: min(82vh, 720px) !important;
    max-height: calc(100vh - 48px) !important;
}

.lineup-picker-modal .modal-body-scrollable {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.lineup-picker-modal .lineup-player-popover {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.lineup-picker-modal .lineup-popover-head {
    flex: 0 0 auto !important;
}

.lineup-picker-modal .lineup-popover-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.lineup-slot .lineup-event-actions button[data-close-lineup-event],
.lineup-slot .lineup-event-actions button[data-close-lineup-event]:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    width: 28px !important;
    min-width: 28px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(5, 16, 35, .64) !important;
    color: rgba(255, 255, 255, .78) !important;
    box-shadow: none !important;
}

.lineup-slot .lineup-event-actions button[type="button"],
.lineup-slot .lineup-event-actions button[type="button"]:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 130 !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .86) !important;
    box-shadow: none !important;
}

.lineup-slot .lineup-event-actions button[type="button"].active,
.lineup-slot .lineup-event-actions button[type="button"].active:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    background: #ff8a00 !important;
    color: #fff !important;
}

.lineup-slot .lineup-event-actions button[type="button"][data-close-lineup-event],
.lineup-slot .lineup-event-actions button[type="button"][data-close-lineup-event]:not(.btn-danger):not(.delete-btn):not(.remove-btn):not(.logout-btn) {
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(5, 16, 35, .68) !important;
}

main.main-content.tournaments-page .tournament-tabs,
main.main-content.tournaments-page nav.tournament-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ddd6 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

main.main-content.tournaments-page .tournament-tabs button,
main.main-content.tournaments-page .tournament-tabs button[type="button"],
main.main-content.tournaments-page .tournament-tabs button[type="button"].tournament-tab,
main.main-content.tournaments-page .tournament-tabs button[type="button"].tournament-tab:hover,
main.main-content.tournaments-page .tournament-tabs button[type="button"].tournament-tab.active {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #5f6673 !important;
    font-size: 13px !important;
    line-height: 44px !important;
    font-weight: 400 !important;
}

main.main-content.tournaments-page .tournament-tabs button[type="button"].tournament-tab.active {
    color: #ff8a00 !important;
    font-weight: 600 !important;
}

/* Tournaments final layout: tabs are text controls, sidebar and tabs stay pinned while scrolling. */
main.main-content.tournaments-page {
    height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 22px 22px 32px !important;
}

main.main-content.tournaments-page .tournament-layout {
    align-items: start !important;
}

main.main-content.tournaments-page .tournament-sidebar-panel {
    position: sticky !important;
    top: 0 !important;
    z-index: 35 !important;
    align-self: start !important;
    max-height: calc(100vh - 44px) !important;
}

main.main-content.tournaments-page .tournament-tabs,
main.main-content.tournaments-page nav.tournament-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 45 !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ddd6 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

main.main-content.tournaments-page .tournament-tab,
main.main-content.tournaments-page .tournament-tab:hover,
main.main-content.tournaments-page .tournament-tab:focus,
main.main-content.tournaments-page .tournament-tab.active {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #5f6673 !important;
    font-size: 13px !important;
    line-height: 44px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

main.main-content.tournaments-page .tournament-tab.active {
    color: #ff8a00 !important;
    font-weight: 600 !important;
}

main.main-content.tournaments-page .tournament-tab.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: #ff8a00 !important;
}

@media (min-width: 861px) {
    main.main-content.tournaments-page {
        position: relative !important;
        box-sizing: border-box !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    main.main-content.tournaments-page .tournament-shell,
    main.main-content.tournaments-page .tournament-layout {
        display: block !important;
        min-width: 0 !important;
    }

    main.main-content.tournaments-page .tournament-sidebar-panel {
        position: fixed !important;
        left: 302px !important;
        top: 22px !important;
        bottom: 22px !important;
        width: 320px !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }

    body.sidebar-collapsed main.main-content.tournaments-page .tournament-sidebar-panel,
    body:has(.sidebar.collapsed) main.main-content.tournaments-page .tournament-sidebar-panel,
    .sidebar.collapsed ~ main.main-content.tournaments-page .tournament-sidebar-panel {
        left: 102px !important;
    }

    main.main-content.tournaments-page .tournament-list {
        max-height: calc(100vh - 124px) !important;
    }

    main.main-content.tournaments-page .tournament-content {
        width: auto !important;
        min-width: 0 !important;
        margin-left: 334px !important;
    }
}

main.main-content.tournaments-page .tournament-list-item,
main.main-content.tournaments-page .entity-item.match-item {
    position: relative !important;
    padding-right: 86px !important;
}

main.main-content.tournaments-page .tournament-team-card {
    position: relative !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
}

main.main-content.tournaments-page .tournament-card-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

main.main-content.tournaments-page .tournament-list-item > .tournament-card-actions,
main.main-content.tournaments-page .entity-item.match-item > .tournament-card-actions {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
}

main.main-content.tournaments-page .tournament-team-card > .tournament-card-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

main.main-content.tournaments-page .tournament-action-btn,
main.main-content.tournaments-page button.tournament-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 1px solid #e4ddd6 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .78) !important;
    color: #5f6673 !important;
    box-shadow: none !important;
}

main.main-content.tournaments-page .tournament-action-btn:hover {
    border-color: #ff8a00 !important;
    color: #ff8a00 !important;
    background: #fffaf4 !important;
}

main.main-content.tournaments-page .tournament-action-btn.danger:hover {
    border-color: #ffd0d0 !important;
    color: #dc2626 !important;
    background: #fff3f3 !important;
}