{{-- =====================================================================
     Somity Keeper Lite — Fresh modern palette (light). Loaded system-wide after the
     vendor theme so it re-skins every page at once: it overrides the theme's
     colour tokens (--*-rgb) and layers a consistent component polish on top.
     ===================================================================== --}}
<style>
    :root {
        /* ---- Fresh modern palette (indigo + teal on a cool canvas) ---- */
        --primary-rgb:    79, 70, 229;     /* indigo  #4f46e5 */
        --secondary-rgb:  100, 116, 139;   /* slate   #64748b */
        --success-rgb:    16, 185, 129;    /* emerald #10b981 */
        --info-rgb:       6, 182, 212;     /* cyan    #06b6d4 */
        --warning-rgb:    245, 158, 11;    /* amber   #f59e0b */
        --danger-rgb:     244, 63, 94;     /* rose    #f43f5e */
        --body-bg-rgb:    244, 246, 251;   /* soft cool grey */

        --default-text-color: #1e293b;
        --default-border: #e8ecf3;
        --default-background: #f4f6fb;

        /* Local design tokens used by the polish layer below */
        --wk-canvas: #f4f6fb;
        --wk-surface: #ffffff;
        --wk-line: #eaeef6;
        --wk-ink: #1e293b;
        --wk-muted: #64748b;
        --wk-faint: #94a3b8;
        --wk-accent: #4f46e5;
        --wk-accent-2: #6366f1;
        --wk-ring: rgba(79, 70, 229, .18);
        --wk-shadow: 0 8px 24px -16px rgba(15, 23, 42, .28);
        --wk-shadow-lg: 0 18px 40px -20px rgba(15, 23, 42, .35);
        --wk-radius: .9rem;
    }

    /* ---- Canvas: soft cool grey so white cards float ---- */
    body, .page, .app-content, .main-content { background: var(--wk-canvas) !important; }

    /* ---- Cards: white, hairline border, soft elevation, rounder ---- */
    .app-content .card {
        border: 1px solid var(--wk-line) !important;
        border-radius: var(--wk-radius) !important;
        box-shadow: var(--wk-shadow) !important;
        background: var(--wk-surface);
    }
    .app-content .card .card-header {
        background: transparent;
        border-bottom: 1px solid var(--wk-line);
        padding: 1rem 1.15rem;
    }
    .app-content .card .card-title { font-weight: 700; color: var(--wk-ink); letter-spacing: -.01em; }
    .app-content .card .card-body { color: var(--wk-ink); }

    /* ---- Page title / headings ---- */
    .app-content h1, .app-content h2, .app-content h3,
    .app-content h4, .app-content h5, .app-content .page-title {
        color: var(--wk-ink); letter-spacing: -.015em; font-weight: 700;
    }
    .app-content .text-muted { color: var(--wk-muted) !important; }

    /* ---- Buttons: rounder, firmer weight, gentle lift ---- */
    .app-content .btn,
    .app-content .btn-sm {
        border-radius: .6rem; font-weight: 600; letter-spacing: .005em;
        transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
    }
    .app-content .btn:active { transform: translateY(1px); }
    .app-content .btn-primary {
        background-image: linear-gradient(135deg, #4f46e5, #6366f1);
        border-color: transparent;
        box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .6);
    }
    .app-content .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 12px 22px -10px rgba(79, 70, 229, .7); }
    .app-content .btn-success { background-image: linear-gradient(135deg, #10b981, #34d399); border-color: transparent; }
    .app-content .btn-danger  { background-image: linear-gradient(135deg, #f43f5e, #fb7185); border-color: transparent; }
    .app-content .btn-info    { background-image: linear-gradient(135deg, #06b6d4, #22d3ee); border-color: transparent; color: #fff; }
    .app-content .btn-warning { background-image: linear-gradient(135deg, #f59e0b, #fbbf24); border-color: transparent; color: #fff; }
    .app-content .btn-light {
        background: #fff; border: 1px solid var(--wk-line); color: #334155;
        box-shadow: 0 2px 8px -6px rgba(15,23,42,.25);
    }
    .app-content .btn-light:hover { border-color: #cbd5e1; background: #f8fafc; }
    .app-content .btn-outline-primary { border-color: var(--wk-accent); color: var(--wk-accent); }
    .app-content .btn-outline-primary:hover { background: var(--wk-accent); color: #fff; }

    /* ---- Tables: airy, muted uppercase head, soft hover ---- */
    .app-content .table { color: var(--wk-ink); }
    .app-content .table thead th {
        font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
        color: var(--wk-faint); font-weight: 700; border-bottom: 1px solid var(--wk-line) !important;
        background: transparent;
    }
    .app-content .table tbody td { border-bottom: 1px solid #f2f5fa; vertical-align: middle; }
    .app-content .table tbody tr:last-child td { border-bottom: 0; }
    .app-content .table-hover tbody tr:hover,
    .app-content .table tbody tr:hover { background: #f7f9fd; }

    /* ---- Form controls: rounder, accent focus ring ---- */
    .app-content .form-control,
    .app-content .form-select {
        border-radius: .6rem; border-color: var(--wk-line); color: var(--wk-ink);
        background-color: #fff;
    }
    .app-content .form-control:focus,
    .app-content .form-select:focus {
        border-color: var(--wk-accent-2);
        box-shadow: 0 0 0 .2rem var(--wk-ring);
    }
    .app-content .form-label { font-weight: 600; color: #475569; font-size: .82rem; margin-bottom: .3rem; }
    .app-content .form-check-input:checked { background-color: var(--wk-accent); border-color: var(--wk-accent); }
    .app-content .input-group-text { border-radius: .6rem; border-color: var(--wk-line); background: #f8fafc; color: var(--wk-muted); }

    /* ---- Badges & soft tints (theme provides bg-*-transparent) ---- */
    .app-content .badge { font-weight: 600; border-radius: 2rem; padding: .34em .7em; letter-spacing: .01em; }

    /* ---- Links ---- */
    .app-content a { color: var(--wk-accent); }
    .app-content a:hover { color: #4338ca; }
    .app-content a.btn, .app-content a.dropdown-item, .app-content a.nav-link,
    .app-content a.page-link, .app-content .list-group-item a { color: inherit; }

    /* ---- Pagination ---- */
    .app-content .page-item.active .page-link { background: var(--wk-accent); border-color: var(--wk-accent); }
    .app-content .page-link { color: var(--wk-muted); border-radius: .5rem; margin: 0 .12rem; border-color: var(--wk-line); }
    .app-content .page-link:hover { color: var(--wk-accent); background: #eef1fb; }

    /* ---- Dropdowns ---- */
    .dropdown-menu {
        border: 1px solid var(--wk-line); border-radius: .8rem;
        box-shadow: var(--wk-shadow-lg); padding: .35rem;
    }
    .dropdown-menu .dropdown-item { border-radius: .5rem; font-weight: 500; }
    .dropdown-menu .dropdown-item:hover { background: #eef1fb; color: var(--wk-accent); }

    /* ---- Sidebar: accent active state ---- */
    .app-sidebar .side-menu__item.active,
    .app-sidebar .side-menu__item:hover { color: var(--wk-accent); }
    .app-sidebar .side-menu__item.active { background: rgba(79,70,229,.08); border-radius: .6rem; }
    .app-sidebar .side-menu__item.active .side-menu__icon,
    .app-sidebar .slide.active .side-menu__icon { color: var(--wk-accent) !important; fill: var(--wk-accent); }
    .app-sidebar .slide-menu .slide.active .side-menu__item { color: var(--wk-accent); }

    /* ---- Header polish ---- */
    .app-header { border-bottom: 1px solid var(--wk-line); background: #fff; }

    /* ---- Alerts: softer, rounder ---- */
    .app-content .alert { border-radius: .75rem; border: 1px solid transparent; }

    /* ---- Progress / misc accents ---- */
    .app-content .progress-bar { background-color: var(--wk-accent); }
    ::selection { background: rgba(79,70,229,.18); }
</style>