:root {

            --dark-gray: #121212;

            --light-gray: #d0d7d9;

            --element-bg: #1a1a1a;

            --border-color: #2a2a2a;

            --hover-color: #2a2a2a;

            --glow-color: rgba(208, 215, 217, 0.1);

            --accent-color: #6ee7b7;

        }



        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        body {

            background-color: var(--dark-gray);

            color: var(--light-gray);

            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;

            font-size: 13px;

            overflow-x: hidden;

            position: relative;

            height: 100vh;

            overflow: hidden;

        }



        /* ПРЕЛОАДЕР */

        .preloader {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: var(--dark-gray);

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            z-index: 9999;

            transition: opacity 0.5s ease, visibility 0.5s ease;

        }



        .preloader.hidden {

            opacity: 0;

            visibility: hidden;

        }



        .astral-loader {

            position: relative;

            width: 120px;

            height: 120px;

        }



        .astral-loader-inner {

            position: absolute;

            width: 100%;

            height: 100%;

            border-radius: 50%;

            animation: astral-rotate 2s linear infinite;

        }



        .astral-loader-inner:nth-child(1) {

            border: 2px solid transparent;

            border-top: 2px solid var(--light-gray);

            border-right: 2px solid var(--light-gray);

            filter: drop-shadow(0 0 5px var(--light-gray));

        }



        .astral-loader-inner:nth-child(2) {

            border: 2px solid transparent;

            border-top: 2px solid rgba(208, 215, 217, 0.5);

            border-right: 2px solid rgba(208, 215, 217, 0.5);

            animation-direction: reverse;

            width: 80%;

            height: 80%;

            top: 10%;

            left: 10%;

        }



        .astral-loader-inner:nth-child(3) {

            border: 2px solid transparent;

            border-top: 2px solid rgba(208, 215, 217, 0.3);

            border-right: 2px solid rgba(208, 215, 217, 0.3);

            width: 60%;

            height: 60%;

            top: 20%;

            left: 20%;

            animation-duration: 1.5s;

        }



        .loader-center {

            position: absolute;

            width: 20px;

            height: 20px;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            background: radial-gradient(circle, var(--light-gray) 0%, transparent 70%);

            border-radius: 50%;

            filter: blur(2px);

            animation: pulse-center 1.5s ease-in-out infinite;

        }



        .loader-logo {

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            font-size: 24px;

            color: var(--light-gray);

            z-index: 3;

        }



        @keyframes astral-rotate {

            0% { transform: rotate(0deg); }

            100% { transform: rotate(360deg); }

        }



        @keyframes pulse-center {

            0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }

            50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }

        }



        /* САЙДБАР */

        .site-sidebar {

            position: fixed;

            left: 0;

            top: 0;

            width: 225px;

            height: 100vh;

            background-color: var(--dark-gray);

            border-right: 1px solid var(--border-color);

            padding: 20px 0;

            display: flex;

            flex-direction: column;

            z-index: 999;

            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);

        }



        .sidebar-header {

            padding: 25px 15px;

            text-align: center;

            border-bottom: 1px solid var(--border-color);

            margin-bottom: 20px;

        }



        .logo-container {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            gap: 8px;

        }



        .logo-icon {

            position: relative;

            width: 70px;

            height: 70px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 5px;

        }



        .logo-icon i {

            font-size: 42px;

            color: #ffffff;

            position: relative;

            z-index: 2;

            text-shadow: 0 0 15px rgba(255, 255, 255, 0.25);

        }



        .logo-text {

            font-size: 22px;

            font-weight: 650;

            color: var(--light-gray);

            letter-spacing: 0.5px;

            margin-top: 8px;

            text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);

        }



        .logo-version {

            font-size: 14px;

            color: #888;

            font-weight: 500;

            letter-spacing: 1.5px;

            margin-top: 2px;

            opacity: 0.95;

        }



        .sidebar-menu {

            list-style: none;

            flex-grow: 1;

        }



        .menu-item {

            padding: 12px 15px;

            display: flex;

            align-items: center;

            cursor: pointer;

            color: var(--light-gray);

            font-size: 15px;

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden;

        }



        .menu-item:before {

            content: '';

            position: absolute;

            left: 0;

            top: 0;

            height: 100%;

            width: 4px;

            background-color: var(--light-gray);

            transform: translateX(-100%);

            transition: transform 0.3s ease;

        }



        .menu-item:hover:before {

            transform: translateX(0);

        }



        .menu-item:hover {

            background-color: var(--hover-color);

        }



        .menu-item i {

            width: 24px;

            text-align: center;

            margin-right: 16px;

            font-size: 18px;

            transition: transform 0.3s ease;

        }



        .menu-item:hover i {

            transform: scale(1.1);

        }



        .menu-item span {

            font-weight: 470;

            letter-spacing: 0.2px;

        }



        .menu-item.active {

            background-color: var(--hover-color);

        }



        .menu-item.active:before {

            transform: translateX(0);

        }



        /* ХЕДЕР */

        .site-header {

            position: fixed;

            top: 20px;

            left: 50%;

            transform: translateX(-50%);

            width: auto;

            min-width: 700px;

            height: 50px;

            background-color: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            display: flex;

            align-items: center;

            justify-content: center;

            z-index: 1000;

            padding: 0 30px;

            backdrop-filter: blur(20px);

            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);

        }



        .header-nav {

            display: flex;

            gap: 0;

            height: 100%;

        }



        .nav-item {

            color: var(--light-gray);

            text-decoration: none;

            font-weight: 500;

            padding: 0 25px;

            cursor: pointer;

            transition: all 0.3s ease;

            position: relative;

            background: none;

            border: none;

            font-family: inherit;

            font-size: 13px;

            display: flex;

            align-items: center;

            justify-content: center;

            height: 100%;

        }



        .nav-item::after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 50%;

            transform: translateX(-50%);

            width: 0;

            height: 2px;

            background-color: var(--light-gray);

            transition: width 0.3s ease;

        }



        .nav-item:hover::after {

            width: 80%;

        }



        .nav-item.active {

            background-color: var(--hover-color);

        }



        .nav-item.active::after {

            width: 100%;

        }



        .header-status {

            position: absolute;

            right: 20px;

            display: flex;

            align-items: center;

            gap: 10px;

            font-size: 12px;

        }



        .status-dot {

            width: 8px;

            height: 8px;

            border-radius: 50%;

            background-color: #888;

            animation: pulse 2s infinite;

        }



        @keyframes pulse {

            0%, 100% { opacity: 1; }

            50% { opacity: 0.5; }

        }



        /* ОСНОВНОЙ КОНТЕНТ */

        .main-content {

            position: fixed;

            left: 225px;

            top: 0;

            width: calc(100% - 225px);

            height: 100vh;

            padding: 100px 50px 50px 50px;

            overflow-y: auto;

        }



        .content-section {

            display: none;

            animation: fadeIn 0.5s ease;

        }



        @keyframes fadeIn {

            from { opacity: 0; transform: translateY(20px); }

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

        }



        .content-section.active {

            display: block;

        }



        /* МАТРИЧНЫЙ ФОН */

        #matrix-bg {

            position: fixed;

            top: 0;

            left: 225px;

            width: calc(100% - 225px);

            height: 100vh;

            z-index: -1;

            opacity: 0.03;

            pointer-events: none;

        }



        /* ПОТОК КОДА */

        .code-stream {

            position: absolute;

            right: 30px;

            top: 100px;

            width: 300px;

            height: 400px;

            overflow: hidden;

            border: 1px solid var(--border-color);

            background: rgba(26, 26, 26, 0.7);

            padding: 15px;

            font-size: 11px;

            line-height: 1.4;

            opacity: 0.7;

        }



        .code-line {

            margin-bottom: 8px;

            opacity: 0;

            animation: codeFlow 15s linear infinite;

        }



        @keyframes codeFlow {

            0% { transform: translateY(0); opacity: 0; }

            5% { opacity: 1; }

            95% { opacity: 1; }

            100% { transform: translateY(-400px); opacity: 0; }

        }



        /* ТЕРМИНАЛ */

        .terminal-block {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            padding: 20px;

            margin-bottom: 20px;

            position: relative;

            min-height: 100px;

        }



        .terminal-block::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .terminal-line {

            margin-bottom: 5px;

            display: flex;

            align-items: center;

        }



        .terminal-prompt {

            color: #888;

            margin-right: 10px;

        }



        .terminal-output {

            color: var(--light-gray);

        }



        .blinking-cursor {

            display: inline-block;

            width: 8px;

            height: 16px;

            background-color: var(--light-gray);

            animation: blink 1s infinite;

            margin-left: 5px;

        }



        @keyframes blink {

            0%, 100% { opacity: 1; }

            50% { opacity: 0; }

        }



        /* СЕТКА */

        .grid-3d {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

            gap: 20px;

            margin: 30px 0;

            perspective: 1000px;

        }



        .grid-item {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            padding: 25px 15px;

            text-align: center;

            transition: all 0.3s ease;

            transform-style: preserve-3d;

            position: relative;

            overflow: hidden;

        }



        .grid-item::before {

            content: '';

            position: absolute;

            top: -2px;

            left: -2px;

            right: -2px;

            bottom: -2px;

            background: linear-gradient(45deg, transparent, var(--light-gray), transparent);

            z-index: -1;

            opacity: 0;

            transition: opacity 0.3s ease;

        }



        .grid-item:hover {

            transform: translateY(-5px) rotateX(5deg);

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

        }



        .grid-item:hover::before {

            opacity: 0.3;

            animation: borderGlow 2s linear infinite;

        }



        @keyframes borderGlow {

            0% { background-position: -200% 50%; }

            100% { background-position: 200% 50%; }

        }



        .grid-icon {

            font-size: 32px;

            margin-bottom: 15px;

            display: block;

        }



        /* ПРОГРЕСС БАРЫ */

        .skill-meter {

            margin: 20px 0;

        }



        .skill-name {

            display: flex;

            justify-content: space-between;

            margin-bottom: 5px;

        }



        .skill-bar {

            height: 4px;

            background: var(--border-color);

            position: relative;

            overflow: hidden;

        }



        .skill-progress {

            height: 100%;

            background: var(--light-gray);

            position: relative;

            width: 0;

            transition: width 2s ease;

        }



        /* АНИМАЦИИ */

        .cube-container {

            width: 100px;

            height: 100px;

            position: absolute;

            right: 50px;

            bottom: 50px;

            perspective: 1000px;

        }



        .cube {

            width: 100%;

            height: 100%;

            position: relative;

            transform-style: preserve-3d;

            animation: rotateCube 20s infinite linear;

        }



        @keyframes rotateCube {

            0% { transform: rotateX(0) rotateY(0) rotateZ(0); }

            100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }

        }



        .cube-face {

            position: absolute;

            width: 100%;

            height: 100%;

            border: 1px solid var(--border-color);

            background: rgba(26, 26, 26, 0.5);

        }



        /* ПАСХАЛКА */

        .easter-egg {

            position: fixed;

            bottom: 20px;

            left: 250px;

            opacity: 0.1;

            transition: opacity 0.3s ease;

            font-size: 10px;

            cursor: pointer;

            z-index: 10000;

        }



        .easter-egg:hover {

            opacity: 1;

        }



        /* ПЕРЕКЛЮЧАТЕЛИ */

        .switch {

            position: relative;

            display: inline-block;

            width: 60px;

            height: 30px;

            margin: 0 10px;

        }



        .switch input {

            opacity: 0;

            width: 0;

            height: 0;

        }



        .slider {

            position: absolute;

            cursor: pointer;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background-color: var(--border-color);

            transition: .4s;

        }



        .slider:before {

            position: absolute;

            content: "";

            height: 22px;

            width: 22px;

            left: 4px;

            bottom: 4px;

            background-color: var(--light-gray);

            transition: .4s;

        }



        input:checked + .slider {

            background-color: var(--light-gray);

        }



        input:checked + .slider:before {

            transform: translateX(30px);

            background-color: var(--element-bg);

        }



        .slider.round {

            border-radius: 34px;

        }



        .slider.round:before {

            border-radius: 50%;

        }



        /* СЧЕТЧИКИ */

        .counter {

            font-size: 32px;

            font-weight: bold;

            margin: 20px 0;

            color: var(--light-gray);

            font-family: 'Consolas', monospace;

        }



        /* КОНСОЛЬ */

        .auto-console {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            padding: 20px;

            margin: 30px 0;

            position: relative;

        }



        .console-history {

            min-height: 200px;

            max-height: 400px;

            overflow-y: auto;

            margin-bottom: 15px;

            font-family: 'Consolas', monospace;

            font-size: 12px;

        }



        .console-input-line {

            display: flex;

            align-items: center;

        }



        .console-prompt {

            color: #888;

            margin-right: 10px;

        }



        .console-input {

            background: none;

            border: none;

            color: var(--light-gray);

            font-family: 'Consolas', monospace;

            font-size: 12px;

            flex: 1;

            outline: none;

            caret-color: var(--light-gray);

        }



        /* УВЕДОМЛЕНИЯ */

        .notification-panel {

            position: fixed;

            top: 90px;

            right: 30px;

            width: 300px;

            z-index: 1000;

        }



        .notification {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            padding: 12px 15px;

            margin-bottom: 10px;

            font-size: 12px;

            display: flex;

            align-items: center;

            gap: 10px;

            animation: slideIn 0.3s ease;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

        }



        @keyframes slideIn {

            from { transform: translateX(100%); opacity: 0; }

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

        }



        .notification i {

            color: #888;

        }



        /* ДОКУМЕНТАЦИЯ */

        .doc-container {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            padding: 20px;

            margin: 20px 0;

            max-height: 300px;

            overflow-y: auto;

        }



        .doc-section {

            margin-bottom: 20px;

        }



        .doc-title {

            font-size: 16px;

            margin-bottom: 10px;

            color: var(--light-gray);

            border-bottom: 1px solid var(--border-color);

            padding-bottom: 5px;

        }



        .doc-content {

            font-size: 12px;

            line-height: 1.6;

            color: #888;

        }



        /* ТАБЛИЦЫ */

        .data-table {

            width: 100%;

            border-collapse: collapse;

            margin: 20px 0;

            font-size: 12px;

        }



        .data-table th, .data-table td {

            border: 1px solid var(--border-color);

            padding: 10px;

            text-align: left;

        }



        .data-table th {

            background: var(--hover-color);

            font-weight: 600;

        }



        .data-table tr:hover {

            background: rgba(42, 42, 42, 0.3);

        }



        /* ПАНЕЛЬ ИНСТРУМЕНТОВ */

        .toolbar {

            display: flex;

            gap: 10px;

            margin: 20px 0;

            flex-wrap: wrap;

        }



        .toolbar-btn {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            padding: 8px 15px;

            cursor: pointer;

            font-family: inherit;

            font-size: 12px;

            transition: all 0.3s ease;

            display: flex;

            align-items: center;

            gap: 8px;

        }



        .toolbar-btn:hover {

            background: var(--hover-color);

            transform: translateY(-2px);

        }



        /* ЗАГРУЗКА ДЕМО */

        .demo-loader {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(18, 18, 18, 0.95);

            z-index: 9999;

            flex-direction: column;

            justify-content: center;

            align-items: center;

        }



        .demo-loader.active {

            display: flex;

        }



        .demo-loader-circle {

            width: 80px;

            height: 80px;

            position: relative;

            margin-bottom: 30px;

        }



        .demo-loader-circle-inner {

            position: absolute;

            width: 100%;

            height: 100%;

            border-radius: 50%;

            border: 2px solid transparent;

            border-top: 2px solid var(--light-gray);

            animation: demo-spin 1.5s linear infinite;

        }



        .demo-loader-text {

            font-size: 16px;

            margin-bottom: 20px;

            color: var(--light-gray);

            text-transform: uppercase;

            letter-spacing: 2px;

        }



        @keyframes demo-spin {

            0% { transform: rotate(0deg); }

            100% { transform: rotate(360deg); }

        }



        /* ГАЛЕРЕЯ КАРТОЧЕК */

        .cards-gallery {

            position: relative;

            width: 100%;

            height: 700px;

            overflow: hidden;

            margin: 30px 0;

        }



        .cards-container {

            position: relative;

            width: 100%;

            height: 100%;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .card {

            position: absolute;

            width: 1000px;

            height: 500px;

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            overflow: hidden;

            opacity: 0;

            transform: scale(0.8) translateX(0);

            transition: all 0.5s ease;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

        }



        .card.active {

            opacity: 1;

            transform: scale(1) translateX(0);

            z-index: 3;

        }



        .card.prev {

            opacity: 0.6;

            transform: scale(0.9) translateX(-350px);

            z-index: 2;

        }



        .card.next {

            opacity: 0.6;

            transform: scale(0.9) translateX(350px);

            z-index: 2;

        }



        .card-image {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }



        .card-content {

            position: absolute;

            bottom: 0;

            left: 0;

            right: 0;

            background: rgba(26, 26, 26, 0.9);

            padding: 20px;

            transform: translateY(100%);

            transition: transform 0.3s ease;

            border-top: 1px solid var(--border-color);

        }



        .card:hover .card-content {

            transform: translateY(0);

        }



        .card-title {

            font-size: 20px;

            margin-bottom: 12px;

            color: var(--light-gray);

        }



        .card-description {

            font-size: 14px;

            color: #888;

            line-height: 1.5;

        }



        .cards-nav {

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            background: rgba(26, 26, 26, 0.8);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            width: 50px;

            height: 50px;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            font-size: 22px;

            z-index: 10;

            transition: all 0.3s ease;

        }



        .cards-nav:hover {

            background: var(--hover-color);

        }



        .cards-nav.prev {

            left: 20px;

        }



        .cards-nav.next {

            right: 20px;

        }



        .cards-indicators {

            position: absolute;

            bottom: 20px;

            left: 0;

            width: 100%;

            display: flex;

            justify-content: center;

            gap: 12px;

            z-index: 10;

        }



        .cards-indicator {

            width: 12px;

            height: 12px;

            border-radius: 50%;

            background: var(--border-color);

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .cards-indicator.active {

            background: var(--light-gray);

            transform: scale(1.3);

        }



        /* ВИДЕО КОНТЕЙНЕР */

        .video-container {

            width: 90%;

            max-width: 1200px;

            margin: 40px auto;

            position: relative;

        }



        .video-wrapper {

            position: relative;

            width: 100%;

            padding-top: 56.25%;

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            overflow: hidden;

        }



        .video-iframe {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            border: none;

        }



        .video-title {

            position: absolute;

            top: 15px;

            left: 15px;

            background: rgba(26, 26, 26, 0.8);

            padding: 5px 10px;

            border: 1px solid var(--border-color);

            font-size: 12px;

            color: var(--light-gray);

            z-index: 2;

        }



        /* СКРОЛЛБАР */

        ::-webkit-scrollbar {

            width: 6px;

        }



        ::-webkit-scrollbar-track {

            background: var(--dark-gray);

        }



        ::-webkit-scrollbar-thumb {

            background: var(--border-color);

        }



        ::-webkit-scrollbar-thumb:hover {

            background: var(--light-gray);

        }



        /* ========== СТИЛИ ДЛЯ ЛИЧНОГО КАБИНЕТА ========== */

        .account-section {

            display: none;

        }



        .account-info {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            padding: 25px;

            margin: 25px 0;

            border-radius: 8px;

            position: relative;

            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

        }



        .account-info::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .info-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

            gap: 20px;

            margin-top: 20px;

        }



        .info-item {

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            padding: 20px;

            border-radius: 6px;

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden;

        }



        .info-item:hover {

            background: rgba(42, 42, 42, 0.5);

            transform: translateY(-3px);

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

        }



        .info-label {

            color: #888;

            font-size: 11px;

            margin-bottom: 8px;

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        .info-value {

            color: var(--light-gray);

            font-size: 14px;

            word-break: break-all;

            font-family: 'Consolas', monospace;

        }



        /* КАРТОЧКИ В ЛИЧНОМ КАБИНЕТЕ */

        .profile-card {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 25px;

            margin: 25px 0;

            position: relative;

            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

        }



        .profile-card::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .card-title {

            color: var(--light-gray);

            margin-bottom: 20px;

            font-size: 18px;

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .card-title i {

            color: #888;

        }



        .form-container {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            padding: 25px;

            margin: 25px 0;

            border-radius: 8px;

            position: relative;

            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

        }



        .form-container::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .form-group {

            margin-bottom: 20px;

        }



        .form-label {

            display: block;

            color: var(--light-gray);

            margin-bottom: 8px;

            font-size: 12px;

        }



        .form-input {

            width: 100%;

            padding: 12px;

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            border-radius: 5px;

            font-family: 'Consolas', monospace;

            transition: all 0.3s ease;

        }



        .form-input:focus {

            outline: none;

            border-color: var(--light-gray);

            background: rgba(42, 42, 42, 0.5);

            box-shadow: 0 0 0 2px rgba(208, 215, 217, 0.1);

        }



        .form-btn {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            padding: 12px 25px;

            cursor: pointer;

            font-family: inherit;

            font-size: 13px;

            transition: all 0.3s ease;

            border-radius: 5px;

            width: 100%;

            position: relative;

            overflow: hidden;

        }



        .form-btn:hover {

            background: var(--hover-color);

            transform: translateY(-2px);

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

        }



        .form-btn.primary {

            background: var(--light-gray);

            color: var(--dark-gray);

            border-color: var(--light-gray);

            font-weight: bold;

        }



        .form-btn.primary:hover {

            background: #b0b7b9;

            border-color: #b0b7b9;

        }



        .message {

            padding: 12px;

            margin: 15px 0;

            border-radius: 5px;

            font-size: 13px;

            border-left: 4px solid transparent;

        }



        .message.success {

            background: rgba(110, 231, 183, 0.1);

            border-color: rgba(110, 231, 183, 0.5);

            color: #6ee7b7;

        }



        .message.error {

            background: rgba(231, 110, 110, 0.1);

            border-color: rgba(231, 110, 110, 0.5);

            color: #e76e6e;

        }



        .purchases-table {

            width: 100%;

            border-collapse: collapse;

            margin: 20px 0;

            font-size: 12px;

        }



        .purchases-table th,

        .purchases-table td {

            border: 1px solid var(--border-color);

            padding: 12px;

            text-align: left;

        }



        .purchases-table th {

            background: var(--hover-color);

            color: var(--light-gray);

            font-weight: 600;

        }



        .purchases-table tr:hover {

            background: rgba(42, 42, 42, 0.3);

        }



        .key-activation-form {

            display: flex;

            gap: 10px;

            margin: 20px 0;

        }



        .key-input {

            flex: 1;

            padding: 12px;

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            border-radius: 5px;

            font-family: 'Consolas', monospace;

        }



        .key-input:focus {

            outline: none;

            border-color: var(--light-gray);

        }



        .status-badge {

            display: inline-block;

            padding: 6px 12px;

            border-radius: 12px;

            font-size: 11px;

            font-weight: bold;

            letter-spacing: 1px;

        }



        .status-active {

            background: rgba(110, 231, 183, 0.1);

            color: #6ee7b7;

            border: 1px solid rgba(110, 231, 183, 0.3);

        }



        .status-inactive {

            background: rgba(231, 110, 110, 0.1);

            color: #e76e6e;

            border: 1px solid rgba(231, 110, 110, 0.3);

        }



        /* ТАРИФЫ */

        .tariff-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 30px;

            margin: 40px 0;

        }



        .tariff-card {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            padding: 30px;

            border-radius: 8px;

            text-align: center;

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden;

        }



        .tariff-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);

        }



        .tariff-card.popular {

            border-color: var(--light-gray);

            transform: scale(1.05);

        }



        .tariff-card.popular::before {

            content: 'POPULAR';

            position: absolute;

            top: -10px;

            left: 50%;

            transform: translateX(-50%);

            background: var(--light-gray);

            color: var(--dark-gray);

            padding: 5px 15px;

            font-size: 11px;

            border-radius: 12px;

            font-weight: bold;

        }



        .tariff-price {

            font-size: 36px;

            font-weight: bold;

            margin: 20px 0;

            color: var(--light-gray);

        }



        .tariff-features {

            list-style: none;

            text-align: left;

            margin: 25px 0;

        }



        .tariff-features li {

            padding: 8px 0;

            border-bottom: 1px solid rgba(42, 42, 42, 0.5);

            color: #888;

        }



        .tariff-features li i {

            margin-right: 10px;

        }



        /* МОИ ПОКУПКИ */

        .purchase-card {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 20px;

            margin: 15px 0;

            display: flex;

            justify-content: space-between;

            align-items: center;

            transition: all 0.3s ease;

            position: relative;

        }



        .purchase-card::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .purchase-card:hover {

            background: rgba(42, 42, 42, 0.3);

            transform: translateX(5px);

        }



        .purchase-info {

            flex: 1;

        }



        .purchase-date {

            color: #888;

            font-size: 11px;

            margin-bottom: 5px;

        }



        .purchase-key {

            font-family: 'Consolas', monospace;

            color: var(--light-gray);

            margin: 5px 0;

            word-break: break-all;

        }



        .purchase-status {

            padding: 6px 12px;

            border-radius: 12px;

            font-size: 11px;

            font-weight: bold;

        }



        .status-used {

            background: rgba(231, 110, 110, 0.1);

            color: #e76e6e;

            border: 1px solid rgba(231, 110, 110, 0.3);

        }



        .status-active {

            background: rgba(110, 231, 183, 0.1);

            color: #6ee7b7;

            border: 1px solid rgba(110, 231, 183, 0.3);

        }



        /* ========== СТИЛИ ДЛЯ DEVLOG ========== */

        .devlog-container {

            display: grid;

            grid-template-columns: 300px 1fr;

            gap: 30px;

            margin: 30px 0;

        }



        .devlog-sidebar {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 20px;

            position: relative;

            height: fit-content;

        }



        .devlog-sidebar::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .devlog-filters {

            margin-bottom: 25px;

        }



        .filter-title {

            color: var(--light-gray);

            margin-bottom: 15px;

            font-size: 14px;

        }



        .filter-category {

            margin-bottom: 20px;

        }



        .category-title {

            color: #888;

            font-size: 12px;

            margin-bottom: 10px;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        .category-count {

            background: rgba(42, 42, 42, 0.5);

            padding: 2px 8px;

            border-radius: 10px;

            font-size: 11px;

        }



        .filter-tags {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

        }



        .filter-tag {

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            padding: 6px 12px;

            border-radius: 15px;

            font-size: 11px;

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .filter-tag:hover {

            background: rgba(42, 42, 42, 0.5);

            border-color: var(--light-gray);

        }



        .filter-tag.active {

            background: var(--light-gray);

            color: var(--dark-gray);

            border-color: var(--light-gray);

        }



        .devlog-search {

            width: 100%;

            padding: 12px;

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            border-radius: 5px;

            margin-bottom: 20px;

            font-family: 'Consolas', monospace;

        }



        .devlog-search:focus {

            outline: none;

            border-color: var(--light-gray);

        }



        .devlog-posts {

            display: flex;

            flex-direction: column;

            gap: 25px;

        }



        .devlog-post {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 25px;

            position: relative;

            transition: all 0.3s ease;

        }



        .devlog-post::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .devlog-post:hover {

            transform: translateY(-5px);

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

        }



        .devlog-header {

            display: flex;

            justify-content: space-between;

            align-items: flex-start;

            margin-bottom: 20px;

        }



        .devlog-meta {

            display: flex;

            align-items: center;

            gap: 15px;

            margin-bottom: 15px;

        }



        .devlog-author {

            display: flex;

            align-items: center;

            gap: 8px;

            color: #888;

            font-size: 12px;

        }



        .author-avatar {

            width: 24px;

            height: 24px;

            border-radius: 50%;

            background: rgba(110, 231, 183, 0.2);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 12px;

            color: #6ee7b7;

        }



        .devlog-date {

            color: #888;

            font-size: 12px;

        }



        .devlog-category {

            display: inline-block;

            padding: 4px 10px;

            background: rgba(42, 42, 42, 0.5);

            border: 1px solid var(--border-color);

            border-radius: 12px;

            font-size: 11px;

            color: #888;

        }



        .devlog-title {

            color: var(--light-gray);

            font-size: 20px;

            margin-bottom: 15px;

            line-height: 1.4;

        }



        .devlog-content {

            color: #888;

            line-height: 1.6;

            margin-bottom: 20px;

            font-size: 14px;

        }



        .devlog-tags {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            margin-bottom: 20px;

        }



        .devlog-tag {

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            padding: 4px 10px;

            border-radius: 12px;

            font-size: 11px;

            color: #888;

        }



        .spoiler {

            background: rgba(42, 42, 42, 0.5);

            border: 1px solid var(--border-color);

            border-radius: 6px;

            margin: 15px 0;

            overflow: hidden;

        }



        .spoiler-header {

            padding: 12px 15px;

            background: rgba(42, 42, 42, 0.8);

            border-bottom: 1px solid var(--border-color);

            cursor: pointer;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        .spoiler-title {

            color: var(--light-gray);

            font-size: 13px;

        }



        .spoiler-icon {

            transition: transform 0.3s ease;

        }



        .spoiler-content {

            padding: 15px;

            display: none;

            color: #888;

            line-height: 1.6;

        }



        .spoiler.open .spoiler-content {

            display: block;

        }



        .spoiler.open .spoiler-icon {

            transform: rotate(180deg);

        }



        .code-block {

            background: rgba(18, 18, 18, 0.8);

            border: 1px solid var(--border-color);

            border-radius: 6px;

            margin: 15px 0;

            overflow: hidden;

        }



        .code-header {

            padding: 10px 15px;

            background: rgba(42, 42, 42, 0.8);

            border-bottom: 1px solid var(--border-color);

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        .code-language {

            color: #888;

            font-size: 12px;

            font-family: 'Consolas', monospace;

        }



        .copy-code {

            background: rgba(42, 42, 42, 0.5);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            padding: 4px 10px;

            border-radius: 4px;

            font-size: 11px;

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .copy-code:hover {

            background: rgba(42, 42, 42, 0.8);

        }



        .code-content {

            padding: 15px;

            font-family: 'Consolas', monospace;

            font-size: 12px;

            color: #d0d7d9;

            overflow-x: auto;

            white-space: pre;

        }



        .devlog-actions {

            display: flex;

            gap: 10px;

            margin-top: 20px;

        }



        .action-btn {

            padding: 8px 15px;

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            border-radius: 5px;

            font-size: 12px;

            cursor: pointer;

            transition: all 0.3s ease;

            display: flex;

            align-items: center;

            gap: 6px;

        }



        .action-btn:hover {

            background: rgba(42, 42, 42, 0.5);

            transform: translateY(-2px);

        }



        .devlog-form {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 25px;

            margin: 25px 0;

            position: relative;

        }



        .devlog-form::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .form-row {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 20px;

            margin-bottom: 20px;

        }



        .rich-text-toolbar {

            display: flex;

            flex-wrap: wrap;

            gap: 5px;

            margin-bottom: 10px;

            padding: 10px;

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            border-radius: 5px;

        }



        .text-format-btn {

            padding: 6px 10px;

            background: rgba(42, 42, 42, 0.5);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            border-radius: 4px;

            font-size: 12px;

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .text-format-btn:hover {

            background: rgba(42, 42, 42, 0.8);

        }



        .rich-text-editor {

            min-height: 200px;

            padding: 15px;

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            border-radius: 5px;

            color: var(--light-gray);

            font-family: 'Consolas', monospace;

            font-size: 13px;

            line-height: 1.6;

            outline: none;

            overflow-y: auto;

        }



        .rich-text-editor:focus {

            border-color: var(--light-gray);

        }



        /* ========== СТИЛИ ДЛЯ ТЕХПОДДЕРЖКИ ========== */

        .support-container {

            display: grid;

            grid-template-columns: 350px 1fr;

            gap: 30px;

            margin: 30px 0;

            height: 700px;

        }



        .tickets-sidebar {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            display: flex;

            flex-direction: column;

            position: relative;

            overflow: hidden;

        }



        .tickets-sidebar::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .tickets-header {

            padding: 20px;

            border-bottom: 1px solid var(--border-color);

            background: rgba(42, 42, 42, 0.3);

        }



        .tickets-header h3 {

            color: var(--light-gray);

            margin-bottom: 10px;

        }



        .new-ticket-btn {

            width: 100%;

            padding: 12px;

            background: var(--light-gray);

            color: var(--dark-gray);

            border: none;

            border-radius: 5px;

            font-weight: bold;

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .new-ticket-btn:hover {

            background: #b0b7b9;

        }



        .tickets-list {

            flex: 1;

            overflow-y: auto;

            padding: 15px;

        }



        .ticket-item {

            padding: 15px;

            border: 1px solid var(--border-color);

            border-radius: 6px;

            margin-bottom: 10px;

            cursor: pointer;

            transition: all 0.3s ease;

            position: relative;

        }



        .ticket-item:hover {

            background: rgba(42, 42, 42, 0.3);

            border-color: var(--light-gray);

        }



        .ticket-item.active {

            background: rgba(42, 42, 42, 0.5);

            border-color: var(--light-gray);

        }



        .ticket-status {

            position: absolute;

            top: 10px;

            right: 10px;

            width: 8px;

            height: 8px;

            border-radius: 50%;

        }



        .status-open {

            background: #6ee7b7;

        }



        .status-closed {

            background: #e76e6e;

        }



        .status-pending {

            background: #fbbf24;

        }



        .ticket-title {

            color: var(--light-gray);

            font-weight: bold;

            margin-bottom: 5px;

            font-size: 13px;

        }



        .ticket-preview {

            color: #888;

            font-size: 11px;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            margin-bottom: 5px;

        }



        .ticket-meta {

            display: flex;

            justify-content: space-between;

            color: #666;

            font-size: 10px;

        }



        .support-chat {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            display: flex;

            flex-direction: column;

            position: relative;

            overflow: hidden;

        }



        .support-chat::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .chat-header {

            padding: 20px;

            border-bottom: 1px solid var(--border-color);

            background: rgba(42, 42, 42, 0.3);

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        .chat-user-info {

            display: flex;

            align-items: center;

            gap: 12px;

        }



        .user-avatar {

            width: 40px;

            height: 40px;

            border-radius: 50%;

            background: rgba(110, 231, 183, 0.2);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 18px;

            color: #6ee7b7;

        }



        .user-details {

            display: flex;

            flex-direction: column;

        }



        .user-name {

            color: var(--light-gray);

            font-weight: bold;

        }



        .user-status {

            display: flex;

            align-items: center;

            gap: 5px;

            font-size: 11px;

            color: #888;

        }



        .status-indicator {

            width: 6px;

            height: 6px;

            border-radius: 50%;

            background: #6ee7b7;

        }



        .chat-actions {

            display: flex;

            gap: 10px;

        }



        .chat-action-btn {

            padding: 8px 12px;

            background: rgba(42, 42, 42, 0.5);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            border-radius: 5px;

            font-size: 12px;

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .chat-action-btn:hover {

            background: rgba(42, 42, 42, 0.8);

        }



        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            background: rgba(4, 4, 4, 0.995);
        }


        .message-wrapper {

            display: flex;

            flex-direction: column;

            max-width: 70%;

        }



        .message-wrapper.user {

            align-self: flex-end;

        }



        .message-wrapper.admin {

            align-self: flex-start;

        }



        .message-sender {

            color: #888;

            font-size: 11px;

            margin-bottom: 5px;

            padding-left: 5px;

        }



        .message-bubble {

            padding: 12px 15px;

            border-radius: 12px;

            word-wrap: break-word;

            position: relative;

            border: 1px solid transparent;

        }



        .message-bubble.user {
            background: rgba(24, 24, 24, 0.96);
            border-color: rgba(255, 255, 255, 0.1);
            border-bottom-right-radius: 4px;
        }

        .message-bubble.admin {
            background: rgba(20, 46, 38, 0.96);
            border-color: rgba(110, 231, 183, 0.16);
            border-bottom-left-radius: 4px;
        }


        .message-time {

            color: #666;

            font-size: 10px;

            margin-top: 5px;

            text-align: right;

        }



        .chat-input-area {
            padding: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(5, 5, 5, 0.995);
        }


        .chat-input-wrapper {

            display: flex;

            gap: 10px;

            align-items: flex-end;

        }



        .chat-input {
            flex: 1;
            padding: 12px;
            background: rgba(10, 10, 10, 0.995);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--light-gray);
            border-radius: 5px;
            font-family: 'Consolas', monospace;
            min-height: 60px;
            max-height: 120px;
            resize: vertical;

            outline: none;

        }



        .chat-input:focus {

            border-color: var(--light-gray);

        }



        .send-btn {

            padding: 12px 20px;

            background: var(--light-gray);

            color: var(--dark-gray);

            border: none;

            border-radius: 5px;

            font-weight: bold;

            cursor: pointer;

            transition: all 0.3s ease;

            display: flex;

            align-items: center;

            gap: 8px;

        }



        .send-btn:hover {

            background: #b0b7b9;

        }



        /* ========== СТИЛИ ДЛЯ АДМИН ПАНЕЛИ ========== */

        .admin-container {

            display: grid;

            grid-template-columns: 250px 1fr;

            gap: 30px;

            margin: 30px 0;

        }



        .admin-sidebar {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 20px;

            position: relative;

            height: fit-content;

        }



        .admin-sidebar::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .admin-nav {

            display: flex;

            flex-direction: column;

            gap: 10px;

        }



        .admin-nav-item {

            padding: 12px 15px;

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            border-radius: 5px;

            color: var(--light-gray);

            cursor: pointer;

            transition: all 0.3s ease;

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .admin-nav-item:hover {

            background: rgba(42, 42, 42, 0.5);

            border-color: var(--light-gray);

        }



        .admin-nav-item.active {

            background: rgba(110, 231, 183, 0.1);

            border-color: rgba(110, 231, 183, 0.3);

        }



        .admin-content {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 25px;

            position: relative;

            min-height: 600px;

        }



        .admin-content::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .admin-section {

            display: none;

        }



        .admin-section.active {

            display: block;

        }



        .admin-stats {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

            gap: 20px;

            margin-bottom: 30px;

        }



        .stat-card {

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 20px;

            text-align: center;

            transition: all 0.3s ease;

        }



        .stat-card:hover {

            transform: translateY(-5px);

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

        }



        .stat-icon {

            font-size: 24px;

            margin-bottom: 10px;

            color: var(--light-gray);

        }



        .stat-value {

            font-size: 32px;

            font-weight: bold;

            color: var(--light-gray);

            margin-bottom: 5px;

        }



        .stat-label {

            color: #888;

            font-size: 12px;

        }



        .admin-table {

            width: 100%;

            border-collapse: collapse;

            margin: 20px 0;

            font-size: 12px;

        }



        .admin-table th,

        .admin-table td {

            border: 1px solid var(--border-color);

            padding: 12px;

            text-align: left;

        }



        .admin-table th {

            background: rgba(42, 42, 42, 0.5);

            color: var(--light-gray);

            font-weight: 600;

        }



        .admin-table tr:hover {

            background: rgba(42, 42, 42, 0.3);

        }



        .user-actions {

            display: flex;

            gap: 5px;

        }



        .admin-btn {

            padding: 6px 12px;

            background: rgba(42, 42, 42, 0.5);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            border-radius: 4px;

            font-size: 11px;

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .admin-btn:hover {

            background: rgba(42, 42, 42, 0.8);

        }



        .admin-btn.primary {

            background: var(--light-gray);

            color: var(--dark-gray);

            border-color: var(--light-gray);

        }



        .admin-btn.primary:hover {

            background: #b0b7b9;

        }



        .admin-form {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 20px;

            margin-bottom: 20px;

        }



        .form-full-width {

            grid-column: 1 / -1;

        }



        /* ========== МОДАЛЬНЫЕ ОКНА ========== */

        .modal {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.8);

            z-index: 10000;

            justify-content: center;

            align-items: center;

            backdrop-filter: blur(10px);

        }



        .modal-content {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 30px;

            max-width: 600px;

            width: 90%;

            max-height: 80vh;

            overflow-y: auto;

            position: relative;

            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

        }



        .modal-content::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .modal-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 20px;

            padding-bottom: 15px;

            border-bottom: 1px solid var(--border-color);

        }



        .modal-title {

            color: var(--light-gray);

            font-size: 18px;

        }



        .modal-close {

            background: none;

            border: none;

            color: var(--light-gray);

            font-size: 24px;

            cursor: pointer;

            transition: all 0.3s ease;

            width: 30px;

            height: 30px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

        }



        .modal-close:hover {

            background: rgba(42, 42, 42, 0.5);

            transform: rotate(90deg);

        }



        .modal-footer {

            display: flex;

            justify-content: flex-end;

            gap: 10px;

            margin-top: 20px;

            padding-top: 15px;

            border-top: 1px solid var(--border-color);

        }



        /* ========== СТРАНИЦА АВТОРИЗАЦИИ ========== */

        .auth-container {

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            background: var(--dark-gray);

            padding: 20px;

        }



        .auth-box {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            padding: 40px;

            border-radius: 8px;

            width: 100%;

            max-width: 400px;

            position: relative;

            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

        }



        .auth-box::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .auth-tabs {

            display: flex;

            margin-bottom: 30px;

            border-bottom: 1px solid var(--border-color);

        }



        .auth-tab {

            flex: 1;

            padding: 15px;

            background: none;

            border: none;

            color: var(--light-gray);

            cursor: pointer;

            font-family: inherit;

            font-size: 13px;

            transition: all 0.3s ease;

            position: relative;

        }



        .auth-tab.active {

            color: var(--light-gray);

        }



        .auth-tab.active::after {

            content: '';

            position: absolute;

            bottom: -1px;

            left: 0;

            width: 100%;

            height: 2px;

            background: var(--light-gray);

        }



        .auth-form {

            display: none;

        }



        .auth-form.active {

            display: block;

        }



        /* ========== АДАПТИВНОСТЬ ========== */

        @media (max-width: 1200px) {

            .site-header {

                min-width: 500px;

                padding: 0 20px;

            }

            .nav-item {

                padding: 0 15px;

            }

            .card {

                width: 500px;

                height: 281px;

            }

            .card.prev {

                transform: scale(0.9) translateX(-300px);

            }

            .card.next {

                transform: scale(0.9) translateX(300px);

            }

        }



        @media (max-width: 900px) {

            .site-sidebar {

                transform: translateX(-100%);

                transition: transform 0.3s ease;

            }

            .site-sidebar.active {

                transform: translateX(0);

            }

            .main-content {

                left: 0;

                width: 100%;

            }

            #matrix-bg {

                left: 0;

                width: 100%;

            }

            .site-header {

                min-width: 400px;

            }

            .card {

                width: 400px;

                height: 225px;

            }

            .card.prev {

                transform: scale(0.9) translateX(-200px);

            }

            .card.next {

                transform: scale(0.9) translateX(200px);

            }

            .video-container {

                width: 90%;

            }

            .devlog-container,

            .support-container,

            .admin-container {

                grid-template-columns: 1fr;

            }

            .devlog-sidebar,

            .tickets-sidebar,

            .admin-sidebar {

                height: auto;

            }

        }



        @media (max-width: 600px) {

            .card {

                width: 300px;

                height: 169px;

            }

            .card.prev {

                transform: scale(0.9) translateX(-150px);

            }

            .card.next {

                transform: scale(0.9) translateX(150px);

            }

            .form-row,

            .admin-form {

                grid-template-columns: 1fr;

            }

            .site-header {

                min-width: 300px;

                padding: 0 10px;

            }

            .nav-item {

                padding: 0 8px;

                font-size: 11px;

            }

        }

/* Добавьте в styles.css */

.ticket-action-btn.delete {

    background: linear-gradient(135deg, #dc3545, #c82333);

    border: 1px solid #dc3545;

}



.ticket-action-btn.delete:hover {

    background: linear-gradient(135deg, #c82333, #bd2130);

    border-color: #bd2130;

}



.ticket-urgent-bg {

    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));

    border-left: 3px solid #dc3545;

}



/* Стили для автообновления */

.message-new {

    animation: messageAppear 0.5s ease-out;

}



@keyframes messageAppear {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ========== АДМИН ПАНЕЛЬ ПОДДЕРЖКИ ========== */



/* Контейнер для переключения между списком и чатом */

.admin-support-container {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



/* Заголовок управления поддержкой */

#adminSupport h3 {

    color: var(--light-gray);

    margin-bottom: 20px;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: 0.2px;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--border-color);

    position: relative;

}



#adminSupport h3::before {

    content: '>';

    position: absolute;

    left: 0;

    top: -8px;

    background: var(--element-bg);

    padding: 0 10px;

    color: var(--light-gray);

    font-size: 12px;

}



/* Статистика */

.admin-stats-row {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 15px;

    margin-bottom: 25px;

}



.stat-card {

    background: var(--element-bg);

    border-radius: 8px;

    padding: 20px;

    border: 1px solid var(--border-color);

    text-align: center;

    transition: all 0.3s ease;

    position: relative;

}



.stat-card:hover {

    border-color: var(--light-gray);

    transform: translateY(-5px);

}



.stat-card::before {

    content: '>';

    position: absolute;

    top: -8px;

    left: 15px;

    background: var(--element-bg);

    padding: 0 10px;

    color: var(--light-gray);

    font-size: 12px;

}



.stat-value {

    font-size: 28px;

    font-weight: bold;

    color: var(--light-gray);

    margin-bottom: 5px;

    font-family: 'Consolas', monospace;

}



.stat-label {

    font-size: 11px;

    color: #888;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Фильтры и поиск */

.tickets-filters {

    background: var(--element-bg);

    border-radius: 8px;

    padding: 20px;

    border: 1px solid var(--border-color);

    margin-bottom: 20px;

    position: relative;

}



.tickets-filters::before {

    content: '>';

    position: absolute;

    top: -8px;

    left: 15px;

    background: var(--element-bg);

    padding: 0 10px;

    color: var(--light-gray);

    font-size: 12px;

}



.filter-row {

    display: flex;

    gap: 20px;

    margin-bottom: 15px;

}



@media (max-width: 768px) {

    .filter-row {

        flex-direction: column;

        gap: 15px;

    }

}



.filter-group {

    flex: 1;

}



.filter-group label {

    display: block;

    color: var(--light-gray);

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 500;

}



.filter-select {

    width: 100%;

    background: rgba(42, 42, 42, 0.3);

    border: 1px solid var(--border-color);

    border-radius: 5px;

    padding: 10px;

    color: var(--light-gray);

    font-size: 13px;

    font-family: 'Consolas', monospace;

    transition: all 0.3s ease;

    cursor: pointer;

}



.filter-select:focus {

    outline: none;

    border-color: var(--light-gray);

    box-shadow: 0 0 0 2px var(--glow-color);

}



.filter-select option {

    background: var(--element-bg);

    color: var(--light-gray);

    padding: 8px;

}



.search-input {

    width: 100%;

    background: rgba(42, 42, 42, 0.3);

    border: 1px solid var(--border-color);

    border-radius: 5px;

    padding: 12px 15px;

    color: var(--light-gray);

    font-size: 13px;

    font-family: 'Consolas', monospace;

    transition: all 0.3s ease;

}



.search-input:focus {

    outline: none;

    border-color: var(--light-gray);

    box-shadow: 0 0 0 2px var(--glow-color);

}



.search-input::placeholder {

    color: #888;

    opacity: 0.7;

}



/* Кнопка обновления */

.admin-toolbar {

    display: flex;

    justify-content: flex-end;

    margin-bottom: 20px;

}



/* Сетка тикетов */

.admin-tickets-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 20px;

    margin-top: 20px;

    min-height: 300px;

}



@media (max-width: 1200px) {

    .admin-tickets-grid {

        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    }

}



@media (max-width: 768px) {

    .admin-tickets-grid {

        grid-template-columns: 1fr;

    }

}



.admin-ticket-compact {

    background: var(--element-bg);

    border-radius: 8px;

    padding: 20px;

    border: 1px solid var(--border-color);

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

    font-family: 'Consolas', monospace;

    animation: slideInUp 0.3s ease-out;

    animation-fill-mode: both;

}



.admin-ticket-compact:hover {

    border-color: var(--light-gray);

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}



.admin-ticket-compact::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 4px;

    background-color: var(--light-gray);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.admin-ticket-compact:hover::before {

    opacity: 1;

}



.ticket-header-compact {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 15px;

}



.ticket-id-compact {

    font-family: 'Consolas', monospace;

    font-size: 11px;

    color: #888;

    background: var(--hover-color);

    padding: 4px 10px;

    border-radius: 4px;

    letter-spacing: 0.5px;

}



.ticket-title-compact {

    font-size: 15px;

    font-weight: 600;

    color: var(--light-gray);

    margin: 12px 0;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    min-height: 2.8em;

}



.ticket-preview-compact {

    color: #888;

    font-size: 13px;

    line-height: 1.5;

    margin-bottom: 15px;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    min-height: 4.5em;

}



.ticket-footer-compact {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 15px;

    border-top: 1px solid var(--border-color);

}



@media (max-width: 576px) {

    .ticket-footer-compact {

        flex-direction: column;

        gap: 12px;

        align-items: flex-start;

    }

}



.ticket-user-info {

    display: flex;

    align-items: center;

    gap: 10px;

}



.user-avatar-small {

    width: 32px;

    height: 32px;

    background: rgba(110, 231, 183, 0.2);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent-color);

    font-size: 14px;

    border: 1px solid rgba(110, 231, 183, 0.3);

}



.user-details {

    display: flex;

    flex-direction: column;

}



.user-name {

    font-size: 12px;

    color: var(--light-gray);

    font-weight: 500;

}



.user-id {

    font-size: 11px;

    color: #888;

}



.ticket-stats {

    display: flex;

    gap: 12px;

    align-items: center;

}



.ticket-stat {

    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 11px;

    color: #888;

}



.ticket-stat i {

    color: var(--light-gray);

}



/* Статусы */

.status-indicator-compact {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    display: inline-block;

    margin-right: 6px;

}



.status-indicator-compact.open {

    background-color: var(--accent-color);

    box-shadow: 0 0 8px rgba(110, 231, 183, 0.3);

}



.status-indicator-compact.pending {

    background-color: #fbbf24;

    box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);

}



.status-indicator-compact.closed {

    background-color: #888;

}



.priority-indicator-compact {

    padding: 3px 8px;

    border-radius: 12px;

    font-size: 10px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-family: 'Consolas', monospace;

}



.priority-indicator-compact.low {

    background: rgba(110, 231, 183, 0.1);

    color: var(--accent-color);

    border: 1px solid rgba(110, 231, 183, 0.3);

}



.priority-indicator-compact.medium {

    background: rgba(251, 191, 36, 0.1);

    color: #fbbf24;

    border: 1px solid rgba(251, 191, 36, 0.3);

}



.priority-indicator-compact.high {

    background: rgba(231, 110, 110, 0.1);

    color: #e76e6e;

    border: 1px solid rgba(231, 110, 110, 0.3);

}



.priority-indicator-compact.urgent {

    background: rgba(231, 110, 110, 0.2);

    color: #e76e6e;

    border: 1px solid rgba(231, 110, 110, 0.3);

    animation: pulse 1s infinite;

}



/* Пагинация */

.tickets-pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 30px;

    padding: 20px;

}



.pagination-btn {

    background: var(--element-bg);

    border: 1px solid var(--border-color);

    color: var(--light-gray);

    width: 36px;

    height: 36px;

    border-radius: 5px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    font-family: 'Consolas', monospace;

    font-size: 12px;

}



.pagination-btn:hover:not(:disabled) {

    background: var(--hover-color);

}



.pagination-btn.active {

    background: var(--light-gray);

    color: var(--dark-gray);

    border: 1px solid var(--light-gray);

}



.pagination-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.pagination-info {

    color: #888;

    font-size: 13px;

    margin: 0 15px;

    font-family: 'Consolas', monospace;

}



/* Контейнер чата тикета */

#adminTicketChatContainer {

    display: none;

    animation: fadeIn 0.3s ease;

}



/* Хедер чата */

.admin-chat-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px;

    background: linear-gradient(135deg, rgba(42, 42, 42, 0.4), rgba(208, 215, 217, 0.1));

    border-radius: 8px;

    border: 1px solid var(--border-color);

    margin-bottom: 20px;

    flex-wrap: wrap;

    gap: 15px;

}



