.s360-body {
    background: #eef3f8;
}

.s360-header {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border-bottom: 1px solid rgba(2, 45, 96, .08);
    box-shadow: 0 8px 28px rgba(28, 55, 90, .06);
}

.s360-sidebar {
    background:
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,0) 24%),
        linear-gradient(180deg, #06457f 0%, #022d60 45%, #011c3d 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.12), 14px 0 34px rgba(2, 45, 96, .22);
}

.s360-sidebar .app-sidebar-logo,
.s360-sidebar .app-sidebar-menu,
.s360-sidebar .app-sidebar-wrapper {
    background: transparent !important;
}

.s360-sidebar .hover-scroll-overlay-y {
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

.s360-sidebar:before {
    background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0));
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
}

.s360-brand-link {
    border-bottom: 1px solid rgba(255,255,255,.11);
    justify-content: center;
    padding-bottom: 16px;
    width: 100%;
}

.s360-sidebar-logo {
    display: block;
    height: auto;
    max-width: 210px;
    width: 100%;
}

.s360-mobile-logo {
    border-radius: 8px;
    height: 38px;
    width: 38px;
}

.s360-auth-logo-white {
    height: auto;
    max-width: 460px;
    width: 86%;
}

.s360-login-logo {
    height: auto;
    max-width: 330px;
    width: 86%;
}

.s360-logo {
    align-items: center;
    background: linear-gradient(145deg, #ffffff 0%, #dbeafe 48%, #8ec5ff 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px rgba(1, 16, 42, .28);
    border-radius: 8px;
    color: #022d60;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 38px;
    justify-content: center;
    width: 44px;
}

.s360-logo-lg {
    height: 56px;
    width: 64px;
}

.s360-menu .menu-heading {
    color: rgba(255,255,255,.46) !important;
}

.s360-menu .menu-link {
    color: rgba(255,255,255,.78);
    margin-bottom: 4px;
}

.s360-menu .menu-icon i,
.s360-menu .menu-title {
    color: rgba(255,255,255,.78) !important;
}

.s360-menu .menu-link:hover,
.s360-menu .menu-link.active {
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.12);
}

.s360-menu .menu-link:hover .menu-title,
.s360-menu .menu-link:hover .menu-icon i,
.s360-menu .menu-link.active .menu-title,
.s360-menu .menu-link.active .menu-icon i {
    color: #fff !important;
}

.s360-menu .menu-link.active {
    position: relative;
}

.s360-menu .menu-link.active:before {
    background: #8ec5ff;
    border-radius: 0 4px 4px 0;
    bottom: 10px;
    content: "";
    left: -16px;
    position: absolute;
    top: 10px;
    width: 4px;
}

.s360-toolbar {
    background:
        radial-gradient(circle at top right, rgba(27,132,255,.12), transparent 34%),
        linear-gradient(180deg, #f7fbff 0%, #eef3f8 100%);
}

.s360-top-action {
    background: linear-gradient(145deg, #1b84ff, #075eb5);
    box-shadow: 0 8px 18px rgba(27,132,255,.22);
}

.s360-hero {
    background:
        radial-gradient(circle at 82% 18%, rgba(80, 205, 137, .26), transparent 26%),
        radial-gradient(circle at 30% 6%, rgba(27, 132, 255, .32), transparent 30%),
        linear-gradient(135deg, #063b74 0%, #022d60 46%, #011a38 100%);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 20px 45px rgba(2, 45, 96, .22);
    overflow: hidden;
    padding: 34px;
    position: relative;
}

.s360-hero:after {
    background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0));
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 1px;
}

.s360-command-hero {
    animation: s360-rise .42s ease-out;
    background:
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,0) 28%),
        radial-gradient(circle at 86% 16%, rgba(80,205,137,.24), transparent 28%),
        radial-gradient(circle at 28% 8%, rgba(27,132,255,.34), transparent 30%),
        linear-gradient(135deg, #06457f 0%, #022d60 50%, #011b3a 100%);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 22px 48px rgba(2,45,96,.22);
    overflow: hidden;
    padding: 34px;
    position: relative;
}

.s360-command-hero:before {
    background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0));
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
}

.s360-command-logo {
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,.2);
    height: 62px;
    width: 62px;
}

