:root{--lavender-500:#7C4DFF;--lavender-600:#6C43E9;--lavender-700:#5A36CC;--lavender-300:#B39DDB;--lavender-200:#D1C4E9;--ink-900:#1c1b29;--ink-700:#2e2c47;--ink-600:#3b3856;--accent-rose:#F06292;--accent-mint:#00C4B3;--nav-height:56px;--sidebar-start:#311B92;--sidebar-end:#4527A0}
body{background:linear-gradient(180deg,#f6f4fb 0%,#efe9ff 100%)}
.navbar{background:linear-gradient(90deg,var(--lavender-600),var(--lavender-500))}
.navbar .navbar-brand,.navbar .nav-link,.navbar .navbar-text{color:#fff}
.btn{border-radius:12px}
.btn-primary{background-image:linear-gradient(135deg,var(--lavender-600),var(--lavender-500));border:0;box-shadow:0 6px 16px rgba(124,77,255,.25)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-outline-primary{color:var(--lavender-600);border-color:var(--lavender-600)}
.btn-outline-primary:hover{background-color:var(--lavender-600);color:#fff}
.btn-light{background-color:#fff;color:var(--lavender-700);border-color:#fff}
.btn-light:hover{background-color:#f7f7f7;color:var(--lavender-700)}
.layout{display:flex;min-height:100vh}
.sidebar{width:280px;background:linear-gradient(180deg,var(--sidebar-start),var(--sidebar-end));color:#fff;position:sticky;top:var(--nav-height);align-self:flex-start;height:calc(100vh - var(--nav-height))}
.sidebar .brand{padding:1rem;margin:.75rem;background:#fff;color:#1c1b29;border-radius:14px;font-weight:700;letter-spacing:.5px;text-align:center}
.sidebar .brand .logo{height:125px;width:auto;display:block;margin:0 auto}
.sidebar .menu{margin-top:1rem}
.sidebar a{color:#e7e1ff;display:block;padding:.7rem 1rem;text-decoration:none;border-left:3px solid transparent}
.collapse-toggle{cursor:pointer}
.collapse-toggle .chevron{float:right;transition:transform .2s ease}
.collapse-toggle[aria-expanded="true"] .chevron{transform:rotate(90deg)}
.submenu{padding-left:.25rem}
.submenu a{padding-left:2rem;opacity:.95}
.sidebar a i{margin-right:.5rem;opacity:.95}
.sidebar a:hover{background:rgba(255,255,255,.06)}
.sidebar a.active{color:#fff;background:rgba(255,255,255,.12);border-left-color:var(--accent-mint)}
.content{flex:1;padding:4.5rem 1rem 1rem}
.card{border:none;border-radius:16px;box-shadow:0 10px 30px rgba(28,27,41,.12);background:rgba(255,255,255,.85);backdrop-filter:blur(8px)}
.metric-card{border-radius:18px;background:linear-gradient(135deg,var(--lavender-600),var(--lavender-500));color:#fff;box-shadow:0 12px 24px rgba(124,77,255,.3)}
.metric-card .title{opacity:.9}
.metric-card .value{font-size:32px;font-weight:700}
.metric-card .icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2)}
.metric-card:hover{transform:translateY(-2px);transition:transform .2s ease}
.progress{height:6px;border-radius:8px;background:rgba(255,255,255,.3)}
.badge-soft{background:rgba(255,255,255,.2);color:#fff;border-radius:20px}
.loading-overlay{position:fixed;inset:0;background:rgba(28,27,41,.18);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1050}
.loading-overlay.show{display:flex}
.loader{padding:24px 28px;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.spinner{width:36px;height:36px;border:4px solid #eee;border-top-color:var(--lavender-600);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:992px){.sidebar{position:fixed;left:-280px;transition:left .3s;top:var(--nav-height);height:calc(100vh - var(--nav-height))}.sidebar.show{left:0}.content{padding-top:4.5rem}}