@media (max-width: 768px) {

    .admin-chat-header {

        flex-direction: column;

        align-items: flex-start;

    }

}



.back-to-tickets-btn {

    background: var(--element-bg);

    border: 1px solid var(--border-color);

    color: var(--light-gray);

    padding: 10px 20px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 13px;

    display: flex;

    align-items: center;

    gap: 8px;

    transition: all 0.3s ease;

    font-family: 'Consolas', monospace;

    white-space: nowrap;

}



.back-to-tickets-btn:hover {

    background: var(--hover-color);

    transform: translateX(-3px);

}



.back-to-tickets-btn i {

    font-size: 14px;

}



.chat-ticket-info {

    display: flex;

    flex-direction: column;

    gap: 5px;

    flex: 1;

    min-width: 0;

}



.chat-ticket-title {

    font-size: 16px;

    font-weight: 600;

    color: var(--light-gray);

    letter-spacing: 0.2px;

    word-break: break-word;

}



.chat-ticket-meta {

    display: flex;

    gap: 15px;

    font-size: 12px;

    color: #888;

    font-family: 'Consolas', monospace;

    flex-wrap: wrap;

}



/* Действия с тикетом */

.ticket-actions-chat {

    display: flex;

    gap: 10px;

    padding: 15px;

    background: rgba(42, 42, 42, 0.3);

    border-bottom: 1px solid var(--border-color);

    border-radius: 8px 8px 0 0;

    flex-wrap: wrap;

}



