:root {
   --sp-color-primary: #1A3A5C;
   --sp-color-primary-hover: #14304f;
   --sp-color-primary-light: #EBF1F8;
   --sp-color-accent: #0D7CDB;
   --sp-color-accent-hover: #0A6BBF;
   --sp-color-accent-soft: #E0EFFA;
   --sp-color-success: #1A8A5A;
   --sp-color-warning: #C97B00;
   --sp-color-danger: #C0392B;
   --sp-color-bg: #F4F6F9;
   --sp-color-surface: #FFFFFF;
   --sp-color-border: #DDE3EC;
   --sp-color-border-light: #EDF0F5;
   --sp-color-text-primary: #1C2B40;
   --sp-color-text-secondary: #5A6A7E;
   --sp-color-text-muted: #8A97A8;
   --sp-color-text-inverse: #FFFFFF;
   --sp-sidebar-width: 260px;
   --sp-sidebar-collapsed: 64px;
   --sp-topbar-height: 60px;
   --sp-radius-xs: 2px;
   --sp-radius-sm: 2px;
   --sp-radius-md: 2px;
   --sp-radius-lg: 2px;
   --sp-shadow-xs: 0 1px 3px rgba(26, 58, 92, .07);
   --sp-shadow-sm: 0 2px 6px rgba(26, 58, 92, .09);
   --sp-shadow-md: 0 4px 16px rgba(26, 58, 92, .12);
   --sp-shadow-lg: 0 8px 32px rgba(26, 58, 92, .15);
   --sp-font-base: 'DM Sans', sans-serif;
   --sp-font-mono: 'DM Mono', monospace;
   --sp-transition: 180ms ease;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html,
 body {
   height: 100%;
   font-family: var(--sp-font-base);
   font-size: 14px;
   color: var(--sp-color-text-primary);
   background: var(--sp-color-bg);
   -webkit-font-smoothing: antialiased;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 ul,
 ol {
   list-style: none;
 }

 button {
   border: none;
   background: none;
   cursor: pointer;
   font: inherit;
 }

 /* APP SHELL */
 .sp__app-shell {
   display: flex;
   height: 100vh;
   overflow: hidden;
 }

 /* SIDEBAR */
 .sp__sidebar {
   width: 350px;
   height: 100vh;
   background: var(--sp-color-primary);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   transition: width var(--sp-transition);
   overflow: hidden;
   position: relative;
   z-index: 200;
   box-shadow: var(--sp-shadow-md);
 }

 .sp__sidebar--collapsed {
   width: var(--sp-sidebar-collapsed);
 }

 .sp__sidebar-brand {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 16px;
   height: var(--sp-topbar-height);
   border-bottom: 1px solid rgba(255, 255, 255, .08);
   flex-shrink: 0;
   overflow: hidden;
   white-space: nowrap;
 }

 .sp__sidebar-brand__icon {
   width: 32px;
   height: 32px;
   background: var(--sp-color-accent);
   border-radius: var(--sp-radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 15px;
   color: #fff;
 }

 .sp__sidebar-brand__name {
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   letter-spacing: -.3px;
   line-height: 1;
 }

 .sp__sidebar-brand__tagline {
   font-size: 9px;
   font-weight: 400;
   color: rgba(255, 255, 255, .45);
   text-transform: uppercase;
   letter-spacing: .8px;
   margin-top: 2px;
 }

 .sp__sidebar-nav {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 12px 0;
 }

 .sp__sidebar-nav::-webkit-scrollbar {
   width: 4px;
 }

 .sp__sidebar-nav::-webkit-scrollbar-track {
   background: transparent;
 }

 .sp__sidebar-nav::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, .15);
   border-radius: 2px;
 }

 .sp__nav-section-label {
   font-size: 9.5px;
   font-weight: 600;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .3);
   padding: 14px 20px 6px;
   white-space: nowrap;
   overflow: hidden;
 }

 .sp__sidebar--collapsed .sp__nav-section-label {
   opacity: 0;
   height: 0;
   padding: 0;
 }

 .sp__nav-item {
   position: relative;
 }

 .sp__nav-link {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 20px;
   height: 40px;
   color: rgba(255, 255, 255, .7);
   font-size: 13.5px;
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
   user-select: none;
   transition: background var(--sp-transition), color var(--sp-transition);
   border-left: 2px solid transparent;
 }

 .sp__nav-link:hover {
   background: rgba(255, 255, 255, .07);
   color: #fff;
 }

 .sp__nav-item--active>.sp__nav-link {
   background: rgba(13, 124, 219, .22);
   color: #fff;
   font-weight: 500;
   border-left-color: var(--sp-color-accent);
 }

 .sp__nav-item--active>.sp__nav-link--l2 {
   background: rgba(13, 124, 219, .18);
   color: #fff;
   font-weight: 500;
   border-left-color: var(--sp-color-accent);
 }

 .sp__nav-item--active>.sp__nav-link--l3 {
   color: var(--sp-color-accent);
   font-weight: 500;
 }

 .sp__nav-link__icon {
   width: 18px;
   height: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 14px;
 }

 .sp__nav-link__label {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .sp__nav-link__badge {
   font-size: 10px;
   font-weight: 600;
   font-family: var(--sp-font-mono);
   background: var(--sp-color-accent);
   color: #fff;
   padding: 1px 6px;
   border-radius: var(--sp-radius-xs);
   flex-shrink: 0;
 }

 .sp__nav-link__badge--warning {
   background: var(--sp-color-warning);
 }

 .sp__nav-link__arrow {
   font-size: 10px;
   flex-shrink: 0;
   transition: transform var(--sp-transition);
   color: rgba(255, 255, 255, .4);
 }

 .sp__nav-item--open>.sp__nav-link>.sp__nav-link__arrow {
   transform: rotate(90deg);
   color: rgba(255, 255, 255, .7);
 }

 .sp__submenu-l2 {
   display: none;
   background: rgba(0, 0, 0, .12);
 }

 .sp__nav-item--open>.sp__submenu-l2 {
   display: block;
 }

 .sp__nav-link--l2 {
   padding-left: 36px;
   font-size: 13px;
   height: 37px;
 }

 .sp__submenu-l3 {
   display: none;
   background: rgba(0, 0, 0, .10);
 }

 .sp__nav-item--open>.sp__submenu-l3 {
   display: block;
 }

 .sp__nav-link--l3 {
   padding-left: 54px;
   font-size: 12.5px;
   height: 34px;
   color: rgba(255, 255, 255, .55);
 }

 .sp__nav-link--l3:hover {
   background: rgba(255, 255, 255, .05);
   color: rgba(255, 255, 255, .9);
 }

 .sp__sidebar--collapsed .sp__nav-link__label,
 .sp__sidebar--collapsed .sp__nav-link__badge,
 .sp__sidebar--collapsed .sp__nav-link__arrow {
   opacity: 0;
   width: 0;
   overflow: hidden;
 }

 .sp__sidebar--collapsed .sp__nav-link {
   padding: 0;
   justify-content: center;
 }

 .sp__sidebar--collapsed .sp__submenu-l2,
 .sp__sidebar--collapsed .sp__submenu-l3 {
   display: none !important;
 }

 .sp__sidebar-footer {
   padding: 12px 16px;
   border-top: 1px solid rgba(255, 255, 255, .08);
   flex-shrink: 0;
 }

 .sp__sidebar-footer__toggle {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 4px;
   color: rgba(255, 255, 255, .45);
   font-size: 12px;
   cursor: pointer;
   transition: color var(--sp-transition);
   white-space: nowrap;
   overflow: hidden;
 }

 .sp__sidebar-footer__toggle:hover {
   color: rgba(255, 255, 255, .8);
 }

 .sp__sidebar-footer__toggle i {
   font-size: 14px;
   flex-shrink: 0;
   transition: transform var(--sp-transition);
 }

 .sp__sidebar--collapsed .sp__sidebar-footer__toggle i {
   transform: rotate(180deg);
 }

 .sp__sidebar--collapsed .sp__sidebar-footer__toggle span {
   opacity: 0;
 }

 /* MAIN AREA */
 .sp__main-area {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   min-width: 0;
 }

 /* TOPBAR */
 .sp__topbar {
   height: var(--sp-topbar-height);
   background: var(--sp-color-surface);
   border-bottom: 1px solid var(--sp-color-border);
   display: flex;
   align-items: center;
   padding: 0 20px;
   gap: 12px;
   flex-shrink: 0;
   z-index: 100;
   box-shadow: var(--sp-shadow-xs);
 }

 .sp__topbar-breadcrumb {
   display: flex;
   align-items: center;
   gap: 6px;
   flex: 1;
   min-width: 0;
 }

 .sp__topbar-breadcrumb__root {
   font-size: 11px;
   font-weight: 500;
   color: var(--sp-color-text-muted);
   text-transform: uppercase;
   letter-spacing: .8px;
   white-space: nowrap;
 }

 .sp__topbar-breadcrumb__sep {
   color: var(--sp-color-border);
   font-size: 12px;
 }

 .sp__topbar-breadcrumb__current {
   font-size: 14px;
   font-weight: 600;
   color: var(--sp-color-text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .sp__topbar-actions {
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .sp__topbar-btn {
   width: 36px;
   height: 36px;
   border-radius: var(--sp-radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--sp-color-text-secondary);
   font-size: 15px;
   transition: background var(--sp-transition), color var(--sp-transition);
   position: relative;
   cursor: pointer;
 }

 .sp__topbar-btn:hover {
   background: var(--sp-color-primary-light);
   color: var(--sp-color-primary);
 }

 .sp__topbar-btn__badge {
   position: absolute;
   top: 5px;
   right: 5px;
   width: 8px;
   height: 8px;
   background: var(--sp-color-danger);
   border-radius: 50%;
   border: 2px solid var(--sp-color-surface);
 }

 .sp__topbar-divider {
   width: 1px;
   height: 22px;
   background: var(--sp-color-border);
   margin: 0 6px;
 }

 .sp__topbar-search {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--sp-color-bg);
   border: 1px solid var(--sp-color-border);
   border-radius: var(--sp-radius-sm);
   padding: 0 12px;
   height: 34px;
   width: 220px;
   transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
 }

 .sp__topbar-search:focus-within {
   border-color: var(--sp-color-accent);
   box-shadow: 0 0 0 3px rgba(13, 124, 219, .1);
 }

 .sp__topbar-search i {
   color: var(--sp-color-text-muted);
   font-size: 13px;
 }

 .sp__topbar-search input {
   border: none;
   background: transparent;
   font-family: var(--sp-font-base);
   font-size: 13px;
   color: var(--sp-color-text-primary);
   width: 100%;
   outline: none;
 }

 .sp__topbar-search input::placeholder {
   color: var(--sp-color-text-muted);
 }

 .sp__topbar-dropdown-wrap {
   position: relative;
 }

 .sp__topbar-dropdown {
   display: none;
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
   background: var(--sp-color-surface);
   border: 1px solid var(--sp-color-border);
   border-radius: var(--sp-radius-sm);
   box-shadow: var(--sp-shadow-lg);
   width: 300px;
   z-index: 1000;
   overflow: hidden;
 }

 .sp__topbar-dropdown--open {
   display: block;
 }

 .sp__topbar-dropdown__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 16px 10px;
   border-bottom: 1px solid var(--sp-color-border-light);
 }

 .sp__topbar-dropdown__title {
   font-size: 13px;
   font-weight: 600;
   color: var(--sp-color-text-primary);
 }

 .sp__topbar-dropdown__mark-all {
   font-size: 11px;
   color: var(--sp-color-accent);
   font-weight: 500;
   cursor: pointer;
 }

 .sp__notif-item {
   display: flex;
   gap: 10px;
   padding: 11px 16px;
   border-bottom: 1px solid var(--sp-color-border-light);
   cursor: pointer;
   transition: background var(--sp-transition);
 }

 .sp__notif-item:hover {
   background: var(--sp-color-bg);
 }

 .sp__notif-item--unread {
   background: var(--sp-color-accent-soft);
 }

 .sp__notif-item--unread:hover {
   background: #d6e9f7;
 }

 .sp__notif-item__icon {
   width: 30px;
   height: 30px;
   border-radius: var(--sp-radius-xs);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   flex-shrink: 0;
 }

 .sp__notif-item__icon--info {
   background: var(--sp-color-accent-soft);
   color: var(--sp-color-accent);
 }

 .sp__notif-item__icon--warn {
   background: #FFF3CD;
   color: var(--sp-color-warning);
 }

 .sp__notif-item__icon--success {
   background: #E8F5ED;
   color: var(--sp-color-success);
 }

 .sp__notif-item__text {
   font-size: 12.5px;
   color: var(--sp-color-text-primary);
   line-height: 1.4;
 }

 .sp__notif-item__time {
   font-size: 11px;
   color: var(--sp-color-text-muted);
   margin-top: 2px;
 }

 .sp__topbar-dropdown__footer {
   padding: 10px 16px;
   text-align: center;
 }

 .sp__topbar-dropdown__see-all {
   font-size: 12px;
   color: var(--sp-color-accent);
   font-weight: 500;
   cursor: pointer;
 }

 /* USER MENU */
 .sp__user-menu-wrap {
   position: relative;
 }

 .sp__user-trigger {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 5px 8px;
   border-radius: var(--sp-radius-sm);
   cursor: pointer;
   transition: background var(--sp-transition);
 }

 .sp__user-trigger:hover {
   background: var(--sp-color-primary-light);
 }

 .sp__user-trigger__avatar {
   width: 32px;
   height: 32px;
   border-radius: var(--sp-radius-xs);
   background: var(--sp-color-primary);
   color: #fff;
   font-size: 13px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   letter-spacing: .5px;
 }

 .sp__user-trigger__name {
   font-size: 13px;
   font-weight: 600;
   color: var(--sp-color-text-primary);
   line-height: 1.2;
   white-space: nowrap;
 }

 .sp__user-trigger__role {
   font-size: 10.5px;
   color: var(--sp-color-text-muted);
   font-weight: 400;
 }

 .sp__user-trigger__chevron {
   font-size: 10px;
   color: var(--sp-color-text-muted);
   transition: transform var(--sp-transition);
 }

 .sp__user-menu-wrap--open .sp__user-trigger__chevron {
   transform: rotate(180deg);
 }

 .sp__user-dropdown {
   display: none;
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
   background: var(--sp-color-surface);
   border: 1px solid var(--sp-color-border);
   border-radius: var(--sp-radius-sm);
   box-shadow: var(--sp-shadow-lg);
   width: 240px;
   z-index: 1000;
   overflow: hidden;
 }

 .sp__user-menu-wrap--open .sp__user-dropdown {
   display: block;
 }

 .sp__user-dropdown__profile {
   padding: 16px;
   background: var(--sp-color-primary-light);
   border-bottom: 1px solid var(--sp-color-border);
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .sp__user-dropdown__avatar-lg {
   width: 42px;
   height: 42px;
   border-radius: var(--sp-radius-xs);
   background: var(--sp-color-primary);
   color: #fff;
   font-size: 17px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .sp__user-dropdown__fullname {
   font-size: 14px;
   font-weight: 600;
   color: var(--sp-color-text-primary);
 }

 .sp__user-dropdown__email {
   font-size: 11.5px;
   color: var(--sp-color-text-muted);
   font-family: var(--sp-font-mono);
 }

 .sp__user-dropdown__role-badge {
   display: inline-flex;
   align-items: center;
   margin-top: 4px;
   font-size: 10px;
   font-weight: 600;
   color: var(--sp-color-accent);
   background: var(--sp-color-accent-soft);
   padding: 2px 7px;
   border-radius: var(--sp-radius-xs);
   letter-spacing: .4px;
   text-transform: uppercase;
 }

 .sp__user-dropdown__menu-section {
   padding: 6px 0;
   border-bottom: 1px solid var(--sp-color-border-light);
 }

 .sp__user-dropdown__menu-section:last-child {
   border-bottom: none;
 }

 .sp__user-dropdown__menu-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 16px;
   font-size: 13px;
   color: var(--sp-color-text-secondary);
   cursor: pointer;
   transition: background var(--sp-transition), color var(--sp-transition);
 }

 .sp__user-dropdown__menu-item:hover {
   background: var(--sp-color-bg);
   color: var(--sp-color-text-primary);
 }

 .sp__user-dropdown__menu-item--danger {
   color: var(--sp-color-danger);
 }

 .sp__user-dropdown__menu-item--danger:hover {
   background: #FDF0EF;
   color: var(--sp-color-danger);
 }

 .sp__user-dropdown__menu-item i {
   width: 16px;
   text-align: center;
   font-size: 13px;
 }

 /* CENTRAL CONTENT */
 .sp__central-content {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 28px;
   background: var(--sp-color-bg);
 }

 /* Demo welcome */
 .sp__welcome-block {
   background: var(--sp-color-surface);
   border: 1px solid var(--sp-color-border);
   border-radius: var(--sp-radius-sm);
   padding: 36px 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   box-shadow: var(--sp-shadow-xs);
 }

 .sp__welcome-block__title {
   font-size: 22px;
   font-weight: 700;
   color: var(--sp-color-text-primary);
   letter-spacing: -.4px;
 }

 .sp__welcome-block__subtitle {
   font-size: 13.5px;
   color: var(--sp-color-text-secondary);
   margin-top: 6px;
   line-height: 1.6;
   max-width: 480px;
 }

 .sp__welcome-block__illustration {
   font-size: 64px;
   line-height: 1;
   opacity: .15;
   flex-shrink: 0;
   color: var(--sp-color-primary);
 }

 .sp__kpi-row {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 16px;
   margin-top: 20px;
 }

 .sp__kpi-card {
   background: var(--sp-color-surface);
   border: 1px solid var(--sp-color-border);
   border-radius: var(--sp-radius-sm);
   padding: 20px;
   box-shadow: var(--sp-shadow-xs);
 }

 .sp__kpi-card__label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .8px;
   text-transform: uppercase;
   color: var(--sp-color-text-muted);
 }

 .sp__kpi-card__value {
   font-size: 1.3em;
   font-weight: 700;
   color: var(--sp-color-text-primary);
   margin-top: 6px;
   font-family: var(--sp-font-mono);
   letter-spacing: -1px;
 }

 .sp__kpi-card__delta {
   font-size: 12px;
   color: var(--sp-color-success);
   margin-top: 4px;
 }

 .sp__kpi-card__icon {
   font-size: 22px;
   color: var(--sp-color-accent);
   margin-bottom: 10px;
 }

 /* OVERLAY */
 .sp__overlay {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 150;
   background: transparent;
 }

 .sp__overlay--active {
   display: block;
   z-index: 1;
 }