/* Глобальные стили */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #23272a;
    color: #e9e9e9;
    font-family: 'VT323', 'Press Start 2P', monospace, Arial, sans-serif;
    font-size: 18px;
    min-height: 100vh;
}

a {
    color: #7fffd4;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover,
.nav-link.active {
    color: #00f2fe;
    text-shadow: 0 0 5px #00f2fe99;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2c2f34;
    padding: 0 32px 0 24px;
    border-bottom: 2px solid #00f2fe;
    min-height: 70px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 18px #000a;
}
.logo {
    display: flex;
    align-items: center;
    gap: 14px;
}
.logo-img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid #7fffd4;
    box-shadow: 0 0 14px #7fffd455;
    background: #16181d;
}
.logo-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #7fffd4;
    text-shadow: 0 0 4px #00f2fecc, 0 0 1px #23272a;
    margin-left: 6px;
}

.nav {
    margin-left: 32px;
}
.nav-list {
    list-style: none;
    display: flex;
    gap: 32px;
    padding: 0;
    margin: 0;
}
.nav-link {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    letter-spacing: 1px;
    color: #e9e9e9;
    position: relative;
    transition: color 0.18s;
    padding: 6px 0;
}
.nav-link:hover,
.nav-link.active {
    color: #00f2fe;
    text-shadow: 0 0 8px #00f2feaa;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 36px;
}
.search-form {
    display: flex;
    align-items: center;
    background: #23272a;
    border: 2px solid #7fffd4;
    border-radius: 14px;
    padding: 3px 10px;
    margin-right: 10px;
}
.search-input {
    background: transparent;
    border: none;
    color: #7fffd4;
    font-family: 'VT323', monospace;
    font-size: 1.08rem;
    outline: none;
    padding: 6px 2px;
    width: 120px;
}
.search-input::placeholder {
    color: #6ac3b5cc;
    opacity: 1;
}
.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 6px;
    display: flex;
    align-items: center;
}
.btn-login {
    background: #7fffd4;
    border: none;
    border-radius: 9px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.14s, box-shadow 0.14s;
    box-shadow: 0 0 12px #7fffd4aa;
    display: flex;
    align-items: center;
}
.btn-login:hover {
    background: #00f2fe;
    box-shadow: 0 0 20px #00f2fecc;
}
.visually-hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Адаптивность */
@media (max-width: 1050px) {
    .nav-list {
        gap: 18px;
    }
    .header {
        padding: 0 12px;
    }
}
@media (max-width: 700px) {
    .logo-text { display: none; }
    .nav { margin-left: 10px; }
    .nav-list { gap: 10px; }
    .search-input { width: 64px; font-size: 0.95rem; }
    .header { min-height: 54px; }
}
@media (max-width: 520px) {
    .header { flex-wrap: wrap; padding: 6px 4px 0 4px; }
    .nav-list { flex-wrap: wrap; gap: 7px; }
    .search-form { margin-right: 0; }
    .header-actions { margin-left: 4px; gap: 7px; }
}
.footer {
    background: #202327;
    color: #7fffd4;
    padding: 34px 0 16px 0;
    border-top: 2px solid #00f2fe;
    box-shadow: 0 -2px 18px #000c;
}
.footer-content {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 36px;
    padding: 0 16px;
}
.footer-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.footer-logo {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.12rem;
    color: #7fffd4;
    text-shadow: 0 0 10px #00f2fe88;
    margin-bottom: 5px;
}
.footer-copy {
    font-size: 0.95rem;
    color: #cccccc;
}
.footer-links, .footer-social {
    display: flex;
    flex-direction: row;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.footer-link {
    color: #7fffd4;
    font-family: 'VT323', monospace;
    font-size: 1.08rem;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.92;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.footer-link:hover {
    background: #23272a;
    color: #00f2fe;
    box-shadow: 0 0 8px #00f2fe55;
}
.footer-social-link {
    display: flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 5px;
    background: #23272a;
    box-shadow: 0 0 5px #7fffd444;
    transition: background 0.14s, box-shadow 0.12s;
}
.footer-social-link:hover {
    background: #00f2fe;
    box-shadow: 0 0 20px #00f2fecc;
}
@media (max-width: 780px) {
    .footer-content {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
    }
}

/* Модальное окно */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(18,20,28,0.87);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalfadein 0.22s;
}
@keyframes modalfadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-content {
    background: #23272a;
    border: 3px solid #7fffd4;
    border-radius: 18px;
    min-width: 320px;
    max-width: 96vw;
    box-shadow: 0 8px 32px #000e;
    padding: 32px 24px 18px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal-close {
    position: absolute;
    right: 18px;
    top: 12px;
    font-size: 2.1rem;
    color: #00f2fe;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.18s;
}
.modal-close:hover {
    color: #7fffd4;
}
.modal-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.modal-tab {
    background: #323b47;
    border: none;
    border-radius: 9px 9px 0 0;
    padding: 8px 24px;
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: #7fffd4;
    cursor: pointer;
    transition: background 0.15s;
    opacity: 0.85;
}
.modal-tab.active, .modal-tab:hover {
    background: #00f2fe;
    color: #23272a;
    opacity: 1;
}
.modal-body {
    display: block;
    margin-bottom: 12px;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auth-form label {
    font-family: 'VT323', monospace;
    color: #7fffd4;
    font-size: 1rem;
}
.auth-form input {
    background: #323b47;
    color: #e9e9e9;
    border: 2px solid #7fffd4;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1rem;
    font-family: 'VT323', monospace;
    outline: none;
    transition: border 0.15s;
}
.auth-form input:focus {
    border: 2px solid #00f2fe;
}
.btn-auth {
    background: #7fffd4;
    color: #23272a;
    font-family: 'Press Start 2P', monospace;
    border: none;
    border-radius: 8px;
    padding: 8px 0;
    font-size: 1.02rem;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.15s, color 0.15s;
    box-shadow: 0 0 8px #7fffd4aa;
}
.btn-auth:hover {
    background: #00f2fe;
    color: #23272a;
    box-shadow: 0 0 20px #00f2fecc;
}
@media (max-width: 400px) {
    .modal-content { min-width: 98vw; padding: 18px 2vw; }
}
.main {
    background: #1d2127;
    min-height: 100vh;
    padding-bottom: 36px;
}
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 12px;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #23272a 60%, #323b47 100%);
    border-bottom: 2px solid #00f2fe;
    padding: 38px 25px 38px 25px;
    gap: 38px;
    box-shadow: 0 4px 32px #0005;
}
.hero-content {
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.hero-title {
    font-family: 'Press Start 2P', monospace;
    color: #7fffd4;
    font-size: 2.3rem;
    letter-spacing: 2px;
    margin-bottom: 2px;
    text-shadow: 0 0 14px #00f2fe80;
}
.hero-desc {
    font-family: 'VT323', monospace;
    color: #e9e9e9;
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.hero-desc .highlight {
    color: #00f2fe;
    background: #16181d;
    border-radius: 7px;
    padding: 2px 6px;
    font-weight: bold;
}
.btn-main {
    display: inline-block;
    padding: 11px 34px;
    font-family: 'Press Start 2P', monospace;
    font-size: 1.12rem;
    color: #23272a;
    background: #7fffd4;
    border: none;
    border-radius: 11px;
    box-shadow: 0 0 16px #7fffd488;
    text-shadow: none;
    cursor: pointer;
    transition: background 0.16s, color 0.18s, box-shadow 0.2s;
    margin-top: 6px;
}
.btn-main:hover {
    background: #00f2fe;
    color: #23272a;
    box-shadow: 0 0 30px #00f2feaa;
}
.hero-banner img {
    max-width: 390px;
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 0 24px #00f2fe55;
}

.section-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.35rem;
    color: #7fffd4;
    margin: 42px 0 18px 0;
    text-shadow: 0 0 9px #00f2fe77;
}
.news-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}
.news-card {
    background: #23272a;
    border-radius: 16px;
    box-shadow: 0 4px 18px #00f2fe10;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid #7fffd455;
}
.news-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: #181a20;
}
.news-body {
    padding: 16px 18px 10px 18px;
}
.news-title {
    font-family: 'VT323', monospace;
    font-size: 1.16rem;
    margin-bottom: 5px;
    color: #7fffd4;
}
.news-snippet {
    font-size: 1.08rem;
    color: #e9e9e9;
    margin-bottom: 8px;
}
.news-date {
    font-size: 0.95rem;
    color: #00f2fe;
    opacity: 0.77;
}
.btn-secondary {
    display: inline-block;
    margin: 18px 0 0 0;
    padding: 8px 24px;
    font-family: 'VT323', monospace;
    font-size: 1.05rem;
    color: #00f2fe;
    background: #23272a;
    border: 2px solid #00f2fe;
    border-radius: 8px;
    box-shadow: 0 0 12px #00f2fe33;
    cursor: pointer;
    transition: background 0.16s, color 0.18s, box-shadow 0.22s;
}
.btn-secondary:hover {
    background: #00f2fe;
    color: #23272a;
    box-shadow: 0 0 30px #00f2fecc;
}
.main-forum, .main-users, .main-latest {
    margin-top: 40px;
}
.forum-hot-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.forum-hot-topic {
    background: #23272a;
    border-radius: 9px;
    padding: 13px 18px;
    border-left: 4px solid #00f2fe;
    margin-bottom: 0;
    box-shadow: 0 1px 9px #00f2fe0c;
}
.topic-title {
    color: #7fffd4;
    font-family: 'VT323', monospace;
    font-size: 1.14rem;
    text-shadow: 0 0 3px #00f2fe44;
}
.topic-meta {
    font-size: 0.98rem;
    color: #e9e9e9;
    opacity: 0.88;
    margin-left: 10px;
}
.users-list {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}
.user-card {
    display: flex;
    align-items: center;
    background: #23272a;
    border-radius: 9px;
    padding: 10px 18px;
    gap: 16px;
    min-width: 200px;
    border: 2px solid #7fffd433;
    box-shadow: 0 2px 10px #7fffd422;
}
.user-avatar {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 2px solid #00f2fe;
    background: #16181d;
    box-shadow: 0 0 10px #00f2fe88;
}
.user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-nick {
    font-family: 'Press Start 2P', monospace;
    color: #7fffd4;
    font-size: 1.02rem;
}
.user-rank {
    color: #e9e9e9;
    font-size: 0.98rem;
    opacity: 0.82;
}
.latest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.latest-list li {
    background: #23272a;
    border-radius: 7px;
    padding: 10px 16px;
    border-left: 4px solid #7fffd4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.latest-list a {
    color: #7fffd4;
    font-family: 'VT323', monospace;
    font-size: 1.08rem;
}
.latest-meta {
    color: #e9e9e9;
    font-size: 0.97rem;
    opacity: 0.82;
    margin-left: 12px;
}

@media (max-width: 850px) {
    .hero { flex-direction: column; gap: 16px; text-align: center; padding: 26px 0 30px 0;}
    .hero-content { max-width: none; align-items: center; }
    .hero-banner img { max-width: 96vw; margin-top: 22px; }
    .users-list { gap: 10px; }
}
@media (max-width: 600px) {
    .main { padding-bottom: 14px; }
    .container { padding: 0 2px; }
    .news-list { grid-template-columns: 1fr; gap: 10px; }
    .user-card { min-width: 130px; gap: 7px; padding: 7px 7px; }
}
.user-avatar-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #16181d;
    border: 2px solid #00f2fe;
    box-shadow: 0 0 10px #00f2fe88, 0 0 0 6px #23272a;
    margin-right: 0;
}
.user-card {
    gap: 16px;
}
@media (max-width: 600px) {
    .user-avatar-svg {
        width: 38px;
        height: 38px;
        border-radius: 9px;
    }
}
.forum-main {
    background: #1d2127;
    min-height: 100vh;
}
.forum-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 8px 34px 8px;
}
.forum-title {
    font-family: 'Press Start 2P', monospace;
    color: #7fffd4;
    font-size: 2.1rem;
    text-shadow: 0 0 12px #00f2feaa;
    margin: 44px 0 38px 0;
    letter-spacing: 2px;
    text-align: left;
}
.forum-categories {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.forum-category {
    background: #23272a;
    border-radius: 18px;
    box-shadow: 0 4px 32px #00f2fe0b;
    border-left: 8px solid #00f2fe44;
    padding: 0 0 12px 0;
}
.category-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 28px 8px 28px;
    border-bottom: 2px solid #282c33;
    position: relative;
}
.cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    background: #181c22;
    box-shadow: 0 0 14px #00f2fe40;
}
.cat-icon-blue svg { filter: drop-shadow(0 0 4px #00f2fe66);}
.cat-icon-green svg { filter: drop-shadow(0 0 4px #7fffd477);}
.cat-icon-purple svg { filter: drop-shadow(0 0 4px #a77dff77);}
.cat-icon-yellow svg { filter: drop-shadow(0 0 4px #ffe56266);}
.cat-icon-red svg { filter: drop-shadow(0 0 4px #fe3d4d66);}
.category-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.15rem;
    color: #7fffd4;
    text-shadow: 0 0 6px #00f2fe66;
    margin-right: 18px;
}
.category-desc {
    font-family: 'VT323', monospace;
    color: #e9e9e9;
    font-size: 1.05rem;
    opacity: 0.88;
    flex: 1 1 auto;
}

.category-topics {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 8px;
    padding: 8px 10px 8px 20px;
}
.forum-topic-row {
    display: grid;
    grid-template-columns: 1.8fr 0.7fr 1.1fr;
    align-items: center;
    background: #1d2127;
    border-radius: 7px;
    margin-bottom: 7px;
    padding: 13px 14px;
    box-shadow: 0 1px 7px #7fffd411;
    font-size: 1.09rem;
}
.forum-topic-row:last-child { margin-bottom: 0; }
.topic-name {
    font-family: 'VT323', monospace;
    color: #7fffd4;
    font-size: 1.08rem;
    text-shadow: 0 0 3px #00f2fe55;
}
.topic-stats {
    font-family: 'VT323', monospace;
    color: #00f2fe;
    font-size: 1.01rem;
    text-align: right;
}
.topic-last {
    font-family: 'VT323', monospace;
    color: #e9e9e9;
    font-size: 1rem;
    opacity: 0.85;
    text-align: right;
}
.topic-last b {
    color: #7fffd4;
    font-weight: bold;
}

@media (max-width: 900px) {
    .forum-topic-row {
        grid-template-columns: 1.6fr 0.8fr 1fr;
        font-size: 1rem;
    }
    .category-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 600px) {
    .forum-title { font-size: 1.22rem; margin: 22px 0 18px 0; }
    .forum-category { border-radius: 8px; }
    .category-head { padding: 14px 8px 8px 8px; }
    .category-title { font-size: 1.05rem; }
    .category-desc { font-size: 0.98rem; }
    .category-topics { margin: 0 1px; padding: 6px 2px 6px 5px; }
    .forum-topic-row { padding: 7px 2px; border-radius: 4px; font-size: 0.99rem; }
}
.news-main {
    background: #1d2127;
    min-height: 100vh;
}
.news-container {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 10px 42px 10px;
}
.news-title {
    font-family: 'Press Start 2P', monospace;
    color: #7fffd4;
    font-size: 2rem;
    text-shadow: 0 0 10px #00f2fe99;
    margin: 38px 0 40px 0;
    letter-spacing: 2px;
}
.news-article {
    background: #23272a;
    border-radius: 18px;
    box-shadow: 0 2px 32px #00f2fe15;
    border-left: 6px solid #00f2fe66;
    padding: 0 0 10px 0;
    margin-bottom: 44px;
}
.news-article-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 18px 18px 0 0;
    border-bottom: 2px solid #7fffd4;
    background: #16181d;
}
.news-article-title {
    font-family: 'VT323', monospace;
    color: #7fffd4;
    font-size: 1.45rem;
    margin: 24px 24px 8px 24px;
    text-shadow: 0 0 6px #00f2fe77;
}
.news-article-meta {
    color: #cccccc;
    font-family: 'VT323', monospace;
    font-size: 1.03rem;
    margin: 0 24px 18px 24px;
    opacity: 0.78;
}
.news-article-body {
    font-family: 'VT323', monospace;
    color: #e9e9e9;
    font-size: 1.16rem;
    padding: 0 24px 12px 24px;
    line-height: 1.7;
}
.news-article-body a {
    color: #00f2fe;
    text-decoration: underline;
    word-break: break-all;
}
.news-article-body a:hover {
    color: #7fffd4;
}
@media (max-width: 600px) {
    .news-container { padding: 0 1px 14px 1px; }
    .news-article-img { height: 130px; border-radius: 8px 8px 0 0; }
    .news-article { border-radius: 8px; }
    .news-article-title { font-size: 1.08rem; margin: 12px 8px 6px 8px; }
    .news-article-meta, .news-article-body { font-size: 0.97rem; margin: 0 8px 8px 8px; padding: 0 8px 8px 8px; }
}
.faq-main {
    background: #1d2127;
    min-height: 100vh;
}
.faq-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 10px 50px 10px;
}
.faq-title {
    font-family: 'Press Start 2P', monospace;
    color: #7fffd4;
    font-size: 1.7rem;
    text-shadow: 0 0 10px #00f2fe99;
    margin: 38px 0 36px 0;
    letter-spacing: 1px;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.faq-item {
    background: #23272a;
    border-radius: 16px;
    border-left: 5px solid #7fffd4;
    box-shadow: 0 2px 14px #00f2fe11;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.faq-checkbox {
    display: none;
}
.faq-question {
    display: flex;
    align-items: center;
    font-family: 'VT323', monospace;
    font-size: 1.18rem;
    color: #7fffd4;
    cursor: pointer;
    padding: 24px 32px 18px 22px;
    position: relative;
    user-select: none;
    transition: background 0.14s;
}
.faq-question:hover {
    background: #282c33;
}
.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 17px;
    min-width: 34px;
}
.faq-answer {
    font-family: 'VT323', monospace;
    font-size: 1.08rem;
    color: #e9e9e9;
    line-height: 1.7;
    padding: 0 32px 22px 58px;
    background: #202327;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.36s cubic-bezier(.76,.08,.52,.98);
}
.faq-checkbox:checked ~ .faq-answer {
    max-height: 280px;
    opacity: 1;
    padding-top: 0;
    margin-top: -8px;
}
.faq-question:after {
    content: '';
    display: inline-block;
    margin-left: auto;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="%237fffd4" stroke-width="2" stroke-linecap="round"><polyline points="6 8 10 12 14 8"/></svg>') center/contain no-repeat;
    transition: transform 0.22s;
}
.faq-checkbox:checked + .faq-question:after {
    transform: rotate(180deg);
}
.faq-answer a {
    color: #00f2fe;
    text-decoration: underline;
}
.faq-answer a:hover {
    color: #7fffd4;
}

@media (max-width: 600px) {
    .faq-container { padding: 0 2px 14px 2px; }
    .faq-title { font-size: 1.08rem; margin: 18px 0 14px 0; }
    .faq-question { padding: 13px 13px 10px 10px; font-size: 1rem; }
    .faq-icon { margin-right: 8px; min-width: 22px; }
    .faq-answer { padding: 0 11px 12px 36px; font-size: 0.95rem; }
}
.contacts-main {
    background: #1d2127;
    min-height: 100vh;
}
.contacts-container {
    max-width: 650px;
    margin: 0 auto;
    padding: 0 10px 50px 10px;
}
.contacts-title {
    font-family: 'Press Start 2P', monospace;
    color: #7fffd4;
    font-size: 1.7rem;
    text-shadow: 0 0 10px #00f2fe99;
    margin: 38px 0 30px 0;
    letter-spacing: 1px;
}
.contacts-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 38px;
}
.contacts-block {
    display: flex;
    align-items: center;
    background: #23272a;
    border-radius: 10px;
    border-left: 5px solid #7fffd4;
    box-shadow: 0 2px 10px #00f2fe18;
    padding: 15px 18px;
    font-family: 'VT323', monospace;
    font-size: 1.18rem;
}
.contacts-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7fffd4;
    font-size: 1.07rem;
    margin-right: 14px;
}
.contacts-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.contacts-value a {
    color: #00f2fe;
    text-decoration: underline;
}
.contacts-value a:hover {
    color: #7fffd4;
}
.contacts-form-section {
    background: #23272a;
    border-radius: 16px;
    box-shadow: 0 2px 14px #00f2fe11;
    border-left: 5px solid #7fffd4;
    padding: 26px 28px 18px 28px;
}
.contacts-form-title {
    font-family: 'Press Start 2P', monospace;
    color: #7fffd4;
    font-size: 1.12rem;
    margin-bottom: 18px;
}
.contacts-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.contacts-form label {
    color: #7fffd4;
    font-family: 'VT323', monospace;
    font-size: 1rem;
}
.contacts-form input,
.contacts-form textarea {
    background: #323b47;
    color: #e9e9e9;
    border: 2px solid #7fffd4;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 1.05rem;
    font-family: 'VT323', monospace;
    outline: none;
    resize: vertical;
    transition: border 0.16s;
}
.contacts-form input:focus,
.contacts-form textarea:focus {
    border: 2px solid #00f2fe;
}
.btn-main {
    align-self: flex-start;
}
.contacts-note {
    font-family: 'VT323', monospace;
    color: #cccccc;
    font-size: 1.02rem;
    margin-top: 16px;
    opacity: 0.7;
}
@media (max-width: 600px) {
    .contacts-container { padding: 0 2px 14px 2px; }
    .contacts-title { font-size: 1.08rem; margin: 18px 0 14px 0; }
    .contacts-form-section { padding: 12px 6px 10px 8px; border-radius: 7px; }
    .contacts-block { font-size: 1.02rem; padding: 8px 7px; border-radius: 6px;}
    .contacts-form-title { font-size: 1rem; }
    .contacts-form input, .contacts-form textarea { font-size: 0.97rem; padding: 6px 7px; border-radius: 5px;}
}