/**
 * /var/www/art/assets/css/style.css
 * Основные стили art.gptru.pro
 * @version 1.0.0
 * @created 2026-04-11
 */

/* ─── Переменные ─────────────────────────────────────────────────────────── */
:root {
    --color-purple:      #7F77DD;
    --color-purple-dark: #534AB7;
    --color-purple-soft: rgba(127,119,221,0.15);
    --color-bg:          #0f0f0f;
    --color-surface:     #1a1a1a;
    --color-surface2:    #222222;
    --color-border:      rgba(255,255,255,0.08);
    --color-text:        #e5e5e5;
    --color-muted:       #999;
    --color-label:       #ccc;
}

/* ─── База ───────────────────────────────────────────────────────────────── */
html, body { height: 100%; background: var(--color-bg); color: var(--color-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* ─── Цвета ──────────────────────────────────────────────────────────────── */
.text-purple    { color: var(--color-purple) !important; }
.bg-purple      { background: var(--color-purple) !important; }
.bg-purple-soft { background: var(--color-purple-soft) !important; }

.btn-purple { background: var(--color-purple); color: #fff; border: none; }
.btn-purple:hover { background: var(--color-purple-dark); color: #fff; }

.btn-outline-purple { border: 0.5px solid var(--color-purple); color: var(--color-purple); background: transparent; }
.btn-outline-purple:hover { background: var(--color-purple-soft); color: var(--color-purple); }

/* ─── Карточки ───────────────────────────────────────────────────────────── */
.card { background: var(--color-surface); border: 0.5px solid var(--color-border); border-radius: 12px; }

/* ─── Формы ──────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--color-surface2);
    border: 0.5px solid rgba(255,255,255,0.12);
    color: var(--color-text);
    border-radius: 8px;
}
.form-control:focus, .form-select:focus {
    background: var(--color-surface2);
    border-color: var(--color-purple);
    color: var(--color-text);
    box-shadow: 0 0 0 3px rgba(127,119,221,0.2);
}
.form-control::placeholder { color: var(--color-muted); }
.form-label { color: var(--color-label); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }

/* ─── Навбар ─────────────────────────────────────────────────────────────── */
.navbar { background: #111 !important; }
.navbar-brand { font-size: 15px; letter-spacing: -0.3px; color: var(--color-text) !important; }

/* ─── Алерты ─────────────────────────────────────────────────────────────── */
.alert-warn        { background: rgba(186,117,23,0.15); border: 0.5px solid rgba(186,117,23,0.4); color: #FAC775; border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.alert-info        { background: rgba(24,95,165,0.15);  border: 0.5px solid rgba(24,95,165,0.4);  color: #85B7EB; border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.alert-success     { background: rgba(99,153,34,0.15);  border: 0.5px solid rgba(99,153,34,0.4);  color: #C0DD97; border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.alert-danger-soft { background: rgba(226,75,74,0.15);  border: 0.5px solid rgba(226,75,74,0.4);  color: #F09595; border-radius: 8px; padding: 10px 14px; font-size: 13px; }

/* ─── Статплитки ─────────────────────────────────────────────────────────── */
.stat-tile { background: var(--color-surface2); border-radius: 8px; padding: 14px; }
.stat-tile .stat-label { font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.stat-tile .stat-value { font-size: 22px; font-weight: 500; color: var(--color-text); }

/* ─── Таблицы ────────────────────────────────────────────────────────────── */
.table-dark { --bs-table-bg: var(--color-surface); --bs-table-border-color: var(--color-border); color: var(--color-text); font-size: 13px; }
.table-dark th { color: var(--color-muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }

/* ─── Область результата генерации ──────────────────────────────────────── */
.result-area {
    min-height: 320px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1a1830 0%, #0d1f1a 50%, #1f1a0d 100%);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 10px;
    border: 0.5px solid var(--color-border);
    position: relative; overflow: hidden;
}
.result-area img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }

/* ─── Спиннер ────────────────────────────────────────────────────────────── */
.spinner-gen {
    width: 40px; height: 40px;
    border: 3px solid rgba(127,119,221,0.2);
    border-top-color: var(--color-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Прогресс-бар ───────────────────────────────────────────────────────── */
.credit-progress { height: 5px; border-radius: 3px; background: var(--color-surface2); overflow: hidden; }
.credit-progress-fill { height: 100%; border-radius: 3px; background: var(--color-purple); transition: width 0.3s; }

/* ─── Миниатюры ──────────────────────────────────────────────────────────── */
.gen-thumb { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; border: 0.5px solid var(--color-border); cursor: pointer; transition: transform 0.15s; }
.gen-thumb:hover { transform: scale(1.03); border-color: var(--color-purple); }

/* ─── Промпты ────────────────────────────────────────────────────────────── */
.prompt-item { background: var(--color-surface2); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--color-label); cursor: pointer; border: 0.5px solid transparent; transition: border-color 0.15s; margin-bottom: 6px; }
.prompt-item:hover { border-color: var(--color-purple); color: var(--color-text); }

/* ─── Пакеты ─────────────────────────────────────────────────────────────── */
.package-card { border: 0.5px solid var(--color-border); border-radius: 12px; padding: 20px; text-align: center; background: var(--color-surface); transition: border-color 0.2s; }
.package-card:hover { border-color: var(--color-purple); }
.package-card.featured { border: 2px solid var(--color-purple); }
.package-price { font-size: 28px; font-weight: 500; color: var(--color-purple); }

/* ─── Галерея ────────────────────────────────────────────────────────────── */
.gallery-item { border-radius: 10px; overflow: hidden; border: 0.5px solid var(--color-border); transition: transform 0.15s; }
.gallery-item:hover { transform: scale(1.02); border-color: var(--color-purple); }
.gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-item-info { padding: 8px 10px; background: var(--color-surface); }

/* ─── Мобильная адаптация ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .package-price { font-size: 22px; }
    .stat-tile .stat-value { font-size: 18px; }
}