.ticket-action-btn {

    background: var(--element-bg);

    border: 1px solid var(--border-color);

    color: var(--light-gray);

    padding: 10px 15px;

    border-radius: 5px;

    cursor: pointer;

    font-size: 13px;

    display: flex;

    align-items: center;

    gap: 8px;

    transition: all 0.3s ease;

    font-family: 'Consolas', monospace;

    white-space: nowrap;

}



.ticket-action-btn:hover {

    background: var(--hover-color);

}



.ticket-action-btn.close {

    background: rgba(231, 110, 110, 0.1);

    border-color: rgba(231, 110, 110, 0.3);

    color: #e76e6e;

}



.ticket-action-btn.close:hover {

    background: rgba(231, 110, 110, 0.2);

}



.ticket-action-btn i {

    transition: transform 0.3s ease;

}



.ticket-action-btn:hover i {

    transform: scale(1.2);

}



/* Контейнер чата */

.admin-chat-container {

    background: var(--element-bg);

    border-radius: 0 0 8px 8px;

    overflow: hidden;

    border: 1px solid var(--border-color);

    height: 600px;

    display: flex;

    flex-direction: column;

    position: relative;

}



.admin-chat-container::before {

    content: '>';

    position: absolute;

    top: -8px;

    left: 15px;

    background: var(--element-bg);

    padding: 0 10px;

    color: var(--light-gray);

    font-size: 12px;

    z-index: 2;

}



