@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap');

:root {
    --bg: #070b14;
    --panel: #0d1423;
    --panel-2: #131b2e;
    --border: rgba(148, 163, 184, 0.18);
    --text: #e8ecf4;
    --muted: #8b97ad;
    --accent: #7a5230;
    --accent-hover: #946440;
    --cyan: #5bc0eb;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}

/* Header */
.navbar,
.navbar.bg-primary {
    background: transparent !important;
    max-width: 1280px;
    margin: 0 auto;
}

.navbar-brand { font-size: 1rem; letter-spacing: .04em; color: var(--muted) !important; }
.btn-outline-light { border-radius: 999px; border-color: var(--border); color: var(--muted); }

.hero {
    max-width: 1220px;
    margin: 1rem auto 0;
    padding: 2rem 2.25rem;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: linear-gradient(110deg, #5a3d2a 0%, #2a2a34 40%, var(--panel) 75%);
}

.hero .eyebrow {
    font-size: .75rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cyan);
    font-weight: 600;
}

.hero h1 { font-size: 2.1rem; font-weight: 500; margin: .75rem 0 0; color: #fff; }

/* Panels */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    color: var(--text);
}

.card-header, .card-header.bg-light {
    background: transparent !important;
    border-bottom: 1px solid var(--border);
    border-radius: 28px 28px 0 0 !important;
    padding: 1rem 1.5rem 0;
}

.card-body { padding: 1.75rem; }

.nav-tabs { border-bottom: 0; }
.nav-tabs .nav-link {
    color: var(--muted);
    border-radius: 999px;
    padding: .6rem 1.2rem;
    margin-bottom: 1rem;
}
.nav-tabs .nav-link:hover { background: var(--panel-2); color: var(--text); }
.nav-tabs .nav-link.active {
    background: var(--accent);
    color: #fff;
}

/* Form controls */
.form-label { color: var(--muted); font-size: .9rem; }

.form-control, .form-select {
    background-color: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 14px;
}
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b97ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-control::placeholder { color: #5d6980; }
.form-control:focus, .form-select:focus {
    background-color: var(--panel-2);
    color: var(--text);
    border-color: var(--accent-hover);
    box-shadow: 0 0 0 .2rem rgba(148, 100, 64, .25);
}
.form-control::file-selector-button {
    background: #e9ecef;
    color: #111;
    border: 0;
    border-radius: 6px;
}
.form-text { color: var(--muted); }
input[type=file].form-control {
    border-style: dashed;
    padding: 1.1rem;
}

/* Buttons */
.btn { border-radius: 999px; }
.btn-primary {
    background: var(--accent);
    color: #fff;
    padding: .8rem 1.8rem;
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 6px 18px rgba(122, 82, 48, .45); }

/* Results & modals */
.card .card { background: var(--panel-2); box-shadow: none; border-radius: 18px; }
.text-muted { color: var(--muted) !important; }
.alert-success { background: rgba(25, 135, 84, .15); border-color: rgba(25, 135, 84, .4); color: #9be3bf; }
.alert-info { background: rgba(91, 192, 235, .12); border-color: rgba(91, 192, 235, .35); color: #bfe6f7; }

.modal-content { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 24px; }
.modal-header, .modal-footer { border-color: var(--border); }
.btn-close { filter: invert(1); }
.progress { background: var(--panel-2); }
.progress-bar { background: linear-gradient(90deg, var(--accent), var(--cyan)); }

/* Login card to match */
.login-overlay { background: radial-gradient(circle at 20% 10%, #5a3d2a 0%, var(--bg) 60%); }
.login-card { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 28px; }
.login-icon { background: var(--accent); }

@media (max-width: 768px) {
    .hero { margin: 1rem; padding: 1.5rem; }
    .hero h1 { font-size: 1.5rem; }
}