.dashboard-shell {
        --ddosc-primary: #0b2e59;
        --ddosc-secondary: #123d73;
        --ddosc-accent: #f2c14e;
        --ddosc-light: #f4f8fc;
        --ddosc-text: #10233e;
        --ddosc-muted: #6b7b93;
        --cyber-cyan: #4dd0e1;
        --cyber-green: #39d98a;
        --card-shadow: 0 18px 40px rgba(11, 46, 89, 0.08);
    }

    .hero-mini {
        position: relative;
        overflow: hidden;
        border-radius: 1.4rem;
        padding: 1.6rem 1.6rem;
        background:
            radial-gradient(circle at top right, rgba(77, 208, 225, 0.18), transparent 28%),
            radial-gradient(circle at bottom left, rgba(57, 217, 138, 0.12), transparent 24%),
            linear-gradient(135deg, #0b2e59 0%, #123d73 55%, #0f4c81 100%);
        color: #fff;
        box-shadow: var(--card-shadow);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hero-mini::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 24px 24px;
        opacity: .16;
        pointer-events: none;
    }

    .hero-mini > * {
        position: relative;
        z-index: 1;
    }

    .metric-card {
        border: 0;
        border-radius: 1.25rem;
        box-shadow: var(--card-shadow);
        overflow: hidden;
        transition: transform .2s ease, box-shadow .2s ease;
        background: #fff;
    }

    .metric-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 46px rgba(11, 46, 89, 0.12);
    }

    .metric-icon {
        width: 62px;
        height: 62px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.45rem;
        flex-shrink: 0;
    }

    .section-card {
        border: 0;
        border-radius: 1.4rem;
        box-shadow: var(--card-shadow);
        overflow: hidden;
        background: #fff;
    }

    .section-card .card-header {
        border-bottom: 1px solid rgba(11, 46, 89, 0.08);
    }

    .quick-action-btn {
        border-radius: 1rem;
        font-weight: 600;
        transition: all .2s ease;
    }

    .quick-action-btn:hover {
        transform: translateY(-2px);
    }

    .dashboard-table thead th {
        font-size: .84rem;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--ddosc-muted);
        border-bottom-width: 1px;
        white-space: nowrap;
    }

    .dashboard-table tbody td {
        vertical-align: middle;
    }

    .record-code {
        color: var(--ddosc-primary);
        font-weight: 700;
    }

    .muted-note {
        color: var(--ddosc-muted);
    }

    .empty-state-icon {
        width: 84px;
        height: 84px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(11, 46, 89, 0.06);
        color: var(--ddosc-primary);
        font-size: 2rem;
    }

    .dashboard-badge-soft {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        border-radius: 999px;
        padding: .55rem .95rem;
        font-size: .84rem;
        font-weight: 700;
    }

    .badge-role {
        background: rgba(255,255,255,0.16);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.18);
        backdrop-filter: blur(4px);
    }

    .badge-system {
        background: linear-gradient(135deg, #f2c14e, #ffd76a);
        color: #4a3300;
        border: 0;
    }

    @media (max-width: 767.98px) {
        .hero-mini {
            padding: 1.25rem;
        }

        .dashboard-table thead th,
        .dashboard-table tbody td {
            white-space: nowrap;
        }
    }