/* Наши кастомные стили */
body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

.software-info {
    border-left: 4px solid #007bff;
}

/* Стили для главной страницы */
.hero-section {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

/* Стили для комментариев */
.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    h1 {
        font-size: 1.8rem;
    }

    .display-4 {
        font-size: 2.5rem;
    }
}

/* Стили для футера */
footer {
    margin-top: auto;
}

.time-circuit-controls {
    background: #000 !important;
    border: 1px solid var(--flux-capacitor-blue);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0, 168, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.stars-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.stars:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #eee, transparent),
        radial-gradient(2px 2px at 40px 70px, #fff, transparent),
        radial-gradient(1px 1px at 90px 40px, #ddd, transparent),
        radial-gradient(1px 1px at 130px 80px, #fff, transparent),
        radial-gradient(2px 2px at 160px 30px, #eee, transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: starsMove 50s linear infinite;
}

.stars2:before {
    background-image:
        radial-gradient(1px 1px at 50px 60px, #ccc, transparent),
        radial-gradient(1px 1px at 80px 20px, #eee, transparent),
        radial-gradient(2px 2px at 120px 50px, #fff, transparent),
        radial-gradient(1px 1px at 180px 90px, #ddd, transparent);
    background-size: 250px 150px;
    animation: starsMove 80s linear infinite;
    animation-delay: -20s;
}

.stars3:before {
    background-image:
        radial-gradient(1px 1px at 30px 80px, #fff, transparent),
        radial-gradient(2px 2px at 70px 10px, #eee, transparent),
        radial-gradient(1px 1px at 150px 60px, #ccc, transparent),
        radial-gradient(1px 1px at 190px 30px, #ddd, transparent);
    background-size: 300px 200px;
    animation: starsMove 100s linear infinite;
    animation-delay: -40s;
}

@keyframes starsMove {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-100px) translateX(-200px); }
}

.controls-container {
    color: #fff;
    position: relative;
    z-index: 1;
}

.controls-title {
    color: var(--flux-capacitor-blue);
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--flux-capacitor-blue);
    padding-bottom: 10px;
    text-shadow: 0 0 10px currentColor;
}

.controls-subtitle {
    color: var(--2015-neon);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 0 0 5px currentColor;
}

.controls-content {
    color: #e0e0e0;
    line-height: 1.6;
}

.controls-list {
    list-style: none;
    padding-left: 0;
}

.controls-list li {
    margin-bottom: 8px;
    padding: 5px 0;
    background: rgba(0, 168, 255, 0.1);
    border-radius: 4px;
    padding: 8px 12px;
    border-left: 3px solid var(--plutonium-green);
}

.controls-list i {
    color: var(--plutonium-green);
    width: 20px;
}

.controls-list strong {
    color: var(--2015-neon);
}

.btn-download {
    background: linear-gradient(135deg, var(--flux-green), var(--flux-yellow));
    box-shadow:
        0 0 25px rgba(0, 255, 136, 0.7),
        0 0 50px rgba(255, 215, 0, 0.4);
    font-size: 1rem;
    padding: 1rem 2rem;
}

.btn-download:hover {
    background: linear-gradient(135deg, var(--flux-yellow), var(--flux-green));
    box-shadow:
        0 0 35px rgba(0, 255, 136, 0.9),
        0 0 70px rgba(255, 215, 0, 0.6);
    color: #000;
}

/* Стили для таблиц управления */
.cyber-table-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 2px solid var(--flux-capacitor-blue);
}

.cyber-table-header th {
    border: none;
    padding: 1rem;
    font-weight: 600;
    color: var(--flux-capacitor-blue);
}

.cyber-table-row {
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.cyber-table-row:hover {
    background: rgba(0, 168, 255, 0.1);
    border-left-color: var(--flux-capacitor-blue);
    transform: translateX(5px);
}

.cyber-badge {
    font-family: 'Orbitron', monospace;
    font-weight: 600;
}

.cyber-pagination {
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid var(--flux-capacitor-blue);
    color: var(--delorean-silver);
    margin: 0 2px;
}

.cyber-pagination:hover,
.page-item.active .cyber-pagination {
    background: var(--flux-capacitor-blue);
    border-color: var(--flux-capacitor-blue);
    color: #000;
}

.cyber-input {
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid var(--flux-capacitor-blue);
    color: var(--delorean-silver);
}

.cyber-input:focus {
    background: rgba(26, 26, 46, 0.9);
    border-color: var(--2015-neon);
    color: var(--delorean-silver);
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
}

.btn-outline-cyber {
    border: 1px solid var(--flux-capacitor-blue);
    color: var(--flux-capacitor-blue);
}

.btn-outline-cyber:hover {
    background: var(--flux-capacitor-blue);
    color: #000;
}

.text-cyber {
    color: var(--flux-capacitor-blue) !important;
}

/* Стили для чекбоксов */
.form-check-input.cyber-checkbox {
    background-color: rgba(26, 26, 46, 0.8);
    border: 1px solid var(--flux-capacitor-blue);
}

.form-check-input.cyber-checkbox:checked {
    background-color: var(--flux-capacitor-blue);
    border-color: var(--flux-capacitor-blue);
}

.form-check-input.cyber-checkbox:focus {
    box-shadow: 0 0 5px rgba(0, 168, 255, 0.5);
    border-color: var(--flux-capacitor-blue);
}