/* Сообщения чата */

.admin-chat-messages {

    flex: 1;

    overflow-y: auto;

    padding: 20px;

    background: rgba(18, 18, 18, 0.5);

}



.admin-chat-messages::-webkit-scrollbar {

    width: 6px;

}



.admin-chat-messages::-webkit-scrollbar-track {

    background: var(--dark-gray);

}



.admin-chat-messages::-webkit-scrollbar-thumb {

    background: var(--border-color);

}



.admin-chat-messages::-webkit-scrollbar-thumb:hover {

    background: var(--light-gray);

}



.admin-message-wrapper {

    margin-bottom: 20px;

    animation: fadeIn 0.3s ease;

}



.admin-message-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

    flex-wrap: wrap;

    gap: 10px;

}



.admin-message-sender {

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 500;

}



.admin-message-sender.admin-badge {

    background: rgba(231, 110, 110, 0.1);

    color: #e76e6e;

    padding: 3px 10px;

    border-radius: 12px;

    font-size: 11px;

    font-weight: bold;

    border: 1px solid rgba(231, 110, 110, 0.3);

}



.admin-message-sender.user-badge {

    background: rgba(110, 231, 183, 0.1);

    color: var(--accent-color);

    padding: 3px 10px;

    border-radius: 12px;

    font-size: 11px;

    font-weight: bold;

    border: 1px solid rgba(110, 231, 183, 0.3);

}



.admin-message-time {

    font-size: 11px;

    color: #888;

    font-family: 'Consolas', monospace;

}



.admin-message-content {

    background: rgba(42, 42, 42, 0.5);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 15px;

    margin: 5px 0;

    color: var(--light-gray);

    line-height: 1.5;

    font-size: 13px;

    font-family: 'Consolas', monospace;

    white-space: pre-wrap;

    word-break: break-word;

}



.admin-message-content.admin {

    background: rgba(231, 110, 110, 0.1);

    border-color: rgba(231, 110, 110, 0.3);

    border-left: 3px solid rgba(231, 110, 110, 0.5);

}



.admin-message-content.user {

    border-left: 3px solid rgba(110, 231, 183, 0.5);

}



/* Поле ввода сообщения */

.admin-chat-input-area {

    border-top: 1px solid var(--border-color);

    background: var(--element-bg);

    padding: 20px;

}



.admin-chat-input-wrapper {

    display: flex;

    gap: 10px;

    align-items: flex-end;

}



@media (max-width: 768px) {

    .admin-chat-input-wrapper {

        flex-direction: column;

    }

}



.admin-chat-input {

    flex: 1;

    background: rgba(42, 42, 42, 0.3);

    border: 1px solid var(--border-color);

    border-radius: 5px;

    padding: 12px;

    color: var(--light-gray);

    font-family: 'Consolas', monospace;

    font-size: 13px;

    resize: none;

    min-height: 80px;

    line-height: 1.5;

    transition: all 0.3s ease;

}



.admin-chat-input:focus {

    outline: none;

    border-color: var(--light-gray);

    box-shadow: 0 0 0 2px var(--glow-color);

}



.admin-chat-input::placeholder {

    color: #888;

    opacity: 0.7;

}



.admin-chat-send-btn {

    background: var(--light-gray);

    border: 1px solid var(--light-gray);

    color: var(--dark-gray);

    padding: 12px 25px;

    border-radius: 5px;

    cursor: pointer;

    font-weight: 600;

    font-size: 13px;

    transition: all 0.3s ease;

    font-family: 'Consolas', monospace;

    display: flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

    height: fit-content;

}



@media (max-width: 768px) {

    .admin-chat-send-btn {

        width: 100%;

        justify-content: center;

    }

}



.admin-chat-send-btn:hover {

    background: #b0b7b9;

    border-color: #b0b7b9;

    transform: translateY(-2px);

}



.admin-chat-send-btn i {

    font-size: 14px;

}



/* Индикатор загрузки */

.tickets-loading-admin {

    text-align: center;

    padding: 60px 20px;

    color: #888;

}



.tickets-loading-admin i {

    font-size: 48px;

    margin-bottom: 20px;

    color: var(--light-gray);

    animation: astral-rotate 2s linear infinite;

}



.tickets-loading-admin div {

    font-size: 14px;

    font-family: 'Consolas', monospace;

}



/* Анимации */

@keyframes slideInUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.admin-ticket-compact:nth-child(1) { animation-delay: 0.1s; }

.admin-ticket-compact:nth-child(2) { animation-delay: 0.2s; }

.admin-ticket-compact:nth-child(3) { animation-delay: 0.3s; }

.admin-ticket-compact:nth-child(4) { animation-delay: 0.4s; }

.admin-ticket-compact:nth-child(5) { animation-delay: 0.5s; }



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes pulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.5; }

}



/* Состояния для отображения списка/чата */

.admin-chat-active #adminTicketsListContainer {

    display: none;

}



.admin-chat-active #adminTicketChatContainer {

    display: block;

}



/* Пустой список тикетов */

.no-tickets-message {

    text-align: center;

    padding: 60px 20px;

    color: #888;

    background: var(--element-bg);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    position: relative;

    grid-column: 1 / -1;

}



.no-tickets-message::before {

    content: '>';

    position: absolute;

    top: -8px;

    left: 15px;

    background: var(--element-bg);

    padding: 0 10px;

    color: var(--light-gray);

    font-size: 12px;

}



.no-tickets-message i {

    font-size: 48px;

    margin-bottom: 20px;

    color: #555;

}



.no-tickets-message div {

    font-size: 14px;

    font-family: 'Consolas', monospace;

}



/* Индикатор нового сообщения */

.new-message-indicator {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 8px;

    height: 8px;

    background: var(--accent-color);

    border-radius: 50%;

    animation: pulse 1.5s infinite;

}



/* Стиль для важных тикетов */

.ticket-urgent-bg {

    background: rgba(231, 110, 110, 0.05);

    border-color: rgba(231, 110, 110, 0.3);

}



.ticket-urgent-bg::before {

    background: linear-gradient(180deg, #e76e6e, #ff8e8e);

}

/* Добавьте в styles.css */

.admin-table-container {

    overflow-x: auto;

    border-radius: 8px;

    border: 1px solid var(--border-color);

}



.admin-table {

    width: 100%;

    border-collapse: collapse;

    background: var(--dark-gray);

}



.admin-table thead {

    background: rgba(0, 0, 0, 0.3);

}



.admin-table th {

    padding: 15px;

    text-align: left;

    color: var(--light-gray);

    font-weight: 600;

    border-bottom: 2px solid var(--border-color);

}



.admin-table td {

    padding: 12px 15px;

    border-bottom: 1px solid var(--border-color);

    vertical-align: middle;

}



.admin-table tr:hover {

    background: rgba(255, 255, 255, 0.05);

}



.user-actions {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.admin-btn.small {

    padding: 6px 12px;

    font-size: 12px;

}



.admin-btn.danger {

    background: #dc3545;

    border-color: #dc3545;

}



.admin-btn.danger:hover {

    background: #c82333;

    border-color: #bd2130;

}



.status-badge {

    padding: 4px 8px;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 600;

}



.status-active {

    background: rgba(40, 167, 69, 0.2);

    color: #28a745;

    border: 1px solid rgba(40, 167, 69, 0.3);

}



.status-banned {

    background: rgba(220, 53, 69, 0.2);

    color: #dc3545;

    border: 1px solid rgba(220, 53, 69, 0.3);

}



.status-suspended {

    background: rgba(255, 193, 7, 0.2);

    color: #ffc107;

    border: 1px solid rgba(255, 193, 7, 0.3);

}



.admin-badge {

    display: inline-block;

    width: 24px;

    height: 24px;

    background: var(--primary-color);

    color: white;

    border-radius: 50%;

    text-align: center;

    line-height: 24px;

    font-size: 12px;

}



.subscription-days {

    padding: 4px 8px;

    border-radius: 4px;

    font-weight: 600;

}



.subscription-days.active {

    background: rgba(40, 167, 69, 0.2);

    color: #28a745;

}



.subscription-days.expired {

    background: rgba(108, 117, 125, 0.2);

    color: #6c757d;

}



.token-preview {

    font-family: 'Courier New', monospace;

    font-size: 12px;

    color: #888;

    cursor: help;

}



.form-row {

    display: flex;

    gap: 20px;

    margin-bottom: 20px;

}



.form-row .form-group {

    flex: 1;

}



.form-group.form-full-width {

    width: 100%;

}

/* Добавьте в styles.css */



/* Иконка ключа */

.key-icon {

    width: 30px;

    height: 30px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

}



/* Значение ключа */

.key-value {

    font-family: 'Courier New', monospace;

    font-size: 12px;

    background: rgba(255, 255, 255, 0.1);

    padding: 2px 5px;

    border-radius: 3px;

    margin: 2px 0;

}



/* Бейджи типов ключей */

.type-badge {

    padding: 3px 8px;

    border-radius: 12px;

    font-size: 11px;

    font-weight: bold;

    text-transform: uppercase;

}



.status-basic {

    background: rgba(52, 152, 219, 0.2);

    color: #3498db;

    border: 1px solid #3498db;

}



.status-pro {

    background: rgba(46, 204, 113, 0.2);

    color: #2ecc71;

    border: 1px solid #2ecc71;

}



.status-enterprise {

    background: rgba(155, 89, 182, 0.2);

    color: #9b59b6;

    border: 1px solid #9b59b6;

}



.status-used {

    background: rgba(231, 76, 60, 0.2);

    color: #e74c3c;

    border: 1px solid #e74c3c;

}



.status-active {

    background: rgba(46, 204, 113, 0.2);

    color: #2ecc71;

    border: 1px solid #2ecc71;

}

/* Стили для IP адресов */

.ip-unknown {

    color: #888;

    font-style: italic;

}



.ip-known {

    color: var(--light-gray);

    display: flex;

    align-items: center;

    gap: 5px;

}



.ip-action-btn {

    background: none;

    border: none;

    color: var(--light-gray);

    cursor: pointer;

    padding: 2px 5px;

    border-radius: 3px;

    font-size: 12px;

    transition: all 0.3s ease;

}



.ip-action-btn:hover {

    background: rgba(255, 255, 255, 0.1);

    color: var(--primary-color);

}



.ip-icon {

    width: 30px;

    height: 30px;

    background: rgba(52, 152, 219, 0.2);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary-color);

}



.ip-address {

    font-family: monospace;

    font-size: 14px;

}



/* Статистика IP */

.stat-card-compact {

    background: var(--card-bg);

    border-radius: 8px;

    padding: 15px;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.05);

    transition: all 0.3s ease;

}



