html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

:root {
    --bg: #0b1020;
    --bg-2: #11182d;
    --panel: #121a30;
    --panel-2: #18213a;
    --line: rgba(255,255,255,.08);
    --text: #eef2ff;
    --muted: #94a3b8;
    --soft: #cbd5e1;
    --primary: #22c55e;
    --primary-2: #16a34a;
    --accent: #38bdf8;
    --danger: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 18px 60px rgba(0,0,0,.28);
    --radius: 20px;
    --radius-sm: 14px;
}

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

body {
    margin: 0;
    color: var(--text);
    background: radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 22%), radial-gradient(circle at top right, rgba(34,197,94,.10), transparent 20%), linear-gradient(180deg, #0a0f1d 0%, #0d1324 100%);
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.15rem rgba(11,16,32,.85), 0 0 0 0.3rem rgba(56,189,248,.35) !important;
    border-color: rgba(56,189,248,.45) !important;
}

.form-control,
.form-select,
textarea {
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--text);
}

    .form-control::placeholder,
    textarea::placeholder {
        color: #94a3b8;
    }

    .form-control:focus,
    .form-select:focus,
    textarea:focus {
        background: rgba(255,255,255,.06);
        color: var(--text);
    }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.btn {
    border-radius: 14px;
    font-weight: 700;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    border: none;
}

    .btn-primary:hover {
        background: linear-gradient(135deg, #1fb457, #15803d);
    }

.btn-outline-primary {
    color: #cfe8ff;
    border-color: rgba(56,189,248,.35);
}

    .btn-outline-primary:hover {
        background: rgba(56,189,248,.12);
        border-color: rgba(56,189,248,.45);
        color: #fff;
    }

.btn-success {
    background: linear-gradient(135deg, #16a34a, #15803d);
    border: none;
}

.btn-outline-secondary {
    border-color: rgba(255,255,255,.12);
    color: #dbeafe;
}

    .btn-outline-secondary:hover {
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.18);
        color: #fff;
    }

.text-muted {
    color: var(--muted) !important;
}

.card,
.card-elite,
.mod-card,
.info-panel {
    background: rgba(18,26,48,.92);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.badge.bg-light {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.08);
}

.breadcrumb {
    margin-bottom: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--soft);
}

    .breadcrumb-item.active {
        color: #fff;
    }

.dropdown-divider {
    border-color: rgba(255,255,255,.08);
}

.list-group-item {
    background: transparent;
    color: var(--text);
    border-color: rgba(255,255,255,.06);
}

.table {
    color: var(--text);
}

    .table th,
    .table td {
        border-color: rgba(255,255,255,.08);
    }

.auth-wrapper {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: transparent;
}

.auth-card {
    background: rgba(18,26,48,.94);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 2.25rem;
    width: 100%;
    max-width: 460px;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

    .auth-header h2 {
        font-size: 1.6rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 0.4rem;
    }

    .auth-header p {
        color: var(--muted);
        font-size: 0.95rem;
    }

.nav-link,
.navbar-brand {
    color: inherit;
}

.tab-btn {
    color: var(--text);
}

hr {
    border-color: rgba(255,255,255,.08);
    opacity: 1;
}