:root {
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-body-font-family: "Segoe UI", Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
}

body {
    background:
        radial-gradient(circle at 0 0, rgba(79, 70, 229, 0.12), transparent 32rem),
        radial-gradient(circle at 100% 0, rgba(14, 165, 233, 0.10), transparent 30rem),
        #f6f8fc;
}

.brand-mark {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    box-shadow: 0 14px 30px rgba(79, 70, 229, 0.32);
    font-weight: 900;
}

.nav-pills .nav-link {
    border-radius: 14px;
}

.nav-pills .nav-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.08);
}

.card {
    overflow: hidden;
}

.card-body strong {
    display: block;
    font-size: 1.85rem;
    line-height: 1.1;
}

.card-body strong + span {
    display: block;
    margin-top: 0.45rem;
    color: #667085;
    font-size: 0.875rem;
    font-weight: 600;
}

.text-cell {
    min-width: 320px;
    max-width: 760px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.id-cell {
    color: #4f46e5;
    font-weight: 700;
    white-space: nowrap;
}

textarea.form-control {
    resize: vertical;
}

.auth-card {
    width: min(460px, 100%);
}

.auth-hero {
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
}

pre {
    white-space: pre-wrap;
}

@media (min-width: 992px) {
    aside.bg-dark {
        position: sticky;
        top: 0;
        height: 100vh;
    }
}