.stat-card-compact:hover {

    border-color: rgba(52, 152, 219, 0.3);

    transform: translateY(-2px);

}



.stat-value-compact {

    font-size: 24px;

    font-weight: bold;

    color: var(--light-gray);

    margin-bottom: 5px;

}



.stat-label-compact {

    font-size: 12px;

    color: #888;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.stat-trend {

    font-size: 10px;

    margin-top: 5px;

    padding: 2px 5px;

    border-radius: 3px;

    display: inline-block;

}



.stat-trend.positive {

    background: rgba(46, 204, 113, 0.2);

    color: #2ecc71;

}



.stat-trend.negative {

    background: rgba(231, 76, 60, 0.2);

    color: #e74c3c;

}

.ip-action-btn {

    background: none;

    border: none;

    color: #ccc;

    cursor: pointer;

    padding: 5px;

    margin: 0 2px;

    font-size: 14px;

    transition: color 0.2s;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    border-radius: 3px;

}



.ip-action-btn:hover {

    color: #fff;

    background: rgba(255, 255, 255, 0.1);

}



.ip-action-btn i {

    font-size: 12px;

}

/* Улучшенные стили для Devlog */

.devlog-filters-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

    padding: 15px;

    background: #1a1a1a;

    border-radius: 10px;

}



.filter-tabs {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.filter-tab {

    padding: 8px 20px;

    background: rgba(255, 255, 255, 0.1);

    border: none;

    border-radius: 20px;

    color: var(--light-gray);

    cursor: pointer;

    transition: all 0.3s;

}



.filter-tab:hover {

    background: rgba(255, 255, 255, 0.2);

}



.filter-tab.active {

    background: rgba(255, 255, 255, 0.9);

    color: #1a1a1a;

}



.search-box {

    display: flex;

    gap: 10px;

}



.search-input {

    padding: 8px 15px;

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 5px;

    color: var(--light-gray);

    min-width: 250px;

}



.search-btn {

    padding: 8px 20px;

    background: rgba(255, 255, 255, 0.9);

    border: none;

    border-radius: 5px;

    color: #1a1a1a;

    cursor: pointer;

}



.devlog-popular-section {

    margin-bottom: 30px;

}



.popular-devlogs {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 15px;

}



.popular-devlog-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px;

    background: #1a1a1a;

    border-radius: 10px;

    cursor: pointer;

    transition: transform 0.3s;

}



.popular-devlog-item:hover {

    transform: translateY(-5px);

    background: #222222;

}



.popular-devlog-rank {

    font-size: 24px;

    font-weight: bold;

    color: rgba(255, 255, 255, 0.9);

    min-width: 40px;

}



.popular-devlog-content {

    flex: 1;

}



.popular-devlog-title {

    color: var(--light-gray);

    font-size: 14px;

    margin-bottom: 5px;

}



.popular-devlog-stats {

    display: flex;

    gap: 10px;

    font-size: 12px;

    color: #888;

}



.devlog-container-enhanced {

    display: grid;

    grid-template-columns: 1fr 300px;

    gap: 30px;

    margin-top: 20px;

}



.devlogs-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 20px;

}



.devlog-card {

    background: #1a1a1a;

    border-radius: 10px;

    padding: 20px;

    cursor: pointer;

    transition: all 0.3s;

    position: relative;

    overflow: hidden;

}



.devlog-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

    background: #222222;

}



.featured-badge {

    position: absolute;

    top: 10px;

    right: 10px;

    background: rgba(255, 255, 255, 0.9);

    color: #1a1a1a;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: bold;

}



.devlog-card-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 15px;

}



.devlog-card-category {

    padding: 4px 12px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 15px;

    font-size: 12px;

    color: var(--light-gray);

}



.devlog-card-date {

    font-size: 12px;

    color: #888;

}



.devlog-card-title {

    font-size: 18px;

    font-weight: bold;

    color: var(--light-gray);

    margin-bottom: 10px;

    line-height: 1.4;

}



.devlog-card-excerpt {

    color: #aaa;

    font-size: 14px;

    line-height: 1.5;

    margin-bottom: 15px;

}



.devlog-card-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 15px;

    padding-top: 15px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.devlog-card-author {

    font-size: 12px;

    color: #888;

}



.devlog-card-stats {

    display: flex;

    gap: 15px;

    font-size: 12px;

    color: #888;

}



.devlog-card-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 10px;

}



.devlog-tag-small {

    padding: 2px 8px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 10px;

    font-size: 11px;

    color: #aaa;

}



.devlog-sidebar-enhanced {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.devlog-stats {

    background: #1a1a1a;

    border-radius: 10px;

    padding: 20px;

}



.devlog-stats h4 {

    color: var(--light-gray);

    margin-bottom: 15px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    padding-bottom: 10px;

}



.stat-item {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

    font-size: 14px;

}



.stat-item span:first-child {

    color: #aaa;

}



.stat-item span:last-child {

    color: var(--light-gray);

    font-weight: bold;

}



.devlog-tags-cloud {

    background: #1a1a1a;

    border-radius: 10px;

    padding: 20px;

}



.devlog-tags-cloud h4 {

    color: var(--light-gray);

    margin-bottom: 15px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    padding-bottom: 10px;

}



#tagsCloud {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.devlog-tag-cloud {

    padding: 5px 12px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 15px;

    font-size: 12px;

    color: #aaa;

    cursor: pointer;

    transition: all 0.3s;

}



.devlog-tag-cloud:hover {

    background: rgba(255, 255, 255, 0.1);

    transform: scale(1.05);

}



.devlog-toolbar {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 15px;

    padding: 10px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 5px;

}



.tool-btn {

    padding: 8px 12px;

    background: rgba(255, 255, 255, 0.1);

    border: none;

    border-radius: 5px;

    color: var(--light-gray);

    cursor: pointer;

    transition: all 0.3s;

}



.tool-btn:hover {

    background: rgba(255, 255, 255, 0.2);

}



.editor-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}



.editor-textarea {

    font-family: monospace;

    resize: vertical;

}



.editor-preview {

    padding: 10px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 5px;

    overflow-y: auto;

    max-height: 400px;

}



.tag-suggestions {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 10px;

}



.tag-suggestion {

    padding: 4px 10px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 10px;

    font-size: 12px;

    color: #aaa;

    cursor: pointer;

    transition: all 0.3s;

}



.tag-suggestion:hover {

    background: rgba(255, 255, 255, 0.1);

}



.word-counter {

    font-size: 12px;

    color: #888;

    text-align: right;

}



/* Модальное окно просмотра devlog */

.devlog-meta-info {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    padding-bottom: 15px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.devlog-author-info {

    display: flex;

    align-items: center;

    gap: 10px;

}



.author-avatar-small {

    width: 40px;

    height: 40px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.author-name {

    font-weight: bold;

    color: var(--light-gray);

}



.devlog-stats-inline {
    display: flex;
    gap: 15px;
    font-size: 14px;
    color: #888;
}

.devlog-stats-inline span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


.devlog-content-modal {

    font-size: 16px;

    line-height: 1.6;

    margin-bottom: 20px;

}



.devlog-content-modal h1,

.devlog-content-modal h2,

.devlog-content-modal h3 {

    color: var(--light-gray);

    margin: 20px 0 10px 0;

}



.devlog-content-modal p {

    margin-bottom: 15px;

}



.devlog-content-modal code {

    background: rgba(255, 255, 255, 0.1);

    padding: 2px 5px;

    border-radius: 3px;

    font-family: monospace;

}



.devlog-content-modal pre {

    background: rgba(0, 0, 0, 0.3);

    padding: 15px;

    border-radius: 5px;

    overflow-x: auto;

    margin: 15px 0;

}



.devlog-content-modal blockquote {

    border-left: 3px solid rgba(255, 255, 255, 0.7);

    padding-left: 15px;

    margin: 15px 0;

    color: #aaa;

    font-style: italic;

}



.devlog-tags-modal {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 20px;

}



.devlog-tag-modal {

    padding: 5px 15px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 15px;

    font-size: 12px;

    color: #aaa;

}



.devlog-actions-modal {

    display: flex;

    gap: 15px;

    margin-bottom: 30px;

}



.action-btn-like,

.action-btn-comment {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 20px;

    background: rgba(255, 255, 255, 0.05);

    border: none;

    border-radius: 5px;

    color: var(--light-gray);

    cursor: pointer;

    transition: all 0.3s;

}



.action-btn-like:hover,

.action-btn-comment:hover {

    background: rgba(255, 255, 255, 0.1);

}



.action-btn-like.liked {

    color: rgba(255, 255, 255, 0.9);

}



.devlog-comments-section {

    margin-top: 30px;

}



.devlog-comments-section h4 {

    color: var(--light-gray);

    margin-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    padding-bottom: 10px;

}



/* Комментарии идут сначала */

.comments-list {

    max-height: 400px;

    overflow-y: auto;

    margin-bottom: 30px;

}



.comment-item {

    background: rgba(255, 255, 255, 0.05);

    border-radius: 5px;

    padding: 15px;

    margin-bottom: 15px;

}



.comment-spoiler {

    border-left: 3px solid rgba(255, 255, 255, 0.7);

}



.comment-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

}



.comment-author {

    font-weight: bold;

    color: var(--light-gray);

}



.comment-date {

    font-size: 12px;

    color: #888;

}



.comment-content {

    margin-bottom: 10px;

    line-height: 1.5;

}



.comment-actions {

    display: flex;

    gap: 10px;

}



.comment-like-btn {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 5px 10px;

    background: rgba(255, 255, 255, 0.05);

    border: none;

    border-radius: 3px;

    color: #888;

    cursor: pointer;

    transition: all 0.3s;

    font-size: 12px;

}



.comment-like-btn:hover {

    background: rgba(255, 255, 255, 0.1);

}



/* Улучшенная форма комментариев - широкий инпут и маленькая кнопка в одной строке */

.comment-form-modal {

    margin-top: 20px;

}



.comment-input-row {

    display: flex;

    gap: 8px;

    align-items: stretch; /* Растягиваем элементы по высоте */

    margin-bottom: 10px;

}



.comment-form-modal input {

    flex: 1; /* Занимает все доступное пространство */

    padding: 10px 15px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 5px;

    color: var(--light-gray);

    height: 40px; /* Фиксированная высота */

    font-size: 14px;

    min-width: 0; /* Чтобы input мог сжиматься */

}



.comment-form-modal button {

    padding: 0 15px; /* Уменьшаем padding по бокам */

    background: rgba(255, 255, 255, 0.9);

    border: none;

    border-radius: 5px;

    color: #1a1a1a;

    cursor: pointer;

    white-space: nowrap;

    height: 40px; /* Такая же высота как у input */

    font-weight: 500;

    font-size: 14px;

    min-width: 80px; /* Очень маленькая кнопка */

    flex-shrink: 0; /* Не даем кнопке сжиматься */

}



.comment-options {

    display: flex;

    align-items: center;

    font-size: 14px;

    color: #888;

    margin-top: 5px;

}



.comment-options label {

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    padding: 5px 0;

}



.comment-options input[type="checkbox"] {

    margin: 0;

    width: 16px;

    height: 16px;

}



/* Пагинация */

.devlog-pagination {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 30px;

}



.pagination-btn {

    padding: 8px 15px;

    background: rgba(255, 255, 255, 0.05);

    border: none;

    border-radius: 5px;

    color: var(--light-gray);

    cursor: pointer;

    transition: all 0.3s;

}



.pagination-btn:hover {

    background: rgba(255, 255, 255, 0.1);

}



.pagination-btn.active {

    background: rgba(255, 255, 255, 0.9);

    color: #1a1a1a;

}



/* Адаптивность */

@media (max-width: 768px) {

    .devlog-container-enhanced {

        grid-template-columns: 1fr;

    }



    .devlogs-grid {

        grid-template-columns: 1fr;

    }



    .editor-container {

        grid-template-columns: 1fr;

    }



    .devlog-meta-info {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }



    .comment-input-row {

        flex-direction: column;

        align-items: stretch;

    }



    .comment-form-modal input,

    .comment-form-modal button {

        width: 100%;

        min-width: auto;

    }

}

/* Форма комментариев - инпут и кнопка в одной строке */

.comment-form-modal {

    margin-top: 20px;

}



.comment-form-modal .comment-options {

    display: flex;

    gap: 10px;

    align-items: stretch; /* Растягиваем элементы по высоте */

    margin-bottom: 10px;

}



.comment-form-modal textarea {

    flex: 1; /* Занимает все доступное пространство */

    padding: 10px 15px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 5px;

    color: var(--light-gray);

    resize: vertical;

    min-height: 40px;

    max-height: 120px;

    font-size: 14px;

    line-height: 1.5;

    min-width: 0; /* Чтобы textarea мог сжиматься */

    height: 40px; /* Фиксированная начальная высота */

}



.comment-form-modal .form-btn.primary {

    padding: 0 20px;

    background: rgba(255, 255, 255, 0.9);

    border: none;

    border-radius: 5px;

    color: #1a1a1a;

    cursor: pointer;

    white-space: nowrap;

    height: 40px; /* Такая же высота как у textarea */

    font-weight: 500;

    font-size: 14px;

    min-width: 100px; /* Минимальная ширина кнопки */

    flex-shrink: 0; /* Не даем кнопке сжиматься */

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition: all 0.3s;

}



.comment-form-modal .form-btn.primary:hover {

    background: rgba(255, 255, 255, 1);

    transform: translateY(-1px);

}



.comment-form-modal label {

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    font-size: 14px;

    color: #888;

    margin-top: 5px;

}



.comment-form-modal label input[type="checkbox"] {

    margin: 0;

    width: 16px;

    height: 16px;

}



/* Адаптивность */

@media (max-width: 768px) {

    .comment-form-modal .comment-options {

        flex-direction: column;

        align-items: stretch;

    }



    .comment-form-modal textarea,

    .comment-form-modal .form-btn.primary {

        width: 100%;

        min-width: auto;

    }

}

.comment-form-modal {

    display: flex !important;

    align-items: center !important;

    background-color: var(--element-bg) !important;

    border: 1px solid var(--border-color) !important;

    border-radius: 24px !important;

    padding: 4px 4px 4px 16px !important;

    margin-bottom: 20px !important;

    position: relative !important;

}



#newCommentInput {

    flex: 1 !important;

    min-height: 32px !important;

    max-height: 100px !important;

    height: 32px !important;

    padding: 6px 0 !important;

    background: transparent !important;

    border: none !important;

    color: var(--light-gray) !important;

    font-family: inherit !important;

    font-size: 14px !important;

    line-height: 1.4 !important;

    resize: none !important;

    outline: none !important;

    margin: 0 !important;

    box-sizing: border-box !important;

}



