/* =====================================================================
 *  CRM Pro skin: modern, colourful and animated overlay.
 *  Loaded AFTER crm-theme.css / crm-portal-theme.css. Delete the <link>
 *  in crm_theme_helper.php (or this file) to go back to the old look.
 * ===================================================================== */

:root {
    --crm-bg: #f4f6fb;
    --crm-surface: #ffffff;
    --crm-surface-2: #f8f9fd;
    --crm-surface-3: #eef1f9;
    --crm-border: #e4e8f2;
    --crm-border-strong: #cfd6e8;
    --crm-text: #1c2240;
    --crm-text-2: #3a4262;
    --crm-muted: #6b7394;
    --crm-primary: #5b5bf0;
    --crm-primary-600: #4646d6;
    --crm-primary-soft: #ececff;
    --crm-violet: #8b5cf6;
    --crm-pink: #ec4899;
    --crm-cyan: #06b6d4;
    --crm-success: #10b981;
    --crm-warning: #f59e0b;
    --crm-danger: #ef4444;
    --crm-info: #3b82f6;
    --crm-grad: linear-gradient(135deg, #5b5bf0 0%, #8b5cf6 55%, #ec4899 100%);
    --crm-grad-soft: linear-gradient(135deg, #ececff 0%, #f5ecff 100%);
    --crm-sidebar: #141a3a;
    --crm-sidebar-text: #c9d0f0;
    --crm-sidebar-muted: #8089b8;
    --crm-sidebar-hover: rgba(139, 92, 246, .16);
    --crm-shadow: 0 1px 3px rgba(28, 34, 64, .06), 0 4px 14px rgba(91, 91, 240, .06);
    --crm-shadow-lg: 0 14px 40px rgba(60, 60, 160, .20);
    --crm-radius: 12px;
    --crm-hover-row: #f3f4ff;
    --pro-ease: cubic-bezier(.22, .8, .3, 1);
}

html[data-theme="dark"] {
    --crm-bg: #0d1020;
    --crm-surface: #161a30;
    --crm-surface-2: #1c2140;
    --crm-surface-3: #252b50;
    --crm-border: #2a3055;
    --crm-border-strong: #3a4272;
    --crm-text: #eef0ff;
    --crm-text-2: #cdd2f0;
    --crm-muted: #98a0cc;
    --crm-primary: #8b8bff;
    --crm-primary-600: #6c6cf5;
    --crm-primary-soft: rgba(139, 139, 255, .16);
    --crm-grad: linear-gradient(135deg, #6c6cf5 0%, #9b6cf7 55%, #ec4899 100%);
    --crm-grad-soft: linear-gradient(135deg, rgba(108, 108, 245, .18), rgba(236, 72, 153, .12));
    --crm-sidebar: #0a0d1c;
    --crm-header: #161a30;
    --crm-input: #12162b;
    --crm-hover-row: #1d2346;
    --crm-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    --crm-shadow-lg: 0 14px 40px rgba(0, 0, 0, .55);
}

/* ---------- keyframes ---------- */
@keyframes proFadeUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes proFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes proPop      { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes proSlideIn  { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes proGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes proFloat    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes proPulse    { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 100% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } }
@keyframes proShimmer  { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* ---------- base ---------- */
body.app.admin {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Roboto", sans-serif;
    background:
        radial-gradient(900px 400px at 100% -10%, rgba(139, 92, 246, .10), transparent 60%),
        radial-gradient(700px 360px at 0% 110%, rgba(6, 182, 212, .08), transparent 60%),
        var(--crm-bg);
    background-attachment: fixed;
}
body.app.admin #wrapper > .content,
body.app.admin .content { animation: proFadeUp .5s var(--pro-ease) both; }
::selection { background: var(--crm-primary); color: #fff; }

/* ---------- sidebar ---------- */
body.app.admin aside#menu.sidebar {
    background: linear-gradient(180deg, var(--crm-sidebar) 0%, #1d1650 100%) !important;
    border-right: 0;
    box-shadow: 4px 0 24px rgba(20, 26, 58, .18);
}
html[data-theme="dark"] body.app.admin aside#menu.sidebar { background: linear-gradient(180deg, #0a0d1c, #140f33) !important; }
body.app.admin aside#menu.sidebar .nav > li { animation: proSlideIn .45s var(--pro-ease) both; }
body.app.admin aside#menu.sidebar .nav > li:nth-child(1) { animation-delay: .03s; }
body.app.admin aside#menu.sidebar .nav > li:nth-child(2) { animation-delay: .06s; }
body.app.admin aside#menu.sidebar .nav > li:nth-child(3) { animation-delay: .09s; }
body.app.admin aside#menu.sidebar .nav > li:nth-child(4) { animation-delay: .12s; }
body.app.admin aside#menu.sidebar .nav > li:nth-child(5) { animation-delay: .15s; }
body.app.admin aside#menu.sidebar .nav > li:nth-child(6) { animation-delay: .18s; }
body.app.admin aside#menu.sidebar .nav > li:nth-child(7) { animation-delay: .21s; }
body.app.admin aside#menu.sidebar .nav > li:nth-child(8) { animation-delay: .24s; }
body.app.admin aside#menu.sidebar .nav > li:nth-child(n+9) { animation-delay: .27s; }
body.app.admin aside#menu.sidebar .nav > li > a {
    border-radius: 10px;
    margin: 2px 8px;
    transition: background .25s ease, transform .25s var(--pro-ease), color .2s ease;
}
body.app.admin aside#menu.sidebar .nav > li > a:hover {
    background: var(--crm-sidebar-hover);
    color: #fff;
    transform: translateX(4px);
}
body.app.admin aside#menu.sidebar .nav > li.active > a {
    background: var(--crm-grad) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(91, 91, 240, .45);
}
body.app.admin aside#menu.sidebar .nav > li > a > i { transition: transform .3s var(--pro-ease); }
body.app.admin aside#menu.sidebar .nav > li > a:hover > i { transform: scale(1.18) rotate(-6deg); }

/* ---------- top header ---------- */
body.app.admin #header .navbar,
body.app.admin #header {
    background: var(--crm-header, #fff);
    border-bottom: 1px solid var(--crm-border);
    box-shadow: 0 2px 14px rgba(91, 91, 240, .07);
    backdrop-filter: saturate(1.4) blur(8px);
}

/* ---------- cards / panels ---------- */
body.app.admin .panel_s {
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    transition: transform .3s var(--pro-ease), box-shadow .3s ease, border-color .3s ease;
    animation: proFadeUp .55s var(--pro-ease) both;
}
body.app.admin .row > div:nth-child(2) > .panel_s { animation-delay: .06s; }
body.app.admin .row > div:nth-child(3) > .panel_s { animation-delay: .12s; }
body.app.admin .row > div:nth-child(4) > .panel_s { animation-delay: .18s; }
body.app.admin .widget .panel_s:hover,
body.app.admin .panel_s.panel-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--crm-shadow-lg);
    border-color: var(--crm-primary);
}
body.app.admin .panel_s .panel-heading {
    border-radius: var(--crm-radius) var(--crm-radius) 0 0;
    background: var(--crm-grad-soft);
    font-weight: 600;
}

/* ---------- buttons ---------- */
body.app.admin .btn {
    border-radius: 10px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: transform .2s var(--pro-ease), box-shadow .25s ease, background-color .25s ease, filter .2s ease;
}
body.app.admin .btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(91, 91, 240, .25); }
body.app.admin .btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
body.app.admin .btn-primary,
body.app.admin .btn-info.btn-primary {
    background: var(--crm-grad) !important;
    background-size: 200% 200% !important;
    border: 0 !important;
    color: #fff !important;
}
body.app.admin .btn-primary:hover { animation: proGradient 3s ease infinite; filter: brightness(1.06); }
body.app.admin .btn-primary::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
}
body.app.admin .btn-primary:hover::after { animation: proShimmer .9s ease; }
body.app.admin .btn-success { background: linear-gradient(135deg, #10b981, #06b6d4); border: 0; }
body.app.admin .btn-danger  { background: linear-gradient(135deg, #ef4444, #ec4899); border: 0; }
body.app.admin .btn-warning { background: linear-gradient(135deg, #f59e0b, #f97316); border: 0; color: #fff; }

/* ---------- forms ---------- */
body.app.admin .form-control {
    border-radius: 10px;
    border: 1px solid var(--crm-border-strong);
    transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
body.app.admin .form-control:focus {
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 4px rgba(91, 91, 240, .16);
}

/* ---------- tables ---------- */
body.app.admin table.dataTable tbody tr,
body.app.admin .table tbody tr { transition: background .2s ease, transform .2s ease; }
body.app.admin table.dataTable tbody tr:hover,
body.app.admin .table-hover tbody tr:hover { background: var(--crm-hover-row) !important; }
body.app.admin .table > thead > tr > th {
    background: var(--crm-surface-2);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--crm-muted);
    border-bottom: 2px solid var(--crm-primary-soft);
}

/* ---------- labels, badges, tabs ---------- */
body.app.admin .label,
body.app.admin .badge { border-radius: 999px; padding: 4px 10px; font-weight: 600; animation: proPop .35s var(--pro-ease) both; }
body.app.admin .nav-tabs > li > a { border-radius: 10px 10px 0 0; transition: background .2s ease, color .2s ease; }
body.app.admin .nav-tabs > li.active > a { border-bottom: 3px solid var(--crm-primary); color: var(--crm-primary); }
body.app.admin .tab-content > .tab-pane.active { animation: proFadeIn .35s ease both; }

/* ---------- modals, dropdowns, popovers ---------- */
body.app.admin .modal.fade .modal-dialog { transform: translateY(24px) scale(.97); transition: transform .35s var(--pro-ease), opacity .25s ease; }
body.app.admin .modal.in .modal-dialog   { transform: none; }
body.app.admin .modal-content { border: 0; border-radius: 16px; box-shadow: var(--crm-shadow-lg); overflow: hidden; }
body.app.admin .dropdown-menu { border-radius: 12px; border: 1px solid var(--crm-border); box-shadow: var(--crm-shadow-lg); animation: proPop .22s var(--pro-ease) both; }
body.app.admin .dropdown-menu > li > a { border-radius: 8px; margin: 1px 6px; transition: background .15s ease, padding-left .2s ease; }
body.app.admin .dropdown-menu > li > a:hover { background: var(--crm-primary-soft); padding-left: 20px; }

/* ---------- notification dot ---------- */
body.app.admin #header .icon .label.bg-warning,
body.app.admin .notifications-wrapper .label { animation: proPulse 1.6s infinite; }

/* ---------- login / authentication pages ---------- */
body.login_admin {
    background: linear-gradient(-45deg, #1b1464, #5b5bf0, #8b5cf6, #ec4899, #06b6d4) !important;
    background-size: 400% 400% !important;
    animation: proGradient 18s ease infinite;
    position: relative;
    overflow-x: hidden;
}
body.login_admin::before,
body.login_admin::after {
    content: ""; position: fixed; border-radius: 50%; z-index: 0; pointer-events: none;
    background: rgba(255, 255, 255, .10); animation: proFloat 9s ease-in-out infinite;
}
body.login_admin::before { width: 360px; height: 360px; top: -90px; left: -90px; }
body.login_admin::after  { width: 260px; height: 260px; bottom: -70px; right: -50px; animation-delay: -4s; }
body.login_admin .container { position: relative; z-index: 1; }
body.login_admin .authentication-form-wrapper > div.tw-bg-white {
    background: rgba(255, 255, 255, .95) !important;
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(10, 10, 60, .35) !important;
    animation: proPop .6s var(--pro-ease) both !important;
}
html[data-theme="dark"] body.login_admin .authentication-form-wrapper > div.tw-bg-white { background: rgba(22, 26, 48, .94) !important; }
body.login_admin .form-control { border-radius: 10px; }
body.login_admin .form-control:focus { border-color: #5b5bf0; box-shadow: 0 0 0 4px rgba(91, 91, 240, .18); }
body.login_admin .btn-primary {
    background: linear-gradient(135deg, #5b5bf0, #8b5cf6, #ec4899) !important;
    background-size: 200% 200% !important;
    border: 0 !important; border-radius: 10px; transition: transform .2s var(--pro-ease), box-shadow .25s ease;
}
body.login_admin .btn-primary:hover { background: linear-gradient(135deg, #5b5bf0, #8b5cf6, #ec4899) !important; animation: proGradient 3s ease infinite; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(91, 91, 240, .4); }
body.login_admin a { color: #5b5bf0; }
body.login_admin .crm-brand-mark { background: linear-gradient(135deg, #5b5bf0, #ec4899); border-radius: 10px; box-shadow: 0 8px 18px -4px rgba(0,0,0,.35); }

/* ---------- customer portal ---------- */
body.customers .navbar,
body.customers .navbar-default {
    background: var(--crm-surface) !important;
    border-bottom: 1px solid var(--crm-border);
    box-shadow: 0 2px 14px rgba(91, 91, 240, .08);
}
body.customers .panel_s,
body.customers .card {
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    animation: proFadeUp .55s var(--pro-ease) both;
    transition: transform .3s var(--pro-ease), box-shadow .3s ease;
}
body.customers .panel_s:hover { transform: translateY(-3px); box-shadow: var(--crm-shadow-lg); }
body.customers .btn { border-radius: 10px; font-weight: 600; transition: transform .2s var(--pro-ease), box-shadow .25s ease; }
body.customers .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(91, 91, 240, .25); }
body.customers .btn-primary { background: var(--crm-grad); border: 0; }
body.customers .form-control { border-radius: 10px; transition: border-color .2s ease, box-shadow .25s ease; }
body.customers .form-control:focus { border-color: var(--crm-primary); box-shadow: 0 0 0 4px rgba(91, 91, 240, .16); }

/* ---------- scrollbar ---------- */
body.app.admin ::-webkit-scrollbar { width: 10px; height: 10px; }
body.app.admin ::-webkit-scrollbar-thumb { background: var(--crm-border-strong); border-radius: 10px; }
body.app.admin ::-webkit-scrollbar-thumb:hover { background: var(--crm-primary); }

/* =====================================================================
 *  Stylish components: dashboard, stat cards, lists, kanban, tables
 * ===================================================================== */
@keyframes proBarGrow { from { width: 0; } }
@keyframes proHeroFlow { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* dashboard hero */
.crm-dash-hero {
    background: linear-gradient(120deg, #4338ca, #7c3aed, #db2777, #0891b2) !important;
    background-size: 300% 300% !important;
    animation: proHeroFlow 14s ease infinite !important;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(91, 91, 240, .32);
}
.crm-dash-hero::after {
    display: block !important;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%);
    animation: proFloat 8s ease-in-out infinite;
}

/* KPI / quick-stat cards */
.crm-kpi, .top_stats_wrapper {
    position: relative; overflow: hidden;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: var(--crm-shadow);
    transition: transform .3s var(--pro-ease), box-shadow .3s ease, border-color .3s ease;
    animation: proFadeUp .55s var(--pro-ease) both;
}
.crm-kpi::before, .top_stats_wrapper::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--crm-grad);
}
.crm-kpi:hover, .top_stats_wrapper:hover {
    transform: translateY(-5px);
    box-shadow: var(--crm-shadow-lg);
    border-color: var(--crm-primary);
}
.crm-kpis > :nth-child(2), .quick-stats-leads .top_stats_wrapper { animation-delay: .08s; }
.crm-kpis > :nth-child(3), .quick-stats-projects .top_stats_wrapper { animation-delay: .16s; }
.crm-kpis > :nth-child(4), .quick-stats-tasks .top_stats_wrapper { animation-delay: .24s; }
.quick-stats-leads .top_stats_wrapper::before    { background: linear-gradient(180deg, #06b6d4, #3b82f6); }
.quick-stats-projects .top_stats_wrapper::before { background: linear-gradient(180deg, #10b981, #06b6d4); }
.quick-stats-tasks .top_stats_wrapper::before    { background: linear-gradient(180deg, #f59e0b, #ec4899); }
.top_stats_wrapper svg { color: var(--crm-primary); transition: transform .35s var(--pro-ease); }
.top_stats_wrapper:hover svg { transform: scale(1.2) rotate(-8deg); }

/* progress bars */
body.app.admin .progress { height: 8px; border-radius: 999px; background: var(--crm-surface-3); box-shadow: none; overflow: hidden; }
body.app.admin .progress-bar { background: var(--crm-grad); animation: proBarGrow 1.1s var(--pro-ease) both; }
body.app.admin .progress-bar-success { background: linear-gradient(90deg, #10b981, #06b6d4); }
body.app.admin .progress-bar-danger  { background: linear-gradient(90deg, #ef4444, #ec4899); }
body.app.admin .progress-bar-warning { background: linear-gradient(90deg, #f59e0b, #f97316); }
body.app.admin .progress-bar-info    { background: linear-gradient(90deg, #3b82f6, #06b6d4); }

/* list groups */
body.app.admin .list-group { border-radius: 14px; overflow: hidden; box-shadow: var(--crm-shadow); border: 1px solid var(--crm-border); }
body.app.admin .list-group-item {
    border: 0; border-bottom: 1px solid var(--crm-border);
    background: var(--crm-surface); color: var(--crm-text-2);
    transition: background .2s ease, padding-left .25s var(--pro-ease), color .2s ease;
}
body.app.admin .list-group-item:last-child { border-bottom: 0; }
body.app.admin .list-group-item:hover,
body.app.admin .list-group-item.active { background: var(--crm-primary-soft); color: var(--crm-primary); padding-left: 22px; }
body.app.admin .list-group-item.active { border-left: 4px solid var(--crm-primary); font-weight: 600; }

/* kanban boards (leads, tasks, projects) */
body.app.admin .kan-ban-col { border-radius: 14px; background: var(--crm-surface-2); border: 1px solid var(--crm-border); }
body.app.admin ul.kan-ban-col > li,
body.app.admin .kan-ban-content-wrapper li {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 12px;
    box-shadow: var(--crm-shadow);
    transition: transform .25s var(--pro-ease), box-shadow .25s ease, border-color .25s ease;
    animation: proPop .4s var(--pro-ease) both;
}
body.app.admin ul.kan-ban-col > li:hover,
body.app.admin .kan-ban-content-wrapper li:hover { transform: translateY(-3px); box-shadow: var(--crm-shadow-lg); border-color: var(--crm-primary); }

/* tables and DataTables */
body.app.admin .table > tbody > tr > td { padding: 12px 10px; border-top: 1px solid var(--crm-border); vertical-align: middle; }
body.app.admin table.dataTable tbody tr { animation: proFadeIn .4s ease both; }
body.app.admin .dataTables_wrapper .dataTables_length select,
body.app.admin .dataTables_wrapper .dataTables_filter input { border-radius: 10px; border: 1px solid var(--crm-border-strong); transition: box-shadow .2s ease, border-color .2s ease; }
body.app.admin .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--crm-primary); box-shadow: 0 0 0 4px rgba(91, 91, 240, .16); outline: 0; }
body.app.admin .dt-buttons .btn { border-radius: 10px; }

/* pagination */
body.app.admin .pagination > li > a,
body.app.admin .pagination > li > span { border-radius: 10px !important; margin: 0 2px; border: 1px solid var(--crm-border); transition: transform .2s var(--pro-ease), background .2s ease; }
body.app.admin .pagination > li > a:hover { transform: translateY(-2px); }
body.app.admin .pagination > .active > a,
body.app.admin .pagination > .active > span { background: var(--crm-grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 6px 14px rgba(91, 91, 240, .4); }

/* avatars, alerts, todos */
body.app.admin .staff-profile-image-small,
body.app.admin .staff-profile-image-thumb,
body.app.admin img.img-circle { border: 2px solid var(--crm-surface); box-shadow: 0 0 0 2px var(--crm-primary-soft); transition: transform .25s var(--pro-ease), box-shadow .25s ease; }
body.app.admin .staff-profile-image-small:hover { transform: scale(1.12); box-shadow: 0 0 0 3px var(--crm-primary); }
body.app.admin .alert { border: 0; border-left: 4px solid currentColor; border-radius: 12px; box-shadow: var(--crm-shadow); animation: proFadeUp .4s var(--pro-ease) both; }
body.app.admin .todo-body { border-radius: 12px; transition: background .2s ease, transform .2s var(--pro-ease); }
body.app.admin .todo-body:hover { background: var(--crm-primary-soft); transform: translateX(4px); }

/* client portal lists and tables */
body.customers .list-group { border-radius: 14px; overflow: hidden; box-shadow: var(--crm-shadow); }
body.customers .list-group-item { transition: background .2s ease, padding-left .25s var(--pro-ease); }
body.customers .list-group-item:hover { background: var(--crm-primary-soft); padding-left: 22px; }
body.customers .table > thead > tr > th { background: var(--crm-surface-2); text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
body.customers .table > tbody > tr:hover { background: var(--crm-hover-row); }

/* ---------- animated dashboard widgets ---------- */
@keyframes proIconPulse { 0%, 100% { box-shadow: 0 8px 18px -6px var(--kc, rgba(91,91,240,.6)); } 50% { box-shadow: 0 12px 26px -4px var(--kc, rgba(91,91,240,.8)); } }
@keyframes proSpark { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pro-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: proRipple .6s ease-out; pointer-events: none; }
@keyframes proRipple { to { transform: scale(2.6); opacity: 0; } }

.crm-kpi { display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; }
.crm-kpi::before { display: none; }
.crm-kpi::after {
    content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
    background: var(--k, var(--crm-grad)); opacity: .10; transition: transform .5s var(--pro-ease), opacity .3s ease;
}
.crm-kpi:hover::after { transform: scale(1.8); opacity: .16; }
.crm-kpi-icon {
    width: 46px; height: 46px; border-radius: 14px; font-size: 19px; color: #fff !important;
    background: var(--k, var(--crm-grad)) !important;
    --kc: rgba(91, 91, 240, .6);
    animation: proIconPulse 3.2s ease-in-out infinite;
    transition: transform .4s var(--pro-ease);
}
.crm-kpi:hover .crm-kpi-icon { transform: rotate(-8deg) scale(1.12); }
.crm-kpi-value { font-size: 28px; font-weight: 800; background: var(--crm-text); -webkit-background-clip: text; background-clip: text; }
.crm-g1 { --k: linear-gradient(135deg, #5b5bf0, #8b5cf6); --kc: rgba(91, 91, 240, .6); }
.crm-g2 { --k: linear-gradient(135deg, #06b6d4, #3b82f6); --kc: rgba(6, 182, 212, .6); }
.crm-g3 { --k: linear-gradient(135deg, #f59e0b, #f97316); --kc: rgba(245, 158, 11, .6); }
.crm-g4 { --k: linear-gradient(135deg, #10b981, #14b8a6); --kc: rgba(16, 185, 129, .6); }
.crm-g5 { --k: linear-gradient(135deg, #ef4444, #ec4899); --kc: rgba(239, 68, 68, .6); }
.crm-g6 { --k: linear-gradient(135deg, #8b5cf6, #d946ef); --kc: rgba(139, 92, 246, .6); }
.crm-chip { border-radius: 999px; font-weight: 700; }

.crm-card, .crm-today-box {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 18px;
    box-shadow: var(--crm-shadow);
    transition: transform .3s var(--pro-ease), box-shadow .3s ease, border-color .3s ease;
}
.crm-card:hover { box-shadow: var(--crm-shadow-lg); border-color: var(--crm-border-strong); }
.crm-today-box:hover { transform: translateY(-4px); box-shadow: var(--crm-shadow-lg); border-color: var(--crm-primary); }
.crm-card-head h4 { font-weight: 700; letter-spacing: -.01em; }
.crm-today-title .crm-icon, .crm-today-title > span:first-child { background: var(--crm-grad-soft); color: var(--crm-primary); border-radius: 12px; }

/* top app switcher */
.crm-app-btn { border-radius: 12px; transition: background .25s ease, transform .25s var(--pro-ease); }
.crm-app-btn:hover { transform: translateY(-2px); }
.crm-app-btn.active::after { background: var(--app); height: 3px; border-radius: 3px; }
.crm-menu-section { letter-spacing: .12em; color: var(--crm-sidebar-muted); }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}