:root {
    --cc-bg: #f7f9fc;
    --cc-card: #ffffff;
    --cc-border: #e6eaf0;
    --cc-primary: #5b5fff;
    --cc-success: #16c784;
    --cc-warning: #ffb020;
    --cc-danger: #ff5a5f;
    --cc-text: #0f172a;
    --cc-muted: #64748b;
}

.fi-body {
    background: var(--cc-bg);
    color: var(--cc-text);
}

.fi-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--cc-border) !important;
}

.fi-topbar {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cc-border) !important;
}

.fi-sidebar .fi-sidebar-item-active a {
    background: rgba(91, 95, 255, 0.1) !important;
    color: var(--cc-primary) !important;
}

.fi-main {
    padding-top: 1.1rem;
}

.fi-ta-content,
.fi-section,
.fi-ta-ctn,
.fi-in-section,
.fi-wi-widget {
    border-radius: 14px !important;
    background: var(--cc-card) !important;
    border: 1px solid var(--cc-border) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
}

.fi-ta-row {
    transition: transform 170ms ease, box-shadow 170ms ease;
}

.fi-ta-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.fi-btn {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transition: transform 170ms ease, box-shadow 170ms ease;
}

.fi-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.cc-dashboard {
    display: grid;
    gap: 1.35rem;
}

.cc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.95rem;
}

.cc-kpi-card {
    border-radius: 16px;
    border: 1px solid var(--cc-border);
    padding: 1.1rem 1.15rem;
    background: #ffffff;
    transition: transform 180ms ease, box-shadow 180ms ease;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.cc-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.1);
}

.cc-kpi-gradient {
    background: linear-gradient(135deg, rgba(91, 95, 255, 0.13), rgba(139, 92, 246, 0.12)), #ffffff;
}

.cc-kpi-warning { background: #fff9ec; }
.cc-kpi-danger { background: #ffefef; }
.cc-kpi-indigo { background: #eff1ff; }
.cc-kpi-violet { background: #f4efff; }

.cc-kpi-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cc-kpi-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: rgba(91, 95, 255, 0.12);
    color: var(--cc-primary);
    display: grid;
    place-items: center;
}

.cc-kpi-title {
    margin: 0;
    color: var(--cc-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.cc-kpi-value {
    margin: 0.8rem 0 0;
    font-size: clamp(1.45rem, 2vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cc-text);
}

.cc-section {
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--cc-border);
    padding: 1.15rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.cc-section-head {
    margin-bottom: 1rem;
}

.cc-section-head h2 {
    margin: 0;
    color: var(--cc-text);
    font-size: 1.12rem;
    font-weight: 700;
}

.cc-section-head p {
    margin: 0.3rem 0 0;
    color: var(--cc-muted);
    font-size: 0.84rem;
    font-weight: 400;
}

.cc-pipeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.cc-pipe-node {
    text-decoration: none;
    border-radius: 14px;
    border: 1px solid var(--cc-border);
    background: #f1f5f9;
    padding: 0.95rem;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.cc-pipe-node:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.cc-pipe-draft { background: #f1f5f9; }
.cc-pipe-quoted { background: #edf2ff; }
.cc-pipe-paid { background: #ecfdf5; }
.cc-pipe-purchased { background: #eef2ff; }
.cc-pipe-shipping { background: #f4efff; }
.cc-pipe-arrived { background: #eefcf7; }
.cc-pipe-problems { background: #ffecec; }

.cc-pipe-status {
    margin: 0;
    color: var(--cc-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.cc-pipe-count {
    margin: 0.32rem 0 0;
    color: var(--cc-text);
    font-size: 1.24rem;
    font-weight: 800;
}

.cc-alerts {
    display: grid;
    gap: 0.72rem;
}

.cc-alert {
    text-decoration: none;
    border-radius: 14px;
    border: 1px solid transparent;
    padding: 0.92rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 160ms ease;
}

.cc-alert:hover {
    transform: translateY(-1px);
}

.cc-alert-warning { background: #fff7e6; }
.cc-alert-danger { background: #ffecec; }
.cc-alert-success { background: #ecfdf5; }

.cc-alert-label {
    margin: 0;
    color: var(--cc-text);
    font-weight: 700;
    font-size: 0.92rem;
}

.cc-alert-meta {
    margin: 0.22rem 0 0;
    color: var(--cc-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.cc-alert-count {
    margin: 0;
    color: var(--cc-text);
    font-size: 1.18rem;
    font-weight: 800;
}

@media (min-width: 960px) {
    .cc-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cc-pipeline {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}