#newCommentInput::placeholder {

    color: rgba(208, 215, 217, 0.5) !important;

}



.comment-options {

    display: flex !important;

    align-items: center !important;

    margin-left: 8px !important;

}

.empty-chat-state {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 300px;

    padding: 1.5rem 1rem;

    text-align: center;

    color: #6b7280;

}



.empty-chat-state i.fa-comments {

    font-size: 2.75rem;

    color: #9ca3af;

    margin-bottom: 1.25rem;

}



.empty-chat-state h3 {

    font-size: 1.2rem;

    font-weight: 500;

    color: #4b5563;

    margin-bottom: 0.5rem;

}



.empty-chat-state p {

    font-size: 0.875rem;

    max-width: 350px;

    line-height: 1.4;

    color: #6b7280;

    margin-bottom: 1.5rem;

}



.empty-chat-actions {

    margin-top: 0.25rem;

}



.comment-options .form-btn.primary {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 120px !important;

    height: 36px !important;

    min-width: 70px !important;

    min-height: 36px !important;

    padding: 0 !important;

    margin: 0 !important;

    margin-right: 10px !important; /* Добавлен отступ справа */

    background-color: #ffffff !important;

    color: var(--dark-gray) !important;

    border: none !important;

    border-radius: 18px !important;

    cursor: pointer !important;

    transition: all 0.3s ease !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;

    font-weight: 600 !important;

    font-size: 14px !important;

}

.comment-options .form-btn.primary:hover {

    background-color: #f5f5f5 !important;

    transform: scale(1.05) !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;

}



.comment-options .form-btn.primary:active {

    transform: scale(0.95) !important;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;

}



.comment-options .form-btn.primary i {

    font-size: 16px !important;

    margin-right: 6px !important;

    color: var(--dark-gray) !important;

}

/* Скрыть скроллбар для всех элементов */

* {

  -ms-overflow-style: none;  /* IE и Edge */

  scrollbar-width: none;      /* Firefox */

}



*::-webkit-scrollbar {

  display: none; /* Chrome, Safari и Opera */

}



/* Если нужно оставить прокрутку, но без видимого скроллбара */

body {

  overflow-y: scroll;

  -ms-overflow-style: none; /* IE и Edge */

  scrollbar-width: none; /* Firefox */

}



body::-webkit-scrollbar {

  display: none; /* Chrome, Safari и Opera */

}

.comment-delete-btn {

    background: none;

    border: none;

    color: #d1d5db; /* светло-серый */

    cursor: pointer;

    padding: 4px 8px;

    font-size: 16px;

    transition: color 0.2s;

}



.comment-delete-btn:hover {

    color: #f3f4f6; /* бело-серый при наведении */

}

/* ========== СТРОГИЕ СТИЛИ ДЛЯ ЧАТА ========== */

.terminal-chat-container {

    background: var(--element-bg);

    border: 1px solid var(--border-color);

    position: relative;

    height: 400px;

    width: 600px;

    display: flex;

    flex-direction: column;

    margin: 0;

    position: relative;

}



.terminal-chat-container::before {

    content: '>';

    position: absolute;

    top: -8px;

    left: 15px;

    background: var(--element-bg);

    padding: 0 10px;

    color: var(--light-gray);

    font-size: 12px;

    z-index: 2;

}



.terminal-chat-header {

    padding: 12px 15px;

    background: var(--element-bg);

    border-bottom: 1px solid var(--border-color);

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

}



.terminal-chat-header .terminal-prompt {

    color: var(--light-gray);

    font-weight: bold;

    margin-right: 10px;

    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;

}



.terminal-chat-header .terminal-text {

    color: var(--light-gray);

    font-size: 13px;

    font-weight: 400;

    letter-spacing: 0.2px;

}



.chat-status {

    display: flex;

    align-items: center;

    gap: 8px;

}



.status-dot {

    width: 6px;

    height: 6px;

    background: #666;

}



.status-dot.active {

    background: #666;

}



.status-text {

    color: #666;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.terminal-chat-history {

    flex: 1;

    overflow-y: auto;

    padding: 15px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    background: var(--element-bg);

}



/* ОСНОВНОЙ СТИЛЬ СООБЩЕНИЙ */

.terminal-line {

    display: flex;

    align-items: baseline;

    line-height: 1.4;

    padding: 0;

    margin: 0;

    flex-wrap: nowrap;

    white-space: nowrap;

    position: relative;

}



/* Для админских сообщений добавляем отступ сверху для приписки */

.terminal-line.admin-message {

    padding-top: 12px; /* Место для приписки сверху */

    margin-top: 4px;

    margin-bottom: 4px;

}



/* СУПЕР МЕЛКАЯ ПРИПИСКА ADMIN С ОБВОДКОЙ НАД НИКОМ */

.admin-prefix {

    font-size: 6px;

    color: #ff4d4d;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    font-weight: bold;

    display: inline-block;

    line-height: 1;

    background: rgba(255, 77, 77, 0.08);

    padding: 1px 3px;

    border-radius: 1px;

    border: 1px solid rgba(255, 77, 77, 0.3);

    position: absolute;

    top: -2px; /* Позиционируем над сообщением */

    left: 0;

    z-index: 1;

}



.terminal-line .terminal-prompt {

    color: #888;

    font-weight: normal;

    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;

    font-size: 12px;

    margin-right: 6px;

    flex-shrink: 0;

    white-space: nowrap;

}



/* Админские сообщения: обычный цвет для ника и текста */

.terminal-line.admin-message .terminal-prompt {

    color: #888; /* Обычный цвет */

}



.terminal-line .terminal-output {
    color: var(--light-gray);
    word-break: break-word;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    flex: 1;

    white-space: normal;

    margin-left: 0;
    padding-left: 0;
}

.terminal-line[data-chat-message="1"] {
    cursor: context-menu;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 4px;
}

.terminal-line[data-chat-message="1"] .terminal-prompt {
    margin-right: 0;
}

.terminal-line[data-chat-message="1"] .terminal-output {
    width: 100%;
}

.chat-message-text {
    display: block;
    width: 100%;
}

.chat-md-paragraph + .chat-md-paragraph,
.chat-md-paragraph + .chat-md-quote,
.chat-md-paragraph + .chat-md-list,
.chat-md-quote + .chat-md-paragraph,
.chat-md-quote + .chat-md-list,
.chat-md-heading + .chat-md-paragraph,
.chat-md-heading-sm + .chat-md-paragraph,
.chat-md-list + .chat-md-paragraph {
    margin-top: 4px;
}

.chat-md-heading {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.chat-md-heading-sm {
    color: #eef1f3;
    font-size: 12px;
    font-weight: 700;
}

.chat-md-quote {
    color: rgba(214, 220, 226, 0.72);
    padding-left: 8px;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
}

.chat-md-list {
    margin: 0;
    padding-left: 18px;
}

.chat-md-list li + li {
    margin-top: 3px;
}

.terminal-line .terminal-output {
    display: block;
    min-width: 0;
}

.chat-reply-inline {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 4px 8px 4px;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.chat-reply-inline-head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 1px;
    min-width: 0;
}

.chat-reply-arrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    line-height: 1;
    flex-shrink: 0;
}

.chat-reply-inline-user {
    color: #f1f4f5;
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.chat-reply-inline-preview {
    color: rgba(214, 220, 226, 0.68);
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.chat-reply-inline-text {
    display: block;
    width: 100%;
    margin-top: 1px;
    color: #eef1f3;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
}

.chat-mention {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 1px 6px;
    display: inline-block;
}

.chat-inline-code {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 11px;
}

.chat-spoiler {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border-radius: 10px;
    padding: 2px 8px;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.chat-spoiler:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.14);
}

.chat-spoiler-mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgba(22, 22, 22, 0.98), rgba(34, 34, 34, 0.95));
    opacity: 1;
    transition: opacity 0.28s ease, transform 0.32s ease, filter 0.32s ease;
    pointer-events: none;
}

.chat-spoiler-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.chat-spoiler-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    animation: chatSpoilerFloat 1.25s ease-in-out infinite;
}

.chat-spoiler-dots span:nth-child(2) { animation-delay: 0.12s; }
.chat-spoiler-dots span:nth-child(3) { animation-delay: 0.24s; }
.chat-spoiler-dots span:nth-child(4) { animation-delay: 0.36s; }
.chat-spoiler-dots span:nth-child(5) { animation-delay: 0.48s; }

.chat-spoiler-text {
    display: inline;
    opacity: 1;
}

.chat-spoiler[data-spoiler-open="1"] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

.chat-spoiler[data-spoiler-open="1"] .chat-spoiler-mask {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(6px);
}

@keyframes chatSpoilerFloat {
    0%, 100% {
        transform: translateY(0) scale(0.9);
        opacity: 0.45;
    }
    50% {
        transform: translateY(-2px) scale(1);
        opacity: 1;
    }
}

.terminal-line .terminal-output strong {
    font-weight: 700;
    color: #ffffff;
}

.terminal-line .terminal-output em {
    font-style: italic;
    color: #e5e8ea;
}

.terminal-line .terminal-output s {
    opacity: 0.72;
}

.terminal-line .terminal-output a {
    color: #f1f4f5;
    text-decoration: underline;
}


/* Админские сообщения: обычный цвет для текста */

.terminal-line.admin-message .terminal-output {

    color: var(--light-gray); /* Обычный цвет */

}



/* Время такого же размера как ник */

.message-time {

    color: #666;

    font-size: 12px;

    margin-left: 4px;

    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;

    display: inline;

}



.separator {

    display: flex;

    align-items: center;

    margin: 8px 0;

}



.separator::before,

.separator::after {

    content: '';

    flex: 1;

    height: 1px;

    background: var(--border-color);

}



.separator-text {

    padding: 0 12px;

    color: #666;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    white-space: nowrap;

}



.terminal-input-container {
    border-top: 1px solid var(--border-color);
    background: var(--element-bg);
    padding: 12px 15px;
}

.chat-reply-banner {
    margin-bottom: 10px;
    padding: 9px 11px 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(14, 14, 14, 0.98));
    border-radius: 0 10px 10px 0;
}

.chat-reply-banner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.chat-reply-banner-head span {
    color: #eef1f3;
    font-size: 11px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    letter-spacing: 0.02em;
}

.chat-reply-banner-body {
    color: rgba(214, 220, 226, 0.66);
    font-size: 11px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    line-height: 1.45;
    max-height: 3.1em;
    overflow: hidden;
}

.chat-reply-close {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.64);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}


.terminal-input-line {

    display: flex;

    align-items: center;

    margin-bottom: 6px;

}



.terminal-input {

    width: 100%;

    background: var(--dark-gray);

    border: 1px solid var(--border-color);

    color: var(--light-gray);

    padding: 10px 12px;

    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;

    font-size: 12px;

    transition: border-color 0.2s ease;

    outline: none;

}



.terminal-input:focus {

    border-color: #666;

}



.terminal-input:disabled {

    background: rgba(26, 26, 26, 0.8);

    cursor: not-allowed;

}



.terminal-input::placeholder {

    color: #666;

}



.terminal-input-info {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 10px;

    color: #666;

}



.info-text {

    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;

}



#charCounter {

    color: #888;

}



#chatCDInfo {

    color: #666;

}



/* Стили для скроллбара внутри чата */

.terminal-chat-history::-webkit-scrollbar {

    width: 4px;

}



.terminal-chat-history::-webkit-scrollbar-track {

    background: transparent;

}



.terminal-chat-history::-webkit-scrollbar-thumb {

    background: #333;

}



.terminal-chat-history::-webkit-scrollbar-thumb:hover {

    background: #444;

}



/* Стили для разных типов сообщений */

.message-system .terminal-output {

    color: #666;

    font-style: normal;

}



.message-user .terminal-prompt {

    color: #888;

}



.message-error .terminal-output {

    color: #888;

    border-left: 2px solid #666;

    padding-left: 8px;

}



/* УБРАТЬ ВСЕ АНИМАЦИИ */

@keyframes none {

    0% { opacity: 1; }

    100% { opacity: 1; }

}



/* Адаптивность */

@media (max-width: 768px) {

    .terminal-chat-container {

        margin: 0;

        left: -8px;

        height: 400px;

        width: calc(100% + 16px);

    }



    .terminal-line .terminal-prompt {

        font-size: 11px;

    }



    .terminal-chat-header {

        padding: 10px;

    }



    .terminal-chat-history {

        padding: 10px;

        gap: 6px;

    }



    .admin-prefix {

        font-size: 5px;

        padding: 0.5px 2px;

        top: -1px;

    }



    .message-time {

        font-size: 11px;

    }



    .terminal-line {

        flex-wrap: wrap;

        white-space: normal;

    }



    .terminal-line.admin-message {

        padding-top: 10px;

    }

}



/* Стиль для статуса "отправка..." */

.sending-status {

    color: #666;

    font-size: 10px;

    font-style: italic;

    padding: 2px 0;

}



/* Стиль для цитат или ответов */

.message-quote {

    border-left: 2px solid #333;

    padding-left: 10px;

    margin: 4px 0;

    color: #888;

    font-size: 11px;

    font-style: italic;

}



/* Ховер эффекты (минимальные) */

.terminal-line:hover {

    background: rgba(42, 42, 42, 0.3);

}



.terminal-input:hover {

    border-color: #555;

}



/* Отключенные состояния */

.terminal-input:disabled {

    color: #666;

    background: rgba(26, 26, 26, 0.8);

}



/* Фокус состояния для доступности */

.terminal-input:focus-visible {

    outline: 1px solid #666;

    outline-offset: 1px;

}



/* Стиль для уведомлений в чате */

.chat-notification {

    background: rgba(42, 42, 42, 0.5);

    border: 1px solid #333;

    padding: 8px 12px;

    margin: 8px 0;

    font-size: 11px;

    color: #888;

    text-align: center;

}

    /* ========== СТИЛИ ДЛЯ АДМИН ПАНЕЛИ ========== */

        .admin-container {

            display: grid;

            grid-template-columns: 250px 1fr;

            gap: 30px;

            margin: 30px 0;

        }



        .admin-sidebar {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 20px;

            position: relative;

            height: fit-content;

        }



        .admin-sidebar::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .admin-nav {

            display: flex;

            flex-direction: column;

            gap: 10px;

        }



        .admin-nav-item {

            padding: 12px 15px;

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            border-radius: 5px;

            color: var(--light-gray);

            cursor: pointer;

            transition: all 0.3s ease;

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .admin-nav-item:hover {

            background: rgba(42, 42, 42, 0.5);

            border-color: var(--light-gray);

        }



        .admin-nav-item.active {

            background: rgba(110, 231, 183, 0.1);

            border-color: rgba(110, 231, 183, 0.3);

        }



        .admin-content {

            background: var(--element-bg);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 25px;

            position: relative;

            min-height: 600px;

        }



        .admin-content::before {

            content: '>';

            position: absolute;

            top: -8px;

            left: 15px;

            background: var(--element-bg);

            padding: 0 10px;

            color: var(--light-gray);

            font-size: 12px;

        }



        .admin-section {

            display: none;

        }



        .admin-section.active {

            display: block;

        }



        .admin-stats {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

            gap: 20px;

            margin-bottom: 30px;

        }



        .stat-card {

            background: rgba(42, 42, 42, 0.3);

            border: 1px solid var(--border-color);

            border-radius: 8px;

            padding: 20px;

            text-align: center;

            transition: all 0.3s ease;

        }



        .stat-card:hover {

            transform: translateY(-5px);

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

        }



        .stat-icon {

            font-size: 24px;

            margin-bottom: 10px;

            color: var(--light-gray);

        }



        .stat-value {

            font-size: 32px;

            font-weight: bold;

            color: var(--light-gray);

            margin-bottom: 5px;

        }



        .stat-label {

            color: #888;

            font-size: 12px;

        }



        .admin-table {

            width: 100%;

            border-collapse: collapse;

            margin: 20px 0;

            font-size: 12px;

        }



        .admin-table th,

        .admin-table td {

            border: 1px solid var(--border-color);

            padding: 12px;

            text-align: left;

        }



        .admin-table th {

            background: rgba(42, 42, 42, 0.5);

            color: var(--light-gray);

            font-weight: 600;

        }



        .admin-table tr:hover {

            background: rgba(42, 42, 42, 0.3);

        }



        .user-actions {

            display: flex;

            gap: 5px;

        }



        .admin-btn {

            padding: 6px 12px;

            background: rgba(42, 42, 42, 0.5);

            border: 1px solid var(--border-color);

            color: var(--light-gray);

            border-radius: 4px;

            font-size: 11px;

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .admin-btn:hover {

            background: rgba(42, 42, 42, 0.8);

        }



        .admin-btn.primary {

            background: var(--light-gray);

            color: var(--dark-gray);

            border-color: var(--light-gray);

        }



        .admin-btn.primary:hover {

            background: #b0b7b9;

        }



        .admin-form {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 20px;

            margin-bottom: 20px;

        }



        .form-full-width {

            grid-column: 1 / -1;

        }

        /* Сообщения тикета - компактный вариант */

.admin-message-content {

    padding: 10px 12px;

    margin: 3px 0;

    line-height: 1.4;

    font-size: 12px;

    border-radius: 6px;

}



/* Уменьшаем отступы и толщину границ */

.admin-message-content.admin {

    border-left-width: 2px;

    padding-left: 10px;

}



.admin-message-content.user {

    border-left-width: 2px;

    padding-left: 10px;

}



/* Компактное поле ввода */

.admin-chat-input-area {

    padding: 12px 15px;

}



.admin-chat-input {

    padding: 8px 10px;

    min-height: 60px;

    font-size: 12px;

    border-radius: 4px;

}



.admin-chat-send-btn {

    padding: 8px 16px;

    font-size: 12px;

    border-radius: 4px;

}



/* Уменьшаем отступы на мобильных */

@media (max-width: 768px) {

    .admin-chat-input-area {

        padding: 10px;

    }



    .admin-chat-input {

        min-height: 50px;

    }

}

/* ========== КОМПАКТНЫЙ СТИЛЬ АДМИН ЧАТА ========== */

#adminChat {

    padding: 0;

}



/* Заголовок */

#adminChat h3 {

    color: var(--light-gray);

    font-size: 15px;

    margin: 0;

    display: flex;

    align-items: center;

    gap: 8px;

}



