/* Theme engine + shell styles, taken from the source dashboard page. */
html.theme-blue    { --p-50:#EEF2FF; --p-100:#DCE4FE; --p-200:#B7C6FD; --p-300:#8FA3FC; --p-400:#4E6EFA; --p-500:#023DFB; --p-600:#0233D6; --p-700:#0229AD; --p-800:#021F82; --p-900:#011658; }
html.theme-violet  { --p-50:#F5F3FF; --p-100:#EDE9FE; --p-200:#DDD6FE; --p-300:#C4B5FD; --p-400:#A78BFA; --p-500:#7C3AED; --p-600:#6D28D9; --p-700:#5B21B6; --p-800:#4C1D95; --p-900:#3B1470; }
html.theme-emerald { --p-50:#ECFDF5; --p-100:#D1FAE5; --p-200:#A7F3D0; --p-300:#6EE7B7; --p-400:#34D399; --p-500:#059669; --p-600:#047857; --p-700:#065F46; --p-800:#064E3B; --p-900:#022C22; }
html.theme-rose    { --p-50:#FFF1F2; --p-100:#FFE4E6; --p-200:#FECDD3; --p-300:#FDA4AF; --p-400:#FB7185; --p-500:#E11D48; --p-600:#BE123C; --p-700:#9F1239; --p-800:#881337; --p-900:#4C0519; }
html.theme-amber   { --p-50:#FFFBEB; --p-100:#FEF3C7; --p-200:#FDE68A; --p-300:#FCD34D; --p-400:#FBBF24; --p-500:#D97706; --p-600:#B45309; --p-700:#92400E; --p-800:#78350F; --p-900:#451A03; }

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { font-family: 'Inter', sans-serif; background: #F4F6FB; }
html.dark body { background: #0B0F19; }

::selection { background: var(--p-200); }
.scrollbar-thin::-webkit-scrollbar { width: 5px; height: 5px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
html.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: #334155; }

#announce-bar { background: linear-gradient(90deg, var(--p-700), var(--p-500), var(--p-700)); background-size: 200% 100%; animation: shimmer 6s linear infinite; }
@keyframes shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
#announce-track { animation: marquee 22s linear infinite; }
#announce-track:hover { animation-play-state: paused; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

#topnav { background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
html.dark #topnav { background: rgba(15,20,32,0.85); }
.nav-item-btn.open { background: #0F172A !important; color: #fff !important; }
html.dark .nav-item-btn.open { background: #1E293B !important; }
.mega-menu { transition: opacity .16s ease, transform .16s ease; transform-origin: top center; }
.mega-hidden { opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; visibility: hidden; }

#sidebar { width: 264px; transition: width .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1); }
#main-wrapper { transition: margin-left .28s cubic-bezier(.4,0,.2,1); }
@media (min-width: 1280px) {
  #main-wrapper { margin-left: 264px; }
  body.sidebar-collapsed #sidebar { width: 80px; }
  body.sidebar-collapsed #main-wrapper { margin-left: 80px; }
  body.sidebar-collapsed .sb-label { display: none !important; }
  body.sidebar-collapsed .sb-link { justify-content: center; }
}
@media (max-width: 1279px) {
  #sidebar { position: fixed; transform: translateX(-100%); }
  body.mobile-sidebar-open #sidebar { transform: translateX(0); }
}
.sb-link.active { background: linear-gradient(135deg, var(--p-500), var(--p-600)); color: #fff; box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--p-500) 45%, transparent); }
.sb-link.active svg { color: #fff; }
.sb-link:not(.active):hover { background: #F1F5FB; }
html.dark .sb-link:not(.active):hover { background: #1E293B; }

.panel-slide { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.panel-slide.closed { transform: translateX(100%); }
.panel-overlay { transition: opacity .3s ease; }
.search-modal { transition: opacity .18s ease, transform .18s ease; }
.search-hidden { opacity: 0; transform: scale(0.96); pointer-events: none; }

.fab-pop { transition: opacity .16s ease, transform .16s ease; transform-origin: bottom right; }
.fab-pop.hidden-pop { opacity: 0; transform: translateY(8px) scale(0.95); pointer-events: none; }

@keyframes pulseDot { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.pulse-dot { animation: pulseDot 1.6s ease-in-out infinite; }

.hp-host { display: contents; }