:root {
            color-scheme: light;
            --naop-body-bg: linear-gradient(140deg, #e3f2ff 0%, #f9fbff 52%, #eef1ff 100%);
            --naop-body-color: #f9fbff;
            --naop-surface: rgba(255, 255, 255, 0.95);
            --naop-surface-muted: rgba(255, 255, 255, 0.88);
            --naop-surface-subtle: rgba(240, 245, 255, 0.85);
            --naop-border: rgba(120, 139, 166, 0.28);
            --naop-border-strong: rgba(100, 116, 139, 0.4);
            --naop-text-primary: #0f172a;
            --naop-text-secondary: #1f2937;
            --naop-text-tertiary: #475569;
            --naop-text-muted: #64748b;
            --naop-overlay: rgba(15, 23, 42, 0.12);
            --naop-overlay-strong: rgba(15, 23, 42, 0.28);
            --naop-highlight: rgba(59, 130, 246, 0.16);
            --naop-accent: #2563eb;
            --naop-accent-strong: #1d4ed8;
            --naop-accent-border: rgba(37, 99, 235, 0.45);
            --naop-accent-rgb: 37, 99, 235;
        }

        html, body {
            min-height: 100vh;
            overflow-x: hidden;
        }

        body {
            background: transparent !important;
            background-color: transparent !important;
            background-image: none !important;
            color: var(--naop-text-primary) !important;
            transition: background-color 0.3s ease, background-image 0.4s ease, color 0.2s ease;
            position: relative;
        }

        body.theme-transition * {
            transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .bg-emerald-50,
        .bg-emerald-50\/40,
        .hover\:bg-emerald-50:hover {
            background-color: var(--naop-highlight) !important;
        }

        .bg-emerald-500,
        .hover\:bg-emerald-500:hover,
        .focus\:bg-emerald-500:focus,
        .active\:bg-emerald-500:active {
            background-color: var(--naop-accent) !important;
        }

        .bg-emerald-400,
        .hover\:bg-emerald-400:hover {
            background-color: var(--naop-accent-strong) !important;
        }

        .text-emerald-700,
        .text-emerald-600,
        .text-emerald-500,
        .text-emerald-400,
        .hover\:text-emerald-500:hover,
        .hover\:text-emerald-600:hover,
        .hover\:text-emerald-400:hover {
            color: var(--naop-accent-strong) !important;
        }

        .border-emerald-200,
        .border-emerald-300,
        .border-emerald-400,
        .border-emerald-500 {
            border-color: var(--naop-accent-border) !important;
        }

        .hover\:border-emerald-300:hover,
        .hover\:border-emerald-400:hover,
        .hover\:border-emerald-500:hover {
            border-color: var(--naop-accent) !important;
        }

        .focus\:border-emerald-400:focus,
        .focus\:border-emerald-300:focus,
        .focus\:border-emerald-500:focus {
            border-color: var(--naop-accent) !important;
        }

        .focus\:ring-emerald-300:focus,
        .focus\:ring-emerald-400:focus,
        .focus\:ring-emerald-500:focus,
        .ring-emerald-400,
        .ring-emerald-500 {
            --tw-ring-color: var(--naop-accent-border) !important;
        }

        .text-emerald-500 svg,
        .text-emerald-600 svg,
        .text-emerald-700 svg {
            color: inherit;
            fill: currentColor;
        }

        /* Стили для просроченных платежей (rose) - светлая тема */
        .bg-rose-50 {
            background-color: rgba(255, 241, 242, 0.85) !important;
        }

        .hover\:bg-rose-100:hover {
            background-color: rgba(255, 228, 230, 0.9) !important;
        }

        .text-rose-600 {
            color: #dc2626 !important;
        }

        .text-rose-500 {
            color: #ef4444 !important;
        }

        .border-rose-200,
        .border-rose-300 {
            border-color: rgba(254, 202, 202, 0.6) !important;
        }

        .hover\:border-rose-300:hover {
            border-color: rgba(252, 165, 165, 0.7) !important;
        }

        /* Стили для предупреждений (orange) - светлая тема */
        .bg-orange-50 {
            background-color: rgba(255, 247, 237, 0.85) !important;
        }

        .hover\:bg-orange-100:hover {
            background-color: rgba(255, 237, 213, 0.9) !important;
        }

        .text-orange-600 {
            color: #ea580c !important;
        }

        .text-orange-500 {
            color: #f97316 !important;
        }

        body[data-theme="dark"] {
            color-scheme: dark;
            --naop-body-bg: radial-gradient(130% 140% at 50% 5%, #040b1a 0%, #041025 55%, #010616 100%);
            --naop-body-color: #010616;
            --naop-text-primary: #e2e8f0;
            --naop-text-secondary: #c7d2fe;
            --naop-text-tertiary: #a5b4fc;
            --naop-text-muted: #7b8ba7;
            --naop-surface: rgba(10, 18, 36, 0.95);
            --naop-surface-muted: rgba(14, 24, 46, 0.88);
            --naop-surface-subtle: rgba(27, 38, 66, 0.7);
            --naop-border: rgba(71, 85, 105, 0.45);
            --naop-border-strong: rgba(148, 163, 184, 0.38);
            --naop-overlay: rgba(3, 11, 26, 0.55);
            --naop-overlay-strong: rgba(3, 11, 29, 0.72);
            --naop-highlight: rgba(96, 165, 250, 0.24);
            --naop-accent: #38bdf8;
            --naop-accent-strong: #0ea5e9;
            --naop-accent-border: rgba(56, 189, 248, 0.45);
            --naop-accent-rgb: 56, 189, 248;
        }

        body[data-theme="dark"] {
            background: transparent !important;
        }

        body[data-theme="dark"] .text-slate-900,
        body[data-theme="dark"] .text-slate-800,
        body[data-theme="dark"] h1,
        body[data-theme="dark"] h2,
        body[data-theme="dark"] h3,
        body[data-theme="dark"] h4,
        body[data-theme="dark"] h5 {
            color: var(--naop-text-primary) !important;
        }

        body[data-theme="dark"] .text-slate-700,
        body[data-theme="dark"] .text-slate-600 {
            color: var(--naop-text-secondary) !important;
        }

        body[data-theme="dark"] .text-slate-500,
        body[data-theme="dark"] .text-slate-400 {
            color: var(--naop-text-tertiary) !important;
        }

        body[data-theme="dark"] .text-rose-500,
        body[data-theme="dark"] .text-rose-600 {
            color: #fb7185 !important;
        }

        body[data-theme="dark"] .bg-white {
            background-color: var(--naop-surface) !important;
        }

        body[data-theme="dark"] .bg-white\/80 {
            background-color: var(--naop-surface-muted) !important;
        }

        body[data-theme="dark"] .bg-slate-50,
        body[data-theme="dark"] .bg-slate-50\/80,
        body[data-theme="dark"] .bg-slate-100 {
            background-color: var(--naop-surface-subtle) !important;
        }

        body[data-theme="dark"] .bg-emerald-50,
        body[data-theme="dark"] .bg-emerald-50\/40 {
            background-color: var(--naop-highlight) !important;
        }

        body[data-theme="dark"] .bg-rose-50 {
            background-color: rgba(251, 113, 133, 0.12) !important;
        }

        body[data-theme="dark"] .bg-orange-50 {
            background-color: rgba(251, 146, 60, 0.12) !important;
        }

        body[data-theme="dark"] .hover\:bg-orange-100:hover {
            background-color: rgba(251, 146, 60, 0.18) !important;
        }

        body[data-theme="dark"] .text-orange-600,
        body[data-theme="dark"] .text-orange-500 {
            color: #fb923c !important;
        }

        body[data-theme="dark"] .bg-amber-50,
        body[data-theme="dark"] .bg-amber-100 {
            background-color: rgba(251, 191, 36, 0.12) !important;
        }

        body[data-theme="dark"] .border-slate-200,
        body[data-theme="dark"] .border-slate-200\/80,
        body[data-theme="dark"] .border-slate-300 {
            border-color: var(--naop-border) !important;
        }

        body[data-theme="dark"] .border-emerald-200,
        body[data-theme="dark"] .border-emerald-300,
        body[data-theme="dark"] .border-emerald-400 {
            border-color: var(--naop-accent-border) !important;
        }

        body[data-theme="dark"] .border-amber-200,
        body[data-theme="dark"] .border-amber-300 {
            border-color: rgba(251, 191, 36, 0.35) !important;
        }

        body[data-theme="dark"] .border-rose-200,
        body[data-theme="dark"] .border-rose-300 {
            border-color: rgba(251, 113, 133, 0.35) !important;
        }

        body[data-theme="dark"] .shadow-sm,
        body[data-theme="dark"] .shadow {
            --tw-shadow: 0 20px 35px -15px rgba(2, 6, 23, 0.6);
            --tw-shadow-colored: 0 20px 35px -15px rgba(2, 6, 23, 0.6);
        }

        body[data-theme="dark"] .hover\:bg-emerald-50\/40:hover,
        body[data-theme="dark"] .hover\:bg-emerald-50:hover {
            background-color: var(--naop-highlight) !important;
        }

        body[data-theme="dark"] .hover\:text-emerald-500:hover,
        body[data-theme="dark"] .hover\:text-emerald-600:hover {
            color: var(--naop-accent-strong) !important;
        }

        body[data-theme="dark"] .hover\:border-emerald-300:hover,
        body[data-theme="dark"] .hover\:border-emerald-400:hover {
            border-color: var(--naop-accent) !important;
        }

        body[data-theme="dark"] .hover\:bg-blue-50:hover {
            background-color: rgba(59, 130, 246, 0.14) !important;
        }

        body[data-theme="dark"] .hover\:text-blue-600:hover {
            color: #60a5fa !important;
        }

        body[data-theme="dark"] .hover\:border-blue-400:hover {
            border-color: rgba(59, 130, 246, 0.6) !important;
        }

        body[data-theme="dark"] .hover\:bg-purple-50:hover {
            background-color: rgba(168, 85, 247, 0.14) !important;
        }

        body[data-theme="dark"] .hover\:text-purple-600:hover {
            color: #c084fc !important;
        }

        body[data-theme="dark"] .hover\:border-purple-400:hover {
            border-color: rgba(168, 85, 247, 0.6) !important;
        }

        body[data-theme="dark"] .hover\:bg-amber-50:hover {
            background-color: rgba(245, 158, 11, 0.14) !important;
        }

        body[data-theme="dark"] .hover\:text-amber-600:hover,
        body[data-theme="dark"] .hover\:text-amber-700:hover {
            color: #fbbf24 !important;
        }

        body[data-theme="dark"] .hover\:border-amber-400:hover {
            border-color: rgba(245, 158, 11, 0.6) !important;
        }

        body[data-theme="dark"] .hover\:bg-rose-50:hover {
            background-color: rgba(251, 113, 133, 0.14) !important;
        }

        body[data-theme="dark"] .hover\:text-rose-600:hover {
            color: #fb7185 !important;
        }

        body[data-theme="dark"] .hover\:border-rose-400:hover {
            border-color: rgba(251, 113, 133, 0.6) !important;
        }

        body[data-theme="dark"] .group\/close:hover {
            background-color: rgba(251, 113, 133, 0.14) !important;
            border-color: rgba(251, 113, 133, 0.5) !important;
            color: #fb7185 !important;
            box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.1), 0 4px 12px rgba(251, 113, 133, 0.2) !important;
        }

        body[data-theme="dark"] .bg-slate-900\/30,
        body[data-theme="dark"] .bg-slate-900\/40 {
            background-color: var(--naop-overlay) !important;
        }

        body[data-theme="dark"] .fixed.inset-0 > .bg-slate-900\/40 {
            background-color: var(--naop-overlay-strong) !important;
        }

        body[data-theme="dark"] input,
        body[data-theme="dark"] textarea,
        body[data-theme="dark"] select {
            background-color: rgba(15, 23, 42, 0.82) !important;
            border-color: var(--naop-border) !important;
            color: var(--naop-text-primary) !important;
        }

        body[data-theme="dark"] input::placeholder,
        body[data-theme="dark"] textarea::placeholder {
            color: var(--naop-text-tertiary) !important;
        }

        body[data-theme="dark"] table thead {
            background-color: rgba(30, 41, 59, 0.8) !important;
        }

        body[data-theme="dark"] table tbody tr {
            background-color: transparent;
        }

        body[data-theme="dark"] table tbody tr:hover {
            background-color: rgba(45, 212, 191, 0.12) !important;
        }

        body[data-theme="dark"] .divide-y > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--naop-border) !important;
        }

        body[data-theme="dark"] ::-webkit-scrollbar {
            height: 8px;
            width: 8px;
        }

        body[data-theme="dark"] ::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.5);
        }

        body[data-theme="dark"] ::-webkit-scrollbar-thumb {
            background: rgba(71, 85, 105, 0.8);
            border-radius: 9999px;
        }

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

        @media (max-width: 768px) {
            .tables-scroll {
                margin: 0;
                padding: 0;
                border-radius: 1.5rem;
            }
        }

        /* Анимации для кнопок */
        @keyframes btnPulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        @keyframes btnShake {
            0%, 100% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(-2px);
            }
            75% {
                transform: translateX(2px);
            }
        }

        @keyframes btnRotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes btnCloseSpin {
            0% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(90deg) scale(1.1);
            }
            100% {
                transform: rotate(180deg) scale(1);
            }
        }

        /* Анимация для круглых кнопок закрытия */
        .group\/close {
            position: relative;
            overflow: hidden;
            width: 2.5rem;
            height: 2.5rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .group\/close:hover {
            background-color: rgba(239, 68, 68, 0.1) !important;
            border-color: rgba(239, 68, 68, 0.3) !important;
            color: #dc2626 !important;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), 0 4px 12px rgba(239, 68, 68, 0.2) !important;
            animation: btnPulse 0.6s ease-in-out;
        }

        .group\/close:active {
            transform: rotate(90deg) scale(0.9);
            transition: transform 0.2s ease;
        }

        .group\/btn {
            position: relative;
            overflow: hidden;
        }

        .group\/btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.15;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }

        .group\/btn:active::before {
            width: 300px;
            height: 300px;
        }

        .group\/btn:hover {
            animation: btnPulse 0.6s ease-in-out;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        }

        /* Подсветка для кнопок редактирования (accent) */
        .group\/btn:hover.hover\:border-emerald-400 {
            box-shadow: 0 0 0 3px rgba(var(--naop-accent-rgb), 0.12), 0 4px 12px rgba(var(--naop-accent-rgb), 0.26) !important;
        }

        /* Подсветка для кнопок копирования/обновления (blue) */
        .group\/btn:hover.hover\:border-blue-400 {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(59, 130, 246, 0.3) !important;
        }

        /* Подсветка для кнопок шаринга (purple) */
        .group\/btn:hover.hover\:border-purple-400 {
            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1), 0 4px 12px rgba(168, 85, 247, 0.3) !important;
        }

        /* Подсветка для кнопок отзыва (amber) */
        .group\/btn:hover.hover\:border-amber-400 {
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1), 0 4px 12px rgba(245, 158, 11, 0.3) !important;
        }

        /* Подсветка для кнопок удаления (rose) */
        .group\/btn:hover.hover\:border-rose-400 {
            box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1), 0 4px 12px rgba(244, 63, 94, 0.3) !important;
        }

        .group\/btn:active {
            transform: scale(0.95) translateY(0);
            transition: transform 0.1s ease;
        }

        .group\/btn svg {
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        .group\/btn:hover svg {
            transform: scale(1.15) rotate(5deg);
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }

        /* Специальная анимация для кнопки удаления */
        .group\/btn:has(svg path[d*="M19 7l"]):hover svg,
        .group\/btn:has(svg path[d*="M6 7.5h12"]):hover svg {
            animation: btnShake 0.5s ease-in-out;
        }

        /* Специальная анимация для кнопки копирования */
        .group\/btn:has(svg path[d*="M8 16H6a2 2 0 01-2-2V6"]):active svg,
        .group\/btn:has(svg path[d*="M15.666 3.888"]):active svg {
            animation: btnRotate 0.5s ease-in-out;
        }

        /* Плавное появление при наведении на строку таблицы */
        tbody tr .group\/btn {
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        tbody tr:not(:hover) .group\/btn {
            opacity: 0.7;
        }

        tbody tr:hover .group\/btn {
            opacity: 1;
        }
        
        /* Показывать кнопки копирования только при наведении на строку */
        tbody tr .copy-btn {
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        
        tbody tr:hover .copy-btn {
            opacity: 1;
        }

        #ground {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 0;
            display: block;
            background: transparent;
        }

        #app {
            position: relative;
            z-index: 1;
            min-height: 100vh;
            width: 100%;
        }

        .tables-scroll {
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
            border-radius: 1rem;
            background: transparent;
            -webkit-overflow-scrolling: touch;
        }

        .tables-scroll table {
            width: 100%;
            min-width: 960px;
            border-collapse: separate;
            border-spacing: 0;
        }

        .tables-scroll table thead th:first-child {
            border-top-left-radius: 1rem;
        }

        .tables-scroll table thead th:last-child {
            border-top-right-radius: 1rem;
        }

        .tables-scroll table tbody tr:last-child td:first-child {
            border-bottom-left-radius: 1rem;
        }

        .tables-scroll table tbody tr:last-child td:last-child {
            border-bottom-right-radius: 1rem;
        }

        /* Белые/чёрные блоки должны быть полупрозрачными */
        #app .bg-white {
            background-color: var(--naop-surface) !important;
        }

        #app .bg-white\/80 {
            background-color: var(--naop-surface-muted) !important;
        }

        /* Обеспечиваем минимальную высоту для корректной работы водопада */
        body {
            min-height: 200vh;
        }

        /* Убираем верхний margin у space-y классов */
        .space-y-5 > :not([hidden]) ~ :not([hidden]),
        .space-y-4 > :not([hidden]) ~ :not([hidden]),
        .space-y-3 > :not([hidden]) ~ :not([hidden]),
        .space-y-8 > :not([hidden]) ~ :not([hidden]) {
            --tw-space-y-reverse: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        /* Отступ сверху для таблиц */
        .rounded-2xl.border.border-slate-200.bg-white.shadow-sm {
            margin-top: 1.5rem;
        }

        /* Отступ снизу для блока с табами и заголовком */
        section.space-y-8 > .flex.flex-col.gap-4 {
            margin-bottom: 1.5rem;
        }

        /* Скрытие app до полной загрузки Vue */
        [v-cloak] {
            display: none !important;
        }

        #app {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        #app.loaded {
            opacity: 1;
        }