/* Контейнер сообщений */

.admin-chat-messages {

    display: flex;

    flex-direction: column;

    gap: 10px;

    max-height: 600px;

    overflow-y: auto;

    padding: 5px 2px;

}



.admin-chat-messages::-webkit-scrollbar {

    width: 3px;

}



/* Карточка сообщения - убрали фон и обводку */

.admin-chat-message {

    padding: 10px 12px;

    border-radius: 3px;

    transition: all 0.2s ease;

    position: relative;

}



/* Сообщение от админа - левая красная полоска */

.admin-chat-message.admin {

    border-left: 2px solid rgba(231, 76, 60, 0.7);

    background: rgba(231, 76, 60, 0.03);

}



/* Сообщение от пользователя - правая голубая полоска */

.admin-chat-message.user {

    border-right: 2px solid rgba(52, 152, 219, 0.5);

    background: rgba(52, 152, 219, 0.02);

}



/* Заголовок сообщения - компактный */

.admin-chat-message-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 6px;

}



/* Имя пользователя */

.admin-chat-message-user {

    font-weight: 500;

    font-size: 13px;

}



/* Админ - красный цвет */

.admin-chat-message-user.admin {

    color: rgba(231, 76, 60, 0.9);

}



/* Пользователь - белый цвет */

.admin-chat-message-user.user {

    color: #ffffff;

}



/* IP адрес - менее заметный */

.admin-chat-message-ip {

    color: #777;

    font-size: 10px;

    font-family: 'Consolas', monospace;

    margin-left: 8px;

}



/* Время сообщения */

.admin-chat-message-time {

    color: #777;

    font-size: 10px;

    font-family: 'Consolas', monospace;

}



/* Текст сообщения - компактный */

.admin-chat-message-text {

    font-size: 12px;

    line-height: 1.4;

    margin: 0;

    padding-left: 5px;

}



/* Текст админа - красный */

.admin-chat-message.admin .admin-chat-message-text {

    color: rgba(231, 76, 60, 0.85);

}



/* Текст пользователя - белый */

.admin-chat-message.user .admin-chat-message-text {

    color: #ffffff;

}



/* Панель действий - компактная */

.admin-chat-message-actions {

    display: flex;

    justify-content: flex-end;

    margin-top: 8px;

    padding-top: 8px;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

}



/* Кнопка удаления */

.admin-chat-delete-btn {

    background: transparent;

    border: none;

    color: rgba(231, 110, 110, 0.7);

    padding: 4px 8px;

    font-size: 10px;

    cursor: pointer;

    transition: color 0.2s ease;

    display: flex;

    align-items: center;

    gap: 4px;

}



.admin-chat-delete-btn:hover {

    color: #e76e6e;

}



/* Адаптивность */

@media (max-width: 768px) {

    .admin-chat-messages {

        gap: 8px;

        max-height: 500px;

    }



    .admin-chat-message {

        padding: 8px 10px;

    }



    .admin-chat-message-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 2px;

        margin-bottom: 4px;

    }



    .admin-chat-message-time {

        align-self: flex-start;

    }

}



/* Сообщение при наведении - легкий фон */

.admin-chat-message:hover {

    background: rgba(42, 42, 42, 0.15);

}



/* Удаленное сообщение */

.admin-chat-message.deleted .admin-chat-message-text {

    color: #666;

    font-style: italic;

    font-size: 11px;

}



.admin-chat-message.deleted .admin-chat-message-user,

.admin-chat-message.deleted .admin-chat-message-ip {

    opacity: 0.5;

}

/* Общие стили для статусных блоков */

.ip-status {

    padding: 8px;

    border-radius: 4px;

    background: rgba(0, 0, 0, 0.2);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.ip-status-header {

    display: flex;

    align-items: center;

    gap: 10px;

}



.ip-status-badge {

    padding: 3px 8px;

    border-radius: 3px;

    font-size: 11px;

    font-weight: bold;

    text-transform: uppercase;

}



.ip-status-badge.active {

    background: rgba(40, 167, 69, 0.3);

    color: #28a745;

    border: 1px solid rgba(40, 167, 69, 0.5);

}



.ip-status-badge.banned {

    background: rgba(220, 53, 69, 0.3);

    color: #dc3545;

    border: 1px solid rgba(220, 53, 69, 0.5);

}



.ip-status-badge.unknown {

    background: rgba(108, 117, 125, 0.3);

    color: #6c757d;

    border: 1px solid rgba(108, 117, 125, 0.5);

}



.ip-ban-reason {

    margin-top: 5px;

    padding-top: 5px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    font-size: 12px;

    color: #888;

}



.ip-actions-buttons {

    display: flex;

    gap: 5px;

    margin-top: 10px;

}

/* Индикатор кто есть кто в углу */

.admin-chat-message::before {

    content: '';

    position: absolute;

    top: 5px;

    width: 12px;

    height: 12px;

    border-radius: 50%;

}



/* Админ - красный кружок слева */

.admin-chat-message.admin::before {

    left: 2px;

    background: rgba(231, 76, 60, 0.5);

}



/* Пользователь - голубой кружок справа */

.admin-chat-message.user::before {

    right: 2px;

    background: rgba(52, 152, 219, 0.5);

}



/* ========== ПОЛНАЯ ПЕРЕРАБОТКА МОДАЛЬНОГО ОКНА РЕДАКТИРОВАНИЯ ПОЛЬЗОВАТЕЛЯ ========== */



/* Основной контейнер */

#editUserModal {

    display: none !important;

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    background: rgba(0, 0, 0, 0.8) !important;

    z-index: 10000 !important;

    justify-content: center !important;

    align-items: center !important;

    backdrop-filter: blur(5px) !important;

}



#editUserModal[style*="display: flex"] {

    display: flex !important;

}



/* Контент модального окна */

#editUserModal .modal-content {
    max-width: 1000px !important;
    width: 90% !important;

    max-height: 85vh !important;

    overflow-y: auto !important;

    background: #1a1a1a !important;  /* var(--element-bg) */

    border: 1px solid #2a2a2a !important; /* var(--border-color) */

    border-radius: 8px !important;

    padding: 30px 35px !important;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
}

/* ================= ADMIN CHAT REDESIGN (FINAL OVERRIDE) ================= */
#adminChat {
    padding: 0 !important;
}

#adminChat > div:first-child {
    margin-bottom: 14px !important;
    padding: 0 2px !important;
}

#adminChat > div:first-child h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    color: #f2f4f5 !important;
}

#adminChat > div:first-child .admin-btn {
    border: none !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: #f0f2f3 !important;
    padding: 9px 14px !important;
}

#adminChat > div:first-child .admin-btn:hover {
    background: rgba(255, 255, 255, 0.13) !important;
}

#adminChat .admin-chat-controls {
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#adminChat .search-box {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
}

#adminChat .search-input {
    border: none !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f0f2f3 !important;
    padding: 11px 13px !important;
}

#adminChat .search-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.17) !important;
}

#adminChat .search-btn {
    border: none !important;
    border-radius: 12px !important;
    min-width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    color: #f0f2f3 !important;
}

#adminChat .search-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

#adminChatMessages {
    background: rgba(255, 255, 255, 0.025) !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 14px !important;
    min-height: 500px !important;
    max-height: 68vh !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 28px rgba(0, 0, 0, 0.22) !important;
}

#adminChat .admin-chat-message {
    position: relative !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#adminChat .admin-chat-message:hover {
    background: rgba(255, 255, 255, 0.09) !important;
}

#adminChat .admin-chat-message.admin,
#adminChat .admin-chat-message.user,
#adminChat .admin-chat-message.guest {
    border-left: none !important;
    border-right: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

#adminChat .admin-chat-message::before {
    display: none !important;
}

#adminChat .admin-chat-message-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

#adminChat .admin-chat-message-user {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #f2f4f5 !important;
}

#adminChat .admin-chat-message-user.admin {
    color: #f2f4f5 !important;
}

#adminChat .admin-chat-message-ip {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 10px !important;
    margin-left: 8px !important;
}

#adminChat .admin-chat-message-time {
    color: rgba(255, 255, 255, 0.42) !important;
    font-size: 10px !important;
}

#adminChat .admin-chat-message-text {
    color: #e8ebec !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

#adminChat .admin-chat-message.admin .admin-chat-message-text,
#adminChat .admin-chat-message.user .admin-chat-message-text {
    color: #e8ebec !important;
}

#adminChat .admin-chat-message-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}

#adminChat .admin-chat-delete-btn {
    border: none !important;
    border-radius: 10px !important;
    background: rgba(255, 90, 90, 0.12) !important;
    color: #ff9b9b !important;
    padding: 6px 9px !important;
    font-size: 10px !important;
}

#adminChat .admin-chat-delete-btn:hover {
    background: rgba(255, 90, 90, 0.2) !important;
    color: #ffd4d4 !important;
}

@media (max-width: 768px) {
    #adminChat > div:first-child {
        gap: 10px !important;
    }

    #adminChat > div:first-child h3 {
        font-size: 16px !important;
    }

    #adminChatMessages {
        min-height: 420px !important;
        max-height: 62vh !important;
        padding: 10px !important;
    }

    #adminChat .admin-chat-message {
        padding: 9px 10px !important;
    }
}

/* Admin chat: make admin messages visibly distinct */
#adminChat .admin-chat-message.admin {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.07)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

#adminChat .admin-chat-message.admin .admin-chat-message-user {
    color: #ffffff !important;
}

#adminChat .admin-chat-message.admin::after {
    content: 'ADMIN';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.05);
}

#adminChat .admin-chat-message.admin .admin-chat-message-header {
    padding-right: 56px !important;
}

/* Admin system tab redesign */
#adminSystem {
    padding: 2px 0 !important;
}

#adminSystem h3 {
    margin-bottom: 14px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #f2f4f5 !important;
    letter-spacing: 0.01em !important;
}

#adminSystem .admin-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 30px rgba(0, 0, 0, 0.2) !important;
}

#adminSystem .form-group {
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border-radius: 14px !important;
    border: none !important;
    padding: 12px !important;
}

#adminSystem .form-group.form-full-width {
    grid-column: 1 / -1 !important;
    background: transparent !important;
    padding: 0 !important;
}

#adminSystem .form-label {
    display: block !important;
    margin-bottom: 8px !important;
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

#adminSystem .form-input {
    border: none !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: #f1f3f4 !important;
    padding: 11px 12px !important;
}

#adminSystem .form-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}

#adminSystem .form-group label.form-label:has(input[type="checkbox"]) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    cursor: pointer !important;
    min-height: 44px !important;
}

#adminSystem input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #ffffff !important;
    flex: 0 0 auto !important;
}

#adminSystem .form-btn.primary {
    width: 100% !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 13px 16px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}

#adminSystem .form-btn.primary:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 980px) {
    #adminSystem .admin-form {
        grid-template-columns: 1fr !important;
    }
}


#editUserModal .modal-content::before {

    content: '>' !important;

    position: absolute !important;

    top: -8px !important;

    left: 15px !important;

    background: #1a1a1a !important;

    padding: 0 10px !important;

    color: #d0d7d9 !important;

    font-size: 12px !important;

    z-index: 2 !important;

}



/* Заголовок */

#editUserModal .modal-header {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    margin-bottom: 25px !important;

    padding-bottom: 15px !important;

    border-bottom: 1px solid #2a2a2a !important;

}



#editUserModal .modal-title {

    font-size: 22px !important;

    font-weight: 600 !important;

    color: #d0d7d9 !important;

    letter-spacing: 0.5px !important;

    text-transform: uppercase !important;

    position: relative !important;

    padding-left: 15px !important;

    margin: 0 !important;

}



#editUserModal .modal-title::before {

    content: '>' !important;

    position: absolute !important;

    left: -5px !important;

    top: 0 !important;

    color: #888 !important;

    font-size: 20px !important;

}



#editUserModal .modal-close {

    background: none !important;

    border: none !important;

    color: #d0d7d9 !important;

    font-size: 28px !important;

    cursor: pointer !important;

    width: 40px !important;

    height: 40px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 50% !important;

    transition: 0.2s !important;

}



#editUserModal .modal-close:hover {

    background: rgba(255, 255, 255, 0.1) !important;

}



/* Основная форма */

#editUserModal .admin-form {

    display: flex !important;

    flex-direction: column !important;

    gap: 20px !important;

    padding: 0 !important;

    background: transparent !important;

}



/* Группы полей */

#editUserModal .form-group {

    margin-bottom: 15px !important;

}



#editUserModal .form-label {

    display: block !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    color: #aaa !important;

    margin-bottom: 8px !important;

    letter-spacing: 0.3px !important;

    text-transform: uppercase !important;

}



#editUserModal .form-input {

    width: 100% !important;

    padding: 12px 15px !important;

    background: rgba(42, 42, 42, 0.4) !important;

    border: 1px solid #2a2a2a !important;

    border-radius: 6px !important;

    color: #d0d7d9 !important;

    font-size: 14px !important;

    transition: 0.2s !important;

    box-sizing: border-box !important;

}



#editUserModal .form-input:focus {

    border-color: #888 !important;

    outline: none !important;

    background: rgba(42, 42, 42, 0.6) !important;

}



#editUserModal .form-input[readonly] {

    background: rgba(26, 26, 26, 0.5) !important;

    color: #aaa !important;

    border-color: #333 !important;

    cursor: default !important;

}



/* Ряды полей */

#editUserModal .form-row {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 20px !important;

    margin-bottom: 15px !important;

}



/* Блоки IP, HWID, Server, Domain */

#editUserModal .ip-info-block {

    background: rgba(0, 0, 0, 0.15) !important;

    border: 1px solid #2a2a2a !important;

    border-radius: 8px !important;

    padding: 15px !important;

}



#editUserModal .ip-status {

    background: rgba(0, 0, 0, 0.25) !important;

    border-radius: 6px !important;

    padding: 12px !important;

    border-left: 3px solid transparent !important;

    margin-bottom: 10px !important;

}



#editUserModal .ip-status-header {

    display: flex !important;

    align-items: center !important;

    gap: 15px !important;

}



