:root {
    --primary: #0d6efd;
    --primary-dark: #0a58ca;
    --soft: #f3f8ff;
    --line: #dce8fb;
    --text: #14315f;
}
body { color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.bg-soft { background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%); min-height: 100vh; }
.auth-gradient { background: linear-gradient(135deg, #0d6efd 0%, #5ea8ff 100%); }
.card, .stat-card, .package-card, .license-list-item, .sidebar, .topbar { border: 1px solid rgba(13,110,253,.08); }
.form-control, .form-select { border-radius: 1rem; padding: .85rem 1rem; border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: #9fc3ff; box-shadow: 0 0 0 .25rem rgba(13,110,253,.12); }
.btn { border-radius: 1rem; font-weight: 600; }
.btn-primary { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%); border: none; box-shadow: 0 10px 24px rgba(13,110,253,.25); }
.btn-primary:hover { background: linear-gradient(180deg, #1c75ff 0%, #0a58ca 100%); }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 280px; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); position: sticky; top: 0; height: 100vh; }
.brand-mark { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(180deg, #0d6efd, #63a5ff); color: #fff; font-size: 1.4rem; box-shadow: 0 14px 28px rgba(13,110,253,.28); }
.nav-link-custom { display: flex; align-items: center; gap: .9rem; padding: .95rem 1rem; border-radius: 1rem; text-decoration: none; color: var(--text); margin-bottom: .45rem; font-weight: 500; }
.nav-link-custom:hover { background: #eef5ff; color: var(--primary); }
.content-wrap { flex: 1; }
.topbar { background: rgba(255,255,255,.9); backdrop-filter: blur(8px); }
.pill-balance { background: #edf4ff; border: 1px solid #d5e6ff; color: var(--primary-dark); padding: .75rem 1rem; border-radius: 999px; font-weight: 700; }
.stat-card { background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 12px 30px rgba(20,49,95,.06); }
.stat-label { text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; color: #6e8aba; font-weight: 700; }
.stat-value { font-size: 2rem; font-weight: 800; margin-top: .5rem; }
.package-card { background: linear-gradient(180deg, #fff 0%, #f7fbff 100%); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 16px 32px rgba(13,110,253,.08); }
.license-list-item { background: #f8fbff; border-radius: 1.2rem; padding: 1rem 1.1rem; }
.table > :not(caption) > * > * { padding: 1rem .75rem; }
@media (max-width: 992px) {
    .app-shell { display: block; }
    .sidebar { position: relative; width: 100%; height: auto; }
}

.settings-hero {
    background: linear-gradient(135deg, rgba(13,110,253,.08) 0%, rgba(13,110,253,.02) 100%);
}
.settings-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 1rem;
}
.settings-mini-card {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(13,110,253,.12);
    border-radius: 1.2rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 10px 24px rgba(13,110,253,.08);
}
.settings-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(180deg, #0d6efd, #63a5ff);
    color: #fff;
    box-shadow: 0 12px 24px rgba(13,110,253,.22);
    font-size: 1.1rem;
}
.settings-switch,
.settings-check {
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: .9rem 1rem;
}
@media (max-width: 768px) {
    .settings-hero-grid {
        grid-template-columns: 1fr;
    }
}

.smtp-help-card {
    background: #f8fbff;
    border: 1px dashed var(--line);
    border-radius: 1rem;
    padding: .95rem 1rem;
}