.s360-hero-tile {
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    min-height: 88px;
    padding: 16px;
}

.s360-hero-tile span {
    color: rgba(255,255,255,.64);
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.s360-hero-tile strong {
    color: #fff;
    display: block;
    font-size: 18px;
    margin-top: 8px;
}

.s360-stat-card,
.s360-panel,
.s360-notice-card {
    border: 1px solid rgba(2, 45, 96, .08);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(28, 55, 90, .08);
}

.s360-stat-card {
    overflow: hidden;
    position: relative;
}

.s360-stat-card:before {
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.s360-stat-blue:before { background: linear-gradient(90deg, #1b84ff, #69b3ff); }
.s360-stat-green:before { background: linear-gradient(90deg, #17c653, #8ee9ae); }
.s360-stat-cyan:before { background: linear-gradient(90deg, #04c8c8, #85f0f0); }
.s360-stat-gold:before { background: linear-gradient(90deg, #f6c000, #ffe08a); }

.s360-mini-kpi {
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(2,45,96,.08);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(28,55,90,.07);
    min-height: 92px;
    padding: 18px;
}

.s360-mini-kpi span {
    color: #64748b;
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.s360-mini-kpi strong {
    color: #0f172a;
    display: block;
    font-size: 22px;
    font-weight: 800;
    margin-top: 8px;
}

.s360-flow {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.s360-flow-card {
    animation: s360-rise .36s ease-out;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,251,255,.96));
    border: 1px solid rgba(2,45,96,.09);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px rgba(28,55,90,.08);
    min-height: 290px;
    padding: 20px;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
}

.s360-flow-card:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 34px rgba(28,55,90,.14);
    transform: translateY(-3px);
}

.s360-flow-card h4 {
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
    margin: 14px 0 8px;
}

.s360-flow-card p {
    color: #64748b;
    font-weight: 600;
    line-height: 1.55;
    min-height: 68px;
}

.s360-flow-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.s360-flow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.s360-flow-actions a,
.s360-report-card {
    text-decoration: none;
}

.s360-flow-actions a {
    background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
    border: 1px solid rgba(27,132,255,.18);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    color: #022d60;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 10px;
}

.s360-report-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.s360-report-card {
    align-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(2,45,96,.08);
    border-radius: 8px;
    color: #0f172a;
    display: flex;
    font-weight: 800;
    gap: 12px;
    min-height: 82px;
    padding: 16px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.s360-report-card:hover {
    box-shadow: 0 14px 30px rgba(28,55,90,.12);
    color: #022d60;
    transform: translateY(-2px);
}

.s360-guide-step {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.s360-guide-step b {
    align-items: center;
    background: linear-gradient(145deg, #1b84ff, #075eb5);
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(27,132,255,.2);
    color: #fff;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.s360-guide-step span {
    color: #334155;
    font-weight: 700;
    line-height: 1.45;
}

@keyframes s360-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.s360-panel .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-bottom: 1px solid rgba(2, 45, 96, .07);
}

.s360-notice-card {
    background:
        radial-gradient(circle at top right, rgba(27,132,255,.16), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
}

.s360-auth-visual {
    background-image:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(135deg, rgba(6, 69, 127, .88), rgba(1, 26, 56, .92)),
        url('../media/auth/bg4.jpg');
}

.s360-kpi-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.s360-grid .table {
    margin-bottom: 0;
}

.s360-grid table {
    width: 100%;
}

.s360-grid th {
    color: #5e6b7a;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.s360-grid td {
    color: #1f2937;
    font-weight: 600;
}

.s360-role-box {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(2, 45, 96, .1);
    border-radius: 8px;
    padding: 18px;
}

.s360-check-list td {
    padding: 8px 28px 8px 0;
}

.s360-check-list label {
    color: #334155;
    font-weight: 700;
    margin-left: 8px;
}

.menu-link.disabled {
    opacity: .55;
}

@media (max-width: 991.98px) {
    .s360-auth-visual {
        min-height: 360px;
    }

    .s360-flow,
    .s360-report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .s360-command-hero {
        padding: 22px;
    }

    .s360-flow,
    .s360-report-grid {
        grid-template-columns: 1fr;
    }

    .s360-flow-card {
        min-height: auto;
    }
}