#editUserModal .ip-status-badge {

    padding: 4px 10px !important;

    border-radius: 20px !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    display: inline-block !important;

}



#editUserModal .ip-status-badge.active {

    background: rgba(40, 167, 69, 0.15) !important;

    color: #28a745 !important;

    border: 1px solid rgba(40, 167, 69, 0.3) !important;

}



#editUserModal .ip-status-badge.banned {

    background: rgba(220, 53, 69, 0.15) !important;

    color: #dc3545 !important;

    border: 1px solid rgba(220, 53, 69, 0.3) !important;

}



#editUserModal .ip-status-badge.unknown {

    background: rgba(108, 117, 125, 0.15) !important;

    color: #adb5bd !important;

    border: 1px solid rgba(108, 117, 125, 0.3) !important;

}



#editUserModal .ip-status-text {

    font-size: 13px !important;

    color: #d0d7d9 !important;

}



#editUserModal .ip-ban-reason {

    margin-top: 10px !important;

    padding-top: 10px !important;

    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;

    font-size: 12px !important;

    color: #dc3545 !important;

}



/* Кнопки действий */

#editUserModal .ip-actions-buttons {

    display: flex !important;

    gap: 8px !important;

    margin-top: 15px !important;

    flex-wrap: wrap !important;

}



#editUserModal .admin-btn.small {

    padding: 8px 14px !important;

    font-size: 12px !important;

    border-radius: 6px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    transition: 0.2s !important;

    border: 1px solid transparent !important;

    cursor: pointer !important;

    background: rgba(255, 255, 255, 0.05) !important;

    color: #d0d7d9 !important;

    border-color: #2a2a2a !important;

}



#editUserModal .admin-btn.small.danger {

    background: rgba(220, 53, 69, 0.1) !important;

    color: #dc3545 !important;

    border-color: rgba(220, 53, 69, 0.3) !important;

}



#editUserModal .admin-btn.small.danger:hover {

    background: rgba(220, 53, 69, 0.2) !important;

}



#editUserModal .admin-btn.small.success {

    background: rgba(40, 167, 69, 0.1) !important;

    color: #28a745 !important;

    border-color: rgba(40, 167, 69, 0.3) !important;

}



#editUserModal .admin-btn.small.success:hover {

    background: rgba(40, 167, 69, 0.2) !important;

}



#editUserModal .admin-btn.small:hover {

    background: rgba(255, 255, 255, 0.1) !important;

    border-color: #888 !important;

}



/* Специально для кнопки генерации токена */

#editUserModal .admin-btn.small[onclick="generateTokenForUser()"] {

    margin-top: 10px !important;

    width: 100% !important;

    justify-content: center !important;

    background: rgba(52, 152, 219, 0.1) !important;

    color: #3498db !important;

    border-color: rgba(52, 152, 219, 0.3) !important;

}



#editUserModal .admin-btn.small[onclick="generateTokenForUser()"]:hover {

    background: rgba(52, 152, 219, 0.2) !important;

}



/* Футер модального окна */

#editUserModal .modal-footer {

    display: flex !important;

    gap: 15px !important;

    justify-content: flex-end !important;

    align-items: center !important;

    margin-top: 30px !important;

    padding-top: 20px !important;

    border-top: 1px solid #2a2a2a !important;

}



#editUserModal .modal-footer .admin-btn {

    padding: 12px 25px !important;

    font-size: 14px !important;

    border-radius: 6px !important;

    font-weight: 600 !important;

    transition: 0.2s !important;

    cursor: pointer !important;

    background: rgba(255, 255, 255, 0.05) !important;

    color: #d0d7d9 !important;

    border: 1px solid #2a2a2a !important;

}



#editUserModal .modal-footer .admin-btn.primary {

    background: #d0d7d9 !important;

    color: #121212 !important;

    border: 1px solid #d0d7d9 !important;

}



#editUserModal .modal-footer .admin-btn.primary:hover {

    background: #b0b7b9 !important;

}



#editUserModal .modal-footer .admin-btn.danger {

    background: rgba(220, 53, 69, 0.1) !important;

    color: #dc3545 !important;

    border-color: rgba(220, 53, 69, 0.3) !important;

}



#editUserModal .modal-footer .admin-btn.danger:hover {

    background: rgba(220, 53, 69, 0.2) !important;

}



/* Адаптивность */

@media (max-width: 768px) {

    #editUserModal .modal-content {

        padding: 20px !important;

        width: 95% !important;

    }



    #editUserModal .form-row {

        grid-template-columns: 1fr !important;

        gap: 15px !important;

    }



    #editUserModal .modal-footer {

        flex-direction: column !important;

        gap: 10px !important;

    }



    #editUserModal .modal-footer .admin-btn {

        width: 100% !important;

        justify-content: center !important;

    }



    #editUserModal .ip-actions-buttons {

        flex-direction: column !important;

    }

}



/* Убираем лишние инлайн-стили, мешающие отображению */

#editUserIP,

#editUserHWID,

#editUserServerURL,

#editUserDomain {

    margin-bottom: 10px !important; /* оставляем, но можно контролировать */

}

/* ========== ЖЁСТКАЯ ПЕРЕРАБОТКА СООБЩЕНИЙ ЧАТА ПОДДЕРЖКИ ========== */



/* Общие контейнеры сообщений */

#adminSupport .admin-message-wrapper,

.admin-message-wrapper {

    max-width: 80% !important;

    margin-bottom: 12px !important;

    display: flex !important;

    flex-direction: column !important;

}



/* Сообщения админа – справа */

#adminSupport .admin-message-wrapper.admin-message,

.admin-message-wrapper.admin-message {

    align-self: flex-end !important;

}



/* Сообщения пользователя – слева */

#adminSupport .admin-message-wrapper.user-message,

.admin-message-wrapper.user-message {

    align-self: flex-start !important;

}



/* Шапка сообщения (имя + время) */

#adminSupport .admin-message-header,

.admin-message-header {

    display: flex !important;

    justify-content: space-between !important;

    align-items: baseline !important;

    margin-bottom: 4px !important;

    font-size: 11px !important;

}



/* Имя отправителя */

#adminSupport .admin-message-sender,

.admin-message-sender {

    font-weight: 600 !important;

    color: #d0d7d9 !important;

    font-size: 12px !important;

}



/* Время */

#adminSupport .admin-message-time,

.admin-message-time {

    color: #888 !important;

    font-size: 10px !important;

}



/* Текст сообщения */

#adminSupport .admin-message-content,

.admin-message-content {

    padding: 10px 14px !important;

    border-radius: 12px !important;

    font-size: 13px !important;

    line-height: 1.5 !important;

    word-wrap: break-word !important;

    background: rgba(0, 0, 0, 0.3) !important;

    border: 1px solid #2a2a2a !important;

    color: #d0d7d9 !important;

    max-width: 100% !important;

}



/* Админские сообщения – красный оттенок */

#adminSupport .admin-message-content.admin,

.admin-message-content.admin {

    background: rgba(220, 53, 69, 0.1) !important;

    border-color: rgba(220, 53, 69, 0.3) !important;

    border-bottom-right-radius: 4px !important;

}



/* Пользовательские сообщения – зелёный оттенок */

#adminSupport .admin-message-content.user,

.admin-message-content.user {

    background: rgba(40, 167, 69, 0.1) !important;

    border-color: rgba(40, 167, 69, 0.3) !important;

    border-bottom-left-radius: 4px !important;

}



/* Бейджи (АДМИН / ПОЛЬЗОВАТЕЛЬ) */

#adminSupport .admin-badge,

.admin-badge {

    background: rgba(220, 53, 69, 0.2) !important;

    color: #dc3545 !important;

    padding: 2px 6px !important;

    border-radius: 10px !important;

    font-size: 9px !important;

    margin-left: 6px !important;

    text-transform: uppercase !important;

}



#adminSupport .user-badge,

.user-badge {

    background: rgba(40, 167, 69, 0.2) !important;

    color: #28a745 !important;

    padding: 2px 6px !important;

    border-radius: 10px !important;

    font-size: 9px !important;

    margin-left: 6px !important;

    text-transform: uppercase !important;

}



/* Контейнер чата (если нужно) */

#adminSupport .admin-chat-container,

.admin-chat-container {

    background: rgba(0, 0, 0, 0.2) !important;

    border: 1px solid #2a2a2a !important;

    border-radius: 6px !important;

    overflow: hidden !important;

    display: flex !important;

    flex-direction: column !important;

    height: 500px !important;

}



#adminSupport .admin-chat-messages,

.admin-chat-messages {

    flex: 1 !important;

    overflow-y: auto !important;

    padding: 15px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 12px !important;

    background: rgba(0, 0, 0, 0.1) !important;

}
.admin-support-container {
    display: grid;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

#adminTicketsListContainer,
#adminTicketChatContainer {
    min-width: 0;
}

#adminSupport .admin-tickets-grid {
    gap: 16px;
    align-content: start;
}

#adminSupport .admin-ticket-compact {
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: 22px;
    padding: 18px 18px 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 28px rgba(0, 0, 0, 0.22);
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    animation: none;
}

#adminSupport .admin-ticket-compact::before {
    display: none;
}

#adminSupport .admin-ticket-compact:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 36px rgba(0, 0, 0, 0.26);
    border: none;
}

#adminSupport .ticket-header-compact {
    margin-bottom: 12px;
    align-items: center;
}

#adminSupport .ticket-id-compact {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.68);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
}

#adminSupport .ticket-title-compact {
    font-size: 15px;
    margin: 8px 0 10px;
    min-height: unset;
}

#adminSupport .ticket-preview-compact {
    font-size: 12px;
    color: rgba(255,255,255,0.62);
    line-height: 1.55;
    margin-bottom: 14px;
    min-height: unset;
}

#adminSupport .ticket-footer-compact {
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    align-items: flex-end;
}

#adminSupport .user-avatar-small {
    background: rgba(255,255,255,0.06);
    border: none;
    color: rgba(255,255,255,0.88);
}

#adminSupport .user-name {
    font-size: 12px;
}

#adminSupport .user-id,
#adminSupport .ticket-stat {
    color: rgba(255,255,255,0.48);
}

#adminSupport .ticket-stat i {
    color: rgba(255,255,255,0.68);
}

#adminSupport .priority-indicator-compact {
    border: none;
    padding: 5px 9px;
    border-radius: 999px;
}

#adminSupport .status-indicator-compact {
    margin-right: 8px;
}

#adminSupport .admin-chat-header {
    background: rgba(255,255,255,0.035);
    border: none;
    border-radius: 24px 24px 0 0;
    padding: 18px 20px;
}

#adminSupport .chat-ticket-title {
    font-size: 18px;
    font-weight: 700;
}

#adminSupport .chat-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
    color: rgba(255,255,255,0.58);
    font-size: 12px;
}

#adminSupport .ticket-actions-chat {
    margin: 12px 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#adminSupport .ticket-action-btn {
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: #fff;
    padding: 10px 14px;
}

#adminSupport .admin-chat-container {
    background: rgba(255,255,255,0.03);
    border: none;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 16px 34px rgba(0,0,0,0.24);
    height: 640px;
}

#adminSupport .admin-chat-container::before {
    display: none;
}

#adminSupport .admin-chat-messages {
    padding: 18px;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#adminSupport .admin-message-wrapper {
    margin: 0;
    max-width: min(82%, 540px);
}

#adminSupport .admin-message-wrapper.admin-message {
    align-self: flex-end;
}

#adminSupport .admin-message-wrapper.user-message {
    align-self: flex-start;
}

#adminSupport .admin-message-header {
    margin-bottom: 5px;
    gap: 8px;
}

#adminSupport .admin-message-sender {
    gap: 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.82);
}

#adminSupport .admin-badge,
#adminSupport .user-badge {
    display: none !important;
}

#adminSupport .admin-message-time {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}

#adminSupport .admin-message-content {
    border: none;
    border-radius: 18px;
    padding: 10px 13px;
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

#adminSupport .admin-message-content.admin {
    background: rgba(255,255,255,0.08);
    border-left: none;
    color: #fff;
    border-bottom-right-radius: 6px;
}

#adminSupport .admin-message-content.user {
    background: rgba(255,255,255,0.045);
    border-left: none;
    color: rgba(255,255,255,0.9);
    border-bottom-left-radius: 6px;
}

#adminSupport .admin-chat-input-area {
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
    padding: 14px;
}

#adminSupport .admin-chat-input-wrapper {
    gap: 10px;
    align-items: flex-end;
}

#adminSupport .admin-chat-input {
    background: rgba(255,255,255,0.04);
    border: none;
    border-radius: 18px;
    min-height: 60px;
    padding: 14px 16px;
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

#adminSupport .admin-chat-input:focus {
    border: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(255,255,255,0.08);
}

#adminSupport .admin-chat-send-btn {
    border: none;
    border-radius: 16px;
    height: 52px;
    min-width: 132px;
    padding: 0 18px;
    background: rgba(255,255,255,0.08);
    color: #fff;
}

#adminSupport .admin-chat-send-btn:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}

@media (max-width: 1200px) {
    .admin-support-container {
        grid-template-columns: 1fr;
    }
}

/* Admin support: restore stable layout and keep chat bubbles compact/equal */
#adminSupport .admin-support-container {
    display: block !important;
}

#adminSupport #adminTicketsListContainer,
#adminSupport #adminTicketChatContainer {
    width: 100% !important;
    min-width: 0 !important;
}

#adminSupport .admin-chat-container {
    height: 500px !important;
}

#adminSupport .admin-chat-messages {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#adminSupport .admin-message-wrapper {
    max-width: 82% !important;
    margin-bottom: 0 !important;
}

#adminSupport .admin-message-content {
    display: inline-block !important;
    width: fit-content !important;
    max-width: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 10px 13px !important;
}

#adminSupport .admin-message-content.admin,
#adminSupport .admin-message-content.user {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-left: none !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Final support chat/ticket layout fixes */
#adminSupport #adminTicketsListContainer,
#adminSupport #adminTicketsList {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#adminSupport .admin-chat-messages {
    gap: 8px !important;
}

#adminSupport .admin-message-wrapper {
    width: auto !important;
    max-width: 64% !important;
}

#adminSupport .admin-message-content,
#adminSupport .admin-message-content.admin,
#adminSupport .admin-message-content.user {
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #d0d7d9 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    padding: 8px 11px !important;
    border-radius: 10px !important;
    border-left: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Logout item full clickable area */
.logout-menu-item {
    cursor: pointer;
}

.logout-menu-item span,
.logout-menu-item i {
    pointer-events: none;
}

/* Team/Partners admin cards editor */
#adminTeam .project-people-editor,
#adminPartners .project-people-editor,
#adminProducts .project-people-editor {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#adminTeam .project-people-editor .admin-form,
#adminPartners .project-people-editor .admin-form,
#adminProducts .project-people-editor .admin-form {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 10px;
}

#adminTeam .project-people-editor .form-group,
#adminPartners .project-people-editor .form-group,
#adminProducts .project-people-editor .form-group {
    margin-bottom: 0;
}

#adminTeam .project-people-editor .form-group.form-full-width,
#adminPartners .project-people-editor .form-group.form-full-width,
#adminProducts .project-people-editor .form-group.form-full-width {
    grid-column: 1 / -1;
}

#adminTeam .project-people-list,
#adminPartners .project-people-list,
#adminProducts .project-people-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.project-person-card {
    background: rgba(255, 255, 255, 0.035);
    border-radius: 14px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.project-person-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.project-person-main {
    display: flex;
    gap: 10px;
    min-width: 0;
}

.project-person-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 42px;
}

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

.project-person-meta {
    min-width: 0;
}

.project-person-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--light-gray);
    word-break: break-word;
}

.project-person-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 3px;
    word-break: break-word;
}

.project-person-description {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.74);
    margin-bottom: 10px;
    word-break: break-word;
}

.project-person-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.project-person-links a {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    color: var(--light-gray);
    transition: background 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.project-person-links a:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.team-description {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 8px;
}

@media (max-width: 900px) {
    #adminTeam .project-people-editor .admin-form,
    #adminPartners .project-people-editor .admin-form,
    #adminProducts .project-people-editor .admin-form {
        grid-template-columns: 1fr;
    }
}

.chat-md-code {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.4;
}