/* --- Base Styles --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body { 
    /* Используем системные шрифты для лучшей читаемости на всех ОС */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    width: min(1100px, 90%); 
    margin: 10px auto; /* Центрирование */
    background: #101218; 
    color: #e1e3e8; 
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Улучшение отрисовки на Mac/iOS */
    -moz-osx-font-smoothing: grayscale;
}

/* Контейнер */
.container { 
    width: min(1100px, 90%); 
    margin: 1rem auto; 
    padding: 0 15px; 
}

.topbar { 
    background: #0b0f18; 
    color: #fff; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: .8rem 1rem; 
    border-bottom: 1px solid #232a38; 
}

.topbar .brand { 
    color: #7ce5ff; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 1.2rem; 
}

.topbar nav a { 
    margin-left: .8rem; 
    color: #d4e9ff; 
    text-decoration: none; 
    font-size: .95rem; 
}

.topbar .user-location { 
    margin-left: .8rem; 
    font-size: .86rem; 
    color: #a4b8d8; 
    font-weight: 500; 
}

.topbar nav .user { 
    margin-left: 1rem; 
    font-weight: bold; 
}

/* --- Card & Line Breaks --- */
.card { 
    background: #151b27; 
    padding: 1.5rem; 
    border-radius: 10px; 
    margin-bottom: 1rem; 
    box-shadow: 0 2px 12px rgba(0,0,0,.45); 
    border: 1px solid #273046; 
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.alert { 
    border-radius: 4px; 
    padding: .75rem 1rem; 
    margin-bottom: 1rem; 
}

.alert-error { background: #3f1f24; color: #ffb3b3; border: 1px solid #8f2c3f; }
.alert-success { background: #153a1f; color: #b7f6c9; border: 1px solid #2d7c49; }

/* --- Forms & Inputs --- */
.form-row { margin-bottom: 1rem; }

.form-row label { 
    display: block; 
    margin-bottom: .35rem; 
    font-weight: 700; 
    color: #8ec7ff; 
    letter-spacing: .02em; 
}

.form-row input, 
.form-row textarea, 
.form-row select, 
.form-row .file-input { 
    width: 100%; /* Для кроссбраузерности лучше 100%, ограничение по родительской колонке */
    max-width: 100%; 
    padding: .72rem .9rem; 
    border: 1px solid #334866; 
    border-radius: 14px; 
    background: radial-gradient(100% 130% at 10% 0%, rgba(124,229,255,.12), transparent 50%),
                linear-gradient(145deg, #0d1324, #0a0f1d);
    color: #e8f0ff; 
    box-shadow: inset 0 2px 8px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05); 
    transition: all .25s ease; 
    font-size: 1rem; /* Фикс: 16px предотвращает авто-зум в iOS Safari */
    -webkit-appearance: none; /* Убираем стандартные стили iOS */
    appearance: none;
}

.form-row textarea { min-height: 150px; resize: vertical; }

.form-row input:focus, 
.form-row textarea:focus, 
.form-row select:focus { 
    outline: none; 
    border-color: #78b5ff; 
    box-shadow: 0 0 0 4px rgba(60,140,255,.18); 
    transform: translateY(-1px); 
}

/* --- Buttons --- */
.btn { 
    margin: 10px 5px; 
    display: inline-block; 
    padding: .65rem 1.1rem; 
    border: none; 
    border-radius: 10px; 
    cursor: pointer; 
    text-decoration: none; 
    color: #fff; 
    background: linear-gradient(140deg, #2f76ff, #1f58c2); 
    transition: all 0.2s ease;
    text-align: center;
    -webkit-tap-highlight-color: transparent; /* Убирает синий квадрат при нажатии на мобильных */
}

.btn:hover { 
    background: linear-gradient(140deg, #4d8dff, #2e69db); 
    transform: translateY(-1px); 
}

.btn-danger { background: linear-gradient(140deg, #e95b64, #bf2e41); }
.btn-success { background: linear-gradient(140deg, #34c083, #1f8f5f); }

/* --- Table (Adaptive) --- */
table { 
    width: 100%; 
    border-collapse: collapse; 
    background: #121825; 
}

/* Обертка для таблицы для скролла на мобильных */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

td, th { 
    border: 1px solid #2b3445; 
    padding: .65rem; 
    text-align: left; 
    color: #d6e5f8; 
}

th { background: #1a2333; }

/* --- Footer --- */
.footer {
    background: #0a0f1a;
    border-top: 1px solid #23314a;
    color: #c5d6f1;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

.footer-inner {
    width: min(1100px, 95%);
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 0 15px;
}

/* --- News Grid --- */
.news-grid {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.news-card {
    grid-column: span 12;
    background: #151b27;
    border: 1px solid #273046;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.45);
    overflow-wrap: anywhere;
}

.news-card__media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.news-card__body { padding: 1.2rem; }

.news-card__title { 
    margin: 0 0 .35rem; 
    font-size: 1.15rem; 
}

@media (min-width: 720px) {
    .news-card { grid-column: span 6; }
}

@media (min-width: 1024px) {
    .news-card { grid-column: span 4; }
}

/* --- Mobile Fixes --- */
@media (max-width: 600px) {
    .topbar { flex-direction: column; text-align: center; gap: 10px; }
    .topbar nav a { margin: 0 5px; }
    .btn { width: 100%; box-sizing: border-box; margin: 5px 0; }

    .form-row input,
    .form-row textarea,
    .form-row select,
    .form-row .file-input {
        width: 100%;
        padding: .9rem 1rem;
    }

    .container {
        padding: 10px;
        margin: 5px auto;
        width: 95%;
    }
}

div {
    margin: 10px;
}